/* ============================================================
   TrustShop.bd — Main CSS v2 (Matches React version exactly)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=Hind+Siliguri:wght@400;500;600;700&display=swap');

/* ── CSS Variables (HSL-based like React version) ─────── */
:root {
  --background: hsl(40,33%,98%);
  --foreground: hsl(20,10%,15%);
  --card: hsl(0,0%,100%);
  --card-foreground: hsl(20,10%,15%);
  --primary: hsl(24,95%,53%);
  --primary-foreground: hsl(0,0%,100%);
  --secondary: hsl(30,20%,92%);
  --secondary-foreground: hsl(24,10%,20%);
  --muted: hsl(30,15%,94%);
  --muted-foreground: hsl(25,10%,45%);
  --border: hsl(30,15%,90%);
  --input: hsl(30,15%,90%);
  --destructive: hsl(0,84%,60%);
  --success: hsl(142,71%,45%);
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0/0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0/0.1),0 4px 6px -4px rgb(0 0 0/0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0/0.1),0 8px 10px -6px rgb(0 0 0/0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0/0.25);
}

/* ── Themes ─────────────────────────────────────────────── */
[data-theme="sunset"]  { --primary:hsl(24,95%,53%);  --background:hsl(40,33%,98%);  --secondary:hsl(30,20%,92%); }
[data-theme="royal"]   { --primary:hsl(221,83%,53%); --background:hsl(214,60%,98%); --secondary:hsl(214,20%,92%); }
[data-theme="emerald"] { --primary:hsl(158,64%,42%); --background:hsl(152,40%,98%); --secondary:hsl(152,15%,92%); }
[data-theme="rose"]    { --primary:hsl(330,80%,56%); --background:hsl(340,60%,98%); --secondary:hsl(340,20%,93%); }
[data-theme="violet"]  { --primary:hsl(262,80%,58%); --background:hsl(260,50%,98%); --secondary:hsl(260,15%,92%); }
[data-theme="ocean"]   { --primary:hsl(186,75%,38%); --background:hsl(186,50%,98%); --secondary:hsl(186,20%,92%); }
[data-theme="ruby"]    { --primary:hsl(0,80%,52%);   --background:hsl(0,50%,98%);   --secondary:hsl(0,15%,93%); }
[data-theme="golden"]  { --primary:hsl(43,96%,48%);  --background:hsl(48,60%,98%);  --secondary:hsl(48,20%,92%); }

/* ── Dark Mode ─────────────────────────────────────────── */
.dark {
  --background: hsl(220,15%,10%);
  --foreground: hsl(40,15%,92%);
  --card: hsl(220,15%,14%);
  --card-foreground: hsl(40,15%,92%);
  --secondary: hsl(220,15%,20%);
  --secondary-foreground: hsl(40,15%,80%);
  --muted: hsl(220,15%,18%);
  --muted-foreground: hsl(220,10%,60%);
  --border: hsl(220,15%,22%);
  --input: hsl(220,15%,22%);
}
[data-theme="sunset"].dark { --primary:hsl(24,90%,58%); }
[data-theme="royal"].dark   { --primary:hsl(217,90%,65%); }
[data-theme="emerald"].dark { --primary:hsl(160,60%,52%); }
[data-theme="rose"].dark    { --primary:hsl(330,75%,65%); }
[data-theme="violet"].dark  { --primary:hsl(262,70%,68%); }
[data-theme="ocean"].dark   { --primary:hsl(186,65%,52%); }
[data-theme="ruby"].dark    { --primary:hsl(0,75%,62%); }
[data-theme="golden"].dark  { --primary:hsl(43,90%,55%); }

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter','Hind Siliguri',sans-serif;
  background:var(--background);
  color:var(--foreground);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .2s,color .2s;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
h1,h2,h3,h4,h5,h6 {
  font-family:'Outfit','Hind Siliguri',sans-serif;
  font-weight:700;
  letter-spacing:-0.025em;
  color:var(--foreground);
}
input,select,textarea,button { font-family:inherit; }
input::placeholder,textarea::placeholder { color:var(--muted-foreground); opacity:.7; }

/* ── Announcement Bar ───────────────────────────────────── */
.announcement-bar {
  background:var(--primary);
  color:var(--primary-foreground);
  text-align:center;
  padding:8px 16px;
  font-size:.8rem;
  font-weight:600;
}

/* ── Header ─────────────────────────────────────────────── */
.site-header {
  background:var(--card);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:var(--shadow-sm);
}
.site-header .inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  max-width:80rem;
  margin:0 auto;
  height:64px;
}
.site-logo {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex-shrink:0;
}
.site-logo img {
  height:36px;
  width:auto;
  max-width:44px;
  object-fit:contain;
  border-radius:4px;
}
.site-logo .name {
  font-family:'Outfit','Hind Siliguri',sans-serif;
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--primary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.header-right {
  display:flex;
  align-items:center;
  gap:12px;
}
.header-delivery {
  display:none;
  align-items:center;
  gap:6px;
  font-size:.85rem;
  font-weight:500;
  color:var(--muted-foreground);
}
@media(min-width:768px){ .header-delivery { display:flex; } }
.header-delivery svg { color:var(--primary); }
.btn-track {
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:var(--radius-xl);
  border:1px solid var(--border);
  background:var(--secondary);
  color:var(--foreground);
  font-size:.85rem;
  font-weight:600;
  cursor:pointer;
  transition:all .15s;
}
.btn-track:hover { background:var(--secondary); border-color:color-mix(in srgb,var(--primary) 40%,transparent); }
.btn-track svg { color:var(--primary); flex-shrink:0; }
.btn-track .track-label { display:none; }
@media(min-width:640px){ .btn-track .track-label { display:inline; } }
.btn-darkmode {
  padding:8px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--secondary);
  color:var(--foreground);
  cursor:pointer;
  transition:all .15s;
  display:flex;
  align-items:center;
  justify-content:center;
}
.btn-darkmode:hover { background:var(--border); }

