/* =========================================================
   YK COURSE PAGE - NEW HERO
   Completely isolated from old coursepage-* classes
========================================================= */


.ykcoursepage-hero{
    position:relative;
    width:100%;
    min-height:520px;

    background-image:
        var(--ykcoursepage-hero-image);

    background-size:cover;
    background-position:center;

    margin-bottom:55px;

    overflow:visible;
}


/* Dark overlay */

.ykcoursepage-hero-shade{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(4,35,24,.90) 0%,
            rgba(4,35,24,.70) 35%,
            rgba(0,0,0,.28) 70%,
            rgba(0,0,0,.15) 100%
        );

    pointer-events:none;
}


/* Main container */

.ykcoursepage-hero-container{
    position:relative;
    z-index:2;

    width:100%;
    max-width:1540px;

    margin:0 auto;
    padding:34px 28px 0;
}


/* =========================================================
   CONTENT
========================================================= */

.ykcoursepage-hero-content{
    max-width:900px;
    padding-top:80px;
}


/* =========================================================
   META PILLS
========================================================= */

.ykcoursepage-hero-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:8px;

    margin-bottom:22px;
}


.ykcoursepage-hero-pill{
    min-height:34px;

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:6px 13px;

    border:1px solid rgba(255,255,255,.40);
    border-radius:999px;

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

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

    color:#fff;

    font-size:13px;
    font-weight:600;

    white-space:nowrap;
}


.ykcoursepage-hero-pill i{
    color:#b9dc72;
    font-size:12px;
}


/* =========================================================
   TITLE
========================================================= */

.ykcoursepage-hero-title{
    max-width:850px;

    margin:0 0 15px;

    color:#fff;

    font-family:inherit;
    font-size:58px;
    line-height:1.06;
    letter-spacing:-1.5px;
    font-weight:700;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.ykcoursepage-hero-description{
    max-width:760px;

    margin:0 0 25px;

    color:rgba(255,255,255,.92);

    font-size:17px;
    line-height:1.7;
    font-weight:400;
}


/* =========================================================
   ACTIONS
========================================================= */

.ykcoursepage-hero-actions{
    display:flex;
    align-items:center;

    gap:12px;

    flex-wrap:wrap;
}


/* Enquire */

.ykcoursepage-hero-enquire{
    min-height:52px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:15px;

    padding:0 24px;

    border:0;
    border-radius:999px;

    background:#fff;
    color:#164b34;

    font-size:15px;
    font-weight:700;

    cursor:pointer;

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


.ykcoursepage-hero-enquire:hover{
    transform:translateY(-2px);

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.18);
}


/* Explore */

.ykcoursepage-hero-explore{
    min-height:52px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:13px;

    padding:0 24px;

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

    border-radius:999px;

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

    color:#fff;

    text-decoration:none;

    font-size:15px;
    font-weight:700;

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

    transition:
        background .2s ease,
        border-color .2s ease;
}


.ykcoursepage-hero-explore:hover{
    color:#fff;

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

    border-color:
        rgba(255,255,255,.7);
}


/* Fee */

.ykcoursepage-hero-fee{
    min-height:52px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    margin-left:7px;
    padding-left:22px;

    border-left:
        1px solid
        rgba(255,255,255,.32);
}


.ykcoursepage-hero-fee-label{
    color:
        rgba(255,255,255,.72);

    font-size:11px;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.8px;

    margin-bottom:5px;
}


.ykcoursepage-hero-fee strong{
    color:#fff;

    font-size:26px;
    line-height:1;
    font-weight:800;
}


/* =========================================================
   BOTTOM INFORMATION STRIP
========================================================= */

.ykcoursepage-hero-strip{
    position:absolute;

    left:28px;
    right:28px;

    top:450px;

    display:grid;

    grid-template-columns:
        .85fr
        1.35fr
        .85fr
        1fr
        1.15fr
        1fr;

    align-items:center;

    min-height:112px;

    padding:18px 25px;

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

    border:
        1px solid
        rgba(19,82,57,.18);

    border-radius:26px;

    box-shadow:
        0 24px 55px
        rgba(23,60,42,.14);
}


/* Individual item */

.ykcoursepage-hero-strip-item{
    min-width:0;

    display:flex;
    align-items:center;
    gap:13px;

    padding:0 14px;
}


.ykcoursepage-hero-strip-icon{
    width:44px;
    height:44px;

    flex:0 0 44px;
    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:14px;
    background:#f5faf6;
    color:#168253;

    font-size:17px;

    box-shadow:
        0 5px 14px
        rgba(22,88,60,.08);
}


.ykcoursepage-hero-strip-item > div:last-child{
    min-width:0;
}


.ykcoursepage-hero-strip-item span{
    display:block;

    margin-bottom:5px;

    color:#75867d;

    font-size:11px;
    line-height:1;

    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:700;
}


.ykcoursepage-hero-strip-item strong{
    display:block;

    color:#23352d;

    font-size:14px;
    line-height:1.4;
    font-weight:700;
}


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

@media (max-width:1200px){

    .ykcoursepage-hero-title{
        font-size:48px;
    }


    .ykcoursepage-hero-strip{
        grid-template-columns:
            repeat(3,1fr);

        gap:18px 5px;

        top:400px;

        min-height:155px;
    }


    .ykcoursepage-hero{
        min-height:560px;
        margin-bottom:80px;
    }

}



/* =========================================================
   MOBILE
   AGREED DESIGN:
   IMAGE ONLY
========================================================= */

@media (max-width:767px){

    .ykcoursepage-hero{
        min-height:340px;

        height:340px;

        margin-bottom:0;

        background-position:center center;

        overflow:hidden;
    }


    /*
       On mobile we do NOT need the dark text overlay.
       Keep only a very light shade so image remains visible.
    */

    .ykcoursepage-hero-shade{
        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.12) 0%,
                rgba(0,0,0,.03) 60%,
                rgba(0,0,0,.08) 100%
            );
    }


    /*
       Hide everything except image
    */

    .ykcoursepage-hero-content,
    .ykcoursepage-hero-strip{
        display:none !important;
    }


    .ykcoursepage-hero-container{
        padding:0;
        height:100%;
    }

}



