/* فونت رویا (B Roya) — رویا تیره */
@font-face {
    font-family: 'Roya';
    src: url('https://cdn.jsdelivr.net/npm/persianfonts@1.0.2/fonts/BRoya/BRoya.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/npm/persianfonts@1.0.2/fonts/BRoya/BRoya.woff') format('woff'),
         url('https://cdn.jsdelivr.net/npm/persianfonts@1.0.2/fonts/BRoya/BRoya.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* نسخه‌ی تیره برای حالت bold هم از همین فونت استفاده می‌کند */
@font-face {
    font-family: 'Roya';
    src: url('https://cdn.jsdelivr.net/npm/persianfonts@1.0.2/fonts/BRoya/BRoya.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/npm/persianfonts@1.0.2/fonts/BRoya/BRoya.woff') format('woff'),
         url('https://cdn.jsdelivr.net/npm/persianfonts@1.0.2/fonts/BRoya/BRoya.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
/* فونت ایران‌سنس */
@font-face {
    font-family: 'IRANSans';
    src: url('https://cdn.jsdelivr.net/npm/persianfonts@1.0.2/fonts/IRANSans/IRANSans.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/npm/persianfonts@1.0.2/fonts/IRANSans/IRANSans.woff') format('woff'),
         url('https://cdn.jsdelivr.net/npm/persianfonts@1.0.2/fonts/IRANSans/IRANSans.ttf') format('truetype');
    font-weight: normal; font-style: normal; font-display: swap;
}
/* فونت یکان */
@font-face {
    font-family: 'Yekan';
    src: url('https://cdn.jsdelivr.net/npm/persianfonts@1.0.2/fonts/Yekan/WeblogmaYekan.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/npm/persianfonts@1.0.2/fonts/Yekan/WeblogmaYekan.woff') format('woff'),
         url('https://cdn.jsdelivr.net/npm/persianfonts@1.0.2/fonts/Yekan/WeblogmaYekan.ttf') format('truetype');
    font-weight: normal; font-style: normal; font-display: swap;
}

:root {
    --site-font: 'Roya';
    --mobile-overlay-bg: rgba(251, 248, 249, 0.98);
    --mobile-overlay-accent: rgba(216, 131, 158, 0.12);
    --primary-color: #d8839e;
    --primary-hover: #c46b86;
    --bg-color: #fbf8f9;
    --text-dark: #221f20;
    --text-light: #888082;
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.8);
    --border-radius-main: 30px;
    --border-radius-btn: 50px;
    --shadow-soft: 0 20px 40px rgba(216, 131, 158, 0.12);
    --shadow-heavy: 0 15px 35px rgba(0, 0, 0, 0.06);
    --card-bg: #ffffff;
    --input-bg: #f5f0f2;
}

[data-theme="dark"] {
    --mobile-overlay-bg: rgba(18, 14, 16, 0.98);
    --mobile-overlay-accent: rgba(216, 131, 158, 0.08);
    --bg-color: #120e10;
    --text-dark: #fcf9fa;
    --text-light: #b0a6a9;
    --glass-bg: rgba(25, 20, 22, 0.65);
    --glass-border: rgba(255, 255, 255, 0.08);
    --shadow-soft: 0 20px 40px rgba(0, 0, 0, 0.5);
    --shadow-heavy: 0 15px 35px rgba(0, 0, 0, 0.6);
    --card-bg: #1c1719;
    --input-bg: #282124;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--site-font), 'Vazirmatn', sans-serif;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
/* در فونت رویا متن‌ها کمی بزرگ‌تر دیده شوند */
html.roya-active { font-size: 17.5px; }

html { overflow-x: hidden; max-width: 100%; }
body { background-color: var(--bg-color); color: var(--text-dark); overflow-x: hidden; max-width: 100%; width: 100%; position: relative; }

/* ============ سیستم انیمیشن اسکرول ============ */
.animate-on-scroll { opacity: 0; transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; }
.animate-on-scroll.fade-up { transform: translateY(45px); }
.animate-on-scroll.fade-left { transform: translateX(45px); }
.animate-on-scroll.fade-right { transform: translateX(-45px); }
.animate-on-scroll.scale-in { transform: scale(0.92); }
.animate-on-scroll.show { opacity: 1; transform: translate(0, 0) scale(1); }
.animate-on-scroll.delay-1 { transition-delay: 0.12s; }
.animate-on-scroll.delay-2 { transition-delay: 0.24s; }
.animate-on-scroll.delay-3 { transition-delay: 0.36s; }
.animate-on-scroll.delay-4 { transition-delay: 0.48s; }

/* عناوین بخش‌ها */
.section-head { text-align: center; max-width: 600px; margin: 0 auto 50px; }
.section-eyebrow { display: inline-block; color: var(--primary-color); font-weight: 700; font-size: 0.9rem; letter-spacing: 1px; margin-bottom: 12px; padding: 6px 18px; background: var(--mobile-overlay-accent); border-radius: 50px; }
.section-sub { color: var(--text-light); font-size: 1.05rem; margin-top: 12px; }

.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 30px; border-radius: var(--border-radius-btn); font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none; color: var(--text-dark); background: transparent; border: 1.5px solid var(--glass-border); transition: all 0.3s ease; }
.btn-ghost:hover { background: var(--card-bg); border-color: var(--primary-color); color: var(--primary-color); transform: translateY(-3px); }
.inline-secondary { width: auto; display: inline-flex; }

.btn-primary, .btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 32px; border-radius: var(--border-radius-btn); font-size: 1rem; font-weight: 600; cursor: pointer; border: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-decoration: none;
}
.btn-primary { background-color: var(--primary-color); color: white; box-shadow: 0 10px 20px rgba(216, 131, 158, 0.25); }
.btn-primary:hover { background-color: var(--primary-hover); transform: translateY(-3px) scale(1.02); box-shadow: 0 15px 25px rgba(216, 131, 158, 0.35); }
.btn-secondary { background-color: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); width: 100%; }
.btn-secondary:hover { background-color: var(--primary-color); color: white; }
.full-width { width: 100%; }

.glass-nav {
    position: fixed; top: 25px; left: 50%; transform: translateX(-50%); width: 95%; max-width: 1400px;
    background: var(--glass-bg); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--glass-border); border-radius: var(--border-radius-btn);
    display: flex; justify-content: space-between; align-items: center; padding: 12px 35px; z-index: 1000; box-shadow: var(--shadow-heavy);
}
.logo { font-size: 1.8rem; font-weight: 900; letter-spacing: -1px; display: inline-flex; align-items: center; text-decoration: none; color: var(--text-dark); }
.logo span { color: var(--primary-color); }
.logo-img { height: 64px; width: auto; max-width: 190px; object-fit: contain; display: block; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
a.logo:hover .logo-img { transform: scale(1.08); }
/* در حالت تاریک لوگو کمی روشن‌تر دیده شود */
[data-theme="dark"] .logo-img { filter: brightness(1.35) contrast(1.05); }
.nav-links { display: flex; list-style: none; gap: 20px; align-items: center; }
.nav-links a { text-decoration: none; color: var(--text-dark); font-weight: 500; font-size: 0.95rem; display: flex; align-items: center; gap: 6px; }
.nav-links a:hover, .nav-links a.active { color: var(--primary-color); }
.nav-actions { display: flex; align-items: center; gap: 15px; }

.mobile-menu-btn { display: none; background: none; border: none; font-size: 1.8rem; color: var(--text-dark); cursor: pointer; }

.theme-btn-header {
    background: var(--input-bg); border: 1px solid var(--glass-border); width: 45px; height: 45px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center; font-size: 1.4rem; color: var(--text-dark); cursor: pointer; transition: all 0.3s ease;
}
.theme-btn-header:hover { background: var(--primary-color); color: white; transform: rotate(180deg); }

.floating-cart {
    position: fixed; bottom: 35px; left: 35px; width: 75px; height: 75px; background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 50%;
    display: flex; justify-content: center; align-items: center; font-size: 1.8rem; color: var(--text-dark); cursor: pointer; z-index: 900; box-shadow: var(--shadow-soft); text-decoration: none; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.floating-cart:hover { transform: scale(1.1) rotate(-5deg); color: var(--primary-color); }
.cart-badge { position: absolute; top: 2px; right: 2px; background: var(--primary-color); color: white; font-size: 0.85rem; font-weight: bold; width: 26px; height: 26px; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: transform 0.3s ease; }
.cart-badge.pop { transform: scale(1.5); }

.floating-theme-toggle {
    position: fixed; top: 25px; left: 25px; width: 50px; height: 50px; border-radius: 50%;
    background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border);
    display: flex; justify-content: center; align-items: center; font-size: 1.4rem; color: var(--text-dark);
    cursor: pointer; z-index: 900; box-shadow: var(--shadow-heavy); transition: all 0.3s ease;
}
.floating-theme-toggle:hover { background: var(--primary-color); color: white; transform: rotate(180deg); }

.floating-support {
    position: fixed; bottom: 35px; right: 35px; width: 65px; height: 65px; background: var(--primary-color); color: white; border-radius: 50%;
    display: flex; justify-content: center; align-items: center; font-size: 2rem; cursor: pointer; z-index: 900; box-shadow: var(--shadow-soft); transition: transform 0.4s ease;
}
.floating-support:hover { transform: scale(1.1); }

.support-popup {
    position: fixed; bottom: 110px; right: 35px; width: 350px; background: var(--glass-bg); backdrop-filter: blur(25px);
    border: 1px solid var(--glass-border); border-radius: 25px; box-shadow: var(--shadow-heavy); display: flex; flex-direction: column; z-index: 1000; overflow: hidden; opacity: 0; transform: translateY(20px) scale(0.95); pointer-events: none; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.support-popup.active { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }
.support-header { background: var(--primary-color); color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; font-weight: bold; }
.support-header button { background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; }
.support-body { padding: 20px; height: 300px; display: flex; flex-direction: column; gap: 15px; overflow-y: auto; scrollbar-width: none; }
.support-msg { padding: 12px 18px; border-radius: 20px; font-size: 0.95rem; max-width: 85%; line-height: 1.6; word-wrap: break-word;}
.msg-received { background: var(--input-bg); color: var(--text-dark); align-self: flex-start; border-bottom-right-radius: 5px; }
.msg-sent { background: var(--primary-color); color: white; align-self: flex-end; border-bottom-left-radius: 5px; }
.support-footer { padding: 15px; border-top: 1px solid var(--glass-border); display: flex; gap: 10px; background: var(--card-bg); }
.support-footer input { flex: 1; padding: 12px 15px; border-radius: 20px; border: 1px solid var(--glass-border); background: var(--input-bg); color: var(--text-dark); outline: none; }
.support-footer button { width: 45px; height: 45px; border-radius: 50%; background: var(--primary-color); color: white; border: none; cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; }

/* جعبه‌ی جستجوی سفارشات (پنل ادمین و حساب کاربری) */
.order-search-box { display: flex; align-items: center; gap: 8px; background: var(--input-bg); border: 1px solid var(--glass-border); border-radius: 14px; padding: 4px 14px; margin: 6px 0 18px; }
.order-search-box i { color: var(--text-light); font-size: 1.15rem; flex-shrink: 0; }
.order-search-box input { flex: 1; border: none; background: none; outline: none; padding: 11px 4px; font-family: inherit; font-size: 0.92rem; color: var(--text-dark); }
.order-search-count { font-size: 0.78rem; color: var(--primary-color); font-weight: 700; white-space: nowrap; }

/* پیام پشتیبانی: متن + ساعت و تیک خوانده‌شدن */
.support-msg { display: flex; flex-direction: column; }
.support-msg .msg-text { white-space: pre-wrap; }
.support-msg .msg-meta { display: flex; align-items: center; gap: 4px; font-size: 0.62rem; opacity: 0.75; margin-top: 4px; align-self: flex-end; }
.msg-received .msg-meta { align-self: flex-start; }
.msg-ticks { display: inline-flex; font-size: 0.82rem; line-height: 1; }
.msg-ticks i { color: currentColor; opacity: 0.85; }
.msg-ticks.read i { color: #4fc3f7; opacity: 1; }
.msg-sent .msg-ticks.read i { color: #bde9ff; }

/* تیک خوانده‌شدن در پنل مدیریت */
.chat-ticks { display: inline-flex; margin-right: 4px; font-size: 0.8rem; vertical-align: middle; }
.chat-ticks i { opacity: 0.8; }
.chat-ticks.read i { color: #4fc3f7; opacity: 1; }

/* نشانگر «در حال تایپ» با انیمیشن */
.typing-bubble { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; }
.typing-label { font-size: 0.72rem; opacity: 0.75; }
.typing-dots { display: inline-flex; gap: 4px; align-items: center; }
.typing-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--primary-color); opacity: 0.5; animation: typingDot 1.2s infinite ease-in-out; }
.msg-received .typing-dots span { background: var(--text-light); }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 1; } }

.hero-section { min-height: 100vh; overflow: hidden; position: relative; padding-top: 120px; display: flex; flex-direction: column; justify-content: center; }
.hero-bg-grid { position: absolute; inset: 0; background-image: radial-gradient(var(--glass-border) 1px, transparent 1px); background-size: 32px 32px; opacity: 0.5; mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 75%); z-index: 0; }
.hero-layout { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1400px; margin: 0 auto; padding: 20px 5% 40px; gap: 50px; position: relative; z-index: 2; }
.hero-content { flex: 1; max-width: 600px; z-index: 5; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--card-bg); border: 1px solid var(--glass-border); color: var(--primary-color); font-weight: 700; font-size: 0.9rem; padding: 9px 20px; border-radius: 50px; margin-bottom: 25px; box-shadow: var(--shadow-heavy); }
.hero-badge i { animation: twinkle 2.5s ease-in-out infinite; }
.hero-content h1 { font-size: 4rem; line-height: 1.25; margin-bottom: 22px; font-weight: 800; color: var(--text-dark); }
.hero-title-line { display: block; }
.highlight-text { color: var(--primary-color); position: relative; display: inline-block; }
.highlight-text::after { content: ''; position: absolute; bottom: 6px; right: 0; width: 100%; height: 14px; background: var(--mobile-overlay-accent); z-index: -1; border-radius: 4px; }
.hero-content p { font-size: 1.15rem; color: var(--text-light); line-height: 1.9; margin-bottom: 35px; max-width: 90%; }
.hero-cta-row { display: flex; gap: 15px; align-items: center; margin-bottom: 45px; flex-wrap: wrap; }
.hero-stats { display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap; }
.hero-stat { display: flex; flex-direction: column; justify-content: center; gap: 2px; background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: 18px; padding: 14px 22px; box-shadow: var(--shadow-heavy); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease; }
.hero-stat:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.hero-stat-num { font-size: 1.7rem; font-weight: 800; color: var(--primary-color); line-height: 1.2; }
.hero-stat-label { font-size: 0.85rem; color: var(--text-light); font-weight: 600; }

/* ===== کلاژ هیرو (Grid تمیز + پارالاکس) ===== */
.hero-collage { position: relative; flex: 1; min-height: 540px; display: flex; justify-content: center; align-items: center; z-index: 2; }
.collage-grid { position: relative; display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; width: 100%; max-width: 470px; height: 500px; z-index: 2; }
.collage-frame { position: relative; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-soft); border: 5px solid var(--card-bg); will-change: transform; }
.collage-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.collage-frame:hover { z-index: 5; }
.collage-frame:hover .collage-img { transform: scale(1.09); }
.collage-shine { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.4) 50%, transparent 65%); transform: translateX(-130%); transition: transform 0.85s ease; pointer-events: none; }
.collage-frame:hover .collage-shine { transform: translateX(130%); }
.frame1 { grid-column: 1; grid-row: 1 / 3; }
.frame3 { grid-column: 2; grid-row: 1; }
.frame2 { grid-column: 2; grid-row: 2; }

.collage-deco-dot { position: absolute; bottom: 4%; left: 6%; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, var(--primary-color) 2px, transparent 2.5px); background-size: 16px 16px; opacity: 0.35; z-index: 1; }

.hero-floating-card { position: absolute; display: flex; align-items: center; gap: 12px; background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 18px; padding: 12px 18px; box-shadow: var(--shadow-soft); z-index: 6; will-change: transform; }
.hero-floating-card i { font-size: 1.8rem; color: var(--primary-color); animation: twinkle 3s ease-in-out infinite; }
.hero-floating-card div { display: flex; flex-direction: column; }
.hero-floating-card strong { font-size: 0.95rem; color: var(--text-dark); }
.hero-floating-card span { font-size: 0.78rem; color: var(--text-light); }
.hero-card-rating { top: 6%; left: -6%; }
.hero-card-ship { bottom: 9%; right: -4%; }

.floating-slow { animation: smoothFloat 7s ease-in-out infinite; }
.floating-medium { animation: smoothFloat 5s ease-in-out infinite reverse; }
.floating-fast { animation: smoothFloat 4s ease-in-out infinite 1s; }
.blur-blob { position: absolute; border-radius: 50%; filter: blur(70px); z-index: 0; }
.blob1 { width: 350px; height: 350px; background: rgba(216, 131, 158, 0.4); top: 10%; right: 20%; animation: pulse 6s infinite alternate; }
.blob2 { width: 250px; height: 250px; background: rgba(255, 209, 255, 0.4); bottom: 10%; left: 20%; animation: pulse 8s infinite alternate-reverse; }

.scroll-indicator { position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); width: 26px; height: 44px; border: 2px solid var(--text-light); border-radius: 20px; display: flex; justify-content: center; padding-top: 8px; z-index: 3; opacity: 0.6; }
.scroll-indicator span { width: 4px; height: 8px; background: var(--primary-color); border-radius: 4px; animation: scrollDot 1.8s ease-in-out infinite; }

@keyframes smoothFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } }
@keyframes pulse { 0% { transform: scale(1); } 100% { transform: scale(1.2); } }
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } }
@keyframes scrollDot { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }

.visual-categories { padding: 90px 5%; text-align: center; max-width: 1400px; margin: 0 auto;}
.section-title { font-size: 2.4rem; font-weight: 800; line-height: 1.4; }
.visual-categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; }
.v-cat-card { position: relative; height: 260px; border-radius: 28px; overflow: hidden; cursor: pointer; box-shadow: var(--shadow-heavy); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease; text-decoration: none; }
.v-cat-card:hover { transform: translateY(-12px); box-shadow: var(--shadow-soft); }
.v-cat-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.v-cat-card:hover .v-cat-img { transform: scale(1.12); }
.v-cat-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.05) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 25px; align-items: flex-start; text-align: right; }
.v-cat-title { color: white; font-size: 1.6rem; font-weight: 800; margin-bottom: 5px; transition: transform 0.4s ease; }
.v-cat-card:hover .v-cat-title { transform: translateY(-4px); }
.v-cat-subtitle { color: rgba(255,255,255,0.8); font-size: 0.9rem; font-weight: 500; }
.v-cat-arrow { position: absolute; top: 20px; left: 20px; width: 42px; height: 42px; border-radius: 50%; background: var(--glass-bg); backdrop-filter: blur(10px); color: white; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; opacity: 0; transform: scale(0.5) rotate(-45deg); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.v-cat-card:hover .v-cat-arrow { opacity: 1; transform: scale(1) rotate(0); background: var(--primary-color); }

.product-card { background: var(--card-bg); border-radius: var(--border-radius-main); padding: 20px; box-shadow: var(--shadow-heavy); border: 1px solid var(--glass-border); transition: transform 0.4s ease; user-select: none; cursor: pointer; position: relative; }
.product-img-wrapper { position: relative; width: 100%; height: 280px; overflow: hidden; border-radius: 20px; margin-bottom: 20px; }
.product-img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; }
.product-img.secondary { opacity: 0; }
.product-card:hover .product-img-wrapper:not(.has-magnifier) .product-img.primary { opacity: 0; }
.product-card:hover .product-img.secondary { opacity: 1; transform: scale(1.05); }

