/* ==========================================================================
   Eworld Safaris — booking experience (Phase 8)
   Quick-book bar, date picker, travellers, mobile sticky bar, safari packages.
   Prefix: .ewb-*   Colours follow the Theme manager (--primary / --accent / --secondary).
   Flat colours only — no gradients.
   ========================================================================== */
:root {
  --ewb-ink: var(--text-dark, #1F2937);
  --ewb-muted: var(--text-muted, #6B7280);
  --ewb-navy: var(--primary, #001853);
  --ewb-navy-rgb: var(--ew-primary-rgb, 0, 24, 83);
  --ewb-accent: var(--ew-btn-bg, var(--accent, #FF6B00));
  --ewb-accent-rgb: var(--ew-accent-rgb, 255, 107, 0);
  --ewb-accent-dk: var(--accent-hover, #E05E00);
  --ewb-teal: var(--secondary, #009ea9);
  --ewb-teal-rgb: var(--ew-secondary-rgb, 0, 158, 169);
  --ewb-line: #E6EAF3;
  --ewb-soft: #F3F6FB;
  --ewb-font: var(--font-body, 'Outfit', system-ui, sans-serif);
}

/* ---------- Quick-book bar (top of a safari page) ---------- */
.ewb-quick-wrap { position: relative; z-index: 6; margin-top: -68px; padding-bottom: 6px; font-family: var(--ewb-font); }
.ewb-quick {
  display: grid; grid-template-columns: minmax(210px, 1fr) minmax(0, 1.9fr) auto; align-items: center;
  background: #fff; border: 1px solid var(--ewb-line); border-radius: 26px; padding: 10px 12px 10px 6px;
  box-shadow: 0 34px 70px -34px rgba(var(--ewb-navy-rgb), .5), 0 2px 8px rgba(var(--ewb-navy-rgb), .06);
}
.ewb-q-price { padding: 6px 26px; border-right: 1px solid var(--ewb-line); min-width: 0; }
.ewb-q-price small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ewb-muted); }
.ewb-q-price .ewb-amt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0 1px; }
.ewb-q-price b { font-size: 31px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; color: var(--ewb-accent); white-space: nowrap; }
.ewb-q-price del { font-size: 14.5px; color: var(--ewb-muted); }
.ewb-save { display: inline-block; font-size: 11.5px; font-weight: 700; color: #E0314A; background: rgba(224, 49, 74, .1); border-radius: 999px; padding: 3px 10px; }
.ewb-q-price .ewb-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.ewb-q-price em { font-style: normal; font-size: 13px; color: var(--ewb-muted); }
.ewb-q-fields { display: grid; grid-template-columns: 1.15fr 1fr; min-width: 0; }
.ewb-q-fields > * { min-width: 0; }
.ewb-q-fields > * + * { border-left: 1px solid var(--ewb-line); }
.ewb-q-cta { display: flex; align-items: center; gap: 10px; padding-left: 12px; }
.ewb-book.btn-primary::before { --middle: 29px; left: -58px; width: calc(100% + 58px); transform-origin: 29px 29px; }  /* the template's hover sweep assumes a 48px button */
.ewb-sticky .btn-primary::before { --middle: 25px; left: -50px; width: calc(100% + 50px); transform-origin: 25px 25px; }
.ewb-book.btn { height: 58px; padding: 0 30px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; font-weight: 600; white-space: nowrap; border-radius: 999px; }
.ewb-wa { width: 58px; height: 58px; flex: 0 0 58px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #E8F8EE; color: #16A34A; font-size: 25px; text-decoration: none; transition: background .2s, color .2s, transform .2s; }
.ewb-wa:hover { background: #16A34A; color: #fff; transform: translateY(-2px); }
.ewb-quick-note { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin: 14px 0 0; font-size: 13.5px; color: var(--ewb-muted); }
.ewb-quick-note span { display: inline-flex; align-items: center; gap: 7px; }
.ewb-quick-note i { color: var(--ewb-teal); }
.ewb-quick-note a { color: var(--ewb-accent); font-weight: 600; text-decoration: none; }
.ewb-quick-note a:hover { text-decoration: underline; }

@media (max-width: 1199px) {
  .ewb-quick { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); row-gap: 8px; padding: 12px; }
  .ewb-q-price { border-right: 0; padding: 6px 16px; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
  .ewb-q-price .ewb-amt { margin: 0; }
  .ewb-q-fields { grid-column: 1 / -1; border-top: 1px solid var(--ewb-line); padding-top: 8px; }
  .ewb-q-cta { grid-column: 1 / -1; padding: 4px 4px 0; }
  .ewb-q-cta .ewb-book { flex: 1; }
}
@media (max-width: 767px) {
  .ewb-quick-wrap { margin-top: -54px; }
  .ewb-quick { border-radius: 22px; }
  .ewb-q-price b { font-size: 27px; }
  .ewb-q-fields { grid-template-columns: 1fr; }
  .ewb-q-fields > * + * { border-left: 0; border-top: 1px solid var(--ewb-line); }
  .ewb-quick-note { justify-content: flex-start; padding: 0 6px; }
}

/* ---------- Field buttons (date + travellers) ---------- */
.ewb-field {
  width: 100%; display: flex; align-items: center; gap: 13px; text-align: left; cursor: pointer;
  padding: 12px 18px; border: 0; border-radius: 18px; background: transparent; color: var(--ewb-ink); font-family: var(--ewb-font);
  transition: background .2s, box-shadow .2s;
}
.ewb-field:hover { background: var(--ewb-soft); }
.ewb-field:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--ewb-accent-rgb), .35); }
.ewb-field[aria-expanded="true"] { background: rgba(var(--ewb-accent-rgb), .08); }
.ewb-ico { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--ewb-accent-rgb), .1); color: var(--ewb-accent); font-size: 17px; }
.ewb-fv { flex: 1; min-width: 0; display: block; }
.ewb-fv small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ewb-muted); line-height: 1.3; }
.ewb-fv b { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.35; color: var(--ewb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ewb-field.is-empty .ewb-fv b { color: #8C97AB; font-weight: 500; }
.ewb-caret { font-size: 12px; color: #9AA5B8; transition: transform .2s; }
.ewb-field[aria-expanded="true"] .ewb-caret { transform: rotate(180deg); color: var(--ewb-accent); }
.ewb-date, .ewb-trav { display: block; position: relative; }
/* boxed variant — used inside forms (matches the portal inputs) */
.ewb-date.is-boxed .ewb-field, .ewb-trav.is-boxed .ewb-field { height: 54px; padding: 0 16px; border: 1.5px solid var(--ewb-line); border-radius: 15px; background: #FBFCFE; gap: 11px; }
.ewb-date.is-boxed .ewb-field:hover, .ewb-trav.is-boxed .ewb-field:hover { border-color: #CFD6E4; background: #fff; }
.ewb-date.is-boxed .ewb-field[aria-expanded="true"], .ewb-trav.is-boxed .ewb-field[aria-expanded="true"] { border-color: var(--ewb-accent); background: #fff; box-shadow: 0 0 0 4px rgba(var(--ewb-accent-rgb), .14); }
.ewb-date.is-boxed .ewb-ico, .ewb-trav.is-boxed .ewb-ico { flex-basis: 34px; width: 34px; height: 34px; font-size: 15px; }
.ewb-date.is-boxed .ewb-fv small, .ewb-trav.is-boxed .ewb-fv small { display: none; }
.ewb-date.is-boxed .ewb-fv b, .ewb-trav.is-boxed .ewb-fv b { font-size: 15.5px; }
/* without JS the native date input is shown */
.ewb-date > input[type="date"] { width: 100%; height: 54px; padding: 0 14px; border: 1.5px solid var(--ewb-line); border-radius: 15px; background: #FBFCFE; font: 500 15.5px var(--ewb-font); color: var(--ewb-ink); }

/* ---------- Popover / bottom sheet ---------- */
.ewb-backdrop { position: fixed; inset: 0; z-index: 2990; background: rgba(var(--ewb-navy-rgb), .5); opacity: 0; pointer-events: none; transition: opacity .2s; }
.ewb-pop {
  position: fixed; z-index: 3000; width: 378px; max-width: calc(100vw - 24px); box-sizing: border-box;
  background: #fff; border: 1px solid var(--ewb-line); border-radius: 24px; padding: 18px 18px 16px; font-family: var(--ewb-font); color: var(--ewb-ink);
  box-shadow: 0 44px 90px -30px rgba(var(--ewb-navy-rgb), .55), 0 4px 16px rgba(var(--ewb-navy-rgb), .08);
  opacity: 0; transform: translateY(10px) scale(.98); transform-origin: 20% 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.ewb-pop.is-open { opacity: 1; transform: none; pointer-events: auto; }
.ewb-grab { display: none; width: 44px; height: 5px; border-radius: 99px; background: #D5DBE8; margin: 0 auto 12px; }
.ewb-pop-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ewb-pop-top b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.ewb-pop-top small { display: block; color: var(--ewb-muted); font-size: 13px; margin-top: 1px; }
.ewb-x { flex: 0 0 36px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--ewb-soft); color: var(--ewb-navy); cursor: pointer; transition: background .2s, color .2s; }
.ewb-x:hover { background: var(--ewb-navy); color: #fff; }

.ewb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.ewb-chip { flex: 0 0 auto; border: 1.5px solid var(--ewb-line); background: #fff; color: var(--ewb-navy); font: 600 13px var(--ewb-font); padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: border-color .2s, background .2s, color .2s; white-space: nowrap; }
.ewb-chip:hover { border-color: var(--ewb-accent); color: var(--ewb-accent); background: rgba(var(--ewb-accent-rgb), .06); }

.ewb-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ewb-nav { flex: 0 0 40px; width: 40px; height: 40px; border: 1.5px solid var(--ewb-line); border-radius: 50%; background: #fff; color: var(--ewb-navy); cursor: pointer; font-size: 13px; transition: border-color .2s, background .2s, color .2s; }
.ewb-nav:hover:not(:disabled) { border-color: var(--ewb-accent); color: var(--ewb-accent); background: rgba(var(--ewb-accent-rgb), .06); }
.ewb-nav:disabled { opacity: .35; cursor: not-allowed; }
.ewb-cal-month { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: transparent; font: 700 17px var(--ewb-font); color: var(--ewb-navy); cursor: pointer; padding: 8px 10px; border-radius: 12px; transition: background .2s; }
.ewb-cal-month:hover { background: var(--ewb-soft); }
.ewb-cal-month i { font-size: 11px; color: var(--ewb-accent); }
.ewb-dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin: 4px 0 2px; }
.ewb-dow span { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8C97AB; padding: 6px 0; }
.ewb-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.ewb-day { aspect-ratio: 1 / 1; min-height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ewb-ink); font: 600 15px var(--ewb-font); cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.ewb-day.is-out { visibility: hidden; pointer-events: none; }
.ewb-day:hover:not(:disabled) { background: rgba(var(--ewb-accent-rgb), .13); color: var(--ewb-accent); }
.ewb-day:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--ewb-accent-rgb), .45); }
.ewb-day.is-today { box-shadow: inset 0 0 0 1.5px rgba(var(--ewb-accent-rgb), .6); }
.ewb-day.is-sel, .ewb-day.is-sel:hover { background: var(--ewb-accent); color: #fff; box-shadow: 0 10px 20px -8px rgba(var(--ewb-accent-rgb), .8); transform: scale(1.04); }
.ewb-day:disabled { color: #C3CAD8; cursor: not-allowed; }
.ewb-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.ewb-mon { height: 56px; border: 1.5px solid var(--ewb-line); border-radius: 16px; background: #fff; font: 600 15px var(--ewb-font); color: var(--ewb-ink); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.ewb-mon:hover:not(:disabled) { border-color: var(--ewb-accent); color: var(--ewb-accent); }
.ewb-mon.is-cur { background: var(--ewb-accent); border-color: var(--ewb-accent); color: #fff; }
.ewb-mon:disabled { opacity: .35; cursor: not-allowed; }
.ewb-cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ewb-line); font-size: 13.5px; color: var(--ewb-muted); }
.ewb-cal-foot b { color: var(--ewb-ink); font-weight: 600; }
.ewb-link { border: 0; background: transparent; color: var(--ewb-accent); font: 600 13.5px var(--ewb-font); cursor: pointer; padding: 6px 4px; }
.ewb-link:hover { text-decoration: underline; }

/* travellers panel */
.ewb-trav-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--ewb-line); }
.ewb-trav-row:last-of-type { border-bottom: 0; }
.ewb-trav-row b { display: block; font-size: 16px; font-weight: 600; }
.ewb-trav-row small { display: block; color: var(--ewb-muted); font-size: 13px; }
.ewb-step { display: inline-flex; align-items: center; gap: 4px; }
.ewb-step button { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ewb-line); background: #fff; color: var(--ewb-navy); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.ewb-step button:hover:not(:disabled) { border-color: var(--ewb-accent); color: var(--ewb-accent); background: rgba(var(--ewb-accent-rgb), .06); }
.ewb-step button:disabled { opacity: .35; cursor: not-allowed; }
.ewb-step output { min-width: 38px; text-align: center; font-size: 18px; font-weight: 700; }
.ewb-btn { display: block; width: 100%; height: 50px; border: 0; border-radius: 999px; background: var(--ewb-accent); color: #fff; font: 600 15.5px var(--ewb-font); cursor: pointer; transition: background .2s; margin-top: 8px; }
.ewb-btn:hover { background: var(--ewb-accent-dk); }

@media (max-width: 640px) {
  .ewb-backdrop.is-open { opacity: 1; pointer-events: auto; }
  .ewb-pop { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-width: none; max-height: 92vh; overflow-y: auto; border: 0; border-radius: 28px 28px 0 0; padding: 10px 18px calc(20px + env(safe-area-inset-bottom)); transform: translateY(100%); transform-origin: bottom; transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s; opacity: 1; }
  .ewb-pop.is-open { transform: none; }
  .ewb-grab { display: block; }
  .ewb-day { min-height: 44px; font-size: 16px; }
}

/* ---------- Sticky mobile booking bar ---------- */
.ewb-sticky { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1800; align-items: center; gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--ewb-line); box-shadow: 0 -16px 40px -20px rgba(var(--ewb-navy-rgb), .4); transform: translateY(115%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); font-family: var(--ewb-font); }
.ewb-sticky.is-on { transform: none; }
.ewb-sticky .ewb-s-price { flex: 1; min-width: 0; line-height: 1.2; }
.ewb-sticky .ewb-s-price small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ewb-muted); }
.ewb-sticky .ewb-s-price b { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.01em; color: var(--ewb-accent); white-space: nowrap; }
.ewb-sticky .btn { height: 50px; padding: 0 24px; display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; }
@media (max-width: 991px) {
  .ewb-sticky { display: flex; }
  body.has-ewb-sticky { padding-bottom: 76px; }
  body.has-ewb-sticky .ew-chat { bottom: 90px; }
  body.has-ewb-sticky:has(.ew-chat) .scroll-to-top { bottom: 158px; }
}
@media (prefers-reduced-motion: reduce) {
  .ewb-pop, .ewb-sticky, .ewb-backdrop, .ewb-day, .ewb-caret { transition: none !important; }
}