/* ── Main & Container ───────────────────────────────────── */
main { flex:1; }
.container { max-width:80rem; margin:0 auto; padding:0 16px; }
@media(min-width:640px){ .container { padding:0 24px; } }
@media(min-width:1024px){ .container { padding:0 32px; } }

/* ── Hero Section ────────────────────────────────────────── */
.hero-section {
  position:relative;
  padding-top:64px;
  padding-bottom:128px;
  overflow:hidden;
  background:var(--background);
}
.hero-bg-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.5;
  z-index:0;
}
.dark .hero-bg-img { opacity:.2; }
.hero-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,
    color-mix(in srgb,var(--background) 20%,transparent) 0%,
    color-mix(in srgb,var(--background) 60%,transparent) 50%,
    var(--background) 100%
  );
  z-index:1;
}
.hero-content {
  position:relative;
  z-index:2;
  text-align:center;
  max-width:80rem;
  margin:0 auto;
  padding:0 16px;
}
.hero-badge {
  display:inline-block;
  padding:6px 16px;
  border-radius:9999px;
  background:color-mix(in srgb,var(--primary) 10%,transparent);
  color:var(--primary);
  font-weight:700;
  font-size:.875rem;
  margin-bottom:20px;
  border:1px solid color-mix(in srgb,var(--primary) 20%,transparent);
}
.hero-title {
  font-size:1.875rem;
  font-weight:800;
  letter-spacing:-0.03em;
  margin-bottom:16px;
  line-height:1.2;
}
@media(min-width:768px){ .hero-title { font-size:3rem; } }
.hero-subtitle {
  font-size:.875rem;
  color:var(--muted-foreground);
  margin-bottom:24px;
  max-width:36rem;
  margin-left:auto;
  margin-right:auto;
}
@media(min-width:768px){ .hero-subtitle { font-size:1rem; } }

/* ── Main Content (offset hero) ────────────────────────── */
.main-content {
  max-width:80rem;
  margin:0 auto;
  padding:0 16px 80px;
  margin-top:-80px;
  position:relative;
  z-index:10;
}
@media(min-width:640px){ .main-content { padding:0 24px 80px; } }
@media(min-width:1024px){ .main-content { padding:0 32px 80px; } }
.sections-stack > * + * { margin-top:56px; }

/* ── Section Header ──────────────────────────────────────── */
.section-header {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:20px;
}
.section-header-left { display:flex; flex-direction:column; }
.section-title-row {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:2px;
}
.section-title-row svg,
.section-title-row .section-icon { color:var(--primary); flex-shrink:0; }
.section-title {
  font-size:1.25rem;
  font-weight:700;
  color:var(--foreground);
}
.section-subtitle { font-size:.75rem; color:var(--muted-foreground); }
.section-see-all {
  display:flex;
  align-items:center;
  gap:4px;
  font-size:.875rem;
  color:var(--primary);
  font-weight:500;
  white-space:nowrap;
}
.section-see-all:hover { text-decoration:underline; }

/* ── Grids ───────────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.grid-3 { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.grid-4 { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.grid-cats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media(min-width:640px){
  .grid-3 { grid-template-columns:repeat(3,1fr); }
  .grid-4 { grid-template-columns:repeat(3,1fr); gap:12px; }
  .grid-cats { grid-template-columns:repeat(4,1fr); }
}
@media(min-width:1024px){
  .grid-4 { grid-template-columns:repeat(4,1fr); }
  .grid-cats { grid-template-columns:repeat(6,1fr); }
}

/* ── Offer Section Wrapper ───────────────────────────────── */
.offer-section-wrap {
  background:linear-gradient(to right,
    color-mix(in srgb,var(--destructive) 5%,transparent),
    color-mix(in srgb,var(--primary) 5%,transparent)
  );
  border-radius:var(--radius-2xl);
  padding:20px;
  border:1px solid color-mix(in srgb,var(--destructive) 10%,transparent);
}

