:root {
    --primary-color: #0b2e59;
    /* سرمه‌ای عمیق */
    --secondary-color: #1e60a3;
    /* آبی متوسط */
    --accent-color: #00a8ff;
    /* آبی روشن (نئونی) */
    --bg-body: #f1f5f9;
    /* خاکستری روشن */
    --warm-highlight: #f39c12;
}

body {
    font-family: 'Vazirmatn';
    background-color: var(--bg-body);
    padding-top: 2rem;
    direction: rtl;
}

a {
    text-decoration: none;
}

/* --- mega menu --- */

/* ================================
   Premium Full Screen Mega Menu
================================ */

html.mega-is-open,
body.mega-is-open {
    overflow: hidden !important;
    height: 100%;
}

/* root full viewport */
.premium-mega-menu {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;

    z-index: 2147483000 !important;

    direction: rtl;
    overflow: hidden;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateZ(0);
    isolation: isolate;

    font-family: inherit;

    transition:
        opacity 280ms ease,
        visibility 280ms ease;
}

.premium-mega-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* backdrop */
.premium-mega-backdrop {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(circle at 20% 20%, rgba(46, 160, 255, 0.22), transparent 34%),
        radial-gradient(circle at 85% 80%, rgba(0, 210, 255, 0.16), transparent 35%),
        linear-gradient(120deg, rgba(2, 8, 23, 0.96), rgba(2, 12, 31, 0.91));

    opacity: 1;
}

/* dynamic background */
.premium-mega-bg {
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image: var(--mega-active-bg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    opacity: 0.28;
    filter: saturate(1.05) contrast(1.05);
    transform: scale(1.04);

    transition:
        background-image 250ms ease,
        opacity 250ms ease,
        transform 600ms ease;
}

.premium-mega-menu.is-open .premium-mega-bg {
    transform: scale(1);
}

/* elegant dark layer over image */
.premium-mega-bg::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(90deg, rgba(2, 6, 23, 0.56), rgba(2, 6, 23, 0.84) 70%),
        linear-gradient(180deg, rgba(2, 6, 23, 0.20), rgba(2, 6, 23, 0.75));
}

/* subtle texture */
.premium-mega-noise {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    opacity: 0.05;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 36px 36px;
}

/* close button */
.premium-mega-close {
    position: absolute;
    top: 34px;
    left: 42px;
    z-index: 20;

    width: 54px;
    height: 54px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        background 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

.premium-mega-close:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.32);
    transform: translateY(-2px);
}

.premium-mega-close span {
    position: absolute;
    width: 25px;
    height: 2px;
    border-radius: 10px;
    background: #fff;
}

.premium-mega-close span:first-child {
    transform: rotate(45deg);
}

.premium-mega-close span:last-child {
    transform: rotate(-45deg);
}

/* main layout */
.premium-mega-container {
    position: relative;
    z-index: 10;

    width: 100%;
    height: 100%;

    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);

    opacity: 0;
    transform: translateX(42px);

    transition:
        opacity 320ms ease,
        transform 420ms cubic-bezier(.22, .61, .36, 1);
}

.premium-mega-menu.is-open .premium-mega-container {
    opacity: 1;
    transform: translateX(0);
}

/* sidebar */
.premium-mega-sidebar {
    height: 100%;
    padding: 38px 44px 38px 24px;

    border-left: 1px solid rgba(255, 255, 255, 0.18);

    background:
        linear-gradient(180deg, rgba(3, 10, 25, 0.58), rgba(3, 10, 25, 0.34));

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .28) transparent;
}

.premium-mega-sidebar::-webkit-scrollbar,
.premium-mega-content::-webkit-scrollbar {
    width: 6px;
}

.premium-mega-sidebar::-webkit-scrollbar-thumb,
.premium-mega-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .25);
    border-radius: 20px;
}

.premium-mega-sidebar-head {
    margin-bottom: 34px;
    padding-left: 12px;
}

.premium-mega-kicker {
    display: block;
    margin-bottom: 8px;

    color: rgba(147, 197, 253, 0.95);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.premium-mega-sidebar-head strong {
    display: block;

    color: #fff;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: -0.6px;
}

.premium-mega-tabs {
    list-style: none;
    margin: 0;
    padding: 0;
}

.premium-mega-tabs li {
    margin: 0;
    padding: 0;
}

/* tabs */
.premium-mega-tab {
    position: relative;

    width: 100%;

    border: 0;
    outline: 0;

    background: transparent;
    color: rgba(226, 232, 240, 0.78);

    cursor: pointer;

    text-align: right;

    padding: 13px 18px 13px 16px;
    margin-bottom: 4px;

    border-radius: 16px;

    font-size: 16px;
    font-weight: 800;
    line-height: 1.7;

    transition:
        color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}

.premium-mega-tab::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;

    width: 3px;
    height: 0;

    border-radius: 20px;

    background: linear-gradient(180deg, #38bdf8, #2563eb);

    transform: translateY(-50%);

    transition: height 180ms ease;
}

.premium-mega-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
    transform: translateX(-3px);
}

.premium-mega-tab.active {
    color: #fff;
    background:
        linear-gradient(90deg, rgba(37, 99, 235, 0.24), rgba(14, 165, 233, 0.08));
}

.premium-mega-tab.active::before {
    height: 65%;
}

/* content */
.premium-mega-content {
    height: 100%;
    overflow-y: auto;

    padding: 84px 64px 54px 78px;
}

.premium-mega-pane {
    display: none;
    animation: megaPaneIn 260ms ease both;
}

.premium-mega-pane.active {
    display: block;
}

@keyframes megaPaneIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

/* title */
.premium-mega-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 38px;
}

.premium-mega-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 10px;

    color: rgba(147, 197, 253, 0.95);
    font-size: 13px;
    font-weight: 700;
}

.premium-mega-subtitle::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 20px;
    background: #38bdf8;
}

.premium-mega-title-row h2 {
    position: relative;

    margin: 0;
    padding-right: 18px;

    color: #fff;

        font-size: 20px;
    font-weight: 950;
    line-height: 1.35;
    letter-spacing: -1.2px;
}

.premium-mega-title-row h2::before {
    content: "";
    position: absolute;
    top: 12px;
    right: 0;

    width: 4px;
    height: 42px;

    border-radius: 20px;
    background: linear-gradient(180deg, #fff, #38bdf8);
}

/* grid */
.premium-mega-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    gap: 22px;

    max-width: 1160px;
}

/* cards */
.premium-mega-card {
    min-height: 120px;

    padding: 22px 22px 20px;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 24px;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.045));

    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);

    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.premium-mega-card:hover {
    transform: translateY(-4px);
    border-color: rgba(56, 189, 248, 0.42);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.06));
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.26),
        0 0 0 1px rgba(56, 189, 248, 0.06) inset;
}

.premium-mega-card-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 15px;

    color: #fff;

    font-size: 17px;
    font-weight: 900;
    line-height: 1.7;

    text-decoration: none;
}

.premium-mega-card-title::before {
    content: "";
    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: #38bdf8;

    box-shadow: 0 0 18px rgba(56, 189, 248, .7);
}

.premium-mega-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.premium-mega-links li {
    margin-bottom: 9px;
}

.premium-mega-links li:last-child {
    margin-bottom: 0;
}

.premium-mega-links a {
    position: relative;

    display: inline-block;

    color: rgba(226, 232, 240, 0.86);

    font-size: 14px;
    font-weight: 500;
    line-height: 1.85;

    text-decoration: none;

    transition:
        color 160ms ease,
        transform 160ms ease;
}

.premium-mega-links a:hover {
    color: #93c5fd;
    transform: translateX(-4px);
}

.premium-mega-empty {
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    padding: 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
}

/* ================================
   Responsive
================================ */

@media (max-width: 1200px) {
    .premium-mega-container {
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .premium-mega-content {
        padding-left: 50px;
        padding-right: 48px;
    }

    .premium-mega-grid {
        grid-template-columns: repeat(2, minmax(190px, 1fr));
    }
}

@media (max-width: 768px) {
    .premium-mega-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .premium-mega-close {
        top: 18px;
        left: 18px;
        width: 48px;
        height: 48px;
        border-radius: 15px;
    }

    .premium-mega-sidebar {
        height: auto;
        max-height: 38vh;

        padding: 24px 20px 16px;

        border-left: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

    .premium-mega-sidebar-head {
        margin-bottom: 16px;
    }

    .premium-mega-sidebar-head strong {
        font-size: 20px;
    }

    .premium-mega-tabs {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 6px;
    }

    .premium-mega-tabs li {
        flex: 0 0 auto;
    }

    .premium-mega-tab {
        white-space: nowrap;
        width: auto;
        padding: 10px 16px;
        margin-bottom: 0;
        font-size: 14px;
        background: rgba(255, 255, 255, 0.07);
    }

    .premium-mega-tab::before {
        display: none;
    }

    .premium-mega-content {
        padding: 24px 18px 34px;
    }

    .premium-mega-title-row {
        margin-bottom: 22px;
    }

    .premium-mega-title-row h2 {
        font-size: 26px;
    }

    .premium-mega-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .premium-mega-card {
        border-radius: 20px;
        padding: 18px;
    }
}

/* --- mega menu --- */
/* --- نوبار پریمیوم --- */
.premium-navbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(11, 46, 89, 0.08);
    padding: 0.6rem 1.5rem;
    border-bottom: 3px solid var(--accent-color);
    position: relative;
    z-index: 1050;
}

/* =========================
   Clean Floating Logo
========================= */

/* باکس لوگو با ابعاد بزرگ‌تر */
.navbar-brand {
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%) !important;
    padding: 12px 25px !important; /* افزایش فضای اطراف لوگو */
    border-radius: 18px !important;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.2) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.navbar-brand:hover {
    background: linear-gradient(135deg, #7dd3fc 0%, #0369a1 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(2, 132, 199, 0.3) !important;
}

/* بزرگ‌تر کردن خود لوگو */
.navbar-brand img {
    height: 85px !important; /* ارتفاع لوگو از ۶۰ به ۸۵ پیکسل افزایش یافت */
    width: auto !important;
    display: block !important;
    filter: brightness(0) invert(1) !important; 
}


/* =========================
   Tablet
========================= */

@media(max-width:992px) {

    .navbar-brand img {

        height: 82px !important;
    }

}

/* =========================
   Mobile
========================= */

@media(max-width:768px) {

    .navbar-brand img {

        height: 68px !important;
    }

}

.navbar-brand span {
    font-weight: 800;
    font-size: 1.25rem;
    background: linear-gradient(to left, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.brand-icon {
    color: var(--accent-color);
    font-size: 1.8rem;
    margin-left: 10px;
}

/* --- لینک‌های منوی اصلی --- */
.nav-link {
    color: #334155 !important;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 1rem !important;
    margin: 0 0.2rem;
    transition: all 0.2s ease;
    position: relative;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary-color) !important;
}

.nav-link i {
    margin-left: 5px;
    color: var(--accent-color);
    font-size: 1rem;
}

/* --- استایل حرفه‌ای منوهای آبشاری --- */
.dropdown-menu {
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 0.5rem 0;
    margin: 0;
    background: #fff;
    z-index: 1051;
    min-width: 240px;
}

.dropdown-item {
    font-weight: 500;
    color: #475569;
    padding: 0.7rem 1.2rem;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-right: 3px solid transparent;
}

.dropdown-item i.fa-angle-left {
    font-size: 0.85rem;
    color: #94a3b8;
    transition: color 0.2s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #f8fafc;
    color: var(--primary-color);
    border-right-color: var(--accent-color);
}

.dropdown-item:hover i.fa-angle-left {
    color: var(--accent-color);
}

.dropdown-divider {
    border-top-color: #e2e8f0;
    margin: 0.4rem 0;
}

@media (min-width: 992px) {
    .dropdown-menu {
        display: block !important;
        visibility: hidden;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
        position: absolute;
        top: 100%;
        border-top: 3px solid var(--accent-color);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .dropdown:hover>.dropdown-menu {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

    .dropdown-submenu {
        position: relative;
    }

    .dropdown-submenu>.dropdown-menu {
        top: -3px;
        right: 100%;
        left: auto;
        transform: translateX(10px);
        border-top: 1px solid #e2e8f0;
        border-radius: 8px;
    }

    .dropdown-submenu:hover>.dropdown-menu {
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- دکمه سامانه‌ها --- */
/* اعمال استایل دکمه روی آخرین آیتم منوی اصلی */
.navbar-nav>li:last-child>a {
    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
    color: #fff !important;
    border-radius: 8px;
    padding: 0.5rem 1.2rem !important;
    font-weight: bold;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(0, 168, 255, 0.25);
    transition: all 0.3s ease;
    border: none;
    display: inline-block;
}

.navbar-nav>li:last-child>a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 168, 255, 0.4);
    color: #fff !important;
}

/* فاصله دادن به آخرین آیتم در رزولوشن‌های بزرگ (جایگزین کلاس ms-lg-2) */
@media (min-width: 992px) {
    .navbar-nav>li:last-child {
        margin-inline-start: 0.5rem;
        /* فاصله از آیتم‌های قبلی */
    }
}

.tool-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    text-decoration: none;
    font-size: 1rem;
}

.tool-btn:hover {
    background: var(--primary-color);
    color: #fff;
}

/* --- نکته روز --- */
.ticker-container {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin: 20px 0;

    display: flex;
    align-items: center;
    overflow: hidden;
    height: 50px;
    position: relative;
    z-index: 1;
    border: 1px solid #e2e8f0;
}

.ticker-title {
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
    padding: 0 1.2rem;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
    font-size: 0.95rem;
}

.ticker-wrapper {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    background: #fff;
}

.ticker-text {
    white-space: nowrap;
    color: #334155;
    font-weight: 500;
    font-size: 0.9rem;
    position: absolute;
    animation: smoothMarquee 35s linear infinite;
}

.ticker-wrapper:hover .ticker-text {
    animation-play-state: paused;
}

.t-dot {
    color: var(--accent-color);
    margin: 0 1.5rem;
    font-size: 0.4rem;
    vertical-align: middle;
}

@keyframes smoothMarquee {
    0% {
        transform: translateX(-100vw);
    }

    100% {
        transform: translateX(100vw);
    }
}

@media (max-width: 991px) {
    .ticker-container {
        flex-direction: column;
        height: auto;
        padding-bottom: 10px;
    }

    .ticker-title {
        width: 100%;
        justify-content: center;
        padding: 10px;
    }

    .ticker-wrapper {
        height: 40px;
        width: 100%;
    }
}
.slider-section {
    margin-top: 30px;
}
/* =========================================
           مدل جدید و شیک اسلایدرها (طرح موج و روکش)
           ========================================= */
.premium-slider-wrapper {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(11, 46, 89, 0.15);
    background: #fff;
    height: 400px;
    transform: translateZ(0);
    /* برای رفع باگ گوشه‌های گرد در برخی مرورگرها */
}

.premium-slider-wrapper .item {
    height: 400px;
    position: relative;
}

.premium-slider-wrapper .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.premium-slider-wrapper:hover .item img {
    transform: scale(1.05);
    /* زوم ملایم هنگام هاور */
}

/* روکش تاریک برای خوانایی متن */
.slider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(11, 46, 89, 0.9) 0%, rgba(11, 46, 89, 0.2) 60%, transparent 100%);
    z-index: 2;
}

/* محتوای روی اسلایدر (تعاملی) */
.slider-content {
    position: absolute;
    bottom: 70px;
    right: 30px;
    left: 30px;
    z-index: 10;
    /* بیشتر از موج */
    color: #fff;
}

.premium-slider-wrapper:hover .slider-content {
    transform: translateY(0);
    opacity: 1;
}

.slider-content h3 {
    font-weight: 800;
    font-size: 1.5rem;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.slider-content p {
    font-size: 0.95rem;
    opacity: 0.9;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.slider-btn {
    background: var(--accent-color);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    position: relative;
    z-index: 11;
}

.slider-btn:hover {
    background: #fff;
    color: var(--primary-color);
    transform: translateY(-2px);
}

/* برش موج‌دار در پایین */
.wave-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    /* ارتفاع موج */
    z-index: 4;
    pointer-events: none;
    line-height: 0;
}

.wave-bottom svg {
    display: block;
    width: 100%;
    height: 145px;
}

.premium-slider-wrapper {
    position: relative;
    overflow: hidden;
}

/* استایل سفارشی نقاط (Dots) اسلایدر بزرگ */
.large-slider .owl-dots {
    position: absolute;
    bottom: 15px;
    width: 100%;
    text-align: center;
    z-index: 5;
}

.large-slider .owl-dots .owl-dot {
    outline: none;
}

.large-slider .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.5) !important;
    border-radius: 50%;
    margin: 0 4px !important;
    transition: all 0.3s ease;
    display: inline-block;
}

