@import url("fontiran.css");

/* =========================================================
   00) RESET / BASE
========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    font-family: var(--font-main);
    direction: rtl;
    font-size: var(--fs-base);
    margin: 0;
    background: var(--bg);
    color: var(--text);
}

/* =========================================================
   01) DESIGN TOKENS (Bootstrap-friendly)
   - رنگ‌ها، سایه‌ها، رادیوس‌ها، فونت‌ها
========================================================= */
:root {
    /* Font */
    --font-main: "IRANSansX", sans-serif;
    /* Brand */
    --brand: #ff8000;
    --accent: #0d6efd;
    --accent-2: #3d8bfd;
    /* Base sizes */
    --fs-base: 15px;
    /* Radius */
    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 18px;
    --r-pill: 999px;
    /* Motion */
    --t-fast: 150ms ease;
    --t-med: 300ms ease;
    /* Shadows (theme aware via aliases below) */
    --sh-1: 0 2px 10px rgba(0,0,0,.10);
    --sh-2: 0 12px 30px rgba(0,0,0,.05);
    --sh-3: 0 14px 36px rgba(0,0,0,.05);
    --sh-4: 0 22px 60px rgba(0,0,0,.08);
    /* ======================================================
     THEME ALIASES — Default: LIGHT
     فقط این‌ها باید در کامپوننت‌ها مصرف بشن
  ====================================================== */
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-2: rgba(255,255,255,.72);
    --text: rgba(0,0,0,.86);
    --muted: rgba(0,0,0,.60);
    --faint: rgba(0,0,0,.42);
    --line: rgba(0,0,0,.10);
    --line-2: rgba(0,0,0,.08);
    --glass: rgb(255 255 255 / 20%);
    --glass-border: rgba(255,255,255,.22);
    --glass-shadow: 0 2px 10px rgba(255,255,255,.20);
    /* Header darks */
    --dark-1: #272728;
    --dark-2: #343a40;
    /* Scrollbar */
    --scrollbar-w: 15px;
    --scrollbar-thumb: var(--brand);
    --scrollbar-track: var(--dark-2);
    /* Bootstrap mapping helpers (اختیاری ولی مفید) */
    --bs-body-font-family: var(--font-main);
}

    /* =========================================================
   02) THEME: DARK (Override)
========================================================= */
    :root[data-theme="dark"] {
        --bg: #0b0d10;
        --surface: #111317;
        --surface-2: rgba(17,19,23,.72);
        --text: rgba(255,255,255,.86);
        --muted: rgba(255,255,255,.62);
        --faint: rgba(255,255,255,.42);
        --line: rgba(255,255,255,.12);
        --line-2: rgba(255,255,255,.08);
        --glass: rgb(17 19 23 / 45%);
        --glass-border: rgba(255,255,255,.10);
        --glass-shadow: 0 2px 10px rgba(0,0,0,.45);
        --scrollbar-track: #0f1115;
        /* سایه‌ها کمی سنگین‌تر در دارک */
        --sh-1: 0 2px 10px rgba(0,0,0,.55);
        --sh-2: 0 12px 30px rgba(0,0,0,.55);
        --sh-3: 0 14px 36px rgba(0,0,0,.60);
        --sh-4: 0 22px 60px rgba(0,0,0,.70);
    }

/* Optional: Auto theme by system preference if no data-theme set */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg: #0b0d10;
        --surface: #111317;
        --surface-2: rgba(17,19,23,.72);
        --text: rgba(255,255,255,.86);
        --muted: rgba(255,255,255,.62);
        --faint: rgba(255,255,255,.42);
        --line: rgba(255,255,255,.12);
        --line-2: rgba(255,255,255,.08);
        --glass: rgb(17 19 23 / 45%);
        --glass-border: rgba(255,255,255,.10);
        --glass-shadow: 0 2px 10px rgba(0,0,0,.45);
        --scrollbar-track: #0f1115;
        --sh-1: 0 2px 10px rgba(0,0,0,.55);
        --sh-2: 0 12px 30px rgba(0,0,0,.55);
        --sh-3: 0 14px 36px rgba(0,0,0,.60);
        --sh-4: 0 22px 60px rgba(0,0,0,.70);
    }
}

/* =========================================================
   03) SCROLLBAR (WebKit)
========================================================= */
::-webkit-scrollbar {
    width: var(--scrollbar-w);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--r-pill);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: var(--r-pill);
}

/* =========================================================
   04) SWIPER
========================================================= */
.swiper-pagination-bullet-active {
    background-color: var(--brand) !important;
}

/* =========================================================
   05) BOOTSTRAP OVERRIDES (Safe)
   - فقط جایی که لازم بود
========================================================= */
.btn-outline-primary {
    color: #fff !important;
    background: var(--brand) !important;
    border-color: var(--brand) !important;
}

