/* International Telephone Input Styling */

/* Import intl-tel-input CSS */
@import url("/assets/intl_tel_input_vendor-155f941e.css");

/* Override intl-tel-input CSS custom properties to match app design.
   Declared on [data-context] (the <body> every layout stamps) as well as :root:
   a custom property that reads another one is resolved where it is declared, so
   a :root-only --iti-hover-color would bake in the :root accent (indigo) and the
   shipper, courier and branded-store contexts would never see their own. */
:root,
[data-context] {
  --iti-hover-color: color-mix(in oklab, var(--color-accent-500) 8%, transparent);
  --iti-border-color: var(--color-gray-300);
  --iti-dialcode-color: var(--color-gray-700);
  --iti-arrow-color: var(--color-gray-500);
}

/* Override intl-tel-input styles to match form design */
.iti {
  width: 100% !important;
  display: block;
  color-scheme: light;
}

/* The field itself (.iti__tel-input) is styled by intl_phone_field through
   form_input_classes, like every other input, so its focus, error and success
   borders come from the accent / red / green tokens there. */

/* Country selector styling */
.iti__country {
  padding: 0.5rem 0.75rem !important;
  border-bottom: none !important;
}

.iti__country:hover {
  background-color: var(--color-gray-100) !important;
}

.iti__country.iti__highlight {
  background-color: var(--color-accent-600) !important;
  color: var(--color-accent-600-text, white) !important;
}

/* The dial code keeps its own gray (--iti-dialcode-color) on every other row;
   on the solid accent row that gray is dark-on-dark, so it takes the row's text
   colour instead. */
.iti__country.iti__highlight .iti__dial-code {
  color: inherit !important;
}

/* Search input styling */
.iti__search-input {
  border: 1px solid var(--color-gray-300) !important;
  border-radius: 0.375rem !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0.5rem !important;
  width: calc(100% - 1rem) !important;
  font-size: 0.875rem !important;
}

.iti__search-input:focus {
  outline: none !important;
  border-color: var(--color-accent-500) !important;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-accent-500) 10%, transparent) !important;
}

/* Flag and selected country button */
.iti__selected-country {
  border-right: 1px solid var(--color-gray-200) !important;
  padding: 0.5rem !important;
  border-radius: 0.75rem 0 0 0.75rem !important;
  background-color: var(--color-gray-50) !important;
}

.iti__selected-country:hover {
  background-color: var(--color-gray-50) !important;
}

/* Arrow styling */
.iti__arrow {
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 4px solid var(--color-gray-500) !important;
  border-bottom: none !important;
}

/* Mobile fullscreen popup. The widget appends it to <body> as .iti--container
   at the vendor's z-index 1060; lift it to the documented popup layer (9999,
   above the cart drawer and the sandbox frame, docs/components/design-system.md
   "Layering"). */
.iti--fullscreen-popup.iti--container { z-index: 9999; }

@media (max-width: 767px) {
  .iti--fullscreen-popup .iti__search-input {
    font-size: 1rem !important;
    padding: 1rem !important;
    margin: 1rem !important;
    width: calc(100% - 2rem) !important;
  }

  .iti--fullscreen-popup .iti__country {
    padding: 1rem !important;
    border-bottom: 1px solid var(--color-gray-200) !important;
  }
}

/* ── On a dark storefront ─────────────────────────────────────────────────
   This widget is vendored and paints itself: a white field, a near-black dial
   code and grey chrome, several of them !important. On a dark checkout that is
   a white slab mid-form, and the dial code measured 1.03:1.

   Overridden here rather than in the vendored file above, so re-vendoring the
   upstream CSS cannot silently wipe it. Scoped to [data-surface="dark"], which
   the store layouts stamp from the theme, so the admin and every light theme
   keep the styling exactly as it was.

   !important throughout only because the rules being answered are !important.
   If a future version renames these classes the storefront readability test
   fails, which is the point of having it. */
[data-surface="dark"] {
  --iti-hover-color: color-mix(in oklab, var(--color-store-neutral-900) 8%, transparent);
  --iti-border-color: var(--color-store-neutral-300);
  --iti-dialcode-color: var(--color-store-neutral-800);
  --iti-arrow-color: var(--color-store-neutral-600);
  /* The country list (.iti__dropdown-content, inline or in the phone's
     full-screen popup, which is appended to <body> and so still inherits this)
     paints itself with this variable, white by default, under rows that take the
     store's near-white text. The store surface is what white is on a light theme. */
  --iti-dropdown-bg: var(--color-store-surface);
}

/* The flag button is painted gray-50 above, which a dark theme does not mirror:
   the dial code read 1.06:1 on it. */
[data-surface="dark"] .iti__selected-country,
[data-surface="dark"] .iti__selected-country:hover {
  background-color: var(--color-store-neutral-50) !important;
  border-right-color: var(--color-store-neutral-300) !important;
}

[data-surface="dark"] .iti__dropdown-content {
  color: var(--color-store-neutral-900);
}

[data-surface="dark"] .iti__selected-dial-code,
[data-surface="dark"] .iti__country {
  color: var(--color-store-neutral-800) !important;
}

/* The light rules above draw these lines and the search box in raw grays,
   which are light slabs and bright rules on a dark list. The highlighted row
   (the one under the pointer, too) keeps its accent fill. */
[data-surface="dark"] .iti__country:not(.iti__highlight):hover {
  background-color: var(--color-store-neutral-100) !important;
}

[data-surface="dark"] .iti__search-input {
  background-color: var(--color-store-surface);
  color: var(--color-store-neutral-900);
}

/* :not(:focus) so the accent focus border above still wins when focused. */
[data-surface="dark"] .iti__search-input:not(:focus) {
  border-color: var(--color-store-neutral-300) !important;
}

@media (max-width: 767px) {
  [data-surface="dark"] .iti--fullscreen-popup .iti__country {
    border-bottom-color: var(--color-store-neutral-200) !important;
  }
}

/* The highlighted row sits on accent-600: keep its contrast-computed ink, which
   the dark-surface rule above would otherwise override. */
[data-surface="dark"] .iti__country.iti__highlight {
  color: var(--color-accent-600-text, white) !important;
}