/* Smaller phones */

@media (max-width:480px){

    .ykcoursepage-hero{
        height:320px;
        min-height:320px;
    }

}


/* =========================================================
   MOBILE HERO BUTTON
========================================================= */

.ykcoursepage-mobile-hero-action{
    display:none;
}


/* Mobile only */

@media (max-width:767px){

    .ykcoursepage-mobile-hero-action{
        position:absolute;
        left:20px;
        bottom:20px;
        z-index:5;

        display:block;
    }


    .ykcoursepage-mobile-hero-btn{
        min-height:46px;

        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:12px;

        padding:0 20px;

        border-radius:999px;

        background:#ffffff;
        color:#14583d;

        font-size:14px;
        font-weight:700;
        line-height:1;

        text-decoration:none;

        box-shadow:
            0 8px 25px
            rgba(0,0,0,.16);

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


    .ykcoursepage-mobile-hero-btn:active{
        transform:scale(.97);
    }


    .ykcoursepage-mobile-hero-btn i{
        font-size:12px;
    }

}


/* =========================================================
   YK COURSE PAGE
   NEW SIDE / BOOKING CARD
========================================================= */


.ykcoursepage-booking-card{
    width:100%;
    max-width:390px;

    margin:0 auto;

    padding:10px;

    background:#fff;

    border:1px solid #e1e9e4;

    border-radius:26px;

    box-shadow:
        0 18px 45px
        rgba(23,72,49,.12);
}



/* =========================================================
   MAIN GREEN AREA
========================================================= */

.ykcoursepage-booking-main{
    padding:18px;

    border-radius:21px;

    background:
        linear-gradient(
            160deg,
            #267948 0%,
            #0c5635 100%
        );

    color:#fff;
}


.ykcoursepage-booking-heading{
    margin-bottom:10px;

    font-size:16px;
    font-weight:800;

    letter-spacing:1.2px;

    color:#ffffff;
}



/* =========================================================
   FEE OPTIONS
========================================================= */

.ykcoursepage-fee-options{
    display:flex;
    flex-direction:column;

    gap:8px;
}


.ykcoursepage-fee-option{
    width:100%;

    display:grid;

    grid-template-columns:
        38px
        1fr
        auto;

    align-items:center;

    gap:10px;

    padding:10px;

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

    border-radius:13px;

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

    color:#fff;

    text-align:left;

    cursor:pointer;

    transition:
        background .2s ease,
        border-color .2s ease;
}


.ykcoursepage-fee-option:hover,
.ykcoursepage-fee-option.is-active{
    background:
        rgba(255,255,255,.15);

    border-color:
        rgba(190,226,139,.5);
}


.ykcoursepage-fee-icon{
    width:36px;
    height:36px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:9px;

    background:
        rgba(185,220,114,.17);

    color:#b9dc72;

    font-size:14px;
}


.ykcoursepage-fee-text{
    min-width:0;
}


.ykcoursepage-fee-text strong{
    display:block;

    margin-bottom:2px;

    font-size:13px;
    line-height:1.15;

    color:#fff;
}


.ykcoursepage-fee-text span{
    display:block;

    font-size:10px;

    color:
        rgba(255,255,255,.72);
}


.ykcoursepage-fee-price{
    font-size:20px;
    font-weight:800;

    white-space:nowrap;
}



/* =========================================================
   DIVIDER
========================================================= */

.ykcoursepage-booking-divider{
    height:1px;

    margin:14px 0;

    background:
        rgba(255,255,255,.18);
}



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

.ykcoursepage-date-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:9px;
}


