/* 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 */
:root {
  --iti-hover-color: rgba(99, 102, 241, 0.08);
  --iti-border-color: #d1d5db;
  --iti-dialcode-color: #374151;
  --iti-arrow-color: #6b7280;
}

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

.iti__input {
  width: 100% !important;
  border: 1px solid rgba(229, 231, 235, 0.8) !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 3rem 0.75rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  background-color: rgba(238, 242, 255, 0.3) !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  transition: border-color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 0.2s ease-out !important;
}

.iti__input:focus {
  outline: none !important;
  background-color: #ffffff !important;
  border-color: #5b96fa !important;
  box-shadow: 0 0 0 3px rgba(35, 106, 222, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.iti__input.border-red-500 {
  border-color: #e62c2c !important;
}

.iti__input.border-green-500 {
  border-color: #1ca045 !important;
}

/* Country selector styling */
.iti__dropdown {
  border: 1px solid #d1d5db !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  background-color: #ffffff !important;
  color: #111827 !important;
}

.iti__country {
  padding: 0.5rem 0.75rem !important;
  border-bottom: none !important;
}

.iti__country:hover {
  background-color: #f3f4f6 !important;
}

.iti__country.iti__highlight {
  background-color: #236ade !important;
  color: white !important;
}

/* Search input styling */
.iti__search-input {
  border: 1px solid #d1d5db !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: #236ade !important;
  box-shadow: 0 0 0 2px rgba(35, 106, 222, 0.1) !important;
}

/* Flag and selected country button */
.iti__selected-country {
  border-right: 1px solid #e5e7eb !important;
  padding: 0.5rem !important;
  border-radius: 0.75rem 0 0 0.75rem !important;
  background-color: #f9fafb !important;
}

.iti__selected-country:hover {
  background-color: #f9fafb !important;
}

/* Arrow styling */
.iti__arrow {
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 4px solid #6b7280 !important;
  border-bottom: none !important;
}

/* Mobile fullscreen popup */
@media (max-width: 767px) {
  .iti--fullscreen-popup .iti__dropdown {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: white !important;
    z-index: 9999 !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: none !important;
  }

  .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 #e5e7eb !important;
  }
}

/* Shipper context: teal focus states */
.shipper-content .iti__input {
  background-color: rgba(204, 251, 241, 0.3) !important;
}

.shipper-content .iti__input:focus {
  border-color: #2dd4bf !important;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.shipper-content .iti__country.iti__highlight {
  background-color: #0d9488 !important;
}

.shipper-content .iti__search-input:focus {
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.1) !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: rgba(255, 255, 255, 0.08);
  --iti-border-color: var(--color-store-neutral-300);
  --iti-dialcode-color: var(--color-store-neutral-800);
  --iti-arrow-color: var(--color-store-neutral-600);
}

[data-surface="dark"] .iti__input,
[data-surface="dark"] .iti__input:focus,
[data-surface="dark"] .iti__dropdown {
  background-color: var(--color-store-panel) !important;
  color: var(--color-store-neutral-900) !important;
}

[data-surface="dark"] .iti__dropdown {
  border-color: var(--color-store-neutral-300) !important;
}

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