.large-slider .owl-dots .owl-dot.active span {
    width: 24px;
    border-radius: 10px;
    background: var(--accent-color) !important;
}

/* استایل کنترل‌های شیشه‌ای اسلایدر کوچک */
.glass-nav-box {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.glass-nav-box button {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.glass-nav-box button:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    transform: scale(1.1);
}

/* برای اینکه محتوای اسلایدر کوچک همیشه نمایش داده شود */
.small-slider-wrapper .slider-content {
    opacity: 1;
    transform: translateY(0);
    bottom: 20px;
}

.small-slider-wrapper h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

@media (max-width: 991px) {

    .premium-slider-wrapper,
    .premium-slider-wrapper .item {
        height: 280px;
    }

    .slider-content {
        bottom: 40px;
    }
}

/* --- Minimal Services Section Styles --- */
/* =========================================
   بخش سرویس‌های سریع (سبک مینیمال)
   ========================================= */
/* =========================================
   1. استایل کارت‌های حرفه‌ای (Modern UI)
========================================= */
/* --- بخش کلی خدمات --- */.services-section {
    background-color: #f8fafc;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

/* --- تنظیمات اسلایدر برای هم‌ارتفاع شدن کارت‌ها --- */
.services-slider .owl-stage {
    display: flex;
    align-items: stretch;
}

.services-slider .item {
    padding: 10px 5px; /* فضای جانبی کمتر برای اشغال فضای بیشتر توسط کارت */
    height: 100%;
}

/* --- کارت‌های پریمیوم --- */
.premium-ui-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-decoration: none;
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 70px; /* افزایش عرض با زیاد کردن پدینگ افقی */
    text-align: center;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
    border-bottom: 4px solid #e2e8f0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
    height: 100%;
    width: 100%; 
    transition: transform 0.6s ease, box-shadow 0.6s ease, border-color 0.6s ease;
}

/* --- افکت هاور کارت --- */
.premium-ui-card:hover {
    transform: translateY(-8px);
    border-bottom-color: transparent;
    box-shadow: 0 15px 35px rgba(37, 99, 235, 0.2);
}

.premium-ui-card::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    transition: height 0.5s ease;
    z-index: -1;
}

.premium-ui-card:hover::before {
    height: 100%;
}

/* --- آیکون --- */
.ui-icon-wrapper {
    width: 75px;
    height: 75px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #0284c7;
    transition: all 0.4s ease;
}

.premium-ui-card:hover .ui-icon-wrapper {
    background: #ffffff;
    color: #2563eb;
    border-radius: 50%;
    transform: scale(1.1) rotate(360deg);
}

/* --- عنوان کارت --- */
.ui-title {
    font-size: 17px;
    font-weight: 700;
    color: #334155;
    margin-top: auto;
    transition: all 0.4s ease;
}

.premium-ui-card:hover .ui-title {
    color: #ffffff;
}

/* --- تنظیمات دات و ناو اسلایدر --- */
.services-slider .owl-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.services-slider .owl-dot span {
    width: 10px;
    height: 10px;
    background: #cbd5e1;
    border-radius: 50%;
    display: block;
    transition: all 0.3s ease;
}

.services-slider .owl-dot.active span {
    width: 30px;
    background: #0d6efd;
    border-radius: 10px;
}

.services-slider .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    pointer-events: none;
}

.services-slider .owl-nav button.owl-prev,
.services-slider .owl-nav button.owl-next {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #ffffff !important;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    color: #475569;
    transition: all 0.3s ease;
}

.services-slider .owl-nav button.owl-prev { left: -25px; }
.services-slider .owl-nav button.owl-next { right: -25px; }

.services-slider .owl-nav button:hover {
    background: #0d6efd !important;
    color: #ffffff !important;
}

/* =========================================
   بخش اخبار - Minimal & Modern Design
========================================= */
/* =========================================
   ULTRA MODERN NEWS SECTION
========================================= */

.news-ultra-section {
    background:
        linear-gradient(to bottom, #f8fbff, #eef5ff);
    position: relative;

}

/* title */

.title-icon {
    width: 65px;
    height: 65px;
    border-radius: 20px;
    background: linear-gradient(135deg, #0f4c81, #1da1f2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    margin-left: 15px;
    box-shadow: 0 10px 25px rgba(29, 161, 242, .25);
}

.section-subtitle {
    font-size: 13px;
    color: #3b82f6;
    font-weight: 700;
}

.section-title {
    font-size: 32px;
    font-weight: 900;
    color: #0f172a;
}

/* tabs */

.news-tabs {
    background: rgba(255, 255, 255, .7);
    backdrop-filter: blur(10px);
    padding: 4px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, .7);
}

.news-tab {
    border: none;
    background: transparent;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    color: #64748b;
    transition: all .3s ease;
    min-width: 95px;
}

.news-tab:hover {
    color: #2563eb;
    background: rgba(37, 99, 235, .05);
}

.news-tab.active {
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    color: #fff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .18);
}

/* =========================================
   HEADER SPACING FIX
========================================= */

.news-topbar {
    margin-bottom: 35px !important;
}

.section-title {
    font-size: 28px;
}

.section-subtitle {
    font-size: 12px;
}

/* =========================================
   NAVIGATION BUTTONS
========================================= */

.news-navigation {
    display: flex;
    gap: 10px;
}

.news-nav-btn {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 14px;
    background: #fff;
    color: #0f172a;
    font-size: 20px;
    transition: .3s;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}

.news-nav-btn:hover {
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    color: #fff;
    transform: translateY(-3px);
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:992px) {

    .news-tabs {
        width: 100%;
        overflow: auto;
        padding: 4px;
    }

    .news-tab {
        white-space: nowrap;
        min-width: auto;
        padding: 9px 16px;
        font-size: 13px;
    }

}
/* cards */

.news-card {
    background: rgba(255, 255, 255, .7);
    backdrop-filter: blur(12px);
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .6);
    transition: .45s;
    position: relative;
    box-shadow: 0 15px 40px rgba(15, 23, 42, .06);
    /* تنظیم ارتفاع ثابت مناسب به همراه Flexbox جهت جلوگیری از بیرون‌زدگی محتوا */
    height: 560px;
    display: flex;
    flex-direction: column;
}

.news-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(37, 99, 235, .18);
}

/* image */

.news-image {
    position: relative;
    height: 240px;
    overflow: hidden;
    flex-shrink: 0; /* جلوگیری از فشرده شدن تصویر */
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 1s;
}

.news-card:hover img {
    transform: scale(1.08);
}

.news-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top,
            rgba(15, 23, 42, .75),
            transparent);
}

/* category */

.news-category {
    position: absolute;
    top: 18px;
    right: 18px;
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    color: #fff;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    z-index: 3;
}

.news-category.cyan {
    background: linear-gradient(135deg, #0891b2, #06b6d4);
}

/* content */

.news-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* توزیع بهینه فضا در ارتفاع ثابت */
    overflow: hidden;
}

.news-meta {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
    color: #64748b;
    font-size: 13px;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.news-meta span {
    display: flex;
    align-items: center;
}

.news-meta i {
    margin-left: 6px;
    font-size: 15px;
    color: #94a3b8;
}

/* titles and descriptions constraint */

.news-title {
    font-size: 20px;
    line-height: 1.9;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-shrink: 0;
}

.news-desc {
    color: #64748b;
    line-height: 2;
    font-size: 14px;
    margin-bottom: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1; /* اشغال فضای باقی‌مانده و جلوگیری از هل دادن دکمه به بیرون */
}

/* button */

.news-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #2563eb;
    padding: 12px 22px;
    border-radius: 16px;
    font-weight: 800;
    transition: .35s;
    /* تراز دقیق در انتهای کارت و حفظ ابعاد دکمه */
    margin-top: auto;
    align-self: flex-start;
    flex-shrink: 0;
}

.news-btn:hover {
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    color: #fff;
    transform: translateX(-5px);
}

/* owl */

.news-carousel .owl-stage {
    padding: 15px 0;
}

.news-carousel .owl-dots {
    margin-top: 25px;
    text-align: center;
}

.news-carousel .owl-dot span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #bfdbfe !important;
    transition: .3s;
}

.news-carousel .owl-dot.active span {
    width: 35px;
    border-radius: 20px;
    background: #2563eb !important;
}

/* responsive */

@media(max-width:992px) {

    .section-title {
        font-size: 24px;
    }

    .news-topbar {
        gap: 20px;
    }

    .news-navigation {
        width: 100%;
        justify-content: center;
    }

    .news-nav-btn {
        width: 48px;
        height: 48px;
    }

    .news-image {
        height: 220px;
    }
}

.archive-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 16px;
    text-decoration: none;
    background: #fff;
    color: #0f172a;
    font-weight: 800;
    transition: .35s;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
    border: 1px solid rgba(37, 99, 235, .08);
}

.archive-btn i {
    transition: .35s;
}

.archive-btn:hover {
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(37, 99, 235, .25);
}

.archive-btn:hover i {
    transform: translateX(-5px);
}

@media(max-width:992px) {

    .news-topbar {
        gap: 20px;
    }

    .news-tabs {
        width: 100%;
        overflow: auto;
    }

    .archive-btn {
        flex: 1;
        justify-content: center;
    }

}

/* =========================================
   SYSTEMS SECTION
========================================= */

/* =========================================
   SYSTEMS SECTION — ULTRA MODERN
========================================= */

.systems-section {
    padding: 30px 0;
    background:
        linear-gradient(to bottom, #f8fbff, #eef5ff);
    position: relative;
    overflow: hidden;
}

/* spacing exactly like news section */
.news-ultra-section {
    margin-bottom: 0;
    padding-bottom: 0;

}

.systems-section .container {
    max-width: 1320px;
}

/* =========================================
   HEADER
========================================= */

.systems-header {
    margin-bottom: 38px;
}

.systems-title-wrap {
    gap: 16px;
}

.systems-icon {
    width: 65px;
    height: 65px;
    border-radius: 20px;
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    box-shadow: 0 10px 25px rgba(29, 161, 242, .25);
}

.systems-title-text span {
    font-size: 13px;
    color: #3b82f6;
    font-weight: 700;
    display: block;
    margin-bottom: 3px;
}

.systems-title-text h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    color: #0f172a;
}

/* =========================================
   WRAPPER
========================================= */

.systems-wrapper {
    display: flex;
    gap: 28px;
    align-items: stretch;
}

.systems-content {
    width: 100%;
}

/* =========================================
   GRID
========================================= */

.systems-grid {
    flex: 1;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(12px);

    border-radius: 34px;
    border: 1px solid rgba(255, 255, 255, .7);

    padding: 38px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;

    box-shadow:
        0 15px 40px rgba(15, 23, 42, .05);

    min-height: 100%;
}

/* =========================================
   SYSTEM ITEM
========================================= */

.system-item {
    position: relative;

    background: #fbfdff;

    border: 1px solid #edf3ff;

    border-radius: 28px;

    min-height: 180px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-decoration: none !important;

    overflow: hidden;

    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1),
        box-shadow .45s cubic-bezier(.22, 1, .36, 1),
        border-color .45s ease,
        background .45s ease;
}

/* glow bg */

.system-item::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(135deg,
            rgba(37, 99, 235, .08),
            rgba(56, 189, 248, .04));

    opacity: 0;

    transition: .45s ease;
}

.system-item:hover::before {
    opacity: 1;
}

.system-item:hover {
    transform:
        translateY(-10px);

    border-color: #bfdbfe;

    box-shadow:
        0 20px 45px rgba(37, 99, 235, .12);
}

/* icon */

.system-icon {
    width: 78px;
    height: 78px;

    border-radius: 24px;

    background: #eff6ff;
    border: 1px solid #dbeafe;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    transition:
        all .55s cubic-bezier(.22, 1, .36, 1);
}