/* ── Product Card ────────────────────────────────────────── */
.product-card {
  background:var(--card);
  border-radius:var(--radius-2xl);
  border:1px solid var(--border);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:all .3s;
  display:flex;
  flex-direction:column;
  height:100%;
}
.product-card:hover {
  box-shadow:var(--shadow-xl);
  transform:translateY(-4px);
}
.product-card-img-wrap {
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--secondary);
}
.product-card-img-wrap img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s;
}
.product-card:hover .product-card-img-wrap img { transform:scale(1.05); }
.product-card-body { padding:12px; display:flex; flex-direction:column; flex:1; }
.product-card-cat { font-size:.7rem; color:var(--muted-foreground); font-weight:500; margin-bottom:4px; }
.product-card-name {
  font-weight:700;
  font-size:.85rem;
  line-height:1.3;
  margin-bottom:8px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-card-name:hover { color:var(--primary); }
.product-card-footer { margin-top:auto; padding-top:8px; display:flex; align-items:center; justify-content:space-between; }
.product-card-price { font-size:1rem; font-weight:700; color:var(--primary); }
.product-card-orig { font-size:.75rem; text-decoration:line-through; color:var(--muted-foreground); margin-left:4px; }
.product-card-stockout .product-card-price { color:var(--muted-foreground); }
.product-card-arrow {
  width:28px;
  height:28px;
  border-radius:50%;
  background:color-mix(in srgb,var(--primary) 10%,transparent);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .2s;
  flex-shrink:0;
}
.product-card-arrow:hover { background:var(--primary); color:var(--primary-foreground); }

/* Badges */
.badge-discount {
  position:absolute;
  top:12px;
  left:12px;
  z-index:10;
  background:var(--destructive);
  color:#fff;
  font-size:.7rem;
  font-weight:700;
  padding:3px 10px;
  border-radius:9999px;
  box-shadow:var(--shadow-sm);
}
.badge-offer {
  position:absolute;
  top:12px;
  right:12px;
  z-index:10;
  background:var(--primary);
  color:var(--primary-foreground);
  font-size:.7rem;
  font-weight:700;
  padding:3px 10px;
  border-radius:9999px;
  display:flex;
  align-items:center;
  gap:3px;
}
.stockout-overlay {
  position:absolute;
  inset:0;
  z-index:10;
  background:rgba(0,0,0,.4);
  display:flex;
  align-items:center;
  justify-content:center;
}
.stockout-badge-img {
  background:hsl(24,95%,53%);
  color:#fff;
  font-size:.75rem;
  font-weight:700;
  padding:6px 14px;
  border-radius:9999px;
  box-shadow:var(--shadow-lg);
  transform:rotate(-5deg);
}
.badge-stockout-corner {
  background:hsl(24,95%,53%);
  color:#fff;
  font-size:.7rem;
  font-weight:700;
  padding:3px 8px;
  border-radius:9999px;
  border:1px solid hsl(24,80%,40%);
}

/* ── Category Cards ──────────────────────────────────────── */
.category-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:12px;
  background:var(--card);
  border-radius:var(--radius-2xl);
  border:1px solid var(--border);
  cursor:pointer;
  transition:all .2s;
  text-align:center;
  text-decoration:none;
  color:var(--foreground);
}
.category-card:hover {
  border-color:var(--primary);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.category-card img {
  width:40px;
  height:40px;
  border-radius:var(--radius-xl);
  object-fit:cover;
}
.category-card .cat-icon { font-size:1.875rem; }
.category-card .cat-name {
  font-size:.75rem;
  font-weight:500;
  color:var(--foreground);
  line-height:1.3;
  transition:color .2s;
}
.category-card:hover .cat-name { color:var(--primary); }
.category-card .cat-gender { font-size:.65rem; color:var(--muted-foreground); }

/* ── Gender Tabs ─────────────────────────────────────────── */
.gender-tabs { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.gender-tab {
  padding:6px 16px;
  border-radius:9999px;
  border:1px solid var(--border);
  background:var(--background);
  color:var(--muted-foreground);
  font-size:.875rem;
  font-weight:500;
  cursor:pointer;
  transition:all .15s;
}
.gender-tab.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.gender-tab:hover:not(.active) { border-color:var(--primary); color:var(--primary); }

/* ── Loading Spinner ─────────────────────────────────────── */
.spinner {
  display:flex;
  justify-content:center;
  padding:64px;
}
.spinner-circle {
  width:40px;
  height:40px;
  border:4px solid color-mix(in srgb,var(--primary) 30%,transparent);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Empty State ─────────────────────────────────────────── */
.empty-state {
  text-align:center;
  padding:56px 24px;
  background:var(--card);
  border-radius:var(--radius-2xl);
  border:1px solid var(--border);
}
.empty-state-icon { color:var(--muted-foreground); opacity:.3; margin:0 auto 16px; }

/* ── Footer ──────────────────────────────────────────────── */
footer.site-footer {
  background:var(--card);
  border-top:1px solid var(--border);
  margin-top:80px;
}
.footer-inner {
  max-width:80rem;
  margin:0 auto;
  padding:48px 16px;
}
@media(min-width:640px){ .footer-inner { padding:48px 24px; } }
.footer-features {
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  margin-bottom:32px;
  border-bottom:1px solid var(--border);
  padding-bottom:32px;
}
@media(min-width:768px){ .footer-features { grid-template-columns:repeat(3,1fr); } }
.footer-feature {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:16px;
  background:color-mix(in srgb,var(--secondary) 50%,transparent);
  border-radius:var(--radius-2xl);
}
.footer-feature-icon {
  background:var(--card);
  padding:12px;
  border-radius:50%;
  box-shadow:var(--shadow-sm);
  margin-bottom:16px;
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
}
.footer-feature h4 { font-size:.95rem; font-weight:700; margin-bottom:8px; }
.footer-feature p { font-size:.8rem; color:var(--muted-foreground); line-height:1.5; }
.footer-credit {
  text-align:center;
  font-size:.85rem;
  color:var(--muted-foreground);
}

/* ── WhatsApp FAB ────────────────────────────────────────── */
.whatsapp-fab {
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:50;
  display:flex;
  align-items:center;
  gap:8px;
  background:#25D366;
  color:#fff;
  padding:12px 16px 12px 12px;
  border-radius:9999px;
  box-shadow:var(--shadow-2xl);
  text-decoration:none;
  transition:all .2s;
  font-weight:700;
  font-size:.875rem;
}
.whatsapp-fab:hover { background:#20bd5a; transform:translateY(-4px); }
.whatsapp-fab-label { display:none; }
.whatsapp-fab:hover .whatsapp-fab-label { display:inline; }

/* ── Product Page ────────────────────────────────────────── */
.product-page-wrap {
  max-width:80rem;
  margin:0 auto;
  padding:0 16px 80px;
}
@media(min-width:640px){ .product-page-wrap { padding:0 24px 80px; } }
@media(min-width:1024px){ .product-page-wrap { padding:0 32px 80px; } }

.back-btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--muted-foreground);
  font-weight:600;
  font-size:.875rem;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:8px 16px;
  margin:16px 0;
  cursor:pointer;
  transition:all .15s;
  text-decoration:none;
}
.back-btn:hover { color:var(--foreground); border-color:color-mix(in srgb,var(--primary) 40%,transparent); box-shadow:var(--shadow-sm); }

.product-layout {
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  margin-top:16px;
}
@media(min-width:768px){
  .product-layout { grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
}

/* Gallery */
.gallery-card {
  background:var(--card);
  border-radius:var(--radius-2xl);
  padding:16px;
  box-shadow:var(--shadow-xl);
  border:1px solid var(--border);
  position:relative;
}
.gallery-save-badge {
  position:absolute;
  top:-16px;
  right:-16px;
  background:var(--destructive);
  color:#fff;
  font-family:'Outfit',sans-serif;
  font-weight:700;
  font-size:1.1rem;
  padding:8px 16px;
  border-radius:9999px;
  box-shadow:var(--shadow-lg);
  transform:rotate(3deg);
  z-index:10;
}
.gallery-main-img {
  aspect-ratio:1;
  border-radius:var(--radius-xl);
  overflow:hidden;
  background:var(--secondary);
  position:relative;
}
.gallery-main-img img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s;
}
.gallery-main-img img:hover { transform:scale(1.05); }
.gallery-nav {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:color-mix(in srgb,var(--card) 90%,transparent);
  color:var(--foreground);
  border:none;
  padding:8px;
  border-radius:50%;
  box-shadow:var(--shadow-md);
  cursor:pointer;
  transition:all .15s;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
}
.gallery-nav:hover { background:var(--card); }
.gallery-nav-prev { left:8px; }
.gallery-nav-next { right:8px; }
.gallery-dots {
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  z-index:5;
}
.gallery-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  border:none;
  cursor:pointer;
  transition:all .15s;
  padding:0;
}
.gallery-dot.active { background:#fff; transform:scale(1.25); }
.gallery-thumbs { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-top:12px; }
.gallery-thumb {
  flex-shrink:0;
  width:64px;
  height:64px;
  border-radius:var(--radius-xl);
  overflow:hidden;
  border:2px solid transparent;
  cursor:pointer;
  transition:all .15s;
}
.gallery-thumb.active { border-color:var(--primary); box-shadow:var(--shadow-md); }
.gallery-thumb:hover:not(.active) { border-color:color-mix(in srgb,var(--primary) 40%,transparent); }
.gallery-thumb img { width:100%; height:100%; object-fit:cover; }
.gallery-trust-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.gallery-trust-card {
  background:color-mix(in srgb,var(--secondary) 50%,transparent);
  border-radius:var(--radius-xl);
  padding:12px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.85rem;
  font-weight:600;
}
.gallery-trust-card svg { color:var(--primary); flex-shrink:0; }

/* Product Info Panel */
.product-info-panel { display:flex; flex-direction:column; }
.product-category-badge {
  display:inline-block;
  margin-bottom:12px;
  font-size:.875rem;
  font-weight:600;
  color:var(--primary);
  background:color-mix(in srgb,var(--primary) 10%,transparent);
  padding:4px 12px;
  border-radius:9999px;
  width:fit-content;
}
.product-title { font-size:1.5rem; font-weight:700; margin-bottom:12px; line-height:1.3; }
@media(min-width:768px){ .product-title { font-size:2rem; } }
.product-stockout-banner {
  display:flex;
  align-items:center;
  gap:8px;
  background:hsl(38,92%,95%);
  border:1px solid hsl(38,80%,80%);
  color:hsl(30,80%,40%);
  padding:10px 16px;
  border-radius:var(--radius-xl);
  font-weight:700;
  font-size:.875rem;
  margin-bottom:16px;
}
.dark .product-stockout-banner {
  background:hsl(30,50%,15%);
  border-color:hsl(30,60%,30%);
  color:hsl(30,80%,70%);
}
.product-price-row {
  display:flex;
  align-items:flex-end;
  gap:16px;
  margin-bottom:24px;
  padding-bottom:24px;
  border-bottom:1px solid var(--border);
}
.product-price-main {
  font-family:'Outfit',sans-serif;
  font-size:2.5rem;
  font-weight:800;
  color:var(--primary);
  line-height:1;
}
@media(min-width:768px){ .product-price-main { font-size:3rem; } }
.product-price-orig {
  font-size:1.25rem;
  color:var(--muted-foreground);
  text-decoration:line-through;
  font-weight:500;
  margin-bottom:4px;
}
.product-description {
  color:var(--muted-foreground);
  font-size:.9rem;
  line-height:1.7;
  margin-bottom:32px;
  white-space:pre-wrap;
}

/* Variants */
.variants-section {
  background:color-mix(in srgb,var(--secondary) 30%,transparent);
  border-radius:var(--radius-2xl);
  border:1px solid var(--border);
  padding:16px;
  margin-bottom:24px;
}
.variant-group-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.variant-group-label { font-weight:700; font-size:.875rem; }
.variant-selected-badge {
  font-size:.7rem;
  font-weight:600;
  color:var(--primary);
  background:color-mix(in srgb,var(--primary) 10%,transparent);
  padding:2px 10px;
  border-radius:9999px;
}
.variant-options { display:flex; flex-wrap:wrap; gap:8px; }
.variant-btn {
  padding:6px 14px;
  border-radius:var(--radius-xl);
  border:2px solid var(--border);
  background:var(--card);
  color:var(--foreground);
  font-weight:600;
  font-size:.875rem;
  cursor:pointer;
  transition:all .15s;
}
.variant-btn:hover { border-color:var(--primary); }
.variant-btn.selected { border-color:var(--primary); background:var(--primary); color:#fff; box-shadow:var(--shadow-md); }
.variant-btn.error { border-color:color-mix(in srgb,var(--destructive) 50%,transparent); }
.variant-error-msg { font-size:.75rem; color:var(--destructive); margin-top:6px; }

/* Scroll to form button */
.btn-order-pulse {
  width:100%;
  background:var(--primary);
  color:var(--primary-foreground);
  font-family:'Outfit','Hind Siliguri',sans-serif;
  font-weight:700;
  font-size:1.1rem;
  padding:16px 32px;
  border-radius:var(--radius-2xl);
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  box-shadow:0 20px 25px -5px color-mix(in srgb,var(--primary) 25%,transparent);
  transition:all .3s;
  animation:pulse-btn 2s ease-in-out infinite;
}
.btn-order-pulse:hover {
  transform:translateY(-4px);
  box-shadow:0 25px 30px -5px color-mix(in srgb,var(--primary) 30%,transparent);
}
@keyframes pulse-btn {
  0%,100% { box-shadow:0 20px 25px -5px color-mix(in srgb,var(--primary) 25%,transparent); }
  50% { box-shadow:0 20px 25px -5px color-mix(in srgb,var(--primary) 40%,transparent),0 0 0 8px color-mix(in srgb,var(--primary) 10%,transparent); }
}
.btn-stockout-disabled {
  width:100%;
  background:hsl(38,92%,95%);
  color:hsl(30,80%,40%);
  font-weight:700;
  font-size:1.1rem;
  padding:16px 32px;
  border-radius:var(--radius-2xl);
  border:2px solid hsl(38,80%,80%);
  text-align:center;
}

/* ── Order Form ──────────────────────────────────────────── */
.order-form-wrap {
  max-width:42rem;
  margin:0 auto;
  padding:0 16px 40px;
  scroll-margin-top:80px;
}
@media(min-width:640px){ .order-form-wrap { padding:0 24px 40px; } }
.order-form-card {
  background:var(--card);
  border-radius:2rem;
  box-shadow:var(--shadow-2xl);
  border:1px solid color-mix(in srgb,var(--border) 50%,transparent);
  overflow:hidden;
  position:relative;
}
.order-form-top-bar {
  height:8px;
  background:linear-gradient(to right,var(--primary),color-mix(in srgb,var(--primary) 50%,transparent));
}
.order-form-body { padding:24px; }
@media(min-width:768px){ .order-form-body { padding:40px; } }
.order-form-title { font-size:1.25rem; font-weight:700; margin-bottom:4px; text-align:center; }
@media(min-width:768px){ .order-form-title { font-size:1.5rem; } }
.order-form-subtitle { font-size:.875rem; color:var(--muted-foreground); text-align:center; margin-bottom:32px; }
.form-section-label {
  font-size:.7rem;
  font-weight:700;
  color:var(--muted-foreground);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:12px;
}
.form-stack > * + * { margin-top:16px; }
.form-group { display:flex; flex-direction:column; }
.form-label { font-weight:600; font-size:.875rem; margin-bottom:6px; }
.form-control {
  width:100%;
  padding:14px 16px;
  border-radius:var(--radius-xl);
  background:color-mix(in srgb,var(--secondary) 30%,transparent);
  border:1px solid var(--border);
  color:var(--foreground);
  font-size:.9rem;
  transition:all .15s;
  outline:none;
}
.form-control:focus {
  background:var(--background);
  border-color:var(--primary);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 10%,transparent);
}
.form-control.error { border-color:color-mix(in srgb,var(--destructive) 50%,transparent); }
select.form-control { appearance:none; -webkit-appearance:none; cursor:pointer; }
textarea.form-control { resize:none; }
.select-wrap { position:relative; }
.select-arrow {
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted-foreground);
  pointer-events:none;
}

/* Address Builder */
.address-builder { display:flex; flex-direction:column; gap:10px; }
.address-builder .form-control[disabled] { opacity:.5; cursor:not-allowed; }
.zone-badge {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:var(--radius-xl);
  font-size:.8rem;
  font-weight:600;
  border:1px solid;
}
.zone-badge-dhaka {
  background:hsl(213,100%,97%);
  border-color:hsl(213,80%,80%);
  color:hsl(213,80%,45%);
}
.zone-badge-outside {
  background:hsl(38,100%,95%);
  border-color:hsl(38,80%,75%);
  color:hsl(30,80%,40%);
}
.dark .zone-badge-dhaka { background:hsl(213,50%,15%); border-color:hsl(213,60%,30%); color:hsl(213,80%,70%); }
.dark .zone-badge-outside { background:hsl(30,50%,15%); border-color:hsl(30,60%,30%); color:hsl(38,80%,70%); }

/* Quantity control */
.qty-row { display:flex; align-items:center; gap:12px; }
.qty-btn {
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--secondary);
  border:1px solid var(--border);
  font-size:1.2rem;
  font-weight:700;
  cursor:pointer;
  transition:all .15s;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--foreground);
}
.qty-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.qty-num {
  font-family:'Outfit',sans-serif;
  font-size:1.3rem;
  font-weight:700;
  min-width:32px;
  text-align:center;
}

