/* The site's one dropdown style (Josh, 2026-09-27): every list that opens looks like the WhatsApp country picker.
   Ink border, hard shadow, 44px rows, pink on the row under the pointer or keyboard, and the site's check box (pink,
   ink border, ink tick) on the chosen row.

   - Plain dropdowns stay native <select class="input">s (rule 41). Chrome and Edge 135+ draw their list with this
     recipe (appearance: base-select); Safari, Firefox and phones keep the system picker, which suits a phone best.
   - The country picker is intl-tel-input (vendor/intl-tel-input/README.txt): a dropdown on computers, a full-screen
     list with a search box on phones. Its own stylesheet loads first; these rules are unlayered like it, so they win.
   Pages with a dropdown link it in <head>: <link rel="stylesheet" href="/dropdowns.css?v=1">, after intl-tel-input's
   stylesheet where the page has one. The pages' own styles sit in cascade layers, so these win over them anyway. */

/* ── native selects ── */
@supports (appearance: base-select){
  select.input, select.input::picker(select){ appearance:base-select }
  select.input{ display:flex; align-items:center }
  select.input::picker-icon{ display:none }   /* the chevron is the select's background image */
  select.input::picker(select){
    margin-block:3px; padding:0; max-height:min(280px, 42svh); overflow-y:auto; scrollbar-width:thin;
    background:#fff; border:2px solid var(--ink); border-radius:0; box-shadow:4px 4px 0 var(--ink);
  }
  select.input option{
    display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 12px;
    font-family:var(--font-sans); font-size:15px; font-weight:var(--w-ui); line-height:1.3; letter-spacing:-.01em;
    color:var(--ink); background:#fff;
  }
  select.input option[value=""]{ color:var(--ink-64); font-weight:var(--w-text) }
  select.input option::checkmark{
    order:1; margin-left:auto; content:''; flex:none; width:18px; height:18px; box-sizing:border-box;
    border:2px solid var(--ink);
    background:var(--pop-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-7' fill='none' stroke='%2324363f' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
  }
  /* like the country list: the chosen row is lit when the list opens, then the light follows the pointer or the arrow keys */
  select.input option:hover, select.input option:focus{ background:var(--pop-pink); color:var(--ink); outline:none }
  select.input:has(option:hover) option:focus:not(:hover){ background:#fff }
}

/* ── the country picker (intl-tel-input) ── */
:root{
  --iti-border-color:var(--ink); --iti-border-width:2px; --iti-icon-color:var(--ink);
  --iti-hover-color:color-mix(in srgb, var(--pop-pink) 24%, #fff); --iti-country-selector-bg:#fff;
  --iti-arrow-size:7px; --iti-arrow-width:2px; --iti-arrow-padding:10px; --iti-spacer-horizontal:12px;
  --iti-flag-width:22px; --iti-globe-icon-size:18px; --iti-clear-icon-size:16px; --iti-mobile-popup-margin:28px;
}
.iti{ display:block; width:100% }
/* the flag, the arrow and the code sit inside the number's box, behind an ink rule */
.iti__selected-country{ border-right:2px solid var(--ink); padding-right:12px }
.iti__selected-country:hover, .iti__selected-country[aria-expanded="true"]{ background:var(--iti-hover-color) }
.iti__selected-country-primary{ padding-right:6px; background:none !important }
.iti__selected-dial-code{ margin-left:2px; font-size:16px; font-weight:var(--w-text); color:var(--ink) }
.iti__flag{ box-shadow:0 0 0 1px var(--ink-24) }
/* the list */
.iti__country-selector{
  border:2px solid var(--ink) !important; border-radius:0; box-shadow:4px 4px 0 var(--ink) !important;
  font-family:var(--font-sans); font-size:15px; font-weight:var(--w-ui); letter-spacing:-.01em; color:var(--ink);
}
.iti__search-input-wrapper{ border-bottom:2px solid var(--ink) }
.iti__search-input{ min-height:48px; font:inherit; font-size:16px; font-weight:var(--w-text); color:var(--ink); background:#fff; border-radius:0; outline:none }
.iti__search-input::placeholder{ color:var(--ink-48) }
.iti__country{ min-height:44px; padding-top:10px; padding-bottom:10px }
.iti__country.iti__highlight{ background:var(--pop-pink) }
.iti__dial-code{ color:var(--ink-64); font-weight:var(--w-text) }
.iti__country.iti__highlight .iti__dial-code{ color:var(--ink) }
.iti__country-check{
  flex:none; width:18px; height:18px; box-sizing:border-box; border:2px solid var(--ink);
  background:var(--pop-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-7' fill='none' stroke='%2324363f' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
}
.iti__country-check-svg{ display:none }
.iti--inline-country-selector .iti__country-list{ max-height:min(280px, 42svh) }
.iti__no-results{ font-weight:var(--w-text); color:var(--ink-64) }
.iti--fullscreen-popup.iti--detached-country-selector{ background-color:color-mix(in srgb, var(--ink) 55%, transparent) }