.system-icon i {
    font-size: 30px;
    color: #2563eb;

    transition:
        all .55s cubic-bezier(.22, 1, .36, 1);
}

.system-item:hover .system-icon {
    background:
        linear-gradient(135deg, #2563eb, #38bdf8);

    transform:
        rotate(6deg) scale(1.08);
}

.system-item:hover .system-icon i {
    color: #fff;
    transform: scale(1.08);
}

/* title */

.system-item h5 {
    margin: 0;

    font-size: 15px;
    font-weight: 800;

    color: #0f172a;

    transition: .35s ease;
}

.system-item:hover h5 {
    color: #2563eb;
}

/* =========================================
   SIDEBAR
========================================= */

.systems-sidebar {
    width: 340px;

    display: flex;
    flex-direction: column;

    gap: 18px;
}

/* equal height */
.systems-grid,
.systems-sidebar {
    min-height: 100%;
}

/* card */

.systems-category {
    flex: 1;
    width: 100%;
    text-align: right;
    background: none;
    outline: none;
    background: rgba(255, 255, 255, .72);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(219, 231, 255, .8);

    border-radius: 28px;

    padding: 12px 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1),
        box-shadow .45s cubic-bezier(.22, 1, .36, 1),
        border-color .45s ease,
        background .45s ease;

    cursor: pointer;

    position: relative;
    overflow: hidden;
}

/* bootstrap active */
.systems-category.active,
.systems-category.show {
    background: #f4f8ff;
    border-color: #93c5fd;

    box-shadow:
        0 16px 35px rgba(37, 99, 235, .10);
}

/* smooth fade bootstrap */
.tab-pane {
    animation: fadeSystem .45s ease;
}

@keyframes fadeSystem {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

}

.systems-category::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(135deg,
            rgba(37, 99, 235, .06),
            rgba(56, 189, 248, .02));

    opacity: 0;

    transition: .45s ease;
}

.systems-category:hover::before {
    opacity: 1;
}

.systems-category:hover {
    transform: translateY(-6px);

    border-color: #93c5fd;

    box-shadow:
        0 18px 40px rgba(37, 99, 235, .10);
}

.systems-category.active {
    background: #f4f8ff;
    border-color: #93c5fd;

    box-shadow:
        0 16px 35px rgba(37, 99, 235, .10);
}

/* icon */

.systems-category i {
    font-size: 24px;
    color: #2563eb;

    transition: .4s ease;
}

.systems-category:hover i {
    transform: scale(1.1);
}

/* text */

.systems-category h4 {
    margin: 0;

    font-size: 16px;
    font-weight: 800;

    color: #081028;
}

.systems-category p {
    margin: 5px 0 0;

    font-size: 11px;

    color: #7c879b;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1200px) {

    .systems-wrapper {
        flex-direction: column;
    }

    .systems-sidebar {
        width: 100%;
    }

    .systems-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media(max-width:768px) {

    .systems-section {
        padding: 70px 0;
    }

    .systems-grid {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .systems-title-text h2 {
        font-size: 26px;
    }

    .systems-category {
        min-height: 110px;
    }

}

/* =========================================
EVENTS GALLERY MINIMAL
========================================= */

.events-gallery-section {
    padding: 30px 0;
    background: #f4f7fb;
}

/* header */

.events-gallery-header {
    margin-bottom: 38px;
}

.events-gallery-icon {
    width: 64px;
    height: 64px;

    border-radius: 20px;

    background: linear-gradient(135deg, #2563eb, #38bdf8);

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-size: 24px;

    margin-left: 16px;

    box-shadow:
        0 12px 30px rgba(37, 99, 235, .18);
}

.events-gallery-title span {
    display: block;

    font-size: 13px;
    font-weight: 700;

    color: #2563eb;

    margin-bottom: 5px;
}

.events-gallery-title h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    color: #0f172a;
}

/* card */

.event-gallery-card {
    position: relative;

    border-radius: 28px;

    overflow: hidden;

    height: 277px;

    background: #fff;

    box-shadow:
        0 10px 35px rgba(15, 23, 42, .06);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.event-gallery-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 20px 50px rgba(37, 99, 235, .14);
}

.event-gallery-card img {
    width: 100%;
    height: 100%;

    object-fit: fill;

    transition: 1s ease;
}

.event-gallery-card:hover img {
    transform: scale(1.05);
}

/* overlay */

.event-gallery-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(to top,
            rgba(15, 23, 42, .55),
            rgba(15, 23, 42, .08));

    opacity: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: .35s ease;
}

.event-gallery-card:hover .event-gallery-overlay {
    opacity: 1;
}

/* button */

.event-gallery-btn {
    width: 64px;
    height: 64px;

    border: none;

    border-radius: 20px;

    background: rgba(255, 255, 255, .18);

    backdrop-filter: blur(10px);

    color: #fff;

    font-size: 22px;

    transition: .35s ease;
}

.event-gallery-btn:hover {
    background: #fff;

    color: #2563eb;

    transform: scale(1.08);
}

/* =========================================
MODAL
========================================= */

.event-modal-content {
    position: relative;

    background: transparent;

    border: none;
}

.event-modal-content img {
    width: 100%;

    border-radius: 28px;
}

/* close */

.event-modal-close {
    position: absolute;

    top: 20px;
    left: 20px;

    width: 52px;
    height: 52px;

    border: none;

    border-radius: 18px;

    background: rgba(15, 23, 42, .55);

    backdrop-filter: blur(12px);

    color: #fff;

    font-size: 20px;

    z-index: 20;

    transition: .3s ease;
}

.event-modal-close:hover {
    background: #fff;

    color: #0f172a;

    transform: rotate(90deg);
}

/* modal backdrop */

.modal-content {
    box-shadow: none;
}

.modal-backdrop.show {
    opacity: .88;
}

/* responsive */

@media(max-width:992px) {

    .event-gallery-card {
        height: 420px;
    }

    .events-gallery-title h2 {
        font-size: 28px;
    }

}

@media(max-width:768px) {

    .events-gallery-section {
        padding: 30px 0;
    }

    .event-gallery-card {
        height: 340px;

        border-radius: 22px;
    }

    .events-gallery-icon {
        width: 56px;
        height: 56px;

        border-radius: 18px;

        font-size: 20px;
    }

    .events-gallery-title h2 {
        font-size: 24px;
    }

}

/* =========================================
PROVINCE HEALTH UI
========================================= */

.province-health-ui {
    position: relative;
    padding: 30px 0;
    background: #f5f7fc;
    overflow: hidden;
    z-index: 1;
}

/* top abstract lines */
.health-bg-lines {
    position: absolute;
    top: -120px;
    right: -100px;
    width: 1000px;
    height: 500px;
    background:
        repeating-radial-gradient(circle at top right,
            rgba(37, 99, 235, .045) 0px,
            rgba(37, 99, 235, .045) 2px,
            transparent 2px,
            transparent 18px);
    transform: rotate(-6deg);
    opacity: .55;
    z-index: -1;
}

/* left soft glow */
.health-bg-glow {
    position: absolute;
    left: -220px;
    bottom: -220px;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            rgba(59, 130, 246, .10) 0%,
            rgba(59, 130, 246, .04) 38%,
            transparent 72%);
    z-index: -2;
}

/* tiny minimal dots */
.health-bg-dots {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(37, 99, 235, .08) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: .16;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .45), transparent);
    z-index: -3;
}

/* =========================================
HEADER
========================================= */

.health-top {
    margin-bottom: 60px;
}

.health-title-wrap {
    gap: 14px;
}

.health-icon {
    width: 52px;
    height: 52px;

    border-radius: 18px;

    background:
        linear-gradient(135deg, #2563eb, #3b82f6);

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-size: 16px;

    box-shadow:
        0 10px 30px rgba(37, 99, 235, .14);
}

.health-mini-title {
    display: block;

    font-size: 11px;
    font-weight: 700;

    color: #3b82f6;

    margin-bottom: 4px;
}

.health-title {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    color: #0f172a;
}

.health-desc {
    margin: 0;

    font-size: 13px;
    color: #94a3b8;
}

/* =========================================
MAP
========================================= */

.province-map-box {
    position: relative;

    height: 520px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.map-circle {
    position: absolute;

    border-radius: 50%;
    border: 1px dashed #c7d2fe;
}

.map-circle-1 {
    width: 470px;
    height: 470px;
}

.map-circle-2 {
    width: 320px;
    height: 320px;

    border-color: #dbeafe;
}

.province-map {
    position: relative;
    z-index: 2;

    width: 53%;
    max-width: 520px;

    filter:
        drop-shadow(0 30px 45px rgba(15, 23, 42, .10));

    transition: .35s ease;
}

.province-map:hover {
    transform: translateY(-5px);
}

/* city */

.city-badge {
    position: absolute;

    left: 90px;
    bottom: 95px;

    z-index: 5;

    height: 44px;

    padding: 0 16px;

    border-radius: 14px;

    background: rgba(255, 255, 255, .90);

    backdrop-filter: blur(10px);

    border: 1px solid #e2e8f0;

    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 12px;
    font-weight: 700;

    color: #0f172a;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, .06);
}

.city-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 0 0 4px rgba(34, 197, 94, .12);
}

/* =========================================
STATS
========================================= */

.stats-modern-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;
}

/* card */

.modern-stat-card {
    position: relative;

    background: rgba(255, 255, 255, .75);

    border: 1px solid #e2e8f0;

    border-radius: 28px;

    padding: 24px;

    min-height: 185px;

    overflow: hidden;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

/* glow */

.modern-stat-card::before {
    content: "";

    position: absolute;

    top: -40px;
    left: -40px;

    width: 100px;
    height: 100px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(59, 130, 246, .10),
            transparent 70%);
}

/* hover */

.modern-stat-card:hover {
    transform: translateY(-6px);

    border-color: #bfdbfe;

    box-shadow:
        0 20px 40px rgba(37, 99, 235, .08);
}

/* icon */

.modern-stat-icon {
    width: 52px;
    height: 52px;

    border-radius: 18px;

    background: #eff6ff;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 28px;

    transition: .25s ease;
}

.modern-stat-icon i {
    font-size: 17px;
    color: #2563eb;
}

.modern-stat-card:hover .modern-stat-icon {
    background: #2563eb;
}

.modern-stat-card:hover .modern-stat-icon i {
    color: #fff;
}

/* content */

.modern-stat-content span {
    display: block;

    font-size: 12px;
    font-weight: 700;

    color: #64748b;

    margin-bottom: 12px;
}

.modern-stat-content h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -1px;
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:992px) {

    .province-health-ui {
        padding: 70px 0;
    }

    .health-title {
        font-size: 28px;
    }

    .province-map-box {
        height: 420px;
    }

    .map-circle-1 {
        width: 340px;
        height: 340px;
    }

    .map-circle-2 {
        width: 240px;
        height: 240px;
    }

    .city-badge {
        left: 50%;
        transform: translateX(-50%);
        bottom: 20px;
    }

}

@media(max-width:768px) {

    .health-title {
        font-size: 24px;
    }

    .health-desc {
        font-size: 12px;
    }

    .stats-modern-grid {
        grid-template-columns: 1fr;
    }

    .modern-stat-card {
        min-height: auto;
    }

    .province-map-box {
        height: 320px;
    }

}

.journal-showcase {
    position: relative;
    padding: 30px 0;
    overflow: hidden;
}

/* background */
.journal-showcase::before {
    content: "";
    position: absolute;
    top: -150px;
    right: -120px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            rgba(59, 130, 246, .08),
            transparent 70%);
}

.journal-showcase::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(59, 130, 246, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, .03) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .2), transparent);
    pointer-events: none;
}

/* header */
.journal-head {
    margin-bottom: 42px;
    position: relative;
    z-index: 2;
}

.journal-title-wrap {
    gap: 16px;
}

.journal-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    box-shadow: 0 10px 30px rgba(37, 99, 235, .18);
}

.journal-mini {
    font-size: 11px;
    color: #7b8aa0;
    display: block;
    margin-bottom: 6px;
}

.journal-title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
}

.journal-archive-btn {
    height: 42px;
    padding: 0 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .65);
    border: 1px solid rgba(37, 99, 235, .12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #2563eb;
    text-decoration: none;
    transition: .2s ease;
    backdrop-filter: blur(10px);
}

.journal-archive-btn:hover {
    background: #2563eb;
    color: #fff;
}

/* journals */
/* تنظیم گرید برای حالت تک‌ستونه (عریض) مشابه تصویر دوم */
.journal-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* تغییر از 2 ستون به 1 ستون */
    gap: 16px;
    position: relative;
    z-index: 2;
}

/* تبدیل کارت به حالت افقی با Flexbox */
.journal-card {
    position: relative;
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 24px;
    padding: 16px;
    text-decoration: none;
    overflow: hidden;
    transition: .25s ease;
    backdrop-filter: blur(14px);
    display: flex;
    /* اضافه شدن فلکس */
    align-items: center;
    /* تراز عمودی وسط */
    gap: 20px;
    /* فاصله بین عکس و متن */
}

.journal-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .08));
    opacity: 0;
    transition: .25s ease;
}

.journal-card:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, .18);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .06);
}

.journal-card:hover::before {
    opacity: 1;
}

/* تنظیم ابعاد کاور برای حالت افقی */
.journal-cover {
    width: 250px;
    /* عرض ثابت برای تصویر در حالت افقی */
    height: 160px;
    /* ارتفاع متناسب */
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 0;
    /* حذف مارجین پایین */
    background: #eef2ff;
    flex-shrink: 0;
    /* جلوگیری از فشرده شدن تصویر */
}

.journal-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s ease;
}

.journal-card:hover img {
    transform: scale(1.04);
}

/* تنظیم بخش متن در حالت افقی */
.journal-info {
    position: relative;
    z-index: 2;
    flex-grow: 1;
    /* پر کردن فضای باقیمانده */
}

.journal-info h3 {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.journal-info span {
    font-size: 12px;
    color: #7b8aa0;
}

/* حالت ریسپانسیو برای موبایل (بازگشت به حالت عمودی در صفحات کوچک) */
@media(max-width: 768px) {
    .journal-card {
        flex-direction: column;
        /* در موبایل دوباره زیر هم می‌افتند */
        align-items: stretch;
    }

    .journal-cover {
        width: 100%;
        height: 220px;
        margin-bottom: 14px;
    }
}

.uni-glance-section {
    position: relative;
    padding: 30px 0;
    overflow: hidden;
}

/* background */
.uni-glance-section::before {
    content: "";
    position: absolute;
    top: -180px;
    left: -180px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            rgba(37, 99, 235, .07),
            transparent 70%);
}