/* فرم‌ها: پایه‌ی یکنواخت و قابل کنترل با تم */
.form-control {
    height: 52px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: .25rem;
    box-shadow: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

    .form-control::placeholder {
        color: var(--faint);
    }

    .form-control:focus {
        border-color: rgba(13,110,253,.45);
        box-shadow: 0 0 0 4px rgba(13,110,253,.15);
        outline: none;
    }

.rounded-left {
    border-top-left-radius: .25rem !important;
    border-bottom-left-radius: .25rem !important;
    box-shadow: none !important;
    border: none !important;
}

 

/* =========================================================
   08) SCROLL TO TOP
========================================================= */
.scroll-to-top {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    border: none;
    outline: none;
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    cursor: pointer;
    transition: opacity var(--t-med), transform var(--t-med), background-color var(--t-med);
    box-shadow: 0 4px 8px rgba(0,0,0,.20);
}

    .scroll-to-top:hover {
        background: #267aa2;
        transform: translateY(-3px);
    }

/* =========================================================
   09) FOOTER — Minimal / Modern
========================================================= */
.footer {
    background: linear-gradient(180deg, #111317 0%, #0d0f12 100%);
    color: rgba(255,255,255,.75);
    padding: 60px 0 30px;
    margin-top: 100px;
    width: 100%;
    position: relative;
}

    .footer a {
        color: rgba(255,255,255,.65);
        text-decoration: none;
        transition: all 250ms ease;
    }

        .footer a:hover {
            color: #fff;
            opacity: .9;
        }

    /* Subscribe */
    .footer .subscribe {
        margin-top: -96px;
    }

    .footer .subscribe-form {
        border-radius: 50px;
        background: var(--surface);
        padding: 6px;
        display: flex;
        align-items: center;
        transition: all var(--t-med);
        border: 1px solid rgba(255,255,255,.08);
    }

        .footer .subscribe-form:focus-within {
            box-shadow: 0 0 0 4px rgba(13,110,253,.15);
            transform: translateY(-2px);
        }

        .footer .subscribe-form .form-group {
            flex: 1;
            margin-bottom: 0;
        }

            .footer .subscribe-form .form-group input {
                background: transparent !important;
                border: none !important;
                outline: none !important;
                color: var(--faint) !important;
                font-size: 16px;
                height: 56px;
                padding: 0 20px;
                width: 100%;
                border-radius: 0;
            }

                .footer .subscribe-form .form-group input::placeholder {
                    color: var(--faint);
                }

            /* Primary submit (brand) */
            .footer .subscribe-form .form-group .submit {
                color: #fff !important;
                display: block;
                width: 150px;
                height: 56px;
                font-size: 14px;
                background: var(--brand) !important;
                border: none;
                letter-spacing: 1px;
                text-transform: uppercase;
                border-radius: 40px;
            }

        /* optional alt button */
        .footer .subscribe-form button {
            border: none;
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            color: #fff;
            padding: 0 28px;
            height: 48px;
            border-radius: 40px;
            font-size: 14px;
            font-weight: 500;
            transition: all var(--t-med);
        }

            .footer .subscribe-form button:hover {
                transform: translateY(-1px);
                box-shadow: 0 8px 18px rgba(13,110,253,.25);
            }

/* Footer misc */
.copyright {
    text-align: center;
}

    .copyright img {
        width: 85px;
    }

.footer-links {
    padding-right: 100px;
}

ul.HotLink {
    padding: 0;
}

.HotLink li {
    padding-right: 4px;
    border-right: 2px solid var(--brand);
}

.HotLink a {
    text-decoration: none !important;
    font-style: normal !important;
    list-style-type: none !important;
    margin-right: 2px;
    margin-left: 0;
    color: #fff;
}

    .HotLink a:hover {
        color: var(--brand);
    }

.H5Social {
    text-align: center;
}

.IcoSocial {
    display: flex;
    gap: 10px;
    justify-content: center;
}

    .IcoSocial img {
        width: 30px;
    }

.SocialBOX {
    display: flex;
    align-items: center;
    background: var(--dark-2);
    border-radius: 50%;
    padding: 8px;
    margin-bottom: 8px;
    border: 1px solid var(--brand);
}

/* =========================================================
   10) SECTION HEADER — .ns-header (Pro)
========================================================= */
.ns-header {
    --ns-accent: var(--accent);
    --ns-text: #111827;
    --ns-muted: #6b7280;
    --ns-line: #e5e7eb;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0 12px;
    margin: 0 0 12px;
    border-bottom: 1px solid var(--ns-line);
    font-family: var(--font-main);
}

:root[data-theme="dark"] .ns-header {
    --ns-text: rgba(255,255,255,.90);
    --ns-muted: rgba(255,255,255,.62);
    --ns-line: rgba(255,255,255,.10);
}

.ns-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ns-icon {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: var(--ns-accent);
    box-shadow: 0 0 0 4px rgba(13,110,253,.10);
    flex: 0 0 auto;
}

.ns-icon-bi, .ns-icon-img {
    display: none;
}

.ns-text {
    min-width: 0;
}

.ns-title {
    font-weight: 900;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ns-text);
}

.ns-title-ink {
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
}

    .ns-title-ink::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: -5px;
        width: 46px;
        height: 3px;
        border-radius: var(--r-pill);
        background: var(--ns-accent);
        opacity: .18;
    }

.ns-subtitle {
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ns-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ns-badge {
    margin-right: 8px;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 800;
    color: #0b3aa6;
    background: rgba(13,110,253,.10);
    border: 1px solid rgba(13,110,253,.20);
    flex: 0 0 auto;
}

.ns-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--ns-muted);
    font-size: 13px;
    font-weight: 800;
    padding: 6px 8px;
    border-radius: 10px;
    transition: color var(--t-fast), background-color var(--t-fast), transform var(--t-fast);
    flex: 0 0 auto;
}

    .ns-link i {
        font-size: 14px;
        opacity: .9;
        transform: translateY(1px);
    }

    .ns-link:hover {
        color: var(--ns-text);
        background: rgba(17,24,39,.04);
        transform: translateX(-2px);
    }

:root[data-theme="dark"] .ns-link:hover {
    background: rgba(255,255,255,.06);
}

/* =========================================================
   11) BREADCRUMB — Signature (Pro)
========================================================= */
.custom-breadcrumb.custom-breadcrumb--signature {
    --cb-bg: var(--surface-2);
    --cb-line: var(--line-2);
    --cb-text: var(--text);
    --cb-muted: var(--faint);
    --cb-active: var(--accent);
    --cb-radius: var(--r-md);
    position: relative;
    padding: 12px 16px;
    border-radius: var(--cb-radius);
    background: var(--cb-bg);
    border: 1px solid var(--cb-line);
    box-shadow: var(--sh-2);
    backdrop-filter: blur(12px);
    overflow: hidden;
}

    .custom-breadcrumb.custom-breadcrumb--signature::before {
        content: "";
        position: absolute;
        top: 10px;
        bottom: 10px;
        left: 10px;
        width: 3px;
        border-radius: var(--r-pill);
        background: linear-gradient(to bottom, rgba(13,110,253,0), rgba(13,110,253,.55), rgba(13,110,253,0) );
        opacity: .7;
    }

    .custom-breadcrumb.custom-breadcrumb--signature::after {
        content: "";
        position: absolute;
        inset: -60px -60px auto auto;
        width: 180px;
        height: 180px;
        background: radial-gradient(circle, rgba(13,110,253,.14), transparent 60%);
        pointer-events: none;
    }

    .custom-breadcrumb.custom-breadcrumb--signature .breadcrumb {
        margin: 0;
        background: transparent;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        padding-left: 10px;
    }

    .custom-breadcrumb.custom-breadcrumb--signature
    .breadcrumb-item + .breadcrumb-item::before {
        content: "";
        padding: 0;
    }

    .custom-breadcrumb.custom-breadcrumb--signature
    .breadcrumb-item:not(:last-child)::after {
        content: "›";
        margin: 0 10px;
        font-weight: 900;
        color: var(--cb-muted);
        opacity: .75;
    }

    .custom-breadcrumb.custom-breadcrumb--signature a {
        text-decoration: none;
        color: var(--cb-text);
        font-weight: 750;
        letter-spacing: -0.15px;
        padding: 6px 10px;
        border-radius: var(--r-pill);
        transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

        .custom-breadcrumb.custom-breadcrumb--signature a:hover {
            color: var(--cb-active);
            background: rgba(13,110,253,.08);
            transform: translateY(-1px);
        }

    .custom-breadcrumb.custom-breadcrumb--signature .breadcrumb-item.active a {
        color: var(--cb-active);
        font-weight: 900;
        background: rgba(13,110,253,.10);
        border: 1px solid rgba(13,110,253,.16);
    }

/* RTL separator */
[dir="rtl"] .custom-breadcrumb.custom-breadcrumb--signature
.breadcrumb-item:not(:last-child)::after {
    content: "‹";
}

@media (max-width: 576px) {
    .custom-breadcrumb.custom-breadcrumb--signature {
        padding: 10px 12px;
    }

        .custom-breadcrumb.custom-breadcrumb--signature .breadcrumb {
            padding-left: 6px;
            gap: 4px;
        }

        .custom-breadcrumb.custom-breadcrumb--signature a {
            padding: 5px 9px;
            font-size: .95rem;
        }
}

/* =========================================================
   12) ADS ZONE — Banner Stack Pro
========================================================= */
.ad-zone {
    --ad-bg: var(--surface-2);
    --ad-line: var(--line-2);
    --ad-text: var(--text);
    --ad-muted: var(--muted);
    --ad-primary: var(--accent);
    --ad-radius: var(--r-lg);
    margin-top: 14px;
}

.ad-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ad-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: var(--ad-radius);
    background: var(--ad-bg);
    border: 1px solid var(--ad-line);
    text-decoration: none;
    overflow: hidden;
    box-shadow: var(--sh-3);
    transform: translateZ(0);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
    backdrop-filter: blur(10px);
    /* مطابق نسخه‌ی شما: عمودی */
    flex-direction: column;
}

    .ad-banner::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(650px 120px at 80% 0%, rgba(13,110,253,.16), transparent 60%), radial-gradient(500px 110px at 20% 100%, rgba(0,0,0,.06), transparent 60%), repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 10px, rgba(255,255,255,0) 10px 22px);
        opacity: .75;
    }

