/* چشمک‌زدنِ نشانِ اکانت وقتی کاربر VIP نیست، برای جذب توجه به خریدِ اشتراک */
      @keyframes accountBadgePulse {
        0%,
        100% {
          box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.55);
        }
        50% {
          box-shadow: 0 0 0 7px rgba(212, 175, 55, 0);
        }
      }
      #account-badge.is-not-vip #account-circle {
        animation: accountBadgePulse 1.8s ease-in-out infinite;
        cursor: pointer;
      }
      #account-badge.is-vip #account-circle {
        cursor: pointer;
      }

      /* برچسبِ وضعیتِ VIP، زیرِ آواتار — نسخه‌ی ساده و تک‌رنگ: بدون گرادیانِ
         چندتکه و بدون جلوه‌ی درخششِ متحرک؛ آیکون، متن و چیپِ روزها همه با
         یه line-height و align-items یکسان تو یه ردیف، دقیقاً هم‌ارتفاع.
         عرضش هم دقیقاً برابرِ عرضِ ردیفِ زیرشه (دایره‌ی لول ۴۴px + gap ۱۲px +
         حداکثرِ عرضِ نوارِ پیشرفت ۱۵۵px = ۲۱۱px)، و چون هردو تو همون
         کانتینرِ سایدبار وسط‌چین می‌شن، لبه‌ی چپ/راستشون دقیقاً روی هم می‌افته. */
      #vip-status-tag {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        gap: 5px;
        width: 211px;
        height: 24px;
        max-width: 100%;
        box-sizing: border-box;
        margin: 2px auto 10px;
        padding: 0 10px;
        border-radius: 999px;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.2px;
        white-space: nowrap;
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
      }
      #vip-status-tag:hover {
        transform: translateY(-1px);
      }
      /* آیکون، متن و چیپِ روزها: سه فرزندِ کنارِ هم. آیکونِ تاج (فونت‌آیکون)
         جوهرش کاملاً وسطِ باکسشه، ولی متن‌ها چون حروف‌ان، فونت یه فضای
         خالیِ دیسندر ته باکسشون رزرو می‌کنه و همین باعث می‌شه جوهرِ متن از
         وسط پایین‌تر بشینه. برای اینکه همه‌ی متن‌ها (VIP، عددِ روزها، و
         «روز مانده») دقیقاً هم‌ارتفاع دیده بشن، به همه‌شون یکسان و مستقیم
         (نه روی کانتینرِ چیپ که باعثِ جمع‌شدنِ دوباره‌ی آفست‌ها می‌شد) همون
         یه آفستِ رو به بالا اعمال می‌شه؛ دیگه نیازی به آفست‌های جداگانه‌ی
         عدد/واحد نیست. */
      #vip-status-tag i,
      #vip-tag-text,
      #vip-tag-days-chip {
        display: inline-flex;
        align-items: center;
        line-height: 1;
      }
      #vip-tag-text,
      #vip-tag-days-num {
        position: relative;
        top: -0.45em;
      }
      /* «روز مانده» به‌خاطرِ فضای دیسندرِ حروفِ فارسیش کمی پایین‌تر از خطِ
         VIP/عدد می‌شینه؛ همین یه تکه یه آفستِ اضافه‌ی رو به بالا لازم داره. */
      #vip-tag-days-unit {
        position: relative;
        top: calc(-0.45em - 4.3px);
      }
      #vip-status-tag i {
        font-size: 0.65rem;
      }
      #vip-tag-text {
        font-size: 0.65rem;
      }

      #vip-status-tag.vip-tag--off {
        background: rgba(212, 175, 55, 0.1);
        border: 1px solid rgba(212, 175, 55, 0.5);
        color: #f0cf72;
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.12);
      }
      #vip-status-tag.vip-tag--on {
        background: rgba(212, 175, 55, 0.1);
        border: 1px solid rgba(212, 175, 55, 0.5);
        color: #f0cf72;
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.12);
      }

      /* چیپِ «روز باقی‌مانده» — بک‌گراندِ جدا نداره، هم‌رنگِ حالتِ ساده/
         نیمه‌شفافِ بقیه‌ی باکسه؛ فقط با یه رنگِ طلاییِ روشن از بقیه جدا می‌شه. */
      #vip-tag-days-chip {
        display: none;
        gap: 3px;
        font-size: 0.65rem;
        font-weight: 800;
      }
      #vip-tag-days-chip b,
      #vip-tag-days-unit {
        display: inline-flex;
        align-items: center;
        line-height: 1;
        font-size: 0.65rem;
        color: #f0cf72;
      }
      #vip-tag-days-chip b {
        font-weight: 900;
        color: #ffe9a8;
      }

      /* کارتِ موجودی — یک ردیفِ فشرده: برچسب+مبلغ (اول، سمتِ راست چون
         صفحه rtl هست) و کنارش یه دکمه‌ی کوچیکِ بیضی‌شکلِ «افزایش موجودی»
         (به‌جای دکمه‌ی تمام‌عرضِ قبلی)، هم‌خانواده با گردیِ نوارِ پیشرفت و
         برچسبِ VIP. */
      #balance-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        width: 100%;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        /* پدینگِ سمتِ راست (شروعِ ردیف در rtl) دقیقاً ۲۵px هست، عینِ
           پدینگِ آیتم‌های زیرش (.sidebar-links li a)، تا آیکونِ کیف‌پول
           درست زیرِ آیکون‌های «جعبه جایزه»/«چالش‌ها» و... بشینه. */
        /* پدینگِ سمتِ راست ۲۵px هست (هم‌ترازِ آیتم‌های زیرش)، و پدینگِ سمتِ چپ
           ۲۳.۵px هست تا دایره‌ی «+» دقیقاً زیرِ دایره‌ی نشانِ لول (که با
           همون فرمولِ پدینگِ سایدبار-هدر ۲۰px + نیمِ فضای خالیِ وسط‌چینیِ
           ردیفِ لول ۳.۵px حساب شده) بشینه. */
        padding: 10px 25px 10px 20px;
      }
      #balance-container .balance-top {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        cursor: pointer;
      }
      #balance-container .balance-label {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #cfcfcf;
        font-size: 0.8rem;
      }
      #balance-container .balance-label i {
        width: 20px;
        text-align: center;
      }
      #balance-container .balance-amount {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #ffb703;
        font-weight: bold;
        font-size: 0.95rem;
      }
      /* دکمه‌ی افزایشِ موجودی — به‌جای دکمه‌ی متنیِ قبلی، یه دکمه‌ی دایره‌ایِ
         خفنِ فقط با علامتِ +: حلقه‌ی طلاییِ درخشان دورش، ته‌رنگِ بنفشِ
         شیشه‌ای وسطش (هم‌خانواده با نشانِ لول)، و همون افکتِ برقِ موربی که
         مدام روش سر می‌خوره. */
      #add-balance-btn {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        box-sizing: border-box;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: conic-gradient(from 210deg, #8a5a00, #ffb703 35%, #ffe9b0 55%, #ffb703 75%, #8a5a00);
        cursor: pointer;
        box-shadow: 0 0 10px rgba(255, 183, 3, 0.45);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        animation: addBalanceGlow 2.6s ease-in-out infinite;
      }
      #add-balance-btn:hover {
        transform: translateY(-1px) scale(1.05);
      }
      #add-balance-btn .add-balance-inner {
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        border-radius: 50%;
        background: radial-gradient(circle at 50% 32%, #3d2168 0%, #221041 65%, #170a2c 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
          inset 0 2px 3px rgba(255, 255, 255, 0.08),
          inset 0 -4px 8px rgba(0, 0, 0, 0.55);
      }
      #add-balance-btn i {
        color: #ffe9b0;
        font-size: 0.85rem;
        text-shadow: 0 0 6px rgba(255, 183, 3, 0.6);
      }
      @keyframes addBalanceGlow {
        0%,
        100% {
          box-shadow: 0 0 8px rgba(255, 183, 3, 0.35);
        }
        50% {
          box-shadow: 0 0 16px rgba(255, 183, 3, 0.85);
        }
      }
      #add-balance-btn::after {
        content: "";
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient(
          120deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.85) 50%,
          rgba(255, 255, 255, 0) 100%
        );
        transform: skewX(-20deg);
        animation: addBalanceShine 2.6s ease-in-out infinite;
        pointer-events: none;
      }
      @keyframes addBalanceShine {
        0% {
          left: -60%;
        }
        55%,
        100% {
          left: 130%;
        }
      }

      /* یوزرنیمِ سایدبار: به‌جای متنِ سفیدِ ساده، یه گرادیانِ طلاییِ ظریف با
         درخششِ نرم پشتش، هم‌خونی با تمِ VIP/طلاییِ بقیه‌ی سایدبار. */
      #sidebar-username {
        font-size: 1.25rem;
        font-weight: 800;
        letter-spacing: 0.3px;
        margin-bottom: 8px;
        background: linear-gradient(135deg, #fff6da 0%, #ffd873 45%, #d4af37 85%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 2px 14px rgba(212, 175, 55, 0.35);
      }

      /* ==========================================================
         مودالِ VIP — بازطراحیِ کامل با تمِ «مدارهای اتمی»: هرچی پلن
         طولانی‌تر، مدارهای بیشتری دورِ تاجش می‌چرخه (هم‌خونی با مفهومِ
         «سطح/لول» که تویِ خودِ فیزیک هم هست: لایه‌های انرژی/الکترون).
         رنگ و فونت هم‌خانواده‌ی بقیه‌ی سایت (طلایی/بنفش، Orbitron برایِ
         عددها) تا حسِ یه بخشِ جدا از سایت رو نده.
      ========================================================== */
      #vipModal .vip-modal-card {
        position: relative;
        background: radial-gradient(circle at 50% -10%, #2c1a4e 0%, #150c26 55%, #0c0715 100%);
        padding: 34px 26px 26px;
        border-radius: 22px;
        text-align: center;
        width: 92%;
        max-width: 480px;
        border: 1px solid rgba(212, 175, 55, 0.35);
        color: white;
        box-shadow:
          0 25px 60px rgba(0, 0, 0, 0.6),
          0 0 40px rgba(124, 92, 255, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.04);
        overflow: hidden;
      }
      /* گردِ غبارِ کهکشانیِ کم‌رنگ پشتِ کارت، فقط برایِ عمق - خیلی محو */
      #vipModal .vip-modal-card::before {
        content: "";
        position: absolute;
        top: -60px;
        right: -40px;
        width: 220px;
        height: 220px;
        background: radial-gradient(circle, rgba(124, 92, 255, 0.25) 0%, rgba(124, 92, 255, 0) 70%);
        pointer-events: none;
      }
      #vipModal .vip-modal-card::after {
        content: "";
        position: absolute;
        bottom: -70px;
        left: -50px;
        width: 240px;
        height: 240px;
        background: radial-gradient(circle, rgba(255, 183, 3, 0.16) 0%, rgba(255, 183, 3, 0) 70%);
        pointer-events: none;
      }

      #vipModal .vip-modal-icon {
        position: relative;
        width: 54px;
        height: 54px;
        margin: 0 auto 14px;
        border-radius: 50%;
        background: conic-gradient(from 210deg, #8a5a00, #ffb703 35%, #ffe9b0 55%, #ffb703 75%, #8a5a00);
        display: flex;
        align-items: center;
        justify-content: center;
        animation: vipIconGlow 2.6s ease-in-out infinite;
      }
      #vipModal .vip-modal-icon-inner {
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        border-radius: 50%;
        background: radial-gradient(circle at 50% 32%, #3d2168 0%, #221041 65%, #170a2c 100%);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #vipModal .vip-modal-icon-inner i {
        font-size: 1.3rem;
        color: #ffe9b0;
        text-shadow: 0 0 10px rgba(255, 183, 3, 0.7);
      }
      @keyframes vipIconGlow {
        0%,
        100% {
          box-shadow: 0 0 10px rgba(255, 183, 3, 0.35);
        }
        50% {
          box-shadow: 0 0 22px rgba(255, 183, 3, 0.8);
        }
      }

      #vipModal .vip-modal-title {
        position: relative;
        font-family: "Vazirmatn", "Tahoma", sans-serif;
        font-size: 1.35rem;
        font-weight: 800;
        margin-bottom: 6px;
        background: linear-gradient(135deg, #fff6da 0%, #ffd873 45%, #d4af37 85%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
      }
      #vipModal .vip-modal-subtitle {
        position: relative;
        color: #b3a9c9;
        font-size: 0.85rem;
        margin-bottom: 26px;
      }

      #vipModal .vip-plans-row {
        position: relative;
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
      }

      #vipModal .vip-plan-card {
        position: relative;
        flex: 1 1 120px;
        max-width: 140px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 18px 8px 14px;
        border: none;
        border-radius: 16px;
        cursor: pointer;
        font-family: inherit;
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
        border: 1px solid rgba(212, 175, 55, 0.25);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
      }
      #vipModal .vip-plan-card:hover,
      #vipModal .vip-plan-card:focus-visible {
        transform: translateY(-5px);
        border-color: rgba(255, 183, 3, 0.75);
        box-shadow: 0 10px 24px rgba(255, 183, 3, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }

      /* برچسبِ «بهترین ارزش» رویِ پلنِ ۱۲ماهه */
      #vipModal .vip-plan-badge {
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg, #ffe9b0, #ffb703 60%, #d4af37);
        color: #241c05;
        font-size: 0.58rem;
        font-weight: 800;
        padding: 3px 9px;
        border-radius: 999px;
        white-space: nowrap;
        box-shadow: 0 2px 8px rgba(255, 183, 3, 0.5);
      }

      /* مدارهای اتمی: هرچی پلن طولانی‌تر، حلقه‌ی مدارِ بیشتر و درخشان‌تر -
         ۱ماهه یه مدار، ۳ماهه دو مدار، ۱۲ماهه سه مدار (هم‌ارزِ لایه‌های
         انرژیِ اتم)، دورِ تاجِ طلایی می‌چرخن. */
      #vipModal .vip-orbit {
        position: relative;
        width: 62px;
        height: 62px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #vipModal .vip-orbit-ring {
        position: absolute;
        border: 1px solid rgba(255, 183, 3, 0.35);
        border-radius: 50%;
      }
      #vipModal .vip-orbit-ring.r1 {
        width: 62px;
        height: 62px;
        animation: vipOrbitSpin 7s linear infinite;
      }
      #vipModal .vip-orbit-ring.r2 {
        width: 46px;
        height: 46px;
        animation: vipOrbitSpin 5s linear infinite reverse;
      }
      #vipModal .vip-orbit-ring.r3 {
        width: 30px;
        height: 30px;
        animation: vipOrbitSpin 3.4s linear infinite;
      }
      #vipModal .vip-orbit-ring::after {
        content: "";
        position: absolute;
        top: -2.5px;
        right: 50%;
        width: 5px;
        height: 5px;
        margin-right: -2.5px;
        border-radius: 50%;
        background: #ffe9b0;
        box-shadow: 0 0 6px 1.5px rgba(255, 183, 3, 0.85);
      }
      @keyframes vipOrbitSpin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      #vipModal .vip-orbit-core {
        position: relative;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: conic-gradient(from 210deg, #8a5a00, #ffb703 35%, #ffe9b0 55%, #ffb703 75%, #8a5a00);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
      }
      #vipModal .vip-orbit-core i {
        font-size: 0.62rem;
        color: #3d1f00;
      }

      #vipModal .vip-plan-duration {
        font-family: "Orbitron", "Vazirmatn", sans-serif;
        font-size: 1.05rem;
        font-weight: 800;
        background: linear-gradient(180deg, #fff6da 0%, #ffb703 65%, #e08e00 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
      }
      #vipModal .vip-plan-caption {
        font-size: 0.62rem;
        color: #9c93b0;
      }

      #vipModal .vip-modal-close {
        position: absolute;
        top: 14px;
        left: 14px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.04);
        color: #b3a9c9;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        cursor: pointer;
        transition: 0.25s;
        z-index: 2;
      }
      #vipModal .vip-modal-close:hover {
        background: rgba(255, 183, 3, 0.15);
        border-color: rgba(255, 183, 3, 0.5);
        color: #ffe9b0;
      }

      @media (max-width: 380px) {
        #vipModal .vip-plan-card {
          max-width: 96px;
          padding: 14px 4px 10px;
        }
        #vipModal .vip-orbit {
          width: 52px;
          height: 52px;
        }
      }

      /* ==========================================================
         مودالِ «افزایشِ موجودی» (خریدِ سکه‌یِ FZ) — هم‌خانواده با مودالِ
         VIP: همون زمینه‌ی کهکشانیِ بنفش/طلایی، همون حسِ پرمیوم، ولی هر
         بسته با رنگِ خودِ سکه‌ش (برنز/نقره/طلا) بدرخشه.
      ========================================================== */
      #balanceModal .fz-modal-card {
        position: relative;
        background: radial-gradient(circle at 50% -10%, #2c1a4e 0%, #150c26 55%, #0c0715 100%);
        padding: 34px 26px 26px;
        border-radius: 22px;
        text-align: center;
        width: 92%;
        max-width: 500px;
        border: 1px solid rgba(212, 175, 55, 0.35);
        color: white;
        box-shadow:
          0 25px 60px rgba(0, 0, 0, 0.6),
          0 0 40px rgba(124, 92, 255, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.04);
        overflow: hidden;
      }
      #balanceModal .fz-modal-card::before {
        content: "";
        position: absolute;
        top: -60px;
        right: -40px;
        width: 220px;
        height: 220px;
        background: radial-gradient(circle, rgba(124, 92, 255, 0.25) 0%, rgba(124, 92, 255, 0) 70%);
        pointer-events: none;
      }
      #balanceModal .fz-modal-card::after {
        content: "";
        position: absolute;
        bottom: -70px;
        left: -50px;
        width: 240px;
        height: 240px;
        background: radial-gradient(circle, rgba(255, 183, 3, 0.16) 0%, rgba(255, 183, 3, 0) 70%);
        pointer-events: none;
      }

      #balanceModal .fz-modal-icon {
        position: relative;
        width: 54px;
        height: 54px;
        margin: 0 auto 14px;
        border-radius: 50%;
        background: conic-gradient(from 210deg, #8a5a00, #ffb703 35%, #ffe9b0 55%, #ffb703 75%, #8a5a00);
        display: flex;
        align-items: center;
        justify-content: center;
        animation: vipIconGlow 2.6s ease-in-out infinite;
      }
      #balanceModal .fz-modal-icon-inner {
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        border-radius: 50%;
        background: radial-gradient(circle at 50% 32%, #3d2168 0%, #221041 65%, #170a2c 100%);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #balanceModal .fz-modal-icon-inner i {
        font-size: 1.3rem;
        color: #ffe9b0;
        text-shadow: 0 0 10px rgba(255, 183, 3, 0.7);
      }

      #balanceModal .fz-modal-title {
        position: relative;
        font-family: "Vazirmatn", "Tahoma", sans-serif;
        font-size: 1.35rem;
        font-weight: 800;
        margin-bottom: 6px;
        background: linear-gradient(135deg, #fff6da 0%, #ffd873 45%, #d4af37 85%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
      }
      #balanceModal .fz-modal-subtitle {
        position: relative;
        color: #b3a9c9;
        font-size: 0.85rem;
        margin-bottom: 26px;
      }

      #balanceModal .fz-plans-row {
        position: relative;
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
      }

      #balanceModal .fz-package-card {
        position: relative;
        flex: 1 1 130px;
        max-width: 150px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 20px 10px 16px;
        border-radius: 16px;
        cursor: pointer;
        text-decoration: none;
        font-family: inherit;
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
        border: 1px solid rgba(212, 175, 55, 0.25);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
      }
      #balanceModal .fz-package-card:hover,
      #balanceModal .fz-package-card:focus-visible {
        transform: translateY(-6px);
      }

      /* رنگِ هرکارت بر اساسِ فلزِ سکه‌ش */
      #balanceModal .fz-package-card.tier-bronze:hover {
        border-color: rgba(205, 127, 50, 0.85);
        box-shadow: 0 10px 24px rgba(205, 127, 50, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }
      #balanceModal .fz-package-card.tier-silver:hover {
        border-color: rgba(197, 200, 209, 0.85);
        box-shadow: 0 10px 24px rgba(197, 200, 209, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }
      #balanceModal .fz-package-card.tier-gold {
        border-color: rgba(255, 183, 3, 0.4);
      }
      #balanceModal .fz-package-card.tier-gold:hover {
        border-color: rgba(255, 183, 3, 0.85);
        box-shadow: 0 10px 26px rgba(255, 183, 3, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }


      /* قاب مدال‌گونه‌ی سکه: یه حلقه‌ی نورانیِ ثابت دورِ عکسِ سکه که فلزِ
         خودشو داره؛ زیرش هم یه درخششِ نرم می‌چرخه */
      #balanceModal .fz-coin-frame {
        position: relative;
        width: 74px;
        height: 74px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #balanceModal .fz-coin-frame::before {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        opacity: 0.55;
        animation: vipOrbitSpin 6s linear infinite;
      }
      #balanceModal .fz-package-card.tier-bronze .fz-coin-frame::before {
        background: conic-gradient(from 0deg, rgba(205, 127, 50, 0) 0%, rgba(205, 127, 50, 0.9) 12%, rgba(205, 127, 50, 0) 30%);
      }
      #balanceModal .fz-package-card.tier-silver .fz-coin-frame::before {
        background: conic-gradient(from 0deg, rgba(197, 200, 209, 0) 0%, rgba(197, 200, 209, 0.95) 12%, rgba(197, 200, 209, 0) 30%);
      }
      #balanceModal .fz-package-card.tier-gold .fz-coin-frame::before {
        background: conic-gradient(from 0deg, rgba(255, 183, 3, 0) 0%, rgba(255, 233, 176, 1) 12%, rgba(255, 183, 3, 0) 30%);
      }
      #balanceModal .fz-coin-frame img {
        position: relative;
        z-index: 1;
        width: 62px;
        height: 62px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
        transition: transform 0.25s ease;
      }
      #balanceModal .fz-package-card:hover .fz-coin-frame img {
        transform: scale(1.08) rotate(-4deg);
      }

      #balanceModal .fz-package-amount {
        font-family: "Orbitron", "Vazirmatn", sans-serif;
        font-size: 1.05rem;
        font-weight: 800;
        direction: ltr;
      }
      #balanceModal .fz-package-card.tier-bronze .fz-package-amount {
        background: linear-gradient(180deg, #f0c299 0%, #cd7f32 65%, #8a5324 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
      }
      #balanceModal .fz-package-card.tier-silver .fz-package-amount {
        background: linear-gradient(180deg, #f4f6f8 0%, #c5c8d1 65%, #8b8f99 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
      }
      #balanceModal .fz-package-card.tier-gold .fz-package-amount {
        background: linear-gradient(180deg, #fff6da 0%, #ffb703 65%, #e08e00 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
      }
      #balanceModal .fz-package-caption {
        font-size: 0.62rem;
        color: #9c93b0;
      }

      /* نشانِ تخفیف به‌شکلِ برچسبِ موجی/مهرگونه (seal) روی گوشه‌ی کارت */
      @keyframes fzDiscountPop {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.08);
        }
      }
      .fz-discount-corner {
        position: absolute !important;
        top: -10px;
        right: -10px;
        width: 42px !important;
        height: 42px !important;
        max-width: 42px;
        max-height: 42px;
        min-width: 42px;
        min-height: 42px;
        box-sizing: border-box;
        z-index: 3;
        filter: drop-shadow(0 3px 6px rgba(230, 57, 70, 0.55));
        animation: fzDiscountPop 1.6s ease-in-out infinite;
      }
      .fz-discount-corner svg {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 42px !important;
        height: 42px !important;
        max-width: none;
      }
      .fz-discount-corner span {
        position: relative;
        z-index: 1;
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        color: #fff;
        text-align: center;
        direction: rtl;
      }
      .fz-discount-corner .fz-discount-percent {
        font-size: 0.85rem;
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
      }

      /* بخشِ قیمت: قیمتِ قبل با خط‌خورده، قیمتِ جدید پررنگ */
      .fz-package-price {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1px;
        margin-top: 2px;
      }
      .fz-price-old {
        font-size: 0.68rem;
        color: #8a8398;
        text-decoration: line-through;
        text-decoration-color: rgba(230, 57, 70, 0.85);
        text-decoration-thickness: 1.5px;
        opacity: 0.8;
      }
      .fz-price-new {
        font-size: 0.8rem;
        font-weight: 800;
      }
      #balanceModal .fz-package-card.tier-bronze .fz-price-new {
        color: #e3b088;
      }
      #balanceModal .fz-package-card.tier-silver .fz-price-new {
        color: #e8eaf0;
      }
      #balanceModal .fz-package-card.tier-gold .fz-price-new {
        color: #ffd76b;
      }
      #vipModal .fz-price-new {
        color: #ffd76b;
      }

      #balanceModal .fz-modal-close {
        position: absolute;
        top: 14px;
        left: 14px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.04);
        color: #b3a9c9;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        cursor: pointer;
        transition: 0.25s;
        z-index: 2;
      }
      #balanceModal .fz-modal-close:hover {
        background: rgba(255, 183, 3, 0.15);
        border-color: rgba(255, 183, 3, 0.5);
        color: #ffe9b0;
      }

      @media (max-width: 380px) {
        #balanceModal .fz-package-card {
          max-width: 104px;
          padding: 16px 6px 12px;
        }
        #balanceModal .fz-coin-frame {
          width: 60px;
          height: 60px;
        }
        #balanceModal .fz-coin-frame img {
          width: 50px;
          height: 50px;
        }
      }
    

