/* =======================
   Nama FAQ – Premium (Law style)
   ======================= */

:root {
    --ink: #0b1220;
    --muted: rgba(11,18,32,.68);
    --glass: rgba(255,255,255,.72);
    --glass2: rgba(255,255,255,.84);
    --border: rgba(15,23,42,.12);
    --brand: #6d3bf2;
    --brand2: #7c4dff;
    --shadow1: 0 10px 28px rgba(15,23,42,.08);
    --shadow2: 0 22px 70px rgba(15,23,42,.12);
    --r: 36px;
    --r2: 26px;
    --pill: 999px;
}

.faq-page {
    padding: 10px 0 40px
}

.faq-shell {
    border-radius: var(--r);
    overflow: hidden;
    padding: 26px;
    background: radial-gradient(560px 240px at 18% 18%, rgba(124,77,255,.14), transparent 60%), radial-gradient(560px 240px at 86% 78%, rgba(109,59,242,.12), transparent 60%), rgba(255,255,255,.70);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 30px 90px rgba(15,23,42,.10);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.faq-title {
    text-align: center;
    font-size: 30px;
    font-weight: 900;
    margin: 6px 0 26px;
    color: rgba(11, 18, 32, .92);
    letter-spacing: -.2px;
    position: relative;
}
    .faq-title::after {
        content: "";
        display: block;
        width: 90px;
        height: 4px;
        border-radius: 999px;
        margin: 8px auto 0;
        background: #8d70d9;
    }
/* Tabs (pill like khadem-tabs) */
.faq-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 18px;
}

.faq-tab {
    border: 1px solid rgba(15,23,42,.14);
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(10px);
    color: var(--ink);
    border-radius: var(--pill);
    padding: 10px 16px;
    font-weight: 950;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(15,23,42,.06);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

    .faq-tab:hover {
        transform: translateY(-1px);
        box-shadow: 0 18px 46px rgba(15,23,42,.10);
    }

    .faq-tab.active {
        background: linear-gradient(135deg, rgba(109,59,242,.14), rgba(124,77,255,.10));
        outline: none;
        border-color: rgba(15,23,42,.14);
    }

/* List */
#faqList {
    display: grid;
    gap: 14px
}