:root[data-theme="dark"] .ad-banner::before {
    background: radial-gradient(650px 120px at 80% 0%, rgba(13,110,253,.18), transparent 60%), radial-gradient(500px 110px at 20% 100%, rgba(255,255,255,.06), transparent 60%), repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 10px, rgba(255,255,255,0) 10px 22px);
    opacity: .70;
}

.ad-banner::after {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: 10px;
    width: 3px;
    border-radius: var(--r-pill);
    background: linear-gradient(to bottom, rgba(13,110,253,0), rgba(13,110,253,.65), rgba(13,110,253,0) );
    opacity: .65;
    pointer-events: none;
}

.ad-banner:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-4);
    border-color: rgba(13,110,253,.18);
    background: color-mix(in srgb, var(--surface-2) 70%, var(--surface) 30%);
}

/* icon bubble */
.ad-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--r-pill);
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    background: rgba(13,110,253,.10);
    border: 1px solid rgba(13,110,253,.14);
    color: rgba(13,110,253,.95);
    position: relative;
    z-index: 1;
    transition: transform 180ms ease, background-color 180ms ease;
}

.ad-banner:hover .ad-icon {
    transform: scale(1.05);
    background: rgba(13,110,253,.14);
}

.ad-icon i {
    font-size: 20px;
}

/* text */
.ad-text {
    min-width: 0;
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
}

