/* Book Kalkan — booking UI: availability calendar, quote widget, booking form,
   date search widget, preview banner. Built on the shared tokens. */

/* ─── Availability calendar ─────────────────────────────── */
.cal { --cal-free: #eef7ee; --cal-booked: #f6e8e6; }
.cal__nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
}
.cal__hint { font-size: 0.9375rem; color: var(--color-ink-soft); text-align: center; }
.cal__hint strong { color: var(--color-ink); }
.cal__nav-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid rgba(17,46,69,0.2); background: var(--color-chalk);
  color: var(--color-ink); font-size: 1.25rem; cursor: pointer;
  transition: background var(--dur-fast, 160ms) var(--ease-out, ease);
}
.cal__nav-btn:hover:not([disabled]) { background: var(--color-linen); }
.cal__nav-btn[disabled] { opacity: 0.35; cursor: default; }
.cal__months {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(var(--cal-months, 2), minmax(0, 1fr));
}
@media (max-width: 720px) { .cal__months { grid-template-columns: 1fr; } }
.cal__month-name {
  font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-ink); margin-bottom: 0.75rem; text-align: center; font-weight: 600;
}
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal__grid--head { margin-bottom: 2px; }
.cal__wd {
  font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-driftwood); text-align: center; padding: 0.25rem 0;
}
.cal__cell {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1px; aspect-ratio: 1 / 1.05; min-height: 44px;
  border: 1px solid transparent; background: var(--color-limewash);
  font: inherit; color: var(--color-ink); cursor: pointer; padding: 2px;
}
.cal__cell--pad { background: transparent; cursor: default; }
.cal__day { font-size: 0.875rem; font-weight: 500; line-height: 1; }
.cal__price { font-size: 0.625rem; color: var(--color-driftwood); line-height: 1; font-variant-numeric: tabular-nums; }
.cal__cell--free { background: var(--cal-free); }
.cal__cell--free:hover { border-color: var(--color-ink); }
.cal__cell--past, .cal__cell[disabled] { cursor: default; color: rgba(17,46,69,0.3); background: var(--color-limewash); }
.cal__cell--booked { background: var(--cal-booked); color: rgba(17,46,69,0.35); text-decoration: line-through; }
.cal__cell--unpriced { background: var(--color-limewash); color: rgba(17,46,69,0.35); }
.cal__cell--range { background: var(--color-linen); border-color: rgba(17,46,69,0.12); }
.cal__cell--in, .cal__cell--out {
  background: var(--color-ink); color: var(--color-chalk);
}
.cal__cell--in .cal__price, .cal__cell--out .cal__price { color: rgba(255,255,255,0.7); }
.cal__legend { margin-top: 0.9rem; font-size: 0.75rem; color: var(--color-driftwood); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.cal__lg { display: inline-block; width: 12px; height: 12px; border: 1px solid rgba(17,46,69,0.15); }
.cal__lg--free { background: var(--cal-free); }
.cal__lg--booked { background: var(--cal-booked); }

/* ─── Quote widget (sticky aside on the villa page) ─────── */
.quote-card {
  background: var(--color-linen); padding: 1.75rem;
  border: 1px solid rgba(17,46,69,0.08);
}
.quote-card__price { font-size: 1.75rem; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.quote-card__price small { font-size: 0.9375rem; font-weight: 400; color: var(--color-ink-soft); }
.quote-card__dates {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 1.25rem;
}
.quote-card__date-box {
  border: 1px solid rgba(17,46,69,0.2); background: var(--color-chalk);
  padding: 0.6rem 0.75rem; font: inherit; text-align: left; cursor: pointer;
}
.quote-card__date-box .lbl { display: block; font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-driftwood); }
.quote-card__date-box .val { display: block; font-size: 0.9375rem; margin-top: 0.15rem; }
.quote-card__guests { margin-top: 0.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.quote-card__guests label { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-driftwood); display: block; }
.quote-card__guests select {
  width: 100%; margin-top: 0.25rem; padding: 0.5rem; font: inherit;
  border: 1px solid rgba(17,46,69,0.2); background: var(--color-chalk);
}
.quote__rows { margin-top: 1.25rem; border-top: 1px solid rgba(17,46,69,0.12); }
.quote__row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0; font-size: 0.9375rem; border-bottom: 1px solid rgba(17,46,69,0.08);
  font-variant-numeric: tabular-nums;
}
.quote__row--total { font-weight: 600; font-size: 1.0625rem; border-top: 2px solid var(--color-ink); }
.quote__row--muted { color: var(--color-driftwood); font-size: 0.8125rem; }
.quote__row--muted em { font-style: normal; }
.quote__msg { margin-top: 1rem; font-size: 0.875rem; color: #9c4a3c; line-height: 1.5; }
.quote__hint { margin-top: 1rem; font-size: 0.875rem; color: var(--color-driftwood); }
.quote-card .btn { width: 100%; justify-content: center; margin-top: 1.25rem; }

/* ─── Extras picker ─────────────────────────────────────── */
.extras-list { display: grid; gap: 0.5rem; }
.extra-row {
  display: flex; align-items: flex-start; gap: 0.75rem;
  border: 1px solid rgba(17,46,69,0.12); background: var(--color-chalk);
  padding: 0.85rem 1rem; cursor: pointer;
}
.extra-row input { margin-top: 0.2rem; }
.extra-row__name { font-weight: 500; }
.extra-row__desc { font-size: 0.8125rem; color: var(--color-ink-soft); margin-top: 0.15rem; }
.extra-row__price { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 500; }
.extra-row__basis { display: block; font-size: 0.6875rem; color: var(--color-driftwood); text-align: right; }

/* ─── Booking page layout ───────────────────────────────── */
.book-layout {
  display: grid; gap: 3rem; align-items: start;
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--content-max); margin: 0 auto; padding: 3rem var(--gutter) 5rem;
}
@media (min-width: 900px) { .book-layout { grid-template-columns: minmax(0, 1fr) 380px; } }
.book-summary { position: sticky; top: 96px; }
.book-form .form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.book-form .form-grid .form-field--full { grid-column: 1 / -1; }
.book-form label span { display: block; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-driftwood); margin-bottom: 0.35rem; }
.book-form input[type="text"], .book-form input[type="email"], .book-form input[type="tel"],
.book-form select, .book-form textarea {
  width: 100%; padding: 0.7rem 0.85rem; font: inherit;
  border: 1px solid rgba(17,46,69,0.2); background: var(--color-chalk); color: var(--color-ink);
}
.book-form textarea { min-height: 110px; resize: vertical; }
.book-terms { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.875rem; color: var(--color-ink-soft); margin-top: 1.25rem; }
.book-error {
  margin-top: 1rem; padding: 0.85rem 1rem; font-size: 0.9375rem;
  background: #f6e8e6; border: 1px solid #d8b3ab; color: #7c3a2d;
}

