/* ═══════════════════════════════════════════════════════════════════════════
   quote-datepicker-travelers.css
   Gold date picker (Departure / Return) + combined "Travelers" dropdown,
   ported from businessclassflightnew.css so first-class-flights uses the
   same design. Load this AFTER firstclassflights.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── PLACEMENT ────────────────────────────────────────────────────────────
   .dp-up / .dp-center are applied automatically by 02-calendar-position.js
   (the same shared script the business-class page uses). If that script is
   not yet loaded site-wide, the picker still works — it just always opens
   below-left instead of flipping/centering. */

.dp-pop.dp-up,
.vpop.dp-up {
  top: auto !important;
  bottom: calc(100% + 6px) !important;
}
.dp-pop.dp-up::before {
  top: auto;
  bottom: 0;
  border-radius: 0 0 16px 16px;
}
.dp-pop.dp-center,
.vpop.dp-center {
  position: fixed !important;
  left: 50% !important;  right: auto !important;
  top: 50% !important;   bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(342px, calc(100vw - 24px)) !important;
  max-width: none !important;
  max-height: 86vh !important;
  overflow-y: auto !important;
  z-index: 2000 !important;
  box-shadow: 0 30px 70px -12px rgba(0,0,0,.7) !important;
}
.dp-pop, .vpop { max-height: calc(100vh - 24px); overflow-y: auto; }

@media (max-width: 620px) {
  .dp-pop,
  .dp-pop.dp-up,
  .vpop.dp-up {
    position: fixed !important;
    left: 50% !important;  right: auto !important;
    top: 50% !important;   bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(342px, calc(100vw - 24px)) !important;
    max-width: none !important;
    max-height: 86vh !important;
    overflow-y: auto !important;
    z-index: 2000 !important;
    box-shadow: 0 30px 70px -12px rgba(0,0,0,.7) !important;
  }
  .dp-nav { width: 40px !important; height: 40px !important; }
  .dp-day { font-size: 15px !important; }
}