.ykcoursepage-date-heading > span{
    font-size:11px;
    font-weight:800;

    letter-spacing:1px;

    color:
        rgba(255,255,255,.77);
}


.ykcoursepage-date-heading small{
    font-size:11px;

    color:
        rgba(255,255,255,.62);
}



/* =========================================================
   DATE LIST
========================================================= */

.ykcoursepage-date-track{
    display:flex;
    flex-direction:column;

    gap:7px;
}


.ykcoursepage-date-item{
    width:100%;

    min-height:60px;

    display:grid;

    grid-template-columns:
        48px
        minmax(0,1fr)
        auto
        18px;

    align-items:center;

    gap:9px;

    padding:7px;

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

    border-radius:13px;

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

    color:#fff;

    text-align:left;

    cursor:pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.ykcoursepage-date-item:hover{
    background:
        rgba(255,255,255,.10);
}


.ykcoursepage-date-item.is-active{
    background:
        rgba(150,200,82,.18);

    border-color:#9bd45c;
}



/* Calendar */

.ykcoursepage-date-calendar{
    width:45px;
    height:48px;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    border-radius:10px;

    background:#fff;

    color:#17623e;
}


.ykcoursepage-date-calendar span{
    font-size:9px;
    font-weight:800;

    letter-spacing:.7px;

    line-height:1;
}


.ykcoursepage-date-calendar strong{
    margin-top:3px;

    font-size:20px;
    line-height:1;
}



/* Date text */

.ykcoursepage-date-content{
    min-width:0;
}


.ykcoursepage-date-content strong{
    display:block;

    overflow:hidden;

    color:#fff;

    font-size:13px;
    line-height:1.2;

    white-space:nowrap;
    text-overflow:ellipsis;
}


.ykcoursepage-date-content span{
    display:block;

    margin-top:4px;

    color:
        rgba(255,255,255,.72);

    font-size:10px;
}



/* Next */

.ykcoursepage-date-next{
    padding:5px 9px;

    border-radius:999px;

    background:#9ddd62;

    color:#164c31;

    font-size:9px;
    font-weight:800;
}


/* Arrow */

.ykcoursepage-date-arrow{
    color:
        rgba(255,255,255,.58);

    font-size:11px;
}



/* =========================================================
   SHOW ALL
========================================================= */

.ykcoursepage-date-extra{
    display:none;
}


.ykcoursepage-booking-card.is-expanded
.ykcoursepage-date-extra{
    display:grid;
}


.ykcoursepage-date-toggle{
    width:100%;

    min-height:40px;

    margin-top:7px;

    border:
        1px dashed
        rgba(255,255,255,.38);

    border-radius:11px;

    background:transparent;

    color:
        rgba(255,255,255,.9);

    cursor:pointer;

    font-size:11px;
    font-weight:700;
}


.ykcoursepage-date-toggle i{
    margin-left:6px;

    font-size:9px;
}


.ykcoursepage-toggle-hide{
    display:none;
}


.ykcoursepage-booking-card.is-expanded
.ykcoursepage-toggle-show{
    display:none;
}


.ykcoursepage-booking-card.is-expanded
.ykcoursepage-toggle-hide{
    display:inline;
}



/* =========================================================
   NO DATES
========================================================= */

.ykcoursepage-no-dates{
    padding:20px 10px;

    text-align:center;

    color:
        rgba(255,255,255,.8);

    font-size:13px;
}



/* =========================================================
   INFO ROW
========================================================= */

.ykcoursepage-booking-info{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    padding:12px 4px 8px;
}


.ykcoursepage-booking-info-item{
    position:relative;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    min-width:0;

    padding:0 7px;

    text-align:center;
}


.ykcoursepage-booking-info-item:not(:last-child){
    border-right:
        1px solid #e6ebe8;
}


.ykcoursepage-booking-info-item i{
    margin-bottom:6px;

    color:#168253;

    font-size:15px;
}


.ykcoursepage-booking-info-item strong{
    display:block;

    color:#24352d;

    font-size:13px;
}


.ykcoursepage-booking-info-item span{
    margin-top:3px;

    color:#7e8d86;

    font-size:10px;
}



/* =========================================================
   CTA
========================================================= */

.ykcoursepage-booking-actions{
    display:grid;

    grid-template-columns:
        1fr
        48px
        48px;

    gap:8px;

    padding-top:6px;
}


.ykcoursepage-booking-enquire{
    min-height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:12px;

    padding:0 20px;

    border:0;

    border-radius:999px;

    background:#1d7d4c;

    color:#fff;

    font-size:13px;
    font-weight:800;

    cursor:pointer;
}


.ykcoursepage-booking-icon-btn{
    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#f4f8f5;

    color:#168253;

    text-decoration:none;

    box-shadow:
        0 4px 14px
        rgba(28,83,55,.08);
}



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

.ykcoursepage-desktop-sidebar{
    width:100%;

    align-self:start;

    position:sticky;

    top:120px;
}


.ykcoursepage-mobile-booking-holder{
    display:none;
}



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

@media (max-width:767px){


    /* Desktop copy hidden */

    .ykcoursepage-desktop-sidebar{
        display:none !important;
    }


    /* Mobile copy */

    .ykcoursepage-mobile-booking-holder{
        position:relative;

        z-index:10;

        display:block;

        padding:0 16px;

        margin-top:-35px;
        margin-bottom:15px;
    }


    .ykcoursepage-booking-card--mobile{
        max-width:none;

        padding:0;

        border-radius:22px;

        overflow:hidden;
        
        margin-top: 35px;
    }


    /*
       Mobile = white card like reference
    */

    .ykcoursepage-booking-card--mobile
    .ykcoursepage-booking-main{
        padding:18px 16px;

        border-radius:22px;

        background:#fff;

        color:#20382d;
    }


    .ykcoursepage-booking-card--mobile
    .ykcoursepage-booking-heading{
        color:#17623e;
    }


    /* Fee cards side by side */

    .ykcoursepage-booking-card--mobile
    .ykcoursepage-fee-options{
        display: flex;
        flex-direction: column;

        gap:7px;
    }


    .ykcoursepage-booking-card--mobile
    .ykcoursepage-fee-option{
        grid-template-columns:
            30px
            minmax(0,1fr)
            auto;

        gap:5px;

        min-height:58px;

        padding:8px;

        border:
            1px solid #cbded2;

        background:#eef5f0;

        color:#174b32;
    }


    .ykcoursepage-booking-card--mobile
    .ykcoursepage-fee-option.is-active{
        border-color:#8cb9a0;

        background:#e8f2eb;
    }


    .ykcoursepage-booking-card--mobile
    .ykcoursepage-fee-icon{
        width:29px;
        height:29px;

        color:#248356;

        background:#daece0;
    }


    .ykcoursepage-booking-card--mobile
    .ykcoursepage-fee-text strong{
        color:#234c39;

        font-size:11px;
    }


    .ykcoursepage-booking-card--mobile
    .ykcoursepage-fee-text span{
        color:#64796e;

        font-size:8px;

        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }


    .ykcoursepage-booking-card--mobile
    .ykcoursepage-fee-price{
        color:#174c33;

        font-size:14px;
    }


    .ykcoursepage-booking-card--mobile
    .ykcoursepage-booking-divider{
        background:#dfe9e3;
    }


    .ykcoursepage-booking-card--mobile
    .ykcoursepage-date-heading > span{
        color:#5c7167;
    }


    .ykcoursepage-booking-card--mobile
    .ykcoursepage-date-heading small{
        color:#63786c;
    }



    /* =========================================
       MOBILE CENTER CAROUSEL
    ========================================== */

    .ykcoursepage-booking-card--mobile
    .ykcoursepage-date-track{

        width:
            calc(
                100% + 32px
            );

        margin-left:-16px;
        margin-bottom: -22px;

        display:flex;

        flex-direction:row;

        gap:8px;

        padding:
            0 12% 5px;

        overflow-x:auto;

        scroll-snap-type:
            x mandatory;

        scrollbar-width:none;

        -webkit-overflow-scrolling:
            touch;
    }


    .ykcoursepage-booking-card--mobile
    .ykcoursepage-date-track::-webkit-scrollbar{
        display:none;
    }


    /*
       IMPORTANT:
       All dates visible on mobile.
    */

    .ykcoursepage-booking-card--mobile
    .ykcoursepage-date-extra{
        display:grid;
    }


    .ykcoursepage-booking-card--mobile
    .ykcoursepage-date-item{
        flex:
            0 0 76%;

        width:76%;

        grid-template-columns:
            46px
            minmax(0,1fr)
            auto
            16px;

        min-height:72px;

        padding:8px;

        scroll-snap-align:center;

        background:#edf5f0;

        border:
            1px solid #c9ded1;

        color:#214b38;
    }


    .ykcoursepage-booking-card--mobile
    .ykcoursepage-date-item.is-active{
        background:#edf7f1;

        border:
            1.5px solid #167347;
    }


    .ykcoursepage-booking-card--mobile
    .ykcoursepage-date-calendar{
        background:#147747;

        color:#fff;
    }


    .ykcoursepage-booking-card--mobile
    .ykcoursepage-date-content strong{
        color:#214b38;
    }


    .ykcoursepage-booking-card--mobile
    .ykcoursepage-date-content span{
        color:#6d8076;
    }


    .ykcoursepage-booking-card--mobile
    .ykcoursepage-date-next{
        background:#9ddd62;

        color:#174b31;
    }


    .ykcoursepage-booking-card--mobile
    .ykcoursepage-date-arrow{
        color:#8b9d94;
    }


    /*
       No Show All on mobile.
       Carousel already contains every date.
    */

    .ykcoursepage-booking-card--mobile
    .ykcoursepage-date-toggle{
        display:none;
    }


    .ykcoursepage-booking-card--mobile
    .ykcoursepage-booking-info{
        padding:
            12px 10px 8px;
    }


    .ykcoursepage-booking-card--mobile
    .ykcoursepage-booking-actions{
        padding:
            5px 12px 14px;
    }

}



/* ==========================================
   MOBILE BOOKING CARD - ENROLL BUTTON
========================================== */

@media (max-width:767px){

    /* Keep the information row hidden */
    .ykcoursepage-booking-card--mobile
    .ykcoursepage-booking-info{
        display:none !important;
    }

    /* Show booking actions below dates */
    .ykcoursepage-booking-card--mobile
    .ykcoursepage-booking-actions{
        display:grid !important;
        grid-template-columns:1fr;
        gap:0;
        padding:12px 16px 16px;
    }

    /* Hide WhatsApp and Call icons on mobile */
    .ykcoursepage-booking-card--mobile
    .ykcoursepage-booking-icon-btn{
        display:none !important;
    }

    /* Full-width Enroll Now button */
    .ykcoursepage-booking-card--mobile
    .ykcoursepage-booking-enquire{
        width:100%;
        min-height:48px;
        font-size:14px;
        border-radius:12px;
    }

}


/* ==========================================
   YK COURSE PAGE - PRICE SELECTION
========================================== */

.ykcoursepage-fee-option {
    cursor: pointer;
    transition: all .2s ease;
}

.ykcoursepage-fee-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    line-height: 1.1;
}

