/* Alia Boutique — main stylesheet
   Theme: white / gray / gold / sky-blue | Font: Vazirmatn | Mobile-first, lightweight, no framework */

/* Vazirmatn, self-hosted from assets/fonts/ — no external Google Fonts
   request at all anymore (used to cost its own DNS+TLS round trip to a
   separate domain on every first visit). Only the 4 weights actually used
   sitewide (400/500/600/700) are included, each a small static .woff2
   (rather than the full variable-font file, which would be needlessly
   larger for a site that only ever uses these 4 weights). */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Lalezar — a single-weight display font, self-hosted the same way as
   Vazirmatn. Admin can switch the whole site to it from Settings → ظاهر. */
@font-face {
  font-family: 'Lalezar';
  src: url('../fonts/Lalezar-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand: #3AA6D9;
  --brand-dark: #2C86B3;
  --brand-light: #EAF6FC;
  --gold: #C9A227;
  --gold-light: #FBF3DD;
  --ink: #2B2E33;
  --muted: #7A8089;
  --bg: #ffffff;
  --bg-soft: #F7F8FA;
  --surface: #ffffff;
  --surface-rgb: 255, 255, 255;
  --border: #E7E9EC;
  --danger: #d92d20;
  --success: #12805c;
  --radius: 14px;
  --shadow: 0 4px 20px rgba(58, 166, 217, 0.10);
  --max-width: 1200px;
}

/* =========================================================================
   THEMES — switched via data-theme="..." on <html>, set from site settings.
   Everything below is only variable overrides; every component already
   reads colors through these variables, so all themes share one component
   library and stay fully compatible with each other. "classic" (above) is
   the original default and needs no override block.
   ========================================================================= */

/* Skyfall — black & gold, cinematic dark luxury (inspired by the Bond title sequence) */
[data-theme="skyfall"] {
  --brand: #C9A227;
  --brand-dark: #a3811c;
  --brand-light: rgba(201, 162, 39, 0.14);
  --ink: #f1ede1;
  --muted: #a39b86;
  --bg: #0a0a0c;
  --bg-soft: #131316;
  --surface: #18181c;
  --surface-rgb: 24, 24, 28;
  --border: #2b2b31;
  --danger: #e5484d;
  --success: #2dd4a7;
  --shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
}

/* Midnight — deep navy & gold, a softer luxury alternative to Skyfall */
[data-theme="midnight"] {
  --brand: #C9A227;
  --brand-dark: #a3811c;
  --brand-light: rgba(201, 162, 39, 0.14);
  --ink: #eef1f6;
  --muted: #9aa5b8;
  --bg: #0d1526;
  --bg-soft: #14203a;
  --surface: #172644;
  --surface-rgb: 23, 38, 68;
  --border: #263355;
  --danger: #ff6b6b;
  --success: #34d399;
  --shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
}

/* Noir Rosé — near-black & copper/rose-gold, a warmer luxury alternative */
[data-theme="noir-rose"] {
  --brand: #C08552;
  --brand-dark: #9c6a3f;
  --brand-light: rgba(192, 133, 82, 0.16);
  --ink: #f2ece6;
  --muted: #ad9f93;
  --bg: #120e0d;
  --bg-soft: #1c1614;
  --surface: #221b19;
  --surface-rgb: 34, 27, 25;
  --border: #362b28;
  --danger: #ef5350;
  --success: #4fd1a5;
  --shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

.welcome-modal-overlay {
  position: fixed; inset: 0; z-index: 999; background: rgba(13,27,42,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: welcomeFadeIn .2s ease-out;
}
.welcome-modal {
  background: var(--surface); border-radius: var(--radius); padding: 32px 28px;
  max-width: 320px; width: 100%; text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  animation: welcomePopIn .25s cubic-bezier(.2,.9,.3,1.2);
}
.welcome-modal-icon { font-size: 2.4rem; margin-bottom: 8px; }
.welcome-modal h3 { margin: 0 0 6px; font-size: 1.15rem; }
.welcome-modal p { margin: 0 0 18px; color: var(--muted); }
@keyframes welcomeFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes welcomePopIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }

.in-app-browser-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 250; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff4e5; color: #6b3f00; border-bottom: 1px solid #f0c987;
  padding: 10px 16px; font-size: .82rem; line-height: 1.7;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
.in-app-browser-banner span { flex: 1; min-width: 200px; }
.in-app-browser-banner-btn {
  background: #6b3f00; color: #fff; border: none; border-radius: 8px; padding: 6px 14px;
  font-size: .78rem; font-family: inherit; cursor: pointer; flex-shrink: 0;
}
.in-app-browser-banner-close {
  background: none; border: none; color: #6b3f00; font-size: 1rem; cursor: pointer; flex-shrink: 0; opacity: .7;
}
.in-app-browser-banner-close:hover { opacity: 1; }

body {
  margin: 0;
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.75;
  direction: rtl;
}
/* Site-wide font switch, chosen from Settings → ظاهر. Lalezar only ships
   one real weight, so bolder text (600/700) renders as the browser's own
   synthetic bold under it — a normal, accepted trade-off for display fonts. */
[data-font="lalezar"] body,
[data-font="lalezar"] input,
[data-font="lalezar"] textarea,
[data-font="lalezar"] select,
[data-font="lalezar"] button {
  font-family: 'Lalezar', 'Vazirmatn', Tahoma, sans-serif;
}

/* Per-heading-level font overrides, chosen independently from Settings →
   ظاهر. Left unset (no data attribute at all) when a level is set to
   "پیش‌فرض سایت" — it then just naturally inherits from body like normal. */
[data-font-h1="vazirmatn"] h1 { font-family: 'Vazirmatn', Tahoma, sans-serif; }
[data-font-h1="lalezar"]   h1 { font-family: 'Lalezar', 'Vazirmatn', Tahoma, sans-serif; }
[data-font-h2="vazirmatn"] h2 { font-family: 'Vazirmatn', Tahoma, sans-serif; }
[data-font-h2="lalezar"]   h2 { font-family: 'Lalezar', 'Vazirmatn', Tahoma, sans-serif; }
[data-font-h3="vazirmatn"] h3 { font-family: 'Vazirmatn', Tahoma, sans-serif; }
[data-font-h3="lalezar"]   h3 { font-family: 'Lalezar', 'Vazirmatn', Tahoma, sans-serif; }
[data-font-h4="vazirmatn"] h4 { font-family: 'Vazirmatn', Tahoma, sans-serif; }
[data-font-h4="lalezar"]   h4 { font-family: 'Lalezar', 'Vazirmatn', Tahoma, sans-serif; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

html, body { overflow-x: hidden; }

/* ---------------- Fixed header (announcement bar + navbar) ---------------- */
.site-header-fixed {
  position: fixed;
  top: var(--in-app-banner-height, 0px); left: 0; right: 0;
  z-index: 200;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--bg);
  transition: top .2s ease;
}
.announcement-bar {
  background: var(--brand);
  color: #fff;
  text-align: center;
  font-size: .82rem;
  font-weight: 500;
  padding: 8px 40px;
  position: relative;
  transition: opacity .25s ease, transform .25s ease;
}
.announcement-close {
  position: absolute;
  top: 50%; inset-inline-start: 12px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  opacity: .8;
  font-size: .95rem;
  padding: 4px 8px;
  cursor: pointer;
  line-height: 1;
}
.announcement-close:hover { opacity: 1; }
.navbar {
  position: relative;
  border-bottom: 1px solid var(--border);
  transition: border-color .3s ease;
}
/* The blur/background lives on its own layer (not .navbar itself) because an
   element with backdrop-filter becomes a "containing block" for any
   position:fixed descendant in most browsers — which was silently collapsing
   the mobile menu's height to almost nothing (it was measuring itself against
   this ~68px bar instead of the full viewport). Keeping the filter on a
   sibling instead of an ancestor of .nav-links avoids that trap entirely. */
.navbar-blur-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(var(--surface-rgb), .95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .3s ease, backdrop-filter .3s ease;
}
/* Per spec: solid background only at the very top; frosted/blurred (not fully invisible)
   once scrolled. Blur stays a blur() the whole time so the transition never has to
   interpolate to/from "none", which is what caused the abrupt jump before. */
.site-header-fixed.scrolled .navbar-blur-bg {
  background: rgba(var(--surface-rgb), .4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.site-header-fixed.scrolled .navbar {
  border-bottom-color: rgba(230,235,241,.5);
}
.site-header-fixed.scrolled .announcement-bar {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
.nav-admin-link { color: var(--brand) !important; font-weight: 700 !important; }
.navbar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 68px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--brand);
  flex: 1;
  justify-content: center;
}
.brand img { height: 36px; width: auto; }
.brand img.brand-logo-solo { height: 48px; }

/* ---------------- Hamburger toggle — always visible, opens the slide-in panel ---------------- */
.nav-toggle {
  background: none; border: none; cursor: pointer; padding: 8px;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  border-radius: 10px; width: 38px; height: 38px; flex-shrink: 0;
}
.nav-toggle:hover { background: rgba(128,128,128,.1); }
.nav-toggle-bar { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------------- Top-bar actions: search icon + cart icon ---------------- */
.navbar-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; position: relative; }
.theme-toggle {
  background: none; border: none; padding: 8px; cursor: pointer; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; color: var(--ink); opacity: .85; transition: opacity .15s;
}
.theme-toggle:hover { opacity: 1; background: rgba(128,128,128,.12); }
.nav-search-toggle {
  background: none; border: none; padding: 8px; cursor: pointer; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; opacity: .85; transition: opacity .15s;
  color: #ffffff; /* dark themes (skyfall/midnight/noir-rose) — overridden to pure black below for classic */
}
[data-theme="classic"] .nav-search-toggle { color: #000000; }
.nav-search-toggle:hover { opacity: 1; background: rgba(128,128,128,.12); }
.nav-cart-icon {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; color: var(--ink);
}
.nav-cart-icon:hover { background: rgba(128,128,128,.12); }
.nav-cart-icon .badge {
  position: absolute; top: 2px; left: 2px;
  background: var(--brand); color: #fff; font-size: .65rem; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

/* ---------------- Search popover (unchanged behavior, triggered from the icon) ---------------- */
.nav-search-form {
  display: none;
  position: absolute; top: 100%; inset-inline-end: 0; margin-top: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12); padding: 8px; z-index: 220; width: 260px;
}
.nav-search-form.open { display: block; }
.nav-search-input { border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: .88rem; width: 100%; background: var(--bg); color: var(--ink); font-family: inherit; }

/* ---------------- Slide-in nav panel — holds EVERY nav link + account actions,
   scrolls vertically so it scales to any number of items, same behavior on
   every screen size (no separate desktop-hover vs mobile-accordion logic). ---------------- */
.nav-panel-overlay {
  display: none;
  position: fixed; inset: 0; background: rgba(10,10,15,.45); z-index: 298;
}
.nav-panel-overlay.open { display: block; }
.nav-panel {
  position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(320px, 86vw);
  background: var(--surface); z-index: 299; overflow-y: auto;
  transform: translateX(-105%);
  transition: transform .25s ease;
  box-shadow: 12px 0 30px rgba(0,0,0,.15);
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge/IE */
}
.nav-panel::-webkit-scrollbar { display: none; } /* Chrome/Safari/new Edge */
[dir="rtl"] .nav-panel { transform: translateX(105%); }
.nav-panel.open { transform: translateX(0); }
.nav-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 1.05rem;
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.nav-panel-close { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--muted); padding: 6px; border-radius: 8px; }
.nav-panel-close:hover { background: rgba(128,128,128,.12); }
.nav-panel-list { list-style: none; margin: 0; padding: 10px; }
.nav-panel-list > li > a, .nav-panel-list > li.nav-panel-divider ~ li > a {
  display: block; padding: 13px 14px; border-radius: 10px; font-size: .95rem; font-weight: 500; color: var(--ink);
}
.nav-panel-list a:hover { background: var(--brand-light); color: var(--brand); }
.nav-panel-divider { height: 1px; background: var(--border); margin: 10px 6px; }

.nav-panel-group-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; font-family: inherit; cursor: pointer;
  padding: 13px 14px; border-radius: 10px; font-weight: 500; font-size: .95rem; color: var(--ink);
}
.nav-panel-group-trigger:hover { background: var(--brand-light); color: var(--brand); }
.nav-panel-group.open .nav-caret { transform: rotate(180deg); }
.nav-panel-submenu {
  display: none; list-style: none; margin: 2px 0 4px; padding: 0 0 0 14px;
}
.nav-panel-group.open .nav-panel-submenu { display: block; }
.nav-panel-submenu a { padding: 11px 14px; font-size: .88rem; }

@media (min-width: 900px) {
  .nav-panel { width: 340px; }
}

@media (max-width: 640px) {
  .container { padding: 0 22px; }
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  border: none;
  font-weight: 600;
  font-size: .95rem;
  transition: transform .1s, box-shadow .15s, background .15s;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-outline { background: var(--surface); color: var(--brand); border: 1.5px solid var(--brand); }
.btn-outline:hover { background: var(--brand-light); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: .85rem; border-radius: 9px; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------- Hero / 3D viewer ---------------- */
.hero {
  background: linear-gradient(180deg, var(--brand-light) 0%, var(--bg) 100%);
  padding: 40px 0 20px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 30px;
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}
.hero h1 { font-size: 2rem; margin: 0 0 12px; line-height: 1.4; }
.hero p.lead { color: var(--muted); font-size: 1.05rem; margin-bottom: 22px; }

/* ---------------- Boutique hero (Alia Boutique — simple, elegant, mobile-first) ---------------- */
.hero-boutique {
  background: linear-gradient(165deg, var(--brand-light) 0%, var(--gold-light) 60%, var(--bg) 100%);
  padding: 56px 0 44px;
}
.hero-boutique-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.hero-boutique-inner h1 { font-size: 2.1rem; margin: 0 0 14px; }
.hero-boutique-inner p.lead { margin-bottom: 26px; }
@media (max-width: 640px) {
  .hero-boutique { padding: 40px 0 32px; }
  .hero-boutique-inner h1 { font-size: 1.6rem; }
}

.category-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.category-tile { display: block; text-align: center; text-decoration: none; color: inherit; }
.category-tile-img {
  aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden;
  background: var(--bg-soft); border: 1px solid var(--border);
  box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s;
}
.category-tile:hover .category-tile-img { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(58,166,217,.18); }
.category-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.category-tile-label { margin-top: 10px; font-weight: 700; font-size: .98rem; }
@media (max-width: 480px) {
  .category-tiles { gap: 10px; }
  .category-tile-label { font-size: .86rem; margin-top: 7px; }
}


/* ---------------- Section headers ---------------- */
.section { padding: 46px 0; }
.breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 18px 0 0; font-size: .82rem; color: var(--muted);
}
.breadcrumb-wrap + .section { padding-top: 18px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb span { color: var(--muted); }
.breadcrumb-current { color: var(--ink); font-weight: 500; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; }
.section-head h2 { font-size: 1.4rem; margin: 0; position: relative; padding-bottom: 10px; }
.section-head h2::after {
  content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 42px; height: 3px;
  border-radius: 999px; background: var(--gold);
}
.section-head a { color: var(--brand); font-weight: 600; font-size: .9rem; }

/* ---------------- Product grid & cards ---------------- */
.grid { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* Homepage-only configurable grid — desktop column count is set per
   section via the --cols custom property (admin-configurable, see
   Settings → ظاهر); tablet/mobile intentionally IGNORE --cols and always
   fall back to a fixed, sensible column count, so whatever the admin
   picks for desktop is always guaranteed to stay usable on a phone.
   Images shown with object-fit: contain (never cropped), same as before. */
.grid-configurable { grid-template-columns: repeat(var(--cols, 4), 1fr); }
.grid-configurable .card .thumb img { object-fit: contain; padding: 10px; box-sizing: border-box; }
@media (max-width: 1100px) { .grid-configurable { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 720px)  { .grid-configurable { grid-template-columns: repeat(2, 1fr) !important; } }

.hashtag-chip-link {
  display: inline-block; background: var(--bg-soft); color: var(--brand);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px;
  font-size: .85rem; font-weight: 600; transition: background .15s, color .15s;
}
.hashtag-chip-link:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  transition: box-shadow .2s, transform .2s;
  display: flex;
  flex-direction: column;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card .thumb { aspect-ratio: 4/5; background: var(--bg-soft); overflow: hidden; position: relative; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Category card: product-image slideshow (crossfade, cycled by JS) */
.category-slideshow img {
  position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease;
}
.category-slideshow img.active { opacity: 1; }

/* Category card: auto-matched icon fallback (no image, no products) */
.category-icon-thumb {
  display: flex; align-items: center; justify-content: center;
  color: var(--brand); background: var(--brand-light);
}
.category-icon-thumb svg { width: 42%; height: 42%; }
.card .body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card .name { font-weight: 600; font-size: .95rem; }
.card .price { color: var(--brand); font-weight: 700; margin-top: auto; }
.card .price small { color: var(--muted); font-weight: 400; font-size: .75rem; }

.badge-off { background: var(--brand-light); color: var(--brand); font-size: .82rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; display: inline-block; }
.badge-off-campaign { background: linear-gradient(135deg, #FFD700, #FF6B35); color: #1b0e35; font-size: .84rem; font-weight: 800; box-shadow: 0 3px 10px rgba(255,107,53,.35); }
.badge-off-campaign small { display: block; font-size: .62rem; font-weight: 700; margin-top: 1px; }
.campaign-page-head { text-align: center; max-width: 600px; margin: 0 auto 36px; }

.seasonal-banner { color: #fff; text-align: center; padding: 12px 16px; font-size: .92rem; }
.seasonal-banner .container { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.seasonal-banner strong { font-size: 1rem; }
.seasonal-banner span { opacity: .92; }

/* ---------------- Category chips ---------------- */
.cat-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.cat-chip {
  padding: 10px 18px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  font-weight: 500;
  font-size: .9rem;
}
.cat-chip:hover, .cat-chip.active { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }

/* ---------------- Product detail page ---------------- */
.product-page { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .product-page { grid-template-columns: 1fr; gap: 22px; } }
.product-gallery-main {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 460px;
}
.product-gallery-main img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 640px) {
  .product-gallery-main { height: 320px; }
}
.product-thumbs { display: flex; gap: 10px; margin-top: 10px; overflow-x: auto; }
.product-thumbs img { width: 70px; height: 70px; object-fit: contain; background: var(--bg-soft); border-radius: 8px; border: 1.5px solid var(--border); cursor: pointer; }
.product-thumbs img.active { border-color: var(--brand); }

.lightbox-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 600;
  background: rgba(10,10,15,.92);
  align-items: center; justify-content: center;
  overflow: auto;
  touch-action: pinch-zoom pan-x pan-y;
}
.lightbox-overlay.open { display: flex; }
.lightbox-overlay img { max-width: 100%; max-height: 100%; object-fit: contain; margin: auto; }
.lightbox-close {
  position: fixed; top: 16px; inset-inline-end: 16px; z-index: 601;
  background: rgba(255,255,255,.15); border: none; color: #fff;
  width: 40px; height: 40px; border-radius: 50%; font-size: 1.1rem; cursor: pointer;
}
.lightbox-close:hover { background: rgba(255,255,255,.28); }

.product-title { font-size: 1.5rem; margin: 0 0 8px; }
.product-price { font-size: 1.6rem; color: var(--brand); font-weight: 700; margin: 12px 0; }

.size-options { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 20px; }
.color-options { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 20px; }
.size-option, .color-option {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  user-select: none;
  cursor: pointer;
  font-size: .88rem;
  font-weight: 500;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.color-option { flex-direction: row; gap: 8px; padding: 8px 14px; font-size: .84rem; }
.color-swatch {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15); flex-shrink: 0;
}
.size-option small, .color-option small { display: block; color: var(--muted); font-weight: 400; }
.size-option.selected, .color-option.selected { border-color: var(--brand); background: var(--brand-light); color: var(--brand); }
.size-option.disabled { opacity: .4; text-decoration: line-through; }

.qty-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; }
.qty-stepper button { width: 40px; height: 40px; border: none; background: var(--surface); color: var(--ink); font-size: 1.1rem; }
.qty-stepper input { width: 50px; text-align: center; border: none; background: var(--surface); color: var(--ink); font-size: 1rem; }
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.wishlist-btn { font-size: 1.3rem; padding: 0 18px; flex-shrink: 0; }
.wishlist-btn.active { border-color: #e0245e; background: rgba(224,36,94,.08); }

.stock-notify-box { margin-top: 16px; padding: 14px; background: var(--bg-soft); border-radius: 10px; }

/* Starfield + shooting stars + a much stronger, more inviting CTA — a
   significant step up from subtle ambient motion, per explicit "very very
   animated" feedback with comets/stars specifically requested. Respects
   reduced-motion preference. */
.starfield { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.twinkle-star {
  position: absolute; border-radius: 50%; background: #fff;
  box-shadow: 0 0 4px 1px rgba(255,255,255,.6);
  animation-name: twinkle; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: .15; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.4); }
}

.shooting-star {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px 3px rgba(255,255,255,.9);
  animation-name: shootAcross; animation-timing-function: ease-in; animation-iteration-count: infinite;
  opacity: 0;
}
.shooting-star::before {
  content: ''; position: absolute; top: 50%; right: 0; width: 100px; height: 2px;
  background: linear-gradient(to left, rgba(255,255,255,.85), transparent);
  transform: translateY(-50%);
}
@keyframes shootAcross {
  0% { transform: translate(0, 0) rotate(35deg); opacity: 0; }
  3% { opacity: 1; }
  16% { opacity: 1; }
  22% { transform: translate(270px, 200px) rotate(35deg); opacity: 0; }
  100% { transform: translate(270px, 200px) rotate(35deg); opacity: 0; }
}

/* why-choose-us has a theme-variable (sometimes light) background — gold
   reads well on both light and dark themes, unlike plain white stars. */
.why-choose-us-animated .twinkle-star,
.why-choose-us-animated .shooting-star,
.why-choose-us-animated .shooting-star::before {
  background: var(--brand);
  box-shadow: none;
}
.why-choose-us-animated .shooting-star::before {
  background: linear-gradient(to left, var(--brand), transparent);
  opacity: .8;
}

.why-choose-us { background: var(--bg-soft); border-radius: var(--radius); padding: 36px; text-align: center; }
.why-choose-us h2 { font-size: 1.3rem; margin: 0 0 20px; }
.why-choose-us ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; max-width: 100%; margin: 0 auto; text-align: right; }
.why-choose-us li { font-size: .95rem; color: var(--ink); }
@media (max-width: 640px) { .why-choose-us { padding: 26px 20px; } .why-choose-us ul { grid-template-columns: 1fr; } }

.why-choose-us-animated { position: relative; overflow: hidden; }
.why-choose-us-animated h2, .why-choose-us-animated ul { position: relative; z-index: 1; }
.check-bob {
  display: inline-block; color: var(--brand);
  animation: checkBob 2.4s ease-in-out infinite;
  animation-delay: calc(var(--stagger, 0) * 180ms);
}
@keyframes checkBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.home-stat-value { position: relative; z-index: 1; animation: statGlow 3.6s ease-in-out infinite; animation-delay: calc(var(--stagger, 0) * 250ms); }
@keyframes statGlow {
  0%, 100% { text-shadow: 0 0 0 rgba(201,162,39,0); }
  50% { text-shadow: 0 0 14px rgba(201,162,39,.5); }
}
@media (prefers-reduced-motion: reduce) {
  .twinkle-star, .shooting-star, .check-bob, .home-stat-value {
    animation: none !important;
  }
}

/* Stagger-in reveal: items start faded/offset, animate in with a per-item
   delay (--stagger, set inline per element) once the section scrolls into
   view and JS adds .is-revealed. The hidden starting state only applies
   once JS has confirmed it's running (.js-anim-ready, added by the JS
   file itself) — without JS, content stays visible by default rather
   than being permanently opacity:0. */
.js-anim-ready .why-choose-us-animated li {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(var(--stagger, 0) * 70ms);
}
.why-choose-us-animated.is-revealed li { opacity: 1; transform: translateY(0); }

.home-stats { display: flex; justify-content: center; gap: 50px; margin-top: 30px; flex-wrap: wrap; }

.home-stat { text-align: center; transition: transform .25s ease; }
.js-anim-ready .home-stat { opacity: 0; transform: translateY(16px); }
.home-stats.is-revealed .home-stat {
  opacity: 1; transform: translateY(0);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(var(--stagger, 0) * 90ms);
}
.home-stat:hover { transform: translateY(-4px); }
.home-stat-value { font-size: 2rem; font-weight: 700; color: var(--brand); line-height: 1.2; }
.home-stat-label { font-size: .85rem; color: var(--muted); margin-top: 4px; }
@media (max-width: 640px) { .home-stats { gap: 30px; } .home-stat-value { font-size: 1.6rem; } }

.track-steps { display: flex; flex-direction: column; gap: 0; }
.track-step { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--muted); position: relative; }
.track-step .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
.track-step.done { color: var(--ink); font-weight: 600; }
.track-step.done .dot { background: var(--success); }
.track-step:not(:last-child)::before {
  content: ""; position: absolute; inset-inline-start: 6px; top: 28px; width: 2px; height: 100%;
  background: var(--border);
}
.track-step.done:not(:last-child)::before { background: var(--success); }

/* ---------------- Forms ---------------- */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 500; font-size: .9rem; }
.form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: .95rem;
  background: var(--surface);
  color: var(--ink);
}
.form-control:focus { outline: none; border-color: var(--brand); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.form-card { max-width: 480px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }

/* ---------- Motivation service: package selection cards ---------- */
.motiv-package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.motiv-package-card {
  position: relative; display: block; text-align: center; cursor: pointer;
  border: 2px solid var(--border); border-radius: 16px; padding: 22px 16px;
  background: var(--bg-soft); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.motiv-package-card:hover { transform: translateY(-3px); }
.motiv-package-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.motiv-package-card:has(input:checked), .motiv-package-card.selected { border-color: var(--brand); box-shadow: 0 10px 30px rgba(0,0,0,.1); background: var(--brand-light); }
.motiv-package-icon { font-size: 2.4rem; margin-bottom: 10px; }
.motiv-package-name { font-weight: 700; font-size: 1.02rem; margin-bottom: 4px; }
.motiv-package-desc { font-size: .8rem; color: var(--muted); margin-bottom: 12px; min-height: 1.2em; }
.motiv-package-price { font-weight: 700; }
.motiv-price-old { display: block; font-size: .8rem; color: var(--muted); text-decoration: line-through; font-weight: 400; }
.motiv-price-new { color: var(--brand); font-size: 1.05rem; }
.motiv-ribbon {
  position: absolute; top: 10px; inset-inline-end: -8px; background: var(--danger, #d92d20); color: #fff;
  font-size: .7rem; font-weight: 700; padding: 4px 10px; border-radius: 6px 6px 6px 0;
}
.error-text { color: var(--danger); font-size: .82rem; margin-top: 4px; }
.alert { padding: 12px 16px; border-radius: 10px; font-size: .9rem; margin-bottom: 16px; }
.alert-error { background: #fdecea; color: var(--danger); }
.alert-success { background: #eafbf3; color: var(--success); }

/* ---------------- Pretty file input ("انتخاب فایل") ----------------
   The native file input's button text/appearance is controlled by the
   browser (locale-dependent, not stylable via CSS), so we visually hide
   the real input and present a styled label + custom button text instead.
   The input stays in the DOM and fully functional/accessible — just
   invisible — so clicking anywhere on the label still opens the picker. */
.file-upload {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  cursor: pointer;
  position: relative;
}
.file-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.file-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--brand-light);
  color: var(--brand);
  border: 1.5px dashed var(--brand);
  border-radius: 10px;
  font-weight: 600;
  font-size: .88rem;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-style .15s ease;
}
.file-upload:hover .file-upload-btn,
.file-upload:focus-within .file-upload-btn {
  background: var(--brand);
  color: #fff;
  border-style: solid;
}
.file-upload-name {
  font-size: .82rem;
  color: var(--muted);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-upload-preview {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border);
  display: none;
}
.file-upload-preview.show { display: block; }

/* ---------------- Cart / checkout tables ---------------- */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table td, .cart-table th { padding: 14px 10px; border-bottom: 1px solid var(--border); text-align: right; vertical-align: middle; }
.cart-row-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.cart-summary { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; background: var(--bg-soft); }
.cart-summary .row { display: flex; justify-content: space-between; padding: 8px 0; font-size: .92rem; }
.cart-summary .row.total { font-weight: 700; font-size: 1.1rem; border-top: 1px solid var(--border); margin-top: 8px; padding-top: 14px; color: var(--brand); }
.checkout-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: start; }
@media (max-width: 900px) { .checkout-grid { grid-template-columns: 1fr; } }

/* ---------------- Footer ---------------- */
.footer { background: #0d1b2a; color: #cfd8e3; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 30px; padding: 50px 0 20px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; padding: 34px 18px 18px; gap: 26px; }
  .footer-bottom { padding: 18px 18px; }
}
.footer h4 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
.footer a { color: #a9b7c6; font-size: .88rem; display: block; margin-bottom: 10px; }
.footer a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 18px 0; font-size: .82rem; text-align: center; color: #8595a6; }
.site-version-tag { text-align: center; font-size: .68rem; color: #4a5a6a; padding-bottom: 10px; background: #0d1b2a; }
.instagram-badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.06); color: #fff !important; font-weight: 600; }
.instagram-badge svg { width: 18px; height: 18px; }

/* ---------------- Instagram section ---------------- */
.instagram-section {
  position: relative;
  background: linear-gradient(135deg, #7a3ea1 0%, #d62976 42%, #f77737 78%, #fcaf45 100%);
  color: #fff;
  border-radius: 20px;
  padding: 36px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  overflow: hidden;
  isolation: isolate;
}
.instagram-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.22), transparent 45%),
              radial-gradient(circle at 90% 85%, rgba(255,255,255,.16), transparent 40%);
  z-index: -1;
}
.instagram-section .insta-icon {
  width: 54px; height: 54px; flex-shrink: 0;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
}
.instagram-section .insta-icon svg { width: 28px; height: 28px; }
.instagram-section .insta-text { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 220px; }
.instagram-section h3 { margin: 0 0 6px; font-size: 1.25rem; font-weight: 700; }
.instagram-section p { margin: 0; opacity: .95; font-size: .92rem; }
.instagram-section .btn-outline {
  background: #fff; color: #d62976; border-color: #fff; font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.instagram-section .btn-outline:hover { background: #fff; opacity: .92; transform: translateY(-1px); }
@media (max-width: 640px) {
  .instagram-section { padding: 22px 20px; border-radius: 16px; }
  .instagram-section .insta-icon { width: 40px; height: 40px; border-radius: 12px; }
  .instagram-section .insta-icon svg { width: 20px; height: 20px; }
  .instagram-section .insta-text { gap: 10px; }
  .instagram-section h3 { font-size: 1.05rem; }
  .instagram-section p { font-size: .85rem; }
  .instagram-section .btn-outline { width: 100%; }
}

/* ---------------- Reviews & star ratings ---------------- */
.stars {
  direction: ltr;
  display: inline-block;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #f5b400 calc(var(--rating) / 5 * 100%), var(--border) calc(var(--rating) / 5 * 100%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.star-rating-display { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; }

.reviews-section { max-width: 720px; margin: 50px auto 0; padding-top: 30px; border-top: 1px solid var(--border); }
.review-list { display: flex; flex-direction: column; gap: 16px; margin: 18px 0; }
.review-item { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.review-item-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.review-item p { margin: 0; font-size: .92rem; line-height: 1.8; }
.review-photo { width: 90px; height: 90px; object-fit: cover; border-radius: 8px; margin-top: 10px; cursor: zoom-in; display: block; }

.review-form { margin-top: 20px; border: 1px solid var(--border); border-radius: 12px; padding: 18px; background: var(--bg-soft); }
.star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; margin-bottom: 12px; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { color: var(--border); cursor: pointer; font-size: 1.9rem; padding: 0 2px; transition: color .1s; }
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label { color: #f5b400; }

/* ---------------- Background patterns (Telegram-style, pure CSS) ---------------- */
body[data-bg-pattern]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .05;
  color: var(--ink);
}
body[data-bg-pattern="dots"]::before {
  background-image: radial-gradient(currentColor 1.3px, transparent 1.3px);
  background-size: 24px 24px;
}
body[data-bg-pattern="grid"]::before {
  background-image:
    linear-gradient(currentColor 1px, transparent 1px),
    linear-gradient(90deg, currentColor 1px, transparent 1px);
  background-size: 34px 34px;
}
body[data-bg-pattern="diagonal"]::before {
  background-image: repeating-linear-gradient(45deg, currentColor 0, currentColor 1.5px, transparent 1.5px, transparent 18px);
}
body[data-bg-pattern="circles"]::before {
  background-image: radial-gradient(circle, transparent 58%, currentColor 60%, currentColor 63%, transparent 65%);
  background-size: 42px 42px;
}

/* ---------------- Campaign popup modal ---------------- */
.campaign-modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(10,10,15,.75);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: campaignFadeIn .3s ease;
}
.campaign-modal-overlay.closing { animation: campaignFadeOut .2s ease forwards; }
#fireworksCanvas { position: fixed; inset: 0; pointer-events: none; z-index: 1; }

.campaign-modal {
  position: relative; z-index: 2;
  max-width: 440px; width: 100%;
  background: linear-gradient(160deg, #1b0e35 0%, #4a1259 45%, #8a1653 100%);
  border-radius: 24px;
  padding: 40px 30px 30px;
  text-align: center;
  color: #fff;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  animation: campaignPopIn .4s cubic-bezier(.2,1.4,.4,1);
  border: 1px solid rgba(255,255,255,.15);
}
.campaign-modal-close {
  position: absolute; top: 14px; inset-inline-end: 14px;
  background: rgba(255,255,255,.15); border: none; color: #fff;
  width: 32px; height: 32px; border-radius: 50%; font-size: .9rem; cursor: pointer;
}
.campaign-modal-close:hover { background: rgba(255,255,255,.28); }

.campaign-modal-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 120px; height: 120px; border-radius: 50%;
  background: linear-gradient(135deg, #FFD700, #FF6B35);
  margin: 0 auto 18px;
  box-shadow: 0 0 0 6px rgba(255,215,0,.15), 0 10px 30px rgba(255,107,53,.4);
}
.campaign-modal-badge-num { font-size: 1.9rem; font-weight: 800; color: #1b0e35; line-height: 1; }
.campaign-modal-badge-label { font-size: .78rem; font-weight: 700; color: #1b0e35; margin-top: 2px; }

.campaign-modal-title { font-size: 1.4rem; margin: 0 0 8px; font-weight: 800; }
.campaign-modal-desc { font-size: .92rem; opacity: .9; margin: 0 0 20px; line-height: 1.8; }

.campaign-modal-countdown { display: flex; justify-content: center; gap: 10px; margin-bottom: 22px; }
.cd-box { background: rgba(255,255,255,.1); border-radius: 10px; padding: 10px 12px; min-width: 56px; }
.cd-box span { display: block; font-size: 1.25rem; font-weight: 800; }
.cd-box small { font-size: .68rem; opacity: .8; }

.campaign-modal-cta { display: inline-block; background: #fff; color: #8a1653; font-weight: 700; padding: 12px 26px; border-radius: 999px; }
.campaign-modal-cta:hover { background: #fff; opacity: .9; }

@keyframes campaignFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes campaignFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes campaignPopIn { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (max-width: 480px) {
  .campaign-modal { padding: 32px 20px 24px; }
  .campaign-modal-badge { width: 100px; height: 100px; }
  .cd-box { min-width: 48px; padding: 8px 8px; }
}

/* ---------------- Misc ---------------- */
.text-center { text-align: center; }
.muted { color: var(--muted); }
.mt-0 { margin-top: 0; }
.skeleton { background: linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #1b2430; color: #fff; padding: 12px 20px; border-radius: 10px;
  font-size: .88rem; opacity: 0; transition: all .25s; pointer-events: none; z-index: 999;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.whatsapp-float {
  position: fixed;
  bottom: 20px;
  inset-inline-start: 20px;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(37, 211, 102, .45);
  z-index: 90;
  transition: transform .15s ease;
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { width: 30px; height: 30px; }
@media (max-width: 640px) { .whatsapp-float { width: 50px; height: 50px; bottom: 16px; inset-inline-start: 16px; } .whatsapp-float svg { width: 26px; height: 26px; } }

/* ---------- Live chat widget ---------- */
.chat-float {
  position: fixed; bottom: 90px; inset-inline-start: 20px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--brand); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .15s ease;
}
.chat-float:hover { transform: scale(1.08); }
.chat-float svg { width: 26px; height: 26px; }
.chat-float-badge {
  position: absolute; top: -2px; left: -2px; background: #e53e3e; color: #fff;
  font-size: .68rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
@media (max-width: 640px) { .chat-float { width: 50px; height: 50px; bottom: 78px; inset-inline-start: 16px; } .chat-float svg { width: 22px; height: 22px; } }

.chat-panel {
  display: none;
  position: fixed; bottom: 90px; inset-inline-start: 20px; z-index: 190;
  width: 320px; max-width: calc(100vw - 32px); height: 420px; max-height: 70vh;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25); flex-direction: column; overflow: hidden;
}
.chat-panel.open { display: flex; }
.chat-panel-head {
  background: var(--brand); color: #fff; padding: 14px 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between;
}
.chat-panel-close { background: none; border: none; color: #fff; font-size: 1.1rem; cursor: pointer; opacity: .85; }
.chat-panel-close:hover { opacity: 1; }
.chat-panel-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.chat-msg { max-width: 80%; padding: 9px 13px; border-radius: 14px; font-size: .86rem; line-height: 1.7; word-break: break-word; }
.chat-msg-admin { align-self: flex-start; background: var(--bg-soft); color: var(--ink); border-bottom-left-radius: 4px; }
.chat-msg-customer { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.chat-panel-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.chat-panel-input input {
  flex: 1; border: 1px solid var(--border); border-radius: 999px; padding: 9px 14px;
  font-size: .86rem; font-family: inherit; background: var(--bg); color: var(--ink);
}
.chat-panel-input button {
  width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
@media (max-width: 640px) { .chat-panel { bottom: 78px; inset-inline-start: 16px; height: 60vh; } }