/* Payment methods */
.payment-methods-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media(min-width:400px){ .payment-methods-grid { grid-template-columns:repeat(2,1fr); } }
.payment-method-btn {
  padding:10px 8px;
  border-radius:var(--radius-xl);
  border:2px solid var(--border);
  background:var(--card);
  cursor:pointer;
  transition:all .15s;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-align:center;
}
.payment-method-btn:hover { border-color:color-mix(in srgb,var(--primary) 50%,transparent); }
.payment-method-btn.selected { border-color:var(--primary); background:color-mix(in srgb,var(--primary) 5%,transparent); }
.payment-method-btn img { height:24px; object-fit:contain; margin-bottom:2px; }
.payment-method-btn .pm-emoji { font-size:1.2rem; }
.payment-method-btn .pm-name { font-size:.75rem; font-weight:700; }
.payment-method-btn .pm-offer { font-size:.65rem; color:var(--primary); font-weight:600; }
.payment-number-box {
  background:var(--secondary);
  border-radius:var(--radius-xl);
  padding:14px;
  margin-top:4px;
}
.payment-number-label { font-size:.8rem; font-weight:700; margin-bottom:4px; }
.payment-number-val { font-size:1.2rem; font-weight:800; color:var(--primary); margin:4px 0 8px; }
.btn-copy {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:var(--radius-lg);
  background:var(--card);
  border:1px solid var(--border);
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  transition:all .15s;
  color:var(--foreground);
}
.btn-copy:hover { background:var(--border); }