/* ── APPEARANCE ─────────────────────────────────────────────────────────── */
.dp-day.sel,
.dp-day[aria-selected="true"] {
  background: linear-gradient(150deg, #E8C96A, #C9A84C) !important;
  color: #16130c !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(201,168,76,.35) !important;
}
.dp-day:not(.dis):not(.sel):hover {
  background: rgba(201,168,76,.14) !important;
  color: #6b5a24 !important;
}
.dp-day.today:not(.sel) {
  color: #C9A84C !important;
  font-weight: 700 !important;
}
.dp-day.dis {
  color: #c3bfb4 !important;
  cursor: not-allowed !important;
}
.dp-nav:hover { border-color: #C9A84C !important; color: #6b5a24 !important; }

@media (prefers-reduced-motion: reduce) {
  .dp-pop, .dp-day, .dp-nav { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ELITE DATE PICKER — field + calendar structure
   ═══════════════════════════════════════════════════════════════════════════ */
.dp-field{position:relative;}
.dp-trigger{width:100%;display:flex;align-items:center;gap:10px;cursor:pointer;
  background:var(--field-bg,#fff);border:1px solid var(--field-bd,#dfe3ea);border-radius:10px;
  padding:0 13px;height:52px;transition:border-color .2s,box-shadow .2s;font-family:'Inter',sans-serif;}
.dp-trigger:hover{border-color:#c9a84c;}
.dp-trigger.err{border-color:var(--danger);box-shadow:0 0 0 3px rgba(226,75,74,0.16);}
.dp-trigger>i{color:#a9862f;font-size:15px;flex-shrink:0;}
.dp-val{font-size:14.5px;color:var(--field-ink,#1b1a17);font-weight:500;}
.dp-val.placeholder{color:#9aa2af;font-weight:400;}
.dp-pop{position:absolute;left:0;top:calc(100% + 6px);z-index:80;width:300px;max-width:calc(100vw - 40px);
  background:#fff;border:1px solid #e6e3d8;border-radius:16px;padding:1rem;
  box-shadow:0 30px 60px -20px rgba(40,32,10,0.5);display:none;
  animation:dpIn .22s cubic-bezier(.2,.7,.2,1);}
.dp-pop.open{display:block;}
@keyframes dpIn{from{opacity:0;transform:translateY(-6px) scale(.98);}to{opacity:1;transform:none;}}
.dp-pop::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;border-radius:16px 16px 0 0;
  background:linear-gradient(to right,var(--gold),var(--gold-light),var(--gold));}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem;}
.dp-head .dp-my{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:600;color:#1b1a17;}
.dp-nav{width:34px;height:34px;border-radius:9px;border:1px solid #e6e3d8;background:#fbf9f3;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:#a9862f;font-size:13px;
  transition:all .18s;}
.dp-nav:hover{background:#a9862f;color:#fff;border-color:#a9862f;}
.dp-nav:disabled{opacity:.3;cursor:not-allowed;}
.dp-nav:disabled:hover{background:#fbf9f3;color:#a9862f;border-color:#e6e3d8;}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.dp-dow{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#a89e86;
  text-align:center;padding:5px 0;}
.dp-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:9px;
  font-size:13.5px;color:#3a352b;cursor:pointer;border:1px solid transparent;transition:all .15s;
  -webkit-tap-highlight-color:transparent;}
.dp-day:hover:not(.dp-off):not(.dp-dis){background:#faf3e2;border-color:#e6d6a8;}
.dp-day.dp-off{color:transparent;pointer-events:none;}
.dp-day.dp-dis{color:#cfcabb;cursor:not-allowed;}
.dp-day.dp-today{font-weight:700;color:#a9862f;}
.dp-day.dp-sel{background:linear-gradient(145deg,var(--gold-light),var(--gold-dim));color:#1a1407;
  font-weight:700;border-color:var(--gold);box-shadow:0 6px 14px -6px rgba(169,134,47,.6);}
.dp-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.85rem;padding-top:.75rem;
  border-top:1px solid #f0ede2;}
.dp-foot button{background:none;border:none;font-size:12px;font-weight:600;color:#a9862f;cursor:pointer;padding:4px 0;}
.dp-foot .dp-clear{color:#8a8372;}
@media (max-width:560px){
  .dp-pop{width:min(320px,calc(100vw - 32px));left:50%;transform:translateX(-50%);}
  @keyframes dpIn{from{opacity:0;transform:translateX(-50%) translateY(-6px);}to{opacity:1;transform:translateX(-50%);}}
  .dp-day{font-size:15px;}
}

/* the picker standing inside .inwrap, in place of <input type="date">     */
.inwrap .dp-field { width: 100%; }
.inwrap .dp-trigger {
  width: 100%; height: 50px;
  display: flex; align-items: center;
  padding: 0 13px 0 37px;
  background: transparent; border: none; border-radius: 10px;
  font-family: 'Inter', sans-serif; font-size: 16px; color: #1b1a17;
  cursor: pointer; outline: none;
}
.inwrap .dp-trigger:focus-visible { box-shadow: 0 0 0 3px rgba(201,168,76,.28); }
.inwrap .dp-trigger .dp-val { font-size: 16px; color: #1b1a17; }
.inwrap .dp-trigger .dp-val.placeholder { color: #9aa1ab; }
.inwrap .dp-pop { left: 0; right: auto; min-width: 300px; }



/* ═══════════════════════════════════════════════════════════════════════════
   TRAVELERS IN ONE CONTROL
   Adults/Children steppers are NOT rebuilt — same markup (#adMinus, #adN,
   #adPlus, #chMinus, #chN, #chPlus) just moved inside this dropdown, so the
   page's own stepper() bindings in first-class-flights.js keep working
   untouched.
   ═══════════════════════════════════════════════════════════════════════════ */
.pax-wrap { position: relative; }
.pax-trigger {
  width: 100%; height: 50px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 13px 0 37px;
  background: transparent; border: none; border-radius: 10px;
  font-family: 'Inter', sans-serif; font-size: 16px; color: #1b1a17;
  cursor: pointer; outline: none;
}
.pax-trigger:focus-visible { box-shadow: 0 0 0 3px rgba(201,168,76,.28); }
.pax-caret { font-size: 11px; color: #a9862f; transition: transform .2s ease; }
.pax-trigger[aria-expanded="true"] .pax-caret { transform: rotate(180deg); }

.pax-pop {
  display: none;
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  z-index: 80;
  background: #fff; border: 1px solid #e6e3d8; border-radius: 12px;
  padding: 10px;
  box-shadow: 0 20px 44px -14px rgba(12,17,40,.45);
}
.pax-pop.open { display: block; }
.pax-pop .step {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 8px 4px !important;
}
.pax-pop .step + .step { border-top: 1px solid #f0ede4 !important; }
.pax-done {
  width: 100%; margin-top: 8px; padding: 9px;
  border: none; border-radius: 8px; cursor: pointer;
  background: linear-gradient(135deg, #E8C96A, #C9A84C);
  color: #16130c; font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 700;
}


@media (prefers-reduced-motion: reduce) {
  .pax-caret { transition: none !important; }
}