/* Default selection indicator */

.ykcoursepage-fee-price::after {
    content: "SELECT";
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .4px;
    opacity: .75;
}

/* Selected indicator */

.ykcoursepage-fee-option.is-active
.ykcoursepage-fee-price::after {
    content: "✓ SELECTED";
    opacity: 1;
}

/* Desktop selected appearance */

.ykcoursepage-booking-card--desktop
.ykcoursepage-fee-option.is-active {
    border: 2px solid #a7df76;
    background: rgba(255,255,255,.17);
}

/* Mobile selected appearance */

@media (max-width:767px) {

    .ykcoursepage-booking-card--mobile
    .ykcoursepage-fee-option.is-active {
        border: 2px solid #168253;
        background: #e3f2e8;
    }

    .ykcoursepage-booking-card--mobile
    .ykcoursepage-fee-price::after {
        font-size: 8px;
    }
}


/* ==========================================
   MOST POPULAR BADGE
========================================== */

.ykcoursepage-fee-text .ykcoursepage-fee-popular{
    display:inline-block;
    width:max-content;
    max-width:100%;

    margin:4px 0;
    padding:3px 7px;

    border-radius:5px;

    background:#d9efaa;
    color:#205b36;

    font-size:9px;
    font-weight:800;
    line-height:1.2;

    letter-spacing:.1px;
    white-space:nowrap;
}

