/* ====================== FeatureRequest Index Page Styles (START) ====================== */

.header-filter-table {
    direction: ltr !important;
    position: relative;
}

    .header-filter-table a[href="/dashboard/feature/create"] {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }

.chip-button {
    background-color: #fff; /* پس‌زمینه سفید */
    border: 1px solid #E5E7EB; /* حاشیه‌ی خاکستری روشن (مثل #ddd) */
    border-radius: 4px; /* گوشه‌های گرد */
    padding: 8px 12px; /* فضای داخلی متناسب */
    width: 100%;
    height: 40px;
    font-size: 12px;
    font-weight: 500;
    color: #111827;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    transition: all 0.2s ease-in-out;
}

    .chip-button:hover {
        border-color: #D1D5DB;
        background-color: #F9FAFB;
    }

    .chip-button:focus {
        outline: none;
        border-color: #93C5FD;
        box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
    }

    .chip-button.active {
        background-color: #F3F4F6;
        border-color: #D1D5DB;
        font-weight: 600;
    }

/* ویجت‌های آماری (لیست فیچرریکوئست) */
.stat-chip {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 8px 10px;
    width: 44px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: all 0.15s ease-in-out;
    text-decoration: none;
}

    .stat-chip:hover {
        background: #F3F4F6;
        border-color: #D1D5DB;
    }

    .stat-chip img {
        opacity: 0.75;
        transition: opacity 0.15s ease-in-out;
    }

    .stat-chip:hover img {
        opacity: 1;
    }

    .stat-chip span {
        font-weight: 600;
        font-size: 14px;
        line-height: 1;
    }

    /* رأی‌گیری در لیست */
    .stat-chip.vote-chip {
        color: #6B7280;
    }

        .stat-chip.vote-chip span {
            color: inherit;
        }

        .stat-chip.vote-chip.voted {
            background: #EFF6FF;
            color: #2166AE !important;
        }

        .stat-chip.vote-chip:not(.voted):hover {
            border-color: #D1D5DB;
            background: #F3F4F6;
        }

.vote-chip {
    color: #6B7280;
}

    .vote-chip span {
        color: inherit;
    }

    .vote-chip.voted {
        border-color: #E5E7EB;
        background: #EFF6FF;
        color: #1D4ED8 !important;
    }

        .vote-chip.voted .vote-caret {
            opacity: 1;
        }

/* ویجت کامنت در لیست */
.comment-widget {
    color: #374151;
    font-weight: 600;
    font-size: 14px;
    transition: color 0.15s ease-in-out, stroke 0.15s ease-in-out;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    padding: 0;
}

    .comment-widget .comment-icon {
        opacity: 0.75;
        transition: opacity 0.15s ease-in-out, stroke 0.15s ease-in-out;
    }

    .comment-widget:hover .comment-icon {
        opacity: 1;
    }

    .comment-widget .comment-count {
        margin-inline-start: 4px;
        line-height: 1;
        color: inherit;
    }

    .comment-widget.commented .comment-icon path {
        stroke: #1D4ED8;
    }

    .comment-widget:not(.commented) .comment-icon path {
        stroke: #4F4F4F;
    }

/* وضعیت‌ها (در هر دو صفحه استفاده می‌شود) */
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    border: 1px solid transparent;
    user-select: none;
    white-space: nowrap;
}

.status--underreview {
    background: #E1F1FF;
    border-radius: 4px;
    color: #2166AE;
}

.status--inprogress {
    background: rgba(39, 174, 96, 0.1);
    border-radius: 4px;
    color: #219653;
}

.status--completed {
    background: #F3ECD7;
    border-radius: 4px;
    color: #A27C09;
}

.status--rejected {
    background: rgba(210, 43, 43, 0.1);
    border-radius: 4px;
    color: #D22B2B;
}

.status--planing {
    background: rgba(255, 97, 54, 0.15);
    border-radius: 4px;
    color: #FF6136;
}

.product-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    border: 1px solid transparent;
    user-select: none;
    white-space: nowrap;
}

/* اوج */
.product--owj {
    background: rgba(128, 0, 255, 0.1); /* بنفش روشن */
    color: #8000FF; /* بنفش */
}

/* پیامک */
.product--payamak {
    background: rgba(255, 140, 0, 0.15); /* نارنجی روشن */
    color: #FF8C00; /* نارنجی */
}

/* آوانک */
.product--avanak {
    background: rgba(0, 112, 243, 0.15); /* آبی روشن */
    color: #0070F3; /* آبی */
}

