/* ═══════════════════════════════════════════════════
   TRIBAL SAND · Luxury Booking Widget
   Inspired by Claris / Seven Island aesthetic
   ═══════════════════════════════════════════════════ */

/* Booking design tokens — global so .dp-btn / .booking-field render
   correctly wherever the datepicker is used (property enquiry forms,
   room subpages, trip builder, ad landing), not just inside .bk-avail. */
:root {
  --bk-sand:      #B8965A;
  --bk-sand-lt:   #D4B07A;
  --bk-sand-pale: rgba(184,150,90,.13);
  --bk-teal:      #1E5C6B;
  --bk-teal-d:    #102F3A;
  --bk-ink:       #141412;
  --bk-mid:       #6B6050;
  --bk-light:     #A89880;
  --bk-border:    rgba(184,150,90,.18);
  --bk-off:       #FAF8F4;
  --ease: cubic-bezier(.4,0,.2,1);
}

.bk-avail {
  /* legacy alias kept for booking-widget.js compat */
  --primary:    var(--bk-teal);
  --accent:     var(--bk-ink);
  --text-light: var(--bk-mid);

  font-family: 'Jost', sans-serif;
  font-size: 14px;
  color: var(--bk-ink);
}

/* Selected-room label — updated when a guest taps a room card's "Check availability". */
.bk-room-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  color: var(--bk-teal, #1E5C6B);
  padding: 0 0 .55rem;
  margin: 0 0 .3rem;
  border-bottom: 1px solid #f0e9df;
}
.bk-room-label[hidden] { display: none; }

.bk-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* ── CHECK-IN / CHECK-OUT trigger row ────────────── */
.bk-dates-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border: 1px solid var(--bk-border);
  margin-bottom: 10px;
}

.bk-date-trigger {
  display: flex;
  flex-direction: column;
  padding: 14px 18px 13px;
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  font: inherit;
  color: inherit;
  position: relative;
  transition: background .15s;
}
.bk-date-trigger:first-child { border-right: 1px solid var(--bk-border); }
.bk-date-trigger:hover       { background: var(--bk-off); }

.bk-date-trigger[aria-expanded="true"] { background: var(--bk-off); }
.bk-date-trigger[aria-expanded="true"]::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: var(--bk-sand);
  z-index: 2;
}

.bk-date-trigger__label {
  font-family: 'Jost', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--bk-sand);
  margin-bottom: 5px;
}

.bk-date-trigger__value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px; font-weight: 400;
  color: var(--bk-ink);
  line-height: 1;
}
.bk-date-trigger__value.is-empty {
  font-family: 'Jost', sans-serif;
  font-size: 13px; font-style: italic;
  color: var(--bk-light);
}

/* ── Guests pill ──────────────────────────────────── */
.bk-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--bk-border);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--bk-ink);
  transition: border-color .18s var(--ease);
  margin-bottom: 10px;
}
.bk-pill:hover              { border-color: var(--bk-sand); }
.bk-pill[aria-expanded="true"] { border-color: var(--bk-sand); }

.bk-pill__label {
  font-size: 9px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--bk-sand);
  flex-shrink: 0;
}
.bk-pill__value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px; font-weight: 400;
  color: var(--bk-ink);
  flex: 1; text-align: right;
}
.bk-pill__chev {
  color: var(--bk-light);
  transition: transform .2s var(--ease);
  flex-shrink: 0;
}
.bk-pill[aria-expanded="true"] .bk-pill__chev { transform: rotate(180deg); color: var(--bk-sand); }

/* ── Popover container ────────────────────────────── */
.bk-pop {
  position: absolute;
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--bk-border);
  box-shadow: 0 28px 72px rgba(20,20,18,.13), 0 6px 22px rgba(20,20,18,.06);
  padding: 24px;
  z-index: 60;
  margin-top: 4px;
  animation: bkPopIn .18s var(--ease);
}
.bk-pop[hidden] { display: none !important; }
.bk-pop--narrow { left: auto; min-width: 290px; }