/* Free delivery banner */
.free-delivery-banner {
  border-radius:var(--radius-2xl);
  border:2px solid hsl(142,60%,80%);
  background:hsl(142,60%,97%);
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px;
}
.dark .free-delivery-banner {
  border-color:hsl(142,50%,25%);
  background:hsl(142,30%,12%);
}

/* Order Summary */
.order-summary-box {
  background:color-mix(in srgb,var(--secondary) 50%,transparent);
  border-radius:var(--radius-xl);
  padding:16px;
}
.order-summary-row {
  display:flex;
  justify-content:space-between;
  padding:6px 0;
  border-bottom:1px solid color-mix(in srgb,var(--border) 50%,transparent);
  font-size:.875rem;
}
.order-summary-row:last-child { border:none; padding-top:10px; font-size:1rem; font-weight:700; }
.order-summary-label { color:var(--muted-foreground); }
.btn-submit-order {
  width:100%;
  background:var(--primary);
  color:var(--primary-foreground);
  font-family:'Outfit','Hind Siliguri',sans-serif;
  font-weight:700;
  font-size:1.1rem;
  padding:16px;
  border-radius:var(--radius-xl);
  border:none;
  cursor:pointer;
  transition:all .2s;
  box-shadow:0 4px 14px color-mix(in srgb,var(--primary) 30%,transparent);
}
.btn-submit-order:hover { background:color-mix(in srgb,var(--primary) 90%,black); transform:translateY(-1px); }
.btn-submit-order:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* ── Success Page ────────────────────────────────────────── */
.success-wrap {
  max-width:42rem;
  margin:64px auto;
  padding:0 16px;
}
.success-card {
  background:var(--card);
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-xl);
  border:1px solid hsl(142,60%,85%);
  padding:32px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.dark .success-card { border-color:hsl(142,30%,25%); }
