/* MML enhanced select — visual layer for assets/select.js.
   Reuses admin.css's custom properties so the control is a sibling of .mml-input by
   construction rather than by copied hex values — but EVERY var() carries the real value as
   a fallback, because this component is also used on the FRONT END (the language switcher's
   layout="select"), where admin.css is not loaded.

   Without the fallbacks the panel resolved `background: var(--mona-white)` to nothing and
   rendered transparent: it opened on click, showed no options, and read to the user as a
   control that does nothing at all. A component used in two contexts must not depend on a
   stylesheet that only one of them loads.
   Target metrics come straight from .mml-input: 1px border, 9px radius, 14px text,
   the blue focus ring. */

.mml-sel{position:relative;display:block;width:100%;max-width:420px}

/* The native <select> stays in the DOM and in the form. It is clipped to 1px rather than
   display:none, because display:none removes it from the focus model and a <label for>
   would then have nothing to focus — select.js forwards that focus to the search box. */
.mml-sel__native{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  opacity:0;pointer-events:none}

/* ── control ─────────────────────────────────────────────────────────────── */
.mml-sel__ctl{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:5px;
  box-sizing:border-box;min-height:37px;width:100%;padding:4px 30px 4px 11px;
  border:1px solid var(--mona-line, #e6e8ef);border-radius:9px;background:var(--mona-paper, #F5F6FA);
  color:var(--mona-ink, #1B1F2A);font-size:14px;line-height:1.35;cursor:pointer;
  transition:border-color .12s,box-shadow .12s,background-color .12s}
.mml-sel__ctl:hover{border-color:#d5d9e4}
.mml-sel.is-focus .mml-sel__ctl,
.mml-sel.is-open .mml-sel__ctl{border-color:var(--mona-blue, #3B82D6);background:var(--mona-white, #FFFFFF);
  box-shadow:0 0 0 3px rgba(59,130,214,.12)}
.mml-sel.is-dis .mml-sel__ctl{opacity:.6;cursor:not-allowed;background:var(--mona-paper, #F5F6FA);
  box-shadow:none;border-color:var(--mona-line, #e6e8ef)}

.mml-sel__caret{position:absolute;top:50%;right:12px;width:7px;height:7px;margin-top:-5px;
  border-right:2px solid var(--mona-mut, #5b6472);border-bottom:2px solid var(--mona-mut, #5b6472);
  border-radius:1px;transform:rotate(45deg);transition:transform .14s ease,border-color .12s;
  pointer-events:none}
.mml-sel.is-open .mml-sel__caret{transform:rotate(-135deg);margin-top:-2px;
  border-color:var(--mona-ink, #1B1F2A)}

/* ── single: label sits under a transparent, full-box search input ─────────── */
.mml-sel__val{display:block;min-width:0;padding:5px 0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.mml-sel__val.is-ph{color:var(--mona-mut, #5b6472)}
.mml-sel--single .mml-sel__q{position:absolute;top:0;right:26px;bottom:0;left:11px;
  width:auto;padding:0;background:transparent;border:0;box-shadow:none;opacity:0;
  font:inherit;color:var(--mona-ink, #1B1F2A);outline:none}
.mml-sel--single.is-open .mml-sel__q{opacity:1}
/* visibility, not display: the control must not change height when the panel opens. */
.mml-sel--single.is-open .mml-sel__val{visibility:hidden}

/* ── multi: chips share the row with an inline search box ─────────────────── */
.mml-sel__chips{display:contents}
.mml-sel__chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;
  padding:2px 4px 2px 9px;border:1px solid var(--mona-line, #e6e8ef);border-radius:7px;
  background:var(--mona-white, #FFFFFF);font-size:12.5px;font-weight:600;line-height:1.6;
  color:var(--mona-ink, #1B1F2A);box-shadow:0 1px 1px rgba(20,24,40,.04)}
.mml-sel__chip-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mml-sel__chip-x{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:17px;height:17px;padding:0;border:0;border-radius:5px;background:transparent;
  color:var(--mona-mut, #5b6472);font-size:14px;line-height:1;cursor:pointer;
  transition:background-color .12s,color .12s}
.mml-sel__chip-x:hover{background:#fdecec;color:var(--mona-mag, #E23164)}
.mml-sel.is-dis .mml-sel__chip-x{pointer-events:none}
.mml-sel--multi .mml-sel__q{flex:1 1 70px;min-width:70px;padding:4px 0;border:0;
  background:transparent;box-shadow:none;font:inherit;font-size:14px;color:var(--mona-ink, #1B1F2A);
  outline:none}

/* Neutralise wp-admin's own focus styling on the inner search box.
   Core's `input[type="text"]:focus` sets border-color + a 1.5px #3858e9 ring. Ours is a
   plain class, so core wins on specificity and the control renders TWO rings: our outline
   on .mml-sel__ctl and Gutenberg-blue tight around the text inside it. The focus ring
   belongs to the control, never to the box hidden inside it — three classes here so this
   holds regardless of which stylesheet loads last. */
.mml-sel .mml-sel__q,
.mml-sel .mml-sel__q:focus,
.mml-sel .mml-sel__q:focus-visible{
  border:0;outline:0;box-shadow:none;background:transparent;border-radius:0;min-height:0
}
.mml-sel__q::placeholder{color:var(--mona-mut, #5b6472);opacity:1}
.mml-sel__q:disabled{cursor:not-allowed}

/* ── panel ───────────────────────────────────────────────────────────────────
   Rendered into <body> and positioned by script, so no ancestor's overflow can clip it.
   position:fixed means the coordinates are viewport coordinates; select.js re-places it
   on scroll (capture phase) and resize while it is open. */
.mml-sel__panel{position:fixed;z-index:100100;display:flex;flex-direction:column;
  box-sizing:border-box;border:1px solid var(--mona-line, #e6e8ef);border-radius:11px;
  background:var(--mona-white, #FFFFFF);box-shadow:0 12px 32px rgba(20,24,40,.14),0 2px 6px rgba(20,24,40,.06);
  overflow:hidden;font-family:inherit;font-size:14px;color:var(--mona-ink, #1B1F2A);
  animation:mml-sel-in .12s ease;
  /* select.js gives the panel a min-width equal to the control and lets it grow to fit its
     own contents; this is the ceiling so a long label cannot drag it across the viewport. */
  max-width:min(92vw,420px)}
@keyframes mml-sel-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

.mml-sel__list{flex:1 1 auto;position:relative;min-height:0;margin:0;padding:5px;
  list-style:none;overflow-y:auto;overscroll-behavior:contain}
.mml-sel__grp{padding:9px 10px 4px;font-size:10.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mona-mut, #5b6472)}
.mml-sel__opt{position:relative;padding:8px 30px 8px 11px;border-radius:8px;
  cursor:pointer;line-height:1.35;word-break:break-word}
.mml-sel__opt.is-hid,.mml-sel__grp.is-hid{display:none}
/* Hover and keyboard highlight are one look on purpose: the pointer and the arrow keys
   are describing the same "this is what Enter takes" state. */
.mml-sel__opt:hover,.mml-sel__opt.is-hi{background:var(--mona-paper, #F5F6FA)}
.mml-sel__opt.is-sel{font-weight:700}
.mml-sel__opt.is-sel::after{content:"";position:absolute;top:50%;right:12px;width:5px;height:9px;
  margin-top:-6px;border-right:2px solid var(--mona-orange, #F79009);border-bottom:2px solid var(--mona-orange, #F79009);
  transform:rotate(45deg)}
.mml-sel__opt[aria-disabled="true"]{color:var(--mona-mut, #5b6472);cursor:not-allowed;opacity:.6}
.mml-sel__opt[aria-disabled="true"]:hover{background:transparent}

.mml-sel__none{padding:14px 12px;color:var(--mona-mut, #5b6472);font-size:13px;text-align:center}

@media (max-width:782px){
  .mml-sel{max-width:100%}
  /* wp-admin bumps control text to 16px on touch to stop iOS zooming on focus. */
  .mml-sel__ctl,.mml-sel--multi .mml-sel__q,.mml-sel--single .mml-sel__q{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  .mml-sel__panel{animation:none}
  .mml-sel__ctl,.mml-sel__caret,.mml-sel__chip-x{transition:none}
}

/* Rich option: dashicon, label, and the line that says what choosing it means. The
   description is an enhancement — the native <select> a no-JS visitor sees still carries the
   label, so meaning never lives only here. */
.mml-sel__opt--rich{display:flex;align-items:flex-start;gap:10px;padding-top:9px;padding-bottom:9px}
.mml-sel__opt--rich .dashicons{font-size:17px;width:17px;height:17px;flex:0 0 auto;margin-top:1px;color:var(--mona-mut, #5b6472)}
.mml-sel__optb{display:flex;flex-direction:column;gap:2px;min-width:0}
.mml-sel__optb strong{font-weight:700;line-height:1.35}
.mml-sel__optb em{font-style:normal;font-size:11.5px;color:var(--mona-mut, #5b6472);line-height:1.5}
.mml-sel__opt--rich[aria-selected="true"] .dashicons,
.mml-sel__opt--rich.is-on .dashicons{color:var(--mona-orange, #F79009)}

/* An image inside an option (a country flag, a carrier logo). Same size as the switcher's
   own flag, so the two variants standing side by side read as one set. */
.mml-sel__img{width:20px;height:20px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);}
.mml-sel__val{display:inline-flex;align-items:center;gap:7px;}