/* ============================================================
   web_reservacion.css — Estilos del formulario de reservación
   ============================================================ */

/* Contenedor del campo de teléfono con bandera */
.iti-wrap {
    width: 100%;
}

/* El widget intl-tel-input ocupa todo el ancho del contenedor */
.iti-wrap .iti {
    width: 100%;
}

/* Input de teléfono — misma apariencia que los otros inputs del formulario */
.res-phone-input {
    width: 100%;
    height: 3rem;           /* h-12 */
    padding: 0 1rem;
    border: 1px solid color-mix(in srgb, var(--color-detail, #d4b896) 30%, transparent);
    border-radius: 0.5rem;  /* rounded-lg */
    color: var(--text-main, #1a1a1a);
    background: transparent;
    font-size: 1rem;
    outline: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.res-phone-input:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #8B1A1A) 40%, transparent);
    border-color: var(--color-primary, #8B1A1A);
}

/* Botón de bandera — alinear verticalmente con el input */
.iti-wrap .iti__flag-container {
    padding: 0 0.25rem;
}

/* Dropdown de países */
.iti__country-list {
    z-index: 9999;
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border: 1px solid color-mix(in srgb, var(--color-detail, #d4b896) 30%, transparent);
    max-height: 260px;
    font-size: 0.9rem;
}

.iti__country.iti__highlight {
    background: color-mix(in srgb, var(--color-primary, #8B1A1A) 8%, transparent);
}

/* ─── Chip seleccionado — forzar texto blanco independientemente del orden CSS ── */
/* Tailwind genera las utilidades en orden alfabético, por lo que text-text-muted
   puede ganar sobre text-white si aparece después en el CSS compilado.
   Esta clase resuelve el conflicto de especificidad. */
.chip-selected {
    color: #ffffff !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}