/* =====================================================
   Voltrixco.ir — CSS سفارشی حرفه‌ای
   رنگ‌ها: سبز #15853E | مشکی #161D2B | سفید #F8FAFC
   ===================================================== */

/* --- فونت فارسی --- */
@font-face {
  font-family: 'IRANSans';
  src: url('../fonts/IRANSans/IRANSansWeb(FaNum).woff') format('woff');
  font-weight: normal;
  font-display: swap;
}

/* --- متغیرهای پایه --- */
:root {
  --clr-green:       #15853E;
  --clr-green-dark:  #0e5e2b;
  --clr-green-light: rgba(21,133,62,.12);
  --clr-dark:        #161D2B;
  --clr-dark2:       #1e2940;
  --clr-white:       #F8FAFC;
  --clr-muted:       #64748B;
  --radius-sm:       6px;
  --radius-md:       10px;
  --radius-lg:       16px;
  --shadow-card:     0 2px 16px rgba(22,29,43,.08);
  --shadow-hover:    0 8px 32px rgba(21,133,62,.18);
  --transition:      all .22s cubic-bezier(.4,0,.2,1);
}

/* --- ریست و پایه --- */
* { box-sizing: border-box; }

body {
  font-family: 'IRANSans', 'Vazir', sans-serif !important;
  background-color: var(--clr-white) !important;
  color: var(--clr-dark) !important;
  direction: rtl;
}

/* =====================================================
   ۱. نوار اعلان بالا (Announcement Bar)
   ===================================================== */
.announcement-bar {
  background: linear-gradient(90deg, var(--clr-green-dark), var(--clr-green));
  color: var(--clr-white);
  text-align: center;
  font-size: 13px;
  padding: 8px 16px;
  letter-spacing: .3px;
}
.announcement-bar a { color: var(--clr-white); text-decoration: underline; }

/* =====================================================
   ۲. ناوبار (Navbar)
   ===================================================== */
.navbar,
header#header {
  background-color: #1d1c1e !important;
  border-bottom: 3px solid var(--clr-green) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.35) !important;
  transition: var(--transition);
}

.navbar-brand img,
.navbar-brand-logo { filter: brightness(1.1); }
.navbar-brand { color: var(--clr-white) !important; font-weight: 700; }

.navbar .nav-link {
  color: rgba(248,250,252,.82) !important;
  font-size: 14.5px;
  font-weight: 500;
  padding: 8px 14px !important;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  position: relative;
}
.navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px; right: 14px; left: 14px;
  height: 2px;
  background: var(--clr-green);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform .2s ease;
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after { transform: scaleX(1); }
.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--clr-white) !important;
  background: rgba(21,133,62,.15) !important;
}

/* دکمه‌های آیکون ناوبار */
.navbar .btn-ghost-secondary {
  color: rgba(248,250,252,.75) !important;
  border: none !important;
  transition: var(--transition);
}
.navbar .btn-ghost-secondary:hover {
  color: var(--clr-green) !important;
  background: rgba(21,133,62,.15) !important;
}

