/* ==========================================================
   MERITZA CLASSES
   BOOK FREE COUNSELLING
========================================================== */


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

.mc-book-counselling-page{

    position:relative;

    min-height:100vh;

    overflow:hidden;

    padding-top:0 !important;

}


/* ==========================================================
   BREADCRUMB
   Same transparent style as other pages
========================================================== */

.mc-book-counselling-page .mc-breadcrumbs{

    width:100%;

    margin-top:56px !important;

    padding:
        6px
        0
        4px;

    background:transparent !important;

    border:none !important;

    box-shadow:none !important;

    position:relative;

    z-index:20;

    display:block !important;

    visibility:visible !important;

    opacity:1 !important;

}


.mc-book-counselling-page .mc-breadcrumbs-inner{

    width:min(
        1180px,
        calc(100% - 40px)
    );

    min-height:30px;

    margin:0 auto;

    padding:0;

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    box-sizing:border-box;

    background:transparent !important;

    border:none !important;

    box-shadow:none !important;

}


/* Previous breadcrumb */

.mc-book-counselling-page
.mc-breadcrumb-link{

    display:inline-flex;

    align-items:center;

    gap:6px;

    color:#536A87 !important;

    font-size:.86rem;

    font-weight:600;

    line-height:1;

    text-decoration:none !important;

}


.mc-book-counselling-page
.mc-breadcrumb-link:hover{

    color:#0A1946 !important;

}


/* Separator */

.mc-book-counselling-page
.mc-breadcrumb-separator{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    color:#71849C !important;

    font-size:.62rem;

    line-height:1;

}


/* Current page */

.mc-book-counselling-page
.mc-breadcrumb-current{

    display:inline-flex;

    align-items:center;

    color:#0A1946 !important;

    font-size:.86rem;

    font-weight:700;

    line-height:1;

}

/* ==========================================================
   BOOKING SECTION
========================================================== */

.mc-book-session{

    padding:
        10px
        0
        70px;

}


.mc-book-session
.mc-container{

    width:min(
        1180px,
        calc(100% - 40px)
    );

    margin:0 auto;

}


/* ==========================================================
   MAIN CARD
========================================================== */

.mc-booking-card{

    width:min(
        1140px,
        100%
    );

    margin:
        0
        auto;

    overflow:hidden;

    border:
        1px solid
        rgba(
            10,
            25,
            70,
            .07
        );

    border-radius:22px;

    background:#ffffff;

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

}


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

.mc-booking-card-header{

    padding:
        30px
        40px;

    background:
        linear-gradient(
            120deg,
            #07183D 0%,
            #0A1946 55%,
            #173477 100%
        );

    text-align:center;

}


/* ==========================================================
   REMOVE OPTIONAL STEP LABEL
========================================================== */

.mc-booking-step-label{

    display:none !important;

}


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

.mc-booking-card-header h1{

    margin:0;

    color:#ffffff;

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    font-weight:750;

    line-height:1.08;

    letter-spacing:-.035em;

}


/* ==========================================================
   COUNSELLING = GOLD
========================================================== */

.mc-booking-card-header h1 span{

    color:#D4AF37 !important;

}


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

.mc-booking-card-header p{

    max-width:
        850px;

    margin:
        10px
        auto
        0;

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

    font-size:.78rem;

    line-height:1.55;

    text-align:center;

}


.mc-booking-card-header p strong{

    color:#D4AF37;

}


/* ==========================================================
   WHITE BODY
   No heading added here.
========================================================== */

.mc-booking-card-body{

    padding:
        27px
        28px
        30px;

    background:#ffffff;

}


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

.mc-form-grid{

    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        17px
        16px;

}


.mc-form-field{

    min-width:0;

}


.mc-form-field-full{

    grid-column:
        1 / -1;

}


/* ==========================================================
   LABELS
========================================================== */

.mc-form-field label{

    display:block;

    margin-bottom:6px;

    color:#273653;

    font-size:.68rem;

    font-weight:700;

}


.mc-form-field label span{

    color:#D4AF37;

}


.mc-form-field label small{

    color:#8995a6;

    font-size:.6rem;

    font-weight:500;

}


/* ==========================================================
   INPUTS
========================================================== */

