/**
 * JFB International Phone Input - Estilos Frontend
 * Rutas de imágenes de la documentación oficial de intl-tel-input v25
 * https://intl-tel-input.com/docs/getting-started
 */

/* ─── Rutas de banderas (jsDelivr - CDN oficial recomendada) ─────────────────
   v25 usa --iti-path-flags-1x y --iti-path-flags-2x en el selector .iti
   Fuente: documentación oficial https://intl-tel-input.com/docs/getting-started
────────────────────────────────────────────────────────────────────────────── */
.iti {
  --iti-path-flags-1x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@25.3.1/build/img/flags.webp");
  --iti-path-flags-2x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@25.3.1/build/img/flags@2x.webp");
  --iti-path-globe-1x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@25.3.1/build/img/globe.webp");
  --iti-path-globe-2x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@25.3.1/build/img/globe@2x.webp");
}

/* ─── Wrapper .iti ───────────────────────────────────────────────────────────
   JFB aplica la clase al propio <input> (Caso A) o al wrapper div (Caso B)
────────────────────────────────────────────────────────────────────────────── */
.jfb-phone-intl.iti,
.jfb-phone-intl .iti {
  display: block;
  width: 100%;
}

/* ─── Input ──────────────────────────────────────────────────────────────── */
.jfb-phone-intl.iti input[type="tel"],
.jfb-phone-intl.iti input[type="text"],
.jfb-phone-intl .iti input[type="tel"],
.jfb-phone-intl .iti input[type="text"] {
  width: 100% !important;
  padding-left: 95px !important;
  box-sizing: border-box;
}

/* Con código de marcación visible */
.jfb-phone-intl.iti--show-selected-dial-code input[type="tel"],
.jfb-phone-intl.iti--show-selected-dial-code input[type="text"],
.jfb-phone-intl .iti--show-selected-dial-code input[type="tel"],
.jfb-phone-intl .iti--show-selected-dial-code input[type="text"] {
  padding-left: 115px !important;
}

/* ─── Selector de país ───────────────────────────────────────────────────── */
.jfb-phone-intl .iti__selected-country,
.jfb-phone-intl.iti .iti__selected-country {
  background-color: transparent;
  padding: 0 8px;
  gap: 6px;
}

.jfb-phone-intl .iti__selected-country:hover,
.jfb-phone-intl.iti .iti__selected-country:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* ─── Dropdown ───────────────────────────────────────────────────────────── */
.iti__dropdown-content {
  z-index: 99999 !important;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid #ddd;
}

.iti__search-input {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  box-sizing: border-box;
}

.iti__search-input:focus {
  outline: none;
  border-bottom-color: #0073aa;
}

.iti__country-listbox {
  max-height: 220px;
  overflow-y: auto;
}

.iti__country-listbox::-webkit-scrollbar       { width: 6px; }
.iti__country-listbox::-webkit-scrollbar-track  { background: #f5f5f5; }
.iti__country-listbox::-webkit-scrollbar-thumb  { background: #ccc; border-radius: 3px; }

.iti__country {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.iti__country:hover,
.iti__country[aria-selected="true"] {
  background-color: #f0f0f0;
}

.iti__dial-code {
  color: #888;
  font-size: 13px;
}

/* ─── Popup de Elementor ──────────────────────────────────────────────────── */
.elementor-popup-modal .iti__dropdown-content {
  z-index: 100000 !important;
}

/* ─── Error ──────────────────────────────────────────────────────────────── */
.jfb-iti--invalid {
  border-color: #dc3232 !important;
  box-shadow: 0 0 0 2px rgba(220, 50, 50, 0.15) !important;
}

.jfb-iti__error {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #dc3232;
  line-height: 1.4;
}

/* ─── Focus ──────────────────────────────────────────────────────────────── */
.jfb-phone-intl.iti input:focus,
.jfb-phone-intl .iti input:focus {
  outline: 2px solid #0073aa;
  outline-offset: 0;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .jfb-phone-intl.iti input[type="tel"],
  .jfb-phone-intl .iti input[type="tel"] {
    padding-left: 80px !important;
    font-size: 16px;
  }
  .iti__country-listbox { max-height: 180px; }
}