/* شمارنده سبد خرید */
.cart-item-count {
  background: var(--clr-green) !important;
  color: var(--clr-white) !important;
  border: 2px solid var(--clr-dark) !important;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* منوی کشویی */
.dropdown-menu {
  border: 1px solid rgba(21,133,62,.2) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 8px 24px rgba(22,29,43,.15) !important;
  padding: 6px !important;
}
.dropdown-item {
  border-radius: var(--radius-sm) !important;
  font-size: 14px;
  transition: var(--transition);
}
.dropdown-item:hover, .dropdown-item:focus {
  color: var(--clr-green) !important;
  background-color: var(--clr-green-light) !important;
}

/* =====================================================
   ۳. هیرو (Hero / Slider)
   ===================================================== */
.js-swiper-shop-classic-hero.swiper {
  --hero-header-offset: 88px;
  background: linear-gradient(135deg, #1d1c1e 0%, #2b292c 100%) !important;
  position: relative;
  overflow: hidden;
  /* هدر بالای سایت به‌صورت absolute روی هیرو قرار می‌گیره؛
     بدون این فاصله، قسمت بالای عکس زیر هدر پنهان می‌مونه */
  padding-top: var(--hero-header-offset);
}

/* فلش‌های قبلی/بعدی به‌صورت پیش‌فرض روی top:50% نسبت به کل
   ارتفاع container (یعنی padding-top هدر + عکس) قرار می‌گیرن،
   نه نسبت به خود عکس. توی دسکتاپ چون عکس خیلی بلنده این اختلاف
   ۴۴ پیکسلی حس نمیشه، ولی توی موبایل که عکس کوتاه‌تره فلش‌ها به‌جای
   وسط عکس، بالاتر (نزدیک/پشت هدر) می‌افتن. این قانون دقیقاً نصف
   همون فاصله (padding-top / 2) رو به فلش‌ها اضافه می‌کنه تا روی
   هر سایز صفحه‌ای دقیقاً وسط عکس بمونن. */
.js-swiper-shop-classic-hero .swiper-button-prev,
.js-swiper-shop-classic-hero .swiper-button-next {
  top: calc(50% + (var(--hero-header-offset) / 2));
}

/* پترن صنعتی روی هیرو */
.js-swiper-shop-classic-hero.swiper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(21,133,62,.06) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
  z-index: 0;
}

.swiper-slide { position: relative; z-index: 1; }

/* === تغییر جدید: محدود کردن ارتفاع تصویر اصلی اسلایدر ===
   قبلاً این محدودیت فقط برای موبایل تعریف شده بود، برای همین توی
   دسکتاپ و تبلت عکس با سایز واقعی آپلودی (که معمولاً خیلی بزرگه)
   نمایش داده می‌شد و کل صفحه رو می‌گرفت. */
.js-swiper-shop-classic-hero img.rounded-3 {
  width: 100%;
  height: auto;
  max-height: 650px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: 12px;
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  .js-swiper-shop-classic-hero img.rounded-3 {
    max-height: 500px;
  }
}
/* === پایان تغییر جدید === */

/* رنگ متن هیرو برای پس‌زمینه تاریک */
.js-swiper-shop-classic-hero .display-4,
.js-swiper-shop-classic-hero h1,
.js-swiper-shop-classic-hero h2,
.js-swiper-shop-classic-hero h3 {
  color: var(--clr-white) !important;
  font-weight: 800;
  line-height: 1.25;
}
.js-swiper-shop-classic-hero p {
  color: rgba(248,250,252,.72) !important;
  font-size: 15px;
  line-height: 1.8;
}

/* خط سبز زیر عنوان هیرو */
.js-swiper-shop-classic-hero .display-4::after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  background: var(--clr-green);
  border-radius: 2px;
  margin-top: 12px;
}

/* دکمه‌های هیرو */
.js-swiper-shop-classic-hero .btn-primary {
  background: var(--clr-green) !important;
  border-color: var(--clr-green) !important;
  color: var(--clr-white) !important;
  font-weight: 600;
  padding: 12px 28px;
  font-size: 15px;
  box-shadow: 0 4px 16px rgba(21,133,62,.4) !important;
  transition: var(--transition);
}
.js-swiper-shop-classic-hero .btn-primary:hover {
  background: var(--clr-green-dark) !important;
  border-color: var(--clr-green-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(21,133,62,.5) !important;
}

/* فلش‌های اسلایدر */
.swiper-button-prev, .swiper-button-next {
  color: var(--clr-green) !important;
  background: rgba(22,29,43,.7) !important;
  width: 44px !important; height: 44px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(21,133,62,.4) !important;
  transition: var(--transition);
}
.swiper-button-prev:hover, .swiper-button-next:hover {
  background: var(--clr-green) !important;
  color: var(--clr-white) !important;
}
.swiper-button-prev::after, .swiper-button-next::after {
  font-size: 14px !important; font-weight: 900;
}
.swiper-pagination-bullet-active { background-color: var(--clr-green) !important; }

/* آواتارهای thumb اسلایدر */
.swiper-thumb-progress-avatar {
  border: 2px solid transparent;
  border-radius: 50%;
  transition: var(--transition);
}
.swiper-thumb-progress-avatar:hover { border-color: var(--clr-green); }

/* =====================================================
   ۴. بلوک‌های آیکون خدمات
   ===================================================== */
.border-bottom > .container .d-flex {
  background: var(--clr-white);
  padding: 20px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(21,133,62,.12);
  transition: var(--transition);
}
.border-bottom > .container .d-flex:hover {
  border-color: var(--clr-green);
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}
.border-bottom > .container .d-flex h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--clr-dark);
  margin-bottom: 4px;
}
.border-bottom > .container .d-flex p { font-size: 13px; color: var(--clr-muted); }

