@font-face {
    font-family: 'iranyekan';
    src: url('/fonts/iranyekan/woff2/iranyekanwebregular.woff2') format('woff2'),
    url('/fonts/iranyekan/woff/iranyekanwebregular.woff') format('woff'),
    url('/fonts/iranyekan/ttf/iranyekanwebregular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'iranyekan';
    src: url('/fonts/iranyekan/woff2/iranyekanweblight.woff2') format('woff2'),
    url('/fonts/iranyekan/woff/iranyekanweblight.woff') format('woff'),
    url('/fonts/iranyekan/ttf/iranyekanweblight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'iranyekan';
    src: url('/fonts/iranyekan/woff2/iranyekanwebbold.woff2') format('woff2'),
    url('/fonts/iranyekan/woff/iranyekanwebbold.woff') format('woff'),
    url('/fonts/iranyekan/ttf/iranyekanwebbold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.primary-text-color{
    color: var(--primary-text-color) !important;
}
.secondary-bg-color{
    background: var(--secondary-bg-color) !important;
}
.primary-bg-color{
    background: var(--primary-bg-color) !important;
}
.primary-border-color{
    border-color: var(--primary-bg-color) !important;
}
:root {
    --primary-color: #252525;
    --secondary-bg-color: #ff6a00;
    --primary-bg-color: #fac244;
    --primary-text-color: #252525;
    --secondary-color: #1f2937;
    --dark-bg: #111827;
    --darker-bg: #000000;
    --card-bg: #ffffff;
    --text-light: #1f2937;
    --text-muted: #6b7280;
    --border-color: #e5e7eb;
    --hover-bg: #f9fafb;
    --accent-bg: #f3f4f6;
    --bg-1: #0b0b0d; /* مشکی عمیق */
    --bg-2: #111216; /* خاکستری بسیار تیره */
    --accent: #ef4444; /* قرمز اصلی */
    --accent-2: #f87171; /* قرمز روشن‌تر */
    --bg-start: #0f172a; /* slate-900 */
    --bg-end: #1e293b; /* slate-800 */
    --card-bg: rgba(255,255,255,0.08);
    --card-border: rgba(255,255,255,0.12);
    --glow: 0 20px 60px rgba(142, 3, 10, 0.15);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #ffffff;
    color: var(--text-light);
    font-family: 'iranyekan', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
}

/* Top Bar */
.top-bar {
    background-color: var(--primary-bg-color);
    color: #252525;
    padding: 0.5rem 0;
    font-size: 0.875rem;
}

.top-bar a {
    color: #252525;
    text-decoration: none;
    transition: color 0.3s ease;
}

.top-bar a:hover {
    color: var(--primary-color);
}

/* Main Header */
.main-header {
    background-color: var(--primary-bg-color);
    padding: 1rem 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(37, 37, 37, 0.12);
    background: rgba(255, 255, 255, 0.85);
    color: #252525;
    transition: all 0.2s ease;
    text-decoration: none;
}

.header-icon-btn:hover {
    background: white;
    box-shadow: 0 10px 24px rgba(37, 37, 37, 0.12);
}

.header-icon-btn i {
    font-size: 1.05rem;
}

.mobile-search {
    margin-top: 0.5rem;
}

.mobile-search .search-container {
    margin-bottom: 0;
}

.mobile-search .search-input {
    padding: 0.65rem 1rem;
    border-radius: 16px;
}

.mobile-search .search-btn {
    padding: 0.35rem 0.85rem;
    border-radius: 14px;
}

.navbar-brand {
    font-size: 2rem;
    font-weight: 900;
    color: white !important;
    text-decoration: none;
}

.navbar-brand .flame {
    color: var(--primary-color);
    font-size: 1.5rem;
}

.main-nav .nav-link {
    color: #252525 !important;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    text-transform: uppercase;
    font-size: 0.9rem;
}

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

.main-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background: var(--primary-color);
    transition: all 0.3s ease;
}

.main-nav .nav-link:hover::after {
    width: 100%;
    left: 0;
}

/* Search Bar */
.search-container {
    position: relative;
}

.search-input {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 25px;
    padding: 0.75rem 1rem;
    width: 100%;
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.search-btn {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary-color);
    border: none;
    border-radius: 20px;
    padding: 0.5rem 1rem;
    color: white;
    font-weight: 600;
}

.primary-nav {
    margin-top: 1.5rem;
}

.primary-nav .navbar-nav {
    gap: 0.5rem;
}

.primary-nav .navbar-toggler {
    border: 0;
    padding: .35rem .75rem;
    background-color: rgba(37, 37, 37, 0.08);
    border-radius: 0.85rem;
}

.primary-nav .navbar-toggler:focus {
    box-shadow: 0 0 0 .25rem rgba(37, 37, 37, 0.15);
}

.primary-nav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(37,37,37,0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.dropdown-mega .dropdown-menu {
    margin-top: 1.25rem;
}

.mega-menu {
    width: min(1080px, calc(100vw - 2rem));
    padding: 1.75rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.12);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(249, 250, 251, 0.97));
}

.mega-menu__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    margin-bottom: 1.5rem;
}

