/* ======================================================================
   سیستم رنگ و طراحی یکپارچه سایت
   (نسخه ۱۲: Design System سرمه‌ای + نارنجی (منبع نهایی: design-system.css))
   ----------------------------------------------------------------------
   همه رنگ‌های سایت از اینجا می‌آیند. برای تغییر رنگ کل سایت کافی است
   فقط مقادیر همین بخش :root را عوض کنید.

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

:root {
    --navy-50:#F4F7FB; --navy-100:#E7EEF6; --navy-200:#C9D6E8; --navy-300:#9BB3D0;
    --navy-400:#6483AB; --navy-500:#3A5A84; --navy-600:#243E64; --navy-700:#173052;
    --navy-800:#10243F; --navy-900:#0B1A30; --navy-950:#07111F;
    --orange-50:#FFF7F1; --orange-100:#FFEDDE; --orange-200:#FFD7B8; --orange-300:#F8B784;
    --orange-400:#F3924A; --orange-500:#E36F1E; --orange-600:#C65610; --orange-700:#9C430E;
    --orange-800:#7A350F; --orange-900:#5C2910;
    --color-primary:#10243F; --color-primary-hover:#173052; --color-primary-dark:#07111F;
    --color-accent:#E36F1E; --color-accent-hover:#C65610; --color-accent-dark:#9C430E;
    --color-background:#F6F7FA; --color-surface:#fff; --color-surface-elevated:#fff;
    --color-text-primary:#122033; --color-text-secondary:#4C5B70; --color-text-muted:#7B879C;
    --color-border:#E4E9F0; --color-divider:#EEF1F6;
    --az-primary-50:#F4F7FB; --az-primary-100:#E7EEF6; --az-primary-200:#C9D6E8;
    --az-primary-300:#9BB3D0; --az-primary-400:#6483AB; --az-primary-500:#173052;
    --az-primary:#10243F; --az-primary-700:#0B1A30; --az-primary-800:#0B1A30; --az-primary-900:#07111F;
    --az-primary-2:#173052; --az-primary-rgb:16 36 63;
    --az-accent:#E36F1E; --az-accent-2:#C65610; --az-accent-soft:#FFF7F1; --az-accent-rgb:227 111 30;
    --az-success:#0F9F6E; --az-success-soft:#E8F7F1;
    --az-warning:#E36F1E; --az-warning-soft:#FFF7F1;
    --az-danger:#D4264A; --az-danger-soft:#FDECEF;
    --az-ink:#122033; --az-text:#1C2A3D; --az-muted:#4C5B70; --az-subtle:#7B879C;
    --az-border:#E4E9F0; --az-line:#EEF1F6; --az-surface:#ffffff; --az-bg:#F6F7FA; --az-soft:#F4F7FB;
    --az-grad:linear-gradient(160deg,#0B1A30 0%,#10243F 62%,#173052 100%);
    --az-grad-soft:linear-gradient(180deg,#fff 0%,#F4F7FB 100%);
    --az-grad-accent:linear-gradient(135deg,#E36F1E,#C65610);
    --az-grad-dark:linear-gradient(165deg,#07111F,#0B1A30);
}

/* فروشگاه (متغیرهایش روی .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, #062c78); font-weight: 800; white-space: nowrap; }