/* =====================================================
   ۵. کارت‌های دسته‌بندی
   ===================================================== */
.card {
  border-radius: var(--radius-md) !important;
  border: 1px solid rgba(22,29,43,.08) !important;
  box-shadow: var(--shadow-card) !important;
  transition: var(--transition) !important;
  overflow: hidden;
}
.card:hover {
  border-color: rgba(21,133,62,.35) !important;
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-4px);
}
.card-transition:hover {
  border-color: var(--clr-green) !important;
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover) !important;
}
.card-footer {
  background: var(--clr-white) !important;
  border-top: 1px solid rgba(21,133,62,.1) !important;
  padding: 16px !important;
}
.card-title { font-weight: 700 !important; color: var(--clr-dark) !important; }
.card-text.text-muted { color: var(--clr-muted) !important; font-size: 13px; }

/* =====================================================
   ۶. کارت محصول (Product Card)
   ===================================================== */
.card-pinned {
  position: relative;
}
.card-pinned .badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 20px;
}

/* قیمت */
.formatted-price,
.card .h5,
.product-price {
  font-weight: 800 !important;
  color: var(--clr-green) !important;
  font-size: 16px !important;
}

/* تصویر محصول */
.card img.card-img-top,
.card img.img-fluid {
  transition: transform .35s ease;
}
.card:hover img.card-img-top,
.card:hover img.img-fluid { transform: scale(1.04); }

/* =====================================================
   ۷. دکمه‌ها (Buttons)
   ===================================================== */
.btn-primary {
  background-color: var(--clr-green) !important;
  border-color: var(--clr-green) !important;
  color: var(--clr-white) !important;
  font-weight: 600;
  transition: var(--transition);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--clr-green-dark) !important;
  border-color: var(--clr-green-dark) !important;
  color: var(--clr-white) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(21,133,62,.35) !important;
}

.btn-outline-primary {
  color: var(--clr-green) !important;
  border-color: var(--clr-green) !important;
  font-weight: 600;
  transition: var(--transition);
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  background-color: var(--clr-green) !important;
  border-color: var(--clr-green) !important;
  color: var(--clr-white) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(21,133,62,.3) !important;
}

.btn-white {
  background: var(--clr-white) !important;
  color: var(--clr-dark) !important;
  border: 1px solid rgba(22,29,43,.12) !important;
}
.btn-white:hover {
  border-color: var(--clr-green) !important;
  color: var(--clr-green) !important;
}

/* =====================================================
   ۸. فرم‌ها (Forms)
   ===================================================== */
.form-control, .form-select {
  border-color: rgba(22,29,43,.15) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 14px;
  
  transition: var(--transition);
}
.form-control:focus, .form-select:focus {
  border-color: var(--clr-green) !important;
  box-shadow: 0 0 0 3px rgba(21,133,62,.15) !important;
}
.form-label { font-weight: 600; font-size: 14px; color: var(--clr-dark); }

/* Input Card (جستجو و خبرنامه) */
.input-card {
  border-radius: 50px !important;
  border-color: rgba(21,133,62,.2) !important;
  overflow: hidden;
}
.input-card .form-control {
  border: none !important;
  border-radius: 0 !important;
}
.input-card .btn { border-radius: 50px !important; }

/* =====================================================
   ۹. عنوان‌های بخش (Section Headings)
   ===================================================== */
.text-cap {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--clr-green) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--clr-dark);
}

/* خط دکوری زیر عنوان‌های بخش */
.section-title {
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 48px; height: 3px;
  background: var(--clr-green);
  border-radius: 2px;
}

/* =====================================================
   ۱۰. Breadcrumb
   ===================================================== */
.breadcrumb-item a {
  color: var(--clr-green) !important;
  font-size: 14px;
  text-decoration: none;
}
.breadcrumb-item.active { color: var(--clr-muted) !important; font-size: 14px; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--clr-muted) !important; }

/* =====================================================
   ۱۱. Badge / برچسب
   ===================================================== */