.ad-title {
    color: var(--ad-text);
    font-weight: 950;
    letter-spacing: -0.2px;
    line-height: 1.6;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ad-subtitle {
    color: var(--ad-muted);
    font-size: .92rem;
    font-weight: 650;
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* CTA */
.ad-cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    color: rgba(13,110,253,.95);
    padding: 8px 12px;
    border-radius: var(--r-pill);
    background: rgba(13,110,253,.08);
    border: 1px solid rgba(13,110,253,.14);
    transition: transform 180ms ease, background-color 180ms ease;
    white-space: nowrap;
}

.ad-banner:hover .ad-cta {
    transform: translateX(-2px);
    background: rgba(13,110,253,.12);
}

/* Entrance animation */
@keyframes adIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ad-anim {
    opacity: 0;
    animation: adIn 600ms ease forwards;
    animation-delay: calc(var(--i) * 90ms);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ad-anim {
        animation: none;
        opacity: 1;
    }

    .ad-banner, .ad-icon, .ad-cta {
        transition: none;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .ad-banner {
        padding: 12px;
        gap: 12px;
    }

    .ad-cta {
        display: none;
    }
}

/* Compact sidebar variant */
.ad-zone.ad-zone--compact .ad-banner {
    padding: 12px;
    gap: 10px;
    border-radius: var(--r-md);
}

.ad-zone.ad-zone--compact .ad-cta {
    padding: 8px 10px;
    gap: 6px;
    font-size: .82rem;
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .ad-zone.ad-zone--compact .ad-cta span {
        display: none;
    }

    .ad-zone.ad-zone--compact .ad-cta {
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
        border-radius: var(--r-pill);
    }
}

.ad-zone.ad-zone--compact .ad-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
}

    .ad-zone.ad-zone--compact .ad-icon i {
        font-size: 18px;
    }

.ad-zone.ad-zone--compact .ad-title {
    font-size: .95rem;
    margin-bottom: 2px;
    -webkit-line-clamp: 1;
}

.ad-zone.ad-zone--compact .ad-subtitle {
    font-size: .86rem;
    line-height: 1.7;
    -webkit-line-clamp: 1;
}

@media (max-width: 992px) {
    .ad-zone.ad-zone--compact .ad-subtitle {
        display: none;
    }
}

.ad-zone.ad-zone--compact .ad-text {
    min-width: 0;
}

.ad-zone.ad-zone--compact .ad-banner {
    overflow: hidden;
}

    .ad-zone.ad-zone--compact .ad-banner::after {
        right: 8px;
    }

@keyframes adInCompact {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ad-zone.ad-zone--compact .ad-anim {
    animation: adInCompact 500ms ease forwards;
    animation-delay: calc(var(--i) * 70ms);
}

/* =========================================
   THEME SWITCH — Minimal Pro (Final Clean)
   Works with:
   <button class="theme-switch" id="themeSwitch">
========================================= */

.theme-switch {
    --w: 60px;
    --h: 32px;
    --pad: 4px;
    --dur: 380ms;
    --ease: cubic-bezier(.2,.8,.2,1);
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
}

    .theme-switch:focus-visible {
        outline: none;
        border-radius: 999px;
        box-shadow: 0 0 0 .2rem rgba(13,110,253,.18);
    }

:root[data-theme="dark"] .theme-switch:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(255,128,0,.25);
}

/* ================= Track ================= */

.theme-switch .ts-track {
    width: var(--w);
    height: var(--h);
    position: relative;
    border-radius: 999px;
    overflow: hidden;
    /* light default */
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(0,0,0,.08);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 22px rgba(0,0,0,.10);
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* Dark track */
:root[data-theme="dark"] .theme-switch .ts-track {
    background: rgba(17,19,23,.65);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 10px 28px rgba(0,0,0,.55);
}

/* ================= Glow ================= */

.theme-switch .ts-glow {
    position: absolute;
    inset: -60%;
    pointer-events: none;
    filter: blur(10px);
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* Light glow (sun side) */
.theme-switch .ts-glow {
    opacity: .9;
    transform: translateX(22%);
    background: radial-gradient(circle at 70% 50%, rgba(255,193,7,.55), transparent 55%);
}

/* Dark glow (moon side) */
:root[data-theme="dark"] .theme-switch .ts-glow {
    transform: translateX(-22%);
    opacity: .85;
    background: radial-gradient(circle at 30% 50%, rgba(160,210,255,.45), transparent 55%);
}

/* ================= Icons ================= */

.theme-switch .ts-icons {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 0 10px;
    pointer-events: none;
}

.theme-switch svg {
    width: 16px;
    height: 16px;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), fill var(--dur) var(--ease), filter var(--dur) var(--ease);
}

/* Light active (Sun) */
.theme-switch .ts-sun {
    opacity: 1;
    transform: scale(1);
    fill: rgba(255,164,0,.95);
    filter: drop-shadow(0 0 6px rgba(255,193,7,.45));
}

.theme-switch .ts-moon {
    opacity: .55;
    transform: scale(.92);
    fill: rgba(0,0,0,.45);
}

/* Dark active (Moon) */
:root[data-theme="dark"] .theme-switch .ts-sun {
    opacity: .5;
    transform: scale(.92);
    fill: rgba(255,255,255,.55);
    filter: none;
}

:root[data-theme="dark"] .theme-switch .ts-moon {
    opacity: 1;
    transform: scale(1);
    fill: rgba(207,227,255,.95);
    filter: drop-shadow(0 0 8px rgba(160,210,255,.4));
}

/* ================= Thumb ================= */

.theme-switch .ts-thumb {
    position: absolute;
    top: var(--pad);
    right: var(--pad); /* light default */

    width: calc(var(--h) - (var(--pad) * 2));
    height: calc(var(--h) - (var(--pad) * 2));
    border-radius: 999px;
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(255,255,255,.4);
    box-shadow: 0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.6);
    transition: right var(--dur) var(--ease), left var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform 120ms ease;
}

/* Dark thumb position */
:root[data-theme="dark"] .theme-switch .ts-thumb {
    right: auto;
    left: var(--pad);
    background: rgba(20,23,31,.95);
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 10px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}

/* Press animation */
.theme-switch:active .ts-thumb {
    transform: scale(.97);
}

/* =========================================================
   STATE: DARK (when html[data-theme="dark"])
   - thumb moves left
   - moon becomes active
========================================================= */
:root[data-theme="dark"] .theme-switch .ts-track {
    background: linear-gradient( 180deg, color-mix(in srgb, #0f1218 70%, transparent 30%), color-mix(in srgb, #0a0d12 65%, transparent 35%) );
    border-color: color-mix(in srgb, rgba(255,255,255,.18) 70%, transparent 30%);
    box-shadow: 0 12px 28px rgba(0,0,0,.55);
}

:root[data-theme="dark"] .theme-switch .ts-glow {
    opacity: .55;
    transform: translateX(-18%);
}

:root[data-theme="dark"] .theme-switch .ts-thumb {
    /* move to left */
    transform: translateX(calc(-1 * (var(--w) - (var(--pad)*2) - var(--thumb))));
    background: linear-gradient(180deg, rgba(22,26,36,.92), rgba(16,19,27,.72));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 12px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
}

/* icon emphasis */
:root[data-theme="dark"] .theme-switch .ts-sun {
    opacity: .55;
    transform: scale(.90);
}

:root[data-theme="dark"] .theme-switch .ts-moon {
    opacity: .95;
    transform: scale(1);
    fill: color-mix(in srgb, #cfe3ff 78%, transparent 22%);
}

/* hover polish (desktop only feel) */
@media (hover:hover) {
    .theme-switch:hover .ts-track {
        box-shadow: 0 14px 34px rgba(0,0,0,.14);
    }

    :root[data-theme="dark"] .theme-switch:hover .ts-track {
        box-shadow: 0 16px 38px rgba(0,0,0,.62);
    }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    .theme-switch, .theme-switch * {
        transition: none !important;
        animation: none !important;
    }
}



/* =========================================
   Media Dark Section (Always Dark)
   Scope: .media-bg-dark
========================================= */

.media-bg-dark {
    position: relative;
    isolation: isolate; /* برای لایه‌های داخلی */
    /* Base dark tone */
    background: radial-gradient(800px 400px at 85% -10%, rgba(255,128,0,.12), transparent 60%), radial-gradient(700px 400px at 15% 110%, rgba(13,110,253,.10), transparent 60%), linear-gradient(180deg, #111317 0%, #0d0f12 100%);
    color: #f5f7fa;
    padding: 70px 0;
    overflow: hidden;
}

    /* Subtle texture / depth */
    .media-bg-dark::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.04), transparent 40%), radial-gradient(circle at 70% 70%, rgba(255,255,255,.03), transparent 45%);
        mix-blend-mode: overlay;
        opacity: .6;
    }

    /* Subtle top divider glow */
    .media-bg-dark::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient( to right, transparent, rgba(255,128,0,.45), transparent );
        opacity: .5;
    }



/* =========================================
   Media Section Title with Bootstrap Icon
========================================= */

.media-section-title {
    text-align: center;
    margin-bottom: 48px;
}

.media-heading {
    font-size: 28px;
    font-weight: 900;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    position: relative;
}

/* آیکن */
.media-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,128,0,.12);
    border: 1px solid rgba(255,128,0,.35);
    color: rgba(255,128,0,.95);
    font-size: 20px;
    box-shadow: 0 6px 18px rgba(255,128,0,.25);
    transition: transform .3s ease, box-shadow .3s ease;
}

    /* هاله نور پشت آیکن */
    .media-icon::after {
        content: "";
        position: absolute;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255,128,0,.25), transparent 65%);
        z-index: -1;
    }

/* خط زیر عنوان */
.media-heading::after {
    content: "";
    position: absolute;
    bottom: -14px;
    right: 50%;
    transform: translateX(50%);
    width: 80px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient( to right, transparent, rgba(255,128,0,.85), transparent );
}

/* Hover subtle animation */
.media-section-title:hover .media-icon {
    transform: scale(1.08);
    box-shadow: 0 8px 22px rgba(255,128,0,.35);
}


