/* warraq.org — the phone field (intl-tel-input dressed in brand v2 tokens). */
.phone-wrap{direction:ltr}                         /* numbers read left-to-right: flag + code sit before the number */
.phone-wrap .iti{width:100%;display:block;
  --iti-border-color:var(--line);
  --iti-country-selector-bg:var(--card);
  --iti-hover-color:var(--surface-soft);
  --iti-icon-color:var(--ink-mute);
  --iti-spacer-horizontal:12px;
  --iti-flag-width:22px;
  --iti-arrow-size:4px}
.phone-wrap .iti input[type="tel"]{width:100%;height:var(--control-lg);border:1px solid var(--line-strong);border-radius:var(--radius-md);
  background:var(--card);font:inherit;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.02em}
/* on the brand v2 shell (body.premium: every page) the phone field matches every other field: 48px on paper, a hover
   border; the 44px base above is the picker's own size outside it. */
.premium .phone-wrap .iti input[type="tel"]{height:48px;background:var(--paper)}
.premium .phone-wrap .iti input[type="tel"]:hover:not([aria-invalid="true"]){border-color:var(--ink-mute)}
.premium .phone-wrap .iti__selected-country{min-height:48px;padding-inline:var(--space-3) var(--space-2)}   /* on the 4px grid */
.phone-wrap .iti input[type="tel"]::placeholder{color:var(--ink-subtle)}
.phone-wrap .iti input[aria-invalid="true"]{border-color:var(--danger)}

/* the closed selector: flag + code, one quiet divider, a whole 44px target (48px on the new shell, above) */
.phone-wrap .iti__selected-country{border-radius:var(--radius-md) 0 0 var(--radius-md);min-height:var(--control-lg);
  padding-inline:12px 10px;transition:background-color var(--dur-fast,150ms) var(--ease-standard,ease)}
.phone-wrap .iti__selected-country:hover{background:var(--surface-soft)}
/* the picker's button is a quiet part of the field: reset against the browser's button defaults and any page's button
   rule (the retired legacy shell's `.form button` once turned it into a black slab below the input). */
.phone-wrap .iti button.iti__selected-country{width:auto;margin:0;padding-block:0;background:transparent;color:inherit;
  border:0;font:inherit;letter-spacing:normal;transform:none}
.phone-wrap .iti button.iti__selected-country:hover{background:var(--surface-soft);transform:none}
.phone-wrap .iti__selected-country-primary{padding:0}
.phone-wrap .iti__selected-dial-code{color:var(--ink);font-size:15px;line-height:1.6;font-variant-numeric:tabular-nums;margin-inline-start:8px}
.phone-wrap .iti__country-container::after{content:"";position:absolute;inset-block:10px;inset-inline-end:0;width:1px;background:var(--line)}
.phone-wrap .iti__flag{border-radius:0;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent)}   /* a token, not a raw colour */

/* the open list is a menu = paper (radius-md, petrol-tinted shadow); Arabic reads right-to-left */
.iti__country-selector{direction:rtl;text-align:start;font-family:var(--font-sans)}
.iti:not(.iti--fullscreen-popup) .iti__country-selector{background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-md);box-shadow:var(--shadow-md);overflow:hidden;margin-top:6px}
.iti:not(.iti--fullscreen-popup) .iti__country-list{max-height:320px}
.iti__search-input{height:var(--control-lg);font:inherit;font-size:16px;color:var(--ink);border:0;
  border-bottom:1px solid var(--line);background:var(--surface-soft)}
.iti__search-input::placeholder{color:var(--ink-subtle)}
.iti__country{min-height:var(--control-lg);display:flex;align-items:center;gap:12px;padding:8px 16px;font-size:15px;line-height:1.6;color:var(--ink)}
.iti__country.iti__highlight{background:var(--surface-soft)}
.iti__country[aria-selected="true"] .iti__country-name{font-weight:700}
.iti__dial-code{color:var(--ink-mute);direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.iti__country-check{color:var(--turq-ink);margin-inline-start:auto}

/* phones: a real bottom sheet (paper, handle, close inside, full height, safe areas) */
.iti--fullscreen-popup.iti--detached-country-selector{z-index:1000;background:var(--overlay);
  padding:max(56px, calc(env(safe-area-inset-top) + 24px)) 0 0;padding-bottom:var(--iti-virtual-keyboard-height,0px)}
.iti--fullscreen-popup .iti__country-selector{flex:1;min-height:0;background:var(--card);border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow:var(--shadow-md);overflow:hidden;padding-top:20px;padding-bottom:env(safe-area-inset-bottom);
  animation:iti-sheet var(--dur-slow,280ms) var(--ease-out,cubic-bezier(.2,.8,.2,1))}
.iti--fullscreen-popup .iti__country-selector::before{content:"";position:absolute;top:8px;left:50%;width:36px;height:4px;
  margin-left:-18px;border-radius:var(--radius-pill);background:var(--line-strong);opacity:.45}
.iti--fullscreen-popup .iti__country-list{max-height:none;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
[dir=rtl] .iti--fullscreen-popup .iti__close-button,.iti--fullscreen-popup .iti__close-button{top:14px;bottom:auto;right:auto;left:10px;
  width:var(--control-lg);height:var(--control-lg);color:var(--ink);border-radius:var(--radius-pill)}
.iti--fullscreen-popup .iti__close-button:hover{background:var(--surface-soft)}
.iti--fullscreen-popup .iti__close-button:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.iti--fullscreen-popup .iti__search-input-wrapper{margin:6px 12px 0 60px}
.iti--fullscreen-popup .iti__search-input{border-radius:var(--radius-md);border:1px solid var(--line)}
.iti--fullscreen-popup .iti__country{padding-inline:16px}
@keyframes iti-sheet{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.iti--fullscreen-popup .iti__country-selector{animation:none}}

.field-error{display:flex;gap:6px;align-items:center;color:var(--danger);font-size:13px;line-height:1.6}