/* =====================================
   DATOS DE CONTACTO
===================================== */

.reservation-contact-card{

    background:var(--vz-white);

    border:
        var(--vz-border-width)
        var(--vz-border-style)
        var(--vz-border-light);

    border-radius:var(--vz-radius-lg);

    padding:var(--vz-space-2xl);

    box-shadow:var(--vz-shadow-md);

}

.reservation-contact-card h2{

    color:var(--vz-text-dark);

    font-size:var(--vz-font-3xl);

    font-weight:700;

    margin-bottom:var(--vz-space-xl);

}

.reservation-contact-text{

    color:var(--vz-text-light);

    font-size:var(--vz-font-lg);

    line-height:1.8;

    margin-bottom:var(--vz-space-2xl);

}

/* =====================================
   INPUTS
===================================== */

.reservation-contact-card input{

    border:
        var(--vz-border-width)
        var(--vz-border-style)
        var(--vz-border-light) !important;

    border-radius:var(--vz-radius-lg) !important;

    height:56px;

    font-size:var(--vz-font-lg);

    background-color:var(--vz-white);

    transition:.25s;

}

.reservation-contact-card input:focus{

    border-color:var(--vz-turquoise);

    box-shadow:
        0 0 0 4px
        rgba(0,188,212,.15);

    outline:none;

}

/* =====================================
   CONSENTIMIENTO
===================================== */

.reservation-consent{

    margin-top:var(--vz-space-2xl);

    padding-top:var(--vz-space-2xl);

    border-top:
        var(--vz-border-width)
        var(--vz-border-style)
        var(--vz-border);

}

.reservation-consent label{

    display:flex;

    align-items:flex-start;

    gap:var(--vz-space-lg);

    font-size:var(--vz-font-lg);

    line-height:1.7;

    color:var(--vz-text);

}

/* =====================================
   CHECKBOX
===================================== */

#reservation-consent{

    width:18px;

    height:18px;

    margin-top:3px;

    accent-color:var(--vz-purple);

    cursor:pointer;

}

/* =====================================
   LINKS
===================================== */

.reservation-consent a{

    color:var(--vz-turquoise);

    text-decoration:none;

    font-weight:600;

}

.reservation-consent a:hover{

    color:var(--vz-primary);

    text-decoration:underline;

}

/* =====================================
   MENSAJE CONFIRMADO
===================================== */

#reservation-consent-confirmed{

    margin-top:var(--vz-space-xl);

    padding:14px 18px;

    background:var(--vz-border-light);

    border-left:4px solid var(--vz-turquoise);

    border-radius:var(--vz-radius-md);

    color:var(--vz-text-dark);

    font-size:var(--vz-font-lg);

    font-weight:600;

}

/* ========================================
PASAJEROS
======================================== */

.reservation-passenger-card{

    background:var(--vz-white);

    border:
        var(--vz-border-width)
        var(--vz-border-style)
        var(--vz-border-light);

    border-radius:var(--vz-radius-lg);

    overflow:hidden;

    margin-bottom:var(--vz-space-lg);

    box-shadow:var(--vz-shadow-md);

}

.reservation-passenger-toggle{

    width:100% !important;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:
        var(--vz-space-lg)
        var(--vz-space-xl) !important;

    border:none !important;

    background:var(--vz-surface) !important;

    color:var(--vz-text-dark) !important;

    font-size:var(--vz-font-xl) !important;

    font-weight:700 !important;

    cursor:pointer;

    transition:.25s;

}

.reservation-passenger-toggle:hover,
.reservation-passenger-toggle:focus,
.reservation-passenger-toggle:active{

    background:var(--vz-border-light) !important;

    color:var(--vz-text-dark) !important;

    outline:none !important;

    box-shadow:none !important;

}

.reservation-passenger-body{

    padding:
        var(--vz-space-lg)
        var(--vz-space-xl);

    border-top:
        var(--vz-border-width)
        var(--vz-border-style)
        var(--vz-border-light);

}

.passenger-header-info{

    display:flex;

    align-items:center;

    gap:var(--vz-space-lg);

}

