/* =========================================================
   static/css/responsive.css
   تنظیمات ریسپانسیو سایت برای موبایل، تبلت، لپ‌تاپ و مانیتور بزرگ.
   Breakpointها هم‌راستا با گرید Bootstrap 5 هستند:
   موبایل: <576px   تبلت: 576–991px   لپ‌تاپ: 992–1399px   بزرگ: 1400px+
========================================================= */

/* ---------------- مانیتورهای بزرگ (فضای بیشتر برای Hero) ---------------- */
@media (min-width: 1400px) {
    .container { max-width: 1280px; }
    .hero-luxury { padding: 140px 0 110px; }
}

/* ---------------- تبلت و پایین‌تر (≤ 991px) ---------------- */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: var(--bg-elevated);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        margin-top: 16px;
        padding: 20px;
    }
    .navbar-nav { margin-bottom: 16px; }
    .navbar-auth {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .navbar-auth .btn { width: 100%; }

    .product-detail__cta-card { position: static !important; margin-top: 24px; }
    .hero-luxury { padding: 80px 0 60px; }
    .hero-luxury__grid-frame { inset: 20px; }

    /* ---------------- جزئیات محصول/دوره: ترتیب طبیعی ستون‌ها روی تبلت ---------------- */
    .product-detail { padding: 44px 0 70px; }
    .product-detail__image-wrap { margin-bottom: 8px; }
    .product-detail__buy-btn { margin-bottom: 28px; }

    /* ---------------- چت پشتیبانی: کمی جمع‌تر روی تبلت ---------------- */
    .chat-window { height: 520px; }
}

/* ---------------- موبایل (≤ 767px) ---------------- */
@media (max-width: 767.98px) {
    body { font-size: 15px; }

    .auth-card { padding: 28px 20px; }
    .about-content { padding: 26px 20px; }

    .profile-summary-card,
    .profile-edit-card,
    .purchase-summary-card,
    .purchase-form-card,
    .stat-card,
    .withdrawal-form-card {
        padding: 22px;
    }

    .balance-card { padding: 28px 20px; }

    .chat-window { height: 480px; }
    .chat-bubble { max-width: 88%; }

    .footer-row { text-align: center; }
    .footer-social { justify-content: center; }
    .footer-about-text { margin-inline: auto; }

    .product-card__actions { flex-direction: column; }

    /* =====================================================
       صفحه پشتیبانی (چت) — پدینگ کلی صفحه و هدر
       ===================================================== */
    .support-page { padding: 40px 0 70px; }
    .support-page__header { margin-bottom: 22px; }
    .support-page__header h1 { font-size: 22px; }
    .support-page__header p { font-size: 14px; }

    .chat-window { border-radius: var(--radius-md); }
    .chat-window__messages { padding: 16px; gap: 10px; }
    .chat-bubble { padding: 10px 14px; font-size: 13.5px; }
    .chat-window__form { padding: 12px; gap: 8px; }
    .chat-window__form .form-control { min-height: 44px; font-size: 14px; }
    .chat-window__form .btn { min-height: 44px; padding: 10px 16px; flex-shrink: 0; }

    /* لیست گفتگوها در پنل ادمین (inbox) روی موبایل قابل اسکرول افقی */
    .table-responsive .table-luxury { min-width: 560px; }

    /* =====================================================
       صفحه جزئیات محصول/دوره آموزشی
       ===================================================== */
    .product-detail { padding: 36px 0 60px; }
    .product-detail__title { font-size: 24px; margin-bottom: 10px; }
    .product-detail__short-desc { font-size: 14px; margin-bottom: 16px; }
    .product-detail__prices { gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
    .product-detail__price-old { font-size: 14px; }
    .product-detail__price-new { font-size: 22px; }
    .product-detail__buy-btn { font-size: 15px; }
    .product-detail__block { margin-bottom: 24px; }
    .product-detail__block-title { font-size: 17px; margin-bottom: 12px; }
    .product-detail__description { font-size: 14.5px; }
    .product-detail__cta-card { padding: 20px; }

    /* «گزینه‌های دیگر با همین نام» داخل صفحه جزئیات، تک‌ستونه روی موبایل */
    .product-detail .row.g-3 > [class*="col-"] { width: 100%; }
}

/* ---------------- موبایل کوچک (≤ 575px) ---------------- */
@media (max-width: 575.98px) {
    .hero-luxury__title { font-size: 30px; }
    .hero-luxury__actions { flex-direction: column; align-items: stretch; }
    .hero-luxury__actions .btn { width: 100%; }

    .eyebrow-gold { padding-inline-start: 22px; }

    .invite-code-box { font-size: 13px; }

    .table-luxury { font-size: 13px; }
    .table-luxury td, .table-luxury th { padding: 10px; }

    .site-messages { top: 76px; width: 94%; }

    /* =====================================================
       صفحه پشتیبانی (چت) — موبایل کوچک
       ===================================================== */
    .chat-window { height: 440px; border-radius: var(--radius-sm); }
    .chat-window__messages { padding: 12px; gap: 8px; }
    .chat-bubble { max-width: 92%; padding: 9px 12px; font-size: 13px; }
    .chat-bubble__sender { font-size: 10px; }
    .chat-bubble__time { font-size: 9px; }
    .chat-window__form { padding: 10px; gap: 6px; }
    .chat-window__form .form-control { padding: 10px 12px; font-size: 13.5px; }
    .chat-window__form .btn { width: 44px; padding: 10px; }
    .chat-window__form .btn .bi { margin: 0; }

    .support-page__header h1 { font-size: 20px; }
    .back-link { font-size: 13px; }

    /* =====================================================
       صفحه جزئیات محصول/دوره آموزشی — موبایل کوچک
       ===================================================== */
    .product-detail__title { font-size: 21px; }
    .product-detail__image-wrap { border-radius: var(--radius-md); }
    .product-detail__prices { gap: 8px; }
    .product-detail__price-new { font-size: 20px; }
    .product-detail__block-title { font-size: 16px; }
    .check-list li { font-size: 13.5px; }
    .product-detail__cta-card { padding: 18px; }
    .product-detail__cta-card p { font-size: 14px; }

    /* دکمه خرید و مشاهده در کارت‌های «گزینه‌های دیگر» زیر هم قرار بگیرند */
    .product-detail .product-card__actions { flex-direction: column; }
}