@keyframes bkPopIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Two-month calendar layout ────────────────────── */
.bk-cal-months {
  display: flex;
  gap: 28px;
}
.bk-cal { flex: 1; min-width: 0; }

.bk-cal__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.bk-cal__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px; font-weight: 400;
  color: var(--bk-ink);
  letter-spacing: .02em;
}
.bk-cal__nav {
  width: 28px; height: 28px;
  border: 1px solid var(--bk-border);
  background: #fff;
  color: var(--bk-mid);
  cursor: pointer; font-size: 17px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
  padding: 0;
  flex-shrink: 0;
}
.bk-cal__nav:hover        { background: var(--bk-sand); color: #fff; border-color: var(--bk-sand); }
.bk-cal__nav--hidden      { visibility: hidden; pointer-events: none; }

.bk-cal__dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-family: 'Jost', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--bk-light);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bk-border);
  margin-bottom: 4px;
}

.bk-cal__grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
}

/* ── Calendar day cells ──────────────────────────── */
.bk-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Jost', sans-serif;
  font-size: 12.5px; font-weight: 400;
  cursor: pointer;
  color: var(--bk-ink);
  border-radius: 0;
  position: relative;
  transition: background .1s, color .1s;
  user-select: none;
}
.bk-cell:hover:not(.bk-cell--blocked):not(.bk-cell--blank) {
  background: var(--bk-sand-pale);
}

.bk-cell--blank   { cursor: default; }
.bk-cell--blocked {
  color: var(--bk-light); cursor: not-allowed;
  text-decoration: line-through; opacity: .4;
}

/* Selected endpoints: sand gold */
.bk-cell--start,
.bk-cell--end {
  background: var(--bk-sand) !important;
  color: #fff !important;
  font-weight: 600;
  z-index: 1;
}

/* Range band — extends to cell edges */
.bk-cell--in-range {
  background: var(--bk-sand-pale);
  border-radius: 0;
}
.bk-cell--hover-range {
  background: rgba(184,150,90,.07);
  border-radius: 0;
}

/* Half-cell band extending from start/end into range */
.bk-cell--start::after,
.bk-cell--end::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; width: 50%;
  background: var(--bk-sand-pale);
  z-index: -1;
}
.bk-cell--start::after { right: 0; left: auto; }
.bk-cell--end::before  { left: 0; right: auto; }
.bk-cell--start.bk-cell--end::after,
.bk-cell--start.bk-cell--end::before { display: none; }

/* ── Popover footer ──────────────────────────────── */
.bk-pop__footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--bk-border);
  gap: 12px;
}
.bk-pop__footer--end { justify-content: flex-end; }
.bk-pop__hint {
  font-family: 'Jost', sans-serif;
  font-size: 11.5px; color: var(--bk-mid);
  letter-spacing: .03em;
}
.bk-pop__cta {
  background: var(--bk-sand); color: #fff;
  border: 0;
  padding: 9px 22px;
  font-family: 'Jost', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
}
.bk-pop__cta:hover { background: var(--bk-teal-d); }

/* ── Guests stepper ──────────────────────────────── */
.bk-stepper-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; gap: 14px;
}
.bk-stepper-row + .bk-stepper-row { border-top: 1px solid var(--bk-border); }
.bk-stepper-row__label strong {
  display: block; font-family: 'Jost', sans-serif;
  font-size: 13px; color: var(--bk-ink); font-weight: 500;
}
.bk-stepper-row__label small {
  display: block; font-size: 11px; color: var(--bk-mid); margin-top: 2px;
}

.bk-stepper { display: inline-flex; align-items: center; gap: 14px; }
.bk-stepper button {
  width: 30px; height: 30px;
  border: 1px solid var(--bk-border); background: #fff;
  color: var(--bk-ink); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
  line-height: 1;
}
.bk-stepper button:hover:not(:disabled) {
  background: var(--bk-sand); color: #fff; border-color: var(--bk-sand);
}
.bk-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.bk-stepper span { min-width: 20px; text-align: center; font-weight: 500; }

