/**
 * BWA FAQ - Frontend Styles
 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */

.all-faq,
.bwa-faq {
    --bwa-faq-primary    : var(--e-global-color-primary, #1D2327);
    --bwa-faq-text       : var(--e-global-color-text, #1D2327);
    --bwa-faq-accent     : #8BBE41;
    --bwa-faq-bg         : #FFFFFF;
    --bwa-faq-bg-hover   : rgba(255, 255, 255, 0.50);
    --bwa-faq-border     : #E1E1E1;
    --bwa-faq-radius     : 5px;
    --bwa-faq-gap        : 10px;
    --bwa-faq-transition : 0.35s ease;
    --bwa-faq-font       : var(--e-global-typography-primary-font-family, inherit);
}

/* ==========================================================================
   Base Container
   ========================================================================== */

.all-faq,
.bwa-faq {
    font-family : var(--bwa-faq-font), sans-serif;
}

.all-faq--container,
.bwa-faq__container {
    display        : flex;
    flex-direction : column;
    gap            : var(--bwa-faq-gap);
    min-height     : 200px;
    position       : relative;
}

/* ==========================================================================
   Categories / Groups Navigation
   ========================================================================== */

.all-faq--categories,
.bwa-faq__categories {
    position         : relative;
    display          : flex;
    flex-wrap        : wrap;
    justify-content  : center;
    align-items      : center;
    gap              : 5px;
    width            : fit-content;
    margin           : 45px auto 35px auto;
    padding          : 9px;
    border           : 1px solid var(--bwa-faq-border);
    border-radius    : 42px;
    background-color : var(--e-global-color-dd41e99, #F5F5F5);
}

.all-faq--categories__item,
.bwa-faq__categories-item {
    font-family   : inherit;
    font-size     : inherit;
    color         : var(--bwa-faq-text);
    position      : relative;
    z-index       : 2;
    padding       : 10px 25px;
    cursor        : pointer;
    transition    : opacity 0.5s ease-out;
    border        : none;
    border-radius : 42px;
    background    : transparent;
    width         : fit-content;
    height        : fit-content;
    margin        : 0;
    text-align    : center;
}

.all-faq--categories__item:hover,
.bwa-faq__categories-item:hover {
    opacity : 0.8;
}

.pagination-slider,
.bwa-faq__categories-slider {
    position         : absolute;
    top              : 9px;
    bottom           : 9px;
    left             : 10px;
    z-index          : 1;
    width            : 0;
    transition       : all 0.4s ease-out;
    border-radius    : 42px;
    background-color : var(--bwa-faq-bg);
    box-shadow       : 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Section (grouped FAQ)
   ========================================================================== */

.category-section,
.bwa-faq__section {
    display        : flex;
    flex-direction : column;
    gap            : var(--bwa-faq-gap);
    margin-bottom  : 20px;
    transition     : opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    opacity        : 1;
    transform      : translateY(0);
}

.category-section.is-hidden,
.bwa-faq__section.is-hidden {
    display : none;
}

.category-section.fade-out,
.bwa-faq__section.fade-out {
    opacity   : 0;
    transform : translateY(20px);
}

.category-section.fade-in,
.bwa-faq__section.fade-in {
    animation : bwaFaqFadeIn 0.3s ease-in-out forwards;
}

@keyframes bwaFaqFadeIn {
    from {
        opacity   : 0;
        transform : translateY(20px);
    }
    to {
        opacity   : 1;
        transform : translateY(0);
    }
}

.category-section .title,
.bwa-faq__section-title {
    font-size   : 35px;
    font-weight : 700;
    line-height : 1.2em;
    color       : var(--bwa-faq-primary);
    margin      : 25px 0 15px 0;
}

.bwa-faq__group-title {
    font-size   : 28px;
    font-weight : 700;
    color       : var(--bwa-faq-primary);
    margin      : 30px 0 15px 0;
}

/* ==========================================================================
   Accordion Style
   ========================================================================== */

.all-faq__wrapper-item,
.bwa-faq--accordion .bwa-faq__item {
    height        : fit-content;
    background    : var(--bwa-faq-bg);
    border-radius : var(--bwa-faq-radius);
}

.all-faq__wrapper-item__title,
.bwa-faq--accordion .bwa-faq__question {
    font-family           : var(--bwa-faq-font), sans-serif;
    font-size             : 17px;
    font-weight           : 500;
    line-height           : normal;
    color                 : var(--bwa-faq-primary);
    text-align            : left;
    letter-spacing        : 0.17px;
    display               : grid;
    align-items           : center;
    gap                   : 20px;
    width                 : 100%;
    padding               : 19px 0 19px 35px;
    cursor                : pointer;
    transition            : background var(--bwa-faq-transition);
    border                : none;
    background            : transparent;
    grid-template-columns : 1fr 50px;
    justify-items         : start;
}

.all-faq__wrapper-item__title:hover,
.all-faq__wrapper-item__title:focus,
.bwa-faq--accordion .bwa-faq__question:hover,
.bwa-faq--accordion .bwa-faq__question:focus {
    outline : none;
}

.all-faq__wrapper-item__title .question {
    color          : var(--bwa-faq-primary);
    font-family    : var(--bwa-faq-font), sans-serif;
    font-size      : 17px;
    font-style     : normal;
    font-weight    : 500;
    line-height    : normal;
    letter-spacing : 0.17px;
    margin         : 0;
}

.bwa-faq--accordion .bwa-faq__question-text {
    display : block;
}

/* Icon & Dropdown CTA */
.dropdown-cta,
.bwa-faq--accordion .bwa-faq__icon {
    color           : var(--bwa-faq-accent);
    display         : flex;
    justify-content : center;
    align-items     : center;
    width           : 32px;
    height          : 32px;
    aspect-ratio    : 1;
    border-radius   : 17px;
}

.dropdown-cta svg,
.bwa-faq--accordion .bwa-faq__icon svg {
    width  : 20px;
    height : 20px;
}

.dropdown-cta svg path,
.bwa-faq--accordion .bwa-faq__icon svg path {
    stroke-dasharray  : 15 15;
    stroke-dashoffset : 0;
    transition        : stroke-dashoffset 0.35s ease-in, opacity 0.5s ease-out;
    transition-delay  : 0.1s;
}

.dropdown-cta svg line,
.bwa-faq--accordion .bwa-faq__icon svg line {
    stroke-dasharray  : 10 10;
    stroke-dashoffset : -10;
    transition        : stroke-dashoffset 0.35s ease-in;
}

/* Active state */
.all-faq__wrapper-item__title.is-active .dropdown-cta svg path,
.bwa-faq--accordion .bwa-faq__item.is-open .bwa-faq__icon svg path {
    stroke-dashoffset : -14;
    transition-delay  : 0s;
}

.all-faq__wrapper-item__title.is-active .dropdown-cta svg line,
.bwa-faq--accordion .bwa-faq__item.is-open .bwa-faq__icon svg line {
    stroke-dashoffset : 0;
    transition-delay  : 0.1s;
}

/* Answer */
.all-faq__wrapper-item__description,
.bwa-faq--accordion .bwa-faq__answer {
    padding     : 0 60px 25px 35px;
    font-weight : 300;
    display     : none;
    overflow    : hidden;
    text-align  : left;
}

.bwa-faq--accordion .bwa-faq__answer {
    max-height : 0;
    transition : max-height 0.35s ease, padding 0.35s ease;
}

.bwa-faq--accordion .bwa-faq__answer[hidden] {
    display : block;
}

.bwa-faq--accordion .bwa-faq__item.is-open .bwa-faq__answer {
    max-height : 2000px;
}

.bwa-faq--accordion .bwa-faq__answer-content {
    font-weight : 300;
    padding     : 25px 60px 25px 35px;
    text-align  : left;
}

/* ==========================================================================
   List Style
   ========================================================================== */

.bwa-faq--list .bwa-faq__list {
    margin  : 0;
    padding : 0;
}

.bwa-faq--list .bwa-faq__list-item {
    margin-bottom : var(--bwa-faq-gap);
    padding       : 20px 30px;
    border-radius : var(--bwa-faq-radius);
    background    : var(--bwa-faq-bg);
}

.bwa-faq--list .bwa-faq__list-question {
    font-size     : 18px;
    font-weight   : 600;
    color         : var(--bwa-faq-primary);
    margin-bottom : 10px;
}

.bwa-faq--list .bwa-faq__list-answer {
    font-weight : 300;
    line-height : 1.6;
    color       : var(--bwa-faq-text);
    text-align  : left;
}

/* ==========================================================================
   Grid Style
   ========================================================================== */

.bwa-faq--grid .bwa-faq__grid {
    display               : grid;
    gap                   : 20px;
    grid-template-columns : repeat(auto-fill, minmax(300px, 1fr));
}

.bwa-faq--grid .bwa-faq__grid-item {
    padding       : 25px;
    transition    : transform 0.3s ease, box-shadow 0.3s ease;
    border-radius : var(--bwa-faq-radius);
    background    : var(--bwa-faq-bg);
    box-shadow    : 0 2px 10px rgba(0, 0, 0, 0.08);
}

.bwa-faq--grid .bwa-faq__grid-item:hover {
    transform  : translateY(-3px);
    box-shadow : 0 5px 20px rgba(0, 0, 0, 0.12);
}

.bwa-faq--grid .bwa-faq__grid-question {
    font-size   : 17px;
    font-weight : 600;
    line-height : 1.4;
    color       : var(--bwa-faq-primary);
    margin      : 0 0 15px 0;
}

.bwa-faq--grid .bwa-faq__grid-answer {
    font-size   : 15px;
    font-weight : 300;
    line-height : 1.6;
    color       : var(--bwa-faq-text);
    text-align  : left;
}

/* ==========================================================================
   Feedback
   ========================================================================== */

.bwa-faq__feedback {
    display     : flex;
    flex-wrap   : wrap;
    align-items : center;
    gap         : 15px;
    margin-top  : 20px;
    padding-top : 15px;
    border-top  : 1px solid var(--bwa-faq-border);
}

.bwa-faq__feedback-label {
    font-size   : 14px;
    color       : #666666;
    display     : block;
    margin-bottom : 10px;
    font-weight : 500;
}

.bwa-faq__feedback-buttons {
    display : flex;
    gap     : 10px;
}

.bwa-faq__feedback-btn {
    font-size     : 14px;
    color         : var(--bwa-faq-text);
    display       : inline-flex;
    align-items   : center;
    gap           : 5px;
    padding       : 8px 16px;
    cursor        : pointer;
    transition    : all 0.3s ease;
    border        : 1px solid var(--bwa-faq-border);
    border-radius : 5px;
    background    : var(--bwa-faq-bg);
}

.bwa-faq__feedback-btn:hover {
    background : #F5F5F5;
}

.bwa-faq__feedback-btn--yes:hover {
    color        : var(--bwa-faq-accent);
    border-color : var(--bwa-faq-accent);
}

.bwa-faq__feedback-btn--no:hover {
    color        : #DC3545;
    border-color : #DC3545;
}

.bwa-faq__feedback-btn svg {
    width  : 20px;
    height : 20px;
}

.bwa-faq__feedback-thanks {
    font-size   : 14px;
    font-weight : 500;
    color       : var(--bwa-faq-accent);
    margin-top  : 10px;
}

.bwa-faq__feedback.is-voted .bwa-faq__feedback-buttons {
    display : none;
}

.bwa-faq__feedback.is-voted .bwa-faq__feedback-thanks {
    display : block !important;
}

/* ==========================================================================
   Search
   ========================================================================== */

.bwa-faq__search {
    position      : relative;
    margin-bottom : 24px;
}

.bwa-faq__search-input {
    font-size        : 16px;
    width            : 100%;
    padding          : 12px 16px;
    transition       : border-color .2s, box-shadow .2s;
    border           : 1px solid #DCDFE8;
    border-radius    : 10px;
    background-color : #FFFFFF;
}

.bwa-faq__search-input:focus {
    border-color : #2B3DD6;
    outline      : none;
    box-shadow   : 0 0 0 2px rgba(43, 61, 214, 0.15);
}

.bwa-faq__no-results {
    font-weight   : 600;
    color         : #2C3374;
    margin-top    : 20px;
    padding       : 16px 20px;
    border        : 1px dashed #B6BCE5;
    border-radius : 10px;
    background    : #F5F6FF;
}

.all-faq__wrapper-item.is-hidden-search,
.bwa-faq__item.is-hidden-search,
.bwa-faq__grid-item.is-hidden-search,
.bwa-faq__list-item.is-hidden-search {
    display : none !important;
}

.category-section.is-empty-search,
.bwa-faq__section.is-empty-search,
.group-section.is-empty-search {
    display : none !important;
}

.screen-reader-text {
    white-space : nowrap;
    position    : absolute;
    overflow    : hidden;
    clip        : rect(0, 0, 0, 0);
    width       : 1px;
    height      : 1px;
    margin      : -1px;
    padding     : 0;
    border      : 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width : 1024px) {
    .all-faq--categories,
    .bwa-faq__categories {
        flex-direction : column;
        width          : auto;
        max-width      : 300px;
    }

    .pagination-slider,
    .bwa-faq__categories-slider {
        left   : 10px !important;
        width  : calc(100% - 20px) !important;
        height : auto;
        bottom : unset;
    }

    .category-section .title,
    .bwa-faq__section-title {
        font-size : 28px;
    }

    .all-faq .all-faq--container {
        grid-template-columns : 1fr;
    }
}

@media (max-width : 767px) {
    .all-faq__wrapper-item__title,
    .bwa-faq--accordion .bwa-faq__question {
        font-size             : 15px;
        gap                   : 10px;
        padding               : 15px 10px 15px 20px;
        grid-template-columns : 1fr 40px;
    }

    .all-faq__wrapper-item__description,
    .bwa-faq--accordion .bwa-faq__answer-content {
        padding : 0 20px 25px 20px;
    }

    .bwa-faq--grid .bwa-faq__grid {
        grid-template-columns : 1fr;
    }

    .bwa-faq__feedback {
        flex-direction : column;
        align-items    : flex-start;
    }

    .category-section .title,
    .bwa-faq__section-title,
    .bwa-faq__group-title {
        font-size : 22px;
    }
}