/* ==========================================================
   MERITZA CLASSES
   FIND A TUTOR
   Version : 3.0.0
========================================================== */


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

.mc-tutors-page{

    position:relative;


    padding:18px 0 80px;

    overflow:hidden;

}

/* ==========================================================
   CONTAINER
========================================================== */

.mc-tutors-page .mc-container{

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

    margin:0 auto;

}


/* ==========================================================
   HERO CARD
========================================================== */

.mc-tutors-header{

    position:relative;

    width:100%;

    max-width:1180px;

    margin:0 auto;

    padding:28px 40px 24px;

    box-sizing:border-box;

    text-align:center;

    overflow:hidden;

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

    border-radius:
        22px
        22px
        0
        0;

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

}


/* ==========================================================
   HERO DECORATIVE GLOW
========================================================== */

.mc-tutors-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-tutors-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;

}


/* ==========================================================
   REMOVE EYEBROW
========================================================== */

.mc-tutors-eyebrow{

    display:none !important;

}


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

.mc-tutors-header > *{

    position:relative;

    z-index:2;

}


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

.mc-tutors-title{

    margin:0;

    color:#ffffff;

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

    font-weight:800;

    line-height:1.06;

    letter-spacing:-.04em;

}


.mc-tutors-title span{

    color:#D4AF37;

}


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

.mc-tutors-description{

    max-width:760px;

    margin:14px auto 0;

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

    font-size:.96rem;

    line-height:1.65;

}


/* ==========================================================
   FILTER PANEL
========================================================== */

.mc-tutors-filter-panel{

    position:relative;

    width:100%;

    max-width:1180px;

    margin:0 auto 15px;

    padding:20px;

    box-sizing:border-box;

    background:#ffffff;

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

    border-top:0;

    border-radius:
        0
        0
        18px
        18px;

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

}


/* ==========================================================
   SEARCH
========================================================== */

.mc-tutor-search-box{

    position:relative;

    display:flex;

    align-items:center;

    width:100%;

    min-height:54px;

    background:#f8fafc;

    border:1px solid #dce2ea;

    border-radius:12px;

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

}


.mc-tutor-search-box:focus-within{

    background:#ffffff;

    border-color:#D4AF37;

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

}


.mc-tutor-search-box > i{

    margin-left:17px;

    color:#7b8798;

    font-size:1rem;

}


.mc-tutor-search-input{

    flex:1;

    min-width:0;

    height:52px;

    padding:0 16px 0 12px;

    border:0;

    outline:0;

    background:transparent;

    color:#0A1946;

    font-size:.92rem;

}


.mc-tutor-search-input::placeholder{

    color:#98a2b3;

}


.mc-tutor-search-clear{

    display:flex;

    align-items:center;

    justify-content:center;

    width:40px;

    height:40px;

    margin-right:7px;

    border:0;

    border-radius:8px;

    background:transparent;

    color:#7b8798;

    cursor:pointer;

}


.mc-tutor-search-clear:hover{

    background:#eef1f5;

    color:#0A1946;

}


/* ==========================================================
   FILTER ROW
========================================================== */

.mc-tutor-filter-row{

    display:grid;

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

    gap:14px;

    align-items:end;

    margin-top:16px;

}


/* ==========================================================
   FILTER GROUP
========================================================== */

.mc-tutor-filter-group{

    min-width:0;

}


.mc-tutor-filter-label{

    display:block;

    margin:0 0 7px;

    color:#344054;

    font-size:.72rem;

    font-weight:650;

    letter-spacing:.02em;

}
/* ==========================================================
   SUBJECT MULTISELECT
========================================================== */

.mc-tutor-multiselect{

    position:relative;

    width:100%;

}


/* ==========================================================
   TRIGGER
========================================================== */

.mc-tutor-multiselect-trigger{

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;

    height:46px;

    padding:0 13px;

    border:1px solid #dce2ea;

    border-radius:10px;

    background:#ffffff;

    color:#344054;

    font-family:inherit;

    font-size:.82rem;

    cursor:pointer;

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

}


.mc-tutor-multiselect-trigger:hover{

    border-color:#c7ced9;

}


.mc-tutor-multiselect.open
.mc-tutor-multiselect-trigger{

    border-color:#D4AF37;

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

}


.mc-tutor-multiselect-trigger i{

    color:#7b8798;

    font-size:.72rem;

    transition:
        transform .2s ease;

}


.mc-tutor-multiselect.open
.mc-tutor-multiselect-trigger i{

    transform:rotate(180deg);

}


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

.mc-tutor-multiselect-menu{

    position:absolute;

    top:calc(100% + 7px);

    left:0;

    right:0;

    z-index:1000;

    display:none;

    max-height:260px;

    overflow-y:auto;

    padding:7px;

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

    border-radius:12px;

    background:#ffffff;

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

}


