/* Themed dropdown.
   Native <option> lists are drawn by the OS and cannot be styled, so the real
   <select> stays in the DOM as the source of truth (and the form value) while
   this renders the visible control. */
.mrt-sel{position:relative;display:block;width:100%}
.mrt-sel > select{
  position:absolute!important;width:1px;height:1px;padding:0;margin:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.mrt-sel-btn{
  display:flex;align-items:center;gap:.6em;width:100%;font:inherit;font-size:.95rem;
  text-align:left;cursor:pointer;color:var(--ink,#1c1917);background:#fff;
  border:1.5px solid var(--ink,#1c1917);border-radius:12px;padding:.62em .8em;
  transition:box-shadow .16s,border-color .16s;
}
.mrt-sel-btn:hover{box-shadow:3px 3px 0 var(--ink,#1c1917)}
.mrt-sel-btn:focus-visible{outline:3px solid var(--yellow,#ffd53b);outline-offset:1px}
.mrt-sel[data-open="1"] .mrt-sel-btn{box-shadow:3px 3px 0 var(--ink,#1c1917);border-color:var(--red,#e10600)}
.mrt-sel-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrt-sel-btn svg{flex:0 0 auto;transition:transform .2s cubic-bezier(.16,1,.3,1);color:var(--ink-3,#6b625c)}
.mrt-sel[data-open="1"] .mrt-sel-btn svg{transform:rotate(180deg)}

.mrt-sel-pop{
  /* a narrow trigger (the country-code picker is ~60px) must not squeeze the
     panel -- let it grow past the control instead of wrapping every label */
  position:absolute;z-index:200;left:0;top:calc(100% + 6px);
  min-width:100%;width:max-content;max-width:min(300px,86vw);
  background:#fff;border:1.5px solid var(--ink,#1c1917);border-radius:16px;
  box-shadow:4px 4px 0 var(--ink,#1c1917);overflow:hidden;display:none;
  /* The panel is always white, so it must state its own text colour. Inheriting
     it meant the footer's pale-on-dark text came through onto white and the
     options were barely readable. */
  color:var(--ink,#1c1917);
}
.mrt-sel[data-open="1"] .mrt-sel-pop{display:block}
.mrt-sel-pop[data-up="1"]{top:auto;bottom:calc(100% + 6px)}
.mrt-sel-pop[data-right="1"]{left:auto;right:0}
.mrt-sel-find{display:none;padding:.5rem .6rem;border-bottom:1.5px solid var(--line,#e9dedc);background:var(--tint,#fdf4f3)}
.mrt-sel-pop[data-find="1"] .mrt-sel-find{display:block}
.mrt-sel-find input{
  width:100%;font:inherit;font-size:.9rem;padding:.45em .7em;
  border:1.5px solid var(--ink,#1c1917);border-radius:9px;background:#fff;color:var(--ink,#1c1917);
}
.mrt-sel-find input:focus{outline:2px solid var(--yellow,#ffd53b);outline-offset:1px}
.mrt-sel-list{max-height:min(52vh,290px);overflow-y:auto;overscroll-behavior:contain;margin:0;padding:.3rem;list-style:none}
.mrt-sel-opt{
  display:flex;align-items:center;gap:.5em;white-space:nowrap;padding:.5em .65em;border-radius:9px;
  font-size:.93rem;cursor:pointer;line-height:1.3;
}
.mrt-sel-opt[hidden]{display:none}
.mrt-sel-opt:hover,.mrt-sel-opt[data-active="1"]{background:var(--tint,#fdf4f3)}
.mrt-sel-opt[aria-selected="true"]{background:var(--yellow,#ffd53b);font-weight:600}
.mrt-sel-opt::before{
  content:"";flex:0 0 auto;width:16px;height:16px;border-radius:50%;
  border:1.5px solid var(--ink,#1c1917);background:#fff;
}
.mrt-sel-opt[aria-selected="true"]::before{background:var(--red,#e10600);box-shadow:inset 0 0 0 2.5px #fff}
.mrt-sel-empty{padding:.9rem .7rem;text-align:center;color:var(--ink-3,#6b625c);font-size:.88rem}
.mrt-sel-opt[data-group="1"]{
  cursor:default;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3,#6b625c);font-weight:700;padding-top:.7em;
}
.mrt-sel-opt[data-group="1"]::before{display:none}
.mrt-sel-opt[data-group="1"]:hover{background:transparent}
@media(prefers-reduced-motion:reduce){.mrt-sel-btn,.mrt-sel-btn svg{transition:none}}

/* ── Mobile ─────────────────────────────────────────────────────────────
   iOS Safari zooms the page in whenever a focused field renders below 16px,
   which shunts the layout sideways mid-typing. Every control gets 16px on a
   phone, and enough height to be a comfortable tap target. */
@media(max-width:640px){
  .mrt-sel-btn,.mrt-sel-search{font-size:16px;min-height:46px}
  .mrt-sel-opt{min-height:44px;font-size:15px}
  .bk input,.bk select,.bk textarea,
  .foot-form input,.foot-form select,
  input[type=text],input[type=tel],input[type=email],input[type=date],
  input[type=number],select,textarea{font-size:16px;min-height:46px}
  textarea{min-height:96px}
  .bk button,.btn,.btn-sm,button[type=submit]{min-height:46px}

}