/* =========================================================
   RYNA WOMAN - FAQ
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    background: #fff7f9;
    color: #44363c;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

button,
input {
    font-family: inherit;
}

a {
    text-decoration: none;
}


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

.faq-page {
    width: 100%;

    min-height: 100vh;

    padding:
        44px 0 80px;

    background:
        linear-gradient(
            180deg,
            #fff7f9 0%,
            #fffafb 100%
        );
}


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

.faq-container {
    width:
        min(
            900px,
            calc(100% - 36px)
        );

    margin:
        0 auto;
}


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

.faq-header {
    max-width:
        650px;

    margin-bottom:
        27px;
}

.faq-eyebrow {
    display:
        block;

    margin-bottom:
        7px;

    color:
        #b66d81;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.8px;
}

.faq-header h1 {
    margin:
        0;

    color:
        #34272d;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        32px;

    line-height:
        1.2;

    font-weight:
        400;
}

.faq-header p {
    margin:
        9px 0 0;

    color:
        #86767d;

    font-size:
        10px;

    line-height:
        1.6;
}


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

.faq-search-card {
    margin-bottom:
        15px;

    padding:
        12px;

    border:
        1px solid
        #eadde1;

    background:
        #fffafb;
}

.faq-search-wrap {
    position:
        relative;
}

.faq-search-wrap > i {
    position:
        absolute;

    left:
        13px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        #b98a99;

    font-size:
        10px;

    pointer-events:
        none;
}

.faq-search-wrap input {
    width:
        100%;

    height:
        42px;

    padding:
        0 42px 0 35px;

    border:
        1px solid
        #dfd2d6;

    outline:
        none;

    background:
        #fff;

    color:
        #44363c;

    font-size:
        9px;
}

.faq-search-wrap input::placeholder {
    color:
        #aa9da2;
}

.faq-search-wrap input:focus {
    border-color:
        #c68f9f;

    box-shadow:
        0 0 0 3px
        rgba(
            198,
            143,
            159,
            .08
        );
}

.faq-search-clear {
    position:
        absolute;

    right:
        8px;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        28px;

    height:
        28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        0;

    background:
        transparent;

    color:
        #9d8c93;

    font-size:
        10px;
}

.faq-search-clear:hover {
    color:
        #b66d81;
}


/* =========================================================
   CATEGORY NAV
========================================================= */

.faq-category-nav {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-bottom:
        28px;

    overflow-x:
        auto;

    padding-bottom:
        3px;

    scrollbar-width:
        thin;
}

.faq-category-button {
    min-height:
        33px;

    flex:
        0 0 auto;

    padding:
        0 12px;

    border:
        1px solid
        #e2d4d9;

    background:
        #fffafb;

    color:
        #75666d;

    font-size:
        8px;

    cursor:
        pointer;

    transition:
        .2s ease;
}

.faq-category-button:hover {
    border-color:
        #c99aaa;

    color:
        #a35f73;
}

.faq-category-button.active {
    border-color:
        #b66d81;

    background:
        #b66d81;

    color:
        #fff;
}


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

.faq-category-section {
    margin-bottom:
        28px;
}

.faq-category-heading {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        11px;
}

.faq-category-heading > span {
    color:
        #b66d81;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        1.2px;
}

.faq-category-heading h2 {
    margin:
        0;

    color:
        #4b3b42;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        16px;

    font-weight:
        400;
}


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

.faq-list {
    display:
        grid;

    gap:
        7px;
}


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