.mc-tutor-multiselect.open
.mc-tutor-multiselect-menu{

    display:block;

}


/* ==========================================================
   CHECKBOX OPTION
========================================================== */

.mc-tutor-checkbox-option{

    position:relative;

    display:flex;

    align-items:center;

    gap:10px;

    min-height:40px;

    padding:8px 10px;

    border-radius:8px;

    color:#344054;

    font-size:.78rem;

    cursor:pointer;

    transition:
        background .15s ease,
        color .15s ease;

}


.mc-tutor-checkbox-option:hover{

    background:#f5f7fa;

    color:#0A1946;

}


/* ==========================================================
   HIDDEN NATIVE CHECKBOX
========================================================== */

.mc-tutor-checkbox-option input{

    position:absolute;

    opacity:0;

    pointer-events:none;

}


/* ==========================================================
   CUSTOM CHECKBOX
========================================================== */

.mc-tutor-checkbox-box{

    display:flex;

    align-items:center;

    justify-content:center;

    flex:0 0 17px;

    width:17px;

    height:17px;

    border:1px solid #c7ced9;

    border-radius:4px;

    background:#ffffff;

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

}


.mc-tutor-checkbox-option input:checked
+
.mc-tutor-checkbox-box{

    border-color:#D4AF37;

    background:#D4AF37;

}


.mc-tutor-checkbox-option input:checked
+
.mc-tutor-checkbox-box::after{

    content:"";

    width:8px;

    height:4px;

    border-left:2px solid #0A1946;

    border-bottom:2px solid #0A1946;

    transform:
        rotate(-45deg)
        translateY(-1px);

}


/* ==========================================================
   SELECT ALL DIVIDER
========================================================== */

.mc-tutor-select-all{

    margin-bottom:5px;

    padding-bottom:10px;

    border-bottom:1px solid #edf0f4;

    font-weight:650;

}


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

@media (max-width:767.98px){

    .mc-tutor-multiselect-menu{

        max-height:230px;

    }

}

.mc-tutor-filter-select{

    width:100%;

    height:46px;

    padding:0 38px 0 13px;

    border:1px solid #dce2ea;

    border-radius:10px;

    outline:none;

    background:#ffffff;

    color:#344054;

    font-size:.82rem;

    cursor:pointer;

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

}


.mc-tutor-filter-select:focus{

    border-color:#D4AF37;

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

}


/* ==========================================================
   CLEAR BUTTON
========================================================== */

.mc-tutor-clear-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:46px;

    padding:0 18px;

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

    border-radius:10px;

    background:#0A1946;

    color:#ffffff;

    font-size:.78rem;

    font-weight:650;

    white-space:nowrap;

    cursor:pointer;

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

}


.mc-tutor-clear-button:hover{

    background:#13265a;

    border-color:#13265a;

    transform:translateY(-1px);

}


/* ==========================================================
   RESULTS HEADER
========================================================== */
.mc-tutors-results-header{

    display:flex;

    align-items:center;

    justify-content:center;

    margin-top:0;

    margin-bottom:6px;

}


.mc-tutors-results-title{

    margin:0;

    color:#0A1946;

    font-size:.85rem;

    font-weight:650;

    letter-spacing:-.01em;

    line-height:1.2;

}


.mc-tutors-results-count{

    margin:5px 0 0;

    color:#7a8698;

    font-size:.76rem;

}


.mc-tutors-results-count strong{

    color:#0A1946;

    font-weight:700;

}


/* ==========================================================
   TUTOR GRID
========================================================== */

.mc-tutors-grid{

    display:grid;

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

    gap:22px;

}


/* ==========================================================
   TUTOR CARD
========================================================== */

.mc-tutor-card{

    display:flex;

    flex-direction:column;

    min-width:0;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f9fbfd 100%
        );

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

    border-radius:18px;

    box-shadow:
        0 8px 28px rgba(
            10,
            25,
            70,
            .055
        );

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

}


.mc-tutor-card:hover{

    transform:translateY(-5px);

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

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

}


/* ==========================================================
   PROFILE IMAGE
========================================================== */

.mc-tutor-card-image-wrapper{

    position:relative;

    width:100%;

    height:245px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #e9eef5,
            #f6f8fb
        );

}


.mc-tutor-card-image-wrapper::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(
                10,
                25,
                70,
                .08
            ) 100%
        );

}


.mc-tutor-card-image{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center top;

    transition:
        transform .35s ease;

}


.mc-tutor-card:hover
.mc-tutor-card-image{

    transform:scale(1.025);

}