/* آلاوان */
.product--alavan {
    background: rgba(255, 0, 128, 0.15); /* صورتی روشن */
    color: #FF0080; /* صورتی */
}

/* سایدبار لیست */
.sidebar-card {
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

.sidebar-item {
    display: block;
    padding: .5rem .25rem;
    border-radius: .5rem;
    color: #111827;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

    .sidebar-item:hover {
        background: #F9FAFB;
    }

    .sidebar-item.active {
        font-weight: 700;
        color: #0F172A;
        background: #F1F5F9;
    }

.count-badge {
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    color: #6B7280;
    border-radius: 8px;
    padding: 0 .4rem;
    font-size: .75rem;
    line-height: 1.6;
}

/* لینک «موارد بیشتر…» در انتهای دسته‌بندی‌ها */
.sidebar-more {
    margin-top: .5rem;
    color: #6B7280;
    text-decoration: none;
    transition: color .15s ease;
}

    .sidebar-more:hover {
        color: #2563EB;
    }

    .sidebar-more .chev {
        color: currentColor;
        transition: transform .2s ease;
    }

    .sidebar-more:not(.collapsed) .chev {
        transform: rotate(180deg);
    }

/* دراپ‌داون استاتوس (نمایش همه / انجام شده / …) در لیست */
#customDropdown {
    border: none;
    border-radius: 4px;
    box-shadow: 0 0 7px 0 #ddd;
}

.custom-dropdown-wrapper {
    position: relative;
    display: inline-block;
    direction: rtl;
    width: 100%;
}

.dropdown-toggle-btn {
    background: white;
    border: 1px solid #e0e0e0;
    padding: 8px 12px;
    border-radius: 4px;
    width: 100%;
    height: 40px;
    text-align: right;
    cursor: pointer;
}

    .dropdown-toggle-btn img {
        transition: transform 0.3s ease;
    }

    .dropdown-toggle-btn.active img {
        transform: rotate(180deg);
    }

.custom-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    margin-top: 5px;
    z-index: 1;
    width: 100%;
}

.dropdown-toggle-btn.active {
    border-color: #2166AE;
    color: #2166AE;
}

.dropdown-text {
    font-size: 12px;
}

.custom-dropdown-menu .dropdown-item {
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border: none;
    justify-content: start;
}

.dropdown-item:hover {
    background-color: #f5f5f5;
}

/* باکس پشتیبانی (SupportBox) – در چند صفحه تکرار می‌شود */
section#end-support-action .icon-box {
    background: #FFF;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.12);
    padding: 20px;
    width: 48%;
}

section#end-support-action {
    padding: 50px 12px;
}

    section#end-support-action .icon-box span:nth-child(1) {
        color: #131313;
        text-align: center;
        font-size: 16px;
        font-weight: 800;
        margin-bottom: 13px;
    }

    section#end-support-action .icon-box span:nth-child(2) {
        color: #131313;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 18px;
    }

    section#end-support-action .icon-box a {
        color: #2166AE;
        font-size: 20px;
        font-style: normal;
        font-weight: 800;
        text-align: center;
    }

        section#end-support-action .icon-box a.amoot-btn {
            color: #fff;
            font-size: 14px;
            padding: 12px 18px;
            display: inline-block;
            margin: 0 auto;
            font-weight: 500;
            border-radius: 4px;
        }

/* دکمه‌ها و سرچ‌بار هدر لیست */
.header-filter-table .search-container {
    direction: rtl;
    min-width: 280px !important;
    max-width: 100% !important;
    position: relative !important;
}

    .header-filter-table .search-container input {
        width: 100%;
        height: 40px;
        padding-right: 32px;
        font-size: 12px;
    }

    .header-filter-table .search-container i {
        position: absolute;
        top: 12px;
        right: 10px;
    }

    .header-filter-table .search-container button {
        position: absolute;
        top: 12px;
        left: 10px;
        outline: none !important;
        background: none !important;
        box-shadow: none;
        border: none;
        font-size: 12px;
        color: #2166AE;
    }

/* دکمه‌های عمومی داشبورد */
.db-btn {
    border-radius: 4px;
    cursor: pointer;
    border: none;
    font-size: 12px;
}

.db-btn-primary {
    background-color: #2166ae;
    color: #fff;
}

    .db-btn-primary:hover {
        background-color: #2166aee7;
        color: #fff;
    }

.db-btn-sm {
    padding: 4px 8px;
}

