/*
|--------------------------------------------------------------------------
| MERITZA CLASSES
| FAQ PAGE
| sfaqp.css
|--------------------------------------------------------------------------
*/


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

.mc-faq-page {

    min-height: 100vh;

    color: #0A1946;

    /*
     * IMPORTANT:
     * The FAQ page does NOT create its own global background.
     * app.css / global page background remains visible.
     */

    background: transparent;
}


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

.mc-faq-container {

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

    margin:
        0 auto;
}


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

.mc-faq-hero {

    position: relative;

    overflow: hidden;

    background:
        #0A1946;

    color:
        #FFFFFF;
}


/*
|--------------------------------------------------------------------------
| HERO DECORATION
|--------------------------------------------------------------------------
*/

.mc-faq-hero::before {

    content: "";

    position: absolute;

    width:
        520px;

    height:
        520px;

    right:
        -220px;

    top:
        -250px;

    border-radius:
        50%;

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

    pointer-events:
        none;
}


.mc-faq-hero::after {

    content: "";

    position: absolute;

    width:
        300px;

    height:
        300px;

    left:
        -180px;

    bottom:
        -180px;

    border-radius:
        50%;

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

    pointer-events:
        none;
}


/* ==========================================================
   HERO INNER
========================================================== */

.mc-faq-hero-inner {

    position: relative;

    z-index:
        2;

    min-height:
        430px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(300px, .75fr);

    align-items:
        center;

    gap:
        50px;

    /*
     * Extra space above the eyebrow.
     */

    padding-top:
        90px;

    padding-bottom:
        65px;
}


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

.mc-faq-hero-content {

    position:
        relative;

    z-index:
        3;

    max-width:
        740px;
}


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

.mc-faq-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        8px;

    margin-bottom:
        18px;

    color:
        #D4AF37;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        2.2px;

    line-height:
        1.2;

    text-transform:
        uppercase;
}


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

.mc-faq-hero h1 {

    margin:
        0;

    max-width:
        780px;

    /*
     * FIX 01
     *
     * "Everything you want to know" is WHITE.
     */

    color:
        #FFFFFF;

    font-size:
        clamp(
            42px,
            5vw,
            68px
        );

    font-weight:
        800;

    line-height:
        1.04;

    letter-spacing:
        -1.8px;
}


.mc-faq-hero h1 span {

    color:
        #D4AF37;
}


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

.mc-faq-hero p {

    max-width:
        670px;

    margin:
        22px 0 0;

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

    font-size:
        17px;

    line-height:
        1.75;
}


.mc-faq-hero p strong {

    color:
        #FFFFFF;

    font-weight:
        700;
}


/* ==========================================================
   HERO VISUAL
========================================================== */