.success-top-bar { position:absolute; top:0; left:0; right:0; height:8px; background:hsl(142,71%,45%); }
.success-icon-wrap {
  width:96px;
  height:96px;
  background:hsl(142,60%,95%);
  color:hsl(142,71%,45%);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 24px;
}
.dark .success-icon-wrap { background:hsl(142,30%,15%); color:hsl(142,60%,55%); }
.success-title { font-size:1.5rem; font-weight:700; margin-bottom:12px; }
@media(min-width:768px){ .success-title { font-size:1.875rem; } }
.success-subtitle { color:var(--muted-foreground); margin-bottom:24px; }
.success-actions { display:flex; flex-direction:column; gap:12px; }
@media(min-width:640px){ .success-actions { flex-direction:row; } }
.btn-continue {
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--primary);
  color:#fff;
  font-weight:700;
  padding:14px 24px;
  border-radius:var(--radius-xl);
  transition:all .15s;
  box-shadow:0 4px 14px color-mix(in srgb,var(--primary) 30%,transparent);
  text-decoration:none;
}
.btn-continue:hover { background:color-mix(in srgb,var(--primary) 90%,black); }
.btn-track-order {
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--border);
  color:var(--muted-foreground);
  font-weight:600;
  padding:14px 24px;
  border-radius:var(--radius-xl);
  transition:all .15s;
  font-size:.875rem;
  text-decoration:none;
}
.btn-track-order:hover { background:var(--secondary); color:var(--foreground); }

