/*======================================================================

CTM PATH™ Guided Journey v6.0

Purpose
Discovery Session Booking

Responsibility
• Booking Layout
• Calendar Cards
• Time Slots
• Booking Summary
• Confirmation
• Success Screen
• Responsive Behaviour

======================================================================*/


/*==================================================
Booking Section
==================================================*/

.booking{

    width:100%;

    max-width:960px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    gap:36px;

}


/*==================================================
Booking Card
==================================================*/

.booking-card{

    position:relative;

    background:rgba(16,25,40,.72);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(216,179,106,.18);

    border-radius:30px;

    padding:48px;

    overflow:hidden;

    box-shadow:

        0 25px 70px rgba(0,0,0,.45),

        inset 0 1px 0 rgba(255,255,255,.05);

}


/*==================================================
Gold Accent
==================================================*/

.booking-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:2px;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(216,179,106,.90),

        transparent

    );

}


/*==================================================
Booking Title
==================================================*/

.booking-title{

    text-align:center;

    color:var(--text-primary);

    font-size:2.4rem;

    font-weight:700;

    margin-bottom:16px;

}


/*==================================================
Booking Subtitle
==================================================*/

.booking-subtitle{

    text-align:center;

    color:var(--text-secondary);

    font-size:1.15rem;

    line-height:1.8;

    max-width:720px;

    margin:0 auto 40px;

}


/*==================================================
Calendar Grid
==================================================*/

.booking-grid{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(170px,1fr));

    gap:18px;

}


/*==================================================
Date Card
==================================================*/

.booking-date{

    padding:22px;

    border-radius:20px;

    cursor:pointer;

    text-align:center;

    background:

        rgba(255,255,255,.04);

    border:

        1px solid rgba(216,179,106,.18);

    transition:.30s;

}


.booking-date:hover{

    transform:translateY(-4px);

    border-color:#D8B36A;

    background:

        rgba(255,255,255,.07);

}


/*==================================================
Selected Date
==================================================*/

.booking-date.selected{

    background:

    linear-gradient(

        180deg,

        rgba(24,168,103,.25),

        rgba(15,108,67,.92)

    );

    border-color:#D8B36A;

    box-shadow:

        0 0 24px rgba(24,168,103,.25);

}


/*==================================================
Day
==================================================*/

.booking-day{

    color:var(--text-primary);

    font-size:2rem;

    font-weight:700;

}


/*==================================================
Month
==================================================*/

.booking-month{

    color:var(--text-secondary);

    font-size:.95rem;

    margin-top:6px;

}


/*==================================================
Time Slots
==================================================*/

.booking-slots{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(200px,1fr));

    gap:16px;

    margin-top:36px;

}


/*==================================================
Slot
==================================================*/

.booking-slot{

    padding:18px;

    text-align:center;

    cursor:pointer;

    border-radius:16px;

    background:

        rgba(255,255,255,.04);

    border:

        1px solid rgba(216,179,106,.16);

    transition:.30s;

}


.booking-slot:hover{

    border-color:#D8B36A;

    transform:translateY(-3px);

}


.booking-slot.selected{

    background:

        linear-gradient(

            180deg,

            #1BAA66,

            #106B42

        );

    color:#FFFFFF;

}


/*==================================================
Booking Summary
==================================================*/

.booking-summary{

    margin-top:40px;

    padding:28px;

    border-radius:22px;

    background:

        rgba(255,255,255,.03);

    border:

        1px solid rgba(216,179,106,.16);

}


/*==================================================
Summary Row
==================================================*/

.summary-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:

        1px solid rgba(255,255,255,.05);

}


.summary-row:last-child{

    border-bottom:none;

}


/*==================================================
Summary Label
==================================================*/

.summary-label{

    color:var(--text-muted);

    font-size:.95rem;

}


/*==================================================
Summary Value
==================================================*/

.summary-value{

    color:var(--text-primary);

    font-weight:600;

}


/*==================================================
Confirmation
==================================================*/

.booking-confirm{

    text-align:center;

    margin-top:42px;

}


/*==================================================
Success Card
==================================================*/

.booking-success{

    text-align:center;

    padding:60px 40px;

}


.booking-success-icon{

    font-size:5rem;

    margin-bottom:24px;

}


.booking-success-title{

    color:var(--text-primary);

    font-size:2.2rem;

    font-weight:700;

    margin-bottom:18px;

}


.booking-success-message{

    color:var(--text-secondary);

    font-size:1.15rem;

    line-height:1.9;

    max-width:640px;

    margin:auto;

}


/*==================================================
Animation
==================================================*/

.booking-card{

    animation:

        bookingFade .7s ease;

}


@keyframes bookingFade{

    from{

        opacity:0;

        transform:translateY(24px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==================================================
Responsive
==================================================*/

@media (max-width:768px){

    .booking-card{

        padding:28px;

        border-radius:22px;

    }

    .booking-title{

        font-size:1.8rem;

    }

    .booking-subtitle{

        font-size:1rem;

    }

    .booking-grid{

        grid-template-columns:1fr;

    }

    .booking-slots{

        grid-template-columns:1fr;

    }

    .summary-row{

        flex-direction:column;

        align-items:flex-start;

        gap:6px;

    }

}