.db-btn-md {
    padding: 8px 16px;
}

/* فقط صفحه لیست فیچرریکوئست */
.page-feature-request .filter-btn {
    padding: 2px;
    gap: 8px;
    background: #F2F2F2;
    border-radius: 8px;
    border: none;
}

.page-feature-request .search-container {
    min-width: 280px;
    max-width: 100%;
    position: relative;
}

    .page-feature-request .search-container input {
        width: 100%;
        height: 40px;
        padding-right: 32px;
        font-size: 12px;
    }

    .page-feature-request .search-container i {
        position: absolute;
        top: 12px;
        right: 10px;
    }

    .page-feature-request .search-container button {
        position: absolute;
        top: 12px;
        left: 10px;
        outline: none !important;
        background: none !important;
        box-shadow: none;
        border: none;
        font-size: 12px;
        color: #2166AE;
    }

.page-feature-request .card-description {
    font-style: normal;
    font-weight: 325;
    font-size: 12px;
    line-height: 200%;
    text-align: right;
    color: #4F4F4F;
}

.page-feature-request .card-info {
    font-style: normal;
    font-weight: 450;
    font-size: 12px;
    line-height: 200%;
    text-align: right;
    color: #2166AE;
}

/* فقط صفحه لیست فیچرریکوئست */
.page-feature-request .filter-bar-wrapper {
    position: relative;
}

/* پنل فیلتر */
.page-feature-request .filter-panel {
    top: 100%;
    right: 0;
    left: 0;
    z-index: 10;
}

/* قرار دادن عنوان + status + product در یک ردیف مشترک */
.page-feature-request .fr-card .d-flex.justify-content-between.align-items-start.mb-2 {
    flex-wrap: nowrap !important; /* همه در یک ردیف */
    justify-content: flex-start !important; /* شروع از سمت راست (در RTL = کنار هم) */
    gap: 6px; /* فاصله مناسب بین آیتم‌ها */
}


    .page-feature-request .fr-card .d-flex.justify-content-between.align-items-start.mb-2 form {
        flex: 1 1 auto !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

/* ترتیب badgeها — کنار عنوان */
.page-feature-request .fr-card .product-badge {
    order: 2;
}

.page-feature-request .fr-card .status-badge {
    order: 3;
}

/* کوتاه‌سازی عنوان */
.page-feature-request .fr-card .d-flex.justify-content-between.align-items-start.mb-2 form button {
    display: inline-block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    vertical-align: middle;
}

/* در موبایل، پنل فیلتر زیر ردیف اصلی قرار بگیرد */
@media (max-width: 767.98px) {
    .page-feature-request .filter-panel {
        position: static;
        margin-top: .75rem;
    }
}

/* ریسپانسیو هدر فیلترهای لیست */
@media (max-width: 767.98px) {
    .header-filter-table {
        flex-wrap: wrap;
    }

        .header-filter-table .col-auto {
            flex: 0 0 100%;
        }

        .header-filter-table .search-container {
            max-width: 100% !important;
            width: 100%;
        }

        /* دکمه "پیشنهاد ویژگی جدید" در موبایل تمام‌عرض شود */
        .header-filter-table a[href="/dashboard/feature/create"] {
            position: static !important;
            top: auto !important;
            right: auto !important;
            transform: none !important;
            flex: 0 0 100%;
            width: 100%;
            order: 99;
            margin-top: .5rem;
            justify-content: center !important;
        }

        /* === سه کنترل "نمایش همه / جدیدترین / محبوب‌ترین" در یک ردیف === */
        .header-filter-table .col-auto:nth-child(2),
        .header-filter-table .col-auto:nth-child(3),
        .header-filter-table .col-auto:nth-child(4) {
            flex: 1 1 calc(33.333% - 0.5rem);
            max-width: calc(33.333% - 0.5rem);
        }

            .header-filter-table .col-auto:nth-child(2) .dropdown-toggle-btn,
            .header-filter-table .col-auto:nth-child(3) .chip-button,
            .header-filter-table .col-auto:nth-child(4) .chip-button {
                width: 100%;
            }
}

/* فونت سه دکمه فیلتر در موبایل‌های خیلی کوچک */
@media (max-width: 374.98px) {
    .header-filter-table .col-auto:nth-child(2) .dropdown-toggle-btn,
    .header-filter-table .col-auto:nth-child(3) .chip-button,
    .header-filter-table .col-auto:nth-child(4) .chip-button {
        font-size: 10px;
    }
}

/* تیتر کارت‌ها در لیست – در موبایل */
@media (max-width: 767.98px) {
    .text-decoration-none.fw-bold {
        font-size: 16px !important;
    }
}

/* چیدمان بالای صفحه لیست در موبایل */
@media (max-width: 767.98px) {
    .page-feature-request .stack-mobile {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem;
        width: 100%;
    }

        .page-feature-request .stack-mobile > * {
            width: 100% !important;
        }

        .page-feature-request .stack-mobile.mb-4 {
            margin-bottom: .5rem !important;
        }

    .page-feature-request .create-btn {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        text-align: center !important;
        padding: .375rem .75rem !important;
        height: 38px !important;
        border-radius: .375rem !important;
    }

        .page-feature-request .create-btn span {
            text-align: center !important;
            margin: 0 !important;
        }

        .page-feature-request .create-btn svg {
            display: inline-block !important;
            position: static !important;
            margin: 0 !important;
        }

    .page-feature-request .search-container {
        max-width: 100% !important;
        width: 100% !important;
    }

    .page-feature-request .display-filter-row {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center;
        width: 100% !important;
        gap: 0.5rem;
    }

        .page-feature-request .display-filter-row .dropdown-fluid,
        .page-feature-request .display-filter-row .col-auto:first-child {
            order: 0;
        }

        .page-feature-request .display-filter-row .filter-btn {
            order: 1;
            margin-inline-start: auto !important;
        }

    .page-feature-request .db-page-title {
        text-align: center;
        width: 100%;
        margin-top: 25px;
        margin-bottom: 20px;
    }

    .dropdown-fluid {
        width: auto !important; /* عرض کشسان */
        flex: 1 !important; /* تمام فضای ممکن را بگیرد */
    }

    .fr-details-link {
        font-size: 12px !important;
    }
}

/* در موبایل، باکس‌های پشتیبانی زیر هم و تمام‌عرض (برای هر صفحه‌ای که استفاده شود) */
@media (max-width: 767.98px) {
    #end-support-action .d-flex.sm-wrap {
        flex-direction: column !important;
        gap: 16px;
    }

    #end-support-action .icon-box {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center;
    }
}