/* ── Total summary card ──────────────────────────── */
.bk-total {
  background: var(--bk-off);
  border: 1px solid var(--bk-border);
  border-left: 2px solid var(--bk-sand);
  padding: 13px 16px;
  margin-bottom: 10px;
}
.bk-total__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.bk-total__label { font-size: 11px; color: var(--bk-mid); }
.bk-total__price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px; font-weight: 400; color: var(--bk-ink);
}
.bk-total__hint { font-size: 11px; color: var(--bk-light); margin-top: 4px; }

/* ── Contact fields ──────────────────────────────── */
.bk-fields { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 10px; }
.bk-field  { display: flex; flex-direction: column; gap: 5px; }
.bk-field > span {
  font-size: 9px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--bk-sand);
}
.bk-field > span small {
  font-size: 9px; text-transform: none;
  color: var(--bk-light); letter-spacing: 0; margin-left: 4px;
}
.bk-field input,
.bk-field textarea {
  font: inherit; font-size: 14px;
  color: var(--bk-ink);
  border: 1px solid var(--bk-border);
  padding: 10px 12px;
  background: #fff;
  transition: border-color .15s;
  width: 100%;
  border-radius: 0;
}
.bk-field input:focus,
.bk-field textarea:focus { outline: none; border-color: var(--bk-sand); }
.bk-field textarea { resize: vertical; min-height: 60px; }

/* ── Feedback ────────────────────────────────────── */
.bk-feedback {
  background: #fef1f1; border: 1px solid #f4c0c0;
  padding: 10px 14px; color: #8a1f1f;
  font-size: 13px; margin-bottom: 8px;
}

/* ── Submit button ───────────────────────────────── */
.bk-submit {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--bk-teal); color: #fff;
  border: 0;
  padding: 16px 20px;
  font-family: 'Jost', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  cursor: pointer; width: 100%;
  transition: background .18s var(--ease);
}
.bk-submit:hover    { background: var(--bk-teal-d); }
.bk-submit:disabled { opacity: .65; cursor: wait; }

.bk-hold-note {
  font-size: 11px; color: var(--bk-light);
  text-align: center; margin: 8px 0 0;
  letter-spacing: .04em;
}

/* ── Success state ───────────────────────────────── */
.bk-success {
  background: var(--bk-off);
  border: 1px solid var(--bk-border);
  border-top: 2px solid var(--bk-sand);
  padding: 28px 24px; text-align: center;
}
.bk-success__icon   { width: 44px; height: 44px; margin: 0 auto 14px; color: var(--bk-sand); }
.bk-success__title  {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 400; color: var(--bk-ink);
  margin: 0 0 8px;
}
.bk-success__body   { font-size: 13px; color: var(--bk-mid); line-height: 1.7; margin: 0; }