.uni-glance-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(37, 99, 235, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, .03) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .18), transparent);
    pointer-events: none;
}

/* header */
.uni-glance-head {
    margin-bottom: 34px;
    position: relative;
    z-index: 2;
    gap: 16px;
}

.uni-mini-title {
    display: block;
    font-size: 11px;
    color: #7b8aa0;
    margin-bottom: 6px;
}

.uni-main-title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
}

.uni-head-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    box-shadow: 0 10px 25px rgba(37, 99, 235, .16);
}

/* tabs */
.uni-modern-tabs {
    gap: 14px;
    margin-bottom: 34px;
    position: relative;
    z-index: 2;
}

.uni-modern-tabs .nav-link {
    height: 54px;
    padding: 0 22px;
    border-radius: 18px;
    border: 1px solid rgba(37, 99, 235, .12);
    background: rgba(255, 255, 255, .65);
    backdrop-filter: blur(10px);
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: .2s ease;
}

.uni-modern-tabs .nav-link i {
    font-size: 17px;
}

.uni-modern-tabs .nav-link:hover {
    border-color: rgba(37, 99, 235, .25);
    color: #2563eb;
}

.uni-modern-tabs .nav-link.active {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    border-color: transparent;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .16);
}

/* image */
.uni-image-card {
    position: relative;
    height: 100%;
    min-height: 470px;
    border-radius: 34px;
    overflow: hidden;
}

.uni-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.uni-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top,
            rgba(15, 23, 42, .35),
            transparent 45%);
}

.uni-image-badge {
    position: absolute;
    right: 24px;
    bottom: 24px;
    height: 46px;
    padding: 0 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .92);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #0f172a;
    font-size: 12px;
    font-weight: 700;
    backdrop-filter: blur(10px);
}

.uni-image-badge i {
    color: #2563eb;
}

/* services */
.uni-services-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.uni-service-item {
    height: 150px;
    border-radius: 26px;
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(255, 255, 255, .7);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: .2s ease;
    padding: 15px;
}

.uni-service-item:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, .18);
    box-shadow: 0 15px 35px rgba(15, 23, 42, .05);
}

.uni-service-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: rgba(37, 99, 235, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: #2563eb;
    font-size: 24px;
}

.uni-service-item span {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    text-align: center;
    line-height: 1.8;
}

/* stats */
.uni-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.uni-stat-card {
    height: 150px;
    border-radius: 26px;
    background: rgba(255, 255, 255, .68);
    border: 1px solid rgba(255, 255, 255, .75);
    backdrop-filter: blur(12px);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: .2s ease;
    position: relative;
    overflow: hidden;
}

.uni-stat-card::before {
    content: "";
    position: absolute;
    top: -40px;
    left: -40px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            rgba(37, 99, 235, .09),
            transparent 70%);
}

.uni-stat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, .18);
    box-shadow: 0 15px 35px rgba(15, 23, 42, .05);
}

.uni-stat-card h3 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 800;
    color: #2563eb;
}

.uni-stat-card span {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

/* responsive */
@media(max-width:992px) {

    .uni-services-box {
        grid-template-columns: repeat(2, 1fr);
    }

    .uni-image-card {
        min-height: 380px;
        margin-bottom: 20px;
    }

}

@media(max-width:768px) {

    .uni-modern-tabs {
        gap: 10px;
    }

    .uni-modern-tabs .nav-link {
        width: 100%;
        justify-content: center;
    }

    .uni-services-box,
    .uni-stats-grid {
        grid-template-columns: 1fr;
    }

    .uni-main-title {
        font-size: 26px;
    }

    .uni-image-card {
        min-height: 300px;
    }

}

/* =========================================
SECTION
========================================= */

/* =========================================
   MULTIMEDIA SECTION
========================================= */

.media-ultra-section {
    position: relative;
    background:
        linear-gradient(to bottom, #f8fbff, #eef5ff);
}

/* =========================================
   TOPBAR
========================================= */

.media-topbar {
    margin-bottom: 40px;
}

/* =========================================
   TITLE
========================================= */

.section-title-wrap {
    display: flex;
    align-items: center;
}

.title-icon {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    background:
        linear-gradient(135deg, #0f4c81, #1da1f2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    margin-left: 16px;
    box-shadow: 0 15px 35px rgba(37, 99, 235, .18);
}

.section-subtitle {
    font-size: 13px;
    font-weight: 700;
    color: #3b82f6;
    display: block;
    margin-bottom: 4px;
}

.section-title {
    font-size: 34px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.3;
}

/* =========================================
   TABS
========================================= */

.media-tabs {
    background: rgba(255, 255, 255, .7);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 5px;
    box-shadow: 0 10px 35px rgba(15, 23, 42, .05);
    border: 1px solid rgba(255, 255, 255, .7);
    gap: 5px;
}

.media-tabs .nav-link {
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 14px;
    font-weight: 800;
    border-radius: 12px;
    padding: 11px 24px;
    transition: .35s;
    min-width: 95px;
}

.media-tabs .nav-link:hover {
    background: rgba(37, 99, 235, .06);
    color: #2563eb;
}

.media-tabs .nav-link.active {
    background:
        linear-gradient(135deg, #2563eb, #38bdf8);
    color: #fff;
    box-shadow: 0 10px 25px rgba(37, 99, 235, .2);
}

/* =========================================
   ARCHIVE BUTTON
========================================= */

.archive-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: 16px;
    text-decoration: none;
    background: #fff;
    color: #0f172a;
    font-weight: 800;
    transition: .35s;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
    border: 1px solid rgba(37, 99, 235, .08);
}

.archive-btn i {
    transition: .35s;
}

.archive-btn:hover {
    background:
        linear-gradient(135deg, #2563eb, #38bdf8);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 18px 35px rgba(37, 99, 235, .18);
}

.archive-btn:hover i {
    transform: translateX(-5px);
}

/* =========================================
   NAVIGATION
========================================= */

.media-navigation {
    display: flex;
    gap: 10px;
}

.media-nav-btn {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 16px;
    background: #fff;
    color: #0f172a;
    font-size: 21px;
    transition: .35s;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

.media-nav-btn:hover {
    background:
        linear-gradient(135deg, #2563eb, #38bdf8);
    color: #fff;
    transform: translateY(-3px);
}

/* =========================================
   CARD
========================================= */

.media-card {
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(12px);
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    transition: .45s;
    box-shadow: 0 15px 45px rgba(15, 23, 42, .06);
    border: 1px solid rgba(255, 255, 255, .65);
    height: 100%;
}

.media-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(37, 99, 235, .16);
}

/* =========================================
   IMAGE
========================================= */

.media-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.media-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 1s;
}

.media-card:hover img {
    transform: scale(1.08);
}

.media-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top,
            rgba(15, 23, 42, .75),
            transparent);
}

/* =========================================
   CATEGORY
========================================= */

.media-category {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;

    background:
        linear-gradient(135deg, #2563eb, #38bdf8);

    color: #fff;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
}

.media-category.cyan {
    background:
        linear-gradient(135deg, #0891b2, #06b6d4);
}

/* =========================================
   CONTENT
========================================= */

.media-content {
    padding: 26px;
}

/* =========================================
   META
========================================= */

.media-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #64748b;
    font-size: 13px;
    margin-bottom: 16px;
}

/* =========================================
   TITLE
========================================= */

.news-title {

    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.news-title a {
    font-size: 18px;
    line-height: 1.9;
    font-weight: 900;

    color: #0f172a;
}

/* =========================================
   DESC
========================================= */

.news-desc {
    color: #64748b;
    line-height: 2;
    font-size: 14px;
    margin-bottom: 22px;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================
   BUTTON
========================================= */

.news-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-size: 14px;
    background:
        linear-gradient(135deg, #eff6ff, #dbeafe);

    color: #2563eb;
    padding: 12px 22px;
    border-radius: 16px;
    font-weight: 800;
    transition: .35s;
}

.news-btn:hover {
    background:
        linear-gradient(135deg, #2563eb, #38bdf8);

    color: #fff;
    transform: translateX(-5px);
}

/* =========================================
   VIDEO PLAY BUTTON
========================================= */

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;

    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #2563eb;
    font-size: 24px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

/* =========================================
   AUDIO CARD
========================================= */

.audio-card {
    padding: 30px;
}

.audio-icon {
    width: 82px;
    height: 82px;
    border-radius: 24px;

    background:
        linear-gradient(135deg, #2563eb, #38bdf8);

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-size: 30px;

    margin-bottom: 22px;

    box-shadow: 0 15px 35px rgba(37, 99, 235, .2);
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:992px) {

    .media-topbar {
        gap: 20px;
    }

    .section-title {
        font-size: 26px;
    }

    .media-tabs {
        width: 100%;
        overflow: auto;
        flex-wrap: nowrap;
    }

    .media-tabs .nav-link {
        white-space: nowrap;
        min-width: auto;
    }

    .media-navigation {
        width: 100%;
        justify-content: center;
    }

    .archive-btn {
        flex: 1;
        justify-content: center;
    }

    .media-image {
        height: 220px;
    }

    .news-title {
        font-size: 18px;
    }

}

/* =========================================
   VIRTUAL TOUR
========================================= */

.virtual-tour-section {
    position: relative;

}

/* =========================================
   TITLE
========================================= */

.tour-title-wrap {
    display: flex;
    align-items: center;
}

.tour-title-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, #0f4c81, #1da1f2);

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-size: 22px;

    margin-left: 14px;

    box-shadow: 0 12px 30px rgba(37, 99, 235, .15);
}

.tour-subtitle {
    display: block;
    font-size: 12px;
    color: #3b82f6;
    font-weight: 700;
    margin-bottom: 3px;
}

.tour-title {
    font-size: 24px;
    font-weight: 900;
    color: #0f172a;
}

/* =========================================
   CARD
========================================= */

.tour-card {
    position: relative;

    height: 82px;

    background:
        rgba(255, 255, 255, .72);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(37, 99, 235, .12);

    border-radius: 22px;

    padding: 0 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    text-decoration: none;

    transition: .35s;

    overflow: hidden;

    box-shadow: 0 8px 25px rgba(15, 23, 42, .04);
}

.tour-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg,
            rgba(37, 99, 235, .05),
            transparent);

    opacity: 0;
    transition: .35s;
}

.tour-card:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, .2);
    box-shadow: 0 18px 35px rgba(37, 99, 235, .10);
}

.tour-card:hover::before {
    opacity: 1;
}

/* =========================================
   RIGHT SIDE
========================================= */

.tour-card-right {
    display: flex;
    align-items: center;
    gap: 16px;

    position: relative;
    z-index: 2;
}

.tour-card-right span {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
}

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

.tour-card-icon {
    width: 44px;
    height: 44px;

    border-radius: 14px;

    background:
        linear-gradient(135deg, #eff6ff, #dbeafe);

    display: flex;
    align-items: center;
    justify-content: center;

    color: #2563eb;
    font-size: 18px;

    transition: .35s;
}

.tour-card:hover .tour-card-icon {
    background:
        linear-gradient(135deg, #2563eb, #38bdf8);

    color: #fff;

    transform: rotate(-6deg);
}

/* =========================================
   ARROW
========================================= */

.tour-arrow {
    width: 38px;
    height: 38px;

    border-radius: 12px;

    background: #f8fbff;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #2563eb;

    font-size: 18px;

    transition: .35s;

    position: relative;
    z-index: 2;
}

.tour-card:hover .tour-arrow {
    background: #2563eb;
    color: #fff;
    transform: translateX(-4px);
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:992px) {

    .tour-title {
        font-size: 24px;
    }

    .tour-card {
        height: auto;
        min-height: 76px;
        padding: 18px;
    }

    .tour-card-right span {
        font-size: 15px;
        line-height: 1.8;
    }

}

/*=========================================
PROFILE SYSTEM SECTION
=========================================*/

.profile-system-section {
    background:
        linear-gradient(to bottom, #f8fbff, #eef5ff);
    position: relative;
    overflow: hidden;
}

/* title */


.title-icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: linear-gradient(135deg, #0f4c81, #1da1f2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 23px;
    box-shadow: 0 12px 28px rgba(37, 99, 235, .18);
}

.section-subtitle {
    font-size: 13px;
    color: #3b82f6;
    font-weight: 700;
    display: block;
    margin-bottom: 6px;
}

.section-title {
    font-size: 24px;
    font-weight: 900;
    color: #0f172a;
}

/* cards */

.profile-link-card {
    height: 74px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(12px);
    border-radius: 22px;
    border: 1px solid rgba(59, 130, 246, .14);

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 24px;
    text-decoration: none;

    transition: all .35s ease;

    color: #0f172a;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, .04);
}

.profile-link-card span {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.8;
}

.profile-link-card i {
    width: 34px;
    height: 34px;
    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eff6ff;
    color: #2563eb;

    font-size: 17px;

    transition: all .35s ease;
}

/* hover */

.profile-link-card:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, .25);

    box-shadow:
        0 18px 40px rgba(37, 99, 235, .10);
}

.profile-link-card:hover i {
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    color: #fff;

    transform: translateX(-3px);
}

/* responsive */

@media(max-width:992px) {

    .section-title {
        font-size: 26px;
    }

    .profile-link-card {
        height: 68px;
        padding: 0 18px;
    }

    .profile-link-card span {
        font-size: 16px;
    }

}

@media(max-width:768px) {

    .profile-system-header {
        margin-bottom: 25px !important;
    }

    .title-icon {
        width: 54px;
        height: 54px;
        font-size: 20px;
    }

    .section-title {
        font-size: 24px;
    }

    .profile-link-card {
        border-radius: 18px;
    }

}

/*=========================================
MINIMAL FOOTER
=========================================*/

.minimal-footer {
    background:
        linear-gradient(90deg, #071827 0%, #0a1f33 100%);
    padding-top: 65px;
    position: relative;
    overflow: hidden;
}

/* top border */

.minimal-footer::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(to left,
            transparent,
            rgba(56, 189, 248, .4),
            transparent);
}

/* brand */

.footer-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.footer-brand-icon {
    width: 168px;
    height: 107px;
    border-radius: 18px;

    background:
        linear-gradient(135deg, #fff, #38bdf8);

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-size: 22px;

    box-shadow:
        0 12px 30px rgba(37, 99, 235, .20);
}

.footer-brand-icon img {
    width: 116px;
}

.footer-mini-title {
    color: #38bdf8;
    font-size: 12px;
    font-weight: 700;
}

.footer-brand h3 {
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    margin: 4px 0 0;
}

/* about */

.footer-about {
    color: rgba(255, 255, 255, .68);
    line-height: 2.1;
    font-size: 15px;
    margin-bottom: 28px;
}

/* social */

.footer-social {
    display: flex;
    gap: 10px;
}

.footer-social a {
    width: 44px;
    height: 44px;
    border-radius: 14px;

    background: rgba(255, 255, 255, .05);

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-size: 17px;

    text-decoration: none;

    border: 1px solid rgba(255, 255, 255, .06);

    transition: .3s;
}

.footer-social a:hover {
    background:
        linear-gradient(135deg, #2563eb, #38bdf8);
    transform: translateY(-4px);
}

/* widgets */

.footer-widget-title {
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 22px;
    position: relative;
    padding-bottom: 12px;
}

.footer-widget-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;

    width: 45px;
    height: 3px;
    border-radius: 20px;

    background:
        linear-gradient(135deg, #38bdf8, #2563eb);
}

/* links */

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 16px;
}

.footer-links a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    font-size: 15px;
    transition: .3s;
}

.footer-links a i {
    color: #38bdf8;
    font-size: 13px;
}

.footer-links a:hover {
    color: #fff;
    transform: translateX(-4px);
}

/* contact */

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;

    color: rgba(255, 255, 255, .75);
    font-size: 15px;
}

.contact-item i {
    width: 38px;
    height: 38px;
    border-radius: 12px;

    background: rgba(56, 189, 248, .08);

    display: flex;
    align-items: center;
    justify-content: center;

    color: #38bdf8;
    font-size: 15px;
}

/* stats */

.footer-stats {
    margin-top: 28px;
    display: flex;
    gap: 14px;
}

.stat-box {

    flex: 1;


}

.stat-box span {
    display: block;
    color: #94a3b8;
    font-size: 13px;
    margin-bottom: 8px;
}

/* استایل کلی بخش آمار */
.footer-stats {
    margin-top: 1.5rem;
    direction: rtl;
}

/* عنوان اصلی (کل بازدید) */
.stat-box>span {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
    position: relative;
    padding-right: 15px;
}

/* خط تزئینی کنار عنوان */
.stat-box>span::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 18px;
    background-color: #3b82f6;
    /* رنگ سازمانی (آبی) - قابل تغییر */
    border-radius: 4px;
}

/* کارت دربرگیرنده آمار */
.stats-card {
    background: rgba(255, 255, 255, 0.05);
    /* پس‌زمینه نیمه‌شفاف */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* حاشیه بسیار محو */
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.stats-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

/* ردیف‌های آمار */
.stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.6rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
    font-size: 0.95rem;
    color: #d1d5db;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* حذف خط زیرین برای آخرین ردیف */
.stats-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* افکت هاور روی هر ردیف (حرکت ملایم به سمت چپ در حالت RTL) */
.stats-row:hover {
    color: #ffffff;
    transform: translateX(-5px);
}

/* برچسب آمار */
.stats-label {
    font-weight: 500;
}

/* مقادیر عددی */
.stats-value {
    font-weight: 700;
    color: #60a5fa;
    /* رنگ آبی روشن برای اعداد */
    background: rgba(59, 130, 246, 0.15);
    /* پس‌زمینه محو برای اعداد */
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-family: 'Courier New', Courier, monospace;
    /* فونت مناسب اعداد */
    letter-spacing: 1px;
}


/* bottom */

.footer-bottom {
    margin-top: 55px;
    border-top: 1px solid rgba(255, 255, 255, .06);

    padding: 18px 0;

    background: rgba(0, 0, 0, .12);
}

.footer-bottom p {
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
}

.footer-dev {
    color: #38bdf8 !important;
}

/* responsive */

@media(max-width:992px) {

    .footer-brand h3 {
        font-size: 24px;
    }

    .footer-stats {
        flex-direction: column;
    }

}

@media(max-width:768px) {

    .minimal-footer {
        padding-top: 50px;
    }

    .footer-brand {
        align-items: flex-start;
    }

    .footer-brand h3 {
        font-size: 22px;
    }

}

/* استایل سامانه شفافیت */
.systems-hero {
    padding: 40px 0;
    background: var(--bg-body);
}

.systems-box {
    background: #fff;
    border-radius: 30px;
    padding: 45px 50px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 10px 35px rgba(15, 23, 42, .06);
}

.systems-box::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    background: rgba(0, 168, 255, .05);
    border-radius: 50%;
    top: -120px;
    left: -120px;
}

.systems-content {
    position: relative;
    z-index: 2;
}

.title-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 168, 255, .08);
    color: var(--secondary-color);
    padding: 10px 18px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 20px;
}