.badge.bg-primary { background-color: var(--clr-green) !important; }
.badge.bg-success { background-color: var(--clr-green) !important; }
.badge.bg-danger { background-color: #DC3545 !important; }

/* برچسب "جدید" */
.badge-new {
  background: var(--clr-green) !important;
  color: var(--clr-white) !important;
}
/* برچسب "تخفیف" */
.badge-sale {
  background: #DC3545 !important;
  color: var(--clr-white) !important;
}

/* =====================================================
   ۱۲. فیلتر کنار (Sidebar Filter)
   ===================================================== */
#navbarVerticalNavMenu h5 {
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-dark);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--clr-green-light);
}

/* =====================================================
   ۱۳. صفحه‌بندی (Pagination)
   ===================================================== */
.page-link {
  color: var(--clr-green) !important;
  border-color: rgba(21,133,62,.2) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 500;
  transition: var(--transition);
}
.page-link:hover {
  background: var(--clr-green-light) !important;
  border-color: var(--clr-green) !important;
}
.page-item.active .page-link {
  background-color: var(--clr-green) !important;
  border-color: var(--clr-green) !important;
  color: var(--clr-white) !important;
}

/* =====================================================
   ۱۴. Tab‌ها و Nav-pills
   ===================================================== */
.nav-tabs .nav-link { color: var(--clr-muted) !important; }
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  background-color: var(--clr-green) !important;
  border-color: var(--clr-green) !important;
  color: var(--clr-white) !important;
}
.nav-tabs .nav-link:hover { color: var(--clr-green) !important; }

/* =====================================================
   ۱۵. ستاره‌های امتیاز (Stars)
   ===================================================== */
.star-rating, .text-warning { color: #F59E0B !important; }

/* =====================================================
   ۱۶. کارت تخفیف ویژه (Promo Banner)
   ===================================================== */
.card.bg-img-start {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}
.card.bg-img-start .card-body {
  background: linear-gradient(to left, rgba(22,29,43,.75) 0%, transparent 60%);
  padding: 40px !important;
}

/* =====================================================
   ۱۷. فوتر (Footer)
   ===================================================== */
footer {
  background-color: #1d1c1e !important;
  color: rgba(248,250,252,.8) !important;
  border-top: 3px solid var(--clr-green) !important;
}
footer h5 {
  color: var(--clr-white) !important;
  font-weight: 700;
  font-size: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(21,133,62,.25);
  margin-bottom: 14px !important;
}
footer a {
  color: rgba(248,250,252,.65) !important;
  text-decoration: none;
  font-size: 13.5px;
  transition: var(--transition);
}
footer a:hover {
  color: var(--clr-green) !important;
  padding-right: 4px;
}
footer .text-muted { color: rgba(248,250,252,.4) !important; font-size: 12px; }

/* آیکون‌های شبکه اجتماعی فوتر */
footer .btn-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(21,133,62,.15);
  border: 1px solid rgba(21,133,62,.3);
  border-radius: 50%;
  color: rgba(248,250,252,.7) !important;
  font-size: 15px;
  transition: var(--transition);
}
footer .btn-icon:hover {
  background: var(--clr-green);
  border-color: var(--clr-green);
  color: var(--clr-white) !important;
  transform: translateY(-2px);
}

/* =====================================================
   ۱۸. اعلانات Toast
   ===================================================== */
.toastify {
  border-radius: var(--radius-md) !important;
  font-family: 'IRANSans', sans-serif !important;
  font-size: 14px;
}

/* =====================================================
   ۱۹. پیام‌های Django (Alert)
   ===================================================== */
.alert {
  border-radius: var(--radius-md) !important;
  border: none !important;
  font-size: 14px;
}
.alert-success {
  background: rgba(21,133,62,.12) !important;
  color: var(--clr-green-dark) !important;
  border-right: 4px solid var(--clr-green) !important;
}
.alert-danger {
  background: rgba(220,53,69,.1) !important;
  color: #A31e2b !important;
  border-right: 4px solid #DC3545 !important;
}

/* =====================================================
   ۲۰. صفحه جزئیات محصول
   ===================================================== */
.product-detail-title { font-size: 24px; font-weight: 800; color: var(--clr-dark); }
.product-detail-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--clr-green);
  direction: rtl;
}
.product-stock-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
}
.product-stock-badge.in-stock {
  background: rgba(21,133,62,.12);
  color: var(--clr-green-dark);
}
.product-stock-badge.out-stock {
  background: rgba(220,53,69,.1);
  color: #A31e2b;
}

/* =====================================================
   ۲۱. سبد خرید
   ===================================================== */