/* ── Availability hint tones ─────────────────────── */
.bk-pop__hint[data-tone="ok"]      { color: #1f7a4a; font-weight: 600; }
.bk-pop__hint[data-tone="bad"]     { color: #b91c1c; font-weight: 600; }
.bk-pop__hint[data-tone="loading"] { color: var(--bk-mid); font-style: italic; }

/* ── Mobile ──────────────────────────────────────── */
@media (max-width: 768px) {
  .bk-pop { padding: 16px; left: 0; right: 0; }
  .bk-pop--narrow { left: 0; right: 0; min-width: auto; }
  .bk-cal-months  { flex-direction: column; gap: 20px; }
  .bk-cal--right  { display: none; }   /* single month on mobile */
  .bk-date-trigger { padding: 12px 14px; }
  .bk-date-trigger__value { font-size: 16px; }
  .bk-submit { padding: 15px; }
}

/* ══ ENQUIRY FORM (form-enquiry.php) ══════════════════
   Shared field styles for booking-field + dp-btn + booking-step
   ═════════════════════════════════════════════════════ */

/* dp-btn: datepicker trigger used in enquiry form */
.dp-btn {
  display: block; width: 100%;
  background: #fff;
  border: 1px solid var(--bk-border);
  padding: 10px 12px;
  font: inherit; font-size: 14px;
  color: var(--bk-light);
  text-align: left; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.dp-btn:hover,
.dp-btn:focus          { outline: none; border-color: var(--bk-sand); }
.dp-btn--active        { color: var(--bk-ink); font-weight: 500; }

/* dp-pop: floating calendar popup (appended to body by datepicker.js) */
.dp-pop {
  position: fixed; z-index: 9999;
  background: #fff;
  border: 1px solid var(--bk-border);
  box-shadow: 0 20px 56px rgba(20,20,18,.13), 0 4px 16px rgba(20,20,18,.06);
  padding: 20px;
  width: 310px;
}
.dp-pop[hidden] { display: none; }

/* dp-pop reuses .bk-cal, .bk-cell, .bk-pop__footer, .bk-pop__cta, .bk-pop__hint */

/* booking-field: label row used in enquiry form */
.booking-field {
  display: flex; flex-direction: column;
  gap: 5px; margin-bottom: 12px;
}
.booking-field > span {
  font-family: 'Jost', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--bk-sand);
}
.booking-field > span small {
  font-size: 9px; text-transform: none;
  color: var(--bk-light); letter-spacing: 0; margin-left: 4px;
}
.booking-field input,
.booking-field textarea {
  font: inherit; font-size: 14px; color: var(--bk-ink);
  border: 1px solid var(--bk-border);
  padding: 10px 12px; background: #fff;
  transition: border-color .15s; width: 100%;
}
.booking-field input:focus,
.booking-field textarea:focus { outline: none; border-color: var(--bk-sand); }
.booking-field textarea { resize: vertical; min-height: 60px; }

.booking-field--row {
  flex-direction: row; align-items: center; justify-content: space-between;
}
.booking-field--row > span { margin-bottom: 0; }

/* booking-step: +/- stepper in enquiry form */
.booking-step { display: inline-flex; align-items: center; gap: 12px; }
.booking-step button {
  width: 30px; height: 30px;
  border: 1px solid var(--bk-border); background: #fff;
  color: var(--bk-ink); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.booking-step button:hover { background: var(--bk-sand); color: #fff; border-color: var(--bk-sand); }
.booking-step span { min-width: 20px; text-align: center; font-weight: 500; }

/* Enquiry form submit button */
.btn--primary.booking-card__submit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--bk-teal); color: #fff;
  border: 0; padding: 14px 20px; width: 100%;
  font-family: 'Jost', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  cursor: pointer;
  transition: background .18s;
}
.btn--primary.booking-card__submit:hover { background: var(--bk-teal-d); }

/* Enquiry form feedback */
.form-feedback {
  background: #fef1f1; border: 1px solid #f4c0c0;
  padding: 10px 14px; color: #8a1f1f;
  font-size: 13px; margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════
   PROPERTY SIDEBAR — booking widget inside .book-card
   Shared by every venue overview page (My Amani, Maya Kobe,
   Zuri, Enkare Bofa, Sandbox, Maya Ilai) so both modes —
   the availability calendar and the enquiry form — render
   with identical spacing in the narrow sidebar. Previously
   these overrides lived only in My Amani's inline <style>,
   so the other pages rendered edge-to-edge / oversized.
   ═══════════════════════════════════════════════════ */
.book-body { padding: 0; }

/* Consistent inset for whichever widget mode renders */
.book-body .bk-avail,
.book-body .room-enquiry-form { padding: 1rem 1.2rem; }

/* Compact the availability widget so two-month calendar + fields
   fit the ~380px sidebar without crowding the edges */
.book-body .bk-form    { gap: .6rem; }
.book-body .bk-fields  { gap: .5rem; }
.book-body .bk-field span { font-size: 10px; }
.book-body .bk-field input,
.book-body .bk-field textarea { padding: .5rem .65rem; font-size: 13px; }
.book-body .bk-total   { padding: .65rem .8rem; margin-bottom: 0; }
.book-body .bk-submit  { padding: .8rem; }
.book-body .bk-hold-note { font-size: 10px; }