/* فقط موبایل */
@media (max-width: 991.98px) {

    /* دکمه بالای لیست دسته‌بندی‌ها شبیه dropdown-toggle-btn شود */
    #page-feature-request-main .sidebar-card .db-btn.w-100.d-lg-none {
        background: #fff;
        border: 1px solid #e0e0e0;
        padding-top: 4px;
        padding-right: 8px !important;
        padding-left: 8px !important;
        padding-bottom: 4px;
        border-radius: 4px;
        height: 40px;
        text-align: right;
        cursor: pointer;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) !important;
        color: #333;
    }

        #page-feature-request-main .sidebar-card .db-btn.w-100.d-lg-none:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(33, 102, 174, 0.25);
        }

    #page-feature-request-main #mobileCategories {
        position: relative;
        margin-top: 8px;
    }

        #page-feature-request-main #mobileCategories nav {
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
            margin-top: 5px;
            width: 100%;
            overflow: hidden;
        }


        #page-feature-request-main #mobileCategories .sidebar-item {
            padding: 10px 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            border: none;
            border-bottom: 1px solid #f5f5f5;
            font-size: 12px;
            color: #333;
        }

            #page-feature-request-main #mobileCategories .sidebar-item:last-child {
                border-bottom: none;
            }

            #page-feature-request-main #mobileCategories .sidebar-item:hover {
                background-color: #f5f5f5;
            }

            #page-feature-request-main #mobileCategories .sidebar-item.active {
                background-color: #fff;
                color: #2166AE;
                font-weight: 600;
            }

    #page-feature-request-main .sidebar-card {
        border: none !important;
        padding-top: 8px !important;
        padding-bottom: 0px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        background: transparent !important;
    }

    .sidebar-more span {
        font-size: 12px !important;
    }
}

@media (max-width: 991.98px) {
    #page-feature-request-main .border-top.border-2.border-light-subtle {
        display: none !important;
    }
}


@media (max-width: 767.98px) {

    .header-filter-table a[href="/dashboard/feature/create"],
    #page-feature-request-main .sidebar-card .db-btn.w-100.d-lg-none {
        width: 100% !important;
        height: 40px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box;
    }
}