.passenger-status{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:70px;

    padding:
        var(--vz-space-xs)
        var(--vz-space-xl);

    border-radius:var(--vz-radius-pill);

    font-size:var(--vz-font-sm);

    font-weight:700;

    background:#FEE2E2;

    color:#d32f2f;

}

.passenger-status.completed{

    background:#DCFCE7;

    color:#15803D;

}

/* ========================================
FOOTER
======================================== */

.reservation-footer{

    margin-top:var(--vz-space-2xl);

}


/* ========================================
ANULA FUCSIA HELLO/ELEMENTOR
======================================== */

.reservation-passenger-toggle,
.reservation-passenger-toggle:hover,
.reservation-passenger-toggle:focus,
.reservation-passenger-toggle:active{

    color:var(--vz-text-dark) !important;

}

/* ========================================
   SIDEBAR RESERVA
======================================== */

#reservation-sidebar{

    padding:var(--vz-space-2xl);

    border-radius:var(--vz-radius-lg);

}

/* Cards blancas */

#reservation-sidebar .drawer-flight-header,
#reservation-sidebar .drawer-trip-section,
#reservation-sidebar .drawer-policy-section{

    background:var(--vz-white) !important;

}

/* Compactar */

#reservation-sidebar .drawer-trip-section{

    padding:var(--vz-space-xl) !important;

    margin-bottom:var(--vz-font-lg) !important;

    border-radius:var(--vz-radius-lg) !important;

}

#reservation-sidebar .drawer-policy-section{

    padding:var(--vz-space-xl) !important;

    margin-top:var(--vz-font-lg) !important;

    border-radius:var(--vz-radius-lg) !important;

}

#reservation-sidebar .drawer-timeline-card{

    padding:var(--vz-space-lg) !important;

    border-radius:var(--vz-radius-lg) !important;

}

#reservation-sidebar .drawer-main-time{

    font-size:var(--vz-font-2xl) !important;

}

#reservation-sidebar .drawer-airport{

    font-size:var(--vz-font-sm) !important;

}

#reservation-sidebar .drawer-section-title{

    font-size:var(--vz-font-lg) !important;

    margin-bottom:var(--vz-space-lg) !important;

}

#reservation-sidebar .drawer-flight-divider{

    margin:var(--vz-space-lg) 0 !important;

}

#reservation-sidebar .drawer-features-bar{

    margin-top:var(--vz-space-md) !important;

}

#reservation-sidebar .drawer-price{

    font-size:var(--vz-font-2xl) !important;

}

#reservation-sidebar .drawer-airline-name{

    font-size:var(--vz-font-2xl) !important;

}

#reservation-sidebar .drawer-airline-logo{

    width:42px !important;

    height:42px !important;

}

#reservation-sidebar .drawer-flight-header{

    padding:
        var(--vz-space-xl)
        var(--vz-font-2xl) !important;

    border-radius:var(--vz-radius-lg);

    background:var(--vz-white);

    margin-bottom:var(--vz-font-lg);

}

#reservation-sidebar::before{

    pointer-events:none !important;

}

.reservation-passenger-summary{

    background:var(--vz-white);

    border:
        var(--vz-border-width)
        var(--vz-border-style)
        var(--vz-border-light);

    border-radius:var(--vz-radius-lg);

    padding:var(--vz-font-2xl);

    margin-bottom:var(--vz-space-xl);

}

.summary-passenger-header{

    display:grid;

    grid-template-columns:
        auto
        auto
        1fr
        auto;

    gap:var(--vz-font-2xl);

    align-items:center;

    margin-bottom:var(--vz-font-2xl);

}

.summary-passenger-type,
.summary-passenger-document,
.summary-passenger-name,
.summary-passenger-gender{

    font-size:var(--vz-font-xl);

    font-weight:700;

    color:var(--vz-text-dark);

}

.summary-passenger-name{

    text-transform:uppercase;

}

.summary-passenger-grid{

    display:grid;

    grid-template-columns:
        repeat(5,1fr);

    gap:var(--vz-space-2xl);

}

.summary-passenger-grid span{

    display:block;

    font-size:var(--vz-font-sm);

    font-weight:600;

    color:var(--vz-text-light);

    margin-bottom:var(--vz-space-xs);

}

.summary-passenger-grid strong{

    display:block;

    font-size:var(--vz-font-lg);

    font-weight:600;

    color:var(--vz-text-dark);

}

