/* ==========================================================================
   Trip2World — Custom selector/popover styling
   Replaces native <select> option menus (unstyleable, browser white) with
   a popover in the same visual language as the rest of the booking UI:
   dark background, existing border/line colour, gold accent, rounded
   corners. Uses the shared tokens already defined in site.css / index.html
   (--void-2, --paper, --mist-dim, --gold, --line, --sp-*, --ease).
   ========================================================================== */

/* Trigger button replaces the old <select>; same look as .bk-field select
   (transparent, no border — the surrounding .bk-field supplies the box)
   plus a chevron affordance and alignment. */
.t2w-select-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: none; border: none; color: var(--paper); font-size: 18px; font-weight: 500;
  font-family: 'Inter', sans-serif; text-align: left; cursor: pointer; outline: none; padding: 0;
}
.t2w-select-trigger::after {
  content: ''; flex: 0 0 auto; width: 9px; height: 9px; margin-top: -4px;
  border-right: 2px solid var(--mist-dim); border-bottom: 2px solid var(--mist-dim);
  transform: rotate(45deg); transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.t2w-select-trigger[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 2px; border-color: var(--gold); }
.t2w-select-trigger:hover::after { border-color: var(--gold); }
.t2w-select-trigger:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; border-radius: 6px; }

/* Popover shell */
.t2w-popover {
  position: fixed; z-index: 2000; background: var(--void-2); border: 1px solid var(--line);
  border-radius: 16px; padding: var(--sp-1); box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  max-width: calc(100vw - 24px); max-height: min(420px, calc(100vh - 24px)); overflow: auto;
  animation: t2wPopIn .18s var(--ease);
}
@keyframes t2wPopIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Simple listbox variant (Rooms, Cabin) */
.t2w-listbox { display: flex; flex-direction: column; gap: 2px; min-width: 200px; }
.t2w-option {
  display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 10px;
  color: var(--mist); font-size: 15px; font-weight: 500; font-family: 'Inter', sans-serif;
  padding: 11px 14px; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); outline: none;
}
.t2w-option:hover { background: rgba(255,255,255,0.06); color: var(--paper); }
.t2w-option:focus-visible { outline: 1px solid var(--gold); outline-offset: -2px; }
.t2w-option.is-selected { background: rgba(212,175,55,0.12); color: var(--gold); font-weight: 600; }
.t2w-option-label { display: block; }
.t2w-option-desc { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: #9A9CA1; }
.t2w-option.is-selected .t2w-option-desc { color: rgba(212,175,55,0.8); }
.t2w-option.is-disabled { color: #7C7F85; cursor: not-allowed; }
.t2w-option.is-disabled:hover { background: none; color: #7C7F85; }
.t2w-select-trigger.is-placeholder { color: #9A9CA1; }

/* Boxed trigger: the same listbox used outside a .bk-field box (account forms, saved-traveller selector). */
.t2w-select-trigger.t2w-boxed {
  min-height: 46px; padding: 11px 14px; font-size: 15px; background: #111216;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; transition: border-color .2s var(--ease);
}
.t2w-select-trigger.t2w-boxed:hover { border-color: rgba(255,255,255,0.28); }
.t2w-select-trigger.t2w-boxed:focus-visible, .t2w-select-trigger.t2w-boxed[aria-expanded="true"] { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,0.18); }
.t2w-select-trigger.t2w-boxed::after { margin-right: 2px; }
.t2w-select-trigger:disabled { opacity: .5; cursor: not-allowed; }

/* Composer variant (Guests / Travellers) */
.t2w-composer { min-width: 300px; padding: var(--sp-2); }
.t2w-composer-room {
  padding-bottom: var(--sp-2); margin-bottom: var(--sp-2); border-bottom: 1px solid var(--line);
}
.t2w-composer-room:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.t2w-composer-room-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--gold);
  font-weight: 600; margin-bottom: var(--sp-1);
}

.t2w-stepper-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 8px 2px; }
.t2w-stepper-text { display: flex; flex-direction: column; }
.t2w-stepper-label { font-size: 15px; color: var(--paper); font-weight: 500; }
.t2w-stepper-sublabel { font-size: 12px; color: var(--mist-dim); margin-top: 2px; }
.t2w-stepper-controls { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.t2w-stepper-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,0.02);
  color: var(--paper); font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: all .2s var(--ease); outline: none; font-family: 'Inter', sans-serif;
}
.t2w-stepper-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.t2w-stepper-btn:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.t2w-stepper-btn:disabled { opacity: .3; cursor: not-allowed; }
.t2w-stepper-value { min-width: 18px; text-align: center; font-size: 15px; font-weight: 600; color: var(--paper); }

.t2w-composer-child-age { margin: 4px 0 0; }
.t2w-composer-child-age label { font-size: 12px; color: var(--mist-dim); display: block; margin-bottom: 4px; }

.t2w-composer-note { font-size: 12px; color: var(--mist-dim); line-height: 1.5; margin-top: var(--sp-1); }
.t2w-composer-done {
  width: 100%; margin-top: var(--sp-2); padding: 12px; border-radius: 10px; border: 1px solid rgba(212,175,55,0.35);
  background: rgba(212,175,55,0.1); color: var(--gold); font-weight: 700; font-size: 14px; cursor: pointer;
  font-family: 'Inter', sans-serif; transition: all .2s var(--ease);
}
.t2w-composer-done:hover { background: rgba(212,175,55,0.18); }

@media (max-width: 600px) {
  .t2w-popover { left: 12px !important; right: 12px; width: auto; min-width: 0 !important; }
  .t2w-composer { min-width: 0; }
}