/* Mobile */

@media (max-width:767px){

    .ykcoursepage-booking-card--mobile
    .ykcoursepage-fee-text
    .ykcoursepage-fee-popular{
        display:inline-block;
        padding:2px 4px;
        margin:3px 0;

        font-size:7px;
        color:#205b36;
        background:#d9efaa;
    }

}




/* ==========================================
   UPCOMING DATES & FEES - V2
========================================== */

.ykdates-v2 {
    max-width: 1180px;
    margin: 28px auto 0;
    padding: 22px;
    background: #fff;
    border: 1px solid #e1e9e4;
    border-radius: 24px;
    box-shadow: 0 15px 45px rgba(20,70,45,.08);
}

/* Two-column desktop layout */

.ykdates-v2-grid {
    display: grid;
    grid-template-columns: minmax(0,.8fr) minmax(0,2.4fr);
    gap: 28px;
}

.ykdates-v2-left {
    min-width: 0;
    padding-right: 22px;
    border-right: 1px solid #e4ece7;
}

.ykdates-v2-right {
    min-width: 0;
}

/* Headings */

.ykdates-v2-heading {
    margin-bottom: 15px;
}

.ykdates-v2-heading > span {
    display: block;
    margin-bottom: 6px;
    color: #648173;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.ykdates-v2-heading h3 {
    margin: 0;
    color: #174b33;
    font-size: 19px;
    font-weight: 800;
}

