/* استایل کامپوننت پرسش‌وپاسخ/کامنت (CommentUi) - از متغیرهای خودِ Bootstrap این پروژه استفاده می‌کنه
   (نه رنگ/فاصله‌ی ثابت) تا روی هر سایت مستاجر (که پالت رنگی خودش رو داره) خودکار هماهنگ بمونه */
.comments {
    --qa-space-2: .5rem;
    --qa-space-3: .75rem;
    --qa-space-4: 1rem;
    --qa-space-5: 1.5rem;
    --qa-radius: var(--bs-border-radius-lg, .5rem);
    --qa-radius-pill: var(--bs-border-radius-pill, 50rem);
    --qa-border: var(--bs-border-color, #dee2e6);
    --qa-muted: var(--bs-secondary-color, #6c757d);
    --qa-surface: var(--bs-light, #f8f9fa);
    --qa-body: var(--bs-body-color, #212529);
}

.comment-highlight {
    animation: commentHighlightFade 3s ease-out;
}

@keyframes commentHighlightFade {
    0% { background-color: #fff3cd; }
    100% { background-color: transparent; }
}

/* --- هدر «نظرات و پرسش‌ها + تعداد» --- */
.qa-summary {
    display: flex;
    align-items: center;
    gap: var(--qa-space-2);
    margin-bottom: var(--qa-space-4);
}

.qa-summary__title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--qa-body);
}

.qa-summary__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 .4rem;
    border-radius: var(--qa-radius-pill);
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
}

/* --- حالت خالی --- */
.qa-empty {
    text-align: center;
    padding: var(--qa-space-5) var(--qa-space-3);
    color: var(--qa-muted);
}

.qa-empty__icon {
    display: block;
    font-size: 2rem;
    color: var(--qa-border);
    margin-bottom: var(--qa-space-3);
}

.qa-empty__title {
    font-weight: 600;
    color: var(--qa-body);
    margin-bottom: 4px;
}

.qa-empty__desc {
    font-size: .9rem;
    margin: 0;
}

/* --- ردیف اواتار+محتوا: همیشه هم‌ردیف (حتی موبایل) تا اواتار هیچ‌وقت بالای متن نیفته --- */
.qa-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.qa-avatar,
.qa-answer__avatar {
    flex-shrink: 0;
}

/* لوگوی سایت روی اواتار پشتیبانی همیشه روی زمینه‌ی سفید و دایره‌ای تمیز دیده بشه،
   چون لوگو ممکنه شفاف/غیرمربعی باشه */
.qa-answer__avatar {
    background: #fff;
    border: 1px solid var(--qa-border);
    object-fit: contain;
    padding: 3px;
    width: 40px !important;
}

.qa-content {
    flex: 1 1 auto;
    min-width: 0;
}

.qa-content__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--qa-space-2);
    margin-bottom: 2px;
}

.qa-name {
    font-weight: 600;
}

.qa-text {
    color: var(--qa-body);
    line-height: 1.6;
}

.qa-card__footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--qa-space-2);
    margin-bottom: var(--qa-space-2);
}

/* --- دکمه‌ی باز/بسته کردن پاسخ‌ها --- */
.qa-reply-toggle {
    border: none;
    background: transparent;
    color: var(--qa-muted);
    font-size: .875rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 10px;
    border-radius: var(--qa-radius-pill);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.qa-reply-toggle:hover,
.qa-reply-toggle:focus-visible {
    color: var(--bs-primary, #0d6efd);
    background-color: rgba(13, 110, 253, .08);
}

.qa-reply-toggle:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

.qa-reply-toggle__chevron {
    transition: transform .2s ease;
}

.qa-reply-toggle[aria-expanded="true"] .qa-reply-toggle__chevron {
    transform: rotate(180deg);
}

/* --- رشته‌ی پاسخ‌ها ---
   دو لایه: یه خط عمودی صاف (Trunk) که کل ارتفاع لیست پاسخ‌ها رو می‌گیره (روی خودِ <ul>)،
   + یه منحنی کوچیک روی هر پاسخ که از همون خط، به اواتار همون پاسخ می‌پیچه.
   وقتی <ul> با ویژگی hidden بسته می‌شه، کل این بلوک (همراه خط) خودکار جمع می‌شه. */
.qa-answers {
    position: relative;
    margin-top: var(--qa-space-3);
 
}

.qa-answers::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: -10px;
    bottom: 0;
    width: 2px;
 
}

.qa-answer + .qa-answer {
    margin-top: var(--qa-space-3);
}

.qa-answer__row {
    position: relative;
}

.qa-answer__row::before {
 
}

.qa-answer__card {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius);
    padding: var(--qa-space-3) var(--qa-space-4);
}

