/* ============================================================================
   dtp-phone.css — Estilos del componente de teléfono internacional (dtp-phone.js)
   ----------------------------------------------------------------------------
   Compartido por Tienda y Turnos. Mobile-first, se siente app nativa.
   Usa los tokens de dtp-ui.css. Cero blur/filtros (hosting compartido).
   Se carga solo en las pantallas que lo usan (carrito, reservas).
   ============================================================================ */
.dtp-phone-wrap { width: 100%; }

/* Asterisco de campo obligatorio (compartido por carrito y reservas) */
.field-req { color: var(--ui-danger, #dc2626); font-weight: 800; }

.dtp-phone {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 8px;
}

/* Botón país (bandera + prefijo) */
.dtp-phone__country {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 0 12px;
    height: 48px;
    border: 1px solid var(--ui-border-strong, #d1d5db);
    border-radius: var(--ui-radius-sm, 10px);
    background: #fff;
    color: var(--ui-text, #111827);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s var(--ui-ease), box-shadow .15s var(--ui-ease);
}
.dtp-phone__country:hover { border-color: var(--ui-primary, #2563eb); }
.dtp-phone__country .bi { font-size: 12px; color: var(--ui-text-soft, #6b7280); }
.dtp-phone__flag { font-size: 20px; line-height: 1; }
.dtp-phone__dial { font-variant-numeric: tabular-nums; }

/* Input del número nacional */
.dtp-phone__num {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--ui-border-strong, #d1d5db);
    border-radius: var(--ui-radius-sm, 10px);
    background: #fff;
    color: var(--ui-text, #111827);
    font-size: 16px; /* 16px evita el zoom automático de iOS al enfocar */
    font-variant-numeric: tabular-nums;
    letter-spacing: .3px;
    transition: border-color .15s var(--ui-ease), box-shadow .15s var(--ui-ease);
}
.dtp-phone__num:focus {
    outline: none;
    border-color: var(--ui-primary, #2563eb);
    box-shadow: var(--ui-ring, 0 0 0 3px rgba(37,99,235,.22));
}
.dtp-phone__num::placeholder { color: #9aa3b2; letter-spacing: normal; }

/* Estado inválido (validación amable) */
.dtp-phone.is-invalid .dtp-phone__num,
.dtp-phone-wrap.is-invalid .dtp-phone__num {
    border-color: var(--ui-danger, #dc2626);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .16);
}

/* Ayuda / ejemplo debajo (se explica solo).
   Panel con fondo propio: el checkout puede ser claro u oscuro según el tema
   del comercio, y así el texto siempre tiene contraste garantizado. */
.dtp-phone__help {
    margin-top: 7px;
    padding: 8px 11px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
}
.dtp-phone__eg {
    display: inline-block;
    color: #0f172a;
    font-weight: 700;
    white-space: nowrap;
}

/* Popover de países.
   color explícito: el popover es blanco siempre, pero vive dentro del modal
   del checkout (que puede ser oscuro) y sin esto heredaría texto claro
   sobre fondo claro (opciones invisibles). */
.dtp-phone__pop {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    inset-inline-start: 0;
    width: min(320px, 86vw);
    background: #fff;
    color: #111827;
    border: 1px solid var(--ui-border, #e5e7eb);
    border-radius: var(--ui-radius, 14px);
    box-shadow: 0 20px 40px rgba(16,24,40,.28);
    overflow: hidden;
}
.dtp-phone__search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ui-border, #e5e7eb);
}
.dtp-phone__search .bi { color: var(--ui-text-soft, #6b7280); }
.dtp-phone__q {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    background: transparent;
    color: var(--ui-text, #111827);
}
.dtp-phone__list {
    list-style: none;
    margin: 0;
    padding: 4px;
    max-height: 260px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.dtp-phone__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 10px;
    border-radius: var(--ui-radius-sm, 10px);
    color: #111827;
    cursor: pointer;
}
.dtp-phone__opt:hover { background: #f3f4f6; }
.dtp-phone__opt.is-sel { background: rgba(37, 99, 235, .10); }
.dtp-phone__optname { flex: 1; font-weight: 600; font-size: 14.5px; color: #111827; }
.dtp-phone__optdial {
    color: #4b5563;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.dtp-phone__empty { padding: 20px; text-align: center; color: #4b5563; }

/* Toque cómodo en mobile */
@media (max-width: 480px) {
    .dtp-phone__country, .dtp-phone__num { height: 52px; }
}