/*
 * ارتقای بصری حرفه‌ای صفحات سمت بازدیدکننده (سینگل‌پیج) -- دستور کاربر
 * ۲۰۲۶-۰۷-۲۲، هم‌زمان با تسک دموی محتوا. additive/امن: هیچ کلاس اختصاصی
 * سکشن‌ها را جایگزین نمی‌کند، فقط پایهٔ تایپوگرافی/فاصله‌گذاری/سایه را
 * در سطح کل سایت یکدست و امروزی می‌کند.
 *
 * Professional visual upgrade for visitor-facing pages (singlepage) --
 * user request 2026-07-22, alongside the demo-content task. Additive/safe:
 * does not replace any section-specific class, only unifies the base
 * typography/spacing/shadow across the whole site to a modern standard.
 */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* --- تایپوگرافی پایه --- Base typography ---
   نکته‌ی مهم: آیکون‌فونت‌ها (`.fa`, `.material-icons`, `[class*="bi-"]`)
   کاملاً از این قانون مستثنا شدند (`:not()`) -- تلاش قبلی برای «برگردوندن»
   فونت آیکون بعد از override باعث می‌شد بعضی آیکون‌ها اصلاً رندر نشوند
   (کشف‌شده حین تست بصری خودم، قبل از commit رفع شد). */
html[dir="rtl"] body :not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not([class*="bi-"]):not(.material-icons) {
    font-family: 'Vazirmatn', 'IRANSans', Tahoma, sans-serif !important;
}
html[dir="ltr"] body :not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not([class*="bi-"]):not(.material-icons) {
    font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif !important;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0;
}

/* --- سلسله‌مراتب عنوان بخش‌ها --- Section heading hierarchy --- */
.section-title, .style-title, h2.title, .title-box h2 {
    font-weight: 800 !important;
    letter-spacing: -0.01em;
}

/* --- فاصله‌گذاری بخش‌ها --- Section spacing --- */
section {
    padding-top: clamp(2.5rem, 5vw, 4.5rem);
    padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

/* --- کارت‌ها/جعبه‌ها --- Cards/boxes --- */
.card, .figure, .box-shadow-card {
    border-radius: 14px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.10);
}