.mc-form-field input,
.mc-form-field select,
.mc-form-field textarea{

    width:100%;

    box-sizing:border-box;

    border:
        1px solid
        #dce2e9;

    border-radius:9px;

    outline:none;

    background:#ffffff;

    color:#243450;

    font-family:inherit;

    font-size:.72rem;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;

}


.mc-form-field input,
.mc-form-field select{

    height:43px;

    padding:
        0
        12px;

}


.mc-form-field textarea{

    min-height:115px;

    padding:
        11px
        12px;

    resize:vertical;

    line-height:1.5;

}


.mc-form-field input::placeholder,
.mc-form-field textarea::placeholder{

    color:#a2acb9;

}


.mc-form-field input:focus,
.mc-form-field select:focus,
.mc-form-field textarea:focus{

    border-color:#D4AF37;

    box-shadow:
        0 0 0 3px
        rgba(
            212,
            175,
            55,
            .09
        );

}


.mc-form-field input[readonly]{

    background:#f6f8fa;

}


/* ==========================================================
   OTHER FIELD
========================================================== */

.mc-inline-field{

    margin-top:8px;

}


.mc-inline-field[hidden]{

    display:none !important;

}


/* ==========================================================
   SUBJECT DROPDOWN
========================================================== */

.mc-subject-select{

    position:relative;

    width:100%;

}


.mc-subject-trigger{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    width:100%;

    min-height:43px;

    padding:
        0
        12px;

    border:
        1px solid
        #dce2e9;

    border-radius:9px;

    background:#ffffff;

    color:#243450;

    font-family:inherit;

    font-size:.72rem;

    font-weight:500;

    text-align:left;

    cursor:pointer;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;

}


.mc-subject-trigger:hover{

    border-color:#c7d0dc;

}


.mc-subject-select.open
.mc-subject-trigger{

    border-color:#D4AF37;

    box-shadow:
        0 0 0 3px
        rgba(
            212,
            175,
            55,
            .09
        );

}


.mc-subject-trigger i{

    flex:
        0 0 auto;

    color:#65738a;

    font-size:.7rem;

    transition:
        transform .18s ease;

}


.mc-subject-select.open
.mc-subject-trigger i{

    transform:
        rotate(180deg);

}


/* ==========================================================
   SUBJECT DROPDOWN MENU
========================================================== */

.mc-subject-menu{

    display:none;

    position:absolute;

    top:
        calc(
            100% + 6px
        );

    left:0;

    width:100%;

    max-height:280px;

    padding:10px;

    overflow-y:auto;

    background:#ffffff;

    border:
        1px solid
        #dce2e9;

    border-radius:10px;

    box-shadow:
        0 12px 30px
        rgba(
            10,
            25,
            70,
            .14
        );

    z-index:1200;

}


.mc-subject-select.open
.mc-subject-menu{

    display:block;

}


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

.mc-subject-grid{

    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:7px;

}


.mc-subject-option{

    position:relative;

    display:flex !important;

    align-items:center;

    gap:7px;

    min-height:40px;

    margin:0 !important;

    padding:
        0
        9px;

    border:
        1px solid
        #dce2e9;

    border-radius:8px;

    background:#ffffff;

    color:#526077 !important;

    font-size:.64rem !important;

    font-weight:600 !important;

    cursor:pointer;

    transition:
        border-color .18s ease,
        background .18s ease;

}


.mc-subject-option:hover{

    border-color:
        rgba(
            212,
            175,
            55,
            .65
        );

}


.mc-subject-option input{

    position:absolute;

    width:1px !important;

    height:1px !important;

    opacity:0;

}


.mc-subject-check{

    display:flex;

    align-items:center;

    justify-content:center;

    flex:
        0 0 15px;

    width:15px;

    height:15px;

    border:
        1px solid
        #cbd4df;

    border-radius:4px;

    background:#ffffff;

    color:#ffffff;

    font-size:.52rem;

}


.mc-subject-check i{

    display:none;

}


.mc-subject-option:has(
    input:checked
){

    border-color:#D4AF37;

    background:
        rgba(
            212,
            175,
            55,
            .065
        );

    color:#0A1946 !important;

}


.mc-subject-option:has(
    input:checked
)
.mc-subject-check{

    border-color:#D4AF37;

    background:#D4AF37;

}


.mc-subject-option:has(
    input:checked
)
.mc-subject-check i{

    display:block;

}


/* ==========================================================
   ALERT
========================================================== */