.cart-table th {
  font-size: 13px;
  font-weight: 700;
  color: var(--clr-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 2px solid rgba(21,133,62,.15) !important;
}
.cart-table td { vertical-align: middle; }
.cart-table .cart-product-title { font-weight: 600; font-size: 15px; }

/* =====================================================
   ۲۲. داشبورد کاربر
   ===================================================== */
.sidebar-nav .nav-link {
  color: var(--clr-dark) !important;
  font-size: 14px;
  border-radius: var(--radius-sm);
  padding: 10px 14px !important;
  margin-bottom: 3px;
  transition: var(--transition);
}
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active {
  background: var(--clr-green-light) !important;
  color: var(--clr-green) !important;
  font-weight: 600;
}
.sidebar-nav .nav-link i { margin-left: 8px; }

/* =====================================================
   ۲۳. لینک‌ها
   ===================================================== */
a { color: var(--clr-green); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--clr-green-dark); }
.text-primary { color: var(--clr-green) !important; }
.bg-primary { background-color: var(--clr-green) !important; }
.border-primary { border-color: var(--clr-green) !important; }
.avatar-soft-primary {
  background-color: rgba(21,133,62,.15) !important;
  color: var(--clr-green) !important;
}

/* =====================================================
   ۲۴. جدول‌ها
   ===================================================== */
.table th {
  font-weight: 700;
  font-size: 13px;
  color: var(--clr-muted);
  border-bottom: 2px solid rgba(21,133,62,.15) !important;
}
.table-hover tbody tr:hover td {
  background: rgba(21,133,62,.04) !important;
}

/* =====================================================
   ۲۵. بخش خبرنامه
   ===================================================== */
.bg-light {
  background-color: #EFF4F1 !important;
}

/* =====================================================
   ۲۶. ریسپانسیو موبایل
   ===================================================== */
@media (max-width: 991.98px) {
  .navbar .nav-link { padding: 10px 16px !important; }
  .navbar .nav-link::after { display: none; }
  .product-detail-price { font-size: 22px; }
  footer h5 { font-size: 14px; }

  /* منوی موبایل: پس‌زمینه‌ی روشن (سفید) پیش‌فرض باعث می‌شد متن روشن منو دیده نشه؛
     پس‌زمینه رو تیره ثابت می‌کنیم تا با رنگ متن هماهنگ بمونه */
  #navbarNavDropdown.navbar-collapse {
    background-color: #1d1c1e !important;
    border-radius: 12px;
    padding: 12px;
    margin-top: 8px;
  }
  #navbarNavDropdown .dropdown-menu {
    background-color: #2b292c;
    border: none;
  }
  #navbarNavDropdown .dropdown-item {
    color: rgba(248,250,252,.82);
  }
  #navbarNavDropdown .dropdown-item:hover,
  #navbarNavDropdown .dropdown-item:focus {
    background-color: rgba(21,133,62,.15);
    color: #fff;
  }

  /* =====================================================
     اسلایدر هیرو در موبایل — بازطراحی کامل
     ترتیب: عکس (کوچک و مرتب) -> برچسب -> عنوان -> توضیح کوتاه -> دکمه
     ===================================================== */

  /* نوار کوچیک تصاویر بندانگشتی پایین اسلایدر که روی موبایل با محتوا قاطی می‌شد، مخفی می‌شود */
  .js-swiper-shop-hero-thumbs {
    display: none !important;
  }

  .js-swiper-shop-classic-hero .swiper-slide .container {
    /* هدر با position:absolute روی محتوا شناوره؛ این فاصله باعث می‌شه اسلایدر
       زیر هدر شروع بشه، نه پشت/زیرش پنهان بمونه */
    padding-top: 5.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  /* اورراید مستقیم‌تر و قوی‌تر روی همون کلاس دقیقی که توی HTML هست
     (content-space-t-3) — برای اطمینان از برد در رقابت با قانون قالب */
  .js-swiper-shop-classic-hero .content-space-t-3 {
    padding-top: 5.5rem !important;
  }

  /* توجه: padding-top خود اسلایدر دیگه اینجا هارد-کد نمی‌شه؛
     مقدارش از روی متغیر --hero-header-offset (که با جاوااسکریپت
     برابر با ارتفاع واقعی هدر تنظیم می‌شه) در قانون اصلی
     .js-swiper-shop-classic-hero.swiper گرفته می‌شه، چون ارتفاع
     هدر توی موبایل با دسکتاپ فرق داره و یه مقدار ثابت باعث
     می‌شد یه نوار خالی بالای عکس بمونه. */

  .js-swiper-shop-classic-hero .row {
    display: flex;
    flex-direction: column;
  }

  /* عکس بالا، فشرده و مرتب */
  .js-swiper-shop-classic-hero .col-lg-6.order-lg-1 {
    order: 1;
    margin-bottom: 1.25rem;
  }
  .js-swiper-shop-classic-hero img.rounded-3 {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: 12px;
  }

  /* متن پایین عکس */
  .js-swiper-shop-classic-hero .col-lg-5.order-lg-2 {
    order: 2;
    text-align: center;
  }
  .js-swiper-shop-classic-hero .voltrix-hero-tag {
    font-size: .7rem;
    padding: 3px 10px;
    margin-bottom: .5rem;
    display: inline-block;
  }
  .js-swiper-shop-classic-hero .display-4 {
    font-size: 1.35rem !important;
    line-height: 1.5;
    margin-bottom: .5rem;
  }
  /* خط تزئینی زیر عنوان که در فضای کم موبایل فقط شلوغی اضافه می‌کرد */
  .js-swiper-shop-classic-hero .voltrix-hero-line {
    display: none;
  }
  .js-swiper-shop-classic-hero p.text-white-50 {
    font-size: .85rem;
    margin-bottom: 1rem;
    /* توضیح طولانی به ۳ خط محدود می‌شود تا اسلایدر بیش‌ازحد کشیده نشود */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .js-swiper-shop-classic-hero .btn {
    display: inline-block;
    width: auto;
    padding: 10px 32px !important;
  }
}

/* =====================================================
   ۲۷. اسکرول‌بار سفارشی
   ===================================================== */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--clr-white); }
