/* ==========================================================
   TripBookEI Booking Flow UI
   Shared Styles
   Used by:
   - booking_form.html
   - passengers.html
   - membership.html
   - payment.html
   - ticket.html
========================================================== */

/* ===========================
   DESIGN TOKENS
=========================== */

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --primary-light:#dbeafe;

    --success:#16a34a;
    --warning:#f59e0b;
    --danger:#dc2626;

    --background:#f5f7fb;
    --card:#ffffff;

    --text:#0f172a;
    --muted:#64748b;
    --border:#e2e8f0;

    --radius-sm:12px;
    --radius:22px;
    --radius-lg:28px;

    --shadow:
        0 12px 40px rgba(15,23,42,.08);

    --transition:.25s ease;

}


/* ===========================
   PAGE
=========================== */

.booking-flow-page{

    min-height:100vh;

    padding:40px 0 70px;

}

/* ==========================================================
   TRIPBOOKEI SIGNATURE LUXURY BACKGROUND
   Navy • Sapphire • Champagne Gold • Glass
========================================================== */

.booking-flow-page{
    position:relative;
    min-height:100vh;
    overflow:hidden;
    isolation:isolate;

    background:

        /* GOLDEN LIGHT — TOP LEFT */
        radial-gradient(
            ellipse at 4% 7%,
            rgba(255,215,128,.42) 0%,
            rgba(211,164,63,.20) 16%,
            transparent 38%
        ),

        /* SAPPHIRE LIGHT — TOP RIGHT */
        radial-gradient(
            ellipse at 94% 13%,
            rgba(51,118,255,.55) 0%,
            rgba(26,78,180,.30) 23%,
            transparent 48%
        ),

        /* BLUE REFLECTION — CENTER */
        radial-gradient(
            ellipse at 47% 42%,
            rgba(34,104,235,.30) 0%,
            transparent 46%
        ),

        /* GOLD REFLECTION — LOWER RIGHT */
        radial-gradient(
            ellipse at 94% 73%,
            rgba(230,184,79,.25) 0%,
            rgba(177,126,32,.10) 19%,
            transparent 43%
        ),

        /* COBALT DEPTH — LOWER LEFT */
        radial-gradient(
            ellipse at 5% 83%,
            rgba(25,86,196,.32) 0%,
            transparent 42%
        ),

        /* MASTER NAVY */
        linear-gradient(
            145deg,
            #020b19 0%,
            #071b3d 20%,
            #0b326e 42%,
            #071d43 62%,
            #06162f 78%,
            #020a16 100%
        );

    background-attachment:fixed;
}


/* ==========================================================
   GLASS LIGHT / METALLIC REFLECTION LAYER
========================================================== */

.booking-flow-page::before{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    z-index:-1;

    background:

        linear-gradient(
            118deg,
            transparent 0%,
            transparent 13%,

            rgba(255,222,145,.16) 20%,

            rgba(255,255,255,.11) 25%,

            transparent 34%,

            transparent 56%,

            rgba(67,133,255,.14) 67%,

            transparent 77%
        );

    opacity:.95;
}


/* ==========================================================
   GLOSS / LIGHT BLOOM
========================================================== */

.booking-flow-page::after{
    content:"";

    position:absolute;

    width:70vw;
    height:70vw;

    top:18%;
    right:-30vw;

    pointer-events:none;

    z-index:-1;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(255,224,153,.16) 0%,
            rgba(72,132,255,.10) 31%,
            transparent 68%
        );

    filter:blur(10px);
}




.booking-layout{

    display:grid;

    grid-template-columns:
        minmax(0,2fr)
        380px;

    gap:30px;

    align-items:start;

}

.booking-main{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.booking-sidebar{

    position:sticky;

    top:100px;

    display:flex;

    flex-direction:column;

    gap:24px;

}


/* ==========================================================
   HERO
========================================================== */

.booking-hero{

    background:
    
    linear-gradient(
    135deg,
    rgba(49,103,255,.88),
    rgba(43,88,215,.86),
    rgba(28,58,160,.82)
    );
    
    backdrop-filter:blur(18px);
    
    -webkit-backdrop-filter:blur(18px);
    
    border:1px solid rgba(255,255,255,.18);

    border-radius:28px;

    color:#fff;

    padding:45px;

    margin-bottom:32px;

    overflow:hidden;

    position:relative;

    box-shadow:var(--shadow);

}

.booking-hero::before{

content:"";

position:absolute;

right:-140px;

top:-140px;

width:520px;

height:520px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(255,255,255,.10),
transparent 70%
);

}