/* ── Track Page ──────────────────────────────────────────── */
.track-page { max-width:42rem; margin:0 auto; padding:40px 16px; }
.track-page-wrap { max-width:42rem; margin:0 auto; padding:32px 16px 80px; }
@media(min-width:640px){ .track-page-wrap { padding:40px 24px 80px; } }
.track-icon-wrap { text-align:center; margin-bottom:28px; }
.track-page-icon { font-size:3rem; margin-bottom:10px; }
.track-page-title { font-size:1.5rem; font-weight:800; margin:0 0 6px; }
.track-page-sub { font-size:.875rem; color:var(--muted-foreground); margin:0; }
.track-search-row { display:flex; gap:10px; }
.track-header { text-align:center; margin-bottom:32px; }
.track-search-card {
  background:var(--card);
  border-radius:var(--radius-2xl);
  border:1px solid var(--border);
  padding:20px;
  margin-bottom:24px;
  box-shadow:var(--shadow-sm);
}
.track-search-form { display:flex; gap:12px; }
.track-input {
  flex:1;
  padding:14px 16px;
  border-radius:var(--radius-xl);
  background:color-mix(in srgb,var(--secondary) 40%,transparent);
  border:1px solid var(--border);
  text-align:center;
  font-size:1.1rem;
  font-family:monospace;
  letter-spacing:.15em;
  outline:none;
  transition:all .15s;
  color:var(--foreground);
}
.track-input:focus { border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 10%,transparent); }
.btn-track-search {
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--primary);
  color:#fff;
  padding:14px 20px;
  border-radius:var(--radius-xl);
  font-weight:700;
  border:none;
  cursor:pointer;
  transition:all .15s;
  box-shadow:0 4px 14px color-mix(in srgb,var(--primary) 30%,transparent);
}
.btn-track-search:disabled { opacity:.5; cursor:not-allowed; }
.btn-track-search .btn-search-label { display:none; }
@media(min-width:640px){ .btn-track-search .btn-search-label { display:inline; } }
.track-error {
  background:hsl(0,60%,97%);
  border:1px solid hsl(0,60%,85%);
  color:hsl(0,60%,45%);
  border-radius:var(--radius-2xl);
  padding:16px 20px;
  text-align:center;
  font-weight:600;
  margin-bottom:24px;
}
.dark .track-error { background:hsl(0,30%,12%); border-color:hsl(0,40%,25%); color:hsl(0,60%,65%); }

/* Status card */
.status-card {
  border-radius:var(--radius-2xl);
  border:2px solid;
  padding:20px;
  display:flex;
  align-items:center;
  gap:12px;
}
/* Progress steps */
.progress-card {
  background:var(--card);
  border-radius:var(--radius-2xl);
  border:1px solid var(--border);
  padding:20px;
}
.progress-steps {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.progress-line-bg {
  position:absolute;
  top:16px;
  left:16px;
  right:16px;
  height:2px;
  background:var(--border);
  z-index:0;
}
.progress-line-fill {
  position:absolute;
  top:16px;
  left:16px;
  height:2px;
  background:var(--primary);
  z-index:1;
  transition:width .5s;
}
.progress-step { display:flex; flex-direction:column; align-items:center; gap:8px; z-index:2; }
.step-circle {
  width:32px;
  height:32px;
  border-radius:50%;
  border:2px solid var(--border);
  background:var(--card);
  color:var(--muted-foreground);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .3s;
}
.step-circle.done { background:var(--primary); border-color:var(--primary); color:#fff; }
.step-circle.active { box-shadow:0 4px 12px color-mix(in srgb,var(--primary) 30%,transparent); transform:scale(1.1); }
.step-label { font-size:.7rem; color:var(--muted-foreground); text-align:center; max-width:60px; line-height:1.3; }
.step-label.done { color:var(--primary); font-weight:600; }

/* Track order details */
.track-details-card {
  background:var(--card);
  border-radius:var(--radius-2xl);
  border:1px solid var(--border);
  overflow:hidden;
}
.track-details-header {
  padding:12px 20px;
  background:color-mix(in srgb,var(--secondary) 30%,transparent);
  border-bottom:1px solid var(--border);
  font-weight:700;
  font-size:.875rem;
}
.track-detail-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 20px;
  border-bottom:1px solid var(--border);
  font-size:.875rem;
}
.track-detail-row:last-child { border:none; }
.track-detail-label { color:var(--muted-foreground); }
.track-detail-val { font-weight:600; text-align:right; max-width:55%; }
.track-empty { text-align:center; color:var(--muted-foreground); padding:32px; font-size:.875rem; }

/* ── Category Page ───────────────────────────────────────── */
.category-page-wrap {
  max-width:80rem;
  margin:0 auto;
  padding:24px 16px 80px;
}
@media(min-width:640px){ .category-page-wrap { padding:24px 24px 80px; } }
.back-link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--muted-foreground);
  font-size:.875rem;
  font-weight:500;
  text-decoration:none;
  transition:color .15s;
}
.back-link:hover { color:var(--foreground); }
.cat-page-header {
  display:flex;
  align-items:center;
  gap:16px;
}
.cat-page-icon-wrap {
  width:72px;
  height:72px;
  border-radius:var(--radius-xl);
  background:color-mix(in srgb,var(--primary) 10%,transparent);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  overflow:hidden;
  font-size:2.2rem;
}

