.class-login-page {
    min-height: calc(100vh - 180px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    position: relative;
    color: var(--text);
}

/* The course row and the class-quiz row must render boxes of the same
   size. .class-login-page is a centered flex column, so each .section-block
   otherwise sizes to its own content (the card images' intrinsic width) and
   the quiz row ends up narrower than the course row. Give both rows the
   same explicit width instead. */
.class-login-page .section-block {
    width: min(100%, 936px);
}

/* Same shrink-to-fit problem as above, but for the shared AdsBox component:
   .ads-banners is a direct child of this centered flex column, so on the
   azmoonestan/class-login pages it collapses to the banner image's intrinsic
   width (one narrow column) instead of filling the shell like it does on the
   home page. Stretch it to the full page width so the ad cards render at the
   exact same size as the home page. */
.class-login-page .ads-banners {
    width: 100%;
}

.azmoonestan-page #quizGrid .course-content h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.azmoonestan-page #quizGrid .course-content p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* همه آزمون‌ها داخل یک کادر نئون قرار می‌گیرند (هم‌سبک باکس نرم‌افزارهای
   کاربردی). فقط دو ردیف کارت در هر لحظه دیده می‌شود؛ ارتفاع نما با JS
   (ارتفاع کارت × ۲ + فاصله ردیف‌ها) تنظیم و بقیه با اسکرول داخلی پیمایش
   می‌شود. */
.azmoonestan-page .quiz-list-box {
    border: 1px solid #44e6ff;
    border-radius: 16px;
    padding: 12px;
    background: transparent;
    box-shadow: 0 0 8px rgba(68,230,255,.35), inset 0 0 16px rgba(68,230,255,.08);
}

/* اسکرول داخل کادر فعال می‌ماند اما خود نوار اسکرول پنهان است
   (Firefox با scrollbar-width و مرورگرهای WebKit با ::-webkit-scrollbar). */
.azmoonestan-page .quiz-list-box #quizGrid {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.azmoonestan-page .quiz-list-box #quizGrid::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

:root.light-theme .azmoonestan-page .quiz-list-box {
    border-color: rgba(38,121,160,.45);
    box-shadow: 0 0 10px rgba(38,121,160,.18), inset 0 0 16px rgba(38,121,160,.06);
}

.class-login-card {
    width: min(100%,936px);
    padding: 22px clamp(20px,4vw,50px) 28px;
    text-align: center;
    border: 1px solid rgba(107,193,255,.28);
    border-radius: 17px;
    background: linear-gradient(145deg,rgba(10,24,40,.9),rgba(5,13,25,.88));
    box-shadow: 0 20px 60px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.08),0 0 34px rgba(0,180,255,.1);
    backdrop-filter: blur(12px);
    margin-bottom: 0;
}

.class-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 10px 22px;
    border: 1px solid rgba(78,197,255,.45);
    border-radius: 20px;
    background: linear-gradient(100deg,rgba(255,55,111,.23),rgba(39,192,255,.14));
    box-shadow: 0 0 20px rgba(255,52,111,.22),inset 0 0 14px rgba(255,255,255,.06);
    font-size: 17px
}

    .class-live-badge strong {
        color: #ff5b87;
        letter-spacing: .04em;
        font-size: 20px
    }

    .class-live-badge i {
        width: 1px;
        height: 22px;
        background: rgba(220,235,255,.5)
    }

.class-live-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255,65,111,.3),0 0 13px #ff3e70;
    animation: class-live-pulse 2.4s ease-in-out infinite
}

@keyframes class-live-pulse {
    0%, 100% {
        opacity: .35;
        transform: scale(.82);
        box-shadow: 0 0 0 2px rgba(255,65,111,.12),0 0 5px rgba(255,62,112,.4)
    }

    50% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(255,65,111,.34),0 0 15px #ff3e70
    }
}

.class-login-card h1 {
    margin: 20px 0 0;
    color: #329cff;
    font-size: clamp(35px,5vw,59px);
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: -.04em
}

.class-login-course {
    margin: 2px 0 13px;
    color: #36c779;
    font-size: clamp(24px,3vw,35px);
    font-weight: 800
}

.class-login-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    color: var(--text);
    font-size: 16px;
    margin: 14px 0 23px
}

    .class-login-meta span {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        white-space: nowrap
    }

    .class-login-meta svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .class-login-meta b {
        height: 25px;
        width: 1px;
        background: rgba(184,215,235,.5)
    }

