/* =====================================================================
   Country-aware phone input (intl-tel-input)
   Injected by js/phone-input.js into every form containing [name="phone"].
   The restyling below matches the existing .form-input underline design in
   css/style.css so the widget looks native to the site rather than bolted on.
   ===================================================================== */

.iti-elevated {
  display: block;
  width: 100%;
  /* Create a stacking context so the country dropdown is painted above the
     surrounding form fields. Without this the panel loses the z-index fight
     and the next row ("Albania" overlapping "Phone number") draws on top. */
  position: relative;
  z-index: 1;
}

/* The library renders the flag button + a separate dial-code box + the input. */
.iti-elevated .iti__country-container {
  margin-bottom: 0;
}

.iti-elevated .iti__selected-country {
  /* Match the .form-input underline height and alignment. */
  padding: 8px 6px 8px 8px;
  border: none;
  border-bottom: 1px solid var(--text-color-2);
  transition: border-color 0.3s;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
}

.iti-elevated .iti__selected-country:hover,
.iti-elevated .iti__selected-country:focus {
  background: transparent;
  border-bottom-color: var(--color-border);
  outline: none;
}

/* Flags come from a horizontal sprite sheet: 244 flags in a single row.
   The 1x sheet is 4880x15 (244 x 20px) and the 2x sheet is 9760x30.

   The library asks for the sheet with image-set(), which is fine on modern
   browsers but is an INVALID declaration on any browser without image-set()
   support - the whole background-image then drops and every flag renders as an
   empty box. So the sheet is set here directly instead, with image-set()
   applied only as a progressive enhancement inside @supports.

   IMPORTANT: background-position and background-size are deliberately NOT set.
   The library already positions each flag via
     background-position: calc(var(--iti-flag-offset) * var(--iti-flag-width)) 0
     background-size:     calc(var(--iti-flag-count) * var(--iti-flag-width)) ...
   using the per-country --iti-flag-offset set by its own .iti__in / .iti__gb
   rules. Overriding either collapses the strip so all countries look identical.

   Paths are relative to THIS file (css/), so they need the leading "../". */
.iti__flag {
  background-image: url("../lib/js/intl-tel-input/img/flags.webp");
}

/* Retina: the 2x sheet is exactly double, and the library's background-size
   (4880px) scales it back down to the correct CSS-pixel size. */
@supports (background-image: image-set(url("a.webp") 1x, url("b.webp") 2x)) {
  .iti__flag {
    background-image: image-set(
      url("../lib/js/intl-tel-input/img/flags.webp") 1x,
      url("../lib/js/intl-tel-input/img/flags@2x.webp") 2x
    );
  }
}

/* Keep the stock variables pointing at the real files too, so anything else
   reading them (and the dropdown, which v29 renders detached on <body>)
   resolves the sheet correctly. */
:root {
  --iti-path-flags-1x: url("../lib/js/intl-tel-input/img/flags.webp");
  --iti-path-flags-2x: url("../lib/js/intl-tel-input/img/flags@2x.webp");
}

/* Size/rounding only - the sprite maths stays with the library. */
.iti__flag {
  height: var(--iti-flag-width);
  width: var(--iti-flag-width);
  border-radius: 2px;
}

/* The library's own .iti__arrow is a pure-CSS chevron (two borders +
   rotate(45deg)). It must NOT be given a background-image: doing so replaces
   the rotated borders with an SVG box and leaves a stray line across the
   button. Size and colour only are customised here. */
.iti-elevated .iti__arrow {
  /* Match the surrounding text rather than the stock grey. */
  border-right-color: var(--text-color-1);
  border-bottom-color: var(--text-color-1);
  margin-top: -2px;
}

/* The dial code sits beside the flag, before the number input. */
/* The separate dial-code box (v29 names it .iti__selected-dial-code). */
.iti-elevated .iti__selected-dial-code {
  color: var(--text-color-1);
  font-size: 14px;
  padding: 8px 2px 8px 6px;
  border: none;
  border-bottom: 1px solid var(--text-color-2);
  transition: border-color 0.3s;
  background: transparent;
  margin-right: 0;
}

.iti-elevated .iti__selected-dial-code:focus {
  outline: none;
}

.iti-elevated input.iti__tel-input,
.iti-elevated input[type="tel"] {
  /* Identical to .form-input: no box, underline only, grows to fill. */
  border: none;
  border-bottom: 1px solid var(--text-color-2);
  padding: 8px;
  font-size: 14px;
  background: transparent;
  color: inherit;
  transition: border-color 0.3s;
  flex: 1 1 auto;
  min-width: 0;
}

.iti-elevated input.iti__tel-input:focus,
.iti-elevated input[type="tel"]:focus {
  border-bottom-color: var(--color-border);
  outline: none;
}

/* When both the flag and the dial code show, avoid a doubled underline gap. */
.iti-elevated .iti__selected-dial-code + input.iti__tel-input {
  border-left: none;
}

/* Placeholder should not fight the underline on light backgrounds. */
.iti-elevated input::placeholder {
  color: var(--text-color-2);
}

/* --- Country dropdown --------------------------------------------------- */

/* v29 renders the country panel DETACHED - it is appended to <body>, not nested
   inside .iti-elevated - so every dropdown rule below is scoped to
   .iti__country-selector. A descendant of .iti-elevated would never match. */

/* Only vertical padding is set here. The horizontal padding must be left to the
   library: it uses padding-left to reserve room for the absolutely-positioned
   .iti__search-icon. A `padding: 10px 12px` shorthand wipes that out and the
   magnifier then sits on top of the "Search" placeholder text. */
.iti__country-selector .iti__search-input {
  border: none;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 14px;
  background: transparent;
}

.iti__country-selector .iti__search-input:focus {
  outline: none;
}

.iti__country-selector .iti__country-list {
  max-height: 260px;
  overflow-y: auto;
}

.iti__country-selector .iti__country {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  gap: 8px;
  line-height: 1.3;
}

/* v29 marks the highlighted/keyboard-focused row with .iti__highlight. */
.iti__country-selector .iti__country:hover,
.iti__country-selector .iti__country.iti__highlight {
  background-color: #f1f1f1;
}

.iti__country-selector .iti__country-name {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dial code shown in the right-hand column of each dropdown row. */
.iti__country-selector .iti__country .iti__dial-code {
  color: #666;
  font-size: 13px;
  margin-left: 0;
  padding: 0;
  border: none;
}

/* --- Validation message -------------------------------------------------- */

.phone-error {
  color: #d9534f;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 6px;
  padding-left: 2px;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 575px) {
  .iti-elevated {
    width: 100%;
  }

  .iti-elevated input.iti__tel-input,
  .iti-elevated input[type="tel"] {
    font-size: 16px; /* prevents iOS Safari zoom-on-focus */
  }

  .iti-elevated .iti__selected-country,
  .iti-elevated .iti__selected-dial-code {
    font-size: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}