.mc-faq-hero-visual {

    position:
        relative;

    min-height:
        300px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


/* ==========================================================
   HERO CORE
========================================================== */

.mc-faq-hero-core {

    width:
        190px;

    height:
        190px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            212,
            175,
            55,
            .42
        );

    border-radius:
        50%;

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

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


.mc-faq-hero-core span {

    width:
        84px;

    height:
        84px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #D4AF37;

    color:
        #0A1946;

    font-size:
        42px;

    font-weight:
        800;
}


/* ==========================================================
   HERO CHIPS
========================================================== */

.mc-faq-hero-chip {

    position:
        absolute;

    padding:
        10px 16px;

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

    border-radius:
        999px;

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

    color:
        #FFFFFF;

    font-size:
        12px;

    font-weight:
        700;

    white-space:
        nowrap;

    box-shadow:
        0 12px 30px
        rgba(
            0,
            0,
            0,
            .14
        );
}


.mc-faq-hero-chip::before {

    content:
        "";

    display:
        inline-block;

    width:
        6px;

    height:
        6px;

    margin-right:
        8px;

    border-radius:
        50%;

    background:
        #D4AF37;

    vertical-align:
        middle;
}


.chip-one {

    top:
        25px;

    left:
        8%;
}


.chip-two {

    top:
        50%;

    right:
        0;

    transform:
        translateY(-50%);
}


.chip-three {

    bottom:
        25px;

    left:
        5%;
}


/* ==========================================================
   FAQ SECTION
========================================================== */

.mc-faq-section {

    /*
     * FIX 03
     *
     * No local gradient.
     * The global background from app.css remains visible.
     */

    background:
        transparent;

    padding:
        48px 0 85px;
}


/* ==========================================================
   ROLE SELECTOR
========================================================== */

.mc-faq-selector-wrap {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        58px;
}


.mc-faq-selector-label {

    color:
        #69778B;

    font-size:
        13px;

    font-weight:
        700;
}


.mc-faq-selector {

    width:
        min(
            680px,
            100%
        );

    display:
        grid;

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

    gap:
        4px;

    padding:
        5px;

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

    border-radius:
        16px;

    background:
        #FFFFFF;

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


/* ==========================================================
   ROLE TAB
========================================================== */

.mc-faq-tab {

    min-height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    border:
        0;

    border-radius:
        12px;

    background:
        transparent;

    color:
        #65738A;

    font-family:
        inherit;

    font-size:
        14px;

    font-weight:
        800;

    cursor:
        pointer;

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


.mc-faq-tab i {

    font-size:
        17px;
}


.mc-faq-tab:hover {

    background:
        #F3F6FB;

    color:
        #0A1946;
}


.mc-faq-tab.is-active {

    background:
        #0A1946;

    color:
        #FFFFFF;

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


/* ==========================================================
   FAQ PANEL
========================================================== */

.mc-faq-panel {

    display:
        none;
}


.mc-faq-panel.is-active {

    display:
        block;

    animation:
        mcFaqPanelIn
        .25s
        ease
        both;
}


@keyframes mcFaqPanelIn {

    from {

        opacity:
            0;

        transform:
            translateY(
                8px
            );
    }

    to {

        opacity:
            1;

        transform:
            translateY(
                0
            );
    }
}


/* ==========================================================
   PANEL HEADING
========================================================== */

.mc-faq-panel-heading {

    max-width:
        720px;

    margin:
        0 auto 35px;

    text-align:
        center;
}


.mc-faq-section-eyebrow {

    display:
        inline-block;

    margin-bottom:
        10px;

    color:
        #D4AF37;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        2px;

    text-transform:
        uppercase;
}


.mc-faq-panel-heading h2 {

    margin:
        0;

    color:
        #0A1946;

    font-size:
        clamp(
            30px,
            4vw,
            44px
        );

    font-weight:
        800;

    line-height:
        1.12;

    letter-spacing:
        -.7px;
}


.mc-faq-panel-heading h2 span {

    color:
        #D4AF37;
}


.mc-faq-panel-heading p {

    max-width:
        650px;

    margin:
        15px auto 0;

    color:
        #68768C;

    font-size:
        15px;

    line-height:
        1.75;
}


/* ==========================================================
   FAQ LIST
========================================================== */

.mc-faq-list {

    width:
        min(
            900px,
            100%
        );

    margin:
        0 auto;
}


/* ==========================================================
   FAQ ITEM
========================================================== */

.mc-faq-item {

    margin-bottom:
        11px;

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

    border-radius:
        13px;

    background:
        #FFFFFF;

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

    overflow:
        hidden;

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


.mc-faq-item.is-open {

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

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


/* ==========================================================
   QUESTION
========================================================== */

.mc-faq-question {

    width:
        100%;

    min-height:
        67px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    padding:
        18px 22px;

    border:
        0;

    background:
        #FFFFFF;

    color:
        #0A1946;

    font-family:
        inherit;

    font-size:
        15px;

    font-weight:
        800;

    line-height:
        1.45;

    text-align:
        left;

    cursor:
        pointer;
}


.mc-faq-question span {

    flex:
        1 1 auto;
}


.mc-faq-question i {

    flex:
        0 0 auto;

    width:
        29px;

    height:
        29px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #F3F6FB;

    color:
        #0A1946;

    font-size:
        11px;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease;
}


.mc-faq-item.is-open
.mc-faq-question i {

    background:
        #D4AF37;

    color:
        #0A1946;

    transform:
        rotate(
            45deg
        );
}


/* ==========================================================
   ANSWER
========================================================== */

.mc-faq-answer {

    display:
        grid;

    grid-template-rows:
        0fr;

    transition:
        grid-template-rows
        .28s
        ease;
}


.mc-faq-answer p {

    min-height:
        0;

    overflow:
        hidden;

    margin:
        0;

    padding:
        0 22px;

    color:
        #65738A;

    font-size:
        14px;

    line-height:
        1.8;

    opacity:
        0;

    transition:
        opacity .2s ease,
        padding .28s ease;
}


.mc-faq-item.is-open
.mc-faq-answer {

    grid-template-rows:
        1fr;
}


.mc-faq-item.is-open
.mc-faq-answer p {

    padding:
        0 22px 22px;

    opacity:
        1;
}


.mc-faq-answer strong {

    color:
        #0A1946;

    font-weight:
        800;
}


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

.mc-faq-contact {

    width:
        min(
            1000px,
            100%
        );

    display:
        grid;

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

    align-items:
        center;

    gap:
        40px;

    margin:
        70px auto 0;

    padding:
        34px 38px;

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

    border-radius:
        20px;

    background:
        #0A1946;

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

    color:
        #FFFFFF;
}


.mc-faq-contact h2 {

    margin:
        0;

    color:
        #FFFFFF;

    font-size:
        30px;

    line-height:
        1.15;
}


.mc-faq-contact h2 span {

    color:
        #D4AF37;
}


.mc-faq-contact p {

    max-width:
        610px;

    margin:
        10px 0 0;

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

    font-size:
        13.5px;

    line-height:
        1.65;
}


/* ==========================================================
   CONTACT BUTTONS
========================================================== */

.mc-faq-contact-actions {

    display:
        flex;

    gap:
        10px;
}


.mc-faq-contact-btn {

    min-width:
        185px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        12px 15px;

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

    border-radius:
        12px;

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

    color:
        #FFFFFF;

    text-decoration:
        none;

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


.mc-faq-contact-btn:hover {

    transform:
        translateY(
            -2px
        );

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

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

    color:
        #FFFFFF;
}


.mc-faq-contact-btn > i {

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        9px;

    background:
        #D4AF37;

    color:
        #0A1946;

    font-size:
        16px;
}


.mc-faq-contact-btn span {

    display:
        flex;

    flex-direction:
        column;

    font-size:
        12px;

    font-weight:
        800;
}


.mc-faq-contact-btn small {

    margin-bottom:
        2px;

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

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (
    max-width: 900px
) {

    .mc-faq-hero-inner {

        grid-template-columns:
            1fr;

        min-height:
            auto;

        padding-top:
            75px;

        padding-bottom:
            45px;
    }


    .mc-faq-hero-content {

        text-align:
            center;

        margin:
            0 auto;
    }


    .mc-faq-hero p {

        margin-left:
            auto;

        margin-right:
            auto;
    }


    .mc-faq-hero-visual {

        min-height:
            230px;

        max-width:
            500px;

        width:
            100%;

        margin:
            0 auto;
    }


    .mc-faq-contact {

        grid-template-columns:
            1fr;
    }

}


@media (
    max-width: 650px
) {

    .mc-faq-container {

        width:
            calc(
                100% - 28px
            );
    }


    .mc-faq-hero-inner {

        padding-top:
            68px;
    }


    .mc-faq-hero h1 {

        font-size:
            39px;

        letter-spacing:
            -1px;
    }


    .mc-faq-hero p {

        font-size:
            14px;
    }


    .mc-faq-section {

        padding:
            50px 0 60px;
    }


    .mc-faq-selector {

        grid-template-columns:
            1fr;
    }


    .mc-faq-tab {

        min-height:
            48px;
    }


    .mc-faq-question {

        min-height:
            62px;

        padding:
            16px;

        font-size:
            13.5px;
    }


    .mc-faq-answer p {

        padding-left:
            16px;

        padding-right:
            16px;

        font-size:
            13px;
    }


    .mc-faq-item.is-open
    .mc-faq-answer p {

        padding-left:
            16px;

        padding-right:
            16px;

        padding-bottom:
            18px;
    }


    .mc-faq-contact {

        padding:
            27px 22px;

        margin-top:
            52px;
    }


    .mc-faq-contact h2 {

        font-size:
            27px;
    }


    .mc-faq-contact-actions {

        flex-direction:
            column;
    }


    .mc-faq-contact-btn {

        width:
            100%;
    }


    .mc-faq-hero-chip {

        font-size:
            10px;

        padding:
            8px 11px;
    }


    .chip-one {

        left:
            0;
    }


    .chip-two {

        right:
            0;
    }


    .chip-three {

        left:
            0;
    }

}


@media (
    prefers-reduced-motion: reduce
) {

    .mc-faq-panel.is-active {

        animation:
            none;
    }


    .mc-faq-item,
    .mc-faq-question i,
    .mc-faq-answer,
    .mc-faq-answer p,
    .mc-faq-contact-btn {

        transition:
            none;
    }

}

/* ==========================================================
   PUBLIC FAQ FINAL COMPATIBILITY
========================================================== */
.mc-faq-empty {
    padding: 28px;
    border: 1px solid rgba(10,25,70,.08);
    border-radius: 14px;
    background: #fff;
    color: #68768C;
    text-align: center;
    font-size: 14px;
}
.mc-faq-answer p {
    min-height: 0;
    margin: 0;
    padding: 0 22px 22px;
    color: #65738A;
    font-size: 14px;
    line-height: 1.8;
}
.mc-faq-answer {
    display: none;
}
.mc-faq-item.is-open .mc-faq-answer {
    display: block;
}
.mc-faq-item.is-open .mc-faq-question i {
    transform: rotate(45deg);
    background: #D4AF37;
    color: #0A1946;
}
@media (max-width: 650px) {
    .mc-faq-answer p { padding: 0 16px 18px; font-size: 13px; }
}