.mega-menu__search {
    flex: 1 1 280px;
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    padding-inline-start: 2.5rem;
}

.mega-menu__search i {
    position: absolute;
    inset-inline-start: 1rem;
    font-size: 1.1rem;
    color: #94a3b8;
}

.mega-menu__search input {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0.85rem;
    width: 100%;
    font-size: 0.95rem;
}

.mega-menu__search input:focus {
    outline: none;
    box-shadow: none;
}

.mega-menu__shortcuts {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mega-menu__shortcuts .shortcut {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: 0.85rem;
    background: rgba(37, 37, 37, 0.05);
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mega-menu__shortcuts .shortcut i {
    font-size: 1.1rem;
}

.mega-menu__shortcuts .shortcut:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

.mega-menu__body {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}

.mega-menu__column {
    min-width: 0;
}

.mega-menu__item {
    margin-bottom: 1rem;
    transition: transform 0.2s ease;
}

.mega-menu__item:hover {
    transform: translateX(-6px);
}

.mega-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    font-weight: 700;
    color: var(--primary-color);
    padding: 0.35rem 0;
}

.mega-menu__link i {
    font-size: 0.9rem;
    color: #cbd5f5;
}

.mega-menu__sub-list {
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
}

.mega-menu__sub-item {
    margin: 0.35rem 0;
}

.mega-menu__sub-link {
    display: block;
    text-decoration: none;
    color: #6b7280;
    font-size: 0.88rem;
    padding: 0.25rem 0.75rem 0.25rem 0;
    border-radius: 0.75rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.mega-menu__sub-link:hover {
    background: rgba(37, 37, 37, 0.08);
    color: var(--primary-color);
}

.mega-menu__empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #6b7280;
    padding: 2rem 0;
}

.mega-menu__empty i {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
}

@media (max-width: 1199.98px) {
    .mega-menu__body {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .main-header {
        padding: 0.75rem 0;
    }

    .navbar-brand img {
        max-width: 145px;
        height: auto;
    }

    .primary-nav {
        margin-top: 0.75rem;
    }

    .mega-menu {
        margin-inline: auto;
    }

    .mega-menu__body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mega-menu__shortcuts {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 575.98px) {
    .main-header {
        padding: 0.6rem 0;
    }

    .primary-nav {
        margin-top: 0.5rem;
    }

    .header-icon-btn {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .mega-menu {
        padding: 1.25rem;
    }

    .mega-menu__body {
        grid-template-columns: 1fr;
    }

    .mega-menu__shortcuts {
        flex-direction: column;
        align-items: stretch;
    }

    .mega-menu__shortcuts .shortcut {
        width: 100%;
        justify-content: center;
    }
}

.contact-hero {
    background: radial-gradient(1000px 400px at 15% 10%, rgba(250, 194, 68, 0.24), transparent 55%), radial-gradient(1100px 500px at 85% 0%, rgba(255, 106, 0, 0.18), transparent 60%), linear-gradient(135deg, #fff 0%, #f8fafc 100%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

.contact-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: rgba(250, 194, 68, 0.58);
    color: #252525;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.contact-hero__features .contact-feature {
    background: white;
    border-radius: 1.2rem;
    padding: 1.5rem 1.2rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    height: 100%;
}

.contact-feature i {
    font-size: 1.6rem;
    color: #ef4444;
    margin-bottom: 0.75rem;
}

.contact-feature p {
    margin-bottom: 0;
    font-size: 0.9rem;
    color: #6b7280;
}

.contact-hero__card {
    background: var(--primary-bg-color);
    color: #f8fafc;
    border-radius: 1.75rem;
    padding: 2.5rem 2rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
}

.contact-quick__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.08);
    color: #252525;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease;
}

.contact-quick__item i {
    font-size: 1.4rem;
}

.contact-quick__item:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.16);
}

.contact-section {
    background: #f8fafc;
}

.contact-form-card {
    background: white;
    border-radius: 1.75rem;
    padding: 2.5rem;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.contact-form-card .form-control,
.contact-form-card .form-select {
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    padding: 0.75rem 1rem;
}

.contact-form-card .form-control:focus,
.contact-form-card .form-select:focus {
    border-color: rgba(37, 99, 235, 0.65);
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.15);
}

.contact-info-card {
    background: var(--primary-bg-color);
    color: #e2e8f0;
    border-radius: 1.75rem;
    padding: 2.5rem 2.25rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(59, 130, 246, 0.15);
}

.contact-info-item {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.contact-info-item:last-of-type {
    border-bottom: none;
}

.contact-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 1rem;
    background: rgba(37, 99, 235, 0.15);
    font-size: 1.3rem;
    color: #252525;
}

.contact-info-card p {
    color: #252525;
}

.contact-social .btn {
    border-width: 2px;
    padding-inline: 1.25rem;
}

.contact-map__frame {
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

@media (max-width: 991.98px) {
    .contact-hero__card,
    .contact-form-card,
    .contact-info-card {
        padding: 2rem;
    }

    .contact-hero__features .contact-feature {
        padding: 1.25rem 1rem;
    }
}

@media (max-width: 575.98px) {
    .contact-hero__badge {
        font-size: 0.85rem;
    }

    .contact-hero__card,
    .contact-form-card,
    .contact-info-card {
        border-radius: 1.25rem;
    }
}

.auth-section {
    background: #fff;
    position: relative;
    overflow: hidden;
}

.auth-section::before,
.auth-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.35;
}

.auth-section::before {
    width: 320px;
    height: 320px;
    top: 12%;
    inset-inline-start: 8%;
    background: rgba(99, 102, 241, 0.55);
}

.auth-section::after {
    width: 380px;
    height: 380px;
    bottom: 5%;
    inset-inline-end: 10%;
    background: rgba(239, 68, 68, 0.45);
}

.auth-shell {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 2.5rem;
    padding: 3rem;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.35);
    z-index: 1;
}