.mc-form-alert{

    margin-bottom:16px;

    padding:
        10px
        13px;

    border:
        1px solid
        rgba(
            190,
            55,
            55,
            .15
        );

    border-radius:8px;

    background:#fff5f5;

    color:#a13c3c;

    font-size:.68rem;

}


.mc-form-alert[hidden]{

    display:none !important;

}


/* ==========================================================
   HINT
========================================================== */

.mc-field-hint{

    margin-top:4px;

    color:#99a4b2;

    font-size:.58rem;

}


/* ==========================================================
   SUBMIT
========================================================== */

.mc-form-submit{

    margin-top:2px;

    text-align:center;

}


.mc-book-submit{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:100%;

    min-height:46px;

    border:
        1px solid
        #D4AF37;

    border-radius:9px;

    background:#D4AF37;

    color:#0A1946;

    font-family:inherit;

    font-size:.72rem;

    font-weight:800;

    cursor:pointer;

    box-shadow:
        0 8px 18px
        rgba(
            212,
            175,
            55,
            .18
        );

    transition:
        transform .18s ease,
        box-shadow .18s ease;

}


.mc-book-submit:hover{

    transform:
        translateY(-1px);

    box-shadow:
        0 11px 22px
        rgba(
            212,
            175,
            55,
            .24
        );

}


.mc-book-submit:disabled{

    opacity:.65;

    cursor:not-allowed;

    transform:none;

}


/* ==========================================================
   SUBMIT NOTE
========================================================== */

.mc-form-submit p{

    margin:
        7px
        0
        0;

    color:#8995a5;

    font-size:.58rem;

}


/* ==========================================================
   SPINNER
========================================================== */

.mc-submit-spinner{

    width:12px;

    height:12px;

    border:
        2px solid
        rgba(
            10,
            25,
            70,
            .22
        );

    border-top-color:#0A1946;

    border-radius:50%;

    animation:
        mc-book-spin .7s linear infinite;

}


@keyframes mc-book-spin{

    to{

        transform:
            rotate(360deg);

    }

}


/* ==========================================================
   SUCCESS MODAL
========================================================== */

.mc-success-overlay{

    position:fixed;

    inset:0;

    z-index:99999;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:
        rgba(
            5,
            14,
            35,
            .65
        );

    backdrop-filter:
        blur(5px);

}


.mc-success-modal{

    width:
        min(
            420px,
            100%
        );

    padding:
        30px
        26px;

    border-radius:18px;

    background:#ffffff;

    text-align:center;

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

}


.mc-success-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:54px;

    height:54px;

    margin:
        0
        auto
        12px;

    border-radius:50%;

    background:
        rgba(
            212,
            175,
            55,
            .13
        );

    color:#D4AF37;

    font-size:1.45rem;

}


.mc-success-eyebrow{

    color:#987817;

    font-size:.56rem;

    font-weight:800;

    letter-spacing:.15em;

}


.mc-success-modal h2{

    margin:
        6px
        0
        5px;

    color:#0A1946;

    font-size:1.45rem;

}


.mc-success-modal p{

    margin:0;

    color:#6d798b;

    font-size:.7rem;

    line-height:1.55;

}


.mc-success-actions{

    display:grid;

    gap:8px;

    margin-top:20px;

}


.mc-success-primary,
.mc-success-whatsapp{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    width:100%;

    min-height:42px;

    border-radius:8px;

    font-family:inherit;

    font-size:.68rem;

    font-weight:750;

    text-decoration:none;

    cursor:pointer;

}


.mc-success-primary{

    border:
        1px solid
        #D4AF37;

    background:#D4AF37;

    color:#0A1946;

}


.mc-success-whatsapp{

    border:
        1px solid
        #dce2e9;

    background:#ffffff;

    color:#263653;

}


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

@media (
    max-width:991.98px
){

    .mc-book-session{

        padding:
            10px
            0
            68px;

    }


    .mc-booking-card{

        width:100%;

    }


    .mc-booking-card-header{

        padding:
            28px
            30px;

    }


    .mc-subject-grid{

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

    }

}


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