/* =========================================
   Photo Section Title (Theme Aware)
========================================= */

.photo-section-title {
    text-align: center;
    margin-bottom: 48px;
}

.photo-heading {
    font-size: 28px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    position: relative;
    color: var(--text);
    transition: color .3s ease;
}

/* ================= ICON ================= */

.photo-icon {
    position: relative;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    transition: all .35s ease;
}

/* Light Mode */
:root[data-theme="light"] .photo-icon {
    background: rgba(13,110,253,.08);
    border: 1px solid rgba(13,110,253,.18);
    color: rgba(13,110,253,.95);
    box-shadow: 0 6px 18px rgba(13,110,253,.18);
}

/* Dark Mode */
:root[data-theme="dark"] .photo-icon {
    background: rgba(255,128,0,.12);
    border: 1px solid rgba(255,128,0,.35);
    color: rgba(255,128,0,.95);
    box-shadow: 0 6px 18px rgba(255,128,0,.30);
}

/* subtle lens glow */
.photo-icon::after {
    content: "";
    position: absolute;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    z-index: -1;
    opacity: .6;
    transition: all .35s ease;
}

/* light glow */
:root[data-theme="light"] .photo-icon::after {
    background: radial-gradient(circle, rgba(13,110,253,.15), transparent 65%);
}

/* dark glow */
:root[data-theme="dark"] .photo-icon::after {
    background: radial-gradient(circle, rgba(255,128,0,.25), transparent 65%);
}

/* ================= UNDERLINE ================= */

.photo-heading::after {
    content: "";
    position: absolute;
    bottom: -14px;
    right: 50%;
    transform: translateX(50%);
    width: 80px;
    height: 3px;
    border-radius: 999px;
    transition: background .3s ease;
}

/* Light underline */
:root[data-theme="light"] .photo-heading::after {
    background: linear-gradient( to right, transparent, rgba(13,110,253,.85), transparent );
}

/* Dark underline */
:root[data-theme="dark"] .photo-heading::after {
    background: linear-gradient( to right, transparent, rgba(255,128,0,.85), transparent );
}

/* ================= Hover subtle animation ================= */

.photo-section-title:hover .photo-icon {
    transform: scale(1.08);
}


/* =========================================================
   RH HEADER PACK (Bootstrap-friendly, No conflict)
   - Desktop: dark navbar always
   - Desktop: one-line menu, horizontal scroll if too many
   - Sticky + compact on scroll
   - Mobile: right drawer + close button + logo
========================================================= */
.rh-header {
    --rh-brand: #ff8000; /* رنگ برند */
    --rh-accent: #399DC8; /* رنگ آبی */
    --rh-dark-1: #111317;
    --rh-dark-2: #0d0f12;
    --rh-ease: cubic-bezier(.2,.8,.2,1);
    --rh-t: 260ms;
    --rh-shadow: 0 16px 44px rgba(0,0,0,.55);
    --rh-shadow2: 0 20px 60px rgba(0,0,0,.70);
}

/* ---------------- TOPBAR (desktop only) ---------------- */
.rh-topbar {
    display: none;
    height: 34px;
    background: radial-gradient(900px 120px at 85% 0%, rgba(255,128,0,.22), transparent 60%), radial-gradient(800px 120px at 15% 100%, rgba(57,157,200,.22), transparent 60%), linear-gradient(180deg, rgba(17,19,23,.95), rgba(13,15,18,.95));
    border-bottom: 1px solid rgba(255,255,255,.10);
    overflow: hidden;
}

.rh-topbar__inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: rgba(255,255,255,.78);
    font-weight: 800;
    font-size: 12.5px;
}

@media (min-width: 768px) {
    .rh-topbar {
        display: block;
    }
}

/* ---------------- NAVBAR SHELL ---------------- */
.rh-navbar {
    position: relative;
    z-index: 1050;
    background: rgba(17,19,23,.92); /* همیشه تیره */
    border-bottom: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--rh-shadow);
    transition: padding var(--rh-t) var(--rh-ease), transform var(--rh-t) var(--rh-ease);
}

.rh-navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
}

/* sticky + compact */
.rh-navbar.is-fixed {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}

.rh-navbar.is-compact .rh-navbar__inner {
    padding: 6px 0;
}

/* ---------------- BRAND ---------------- */
.rh-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: rgba(255,255,255,.92);
    min-width: 0;
}

.rh-brand__img {
    width: 82px;
    height: 60px;
    object-fit: contain;
    border-radius: 12px;
    padding: 2px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    transition: width var(--rh-t) var(--rh-ease), height var(--rh-t) var(--rh-ease);
}

.rh-navbar.is-compact .rh-brand__img {
    width: 36px;
    height: 36px;
}

.rh-brand__text {
    font-weight: 900;
    letter-spacing: -.2px;
    white-space: nowrap;
}

    .rh-brand__text em {
        font-style: normal;
        color: var(--rh-brand);
    }

/* ---------------- DESKTOP MENU ---------------- */
.rh-desktop {
    display: none;
}

@media (min-width: 992px) {
    .rh-desktop {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 auto;
        min-width: 0;
    }

        .rh-desktop .main-nav {
            width: 100%;
        }

        /* force 1-line horizontal */
        .rh-desktop .navbar-nav {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin: 0 !important;
            padding: 0 !important;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
        }

            .rh-desktop .navbar-nav::-webkit-scrollbar {
                height: 6px;
            }

            .rh-desktop .navbar-nav::-webkit-scrollbar-thumb {
                background: rgba(255,128,0,.35);
                border-radius: 999px;
            }

            .rh-desktop .navbar-nav::-webkit-scrollbar-track {
                background: rgba(255,255,255,.06);
                border-radius: 999px;
            }

        .rh-desktop .nav-link {
            color: rgba(255,255,255,.90) !important;
            font-weight: 500;
            padding: 9px 5px !important;
            border-radius: 12px;
            border: 1px solid transparent;
            white-space: nowrap;
            transition: background var(--rh-t) var(--rh-ease), transform var(--rh-t) var(--rh-ease), border-color var(--rh-t) var(--rh-ease);
        }

            .rh-desktop .nav-link:hover {
                background: rgba(255,128,0,.10);
                border-color: rgba(255,128,0,.22);
                transform: translateY(-1px);
            }

        /* dropdown panel dark */
        .rh-desktop .dropdown-menu {
            border-radius: 16px;
            border: 1px solid rgba(255,255,255,.10);
            background: rgba(17,19,23,.98);
            box-shadow: var(--rh-shadow2);
            padding: 8px;
            margin-top: 10px;
        }

        .rh-desktop .dropdown-item {
            border-radius: 12px;
            padding: 10px 12px;
            font-weight: 750;
            color: rgba(255,255,255,.88);
            transition: background var(--rh-t) var(--rh-ease), transform var(--rh-t) var(--rh-ease);
        }

            .rh-desktop .dropdown-item:hover {
                background: rgba(255,128,0,.12);
                transform: translateX(-2px);
            }
}

