/* ========================================
   OTA FLIGHT MODAL
======================================== */

#flight-modal-overlay{

    position:fixed;

    inset:0;

    z-index:999999;

    display:none;

    align-items:center;

    justify-content:center;

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

}

.flight-modal-backdrop{

    position:absolute;

    inset:0;

    background:rgba(17,24,39,.72);

    backdrop-filter:blur(4px);

}

.flight-modal{

    position:relative;

    width:100%;

    max-width:620px;

    height:100vh;

    margin-left:auto;

    background:var(--vz-white);

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

    z-index:2;

    overflow:auto;

    animation:flightDrawerIn .24s ease;

}

.flight-modal-content{

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

}

.flight-modal-close{

    position:absolute;

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

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

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

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

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

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

    font-weight:700;

    cursor:pointer;

    z-index:5;

    transition:.2s ease;

}

.flight-modal-close:hover{

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

}

@keyframes flightDrawerIn{

    from{

        opacity:0;

        transform:translateX(80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* ========================================
   DRAWER HEADER OTA
======================================== */

.drawer-flight-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

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

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

    border-bottom:
        var(--vz-border-width)
        var(--vz-border-style)
        var(--vz-border-blue);

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

}


.drawer-airline-row{

    display:flex;

    align-items:center;

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

}


.drawer-airline-logo{

    width:56px;

    height:56px;

    object-fit:contain;

    flex-shrink:0;

}


.drawer-airline-name{

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

    font-weight:800;

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

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

}


.drawer-flight-route{

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

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

    font-weight:600;

}


.drawer-price-block{

    text-align:right;

}


.drawer-price-label{

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

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

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

}


.drawer-price{

    font-size:28px;

    font-weight:800;

    color:var(--vz-primary);

    line-height:1;

}

/* ========================================
   OTA TIMELINE
======================================== */

.drawer-section-title{

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

    font-weight:800;

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

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

}


.drawer-timeline-card{

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

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

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

    background:var(--vz-white);

}


.drawer-timeline-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

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

}


.drawer-time-block{

    min-width:90px;

    text-align:center;

}


.drawer-main-time{

    font-size:26px;

    font-weight:800;

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

    line-height:1;

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

}


.drawer-airport{

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

    font-weight:700;

    color:var(--vz-text);

}


.drawer-center-line{

    flex:1;

    text-align:center;

}


.drawer-duration{

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

    font-weight:600;

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

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

}


.drawer-line{

    height:2px;

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

    position:relative;

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

}


.drawer-line::after{

    content:'';

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%, -50%);

    width:18px;

    height:18px;

    background-image:url('https://viajalea.online/wp-content/uploads/2026/05/icon-airplane.svg');

    background-repeat:no-repeat;

    background-position:center;

    background-size:contain;

}


.drawer-stops{

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

    font-weight:700;

    color:var(--vz-turquoise);

}

/* ========================================
   OTA ACCORDION
======================================== */

.drawer-flight-accordion{

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

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

    padding-top:var(--vz-space-md);

}


.drawer-accordion-toggle{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border:none;

    background:transparent;

    cursor:pointer;

    padding:0;

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

    font-weight:700;

    color:var(--vz-purple);

}

.drawer-accordion-toggle:hover{

    background:transparent !important;

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

}


.drawer-accordion-icon{

    transition:.25s ease;

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

}


.drawer-flight-accordion.active
.drawer-accordion-icon{

    transform:rotate(180deg);

}


.drawer-accordion-content{

    display:none;

    padding-top:var(--vz-space-md);

}


.drawer-flight-accordion.active
.drawer-accordion-content{

    display:block;

}


.drawer-aircraft-info{

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

    color:var(--vz-text);

    line-height:1.7;

}

/* ========================================
   OTA FEATURE CHIPS
======================================== */

.drawer-features-bar{

    display:flex;

    flex-wrap:wrap;

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

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

}


.drawer-feature-chip{

    display:flex;

    align-items:center;

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

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

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

    background:var(--vz-surface);

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

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

    font-weight:700;

    color:var(--vz-text);

    transition:.2s ease;

}


.drawer-feature-chip:hover{

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

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

}


