/* =========================================================
   BOSDIGI - Custom Styles (Light mode only)
   ========================================================= */
:root {
  --bd-red: #e11d2a;
  --bd-red-dark: #b01722;
  --bd-red-soft: #fff1f2;
  --bd-black: #0f0f10;
  --bd-gray: #6b7280;
  --bd-bg: #ffffff;
  --bd-bg-soft: #f7f7f8;
  --bd-border: #ececee;
  --bd-shadow: 0 10px 40px -12px rgba(15, 15, 16, .12);
  --bd-shadow-red: 0 12px 34px -10px rgba(225, 29, 42, .45);
}

* { -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--bd-black);
  background: var(--bd-bg);
}
h1, h2, h3, h4, .font-display {
  font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
}

/* Selection */
::selection { background: var(--bd-red); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bd-bg-soft); }
::-webkit-scrollbar-thumb { background: #d9d9dd; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--bd-red); }

/* Gradient text */
.text-gradient {
  background: linear-gradient(100deg, var(--bd-red), var(--bd-red-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; border-radius:9999px; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease; }
.btn-primary { background: linear-gradient(100deg, var(--bd-red), var(--bd-red-dark)); color:#fff; box-shadow: var(--bd-shadow-red); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(225,29,42,.55); }
.btn-dark { background: var(--bd-black); color:#fff; }
.btn-dark:hover { transform: translateY(-2px); background:#000; }
.btn-outline { border:1.5px solid var(--bd-border); color: var(--bd-black); background:#fff; }
.btn-outline:hover { border-color: var(--bd-red); color: var(--bd-red); transform: translateY(-2px); }

/* Cards */
.card-hover { transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease; }
.card-hover:hover { transform: translateY(-6px); box-shadow: var(--bd-shadow); }

/* Product image zoom */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.card-hover:hover .img-zoom img { transform: scale(1.08); }

/* Announcement marquee */
.badge-discount {
  background: var(--bd-red); color:#fff; font-weight:700;
  font-size:.7rem; padding:.15rem .5rem; border-radius:6px;
}

/* Section decorative dots */
.bg-dots {
  background-image: radial-gradient(var(--bd-border) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.visible { opacity: 1; transform: none; }

/* Hero slider */
.slide { display:none; }
.slide.active { display:block; animation: fade .8s ease; }
@keyframes fade { from { opacity:.4; } to { opacity:1; } }

/* Nav link underline */
.nav-link { position: relative; }
.nav-link::after {
  content:''; position:absolute; left:0; bottom:-4px; height:2px; width:0;
  background: var(--bd-red); transition: width .3s ease;
}
.nav-link:hover::after, .nav-link.active::after { width:100%; }

/* Floating cart pulse */
@keyframes pulse-red { 0%,100% { box-shadow: 0 0 0 0 rgba(225,29,42,.5);} 50% { box-shadow: 0 0 0 12px rgba(225,29,42,0);} }
.cart-pulse { animation: pulse-red 2.2s infinite; }

/* Stat counter card */
.glass { background: rgba(255,255,255,.7); backdrop-filter: blur(14px); }

/* Admin sidebar link */
.admin-link { transition: background-color .2s ease, color .2s ease; }
.admin-link:hover { background: var(--bd-red-soft); color: var(--bd-red); }
.admin-link.active { background: linear-gradient(100deg, var(--bd-red), var(--bd-red-dark)); color:#fff; }

/* Table */
.tbl th { text-transform: uppercase; font-size:.7rem; letter-spacing:.05em; color: var(--bd-gray); }
.tbl tbody tr { transition: background-color .15s ease; }
.tbl tbody tr:hover { background: var(--bd-bg-soft); }

/* Status pill */
.pill { font-size:.72rem; font-weight:600; padding:.2rem .6rem; border-radius:9999px; }
.pill-paid { background:#dcfce7; color:#15803d; }
.pill-pending { background:#fef9c3; color:#a16207; }
.pill-expired, .pill-cancelled, .pill-revoked { background:#fee2e2; color:#b91c1c; }
.pill-active { background:#dcfce7; color:#15803d; }

/* Line clamp */
.clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }