/* =============================================
   FAQ Widget — Venax Store
   ============================================= */

.faq-widget-wrapper {
    max-width  : 900px;
    margin     : 0 auto;
    padding    : 0px 20px;
}

/* Header */
.faq-widget-header {
    margin-bottom : 32px;
}

.faq-widget-title {
    font-size     : 24px;
    font-weight   : 700;
    color         : #1a1a1a;
    margin-bottom : 8px;
    display       : flex;
    align-items   : center;
    gap           : 10px;
}

.faq-widget-title .arrow-icon {
    color     : #FF7E00;
    font-size : 18px;
}

.faq-widget-subtitle {
    font-size : 15px;
    color     : #666;
    margin    : 0;
}

/* Busca */
.faq-search-wrapper {
    position      : relative;
    margin-bottom : 28px;
}

.faq-search-input {
    width: 100%!important;
    padding: 13px 44px 13px 18px!important;
    border: 2px solid #e0e4f0!important;
    border-radius: 50px!important;
    font-size: 14px!important;
    color         : #333;
    outline       : none;
    transition    : border-color .2s;
    box-sizing    : border-box;
}

.faq-search-input:focus {
    border-color : #1237BB;
}

.faq-search-icon {
    position  : absolute;
    right     : 16px;
    top       : 50%;
    transform : translateY(-50%);
    color     : #999;
}

/* Filtro por categoria */
.faq-category-filter {
    display         : flex;
    flex-wrap       : wrap;
    gap             : 8px;
    margin-bottom   : 32px;
}

.faq-cat-btn {
    padding       : 7px 16px;
    border        : 2px solid #e0e4f0;
    border-radius : 50px;
    background    : #fff;
    font-size     : 13px;
    font-weight   : 600;
    color         : #555;
    cursor        : pointer;
    transition    : all .2s;
    white-space   : nowrap;
}

.faq-cat-btn:hover,
.faq-cat-btn.active {
    background   : #1237BB;
    border-color : #1237BB;
    color        : #fff;
}

/* Grupo de categoria */
.faq-category-group {
    margin-bottom : 36px;
}

.faq-category-title {
    display       : flex;
    align-items   : center;
    gap           : 10px;
    font-size     : 17px;
    font-weight   : 700;
    color         : #1237BB;
    margin-bottom : 14px;
    padding-bottom: 12px;
    border-bottom : 2px solid #e8edf8;
}

.faq-category-icon {
    font-size : 20px;
}

/* FAQ Item */
.faq-item {
    border: 1px solid #e8edf8!important;
    border-radius : 10px;
    margin-bottom : 8px;
    overflow      : hidden;
    transition    : box-shadow .2s;
}

.faq-item:hover {
    box-shadow : 0 2px 10px rgba(18,55,187,.07);
}

/* Pergunta */
.faq-question {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    width           : 100%;
    padding         : 16px 18px;
    background      : #fff;
    border: none!important;
    cursor          : pointer;
    text-align      : left;
    gap             : 12px;
    transition      : background .15s;
}

.faq-question:hover {
    background : #f7f9ff;
}

.faq-item.open .faq-question {
    background : #f0f4ff;
}

.faq-question-text {
    font-size   : 14px;
    font-weight : 600;
    color       : #1a1a1a;
    flex        : 1;
    line-height : 1.4;
}

.faq-item.open .faq-question-text {
    color : #1237BB;
}

/* Ícone +/x */
.faq-toggle-icon {
    width           : 26px;
    height          : 26px;
    border-radius   : 50%;
    background      : #e8edf8;
    display         : flex;
    align-items     : center;
    justify-content : center;
    flex-shrink     : 0;
    transition      : all .25s;
    color           : #555;
}

.faq-item.open .faq-toggle-icon {
    background : #1237BB;
    transform  : rotate(45deg);
    color      : #fff;
}

/* Resposta */
.faq-answer {
    max-height : 0;
    overflow   : hidden;
    transition : max-height .35s ease;
}

.faq-item.open .faq-answer {
    max-height : 2000px;
}

.faq-answer-inner {
    padding     : 4px 18px 18px;
    font-size   : 14px;
    line-height : 1.7;
    color       : #555;
}

.faq-answer-inner a {
    color           : #1237BB;
    text-decoration : underline;
}

/* Nenhum resultado */
.faq-no-results {
    text-align    : center;
    padding       : 32px;
    color         : #999;
    font-size     : 14px;
    border        : 1px dashed #e0e4f0;
    border-radius : 10px;
}

/* Mobile */
@media (max-width: 768px) {
    .faq-widget-title    { font-size: 20px; }
    .faq-question        { padding: 13px 14px; }
    .faq-question-text   { font-size: 13px; }
    .faq-answer-inner    { font-size: 13px; padding: 4px 14px 14px; }
    .faq-category-title  { font-size: 15px; }
    .faq-cat-btn         { font-size: 12px; padding: 6px 12px; }
}
