/* ==========================================
   MOSTPLAY PARTNERS - DEDICATED FAQ PAGE
   File: assets/css/layout/faq-page.css
========================================== */

.mp-faq-page {
    --faq-page-bg: #f7f8fa;
    --faq-page-text: #171512;
    --faq-page-muted: #555c65;
    --faq-page-yellow: #f2bd29;
    --faq-page-line: #dfe3e8;
    --faq-page-border: #dfcfaa;
    --faq-page-icon-bg: #211e19;

    position: relative;
    width: 100%;
    min-height: 55vh;
    margin: 0;
    padding: 65px 0 105px;

    background: var(--faq-page-bg);
    color: var(--faq-page-text);
}

.mp-faq-page *,
.mp-faq-page *::before,
.mp-faq-page *::after {
    box-sizing: border-box;
}

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

.mp-faq-page__container {
    width: min(calc(100% - 64px), 1120px);
    margin: 0 auto;
}

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

.mp-faq-page__header {
    margin: 0 0 38px;
}

.mp-faq-page__title {
    margin: 0;
    padding: 0;

    color: #151515;
    font-family: inherit;
    font-size: clamp(39px, 4.5vw, 51px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1.2px;
    text-transform: none;
}

/* ==========================================
   FAQ CATEGORY TABS
========================================== */

.mp-faq-page__tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;

    width: 100%;
    margin: 0 0 40px;
    padding: 0;
}

.mp-faq-page__tab {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    min-height: 43px;
    max-width: 100%;
    padding: 10px 20px;

    border: 1px solid var(--faq-page-border);
    border-radius: 100px;

    background: transparent;
    box-shadow: none;

    color: #55524d;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
    appearance: none;

    transition:
        background-color 250ms ease,
        border-color 250ms ease,
        color 250ms ease,
        transform 250ms ease;
}

/* Hover */

.mp-faq-page__tab:hover {
    background: rgba(242, 189, 41, 0.12);
    border-color: var(--faq-page-yellow);
    color: #171512;
}

/* Active yellow category */

.mp-faq-page__tab.is-active,
.mp-faq-page__tab[aria-selected="true"] {
    background: var(--faq-page-yellow);
    border-color: var(--faq-page-yellow);
    color: #151515;
    font-weight: 700;
}

.mp-faq-page__tab.is-active:hover {
    background: #eab51f;
}

/* Keyboard accessibility */

.mp-faq-page__tab:focus-visible {
    outline: 3px solid #1c64bc;
    outline-offset: 3px;
}

/* ==========================================
   CATEGORY PANELS
========================================== */

.mp-faq-page__panels {
    width: 100%;
}

.mp-faq-page__panel {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Important: hide inactive category panels */

.mp-faq-page__panel[hidden] {
    display: none !important;
}

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

.mp-faq-page__accordion {
    width: 100%;
    margin: 0;
    padding: 0;
}

.mp-faq-page__item {
    width: 100%;
    margin: 0;
    padding: 0;

    border-bottom: 1px solid var(--faq-page-line);
}

.mp-faq-page__item-heading {
    margin: 0;
    padding: 0;

    font-size: inherit;
    font-weight: inherit;
}

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

.mp-faq-page__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;

    width: 100%;
    min-height: 67px;
    margin: 0;
    padding: 19px 4px;

    border: 0;
    border-radius: 0;

    background: transparent;
    box-shadow: none;

    color: #151515;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;

    cursor: pointer;
    appearance: none;

    transition: color 250ms ease;
}

.mp-faq-page__question:hover {
    color: #565047;
}

.mp-faq-page__question:focus-visible {
    outline: 2px solid var(--faq-page-yellow);
    outline-offset: -2px;
}