.reservation-contact-error{

    color:#d32f2f;

    font-size:var(--vz-font-xl);

    font-weight:600;

    margin-top:var(--vz-space-lg);

    padding:var(--vz-space-lg) 0;

}

.reservation-help-message{

    color:var(--vz-text);

    font-size:var(--vz-font-lg);

    font-weight:600;

    margin-bottom:13px;

    padding:
        var(--vz-space-lg)
        var(--vz-font-lg);

}

/* =====================================
   ICONOS DATOS DE CONTACTO
===================================== */

#contact_first_name{

    background-image:url('https://viajalea.online/wp-content/uploads/2026/06/user.svg');

    background-repeat:no-repeat;
    background-position:14px center;
    background-size:18px;

    padding-left:30px !important;

}

#contact_last_name{

    background-image:url('https://viajalea.online/wp-content/uploads/2026/06/user.svg');

    background-repeat:no-repeat;
    background-position:14px center;
    background-size:18px;

    padding-left:30px !important;

}

#contact_email{

    background-image:url('https://viajalea.online/wp-content/uploads/2026/06/mail.svg');

    background-repeat:no-repeat;
    background-position:14px center;
    background-size:18px;

    padding-left:30px !important;

}

#contact_phone{

    background-image:url('https://viajalea.online/wp-content/uploads/2026/06/phone.svg');

    background-repeat:no-repeat;
    background-position:14px center;
    background-size:18px;

    padding-left:30px !important;

}

/* =====================================
   PASAJEROS V2
===================================== */

.reservation-passenger-grid{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.reservation-passenger-row{

    display:grid;

    gap:14px;

}

.reservation-passenger-row-top{

    grid-template-columns:
        1.3fr
        1.3fr
        1fr
        .9fr;

}

.reservation-passenger-row-bottom{

    grid-template-columns:
        1.2fr
        1fr
        1fr
        1.2fr
        1fr;

}

.reservation-passenger-grid input,
.reservation-passenger-grid select{

    width:100% !important;

    height:44px !important;

    border:
        var(--vz-border-width)
        var(--vz-border-style)
        var(--vz-border-light) !important;

    border-radius:var(--vz-radius-lg) !important;

    background:var(--vz-white) !important;

    color:var(--vz-text-dark) !important;

    font-size:var(--vz-font-lg) !important;

    box-sizing:border-box;

}

.reservation-passenger-grid input{

    padding:0 var(--vz-space-lg);

}

.reservation-passenger-grid select{

    padding:
        0
        32px
        0
        var(--vz-space-lg);

}

.reservation-passenger-grid input:focus,
.reservation-passenger-grid select:focus{

    outline:none;

    border-color:var(--vz-turquoise);

    box-shadow:
        0 0 0 4px rgba(0,188,212,.15);

}

/* =====================================
   ICONOS PASAJEROS
===================================== */

.passenger-user-icon{

    background-image:url('https://viajalea.online/wp-content/uploads/2026/06/user.svg');

    background-repeat:no-repeat;

    background-position:14px center;

    background-size:18px;

    padding-left:46px !important;

}

.passenger-world-icon{

    background-image:url('https://viajalea.online/wp-content/uploads/2026/06/world.svg');

    background-repeat:no-repeat;

    background-position:14px center;

    background-size:18px;

    padding-left:46px !important;

}


/* =====================================
   CONTACT GRID
===================================== */

.reservation-contact-grid{

    display:grid;

    grid-template-columns:
        1fr
        1fr
        1.5fr
        .9fr;

    gap:var(--vz-space-xl);

    margin:24px 0;

}

.reservation-passenger-grid input,
.reservation-passenger-grid select,
.reservation-contact-grid input{

    background:var(--vz-white) !important;

}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{

    -webkit-box-shadow:
        0 0 0 1000px
        var(--vz-white)
        inset !important;

    -webkit-text-fill-color:
        var(--vz-text-dark) !important;

}

.drawer-segment-arrow-icon{

    width:18px;

    height:18px;

    display:block;

}

/* =====================================
   BOTONES RESERVA
===================================== */

#reservation-contact-btn,
#reservation-continue-btn,
#reservation-passengers-btn,
.reservation-edit-btn,
.reservation-confirm-btn{

    background:var(--vz-primary) !important;

    color:var(--vz-white) !important;

    border:none !important;

    border-radius:var(--vz-radius-md);

    padding:12px 22px;

    font-weight:700;

}

#reservation-contact-btn:hover,
#reservation-continue-btn:hover,
#reservation-passengers-btn:hover,
.reservation-edit-btn:hover,
.reservation-confirm-btn:hover{

    background:var(--vz-turquoise) !important;

    color:var(--vz-white) !important;

}

#reservation-edit-btn,
#reservation-confirm-btn{

    background:var(--vz-primary) !important;

    color:var(--vz-white) !important;

    border:
        var(--vz-border-width)
        var(--vz-border-style)
        var(--vz-primary) !important;

    border-radius:var(--vz-radius-md) !important;

    padding:12px 20px !important;

    font-weight:700 !important;

}