/* ─── Home search widget ────────────────────────────────── */
.stay-search {
  display: grid; gap: 0.5rem; margin-top: 2.25rem; padding: 0.75rem;
  background: rgba(255,255,255,0.94); backdrop-filter: blur(8px);
  grid-template-columns: 1fr; max-width: 720px;
}
@media (min-width: 720px) { .stay-search { grid-template-columns: 1.2fr 1.2fr 0.9fr auto; align-items: end; } }
.stay-search label { display: block; }
.stay-search label span {
  display: block; font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-driftwood); margin-bottom: 0.3rem;
}
.stay-search input, .stay-search select {
  width: 100%; padding: 0.65rem 0.75rem; font: inherit;
  border: 1px solid rgba(17,46,69,0.2); background: var(--color-chalk); color: var(--color-ink);
}
.stay-search .btn { width: 100%; justify-content: center; }

/* ─── Facts / key info on the villa page ────────────────── */
.house-rules { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.house-rules .chip--no { text-decoration: line-through; color: var(--color-driftwood); }
.licence-note { font-size: 0.75rem; color: var(--color-driftwood); margin-top: 1rem; }

/* ─── Reviews ───────────────────────────────────────────── */
.review-card {
  background: var(--color-chalk); border: 1px solid rgba(17,46,69,0.1);
  padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem;
}
.review-card__meta { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-driftwood); }
.review-card__title { font-weight: 600; }
.review-card__text { font-size: 0.9375rem; line-height: 1.6; color: var(--color-ink-soft); }
.reviews-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 2rem; }

/* ─── Confirmation page ─────────────────────────────────── */
.confirm-card {
  max-width: 640px; margin: 0 auto; background: var(--color-chalk);
  border: 1px solid rgba(17,46,69,0.1); padding: 2.5rem;
}
.confirm-card__ref { font-size: 0.8125rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-driftwood); }
.confirm-steps { margin-top: 1.5rem; display: grid; gap: 1rem; }
.confirm-steps li { display: flex; gap: 0.9rem; align-items: baseline; font-size: 0.9375rem; color: var(--color-ink-soft); }
.confirm-steps .n {
  flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center;
  background: var(--color-ink); color: var(--color-chalk); font-size: 0.75rem; border-radius: 50%;
}

/* ─── Test-mode (preview) banner ────────────────────────── */
.testmode-banner {
  position: fixed; inset: auto 0 0 0; z-index: 999;
  display: flex; justify-content: center; align-items: center; gap: 0.75rem;
  background: #8a5a00; color: #fff; padding: 0.6rem 1rem;
  font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.testmode-banner a { color: #ffd98a; text-underline-offset: 2px; }

/* Preview banner for draft villas (matches buykalkan's admin preview) */
.preview-banner {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  background: #113C5E; color: #fff; padding: 0.65rem var(--gutter); font-size: 0.875rem;
}
.preview-banner__dot { width: 8px; height: 8px; border-radius: 50%; background: #FFB020; }