.qa-answer__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .75rem;
    font-weight: 600;
    color: #fff;
    background: var(--bs-success, #198754);
    padding: 2px 10px;
    border-radius: var(--qa-radius-pill);
}

.qa-answer__text {
    color: var(--qa-body);
    line-height: 1.6;
}

/* --- فرم ارسال پرسش/دیدگاه --- */
.QuerystionForm {
    background: var(--qa-surface);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius);
}

/* رنگ فعال از همون متغیر Bootstrap که رنگ برند هر سایت (danger) ازش میاد - نه رنگ ثابت،
   چون هر مستاجر (kanzwatches، banekala، samiraccessory و...) پالت رنگی خودش رو داره */
.btn-comment-like {
    --like-color: var(--bs-danger, #dc3545);
    border: 1px solid transparent;
    background: transparent;
    color: #6c757d;
    font-size: .875rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

/* روی موبایل حداقل ۴۴ پیکسل ناحیه‌ی لمسی (طبق استاندارد دسترس‌پذیری لمسی) */
@media (max-width: 575.98px) {
    .btn-comment-like {
        min-height: 44px;
        min-width: 44px;
    }
}

.btn-comment-like:hover,
.btn-comment-like:focus-visible {
    color: var(--like-color);
    background-color: rgba(220, 53, 69, .08);
}

/* Focus Ring رو حذف نمی‌کنیم؛ فقط ظاهرش رو با شکل دکمه هماهنگ می‌کنیم (برای کیبورد ضروریه) */
.btn-comment-like:focus-visible {
    outline: 2px solid var(--like-color);
    outline-offset: 2px;
}

.btn-comment-like[aria-pressed="true"] {
    color: var(--like-color);
    background-color: rgba(220, 53, 69, .1);
    border-color: rgba(220, 53, 69, .15);
}

.btn-comment-like:disabled {
    cursor: default;
    opacity: .85;
}

.btn-comment-like__icon-wrap {
    position: relative;
    display: inline-flex;
    width: 1.05em;
    height: 1.05em;
}

.btn-comment-like__icon-outline,
.btn-comment-like__icon-filled {
    position: absolute;
    inset: 0;
    transition: opacity .15s ease;
}

.btn-comment-like__icon-filled {
    opacity: 0;
    color: var(--like-color);
}

.btn-comment-like[aria-pressed="true"] .btn-comment-like__icon-outline {
    opacity: 0;
}

.btn-comment-like[aria-pressed="true"] .btn-comment-like__icon-filled {
    opacity: 1;
}

.btn-comment-like[aria-pressed="true"] .btn-comment-like__icon-wrap {
    animation: commentLikePop .3s ease;
}

.btn-comment-like.js-like-rejected {
    animation: commentLikeShake .3s ease;
}

@keyframes commentLikePop {
    0% { transform: scale(1); }
    35% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

@keyframes commentLikeShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* احترام به تنظیم کاهش انیمیشن سیستم‌عامل کاربر */
@media (prefers-reduced-motion: reduce) {
    .btn-comment-like[aria-pressed="true"] .btn-comment-like__icon-wrap,
    .btn-comment-like.js-like-rejected {
        animation: none;
    }

    .qa-reply-toggle__chevron {
        transition: none;
    }
}