.main-title {
    color: var(--primary-color);
    font-size: 25px;
    font-weight: 800;
    margin-bottom: 20px;
}

.main-desc {
    color: #475569;
    line-height: 2.4;
    font-size: 16px;
    margin: 0;
    text-align: justify;
}

.systems-logo {
    background: #f8fafc;
    border-radius: 24px;
    padding: 25px;
    text-align: center;
    box-shadow:
        0 5px 20px rgba(15, 23, 42, .05);
}

.systems-logo img {
    max-height: 180px;
    object-fit: contain;
}

@media(max-width:991px) {

    .systems-box {
        padding: 35px 25px;
    }

    .systems-logo {
        margin-top: 30px;
    }

    .main-title {
        font-size: 30px;
    }

    .main-desc {
        font-size: 14px;
        line-height: 2.2;
    }

}

/* ===================================
   Elegant Minimal System Cards
=================================== */

.systems-section {

    padding: 30px 0;

    background:
        linear-gradient(to bottom,
            #f8fbff,
            #eef4f9);
}

/* row */

.systems-section .row {

    --bs-gutter-x: 18px;
    --bs-gutter-y: 18px;
}

/* ===================================
   card
=================================== */

.mini-system-card {

    position: relative;

    background: #fff;

    border-radius: 22px;

    border: 1px solid #e7eef5;

    min-height: 170px;

    height: 100%;

    padding: 20px 14px;

    text-align: center;

    text-decoration: none;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

    box-shadow:
        0 4px 14px rgba(15, 23, 42, .035);

    overflow: hidden;
}

/* subtle blue glow */

.mini-system-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(circle at top right,
            rgba(0, 168, 255, .06),
            transparent 35%);

    opacity: 0;

    transition: .3s ease;
}

.mini-system-card:hover {

    transform: translateY(-5px);

    border-color: rgba(0, 168, 255, .14);

    box-shadow:
        0 14px 28px rgba(15, 23, 42, .07);
}

.mini-system-card:hover::before {

    opacity: 1;
}

/* ===================================
   icon wrapper
=================================== */

.mini-icon {

    width: 78px;
    height: 78px;

    border-radius: 20px;

    overflow: hidden;

    margin-bottom: 16px;

    position: relative;

    background:
        linear-gradient(180deg,
            #ffffff,
            #f7fbff);

    border: 1px solid #edf3f8;

    display: flex;

    align-items: center;

    justify-content: center;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .9),
        0 4px 12px rgba(30, 96, 163, .05);
}

.mini-system-card:hover .mini-icon {

    transform: translateY(-2px);

    box-shadow:
        0 10px 20px rgba(30, 96, 163, .10);
}

/* top accent */

.mini-icon::before {

    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 30px;
    height: 3px;

    border-radius: 50px;

    background:
        linear-gradient(to left,
            var(--accent-color),
            var(--secondary-color));

    z-index: 2;
}

/* ===================================
   image
=================================== */

.system-icon {
    width: 56px;
    /* یا هر سایز ثابت دلخواه */
    height: 56px;
    padding: 10px;
    display: grid;
    place-items: center;
    transition: transform .25s ease;
    overflow: hidden;
    /* جلوگیری از بیرون‌زدگی */
}

.system-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* لوگو بدون کات */
    display: block;
}

.mini-system-card:hover .system-icon {
    transform: scale(1.05);
}

/* ===================================
   title
=================================== */

.mini-system-card h5 {

    color: var(--primary-color);

    font-size: 13px;

    font-weight: 800;

    line-height: 1.9;

    margin: 0;
}

/* ===================================
   Tablet
=================================== */

@media(max-width:991px) {

    .mini-system-card {

        min-height: 160px;
    }

    .mini-icon {

        width: 70px;
        height: 70px;
    }

}

/* ===================================
   Mobile
=================================== */

@media(max-width:768px) {

    .systems-section {

        padding: 35px 0;
    }

    .systems-section .row {

        --bs-gutter-x: 12px;
        --bs-gutter-y: 12px;
    }

    .mini-system-card {

        min-height: 140px;

        border-radius: 18px;

        padding: 16px 10px;
    }

    .mini-icon {

        width: 60px;
        height: 60px;

        border-radius: 16px;

        margin-bottom: 12px;
    }

    .mini-system-card h5 {

        font-size: 11px;

        line-height: 1.8;
    }

}

/* ===================================
   Small Mobile
=================================== */

@media(max-width:480px) {

    .mini-system-card {

        min-height: 130px;
    }

    .mini-icon {

        width: 54px;
        height: 54px;
    }

}

/* ===================================
  style page static show
=================================== */
.pdf-download-wrapper .row {
    row-gap: 24px;
}

.pdf-download-wrapper .col-lg-4,
.pdf-download-wrapper .col-md-6 {
    position: relative;

    display: flex;
    align-items: center;

    padding: 18px 22px;

    border-radius: 26px;
    width: 30%;
    margin-left: 20px;
    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.92),
            rgba(248, 250, 252, 0.85));

    border: 1px solid rgba(226, 232, 240, .8);

    box-shadow:
        0 10px 30px rgba(15, 23, 42, .05);

    overflow: hidden;

    transition: all .35s ease;
}

.pdf-download-wrapper .col-lg-4:hover,
.pdf-download-wrapper .col-md-6:hover {
    transform: translateY(-8px);

    box-shadow:
        0 18px 40px rgba(15, 23, 42, .10);
}

.pdf-download-wrapper .col-lg-4::before,
.pdf-download-wrapper .col-md-6::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    transform: skewX(-25deg);

    background: linear-gradient(to right,
            transparent,
            rgba(255, 255, 255, .55),
            transparent);

    transition: .9s;
}

.pdf-download-wrapper .col-lg-4:hover::before,
.pdf-download-wrapper .col-md-6:hover::before {
    left: 150%;
}

.pdf-download-wrapper .pdf-card-icon {
    width: 72px;
    height: 72px;

    min-width: 72px;

    border-radius: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff5f5;

    border: 1px solid #ffe2e2;

    margin-left: 18px;

    position: relative;
}

.pdf-download-wrapper .pdf-card-icon::before {
    content: "\f1c1";

    font-family: FontAwesome;

    font-size: 34px;

    color: #ef4444;
}

.pdf-download-wrapper .pdf-card-content {
    flex: 1;

    text-align: right;
}

.pdf-download-wrapper .pdf-card-content h5 {
    margin: 0 0 6px;
}

.pdf-download-wrapper .pdf-card-content h5 a {
    font-size: 17px;
    font-weight: 800;

    color: #0f172a;

    text-decoration: none;

    transition: .3s;
}

.pdf-download-wrapper .pdf-card-content h5 a:hover {
    color: #2563eb;
}

.pdf-download-wrapper .pdf-card-content span {
    display: block;

    font-size: 13px;
    font-weight: 500;

    color: #64748b;
}

.pdf-download-wrapper .pdf-card-content>a {
    text-decoration: none;
}