@media (
    max-width:767.98px
){

    .mc-book-counselling-page
    .mc-breadcrumbs{

        margin-top:56px !important;

        padding:
            5px
            0
            5px;

    }


    .mc-book-counselling-page
    .mc-breadcrumbs-inner{

        width:
            calc(
                100% - 28px
            );

        min-height:34px;

        padding:
            0
            11px;

        gap:6px;

    }


    .mc-book-counselling-page
    .mc-breadcrumb-link,
    .mc-book-counselling-page
    .mc-breadcrumb-current{

        font-size:.72rem;

    }


    .mc-book-counselling-page
    .mc-breadcrumb-separator{

        font-size:.58rem;

    }


    .mc-book-session{

        padding:
            8px
            0
            55px;

    }


    .mc-book-session
    .mc-container{

        width:
            calc(
                100% - 28px
            );

    }


    .mc-booking-card{

        border-radius:16px;

    }


    .mc-booking-card-header{

        padding:
            24px
            20px;

        text-align:center;

    }


    .mc-booking-card-header h1{

        font-size:
            clamp(
                1.7rem,
                7vw,
                2.25rem
            );

        line-height:1.1;

    }


    .mc-booking-card-header p{

        margin-top:9px;

        font-size:.68rem;

    }


    .mc-booking-card-body{

        padding:
            21px
            20px
            24px;

    }


    .mc-form-grid{

        grid-template-columns:1fr;

        gap:15px;

    }


    .mc-form-field-full{

        grid-column:auto;

    }


    .mc-subject-grid{

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }

}


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

@media (
    max-width:420px
){

    .mc-subject-grid{

        grid-template-columns:1fr;

    }


    .mc-booking-card-header h1{

        font-size:1.6rem;

    }


    .mc-book-counselling-page
    .mc-breadcrumbs-inner{

        width:
            calc(
                100% - 20px
            );

    }

}
/* Validation feedback: preserve entered values and highlight only the field that needs attention. */
.mc-register-field.is-invalid input,
.mc-register-field.is-invalid select,
.mc-register-field.is-invalid textarea,
.mc-tutor-field.is-invalid input,
.mc-tutor-field.is-invalid select,
.mc-tutor-field.is-invalid textarea {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220,53,69,.08);
}
.mc-register-field.is-invalid label,
.mc-tutor-field.is-invalid label {
    color: #c62828;
}
.mc-form-success {
    margin-bottom: 18px;
    padding: 13px 16px;
    border-radius: 10px;
    background: #edf9f1;
    border: 1px solid #b9e5c7;
    color: #176b34;
    font-weight: 600;
}
/* ==========================================================
   MERITZA PWA / MOBILE
   BOOK FREE COUNSELLING
   Clean app-style mobile layout
========================================================== */

