/* Yeşil Hayat booking form — presentation.
 *
 * Served from /embed/yh-form.css so that BOTH surfaces (the Rezervasyon page and
 * the bungalow product pages) load the same bytes. Keeping a copy inside each
 * WordPress page would let them drift — the same failure that once had 1500 in
 * the database while the site advertised 4000.
 *
 * Everything is scoped under #yh-booking. An Elementor page and a WooCommerce
 * product page each bring their own reset, grid and button styles, and this must
 * not touch any of them.
 */

/* Everything is scoped under #yh-booking: an Elementor page has its own
   reset, grid and button styles, and this must not touch any of them. */
#yh-booking {
  --yh-ink: #1f2a24;
  --yh-muted: #6b7a72;
  --yh-line: #d9e2dc;
  --yh-accent: #2f6b4f;      /* Yeşil Hayat — green, but not the theme's green */
  --yh-bad: #a3312a;
  --yh-radius: 10px;
  max-width: 680px;
  margin: 0 auto;
  font-family: inherit;       /* look like the site, not like a widget */
  color: var(--yh-ink);
  line-height: 1.45;
  box-sizing: border-box;
}
#yh-booking *, #yh-booking *::before, #yh-booking *::after { box-sizing: inherit; }

/* The [hidden] attribute is only `display:none` from the UA stylesheet, so any
   author `display` rule beats it — .yh-grid is `display:grid` and stayed on
   screen after a successful booking, inviting a second submission. */
#yh-booking [hidden] { display: none !important; }

#yh-booking .yh-title { margin: 0 0 .25rem; font-size: 1.35rem; }
#yh-booking .yh-lede { margin: 0 0 1.1rem; color: var(--yh-muted); font-size: .93rem; }

/* auto-fit, NOT a viewport media query.
 *
 * A media query asks how wide the SCREEN is. This form has to work in two very
 * different boxes: a 680px column on the Rezervasyon page, and a ~270px sidebar
 * on a bungalow product page — on the same desktop screen. `@media (max-width:
 * 520px)` never fires in that sidebar, so it would have crammed two columns into
 * 270px and gone right past the reviewer, because it looks fine at every window
 * size you would think to test.
 *
 * auto-fit asks how wide the CONTAINER is instead, so one rule is correct in
 * both boxes and on a phone.
 *
 * The 230px minimum is chosen, not guessed. With a 12px gap it means:
 *   two columns need  2*230 + 12  = 472px  -> fits the 680px page column
 *   three would need  3*230 + 24  = 714px  -> more than max-width, so never
 *   one column below 472px                 -> the 270px sidebar, and phones
 * At 190px a third column fitted the page column and the form came out in three,
 * which is how this was caught: by measuring the rendered tracks, not by looking. */
#yh-booking .yh-grid {
  display: grid;
  /* min(230px, 100%) because minmax(230px, ...) forces a 230px track even in a
   * container narrower than that — the theme's booking panel is 220px inside its
   * padding, and the form overflowed it by 10px. The min() clamps the track to
   * the container when the container is the smaller of the two. */
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: .75rem;
}
#yh-booking .yh-span2 { grid-column: 1 / -1; }

#yh-booking .yh-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
#yh-booking .yh-field > span { font-size: .82rem; font-weight: 600; }
#yh-booking .yh-field em { font-weight: 400; color: var(--yh-muted); font-style: normal; }

#yh-booking input, #yh-booking select, #yh-booking textarea {
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--yh-line);
  border-radius: var(--yh-radius);
  font: inherit;
  font-size: .95rem;          /* >=16px on iOS avoids the zoom-on-focus jump */
  color: inherit;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}
#yh-booking input:focus, #yh-booking select:focus, #yh-booking textarea:focus {
  outline: 2px solid var(--yh-accent);
  outline-offset: 1px;
  border-color: var(--yh-accent);
}
#yh-booking textarea { resize: vertical; }

/* Off-screen rather than display:none — some bots skip hidden fields. */
#yh-booking .yh-hp {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

#yh-booking .yh-quote {
  margin-top: 1rem; padding: .8rem .9rem;
  background: #f2f7f4; border: 1px solid var(--yh-line);
  border-radius: var(--yh-radius);
}
#yh-booking .yh-quote .yh-total { font-size: 1.3rem; font-weight: 700; }
#yh-booking .yh-quote .yh-break { color: var(--yh-muted); font-size: .87rem; }

#yh-booking .yh-taken {
  margin-top: .6rem; font-size: .84rem; color: var(--yh-muted);
}
#yh-booking .yh-taken b { color: var(--yh-ink); font-weight: 600; }

#yh-booking .yh-msg {
  margin-top: .8rem; padding: .7rem .8rem;
  border-radius: var(--yh-radius); font-size: .9rem;
  border: 1px solid var(--yh-bad); color: var(--yh-bad); background: #fdf3f2;
}
#yh-booking .yh-msg.yh-ok {
  border-color: var(--yh-accent); color: #1d4634; background: #eef6f1;
}

#yh-booking .yh-btn {
  margin-top: 1rem; width: 100%;
  padding: .85rem 1rem;
  border: 0; border-radius: var(--yh-radius);
  background: var(--yh-accent); color: #fff;
  font: inherit; font-size: 1rem; font-weight: 600;
  cursor: pointer;
}
#yh-booking .yh-btn:hover:not(:disabled) { filter: brightness(1.08); }
#yh-booking .yh-btn:disabled { opacity: .55; cursor: not-allowed; }

#yh-booking .yh-fine {
  margin: .6rem 0 0; text-align: center;
  font-size: .8rem; color: var(--yh-muted);
}

/* The old WooCommerce booking form on bungalow product pages.
 *
 * Scoped as a sibling selector rather than a blanket `.single-product form.cart`
 * so it can only ever hide a form that this form has been placed in front of.
 * On any other product the add-to-cart button is untouched. */
#yh-booking + form.cart { display: none !important; }