/* --- دکمه‌ها --- Buttons --- */
.btn {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

/* --- ورودی‌های فرم --- Form inputs --- */
.form-control, input[type="text"], input[type="email"], input[type="tel"], textarea {
    border-radius: 10px !important;
}

/* --- نوار جست‌وجوی هدر --- Header search bar --- */
.header-search .form-control, .header-search input {
    border-radius: 24px !important;
}

@media (max-width: 767px) {
    section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* ==========================================================================
   بازطراحی بصری سبک «روزشمار» -- دستور کاربر ۲۰۲۶-۰۷-۲۳: تایپوگرافی
   اعداد، انیمیشن نرم، هماهنگی رنگ با تم فعلی.

   ⚠️ اصلاح مهم (بعد از تست بصری واقعی): این سایت یک تم برند اختصاصی
   *واقعی* دارد که مستقیماً روی این کامپوننت (`.block[data-v-6ccea47d]`)
   با `!important` تنظیم شده (پس‌زمینهٔ صورتی `#E316B4` -- دقیقاً همرنگ
   دکمه‌های ناوبری سایت -- + فونت اختصاصی `Mj_DinarOneMedium`). این یک
   باگ نبود، تنظیمات برند واقعی و عمدی سایت بود. نسخهٔ اول این فایل با
   `!important` روی پس‌زمینه/پدینگ/رادیوس/سایه سعی می‌کرد این تم را
   بازنویسی کند -- که عملاً هم بی‌فایده بود (تم به‌خاطر ترتیب بارگذاری
   بعد از این فایل همیشه برنده می‌شد) و هم روش نادرستی است (نباید با
   !important روی تنظیمات برند عمدی یک سایت جنگید). رفع شد: فقط چیدمان/
   انیمیشن/تایپوگرافی افزوده شد، بدون دست‌زدن به پس‌زمینه/پدینگ/رادیوس/
   سایهٔ جعبه (که تم سایت خودش کنترل می‌کند).
   ========================================================================== */
.countdown {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* فقط یک حرکت ملایم شناور -- بدون دست‌زدن به box-shadow/background/padding
   که تم برند سایت با !important کنترل می‌کند. */
.countdown .block {
    animation: countdownFloat 2.6s ease-in-out infinite;
}
.countdown .block:nth-child(2) { animation-delay: .15s; }
.countdown .block:nth-child(3) { animation-delay: .3s; }
.countdown .block:nth-child(4) { animation-delay: .45s; }

@keyframes countdownFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.countdown .digit {
    font-size: 2.4rem !important;
    font-weight: 800 !important;
    line-height: 1.1;
    margin: 0 0 4px 0 !important;
    color: #F7941D !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    text-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.countdown .text {
    font-size: .8rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    opacity: .9;
    margin: 0 !important;
    letter-spacing: .03em;
}

@media (max-width: 575px) {
    .countdown { gap: 8px; }
    .countdown .digit { font-size: 1.6rem !important; }
}

/* ==========================================================================
   دکمهٔ «افزودن» یکدست و مدرن -- جایگزین ۳ تصویر PNG قدیمی و ناهماهنگ
   (`Flat_plus_icon.png` ۲۵۰px برای افزودن اسلایدر، `categories/plus.png`
   ۱۳۰px برای «بیشتر»، `plusicon.png` ~۱۰۵px برای افزودن محصول به تخفیف) --
   دستور کاربر ۲۰۲۶-۰۷-۲۳: «علامت‌های به‌علاوهٔ بزرگ و نازیبا... حرفه‌ای و
   با آیکون‌های زیبا و مدرن». پلاس با ::before/::after کشیده می‌شود (نه
   فونت‌آیکون، نه رستر) -- در هر اندازه‌ای کاملاً تیز/شارپ می‌ماند و رنگش
   با تم هر بخش هماهنگ است.
   ========================================================================== */
.iq-add-circle {
    --iq-add-size: 100px;
    --iq-add-color1: #16ACB7;
    --iq-add-color2: #0091A5;
    display: block;
    width: var(--iq-add-size);
    height: var(--iq-add-size);
    max-width: 100%;
    border-radius: 50%;
    margin: auto;
    position: relative;
    background: linear-gradient(135deg, var(--iq-add-color1), var(--iq-add-color2));
    box-shadow: 0 6px 18px rgba(0,0,0,.16);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.iq-add-circle::before,
.iq-add-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: #fff;
    border-radius: 4px;
    transform: translate(-50%, -50%);
    transition: transform .3s ease;
}
.iq-add-circle::before { width: 44%; height: 11%; }
.iq-add-circle::after { width: 11%; height: 44%; }
a:hover > .iq-add-circle,
.iq-add-circle:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 26px rgba(0,0,0,.24);
}
@media (max-width: 575px) {
    .iq-add-circle { --iq-add-size: 72px; }
}

/* نسخهٔ فقط-علامت (بدون پس‌زمینهٔ دایره‌ای خودش) -- برای جاهایی که یک
   div بیرونی از قبل دایرهٔ رنگی (با رنگ اختصاصی هر فروشگاه) را می‌سازد
   و فقط باید علامت + جایگزین شود، بدون دایرهٔ تکراری. */
.iq-plus-mark {
    display: block;
    width: 46%;
    height: 46%;
    margin: 27% auto;
    position: relative;
    transition: transform .2s ease;
}
.iq-plus-mark::before,
.iq-plus-mark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: #fff;
    border-radius: 3px;
    transform: translate(-50%, -50%);
}
.iq-plus-mark::before { width: 100%; height: 24%; }
.iq-plus-mark::after { width: 24%; height: 100%; }
button:hover .iq-plus-mark,
a:hover .iq-plus-mark {
    transform: scale(1.12);
}