@media screen and (max-width: 1024px) {

    /* ------------------------------------------------------
       PAGE CANVAS
    ------------------------------------------------------ */

    html,
    body {

        background:
            #FFFFFF !important;

        background-image:
            none !important;

        background-color:
            #FFFFFF !important;
    }


    .mc-book-counselling-page {

        min-height:
            100vh !important;

        padding:
            0 0 20px !important;

        margin:
            0 !important;

        background:
            #FFFFFF !important;

        background-image:
            none !important;

        background-color:
            #FFFFFF !important;
    }


    /* ------------------------------------------------------
       REMOVE BREADCRUMB COMPLETELY
    ------------------------------------------------------ */

    .mc-book-counselling-page
    .mc-breadcrumbs,

    .mc-book-counselling-page
    .mc-breadcrumbs-inner,

    .mc-book-counselling-page
    .mc-breadcrumb-link,

    .mc-book-counselling-page
    .mc-breadcrumb-separator,

    .mc-book-counselling-page
    .mc-breadcrumb-current {

        display:
            none !important;

        visibility:
            hidden !important;

        height:
            0 !important;

        min-height:
            0 !important;

        max-height:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;

        border:
            0 !important;
    }


    /* ------------------------------------------------------
       BOOKING SECTION
    ------------------------------------------------------ */

    .mc-book-counselling-page
    .mc-book-session {

        margin:
            0 !important;

        padding:
            12px
            0
            30px !important;

        background:
            #FFFFFF !important;

        background-image:
            none !important;

        background-color:
            #FFFFFF !important;
    }


    .mc-book-counselling-page
    .mc-book-session
    .mc-container {

        width:
            calc(
                100% - 24px
            ) !important;

        max-width:
            none !important;

        margin:
            0 auto !important;

        padding:
            0 !important;
    }


    /* ------------------------------------------------------
       MAIN COUNSELLING CARD
    ------------------------------------------------------ */

    .mc-book-counselling-page
    .mc-booking-card {

        width:
            100% !important;

        margin:
            0 !important;

        border-radius:
            18px !important;

        overflow:
            hidden !important;

        background:
            #FFFFFF !important;

        background-image:
            none !important;

        border:
            1px solid
            #E7EBF2 !important;

        box-shadow:
            0 6px 20px
            rgba(
                10,
                25,
                70,
                .06
            ) !important;
    }


    /* ------------------------------------------------------
       COUNSELLING HEADER
       
       Remove gradient on mobile.
       Use one solid Meritza navy colour.
    ------------------------------------------------------ */

    .mc-book-counselling-page
    .mc-booking-card-header {

        background:
            #0A1946 !important;

        background-image:
            none !important;

        background-color:
            #0A1946 !important;

        padding:
            22px
            17px !important;

        text-align:
            center !important;
    }


    .mc-book-counselling-page
    .mc-booking-card-header h1 {

        margin:
            0 !important;

        color:
            #FFFFFF !important;

        font-size:
            clamp(
                1.55rem,
                7vw,
                2rem
            ) !important;

        line-height:
            1.1 !important;

        letter-spacing:
            -.3px !important;
    }


    .mc-book-counselling-page
    .mc-booking-card-header h1 span {

        color:
            #D4AF37 !important;
    }


    .mc-book-counselling-page
    .mc-booking-card-header p {

        margin:
            8px auto 0 !important;

        max-width:
            330px !important;

        color:
            rgba(
                255,
                255,
                255,
                .78
            ) !important;

        font-size:
            11px !important;

        line-height:
            1.4 !important;
    }


    /* ------------------------------------------------------
       FORM BODY
    ------------------------------------------------------ */

    .mc-book-counselling-page
    .mc-booking-card-body {

        padding:
            18px
            16px
            20px !important;

        background:
            #FFFFFF !important;

        background-image:
            none !important;

        background-color:
            #FFFFFF !important;
    }


    /* ------------------------------------------------------
       FORM GRID
    ------------------------------------------------------ */

    .mc-book-counselling-page
    .mc-form-grid {

        grid-template-columns:
            1fr !important;

        gap:
            13px !important;
    }


    .mc-book-counselling-page
    .mc-form-field-full {

        grid-column:
            auto !important;
    }


    /* ------------------------------------------------------
       FORM ELEMENTS
    ------------------------------------------------------ */

    .mc-book-counselling-page
    .mc-form-field
    label {

        font-size:
            11px !important;

        margin-bottom:
            5px !important;
    }


    .mc-book-counselling-page
    .mc-form-field
    input,

    .mc-book-counselling-page
    .mc-form-field
    select,

    .mc-book-counselling-page
    .mc-form-field
    textarea {

        width:
            100% !important;

        min-height:
            42px !important;

        font-size:
            12px !important;

        border-radius:
            10px !important;
    }


    /* ------------------------------------------------------
       REMOVE ANY PAGE-LEVEL DECORATIVE GRADIENTS
    ------------------------------------------------------ */

    .mc-book-counselling-page::before,
    .mc-book-counselling-page::after,

    .mc-book-counselling-page
    .mc-book-session::before,
    .mc-book-counselling-page
    .mc-book-session::after,

    .mc-book-counselling-page
    .mc-container::before,
    .mc-book-counselling-page
    .mc-container::after {

        background:
            transparent !important;

        background-image:
            none !important;

        box-shadow:
            none !important;

        content:
            none !important;
    }
}


/* ==========================================================
   EXTRA SMALL PHONES
========================================================== */

@media screen and (max-width: 480px) {

    .mc-book-counselling-page
    .mc-book-session {

        padding:
            8px
            0
            24px !important;
    }


    .mc-book-counselling-page
    .mc-book-session
    .mc-container {

        width:
            calc(
                100% - 20px
            ) !important;
    }


    .mc-book-counselling-page
    .mc-booking-card {

        border-radius:
            16px !important;
    }


    .mc-book-counselling-page
    .mc-booking-card-header {

        padding:
            20px
            15px !important;
    }


    .mc-book-counselling-page
    .mc-booking-card-body {

        padding:
            16px
            14px
            18px !important;
    }
}