/* Телефонне поле з вибором країни (intl-tel-input, vendor/intlTelInput.css) — під верстку теми.
   Бібліотека загортає <input> у .iti й додає селект країни ліворуч, тому ширину й рамку
   тримає обгортка, а сам input лишається з класами теми (.form-field або поле попапа).
   Два контексти: світлі форми сторінок і темні картки (попап входу, «купити в один клік»). */

.iti { display: block; width: 100%; }
.iti__tel-input { width: 100%; }

/* селект країни: без власного фону, щоб зливався з полем */
.iti__country-container { padding: 2px; }
.iti--separate-dial-code .iti__selected-country { background: transparent; border-radius: .375rem 0 0 .375rem; }
.iti--separate-dial-code .iti__selected-country:hover,
.iti--separate-dial-code .iti__selected-country:focus-visible { background: color-mix(in oklab, currentColor 8%, transparent); }
.iti__selected-dial-code { font-size: .9375rem; }

/* випадайка країн: картка в кольорах теми, а не системна сіра */
.iti__dropdown-content {
  border: 0;
  border-radius: .5rem;
  background: var(--card, #fff);
  color: var(--foreground, #111);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground, #111) 12%, transparent), 0 20px 25px -5px rgba(0, 0, 0, .18);
}
.iti__search-input { padding: .6rem .7rem; font: inherit; font-size: .9375rem; border: 0; border-bottom: 1px solid color-mix(in oklab, var(--foreground, #111) 10%, transparent); background: transparent; color: inherit; }
.iti__country { padding: .5rem .7rem; font-size: .9375rem; }
.iti__country.iti__highlight { background: color-mix(in oklab, var(--primary, #2563eb) 12%, transparent); }
.iti__dial-code { color: color-mix(in oklab, currentColor 55%, transparent); }

/* темні картки: попап входу та «купити в один клік» */
.auth-modal .iti__selected-dial-code,
.quick-modal .iti__selected-dial-code { color: var(--background); }
.auth-modal .iti__arrow,
.quick-modal .iti__arrow { border-top-color: color-mix(in oklab, var(--background) 45%, transparent); }
.auth-modal .iti__dropdown-content,
.quick-modal .iti__dropdown-content {
  background: color-mix(in oklab, var(--foreground) 92%, #000);
  color: var(--background);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--background) 14%, transparent), 0 20px 25px -5px rgba(0, 0, 0, .45);
}
.auth-modal .iti__country.iti__highlight,
.quick-modal .iti__country.iti__highlight { background: color-mix(in oklab, var(--background) 10%, transparent); }
.auth-modal .iti__search-input,
.quick-modal .iti__search-input { color: var(--background); border-bottom-color: color-mix(in oklab, var(--background) 14%, transparent); }

/* поле в попапі вже має власну рамку: прибираємо подвійну лінію навколо .iti */
.auth-modal .iti__tel-input,
.quick-modal .iti__tel-input { padding-left: .8rem; }

@media (prefers-reduced-motion: reduce) {
  .iti__dropdown-content { transition: none; }
}