/*==========================================================
    FAQ PREVIEW SECTION — نورای
    استایل کامل بخش سوالات متداول (دسته‌بندی + آکاردئون)

    وابستگی‌ها (باید قبل از این فایل لود بشن):
    - variables.css   → رنگ‌ها، فونت‌ها، radius، shadow
    - responsive.css  → --container-md, --space-inline, .container
    - buttons.css     → --button-height, --btn-font-size (برای .faq-button)

    breakpoint های استفاده‌شده (مطابق مستندات responsive.css):
    --bp-lg : 992px   → گرید ۲ دسته در هر ردیف به ۱ ستون
    --bp-md : 768px   → فشرده‌سازی فاصله‌ها
    --bp-sm : 576px   → موبایل
==========================================================*/


.faq-preview{

    position:relative;

    padding:var(--section-space) clamp(20px,5vw,70px);


    overflow:hidden;

}


.faq-container{

    max-width:var(--container-md);

    margin:auto;

}


/*==========================================================
    HEADER (بدون تغییر نسبت به نسخه قبلی سایت)
==========================================================*/

.faq-header{

    text-align:center;

    max-width:768px;

    margin:0 auto clamp(36px,5vw,56px);

}


.section-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:var(--radius-round);

    background:rgba(var(--accent-strong-rgb),.1);

    color:var(--accent-strong);

    font-family:var(--font-body);

    font-size:var(--font-size-tag);

    font-weight:var(--heading-weight);

    margin-bottom:18px;

}


.faq-header h2{

    font-family:var(--font-heading);

    font-size:clamp(28px,3vw,42px);

    font-weight:var(--title-weight);

    color:var(--text);

    margin-bottom:16px;

    line-height:1.3;

}


.faq-header p{

    font-family:var(--font-body);

    font-weight:var(--body-weight);

    color:var(--text-light);

    font-size:clamp(15px,1.2vw,18px);

    line-height:1.8;

}


/*==========================================================
    QUICK NAV
    نوار پرش سریع بین دسته‌ها — چیپ‌های قابل کلیک که با
    اسکرول نرم به همون دسته می‌رن (scroll-margin-top روی
    .faq-category تنظیم شده تا زیر هدر چسبیده گم نشه).
==========================================================*/

.faq-nav{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:10px;

    margin-bottom:clamp(36px,5vw,56px);

}


.faq-nav-link{

    display:inline-flex;

    align-items:center;

    padding:9px 20px;

    border-radius:var(--radius-round);

    background:var(--surface-alt);

    border:1px solid var(--border);

    color:var(--text-light);

    font-family:var(--font-body);

    font-size:.88rem;

    font-weight:var(--heading-weight);

    text-decoration:none;

    transition:var(--transition);

    white-space:nowrap;

}


.faq-nav-link:hover,
.faq-nav-link:focus-visible{

    background:var(--primary);

    border-color:var(--primary);

    color:rgb(var(--white-rgb));

    transform:translateY(-2px);

}


.faq-nav-link:focus-visible{

    outline:none;

    box-shadow:0 0 0 4px rgba(var(--accent-strong-rgb),.22);

}


/*==========================================================
    CATEGORIES GRID
    دو ستون در دسکتاپ (align-items:start چون ارتفاع دسته‌ها
    به‌خاطر تعداد متفاوت سوالات یکسان نیست)، یک ستون در تبلت/موبایل.
==========================================================*/

.faq-categories{

    display:grid;

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

    align-items:start;

    gap:clamp(22px,3vw,32px);

}


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

.faq-category{

    background:var(--background);

    border:1px solid var(--glass-border);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

    padding:clamp(24px,3vw,32px);

    transition:box-shadow var(--transition), transform var(--transition);

    scroll-margin-top:110px;

}


.faq-category:hover{

    box-shadow:var(--shadow-md);

}


.faq-category-head{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:22px;

    padding-bottom:22px;

    border-bottom:1px solid var(--border);

}


.faq-category-icon{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:52px;

    height:52px;

    border-radius:var(--radius-md);

    background:rgba(var(--primary-rgb),.08);

    color:var(--primary);

}


.faq-category-icon svg{

    width:24px;

    height:24px;

}


.faq-category-titles h3{

    font-family:var(--font-heading);

    font-size:1.08rem;

    font-weight:var(--font-weight-h3);

    color:var(--text);

    margin-bottom:4px;

    line-height:1.4;

}


.faq-category-count{

    font-family:var(--font-body);

    font-size:.82rem;

    font-weight:var(--body-weight);

    color:var(--text-muted);

}


/*==========================================================
    ACCORDION — سوالات
==========================================================*/

.faq-accordion{

    display:flex;

    flex-direction:column;

}


.faq-item{

    border-bottom:1px solid var(--border);

}


.faq-more-inner > .faq-item:last-child,
.faq-accordion > .faq-item:only-child{

    border-bottom:none;

}


/* سوال (دکمه) */

.faq-question{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

    padding:16px 2px;

    background:none;

    border:none;

    cursor:pointer;

    text-align:right;

    font-family:var(--font-body);

    font-size:.96rem;

    font-weight:var(--heading-weight);

    color:var(--text);

    transition:color var(--transition);

}


.faq-question:hover{

    color:var(--primary);

}


.faq-question:focus-visible{

    outline:none;

    box-shadow:0 0 0 3px rgba(var(--accent-strong-rgb),.22);

    border-radius:var(--radius-sm);

}