.mp-faq-page__question-text {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

/* ==========================================
   BLACK SQUARE PLUS / MINUS ICON
========================================== */

.mp-faq-page__toggle {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: 27px;
    height: 27px;
    flex: 0 0 27px;

    border-radius: 8px;
    background: var(--faq-page-icon-bg);
    color: var(--faq-page-yellow);

    transition:
        transform 250ms ease,
        background-color 250ms ease;
}

.mp-faq-page__toggle svg {
    display: block;
    width: 17px;
    height: 17px;
}

.mp-faq-page__question:hover .mp-faq-page__toggle {
    background: #373126;
}

.mp-faq-page__plus-vertical {
    transform-origin: center;
    transition:
        opacity 260ms ease,
        transform 260ms ease;
}

/* When expanded, plus becomes minus */

.mp-faq-page__question[aria-expanded="true"]
.mp-faq-page__plus-vertical {
    opacity: 0;
    transform: rotate(90deg);
}

/* ==========================================
   FAQ ANSWER - SMOOTH ACCORDION
========================================== */

.mp-faq-page__answer-wrap {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;

    transition:
        grid-template-rows 420ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 350ms ease;
}

.mp-faq-page__answer-inner {
    min-height: 0;
    overflow: hidden;
}

.mp-faq-page__answer {
    max-width: 920px;
    padding: 0 50px 0 4px;

    color: var(--faq-page-muted);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;

    transform: translateY(-7px);

    transition:
        transform 420ms ease,
        padding-bottom 420ms ease;
}

.mp-faq-page__answer p {
    margin: 0 0 12px;
}

.mp-faq-page__answer p:last-child {
    margin-bottom: 0;
}

.mp-faq-page__answer a {
    color: #064eb4;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Expanded FAQ */

.mp-faq-page__item.is-open .mp-faq-page__answer-wrap {
    grid-template-rows: 1fr;
    opacity: 1;
}

.mp-faq-page__item.is-open .mp-faq-page__answer {
    padding-bottom: 22px;
    transform: translateY(0);
}

/* ==========================================
   EMPTY FAQ MESSAGE
========================================== */

.mp-faq-page__empty {
    margin: 20px 0;
    padding: 20px 24px;

    border: 1px solid var(--faq-page-line);
    border-radius: 10px;

    color: var(--faq-page-muted);
    background: rgba(255, 255, 255, 0.5);

    font-size: 15px;
    line-height: 1.6;
}

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

@media (max-width: 900px) {

    .mp-faq-page {
        padding: 55px 0 80px;
    }

    .mp-faq-page__container {
        width: min(calc(100% - 48px), 760px);
    }

    .mp-faq-page__header {
        margin-bottom: 30px;
    }

    .mp-faq-page__title {
        font-size: 43px;
    }

    .mp-faq-page__tabs {
        gap: 9px;
        margin-bottom: 33px;
    }

    .mp-faq-page__tab {
        font-size: 13px;
        min-height: 41px;
        padding: 10px 17px;
    }
}

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

@media (max-width: 600px) {

    .mp-faq-page {
        min-height: 45vh;
        padding: 42px 0 65px;
    }

    .mp-faq-page__container {
        width: calc(100% - 36px);
    }

    .mp-faq-page__header {
        margin-bottom: 26px;
    }

    .mp-faq-page__title {
        font-size: 38px;
        letter-spacing: -0.7px;
    }

    /* Tabs scroll horizontally instead of
       wrapping into several tall rows */

    .mp-faq-page__tabs {
        flex-wrap: nowrap;
        gap: 9px;

        overflow-x: auto;
        overflow-y: hidden;

        margin-bottom: 26px;
        padding: 3px 0 10px;

        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .mp-faq-page__tabs::-webkit-scrollbar {
        display: none;
    }

    .mp-faq-page__tab {
        flex: 0 0 auto;
        min-height: 39px;
        padding: 9px 16px;

        font-size: 12px;
        scroll-snap-align: start;
    }

    /* Accordion */

    .mp-faq-page__question {
        min-height: 64px;
        padding: 17px 2px;
        gap: 17px;

        font-size: 14px;
        line-height: 1.55;
    }

    .mp-faq-page__toggle {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
        border-radius: 7px;
    }

    .mp-faq-page__toggle svg {
        width: 16px;
        height: 16px;
    }

    .mp-faq-page__answer {
        padding-right: 9px;
        font-size: 13px;
        line-height: 1.75;
    }

    .mp-faq-page__item.is-open .mp-faq-page__answer {
        padding-bottom: 20px;
    }
}

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

@media (max-width: 380px) {

    .mp-faq-page__container {
        width: calc(100% - 28px);
    }

    .mp-faq-page__title {
        font-size: 35px;
    }

    .mp-faq-page__question {
        font-size: 13px;
    }
}

/* ==========================================
   REDUCED MOTION ACCESSIBILITY
========================================== */

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

    .mp-faq-page__tab,
    .mp-faq-page__question,
    .mp-faq-page__toggle,
    .mp-faq-page__plus-vertical,
    .mp-faq-page__answer-wrap,
    .mp-faq-page__answer {
        transition: none !important;
    }

    .mp-faq-page__answer {
        transform: none !important;
    }

    .mp-faq-page__tabs {
        scroll-behavior: auto;
    }
}


/* FAQ plus/minus box */
.mp-faq-page__toggle {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 8px;
    background: #0d5bff; /* MostPlay blue */
    color: var(--faq-page-yellow);     /* plus sign color */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    transition: all 0.3s ease;
    
}