.ykdates-v2-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ykdates-v2-heading-row small {
    color: #7a9084;
    font-size: 11px;
    white-space: nowrap;
}

/* ==========================================
   ROOM / PRICE OPTIONS
========================================== */

.ykdates-v2-prices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ykdates-v2-price {
    width: 100%;
    display: grid;
    grid-template-columns: 30px minmax(0,1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 53px 12px;
    border: 1px solid #d7e5dc;
    border-radius: 14px;
    background: #f5f9f6;
    color: #214c35;
    cursor: pointer;
    text-align: left;
    transition: background .2s, border-color .2s;
}

.ykdates-v2-price:hover {
    border-color: #6cb48b;
}

.ykdates-v2-price.is-active {
    border: 2px solid #15804b;
    background: #e8f5ed;
}

.ykdates-v2-price-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #dceee2;
    color: #168253;
    font-size: 14px;
}

.ykdates-v2-price-details {
    min-width: 0;
}

.ykdates-v2-price-details strong,
.ykdates-v2-price-details small {
    display: block;
}

.ykdates-v2-price-details strong {
    color: #234c39;
    font-size: 13px;
    line-height: 1.25;
}

.ykdates-v2-price-details small {
    margin-top: 3px;
    color: #71877a;
    font-size: 10px;
}

.ykdates-v2-price-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    white-space: nowrap;
}

.ykdates-v2-price-amount strong {
    color: #125b37;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 800;
}

.ykdates-v2-price-amount small {
    color: #759082;
    font-size: 9px;
    font-weight: 800;
}

.ykdates-v2-price.is-active
.ykdates-v2-price-amount small {
    color: #087c43;
}

/* ==========================================
   DATES
========================================== */

.ykdates-v2-date-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.ykdates-v2-date {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 11px 13px;
    border: 1px solid #e0e9e3;
    border-radius: 15px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: background .2s, border-color .2s;
}

.ykdates-v2-date:hover {
    border-color: #7bb792;
    background: #f8fbf9;
}

.ykdates-v2-date.is-active {
    border-color: #168253;
    background: #f0f8f2;
}

.ykdates-v2-calendar {
    flex: 0 0 49px;
    width: 49px;
    min-height: 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(160deg,#218451,#0b5737);
    box-shadow: 0 5px 12px rgba(12,86,53,.14);
    color: #fff;
}

.ykdates-v2-calendar small {
    color: #b9e58e;
    font-size: 10px;
    font-weight: 800;
}

.ykdates-v2-calendar strong {
    color: #fff;
    font-size: 21px;
    line-height: 1.15;
}

.ykdates-v2-date-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: 1;
}

