/* ===========================================================================
   EMAAR — shared UI select

   The ONE presentation for EmaarUI.select (ui-select.js). See
   DESIGN-STANDARDS.md §7. Its --usel-* tokens are declared against the
   design system (assets/ds/01-tokens.css), which every page now loads first;
   a host page may reassign --usel-* or override .sel__btn directly
   to match its own field style (border weight, focus ring) the way
   booking.css and places.css each do — that is composition, not a fork.
   =========================================================================== */

:root{
  /* Component tokens — layer 3. Every one now NAMES a semantic token from
     assets/ds/01-tokens.css instead of restating its value, so a palette
     change reaches this component without anyone remembering it exists.
     A host page may still reassign --usel-* to match its own field style;
     that is composition, not a fork. */
  --usel-ink:       var(--em-text-primary);
  --usel-mute:      var(--em-text-muted);
  --usel-warm:      var(--em-text-eyebrow);
  --usel-gold:      var(--em-text-accent);
  --usel-gold-soft: rgba(77,77,79,.18);
  --usel-line:      var(--em-border-default);
  --usel-line-mid:  var(--p-line-22);
  --usel-line-2:    var(--em-border-strong);
  --usel-line-3:    var(--em-border-stronger);
  --usel-sunk:      var(--em-surface-sunk);
  --usel-panel-2:   var(--em-surface-primary);
  --usel-r:         var(--em-radius);
  --usel-shadow:    0 24px 60px rgba(0,0,0,.14);
  --usel-shadow-lg: 0 30px 80px rgba(0,0,0,.20);
  --usel-t:         var(--em-duration-fast) var(--em-ease-panel);
}

/* --- select --------------------------------------------------------------- */
/* Self-contained, does not rely on a host page's own [hidden] reset: this
   component sets host.hidden on the panel, and .sel__panel's own `display`
   below is an author style that otherwise outranks the UA's [hidden] rule at
   equal specificity. Only booking.css happens to add that reset globally;
   the Enquire modal (page.css) and the Places modal (places.css) do not, so
   without this the closed panel stayed visible there. */
.sel__panel[hidden]{display:none !important}

.sel{position:relative}
.sel__btn{
  width:100%;display:flex;align-items:center;gap:9px;text-align:left;
  background:transparent;border:1px solid var(--usel-line-2);border-radius:var(--usel-r);
  padding:12px 14px;font-size:15px;min-height:46px;cursor:pointer;
  transition:border-color var(--usel-t),box-shadow var(--usel-t)
}
.sel__btn:hover{border-color:var(--usel-line-3)}
.sel__btn:focus-visible{border-color:var(--usel-ink);box-shadow:0 0 0 3px var(--usel-gold-soft);outline:none}
.sel.is-open .sel__btn{border-color:var(--usel-ink);box-shadow:0 0 0 3px var(--usel-gold-soft)}
.sel__val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel__val.is-ph{color:var(--usel-mute)}
.sel__flag{flex:none;font-size:16px;line-height:1}
.sel__dial{flex:none;color:var(--usel-ink)}
.sel__cav{flex:none;width:9px;height:6px;color:var(--usel-warm);transition:transform var(--usel-t)}
.sel.is-open .sel__cav{transform:rotate(180deg)}

.sel__panel{
  /* left:0 anchors it under the trigger, but width must not be tied to the
     trigger's own width: a narrow dial-code button (~95-118px) would force
     the panel to the same width, wrapping "Trinidad and Tobago" onto three
     lines and clipping the search placeholder to "Countr". min-width covers
     a narrow host, max-content lets it grow to fit the longest label, and
     max-width stops it running off a small viewport. */
  position:absolute;z-index:var(--z-popover);left:0;top:calc(100% + 6px);
  min-width:max(220px, 100%);width:max-content;max-width:min(320px, calc(100vw - 24px));
  background:var(--usel-panel-2);border:1px solid var(--usel-line);border-radius:var(--usel-r);
  box-shadow:var(--usel-shadow);overflow:hidden;
  display:flex;flex-direction:column;max-height:296px;
  animation:uselPop .18s var(--em-ease-panel) both
}
.sel__panel.is-up{top:auto;bottom:calc(100% + 6px);transform-origin:bottom}
@keyframes uselPop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.sel__search{display:flex;align-items:center;gap:9px;padding:10px 13px;border-bottom:1px solid var(--usel-line);flex:none}
.sel__search svg{width:13px;height:13px;color:var(--usel-warm);flex:none}
.sel__search input{
  flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:14.5px;padding:2px 0
}
.sel__search input::placeholder{color:var(--usel-mute)}

.sel__list{overflow-y:auto;overscroll-behavior:contain;padding:5px;margin:0;list-style:none}
.sel__opt{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:9px 11px;border-radius:var(--usel-r);font-size:14.5px;cursor:pointer;
  border-left:2px solid transparent;transition:background var(--usel-t)
}
.sel__opt:hover{background:var(--usel-sunk)}
.sel__opt.is-active{background:var(--usel-sunk);border-left-color:var(--usel-gold)}
.sel__opt[aria-selected="true"]{font-weight:600}
.sel__opt .sel__tick{margin-left:auto;width:12px;height:12px;color:var(--usel-gold);opacity:0;flex:none}
.sel__opt[aria-selected="true"] .sel__tick{opacity:1}
.sel__opt .sel__code{margin-left:auto;color:var(--usel-mute);font-size:13px;font-variant-numeric:tabular-nums}
.sel__opt[aria-selected="true"] .sel__code{color:var(--usel-warm)}
.sel__none{padding:18px 13px;font-size:13.5px;color:var(--usel-mute);text-align:center}

/* mobile: the list becomes a sheet so a 177-row list is thumb-reachable */
@media (max-width:620px){
  .sel__panel{
    /* the base rule's width:max-content (added for the desktop popover) would
       otherwise leave `right:0` ignored as over-constrained and shrink this
       sheet to a floating left-anchored box instead of spanning edge to edge */
    position:fixed;inset:auto 0 0 0;top:auto;width:auto;min-width:0;max-width:none;max-height:68vh;
    border-radius:var(--usel-r) var(--usel-r) 0 0;border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom,0px);
    box-shadow:var(--usel-shadow-lg);animation:uselSheet .28s var(--em-ease-panel) both
  }
  .sel__panel::before{
    content:'';display:block;flex:none;width:38px;height:3px;border-radius:2px;
    background:var(--usel-line-mid);margin:9px auto 3px
  }
  .sel__search input{font-size:16px}
  .sel__opt{padding:12px 11px}
}
@keyframes uselSheet{from{transform:translateY(100%)}to{transform:none}}
.usel-veil{
  position:fixed;inset:0;z-index:var(--z-scrim);background:rgba(7,7,7,.34);
  backdrop-filter:blur(2px);animation:uselFade .2s ease both
}
@keyframes uselFade{from{opacity:0}to{opacity:1}}
@media (min-width:621px){.usel-veil{display:none}}