/* ---------------- ACTIONS ---------------- */
.rh-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* burger (mobile) */
.rh-burger {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    display: grid;
    place-items: center;
    transition: transform var(--rh-t) var(--rh-ease), background var(--rh-t) var(--rh-ease);
}

    .rh-burger i {
        font-size: 24px;
    }

    .rh-burger:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.10);
    }

/* ---------------- MOBILE DRAWER ---------------- */
.rh-drawer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 220ms var(--rh-ease);
}

    .rh-drawer.is-open {
        opacity: 1;
        pointer-events: auto;
    }

.rh-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    transition: opacity 220ms var(--rh-ease);
}

.rh-drawer.is-open .rh-drawer__backdrop {
    opacity: 1;
}

.rh-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(86vw, 360px);
    background: rgba(17,19,23,.96);
    border-left: 1px solid rgba(255,255,255,.10);
    box-shadow: -24px 0 70px rgba(0,0,0,.75);
    transform: translateX(110%);
    transition: transform 320ms var(--rh-ease);
    display: flex;
    flex-direction: column;
}

.rh-drawer.is-open .rh-drawer__panel {
    transform: translateX(0);
}

.rh-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.rh-drawer__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: rgba(255,255,255,.92);
}

.rh-drawer__logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 12px;
    padding: 6px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
}

.rh-drawer__title {
    font-weight: 900;
}

.rh-x {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    display: grid;
    place-items: center;
    transition: transform var(--rh-t) var(--rh-ease), background var(--rh-t) var(--rh-ease);
}

    .rh-x:hover {
        transform: rotate(6deg);
        background: rgba(255,255,255,.10);
    }

.rh-drawer__body {
    padding: 12px 14px 18px;
    overflow: auto;
}

/* drawer menu styles (reuse your BlogCategoryMenu markup) */
.rh-drawer .navbar-nav {
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
}

.rh-drawer .nav-link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    color: rgba(255,255,255,.90) !important;
    font-weight: 850;
    padding: 12px 12px !important;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
}

.rh-drawer .dropdown-menu {
    display: block;
    position: static !important;
    transform: none !important;
    margin: 6px 0 10px;
    padding: 6px;
    border-radius: 14px;
    border: 1px dashed rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
}

.rh-drawer .dropdown-item {
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 750;
    color: rgba(255,255,255,.88);
}

    .rh-drawer .dropdown-item:hover {
        background: rgba(255,128,0,.12);
    }

/* hide desktop menu on mobile, hide burger on desktop */
@media (min-width: 992px) {
    .rh-burger {
        display: none;
    }
}

/* topbar english badge */
.rh-topbar__en {
    color: rgba(255,255,255,.92);
    font-weight: 950;
    letter-spacing: -.2px;
}

.rh-topbar__badge {
    font-size: 11px;
    font-weight: 950;
    color: rgba(0,0,0,.88);
    background: rgba(255,128,0,.92);
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

/* mobile theme row */
.rh-drawer__theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    margin: 10px 0 6px;
    border-radius: 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
}

.rh-drawer__themeText {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.88);
    font-weight: 850;
}

    .rh-drawer__themeText i {
        color: rgba(255,128,0,.95);
        font-size: 18px;
    }

/* mobile theme switch next to burger */
.rh-theme-mobile {
    --w: 56px; /* کمی جمع‌وجورتر برای موبایل */
    --h: 32px;
}

.rh-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}



/* =========================
   News Grid Pro — Signature Cards (Light/Dark Optimized)
   Scope: .news-gridpro ...
========================= */
.news-gridpro {
    /* map to your global tokens */
    --ng-bg: var(--surface);
    --ng-text: var(--text);
    --ng-muted: var(--muted);
    --ng-faint: var(--muted-2, color-mix(in srgb, var(--text) 55%, transparent 45%));
    --ng-line: var(--line);
    --ng-line2: var(--line-2);
    /* site colors */
    --ng-accent: var(--accent); /* آبی سایت */
    --ng-brand: var(--brand); /* نارنجی سایت */

    --ng-radius: var(--r-lg, 18px);
    --ng-shadow: 0 14px 40px rgba(0,0,0,.06);
    --ng-shadow2: 0 22px 68px rgba(0,0,0,.10);
    /* behavior (LIGHT defaults) */
    --ng-hover-border: color-mix(in srgb, var(--ng-accent) 18%, var(--ng-line) 82%);
    --ng-title-hover: color-mix(in srgb, var(--ng-accent) 96%, black 4%);
    --ng-pill-text: color-mix(in srgb, var(--ng-accent) 92%, black 8%);
    --ng-pill-bg: color-mix(in srgb, var(--ng-accent) 10%, transparent 90%);
    --ng-pill-border: color-mix(in srgb, var(--ng-accent) 18%, transparent 82%);
    /* signature line */
    --ng-accent-line: linear-gradient( to bottom, color-mix(in srgb, var(--ng-accent) 0%, transparent 100%), color-mix(in srgb, var(--ng-accent) 55%, transparent 45%), color-mix(in srgb, var(--ng-accent) 0%, transparent 100%) );
    /* media */
    --ng-media-bg: rgba(0,0,0,.03);
    --ng-media-grad: radial-gradient(120% 80% at 50% 18%, rgba(0,0,0,0) 35%, rgba(0,0,0,.20) 100%), linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,.16) 55%, rgba(0,0,0,0) 82%);
    /* hint */
    --ng-hint-bg: rgba(255,255,255,.14);
    --ng-hint-bd: rgba(255,255,255,.18);
    --ng-hint-tx: rgba(255,255,255,.92);
}

/* DARK overrides (کنتراست بهتر + هاور هم‌رنگ برند) */
:root[data-theme="dark"] .news-gridpro {
    --ng-shadow: 0 14px 34px rgba(0,0,0,.55);
    --ng-shadow2: 0 22px 68px rgba(0,0,0,.68);
    /* در دارک، هاور/پیل با نارنجی برند خوش‌رنگ‌تره */
    --ng-hover-border: color-mix(in srgb, var(--ng-brand) 26%, var(--ng-line) 74%);
    --ng-title-hover: color-mix(in srgb, var(--ng-brand) 96%, white 4%);
    --ng-pill-text: color-mix(in srgb, var(--ng-brand) 92%, white 8%);
    --ng-pill-bg: color-mix(in srgb, var(--ng-brand) 14%, transparent 86%);
    --ng-pill-border: color-mix(in srgb, var(--ng-brand) 26%, transparent 74%);
    --ng-accent-line: linear-gradient( to bottom, color-mix(in srgb, var(--ng-brand) 0%, transparent 100%), color-mix(in srgb, var(--ng-brand) 62%, transparent 38%), color-mix(in srgb, var(--ng-brand) 0%, transparent 100%) );
    --ng-media-bg: rgba(255,255,255,.04);
    --ng-media-grad: radial-gradient(120% 80% at 50% 18%, rgba(0,0,0,0) 35%, rgba(0,0,0,.28) 100%), linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.22) 55%, rgba(0,0,0,0) 82%);
    --ng-hint-bg: rgba(0,0,0,.22);
    --ng-hint-bd: rgba(255,255,255,.16);
    --ng-hint-tx: rgba(255,255,255,.94);
}