.ykdates-v2-date-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.ykdates-v2-date-title strong {
    color: #233b2d;
    font-size: 14px;
    line-height: 1.3;
}

.ykdates-v2-date-title em {
    padding: 3px 7px;
    border-radius: 999px;
    background: #197c4d;
    color: #fff;
    font-style: normal;
    font-size: 9px;
    font-weight: 800;
}

.ykdates-v2-duration {
    color: #6e8075;
    font-size: 11px;
}

/* Online class time below the date */

.ykdates-v2-time {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    color: #526d5a;
    font-size: 11px;
    line-height: 1.45;
}

.ykdates-v2-time i {
    margin-right: 3px;
    color: #15804b;
}

.ykdates-v2-time strong {
    color: #087c45;
    font-weight: 800;
}

.ykdates-v2-date-check {
    color: #15804b;
    font-size: 19px;
    opacity: 0;
}

.ykdates-v2-date.is-active
.ykdates-v2-date-check {
    opacity: 1;
}

/* Show only first three initially */

.ykdates-v2-date[data-ykdates-extra="1"] {
    display: none;
}

.ykdates-v2.is-expanded
.ykdates-v2-date[data-ykdates-extra="1"] {
    display: flex;
}

/* ==========================================
   SHOW MORE
========================================== */

.ykdates-v2-more {
    width: 100%;
    min-height: 42px;
    margin-top: 10px;
    border: 1px dashed #b9d5c4;
    border-radius: 12px;
    background: #edf6ef;
    color: #17613f;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.ykdates-v2-more i {
    margin-left: 7px;
    font-size: 10px;
}

.ykdates-v2-more:hover {
    background: #e1f0e6;
}

/* ==========================================
   SELECTED PRICE + ENROLL
========================================== */

.ykdates-v2-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 18px;
    padding: 15px 18px;
    border: 1px solid #dce9e0;
    border-radius: 15px;
    background: #f5faf6;
}

.ykdates-v2-selected span {
    display: block;
    margin-bottom: 4px;
    color: #718779;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .7px;
}

.ykdates-v2-selected strong {
    display: block;
    color: #115f3b;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.1;
}

.ykdates-v2-enroll {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 30px;
    border: 0;
    border-radius: 999px;
    background: #126a43;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.ykdates-v2-enroll:hover {
    background: #0b5436;
}

.ykdates-v2-error {
    margin: 10px 0 0;
    color: #b42318;
    font-size: 12px;
}

.ykdates-v2-error[hidden] {
    display: none;
}

/* Preserve old popup triggers without displaying them */

.ykdates-v2-legacy {
    display: none !important;
}

/* ==========================================
   NO DATES
========================================== */

.ykdates-v2-empty {
    min-height: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 25px 15px;
    text-align: center;
    background: #f7faf8;
    border-radius: 18px;
}

.ykdates-v2-empty-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e3f1e8;
    color: #116a41;
    font-size: 25px;
}

.ykdates-v2-empty h3 {
    margin: 0;
    color: #125d3d;
    font-size: 23px;
}

.ykdates-v2-empty p {
    max-width: 410px;
    margin: 0;
    color: #708378;
    font-size: 13px;
    line-height: 1.7;
}

.ykdates-v2-empty-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.ykdates-v2-contact,
.ykdates-v2-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 17px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.ykdates-v2-contact {
    border: 1px solid #166a45;
    color: #166a45;
    background: #fff;
}

.ykdates-v2-whatsapp {
    background: #126a43;
    color: #fff;
}

/* ==========================================
   MOBILE - COMPACT LAYOUT
========================================== */

