/* ══════════════════════════════════════════════════════════════════════════
   سیستم «خبرم کن» (Appointment Interest)
   کارتِ CTA روی پروفایلِ پزشکِ بدونِ نوبت‌دهی + مودالِ ثبتِ نام.

   توکن‌ها با fallback نوشته می‌شوند (var(--x, y)) — همان قاعده‌ی doctor-profile.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── کارتِ CTA ───────────────────────────────────────────────────────────── */

.appointment-interest-card {
    background: var(--bg-component, #fff);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    padding: var(--spacing-lg, 16px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .04);
}

.interest-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.interest-head-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary-light, #e5e9f4);
    color: var(--primary-color, rgb(37, 60, 137));
    /* flex به‌جای display:block — در RTL آیکون را می‌چسباند (تله‌ی شناخته‌شده‌ی پروژه) */
    display: flex;
    align-items: center;
    justify-content: center;
}

.interest-head-icon svg {
    width: 18px;
    height: 18px;
}

.interest-title {
    margin: 0;
    font-size: var(--font-base, 1rem);
    font-weight: var(--font-semibold, 600);
    color: var(--text-primary, #000);
    line-height: var(--line-height-normal, 1.5);
}

.interest-desc {
    margin: 0 0 10px;
    font-size: var(--font-sm, .875rem);
    color: var(--text-muted, #717171);
    line-height: var(--line-height-relaxed, 1.75);
}


/* حالتِ «قبلاً ثبت شده» — عمداً سبزِ آرام و بدونِ دکمه: کاری برای انجام‌دادن نمانده،
   پس هر چیزی که شبیهِ دکمه باشد دعوت به کارِ تکراری است. */
/* ⚠️ نامش عمداً `-done` نیست: `.interest-done-btn` («متوجه شدم») از قبل در مودال
   وجود دارد و دو کلاسِ هم‌ریشه با معنای متفاوت گمراه‌کننده است. */
.interest-registered {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 8px;
    padding: 10px 12px;
    border-radius: var(--radius-md, 8px);
    background: rgba(4, 120, 87, .08);
    border: 1px solid rgba(4, 120, 87, .2);
    font-size: var(--font-sm, .875rem);
    font-weight: var(--font-medium, 500);
    color: #04603f;
    line-height: var(--line-height-relaxed, 1.75);
}

.interest-registered-ico {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    color: #047857;
}

.interest-registered-ico svg { width: 100%; height: 100%; display: block; }

.interest-cta-btn {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-radius: var(--radius-md, 8px);
    background: var(--primary-color, rgb(37, 60, 137));
    color: var(--text-white, #fff);
    font-family: inherit;
    font-size: var(--font-sm, .875rem);
    font-weight: var(--font-semibold, 600);
    line-height: 1.6;
    cursor: pointer;
    transition: background-color .15s ease;
}

/* ⚠️ color اجباری است: بوت‌استرپ `.btn:hover, .btn:focus { color:#333 }` دارد و چون
   دکمه کلاسِ `btn` را هم می‌گیرد، با specificityِ برابر (0,2,0) متنِ سفید را روی
   پس‌زمینه‌ی آبی مشکی می‌کرد. تکرارِ color در هر سه حالت این را می‌بندد. */
.interest-cta-btn:hover:not(:disabled),
.interest-cta-btn:focus:not(:disabled),
.interest-cta-btn:active:not(:disabled) {
    background: var(--primary-hover, rgb(30, 48, 110));
    color: var(--text-white, #fff);
}

.interest-cta-btn:disabled {
    background: var(--gray-200, #e5e7eb);
    color: var(--text-muted, #717171);
    cursor: default;
}

.interest-cta-btn:focus-visible,
.interest-submit-btn:focus-visible,
.interest-done-btn:focus-visible,
.interest-modal-close:focus-visible {
    outline: 2px solid var(--primary-color, rgb(37, 60, 137));
    outline-offset: 2px;
}

.interest-fineprint {
    /* ⚠️ حاشیه **پایین** است نه بالا: این بلوک از ۱۴۰۵/۰۵/۲۴ بالای دکمه می‌نشیند
       («رایگان است» + «به معنای ثبت نوبت نیست» آخرین چیزی است که پیش از کلیک خوانده
       می‌شود). در حالتِ «قبلاً ثبت شده» هم زیرِ پیامِ تأیید می‌آید و همین فاصله درست است. */
    margin: 0 0 12px;
    text-align: center;
    font-size: var(--font-xs, .75rem);
    color: var(--text-muted, #717171);
}

/* حالتِ فشرده وقتی داخلِ کارتِ «نوبتی موجود نیست» رندر می‌شود */
.consultation-unavailable .appointment-interest-card {
    border: 0;
    box-shadow: none;
    padding: 10px 0 0;
    background: transparent;
}

.consultation-unavailable .appointment-interest-card .interest-head,
.consultation-unavailable .appointment-interest-card .interest-fineprint {
    display: none;
}

/* ── مودال ───────────────────────────────────────────────────────────────── */

.interest-modal[hidden] {
    display: none;
}

.interest-modal {
    position: fixed;
    inset: 0;
    z-index: 10500; /* بالاتر از مودال‌های bootstrapِ فوتر (1050) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.interest-modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--bg-overlay, rgba(0, 0, 0, .5));
}

.interest-modal-panel {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--bg-component, #fff);
    border-radius: var(--radius-lg, 12px);
    padding: 22px 20px 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
}

.interest-modal-close {
    position: absolute;
    top: 10px;
    left: 12px; /* RTL: دکمه‌ی بستن سمتِ چپ */
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted, #717171);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.interest-modal-close:hover {
    background: var(--bg-hover, #f7f7f7);
}

.interest-modal-title {
    margin: 0 0 12px;
    font-size: var(--font-lg, 1.125rem);
    font-weight: var(--font-semibold, 600);
    color: var(--text-primary, #000);
}

/* جعبه‌ی مدیریتِ انتظار — عمداً پررنگ است و نباید کم‌رنگ شود */
/*
 * متنِ معرفی — عمداً بدونِ کادر و رنگ.
 *
 * قبلاً خودش یک کادرِ کهربایی بود و جملهٔ «به معنای ثبت نوبت نیست» هم داخلش می‌نشست.
 * نتیجه: دو پیام با اهمیتِ کاملاً متفاوت، یک وزن می‌گرفتند و هشدار در متن گم می‌شد.
 * حالا این‌جا متنِ ساده است و تنها عنصرِ رنگیِ بالای فرم، کادرِ هشدارِ زیرش.
 */
.interest-notice {
    margin: 0 0 12px;
    font-size: var(--font-sm, .875rem);
    line-height: var(--line-height-relaxed, 1.75);
    color: var(--text-secondary, #222);
}

/* ── کادرِ info: «ثبت این درخواست رایگان است» ─────────────────────────────── */
/*
 * جدا از کادرِ هشدار نگه داشته می‌شود چون پیامش از جنسِ دیگری است: خبرِ خوب و
 * رفعِ نگرانیِ هزینه. اگر همان قرمز را می‌گرفت، هم بی‌دلیل کاربر را می‌ترساند و هم
 * وزنِ بصریِ جملهٔ واقعاً مهمِ زیرش را نصف می‌کرد.
 */
.interest-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    padding: 10px 12px;
    border-radius: var(--radius-md, 8px);
    border: 1px solid #cfe3f5;
    background: #f2f8fd;
    color: #1d4e77;
    font-size: var(--font-sm, .875rem);
    line-height: var(--line-height-relaxed, 1.75);
}

.interest-info-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    /* flex به‌جای display:block — در RTL آیکون را به متن می‌چسباند (تله‌ی شناخته‌شده‌ی پروژه) */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2f7cb8;
    margin-top: 2px;
}

.interest-info-icon svg {
    width: 18px;
    height: 18px;
}

/* ── کادرِ هشدار: «این درخواست به معنای ثبت نوبت نیست» ────────────────────── */
/*
 * تمِ خطر (قرمز) و نه کهربایی: این تنها جمله‌ای است که اگر کاربر نخواندش، کلِ سیستم
 * شکست خورده — او فکر می‌کند نوبت گرفته و سرِ وقتِ نداشته مراجعه می‌کند. عمداً تنها
 * جملهٔ داخلِ کادر است تا هیچ متنِ دیگری توجه را از آن نگیرد.
 */
.interest-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px;
    border-radius: var(--radius-md, 8px);
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
    font-size: var(--font-sm, .875rem);
    line-height: var(--line-height-relaxed, 1.75);
}

.interest-alert-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    /* flex به‌جای display:block — در RTL آیکون را به متن می‌چسباند (تله‌ی شناخته‌شده‌ی پروژه) */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--error, #dc2626);
    /* هم‌ترازی با خطِ اولِ متن، نه با بالای کادر */
    margin-top: 1px;
}

.interest-alert-icon svg {
    width: 20px;
    height: 20px;
}

/* جملهٔ حیاتی — پررنگ و تیره‌تر از خودِ کادر */
.interest-alert-strong {
    min-width: 0;
    font-weight: var(--font-bold, 700);
    color: #7f1d1d;
}

.interest-label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--font-sm, .875rem);
    font-weight: var(--font-medium, 500);
    color: var(--text-secondary, #222);
}

.interest-input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border-light, #ddd);
    border-radius: var(--radius-md, 8px);
    font-family: inherit;
    font-size: var(--font-base, 1rem);
    color: var(--text-primary, #000);
    background: var(--bg-component, #fff);
}

.interest-input:focus {
    outline: 0;
    border-color: var(--primary-color, rgb(37, 60, 137));
    box-shadow: 0 0 0 3px var(--primary-light, #e5e9f4);
}

.interest-hint {
    margin: 6px 0 0;
    font-size: var(--font-xs, .75rem);
    color: var(--text-muted, #717171);
}

.interest-error {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md, 8px);
    background: #fef2f2;
    color: var(--error, #dc2626);
    font-size: var(--font-sm, .875rem);
}

.interest-error[hidden],
.interest-success[hidden] {
    display: none;
}

/* ترتیبِ دکمه‌ها در حالتِ موفقیت: «پزشکانِ مشابه» **بالا** و «متوجه شدم» پایین.
   دلیل: در این لحظه کاربر هنوز نوبتی ندارد؛ اقدامِ مفید دیدنِ جایگزین است، نه بستنِ
   مودال. اگر «متوجه شدم» اول بیاید، عملاً تنها چیزی است که دیده و زده می‌شود. */
.interest-success-actions {
    display: flex;
    flex-direction: column;
}

/* دکمهٔ جایگزین ثانویه است — نباید با CTAی اصلیِ سیستم هم‌وزن دیده شود */
.interest-alt-btn {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--primary-color, rgb(37, 60, 137));
    border-radius: var(--radius-md, 8px);
    background: transparent;
    color: var(--primary-color, rgb(37, 60, 137));
    font-family: inherit;
    font-size: var(--font-base, 1rem);
    font-weight: var(--font-semibold, 600);
    cursor: pointer;
    transition: background-color .15s ease;
}

.interest-alt-btn[hidden] { display: none; }

/* بوت‌استرپ روی .btn:hover رنگِ #333 می‌گذارد — باید صریح خنثی شود */
.interest-alt-btn:hover,
.interest-alt-btn:focus {
    background: rgba(37, 60, 137, .07);
    color: var(--primary-color, rgb(37, 60, 137));
}

.interest-submit-btn,
.interest-done-btn {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 12px 14px;
    border: 0;
    border-radius: var(--radius-md, 8px);
    background: var(--primary-color, rgb(37, 60, 137));
    color: var(--text-white, #fff);
    font-family: inherit;
    font-size: var(--font-base, 1rem);
    font-weight: var(--font-semibold, 600);
    cursor: pointer;
    transition: background-color .15s ease;
}

/* همان دلیلِ بالا — بوت‌استرپ روی .btn:hover/.btn:focus رنگِ #333 می‌گذارد */
.interest-submit-btn:hover:not(:disabled),
.interest-submit-btn:focus:not(:disabled),
.interest-done-btn:hover,
.interest-done-btn:focus {
    background: var(--primary-hover, rgb(30, 48, 110));
    color: var(--text-white, #fff);
}

/* حالتِ disabled هم باید رنگش را از دستِ بوت‌استرپ نگه دارد */
.interest-cta-btn:disabled:hover,
.interest-cta-btn:disabled:focus {
    background: var(--gray-200, #e5e7eb);
    color: var(--text-muted, #717171);
}

.interest-submit-btn:disabled {
    background: var(--gray-300, #d1d5db);
    cursor: wait;
}

/* ── حالتِ موفقیت ─────────────────────────────────────────────────────────── */

.interest-success {
    text-align: center;
    padding-top: 6px;
}

.interest-success-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--success, #00a699);
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.interest-success-text {
    margin: 0;
    font-size: var(--font-sm, .875rem);
    line-height: var(--line-height-relaxed, 1.75);
    color: var(--text-secondary, #222);
}

body.interest-modal-open {
    overflow: hidden;
}

/* بنرهای «نصب اپلیکیشن» و «فعال‌سازی اعلان» نباید روی مودال بنشینند.
   کلاسِ dv-no-app-prompts (که JS اضافه می‌کند) جلوی بنرهای *جدید* را می‌گیرد؛
   این قاعده بنری را که پیش از باز شدنِ مودال روی صفحه بوده مخفی می‌کند.
   display:none (نه حذف) تا با بسته شدنِ مودال دوباره برگردد — فقط تعویق است. */
body.interest-modal-open #dvPushBanner,
body.interest-modal-open #dvInstallBanner {
    display: none !important;
}

/* ── ریسپانسیو ───────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .interest-modal {
        padding: 0;
        align-items: flex-end;
    }

    .interest-modal-panel {
        max-width: 100%;
        max-height: 92vh;
        border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
        padding: 20px 16px 24px;
    }

    .appointment-interest-card {
        padding: var(--spacing-md, 12px);
    }

    .interest-title {
        font-size: var(--font-sm, .875rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .interest-cta-btn,
    .interest-submit-btn,
    .interest-done-btn {
        transition: none;
    }
}