.drawer-feature-icon{

    width:14px;

    height:14px;

    object-fit:contain;

    flex-shrink:0;

}

.drawer-trip-section{

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

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

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

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

    background:var(--vz-white);

}

.drawer-policy-section{

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

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

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

    background:var(--vz-white);

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

}

.drawer-flight-divider{

    border-top:
        1px dashed var(--vz-border-blue);

    margin:
        calc(var(--vz-space-2xl) * 1.5)
        0;

}

.drawer-continue-btn{

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

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

    border:none !important;

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

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

    font-weight:600;

    cursor:pointer;

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

}

.drawer-continue-btn:hover{

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

}

.drawer-accordion-toggle:active,
.drawer-accordion-toggle:focus,
.drawer-accordion-toggle:focus-visible{

    background:transparent !important;

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

    outline:none !important;

    box-shadow:none !important;

}

.drawer-policy-item{

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

    font-weight:600;

    color:var(--vz-text);

    line-height:1.8;

}

.drawer-segment-item{

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

    border-bottom:
        var(--vz-border-width)
        var(--vz-border-style)
        var(--vz-border-blue);

}

.drawer-segment-item:last-child{

    border-bottom:none;

}

.drawer-segment-route{

    display:flex;

    justify-content:space-between;

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

}

.drawer-segment-airport-block{

    flex:1;

}

.drawer-segment-city{

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

    font-weight:700;

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

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

}

.drawer-segment-airport-name{

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

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

    line-height:1.4;

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

}

.drawer-segment-time{

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

    font-weight:700;

    color:var(--vz-primary);

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

}

.drawer-segment-terminal{

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

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

}

.drawer-segment-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:var(--vz-primary);

}

.drawer-segment-flight-info{

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

    padding-top:var(--vz-space-md);

    border-top:
        1px dashed var(--vz-border-blue);

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

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

}

.drawer-layover{

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

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

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

    background:var(--vz-bg);

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

    text-align:center;

}

.drawer-layover-city{

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

    font-weight:700;

    color:var(--vz-primary);

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

}

.drawer-layover-duration{

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

    font-weight:600;

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

}

.drawer-fare-brand{

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

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

    font-weight:600;

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

}

.drawer-segment-arrow-icon{

    width:18px;

    height:18px;

    display:block;

}
/* ==================================================
   TABLET
================================================== */

@media(max-width:1024px){

    .drawer-flight-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .drawer-price-block{

        text-align:left;

    }

}


/* ==================================================
   MOBILE
================================================== */

@media(max-width:768px){

    /* Modal */

    #flight-modal-overlay{

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

    }

    .flight-modal{

        max-width:100%;

        height:100vh;

    }

    .flight-modal-content{

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

    }

    .flight-modal-close{

        width:36px;

        height:36px;

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

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

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

    }

    /* Header */

    .drawer-airline-row{

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

    }

    .drawer-airline-logo{

        width:42px;

        height:42px;

    }

    .drawer-airline-name{

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

    }

    .drawer-flight-route{

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

    }

    .drawer-price{

        font-size:16px;

    }

    /* Timeline */

    .drawer-timeline-top{

        flex-direction:column;

    }

    .drawer-center-line{

        width:100%;

    }

    .drawer-main-time{

        font-size:14px;

    }

    .drawer-airport{

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

    }

    .drawer-duration{

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

    }

    .drawer-stops{

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

    }

    /* Sections */

    .drawer-trip-section{

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

    }

    .drawer-policy-section{

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

    }

    .drawer-section-title{

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

    }

    /* Segments */

    .drawer-segment-city{

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

    }

    .drawer-segment-time{

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

    }

    .drawer-segment-airport-name{

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

    }

    .drawer-segment-terminal{

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

    }

    .drawer-segment-flight-info{

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

    }

    /* Layovers */

    .drawer-layover{

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

    }

    .drawer-layover-city{

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

    }

    .drawer-layover-duration{

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

    }

    /* Features */

    .drawer-feature-chip{

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

    }

    /* Policies */

    .drawer-policy-item{

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

    }

    /* Continue */

    .drawer-continue-btn{

        width:100%;

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

    }

}