@media (max-width: 767.98px) {
    /* جلوگیری از ایجاد فاصله اضافی */
    .header-filter-table {
        gap: 8px !important; /* کاملاً یکدست */
    }

        .header-filter-table .col-auto:nth-child(2),
        .header-filter-table .col-auto:nth-child(3),
        .header-filter-table .col-auto:nth-child(4) {
            flex: 0 0 calc((100% - 1rem) / 3) !important;
            max-width: calc((100% - 1rem) / 3) !important;
            padding: 0 !important;
            margin: 0 !important;
        }

            .header-filter-table .col-auto:nth-child(2) .dropdown-toggle-btn,
            .header-filter-table .col-auto:nth-child(3) .chip-button,
            .header-filter-table .col-auto:nth-child(4) .chip-button {
                width: 100% !important;
                box-sizing: border-box;
            }
}

/* ====================== FeatureRequest Index Page Styles (END) ====================== */


/* ====================== FeatureRequest Info Page Styles (START) ====================== */

/* عنوان و توضیحات فیچر در صفحه info */
.title-label {
    font-style: normal;
    font-weight: 450;
    font-size: 20px;
    line-height: 36px;
    text-align: right;
    color: #131313;
}

.description-text {
    font-style: normal;
    font-weight: 325;
    font-size: 12px;
    line-height: 200%;
    text-align: right;
    color: #4F4F4F;
}

/* ردیف عنوان و وضعیت */
.title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* کارت اصلی صفحه info */
.card-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 24px;
    background: #F8F9FC;
    position: relative;
}

    /* اجازه‌ی شکست چیدمان داخلی کارت (برای vote در زیر متن) */
    .card-container .d-flex {
        flex-wrap: wrap;
    }

        /* vote در صفحه info زیر توضیحات قرار می‌گیرد */
        .card-container .d-flex > .vote {
            order: 3;
            flex: 0 0 100%;
            width: 100%;
        }

/* آواتار کاربر ایجادکننده */
.progress-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: conic-gradient(#4caf50 calc(var(--p) * 1%), #e0e0e0 0);
    padding: 3px;
    display: grid;
    place-items: center;
}

    .progress-circle img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover !important;
    }

/* باکس اطلاعات کاربر در بالا */
.user-info-box {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    margin-bottom: 25px;
    margin-top: 40px;
}

/* خلاصه اطلاعات کاربر (نام و …) */
.user-info-summery {
    order: 1;
}

    .user-info-summery p {
        margin: 0;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 5px;
    }

/* کارت info در عرض‌های بزرگ تا انتها کشیده شود */
.card-container {
    align-items: stretch !important;
}

/* باکس رأی در صفحه info */
.vote {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0px !important;
    gap: 16px;
    background: #EFF2F3;
    border-radius: 8px;
    direction: rtl;
}

/* متن توضیح رأی */
.vote-text {
    margin: 8px;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.02em;
    color: #131313;
    text-align: right;
}

/* دکمه رأی (سمت چپ در RTL) */
.vote .amoot-btn {
    margin-inline-start: auto;
}

.comment-actions {
    display: flex !important;
    align-items: center !important;
}

/* ریسپانسیو مخصوص صفحه info (آواتار و باکس رأی) */
@media (max-width: 767.98px) {

    .user-info-box.verify {
        margin-top: 1px !important;
        margin-bottom: 1px !important;
    }

    .vote {
        gap: 8px !important;
        flex-direction: column;
        align-items: stretch;
    }

        .vote .vote-text {
            font-size: 12px !important;
            line-height: 1.6 !important;
        }

        .vote .amoot-btn {
            padding: 8px 16px !important;
            font-size: 12px !important;
            margin-inline-start: auto;
            align-self: flex-end;
        }
}


/* تیتر (fw-bold) که در info هم استفاده شده – برای هماهنگی موبایل */
@media (max-width: 767.98px) {
    .text-decoration-none.fw-bold {
        font-size: 16px !important;
    }

    #display-date {
        font-size: 11px !important;
    }
}

/* ====================== FeatureRequest Info Page Styles (END) ====================== */


/* ====================== سایر استایل‌ها (صفحات دیگر / مشترک) ====================== */

/* استایل‌های صفحه ایجاد فیچر و فرم‌ها */

/* لیبل‌ها در صفحه create */
.create-page-label {
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 200%;
    text-align: right;
    color: #828282;
}

    .create-page-label + input::placeholder,
    .create-page-label + textarea::placeholder {
        font-style: normal;
        font-weight: 325;
        font-size: 12px;
        line-height: 200%;
        text-align: right;
        color: #828282;
    }