#reservation-edit-btn:hover,
#reservation-confirm-btn:hover{

    background:var(--vz-turquoise) !important;

    border-color:var(--vz-turquoise) !important;

    color:var(--vz-white) !important;

}

/* =====================================
   RESPONSIVE PASAJEROS
===================================== */

@media(max-width:1024px){

    .reservation-passenger-row-top{

        grid-template-columns:
            repeat(2,1fr);

    }

    .reservation-passenger-row-bottom{

        grid-template-columns:
            repeat(2,1fr);

    }

    .reservation-contact-grid{

        grid-template-columns:
            repeat(2,1fr);

    }

}

/* =====================================
   MOBILE COMPACT V2
===================================== */

@media(max-width:768px){

    .reservation-contact-card{

        padding:var(--vz-space-xl);

        border-radius:var(--vz-radius-lg);

    }

    .reservation-contact-card h2{

        font-size:var(--vz-font-2xl);

        margin-bottom:var(--vz-space-lg);

    }

    .reservation-contact-text{

        font-size:var(--vz-font-md);

        line-height:1.4;

        margin-bottom:var(--vz-space-xl);

    }

    .reservation-contact-grid{

        grid-template-columns:1fr;

        gap:var(--vz-space-lg);

        margin:var(--vz-space-xl) 0;

    }

    .reservation-contact-card input{

        height:var(--vz-input-height);

        font-size:var(--vz-input-font-size);

    }

    .reservation-passenger-row-top,
    .reservation-passenger-row-bottom{

        grid-template-columns:1fr;

        gap:var(--vz-space-lg);

    }

    .reservation-passenger-card{

        border-radius:var(--vz-radius-lg);

        margin-bottom:var(--vz-space-lg);

    }

    .reservation-passenger-toggle{

        padding:var(--vz-space-lg) !important;

        font-size:var(--vz-font-lg) !important;

    }

    .reservation-passenger-body{

        padding:var(--vz-space-lg);

    }

    .reservation-passenger-summary{

        padding:var(--vz-space-lg);

        border-radius:var(--vz-radius-lg);

    }

    .summary-passenger-header{

        grid-template-columns:1fr;

        gap:var(--vz-space-sm);

        margin-bottom:var(--vz-space-lg);

    }

    .summary-passenger-type,
    .summary-passenger-document,
    .summary-passenger-name,
    .summary-passenger-gender{

        font-size:var(--vz-font-md);

    }

    .summary-passenger-grid{

        grid-template-columns:
            repeat(2,1fr);

        gap:var(--vz-space-lg);

    }

    .summary-passenger-grid span{

        font-size:var(--vz-font-xs);

    }

    .summary-passenger-grid strong{

        font-size:var(--vz-font-md);

    }

    .reservation-help-message{

        padding:var(--vz-space-lg);

        font-size:var(--vz-font-md);

    }

    #reservation-consent-confirmed{

        padding:var(--vz-space-lg);

        font-size:var(--vz-font-md);

    }

}

@media(max-width:768px){

    #reservation-contact-btn,
    #reservation-continue-btn,
    #reservation-passengers-btn,
    #reservation-edit-btn,
    #reservation-confirm-btn{

        padding:8px 12px !important;

        font-size:var(--vz-font-sm) !important;

        min-height:30px;

    }

}