/* ======================================================================
   Anzan — سیستم رنگ و طراحی یکپارچه سایت
   ----------------------------------------------------------------------
   همه رنگ‌های سایت از اینجا می‌آیند. برای تغییر رنگ کل سایت کافی است
   فقط مقادیر همین بخش :root را عوض کنید.

   این فایل از داخل هدر (site/header.blade.php) لود می‌شود، پس روی همه‌ی
   صفحاتی که هدر دارند اعمال می‌شود و بعد از CSS قالب قرار می‌گیرد.
   ====================================================================== */

:root {
    /* ---------- رنگ اصلی (آبی سلطنتی مدرن) ---------- */
    --az-primary-50:  #f2f6ff;
    --az-primary-100: #e5edff;
    --az-primary-200: #c9d9ff;
    --az-primary-300: #9dbaff;
    --az-primary-400: #6b95ff;
    --az-primary-500: #3d72ff;
    --az-primary:     #1454d6;   /* ۶۰۰ — رنگ اصلی دکمه‌ها و لینک‌ها */
    --az-primary-700: #0f40a8;
    --az-primary-800: #0c3180;
    --az-primary-900: #0a2358;
    --az-primary-2:   #2f6bff;   /* جفت گرادیان */
    --az-primary-rgb: 20 84 214;

    /* ---------- رنگ تأکیدی (تخفیف، فراخوان، نشان‌ها) ---------- */
    --az-accent:      #ff5a36;
    --az-accent-2:    #ff8a3d;
    --az-accent-soft: #fff1ec;
    --az-accent-rgb:  255 90 54;

    /* ---------- وضعیت‌ها ---------- */
    --az-success:      #12a150;
    --az-success-soft: #e7f8ee;
    --az-warning:      #f59e0b;
    --az-warning-soft: #fff7e6;
    --az-danger:       #e11d48;
    --az-danger-soft:  #ffeef2;

    /* ---------- خنثی‌ها (خاکستری با ته‌رنگ آبی) ---------- */
    --az-ink:     #0b1324;
    --az-text:    #1f2a44;
    --az-muted:   #5e6b85;
    --az-subtle:  #94a0b8;
    --az-border:  #e4e9f2;
    --az-line:    #eef2f8;
    --az-surface: #ffffff;
    --az-bg:      #f5f7fb;
    --az-soft:    #eef3fb;

    /* ---------- گرادیان‌های امضایی ---------- */
    --az-grad:        linear-gradient(135deg, #0a2358 0%, #1454d6 55%, #2f6bff 100%);
    --az-grad-soft:   linear-gradient(135deg, #f2f6ff 0%, #e5edff 100%);
    --az-grad-accent: linear-gradient(135deg, #ff5a36 0%, #ff8a3d 100%);
    --az-grad-dark:   linear-gradient(135deg, #070d1a 0%, #0b1324 50%, #1b2a4a 100%);

    /* ---------- گوشه‌ها و سایه‌ها ---------- */
    --az-radius-sm: 12px;
    --az-radius:    18px;
    --az-radius-lg: 24px;
    --az-radius-xl: 32px;
    --az-shadow-sm: 0 6px 16px -10px rgb(11 19 36 / .35);
    --az-shadow:    0 18px 44px -26px rgb(var(--az-primary-rgb) / .45);
    --az-shadow-lg: 0 34px 80px -40px rgb(var(--az-primary-rgb) / .55);
    --az-ring:      0 0 0 4px rgb(var(--az-primary-rgb) / .14);

    /* ================================================================
       نگاشت متغیرهای بخش‌های مختلف به همین توکن‌ها
       ================================================================ */

    /* صفحه اصلی و بخش‌های مشترک */
    --hm-primary:   var(--az-primary);
    --hm-primary-2: var(--az-primary-2);
    --hm-accent:    var(--az-accent);
    --hm-ink:       var(--az-ink);
    --hm-muted:     var(--az-muted);
    --hm-surface:   var(--az-surface);
    --hm-bg:        var(--az-bg);
    --hm-border:    var(--az-border);
    --hm-radius:    var(--az-radius-lg);
    --hm-shadow:    var(--az-shadow);
    --hm-shadow-lg: var(--az-shadow-lg);

    /* هدر */
    --sh-primary:   var(--az-primary);
    --sh-primary-2: var(--az-primary-2);
    --sh-ink:       var(--az-ink);
    --sh-muted:     var(--az-muted);
    --sh-border:    var(--az-border);
    --sh-soft:      var(--az-soft);

    /* Bootstrap / قالب پایه — برای صفحات قدیمی (سبد، تسویه، حساب کاربری، وبلاگ) */
    --bs-primary:      #1454d6;
    --bs-primary-rgb:  20, 84, 214;
    --bs-link-color:   #1454d6;
    --bs-link-hover-color: #0f40a8;
    --bs-body-color:   #1f2a44;
    --bs-border-color: #e4e9f2;
}

/* فروشگاه (متغیرهایش روی .pf تعریف شده‌اند) */
.pf {
    --pf-primary:   var(--az-primary);
    --pf-primary-2: var(--az-primary-2);
    --pf-ink:       var(--az-ink);
    --pf-muted:     var(--az-muted);
    --pf-border:    var(--az-border);
    --pf-surface:   var(--az-surface);
    --pf-bg:        var(--az-bg);
    --pf-shadow:    var(--az-shadow);
    --pf-shadow-lg: var(--az-shadow-lg);
}

/* ======================================================================
   پایه
   ====================================================================== */
body { background-color: var(--az-bg); color: var(--az-text); }

::selection { background: rgb(var(--az-primary-rgb) / .16); color: var(--az-ink); }

:focus-visible { outline: 2px solid var(--az-primary); outline-offset: 2px; }

html { scrollbar-color: #c6d1e3 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c6d1e3; border-radius: 99px; border: 3px solid var(--az-bg); }
::-webkit-scrollbar-thumb:hover { background: #a6b4cc; }

/* ======================================================================
   یکسان‌سازی اجزای قالب قدیمی با رنگ‌های جدید
   (صفحاتی که هنوز بازنویسی نشده‌اند هم هماهنگ شوند)
   ====================================================================== */
a { color: var(--az-primary); }
a:hover { color: var(--az-primary-700); }

.text-primary { color: var(--az-primary) !important; }
.bg-primary   { background-color: var(--az-primary) !important; }
.border-primary { border-color: var(--az-primary) !important; }
.text-accent  { color: var(--az-accent) !important; }
.bg-accent    { background-color: var(--az-accent) !important; }

.btn-primary,
.btn-primary:disabled {
    background: var(--az-primary); border-color: var(--az-primary); color: #fff;
    box-shadow: 0 12px 24px -16px rgb(var(--az-primary-rgb) / .9);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
    background: var(--az-primary-700) !important; border-color: var(--az-primary-700) !important; color: #fff !important;
}
.btn-outline-primary { color: var(--az-primary); border-color: var(--az-primary); }
.btn-outline-primary:hover, .btn-outline-primary:active { background: var(--az-primary); border-color: var(--az-primary); color: #fff; }

.btn-accent, .btn-danger.btn-accent {
    background: var(--az-grad-accent); border: 0; color: #fff;
}
.btn-accent:hover { filter: brightness(1.05); color: #fff; }

.btn { border-radius: var(--az-radius-sm); }

.badge.bg-primary { background: var(--az-primary) !important; }
.badge.bg-danger, .badge.bg-accent { background: var(--az-accent) !important; }
.badge.bg-success { background: var(--az-success) !important; }

.form-control:focus, .form-select:focus {
    border-color: var(--az-primary); box-shadow: var(--az-ring);
}
.form-check-input:checked { background-color: var(--az-primary); border-color: var(--az-primary); }
.form-check-input:focus { box-shadow: var(--az-ring); border-color: var(--az-primary-300); }

.page-item.active .page-link,
.pagination .active > .page-link {
    background: var(--az-primary) !important; border-color: var(--az-primary) !important; color: #fff !important;
}
.page-link { color: var(--az-primary); border-radius: 10px !important; margin: 0 2px; }
.page-link:hover { color: var(--az-primary-700); background: var(--az-primary-50); }

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: var(--az-primary) !important; border-color: var(--az-primary) !important;
}

.progress-bar { background-color: var(--az-primary); }

.alert-primary { background: var(--az-primary-50); border-color: var(--az-primary-200); color: var(--az-primary-800); }

/* سربرگ صفحات داخلی قالب قدیمی (فیروزه‌ای/سرمه‌ای‌های مختلف → گرادیان برند) */
.page-title-overlap,
.page-title-overlap.bg-dark,
.page-title-overlap.bg-dark.pt-4 {
    background: var(--az-grad) !important;
}

/* کارت‌ها و جداکننده‌ها */
.card { border-color: var(--az-border); border-radius: var(--az-radius); }
.dropdown-menu { border-color: var(--az-border); border-radius: var(--az-radius); box-shadow: var(--az-shadow); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--az-soft); color: var(--az-primary); }
hr { border-color: var(--az-line); opacity: 1; }

/* قیمت‌ها در کارت‌های قدیمی قالب پایه */
.product-price .text-accent, .product-card .text-accent { color: var(--az-primary) !important; }

/* ======================================================================
   جلوگیری از «پرش چیدمان» (CLS) — نسخه ۵.۹
   تصویرها صفت width/height می‌گیرند تا مرورگر جای آن‌ها را از قبل نگه دارد،
   و این قانون باعث می‌شود همان صفت‌ها اندازه واقعی نمایش را خراب نکنند.
   ====================================================================== */
:where(img[width][height]) { max-width: 100%; height: auto; }
/* نکته مهم: این قانون باید داخل :where() بماند.
   بدون آن، «img[width][height]» (دو انتخابگر صفت) از «.sh-logo img» (یک کلاس)
   قوی‌تر است و اندازه‌ای که در CSS خود قالب برای لوگو و بقیه تصویرها تعیین
   شده را بی‌اثر می‌کند — نتیجه‌اش این بود که لوگو در اندازه اصلی و غول‌آسا
   روی هدر و فوتر می‌افتاد. :where() وزن این قانون را صفر می‌کند، پس فقط
   وقتی اثر دارد که هیچ قانون دیگری اندازه نداده باشد. */
.hm-card__media img, .pd-gallery img, .sh-xm__thumb img, .sh-tree__thumb img,
.hm-story__ring img, .hm-brand img, .pg-item__img img, .np-drop img {
    width: 100%; height: 100%;
}

/* «تماس بگیرید» در جدول لیست قیمت */
.pricebox .now--call { color: var(--az-primary, #1454d6); font-weight: 800; white-space: nowrap; }