/* ==========================================================
   CARD BODY
========================================================== */

.mc-tutor-card-body{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:20px;

}


/* ==========================================================
   NAME
========================================================== */

.mc-tutor-name-row{

    display:flex;

    align-items:center;

    gap:7px;

    min-width:0;

    margin-bottom:10px;

}


.mc-tutor-name{

    min-width:0;

    margin:0;

    overflow:hidden;

    color:#0A1946;

    font-size:1.08rem;

    font-weight:720;

    line-height:1.25;

    letter-spacing:-.015em;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.mc-tutor-verified{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    flex:0 0 auto;

    color:#D4AF37;

    font-size:.88rem;

}


/* ==========================================================
   CARD DETAILS
========================================================== */

.mc-tutor-detail{

    display:flex;

    align-items:flex-start;

    gap:9px;

    margin-top:8px;

    color:#5f6b7a;

    font-size:.76rem;

    line-height:1.45;

}


.mc-tutor-detail i{

    flex:0 0 16px;

    margin-top:1px;

    color:#8b98aa;

    font-size:.78rem;

    text-align:center;

}


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

.mc-tutor-card-divider{

    width:100%;

    height:1px;

    margin:15px 0 13px;

    background:
        linear-gradient(
            90deg,
            rgba(
                212,
                175,
                55,
                .45
            ),
            rgba(
                212,
                175,
                55,
                .08
            ),
            transparent
        );

}


/* ==========================================================
   SUBJECT CHIPS
========================================================== */

.mc-tutor-subjects{

    display:flex;

    flex-wrap:wrap;

    gap:6px;

}


.mc-tutor-subject-chip{

    display:inline-flex;

    align-items:center;

    min-height:25px;

    padding:4px 9px;

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

    border-radius:999px;

    background:#f0f3f7;

    color:#3f4c5f;

    font-size:.66rem;

    font-weight:600;

    line-height:1.2;

}


/* ==========================================================
   EXPERIENCE
========================================================== */

.mc-tutor-experience{

    display:flex;

    align-items:center;

    gap:7px;

    margin-top:13px;

    color:#687588;

    font-size:.71rem;

}


.mc-tutor-experience i{

    color:#D4AF37;

    font-size:.78rem;

}


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

.mc-tutor-card-actions{

    display:flex;

    margin-top:auto;

    padding-top:18px;

}


/* ==========================================================
   PROFILE BUTTON
========================================================== */

.mc-tutor-profile-button{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:100%;

    min-height:42px;

    padding:0 15px;

    border:1px solid #D4AF37;

    border-radius:9px;

    background:#ffffff;

    color:#0A1946;

    font-size:.76rem;

    font-weight:700;

    text-decoration:none;

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

}


.mc-tutor-profile-button:hover{

    background:#D4AF37;

    border-color:#D4AF37;

    color:#0A1946;

    transform:translateY(-1px);

}


.mc-tutor-profile-button i{

    font-size:.76rem;

}


/* ==========================================================
   EMPTY STATE
========================================================== */

.mc-tutors-empty{

    grid-column:1 / -1;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    min-height:280px;

    padding:40px 20px;

    border:1px dashed rgba(
        10,
        25,
        70,
        .16
    );

    border-radius:18px;

    background:#ffffff;

    text-align:center;

}


.mc-tutors-empty-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:54px;

    height:54px;

    margin-bottom:15px;

    border-radius:50%;

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

    color:#D4AF37;

    font-size:1.35rem;

}


.mc-tutors-empty h3{

    margin:0;

    color:#0A1946;

    font-size:1.1rem;

}


.mc-tutors-empty p{

    max-width:450px;

    margin:8px auto 18px;

    color:#7a8698;

    font-size:.8rem;

    line-height:1.6;

}


/* ==========================================================
   HIDDEN FILTER RESULTS
========================================================== */

.mc-tutor-card[hidden]{

    display:none !important;

}


.mc-tutors-filter-empty{

    margin-top:10px;

}


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

@media (max-width:991.98px){

    .mc-tutors-page{

        padding:14px 0 68px;

    }


    .mc-tutors-page .mc-container{

        width:min(
            100% - 32px,
            760px
        );

    }


    .mc-tutors-header{

        padding:
    28px
    28px
    24px;

        border-radius:
            20px
            20px
            0
            0;

    }


    .mc-tutor-filter-row{

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

    }


    .mc-tutor-clear-button{

        width:100%;

    }


    .mc-tutors-grid{

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

        gap:18px;

    }


    .mc-tutor-card-image-wrapper{

        height:230px;

    }

}


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