/* Item = law */
.faq-item {
    border: 1px solid rgba(15,23,42,.12);
    border-radius: var(--r2);
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 40px rgba(15,23,42,.08);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .faq-item:hover {
        transform: translateY(-2px);
        border-color: rgba(109,59,242,.22);
        box-shadow: 0 22px 70px rgba(15,23,42,.12);
    }
    .faq-item:focus,
    .faq-item:focus-visible,
    .faq-item:active {
        outline: none;
        border-color: rgba(15,23,42,0.12);
        box-shadow: 0 14px 40px rgba(15,23,42,.08);
    }

/* Head like law-head */
.faq-head {
    width: 100%;
    border: 0;
    background: linear-gradient(135deg, rgba(109,59,242,.10), rgba(124,77,255,.06));
    padding: 14px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-align: right;
    border-bottom: 1px solid rgba(15,23,42,.10);
}

/* Right side text */
.faq-text {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.faq-num {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 1000;
    color: rgba(11,18,32,.90);
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(15,23,42,.14);
    box-shadow: 0 10px 26px rgba(15,23,42,.08);
    flex: 0 0 auto;
}

.faq-qtext {
    font-weight: 1000;
    color: #0b1220;
    font-size: 15.5px;
    line-height: 1.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* meta + icon */
.faq-meta {
    font-weight: 900;
    font-size: 12.5px;
    color: rgba(11,18,32,.68);
    white-space: nowrap;
}

.faq-ico {
    font-weight: 900;
    opacity: .9;
    transition: transform .16s ease;
    flex: 0 0 auto;
}

/* Body accordion (slide) */
.faq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease;
}

.faq-body-inner {
    padding: 12px 14px 14px;
    color: rgba(11,18,32,.75);
    line-height: 2;
    font-size: 13.8px;
    font-weight: 750;
    background: rgba(255,255,255,.60);
}

/* Open state */
.faq-item.open .faq-ico {
    transform: rotate(180deg);
}

.faq-item.open .faq-qtext {
    white-space: normal;
}

/* Ask form – premium like ask-card */
.ask-title {
    font-size: 20px;
    font-weight: 1000;
    color: rgba(11,18,32,.86);
    margin: 22px 2px 14px;
}

.ask-form {
    border-radius: 28px;
    background: rgba(255,255,255,.60);
    border: 1px solid rgba(15,23,42,.10);
    box-shadow: 0 22px 70px rgba(15,23,42,.08);
    padding: 18px;
}

    /* bootstrap inputs tweak */
    .ask-form .form-control {
        border-radius: 18px !important;
        background: rgba(255,255,255,.72) !important;
        border: 1px solid rgba(15,23,42,.10) !important;
        box-shadow: 0 10px 28px rgba(15,23,42,.06) !important;
        font-weight: 800;
        color: rgba(11,18,32,.82);
        padding: 12px 14px !important;
        outline: none !important;
        transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

        .ask-form .form-control:focus {
            border-color: rgba(124,77,255,.35) !important;
            box-shadow: 0 18px 40px rgba(124,77,255,.14) !important;
            transform: translateY(-1px);
        }

    /* submit button */
    .ask-form .btn {
        border-radius: var(--pill) !important;
        font-weight: 1000 !important;
    }

        .ask-form .btn.btn-outline-primary {
            border: 1px solid rgba(15,23,42,.14) !important;
            background: rgba(255,255,255,.72) !important;
            color: var(--ink) !important;
            box-shadow: 0 10px 28px rgba(15,23,42,.06) !important;
        }

            .ask-form .btn.btn-outline-primary:hover {
                transform: translateY(-1px);
                background: rgba(109,59,242,.08) !important;
                border-color: rgba(109,59,242,.22) !important;
                box-shadow: 0 18px 46px rgba(15,23,42,.10) !important;
            }

@media(max-width:700px) {
    .faq-qtext {
        white-space: normal
    }

    .faq-head {
        flex-wrap: wrap;
        gap: 8px
    }

    .faq-meta {
        order: 3;
        width: 100%;
        text-align: right
    }
}
/* همون باکس قبلی، فقط وقتی عکس داریم بک‌گراند می‌گیرد */
.khadem-d-img.has-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    /* اسپن قبلی روی عکس هم خوانا بماند */
    .khadem-d-img.has-img span {
        background: rgba(0,0,0,.35);
        backdrop-filter: blur(4px);
        padding: .35rem .6rem;
        border-radius: 999px;
    }

/* دکمه غیرفعال مثل قبل (اگر فایل نبود) */
.khadem-btn.is-disabled {
    pointer-events: none;
    opacity: .45;
}
.nama-faq {
    margin-top: 42px;
    margin-bottom: 10px;
}

.faq-card {
    border-radius: 36px;
    overflow: hidden;
    padding: 26px;
    background: radial-gradient(560px 240px at 18% 18%, rgba(124, 77, 255, 0.14), transparent 60%), radial-gradient(560px 240px at 86% 78%, rgba(109, 59, 242, 0.12), transparent 60%), rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 20px;
    align-items: stretch;
}

.ask-card, .faq-panel {
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: 0 22px 70px rgba(15, 23, 42, 0.08);
    padding: 18px;
}

.ask-title, .faq-title {
    font-size: 20px;
    font-weight: 900;
    color: rgba(11, 18, 32, 0.86);
    margin: 2px 2px 14px;
}

.ask-form {
    display: grid;
    gap: 12px;
}

.form-rowx {
    display: grid;
    gap: 8px;
}

.form-labelx {
    font-weight: 900;
    color: rgba(11, 18, 32, 0.78);
    font-size: 14px;
}

.form-controlx {
    width: 100%;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    outline: none;
    font-weight: 800;
    color: rgba(11, 18, 32, 0.82);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

    .form-controlx:focus {
        border-color: rgba(124, 77, 255, 0.35);
        box-shadow: 0 18px 40px rgba(124, 77, 255, 0.14);
        transform: translateY(-1px);
    }

    .form-controlx.textarea {
        resize: vertical;
        min-height: 170px;
    }

.ask-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    margin-top: 6px;
}

.btn-soft {
    background: rgba(255, 255, 255, 0.65);
}

.btn-primaryy {
    color: #fff !important;
    border: 0;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    box-shadow: 0 22px 60px rgba(124, 77, 255, 0.26);
}

    .btn-primaryy:hover {
        filter: brightness(1.03);
        box-shadow: 0 30px 78px rgba(124, 77, 255, 0.32);
    }

.faq-list {
    display: grid;
    gap: 20px;
}

.faq-item {
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.7);
    overflow: hidden;
}
    .faq-item:focus,
    .faq-item:focus-visible,
    .faq-item:active {
        outline: none;
        border-color: rgba(15,23,42,0.12);
        box-shadow: 0 14px 40px rgba(15,23,42,.08);
    }
.faq-q {
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-weight: 900;
    color: rgba(11, 18, 32, 0.82);
    text-align: right;
}

.faq-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.faq-plus {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
}

.faq-a {
    padding: 0 14px 14px;
    color: rgba(11, 18, 32, 0.68);
    font-weight: 700;
    line-height: 1.9;
}

@media (max-width: 992px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }
}


.faq-item,
.faq-item:focus,
.faq-item:focus-visible,
.faq-item:active,
.faq-item:visited {
    outline: none !important;
    border-color: rgba(15,23,42,0.12) !important;
    box-shadow: 0 14px 40px rgba(15,23,42,.08) !important;
}


.faq-head,
.faq-head:focus,
.faq-head:focus-visible,
.faq-head:active {
    outline: none !important;
}

.faq-tab,
.faq-tab:focus,
.faq-tab:focus-visible,
.faq-tab:active {
    outline: none !important;
}

.faqEmpty {
    border-color: #e2bb33;
    background-color: white !important;
    color: #522474;
}