.pdf-download-wrapper .pdf-download-icon {
    width: 50px;
    height: 50px;

    min-width: 50px;

    border-radius: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 14px;

    background:
        linear-gradient(135deg,
            #2563eb,
            #0ea5e9);

    box-shadow:
        0 10px 20px rgba(37, 99, 235, .18);

    position: relative;

    transition: .35s ease;
}

.pdf-download-wrapper .pdf-download-icon::before {
    content: "\f060";

    font-family: FontAwesome;

    font-size: 15px;

    color: #fff;
}

.pdf-download-wrapper .col-lg-4:hover .pdf-download-icon,
.pdf-download-wrapper .col-md-6:hover .pdf-download-icon {
    transform: scale(1.08) rotate(-8deg);
}

@media(max-width:768px) {

    .pdf-download-wrapper .col-lg-4,
    .pdf-download-wrapper .col-md-6 {
        padding: 16px;
        border-radius: 22px;
    }

    .pdf-download-wrapper .pdf-card-icon {
        width: 62px;
        height: 62px;

        min-width: 62px;
    }

    .pdf-download-wrapper .pdf-card-icon::before {
        font-size: 28px;
    }

    .pdf-download-wrapper .pdf-card-content h5 a {
        font-size: 15px;
    }

    .pdf-download-wrapper .pdf-download-icon {
        width: 44px;
        height: 44px;

        min-width: 44px;
    }

}


/* ---------news-style-------- */
/* .Articlecontent .single-post .row {
    flex-direction: row;
    width: 100%;
    
    } */
/* کانتینر اصلی آبی رنگ */
.news-box-container {
    background-color: #F0F7FD;
    border: 1px solid #E1EEF8;
    border-radius: 15px;
    padding: 20px;
    direction: rtl;
    /* فرض بر راست‌چین بودن سایت */
    margin-bottom: 20px;
}

/* تنظیمات ریسپانسیو و فلکس */
.news-box-container .row {
    display: flex;
    align-items: center;
}

/* --- بخش سمت راست: شناسه خبر --- */
.news-id-wrapper {
    display: flex;
    justify-content: flex-end;
    /* چسبیدن به راست */
    align-items: center;
    gap: 15px;
    position: relative;
}

/* آیکون روزنامه (دایره زرد) */
.news-id-wrapper .icon-box {
    width: 50px;
    height: 50px;
    background-color: #FFF9E6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFC107;
    font-size: 24px;
    flex-shrink: 0;
}

/* متن‌های شناسه خبر */
.news-id-wrapper .text-box {
    display: flex;
    flex-direction: column;
    text-align: left;
    /* متن‌ها نسبت به هم */
}

.news-id-wrapper .text-box .label-txt {
    font-size: 13px;
    color: #6C757D;
    margin-bottom: 2px;
}

.news-id-wrapper .text-box .value-txt {
    font-size: 22px;
    font-weight: 800;
    color: #0D47A1;
    line-height: 1;
    font-family: sans-serif;
    /* فونت اعداد */
}

/* خط جداکننده وسط (فقط در دسکتاپ) */
.separator-line {
    border-left: 1px solid #CBD5E1;
}

@media (max-width: 767px) {
    .separator-line {
        border-left: none;
        border-bottom: 1px solid #CBD5E1;
        padding-bottom: 15px;
        margin-bottom: 15px;
        justify-content: center !important;
    }

    .news-id-wrapper {
        justify-content: center;
    }
}

/* --- بخش سمت چپ: لینک کوتاه --- */
.shortlink-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.shortlink-wrapper .caption {
    font-size: 14px;
    color: #6C757D;
    white-space: nowrap;
}

/* کپسول سفید رنگ اینپوت */
.shortlink-box {
    background-color: #FFFFFF;
    border-radius: 50px;
    padding: 4px;
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

/* آیکون لینک (سبز رنگ) */
.shortlink-box .link-icon {
    color: #009688;
    font-size: 18px;
    padding: 0 15px;
    transform: rotate(-45deg);
    /* چرخش اختیاری برای زیبایی */
}

/* اینپوت لینک */
.shortlink-box input {
    border: none;
    background: transparent;
    flex-grow: 1;
    color: #333;
    font-size: 14px;
    font-family: monospace;
    /* فونت مناسب لینک */
    direction: ltr;
    text-align: left;
    outline: none;
    min-width: 0;
    /* جلوگیری از سرریز در موبایل */
}

/* دکمه کپی */
.btn-copy-custom {
    background-color: #0D47A1;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 8px 25px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.btn-copy-custom:hover {
    background-color: #08306b;
    color: white;
}

.btn-copy-custom i {
    font-size: 16px;
}

#inner-post-gallery a {
    border: none;

}

.news-info ul {
    margin-bottom: 0px !important;
    padding-right: 0px !important;

}

.news-info ul li {
    margin-bottom: 0px !important;
}

.meta-list {
    display: flex;
}

.meta-list a {
    background: #f1f1f1;
    color: #555;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.2s;
    border-bottom: none;
}

.es-news-tags ul {
    display: flex;
    width: 100%;
    gap: 10px;
    padding-right: 0 !important;
    padding: 5px !important;
}

.es-news-tags ul li {
    list-style-type: none !important;
    font-size: 12px;
}

.es-news-tags ul li a {
    padding: 5px !important;
    font-size: 12px;

}

/* ========================================================================= */
/* --- اصلاح و محدودسازی استایل‌های المان‌های محتوایی فقط به Articlecontent --- */
/* ========================================================================= */
.news-head h2 {
    font-size: 16px;
    text-align: justify;
    line-height: 2;
    color: #333;

    @media screen and (max-width:768px) {
        font-size: 1rem !important;
    }
}

/* ========================================================================= */
/* --- پایان کدهای Articlecontent (سایر کلاس‌ها به صورت استاندارد در روت) --- */
/* ========================================================================= */


.meta-list {
    margin: 1rem 0rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.meta-list a:hover {
    background-color: var(--blue-1);
    color: var(--blue-light);
}

.single-post .single-post-head .news-info ul {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    /* margin-top: 1.1rem; */
    border-bottom: 1px solid var(--color-bg-light);
    padding: 10px;

    @media screen and (max-width:768px) {
        gap: 0;

    }
}

.single-post .single-post-head .news-info ul li {
    margin-inline-end: 10px;
    display: flex;
    align-items: center;
}

.single-post .single-post-head .news-info ul li i {
    color: #8b95c6;
    font-size: 18px;
    margin-left: 10px;
}

.single-post .single-post-head .news-tools ul {
    display: flex;
}

.single-post .single-post-head .news-tools ul li {
    margin-left: 10px;
}

.single-post .single-post-head .news-tools a {
    color: #007bff;
    border-bottom: 1px dashed #007bff;
}

.single-post .single-post-head .news-tools i {
    font-size: 1.7em;
    color: #00366c;
    transition: .3s;
}

.single-post .es-post-content .es-post-header {
    margin-bottom: 15px;
}

.single-post .es-post-content .news-head h3 {
    font-weight: 600;
    font-size: 16px;
    color: #004e88;
    line-height: 28px;
}

.single-post .es-post-content .news-head h2 {
    font-weight: 700;
    font-size: 22px;
    color: #000;
    line-height: 1.7;
    margin-bottom: 5px;
    text-align: justify;
}

.single-post .es-post-content .news-lead p {
    border-radius: 15px;
    margin: 30px 0;
    background: #eff3f6;
    padding: 10px 15px;
    text-align: justify;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: #000;
}

.single-post .es-post-content .news-content .news-img {
    float: left;
    width: 100%;
    margin: 0 30px 15px 0;
}

.single-post .es-post-content .news-content .news-img #photo-face-tag {
    /* border: 1px solid rgba(79, 185, 179, 0.3); */
    border-radius: 10px;
    /* padding: 10px; */
    text-align: center;
    background-color: rgba(79, 185, 179, 0.03);
}

.single-post .es-post-content .news-content .news-long {
    text-align: justify;
}


.single-post .es-post-content .news-content .news-img img {
    border: 0;
    box-shadow: 0 5px 5px rgba(0, 0, 0, .2);
    border-radius: 10px;
}

.single-post .es-post-content .extra-meta li {
    display: flex;
    align-items: center;
}

.single-post .es-post-content .extra-meta li i {
    color: #dc3545;
    font-size: 25px;
    margin-left: 10px;
}


.single-post .es-post-content .shorturl-wrap {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.single-post .es-post-content .shorturl-wrap .input-group {
    display: flex;
    flex-direction: row-reverse;
    border: 1px solid rgba(79, 185, 179, 0.3);
    width: auto;
    border-radius: 5px;
}

.single-post .es-post-content .shorturl-wrap .input-group #shorturlitem {
    padding: 8px;
    border-radius: 5px 0 0 5px;
    text-align: left;
    min-width: 50px;
    width: auto;
    max-width: 200px;
    border: none;
}

.single-post .es-post-content .shorturl-wrap .input-group .btn-shorturl-wrap {
    background: #003366;
    border-radius: 0 5px 5px 0;
    color: white;
    width: 120px;
    border: none;
}

.single-post .es-post-content .es-meta-wrap .post-title {
    margin-left: 10px;
}

t .single-post .es-post-content .es-meta-wrap ul {
    display: flex;
    padding: 0;
    margin: 15px 0;
}

.single-post .es-post-content .es-meta-wrap ul li {
    position: relative;
    margin: 0 0 5px 5px;
}

.single-post .es-post-content .es-meta-wrap ul li a {
    padding: 10px 15px;
    background: #f2f2f2;
    font-size: 14px;
    text-decoration: none;
    color: #007bff;
    border-bottom: 1px dashed #007bff;
    border-radius: 10px;
}

.single-post .es-post-content .es-meta-wrap .meta-list {
    display: flex;
    align-items: center;
}

.es-post-gallery {
    background-color: white;
    padding-top: 2rem;
    border-top: 1px solid var(--color-bg-light);
    margin-bottom: 1rem;
}

.es-post-gallery .post-title h2 {
    font-size: 16px;
    line-height: 28px;
}

.es-post-gallery .inner-post-gallery {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

.jg-entry.jg-entry-visible {
    border-radius: 15px;
}

/* تنظیمات کلی گالری برای هم‌راستایی */
.justified-gallery>a {
    /* position: relative; */
    overflow: hidden;
    display: block;
}

/* 1. هم‌اندازه کردن تصاویر ویدیو */
.video-entry .video-thumb-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.video-entry img.video-img {
    width: 100%;
    height: 250px !important;
    /* ارتفاع ثابت برای همه ویدیوها */
    object-fit: cover;
    /* تصویر برش می‌خورد تا دفرمه نشود */
    display: block;
    opacity: 0.8;
    /* کمی تاریک‌تر برای دیده شدن دکمه پلی */
    transition: 0.3s;
}

/* افکت هاور روی ویدیو */
.video-entry:hover img.video-img {
    opacity: 1;
    transform: scale(1.05);
    /* کمی زوم هنگام موس */
}

/* 2. استایل دکمه پلی (وسط‌چین دقیق) */
.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* تکنیک دقیق وسط‌چین */
    font-size: 40px;
    /* سایز آیکون */
    color: white;
    background: rgba(0, 0, 0, 0.5);
    /* پس‌زمینه شیشه‌ای دایره‌ای */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* کلیک از روی آیکون رد شود */
    border: 2px solid white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.video-entry:hover .play-icon {
    background: rgba(255, 0, 0, 0.8);
    /* تغییر رنگ هنگام هاور (مثلا قرمز) */
    border-color: rgba(255, 0, 0, 0.8);
}

.es-post-gallery .inner-post-gallery .inner-video video {
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

.jg-entry.jg-entry-visible {
    border-radius: 10px;

}

.es-post-gallery .inner-post-gallery img {
    padding: 5px;
    border-radius: 15px;
    left: 0;
    top: 0;
    width: 100%;
    height: 150px;
    object-fit: cover;
    transition: transform 0.4s ease;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #333;
    overflow: hidden;
    transition: 0.3s all !important;
    transform: scale(1.1);

}

.es-post-gallery .inner-post-gallery img:hover {
    transform: scale(1.2);
}

.es-post-gallery .post-title {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    gap: 5px;
}

.es-post-gallery .post-title i {
    color: #8b95c6;
    font-size: 25px;
    margin-bottom: 5px;
}

.image-entry {
    width: 176px;
    height: 117px;
    margin-left: 0px !important;
    margin-top: 0px !important;
}

.content-main .user-comments {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    background: #eff3fb;
    padding: 5px 10px 10px 0px;
    border-radius: 20px;
}

.title-logo img {
    width: 30px;
}

.add-comment-btn {
    font-size: 15px;
    font-weight: 500;
}

.title-text {
    font-size: 14px;
    color: var(--color-text);
}

.content-main .user-comments .about-info .title-logo.title-blog-logo::before {
    width: 16px;
    height: 12px;
}

.content-main .info-comments {
    list-style-type: none;
    padding: 30px;
    gap: 5px;
}

.content-main .info-comments .all-response {
    background: #FCFCFD;
    display: flex;
    padding: 12px 18px;
    flex-direction: column;
    gap: 18px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.content-main .comments-box .name-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.content-main .comments-box .dateText {
    color: var(--gray-700);
    font-size: 16px;
    font-weight: 300;
    line-height: 18px;
}

.content-main .comments-box ul {
    margin-bottom: 0;
    padding: 0;
    list-style-type: none;
}

.content-main .comments-box .name-box .control-input .img-user {
    max-width: 16px;
}

.content-main .comments-box .name-box .control-input .img-user img {
    width: 50px;
    height: 50px;
}

.content-main .comments-box .name-box .control-input {
    display: flex;
    align-items: center;
    gap: 50px;
}

.content-main .comments-box .name-box .control-input .img-user {
    display: flex;
}

.content-main .comments-box .name-box .control-input .userName {
    color: var(--gray-900);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 12px;
}

.content-main .comments-box .name-box .user-title {
    color: var(--gray-700);
    font-weight: 500;
    font-size: 16px;
    line-height: 2.4;
}

.content-main .comments-box .text-user {
    color: var(--gray-700);
    text-align: justify;
    line-height: 2.4;
}

.content-main .comments-box .Response .res-user {
    border: none;
    background: transparent;

}

.content-main .comments-box .Response .res-user .res-icon-1 {
    font-size: 18px;
    color: #98A2B3;

}

.content-main .comments-box .Response .res-user .res-icon-2 {
    font-size: 16px;
    color: #98A2B3;

}

.content-main .comments-box .Response .res-user span {
    color: var(--gray-700);
    font-size: 12px;
    margin: 0 12px 0 12px;
    line-height: 16px;
    font-weight: 300;
}

.content-main .comments-box .Response .res-user {
    display: flex;
}

.content-main .comments-box .Response-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.content-main .comments-box .Response-box .answering-btn {
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 12px;
}

.content-main .comments-box .Response-box .answering-btn i {
    font-size: 18px;
    color: var(--blue-1);


}


.content-main .comments-box .Response-box .answering-btn .replay {
    color: var(--blue-1);
    line-height: 18px;
}

.content-main .comments-box.answer-box .Response-box {
    justify-content: end;

}

.content-main .comments-box.answer-box {
    list-style-type: none;
    margin-right: 12px;
}

.content-main .comments-box .Response .res-user[aria-expanded="false"] .res-icon-2 {
    transform: rotate(-90deg);
    transition: 0.5s all;
}


.content-main .comments-box .Response .res-user[aria-expanded="true"] .res-icon-2 {
    transition: 0.5s all;
    transform: rotate(90deg);
}

.content-main .comments-box .Response-box .answering-btn[aria-expanded="false"] {
    color: var(--blue-1);
}

.content-main .comments-box .Response-box .answering-btn[aria-expanded="true"] .res-icon-1 {
    color: var(--blue-5);
}

.content-main .comments-box .Response-box .answering-btn[aria-expanded="true"] .replay {
    color: var(--blue-5);
}

.content-main .user-comments .title-logo {
    color: var(--color-text-muted);
}

.content-main .user-comments .base-btn {
    display: flex;
    align-items: center;
    border-radius: 12px;
    padding: 12px 16px;
    gap: 12px;
    font-size: 18px;
    background-color: var(--blue-1);
    color: var(--white);
}

.content-main .users-box .input-form {
    display: flex;
    position: relative;
    width: 100%;

    @media screen and (max-width:768px) {
        display: flex;
        position: relative;
        width: 100%;
        align-items: center;
        justify-content: right;
        flex-wrap: wrap;
    }
}

.content-main .users-box .input-form .control-input {
    display: flex;
    padding: 0 42px 0 10px;
    border-radius: 8px;
    border: 1px solid #ffffff;
    background: #FCFCFD;
    min-height: 45px;
    outline: none;
    width: 100%;
    font-size: 16px;
    font-weight: 300;
    line-height: 2.6;
}

.user-comments-box {
    background: white;
    padding: 30px;
    border-radius: 10px;
}

.content-main .users-box .user-info-box {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 16px;
}


.content-main .users-box .input-form .control-input::placeholder {
    color: #667085;
    text-align: right;
    font-size: 16px;
    line-height: 26px;
    font-weight: 300;

}

.input-form textarea {
    border: 2px solid var(--blue-light) !important;
}

.content-main .users-box .input-form .users-icon {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    gap: 12px;
}

.content-main .users-box .input-form .users-icon i {
    font-size: 18px;
    color: #98A2B3;
}


.content-main .users-box .input-form.description .control-input {
    padding: 12px 16px;
    margin-bottom: 18px;
}

.content-main .users-box .content-main .users-box .description .des-user::placeholder {
    font-size: 16px;
}

.content-main .users-box .content-main .users-box.m-comment {
    margin-right: 12px;
}

.content-main .users-box .btn {
    display: flex;
    justify-content: flex-end;

    @media screen and (max-width:768px) {
        display: flex;
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
        align-items: center;

    }
}

.content-main .users-box .btn .base-btn:hover {
    background-color: var(--kaf-teal);

}

.content-main .users-box .btn .base-btn {
    background-color: var(--hover-text-links);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    margin-top: 10px;
    width: 140px;
    font-size: 14px;
    transition: all 0.3s;
}

.content-main .users-box .form-select {
    background: none;
    border: none;
    padding: 0;
}

.content-main .users-box .refresh-button {
    background: none;
    border: none;
}

.content-main .users-box .input-control {
    display: flex;
    padding: 0 42px 0 10px;
    border-radius: 8px;
    border: 1px solid #F2F4F7;
    background: #FCFCFD;
    min-height: 45px;
    font-size: 16px;
    font-weight: 300;
    line-height: 2.6;

    @media screen and (max-width:768px) {
        padding: 0 !important;
    }
}

@media only screen and (min-width: 0px) and (max-width: 640px) {
    .Articlecontent .single-post .single-post-head .news-info ul {
        flex-wrap: wrap;
    }
}








/* استایل‌های عمومی برای دسکتاپ (نمایش آیکون، برچسب و مقدار) */
.single-post-head .news-info ul li {
    display: inline-block;
    /* margin-right: 15px; */
    font-size: 12px;
    color: gray;
}

.single-post-head .news-info ul li i {
    margin-left: 5px;
}

.single-post-head .news-info .label {
    display: inline;
    /* نمایش برچسب در حالت عادی */
}

.single-post-head .news-info .value {
    display: inline;
    /* نمایش مقدار در حالت عادی */
}


/* ---------------------------------------------------- */
/* استایل ریسپانسیو برای موبایل (فقط مقدار و آیکون نمایش داده شود) */
@media (max-width: 767px) {

    /* 1. لیست اصلی را به صورت افقی در می‌آوریم */
    .single-post-head .news-info ul {
        display: flex;
        justify-content: space-around;
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    /* 2. آیکون‌ها را به صورت عمودی مرتب می‌کنیم */
    .single-post-head .news-info ul li i {
        display: block;
        margin: 0 0 5px 0;
        text-align: center;
    }

    /* 3. برچسب‌ها (Label) را کاملاً مخفی می‌کنیم */
    .single-post-head .news-info .label {
        display: none !important;
    }

    /* 4. مقادیر (Value) را نمایش می‌دهیم و مطمئن می‌شویم متن آن‌ها شکسته نشود (یا برای نمایش زیر آیکون تنظیم شوند) */
    .single-post-head .news-info .value {
        display: block;
        /* نمایش مقدار در یک خط مجزا زیر آیکون */
        text-align: center;
        font-size: 0.9em;
        /* کمی کوچک‌تر کردن اندازه فونت برای جا شدن */
    }

    /* 5. تنظیمات نهایی برای آیتم‌های لیست */
    .single-post-head .news-info ul li {
        display: block;
        text-align: center;
        margin: 0 2px;
        padding: 5px 0;
    }
}




.news-wrapper {
    background-color: #ebf6ff;
    /* رنگ پس‌زمینه دقیق */
    border-radius: 18px;
    padding: 10px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 980px;
    height: 90px;
    /* ارتفاع ثابت برای شباهت بیشتر */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.02);
}

/* --- بخش راست: شناسه خبر --- */
.right-panel {
    display: flex;
    align-items: center;
    gap: 15px;
    height: 100%;
}

/* دایره سفید آیکون */
.icon-circle {
    width: 52px;
    height: 52px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}

.icon-circle i {
    font-size: 26px;
    color: #fbc02d;
    /* زرد */
}

.id-text-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    /* متن‌ها سمت راست تراز شوند */
}

.label-id {
    font-size: 13px;
    color: #607d8b;
    margin-bottom: 2px;
}

.value-id {
    font-size: 24px;
    font-weight: 800;
    color: #0d47a1;
    /* آبی تیره */
    line-height: 1;
    letter-spacing: 1px;
}

/* --- خط جداکننده --- */
/* .vertical-divider {
    width: 1px;
    height: 60%;
    background-color: #cfd8dc;
    margin: 0 30px;
} */

/* --- بخش چپ: لینک کوتاه --- */
.left-panel {
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: flex-end;
    gap: 15px;
}

.label-link {
    font-size: 14px;
    color: #607d8b;
    white-space: nowrap;
}

/* کادر سفید ورودی */
.white-input-box {
    background-color: #fff;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px;
    width: 100%;
    max-width: 480px;
    height: 48px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

/* آیکون لینک (سبز) */
.link-icon-green {
    font-size: 22px;
    color: #00897b;
    margin: 0 15px 0 10px;
    transform: rotate(-45deg);
    /* چرخش مطابق تصویر */
}

/* اینپوت آدرس */
.url-text-input {
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 15px;
    color: #37474f;
    flex-grow: 1;
    direction: ltr;
    text-align: left;
    /* متن لینک سمت چپ باشد */
    margin-right: 5px;
}

/* دکمه کپی (آبی) */
.btn-copy {
    background-color: #0d47a1;
    color: #fff;
    border: none;
    border-radius: 40px;
    height: 40px;
    padding: 0 25px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-copy:hover {
    background-color: #1565c0;
}

.btn-copy i {
    font-size: 16px;
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .news-wrapper {
        flex-direction: column-reverse;
        height: auto;
        padding: 20px;
        gap: 20px;
    }

    .vertical-divider {
        display: none;
    }

    .right-panel,
    .left-panel {
        width: 100%;
        justify-content: center;
    }

    .left-panel {
        flex-direction: column;
        align-items: stretch;
    }

    .label-link {
        text-align: right;
        margin-bottom: 5px;
    }
}





.news-shortlink-wrapper {
    background-color: var(--blue-light);
    border-radius: 15px;
    /* گوشه‌های گرد کلی */
    margin-bottom: 2rem;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 15px rgba(0, 89, 207, 0.05);
    /* سایه بسیار محو آبی */
    overflow: hidden;
}

/* بخش سمت راست: شناسه خبر */
.news-id-section {
    position: relative;
    height: 100%;
    min-height: 70px;
    flex-direction: row-reverse;
    gap: 10px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.news-id-section .label {
    font-size: 0.8rem;
    color: var(--light-2);
    margin-bottom: 2px;
}

.news-id-section .value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--hover-text-links);
    /* رنگ آبی پررنگ برای عدد */
    letter-spacing: 1px;
}

.news-id-section .icon-circle {
    width: 45px;
    height: 45px;
    background-color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.news-id-section .icon-circle i {
    /* color: var(--news-icon-yellow); */
    font-size: 22px;
    color: var(--color-accent);
}

/* خط جداکننده عمودی */
.divider-vertical {
    position: absolute;
    right: 25%;
    /* تنظیم محل قرارگیری بر اساس گرید بوت استرپ */
    top: 15%;
    bottom: 15%;
    width: 1px;
    background-color: #cbd5e1;
    /* رنگ خط خاکستری ملایم */
    z-index: 2;
}

/* بخش سمت چپ: لینک کوتاه */
.short-link-section {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.short-link-section .label-link {
    color: var(--light-2);
    font-size: 0.9rem;
    font-weight: 500;
}

/* باکس سفید داخلی (Input Pill) */
.input-pill {
    background-color: var(--white);
    border-radius: 50rem;
    /* کپسولی کامل */
    padding: 4px;
    /* فاصله داخلی برای دکمه */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
    /* بوردر بسیار محو داخلی */
    border: 1px solid rgba(13, 72, 161, 0);
    transition: all 0.3s;

}

.input-pill:hover {
    border: 1px solid rgba(13, 71, 161, 0.3);
}

/* آیکون لینک */
.input-pill .link-icon {
    color: var(--kaf-teal);
    /* رنگ سبز کله غازی */
    font-size: 18px;
    transform: rotate(-90deg);
    /* چرخش برای زیبایی */
}

/* اینپوت متن لینک */
.input-pill .link-text {
    direction: ltr;
    text-align: left;
    color: var(--blue-4);
    font-size: 0.95rem;
}

/* دکمه کپی */
.btn-copy-custom {
    background-color: var(--hover-text-links);
    /* آبی اصلی */
    color: var(--white);
    border-radius: 50rem;
    padding: 8px 24px;
    font-size: 0.9rem;
    border: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 89, 207, 0.2);
}

.btn-copy-custom:hover {
    background-color: var(--kaf-teal);
    /* آبی تیره‌تر در هاور */
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 89, 207, 0.3);
}

.btn-copy-custom:active {
    transform: translateY(0);
}

/* ریسپانسیو */
@media (max-width: 767.98px) {
    .divider-vertical {
        display: none;
        /* حذف خط جداکننده در موبایل */
    }

    .news-id-section {
        border-bottom: 1px solid #e2e8f0;
        /* خط افقی در موبایل */
        margin-bottom: 10px;
    }

    .news-shortlink-wrapper {
        border-radius: 12px;
    }

    /* تنظیم مجدد گرید برای موبایل */
    .divider-vertical {
        right: auto;
    }
}


/* استایل‌های قبلی شما (حفظ شده) */
.fancybox__container {
    direction: ltr !important;
}

.lg-outer {
    direction: ltr !important;
}

.fancybox-container,
.lg-container,
.lightbox-container {
    direction: ltr !important;
    text-align: left !important;
}

.image-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

.image-lightbox.active {
    opacity: 1;
    pointer-events: auto;
}

.image-lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 12px;
}

.image-lightbox .close-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 32px;
    color: #fff;
    cursor: pointer;
}

#printArea {
    background-color: white;
    border-radius: 10px;
    padding: 30px;
}


/* ==========================================================================
   News Detail Page Styles (Modern & Aesthetic)
   ========================================================================== */

/* --- General Wrapper --- */
.news-detail-wrapper {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
    direction: rtl;
    text-align: right;
    margin-bottom: 2rem;
}

/* --- Header & Title --- */
.news-header {
    margin-bottom: 2rem;
}

.news-header .top-title {
    font-size: 0.9rem;
    color: #e28743;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.news-header h1 {
    font-size: 2.2rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.5;
}

/* --- Meta Info (Date, Views, Time) --- */
.news-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f1f5f9;
    margin-top: 1rem;
    color: #64748b;
    font-size: 0.95rem;
}