.page-feature-request-create input::placeholder,
.page-feature-request-create textarea::placeholder {
    font-style: normal;
    font-weight: 325;
    font-size: 12px;
    line-height: 200%;
    text-align: right;
    color: #828282;
}

.page-feature-request-create select,
.page-feature-request-create select option {
    font-style: normal;
    font-weight: 325;
    font-size: 12px;
    line-height: 200%;
    text-align: right;
    color: #828282;
    direction: rtl;
}

.page-feature-request-create .form-select {
    font-style: normal;
    font-weight: 325;
    font-size: 12px;
    line-height: 200%;
    text-align: right;
    color: #828282;
}

/* ریسپانسیو صفحه create */
@media (max-width: 767.98px) {
    #newFeature {
        margin: 1rem 1rem !important;
    }

    .page-feature-request-create .db-page-title {
        text-align: center;
        width: 100%;
        margin-top: 25px;
        margin-bottom: 20px;
    }
}

@media (max-width: 767.98px) {
    .page-feature-request-create .position-relative {
        width: 100% !important;
    }
}

/* آپلود فایل در create */
@media (max-width: 767.98px) {
    .custom-file-uploader label {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        column-gap: 8px;
        row-gap: 6px;
        align-items: center;
        width: 100%;
    }

    #file-format {
        font-size: 11px !important;
        white-space: nowrap;
        text-align: right;
    }

    #file-size {
        font-size: 11px !important;
        white-space: nowrap;
        text-align: left;
        justify-self: end;
    }

    #file-select {
        grid-column: 1 / -1;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-top: 6px;
    }
}

/* دکمه‌های فرم (بازگشت/ثبت) در صفحه create */
#form-buttons {
    justify-content: flex-end;
}

@media (max-width: 767.98px) {
    #form-buttons {
        justify-content: flex-start !important;
        width: 100%;
        margin-top: 1rem !important;
        margin-bottom: 1.5rem !important;
        align-items: stretch !important;
    }

    #btn-back,
    #btn-submit {
        font-size: 12px;
        flex: 1 1 0;
        max-width: 48%;
        text-align: center;
        width: 48% !important;
        flex: none !important;
        line-height: 1.4 !important;
        vertical-align: middle !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        box-sizing: border-box !important;
        border-width: 1px !important;
    }
}

@media (max-width: 767.98px) {
    /* اجازه نده هدر 100% عرض بگیره و بره خط بعد */
    .header-back-wrapper .db-page-title {
        width: auto !important;
        margin-top: 25px;
        margin-bottom: 20px;
        text-align: right !important;
    }

    .header-back-wrapper {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        padding-right: 12px;
    }
}

/* دکمه‌های ریپلای — فقط در فرم پاسخ */
.reply-form .reply-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* استایل یکسان دکمه لغو و ارسال */
.reply-form .reply-btn {
    flex: 1 1 0;
    height: 34px;
    font-size: 11px;
    padding: 6px 10px !important;
    border-radius: 4px;
    text-align: center;
    white-space: nowrap;
}

/* دکمه لغو */
.reply-form .cancel-reply-btn {
    background: transparent;
    border: 1px solid #9CA3AF !important; /* خاکستری */
    color: #6B7280 !important; /* خاکستری تیره‌تر */
}

    .reply-form .cancel-reply-btn:hover {
        background: #f3f3f3;
        border-color: #6B7280 !important;
        color: #4B5563 !important;
    }

/* دکمه ارسال */
.reply-form .btn-submit {
    background: #2166AE;
    color: #fff;
    border: none;
}

    .reply-form .btn-submit:hover {
        background: #1f5a9c;
    }


#commentsList .btn-like + span {
    margin-inline-start: 0px !important; /* عدد چسبیده‌تر به آیکون لایک */
    margin-inline-end: 0 !important;
}

    #commentsList .btn-like + span + .btn-dislike {
        margin-inline-start: 14px !important; /* این میشه فاصله بین عدد لایک و آیکون دیسلایک */
    }


#commentsList .btn-dislike + span {
    margin-inline-start: 0px !important; /* عدد چسبیده‌تر به آیکون دیسلایک */
    margin-inline-end: 0 !important;
}

    #commentsList .btn-dislike + span + .btn-open-reply {
        margin-inline-start: 14px !important; /* این میشه فاصله بین عدد دیسلایک و آیکون ریپلای */
    }

/* ====================== پایان سایر استایل‌ها ====================== */