.discount-badge { position: absolute; top: 15px; right: 15px; background: #e74c3c; color: white; padding: 5px 12px; border-radius: 15px; font-weight: bold; font-size: 0.85rem; z-index: 3; }
.product-category { font-size: 0.85rem; color: var(--text-light); display: flex; align-items: center; gap: 5px; margin-bottom: 8px; }
.product-info h3 { font-size: 1.2rem; margin-bottom: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price-container { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.old-price { text-decoration: line-through; color: var(--text-light); font-size: 0.9rem; }
.new-price { color: var(--primary-color); font-weight: bold; font-size: 1.2rem; }
.product-tag { position: absolute; top: 15px; left: 15px; background: var(--primary-color); color: white; padding: 5px 12px; border-radius: 15px; font-size: 0.8rem; font-weight: bold; z-index: 3; }

/* برچسب دسته‌بندی (داخل کارت، نه روی عکس) + امتیاز نظرات */
.product-cat-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.74rem; font-weight: 700; color: var(--primary-color);
    background: var(--mobile-overlay-accent, rgba(216,131,158,0.12));
    padding: 4px 11px; border-radius: 30px; margin-bottom: 9px;
    align-self: flex-start;
}
.product-cat-pill i { font-size: 0.9rem; }
.product-rating { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.product-rating .pr-stars { display: inline-flex; gap: 1px; color: #f6b73c; font-size: 0.92rem; }
.product-rating .pr-count { font-size: 0.74rem; color: var(--text-light); font-weight: 600; }
.product-rating.no-rev .pr-stars { color: var(--glass-border); }
.product-card .product-info { display: flex; flex-direction: column; }

/* ذره‌بین شیشه‌ای محصولات تک‌عکسی */
.product-img-wrapper.has-magnifier:hover { cursor: none; }
.magnifier-lens {
    position: absolute; top: 0; left: 0; width: 200px; height: 200px; border-radius: 50%;
    pointer-events: none; background-repeat: no-repeat; z-index: 6;
    border: 4px solid rgba(255,255,255,0.9);
    box-shadow: 0 12px 36px rgba(0,0,0,0.35), inset 0 0 40px rgba(255,255,255,0.18);
    opacity: 0; transform: scale(0.4);
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.magnifier-lens::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 40%);
    box-shadow: inset 0 0 0 5px rgba(255,255,255,0.12);
}
.magnifier-lens.active { opacity: 1; transform: scale(1); }

.products-section { padding: 70px 0 110px; position: relative; overflow: hidden; max-width: 1600px; margin: 0 auto; }
.products-cta { text-align: center; margin-top: 30px; }
.products-slider-wrapper { position: relative; display: flex; align-items: center; }
.products-slider { display: flex; gap: 20px; padding: 50px calc(50% - 160px); overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; width: 100%; }
.products-slider::-webkit-scrollbar { display: none; }
.products-slider.active { cursor: grabbing; scroll-snap-type: none; }
.products-slider .product-card { flex: 0 0 320px; scroll-snap-align: center; transform: scale(0.8); opacity: 0.15; filter: blur(4px) grayscale(50%); transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease, box-shadow 0.6s ease, border-color 0.6s ease, filter 0.6s ease; border: 2px solid transparent; }
.products-slider .product-card.in-focus { transform: scale(1); opacity: 1; filter: blur(0) grayscale(0); box-shadow: 0 25px 50px rgba(216, 131, 158, 0.2); border-color: var(--primary-color); z-index: 2; }

.products-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 35px; padding: 30px 10px; max-width: 1400px; margin: 0 auto; }
.products-grid .product-card { flex: 0 0 320px; transform: scale(1); opacity: 1; }
.products-grid .product-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-soft); }

.slider-nav-btn { position: absolute; z-index: 10; width: 55px; height: 55px; border-radius: 50%; background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); color: var(--text-dark); font-size: 1.8rem; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: var(--shadow-heavy); transition: all 0.3s ease; }
.slider-nav-btn:hover { background: var(--primary-color); color: white; transform: scale(1.1); }
.slider-nav-btn.prev { right: 5%; }
.slider-nav-btn.next { left: 5%; }

.page-header { padding: 150px 5% 50px; text-align: center; }
.page-title { font-size: 2.8rem; font-weight: 800; margin-bottom: 15px; color: var(--text-dark); }
.page-subtitle { font-size: 1.1rem; color: var(--text-light); }
.filter-container { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; margin-bottom: 40px; padding: 0 5%; }
.filter-btn { padding: 10px 25px; border-radius: 30px; border: 1px solid var(--glass-border); background: var(--card-bg); color: var(--text-dark); font-weight: 600; cursor: pointer; transition: all 0.3s; }
.filter-btn.active, .filter-btn:hover { background: var(--primary-color); color: white; border-color: var(--primary-color); }