.news-meta span {
    display: flex;
    align-items: center;
}

.news-meta i {
    color: #3b82f6;
    /* رنگ آبی ملایم برای آیکون‌ها */
    font-size: 1.1rem;
}

/* --- Lead Image --- */
.news-lead-image {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 2.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* --- Body Content --- */
.news-body {
    font-size: 1.1rem;
    line-height: 2.2;
    color: #334155;
}

.news-body p.lead {
    font-size: 1.2rem;
    color: #0f172a;
    border-right: 4px solid #3b82f6;
    padding-right: 1rem;
    margin-bottom: 2rem;
}

.news-body img {
    border-radius: 12px;
    max-width: 100%;
    height: auto;
    margin: 1.5rem 0;
    transition: transform 0.3s ease;
}

.news-body img:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

/* --- Shortlink & ID Meta Box --- */
.news-meta-box {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 3rem;
    transition: all 0.3s ease;
}

.news-meta-box:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    border-color: #cbd5e1;
}

.border-left-meta {
    border-left: 1px solid #e2e8f0;
}

.meta-icon-circle {
    width: 50px;
    height: 50px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    color: #3b82f6;
    font-size: 1.3rem;
}

.meta-label {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

.meta-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

.link-input-wrapper {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 4px;
    margin-right: 1rem;
}

.link-icon-floating {
    color: #94a3b8;
    margin: 0 10px;
}

.link-input-custom {
    border: none;
    box-shadow: none;
    background: transparent;
    font-size: 0.9rem;
    color: #475569;
}

.link-input-custom:focus {
    outline: none;
    box-shadow: none;
    background: transparent;
}

.btn-copy-custom {
    background: #f1f5f9;
    color: #334155;
    border: none;
    border-radius: 8px;
    padding: 0.4rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.btn-copy-custom:hover {
    background: #3b82f6;
    color: #ffffff;
}

.btn-copy-custom.success-state {
    background: #10b981;
    color: #ffffff;
}

/* --- Gallery Section --- */
.news-gallery {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #f1f5f9;
}

.gallery-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1.5rem;
}

/* محدود کردن حذف تگ br به گالری تا متن خبر خراب نشود */
.inner-post-gallery br {
    display: none;
}

.jg-entry {
    border-radius: 10px;
    overflow: hidden;
    /* ضروری برای جلوگیری از بیرون زدن عکس هنگام زوم */
}

/* افکت زوم بسیار نرم و حرفه‌ای روی عکس داخل لینک، نه کل لینک */
.jg-entry img.image-entry {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    will-change: transform;
}

.jg-entry:hover img.image-entry {
    transform: scale(1.08);
}

/* --- Tags Section --- */
.news-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 3rem;
}

.news-tag {
    background: #f1f5f9;
    color: #475569;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.news-tag:hover {
    background: #e0f2fe;
    color: #0284c7;
    border-color: #bae6fd;
}