@media (max-width:767px) {

    .ykdates-v2 {
        padding: 12px;
        margin-top: 18px;
        border-radius: 18px;
    }

    .ykdates-v2-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .ykdates-v2-left {
        padding: 0;
        border: 0;
    }

    .ykdates-v2-heading {
        margin-bottom: 9px;
    }

    .ykdates-v2-heading h3 {
        font-size: 15px;
    }

    /* Two horizontal price cards */

    .ykdates-v2-prices {
        display: flex;
        flex-direction: column;
        gap: 7px;
    }

    .ykdates-v2-price {
        min-height: 72px;
        grid-template-columns: 26px minmax(0,1fr);
        gap: 5px;
        padding: 9px 8px;
    }

    .ykdates-v2-price-icon {
        width: 26px;
        height: 28px;
        font-size: 12px;
    }

    .ykdates-v2-price-details strong {
        font-size: 11px;
    }

    .ykdates-v2-price-details small {
        font-size: 9px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .ykdates-v2-price-amount {
        grid-column: 1 / -1;
        align-items: flex-end;
        flex-direction: row;
        justify-content: space-between;
    }

    .ykdates-v2-price-amount strong {
        font-size: 17px;
    }

    .ykdates-v2-price-amount small {
        font-size: 8px;
    }

    /* Compact vertical dates */

    .ykdates-v2-date-list {
        gap: 8px;
    }

    .ykdates-v2-date {
        min-height: 70px;
        padding: 9px;
        gap: 10px;
    }

    .ykdates-v2-calendar {
        flex-basis: 44px;
        width: 44px;
        min-height: 51px;
    }

    .ykdates-v2-calendar strong {
        font-size: 19px;
    }

    .ykdates-v2-date-title strong {
        font-size: 12px;
    }

    .ykdates-v2-duration,
    .ykdates-v2-time {
        font-size: 10px;
    }

    .ykdates-v2-date-check {
        font-size: 16px;
    }

    /* Compact bottom enrollment bar */

    .ykdates-v2-footer {
        position: sticky;
        bottom: 8px;
        z-index: 12;
        margin-top: 13px;
        padding: 10px 12px;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 8px 25px rgba(0,0,0,.12);
    }

    .ykdates-v2-selected strong {
        font-size: 22px;
    }

    .ykdates-v2-enroll {
        min-height: 44px;
        padding: 0 20px;
        font-size: 12px;
    }

    .ykdates-v2-empty {
        min-height: 235px;
    }

    .ykdates-v2-empty h3 {
        font-size: 19px;
    }

}

@media (max-width:380px) {

    .ykdates-v2-enroll {
        padding: 0 13px;
    }

    .ykdates-v2-price-amount strong {
        font-size: 15px;
    }

}


/* ==========================================
   ROOM TYPE CARD REDESIGN - V3
========================================== */

.ykdates-v2-price {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: 18px;
    min-height: 142px;
    padding: 12px;
    text-align: left;
    border-radius: 15px;
}

/* Top: Icon + Room Information */

.ykdates-v2-price-top {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.ykdates-v2-price-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 16px;
}

.ykdates-v2-price-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.ykdates-v2-price-details strong {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
}

.ykdates-v2-price-details small {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: #71877a;
}

/* Bottom: Price + Selection */

.ykdates-v2-price-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.ykdates-v2-fee-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.ykdates-v2-fee-wrap small {
    color: #718779;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .6px;
}

.ykdates-v2-fee-wrap strong {
    color: #115f3b;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.ykdates-v2-select-status {
    color: #7b9183;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
    padding-bottom: 3px;
}

.ykdates-v2-price.is-active
.ykdates-v2-select-status {
    color: #087c43;
}

/* Desktop refinement */

@media (min-width: 768px) {

    .ykdates-v2-prices {
        gap: 10px;
    }

    .ykdates-v2-price {
        min-height: 142px;
    }

}

/* ==========================================
   MOBILE - KEEP TWO COMPACT PRICE CARDS
========================================== */

@media (max-width: 767px) {

    .ykdates-v2-prices {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .ykdates-v2-price {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;
        gap: 10px;
        min-height: 106px;
        padding: 11px;
    }

    .ykdates-v2-price-top {
        gap: 8px;
    }

    .ykdates-v2-price-icon {
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .ykdates-v2-price-details strong {
        font-size: 11px;
    }

    .ykdates-v2-price-details small {
        display: none;
    }

    .ykdates-v2-price-bottom {
        align-items: flex-end;
        gap: 4px;
    }

    .ykdates-v2-fee-wrap {
        gap: 4px;
    }

    .ykdates-v2-fee-wrap small {
        font-size: 8px;
    }

    .ykdates-v2-fee-wrap strong {
        font-size: 19px;
    }

    .ykdates-v2-select-status {
        font-size: 8px;
        padding-bottom: 2px;
    }

}

@media (max-width: 380px) {

    .ykdates-v2-price {
        padding: 9px 7px;
    }

    .ykdates-v2-fee-wrap strong {
        font-size: 17px;
    }

    .ykdates-v2-select-status {
        font-size: 7px;
    }

}