.vja-confirmation{

    display:flex;

    flex-direction:column;

    gap:25px;

    font-family:'Montserrat',sans-serif;

}

/* =====================================
   HEADER
===================================== */

.vja-confirmation-header{

    background:var(--vz-white);

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

    padding:35px;

    text-align:center;

    box-shadow:
        0 2px 12px
        rgba(0,0,0,.08);

}

.vja-confirmation-icon{

    width:70px;

    height:70px;

    margin:0 auto 15px;

    border-radius:50%;

    background:var(--vz-accent);

    color:var(--vz-white);

    font-size:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

}

.vja-confirmation-header h1{

    margin:0 0 12px;

    color:var(--vz-text);

    font-size:32px;

    font-weight:700;

}

.vja-booking-reference{

    font-size:32px;

    font-weight:800;

    color:var(--vz-primary);

    margin:10px 0;

}

.vja-status{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:#FFF3CD;

    color:#856404;

    font-size:15px;

    font-weight:700;

}

.vja-confirmation-price{

    font-size:48px;

    font-weight:800;

    color:var(--vz-turquoise);

    margin-top:14px;

    line-height:1;

}

/* =====================================
   CARDS
===================================== */

.vja-card{

    background:var(--vz-white);

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

    padding:22px;

    box-shadow:
        0 2px 12px
        rgba(0,0,0,.08);

}

.vja-card h2{

    margin:0 0 18px;

    color:var(--vz-primary);

    font-size:26px;

    font-weight:600;

}

.vja-card h3{

    margin:0 0 12px;

    color:var(--vz-primary);

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

    font-weight:600;

}

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

.vja-grid{

    display:flex;

    flex-wrap:wrap;

    gap:32px;

}

.vja-grid strong{

    display:block;

    margin-bottom:4px;

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

    font-size:15px;

    font-weight:600;

}

/* =====================================
   LAYOUT SUPERIOR
===================================== */

.vja-confirmation-top{

    display:grid;

    grid-template-columns:
        40%
        60%;

    gap:20px;

    align-items:start;

}

.vja-contact-column{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.vja-flight-column{

    display:flex;

    flex-direction:column;

    gap:20px;

}

/* =====================================
   AEROLINEA
===================================== */

.vja-airline-summary{

    display:flex;

    align-items:center;

    gap:16px;

}

.vja-airline-logo{

    width:40px;

    height:40px;

    object-fit:contain;

    flex-shrink:0;

}

.vja-airline-line{

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

    font-weight:600;

    color:var(--vz-primary);

}

/* =====================================
   VUELOS
===================================== */

.vja-flight-title{

    color:var(--vz-primary);

    font-size:20px;

    font-weight:600;

    margin-bottom:10px;

}

.vja-flight-route{

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

    font-size:15px;

    margin-bottom:10px;

}

.vja-flight-chips{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:12px;

}

.vja-flight-chips span{

    padding:6px 10px;

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

    background:var(--vz-surface);

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

    color:var(--vz-primary);

    font-size:15px;

    font-weight:600;

}

/* =====================================
   SEGMENTOS
===================================== */

.vja-segment{

    padding:14px 16px;

    margin-top:10px;

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

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

    background:var(--vz-surface);

    display:flex;

    flex-direction:column;

    gap:6px;

    font-size:15px;

    line-height:1.6;

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

}

.vja-segment-route{

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

    font-size:15px;

}

.vja-segment-flight{

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

    font-size:15px;

    font-weight:600;

}

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

.vja-passenger{

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

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

    padding:10px;

    margin-top:10px;

    background:var(--vz-surface);

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

    font-size:13px;

    line-height:1.6;

}

/* =====================================
   ERROR
===================================== */

.vja-conf-error{

    background:#FFF8F8;

    border:1px solid #FECACA;

    padding:20px;

    border-radius:12px;

    color:var(--vz-primary);

    text-align:center;

    font-weight:700;

}

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

@media(max-width:1024px){

    .vja-confirmation-top{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .vja-confirmation{

        gap:16px;

    }

    .vja-confirmation-header{

        padding:18px;

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

    }

    .vja-confirmation-icon{

        width:52px;

        height:52px;

        font-size:24px;

        margin:0 auto 10px;

    }

    .vja-confirmation-header h1{

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

        margin-bottom:8px;

    }

    .vja-booking-reference{

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

        margin:6px 0;

    }

    .vja-status{

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

        padding:6px 12px;

    }

    .vja-confirmation-price{

        font-size:28px;

        margin-top:10px;

    }

    .vja-card{

        padding:14px;

    }

    .vja-card h2{

        font-size:18px;

        margin-bottom:12px;

    }

    .vja-card h3{

        font-size:16px;

        margin-bottom:8px;

    }

    .vja-grid{

        gap:16px;

    }

    .vja-grid strong{

        font-size:13px;

    }

    .vja-airline-summary{

        gap:10px;

    }

    .vja-airline-logo{

        width:32px;

        height:32px;

    }

    .vja-airline-line{

        font-size:14px;

    }

    .vja-flight-title{

        font-size:16px;

        margin-bottom:6px;

    }

    .vja-flight-route{

        font-size:13px;

        margin-bottom:8px;

    }

    .vja-flight-chips{

        gap:6px;

        margin-bottom:8px;

    }

    .vja-flight-chips span{

        font-size:12px;

        padding:4px 8px;

    }

    .vja-segment{

        padding:10px;

        margin-top:8px;

        gap:4px;

        font-size:13px;

    }

    .vja-segment-route{

        font-size:13px;

    }

    .vja-segment-flight{

        font-size:12px;

    }

    .vja-passenger{

        padding:8px;

        font-size:12px;

        margin-top:8px;

    }

}