/* ==========================================================
   MERITZA CLASSES
   BOOK A SESSION
========================================================== */


/* ==========================================================
   PAGE
   GLOBAL BACKGROUND IS CONTROLLED BY APP.CSS
========================================================== */

.mc-book-session-page{
    position:relative;

    min-height:100vh;

    overflow:hidden;

    padding-top:0 !important;
}


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

.mc-book-session{

    padding:
        18px
        0
        80px;

}


.mc-book-session
.mc-container{

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

    margin:0 auto;

}


/* ==========================================================
   MAIN CARD
   Match Find a Tutor hero width
========================================================== */

.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
        );

}


/* ==========================================================
   HERO CARD HEADER
   Same visual language as Find a Tutor
========================================================== */

.mc-booking-card-header{

    position:relative;

    padding:
        28px
        40px
        24px;

    box-sizing:border-box;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #081A3D 0%,
            #0A1946 48%,
            #132E68 100%
        );

    text-align:center;

}


/* ==========================================================
   HERO DECORATIVE GLOW
   Same treatment as Find a Tutor
========================================================== */

.mc-booking-card-header::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    top:-190px;

    left:-130px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(
                212,
                175,
                55,
                .13
            ) 0%,
            transparent 70%
        );

    pointer-events:none;

}


.mc-booking-card-header::after{

    content:"";

    position:absolute;

    width:360px;

    height:360px;

    right:-190px;

    bottom:-240px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                255,
                255,
                .065
            ) 0%,
            transparent 70%
        );

    pointer-events:none;

}


.mc-booking-card-header > *{

    position:relative;

    z-index:2;

}


/* ==========================================================
   HERO HEADING
   Same scale/weight as Find a Tutor
========================================================== */

.mc-booking-card-header h1{

    margin:0;

    color:#ffffff;

    font-size:
        clamp(
            2.15rem,
            4vw,
            3.45rem
        );

    font-weight:800;

    line-height:1.06;

    letter-spacing:-.04em;

}


.mc-booking-card-header h1 span{

    color:#D4AF37;

}


/* ==========================================================
   HERO DESCRIPTION
   Same scale as Find a Tutor
========================================================== */

.mc-booking-card-header p{

    max-width:760px;

    margin:
        14px
        auto
        0;

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

    font-size:.96rem;

    line-height:1.65;

    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:
            14px
            0
            68px;

    }


    .mc-booking-card{

        width:
            100%;

    }


    .mc-booking-card-header{

        padding:
            28px
            28px
            24px;

    }


    .mc-subject-grid{

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

    }

}


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

@media (
    max-width:767.98px
){

    .mc-book-session{

        padding:
            10px
            0
            58px;

    }


    .mc-book-session
    .mc-container{

        width:
            calc(
                100% - 28px
            );

    }


    .mc-booking-card{

        border-radius:17px;

    }


    .mc-booking-card-header{

        padding:
            24px
            18px
            20px;

        text-align:center;

    }


    .mc-booking-card-header h1{

        font-size:
            clamp(
                1.95rem,
                9vw,
                2.7rem
            );

        line-height:1.06;

    }


    .mc-booking-card-header p{

        margin-top:12px;

        font-size:.84rem;

        line-height:1.6;

    }


    .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-book-session{

        padding-top:8px;

    }


    .mc-subject-grid{

        grid-template-columns:1fr;

    }


    .mc-booking-card-header h1{

        font-size:1.8rem;

    }

}