.class-login-image {
    width: min(100%,720px);
    margin: 0 auto;
    overflow: hidden;
    border: 2px solid #00efff;
    border-radius: 7px;
    box-shadow: 0 0 13px rgba(0,229,255,.42),inset 0 0 14px rgba(0,229,255,.16)
}

    .class-login-image img {
        display: block;
        width: 100%;
        aspect-ratio: 2.34/1;
        object-fit: cover
    }

.class-login-cta {
    width: min(100%,410px);
    min-height: 64px;
    margin: 23px auto 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    border-radius: 17px;
    background: linear-gradient(180deg,#41e8f5,#02c4d9);
    color: #fff;
    font-size: 25px;
    font-weight: 900;
    box-shadow: 0 0 24px rgba(0,229,255,.45);
    transition: transform .2s,box-shadow .2s
}

    .class-login-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 34px rgba(0,229,255,.7)
    }

    .class-login-cta svg {
        width: 28px;
        height: 28px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.class-login-note {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 14px
}

.class-login-offline {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin: 0 auto;
    padding: 10px 22px;
    border: 1px solid rgba(255,193,87,.45);
    border-radius: 20px;
    background: linear-gradient(100deg,rgba(255,193,87,.16),rgba(255,140,60,.1));
    box-shadow: 0 0 20px rgba(255,160,60,.14),inset 0 0 14px rgba(255,255,255,.06);
    color: #ffd479;
    font-size: 17px
}

.class-login-offline strong {
    font-size: 18px;
    font-weight: 800;
}

.class-login-offline i {
    width: 1px;
    height: 22px;
    background: rgba(220,235,255,.5)
}

.class-login-offline span {
    font-size: 14px;
    color: var(--muted)
}

.class-offline-dot {
    width: 11px;
    height: 11px;
    flex: none;
    border-radius: 50%;
    background: #ffd479;
    box-shadow: 0 0 0 4px rgba(255,193,87,.25),0 0 13px #ffb340;
}

.offline-note {
    max-width: 520px;
    margin-inline: auto;
    margin-top: 20px;
    line-height: 1.9
}

:root.light-theme .class-login-offline {
    border-color: rgba(180,120,20,.4);
    background: rgba(255,193,87,.14);
    color: #8a5a00;
}

:root.light-theme .class-login-offline strong {
    color: #8a5a00
}

@media(max-width:700px) {
    .class-login-page {
        min-height: calc(100vh - 130px);
        align-items: center;
        gap: 16px
    }

    .class-login-card {
        /*padding: 18px 14px 22px;*/
        border-radius: 14px
    }

    .class-live-badge {
        gap: 8px;
        padding: 8px 13px;
        font-size: 12px
    }

        .class-live-badge strong {
            font-size: 15px
        }

        .class-live-badge i {
            height: 17px
        }

    .class-live-dot {
        width: 8px;
        height: 8px
    }

    .class-login-card h1 {
        margin-top: 18px;
        font-size: clamp(28px,8vw,38px)
    }

    .class-login-course {
        font-size: clamp(20px,5.8vw,28px);
        margin-top: 4px
    }

    .class-login-meta {
        gap: 9px;
        justify-content: space-between;
        font-size: 11px;
        margin: 17px 0 18px
    }

        .class-login-meta span {
            gap: 4px;
            white-space: normal;
            line-height: 1.6;
            justify-content: center
        }

        .class-login-meta svg {
            width: 19px;
            height: 19px;
            flex: none
        }

        .class-login-meta b {
            height: 20px
        }

    .class-login-image img {
        aspect-ratio: 2/1
    }

    .class-login-cta {
        min-height: 56px;
        margin-top: 17px;
        font-size: 20px;
        border-radius: 14px
    }

        .class-login-cta svg {
            width: 23px;
            height: 23px
        }

    .class-login-note {
        font-size: 11px;
        line-height: 1.8
    }

    .class-login-offline {
        gap: 8px;
        padding: 8px 13px;
        font-size: 12px
    }

        .class-login-offline strong {
            font-size: 15px
        }

        .class-login-offline i {
            height: 17px
        }

        .class-login-offline span {
            font-size: 11px;
            line-height: 1.6
        }

    .class-offline-dot {
        width: 8px;
        height: 8px
    }
}

@media(prefers-reduced-motion:reduce) {
    .class-login-cta,
    .class-live-dot {
        transition: none
    }

        .class-login-cta:hover {
            transform: none
        }

    .class-live-dot {
        animation: none
    }
}

:root.light-theme .class-login-page {
   
}

:root.light-theme .class-login-card {
    background: rgba(255,255,255,.88);
    border-color: rgba(38,121,160,.3);
    box-shadow: 0 20px 55px rgba(43,104,137,.15),inset 0 1px 0 #fff
}

:root.light-theme .class-login-meta {
    color: #203b50
}

:root.light-theme .class-login-note {
    color: #527086
}

:root.light-theme .class-login-card h1 {
    color: #1675d1
}

.welcome-card {
    position: relative;
    overflow: hidden;
    background: url('../assets/courses/exams.webp') center / cover no-repeat;
}

/* Azmoonestan hero: the image is a real <img> inside the card (not a CSS
   background), filling the box so the heading stays on top of it. */
.azmoonestan-page .welcome-card {
    background: none;
}

.azmoonestan-page .welcome-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    padding: 8px;
    border-radius: 16px;
    border: 1px white;
}

