/* public/assets/css/base.css */
:root{
  --radius: 1.25rem;
  --shadow-soft: 0 8px 24px rgba(0,0,0,.08);
}
*{ box-sizing: border-box }
body{
  font-family: "Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans Arabic", sans-serif;
  line-height: 1.75;
}
.navbar-brand{ letter-spacing:.2px }
.fancy-title{
  background: linear-gradient(90deg, var(--grad-1), var(--grad-2));
  -webkit-background-clip:text; background-clip:text; color:transparent
}
.card, .alert{ border-radius: var(--radius) }
.card-link{ text-decoration: none; border:1px solid rgba(0,0,0,.06); transition:transform .15s ease, box-shadow .15s ease }
.hover-lift:hover{ transform: translateY(-4px); box-shadow: var(--shadow-soft) }
.badge{ border-radius:.75rem }
.hero-box{ background:#fff }
.shadow-soft{ box-shadow: var(--shadow-soft) }
footer{ background:#fff }
/* قبلی‌ها را حذف/جایگزین کن */

/* --- Product cards --- */
/* پوستر داخل کارت: کل تصویر دیده شود، بدون کراپ */
.product-poster{
  width: 100%;
  height: auto !important;    /* ارتفاع طبیعی تصویر */
  aspect-ratio: auto;         /* نسبت اجباری برداشته شود */
  object-fit: contain;        /* تصویر کامل نمایش داده شود */
  display: block;
  background: #f8f9fa;        /* پس‌زمینه‌ی خنثی برای letterbox */
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
/* پدینگ برای تصویر بالای کارت */
.card .product-poster{
  display:block;
  width:100%;
  height:auto !important;

  /* مقدار پدینگ رو به سلیقه‌ت عوض کن: .5rem ≈ 8px */
  padding:.5rem;

  background: var(--surface, #fff);

  /* گوشه‌ها با شعاع کارت هماهنگ بشن (شعاع کارت - مقدار پدینگ) */
  border-top-left-radius: calc(var(--radius) - .5rem);
  border-top-right-radius: calc(var(--radius) - .5rem);
}

/* بهتره کارت overflow-hidden باشه تا چیزی بیرون نزنه (اگه قبلاً نزاشتی) */
.hover-lift.card,
.card.hover-lift { overflow:hidden; }


/* تصویر هِرو در صفحهٔ جزئیات: کامل، با سقف ارتفاع برای اسکرول نشدن صفحه */
.product-hero{
  width: 100%;
  height: auto !important;
  max-height: 70vh;           /* بیشینه ارتفاع تا 70٪ ارتفاع صفحه */
  object-fit: contain;        /* کامل نشان بده */
  background: #f8f9fa;
}
/* تصاویر اصلی گالری: کامل و واکنش‌گرا */
.product-ss{
  width:100%;
  height:auto !important;
  max-height:70vh;
  object-fit:contain;       /* کامل دیده شود */
  background:#f8f9fa;       /* پس‌زمینه‌ی خنثی برای letterbox */
}

/* بندانگشتی‌ها */
.thumb-btn{
  display:block;
  width:100%;
  padding:2px;
  border:2px solid transparent;
  border-radius:.75rem;
  background:transparent;
}
.thumb-btn.active{ border-color: var(--primary); }
.product-thumb{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;         /* برای یکدست شدن بندانگشتی */
  border-radius:.5rem;
}

/* اگر Midnight تیره است و back خاکستری نمی‌خوای: */
.theme-midnight .product-ss{ background:#0f172a; }
/* Navbar theming (قبلاً هم داشتی) */
.navbar {
  background-color: var(--nav-bg, #fff) !important;
  color: var(--nav-fg, #111) !important;
  border-bottom: 1px solid var(--nav-border, rgba(0,0,0,.06));
}
 
/* پل به متغیر بوت‌استرپ: کاری می‌کنیم خود Bootstrap از رنگ ما استفاده کند */
.navbar.bg-body-tertiary{
  --bs-tertiary-bg-rgb: var(--nav-bg-rgb, 255,255,255) !important;
}
/* Navbar theming */
/* Navbar skinned by theme variables */
.navbar {
  background: var(--nav-bg, #fff) !important;   /* از background استفاده کن تا گرادیان هم بشه */
  color: var(--nav-fg, #111) !important;
  border-bottom: 1px solid var(--nav-border, rgba(0,0,0,.06));
}
.navbar .navbar-brand,
.navbar .nav-link { color: var(--nav-fg, #111) !important; opacity: .95; }
.navbar .nav-link:hover { opacity: 1; }

/* هر تم، مقادیر منوی متفاوت (واضح) داشته باشد */
body.theme-ocean   { --nav-bg:#eaf5ff; --nav-fg:#0b2239; --nav-border:#cfe8ff; }
body.theme-forest  { --nav-bg:#eafaf0; --nav-fg:#0d2415; --nav-border:#cfeedd; }
body.theme-sunset  { --nav-bg:#fff3eb; --nav-fg:#3a1710; --nav-border:#ffd9c9; }
body.theme-pastel  { --nav-bg:#f8f1ff; --nav-fg:#372b4c; --nav-border:#e4d6ff; }
body.theme-midnight{ --nav-bg:#0f172a; --nav-fg:#e5e7eb; --nav-border:#1f2937; }

/* همبرگر روشن در تم تیره */
.theme-midnight .navbar .navbar-toggler { border-color: rgba(255,255,255,.25); }
.theme-midnight .navbar .navbar-toggler-icon{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" fill="%23ffffff"><path d="M4 7h22M4 15h22M4 23h22"/></svg>');
}

/* نوار گرادیانی زیر منو */
.navbar { position: relative; } /* حتماً باشد */
.navbar.has-accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--nav-accent-h, 4px);      /* ضخامت نوار */
  background: linear-gradient(90deg, var(--grad-1), var(--grad-2));
  pointer-events: none;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
/* تمایز ضخامت برای موبایل/دسکتاپ (اختیاری) */
@media (min-width: 992px){
  .navbar.has-accent { --nav-accent-h: 2px; }
}