.booking-hero::after{

    content:"";

    position:absolute;

    width:340px;

    height:340px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    top:-120px;

    right:-80px;

}

.booking-hero small{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:rgba(255,255,255,.15);

    padding:8px 18px;

    border-radius:999px;

    font-weight:700;

    letter-spacing:.4px;

}

.booking-hero h1{

    font-size:42px;

    font-weight:800;

    margin:22px 0 10px;

}

.booking-hero p{

    max-width:760px;

    line-height:1.8;

    opacity:.94;

    font-size:16px;

}

.hero-trip{

    margin-top:30px;

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.hero-pill{

    background:rgba(255,255,255,.14);

    border:1px solid rgba(255,255,255,.20);

    padding:12px 18px;

    border-radius:999px;

    font-weight:700;

}


/* ==========================================================
   PROGRESS BAR
========================================================== */

.booking-progress{

    background:#fff;

    border-radius:22px;

    padding:22px;

    margin-bottom:30px;

    box-shadow:var(--shadow);

    overflow:hidden;

}

.progress-list{

    display:flex;

    align-items:flex-start;

    gap:18px;

    overflow-x:auto;

    overflow-y:hidden;

    scroll-snap-type:x mandatory;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;

    padding:6px 2px;

}

.progress-list::-webkit-scrollbar{

    display:none;

}

.progress-step{

    flex:0 0 125px;

    min-width:125px;

    text-align:center;

    position:relative;

    scroll-snap-align:center;

}

.progress-step:not(:last-child)::after{

    content:"";

    position:absolute;

    top:22px;

    left:58%;

    width:84%;

    height:3px;

    background:#dbeafe;

}

.progress-circle{

    width:44px;

    height:44px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 10px;

    font-weight:800;

    background:#e2e8f0;

    color:#64748b;

    position:relative;

    z-index:2;

}

.progress-step.completed .progress-circle{

    background:#16a34a;

    color:#fff;

}

.progress-step.active .progress-circle{

    background:var(--primary);

    color:#fff;

    box-shadow:0 0 0 8px rgba(37,99,235,.12);

}

.progress-title{

    font-size:14px;

    font-weight:700;

    color:#334155;

}


.card{
    position:relative;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.92),
            rgba(244,248,255,.82)
        );

    backdrop-filter:blur(22px) saturate(135%);
    -webkit-backdrop-filter:blur(22px) saturate(135%);

    border:1px solid rgba(255,255,255,.60);

    border-radius:26px;

    box-shadow:
        0 22px 60px rgba(0,8,25,.28),
        0 2px 0 rgba(255,255,255,.80) inset,
        0 -1px 0 rgba(201,159,68,.18) inset;

    padding:28px;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.card::before{
    content:"";

    position:absolute;

    left:26px;
    right:26px;
    top:0;

    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(218,174,77,.70),
        rgba(255,235,180,.90),
        rgba(218,174,77,.70),
        transparent
    );

    opacity:.65;
}


.card:hover{

    transform:translateY(-2px);

    box-shadow:
        0 18px 45px rgba(15,23,42,.10);

}

.section-title{

    font-size:24px;

    font-weight:800;

    color:var(--text);

    margin-bottom:22px;

}


.summary-card{

    border-radius:24px;

}

.summary-logo{

    width:72px;

    height:72px;

    object-fit:contain;

    background:#fff;

    border-radius:16px;

    padding:10px;

    border:1px solid #e5e7eb;

}

.summary-airline{

    display:flex;

    gap:18px;

    align-items:center;

    margin-bottom:24px;

}

.summary-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:12px 0;

}

.summary-row span{

    color:#64748b;

}

.summary-total{

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:30px;

    font-weight:800;

    color:#2563eb;

    margin-top:18px;

}

.summary-small{
font-size:14px;
color:var(--muted);
}



/* ==========================================================
   BUTTONS
========================================================== */

.booking-submit{
width:100%;
background:linear-gradient(135deg,var(--primary),var(--primary-dark));
color:#fff;
border:none;
border-radius:18px;
padding:18px;
font-size:18px;
font-weight:700;
cursor:pointer;
box-shadow:0 12px 30px rgba(37,99,235,.25);
transition:.25s;
}

.booking-submit:hover{
transform:translateY(-2px);
}

.booking-submit:disabled{
opacity:.7;
cursor:not-allowed;
transform:none;
}

.section-subtitle{

margin-bottom:24px;

color:var(--muted);

line-height:1.7;

}