.auth-shell--reverse {
    flex-direction: row-reverse;
}

.auth-shell__intro {
    flex: 1 1 320px;
    background: var(--primary-bg-color);
    color: #e2e8f0;
    border-radius: 1.75rem;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    position: relative;
    overflow: hidden;
}

.auth-shell__intro::after {
    content: '';
    position: absolute;
    inset: 12% auto auto 15%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.12);
    filter: blur(60px);
    pointer-events: none;
}

.auth-shell__intro > * {
    position: relative;
    z-index: 1;
}

.auth-shell__form {
    flex: 1 1 380px;
    display: flex;
    align-items: stretch;
}

.auth-shell__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.auth-logo-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    color: #fbbf24;
    font-size: 1.4rem;
}

.auth-benefits li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    color: rgba(226, 232, 240, 0.9);
}

.auth-benefits li i {
    color: #34d399;
    font-size: 1.1rem;
}

.auth-statistics {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.auth-statistics__item {
    flex: 1 1 110px;
    background: rgba(15, 23, 42, 0.55);
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    text-align: center;
    color: #e2e8f0;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.auth-form .form-control,
.auth-form .form-select {
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    padding: 0.75rem 1rem;
}

.auth-form .form-control:focus,
.auth-form .form-select:focus {
    border-color: rgba(37, 99, 235, 0.65);
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.1);
}

.toggle-btn {
    background: rgba(148, 163, 184, 0.2);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1f2937;
}

.toggle-btn:hover {
    background: rgba(148, 163, 184, 0.35);
}

.password-meter[data-score="1"] { color: #ef4444; }
.password-meter[data-score="2"] { color: #f97316; }
.password-meter[data-score="3"] { color: #fbbf24; }
.password-meter[data-score="4"] { color: #10b981; }
.password-meter[data-score="5"] { color: #0ea5e9; }

.text-accent {
    color: #f97316 !important;
}

@media (max-width: 991.98px) {
    .auth-shell {
        padding: 2rem;
        border-radius: 2rem;
    }

    .auth-shell__intro,
    .auth-shell__form {
        flex: 1 1 100%;
    }
}

@media (max-width: 575.98px) {
    .auth-shell {
        padding: 1.5rem;
        border-radius: 1.75rem;
    }

    .auth-shell__intro {
        padding: 2rem 1.75rem;
    }
}

/* Category Bar */
.category-bar {
    background-color: white;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

.shop-dept-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.shop-dept-btn:hover {
    background: #b91c1c;
    transform: translateY(-1px);
}

.category-links a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.category-links a:hover {
    background: var(--accent-bg);
    color: var(--primary-color);
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 100%);
    padding: 1.5rem 0;
}

.hero-banner {
    background: var(--primary-bg-color);
    border-radius: 15px;
    padding: 0;
    color: white;
    position: relative;
    overflow: hidden;
}

.hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: transparent;
}

.hero-banner h1 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
}

.hero-banner p {
    font-size: 0.8rem;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.shop-btn {
    background: var(--secondary-bg-color);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 5px;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.shop-btn:hover {
    background: #b91c1c;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(220, 38, 38, 0.3);
}

/* Product Cards */
.product-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    min-height: 560px;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.product-image {
    background: var(--accent-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    min-height: 305px;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--primary-color);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 700;
}

.product-content {
    padding: 1.5rem;
}

.product-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.product-price {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-color);
}

.product-original-price {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 1rem;
    margin-left: 0.5rem;
}

.add-to-cart-btn {
    background: var(--secondary-bg-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    font-weight: 600;
    width: 100%;
    transition: all 0.3s ease;
}

.add-to-cart-btn:hover {
    background: #b91c1c;
}

.add-to-cart-btn:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
}

/* Section Headers */
.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.section-header p {
    font-size: 1.1rem;
    color: var(--text-muted);
}

/* Tabs */
.product-tabs {
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 2rem;
}

.product-tabs .nav-link {
    background: none;
    border: none;
    color: var(--text-muted);
    font-weight: 600;
    padding: 1rem 2rem;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.product-tabs .nav-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.product-tabs .nav-link:hover {
    color: var(--primary-color);
}

/* Footer */
.footer {
    background: var(--primary-bg-color);
    color: white;
    padding: 3rem 0 1rem;
    margin-top: 1rem;
}

.footer h5 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-weight: 700;
}

.footer a {
    color: #d1d5db;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer a:hover {
    color: var(--primary-color);
}

/* Cart Badge */
.cart-badge {
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    position: absolute;
    top: -20px;
    left: -8px;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-banner h1 {
        font-size: 2rem;
    }

    .section-header h2 {
        font-size: 2rem;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #b91c1c;
}
.logo-img {
    max-width: 240px;
    margin-top: -20px;
}
#navbarNav {
    margin-top: 18px;
    border-top: 1px solid #25252538;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg-start: #f8fafc; /* slate-50 */
        --bg-end: #e2e8f0;   /* slate-200 */
        --card-bg: rgba(255,255,255,0.8);
        --card-border: rgba(15,23,42,0.06);
        --glow: 0 20px 60px rgba(142, 3, 10, 0.15);
    }
}

body.auth-bg {
    min-height: 100vh;
    background: radial-gradient(1200px 700px at 10% 10%, rgba(59,130,246,0.18), transparent 40%),
    radial-gradient(900px 500px at 90% 30%, rgba(34,197,94,0.18), transparent 40%),
    linear-gradient(135deg, var(--bg-start), var(--bg-end));
}

.auth-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-radius: 1.25rem;
    box-shadow: var(--glow);
}

.brand-badge {
    width: 64px; height: 64px;
    display: grid; place-items: center;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(59,130,246,.2), rgba(2,132,199,.35));
    border: 1px solid rgba(59,130,246,.35);
}

.divider {
    position: relative; text-align: center; margin: 1.5rem 0;
}
.divider::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1px; background: var(--card-border); }
.divider span { position: relative; padding: .25rem .75rem; background: var(--card-bg); border-radius: 999px; border: 1px solid var(--card-border); font-size: .875rem; }

.form-control, .form-check-input {
    border-radius: .85rem;
}
.form-control:focus {
    box-shadow: 0 0 0 .25rem rgba(59,130,246,.25);
}

.btn-gradient {
    border: 0; border-radius: 1rem; padding: .8rem 1rem;
    background: linear-gradient(135deg, #c3952f, #fac244);
}

.small-muted { color: #94a3b8; font-size: .9rem; }

/* RTL tweaks for floating labels */
[dir="rtl"] .form-floating > label { left: auto; right: 0.75rem; }
[dir="rtl"] .form-floating > .form-control { padding-right: 1rem; }


@media (prefers-color-scheme: light) {
    :root {
        --bg-1: #f4f5f7;
        --bg-2: #ffffff;
        --card-bg: rgba(255,255,255,0.9);
        --card-border: rgba(17,18,22,0.08);
        --glow: 0 20px 60px rgba(239,68,68,0.18);
    }
}

body.auth-bg {
    min-height: 100vh;
    background: radial-gradient(1000px 600px at 10% 10%, rgba(239,68,68,0.15), transparent 40%),
    radial-gradient(900px 500px at 90% 30%, rgba(239,68,68,0.12), transparent 45%),
    linear-gradient(135deg, var(--bg-1), var(--bg-2));
}

.auth-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-radius: 1.25rem;
    box-shadow: var(--glow);
}

.brand-badge {
    width: 64px; height: 64px; display: grid; place-items: center;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(239,68,68,.18), rgba(239,68,68,.35));
    border: 1px solid rgba(239,68,68,.35);
    color: var(--accent);
}

.small-muted { color: var(--text-muted); font-size: .925rem; }

/* دکمه‌ها */
.btn-gradient-red {
    border: 0; border-radius: 1rem; padding: .85rem 1rem;
    background: linear-gradient(135deg, var(--accent), #a30000);
}
.btn-gradient-red:focus { box-shadow: 0 0 0 .25rem rgba(239,68,68,.35); }
.btn-outline-light { border-radius: .9rem; }

/* Divider */
.divider { position: relative; text-align: center; margin: 1.5rem 0; }
.divider::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1px; background: var(--card-border); }
.divider span { position: relative; padding: .25rem .75rem; background: var(--card-bg); border-radius: 999px; border: 1px solid var(--card-border); font-size: .875rem; }

/* فرم‌ها */
.form-control, .form-check-input { border-radius: .9rem; }
.form-control { background-color: rgba(255,255,255,0.03); color: #3a3a3a; }
.form-control::placeholder { color: #6b7280; }
.form-control:focus { color: #fff; border-color: var(--accent); box-shadow: 0 0 0 .25rem rgba(239,68,68,.25); }
.form-floating > label { color: #9aa0a6; }

.link-accent { color: var(--accent-2); text-decoration: none; }
.link-accent:hover { color: var(--accent); text-decoration: underline; }

/* دکمه چشم رمز */
.toggle-btn { color: #a1a1aa; }
.toggle-btn:hover { color: var(--accent-2); }

/* متر قدرت رمز (ساده) */
.password-meter[data-score="0"],
.password-meter:not([data-score]) { color: #ef4444; }
.password-meter[data-score="1"] { color: #ef4444; }
.password-meter[data-score="2"] { color: #f59e0b; }
.password-meter[data-score="3"] { color: #22c55e; }
.password-meter[data-score="4"],
.password-meter[data-score="5"] { color: #10b981; }

/* RTL ریزتنظیم‌ها */
[dir="rtl"] .form-floating > label { left: auto; right: .75rem; }
[dir="rtl"] .form-floating > .form-control { padding-right: 1rem; }
.add-to-cart-btn {
    position: absolute;
    bottom: 0;
    border-radius: 0 0 0 0 !important;
    right: 0;
}
/* Hero Section */
 .hero-section {
     background: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 100%);
     padding: 1.5rem 0;
 }

.hero-banner {
    background: var(--primary-bg-color);
    border-radius: 15px;
    padding: 0;
    color: white;
    position: relative;
    overflow: hidden;
    min-height: 400px;
}

.hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(45deg, rgba(220, 38, 38, 0.1), transparent);
}

.hero-banner h1 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.hero-banner p {
    font-size: 1rem;
    margin-bottom: 0;
    opacity: 0.9;
    position: relative;
    z-index: 2;
}

.hero-banner .shop-btn {
    position: relative;
    z-index: 2;
}

.hero-image {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    opacity: 0.3;
}

/* Small Banners */
.small-banner {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 15px;
    padding: 2rem;
    color: white;
    text-align: center;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.small-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"/></svg>');
    background-size: 50px 50px;
}

.small-banner h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.small-banner p {
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

.small-banner .shop-btn {
    position: relative;
    z-index: 2;
}

/* Brand Logos */
.brands-section {
    background: white;
    padding: 2rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.brand-logo {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.brand-logo:hover {
    opacity: 1;
}

/* Product Sections */
.product-section {
    padding: 2rem 0;
    background: white;
}

.product-tabs {
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 2rem;
}

.product-tabs .nav-link {
    background: none;
    border: none;
    color: var(--text-muted);
    font-weight: 600;
    padding: 1rem 1rem;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.product-tabs .nav-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.product-tabs .nav-link:hover {
    color: var(--primary-color);
}

/* Category Banners */
.category-banners {
    padding: 4rem 0;
    background: var(--accent-bg);
}

.category-banner {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.category-banner:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.category-banner h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-light);
}

.category-banner p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.category-banner .shop-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.category-banner .shop-btn:hover {
    background: #b91c1c;
    transform: translateY(-2px);
}

/* Info Banner */
.info-banner {
    background: var(--primary-bg-color);
    color: white;
    padding: 3rem;
    border-radius: 15px;
    margin: 3rem 0;
    position: relative;
    overflow: hidden;
}

.info-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(45deg, rgba(220, 38, 38, 0.1), transparent);
}

.info-banner h3 {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.info-banner p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}

.info-banner .btn {
    position: relative;
    z-index: 2;
}

/* Testimonial Section */
.testimonial-section {
    background: var(--accent-bg);
    padding: 4rem 0;
}

.testimonial-card {
    background: white;
    border-radius: 15px;
    padding: 3rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.testimonial-text {
    font-size: 1.2rem;
    font-style: italic;
    margin-bottom: 2rem;
    color: var(--text-light);
}

.testimonial-author {
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.testimonial-rating {
    color: #fbbf24;
    font-size: 1.2rem;
}

/* About Section */
.about-section {
    padding: 0rem 0;
    background: white;
}

.about-content {
    background: var(--accent-bg);
    border-radius: 15px;
    padding: 3rem;
}

.about-content h3 {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 1.5rem;
    color: var(--text-light);
}

.about-content p {
    color: var(--text-muted);
    margin-bottom: 2rem;
    line-height: 1.8;
}

/* Map Section */
.map-section {
    background: white;
    padding: 2rem 0;
}

.map-container {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .hero-banner h1 {
        font-size: 2rem;
    }

    .small-banner h3 {
        font-size: 1.2rem;
    }

    .category-banner h4 {
        font-size: 1rem;
    }
}

.he-section { margin: 40px 0; }
.he-section .he-title { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.he-badge-red { background:#ef4444; color:#fff; padding:6px 12px; border-radius:999px; font-size:14px; }
.he-link-more { margin-right:auto; font-size:14px; color:#ef4444; text-decoration:none; }
.he-link-more:hover { text-decoration:underline; }

.he-card { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.06); transition:.2s; }
.he-card:hover { transform: translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.1); }
.he-card .he-img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.he-card .he-body { padding:12px; }
.he-card .he-title-text { font-size:14px; line-height:1.5; height:42px; overflow:hidden; display:block; color:#111827; }
.he-price-row { display:flex; align-items:center; gap:8px; margin-top:8px; }
.he-price-final { color:#b91c1c; font-weight:700; }
.he-price-old { color:#9ca3af; text-decoration:line-through; font-size:12px; }
.he-discount-pill { background:#fee2e2; color:#b91c1c; font-size:12px; padding:2px 8px; border-radius:999px; margin-right:auto; }
.he-stock { font-size:12px; color:#059669; margin-top:6px; }
.he-cta { display:block; text-align:center; background:#ef4444; color:#fff; padding:8px 10px; border-radius:10px; margin-top:10px; text-decoration:none; font-size:14px; }
.he-cta:hover { background:#dc2626; }

/* گرید دسته‌بندی */
.he-cat-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:12px; }
@media (min-width:640px) { .he-cat-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width:1024px) { .he-cat-grid { grid-template-columns: repeat(6,1fr); } }
.he-cat { position:relative; border-radius:16px; overflow:hidden; }
.he-cat img { width:100%; height:180px; object-fit:cover; display:block; }
.he-cat .he-cat-name { position:absolute; inset:auto 0 0 0; background:linear-gradient(transparent, rgba(0,0,0,.6)); color:#fff; padding:10px 12px; font-weight:600; }

/* Swiper سایز کارت‌ها */
.swiper.he-swiper .swiper-slide { width: 170px; }
@media (min-width:768px) { .swiper.he-swiper .swiper-slide { width: 200px; } }
@media (min-width:1280px) { .swiper.he-swiper .swiper-slide { width: 220px; } }

/* سکشن بلاگ */
.he-blog-grid { display:grid; grid-template-columns: 1fr; gap:14px; }
@media (min-width:768px) { .he-blog-grid { grid-template-columns: repeat(3,1fr); } }
.he-post-title { font-size:15px; font-weight:700; color:#111827; margin:8px 0; }
.he-post-meta { font-size:12px; color:#6b7280; }
.he-video iframe { width:100%; height:200px; border-radius:12px; }

/* کانتینر ساده */
.he-container { max-width:1200px; margin:0 auto; padding:0 16px; }
.dropdown-menu.mega-menu{
    min-width: 720px;
    width: min(90vw, 960px);
    direction: rtl; /* چون فارسیه */
}
/* ارتفاع کنترل‌شده + اسکرول داخلی اگر خیلی زیاد شد */
#megaCats{
    max-height: 60vh;
    overflow: auto;
}
/* در موبایل منو به دو ستون جمع می‌شود */
@media (max-width: 767.98px){
    .dropdown-menu.mega-menu{ min-width: auto; width: 92vw; }
}

/* ===== NEW COMPONENTS STYLES ===== */

/* Amazing Discounts Section */
.amazing-discounts-section {
    margin: 15px 0;
    position: relative;
    overflow: hidden;
}

.amazing-discounts-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ef4444" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

.discount-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #dc2626;
    text-shadow: 2px 2px 4px rgba(220, 38, 38, 0.1);
    position: relative;
    z-index: 2;
}

.discount-subtitle {
    font-size: 1.1rem;
    color: #7f1d1d;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

.discount-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(220, 38, 38, 0.15);
    transition: all 0.3s ease;
    position: relative;
    border: 2px solid transparent;
}

.discount-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(220, 38, 38, 0.25);
    border-color: #fecaca;
}

.discount-badge {
    background: #ff6a00;
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 8px 12px;
    border-radius: 0 0 15px 0;
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

.discount-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ff6a00;
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 1.1rem;
    backdrop-filter: blur(10px);
}

.discount-btn {
    background: #ff6a00;
    border: none;
    color: white;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

.discount-btn:hover {
    background: #e05f04;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}
/* Categories Section */
.categories-section {
    padding: 30px 0;
    background: #f8fafc;
}

.category-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.category-image {
    position: relative;
    height: 200px;
    width: 200px;
    align-self: center;
    overflow: hidden;
}

.category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.category-card:hover .category-image img {
    transform: scale(1.1);
}

.category-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #9ca3af;
}

.category-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.category-card:hover .category-overlay {
    transform: translateY(0);
}

.category-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.category-description {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 10px;
}

.category-count {
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 8px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.category-actions {
    padding: 20px;
    margin-top: auto;
}

/* Random Categories Section */
.random-categories-section {
    padding: 30px 0;
    background: #fff;
}

.category-products-section {
    margin-bottom: 60px;
}

.category-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f1f5f9;
}

.category-header h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 5px;
}

/* Horizontal Scroll Components */
.scroll-container {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

.scroll-content {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 10px 0;
}

.scroll-content::-webkit-scrollbar {
    display: none;
}

.scroll-controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
}

.scroll-btn {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #374151;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    pointer-events: all;
    backdrop-filter: blur(10px);
}

.scroll-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.scroll-left {
    left: 15px;
}

.scroll-right {
    right: 15px;
}

/* Blog Section */
.blog-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.article-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.article-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.article-card:hover .article-image img {
    transform: scale(1.1);
}

.video-placeholder,
.article-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #9ca3af;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.article-card:hover .video-overlay {
    opacity: 1;
}

.play-button {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #dc2626;
    backdrop-filter: blur(10px);
}

.video-duration {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
}

.article-type-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.video-badge {
    background: rgba(220, 38, 38, 0.9);
    color: white;
}

.text-badge {
    background: rgba(59, 130, 246, 0.9);
    color: white;
}

.article-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.article-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
    line-height: 1.4;
}

.article-excerpt {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 15px;
    flex: 1;
}

.article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 0.8rem;
    color: #64748b;
}

.article-actions {
    margin-top: auto;
}

/* Video Modal */
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(10px);
}

.video-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.video-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 2rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .discount-title {
        font-size: 2rem;
    }

    .scroll-btn {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    .scroll-left {
        left: 10px;
    }

    .scroll-right {
        right: 10px;
    }

    .category-image {
        height: 150px;
    }

    .article-image {
        height: 150px;
    }

    .play-button {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}

@media (max-width: 576px) {
    .amazing-discounts-section,
    .categories-section,
    .random-categories-section,
    .blog-section {
        padding: 40px 0;
    }

    .discount-title {
        font-size: 1.8rem;
    }

    .category-header h3 {
        font-size: 1.5rem;
    }

    .article-title {
        font-size: 1.1rem;
    }
}
.footer h6{
    color: #252525 !important;
}
.footer li{
    color: #252525 !important;
    & a{
        color: #252525;
    }
}
.footer p{
    color: #252525;
}
.list-style-none{
    list-style: none;
}
a{
    text-decoration: none;
}
.breadcrumb-item a {
    color: var(--primary-text-color);
}
.form-control:focus {
    color: #252525;
}
.woocommerce-product-attributes-item__value p {
    margin-bottom: 0;
    padding-right: 20px;
}
.message-body p {
    font-family: iranyekan, Tahoma, serif;
}