/* Card */
.news-gridpro .ng-card {
    position: relative;
    height: 100%;
    background: var(--ng-bg);
    border: 1px solid var(--ng-line);
    border-radius: var(--ng-radius);
    overflow: hidden;
    box-shadow: var(--ng-shadow);
    transform: translateZ(0);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

    /* Signature accent line */
    .news-gridpro .ng-card::before {
        content: "";
        position: absolute;
        inset: 10px auto 10px 10px;
        width: 3px;
        border-radius: 999px;
        background: var(--ng-accent-line);
        opacity: .62;
        z-index: 1;
        pointer-events: none;
    }

    .news-gridpro .ng-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--ng-shadow2);
        border-color: var(--ng-hover-border);
    }

/* Media */
.news-gridpro .ng-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--ng-media-bg);
    overflow: hidden;
}

    .news-gridpro .ng-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: scale(1);
        filter: saturate(1.04) contrast(1.03);
        transition: transform .6s ease, filter .2s ease;
    }

.news-gridpro .ng-card:hover .ng-media img {
    transform: scale(1.06);
    filter: saturate(1.07) contrast(1.05) brightness(1.02);
}

/* Readability gradient */
.news-gridpro .ng-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--ng-media-grad);
    opacity: .95;
}

/* Media hint */
.news-gridpro .ng-media-hint {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .80rem;
    font-weight: 900;
    color: var(--ng-hint-tx);
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--ng-hint-bg);
    border: 1px solid var(--ng-hint-bd);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 34px rgba(0,0,0,.22);
    transition: transform .18s ease, background-color .18s ease, opacity .18s ease;
    opacity: .92;
}

.news-gridpro .ng-card:hover .ng-media-hint {
    transform: translateX(-2px);
    opacity: 1;
    background: color-mix(in srgb, var(--ng-hint-bg) 82%, white 18%);
}

/* Body */
.news-gridpro .ng-body {
    padding: 14px 14px 12px;
    text-align: right;
    min-width: 0;
}

/* Title */
.news-gridpro .ng-title {
    margin: 0 0 8px;
    color: var(--ng-text);
    font-size: 1.05rem;
    font-weight: 950;
    letter-spacing: -0.2px;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-gridpro .ng-card:hover .ng-title {
    color: var(--ng-title-hover);
}

/* Summary */
.news-gridpro .ng-summary {
    margin: 0 0 12px;
    color: var(--ng-muted);
    font-size: .92rem;
    font-weight: 650;
    line-height: 1.95;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer */
.news-gridpro .ng-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ng-line2);
}

.news-gridpro .ng-date {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .82rem;
    font-weight: 800;
    color: var(--ng-faint);
}

/* Pill */
.news-gridpro .ng-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .84rem;
    font-weight: 950;
    color: var(--ng-pill-text);
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--ng-pill-bg);
    border: 1px solid var(--ng-pill-border);
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.news-gridpro .ng-card:hover .ng-pill {
    transform: translateX(-2px);
    background: color-mix(in srgb, var(--ng-pill-bg) 70%, transparent 30%);
}

/* Focus (keyboard) */
.news-gridpro .ng-card :is(a,button):focus-visible {
    outline: none;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ng-accent) 26%, transparent 74%);
    border-radius: 12px;
}

/* Responsive */
@media (max-width:576px) {
    .news-gridpro .ng-title {
        font-size: 1rem;
    }

    .news-gridpro .ng-summary {
        -webkit-line-clamp: 2;
    }

    .news-gridpro .ng-card::before {
        display: none;
    }
}