/* ── Admin Layout ────────────────────────────────────────── */
.admin-wrap { display:flex; min-height:100vh; }
.admin-sidebar {
  width:250px;
  background:#1e293b;
  color:#f1f5f9;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  z-index:200;
  transform:translateX(-100%);
  transition:transform .25s;
}
.admin-sidebar.open { transform:translateX(0); }
@media(min-width:1024px){ .admin-sidebar { transform:translateX(0); position:sticky; } }
.admin-main {
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}
@media(min-width:1024px){ .admin-main { margin-left:250px; } }
.admin-topbar {
  background:var(--card);
  border-bottom:1px solid var(--border);
  padding:12px 20px;
  display:flex;
  align-items:center;
  gap:12px;
  sticky:top-0;
  z-index:100;
  position:sticky;
  top:0;
}
.admin-topbar-title { font-weight:700; font-size:1.1rem; }
.admin-content { padding:24px; flex:1; }
.sidebar-header {
  padding:20px 16px;
  border-bottom:1px solid rgba(255,255,255,.1);
  font-family:'Outfit',sans-serif;
  font-size:1.1rem;
  font-weight:700;
  color:#f97316;
}
.sidebar-nav { padding:8px 0; flex:1; overflow-y:auto; }
.sidebar-link {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 16px;
  color:#94a3b8;
  font-size:.9rem;
  font-weight:500;
  text-decoration:none;
  transition:.15s;
  border-radius:8px;
  margin:2px 8px;
}
.sidebar-link:hover { background:rgba(255,255,255,.08); color:#f1f5f9; }
.sidebar-link.active { background:rgba(249,115,22,.15); color:#f97316; }
.sidebar-link svg { flex-shrink:0; }
.sidebar-footer {
  padding:12px 16px;
  border-top:1px solid rgba(255,255,255,.1);
}

/* Admin toggle on mobile */
.menu-toggle {
  background:none;
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px;
  cursor:pointer;
  color:var(--foreground);
  display:flex;
  align-items:center;
  justify-content:center;
}
@media(min-width:1024px){ .menu-toggle { display:none; } }
.sidebar-overlay {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:150;
}
.sidebar-overlay.active { display:block; }

/* Admin Cards/Tables */
.card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:20px;
  margin-bottom:20px;
}
.card-title { font-weight:700; font-size:1rem; margin-bottom:16px; color:var(--foreground); }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.875rem; }
thead { background:var(--secondary); }
th { padding:10px 12px; text-align:left; font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted-foreground); border-bottom:1px solid var(--border); }
td { padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:hover td { background:color-mix(in srgb,var(--secondary) 30%,transparent); }

/* Badges */
.badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:9999px; font-size:.75rem; font-weight:700; }
.badge-pending   { background:hsl(38,100%,95%);  color:hsl(32,95%,35%); }
.badge-confirmed { background:hsl(213,100%,95%); color:hsl(221,83%,40%); }
.badge-shipped   { background:hsl(270,100%,95%); color:hsl(262,80%,45%); }
.badge-rfd       { background:hsl(24,100%,95%);  color:hsl(24,80%,40%); }
.badge-delivered { background:hsl(142,60%,95%);  color:hsl(142,60%,30%); }
.badge-cancelled { background:hsl(270,60%,95%);  color:hsl(262,60%,40%); }
.badge-return    { background:hsl(0,60%,95%);    color:hsl(0,60%,40%); }
.badge-gray      { background:var(--secondary);  color:var(--muted-foreground); }

/* Form helpers */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-weight:600; font-size:.875rem; margin-bottom:6px; }
.admin-form-control {
  width:100%;
  padding:10px 14px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:var(--background);
  color:var(--foreground);
  font-size:.9rem;
  transition:all .15s;
  outline:none;
}
.admin-form-control:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent); }
.text-xs { font-size:.75rem; }
.text-sm { font-size:.875rem; }
.text-muted { color:var(--muted-foreground); }
.font-bold { font-weight:700; }
.font-mono { font-family:monospace; }
.mt-1 { margin-top:4px; }
.mt-2 { margin-top:8px; }
.mt-3 { margin-top:12px; }
.mb-2 { margin-bottom:8px; }
.mb-3 { margin-bottom:12px; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:var(--radius-lg); font-weight:600; font-size:.9rem; cursor:pointer; transition:all .15s; border:none; text-decoration:none; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:color-mix(in srgb,var(--primary) 90%,black); }
.btn-secondary { background:var(--secondary); color:var(--foreground); border:1px solid var(--border); }
.btn-secondary:hover { background:var(--border); }
.btn-danger { background:hsl(0,60%,95%); color:hsl(0,60%,40%); border:1px solid hsl(0,60%,85%); }
.btn-danger:hover { background:hsl(0,60%,90%); }
.btn-sm { padding:6px 12px; font-size:.8rem; }
.btn-full { width:100%; justify-content:center; }

/* Alerts */
.alert { padding:12px 16px; border-radius:var(--radius-lg); margin-bottom:16px; font-size:.875rem; font-weight:600; }
.alert-success { background:hsl(142,60%,95%); color:hsl(142,60%,30%); border:1px solid hsl(142,60%,80%); }
.alert-error { background:hsl(0,60%,95%); color:hsl(0,60%,40%); border:1px solid hsl(0,60%,80%); }

/* Modals */
.modal-overlay {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:1000;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.modal-overlay.active { display:flex; }
.modal {
  background:var(--card);
  border-radius:var(--radius-2xl);
  max-width:640px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:var(--shadow-2xl);
}
.modal-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  font-weight:700;
}
.modal-body { padding:20px; }
.close-btn {
  background:var(--secondary);
  border:none;
  border-radius:50%;
  width:32px;
  height:32px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--foreground);
  font-size:1rem;
}
.close-btn:hover { background:var(--border); }

/* Misc */
.search-bar input {
  width:100%;
  max-width:320px;
  padding:10px 14px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:var(--background);
  color:var(--foreground);
  outline:none;
}
.search-bar input:focus { border-color:var(--primary); }