/* Breath & Strength Programs Page Styles */

*{
    box-sizing:border-box;
}

.booking-hero{

     position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    padding: 140px 8% 80px;

    background:
    linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.658) 0%,
        rgba(255, 255, 255, 0.519) 35%,
        rgba(255,255,255,0.15) 65%,
        rgba(255,255,255,0.02) 100%
    ),
    url("../assets/program.jpeg");

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center center;

}

.profile-link{

    display:flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:#10284f;

    font-weight:600;

    transition:.3s;

}

.profile-link:hover{

    color:#6B8E23;

}

.profile-link i{

    font-size:20px;

    color:#6B8E23;

}

.hero-left{max-width:650px}
.hero-left h1{
    font-size:64px;
    line-height:1.05;
    color:#10284f;
    margin-bottom:20px;
}
.hero-left p{
    color:#555;
    font-size:19px;
    line-height:1.8;
}
.hero-features{
    margin-top:30px;
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}
.hero-features span{
    background:#fff;
    padding:12px 18px;
    border-radius:30px;
    box-shadow:0 8px 18px rgba(0,0,0,.08);
}

.hero-right img{
    max-width:420px;
    width:100%;
}

.booking-container{
    width:90%;
    max-width:1400px;
    margin:70px auto;
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:35px;
}

.booking-left{
    display:flex;
    flex-direction:column;
    gap:28px;
}

.booking-card{
    background:#fff;
    padding:30px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.booking-card h2{
    color:#10284f;
    margin-bottom:22px;
}

.program-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.program{
    border:2px solid #e5e5e5;
    padding:20px;
    border-radius:14px;
    cursor:pointer;
    transition:.3s;
}

.program.active,
.program:hover{
    border-color:#6B8E23;
    transform:translateY(-4px);
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.session-buttons,
.time-grid{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

.session-buttons button,
.time-grid button,
#confirmBtn,
#summaryButton{
    border:none;
    border-radius:10px;
    cursor:pointer;
    transition:.3s;
}

.session-buttons button,
.time-grid button{
    flex:1 1 calc(33.33% - 10px);
    min-width:90px;
    padding:14px 0;

    background:#eef1f5;
}

.session-buttons .selected,
.time-grid .selected{
    background:#10284f;
    color:#fff;
}

.input-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.input-grid input,
textarea,
input[type=date]{
    width:100%;
    padding:14px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:15px;
}

textarea{
    resize:vertical;
}

.booking-summary{
    position:sticky;
    top:110px;
    height:fit-content;
    background:#fff;
    padding:30px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.booking-summary h2{
    color:#10284f;
    margin-bottom:20px;
}

.summary-item{
    display:flex;
    justify-content:space-between;
    padding:14px 0;
    border-bottom:1px solid #ececec;
}

.summary-item span{
    color:#666;
}

.summary-item strong{
    color:#10284f;
}

#confirmBtn,
#summaryButton{
    width:100%;
    padding:16px;
    background:#6B8E23;
    color:#fff;
    font-weight:700;
    margin-top:10px;
}

#confirmBtn:hover,
#summaryButton:hover{
    background:#10284f;
}

.booking-summary p{
    margin-top:18px;
    color:#666;
    font-size:14px;
    line-height:1.6;
}

.trainer-card{

    margin-top:25px;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.trainer-card img{

    width:100%;

    height:220px;

    object-fit:cover;

    display:block;

}

.trainer-info{

    padding:25px;

}

.trainer-info span{

    color:#6B8E23;

    font-size:13px;

    font-weight:600;

}

.trainer-info h3{

    margin-top:8px;

    color:#10284f;

    font-size:28px;

}

.trainer-info p{

    margin-top:8px;

    color:#666;

    line-height:1.7;

}

.trainer-stats{

    margin-top:18px;

    display:flex;

    flex-direction:column;

    gap:8px;

}

.trainer-stats span{

    color:#444;

    font-size:14px;

}

.trainer-info a{

    display:inline-block;

    margin-top:22px;

    background:#10284f;

    color:#fff;

    text-decoration:none;

    padding:12px 22px;

    border-radius:10px;

    transition:.3s;

}

.trainer-info a:hover{

    background:#6B8E23;

}
/* ===========================
   TRAINER CARD
=========================== */

.trainer-card{

    margin-top:25px;

    background:#ffffff;

    border-radius:18px;

    padding:22px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.trainer-title{

    font-size:24px;

    font-weight:700;

    color:#1a1a1a;

    margin-bottom:18px;

}

.trainer-content{

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.trainer-content img{

    width:140px;

    height:200px;

    object-fit:cover;

    border-radius:8px;

}

.trainer-details{

    flex:1;

}

.trainer-details h2{

    font-size:30px;

    margin-bottom:8px;

    color:#1d1d1d;

}

.trainer-role{

    color:#555;

    line-height:1.5;

    margin-bottom:18px;

    font-size:15px;

}

.trainer-details ul{

    list-style:none;

    padding:0;

    margin:0;

}

.trainer-details ul li{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-bottom:14px;

    color:#333;

    font-size:15px;

    line-height:1.5;

}

.trainer-details ul li i{

    color:#69a22f;

    margin-top:2px;

    font-size:16px;

}

.trainer-btn{

    width:100%;

    margin-top:22px;

    padding:15px;

    border:2px solid #d8d8d8;

    background:#ffffff;

    border-radius:10px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.trainer-btn:hover{

    background:#10284f;

    color:#ffffff;

    border-color:#10284f;

}

/* ===========================
   WHATSAPP HELP CARD
=========================== */

.help-card{

    margin-top:25px;

    background:#ffffff;

    border-radius:18px;

    padding:25px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.help-card h3{

    font-size:24px;

    color:#1f1f1f;

    margin-bottom:15px;

}

.help-card p{

    color:#666;

    line-height:1.7;

    margin-bottom:22px;

    font-size:15px;

}

.whatsapp-btn{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    padding:15px;

    background:#ffffff;

    color:#25D366;

    border:2px solid #25D366;

    border-radius:10px;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

    transition:.3s;

}

.whatsapp-btn:hover{

    background:#25D366;

    color:#ffffff;

}

.whatsapp-btn i{

    font-size:22px;

}
@media (max-width:768px){

    .booking-container{
        width:100%;
        padding:0 16px;
        margin:40px auto;
        grid-template-columns:1fr;
        gap:20px;
        box-sizing:border-box;
    }

    .booking-card,
    .booking-summary,
    .trainer-card,
    .help-card{
        padding:20px;
    }

    .program-grid,
    .input-grid{
        grid-template-columns:1fr;
    }

    .session-buttons button,
    .time-grid button{
        flex:1 1 calc(33.33% - 10px);
        min-width:90px;
        padding:14px 0;
    }

    input,
    textarea{
        width:100%;
    }

}


@media (max-width: 768px) {

    .booking-card,
.booking-summary,
.trainer-card,
.help-card{
    padding:20px;
}

    .booking-container{
    width: 100%;
    padding: 0 16px;
    margin: 40px auto;
    box-sizing: border-box;
}

    .booking-hero {

        justify-content:center;

text-align:center;

padding:120px 20px;

background-position:right center;

    }

    .hero-left h1 {

        font-size: 52px;

        line-height: 1.1;

    }

    .hero-left p {

        font-size: 18px;

        line-height: 1.7;

    }

    .program-grid,
    .input-grid {

        grid-template-columns: 1fr;

    }

}