/* ===================== Block Separator ===================== */

      @keyframes scrollAnnounce {
        0% {
          left: -50%;
        } /* شروع از کاملاً بیرون سمت چپ */
        100% {
          left: 100%;
        } /* پایان در کاملاً بیرون سمت راست */
      }

      /* وقتی موس روی نوار میره، حرکت متوقف بشه تا کاربر بتونه بخونه */
      #announcementBar:hover #announcementTrack {
        animation-play-state: paused;
      }

      /* خبرهایی که یک فایل/فیلم/آزمایش پیوست دارن (لینک قابل‌کلیک) - به‌جای یک
         زیرخط ساده، یک نشانِ طلاییِ ملایم و همیشه‌ضربان‌دار دورشون هست که چشم رو
         جلب می‌کنه، و یک فلشِ کوچیکِ در حال پرش هم نشون می‌ده که «اینجا رو بزن».
         موقع هاور هم علاوه بر توقفِ کلیِ نوار (بالا)، خودِ لینک درخشان‌تر/بزرگ‌تر می‌شه. */
      .announcement-link {
        position: relative;
        display: inline-block;
        color: inherit;
        text-decoration: none;
        padding: 3px 10px;
        border-radius: 20px;
        background: rgba(255, 183, 3, 0.16);
        border: 1px solid rgba(255, 183, 3, 0.5);
        transition:
          background 0.25s ease,
          box-shadow 0.25s ease,
          transform 0.25s ease,
          border-color 0.25s ease;
        animation: annLinkPulse 1.8s ease-in-out infinite;
      }
      .announcement-link:hover {
        background: rgba(255, 183, 3, 0.32);
        border-color: #ffd700;
        box-shadow: 0 0 14px rgba(255, 215, 0, 0.6);
        transform: scale(1.07);
        animation-play-state: paused; /* پالسِ همیشگی هم موقع هاور نگه داشته بشه رو مقدار اوج */
      }
      @keyframes annLinkPulse {
        0%,
        100% {
          box-shadow: 0 0 0 rgba(255, 215, 0, 0);
        }
        50% {
          box-shadow: 0 0 9px rgba(255, 215, 0, 0.5);
        }
      }
    

