/* کامپوننت واحد مودال — زیر ۷۶۸px شیت از پایین، بالای آن کارت وسط‌چین.
 *
 * روی لایه‌ی ساختاری خودِ بوت‌استرپ می‌نشیند (.modal / .modal-dialog / .modal-content)
 * نه روی کلاس‌های اختصاصی هر مودال، چون هر ۲۱ مودال سایت همین سه کلاس را دارند ولی
 * ۲۱ سیستم کلاس داخلی متفاوت. این‌طور یکدستی بدون مهاجرت مارک‌آپ به‌دست می‌آید و
 * مکانیزم بوت‌استرپ (فوکوس‌تراپ، Esc، کلیک بک‌دراپ، قفل اسکرول) دست‌نخورده می‌ماند.
 *
 * این فایل عمداً آخر از همه enqueue می‌شود تا در برابری ویژگی، بر قاعده‌های
 * پراکنده‌ی هر مودال برنده شود.
 *
 * کنارگذاشتن یک مودال: کلاس irb-modal-plain روی ریشه‌ی .modal.
 * (فعلاً فقط #loginModal — طراحی تمام‌صفحه‌ی خودش را دارد.)
 *
 * ⚠ بیلد بوت‌استرپی که تم enqueue می‌کند هیچ قاعده‌ی modal-fullscreen* ندارد،
 * پس روی آن کلاس‌ها حساب نکن؛ هندسه‌ی موبایل کاملاً اینجاست.
 * ⚠ هر سلکتور یک‌خطی است — مینیفایر باندل تم newline را بدون فاصله حذف می‌کند.
 * ⚠ لایه‌بندی (.modal 10060 / .modal-backdrop 10055) در global-rules.css است، اینجا نه.
 */

/* ---------- قاب مشترک (همه‌ی اندازه‌ها) ---------- */

.modal:not(.irb-modal-plain) .modal-content {
    border: 1px solid #EBF0F5;
    border-radius: 12px;
    background: #fff;
}

/* دستگیره فقط روی شیت موبایل ساخته می‌شود؛ اینجا خاموش تا به مارک‌آپ اضافه نیاز نباشد */
.modal:not(.irb-modal-plain) .modal-content::before { content: none; }

/* دکمه‌ی بستنِ پایین را modal-sheet.js تزریق می‌کند؛ فقط روی شیت دیده می‌شود */
.irb-modal__done { display: none; }

/* گذار: دکمه‌ی اختصاصیِ مودال مشخصات جای خود را به دکمه‌ی مشترک داد. تا وقتی
   تمپلیت PDP روی پروداکشن به‌روز نشده (کار سشن دیگری رویش است) این خط جلوی
   چاپ‌شدن دو دکمه را می‌گیرد. بعد از دیپلوی آن تمپلیت، حذف‌شدنی است. */
.irb-specs__done { display: none; }

/* ضربدرِ بوت‌استرپی مودال‌هایی که کلاس خودشان را ندارند، هم‌شکل ضربدر مودال
   مشخصات می‌شود: ۳۲×۳۲، شعاع ۸، بدون بردر، خاکستری ۶۴۷۴۸b */
.modal:not(.irb-modal-plain) .btn-close {
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background-color: transparent;
    opacity: .75;
}
.modal:not(.irb-modal-plain) .btn-close:hover { background-color: #f1f5f9; opacity: 1; }
.modal:not(.irb-modal-plain) .btn-close:focus { box-shadow: none; }
.modal:not(.irb-modal-plain) .btn-close:focus-visible { outline: 2px solid #185adb; outline-offset: 2px; }

/* ---------- موبایل: شیت از پایین ---------- */

@media (max-width: 767.98px) {

    /* اسکرول مالِ محتوای شیت است نه کل مودال */
    .modal:not(.irb-modal-plain) { overflow: hidden; }

    .modal:not(.irb-modal-plain) .modal-dialog {
        max-width: none;
        width: auto;
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .modal:not(.irb-modal-plain) .modal-content {
        max-height: 88%;
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 0;
        border-radius: 12px 12px 0 0;
    }

    /* دستگیره — نشانه‌ی «این از پایین آمد و از پایین هم بسته می‌شود» */
    .modal:not(.irb-modal-plain) .modal-content::before {
        content: "";
        display: block;
        flex: none;
        width: 34px;
        height: 4px;
        margin: 8px auto 0;
        border-radius: 99px;
        background: #e2e8f0;
    }

    /* بوت‌استرپ دیالوگ را از بالا می‌لغزاند؛ شیت باید از کف بیاید */
    .modal.fade:not(.irb-modal-plain) .modal-dialog { transform: translateY(100%); }
    .modal.show:not(.irb-modal-plain) .modal-dialog { transform: none; }

    /* آخرین فرزند فضای دکمه را پس می‌دهد. سلکتور عمداً پهن است: هر مودال اسم
       دیگری برای بدنه‌اش دارد، و این هم وقتی بدنه خودش اسکرول دارد کار می‌کند
       هم وقتی خودِ .modal-content اسکرول می‌شود. */
    .modal:not(.irb-modal-plain) .modal-content > :last-child {
        padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    }

    /* دکمه و گرادیان روی .modal-dialog می‌نشینند نه .modal-content، چون
       modal-content اسکرول می‌شود و هرچه داخلش absolute باشد با محتوا بالا می‌رود */
    .modal:not(.irb-modal-plain) .modal-dialog::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        height: calc(82px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(to top, #fff 40%, rgba(255, 255, 255, 0));
        pointer-events: none;
    }

    /* ::after بعد از دکمه نقاشی می‌شود، پس دکمه باید صریحاً بالاتر بنشیند.
       pointer-events هم لازم است: بوت‌استرپ .modal-dialog را none می‌کند. */
    .irb-modal__done {
        position: absolute;
        z-index: 2;
        left: 50%;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 120px;
        padding: 10px 26px;
        border: 1px solid #EBF0F5;
        border-radius: 999px;
        background: #fff;
        color: #0f172a;
        font-size: 13px;
        font-weight: 400;
        font-variation-settings: "wght" 600, "KSHD" 100;
        line-height: 20px;
        pointer-events: auto;
        cursor: pointer;
    }
    .irb-modal__done:focus-visible { outline: 2px solid #185adb; outline-offset: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    .modal.fade:not(.irb-modal-plain) .modal-dialog { transition-duration: .001s; }
}