/* --- JS Lightbox Styling --- */
.image-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(5px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.image-lightbox.active {
    opacity: 1;
    pointer-events: all;
}

.image-lightbox img {
    max-width: 90%;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.image-lightbox.active img {
    transform: scale(1);
}

.image-lightbox .close-btn {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #ffffff;
    font-size: 3rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.image-lightbox .close-btn:hover {
    color: #ef4444;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .news-detail-wrapper {
        padding: 1.5rem;
    }

    .border-left-meta {
        border-left: none;
        border-bottom: 1px solid #e2e8f0;
    }

    .link-input-wrapper {
        margin-right: 0;
        margin-top: 0.5rem;
    }
}

.hero-section {
    padding: 0 8%;
}

/* پنل اصلی */
.events-panel {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.06);
    border-top: 3px solid var(--accent-color);
    transition: all 0.3s ease;
}

/* هدر پنل */
.events-header {
    border-bottom: 2px solid var(--bg-body);
    padding-bottom: 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--primary-color);
}

.events-header span {
    color: var(--primary-color);
    letter-spacing: -0.2px;
}

/* لیست رویدادها */
.events-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.events-list li {
    padding: 15px 0;
    border-bottom: 1px dashed #e2e8f0;
}

.events-list li:last-child {
    border-bottom: none;
}

/* لینک رویداد */
.event-link {
    display: block;
    color: var(--secondary-color);
    font-size: 14px;
    line-height: 1.6;
    text-decoration: none;
    transition: 0.3s ease;
    margin-bottom: 8px;
}

.event-link:hover {
    color: var(--accent-color);
    transform: translateX(-5px);
    /* افکت حرکتی نرم */
}

/* تاریخ رویداد */
.event-date {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #94a3b8;
}

.event-date i {
    margin-left: 6px;
    color: var(--warm-highlight);
    /* استفاده از رنگ مکمل برای آیکون تقویم */
    font-size: 13px;
}

/* ---------------- Popular Tabs Widget ---------------- */

.b5-popular-widget {
    direction: rtl;
    background: #fff;
    border: 1px solid #e5eaf0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(11, 46, 89, 0.08);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.b5-popular-widget:hover {
    box-shadow: 0 14px 34px rgba(11, 46, 89, 0.12);
}

/* Tabs Header */
.b5-popular-widget .nav-tabs {
    border: 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    padding: 8px 8px 0;
    gap: 6px;
}

.b5-popular-widget .nav-tabs .nav-item {
    margin: 0;
}

.b5-popular-widget .nav-tabs .nav-link {
    width: 100%;
    border: 0 !important;
    background: transparent;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 800;
    padding: 14px 10px;
    border-radius: 12px 12px 0 0 !important;
    position: relative;
    transition: all 0.25s ease;
    text-align: center !important;
    box-shadow: none;
}

.b5-popular-widget .nav-tabs .nav-link:hover {
    color: var(--primary-color);
    background: rgba(30, 96, 163, 0.06);
}

.b5-popular-widget .nav-tabs .nav-link.active {
    color: var(--primary-color) !important;
    background: #fff !important;
    box-shadow: 0 -4px 14px rgba(11, 46, 89, 0.06);
}

.b5-popular-widget .nav-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    right: 18px;
    left: 18px;
    bottom: 0;
    height: 3px;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(90deg,
            var(--accent-color),
            var(--primary-color));
}

/* Tab Content */
.b5-popular-widget .tab-content {
    background: #fff;
    padding: 10px 0 6px;
}

.b5-popular-widget .tab-pane {
    animation: popularFadeUp 0.25s ease both;
}

@keyframes popularFadeUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

/* Remove CMS Design Empty Spaces if needed */
.b5-popular-widget .design-container {
    min-height: unset;
}

.b5-popular-widget .widget-container {
    padding: 0;
}

/* Sidebar List */
.b5-popular-widget .side-widget {
    position: relative;
    background: #fff;
}

.b5-popular-widget .sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.b5-popular-widget .sidebar-list li {
    margin: 0;
    padding: 0;
}

.b5-popular-widget .sidebar-list li:not(:last-child) {
    border-bottom: 1px solid #eef2f6;
}

.b5-popular-widget .sidebar-list a {
    display: flex;
    align-items: center;
    position: relative;
    min-height: 58px;
    padding: 12px 18px 12px 14px;
    color: #334155;
    text-decoration: none;
    transition: all 0.25s ease;
    overflow: hidden;
}

.b5-popular-widget .sidebar-list a::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--warm-highlight);
    border-radius: 50%;
    flex: 0 0 6px;
    margin-left: 10px;
    box-shadow: 0 0 0 4px rgba(243, 156, 18, 0.12);
    transition: all 0.25s ease;
}

.b5-popular-widget .sidebar-list a::after {
    content: "";
    position: absolute;
    right: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 8px 0 0 8px;
    background: var(--primary-color);
    opacity: 0;
    transform: scaleY(0.4);
    transition: all 0.25s ease;
}

.b5-popular-widget .sidebar-list a:hover {
    background: linear-gradient(90deg,
            rgba(0, 168, 255, 0.04),
            rgba(11, 46, 89, 0.08));
    color: var(--primary-color);
    padding-right: 24px;
}

.b5-popular-widget .sidebar-list a:hover::before {
    background: var(--accent-color);
    box-shadow: 0 0 0 5px rgba(0, 168, 255, 0.14);
}

.b5-popular-widget .sidebar-list a:hover::after {
    opacity: 1;
    transform: scaleY(1);
}

/* Item Title */
.b5-popular-widget .sidebar-list h5 {
    margin: 0;
    padding: 0;
    border: 0 !important;
    color: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.8;
    transition: color 0.25s ease;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Optional Bottom Fade */
.b5-popular-widget .shadow-white {
    display: none;
}

/* Sticky Wrapper */
.make-it-sticky {
    position: sticky;
    top: 20px;
    align-self: flex-start;
}

/* Bootstrap Tooltip */
.custom-tooltip {
    --bs-tooltip-bg: var(--primary-color);
    --bs-tooltip-color: #fff;
    --bs-tooltip-padding-x: 10px;
    --bs-tooltip-padding-y: 7px;
    --bs-tooltip-border-radius: 8px;
    --bs-tooltip-font-size: 0.78rem;
}

/* Editor Buttons - جلوگیری از خراب شدن ظاهر در حالت طراحی */
.b5-popular-widget .design-actions {
    font-size: 12px;
}

/* Responsive */
@media (max-width: 768px) {
    .make-it-sticky {
        position: relative;
        top: auto;
        z-index: 10;
        padding: 0;
    }

    .b5-popular-widget {
        border-radius: 14px;
    }

    .b5-popular-widget .nav-tabs .nav-link {
        font-size: 0.85rem;
        padding: 12px 8px;
    }

    .b5-popular-widget .sidebar-list a {
        min-height: 54px;
        padding: 11px 16px 11px 12px;
    }

    .b5-popular-widget .sidebar-list a:hover {
        padding-right: 20px;
    }

    .b5-popular-widget .sidebar-list h5 {
        font-size: 0.88rem;
    }

    #searchForm .input-group .input-group-text {
        position: absolute;
        right: 10px;
        top: 5px !important;
        z-index: 5;
    }
}
/* category  */
/* Container Wrapper */
.widget-newsstyle {
    margin-bottom: 30px;
    padding: 10px 0;
    position: relative;
}

/* Title Styling */
.widget-titleNews {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-color);
    position: relative;
    padding-right: 20px; /* فضای خالی برای خط کنار عنوان */
    margin: 0;
    display: inline-block;
}

/* افزودن یک خط رنگی ضخیم در کنار عنوان (نشانگر برند) */
.widget-titleNews::before {
    content: '';
    position: absolute;
    right: 0;
    top: 5px;
    bottom: 5px;
    width: 6px;
    background: var(--accent-color); /* آبی نئونی */
    border-radius: 4px;
}

/* افزودن یک خط زیرین محو و شیک */
.widget-titleNews::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 20px;
    width: 50px;
    height: 3px;
    background: var(--warm-highlight); /* نارنجی گرم */
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* افکت هاور برای تعاملی تر شدن */
.widget-newsstyle:hover .widget-titleNews::after {
    width: 100px; /* افزایش طول خط زیرین هنگام هاور */
}
/* کارت اصلی */
.article-card {
    background: #ffffff;
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(11, 46, 89, 0.04); /* سایه هماهنگ با رنگ سرمه ای */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(11, 46, 89, 0.06);
    position: relative;
}

.article-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 168, 255, 0.4); /* هایلایت حاشیه با آبی نئونی */
    box-shadow: 0 15px 35px rgba(11, 46, 89, 0.08);
}

/* بخش تصویر */
.card-img-wrapper {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.article-card:hover .card-img-wrapper img {
    transform: scale(1.06);
}

/* بج دسته‌بندی با رنگ گرم برای جلب توجه */
.category-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--warm-highlight);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: bold;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(243, 156, 18, 0.3);
}

/* بدنه کارت */
.card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* اطلاعات متادیتا */
.meta-info {
    display: flex;
    gap: 15px;
    margin-bottom: 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.meta-info span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.meta-info i {
    color: var(--secondary-color); /* استفاده از آبی متوسط برای آیکون‌ها */
}

/* عنوان خبر */
.card-title {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.5;
    margin-bottom: 12px;
}

.card-title a {
    color: var(--primary-color); /* سرمه‌ای عمیق برای عنوان */
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.card-title a:hover {
    color: var(--accent-color); /* تغییر رنگ به آبی روشن در حالت هاور */
}

/* خلاصه متن */
.card-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: justify;
}

/* دکمه ادامه مطلب با رفتار پویا */
.read-more-btn {
    margin-top: auto;
    align-self: flex-start;
    color: var(--secondary-color);
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.read-more-btn i {
    font-size: 0.8rem;
    background: rgba(30, 96, 163, 0.08); /* پس‌زمینه محو از آبی متوسط */
    color: var(--secondary-color);
    padding: 6px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.read-more-btn:hover {
    color: var(--accent-color); /* تبدیل به آبی روشن */
}

.read-more-btn:hover i {
    transform: translateX(-4px);
    background: var(--accent-color);
    color: #ffffff;
    box-shadow: 0 0 8px rgba(0, 168, 255, 0.4);
}


/* ===== Search Box Modern Style ===== */

.search-box {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
}

.search-box input[type="text"] {
    width: 100%;
    height: 54px;
    border-radius: 50px;
    border: 1px solid rgba(11, 46, 89, 0.1);
    padding: 0 60px 0 20px;
    font-size: 0.95rem;
    background: #ffffff;
    color: var(--primary-color);
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(11, 46, 89, 0.04);
}

.search-box input[type="text"]::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.search-box input[type="text"]:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(0, 168, 255, 0.12);
}

/* Search Button */
.btn-search-style {
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(
        135deg,
        var(--secondary-color),
        var(--accent-color)
    );
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 168, 255, 0.25);
}

.btn-search-style i {
    font-size: 0.9rem;
}

/* Hover Effect */
.btn-search-style:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 6px 18px rgba(0, 168, 255, 0.35);
}

/* Active Click */
.btn-search-style:active {
    transform: translateY(-50%) scale(0.95);
}

/* Responsive */
@media (max-width: 576px) {
    .search-box input[type="text"] {
        height: 48px;
        font-size: 0.9rem;
    }

    .btn-search-style {
        width: 38px;
        height: 38px;
    }
}
/* -------------- modern-paging ---------------- */

.pagination {
    background: #fff;
    padding: 10px 16px;
    border-radius: 50px;
    border: 1px solid #e3ecf4;
    display: flex;
    gap: 6px;
    align-items: center;
    box-shadow: 0 6px 18px rgba(11, 46, 89, 0.06);
    width: fit-content;
    margin: 32px auto;
}

.pagination .page-item {
    margin: 0;
    list-style: none;
}

.pagination .page-item .page-link {
    border: none;
    background: #f1f5f9;
    color: #0b2e59;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.25s ease;
    box-shadow: inset 0 0 0 1px transparent;
}

/* حالت فعال (صفحه جاری) */
.pagination .page-item.active .page-link {
    background-color: #0b2e59;
    color: #fff !important;
    transform: scale(1.12);
    box-shadow: 0 6px 14px rgba(11, 46, 89, 0.35);
}

/* هاور */
.pagination .page-item .page-link:hover:not(.disabled) {
    background-color: #1e60a3;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(30, 96, 163, 0.3);
}

/* دکمه‌های قبلی / بعدی (اولین و آخرین آیتم) */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    width: auto;
    min-width: 72px;
    height: 38px;
    padding: 0 18px;
    border-radius: 20px !important;
    background: #e7f3fc;
    color: #1e60a3;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.pagination .page-item:first-child .page-link:hover:not(.disabled),
.pagination .page-item:last-child .page-link:hover:not(.disabled) {
    background: #00a8ff;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 168, 255, 0.35);
}

/* حالت غیرفعال (disabled) */
.pagination .page-item.disabled .page-link,
.pagination .page-item.disabled span.page-link {
    background: transparent;
    color: #a3b1c2;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    pointer-events: none;
}

/* نقاط (...) */
.pagination .page-item.disabled .page-link {
    background: transparent !important;
}

/* ریسپانسیو */
@media (max-width: 576px) {
    .pagination {
        padding: 8px 10px;
        gap: 3px;
    }

    .pagination .page-item .page-link {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    .pagination .page-item:first-child .page-link,
    .pagination .page-item:last-child .page-link {
        min-width: 56px;
        padding: 0 12px;
        font-size: 13px;
    }
}

/* -------------- /modern-paging ---------------- */
.archive.tab-archive {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.archive.tab-archive a {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 10px 18px;
    border-radius: 14px;

    background: #ffffff;

    color: #2563eb;
    font-weight: 600;
    font-size: 14px;

    text-decoration: none;

    border: 1px solid rgba(37, 99, 235, 0.15);

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);

    transition: all 0.25s ease;

    position: relative;
    overflow: hidden;
}

/* آیکن‌ها */
.archive.tab-archive a i {
    font-size: 14px;
    transition: all 0.3s ease;
}

/* hover */
.archive.tab-archive a:hover {
    background: linear-gradient(135deg, #2563eb, #1e40af);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.25);
}

/* حرکت آیکن چپ */
.archive.tab-archive a:hover i.fa-angle-left {
    transform: translateX(-4px);
}

/* افکت شاین */
.archive.tab-archive a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
    transition: all 0.5s ease;
}

.archive.tab-archive a:hover::before {
    left: 100%;
}