::-webkit-scrollbar-thumb {
  background: rgba(21,133,62,.35);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--clr-green); }

.formatted-price {
    font-weight: bold;
}
/* ===== نوار اعلان بالای فوتر ===== */
.vx-ann-bar {
  background: linear-gradient(90deg, #0e5e2b, #15853E);
  color: #F8FAFC;
  font-size: 13px;
  padding: 10px 16px;
}
.vx-ann-bar a { color: #F8FAFC; text-decoration: underline; }

/* ===== لوگو فوتر ===== */
.vx-footer-logo { display: flex; align-items: center; gap: 12px; }
.vx-logo-icon-wrap {
  width: 44px; height: 44px;
  background: #15853E;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #F8FAFC; flex-shrink: 0;
}
.vx-logo-name { font-size: 16px; font-weight: 800; color: #F8FAFC; }
.vx-logo-name span { color: #15853E; }
.vx-logo-sub { font-size: 11px; color: rgba(248,250,252,.35); letter-spacing:.5px; margin-top:2px; }
.vx-about-text { font-size: 12.5px; color: rgba(248,250,252,.52); line-height: 1.85; margin-bottom: 18px; }

/* ===== شبکه‌های اجتماعی ===== */
.vx-socials { display: flex; gap: 8px; }
.vx-soc-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(21,133,62,.14); border: 1px solid rgba(21,133,62,.3);
  display: flex; align-items: center; justify-content: center;
  color: rgba(248,250,252,.65); font-size: 15px; text-decoration: none;
  transition: all .2s;
}
.vx-soc-btn:hover { background: #15853E; border-color: #15853E; color: #F8FAFC; transform: translateY(-2px); }

/* ===== عناوین ستون‌های فوتر ===== */
.vx-footer-heading {
  font-size: 13.5px !important; font-weight: 700 !important;
  color: #F8FAFC !important; margin-bottom: 14px !important;
  padding-bottom: 10px !important; border-bottom: 1px solid rgba(21,133,62,.2) !important;
  position: relative;
}
.vx-footer-heading::after {
  content: ''; position: absolute; bottom: -1px; right: 0;
  width: 32px; height: 2px; background: #15853E; border-radius: 2px;
}

/* ===== لینک‌های فوتر ===== */
.vx-footer-links { list-style: none; padding: 0; margin: 0; }
.vx-footer-links li { margin-bottom: 9px; }
.vx-footer-links a { font-size: 13px; color: rgba(248,250,252,.58); text-decoration: none; transition: all .18s; }
.vx-footer-links a:hover { color: #15853E; padding-right: 4px; }

/* ===== اطلاعات تماس ===== */
.vx-contact-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.vx-contact-icon {
  width: 32px; height: 32px; background: rgba(21,133,62,.15);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #15853E; flex-shrink: 0; margin-top: 2px;
}
.vx-contact-label { font-size: 10.5px; font-weight: 700; color: rgba(248,250,252,.35); text-transform: uppercase; letter-spacing:.5px; display: block; }
.vx-contact-value { font-size: 13px; color: rgba(248,250,252,.7); line-height: 1.6; text-decoration: none; }
a.vx-contact-value:hover { color: #15853E; }

/* ===== نوار پایین فوتر ===== */
.vx-footer-bottom { background: rgba(0,0,0,.25); border-top: 1px solid rgba(248,250,252,.06); padding: 14px 0; }
.vx-copyright { font-size: 12px; color: rgba(248,250,252,.3); }
.vx-trust-badges { display: flex; gap: 8px; }
.vx-trust-badge {
  display: flex; align-items: center; gap: 5px;
  background: rgba(248,250,252,.05); border: 1px solid rgba(248,250,252,.1);
  border-radius: 6px; padding: 5px 10px; font-size: 11px; color: rgba(248,250,252,.35);
}
.vx-trust-badge i { font-size: 13px; color: #15853E; }
.vx-footer-bottom-link { font-size: 12px; color: rgba(248,250,252,.3); text-decoration: none; }
.vx-footer-bottom-link:hover { color: #15853E; }

@media (max-width: 768px) {
  .vx-trust-badges { display: none; }
}
.vx-ann-bar {
  background: linear-gradient(90deg, #0e5e2b, #15853E);
  color: #F8FAFC;
  font-size: 13px;
  padding: 10px 16px;
}
.vx-ann-bar a { color: #F8FAFC; text-decoration: underline; }


.formatted-price {
}

.star-rate{
    color:gold;
}


/* =====================================================================
   پنل ادمین: چیدمان فشرده (فقط برای صفحات داشبورد ادمین - body.admin-dash)
   هدف: حذف فضای خالی اضافه (هدر بزرگ/فوتر سایت) تا لیست تیکت‌ها،
   سفارشات و درخواست‌های نمایندگی تا حد امکان بدون اسکرول دیده شوند.
===================================================================== */

/* کاهش پدینگ عمودی اضافه‌ی main و بخش breadcrumb تیره‌ی بالای صفحه
   نکته: padding-top عمداً دست‌نخورده می‌ماند (همان مقدار پیش‌فرض تم) چون
   هدر با navbar-absolute-top روی محتوا شناور است و این مقدار دقیقاً برای
   هم‌ارتفاع شدن با هدر تنظیم شده؛ کم کردنش باعث می‌شود عنوان «داشبورد» و
   breadcrumb (در هر سایز صفحه‌ای، موبایل یا دسکتاپ) زیر هدر پنهان شوند. */
.admin-dash #content.content-space-2 {
  padding-bottom: 1rem !important;
}
@media (min-width: 992px) {
  .admin-dash #content .container.mt-lg-n10 {
    margin-top: -0.5rem !important;
    padding-top: 0 !important;
    padding-bottom: 0.75rem !important;
  }
}

.admin-dash #content > div.navbar-dark.bg-dark > .container {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}
.admin-dash #content > div.navbar-dark.bg-dark h1.h2 {
  font-size: 1.3rem;
  margin-bottom: 0;
}

/* فوتر مینیمال پنل ادمین به‌جای فوتر کامل سایت */
.admin-dash-footer {
  border-top: 1px solid #e7eaf3;
  padding: 12px 0;
  background: #fff;
}
.admin-dash-footer .vx-copyright { font-size: 12px; color: #77838f; }
.admin-dash-footer-link { font-size: 12px; color: #15853E; text-decoration: none; }
.admin-dash-footer-link:hover { text-decoration: underline; }

/* جدول فشرده برای لیست‌های ادمین (تیکت‌ها / سفارشات / نمایندگی‌ها) */
.table-compact > :not(caption) > * > * {
  padding: 0.55rem 0.65rem !important;
  font-size: 0.85rem;
  vertical-align: middle;
}
.table-compact .cell-title { line-height: 1.35; }
.table-compact .cell-sub { font-size: 0.72rem; line-height: 1.3; }
.table-compact .badge { font-size: 0.68rem; padding: 0.32em 0.55em; }