.static-content { max-width: 800px; margin: 0 auto; padding: 40px; text-align: right; line-height: 2; font-size: 1.1rem; }
.static-content p { margin-bottom: 20px; }
.contact-links { display: flex; flex-direction: column; gap: 20px; margin-top: 30px; }
.contact-btn { display: flex; align-items: center; gap: 15px; padding: 20px; border-radius: 20px; background: var(--input-bg); text-decoration: none; color: var(--text-dark); font-weight: bold; font-size: 1.2rem; transition: transform 0.3s, background 0.3s; border: 1px solid var(--glass-border); }
.contact-btn:hover { transform: translateX(-10px); background: var(--primary-color); color: white; }
.contact-btn i { font-size: 2rem; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(10px); display: flex; justify-content: center; align-items: center; z-index: 3000; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-content { position: relative; width: 90%; max-width: 900px; padding: 40px; transform: scale(0.9) translateY(30px); transition: transform 0.4s; max-height: 90vh; overflow-y: auto; scrollbar-width: none; }
.modal-overlay.active .modal-content { transform: scale(1) translateY(0); }
.modal-close-btn { position: absolute; top: 20px; right: 20px; background: var(--input-bg); border: none; width: 45px; height: 45px; border-radius: 50%; font-size: 1.5rem; color: var(--text-dark); cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; z-index: 10; }
.modal-close-btn:hover { background: var(--primary-color); color: white; transform: rotate(90deg); }
.modal-body { display: flex; gap: 40px; align-items: flex-start; }
.modal-img-section { flex: 1; display: flex; flex-direction: column; gap: 15px; }
.modal-main-img { width: 100%; height: 400px; object-fit: cover; border-radius: 25px; box-shadow: var(--shadow-heavy); transition: opacity 0.3s; }
.modal-gallery { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; }
.modal-thumb { width: 70px; height: 70px; border-radius: 15px; cursor: pointer; border: 2px solid transparent; object-fit: cover; transition: 0.3s; }
.modal-thumb.active, .modal-thumb:hover { border-color: var(--primary-color); transform: scale(1.05); }
.modal-details { flex: 1; }
.modal-details h2 { font-size: 2rem; margin-bottom: 15px; color: var(--text-dark); }
.modal-details p { font-size: 1.1rem; color: var(--text-light); line-height: 1.8; margin-bottom: 30px; }
.modal-price-box { display: flex; align-items: center; gap: 15px; margin-bottom: 30px; font-size: 1.4rem; font-weight: bold; }
.modal-price-box .new-price { color: var(--primary-color); font-size: 1.6rem; }

/* ============ مودال محصول بازطراحی‌شده ============ */
.product-modal-card {
    position: relative; width: 92%; max-width: 920px; max-height: 92vh; overflow-y: auto; scrollbar-width: none;
    background: var(--glass-bg); backdrop-filter: blur(35px); -webkit-backdrop-filter: blur(35px);
    border: 1px solid var(--glass-border); border-radius: 32px; box-shadow: var(--shadow-soft);
    padding: 28px;
    transform: scale(0.9) translateY(30px); opacity: 0;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.product-modal-card::-webkit-scrollbar { display: none; }
.modal-overlay.active .product-modal-card { transform: scale(1) translateY(0); opacity: 1; }

.product-modal-body { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; align-items: start; }

/* بخش رسانه/تصویر */
.product-modal-media { display: flex; flex-direction: column; gap: 14px; }
.product-modal-main-wrap { position: relative; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-heavy); }
.product-modal-media .modal-main-img { width: 100%; height: 420px; object-fit: cover; border-radius: 24px; display: block; transition: opacity 0.3s ease, transform 0.6s ease; }
.product-modal-main-wrap:hover .modal-main-img { transform: scale(1.05); }
.modal-discount-badge { position: absolute; top: 16px; right: 16px; z-index: 3; background: #e74c3c; color: white; padding: 7px 14px; border-radius: 16px; font-weight: bold; font-size: 0.85rem; box-shadow: 0 6px 16px rgba(231,76,60,0.4); align-items: center; animation: badgePulse 2s ease-in-out infinite; }
@keyframes badgePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* بخش اطلاعات */
.product-modal-info { padding-top: 8px; }
.product-modal-info > * { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.modal-overlay.active .product-modal-info > * { opacity: 1; transform: translateY(0); }
.modal-overlay.active .product-modal-info > *:nth-child(1) { transition-delay: 0.18s; }
.modal-overlay.active .product-modal-info > *:nth-child(2) { transition-delay: 0.25s; }
.modal-overlay.active .product-modal-info > *:nth-child(3) { transition-delay: 0.32s; }
.modal-overlay.active .product-modal-info > *:nth-child(4) { transition-delay: 0.39s; }
.modal-overlay.active .product-modal-info > *:nth-child(5) { transition-delay: 0.46s; }
.modal-overlay.active .product-modal-info > *:nth-child(6) { transition-delay: 0.53s; }
.modal-overlay.active .product-modal-info > *:nth-child(7) { transition-delay: 0.60s; }

.modal-category { display: inline-block; background: var(--mobile-overlay-accent); color: var(--primary-color); font-size: 0.82rem; font-weight: 700; padding: 5px 14px; border-radius: 50px; margin-bottom: 14px; }
.product-modal-info h2 { font-size: 1.9rem; font-weight: 800; color: var(--text-dark); margin-bottom: 12px; line-height: 1.4; }
.modal-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.modal-stars { color: #f1c40f; font-size: 1.1rem; display: inline-flex; gap: 2px; }
.modal-rating-text { color: var(--text-light); font-size: 0.85rem; }
.product-modal-info .modal-price-box { margin-bottom: 20px; padding: 16px 20px; background: var(--input-bg); border-radius: 18px; border: 1px solid var(--glass-border); }
.modal-desc { font-size: 1rem; color: var(--text-light); line-height: 1.9; margin-bottom: 22px; }
.modal-features { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.modal-feature { display: flex; align-items: center; gap: 7px; background: var(--input-bg); border: 1px solid var(--glass-border); border-radius: 14px; padding: 10px 14px; font-size: 0.85rem; font-weight: 600; color: var(--text-dark); transition: all 0.3s ease; }
.modal-feature i { color: var(--primary-color); font-size: 1.2rem; }
.modal-feature:hover { background: var(--primary-color); color: white; transform: translateY(-3px); }
.modal-feature:hover i { color: white; }
.modal-actions { display: flex; gap: 12px; align-items: center; }
.modal-add-btn { flex: 1; }
.modal-wish-btn { width: 54px; height: 54px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--glass-border); background: var(--input-bg); color: var(--primary-color); font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.modal-wish-btn:hover { background: var(--primary-color); color: white; transform: scale(1.1); }
.modal-wish-btn.active i { font-weight: bold; }

/* ============ لایت‌باکس تمام‌صفحه با زوم ============ */
.lightbox { position: fixed; inset: 0; z-index: 5000; background: rgba(0,0,0,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; }
.lightbox.active { opacity: 1; visibility: visible; }
.lightbox-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.lightbox-img { max-width: 90vw; max-height: 82vh; border-radius: 14px; object-fit: contain; cursor: zoom-in; transform: scale(0.85); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 30px 80px rgba(0,0,0,0.5); user-select: none; -webkit-user-drag: none; }
.lightbox.active .lightbox-img { transform: scale(1); }
.lightbox-img.zoomed { cursor: grab; transition: transform 0.15s ease; }
.lightbox-img.grabbing { cursor: grabbing; transition: none; }
.lightbox-img.lb-swap { animation: lbSwap 0.3s ease; }
@keyframes lbSwap { from { opacity: 0.3; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

.lightbox-close, .lightbox-nav { position: absolute; z-index: 5; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; backdrop-filter: blur(10px); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.lightbox-close { top: 22px; left: 22px; width: 50px; height: 50px; font-size: 1.6rem; }
.lightbox-close:hover { background: var(--primary-color); transform: rotate(90deg) scale(1.1); }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; font-size: 2rem; }
.lightbox-nav.lb-prev { right: 22px; }
.lightbox-nav.lb-next { left: 22px; }
.lightbox-nav:hover { background: var(--primary-color); transform: translateY(-50%) scale(1.12); }

.lightbox-counter { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); z-index: 5; color: white; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); border-radius: 50px; padding: 8px 20px; font-weight: 700; font-size: 0.95rem; backdrop-filter: blur(10px); }

.lightbox-controls { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); border-radius: 50px; padding: 8px 12px; backdrop-filter: blur(10px); }
.lightbox-controls button { width: 42px; height: 42px; border-radius: 50%; border: none; background: transparent; color: white; font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; }
.lightbox-controls button:hover { background: var(--primary-color); transform: scale(1.1); }
.lb-zoom-level { color: white; font-weight: 700; font-size: 0.9rem; min-width: 48px; text-align: center; }

.lightbox-thumbs { position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 8px; max-width: 90vw; overflow-x: auto; padding: 6px; scrollbar-width: none; }
.lightbox-thumbs::-webkit-scrollbar { display: none; }
.lb-thumb { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; cursor: pointer; border: 2px solid transparent; opacity: 0.5; transition: all 0.3s ease; flex-shrink: 0; }
.lb-thumb:hover { opacity: 0.85; }
.lb-thumb.active { opacity: 1; border-color: var(--primary-color); transform: scale(1.05); }

.auth-page, .cart-page, .account-page, .checkout-page, .admin-page { background: linear-gradient(135deg, var(--bg-color) 0%, rgba(216, 131, 158, 0.05) 100%); }
.auth-container, .cart-section, .checkout-section { min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 120px 5% 50px; }
.glass-card { background: var(--glass-bg); backdrop-filter: blur(30px); border: 1px solid var(--glass-border); border-radius: var(--border-radius-main); box-shadow: var(--shadow-soft); }
.auth-card { width: 100%; max-width: 480px; padding: 50px 40px; text-align: center; }
.auth-icon { font-size: 4rem; color: var(--primary-color); margin-bottom: 15px; }
.auth-tabs { display: flex; background: var(--input-bg); border-radius: 50px; padding: 5px; margin-bottom: 30px; }
.auth-tab { flex: 1; padding: 12px; border: none; background: transparent; border-radius: 50px; font-size: 1rem; font-weight: 600; color: var(--text-light); cursor: pointer; transition: all 0.3s; }
.auth-tab.active { background: var(--primary-color); color: white; }
.auth-form { display: none; animation: fadeIn 0.5s ease; }
.auth-form.active-form { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.input-group { margin-bottom: 25px; text-align: right; }
.input-group label { display: block; margin-bottom: 10px; font-weight: 600; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; color: var(--text-dark); }
.input-group input, .input-group select, .input-group textarea { width: 100%; padding: 16px 20px; border-radius: 20px; border: 1px solid var(--glass-border); background: var(--input-bg); color: var(--text-dark); font-size: 1rem; outline: none; transition: border-color 0.3s; }
.input-group input:focus, .input-group select:focus, .input-group textarea:focus { border-color: var(--primary-color); }
.input-row { display: flex; gap: 20px; }
.input-row .input-group { flex: 1; }

.cart-container { width: 100%; max-width: 800px; padding: 40px; }
.checkout-container { width: 100%; max-width: 1000px; padding: 40px; display: grid; grid-template-columns: 1fr 350px; gap: 40px; align-items: flex-start; }
.cart-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px dashed var(--glass-border); padding-bottom: 20px; margin-bottom: 20px; }
.cart-list { list-style: none; margin-bottom: 30px; display: flex; flex-direction: column; gap: 15px; }
.cart-item { display: flex; justify-content: space-between; align-items: center; padding: 20px; background: var(--input-bg); border-radius: 20px; border: 1px solid var(--glass-border); }
.cart-item-info { display: flex; align-items: center; gap: 15px; font-weight: 600; font-size: 1.1rem; }
.cart-item-right { display: flex; align-items: center; gap: 20px; }
.cart-item-price { color: var(--primary-color); font-weight: bold; font-size: 1.2rem; }
.cart-item-remove { background: rgba(231, 76, 60, 0.08); border: none; color: #e74c3c; width: 35px; height: 35px; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; }
.cart-item-remove i { font-size: 1.4rem; }
.cart-item-remove:hover { background: #e74c3c; color: white; transform: scale(1.15) rotate(90deg); }
.cart-summary { background: var(--input-bg); padding: 30px; border-radius: 25px; border: 1px solid var(--glass-border); }
.summary-row { display: flex; justify-content: space-between; margin-bottom: 15px; font-weight: 500; color: var(--text-light); }
.final-price { color: var(--primary-color); font-size: 1.6rem;}

.account-wrapper { padding: 130px 5% 50px; min-height: 100vh; }
.account-grid { display: grid; grid-template-columns: 300px 1fr; gap: 30px; max-width: 1200px; margin: 0 auto; }
.account-sidebar { padding: 40px 20px; text-align: center; height: fit-content; }
.account-avatar { font-size: 5rem; color: var(--primary-color); margin-bottom: 10px; display: block; }
.account-sidebar h3 { font-size: 1.5rem; color: var(--text-dark); margin-bottom: 30px; }
.account-menu { list-style: none; text-align: right; }
.account-menu li { padding: 15px 20px; margin-bottom: 10px; border-radius: 15px; cursor: pointer; color: var(--text-light); font-weight: 600; display: flex; align-items: center; gap: 10px; transition: all 0.3s; }
.account-menu li:hover, .account-menu li.active { background: var(--input-bg); color: var(--primary-color); }
.account-content { padding: 40px; overflow: hidden; }
.account-content h2 { margin-bottom: 30px; color: var(--text-dark); font-size: 1.8rem; border-bottom: 2px dashed var(--glass-border); padding-bottom: 15px; }

.user-order-card { background: var(--input-bg); border-radius: 20px; padding: 20px; margin-bottom: 20px; border: 1px solid var(--glass-border); display: flex; flex-direction: column; gap: 10px; }
.user-order-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--glass-border); padding-bottom: 10px; font-weight: bold; color: var(--text-dark); }
.order-status-badge { padding: 5px 12px; border-radius: 15px; color: white; font-size: 0.85rem; font-weight: bold; text-align: center;}
.status-pending { background: #f39c12; }
.status-preparing { background: #9b59b6; }
.status-shipped { background: #3498db; }
.status-delivered { background: #2ecc71; }

/* ============ تایم‌لاین پیشرفت سفارش ============ */
.user-order-card { animation: orderCardIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
@keyframes orderCardIn { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } }

.order-timeline { display: flex; align-items: flex-start; justify-content: space-between; margin: 18px 0 10px; padding: 0 5px; }
.otl-step { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; width: 70px; text-align: center; animation: otlStepIn 0.5s ease backwards; animation-delay: var(--otl-delay, 0s); }
@keyframes otlStepIn { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
.otl-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: var(--card-bg); border: 2px solid var(--glass-border); color: var(--text-light); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; }
.otl-label { font-size: 0.78rem; color: var(--text-light); font-weight: 600; transition: color 0.4s ease; }
.otl-step.done .otl-icon { background: #2ecc71; border-color: #2ecc71; color: white; }
.otl-step.done .otl-label { color: var(--text-dark); }
.otl-step.current .otl-icon { background: var(--primary-color); border-color: var(--primary-color); color: white; box-shadow: 0 0 0 6px var(--mobile-overlay-accent); animation: otlPulse 1.8s ease-in-out infinite; }
.otl-step.current .otl-label { color: var(--primary-color); font-weight: 700; }
@keyframes otlPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(216,131,158,0.45); } 50% { box-shadow: 0 0 0 10px rgba(216,131,158,0); } }
.otl-bar { flex: 1; height: 4px; background: var(--glass-border); border-radius: 4px; margin-top: 22px; position: relative; overflow: hidden; }
.otl-bar::after { content: ''; position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, #2ecc71, var(--primary-color)); border-radius: 4px; transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.otl-bar.filled::after { width: 100%; }

.order-current-desc { display: flex; align-items: center; gap: 8px; background: var(--mobile-overlay-accent); color: var(--primary-color); font-size: 0.9rem; font-weight: 600; padding: 12px 16px; border-radius: 14px; margin-bottom: 8px; }
.order-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.order-meta-item { background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: 14px; padding: 12px 14px; font-size: 0.92rem; color: var(--text-dark); display: flex; flex-direction: column; gap: 5px; }
.order-meta-item span:first-child { color: var(--text-light); font-size: 0.78rem; }

.order-details-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 6px; padding: 12px; border: 1px dashed var(--primary-color); background: transparent; color: var(--primary-color); border-radius: 14px; font-weight: 700; font-size: 0.9rem; cursor: pointer; font-family: inherit; transition: all 0.3s ease; }
.order-details-toggle:hover { background: var(--mobile-overlay-accent); }
.toggle-chevron { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.user-order-card.expanded .toggle-chevron { transform: rotate(180deg); }
.order-details-panel { max-height: 0; overflow: hidden; transition: max-height 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
.order-details-panel.open { max-height: 800px; }
.order-details-inner { padding-top: 14px; }
.order-detail-h { display: flex; align-items: center; gap: 8px; font-size: 1rem; color: var(--text-dark); margin: 14px 0 12px; }
.order-detail-h i { color: var(--primary-color); }
.order-items { display: flex; flex-direction: column; gap: 10px; }
.order-item-row { display: flex; align-items: center; gap: 12px; background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: 14px; padding: 10px 12px; transition: transform 0.3s ease; }
.order-item-row:hover { transform: translateX(-5px); }
.order-item-row img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.order-item-name { flex: 1; font-weight: 600; font-size: 0.92rem; color: var(--text-dark); }
.order-item-price { color: var(--primary-color); font-weight: 700; font-size: 0.9rem; }
.order-total-line { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--glass-border); font-size: 1rem; color: var(--text-dark); }
.order-total-line strong { color: var(--primary-color); font-size: 1.2rem; }
.order-address-text { color: var(--text-light); font-size: 0.9rem; line-height: 1.8; margin-bottom: 6px; }

.tab-content { display: none !important; animation: fadeIn 0.5s ease; }
.tab-content.active-tab { display: block !important; }
.address-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px; }
.address-card { background: var(--input-bg); border: 1px solid var(--glass-border); padding: 20px; border-radius: 20px; position: relative; }
.address-label { position: absolute; top: 15px; left: 15px; background: var(--primary-color); color: white; padding: 3px 10px; border-radius: 10px; font-size: 0.8rem; font-weight: bold; }
.address-card h4 { margin-bottom: 10px; color: var(--text-dark); }
.address-card p { color: var(--text-light); font-size: 0.95rem; margin-bottom: 5px; }
.address-remove-btn { margin-top: 15px; color: #e74c3c; border: 1px solid #e74c3c; background: transparent; padding: 5px 15px; border-radius: 15px; cursor: pointer; transition: 0.3s; font-size: 0.9rem; font-weight: bold; }
.address-remove-btn:hover { background: #e74c3c; color: white; }
.form-section { background: var(--card-bg); padding: 30px; border-radius: 25px; border: 1px solid var(--glass-border); box-shadow: var(--shadow-heavy); }
.form-section h3 { margin-bottom: 20px; color: var(--text-dark); }

/* ============================================================
   پنل مدیریت — طراحی مدرن، جمع‌وجور و حرفه‌ای
   ============================================================ */
.admin-layout { display: flex; height: 100vh; overflow: hidden; padding: 14px; gap: 14px; }

/* ===== سایدبار ===== */
.admin-sidebar {
    width: 244px; height: 100%; padding: 18px 14px; display: flex; flex-direction: column;
    border-radius: 22px !important; flex-shrink: 0;
}
.admin-sidebar h2 {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: var(--text-dark); text-align: center; margin-bottom: 22px; font-size: 1.08rem; font-weight: 800;
    padding-bottom: 16px; border-bottom: 1px solid var(--glass-border);
}
.admin-sidebar h2 i { color: var(--primary-color); font-size: 1.4rem; }
.admin-menu { list-style: none; flex: 1; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; scrollbar-width: thin; }
.admin-menu li, .admin-menu a {
    padding: 9px 12px; border-radius: 12px; cursor: pointer; color: var(--text-light);
    font-weight: 600; font-size: 0.88rem; display: flex; align-items: center; gap: 10px;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; text-decoration: none; position: relative;
}
.admin-menu li i, .admin-menu a i { font-size: 1.1rem; width: 20px; text-align: center; }
.admin-menu li:hover, .admin-menu a:hover { background: var(--mobile-overlay-accent, rgba(216,131,158,0.1)); color: var(--primary-color); }
.admin-menu li.active {
    background: linear-gradient(135deg, var(--primary-color), #ba7bc9); color: #fff;
    box-shadow: 0 8px 18px rgba(216,131,158,0.35);
}
.admin-menu li.active::before {
    content: ''; position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
    width: 4px; height: 60%; background: var(--primary-color); border-radius: 4px;
}
.unanswered-badge { background: #e74c3c; color: white; border-radius: 50%; padding: 2px 7px; font-size: 0.7rem; margin-right: auto; }

/* ===== ناحیه اصلی ===== */
.admin-main { flex: 1; height: 100%; overflow-y: auto; padding-right: 12px; padding-bottom: 30px; scrollbar-width: thin; }
.admin-tab-content { display: none !important; animation: fadeIn 0.45s ease; }
.admin-tab-content.active-tab { display: block !important; }
.admin-card {
    background: var(--card-bg); border-radius: 18px; padding: 18px 20px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.05); border: 1px solid var(--glass-border); margin-bottom: 16px;
}
.admin-card h3 {
    margin-bottom: 16px; color: var(--text-dark); border-bottom: 1px solid var(--glass-border);
    padding-bottom: 12px; display: flex; justify-content: space-between; align-items: center;
    font-size: 1rem; font-weight: 800;
}
.admin-card h3 i { color: var(--primary-color); margin-left: 4px; }

/* ===== کارت‌های آمار پیشخوان ===== */
.admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.admin-stat-card {
    display: flex; align-items: center; gap: 14px; padding: 18px;
    border-radius: 16px; background: var(--input-bg); border: 1px solid var(--glass-border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.admin-stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0,0,0,0.08); }
.admin-stat-icon {
    width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff;
    background: linear-gradient(135deg, var(--primary-color), #ba7bc9);
}
.admin-stat-card.danger .admin-stat-icon { background: linear-gradient(135deg, #e74c3c, #f39c12); }
.admin-stat-num { font-size: 1.9rem; font-weight: 900; line-height: 1; color: var(--text-dark); }
#dashRevenue { font-size: 1.4rem; }
.admin-stat-card.success .admin-stat-icon { background: linear-gradient(135deg, #27ae60, #2ecc71); }
.dash-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.dash-chart-wide { grid-column: 1 / -1; }
.dash-chart-card h3 { font-size: 0.95rem; }
.dash-chart-card canvas { max-width: 100%; }
@media (max-width: 768px) { .dash-charts { grid-template-columns: 1fr; } }
.admin-stat-label { font-size: 0.82rem; color: var(--text-light); margin-top: 4px; }

/* ===== جدول‌ها (جمع‌وجور) ===== */
.admin-table { width: 100%; border-collapse: collapse; text-align: right; font-size: 0.85rem; }
.admin-table thead th { position: sticky; top: 0; background: var(--card-bg); z-index: 1; }
.admin-table th, .admin-table td { padding: 9px 12px; border-bottom: 1px solid var(--glass-border); color: var(--text-dark); vertical-align: middle; }
.admin-table th { color: var(--primary-color); font-weight: 800; font-size: 0.8rem; }
.admin-table tbody tr { transition: background 0.2s ease; }
.admin-table tbody tr:hover { background: var(--mobile-overlay-accent, rgba(216,131,158,0.06)); }
.admin-table select, .admin-table input { padding: 6px 9px; border-radius: 9px; border: 1px solid var(--glass-border); background: var(--input-bg); color: var(--text-dark); outline: none; font-family: inherit; font-size: 0.82rem; }
.admin-table img { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; }
.action-btn {
    background: var(--input-bg); border: 1px solid var(--glass-border); width: 32px; height: 32px;
    border-radius: 9px; font-size: 1rem; cursor: pointer; transition: 0.25s;
    display: inline-flex; align-items: center; justify-content: center; color: var(--text-light);
}
.action-btn.delete:hover { color: #fff; background: #e74c3c; border-color: #e74c3c; transform: translateY(-2px); }
.action-btn.edit { margin-left: 6px; }
.action-btn.edit:hover { color: #fff; background: var(--primary-color); border-color: var(--primary-color); transform: translateY(-2px); }

/* ===== فرم‌های جمع‌وجور داخل پنل ===== */
.admin-main .input-group { margin-bottom: 14px; }
.admin-main .input-group label { font-size: 0.82rem; margin-bottom: 6px; font-weight: 600; }
.admin-main .input-group input, .admin-main .input-group select, .admin-main .input-group textarea {
    padding: 10px 14px; border-radius: 12px; font-size: 0.88rem;
}
.admin-main .input-row { gap: 14px; }
.admin-main .btn-primary, .admin-main .btn-secondary { padding: 11px 22px; font-size: 0.9rem; border-radius: 12px; width: auto; }

/* ===== badge وضعیت پرداخت ===== */
.payment-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 15px; color: white; font-size: 0.8rem; font-weight: bold; white-space: nowrap; }
.payment-badge.pay-paid { background: #2ecc71; }
.payment-badge.pay-pending { background: #f39c12; }
.payment-badge.pay-unpaid { background: #e74c3c; }
.order-payment-select { display: block; padding: 6px; border-radius: 8px; border: 1px solid var(--glass-border); background: var(--input-bg); color: var(--text-dark); outline: none; font-size: 0.8rem; }
.user-order-payment { margin: 4px 0 8px; }

.admin-order-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px; text-align: right; }
.admin-order-detail-item { background: var(--card-bg); padding: 15px; border-radius: 15px; border: 1px solid var(--glass-border); }
.admin-order-detail-item span { color: var(--primary-color); font-weight: bold; display: block; margin-bottom: 5px; font-size: 0.9rem; }

.admin-chat-layout { display: flex; gap: 16px; height: 540px; }
.admin-chat-users { width: 230px; border-left: 1px solid var(--glass-border); overflow-y: auto; padding-left: 8px; scrollbar-width: thin; }
.admin-chat-user-item { padding: 11px 13px; border-radius: 12px; border: 1px solid var(--glass-border); margin-bottom: 7px; cursor: pointer; transition: 0.25s; background: var(--input-bg); display: flex; justify-content: space-between; align-items: center; font-size: 0.88rem; font-weight: 600; }
.admin-chat-user-item:hover, .admin-chat-user-item.active { background: linear-gradient(135deg, var(--primary-color), #ba7bc9); color: white; border-color: transparent; }
.admin-chat-box { flex: 1; display: flex; flex-direction: column; }
.admin-chat-messages { flex: 1; background: var(--input-bg); border-radius: 16px; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; border: 1px solid var(--glass-border); }
.admin-chat-input { display: flex; gap: 8px; }
.admin-chat-input input { flex: 1; padding: 11px 18px; border-radius: 25px; border: 1px solid var(--glass-border); background: var(--input-bg); color: var(--text-dark); outline: none; font-family: inherit; }
.admin-chat-input button { width: 46px; height: 46px; border-radius: 50%; background: var(--primary-color); color: white; border: none; cursor: pointer; font-size: 1.3rem; display: flex; justify-content: center; align-items: center; flex-shrink: 0; transition: transform 0.2s ease; }
.admin-chat-input button:hover { transform: scale(1.08); }

.image-upload-wrapper { display: flex; flex-direction: column; gap: 15px; }
.upload-btn-container { display: flex; align-items: center; gap: 15px; }
.image-preview-container { display: flex; flex-wrap: wrap; gap: 15px; padding-top: 10px; }
.image-preview-item { position: relative; width: 80px; height: 80px; border-radius: 15px; border: 2px solid var(--glass-border); overflow: hidden; box-shadow: var(--shadow-heavy); }
.image-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.remove-img-btn { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(231, 76, 60, 0.8); color: white; border: none; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; opacity: 0; transition: 0.3s; cursor: pointer; }
.image-preview-item:hover .remove-img-btn { opacity: 1; }
.cropper-container-wrapper { width: 100%; max-height: 500px; display: flex; justify-content: center; align-items: center; background: var(--bg-color); border-radius: 20px; overflow: hidden; }
.cropper-container-wrapper img { max-width: 100%; max-height: 500px; }

/* ============ نوار متحرک (Marquee) ============ */
.marquee-wrapper { background: var(--primary-color); padding: 16px 0; overflow: hidden; white-space: nowrap; position: relative; }
.marquee-track { display: inline-flex; align-items: center; gap: 50px; animation: marqueeScroll 28s linear infinite; }
.marquee-wrapper:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { display: inline-flex; align-items: center; gap: 10px; color: white; font-weight: 700; font-size: 1.05rem; }
.marquee-track span i { font-size: 1.3rem; opacity: 0.9; }
@keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(50%); } }

/* ============ بخش ویژگی‌ها ============ */
.features-section { padding: 80px 5% 50px; max-width: 1400px; margin: 0 auto; }
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.feature-card { background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: 24px; padding: 35px 25px; text-align: center; box-shadow: var(--shadow-heavy); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; }
.feature-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-soft); }
.feature-icon { width: 70px; height: 70px; margin: 0 auto 20px; border-radius: 50%; background: var(--mobile-overlay-accent); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--primary-color); transition: all 0.4s ease; }
.feature-card:hover .feature-icon { background: var(--primary-color); color: white; transform: rotate(-8deg) scale(1.1); }
.feature-card h4 { font-size: 1.2rem; margin-bottom: 10px; color: var(--text-dark); }
.feature-card p { color: var(--text-light); font-size: 0.92rem; line-height: 1.7; }

/* ============ داستان برند ============ */
.brand-story { padding: 90px 5%; max-width: 1400px; margin: 0 auto; }
.brand-story-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.brand-story-visual { position: relative; }
.brand-img-main { border-radius: 30px; overflow: hidden; box-shadow: var(--shadow-soft); aspect-ratio: 4/3; }
.brand-img-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.brand-story-visual:hover .brand-img-main img { transform: scale(1.06); }
.brand-img-badge { position: absolute; bottom: -25px; right: -15px; background: var(--primary-color); color: white; border-radius: 24px; padding: 20px 28px; text-align: center; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 4px; }
.brand-badge-num { font-size: 2.2rem; font-weight: 900; line-height: 1; }
.brand-badge-text { font-size: 0.85rem; opacity: 0.9; max-width: 110px; }
.brand-story-text .section-eyebrow { margin-bottom: 15px; }
.brand-story-text .section-title { text-align: right; margin-bottom: 20px; }
.brand-story-text > p { color: var(--text-light); font-size: 1.05rem; line-height: 2; margin-bottom: 25px; }
.brand-points { list-style: none; margin-bottom: 35px; display: flex; flex-direction: column; gap: 14px; }
.brand-points li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--text-dark); }
.brand-points li i { color: var(--primary-color); font-size: 1.4rem; }

/* ============ خبرنامه ============ */
.newsletter-section { padding: 50px 5% 100px; max-width: 1200px; margin: 0 auto; }
.newsletter-card { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); border-radius: 35px; padding: 60px 40px; text-align: center; color: white; box-shadow: var(--shadow-soft); }
.newsletter-blob { position: absolute; width: 400px; height: 400px; background: rgba(255,255,255,0.12); border-radius: 50%; top: -150px; left: -100px; }
.newsletter-card::after { content: ''; position: absolute; width: 300px; height: 300px; background: rgba(255,255,255,0.08); border-radius: 50%; bottom: -150px; right: -80px; }
.newsletter-icon { font-size: 3rem; margin-bottom: 15px; position: relative; z-index: 2; }
.newsletter-card h2 { font-size: 2.2rem; margin-bottom: 12px; position: relative; z-index: 2; }
.newsletter-card p { font-size: 1.05rem; opacity: 0.92; margin-bottom: 30px; position: relative; z-index: 2; }
.newsletter-form { display: flex; gap: 12px; max-width: 500px; margin: 0 auto; position: relative; z-index: 2; }
.newsletter-form input { flex: 1; padding: 16px 24px; border-radius: 50px; border: none; font-size: 1rem; outline: none; background: rgba(255,255,255,0.95); color: var(--text-dark); }
.newsletter-form .btn-primary { background: var(--text-dark); color: white; box-shadow: none; white-space: nowrap; }
.newsletter-form .btn-primary:hover { background: #000; transform: translateY(-3px); }

/* ============ فوتر ============ */
.site-footer { background: var(--card-bg); border-top: 1px solid var(--glass-border); padding: 70px 5% 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 40px; max-width: 1400px; margin: 0 auto 50px; }
.footer-brand .logo { font-size: 1.8rem; font-weight: 900; margin-bottom: 18px; }
.footer-brand .logo span { color: var(--primary-color); }
.footer-brand p { color: var(--text-light); line-height: 1.9; font-size: 0.95rem; margin-bottom: 22px; max-width: 320px; }
.footer-socials { display: flex; gap: 12px; }
.footer-socials a { width: 44px; height: 44px; border-radius: 50%; background: var(--input-bg); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--text-dark); text-decoration: none; transition: all 0.3s ease; }
.footer-socials a:hover { background: var(--primary-color); color: white; transform: translateY(-4px); }
.footer-col h4 { font-size: 1.1rem; margin-bottom: 20px; color: var(--text-dark); }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col ul a { color: var(--text-light); text-decoration: none; font-size: 0.95rem; transition: color 0.3s ease, padding-right 0.3s ease; }
.footer-col ul a:hover { color: var(--primary-color); padding-right: 6px; }
.footer-contact li { display: flex; align-items: center; gap: 10px; color: var(--text-light); font-size: 0.95rem; }
.footer-contact li i { color: var(--primary-color); font-size: 1.2rem; }
.footer-bottom { border-top: 1px solid var(--glass-border); padding: 22px 0; text-align: center; }
.footer-bottom p { color: var(--text-light); font-size: 0.9rem; }
.footer-contact li a { color: var(--text-light); text-decoration: none; display: flex; align-items: center; gap: 10px; transition: color 0.3s ease; }
.footer-contact li a:hover { color: var(--primary-color); }

/* ============ دکمه خروج پنل ادمین ============ */
.admin-logout-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-top: 8px; border: 1px solid rgba(231, 76, 60, 0.3); background: rgba(231, 76, 60, 0.08); color: #e74c3c; border-radius: 12px; font-weight: 700; font-size: 0.88rem; cursor: pointer; font-family: inherit; transition: all 0.3s ease; }
.admin-menu a[href="index.html"] { margin-top: auto; border: 1px solid var(--glass-border); margin-bottom: 6px; }
.admin-logout-btn:hover { background: #e74c3c; color: white; transform: translateX(-4px); }

/* ============ نشانگر قدرت رمز عبور ============ */
.password-strength { max-height: 0; opacity: 0; overflow: hidden; margin-bottom: 0; transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, margin-bottom 0.4s ease; }
.password-strength.visible { max-height: 240px; opacity: 1; margin-bottom: 25px; }
.strength-bars { display: flex; gap: 6px; margin-bottom: 10px; }
.strength-bar { flex: 1; height: 6px; border-radius: 4px; background: var(--input-bg); transition: background 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-origin: right; }
.strength-bar.filled { transform: scaleX(1); animation: barPop 0.4s ease; }
@keyframes barPop { 0% { transform: scaleY(0.4); } 60% { transform: scaleY(1.3); } 100% { transform: scaleY(1); } }
.strength-label { display: block; text-align: right; font-size: 0.85rem; font-weight: 700; min-height: 18px; margin-bottom: 12px; transition: color 0.3s ease; }
.strength-checklist { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.strength-checklist li { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-light); transition: color 0.3s ease; }
.strength-checklist li i { font-size: 1.1rem; color: var(--text-light); transition: color 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.strength-checklist li.checked { color: var(--text-dark); }
.strength-checklist li.checked i { color: #2ecc71; transform: scale(1.2); }

/* ============ صفحه ورود/ثبت‌نام (Split) ============ */
.auth-split { width: 100%; max-width: 900px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; padding: 0; }
.auth-brand-side { position: relative; background: linear-gradient(150deg, var(--primary-color), var(--primary-hover)); padding: 50px 40px; display: flex; align-items: center; overflow: hidden; }
.auth-brand-blob { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.12); }
.blob-a { width: 220px; height: 220px; top: -60px; right: -50px; }
.blob-b { width: 160px; height: 160px; bottom: -50px; left: -30px; background: rgba(255,255,255,0.08); }
.auth-brand-content { position: relative; z-index: 2; color: white; }
.auth-brand-logo { font-size: 2rem; font-weight: 900; margin-bottom: 30px; }
.auth-brand-logo span { color: white; }
.auth-brand-content h2 { font-size: 1.7rem; margin-bottom: 15px; line-height: 1.5; }
.auth-brand-content > p { font-size: 0.98rem; line-height: 1.9; opacity: 0.92; margin-bottom: 30px; }
.auth-brand-points { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.auth-brand-points li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.95rem; }
.auth-brand-points li i { font-size: 1.3rem; }
.auth-form-side { padding: 45px 40px; }
.auth-form-side .auth-icon { font-size: 3rem; color: var(--primary-color); margin-bottom: 10px; text-align: center; }
.auth-subtitle { color: var(--text-light); font-size: 0.92rem; margin-bottom: 25px; text-align: center; }
.auth-msg { margin-top: 15px; text-align: center; font-size: 0.9rem; font-weight: 600; color: var(--primary-color); min-height: 20px; }

/* ============ صفحه درباره ما ============ */
.about-hero { position: relative; padding: 160px 5% 70px; text-align: center; overflow: hidden; }
.about-hero-blob { position: absolute; border-radius: 50%; filter: blur(80px); z-index: 0; }
.blob-x { width: 350px; height: 350px; background: rgba(216, 131, 158, 0.35); top: 5%; right: 10%; animation: pulse 7s infinite alternate; }
.blob-y { width: 280px; height: 280px; background: rgba(255, 209, 255, 0.3); bottom: -10%; left: 8%; animation: pulse 9s infinite alternate-reverse; }
.about-hero-content { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.about-hero-content h1 { font-size: 3.2rem; font-weight: 800; line-height: 1.35; margin: 18px 0; }
.about-hero-content > p { font-size: 1.1rem; color: var(--text-light); line-height: 2; }
.about-story { padding: 60px 5%; max-width: 1300px; margin: 0 auto; }
.about-story-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-story-visual { position: relative; aspect-ratio: 4/3; }
.about-img-main { width: 88%; height: 100%; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-soft); }
.about-img-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.about-story-visual:hover .about-img-main img { transform: scale(1.06); }
.about-img-float {
    position: absolute; bottom: -22px; left: -10px; width: 44%; aspect-ratio: 1/1;
    border-radius: 22px; overflow: hidden; border: 5px solid var(--card-bg);
    box-shadow: var(--shadow-soft); transition: transform 0.5s ease;
}
.about-img-float img { width: 100%; height: 100%; object-fit: cover; }
.about-story-visual:hover .about-img-float { transform: translateY(-6px); }
.about-img-badge {
    position: absolute; top: 18px; left: -14px; z-index: 2;
    display: flex; align-items: center; gap: 10px;
    background: var(--card-bg); border: 1px solid var(--glass-border);
    padding: 12px 16px; border-radius: 18px; box-shadow: var(--shadow-soft);
}
.about-img-badge i { font-size: 1.5rem; color: var(--primary-color); }
.about-img-badge strong { display: block; font-size: 0.95rem; color: var(--text-dark); }
.about-img-badge span { font-size: 0.78rem; color: var(--text-light); }
.about-story-text .section-title { text-align: right; margin-bottom: 20px; }
.about-story-text p { color: var(--text-light); font-size: 1.05rem; line-height: 2; margin-bottom: 18px; }
.about-values { padding: 70px 5%; max-width: 1300px; margin: 0 auto; }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.value-card { background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: 24px; padding: 35px 25px; text-align: center; box-shadow: var(--shadow-heavy); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; }
.value-card:hover { transform: translateY(-12px); box-shadow: var(--shadow-soft); }
.value-icon { width: 70px; height: 70px; margin: 0 auto 20px; border-radius: 50%; background: var(--mobile-overlay-accent); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--primary-color); transition: all 0.4s ease; }
.value-card:hover .value-icon { background: var(--primary-color); color: white; transform: rotate(-8deg) scale(1.1); }
.value-card h4 { font-size: 1.2rem; margin-bottom: 10px; color: var(--text-dark); }
.value-card p { color: var(--text-light); font-size: 0.9rem; line-height: 1.8; }
.about-cta { padding: 40px 5% 90px; max-width: 1000px; margin: 0 auto; }
.about-cta-card { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); border-radius: 35px; padding: 60px 40px; text-align: center; color: white; box-shadow: var(--shadow-soft); }
.about-cta-card h2 { font-size: 2rem; margin-bottom: 12px; position: relative; z-index: 2; }
.about-cta-card p { font-size: 1.05rem; opacity: 0.92; margin-bottom: 28px; position: relative; z-index: 2; }
.about-cta-card .btn-primary { background: var(--text-dark); color: white; box-shadow: none; position: relative; z-index: 2; }
.about-cta-card .btn-primary:hover { background: #000; }

/* ============ صفحه تسویه حساب ============ */
.checkout-section { padding: 120px 5% 70px; min-height: 100vh; }
.checkout-wrap { max-width: 1200px; margin: 0 auto; }
.checkout-head { text-align: center; margin-bottom: 38px; }
.checkout-head h1 { font-size: 2.3rem; font-weight: 800; margin-bottom: 26px; }
.checkout-steps { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: 50px; padding: 12px 24px; box-shadow: var(--shadow-heavy); }
.cstep { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; color: var(--text-light); }
.cstep-num { width: 30px; height: 30px; border-radius: 50%; background: var(--input-bg); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; flex-shrink: 0; }
.cstep.active { color: var(--primary-color); }
.cstep.active .cstep-num { background: var(--primary-color); color: white; border-color: var(--primary-color); box-shadow: 0 4px 12px rgba(216,131,158,0.4); animation: stepPulse 2s ease-in-out infinite; }
.cstep.done { color: #2ecc71; }
.cstep.done .cstep-num { background: #2ecc71; color: white; border-color: #2ecc71; }
.cstep-line { width: 36px; height: 2px; background: var(--glass-border); }
@keyframes stepPulse { 0%,100% { box-shadow: 0 4px 12px rgba(216,131,158,0.4); } 50% { box-shadow: 0 4px 20px rgba(216,131,158,0.7); } }

.checkout-grid { display: grid; grid-template-columns: 1fr 380px; gap: 25px; align-items: start; }
.checkout-card { background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: 24px; padding: 28px; box-shadow: var(--shadow-heavy); margin-bottom: 22px; }
.checkout-card-title { font-size: 1.2rem; font-weight: 700; color: var(--text-dark); margin-bottom: 22px; padding-bottom: 14px; border-bottom: 2px dashed var(--glass-border); display: flex; align-items: center; gap: 10px; }
.checkout-card-title i { color: var(--primary-color); font-size: 1.4rem; }
.saved-address-card { padding: 20px 24px; }
.saved-label { display: flex; align-items: center; gap: 8px; color: var(--primary-color); font-weight: 700; margin-bottom: 12px; font-size: 0.95rem; }
.saved-address-card select { width: 100%; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--primary-color); background: var(--input-bg); color: var(--text-dark); outline: none; font-size: 1rem; cursor: pointer; }

/* فیلدهای دارای اعتبارسنجی */
.input-group label small { color: var(--text-light); font-weight: 400; font-size: 0.78rem; }
.field-control { position: relative; }
.field-control input { width: 100%; padding: 16px 20px; padding-left: 46px; border-radius: 18px; border: 1.5px solid var(--glass-border); background: var(--input-bg); color: var(--text-dark); font-size: 1rem; outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.field-control input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--mobile-overlay-accent); }
.field-status { position: absolute; left: 16px; top: 50%; transform: translateY(-50%) scale(0.5); font-size: 1.4rem; font-weight: bold; opacity: 0; transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); pointer-events: none; }
.input-group.is-valid .field-control input { border-color: #2ecc71; }
.input-group.is-valid .field-status { opacity: 1; transform: translateY(-50%) scale(1); color: #2ecc71; }
.input-group.is-valid .field-status::before { content: "✓"; }
.input-group.is-invalid .field-control input { border-color: #e74c3c; animation: fieldShake 0.4s ease; }
.input-group.is-invalid .field-status { opacity: 1; transform: translateY(-50%) scale(1); color: #e74c3c; }
.input-group.is-invalid .field-status::before { content: "✕"; }
.field-error { display: block; color: #e74c3c; font-size: 0.8rem; margin-top: 6px; min-height: 16px; padding-right: 4px; transition: all 0.3s ease; }
@keyframes fieldShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.summary-sticky { position: sticky; top: 110px; }
.checkout-cart-list { max-height: 280px; overflow-y: auto; margin-bottom: 20px; scrollbar-width: thin; }
.checkout-summary-box { background: var(--input-bg); border-radius: 18px; padding: 20px; }
.checkout-trust { display: flex; justify-content: center; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.checkout-trust span { display: flex; align-items: center; gap: 5px; font-size: 0.8rem; color: var(--text-light); font-weight: 600; }
.checkout-trust i { color: #2ecc71; font-size: 1.1rem; }
.checkout-pay-btn { margin-top: 8px; font-size: 1.15rem; padding: 18px; }
.checkout-pay-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.ri-spin { display: inline-block; animation: riSpin 1s linear infinite; }
@keyframes riSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ============ انیمیشن‌های موشن عمومی ============ */
/* درخشش روی دکمه‌های اصلی */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-20deg); transition: left 0.6s ease; pointer-events: none; }
.btn-primary:hover::after { left: 130%; }

/* زیرخط متحرک لینک‌های نویگیشن (دسکتاپ) */
@media (min-width: 769px) {
    .nav-links a { position: relative; }
    .nav-links a::after { content: ''; position: absolute; bottom: -5px; right: 0; width: 0; height: 2px; background: var(--primary-color); border-radius: 2px; transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
    .nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
}

/* درخشش نبض‌دار دکمه‌های شناور */
.floating-cart, .floating-support { animation: floatGlow 3.5s ease-in-out infinite; }
@keyframes floatGlow { 0%, 100% { box-shadow: var(--shadow-soft); } 50% { box-shadow: 0 12px 34px rgba(216, 131, 158, 0.45); } }

/* ورود نرم کارت‌های محصول در گرید */
.products-grid .product-card { animation: cardRise 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
@keyframes cardRise { from { opacity: 0; transform: translateY(30px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.products-grid .product-card:nth-child(2) { animation-delay: 0.05s; }
.products-grid .product-card:nth-child(3) { animation-delay: 0.1s; }
.products-grid .product-card:nth-child(4) { animation-delay: 0.15s; }
.products-grid .product-card:nth-child(5) { animation-delay: 0.2s; }
.products-grid .product-card:nth-child(6) { animation-delay: 0.25s; }

/* میکرو-اینتراکشن آیکون دکمه‌ها هنگام hover */
.btn-primary i, .btn-secondary i, .btn-ghost i { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.btn-primary:hover i, .btn-secondary:hover i, .btn-ghost:hover i { transform: translateX(-4px); }

/* احترام به تنظیم کاهش حرکت کاربر */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ============ پنل ادمین: افزودن رنگ و خصوصیات ============ */
.color-adder, .prop-adder { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.color-adder input[type="text"], .prop-adder input { flex: 1; min-width: 120px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--glass-border); background: var(--input-bg); color: var(--text-dark); outline: none; }
.color-adder input[type="color"] { width: 48px; height: 44px; border: 1px solid var(--glass-border); border-radius: 12px; background: var(--input-bg); cursor: pointer; padding: 3px; }
.chips-list { display: flex; flex-wrap: wrap; gap: 8px; }
.color-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--input-bg); border: 1px solid var(--glass-border); border-radius: 50px; padding: 6px 12px; font-size: 0.85rem; font-weight: 600; }
.color-chip .color-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--glass-border); }
.color-chip button, .prop-row button { background: none; border: none; color: #e74c3c; cursor: pointer; font-size: 1.1rem; display: flex; padding: 0; }
.props-list { display: flex; flex-direction: column; gap: 8px; }
.prop-row { display: flex; align-items: center; gap: 12px; background: var(--input-bg); border: 1px solid var(--glass-border); border-radius: 12px; padding: 10px 14px; }
.prop-row .prop-key { font-weight: 700; color: var(--primary-color); min-width: 100px; }
.prop-row .prop-val { flex: 1; color: var(--text-dark); }

/* ============ صفحه جزئیات محصول ============ */
.pd-page { max-width: 1200px; margin: 0 auto; padding: 120px 5% 60px; }
.pd-breadcrumb { display: flex; align-items: center; gap: 6px; color: var(--text-light); font-size: 0.9rem; margin-bottom: 30px; flex-wrap: wrap; }
.pd-breadcrumb a { color: var(--text-light); text-decoration: none; transition: color 0.3s ease; }
.pd-breadcrumb a:hover { color: var(--primary-color); }
.pd-breadcrumb span { color: var(--primary-color); font-weight: 600; }
.pd-loading, .pd-notfound { text-align: center; padding: 80px 20px; color: var(--text-light); font-size: 1.1rem; }
.pd-loading i { font-size: 2rem; color: var(--primary-color); }
.pd-notfound i { font-size: 4rem; color: var(--primary-color); display: block; margin-bottom: 15px; }
.pd-notfound h2 { margin-bottom: 20px; color: var(--text-dark); }

.pd-main { display: grid; grid-template-columns: 1fr 1fr; gap: 45px; align-items: start; margin-bottom: 50px; }
.pd-gallery { position: sticky; top: 110px; }
.pd-main-img-wrap { position: relative; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-soft); margin-bottom: 14px; }
.pd-main-img { width: 100%; height: 480px; object-fit: cover; display: block; transition: opacity 0.3s ease, transform 0.6s ease; }
.pd-main-img-wrap:hover .pd-main-img { transform: scale(1.04); }
.pd-zoom-hint { position: absolute; bottom: 16px; right: 16px; background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); color: var(--text-dark); padding: 8px 16px; border-radius: 50px; font-size: 0.85rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.3s ease; }
.pd-zoom-hint:hover { background: var(--primary-color); color: white; }
.pd-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.pd-thumb { width: 80px; height: 80px; border-radius: 16px; object-fit: cover; cursor: pointer; border: 2px solid transparent; transition: all 0.3s ease; }
.pd-thumb:hover { transform: translateY(-3px); }
.pd-thumb.active { border-color: var(--primary-color); transform: scale(1.05); }

.pd-info { padding-top: 5px; }
.pd-title { font-size: 2.1rem; font-weight: 800; color: var(--text-dark); margin: 12px 0; line-height: 1.4; }
.pd-rating-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.pd-rating-text { color: var(--text-light); font-size: 0.9rem; }
.pd-price-box { display: flex; align-items: center; gap: 14px; background: var(--input-bg); border: 1px solid var(--glass-border); border-radius: 18px; padding: 18px 22px; margin-bottom: 24px; }
.pd-price-box .old-price { text-decoration: line-through; color: var(--text-light); font-size: 1rem; }
.pd-price-box .new-price { color: var(--primary-color); font-weight: 800; font-size: 1.7rem; }
.pd-section-label { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; font-size: 0.95rem; }
.pd-section-label i { color: var(--primary-color); }
.pd-colors-wrap { margin-bottom: 24px; }
.pd-colors { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-color-swatch { display: inline-flex; align-items: center; gap: 8px; background: var(--card-bg); border: 2px solid var(--glass-border); border-radius: 50px; padding: 7px 14px 7px 8px; cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--text-dark); transition: all 0.3s cubic-bezier(0.16,1,0.3,1); }
.pd-color-swatch:hover { border-color: var(--primary-color); transform: translateY(-2px); }
.pd-color-swatch.active { border-color: var(--primary-color); background: var(--mobile-overlay-accent); }
.pd-color-dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--glass-border); flex-shrink: 0; }
.pd-short-desc { color: var(--text-light); line-height: 1.9; margin-bottom: 22px; font-size: 1rem; }
.pd-trust { margin-bottom: 26px; }
.pd-actions { display: flex; gap: 12px; align-items: center; }

/* تب‌های جزئیات */
.pd-tabs-section { background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: 28px; padding: 30px; box-shadow: var(--shadow-heavy); }
.pd-tabs { display: flex; gap: 8px; border-bottom: 2px solid var(--glass-border); margin-bottom: 25px; flex-wrap: wrap; }
.pd-tab { display: flex; align-items: center; gap: 7px; padding: 12px 22px; border: none; background: transparent; color: var(--text-light); font-weight: 700; font-size: 0.95rem; cursor: pointer; font-family: inherit; border-radius: 14px 14px 0 0; position: relative; transition: color 0.3s ease; }
.pd-tab i { font-size: 1.2rem; }
.pd-tab.active { color: var(--primary-color); }
.pd-tab.active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 3px; background: var(--primary-color); border-radius: 3px; animation: tabSlide 0.3s ease; }
@keyframes tabSlide { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pd-tab-content { display: none; animation: fadeIn 0.5s ease; }
.pd-tab-content.active { display: block; }
.pd-full-desc { color: var(--text-light); line-height: 2.1; font-size: 1.02rem; white-space: pre-line; }
.pd-empty { color: var(--text-light); text-align: center; padding: 30px; }

.pd-specs-table { width: 100%; border-collapse: collapse; }
.pd-specs-table tr { border-bottom: 1px solid var(--glass-border); }
.pd-specs-table tr:last-child { border-bottom: none; }
.pd-specs-table td { padding: 15px 12px; }
.pd-specs-table .spec-k { font-weight: 700; color: var(--text-dark); width: 35%; }
.pd-specs-table .spec-v { color: var(--text-light); }

/* نظرات */
.pd-reviews-summary { margin-bottom: 22px; }
.pd-rev-avg { display: flex; align-items: center; gap: 14px; background: var(--input-bg); border-radius: 18px; padding: 18px 22px; }
.pd-rev-num { font-size: 2.5rem; font-weight: 800; color: var(--primary-color); }
.pd-rev-avg .modal-stars { font-size: 1.3rem; }
.pd-reviews-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; }
.pd-review-item { background: var(--input-bg); border: 1px solid var(--glass-border); border-radius: 18px; padding: 16px 20px; animation: orderCardIn 0.5s ease backwards; }
.pd-review-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; }
.pd-review-user { font-weight: 700; color: var(--text-dark); display: flex; align-items: center; gap: 6px; }
.pd-review-user i { color: var(--primary-color); }
.pd-review-head .modal-stars { color: #f1c40f; font-size: 1rem; }
.pd-review-text { color: var(--text-light); line-height: 1.8; margin-bottom: 8px; }
.pd-review-date { font-size: 0.8rem; color: var(--text-light); }

.pd-review-form-card { background: var(--input-bg); border: 1px dashed var(--primary-color); border-radius: 20px; padding: 24px; }
.pd-review-form-card h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--text-dark); }
.pd-star-input { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; font-size: 1.8rem; color: #f1c40f; }
.pd-star-input i { cursor: pointer; transition: transform 0.2s ease; }
.pd-star-input i:hover { transform: scale(1.2); }
.pd-star-label { font-size: 0.85rem; color: var(--text-light); margin-right: 10px; font-weight: 600; }
.pd-review-form-card textarea { width: 100%; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--glass-border); background: var(--card-bg); color: var(--text-dark); outline: none; margin-bottom: 14px; font-family: inherit; }
.pd-review-form-card textarea:focus { border-color: var(--primary-color); }
.pd-review-msg { margin-top: 12px; font-weight: 600; font-size: 0.9rem; min-height: 18px; }

/* =========================================
   بخش اختصاصی بهینه‌سازی رسپانسیو نسخه موبایل
   ========================================= */
@media (max-width: 768px) {
    /* دکمه‌ها */
    .btn-primary, .btn-secondary {
        padding: 10px 18px !important;
        font-size: 0.85rem !important;
        gap: 5px !important;
    }

    /* ===== طراحی کامل هدر موبایل ===== */

    /* نوار ناوبار اصلی */
    .glass-nav {
        padding: 8px 16px !important;
        width: 92% !important;
        top: 10px !important;
        border-radius: 50px !important;
        position: fixed !important;
        z-index: 100000 !important;
    }
    .logo { font-size: 1.35rem !important; }
    .logo-img { height: 48px !important; max-width: 130px !important; }
    .nav-actions { gap: 6px !important; }

    /* مخفی کردن آیتم‌هایی که در نوار موبایل جا نمی‌گیرن */
    .user-greeting { display: none !important; }
    #authBtn { padding: 8px 14px !important; font-size: 0.78rem !important; gap: 4px !important; }
    #authBtn i { display: none !important; }

    /* دکمه همبرگر - نمایش و استایل */
    .mobile-menu-btn {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background: var(--input-bg) !important;
        border: 1px solid var(--glass-border) !important;
        font-size: 1.4rem !important;
        color: var(--text-dark) !important;
        cursor: pointer !important;
        transition: background 0.3s ease, color 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
        flex-shrink: 0 !important;
    }
    .mobile-menu-btn:active { transform: scale(0.9) !important; }

    /* ===== پاپ‌اپ مینیمال منوی موبایل (شیشه‌ای) ===== */
    .nav-links {
        position: absolute !important;
        top: calc(100% + 12px) !important;
        right: 0 !important;
        left: auto !important;
        width: 220px !important;
        max-width: 70vw !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        padding: 10px !important;
        list-style: none !important;

        /* ظاهر شیشه‌ای */
        background: var(--glass-bg) !important;
        backdrop-filter: blur(28px) !important;
        -webkit-backdrop-filter: blur(28px) !important;
        border: 1px solid var(--glass-border) !important;
        border-radius: 22px !important;
        box-shadow: var(--shadow-soft) !important;

        /* انیمیشن باز/بسته شدن */
        transform-origin: top left !important;
        transform: translateY(-12px) scale(0.92) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
        transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, visibility 0.3s ease !important;
        z-index: 99998 !important;
    }
    .nav-links.active {
        transform: translateY(0) scale(1) !important;
        opacity: 1 !important;
        pointer-events: all !important;
        visibility: visible !important;
    }

    /* آیتم‌های منو - ورود پلکانی ظریف */
    .nav-links li {
        width: 100% !important;
        transform: translateX(12px) !important;
        opacity: 0 !important;
        transition: transform 0.35s ease, opacity 0.35s ease !important;
    }
    .nav-links.active li { transform: translateX(0) !important; opacity: 1 !important; }
    .nav-links.active li:nth-child(1) { transition-delay: 0.05s !important; }
    .nav-links.active li:nth-child(2) { transition-delay: 0.09s !important; }
    .nav-links.active li:nth-child(3) { transition-delay: 0.13s !important; }
    .nav-links.active li:nth-child(4) { transition-delay: 0.17s !important; }
    .nav-links.active li:nth-child(5) { transition-delay: 0.21s !important; }
    .nav-links.active li:nth-child(6) { transition-delay: 0.25s !important; }
    .nav-links.active li:nth-child(7) { transition-delay: 0.29s !important; }

    /* لینک‌های داخل پاپ‌اپ */
    .nav-links a {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 12px 16px !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        color: var(--text-dark) !important;
        text-decoration: none !important;
        border-radius: 14px !important;
        transition: color 0.25s ease, background 0.25s ease, padding-right 0.25s ease !important;
        position: relative !important;
        width: 100% !important;
    }
    .nav-links a:hover, .nav-links a.active {
        color: var(--primary-color) !important;
        background: var(--mobile-overlay-accent) !important;
        padding-right: 22px !important;
    }
    .nav-links a.active::before {
        content: '' !important;
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 4px !important;
        height: 18px !important;
        background: var(--primary-color) !important;
        border-radius: 4px !important;
    }
    
    /* ===== هیرو موبایل - طراحی مینیمال ===== */
    .hero-section { min-height: auto !important; padding-top: 95px !important; height: auto !important; justify-content: flex-start !important; }
    .hero-bg-grid { background-size: 24px 24px !important; }
    .hero-layout {
        flex-direction: column !important;
        height: auto !important;
        padding: 20px 22px 30px !important;
        text-align: center !important;
        gap: 30px !important;
    }
    .hero-content { max-width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
    .hero-badge { font-size: 0.78rem !important; padding: 7px 16px !important; margin-bottom: 18px !important; }
    .hero-content h1 { font-size: 2.2rem !important; line-height: 1.35 !important; margin-bottom: 14px !important; }
    .hero-content p { font-size: 0.95rem !important; line-height: 1.8 !important; margin-bottom: 26px !important; max-width: 100% !important; }
    .hero-cta-row { justify-content: center !important; margin-bottom: 32px !important; width: 100% !important; }
    .hero-cta-row .btn-primary, .hero-cta-row .btn-ghost { flex: 1 !important; min-width: 0 !important; }
    .hero-stats { gap: 10px !important; justify-content: center !important; }
    .hero-stat { padding: 10px 16px !important; border-radius: 14px !important; }
    .hero-stat-num { font-size: 1.3rem !important; }
    .hero-stat-label { font-size: 0.72rem !important; }

    /* کلاژ موبایل - گرید تمیز و جمع‌وجمع */
    .hero-collage { width: 100% !important; min-height: auto !important; height: auto !important; margin-top: 0 !important; }
    .blur-blob { filter: blur(45px) !important; }
    .blob1 { width: 200px !important; height: 200px !important; }
    .blob2 { width: 150px !important; height: 150px !important; }
    .collage-grid { max-width: 330px !important; width: 100% !important; height: 300px !important; gap: 10px !important; margin: 0 auto !important; }
    .collage-frame { border-width: 4px !important; border-radius: 18px !important; transform: none !important; }
    .collage-deco-dot { display: none !important; }
    /* کارت‌های شناور و دکمه اسکرول روی موبایل مخفی می‌شوند تا شلوغ نشود */
    .hero-floating-card { display: none !important; }
    .scroll-indicator { display: none !important; }

    /* ===== نوار متحرک موبایل ===== */
    .marquee-wrapper { padding: 12px 0 !important; }
    .marquee-track { gap: 32px !important; }
    .marquee-track span { font-size: 0.85rem !important; }
    .marquee-track span i { font-size: 1rem !important; }

    /* ===== ویژگی‌ها موبایل - ۲ ستونه ===== */
    .features-section { padding: 50px 18px 30px !important; }
    .features-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
    .feature-card { padding: 24px 14px !important; border-radius: 18px !important; }
    .feature-icon { width: 54px !important; height: 54px !important; font-size: 1.5rem !important; margin-bottom: 14px !important; }
    .feature-card h4 { font-size: 1rem !important; }
    .feature-card p { font-size: 0.8rem !important; }

    /* ===== عناوین بخش‌ها موبایل ===== */
    .section-head { margin-bottom: 32px !important; padding: 0 10px !important; }
    .section-title { font-size: 1.7rem !important; }
    .section-sub { font-size: 0.92rem !important; }
    .section-eyebrow { font-size: 0.78rem !important; }

    /* ===== دسته‌بندی موبایل - ۲ ستونه ===== */
    .visual-categories { padding: 50px 18px !important; }
    .visual-categories-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
    .v-cat-card { height: 170px !important; border-radius: 20px !important; }
    .v-cat-overlay { padding: 16px !important; }
    .v-cat-title { font-size: 1.15rem !important; }
    .v-cat-subtitle { font-size: 0.72rem !important; }
    .v-cat-arrow { width: 34px !important; height: 34px !important; font-size: 1.1rem !important; top: 12px !important; left: 12px !important; opacity: 1 !important; transform: scale(1) !important; background: var(--primary-color) !important; }

    /* ===== داستان برند موبایل ===== */
    .brand-story { padding: 50px 18px !important; }
    .brand-story-inner { grid-template-columns: 1fr !important; gap: 50px !important; }
    .brand-story-text .section-title { text-align: center !important; }
    .brand-story-text { text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
    .brand-story-text > p { font-size: 0.95rem !important; line-height: 1.9 !important; }
    .brand-points { align-items: flex-start !important; }
    .brand-img-badge { padding: 14px 20px !important; right: 50% !important; transform: translateX(50%) !important; bottom: -22px !important; }
    .brand-badge-num { font-size: 1.7rem !important; }

    /* ===== خبرنامه موبایل ===== */
    .newsletter-section { padding: 30px 18px 70px !important; }
    .newsletter-card { padding: 45px 25px !important; border-radius: 28px !important; }
    .newsletter-card h2 { font-size: 1.6rem !important; }
    .newsletter-card p { font-size: 0.92rem !important; }
    .newsletter-form { flex-direction: column !important; gap: 10px !important; }
    .newsletter-form .btn-primary { width: 100% !important; }

    /* ===== فوتر موبایل ===== */
    .site-footer { padding: 50px 22px 0 !important; }
    .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 30px !important; margin-bottom: 35px !important; }
    .footer-brand { grid-column: 1 / -1 !important; }
    .footer-brand p { max-width: 100% !important; }
    .footer-col h4 { font-size: 1rem !important; margin-bottom: 14px !important; }

    /* ===== ورود/ثبت‌نام موبایل ===== */
    .auth-split { grid-template-columns: 1fr !important; max-width: 440px !important; }
    .auth-brand-side { display: none !important; }
    .auth-form-side { padding: 35px 24px !important; }

    /* ===== درباره ما موبایل ===== */
    .about-hero { padding: 120px 20px 40px !important; }
    .about-hero-content h1 { font-size: 2rem !important; }
    .about-hero-content > p { font-size: 0.95rem !important; line-height: 1.9 !important; }
    .about-story { padding: 40px 20px !important; }
    .about-story-inner { grid-template-columns: 1fr !important; gap: 40px !important; }
    .about-story-visual { margin-bottom: 10px; }
    .about-img-float { left: 0 !important; bottom: -16px !important; }
    .about-img-badge { left: 0 !important; }
    .about-story-text .section-title { text-align: center !important; }
    .about-story-text { text-align: center !important; }
    .about-story-text p { font-size: 0.95rem !important; }
    .about-values { padding: 40px 18px !important; }
    .values-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
    .value-card { padding: 26px 16px !important; border-radius: 20px !important; }
    .value-icon { width: 56px !important; height: 56px !important; font-size: 1.6rem !important; }
    .value-card h4 { font-size: 1.05rem !important; }
    .value-card p { font-size: 0.82rem !important; }
    .about-cta { padding: 20px 18px 60px !important; }
    .about-cta-card { padding: 45px 25px !important; border-radius: 28px !important; }
    .about-cta-card h2 { font-size: 1.6rem !important; }
    
    /* بهینه‌سازی کارت‌ها و گرید محصولات به صورت ۲ستونه و استاندارد */
    .products-section { padding: 20px 0 60px !important; }
    .products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 10px 8px !important;
    }
    .products-grid .product-card {
        flex: none !important;
        width: 100% !important;
        padding: 8px !important;
        border-radius: 16px !important;
    }
    /* کادر تصویر: نسبت ثابت مربعی، تصویر کاملاً فیت و بدون کشیدگی */
    .product-img-wrapper { height: auto !important; aspect-ratio: 1 / 1 !important; border-radius: 12px !important; margin-bottom: 8px !important; background: var(--input-bg) !important; }
    .product-img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
    .product-tag { font-size: 0.66rem !important; padding: 3px 8px !important; top: 8px !important; left: 8px !important; }
    .discount-badge { font-size: 0.68rem !important; padding: 3px 8px !important; top: 8px !important; right: 8px !important; }
    .stock-badge-out { font-size: 0.66rem !important; padding: 4px 9px !important; top: 8px !important; left: 8px !important; }
    .product-info h3 { font-size: 0.85rem !important; margin-bottom: 5px !important; line-height: 1.5 !important; }
    .product-cat-pill { font-size: 0.6rem !important; padding: 3px 8px !important; margin-bottom: 6px !important; }
    .product-rating { margin-bottom: 6px !important; gap: 4px !important; }
    .product-rating .pr-stars { font-size: 0.78rem !important; }
    .product-rating .pr-count { font-size: 0.64rem !important; }
    .price-container { margin-bottom: 8px !important; gap: 5px !important; }
    .old-price { font-size: 0.72rem !important; }
    .new-price { font-size: 0.9rem !important; }
    .stock-low { font-size: 0.7rem !important; margin-bottom: 6px !important; }
    .products-grid .product-card .btn-secondary { padding: 8px 8px !important; font-size: 0.78rem !important; border-radius: 18px !important; }

    /* اسلایدر افقی منتخب‌ها در موبایل — دقیقا مثل دسکتاپ (محصول وسط فوکوس، بقیه فید) */
    .products-slider {
        padding: 36px calc(50% - 130px) !important; /* عرض کارت ۲۶۰px → نصفش ۱۳۰px تا دقیق وسط بیاید */
        gap: 16px !important;
        scroll-snap-type: x mandatory !important;
    }
    .products-slider .product-card {
        flex: 0 0 260px !important;
        scroll-snap-align: center !important;
        transform: scale(0.82) !important;
        opacity: 0.3 !important;
        filter: blur(2px) grayscale(40%) !important;
    }
    .products-slider .product-card.in-focus {
        transform: scale(1) !important;
        opacity: 1 !important;
        filter: blur(0) grayscale(0) !important;
        box-shadow: 0 18px 40px rgba(216, 131, 158, 0.25) !important;
        border-color: var(--primary-color) !important;
        z-index: 2 !important;
    }
    /* دکمه‌های جابجایی اسلایدر کوچکتر تا روی کارت وسط نیفتند */
    .slider-nav-btn { width: 40px !important; height: 40px !important; font-size: 1.3rem !important; }
    .slider-nav-btn.prev { right: 1% !important; }
    .slider-nav-btn.next { left: 1% !important; }

    /* دکمه‌های شناور سبد خرید و پشتیبانی کوچکتر و ظریف‌تر */
    .floating-cart { width: 52px !important; height: 52px !important; font-size: 1.3rem !important; bottom: 15px !important; left: 15px !important; }
    .cart-badge { width: 18px !important; height: 18px !important; font-size: 0.7rem !important; top: 0 !important; right: 0 !important; }
    .floating-support { width: 52px !important; height: 52px !important; font-size: 1.3rem !important; bottom: 15px !important; right: 15px !important; }
    .support-popup { width: 92% !important; right: 4% !important; bottom: 80px !important; border-radius: 20px !important; }
    .support-body { height: 240px !important; padding: 12px !important; }
    
    /* صفحات پرداخت، سبد خرید و حساب کاربری */
    .auth-container, .cart-section, .checkout-section, .account-wrapper { padding: 90px 12px 30px !important; }
    .cart-container, .checkout-container, .account-card, .form-section { padding: 20px !important; border-radius: 20px !important; }
    .cart-item { padding: 12px !important; border-radius: 15px !important; gap: 10px !important; }
    .cart-item-info { gap: 10px !important; font-size: 0.95rem !important; }
    .cart-item-info img { width: 40px !important; height: 40px !important; }
    .cart-item-price { font-size: 1rem !important; }
    .cart-item-remove { width: 30px !important; height: 30px !important; }
    
    .account-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    .account-sidebar { padding: 20px 10px !important; }
    .account-avatar { font-size: 3.5rem !important; }
    .account-sidebar h3 { font-size: 1.2rem !important; margin-bottom: 15px !important; }
    .account-menu li { padding: 10px 15px !important; font-size: 0.9rem !important; }
    .account-content { padding: 20px 10px !important; }
    .account-content h2 { font-size: 1.4rem !important; }
    .address-list { grid-template-columns: 1fr !important; gap: 15px !important; }
    
    /* پنل مدیریت ادمین روی موبایل */
    .admin-layout { flex-direction: column !important; padding: 10px !important; padding-top: 85px !important; height: auto !important; overflow: visible !important; }
    .admin-sidebar { width: 100% !important; height: auto !important; padding: 12px !important; border-radius: 18px !important; }
    .admin-sidebar h2 { font-size: 1.05rem !important; margin-bottom: 12px !important; padding-bottom: 12px !important; }
    .admin-menu { flex-direction: row !important; overflow-x: auto !important; gap: 6px !important; padding-bottom: 4px !important; }
    .admin-menu li, .admin-menu a { padding: 8px 13px !important; font-size: 0.82rem !important; margin-bottom: 0 !important; white-space: nowrap !important; flex-shrink: 0 !important; }
    .admin-menu li.active::before { display: none !important; }
    .admin-menu a[href="index.html"] { margin-top: 0 !important; }
    .admin-logout-btn { width: auto !important; margin-top: 0 !important; flex-shrink: 0 !important; white-space: nowrap !important; }
    .admin-main { padding-right: 0 !important; }
    .admin-card { padding: 15px !important; border-radius: 15px !important; }
    .admin-table { display: block !important; width: 100% !important; overflow-x: auto !important; white-space: nowrap !important; }
    .admin-table th, .admin-table td { padding: 10px !important; font-size: 0.85rem !important; }
    
    .admin-chat-layout { flex-direction: column !important; height: auto !important; gap: 14px !important; }
    .admin-chat-sidebar { width: 100% !important; border-left: none !important; border-bottom: 1px solid var(--glass-border) !important; padding-left: 0 !important; padding-bottom: 12px !important; }
    .admin-chat-users { width: 100% !important; max-height: 190px !important; flex-direction: column !important; overflow-y: auto !important; }
    .admin-chat-messages { height: 320px !important; flex: none !important; }
    
    /* مودال کالا (پنل ادمین و عمومی) */
    .modal-content { padding: 20px !important; border-radius: 20px !important; }
    .modal-main-img { height: 220px !important; border-radius: 15px !important; }
    .modal-details h2 { font-size: 1.4rem !important; }
    .modal-details p { font-size: 0.9rem !important; margin-bottom: 15px !important; }
    .modal-price-box { font-size: 1.1rem !important; margin-bottom: 20px !important; }

    /* ===== مودال محصول موبایل ===== */
    .product-modal-card { width: 94% !important; max-height: 90vh !important; padding: 16px !important; border-radius: 26px !important; }
    .product-modal-body { grid-template-columns: 1fr !important; gap: 18px !important; }
    .product-modal-media .modal-main-img { height: 240px !important; border-radius: 20px !important; }
    .product-modal-info { padding-top: 0 !important; }
    .product-modal-info h2 { font-size: 1.45rem !important; }
    .modal-rating { margin-bottom: 14px !important; }
    .product-modal-info .modal-price-box { padding: 12px 16px !important; margin-bottom: 16px !important; }
    .modal-desc { font-size: 0.92rem !important; line-height: 1.8 !important; margin-bottom: 18px !important; }
    .modal-features { gap: 8px !important; margin-bottom: 20px !important; }
    .modal-feature { padding: 8px 11px !important; font-size: 0.78rem !important; }
    .modal-wish-btn { width: 48px !important; height: 48px !important; font-size: 1.3rem !important; }
    .modal-gallery { justify-content: center !important; }
    .modal-thumb { width: 56px !important; height: 56px !important; }

    /* ===== لایت‌باکس موبایل ===== */
    .lightbox-img { max-width: 94vw !important; max-height: 70vh !important; }
    .lightbox-close { top: 14px !important; left: 14px !important; width: 42px !important; height: 42px !important; font-size: 1.3rem !important; }
    .lightbox-nav { width: 44px !important; height: 44px !important; font-size: 1.5rem !important; }
    .lightbox-nav.lb-prev { right: 10px !important; }
    .lightbox-nav.lb-next { left: 10px !important; }
    .lightbox-counter { top: 16px !important; padding: 6px 16px !important; font-size: 0.85rem !important; }
    .lightbox-controls { bottom: 16px !important; padding: 6px 8px !important; gap: 4px !important; }
    .lightbox-controls button { width: 38px !important; height: 38px !important; font-size: 1.15rem !important; }
    .lightbox-thumbs { bottom: 72px !important; }
    .lb-thumb { width: 46px !important; height: 46px !important; }

    /* ===== صفحه محصول موبایل ===== */
    .pd-page { padding: 95px 16px 40px !important; }
    .pd-breadcrumb { margin-bottom: 18px !important; font-size: 0.82rem !important; }
    .pd-main { grid-template-columns: 1fr !important; gap: 25px !important; margin-bottom: 30px !important; }
    .pd-gallery { position: static !important; }
    .pd-main-img { height: 300px !important; }
    .pd-thumb { width: 64px !important; height: 64px !important; }
    .pd-title { font-size: 1.5rem !important; }
    .pd-price-box { padding: 14px 18px !important; margin-bottom: 18px !important; }
    .pd-price-box .new-price { font-size: 1.4rem !important; }
    .pd-tabs-section { padding: 18px !important; border-radius: 22px !important; }
    .pd-tab { padding: 10px 14px !important; font-size: 0.85rem !important; }
    .pd-tab i { font-size: 1rem !important; }
    .pd-specs-table td { padding: 12px 8px !important; font-size: 0.9rem !important; }
    .pd-rev-num { font-size: 2rem !important; }
    .pd-review-form-card { padding: 18px !important; }
    .pd-color-swatch { font-size: 0.82rem !important; padding: 6px 12px 6px 7px !important; }
    .color-adder, .prop-adder { gap: 8px !important; }

    /* ===== تسویه حساب موبایل ===== */
    .checkout-section { padding: 90px 14px 40px !important; }
    .checkout-head { margin-bottom: 26px !important; }
    .checkout-head h1 { font-size: 1.6rem !important; margin-bottom: 18px !important; }
    .checkout-steps { gap: 5px !important; padding: 10px 14px !important; width: 100%; }
    .cstep { font-size: 0.7rem !important; gap: 5px !important; }
    .cstep-num { width: 24px !important; height: 24px !important; font-size: 0.72rem !important; }
    .cstep-line { width: 12px !important; }
    .checkout-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
    .checkout-card { padding: 18px !important; border-radius: 18px !important; margin-bottom: 16px !important; }
    .checkout-card-title { font-size: 1.05rem !important; margin-bottom: 16px !important; }
    .checkout-form-area .input-row { flex-direction: column !important; gap: 0 !important; }
    .field-control input { padding: 14px 16px !important; padding-left: 42px !important; font-size: 0.95rem !important; }
    .summary-sticky { position: static !important; }
    .checkout-cart-list { max-height: 220px !important; }
    .checkout-pay-btn { font-size: 1rem !important; padding: 16px !important; }
}

/* ============================================================
   منوی کشویی برندها (Nav Dropdown)
   ============================================================ */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { cursor: pointer; }
.nav-dropdown-toggle i { transition: transform 0.3s ease; font-size: 1.05rem; }
.nav-dropdown:hover .nav-dropdown-toggle i { transform: rotate(180deg); }
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    min-width: 190px;
    list-style: none;
    margin: 0; padding: 8px;
    background: var(--glass-bg);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.96);
    transform-origin: top right;
    transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0.28s ease;
    z-index: 1000;
    max-height: 60vh;
    overflow-y: auto;
}
.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
.nav-dropdown-menu li { width: 100%; }
.nav-dropdown-menu a {
    display: block; padding: 10px 14px; border-radius: 12px;
    font-size: 0.9rem; font-weight: 600; color: var(--text-dark);
    white-space: nowrap; transition: background 0.22s ease, color 0.22s ease, padding-right 0.22s ease;
}
.nav-dropdown-menu a:hover { background: var(--mobile-overlay-accent, rgba(216,131,158,0.12)); color: var(--primary-color); padding-right: 20px; }
.nav-dropdown-empty { padding: 10px 14px; font-size: 0.82rem; color: var(--text-light); white-space: nowrap; }

/* بَج برند در صفحه محصول */
.pd-tags-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.pd-brand-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 30px;
    background: linear-gradient(135deg, rgba(216,131,158,0.16), rgba(216,131,158,0.05));
    border: 1px solid var(--glass-border);
    color: var(--primary-color); font-size: 0.82rem; font-weight: 700;
    text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pd-brand-badge:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(216,131,158,0.25); }

/* ============================================================
   صفحه برندها (brands.html)
   ============================================================ */
.brands-section { max-width: 1200px; margin: 0 auto; padding: 10px 5% 80px; }
.brands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 28px;
}
.brand-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 12px; padding: 0 22px 26px;
    background: var(--glass-bg);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--glass-border);
    border-radius: 30px;
    text-decoration: none; color: var(--text-dark);
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.45s ease, border-color 0.45s ease;
}
/* بنر تزئینی بالای کارت */
.brand-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 130px;
    background:
        radial-gradient(circle at 30% 20%, rgba(216,131,158,0.45), transparent 55%),
        radial-gradient(circle at 80% 60%, rgba(186,123,201,0.35), transparent 55%),
        linear-gradient(135deg, rgba(216,131,158,0.30), rgba(216,131,158,0.08));
    z-index: 0;
    transition: opacity 0.45s ease;
}
/* درخشش متحرک هنگام هاور */
.brand-card::after {
    content: ''; position: absolute; top: -60%; left: -30%; width: 60%; height: 220%;
    background: linear-gradient(110deg, transparent, rgba(255,255,255,0.45), transparent);
    transform: rotate(18deg) translateX(-120%);
    transition: transform 0.8s ease; z-index: 1; pointer-events: none;
}
.brand-card:hover { transform: translateY(-10px); box-shadow: 0 24px 50px rgba(216,131,158,0.28); border-color: rgba(216,131,158,0.55); }
.brand-card:hover::after { transform: rotate(18deg) translateX(320%); }
.brand-card-logo {
    width: 138px; height: 138px; border-radius: 50%;
    margin-top: 54px;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    padding: 6px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.14), 0 0 0 5px rgba(255,255,255,0.65);
    overflow: hidden; position: relative; z-index: 2;
    transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
[data-theme="dark"] .brand-card-logo { background: #2a2230; box-shadow: 0 12px 30px rgba(0,0,0,0.45), 0 0 0 5px rgba(255,255,255,0.10); }
.brand-card:hover .brand-card-logo { transform: scale(1.07) translateY(-4px); }
.brand-card-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.brand-card-initial {
    width: 100%; height: 100%; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, var(--primary-color), #ba7bc9);
}
.brand-card-name { font-size: 1.3rem; font-weight: 800; margin: 6px 0 0; position: relative; z-index: 2; }
.brand-card-count {
    position: relative; z-index: 2;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.8rem; font-weight: 600; color: var(--primary-color);
    background: rgba(216,131,158,0.12); padding: 5px 14px; border-radius: 30px;
}
.brand-card-arrow {
    position: relative; z-index: 2; margin-top: 6px;
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
    background: linear-gradient(135deg, var(--primary-color), #ba7bc9); color: #fff;
    box-shadow: 0 8px 20px rgba(216,131,158,0.40);
    transform: translateY(4px); opacity: 0.92;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease, box-shadow 0.4s ease;
}
.brand-card:hover .brand-card-arrow { opacity: 1; transform: translateY(0) scale(1.1); box-shadow: 0 12px 26px rgba(216,131,158,0.55); }
.brand-card:hover .brand-card-arrow i { animation: brandArrowNudge 0.7s ease infinite; }
@keyframes brandArrowNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
.brands-loading, .brands-empty {
    grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--text-light);
}
.brands-empty i { font-size: 3rem; display: block; margin-bottom: 12px; color: var(--primary-color); opacity: 0.6; }

/* ============================================================
   مدیریت برندها در پنل ادمین
   ============================================================ */
.admin-brands-list { display: flex; flex-wrap: wrap; gap: 14px; }
.admin-brand-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: 16px;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    min-width: 220px;
}
.admin-brand-logo {
    width: 46px; height: 46px; border-radius: 12px; overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-soft, #f7f1f3); border: 1px solid var(--glass-border);
}
.admin-brand-logo img { width: 100%; height: 100%; object-fit: cover; }
.admin-brand-logo span { font-size: 1.3rem; font-weight: 800; color: var(--primary-color); }
.admin-brand-name { font-weight: 700; flex: 1; }

/* ============================================================
   منوی کشویی برندها در موبایل (داخل پاپ‌اپ)
   ============================================================ */
@media (max-width: 768px) {
    .nav-dropdown-menu {
        position: static !important;
        opacity: 1 !important; visibility: hidden !important;
        transform: none !important;
        background: transparent !important;
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
        border: none !important; box-shadow: none !important;
        padding: 0 0 0 8px !important; margin: 2px 0 0 !important;
        max-height: 0 !important; overflow: hidden !important;
        transition: max-height 0.35s ease, visibility 0.35s ease !important;
    }
    .nav-dropdown.open .nav-dropdown-menu {
        visibility: visible !important; max-height: 320px !important;
    }
    .nav-dropdown.open .nav-dropdown-toggle i { transform: rotate(180deg) !important; }
    .nav-dropdown-menu a { padding: 9px 14px !important; font-size: 0.88rem !important; opacity: 0.92; }
    .brands-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
    .brand-card { padding: 0 10px 18px !important; border-radius: 24px !important; }
    .brand-card::before { height: 100px !important; }
    .brand-card-logo { width: 104px !important; height: 104px !important; margin-top: 40px !important; }
    .brand-card-name { font-size: 1.08rem !important; }
    .brand-card-arrow { width: 40px !important; height: 40px !important; }
    .admin-brand-item { min-width: 100% !important; }
}

/* ============================================================
   جزئیات کامل سفارش در پنل ادمین
   ============================================================ */
.ao-head {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding-bottom: 16px; margin-bottom: 6px;
    border-bottom: 2px dashed var(--glass-border); grid-column: 1 / -1;
}
.ao-head-id { display: flex; flex-direction: column; margin-left: auto; }
.ao-head-id span { font-size: 0.78rem; color: var(--text-light); }
.ao-head-id strong { font-size: 1.05rem; color: var(--primary-color); }
.ao-status-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 30px; font-size: 0.85rem; font-weight: 700;
    background: rgba(216,131,158,0.12); color: var(--primary-color);
}
.ao-section { grid-column: 1 / -1; margin-top: 18px; }
.ao-section h4 {
    display: flex; align-items: center; gap: 8px;
    font-size: 1rem; color: var(--primary-color); margin-bottom: 12px;
}
.ao-datetime { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.ao-datetime div { font-size: 0.92rem; }
.ao-datetime span { color: var(--text-light); margin-left: 4px; }
.ao-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; }
.ao-addr-full { grid-column: 1 / -1; }

.ao-items { display: flex; flex-direction: column; gap: 10px; }
.ao-item {
    display: flex; gap: 12px; align-items: center;
    padding: 10px; border-radius: 16px;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
}
.ao-item-thumb {
    width: 60px; height: 60px; border-radius: 12px; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-soft, #f7f1f3); color: var(--text-light); font-size: 1.4rem;
}
.ao-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ao-item-info { flex: 1; min-width: 0; }
.ao-item-info > strong { display: block; font-size: 0.95rem; margin-bottom: 5px; }
.ao-item-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.ao-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 20px; font-size: 0.74rem; font-weight: 600;
    background: rgba(0,0,0,0.04); color: var(--text-dark);
}
[data-theme="dark"] .ao-tag { background: rgba(255,255,255,0.07); }
.ao-tag.ao-color { background: rgba(216,131,158,0.14); color: var(--primary-color); }
.ao-tag.ao-color-none { opacity: 0.6; }
.ao-item-price { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; }
.ao-item-price span { color: var(--text-light); }
.ao-item-price strong { color: var(--text-dark); }

.ao-totals {
    margin-top: 14px; padding: 14px 16px; border-radius: 16px;
    background: rgba(216,131,158,0.07); border: 1px solid var(--glass-border);
}
.ao-total-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 0.92rem; }
.ao-total-row span:first-child { color: var(--text-light); }
.ao-grand {
    margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--glass-border);
    font-size: 1.05rem; font-weight: 800;
}
.ao-grand span:last-child { color: var(--primary-color); }

@media (max-width: 768px) {
    .ao-grid { grid-template-columns: 1fr !important; }
    .ao-head-id { margin-left: 0 !important; }
}
.ao-discount span { color: #27ae60 !important; }
.ao-discount span:last-child { font-weight: 700; }

/* ============================================================
   کد تخفیف در صفحه تسویه حساب
   ============================================================ */
.coupon-box { margin: 16px 0; padding: 14px; border-radius: 16px; background: rgba(216,131,158,0.06); border: 1px dashed var(--glass-border); }
.coupon-label { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 700; margin-bottom: 10px; color: var(--text-dark); }
.coupon-input-row { display: flex; gap: 8px; }
.coupon-input-row input {
    flex: 1; padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--glass-border); background: var(--input-bg); color: var(--text-dark);
    font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.25s ease;
}
.coupon-input-row input:focus { border-color: var(--primary-color); }
.coupon-input-row input:disabled { opacity: 0.7; }
.coupon-apply-btn {
    padding: 0 22px; border-radius: 12px; border: none; cursor: pointer;
    background: var(--primary-color); color: #fff; font-family: inherit; font-weight: 700; font-size: 0.9rem;
    transition: transform 0.2s ease, background 0.3s ease; white-space: nowrap;
}
.coupon-apply-btn:hover { transform: translateY(-2px); }
.coupon-apply-btn.applied { background: #27ae60; }
.coupon-msg { font-size: 0.82rem; margin: 8px 2px 0; min-height: 1em; transition: opacity 0.3s ease; }
.coupon-msg.success { color: #27ae60; }
.coupon-msg.error { color: #e74c3c; }
.discount-value { color: #27ae60 !important; }

/* سوییچ فعال/غیرفعال کد تخفیف در پنل ادمین */
.coupon-toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.coupon-toggle-label input { display: none; }
.coupon-toggle-switch {
    position: relative; width: 46px; height: 26px; border-radius: 30px;
    background: var(--glass-border); transition: background 0.3s ease; flex-shrink: 0;
}
.coupon-toggle-switch::before {
    content: ''; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
    border-radius: 50%; background: #fff; transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.coupon-toggle-label input:checked + .coupon-toggle-switch { background: #27ae60; }
.coupon-toggle-label input:checked + .coupon-toggle-switch::before { transform: translateX(-20px); }

/* انتخابگر محصولات ترند در پنل ادمین */
.admin-trending-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.trending-pick {
    position: relative; display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 14px; cursor: pointer;
    background: var(--glass-bg); border: 2px solid var(--glass-border);
    transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.trending-pick:hover { transform: translateY(-2px); }
.trending-pick input { display: none; }
.trending-pick img { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.trending-pick-name { font-size: 0.85rem; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trending-pick-check { color: var(--primary-color); font-size: 1.2rem; opacity: 0; transition: opacity 0.25s ease; }
.trending-pick.active { border-color: var(--primary-color); background: rgba(216,131,158,0.1); }
.trending-pick.active .trending-pick-check { opacity: 1; }

/* ============================================================
   بخش محصولات ترند در صفحه اصلی (نمایش منحصر به فرد)
   ============================================================ */
.trending-section { position: relative; max-width: 1280px; margin: 0 auto; padding: 70px 5%; overflow: hidden; }
.trending-bg-glow {
    position: absolute; top: 10%; left: 50%; transform: translateX(-50%);
    width: 70%; height: 380px; pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse at center, rgba(255,107,107,0.16), rgba(216,131,158,0.10) 40%, transparent 70%);
    filter: blur(20px);
}
.trending-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: #ff6b6b; }
.trending-eyebrow i { animation: flameFlicker 1.4s ease-in-out infinite; }
@keyframes flameFlicker { 0%,100% { transform: scale(1) rotate(-3deg); opacity: 1; } 50% { transform: scale(1.18) rotate(3deg); opacity: 0.85; } }
.trending-section .section-head { position: relative; z-index: 1; }
.trending-grid {
    position: relative; z-index: 1; margin-top: 36px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px;
}
.trend-card {
    position: relative; border-radius: 24px; overflow: hidden; cursor: pointer;
    background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    transition: transform 0.45s cubic-bezier(0.175,0.885,0.32,1.275), box-shadow 0.45s ease, border-color 0.45s ease;
}
.trend-card::after {
    content: ''; position: absolute; inset: 0; border-radius: 24px; pointer-events: none;
    box-shadow: inset 0 0 0 0 rgba(255,107,107,0); transition: box-shadow 0.45s ease;
}
.trend-card:hover { transform: translateY(-10px); box-shadow: 0 24px 50px rgba(255,107,107,0.22); border-color: rgba(255,107,107,0.5); }
.trend-card:hover::after { box-shadow: inset 0 0 0 2px rgba(255,107,107,0.4); }
.trend-rank {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, #ff6b6b, #d8839e);
    box-shadow: 0 6px 16px rgba(255,107,107,0.45);
}
.trend-flame {
    position: absolute; top: 14px; left: 12px; z-index: 3; color: #ff6b6b; font-size: 1.2rem;
    animation: flameFlicker 1.4s ease-in-out infinite;
}
.trend-disc {
    position: absolute; top: 52px; left: 12px; z-index: 4;
    background: linear-gradient(135deg, #ff3d6e, #ff7a45);
    color: #fff; font-size: 0.95rem; font-weight: 900; letter-spacing: 0.5px;
    padding: 7px 14px; border-radius: 14px; overflow: hidden;
    box-shadow: 0 8px 20px rgba(255,61,110,0.5);
    transform-origin: center;
    animation: discPop 0.6s cubic-bezier(0.175,0.885,0.32,1.275) both, discFloat 3s ease-in-out 0.6s infinite;
}
.trend-disc::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
    background: linear-gradient(110deg, transparent, rgba(255,255,255,0.85), transparent);
    transform: skewX(-20deg); animation: discShine 2.6s ease-in-out infinite;
}
@keyframes discPop { 0% { transform: scale(0) rotate(-12deg); opacity: 0; } 100% { transform: scale(1) rotate(-4deg); opacity: 1; } }
@keyframes discFloat { 0%,100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.07) rotate(-1deg); } }
@keyframes discShine { 0% { left: -60%; } 55%, 100% { left: 130%; } }
/* ناحیه‌ی تصویر کارت ترند — مثل کارت محصول اصلی، ارتفاع ثابت و یکدست (فیت کامل) */
.trend-img-wrap { position: relative; width: 100%; height: 260px; overflow: hidden; background: var(--bg-soft, #f7f1f3); }
.trend-img-wrap img, .trend-img-wrap .product-img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1); }
/* تطبیق ساختار کارت محصول (سواپ دوعکسی + ذره‌بین) روی کارت ترند */
.trend-img-wrap.product-img-wrapper { height: 260px; margin-bottom: 0; border-radius: 0; }
.trending-slider .trend-img-wrap, .trending-slider .trend-img-wrap.product-img-wrapper { height: 260px; }
.trend-card .trend-img-wrap .product-img { border-radius: 0; }
.trend-card:hover .product-img-wrapper.has-magnifier .product-img,
.trend-card:hover .product-img-wrapper:not(.has-magnifier) .product-img.primary { transform: none; }
.trend-card:hover .product-img-wrapper:not(.has-magnifier) .product-img.primary { opacity: 0; }
.trend-card:hover .product-img-wrapper:not(.has-magnifier) .product-img.secondary { opacity: 1; transform: scale(1.05); }
.trend-info { padding: 16px; }
.trend-cat { font-size: 0.72rem; color: var(--primary-color); font-weight: 700; }
.trend-name { font-size: 1rem; font-weight: 700; margin: 6px 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trend-price { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.trend-old { font-size: 0.8rem; color: var(--text-light); text-decoration: line-through; }
.trend-new { font-size: 1rem; font-weight: 800; color: var(--primary-color); }
.trend-add {
    width: 100%; padding: 11px; border-radius: 14px; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, #ff6b6b, #d8839e); color: #fff;
    font-family: inherit; font-weight: 700; font-size: 0.88rem;
    transition: transform 0.25s ease, box-shadow 0.3s ease, filter 0.3s ease;
}
.trend-add:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(255,107,107,0.4); filter: brightness(1.05); }

/* ===== اسلایدر افقی محصولات ترند (مثل اسلایدر محصولات اصلی) ===== */
.trending-slider-wrapper { position: relative; display: flex; align-items: center; }
.trending-slider { padding: 44px calc(50% - 155px); }
.trending-slider .trend-card {
    flex: 0 0 310px; scroll-snap-align: center;
    transform: scale(0.82); opacity: 0.3; filter: blur(3px) grayscale(40%);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease, filter 0.6s ease, box-shadow 0.6s ease, border-color 0.6s ease;
}
.trending-slider .trend-card.in-focus {
    transform: scale(1); opacity: 1; filter: blur(0) grayscale(0);
    box-shadow: 0 25px 50px rgba(255, 107, 107, 0.25); border-color: rgba(255, 107, 107, 0.5); z-index: 2;
}
.trending-slider .trend-img-wrap, .trending-slider .trend-img-wrap.product-img-wrapper { height: 260px; }

/* ===== چیدمان بنتو (منحصر به فرد) برای ترند صفحه اصلی ===== */
.trending-bento {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 232px;
    grid-auto-flow: row dense;
}
.trending-bento .trend-card { display: flex; flex-direction: column; height: 100%; }
.trending-bento .trend-img-wrap { flex: 1; min-height: 0; aspect-ratio: auto; }
.trending-bento .trend-info { flex-shrink: 0; }
.trending-bento .trend-card.featured { grid-column: span 2; grid-row: span 2; }
.trending-bento .trend-card.featured .trend-info { padding: 22px; }
.trending-bento .trend-card.featured .trend-name { font-size: 1.5rem; white-space: normal; }
.trending-bento .trend-card.featured .trend-new { font-size: 1.45rem; }
.trending-bento .trend-card.featured .trend-cat { font-size: 0.85rem; }
.trending-bento .trend-card.featured .trend-rank { width: 46px; height: 46px; font-size: 1.35rem; }
.trend-featured-tag {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 3;
    display: inline-flex; align-items: center; gap: 5px;
    background: linear-gradient(135deg, #ff6b6b, #d8839e); color: #fff;
    padding: 5px 14px; border-radius: 30px; font-size: 0.78rem; font-weight: 700;
    box-shadow: 0 6px 16px rgba(255,107,107,0.45); white-space: nowrap;
}
.trending-cta { text-align: center; margin-top: 36px; position: relative; z-index: 1; }

@media (max-width: 1024px) {
    .trending-bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 210px; }
}

@media (max-width: 768px) {
    .trending-section { padding: 50px 0; }
    .trending-section .section-head, .trending-cta { padding-left: 4%; padding-right: 4%; }
    .trending-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    /* اسلایدر ترند روی موبایل */
    .trending-slider { padding: 30px calc(50% - 125px) !important; gap: 14px !important; }
    .trending-slider .trend-card { flex: 0 0 250px !important; }
    .trending-slider .trend-img-wrap, .trending-slider .trend-img-wrap.product-img-wrapper { height: 220px !important; }
    .trend-img-wrap, .trend-img-wrap.product-img-wrapper { height: 200px !important; }
    .trend-disc { font-size: 0.85rem !important; padding: 5px 11px !important; }
    /* روی موبایل بنتو ساده می‌شود تا تمیز و سریع بماند؛ کارت برتر تمام‌عرض */
    .trending-bento { grid-auto-rows: auto !important; }
    .trending-bento .trend-card { height: auto !important; }
    .trending-bento .trend-img-wrap { aspect-ratio: 1/1 !important; flex: none !important; }
    .trending-bento .trend-card.featured { grid-column: span 2 !important; grid-row: span 1 !important; }
    .trending-bento .trend-card.featured .trend-img-wrap { aspect-ratio: 16/10 !important; }
    .trending-bento .trend-card.featured .trend-name { font-size: 1.15rem !important; }
    .trending-bento .trend-card.featured .trend-new { font-size: 1.15rem !important; }
    .trend-info { padding: 12px !important; }
    .trend-name { font-size: 0.88rem !important; }
    .trend-rank { width: 32px !important; height: 32px !important; font-size: 0.95rem !important; }
    .trend-add { padding: 9px !important; font-size: 0.8rem !important; }
    .admin-trending-list { grid-template-columns: repeat(2, 1fr) !important; }
    .coupon-input-row { flex-direction: column !important; }
    .coupon-apply-btn { padding: 12px !important; }
}

/* صفحه تخفیفات و ترند */
.deals-section { max-width: 1280px; margin: 0 auto; padding: 20px 5% 50px; }
.deals-empty { text-align: center; color: var(--text-light); padding: 30px; }

/* ===== انتخاب روش ارسال (پست/تیپاکس) ===== */
.shipping-methods { margin: 16px 0; }
.shipping-methods-title { font-size: 0.9rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; color: var(--text-dark); }
.shipping-methods-title i { color: var(--primary-color); }
.shipping-options { display: flex; flex-direction: column; gap: 8px; }
.ship-hint { font-size: 0.82rem; color: var(--text-light); background: var(--input-bg); border: 1px dashed var(--glass-border); border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 6px; }
.ship-option { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 14px; border: 2px solid var(--glass-border); background: var(--input-bg); cursor: pointer; transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; }
.ship-option:hover { transform: translateY(-2px); }
.ship-option.active { border-color: var(--primary-color); background: var(--mobile-overlay-accent, rgba(216,131,158,0.1)); }
.ship-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--glass-border); flex-shrink: 0; position: relative; transition: border-color 0.25s ease; }
.ship-option.active .ship-radio { border-color: var(--primary-color); }
.ship-option.active .ship-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--primary-color); }
.ship-ico { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--primary-color); background: var(--mobile-overlay-accent, rgba(216,131,158,0.12)); }
.ship-option.active .ship-ico { background: linear-gradient(135deg, var(--primary-color), #ba7bc9); color: #fff; }
.ship-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ship-meta strong { font-size: 0.9rem; color: var(--text-dark); }
.ship-meta small { font-size: 0.74rem; color: var(--text-light); }
.ship-price { font-size: 0.92rem; font-weight: 800; color: var(--primary-color); white-space: nowrap; }
.ship-live { display: inline-block; font-size: 0.62rem; font-weight: 800; color: #fff; background: #27ae60; padding: 1px 6px; border-radius: 8px; vertical-align: middle; margin-right: 3px; }

/* ============================================================
   موجودی انبار (ناموجود / کم / اطلاع از موجودی)
   ============================================================ */
.stock-badge-out {
    position: absolute; top: 12px; left: 12px; z-index: 4;
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(40,30,35,0.85); color: #fff; font-size: 0.78rem; font-weight: 700;
    padding: 5px 11px; border-radius: 20px; backdrop-filter: blur(4px);
}
.product-card.out-of-stock .product-img-wrapper { filter: grayscale(0.55) opacity(0.82); }
.stock-low { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 700; color: #e67e22; margin-bottom: 8px; }
.notify-stock-btn { background: linear-gradient(135deg, #5a6cf0, #8a6cf0) !important; color: #fff !important; border: none !important; }
.notify-stock-btn:hover { filter: brightness(1.07); }
.notify-stock-btn.notified { background: #27ae60 !important; opacity: 0.9; }

/* وضعیت موجودی در صفحه‌ی محصول */
.pd-stock { display: inline-flex; align-items: center; gap: 7px; font-size: 0.92rem; font-weight: 700; padding: 8px 14px; border-radius: 12px; margin: 4px 0 6px; }
.pd-stock.in { color: #1e9e64; background: rgba(39,174,96,0.1); }
.pd-stock.low { color: #e67e22; background: rgba(230,126,34,0.12); }
.pd-stock.out { color: #e74c3c; background: rgba(231,76,60,0.12); }
#pdAddToCart.notify-stock-btn { background: linear-gradient(135deg, #5a6cf0, #8a6cf0) !important; color: #fff !important; }

/* ============================================================
   نوار جستجو/مرتب‌سازی فروشگاه
   ============================================================ */
.shop-toolbar { display: flex; gap: 12px; max-width: 1000px; margin: 0 auto 18px; flex-wrap: wrap; }
.shop-search { position: relative; flex: 1; min-width: 220px; }
.shop-search > i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--text-light); font-size: 1.1rem; }
.shop-search input { width: 100%; padding: 13px 46px 13px 44px; border-radius: 16px; border: 1px solid var(--glass-border); background: var(--card-bg); color: var(--text-dark); outline: none; font-family: inherit; font-size: 0.95rem; transition: border-color 0.25s ease; }
.shop-search input:focus { border-color: var(--primary-color); }
.shop-search-clear { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; border: none; background: var(--input-bg); color: var(--text-light); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.shop-sort { position: relative; display: flex; align-items: center; }
.shop-sort > i { position: absolute; right: 14px; color: var(--primary-color); pointer-events: none; }
.shop-sort select { padding: 13px 40px 13px 18px; border-radius: 16px; border: 1px solid var(--glass-border); background: var(--card-bg); color: var(--text-dark); outline: none; font-family: inherit; font-size: 0.92rem; cursor: pointer; appearance: none; -webkit-appearance: none; }
.shop-result-count { max-width: 1400px; margin: 0 auto 14px; padding: 0 5%; color: var(--text-light); font-size: 0.9rem; font-weight: 600; }
.shop-loadmore-wrap { text-align: center; margin: 30px 0 10px; }

/* ============================================================
   صفحات حقوقی + سوالات متداول
   ============================================================ */
.legal-section { max-width: 860px; margin: 0 auto; padding: 10px 5% 70px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: 18px; overflow: hidden; transition: box-shadow 0.3s ease; }
.faq-item.open { box-shadow: var(--shadow-soft); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 700; color: var(--text-dark); text-align: right; }
.faq-q i { color: var(--primary-color); font-size: 1.3rem; flex-shrink: 0; transition: transform 0.35s ease; }
.faq-item.open .faq-q i { transform: rotate(135deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-item.open .faq-a { max-height: 300px; }
.faq-a p { padding: 0 20px 18px; color: var(--text-light); line-height: 2; font-size: 0.95rem; }

.legal-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 26px; }
.legal-chip { padding: 9px 18px; border-radius: 30px; background: var(--input-bg); border: 1px solid var(--glass-border); color: var(--text-dark); text-decoration: none; font-weight: 700; font-size: 0.88rem; transition: all 0.25s ease; }
.legal-chip:hover { background: var(--primary-color); color: #fff; }
.legal-card { background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: 22px; padding: 26px 28px; margin-bottom: 20px; scroll-margin-top: 110px; }
.legal-card h2 { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; color: var(--primary-color); margin-bottom: 14px; }
.legal-card p { color: var(--text-light); line-height: 2; margin-bottom: 12px; }
.legal-card ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.legal-card li { position: relative; padding-right: 26px; color: var(--text-dark); line-height: 1.9; }
.legal-card li::before { content: '\2713'; position: absolute; right: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--primary-color); color: #fff; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-bottom: 12px; }
.footer-legal-links a { color: var(--text-light); text-decoration: none; font-size: 0.85rem; transition: color 0.25s ease; }
.footer-legal-links a:hover { color: var(--primary-color); }

/* ============================================================
   لودینگ انتقال بین صفحات (با لوگو)
   ============================================================ */
/* فقط لوگو، بزرگ و کم‌رنگ، با پس‌زمینه‌ی نیمه‌شفاف و فید */
.page-loader {
    position: fixed; inset: 0; z-index: 200000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(251, 248, 249, 0.45);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    pointer-events: none;
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
[data-theme="dark"] .page-loader { background: rgba(18, 14, 16, 0.5); }
.page-loader.show { opacity: 1; visibility: visible; transition: opacity 0.12s ease; }
.pl-logo {
    width: 240px; max-width: 64vw; max-height: 220px; object-fit: contain;
    opacity: 0.6; animation: plPulse 0.9s ease-in-out infinite;
}
[data-theme="dark"] .pl-logo { filter: brightness(1.4) contrast(1.05); }
@keyframes plPulse { 0%, 100% { transform: scale(0.95); opacity: 0.4; } 50% { transform: scale(1.05); opacity: 0.65; } }

/* ورود نرم محتوای صفحه‌ی جدید */
body { animation: pageFadeIn 0.4s ease; }
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .pl-logo { animation: none; }
    body { animation: none; }
}

/* ============================================================
   اعلان شناور (Toast)
   ============================================================ */
.toast-container { position: fixed; top: 18px; left: 18px; z-index: 100000; display: flex; flex-direction: column; gap: 12px; max-width: 360px; pointer-events: none; }
.toast {
    pointer-events: all; position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    background: var(--card-bg, #fff); border: 1px solid var(--glass-border);
    border-radius: 16px; box-shadow: 0 14px 40px rgba(0,0,0,0.18);
    transform: translateX(-120%); opacity: 0;
    transition: transform 0.45s cubic-bezier(0.175,0.885,0.32,1.275), opacity 0.4s ease;
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast-icon { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; color: #fff; background: linear-gradient(135deg, var(--primary-color), #ba7bc9); }
.toast.success .toast-icon { background: linear-gradient(135deg, #27ae60, #2ecc71); }
.toast.info .toast-icon { background: linear-gradient(135deg, #3498db, #5dade2); }
.toast.warning .toast-icon { background: linear-gradient(135deg, #e67e22, #f39c12); }
.toast.sale .toast-icon { background: linear-gradient(135deg, #ff6b6b, #d8839e); }
.toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.toast-body strong { font-size: 0.92rem; color: var(--text-dark); }
.toast-body span { font-size: 0.8rem; color: var(--text-light); }
.toast-close { background: none; border: none; color: var(--text-light); cursor: pointer; font-size: 1.1rem; display: flex; padding: 2px; flex-shrink: 0; }
.toast-close:hover { color: var(--text-dark); }
.toast-progress { position: absolute; bottom: 0; right: 0; left: 0; height: 3px; background: var(--primary-color); transform: scaleX(1); transform-origin: right; }
.toast.success .toast-progress { background: #2ecc71; }
.toast.info .toast-progress { background: #3498db; }
.toast.warning .toast-progress { background: #f39c12; }

/* ============================================================
   زنگوله اعلان کاربران
   ============================================================ */
.notif-bell { position: relative; }
.notif-bell-btn {
    position: relative; width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
    background: var(--input-bg); border: 1px solid var(--glass-border); color: var(--text-dark);
    font-size: 1.25rem; display: flex; align-items: center; justify-content: center;
    transition: background 0.25s ease, transform 0.25s ease;
}
.notif-bell-btn:hover { background: var(--mobile-overlay-accent, rgba(216,131,158,0.12)); color: var(--primary-color); }
.notif-badge {
    position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px;
    background: #e74c3c; color: #fff; border-radius: 10px; font-size: 0.68rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; border: 2px solid var(--card-bg);
    animation: bellPulse 2s ease-in-out infinite;
}
@keyframes bellPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.notif-dropdown {
    position: absolute; top: calc(100% + 12px); left: 0; width: 330px; max-width: 86vw;
    background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.18); overflow: hidden;
    opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.97); transform-origin: top left;
    transition: opacity 0.28s ease, transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275), visibility 0.28s ease;
    z-index: 1001;
}
.notif-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.notif-dd-head { padding: 14px 16px; font-weight: 800; font-size: 0.95rem; color: var(--text-dark); border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; gap: 8px; }
.notif-dd-head i { color: var(--primary-color); }
.notif-dd-list { max-height: 360px; overflow-y: auto; }
.notif-dd-empty { padding: 36px 16px; text-align: center; color: var(--text-light); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.notif-dd-empty i { font-size: 2rem; opacity: 0.5; }
.notif-item { display: flex; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--glass-border); transition: background 0.2s ease; position: relative; }
.notif-item:hover { background: var(--mobile-overlay-accent, rgba(216,131,158,0.06)); }
.notif-item.unseen { background: rgba(216,131,158,0.08); }
.notif-item.unseen::before { content: ''; position: absolute; right: 6px; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary-color); }
.notif-item-icon { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: #fff; background: linear-gradient(135deg, var(--primary-color), #ba7bc9); }
.notif-item.type-success .notif-item-icon { background: linear-gradient(135deg, #27ae60, #2ecc71); }
.notif-item.type-info .notif-item-icon { background: linear-gradient(135deg, #3498db, #5dade2); }
.notif-item.type-warning .notif-item-icon { background: linear-gradient(135deg, #e67e22, #f39c12); }
.notif-item.type-sale .notif-item-icon { background: linear-gradient(135deg, #ff6b6b, #d8839e); }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-body strong { display: block; font-size: 0.88rem; color: var(--text-dark); margin-bottom: 2px; }
.notif-item-body p { font-size: 0.8rem; color: var(--text-light); line-height: 1.6; margin: 0 0 4px; }
.notif-item-time { font-size: 0.7rem; color: var(--text-light); opacity: 0.8; }
.notif-item.has-link { cursor: pointer; }
.notif-item.has-link:hover { background: var(--mobile-overlay-accent, rgba(216,131,158,0.1)); }
.notif-item-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 0.74rem; font-weight: 800; color: var(--primary-color); }

/* ============================================================
   نشان کنار منوی پنل ادمین + اعلان‌های ارسال‌شده
   ============================================================ */
.menu-badge { background: #e74c3c; color: #fff; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; font-size: 0.72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-right: auto; }
.admin-menu li.active .menu-badge { background: rgba(255,255,255,0.35); }
.admin-notifs-list { display: flex; flex-direction: column; gap: 10px; }
.admin-notif-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--input-bg); border: 1px solid var(--glass-border); }
.admin-notif-ico { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, var(--primary-color), #ba7bc9); }
.admin-notif-row.type-success .admin-notif-ico { background: linear-gradient(135deg, #27ae60, #2ecc71); }
.admin-notif-row.type-info .admin-notif-ico { background: linear-gradient(135deg, #3498db, #5dade2); }
.admin-notif-row.type-warning .admin-notif-ico { background: linear-gradient(135deg, #e67e22, #f39c12); }
.admin-notif-row.type-sale .admin-notif-ico { background: linear-gradient(135deg, #ff6b6b, #d8839e); }
.admin-notif-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-notif-main strong { font-size: 0.9rem; color: var(--text-dark); }
.admin-notif-main span { font-size: 0.82rem; color: var(--text-light); }
.admin-notif-main small { font-size: 0.72rem; color: var(--text-light); opacity: 0.8; margin-top: 2px; }

/* ============================================================
   بازطراحی پشتیبانی زنده (چت ادمین)
   ============================================================ */
.chat-card { padding-bottom: 20px; }
.admin-chat-layout { display: flex; gap: 16px; height: 560px; }
.admin-chat-sidebar { width: 270px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; border-left: 1px solid var(--glass-border); padding-left: 14px; }
.chat-search { position: relative; }
.chat-search i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-light); font-size: 1rem; }
.chat-search input { width: 100%; padding: 9px 36px 9px 12px; border-radius: 12px; border: 1px solid var(--glass-border); background: var(--input-bg); color: var(--text-dark); outline: none; font-family: inherit; font-size: 0.85rem; }
.chat-search input:focus { border-color: var(--primary-color); }
.admin-chat-users { width: 100%; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; scrollbar-width: thin; padding-left: 2px; border-left: none; }
.admin-chat-user-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 14px; border: 1px solid transparent; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; position: relative; }
.admin-chat-user-item:hover { background: var(--input-bg); }
.admin-chat-user-item.active { background: var(--mobile-overlay-accent, rgba(216,131,158,0.12)); border-color: var(--glass-border); }
.chat-user-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--primary-color), #ba7bc9); position: relative; }
.chat-user-avatar.has-new::after { content: ''; position: absolute; bottom: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: #e74c3c; border: 2px solid var(--card-bg); }
.chat-user-info { flex: 1; min-width: 0; }
.chat-user-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.chat-user-name { font-weight: 700; font-size: 0.88rem; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-user-time { font-size: 0.68rem; color: var(--text-light); flex-shrink: 0; }
.chat-user-preview { font-size: 0.78rem; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.chat-unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primary-color); flex-shrink: 0; }
.chat-users-empty { padding: 40px 12px; text-align: center; color: var(--text-light); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.chat-users-empty i { font-size: 2rem; opacity: 0.5; }

.admin-chat-box { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.admin-chat-header { padding: 4px 4px 12px; border-bottom: 1px solid var(--glass-border); margin-bottom: 12px; min-height: 34px; }
.chat-empty-header { color: var(--text-light); font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }
.chat-head-user { display: flex; align-items: center; gap: 10px; }
.chat-head-user strong { display: block; font-size: 0.95rem; color: var(--text-dark); }
.chat-head-status { font-size: 0.72rem; color: #2ecc71; display: flex; align-items: center; gap: 4px; }
.chat-head-status i { font-size: 0.55rem; }
.admin-chat-messages { flex: 1; background: var(--input-bg); border-radius: 16px; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; border: 1px solid var(--glass-border); scrollbar-width: thin; }
.chat-bubble { max-width: 75%; padding: 9px 14px; border-radius: 16px; font-size: 0.88rem; line-height: 1.7; position: relative; animation: bubbleIn 0.3s ease; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.chat-bubble p { margin: 0; word-wrap: break-word; }
.chat-bubble-time { display: block; font-size: 0.65rem; opacity: 0.7; margin-top: 3px; text-align: left; }
.chat-bubble.received { align-self: flex-start; background: var(--card-bg); border: 1px solid var(--glass-border); color: var(--text-dark); border-bottom-right-radius: 5px; }
.chat-bubble.sent { align-self: flex-end; background: linear-gradient(135deg, var(--primary-color), #ba7bc9); color: #fff; border-bottom-left-radius: 5px; }
.chat-empty-state { margin: auto; text-align: center; color: var(--text-light); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.chat-empty-state i { font-size: 2.8rem; opacity: 0.4; color: var(--primary-color); }
.admin-chat-input input:disabled { opacity: 0.55; cursor: not-allowed; }
.admin-chat-input button:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 768px) {
    .toast-container { left: 10px; right: 10px; top: 10px; max-width: none; }
    .notif-dropdown { position: fixed; left: 10px; right: 10px; width: auto; top: 70px; }
    .admin-chat-layout { flex-direction: column; height: auto; }
    .admin-chat-sidebar { width: 100%; border-left: none; border-bottom: 1px solid var(--glass-border); padding-left: 0; padding-bottom: 12px; }
    .admin-chat-users { max-height: 200px; }
    .admin-chat-messages { height: 360px; flex: none; }
}

/* ============================================================
   نوار درخواست مجوز اعلان (Push Prompt)
   ============================================================ */
/* مودال درخواست مجوز اعلان — وسط صفحه */
.push-modal-overlay {
    position: fixed; inset: 0; z-index: 100002; display: flex; align-items: center; justify-content: center;
    background: rgba(20,14,18,0.5); backdrop-filter: blur(4px); padding: 20px;
    opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease;
}
.push-modal-overlay.show { opacity: 1; visibility: visible; }
.push-modal {
    position: relative; width: 380px; max-width: 100%;
    background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: 24px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.3); padding: 30px 26px 24px; text-align: center;
    transform: translateY(24px) scale(0.94);
    transition: transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
}
.push-modal-overlay.show .push-modal { transform: translateY(0) scale(1); }
.push-modal-ico {
    width: 70px; height: 70px; border-radius: 22px; margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center; font-size: 2.2rem; color: #fff;
    background: linear-gradient(135deg, var(--primary-color), #ba7bc9);
    box-shadow: 0 12px 26px rgba(216,131,158,0.45); animation: bellPulse 2s ease-in-out infinite;
}
.push-modal h3 { font-size: 1.2rem; color: var(--text-dark); margin: 0 0 8px; }
.push-modal p { font-size: 0.92rem; color: var(--text-light); line-height: 1.9; margin: 0 0 20px; }
.push-modal .push-allow { display: block; width: 100%; background: linear-gradient(135deg, var(--primary-color), #ba7bc9); color: #fff; border: none; padding: 13px; border-radius: 14px; font-family: inherit; font-weight: 800; font-size: 0.95rem; cursor: pointer; transition: transform 0.2s ease, filter 0.2s ease; }
.push-modal .push-allow:hover { transform: translateY(-2px); filter: brightness(1.06); }
.push-modal .push-later { display: block; width: 100%; background: none; color: var(--text-light); border: none; padding: 12px; margin-top: 6px; font-family: inherit; font-weight: 600; font-size: 0.88rem; cursor: pointer; }
.push-modal-close { position: absolute; top: 14px; left: 16px; background: none; border: none; color: var(--text-light); font-size: 1.4rem; cursor: pointer; display: flex; padding: 2px; }

/* ============================================================
   نوار استوری‌ها + رینگ
   ============================================================ */
.stories-bar { position: relative; z-index: 2; display: flex; gap: 16px; align-items: center; padding: 160px 5% 10px; max-width: 1400px; margin: 0 auto; }
/* وقتی نوار استوری وجود دارد، فاصله‌ی بالای هیرو کم می‌شود تا تکراری نشود */
body.has-stories .hero-section { padding-top: 20px; }
.story-ring { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; outline: none; }
.story-ring-img { width: 76px; height: 76px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, #ff6b6b, #d8839e, #ba7bc9, #feca57); transition: transform 0.3s ease; }
.story-ring:hover .story-ring-img { transform: scale(1.06); }
.story-ring.seen .story-ring-img { background: var(--glass-border); }
.story-ring-img img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg-color); background: var(--card-bg); }
.story-ring-label { font-size: 0.78rem; font-weight: 600; color: var(--text-dark); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== نمایشگر استوری (تمام‌صفحه) ===== */
.story-viewer { position: fixed; inset: 0; z-index: 100001; background: rgba(10,8,12,0.92); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; }
.story-viewer.open { display: flex; animation: storyFadeIn 0.3s ease; }
@keyframes storyFadeIn { from { opacity: 0; } to { opacity: 1; } }
.story-vcard { position: relative; width: 100%; max-width: 430px; height: 100%; max-height: 92vh; background: #000; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.6); display: flex; flex-direction: column; }
.story-progress { position: absolute; top: 10px; left: 12px; right: 12px; z-index: 6; display: flex; gap: 4px; }
.story-progress .seg { flex: 1; height: 3px; background: rgba(255,255,255,0.3); border-radius: 3px; overflow: hidden; }
.story-progress .seg-fill { height: 100%; width: 0; background: #fff; border-radius: 3px; }
.story-topbar { position: absolute; top: 22px; left: 12px; right: 12px; z-index: 6; display: flex; align-items: center; justify-content: space-between; }
.story-author { display: flex; align-items: center; gap: 10px; }
.story-author-img { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,0.6); }
.story-author-img img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.story-author-meta strong { display: block; color: #fff; font-size: 0.9rem; }
.story-author-meta span { color: rgba(255,255,255,0.75); font-size: 0.72rem; }
.story-close { background: none; border: none; color: #fff; font-size: 1.6rem; cursor: pointer; display: flex; }
.story-stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000; }
.story-media { width: 100%; height: 100%; object-fit: contain; }
.story-text-overlay { position: absolute; left: 0; right: 0; z-index: 4; padding: 18px 22px; color: #fff; font-size: 1.25rem; font-weight: 800; text-align: center; text-shadow: 0 2px 14px rgba(0,0,0,0.7); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
.story-text-overlay.show { opacity: 1; }
.story-text-overlay.pos-top { top: 60px; }
.story-text-overlay.pos-center { top: 50%; transform: translateY(-50%); }
.story-text-overlay.pos-bottom { bottom: 120px; }
.story-product-card { position: absolute; bottom: 84px; left: 16px; right: 16px; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 10px; background: rgba(255,255,255,0.95); border-radius: 16px; text-decoration: none; color: var(--text-dark); box-shadow: 0 10px 30px rgba(0,0,0,0.4); animation: storyCardUp 0.5s cubic-bezier(0.175,0.885,0.32,1.275); }
@keyframes storyCardUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.story-product-card img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.story-product-info { flex: 1; min-width: 0; }
.story-product-cat { font-size: 0.68rem; color: var(--primary-color); font-weight: 700; }
.story-product-info strong { display: block; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-product-info p { margin: 2px 0; font-size: 0.74rem; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-product-price { font-size: 0.85rem; font-weight: 800; color: var(--primary-color); }
.story-product-go { background: linear-gradient(135deg, var(--primary-color), #ba7bc9); color: #fff; padding: 8px 12px; border-radius: 12px; font-size: 0.76rem; font-weight: 700; white-space: nowrap; display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.story-tap { position: absolute; top: 60px; bottom: 80px; width: 32%; z-index: 3; cursor: pointer; }
.story-tap.left { left: 0; } .story-tap.right { right: 0; }
.story-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,0.18); color: #fff; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease, background 0.3s ease; }
.story-vcard:hover .story-nav { opacity: 1; }
.story-nav:hover { background: rgba(255,255,255,0.35); }
.story-nav.prev { right: 8px; } .story-nav.next { left: 8px; }
.story-bottom { position: absolute; bottom: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: linear-gradient(0deg, rgba(0,0,0,0.55), transparent); }
.story-bottom input { flex: 1; padding: 11px 18px; border-radius: 30px; border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.12); color: #fff; outline: none; font-family: inherit; font-size: 0.88rem; }
.story-bottom input::placeholder { color: rgba(255,255,255,0.7); }
.story-like, .story-send { background: none; border: none; color: #fff; font-size: 1.6rem; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: transform 0.2s ease; flex-shrink: 0; }
.story-like:hover, .story-send:hover { transform: scale(1.15); }
.story-like.liked { color: #ff4d6d; }
.story-like-count { font-size: 0.8rem; font-weight: 700; }
.story-heart-burst { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0); z-index: 7; color: #ff4d6d; font-size: 6rem; opacity: 0; pointer-events: none; }
.story-heart-burst.burst { animation: heartBurst 0.8s ease; }
@keyframes heartBurst { 0% { transform: translate(-50%,-50%) scale(0); opacity: 0; } 30% { transform: translate(-50%,-50%) scale(1.1); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(1.4); opacity: 0; } }

/* ===== استوری‌ها در پنل ادمین ===== */
.story-uploader { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; flex-wrap: wrap; }
.story-upload-box { width: 150px; height: 200px; border: 2px dashed var(--glass-border); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; color: var(--text-light); transition: border-color 0.25s ease, background 0.25s ease; text-align: center; padding: 10px; }
.story-upload-box:hover { border-color: var(--primary-color); background: var(--mobile-overlay-accent, rgba(216,131,158,0.06)); }
.story-upload-box i { font-size: 2rem; color: var(--primary-color); }
.story-upload-box.has-media { border-style: solid; }
.story-preview { width: 150px; height: 200px; border-radius: 16px; overflow: hidden; border: 1px solid var(--glass-border); }
.story-preview img, .story-preview video { width: 100%; height: 100%; object-fit: cover; }
.admin-stories-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.admin-story-card { display: flex; gap: 12px; padding: 12px; border-radius: 14px; background: var(--input-bg); border: 1px solid var(--glass-border); position: relative; }
.admin-story-thumb { width: 64px; height: 90px; border-radius: 10px; overflow: hidden; flex-shrink: 0; position: relative; background: #000; }
.admin-story-thumb img, .admin-story-thumb video { width: 100%; height: 100%; object-fit: cover; }
.admin-story-type { position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,0.55); color: #fff; width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.admin-story-info { flex: 1; min-width: 0; }
.admin-story-stats { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.78rem; color: var(--text-light); margin-bottom: 6px; }
.admin-story-stats i { color: var(--primary-color); }
.admin-story-stats span:nth-child(2) i { color: #ff4d6d; }
.admin-story-prod { font-size: 0.78rem; color: var(--primary-color); font-weight: 700; margin-bottom: 4px; }
.admin-story-text { font-size: 0.8rem; color: var(--text-dark); margin-bottom: 6px; }
.admin-story-replies { font-size: 0.76rem; color: var(--text-light); max-height: 120px; overflow-y: auto; border-top: 1px dashed var(--glass-border); padding-top: 6px; }
.admin-story-replies strong { color: var(--text-dark); display: block; margin-bottom: 4px; }
.asr-item { padding: 3px 0; }
.asr-item b { color: var(--primary-color); }
.admin-story-noreply { font-size: 0.74rem; color: var(--text-light); opacity: 0.7; }
.admin-story-del { position: absolute; top: 10px; left: 10px; }

@media (max-width: 768px) {
    .stories-bar { padding: 105px 4% 6px; }
    body.has-stories .hero-section { padding-top: 10px !important; }
    .story-ring-img { width: 66px; height: 66px; }
    .story-vcard { max-width: 100%; max-height: 100%; border-radius: 0; }
    .story-tap { width: 38%; }
    .story-nav { display: none; }
    .admin-stories-list { grid-template-columns: 1fr; }
}

/* ===== نشان پیام پشتیبانی ===== */
.support-badge {
    position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
    background: #e74c3c; color: #fff; border-radius: 10px; font-size: 0.72rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-color);
    animation: bellPulse 1.8s ease-in-out infinite; z-index: 2;
}

/* ===== صحنه‌ی استوری فقط-محصول (یو‌آی بهتر، عکس بزرگ) ===== */
.story-product-stage { position: absolute; inset: 0; z-index: 2; display: block; text-decoration: none; color: #fff; overflow: hidden; }
.story-product-stage .sps-bg { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(34px) brightness(0.55) saturate(1.3); transform: scale(1.15); }
.story-product-stage .sps-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,12,18,0.5), rgba(20,12,18,0.35) 35%, rgba(20,12,18,0.85)); }
.sps-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 70px 24px 118px; }
.sps-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, #ff6b6b, #d8839e); color: #fff; padding: 7px 18px;
    border-radius: 30px; font-size: 0.82rem; font-weight: 800; box-shadow: 0 8px 22px rgba(255,107,107,0.5);
    animation: spsBadge 2s ease-in-out infinite;
}
@keyframes spsBadge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.sps-imgwrap { position: relative; width: 84%; max-width: 330px; aspect-ratio: 1/1; border-radius: 30px; overflow: hidden; box-shadow: 0 34px 70px rgba(0,0,0,0.6); border: 3px solid rgba(255,255,255,0.18); animation: spsImg 0.6s cubic-bezier(0.175,0.885,0.32,1.275); }
@keyframes spsImg { from { opacity: 0; transform: scale(0.82) translateY(24px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.sps-imgwrap img { width: 100%; height: 100%; object-fit: cover; }
.sps-disc { position: absolute; top: 14px; right: 14px; background: #e74c3c; color: #fff; border-radius: 16px; padding: 8px 14px; font-weight: 900; font-size: 1.2rem; display: flex; flex-direction: column; align-items: center; line-height: 1; box-shadow: 0 8px 20px rgba(231,76,60,0.55); }
.sps-disc small { font-size: 0.62rem; font-weight: 600; margin-top: 2px; }
.sps-body { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 7px; max-width: 380px; }
.sps-cat { font-size: 0.85rem; color: #f3c8d8; font-weight: 700; background: rgba(255,255,255,0.12); padding: 4px 14px; border-radius: 20px; }
.sps-name { font-size: 1.7rem; font-weight: 900; margin: 2px 0; text-shadow: 0 2px 14px rgba(0,0,0,0.55); line-height: 1.3; }
.sps-desc { font-size: 0.92rem; color: rgba(255,255,255,0.88); line-height: 1.9; margin: 0; }
.sps-price { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.sps-old { font-size: 1.05rem; color: rgba(255,255,255,0.55); text-decoration: line-through; }
.sps-new { font-size: 1.6rem; font-weight: 900; color: #fff; }
.sps-cta { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #2a1822; padding: 13px 32px; border-radius: 30px; font-weight: 800; font-size: 1rem; box-shadow: 0 12px 30px rgba(0,0,0,0.4); animation: spsBadge 2.4s ease-in-out infinite; }

/* ===== کارت استوری در پنل ادمین (نسخه جزئیات) ===== */
.admin-story-card-v2 { background: var(--input-bg); border: 1px solid var(--glass-border); border-radius: 16px; padding: 14px; }
.asd-top { display: flex; gap: 14px; align-items: flex-start; position: relative; }
.admin-story-card-v2 .admin-story-thumb { width: 60px; height: 84px; }
.asd-top-info { flex: 1; min-width: 0; }
.asd-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 6px; }
.asd-stat { font-size: 0.9rem; font-weight: 800; color: var(--text-dark); display: inline-flex; align-items: center; gap: 5px; }
.asd-stat i { color: var(--primary-color); }
.asd-stat small { font-size: 0.72rem; font-weight: 500; color: var(--text-light); }
.admin-story-card-v2 .admin-story-prod { margin-top: 2px; }
.admin-story-card-v2 .admin-story-del { position: static; flex-shrink: 0; }
.asd-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.asd-section { background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: 12px; padding: 12px; }
.asd-section:last-child { grid-column: 1 / -1; }
.asd-section h5 { font-size: 0.85rem; color: var(--primary-color); margin: 0 0 10px; display: flex; align-items: center; gap: 6px; }
.asd-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 110px; overflow-y: auto; }
.asd-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--input-bg); border: 1px solid var(--glass-border); border-radius: 20px; padding: 4px 10px; font-size: 0.78rem; font-weight: 600; }
.asd-chip i { color: var(--text-light); font-size: 0.85rem; }
.asd-empty { font-size: 0.8rem; color: var(--text-light); opacity: 0.75; }
.asd-replies { display: flex; flex-direction: column; gap: 10px; }
.asd-reply { background: var(--input-bg); border: 1px solid var(--glass-border); border-radius: 12px; padding: 10px 12px; }
.asd-reply-head { margin-bottom: 4px; }
.asd-reply-user { font-size: 0.82rem; font-weight: 800; color: var(--primary-color); display: inline-flex; align-items: center; gap: 5px; }
.asd-reply-text { font-size: 0.88rem; color: var(--text-dark); margin-bottom: 8px; }
.asd-reply-answer { font-size: 0.82rem; color: #27ae60; background: rgba(39,174,96,0.08); border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.asd-reply-box { display: flex; gap: 6px; }
.asd-reply-input { flex: 1; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--card-bg); color: var(--text-dark); outline: none; font-family: inherit; font-size: 0.82rem; }
.asd-reply-input:focus { border-color: var(--primary-color); }
.asd-reply-send { width: 38px; border-radius: 10px; border: none; background: var(--primary-color); color: #fff; cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.2s ease; }
.asd-reply-send:hover { transform: scale(1.08); }

@media (max-width: 768px) {
    .asd-sections { grid-template-columns: 1fr; }
    .story-product-stage { padding: 64px 18px 100px; }
    .sps-name { font-size: 1.3rem; }
    .sps-imgwrap { width: 62%; }
}