/* ===================== Block Separator ===================== */

      /* دکمه‌ی بستنِ اختصاصیِ مودال «ورود به حساب» — دقیقاً هم‌استایل با
         دکمه‌ی بستنِ مودال «بانک سوال» (qb-modal-close) و مودال «ویدیو»
         (video-modal-close)، ولی کاملاً مستقل و ایزوله تا با کلاسِ مشترکِ
         close-btن (که توی چند فایل CSS جدا تعریف شده و کشیده/بیضی‌شکل
         می‌شه) تداخل نکنه. */
      .login-modal-close {
        position: absolute;
        top: 18px;
        right: 18px;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 183, 3, 0.12);
        border: 1.5px solid #ffb703;
        color: #ffb703;
        cursor: pointer;
        transition:
          transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
          background 0.25s ease,
          box-shadow 0.25s ease,
          color 0.25s ease;
        z-index: 5;
      }
      .login-modal-close svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
        transition: transform 0.25s ease;
      }
      .login-modal-close:hover {
        background: #ffb703;
        color: #1a1a2e;
        box-shadow: 0 0 16px rgba(255, 183, 3, 0.55);
        transform: scale(1.12);
      }
      .login-modal-close:hover svg {
        transform: rotate(90deg);
      }
      .login-modal-close:active {
        transform: scale(0.9);
      }

      /* لینک‌های «ثبت‌نام کنید» / «وارد شو» زیرِ دکمه‌ی اصلیِ مودال‌های
         ورود و ثبت‌نام — به‌جای متنِ ساده‌ی آبیِ زیرخط‌دار، یه بج/چیپِ
         طلایی-بنفشِ جذاب با آیکون و افکتِ هاورِ فنری. */
      .auth-switch-wrap {
        text-align: center;
        margin-top: 16px;
        font-size: 14px;
        color: #6b6b80;
      }
      .auth-switch-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-right: 4px;
        padding: 5px 14px;
        border-radius: 20px;
        font-weight: bold;
        font-size: 13px;
        color: #fb8500;
        background: linear-gradient(
          135deg,
          rgba(255, 183, 3, 0.14),
          rgba(251, 133, 0, 0.14)
        );
        border: 1.5px solid rgba(255, 183, 3, 0.45);
        text-decoration: none;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      .auth-switch-link i {
        font-size: 11px;
      }
      .auth-switch-link:hover {
        background: linear-gradient(135deg, #ffb703, #fb8500);
        color: #241442;
        border-color: transparent;
        box-shadow: 0 4px 14px rgba(255, 183, 3, 0.5);
        transform: translateY(-2px) scale(1.06);
      }
      .auth-switch-link:active {
        transform: translateY(0) scale(0.96);
      }
    

/* ===================== Block Separator ===================== */

      /* دکمه‌ی بستنِ اختصاصیِ مودال «ویدیو» — مستقل و ایزوله، دقیقاً هم‌استایل
         با دکمه‌ی بستنِ مودال «بانک سوال» (qb-modal-close)، تا از تداخل کلاس
         مشترک close-btn بین sidebar.css و videos.css و login.css جلوگیری بشه. */
      .video-modal-close {
        position: absolute;
        top: 18px;
        right: 18px;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 183, 3, 0.12);
        border: 1.5px solid #ffb703;
        color: #ffb703;
        cursor: pointer;
        transition:
          transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
          background 0.25s ease,
          box-shadow 0.25s ease,
          color 0.25s ease;
        z-index: 10000;
      }
      .video-modal-close svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
        transition: transform 0.25s ease;
      }
      /* افکت هاورِ نرم و فنری شبیه دکمه‌های iOS: قبل از کلیک، با نزدیک شدن
         ماوس کمی بزرگ‌تر و درخشان‌تر می‌شه؛ با کلیک (active) کمی جمع می‌شه
         (دقیقاً همون حسِ فشرده‌شدنِ دکمه‌های اپل). */
      .video-modal-close:hover {
        background: #ffb703;
        color: #1a1a2e;
        box-shadow: 0 0 16px rgba(255, 183, 3, 0.55);
        transform: scale(1.12);
      }
      .video-modal-close:hover svg {
        transform: rotate(90deg);
      }
      .video-modal-close:active {
        transform: scale(0.9);
      }

      /* --- رفع مشکلِ گم شدنِ دکمه‌ی بستن در حالتِ فول‌اسکرینِ دستی ---
         وقتی #playerWrapper کلاسِ fake-fullscreen می‌گیره، position: fixed
         با z-index: 999999 روی کل صفحه پیدا می‌کنه؛ دکمه‌ی بستن چون position:
         absolute نسبت به .modal-content بود (که خودش عادی/غیرفیکس هست)، زیرِ
         این لایه‌ی فول‌اسکرین گم می‌شد. با این کلاس (که JS هنگام ورود/خروج از
         فول‌اسکرین روی خودِ دکمه اضافه/حذف می‌کنه) دکمه هم نسبت به viewport
         فیکس می‌شه و z-index بالاتری می‌گیره تا همیشه بالای پلیر بمونه. */
      .video-modal-close.fs-active {
        position: fixed !important;
        top: 18px;
        right: 18px;
        z-index: 1000000 !important;
      }

      /* Tap overlay: single tap toggles the iOS-style control group below */
      #playerClickOverlay {
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
      }

      /* iOS-style glass control group (skip-back / play-pause / skip-forward) */
      #playerTapControls {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 46px;
        z-index: 15;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 28px;
        pointer-events: none;
        direction: ltr; /* keep skip-back on the left / skip-forward on the right regardless of page RTL */
      }
      .tap-btn {
        pointer-events: none;
        opacity: 0;
        transform: scale(0.75);
        transition: opacity 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
          transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
          background 0.15s ease;
        background: rgba(255, 255, 255, 0.16);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.28);
        color: #fff;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
        -webkit-tap-highlight-color: transparent;
      }
      #playerTapControls.visible .tap-btn {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
      }
      /* .pressed is toggled via JS on touchstart/mousedown for reliable
         feedback on mobile, since :active is unreliable on iOS Safari without
         extra touch handlers. */
      #playerTapControls.visible .tap-btn.pressed {
        transform: scale(0.88);
        background: rgba(255, 255, 255, 0.3);
      }
      .tap-btn-skip {
        width: 54px;
        height: 54px;
        font-size: 9px;
        gap: 1px;
      }
      .tap-btn-skip i {
        font-size: 17px;
      }
      .tap-btn-play {
        width: 74px;
        height: 74px;
        font-size: 26px;
      }
      .tap-btn-play i {
        margin-inline-start: 2px; /* optical centering for the play triangle */
      }
      .tap-btn-play i.fa-pause {
        margin-inline-start: 0;
      }

      /* Bottom bar buttons: same reliable press feedback as the tap-controls */
      #playerControlsBar button {
        -webkit-tap-highlight-color: transparent;
        transition: color 0.15s ease, transform 0.15s ease;
      }
      #playerControlsBar button.pressed {
        color: #ffb703;
        transform: scale(0.85);
      }

      /* ---------- Playback speed picker ---------- */
      #playerSpeedMenu {
        position: absolute;
        bottom: 54px;
        z-index: 40;
        background: rgba(20, 18, 30, 0.92);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        padding: 6px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 64px;
        opacity: 0;
        transform: translateY(6px) scale(0.95);
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        direction: ltr;
      }
      #playerSpeedMenu.open {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
      }
      #playerSpeedMenu button {
        background: transparent;
        border: none;
        color: #eee;
        font-size: 12.5px;
        padding: 7px 10px;
        border-radius: 7px;
        cursor: pointer;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s ease, color 0.15s ease;
      }
      #playerSpeedMenu button.active {
        color: #1a1a2e;
        background: #ffb703;
        font-weight: bold;
      }
      #playerSpeedMenu button.pressed {
        background: rgba(255, 255, 255, 0.15);
      }
      #playerSpeedMenu button.active.pressed {
        background: #ffb703;
      }

      /* اسپینر لودینگِ بارگذاری امن ویدیو */

      .player-loading-spinner {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 3px solid rgba(255, 183, 3, 0.25);
        border-top-color: #ffb703;
        animation: player-spin 0.8s linear infinite;
      }
      @keyframes player-spin {
        to {
          transform: rotate(360deg);
        }
      }

      /* حذف آیکون‌های اختصاصیِ سافاری/iOS روی ویدیو (فول‌اسکرینِ بومی،
         Picture-in-Picture و AirPlay) تا فقط دکمه‌ی فول‌اسکرین خودمون بمونه
         و پخش همیشه داخل خودِ صفحه (Inline) انجام بشه، نه پلیر بومی iOS */
      #player::-webkit-media-controls-fullscreen-button,
      #player::-webkit-media-controls-picture-in-picture-button,
      #player::-webkit-media-controls-panel-container .airplay-button,
      #player::-internal-media-controls-overflow-button {
        display: none !important;
      }

      /* حالتِ فول‌اسکرینِ دستی برای آیفون/سافاری که Fullscreen API استاندارد
         رو برای یک div ساده قبول نمی‌کنه (برخلاف کروم/اندروید که همون CSS
         بالا کافیه). چون همچنان تو DOM خودمون می‌مونیم، واترمارک و
         کلیک/سیک دست‌ساز کار می‌کنن؛ برخلاف فول‌اسکرینِ بومیِ خودِ ویدیو. */
      #playerWrapper.fake-fullscreen {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        z-index: 999999 !important;
        background: #000;
        display: flex !important;
        align-items: center;
        justify-content: center;
      }
      #playerWrapper.fake-fullscreen video {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
      }

      /* ---------- Player controls bar (progress, play/pause, volume, speed, fullscreen) ---------- */
      #playerControlsBar {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 46px;
        z-index: 30;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0 6px;
        direction: ltr;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
        box-sizing: border-box;
        overflow: hidden;
        max-width: 100%;
      }
      #playerControlsBar button {
        background: transparent;
        border: none;
        color: #fff;
        cursor: pointer;
        font-size: 15px;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        padding: 0;
      }
      #playerControlsBar button:hover {
        color: #ffb703;
      }
      #playerProgress {
        flex: 1 1 0%;
        min-width: 24px;
        -webkit-appearance: none;
        appearance: none;
        height: 4px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.3);
        outline: none;
        cursor: pointer;
        margin: 0 2px;
      }
      #playerProgress::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: #ffb703;
        cursor: pointer;
        margin-top: -4.5px;
      }
      #playerProgress::-moz-range-thumb {
        width: 13px;
        height: 13px;
        border: none;
        border-radius: 50%;
        background: #ffb703;
        cursor: pointer;
      }
      #playerTimeLabel {
        flex: 0 0 auto;
        color: #eee;
        font-size: 10px;
        white-space: nowrap;
        min-width: 62px;
        text-align: center;
        direction: ltr;
        font-variant-numeric: tabular-nums;
      }
      #playerVolumeRange {
        -webkit-appearance: none;
        appearance: none;
        width: 46px;
        height: 4px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.3);
        outline: none;
        cursor: pointer;
        flex: 0 0 auto;
        transition: width 0.2s ease;
      }
      #playerVolumeRange::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #ffb703;
        cursor: pointer;
        margin-top: -3.5px;
      }
      #playerVolumeRange::-moz-range-thumb {
        width: 11px;
        height: 11px;
        border: none;
        border-radius: 50%;
        background: #ffb703;
        cursor: pointer;
      }
      #playerSpeedBtn {
        width: auto !important;
        min-width: 30px;
        font-size: 11px !important;
        font-weight: bold;
        padding: 0 3px !important;
      }
      @media (max-width: 400px) {
        #playerVolumeRange {
          width: 30px;
        }
        #playerTimeLabel {
          min-width: 48px;
          font-size: 9px;
        }
        #playerControlsBar {
          gap: 4px;
          padding: 0 4px;
        }
      }
    

/* ===================== Block Separator ===================== */

      /* دکمه‌ی بستنِ اختصاصیِ مودال «بانک سوال» — از کلاس مشترکِ close-btn
         عمداً استفاده نشده چون اون کلاس توی sidebar.css و videos.css و
         login.css هرکدوم جدا تعریف شده و روی هم تداخل می‌کنن (باعث می‌شد
         دکمه کشیده و بیضی‌شکل دربیاد). این نسخه کاملاً مستقل و ایزوله‌ست. */
      .qb-modal-close {
        position: absolute;
        top: 18px;
        right: 18px;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 183, 3, 0.12);
        border: 1.5px solid #ffb703;
        color: #ffb703;
        cursor: pointer;
        transition: all 0.25s ease;
        z-index: 5;
      }
      .qb-modal-close svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
        transition: transform 0.25s ease;
      }
      .qb-modal-close:hover {
        background: #ffb703;
        color: #1a1a2e;
        box-shadow: 0 0 16px rgba(255, 183, 3, 0.55);
      }
      .qb-modal-close:hover svg {
        transform: rotate(90deg);
      }