.faq-q-wrap{

    margin:0;

    font-weight:inherit;

}


/* شورون */

.faq-chevron{

    flex-shrink:0;

    width:18px;

    height:18px;

    fill:none;

    stroke:currentColor;

    stroke-width:2;

    stroke-linecap:round;

    stroke-linejoin:round;

    color:var(--text-muted);

    transition:transform var(--transition), color var(--transition);

}


.faq-question[aria-expanded="true"] .faq-chevron{

    color:var(--primary);

    transform:rotate(180deg);

}


/* پاسخ — انیمیشن با ترفند grid-template-rows (بدون نیاز به
   محاسبه ارتفاع در JS) */

.faq-answer{

    display:grid;

    grid-template-rows:0fr;

    transition:grid-template-rows .32s ease;

}


.faq-answer.is-open{

    grid-template-rows:1fr;

}


.faq-answer-inner{

    overflow:hidden;

    min-height:0;

}


.faq-answer-inner p{

    font-family:var(--font-body);

    font-weight:var(--body-weight);

    color:var(--text-muted);

    font-size:.92rem;

    line-height:1.9;

    padding:0 2px 18px;

}


/*==========================================================
    "بیشتر" — بلوک سوالات اضافه هر دسته
    همون ترفند grid-rows برای باز/بسته شدن نرم استفاده شده.
==========================================================*/

.faq-more{

    display:grid;

    grid-template-rows:0fr;

    transition:grid-template-rows .38s ease;

}


.faq-more.is-open{

    grid-template-rows:1fr;

}


.faq-more-inner{

    overflow:hidden;

    min-height:0;

}


/*==========================================================
    دکمه «مشاهده سوالات بیشتر»
==========================================================*/

.faq-toggle-more{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:100%;

    margin-top:14px;

    padding:12px;

    background:var(--surface-alt);

    border:1px dashed var(--border);

    border-radius:var(--radius-md);

    cursor:pointer;

    font-family:var(--font-body);

    font-size:.86rem;

    font-weight:var(--heading-weight);

    color:var(--primary);

    transition:var(--transition);

}


.faq-toggle-more:hover{

    background:rgba(var(--primary-rgb),.08);

    border-color:var(--primary-light);

}


.faq-toggle-more:focus-visible{

    outline:none;

    box-shadow:0 0 0 4px rgba(var(--accent-strong-rgb),.22);

}


.faq-toggle-more .faq-chevron{

    color:var(--primary);

    transition:transform var(--transition);

}


.faq-toggle-more[aria-expanded="true"] .faq-chevron{

    transform:rotate(180deg);

}


/* دسته‌های کوچک (مثل «نگهداری دستگاه» با ۳ سوال) وقتی همه‌ی
   سوالات‌شون باز شده دیگه به دکمه نیازی ندارن — با JS کلاس
   is-hidden بهش اضافه می‌شه؛ این‌جا فقط ترنزیشن تعریف می‌شه. */

.faq-toggle-more.is-hidden{

    display:none;

}


/*==========================================================
    TRUST BAR (بدون تغییر نسبت به نسخه قبلی)
==========================================================*/

.faq-trust{

    margin-top:clamp(45px,6vw,70px);

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    padding:25px;

    background:var(--background);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

}


.faq-trust div{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-family:var(--font-body);

    font-weight:var(--body-weight);

    color:var(--text-light);

    font-size:var(--font-size-p);

}


.faq-trust strong{

    color:var(--success);

    font-size:20px;

}


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

.faq-action{

    text-align:center;

    margin-top:45px;

}


.faq-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:var(--button-height);

    padding:0 38px;

    border-radius:var(--radius-round);

    background:var(--primary);

    color:rgb(var(--white-rgb));

    text-decoration:none;

    font-family:var(--font-body);

    font-size:var(--btn-font-size);

    font-weight:var(--heading-weight);

    transition:var(--transition);

}


.faq-button:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}


.faq-action-note{

    margin-top:16px;

    font-family:var(--font-body);

    font-size:.86rem;

    color:var(--text-muted);

}


.faq-action-note a{

    color:var(--primary);

    font-weight:var(--heading-weight);

    text-decoration:none;

}


.faq-action-note a:hover{

    text-decoration:underline;

}


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

@media(max-width:992px){

    .faq-categories{

        grid-template-columns:1fr;

    }

}


@media(max-width:768px){

    .faq-preview{

        padding-top:70px;

    }

    .faq-nav{

        flex-wrap:nowrap;

        justify-content:flex-start;

        overflow-x:auto;

        -webkit-overflow-scrolling:touch;

        padding-bottom:6px;

        margin-inline:calc(-1 * clamp(20px,5vw,70px));

        padding-inline:clamp(20px,5vw,70px);

    }

    .faq-nav-link{

        flex-shrink:0;

    }

    .faq-category{

        padding:22px;

    }

}


@media(max-width:576px){

    .faq-category-head{

        gap:12px;

    }

    .faq-category-icon{

        width:44px;

        height:44px;

    }

    .faq-category-icon svg{

        width:20px;

        height:20px;

    }

    .faq-question{

        font-size:.92rem;

    }

}


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

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

    .faq-answer,
    .faq-more,
    .faq-chevron,
    .faq-category,
    .faq-nav-link,
    .faq-toggle-more,
    .faq-button{

        transition:none !important;

    }

}