/* =========================================================
   RH Pagination — Minimal Pro (Light/Dark)
   Scope: .rh-pagination
========================================================= */
.rh-pagination {
    --pg-accent: var(--accent, #399DC8);
    --pg-bg: var(--surface, #fff);
    --pg-text: var(--text, rgba(0,0,0,.86));
    --pg-muted: var(--muted, rgba(0,0,0,.62));
    --pg-line: var(--line, rgba(0,0,0,.10));
    --pg-radius: 14px;
    --pg-gap: 8px;
    --pg-size: 40px;
    --pg-pill-bg: color-mix(in srgb, var(--pg-bg) 90%, transparent 10%);
    --pg-pill-border: color-mix(in srgb, var(--pg-line) 70%, transparent 30%);
    --pg-hover-bg: color-mix(in srgb, var(--pg-accent) 10%, var(--pg-bg) 90%);
    --pg-hover-border: color-mix(in srgb, var(--pg-accent) 26%, var(--pg-line) 74%);
    --pg-shadow: 0 10px 22px rgba(0,0,0,.06);
    --pg-shadow-hover: 0 14px 34px rgba(0,0,0,.10);
    /* align nicer in RTL */
    direction: rtl;
}

:root[data-theme="dark"] .rh-pagination {
    --pg-bg: var(--surface, #0f141b);
    --pg-text: var(--text, rgba(255,255,255,.90));
    --pg-muted: var(--muted, rgba(255,255,255,.68));
    --pg-line: var(--line, rgba(255,255,255,.12));
    --pg-pill-bg: color-mix(in srgb, var(--pg-bg) 85%, #000 15%);
    --pg-pill-border: color-mix(in srgb, var(--pg-line) 65%, transparent 35%);
    --pg-hover-bg: color-mix(in srgb, var(--pg-accent) 18%, var(--pg-bg) 82%);
    --pg-hover-border: color-mix(in srgb, var(--pg-accent) 30%, var(--pg-line) 70%);
    --pg-shadow: 0 14px 30px rgba(0,0,0,.55);
    --pg-shadow-hover: 0 18px 46px rgba(0,0,0,.70);
}

/* Reset bootstrap look into pill buttons */
.rh-pagination .pagination {
    gap: var(--pg-gap);
    margin: 0;
}

.rh-pagination .page-item {
    margin: 0;
}

.rh-pagination .page-link {
    min-width: var(--pg-size);
    height: var(--pg-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: var(--pg-radius) !important;
    background: var(--pg-pill-bg);
    border: 1px solid var(--pg-pill-border);
    color: var(--pg-text);
    font-weight: 800;
    font-size: .92rem;
    line-height: 1;
    box-shadow: var(--pg-shadow);
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

    .rh-pagination .page-link:hover {
        background: var(--pg-hover-bg);
        border-color: var(--pg-hover-border);
        color: var(--pg-text);
        transform: translateY(-1px);
        box-shadow: var(--pg-shadow-hover);
        text-decoration: none;
    }

/* Active */
.rh-pagination .page-item.active .page-link {
    background: linear-gradient(180deg, color-mix(in srgb, var(--pg-accent) 90%, #fff 10%), color-mix(in srgb, var(--pg-accent) 70%, #000 30%));
    border-color: color-mix(in srgb, var(--pg-accent) 70%, transparent 30%);
    color: #fff;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--pg-accent) 35%, rgba(0,0,0,.0));
    transform: translateY(-1px);
}

/* Disabled */
.rh-pagination .page-item.disabled .page-link,
.rh-pagination .page-link[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Ellipsis */
.rh-pagination .page-item.disabled > .page-link {
    background: transparent;
    border-style: dashed;
    border-color: color-mix(in srgb, var(--pg-line) 55%, transparent 45%);
    color: var(--pg-muted);
    box-shadow: none;
}

/* Focus (keyboard) */
.rh-pagination .page-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--pg-accent) 26%, transparent 74%), var(--pg-shadow);
}

/* Prev/Next chevrons look like icon buttons */
.rh-pagination .page-link[aria-label="قبلی"],
.rh-pagination .page-link[aria-label="بعدی"] {
    padding: 0 14px;
    font-weight: 900;
}

/* Small screens: tighter */
@media (max-width: 576px) {
    .rh-pagination {
        --pg-size: 36px;
        --pg-gap: 6px;
        --pg-radius: 12px;
    }

        .rh-pagination .page-link {
            font-size: .88rem;
            padding: 0 10px;
        }
}



/* =========================================================
   RH Filter Bar — Minimal Pro (Light/Dark)
   Scope: .rh-filterbar ...
========================================================= */

.rh-filterbar {
    /* map to your global tokens if exist */
    --rh-surface: var(--surface, #fff);
    --rh-text: var(--text, rgba(0,0,0,.88));
    --rh-muted: var(--muted, rgba(0,0,0,.62));
    --rh-line: var(--line, rgba(0,0,0,.10));
    --rh-line2: var(--line-2, rgba(0,0,0,.07));
    --rh-accent: var(--accent, #399DC8);
    --rh-brand: var(--brand, #ff8000);
    /* component tokens (LIGHT defaults) */
    --rf-bg: rgba(255,255,255,.78);
    --rf-border: rgba(0,0,0,.10);
    --rf-shadow: 0 10px 26px rgba(0,0,0,.06);
    --rf-ctrl-bg: rgba(255,255,255,.92);
    --rf-ctrl-border: rgba(0,0,0,.10);
    --rf-ctrl-text: var(--rh-text);
    --rf-ctrl-placeholder: rgba(0,0,0,.42);
    --rf-hover: rgba(57,157,200,.08);
    --rf-focus: rgba(57,157,200,.22);
    padding: 10px;
    border-radius: 16px;
    background: var(--rf-bg);
    border: 1px solid var(--rf-border);
    box-shadow: var(--rf-shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* DARK */
:root[data-theme="dark"] .rh-filterbar {
    --rf-bg: rgba(12,16,22,.72);
    --rf-border: rgba(255,255,255,.10);
    --rf-shadow: 0 14px 34px rgba(0,0,0,.55);
    --rf-ctrl-bg: rgba(15,20,28,.88);
    --rf-ctrl-border: rgba(255,255,255,.12);
    --rf-ctrl-text: rgba(255,255,255,.92);
    --rf-ctrl-placeholder: rgba(255,255,255,.45);
    /* در دارک، فوکوس/هایلایت برند رو کمی گرم‌تر می‌کنیم */
    --rf-hover: rgba(255,128,0,.10);
    --rf-focus: rgba(255,128,0,.24);
}

/* input-group alignment */
.rh-filterbar__group {
    border-radius: 14px;
    overflow: hidden;
}

/* icon chip */
.rh-filterbar__icon {
    background: var(--rf-ctrl-bg);
    border: 1px solid var(--rf-ctrl-border);
    border-left: 0;
    color: var(--rh-muted);
    padding: 0 12px;
}

/* input */
.rh-filterbar__input {
    background: var(--rf-ctrl-bg);
    border: 1px solid var(--rf-ctrl-border);
    color: var(--rf-ctrl-text);
    padding: 10px 12px;
}

    .rh-filterbar__input::placeholder {
        color: var(--rf-ctrl-placeholder);
    }

/* selects */
.rh-filterbar__select {
    background: var(--rf-ctrl-bg);
    border: 1px solid var(--rf-ctrl-border);
    color: var(--rf-ctrl-text);
    border-radius: 14px;
    padding: 10px 12px;
}

/* size select slightly narrower feeling */
.rh-filterbar__select--size {
    text-align: center;
    font-weight: 800;
}

/* hover polish */
.rh-filterbar__input:hover,
.rh-filterbar__select:hover {
    background: linear-gradient(0deg, var(--rf-hover), var(--rf-hover)), var(--rf-ctrl-bg);
}

/* focus (keyboard + mouse) */
.rh-filterbar__input:focus,
.rh-filterbar__select:focus {
    border-color: transparent;
    box-shadow: 0 0 0 .20rem var(--rf-focus);
    outline: none;
}

/* submit button */
.rh-filterbar__btn {
    border-radius: 14px;
    font-weight: 900;
    padding: 10px 12px;
    box-shadow: 0 10px 22px rgba(0,0,0,.10);
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

    .rh-filterbar__btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 30px rgba(0,0,0,.14);
        filter: saturate(1.05);
    }

    .rh-filterbar__btn:active {
        transform: translateY(0);
    }

/* empty state */
.rh-empty {
    border-radius: 16px;
    background: var(--rh-surface);
    color: var(--rh-muted);
}

:root[data-theme="dark"] .rh-empty {
    background: rgba(15,20,28,.70);
    color: rgba(255,255,255,.70);
    border-color: rgba(255,255,255,.10) !important;
}

/* Mobile: make it feel less “boxed” */
@media (max-width: 576px) {
    .rh-filterbar {
        padding: 10px 10px 12px;
        border-radius: 14px;
    }

    .rh-filterbar__btn {
        font-size: .95rem;
    }
}