@media (max-width:767.98px){

    .mc-tutors-page{

        padding:10px 0 58px;

    }


    .mc-tutors-page .mc-container{

        width:calc(
            100% - 28px
        );

    }


    .mc-tutors-header{

        padding:
    24px
    18px
    20px;

        border-radius:
            17px
            17px
            0
            0;

    }


    .mc-tutors-title{

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

        line-height:1.06;

    }


    .mc-tutors-description{

        margin-top:12px;

        font-size:.84rem;

        line-height:1.6;

    }


    .mc-tutors-filter-panel{

        padding:14px;

        border-radius:
            0
            0
            14px
            14px;

        margin-bottom:30px;

    }


    .mc-tutor-filter-row{

        grid-template-columns:1fr;

        gap:12px;

    }


    .mc-tutor-search-box{

        min-height:50px;

    }


    .mc-tutor-search-input{

        height:48px;

        font-size:.82rem;

    }


    .mc-tutor-filter-select{

        height:44px;

    }


    .mc-tutor-clear-button{

        height:44px;

    }


    .mc-tutors-results-header{

        margin-bottom:17px;

    }


    .mc-tutors-results-title{

        font-size:1.2rem;

    }


    .mc-tutors-grid{

        grid-template-columns:1fr;

        gap:16px;

    }


    .mc-tutor-card-image-wrapper{

        height:260px;

    }


    .mc-tutor-card-body{

        padding:18px;

    }


    .mc-tutor-name{

        font-size:1rem;

    }

}


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

@media (max-width:420px){

    .mc-tutors-page{

        padding-top:8px;

    }


    .mc-tutors-title{

        font-size:1.8rem;

    }


    .mc-tutor-card-image-wrapper{

        height:240px;

    }


    .mc-tutor-card-body{

        padding:16px;

    }

}
/* ==========================================================
   TUTOR PAGINATION
========================================================== */

.mc-tutor-pagination{

    width:100%;

    margin:
        32px
        auto
        10px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}


/* ==========================================================
   PAGINATION SUMMARY
========================================================== */

.mc-tutor-pagination-summary{

    width:100%;

    margin-bottom:14px;

    text-align:center;

    color:#667085;

    font-size:.82rem;

    line-height:1.5;

}


.mc-tutor-pagination-summary strong{

    color:#0A1946;

    font-weight:700;

}


/* ==========================================================
   PAGINATION CONTROLS
========================================================== */

.mc-tutor-pagination-controls{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:7px;

}


/* ==========================================================
   PAGINATION BUTTON
========================================================== */

.mc-tutor-pagination-button{

    min-width:38px;

    height:38px;

    padding:
        0
        11px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;

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

    border-radius:9px;

    background:#ffffff;

    color:#0A1946;

    font-family:inherit;

    font-size:.82rem;

    font-weight:600;

    line-height:1;

    cursor:pointer;

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

}


/* ==========================================================
   HOVER
========================================================== */

.mc-tutor-pagination-button:hover:not(:disabled){

    border-color:#D4AF37;

    color:#0A1946;

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

}


/* ==========================================================
   SELECTED / ACTIVE PAGE
========================================================== */

.mc-tutor-pagination-button.is-active{

    background:#0A1946;

    border-color:#0A1946;

    color:#ffffff;

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

}


/* ==========================================================
   ACTIVE PAGE HOVER
========================================================== */

.mc-tutor-pagination-button.is-active:hover{

    background:#0A1946;

    border-color:#0A1946;

    color:#ffffff;

    transform:translateY(-1px);

}


/* ==========================================================
   DISABLED PREVIOUS / NEXT
========================================================== */

.mc-tutor-pagination-button:disabled{

    opacity:.40;

    cursor:not-allowed;

    background:#f8f9fb;

}


/* ==========================================================
   ELLIPSIS
========================================================== */

.mc-tutor-pagination-ellipsis{

    min-width:30px;

    height:38px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    color:#667085;

    font-size:.9rem;

}


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

@media (max-width:600px){

    .mc-tutor-pagination{

        margin-top:26px;

    }


    .mc-tutor-pagination-summary{

        font-size:.76rem;

        margin-bottom:12px;

    }


    .mc-tutor-pagination-controls{

        gap:5px;

    }


    .mc-tutor-pagination-button{

        min-width:35px;

        height:35px;

        padding:
            0
            9px;

        border-radius:8px;

        font-size:.78rem;

    }


    .mc-tutor-pagination-ellipsis{

        min-width:24px;

        height:35px;

    }

}
/* MERITZA MOBILE — TUTOR LIST 2-COLUMN GRID
   Two tutor cards per row on every mobile width.
========================================================== */
@media (max-width:767.98px){
    .mc-tutors-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px !important;
    }
}
@media (max-width:420px){
    .mc-tutors-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px !important;
    }
}