.welcome-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(6, 12, 24, .55);
}

.welcome-card h1 {
    position: relative;
    z-index: 1;
    margin: 26px auto;
    color: #fff;
    text-align: center;
    background: rgba(6, 12, 24, .62);
    border: 1px solid rgba(255, 71, 87, .35);
    border-radius: 14px;
    padding: 16px 26px;
    max-width: max-content;
    backdrop-filter: blur(2px);
    text-shadow: 0 2px 10px rgba(0,0,0,.7), 0 0 18px rgba(255,71,87,.5)
}

:root.light-theme .welcome-card h1 {
    color: #fff
}

/* Azmoonestan page: the hero uses the same classes as the home page's
   exam card (course-card exam-card neon-frame neon-red). Only soften the
   dark overlay inside the box and keep the card layout intact. */
.azmoonestan-page .welcome-card::before {
    background: rgba(6, 12, 24, .3);
}

.azmoonestan-page .welcome-card.neon-red::before {
    background: rgba(6, 12, 24, .3);
}

/* Welcome heading: title on one line with a smaller subtitle underneath. */
.welcome-heading {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.azmoonestan-page .welcome-card h1 {
    white-space: nowrap;
    font-size: clamp(20px, 4.2vw, 38px);
    padding: 14px 22px;
    margin: 0;
}

.welcome-subtitle {
    margin: 0;
    color: #fff;
    font-size: clamp(13px, 2.2vw, 18px);
    font-weight: 700;
    text-align: center;
    background: rgba(6, 12, 24, .55);
    border: 1px solid rgba(255, 71, 87, .28);
    border-radius: 12px;
    padding: 8px 20px;
    max-width: max-content;
    text-shadow: 0 2px 8px rgba(0,0,0,.7), 0 0 14px rgba(255,71,87,.4);
}

/* Azmoonestan hero: merge the title and the subtitle into one shared
   frame instead of two separate boxes. */
.azmoonestan-page .welcome-heading {
    background: rgba(6, 12, 24, .62);
    border: 1px solid rgba(255, 71, 87, .35);
    border-radius: 14px;
    padding: 14px 26px;
    max-width: max-content;
    backdrop-filter: blur(2px);
}

.azmoonestan-page .welcome-card h1 {
    background: none;
    border: 0;
    padding: 0;
    backdrop-filter: none;
}

.azmoonestan-page .welcome-subtitle {
    background: none;
    border: 0;
    padding: 0;
    border-radius: 0;
}

:root.light-theme .welcome-subtitle {
    color: #fff;
}

/* Shrink the hero banner so it does not swallow the cards below it. */
.azmoonestan-page .welcome-card {
    min-height: auto;
}

@media(min-width:769px) {
    .azmoonestan-page .welcome-card {
        min-height: 150px;
        padding: 18px 40px;
    }
}

/* Desktop: the hero only holds a title, so drop the course-card grid
   layout and center it as a clean banner. */
@media(min-width:769px) {
    .azmoonestan-page .welcome-card {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 190px;
        padding: 28px 40px;
    }

    .azmoonestan-page .welcome-card h1 {
        margin: 0;
    }
}

/* Light the footer book icon on the Azmoonestan page too. */
body:has(.azmoonestan-page) .fixed-footer .mobile-footer-nav a:nth-child(2) img {
    filter: grayscale(0) drop-shadow(0 0 6px #34d399) drop-shadow(0 0 14px rgba(52, 211, 153, .8)) !important;
}

:root.light-theme .class-login-course {
    color: #16884c
}