/* ============================================================
   QUILLON — country-code phone picker
   Pairs a searchable country selector with a tel input.
   Inherits the form-field look from request/free-sample pages.
   ============================================================ */
.phone{ position:relative; display:flex; align-items:stretch; gap:0; }

/* selector button (left segment) */
.phone__cc{
  display:flex; align-items:center; gap:.5em;
  font-family:var(--font-mono); font-size:.92rem; color:var(--t-strong);
  background:#fcfbf8; border:1px solid var(--ink-line); border-right:0;
  border-radius:3px 0 0 3px; padding:.85em .8em; cursor:pointer; white-space:nowrap;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.phone__cc:hover{ background:#fff; }
.phone__flag{ font-size:1.05rem; line-height:1; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.phone__dial{ font-variant-numeric:tabular-nums; }
.phone__caret{ width:.7em; height:.7em; opacity:.5; transition:transform .3s var(--ease); flex:none; }
.phone.open .phone__caret{ transform:rotate(180deg); }

/* the tel input (right segment) */
.phone__num{ border-radius:0 3px 3px 0 !important; flex:1; min-width:0; }

/* focus ring spans the whole control */
.phone.focus .phone__cc,
.phone.focus .phone__num{ border-color:var(--tick); box-shadow:0 0 0 3px var(--tick-glow); background:#fff; }
.phone.focus .phone__cc{ box-shadow:-3px 0 0 0 var(--tick-glow), 0 -3px 0 0 var(--tick-glow), 0 3px 0 0 var(--tick-glow); }

/* dropdown */
.phone__menu{
  position:absolute; top:calc(100% + 6px); left:0; z-index:60;
  width:min(22rem, 86vw); max-height:19rem; overflow:hidden;
  background:var(--paper-hi); border:1px solid var(--ink-line); border-radius:5px;
  box-shadow:var(--shadow-paper);
  display:none; flex-direction:column;
}
.phone.open .phone__menu{ display:flex; animation:phonepop .22s var(--ease); }
@keyframes phonepop{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

.phone__search{ padding:.7rem; border-bottom:1px solid var(--ink-line); }
.phone__search input{
  width:100%; font-family:var(--font-sans); font-size:.9rem; color:var(--t-strong);
  background:#fcfbf8; border:1px solid var(--ink-line); border-radius:3px; padding:.6em .75em;
}
.phone__search input:focus{ outline:none; border-color:var(--tick); box-shadow:0 0 0 3px var(--tick-glow); background:#fff; }

.phone__list{ overflow-y:auto; overscroll-behavior:contain; }
.phone__opt{
  display:flex; align-items:center; gap:.7em; width:100%;
  padding:.6em .9em; cursor:pointer; border:0; background:none; text-align:left;
  font-family:var(--font-sans); font-size:.92rem; color:var(--t-body);
  transition:background .15s;
}
.phone__opt:hover, .phone__opt.active{ background:var(--tick-glow); color:var(--t-strong); }
.phone__opt .phone__flag{ flex:none; }
.phone__opt .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.phone__opt .dl{ font-family:var(--font-mono); font-size:.82rem; color:var(--t-mute); font-variant-numeric:tabular-nums; }
.phone__empty{ padding:1.2em; text-align:center; font-size:.88rem; color:var(--t-mute); }

/* dark mode */
[data-theme="dark"] .phone__cc{ background:var(--paper-2); color:var(--t-strong); border-color:var(--ink-line); }
[data-theme="dark"] .phone__cc:hover{ background:var(--paper-hi); }
[data-theme="dark"] .phone__menu{ background:var(--paper); border-color:var(--ink-line); }
[data-theme="dark"] .phone__search input{ background:var(--paper-2); color:var(--t-strong); }