/* ==========================================================
   AIRLINE
========================================================== */

.airline-logo{
width:64px;
height:64px;
object-fit:contain;
border:1px solid var(--border);
border-radius:14px;
padding:6px;
background:#fff;
}

.airline-placeholder{
width:64px;
height:64px;
border-radius:14px;
background:var(--primary);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
font-weight:700;
}



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

.summary-airline-info h3{

    margin:0;

    font-size:22px;

}

.summary-trip{

    margin-bottom:22px;

}

.summary-badges{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:14px;

}

.summary-badges span{

    background:#eff6ff;

    color:#2563eb;

    padding:6px 12px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

}

.summary-details{

    margin:18px 0;

}

.summary-section{
margin-bottom:22px;
}

.summary-title{
    font-size:16px;
    font-weight:700;
    margin-bottom:6px;
}

.summary-route{
font-size:18px;
font-weight:700;
}

.security-list{
margin:0;
padding-left:18px;
line-height:2;
}

.confirm-box{
display:flex;
gap:14px;
align-items:flex-start;
cursor:pointer;
line-height:1.8;
}



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

@media (max-width:768px){


.booking-hero{

    padding:24px;

    border-radius:20px;

}

.booking-hero h1{

    font-size:28px;

}

.booking-progress{

    padding:18px 10px;

}

.progress-list{

    gap:12px;

}

.progress-step{

    flex:0 0 95px;

    min-width:95px;

}

.progress-title{

    font-size:12px;

    line-height:1.3;

}

.progress-circle{

    width:38px;

    height:38px;

    font-size:14px;

}

.progress-step:not(:last-child)::after{

    top:19px;

}

}

@media(max-width:1200px){

.booking-layout{

grid-template-columns:1fr;

}

.booking-sidebar{

position:relative;

top:auto;

}

}

/* ==========================================================
   PAYMENT
========================================================== */

.payment-reference{

    background:#f8fafc;
    border:1px solid var(--border);
    border-radius:18px;
    padding:18px;

}

.payment-value{

    font-size:22px;
    font-weight:800;
    color:var(--text);
    word-break:break-all;

}

.payment-actions{

    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:16px;

}

.payment-btn{

    border:none;
    cursor:pointer;
    padding:14px 22px;
    border-radius:14px;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );
    color:#fff;
    font-weight:700;

}

.wallet-input{

    width:100%;
    padding:16px;
    border-radius:14px;
    border:1px solid var(--border);
    margin-top:12px;

}

.qr-wrapper{

    text-align:center;
    margin:28px 0;

}

.qr-wrapper img{

    max-width:240px;
    width:100%;
    border-radius:18px;
    border:1px solid var(--border);

}

.timer-box{

    background:#fff5f5;
    border:2px solid #fecaca;
    border-radius:18px;
    padding:24px;
    text-align:center;

}

#timer{

    font-size:42px;
    font-weight:900;
    color:#dc2626;
    margin-top:12px;

}

.status-card{

    display:flex;
    flex-direction:column;
    gap:18px;

}

.status-item{

    display:flex;
    align-items:center;
    gap:14px;
    font-weight:700;

}

.payment-security{

    background:#eff6ff;
    border-radius:18px;
    padding:18px;

}

.expired-box{

    border-left:5px solid #dc2626;
    background:#fef2f2;

}


/* ==========================================================
   BOOKING SUCCESS
========================================================== */

.action-buttons{

    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin-top:24px;

}

.download-ticket-btn{

    display:inline-flex;
    justify-content:center;
    align-items:center;
    max-width:320px;
    text-decoration:none;

}

.success-status{

    color:#0F7B4D;
    font-weight:800;

}

/* ==========================================================
   VERIFY PAGE HELPERS
========================================================== */

.verify-center{

    text-align:center;

}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

.booking-flow-page,
.booking-flow-page *{
    color:var(--text);
}

.booking-flow-page p,
.booking-flow-page span,
.booking-flow-page li,
.booking-flow-page label{
    color:var(--muted);
}

.section-title,
.summary-title,
.summary-total,
h1,h2,h3,h4{
    color:var(--text);
}

.booking-hero,
.booking-hero *{
    color:#fff !important;
}

.booking-hero p{
    color:rgba(255,255,255,.92) !important;
}

.booking-hero .hero-pill{
    color:#fff !important;
}


@media (max-width:768px){

    .booking-flow-page{
        background-attachment:scroll;
    }

    .card{
        border-radius:20px;
        padding:20px;
    }

    .card::before{
        left:18px;
        right:18px;
    }

}