.faq-item {
    overflow:
        hidden;

    border:
        1px solid
        #e9dde1;

    background:
        #fffafb;

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

.faq-item:hover {
    border-color:
        #dcc6cd;
}

.faq-item.open {
    border-color:
        #d6b6c0;

    box-shadow:
        0 7px 20px
        rgba(
            70,
            45,
            53,
            .04
        );
}


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

.faq-question {
    width:
        100%;

    min-height:
        54px;

    display:
        grid;

    grid-template-columns:
        32px
        1fr
        30px;

    align-items:
        center;

    gap:
        10px;

    padding:
        8px 12px;

    border:
        0;

    background:
        transparent;

    color:
        #4b3c43;

    text-align:
        left;

    cursor:
        pointer;
}

.faq-question-number {
    color:
        #b88a98;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        .5px;
}

.faq-question-text {
    color:
        #4b3d44;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        12px;

    line-height:
        1.4;
}

.faq-question-icon {
    width:
        27px;

    height:
        27px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #ead8de;

    border-radius:
        50%;

    color:
        #b66d81;

    font-size:
        8px;

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

.faq-item.open
.faq-question-icon {
    transform:
        rotate(45deg);

    background:
        #fae9ee;

    color:
        #a65e73;
}


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

.faq-answer {
    display:
        grid;

    grid-template-rows:
        0fr;

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

.faq-answer-inner {
    overflow:
        hidden;
}

.faq-answer-inner p {
    margin:
        0;

    padding:
        0 52px 17px;

    color:
        #786970;

    font-size:
        9px;

    line-height:
        1.7;
}

.faq-item.open
.faq-answer {
    grid-template-rows:
        1fr;
}


/* =========================================================
   NO RESULTS
========================================================= */

.faq-no-results {
    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    min-height:
        280px;

    border-top:
        1px solid
        #eadde1;

    text-align:
        center;
}

.faq-no-results.show {
    display:
        flex;
}

.faq-no-results-icon {
    width:
        58px;

    height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        13px;

    border-radius:
        50%;

    background:
        #fae9ee;

    color:
        #b87c8e;

    font-size:
        20px;
}

.faq-no-results h2 {
    margin:
        0 0 6px;

    color:
        #44353b;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        20px;

    font-weight:
        400;
}

.faq-no-results p {
    margin:
        0;

    color:
        #8c7d83;

    font-size:
        8px;
}

.faq-no-results button {
    min-height:
        37px;

    margin-top:
        15px;

    padding:
        0 14px;

    border:
        1px solid
        #302629;

    background:
        #302629;

    color:
        #fff;

    font-size:
        8px;

    cursor:
        pointer;
}

.faq-no-results button:hover {
    border-color:
        #b66d81;

    background:
        #b66d81;
}


/* =========================================================
   CONTACT HELP
========================================================= */

.faq-contact {
    display:
        grid;

    grid-template-columns:
        46px
        1fr
        auto;

    align-items:
        center;

    gap:
        14px;

    margin-top:
        35px;

    padding:
        20px;

    border:
        1px solid
        #ead8de;

    background:
        #faedf1;
}

.faq-contact-icon {
    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #fff9fa;

    color:
        #b66d81;

    font-size:
        17px;
}

.faq-contact-text > span {
    display:
        block;

    margin-bottom:
        4px;

    color:
        #aa667a;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        1.2px;
}

.faq-contact-text h2 {
    margin:
        0 0 4px;

    color:
        #46363d;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        17px;

    font-weight:
        400;
}

.faq-contact-text p {
    margin:
        0;

    color:
        #806f76;

    font-size:
        8px;

    line-height:
        1.5;
}

.faq-contact-button {
    min-height:
        39px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0 14px;

    border:
        1px solid
        #302629;

    background:
        #302629;

    color:
        #fff;

    font-size:
        8px;

    font-weight:
        600;

    white-space:
        nowrap;

    transition:
        .2s ease;
}

.faq-contact-button:hover {
    border-color:
        #b66d81;

    background:
        #b66d81;
}


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

@media (max-width: 700px) {

    .faq-contact {
        grid-template-columns:
            42px
            1fr;
    }

    .faq-contact-button {
        grid-column:
            1 / -1;

        width:
            100%;
    }

}


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

@media (max-width: 520px) {

    .faq-page {
        padding:
            30px 0 60px;
    }

    .faq-container {
        width:
            calc(100% - 18px);
    }

    .faq-header h1 {
        font-size:
            27px;
    }

    .faq-header p {
        font-size:
            9px;
    }

    .faq-category-nav {
        gap:
            5px;

        margin-bottom:
            23px;
    }

    .faq-category-button {
        padding:
            0 10px;

        font-size:
            7.5px;
    }

    .faq-question {
        grid-template-columns:
            25px
            1fr
            27px;

        gap:
            7px;

        min-height:
            51px;

        padding:
            7px 9px;
    }

    .faq-question-text {
        font-size:
            10px;
    }

    .faq-answer-inner p {
        padding:
            0 41px 15px;

        font-size:
            8px;
    }

    .faq-contact {
        padding:
            15px;
    }

}


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

@media (max-width: 360px) {

    .faq-header h1 {
        font-size:
            24px;
    }

    .faq-question-text {
        font-size:
            9.5px;
    }

    .faq-answer-inner p {
        padding-left:
            32px;

        padding-right:
            12px;
    }

}