/* ===========================
   StarShipDealers – Global UI
   (clean + optimized stylesheet)
   =========================== */

/* ---------- Honeypot field - MUST be hidden ---------- */
input[name="nickname"],
.field-nickname,
#id_nickname {
  position: absolute !important;
  left: -9999px !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* ---------- Design tokens ---------- */
:root{
  /* Core palette */
  --bg:#0a0f1c;
  --panel:rgba(15,25,42,.65);
  --panel-strong:rgba(5,10,20,.85);
  --line:rgba(0,212,255,.35);
  --line-soft:rgba(0,212,255,.18);
  --primary:#00d4ff;
  --primary-2:#0080ff;
  --text:#ffffff;
  --muted:#b8c2d9;
  --success:#21e6a3;
  --warning:#ffcc66;
  --danger:#ff7a7a;

  /* Shadows & radii */
  --shadow:0 20px 60px rgba(0,212,255,.20);
  --radius:16px;

  /* Blog sizing caps */
  --article-body-max: 760px;    /* column width cap in article detail */
  --article-img-max: 760px;     /* hard cap for images in detail */
  --list-card-min-h: 160px;     /* cards min cover height (list) */
  --list-card-ideal-h: 18vw;    /* responsive ideal height (list) */
  --list-card-max-h: 240px;     /* cards max cover height (list) */

  /* Bootstrap bridge: map BS variables to our dark theme */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);           /* body text → white */
  --bs-emphasis-color: var(--text);       /* strong/emphasis */
  --bs-heading-color: var(--text);        /* h1–h6 → white */
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-2);

  --header-h: 64px;
  }

/* ---------- Reset / base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  padding-top: var(--header-h);
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* ---------- Space background & layers ---------- */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background: url("../images/StarShipDealers/Background-StarShip.ecf77a71a366.jpg") center / cover no-repeat fixed, var(--bg);
  filter:brightness(.75) saturate(1.1);
}
.stars{position:fixed;inset:0;pointer-events:none;z-index:-1}
.star{position:absolute;background:#fff;border-radius:50%;opacity:.5;animation:twinkle 3s ease-in-out infinite}
.star:nth-child(odd){animation-delay:1.2s}
.hyper{position:absolute;height:1px;background:linear-gradient(90deg,transparent,var(--primary),transparent);opacity:.6;animation:hyper 2.2s linear infinite}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
@keyframes hyper{0%{transform:translateX(-100vw);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(100vw);opacity:0}}

header,.hero,.section,.cta-final,footer{position:relative;}

/* ---------- Hero ---------- */
.hero{
  position:relative; z-index:1;
  display:grid; place-items:center;
  min-height:82vh; padding:40px 20px; text-align:center;
}
.hero h1{
  font-family:Orbitron,monospace;
  font-size:clamp(36px,6vw,72px);
  letter-spacing:.02em; font-weight:900; line-height:1.1; margin-bottom:16px;
  background:linear-gradient(45deg,#fff,var(--primary));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 0 50px rgba(0,212,255,.35);
}
.hero p{max-width:820px;color:var(--muted);font-size:clamp(16px,2.1vw,20px)}
.hero .cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ---------- Buttons ---------- */
.btn{
  align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.2rem;border-radius:12px;border:2px solid transparent;
  font-weight:700;cursor:pointer;transition:.25s;text-decoration:none
}
.btn.primary{
  background:linear-gradient(45deg,var(--primary),var(--primary-2));color:#001018;
  box-shadow:0 0 22px rgba(0,212,255,.45)
}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,212,255,.55)}
.btn.outline{background:transparent;border-color:var(--primary);color:var(--primary);box-shadow:0 0 14px rgba(0,212,255,.25)}
.btn.outline:hover{background:rgba(0,212,255,.10)}

.btn:focus-visible{outline:3px solid var(--primary); outline-offset:2px}

/* Make Bootstrap's .btn base transparent so our variants win */
.btn{
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-color: inherit;
}

/* ---------- Sections & titles ---------- */
.section{position:relative;z-index:1;}
.wrap{max-width:1200px;margin:0 auto;width:100%;box-sizing:border-box}
@media (max-width:640px){
  .wrap{padding:0 8px}
}
.title{
  font-family:Orbitron,monospace;font-weight:800;
  font-size:clamp(22px,3.6vw,36px);
  text-shadow:0 0 24px rgba(0,212,255,.25);margin-bottom:10px
}
.subtitle{color:var(--muted);margin-bottom:28px}
.muted{color:var(--muted)}

/* ---------- Grid & cards ---------- */
.grid{display:grid;gap:22px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:920px){.grid.cols-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid.cols-3{grid-template-columns:1fr}}

.card{
  background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding: 20px; backdrop-filter:blur(14px);box-shadow:var(--shadow);
  position:relative;overflow:hidden;transition:.25s
}
.card:hover{border-color:var(--line);transform:translateY(-4px)}
.card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 120% at 0% 0%,rgba(0,212,255,.08),transparent 55%);
  pointer-events:none
}
.icon{font-size:32px;color:var(--primary);filter:drop-shadow(0 0 10px rgba(0,212,255,.6))}
.card h3{font-family:Orbitron,monospace;margin-top:8px;margin-bottom:8px}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tab{
  padding:.6rem 1rem;border-radius:999px;border:1px solid var(--line-soft);
  color:var(--muted);background:rgba(15,25,42,.6);cursor:pointer;
  transition:all .25s ease;text-decoration:none;border:none;
  display:inline-flex;align-items:center;justify-content:center;gap:.3rem
}
.tab:hover{
  color:var(--primary);border-color:var(--line);
  transform:translateY(-2px)
}
.tab.active{
  color:#001018;background:linear-gradient(45deg,var(--primary),var(--primary-2));
  border-color:transparent;box-shadow:0 0 20px rgba(0,212,255,.4)
}

/* Anchor offset so sticky header doesn't cover section titles */
[id]{scroll-margin-top: 80px}

/* Smooth scrolling with accessibility fallback */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

/* Back-to-top floating button */
.back-to-top{
  position:fixed; right:12px; bottom:16px; z-index:60;
  width:44px; height:44px; border-radius:12px; border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:var(--primary); font-size:20px; display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(0,212,255,.35); cursor:pointer;
  opacity:0; transform:translateY(20px); pointer-events:none; transition:.25s;
}
.back-to-top.show{opacity:1; transform:none; pointer-events:auto}
.back-to-top:focus-visible{outline:3px solid var(--primary); outline-offset:2px}
@supports(padding:max(0px)){
  .back-to-top{bottom: max(16px, env(safe-area-inset-bottom))}
}

/* Back-to-top smaller on mobile (when menu bar appears) */
@media (max-width: 900px) {
  .back-to-top {
    width: 38px;
    height: 38px;
    font-size: 16px;
    right: 8px;
    bottom: 70px;
    border-radius: 10px;
  }
}

/* ============================================
   STICKY DISCORD BUTTON
   ============================================ */
.sticky-discord {
  position: fixed;
  right: 12px;
  bottom: 76px; /* Above back-to-top button */
  z-index: 59;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 50px;
  background: linear-gradient(135deg, #5865F2, #4752C4);
  color: white;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(88, 101, 242, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  transition: all 0.3s ease;
  overflow: hidden;
}

.sticky-discord i {
  font-size: 20px;
}

.sticky-discord-text {
  max-width: 100px;
  white-space: nowrap;
  transition: max-width 0.3s ease, opacity 0.3s ease;
}

.sticky-discord:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 30px rgba(88, 101, 242, 0.5),
              0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  color: white;
  text-decoration: none;
}

/* Collapse text on smaller screens (when mobile menu appears) */
@media (max-width: 900px) {
  .sticky-discord {
    padding: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
    bottom: 105px;
    right: 5px;
  }
  .sticky-discord-text {
    max-width: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    visibility: hidden;
  }
  .sticky-discord i {
    font-size: 20px;
    margin: 0;
  }
}

/* Position adjustment for mobile safe area */
@supports(padding:max(0px)){
  .sticky-discord {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(76px, calc(env(safe-area-inset-bottom) + 60px));
  }
  
  @media (max-width: 900px) {
    .sticky-discord {
      right: max(5px, env(safe-area-inset-right));
      bottom: max(105px, calc(env(safe-area-inset-bottom) + 55px));
    }
  }
}

/* ============================================
   TRUST BADGE DISCORD VARIANT
   ============================================ */
.trust-badge-discord {
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.15), rgba(88, 101, 242, 0.05)) !important;
  border-color: rgba(88, 101, 242, 0.3) !important;
}

.trust-badge-discord:hover {
  border-color: #5865F2 !important;
  box-shadow: 0 0 30px rgba(88, 101, 242, 0.3);
}

.trust-badge-link {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  width: 100%;
}

.trust-badge-discord .discord-icon {
  background: linear-gradient(135deg, #5865F2, #4752C4) !important;
  color: white !important;
}

.trust-badge-discord .trust-badge-title {
  color: #5865F2 !important;
}

/* ---------- Product cards ---------- */
.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:20px}
@media (max-width:920px){.products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.products{grid-template-columns:1fr}}

.product{
  position:relative;background:var(--panel-strong);border:1px solid var(--line-soft);
  border-radius:18px;overflow:hidden;backdrop-filter:blur(10px);transition:.25s
}
.product:hover{transform:translateY(-6px);border-color:var(--line);box-shadow:0 18px 60px rgba(0,212,255,.28)}
.thumb{
  height:160px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(0,212,255,.10),rgba(0,128,255,.10));
  font-size:42px;color:rgba(0,212,255,.7)
}
.product .content{padding:16px}
.title-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.badge{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);color:var(--primary);background:rgba(0,212,255,.08);text-decoration:none;display:inline-block}
.ribbon{
  position:absolute;top:12px;left:-8px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  color:#001018;padding:6px 14px;border-radius:10px;box-shadow:0 10px 24px rgba(0,212,255,.4)
}
.price{font-weight:800;font-size:22px;color:var(--primary);text-shadow:0 0 10px rgba(0,212,255,.5)}
.old{color:#7b879f;text-decoration:line-through;margin-left:8px;font-weight:600}
.cta-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.btn.buy{padding:.6rem 1rem;border-radius:10px;background:linear-gradient(45deg,var(--primary),var(--primary-2));color:#001018;border:none}
.meta{font-size:12px;color:var(--muted)}

/* ---------- Steps & Stats ---------- */
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
.step-card{display:flex;gap:14px;align-items:flex-start}
.step-num{
  min-width:38px;height:38px;border-radius:12px;
  background:linear-gradient(45deg,var(--primary),var(--primary-2));
  display:grid;place-items:center;color:#001018;font-weight:900;
  box-shadow:0 10px 24px rgba(0,212,255,.45)
}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.stats{grid-template-columns:1fr}}
.stat{
  padding:22px;text-align:center;border-radius:16px;
  background:var(--panel);border:1px solid var(--line-soft);box-shadow:var(--shadow)
}
.stat .big{font-family:Orbitron,monospace;font-size:32px;font-weight:900;color:var(--primary);text-shadow:0 0 16px rgba(0,212,255,.5)}
.stars-rating{display:inline-flex;gap:4px;margin-top:8px}
.stars-rating svg{
  width:18px;
  color: #ffcc00;
}

/* ---------- Final CTA ---------- */
.cta-final{position:relative;padding:80px 20px}
.cta-box{
  border-radius:22px;
  background:radial-gradient(120% 120% at 0% 0%,rgba(0,212,255,.15),rgba(0,0,0,.2) 55%),
             linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,212,255,.25);
  padding:36px;display:grid;gap:14px;place-items:center;text-align:center
}
.cta-box h3{font-family:Orbitron,monospace;font-size:clamp(22px,3vw,34px)}


/* ----------   Trust & Security ----------  */
/* Trust & Security section with a distinct background */
.trust-section{
  background: radial-gradient(120% 120% at 0% 0%, rgba(0,212,255,.08), rgba(0,0,0,.2) 55%);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.trust-section .stats{
  margin-top: 36px;
}

.trust-section .stat{
  background: rgba(15,25,42,.65);
  transition: .25s;
}
.trust-section .stat:hover{
  transform: translateY(-4px);
  border-color: var(--line);
}

/* Trust badges */
/* Stats icons for better scannability */
/* .stat .icon{font-size:22px;margin-bottom:8px;opacity:.9} */

/* Trust badges row */
/* .trust-badges{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; padding:0; list-style:none
}
.trust-badges li{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; font-size:14px; color:var(--text);
  border:1px solid var(--line-soft); background:rgba(15,25,42,.55)
}
.trust-badges li span:first-child{filter:drop-shadow(0 0 6px rgba(0,212,255,.35))} */


/* Sticky bottom CTA on mobile to reduce decision friction */
.sticky-cta{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:55;
  display:none; justify-content:center; align-items:center; text-align:center;
  padding:12px 16px; border-radius:14px; font-weight:800; text-decoration:none;
  color:#001018; background:linear-gradient(45deg,var(--primary),var(--primary-2));
  box-shadow:0 18px 50px rgba(0,212,255,.35); border:1px solid var(--line);
}
.sticky-cta:focus-visible{outline:3px solid var(--primary); outline-offset:2px}
@media (max-width:900px){ .sticky-cta{display:flex} }
@supports(padding:max(0px)){
  .sticky-cta{bottom:max(12px, env(safe-area-inset-bottom))}
}

/* ---------- Mobile tweaks ---------- */
@media (max-width:420px){
  .btn{padding:.7rem .9rem}
  .thumb{height:auto}
}

@media (max-width: 350px) {
  .hero h1 {
    font-size: clamp(28px, 7vw, 48px); /* Smaller min and max for tiny screens */
    line-height: 1.15; /* Slightly taller for better readability */
  }
}
/* ---------- Brand logo ---------- */
.brand .logo-img{height:32px;display:block;filter:drop-shadow(0 0 10px rgba(0,212,255,.45))}
@media (max-width:640px){.brand .logo-img{height:26px}}

/* ---------- Screen Reader Only ---------- */
/* Visually hidden content but accessible to screen readers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Skip link styling */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:50;
  background:#000;color:#fff;padding:10px 14px;border-radius:10px
}
.skip-link:focus{left:10px;top:10px;outline:3px solid var(--primary)}
/* ======================================================
   BLOG STYLES (Premium StarShipDealers Edition)
   ====================================================== */

/* =============================================
   BLOG SECTION - REDESIGNED
   ============================================= */

/* Blog Hero Section */
.blog-hero-section {
  position: relative;
  padding: 80px 0 60px;
  background: linear-gradient(180deg, rgba(0, 212, 255, 0.08) 0%, transparent 100%);
  overflow: hidden;
}

.blog-hero-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.15), transparent 70%);
  pointer-events: none;
  animation: pulse-glow 4s ease-in-out infinite;
}

.blog-hero-content {
  text-align: center;
  position: relative;
  z-index: 1;
}

.blog-hero-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(0, 212, 255, 0.4);
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.blog-hero-icon i {
  font-size: 40px;
  color: #001018;
}

.blog-hero-title {
  font-family: Orbitron, monospace;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  background: linear-gradient(135deg, #fff, var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

.blog-hero-subtitle {
  font-size: clamp(16px, 2vw, 18px);
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Blog Content Section */
.blog-content-section {
  padding: 60px 0 100px;
  position: relative;
}

/* Filters (Collapsible) */
.blog-filters {
  margin-bottom: 48px;
  position: relative;
}

.blog-filters-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: var(--panel);
  border: 2px solid rgba(0, 212, 255, 0.3);
  border-radius: 12px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  max-width: 400px;
  backdrop-filter: blur(10px);
}

.blog-filters-toggle:hover {
  border-color: rgba(0, 212, 255, 0.6);
  background: rgba(0, 212, 255, 0.05);
  transform: translateY(-2px);
}

.blog-filters-toggle i:first-child {
  font-size: 18px;
  color: var(--primary);
}

.filter-count {
  color: var(--muted);
  font-size: 13px;
  margin-left: auto;
}

.filter-chevron {
  font-size: 16px;
  color: var(--primary);
  transition: transform 0.3s ease;
}

.blog-filters-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-width: 600px;
  background: var(--panel-strong);
  border: 2px solid rgba(0, 212, 255, 0.3);
  border-radius: 12px;
  padding: 12px;
  display: none;
  flex-direction: column;
  gap: 6px;
  z-index: 100;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  max-height: 400px;
  overflow-y: auto;
}

.blog-filters-dropdown.show {
  display: flex;
}

.filter-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.filter-tag:hover {
  background: rgba(0, 212, 255, 0.1);
  border-color: rgba(0, 212, 255, 0.3);
  transform: translateX(4px);
}

.filter-tag.active {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 128, 255, 0.2));
  border-color: var(--primary);
}

.filter-tag i {
  color: var(--primary);
  font-size: 16px;
}

/* Articles Grid */
.blog-articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 32px;
}

@media (max-width: 768px) {
  .blog-articles-grid {
    grid-template-columns: 1fr;
  }
}

/* Article Card */
.blog-article-card {
  background: var(--panel);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}

.blog-article-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  opacity: 0;
  border-radius: 16px;
  z-index: -1;
  transition: opacity 0.4s ease;
  filter: blur(10px);
}

.blog-article-card:hover::before {
  opacity: 0.3;
}

.blog-article-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 212, 255, 0.5);
  box-shadow: 0 16px 48px rgba(0, 212, 255, 0.3);
}

/* Article Image */
.blog-article-image {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  display: block;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 150, 199, 0.08));
}

.blog-article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-article-card:hover .blog-article-image img {
  transform: scale(1.1);
}

.blog-article-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 10, 20, 0.7) 100%);
  pointer-events: none;
}

/* Article Body */
.blog-article-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

/* Meta Info */
.blog-article-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.meta-item i {
  color: var(--primary);
  font-size: 14px;
}

/* Article Title */
.blog-article-title {
  font-family: Orbitron, monospace;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.blog-article-title a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-article-title a:hover {
  color: var(--primary);
}

/* Article Excerpt */
.blog-article-excerpt {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  flex: 1;
  margin: 0;
}

/* Article Tags */
.blog-article-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 4px;
}

.article-tag {
  display: inline-flex;
  padding: 4px 10px;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 6px;
  font-size: 12px;
  color: var(--primary);
  font-weight: 500;
}

.tags-show-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(0, 212, 255, 0.15);
  border: 1px solid rgba(0, 212, 255, 0.4);
  border-radius: 6px;
  font-size: 11px;
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tags-show-more:hover {
  background: rgba(0, 212, 255, 0.25);
  transform: scale(1.05);
}

.tags-show-more i {
  font-size: 10px;
  transition: transform 0.3s ease;
}

.tags-hidden {
  display: none;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  width: 100%;
}

/* Article CTA */
.blog-article-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(0, 212, 255, 0.1);
  border: 2px solid rgba(0, 212, 255, 0.3);
  border-radius: 10px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  align-self: flex-start;
  margin-top: 8px;
  transition: all 0.3s ease;
}

.blog-article-cta:hover {
  background: rgba(0, 212, 255, 0.2);
  border-color: var(--primary);
  transform: translateX(4px);
}

.blog-article-cta i {
  transition: transform 0.3s ease;
}

.blog-article-cta:hover i {
  transform: translateX(4px);
}

/* Empty State */
.blog-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 20px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
}

.blog-empty i {
  font-size: 64px;
  color: var(--muted);
  opacity: 0.5;
  margin-bottom: 24px;
  display: block;
}

.blog-empty h3 {
  font-family: Orbitron, monospace;
  font-size: 24px;
  color: var(--text);
  margin-bottom: 12px;
}

.blog-empty p {
  color: var(--muted);
  font-size: 16px;
}

/* Pagination */
.blog-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 64px;
  gap: 20px;
  padding: 0 4px;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--panel);
  border: 2px solid rgba(0, 212, 255, 0.3);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.pagination-btn:hover:not(.disabled) {
  background: rgba(0, 212, 255, 0.1);
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 212, 255, 0.3);
}

.pagination-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-info {
  font-size: 14px;
  color: var(--muted);
}

.pagination-info strong {
  color: var(--primary);
  font-weight: 700;
}

@media (max-width: 640px) {
  .blog-pagination {
    flex-direction: column;
  }
  
  .pagination-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ===== Blog Detail (Keep existing) ===== */
.blog-detail-hero{position:relative;padding:60px 20px 40px;
  background:linear-gradient(180deg,rgba(0,212,255,.05) 0%,transparent 100%);border-bottom:1px solid var(--line-soft)}
.blog-detail-hero-content{max-width:900px;margin:0 auto}

.blog-detail-meta{display:flex;gap:20px;flex-wrap:wrap;margin:20px 0;font-size:14px;color:var(--muted)}
.blog-detail-meta-item{display:flex;align-items:center;gap:8px}
.blog-detail-meta-item i{color:var(--primary);font-size:16px}

.blog-detail-title{font-family:'Orbitron',monospace;font-size:clamp(26px,5vw,44px);font-weight:800;
  line-height:1.2;margin:24px 0;background:linear-gradient(135deg,var(--text) 0%,var(--primary) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.blog-detail-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.blog-detail-tags .badge{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-size:13px;transition:all .2s ease}
.blog-detail-tags .badge:hover{background:rgba(0,212,255,.15);border-color:var(--primary);transform:translateY(-2px)}

.blog-detail-card{max-width:900px;margin:0 auto;background:var(--panel);border:1px solid var(--line-soft);
  border-radius:20px;padding:40px;box-shadow:0 10px 40px rgba(0,0,0,.3)}
@media (max-width:768px){.blog-detail-card{padding:24px;border-radius:16px}}

.blog-detail-image{margin:0 0 40px;border-radius:14px;overflow:hidden;border:1px solid var(--line-soft)}
.blog-detail-image img{width:100%;height:auto;display:block}

.blog-detail-lead{font-size:18px;line-height:1.7;color:var(--muted);padding:24px;
  background:rgba(0,212,255,.05);border-left:4px solid var(--primary);border-radius:10px;margin-bottom:40px}

/* Article body content */
.article-body{max-width:820px;margin:0 auto;font-size:16px;line-height:1.8;color:var(--text)}
.article-body h2,.article-body h3{font-family:'Orbitron',monospace;margin:40px 0 20px;color:var(--text)}
.article-body h2{font-size:28px;font-weight:700;border-bottom:2px solid var(--line-soft);padding-bottom:12px}
.article-body h3{font-size:22px;font-weight:600}
.article-body p,.article-body ul,.article-body ol,.article-body blockquote{margin:1.2rem 0}
.article-body blockquote{border-left:4px solid var(--primary);padding-left:20px;margin-left:0;color:var(--muted);font-style:italic}
.article-body ul,.article-body ol{padding-left:26px}
.article-body li{margin:8px 0}
.article-body a{color:var(--primary);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease}
.article-body a:hover{border-bottom-color:var(--primary)}
.article-body code{background:rgba(0,212,255,.1);padding:3px 8px;border-radius:5px;font-family:'Courier New',monospace;font-size:14px;color:var(--primary)}
.article-body pre{background:var(--panel-strong);border:1px solid var(--line-soft);border-radius:10px;padding:20px;overflow-x:auto;margin:24px 0}
.article-body pre code{background:none;padding:0;color:var(--text)}

.article-body table{width:100%;border-collapse:collapse;margin:24px 0;border:1px solid var(--line-soft);border-radius:10px;overflow:hidden}
.article-body table th,.article-body table td{padding:12px 16px;border:1px solid var(--line-soft);text-align:left}
.article-body table th{background:var(--panel-strong);font-weight:700;color:var(--primary)}
.article-body table tr:hover{background:rgba(0,212,255,.05)}

.article-body figure,.article-body img,.article-body a>img{max-width:100%;height:auto;display:block;margin:30px auto;
  border-radius:12px;border:1px solid var(--line-soft)}
.article-body img[width],.article-body img[style*="width"]{width:auto !important}
.article-body img[height],.article-body img[style*="height"]{height:auto !important}
.article-body figure{max-width:100% !important}
.article-body figcaption{margin-top:10px;color:var(--muted);font-size:14px;text-align:center}

/* Blog — linked ship models section */
.blog-detail-ships{margin-top:48px;padding-top:32px;border-top:1px solid var(--line-soft)}
.blog-detail-ships-title{font-family:'Orbitron',monospace;font-size:16px;font-weight:700;
  color:var(--primary);text-transform:uppercase;letter-spacing:1px;margin-bottom:20px;
  display:flex;align-items:center;gap:10px}
.blog-detail-ships-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.blog-detail-ship-card{display:flex;flex-direction:column;gap:12px;padding:16px;
  background:rgba(0,212,255,.04);border:1px solid var(--line-soft);border-radius:12px;
  transition:border-color .2s}
.blog-detail-ship-card:hover{border-color:var(--primary)}
.blog-detail-ship-img{width:100%;height:160px;object-fit:cover;border-radius:8px;background:var(--bg-2)}
.blog-detail-ship-info{display:flex;flex-direction:column;gap:2px}
.blog-detail-ship-name{font-family:'Orbitron',monospace;font-size:15px;font-weight:700;color:var(--text)}
.blog-detail-ship-manufacturer{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.blog-detail-ship-links{display:flex;gap:8px;flex-wrap:wrap}
.blog-detail-ship-links .btn{font-size:13px;padding:6px 14px}

.blog-detail-footer{margin-top:60px;padding-top:30px;border-top:1px solid var(--line-soft)}
.blog-detail-author-card{display:flex;align-items:center;gap:16px;padding:20px;
  background:rgba(0,212,255,.05);border:1px solid var(--line-soft);border-radius:12px}
.blog-detail-author-avatar{width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));display:flex;align-items:center;
  justify-content:center;font-size:28px;color:#001018;flex-shrink:0}
.blog-detail-author-info{display:flex;flex-direction:column;gap:4px}
.blog-detail-author-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.blog-detail-author-name{font-family:'Orbitron',monospace;font-size:18px;font-weight:700;color:var(--text)}

.blog-detail-cta{max-width:900px;margin:30px auto 0;text-align:center}

.post-cover{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px}

@media (min-width:1400px){.article-body{font-size:17px}}

/* ------------ Flash Messages ------------ */
.flash-messages-container {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 720px;
  z-index: 1050;
  padding: 0 15px;
  box-sizing: border-box;
  pointer-events: none;
}

.flash-messages-container .alert {
  pointer-events: auto;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

@media (max-width: 900px) {
  .flash-messages-container {
    max-width: 100vw;
    padding: 0 10px;
  }

  .flash-messages-container .alert {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

@media (max-width: 480px) {
  .flash-messages-container {
    top: 70px;
    padding: 0 8px;
  }

  .flash-messages-container .alert {
    font-size: 14px;
    padding: 8px 10px;
  }
}

[class^="alert-"]{margin:10px 0;padding:10px 12px;border-radius:10px;border:1px solid var(--line-soft);background:rgba(15,25,42,.6)}
.alert-success{border-color:rgba(33,230,163,.35)}
.alert-warning{border-color:rgba(255,204,102,.35)}
.alert-error{border-color:rgba(255,122,122,.35)}
.alert-info{border-color:rgba(0,212,255,.35)}
/* Dismissible flash — close (×) button, top-right, works on every level. */
.alert--dismissible{position:relative;padding-right:36px}
.alert__close{position:absolute;top:6px;right:8px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;border-radius:6px;color:inherit;font-size:20px;line-height:1;opacity:.6;cursor:pointer}
.alert__close:hover{opacity:1;background:rgba(255,255,255,.08)}

/* Inputs matching your glassmorphism UI */
.ui-input{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line-soft);
  background:rgba(15,25,42,.60); color:var(--text);
  outline:none; transition:.2s ease;
}
.ui-input::placeholder{color:#90a2c4}
.ui-input:focus{
  border-color:var(--line);
  box-shadow:0 0 0 4px rgba(0,212,255,.12)
}

/* ============================================
   GLOBAL FORM INPUTS (Bootstrap + native)
   ============================================ */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
textarea,
select.form-select {
  background: linear-gradient(135deg, rgba(10, 20, 35, 0.8), rgba(15, 25, 42, 0.6)) !important;
  border: 1px solid rgba(0, 212, 255, 0.15) !important;
  border-radius: 6px !important;
  color: var(--text) !important;
  padding: 6px 15px;
  font-size: 15px;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2),
              0 1px 0 rgba(255, 255, 255, 0.03);
}

.form-control:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="number"]:hover,
textarea:hover {
  border-color: rgba(0, 212, 255, 0.3) !important;
  background: linear-gradient(135deg, rgba(12, 24, 40, 0.85), rgba(18, 30, 48, 0.7)) !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15),
              0 0 20px rgba(0, 212, 255, 0.2),
              inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  background: linear-gradient(135deg, rgba(15, 28, 45, 0.9), rgba(20, 35, 55, 0.8)) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--muted) !important;
  opacity: 0.7;
}

/* Form labels */
label,
.form-label {
  color: var(--text);
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
  font-size: 14px;
}

/* Form select dropdown arrow fix */
select.form-select {
  background-color: rgba(10, 20, 35, 0.8) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300d4ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 12px !important;
  padding-right: 40px;
  cursor: pointer;
}

/* Select hover - only border, preserve background */
select.form-select:hover {
  border-color: rgba(0, 212, 255, 0.3) !important;
}

/* Select focus */
select.form-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15),
              0 0 20px rgba(0, 212, 255, 0.2) !important;
}

/* Select dropdown options styling */
select.form-select option {
  background: #0a0f1c !important;
  color: var(--text) !important;
  padding: 10px 16px;
}

select.form-select option:hover,
select.form-select option:focus,
select.form-select option:checked {
  background: var(--primary) !important;
  color: #001018 !important;
}

/* ============================================
   FILTER OPTIONS - Boolean Select Items
   ============================================ */
.options-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}

.options-row .option-item {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

.options-row .option-item select,
.options-row .option-item .form-select {
  width: 100%;
  padding-right: 1.5rem;
}

.options-row .option-item small {
  font-size: 0.65rem;
  white-space: nowrap;
}

/* Mobile: Force 3 options on same line */
@media (max-width: 768px) {
  .options-row {
    flex-wrap: nowrap;
    gap: 4px;
  }
  
  .options-row .option-item {
    flex: 1 1 0;
    min-width: 0;
  }
  
  .options-row .option-item select,
  .options-row .option-item .form-select {
    padding: 0.2rem 1.2rem 0.2rem 0.3rem;
    font-size: 0.75rem;
  }
  
  .options-row .option-item small {
    font-size: 0.6rem;
  }
}

/* ============================================
   PRICE RANGE - Global Filter Component
   ============================================ */
.price-range-group {
  display: flex;
  flex-wrap: nowrap;
  max-width: 220px;
}

.price-range-group input[type="number"],
.price-range-group .form-control {
  width: 80px !important;
  min-width: 70px !important;
  max-width: 90px !important;
  padding: 4px 8px !important;
  text-align: center !important;
  font-size: 0.85rem !important;
  /* Remove number input spinners */
  -moz-appearance: textfield;
  appearance: textfield;
}

/* First input (min price) - rounded left, flat right */
.price-range-group input[type="number"]:first-child,
.price-range-group .form-control:first-child {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
}

/* Last input (max price) - flat left, rounded right */
.price-range-group input[type="number"]:last-child,
.price-range-group .form-control:last-child {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
}

.price-range-group input[type="number"]::-webkit-outer-spin-button,
.price-range-group input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.price-range-group .input-group-text {
  padding: 4px 8px !important;
  font-size: 0.85rem !important;
  background: transparent;
  border-color: rgba(255,255,255,0.2);
  border-radius: 0 !important;
}

/* Melt input next to price-range-group — match height & style */
.melt-price-col .form-control {
  padding: 4px 8px !important;
  font-size: 0.85rem !important;
  text-align: center !important;
  -moz-appearance: textfield;
  appearance: textfield;
  border-radius: 6px !important;
}

.melt-price-col .form-control::-webkit-outer-spin-button,
.melt-price-col .form-control::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Price Range - Mobile (768px) */
@media (max-width: 768px) {
  .price-range-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-top: 4px !important;
  }
  
  .price-range-group {
    flex-wrap: nowrap !important;
    max-width: 150px !important;
  }
  
  .price-range-group input[type="number"],
  .price-range-group .form-control {
    width: 55px !important;
    min-width: 45px !important;
    max-width: 60px !important;
    padding: 4px 4px !important;
    text-align: center !important;
    font-size: 0.75rem !important;
  }
  
  .price-range-group .input-group-text {
    padding: 0 4px !important;
    font-size: 0.7rem !important;
  }
  
  /* Advanced Filters - Manufacturer & Sort by: 50% each */
  .manufacturer-col,
  .sort-col {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  
  /* Ship & Insurance: 50% each on same line */
  .model-col,
  .insurance-col {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  
  /* Options row: 3 items per line (33% each) */
  .options-row {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  
  .options-row > div {
    flex: 0 0 33.33% !important;
    max-width: 33.33% !important;
    text-align: center;
  }
  
  .options-row select,
  .options-row .form-select {
    font-size: 0.7rem !important;
    padding: 4px 6px !important;
    height: auto !important;
    min-height: 28px !important;
  }
  
  .options-row small {
    font-size: 0.6rem !important;
  }
}

/* -------------------- ITEMS APP ------------------------- */
/* Sticky items nav */
.sticky-nav{position:sticky;top:0;z-index:1030;background:var(--surface,#0b0d10cc);
  backdrop-filter:saturate(180%) blur(6px);border-bottom:1px solid var(--border,#1e242e)}
.sticky-nav .nav-link{padding:.4rem .8rem;border-radius:999px}
.sticky-nav .nav-link.active{background:var(--primary,#0d6efd);color:#fff}

/* Breadcrumbs */
.breadcrumbs{font-size:.9rem;margin:.75rem 0}
.breadcrumbs ol{display:flex;gap:.5rem;flex-wrap:wrap;list-style:none;padding:0;margin:0;opacity:.9}
.breadcrumbs li a{color:inherit;text-decoration:none}
.breadcrumbs li+li:before{content:"/";opacity:.5;margin:0 .25rem}

/* Force 4-up grid like ships */
.products.products-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media (max-width: 992px){.products.products-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 576px){.products.products-4{grid-template-columns:1fr}}

/* ==================== */
/* Product list rows    */
/* ==================== */

.product-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.product-row {
  display: flex;
  justify-content: space-between;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: 0.25s;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.product-row:hover {
  border-color: var(--line);
  transform: translateY(-4px);
}

/* Image or placeholder on the left */
.product-row img,
.product-row .thumb {
  flex-shrink: 0;
  width: 200px;
  height: 140px;
  object-fit: cover;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow);
  background: linear-gradient(135deg, rgba(0,212,255,.10), rgba(0,128,255,.10));
  display: block;
}

/* Central info (title + optional description) */
.product-row .info {
  flex-grow: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

/* Info content: 2 sub-columns (80% main + 20% seller) */
.product-row .info .info-content {
  display: flex;
  gap: 16px;
  align-items: stretch;
  height: 100%;
  width: 100%;
}

/* Left sub-column: Title + Description + Category (80%) */
.product-row .info .info-main {
  flex: 1 1 80%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-row .info h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.product-row .info p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.3;
  margin: 0;
}

/* Right sub-column: Seller (20%) */
.product-row .info .info-seller {
  flex: 0 0 20%;
  text-align: right;
  min-width: 120px;
}

.product-row .info .info-seller p {
  font-size: 0.85rem;
}

.product-row .info .info-seller strong {
  display: block;
  font-size: 0.9rem;
  color: var(--text);
  margin-top: 2px;
}

/* Right‑hand column: price + action */
.product-row .actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 160px;
  padding: 16px 16px 16px 0;
}

.product-row .actions .price {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--primary);
  text-shadow: 0 0 10px rgba(0,212,255,.5);
  white-space: nowrap;
  margin-bottom: 4px;
}

.product-row .actions .btn {
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  border-radius: 10px;
}

/* ==================== */
/* Product list MOBILE  */
/* ==================== */

/* Tablet: Reduce image size, stack actions */
@media (max-width: 768px) {
  .product-row {
    flex-direction: column;
    padding: 0;
    gap: 0;
  }
  
  .product-row img,
  .product-row .thumb {
    width: 100%;
    height: 180px;
    border-radius: var(--radius) var(--radius) 0 0;
    border: none;
    object-fit: cover;
  }
  
  .product-row .info {
    width: 100%;
    padding: 12px;
  }
  
  .product-row .info .info-content {
    flex-direction: column;
    gap: 8px;
  }
  
  .product-row .info h3 {
    font-size: 1rem;
    margin-bottom: 4px;
  }
  
  .product-row .info p {
    font-size: 0.85rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Badges inline on mobile */
  .product-row .info .info-content > div:last-child {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 6px !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  .product-row .info .info-content > div:last-child .badge {
    font-size: 0.65rem !important;
    padding: 3px 6px;
    min-width: auto !important;
  }

  .product-row .info .info-content > div:last-child p.meta {
    font-size: 0.7rem;
    margin: 0;
  }

  /* Hide description to save space */
  .product-row .info p.muted {
    display: none;
  }
  
  .product-row .actions {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    border-top: 1px solid var(--line-soft);
    gap: 12px;
  }
  
  .product-row .actions .price {
    font-size: 1.1rem;
  }

  .product-row .actions form {
    flex: 0 0 auto;
  }

  /* Exclude cart-page - has own mobile styles in cart-mobile.css */
  body:not(:has(.cart-page)) .product-row .actions .btn {
    padding: 8px 14px;
    font-size: 0.8rem;
    min-height: 36px;
  }
}

/* Mobile: Compact cards */
@media (max-width: 480px) {
  .product-list {
    padding: 0;
    gap: 8px;
  }

  .product-row {
    border-radius: 10px;
  }
  
  .product-row img,
  .product-row .thumb {
    height: 140px;
    border-radius: 10px 10px 0 0;
  }
  
  .product-row .info {
    padding: 10px;
  }
  
  .product-row .info h3 {
    font-size: 0.9rem;
    line-height: 1.2;
  }

  .product-row .info .info-content > div:last-child .badge {
    font-size: 0.6rem !important;
    padding: 2px 5px;
  }

  .product-row .actions {
    padding: 8px 10px;
  }
  
  .product-row .actions .price {
    font-size: 1rem;
  }

  /* Exclude cart-page - has own mobile styles in cart-mobile.css */
  body:not(:has(.cart-page)) .product-row .actions .btn {
    padding: 6px 12px;
    font-size: 0.75rem;
    min-height: 32px;
  }
}

/* ==================== */
/* Product detail card  */
/* ==================== */

.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 25px;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

/* On small screens, stack columns */
@media (max-width: 900px) {
  .product-detail {
    grid-template-columns: 1fr;
  }
}

/* Product detail mobile improvements */
@media (max-width: 768px) {
  .product-detail {
    padding: 16px;
    gap: 20px;
  }
  
  .product-detail .details h1 {
    font-size: 1.5rem;
  }
  
  .product-detail .details .price {
    font-size: 1.5rem;
  }
  
  /* Stack the two columns layout inside details */
  .product-detail .details .row {
    flex-direction: column;
  }
  
  .product-detail .details .col-lg-8,
  .product-detail .details .col-lg-4 {
    width: 100%;
    max-width: 100%;
  }
  
  /* Trust badges stack on mobile */
  .product-detail .trust-badges {
    flex-direction: column;
    gap: 8px;
  }
  
  .product-detail .trust-badges .badge {
    font-size: 0.75rem;
    padding: 6px 10px;
  }
}

@media (max-width: 480px) {
  .product-detail {
    padding: 12px;
    border-radius: 12px;
  }
  
  .product-detail .details h1 {
    font-size: 1.25rem;
  }
  
  .product-detail .details .price {
    font-size: 1.3rem;
  }
  
  .product-detail .image-gallery .thumbnails {
    gap: 6px;
  }
  
  .product-detail .image-gallery .thumbnails img {
    height: 60px;
  }
}

/* Image gallery (left side) */
.product-detail .image-gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

/* Main image and thumbnail placeholder */
.product-detail .image-gallery .main-image,
.product-detail .image-gallery .thumb {
  width: 100%;
  max-width: var(--article-img-max);
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow);
  background: linear-gradient(135deg, rgba(0,212,255,.10), rgba(0,128,255,.10));
}

/* Thumbnail grid */
/* .product-detail .image-gallery .thumbnails {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
} */

.product-detail .image-gallery .thumbnails img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow);
}

/* Right side: product details */
.product-detail .details {
  flex-direction: column;
}

.product-detail .details h1 {
  font-family: Orbitron, monospace;
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.2;
  margin: 0;
}

.product-detail .details .price {
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--primary);
  text-shadow: 0 0 10px rgba(0,212,255,.5);
}

.product-detail .details .description {
  line-height: 1.6;
  color: var(--text);
}

.product-detail .details .meta p {
  color: var(--muted);
  margin: 4px 0;
  font-size: 0.95rem;
}

/* Includes section (gear/paint detail) */
.includes-section h4 {
  font-family: Orbitron, monospace;
  font-size: 1rem;
  color: var(--text);
}

.includes-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: Orbitron, monospace;
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}

.includes-toggle:hover {
  color: #fff;
  text-decoration: none;
}

.includes-toggle .includes-count {
  font-family: Poppins, sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  opacity: 0.7;
}

.includes-toggle .includes-chevron {
  font-size: 0.75rem;
  transition: transform 0.3s;
}

.includes-toggle[aria-expanded="true"] .includes-chevron {
  transform: rotate(180deg);
}

.includes-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  transition: border-color 0.2s;
}

.includes-card:hover {
  border-color: var(--primary);
}

/* Align “Add to cart” button */
.product-detail .details button.btn {
  align-self: flex-start;
}

/* ===== PRODUCT DETAIL MOBILE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
  /* Remove excessive vertical margin around price/actions */
  .product-detail .my-5 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  /* Full-width image with rounded corners only on top */
  .product-detail .image-gallery {
    margin: -16px -16px 0 -16px;
    width: calc(100% + 32px);
  }
  
  .product-detail .image-gallery .main-image {
    border-radius: 14px 14px 0 0;
    border-left: none;
    border-right: none;
    border-top: none;
  }
  
  /* Thumbnails back to normal spacing */
  .product-detail .image-gallery .thumbnails {
    padding: 0 16px;
    margin-top: 12px;
  }
  
  /* Add margin below the entire product-detail card */
  .product-detail {
    margin-bottom: 2rem;
  }
}

@media (max-width: 480px) {
  .product-detail .my-5 {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .product-detail .image-gallery {
    margin: -12px -12px 0 -12px;
    width: calc(100% + 24px);
  }
  
  .product-detail .image-gallery .thumbnails {
    padding: 0 12px;
  }
}

/* ===== CART TOAST STYLING ===== */
#cartAddedToast {
  background: rgba(13, 27, 42, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius, 16px);
}

#cartAddedToast .toast-body {
  color: var(--text);
}

#cartAddedToast .btn-close {
  filter: invert(1) brightness(0.8);
}

/* Toast mobile: more compact, larger image */
@media (max-width: 768px) {
  .toast-container {
    padding: 0 !important;
    left: auto !important;
    right: 0.5rem !important;
    top: 60px !important; /* Just below navbar */
  }
  
  #cartAddedToast {
    max-width: 280px;
    width: auto;
  }
  
  #cartAddedToast img {
    width: 64px !important;
    height: 64px !important;
  }
  
  #cartAddedToast .toast-body {
    padding: 0.5rem 0.75rem;
  }
}

/* ===== PRODUCT ACTION GROUP - COMPACT WIDTH ===== */
@media (max-width: 768px) {
  /* Center the price/actions wrapper */
  .product-detail .my-5 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* Center the action group and limit width */
  .product-detail .product-action-group {
    max-width: 180px;
    margin: 0 auto;
  }
  
  .product-detail .product-action-group .action-cart-btn {
    padding: 0 0.5rem;
  }
}

/* Tablet range: keep buttons centered */
@media (min-width: 769px) and (max-width: 992px) {
  .product-detail .my-5 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .product-detail .product-action-group {
    margin: 0 auto;
  }
}

/* ===== Product creation/edit form styles ===== */


/* Card wrapper for product and ship forms */
.form-card {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 32px;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

/* Generic form spacing */
.product-create-form .form-group {
  margin-bottom: 20px;
}

/* Two-column form row */
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 576px) {
  .form-row-2 { grid-template-columns: 1fr; }
}

/* Fieldset grouping — standalone cards */
.form-fieldset {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius, 12px);
  padding: 24px;
  margin-bottom: 20px;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

/* Seller settings page — constrained width like product create v2 */
.seller-settings-wrap {
  max-width: 960px;
  margin: 40px auto 60px;
  padding: 0 20px;
}
.form-fieldset legend {
  font-family: 'Orbitron', monospace;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  padding: 0 10px;
  width: auto;
}

/* Labels styling */
.product-create-form label {
  color: var(--text);
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Form controls */
.product-create-form select,
.product-create-form input:not([type="checkbox"]):not([type="radio"]),
.product-create-form textarea {
  background: rgba(15, 25, 42, 0.6);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  color: var(--text);
  padding: 12px 16px;
  font-size: 16px;
  transition: all 0.3s ease;
  width: 100%;
}

/* Focus state for controls */
.product-create-form select:focus,
.product-create-form input:not([type="checkbox"]):not([type="radio"]):focus,
.product-create-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
  background: rgba(15, 25, 42, 0.8);
}

/* Page layout */
.page-layout{
  display: grid;
  grid-template-columns: var(--sidebar-w, 280px) 1fr; /* sidebar | main */
  column-gap: 24px;
  min-height: 70vh;
  flex: 1;           /* fill remaining height inside <main> so sidebar reaches footer */
  /* padding: 20px; */
}

.page-layout .main {
  background: var(--panel-strong);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 24px;
  backdrop-filter: blur(12px);
  width: 100%;
  margin: 0 auto;
}

.page-layout > .sidebar {
  min-height: 100%;  /* sidebar column stretches to footer */
  background: var(--panel-strong);
  border-right: 1px solid var(--line-soft);
  box-shadow: 4px 0 20px rgba(0, 212, 255, 0.15);
  backdrop-filter: blur(16px);
  position: relative;
  overflow: visible;  /* must be visible for child sticky to work */
}
/* Glow effect on the full-height sidebar column */
.page-layout > .sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 0% 0%, rgba(0,212,255,.08), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.sidebar-content,
.main-content {
  max-width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Responsive */
@media (max-width: 900px) {
  .page-layout {
    grid-template-columns: 1fr;
    column-gap: 0;
    padding: 0;
  }
  .page-layout .main,
  .page-layout .main-content {
    width: 100%;
    margin: 0;
    padding: 12px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .page-layout .sidebar {
    width: 100%;
    max-width: 100%;
    background: transparent;
    border-right: none;
    box-shadow: none;
  }
}

/* Small mobile adjustments for page-layout */
@media (max-width: 576px) {
  .page-layout {
    padding: 0;
  }
  .page-layout .main {
    padding: 8px;
  }
}


/* ===== Collapsible sidebar (CSS-only with checkbox) ===== */
/* Expected minimal HTML in header:
   <input id="nav-toggle" type="checkbox" hidden>
   <label class="hamburger" for="nav-toggle" aria-label="Toggle menu"></label>
*/

/* Hamburger button */
.hamburger{
  width:40px;height:40px;display:inline-grid;place-items:center;cursor:pointer;
  border:1px solid var(--line-soft);border-radius:12px;
  background:rgba(15,25,42,.6);box-shadow:var(--shadow)
}
.hamburger::before{
  content:""; width:18px; height:2px; background:var(--text);
  box-shadow:0 -6px 0 0 var(--text), 0 6px 0 0 var(--text); /* three lines */
  opacity:.9
}

/* Use a CSS var for sidebar width on desktop */
:root{ --sidebar-w: 15%; }

/* Replace your current grid-template by var for flexibility */
.page-layout{
  grid-template-columns: var(--sidebar-w) 1fr; /* sidebar | main */
}

/* Wider sidebar for guides pages */
.page-layout:has(.guides-sidebar){
  grid-template-columns: 20% 1fr; /* 18% instead of 15% */
}

/* Transition for smooth collapse */
.page-layout .sidebar{ transition: transform .25s ease, opacity .25s ease, width .25s ease; }
.page-layout .main{ transition: margin-left .25s ease; }
.page-layout{ transition: grid-template-columns .25s ease; }

/* Desktop collapse: when checked, hide sidebar and give full width to main */
#nav-toggle:checked ~ .page-layout{
  grid-template-columns: 0 1fr;           /* sidebar shrinks to 0 */
}
#nav-toggle:checked ~ .page-layout .sidebar{
  transform: translateX(-12px);           /* slight off-canvas feel */
  opacity:0; pointer-events:none;
}

/* Keep your column gap */
.page-layout{ column-gap:24px; }


/* Mobile behavior: sidebar becomes an overlay drawer */
@media (max-width: 900px){
  :root{ --sidebar-w: 80vw; }             /* drawer width on mobile */
  .page-layout{ grid-template-columns: 1fr; } /* main full width baseline */

  .page-layout .sidebar{
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); max-width: 420px;
    transform: translateX(-100%); opacity:0; pointer-events:none; z-index:1040;
    visibility: hidden; /* Ensure it's completely hidden */
  }
  .page-layout .main,
  .page-layout .main-content { 
    position: relative; z-index:1;
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
  }

  /* When checked, slide drawer in */
  #nav-toggle:checked ~ .page-layout .sidebar{
    transform: translateX(0); opacity:1; pointer-events:auto; visibility: visible;
  }

  /* Optional dim backdrop via :after on body wrapper if you en as needed */
}

/* Small UX niceties for focus */
.hamburger:focus-visible{ outline:3px solid var(--primary); outline-offset:3px }

/* Compact mode for product list rows */
.product-list.compact .product-row { padding:12px 16px; gap:12px; }
.product-list.compact .product-row img,
.product-list.compact .product-row .thumb { width:100px; height:70px; }
.product-list.compact .info h3 { font-size:1rem; font-weight:600; }
.product-list.compact .actions { flex-direction:row; align-items:center; gap:10px; }
.product-list.compact .actions .btn-group { display:flex; gap:6px; }

/* Sticky footer */
body { display: flex; min-height: 100vh; flex-direction: column; }
main { flex: 1 0 auto; width: 100%; display: flex; flex-direction: column; }
footer.site-footer { width: 100%; }

/* Fluid wrap for dashboard forms */
.wrap--fluid { max-width: 100%; }
.form-card { max-width: 100%; }

/* ===== Left Menu (scoped) ===== */
.sd-sidebar{width:100%;background:transparent;border-right:none;
  box-shadow:none;backdrop-filter:none;
  position:sticky;top:var(--header-h);align-self:start;
  padding-top:12px;padding-bottom:40px;
  z-index:1}
.sd-sidebar>*{position:relative;z-index:1}

.sd-sidebar .menu-section{margin-bottom:35px;padding:0 20px}
.sd-sidebar .menu-section:first-child{padding-top:25px}
.sd-sidebar .menu-title{font-family:'Orbitron',monospace;font-size:16px;font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;margin-bottom:18px;padding-bottom:10px;color:var(--primary);
  text-shadow:0 0 10px rgba(0,212,255,.4);border-bottom:1px solid var(--line-soft);position:relative}
.sd-sidebar .menu-title::after{content:"";position:absolute;bottom:-1px;left:0;width:40px;height:2px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));box-shadow:0 0 8px rgba(0,212,255,.6)}

.sd-sidebar .menu-list{list-style:none;padding:0;margin:0}
.sd-sidebar .menu-list li{margin:8px 0}
.sd-sidebar .menu-list li a{text-decoration:none;color:var(--muted);font-size:15px;font-weight:500;
  padding:12px 16px;border-radius:12px;border:1px solid transparent;transition:all .25s ease;position:relative;overflow:hidden}
.sd-sidebar .menu-list li a::before{content:"";position:absolute;inset:0;left:-100%;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,.1),transparent);transition:left .3s ease;z-index:-1}
.sd-sidebar .menu-list li a:hover::before{left:100%}
.sd-sidebar .menu-list li a:hover{color:var(--text);background:rgba(255,255,255,.08);border-color:var(--line-soft);
  transform:translateX(4px);box-shadow:0 4px 16px rgba(0,212,255,.2)}
.sd-sidebar .menu-list li a.active,
.sd-sidebar .menu-list li a:active{color:#001018;background:linear-gradient(45deg,var(--primary),var(--primary-2));
  border-color:var(--primary);box-shadow:0 0 20px rgba(0,212,255,.4);font-weight:700}
.sd-sidebar .menu-list li a.active:hover{transform:translateX(6px);box-shadow:0 6px 24px rgba(0,212,255,.5)}

/* ── Sidebar notification badges ── */
.sd-sidebar .menu-list li a{position:relative}
.sd-sidebar .sidebar-badge{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:var(--danger,#ff7a7a);color:#fff;
  font-family:'Poppins',sans-serif;font-size:11px;font-weight:600;
  line-height:20px;text-align:center;white-space:nowrap;
  box-shadow:0 0 8px rgba(255,122,122,.4);pointer-events:none;
  animation:sidebarBadgePulse 2s ease-in-out infinite;
}
@keyframes sidebarBadgePulse{
  0%,100%{box-shadow:0 0 8px rgba(255,122,122,.4)}
  50%{box-shadow:0 0 14px rgba(255,122,122,.7)}
}
.sd-sidebar .menu-list li a.active .sidebar-badge,
.sd-sidebar .menu-list li a:hover .sidebar-badge{
  background:var(--danger,#ff7a7a);color:#fff;
}
.sd-sidebar.collapsed .sidebar-badge{
  right:auto;left:28px;top:4px;transform:none;
  min-width:8px;height:8px;padding:0;font-size:0;border-radius:50%;
}

@media (max-width:1024px){.sd-sidebar{max-width:100%}.sd-sidebar .menu-section{padding:0 18px}}
@media (max-width:768px){
  #user-sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;transform:translateX(-100%);
    transition:transform .3s ease;z-index:1000}
  #user-sidebar.open{transform:translateX(0)}
  .sd-sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .3s ease;
    z-index:999;display:block}
  .sd-sidebar-overlay.active{opacity:1;visibility:visible}
  .sd-sidebar .menu-section{padding:0 16px;margin-bottom:20px}
  .sd-sidebar .menu-section:first-child{padding-top:16px}
  .sd-sidebar .menu-title{font-size:13px;margin-bottom:12px;padding-bottom:8px}
  .sd-sidebar .menu-list li{margin:4px 0}
  .sd-sidebar .menu-list li a{font-size:13px;padding:10px 12px;border-radius:10px}
}
@media (max-width:480px){
  #user-sidebar{width:220px}
  .sd-sidebar .menu-section{margin-bottom:16px;padding:0 12px}
  .sd-sidebar .menu-section:first-child{padding-top:12px}
  .sd-sidebar .menu-title{font-size:12px;margin-bottom:10px}
  .sd-sidebar .menu-list li{margin:3px 0}
  .sd-sidebar .menu-list li a{font-size:12px;padding:8px 10px;border-radius:8px}
  .sd-sidebar .menu-list li a .menu-icon{margin-right:.5rem;font-size:14px}
}

/* Collapsed (desktop icon-only) */
.page-layout > .sidebar.collapsed{width:80px}
.page-layout:has(.sidebar.collapsed){grid-template-columns:80px 1fr}
.page-layout > .sidebar{transition:width .25s ease}
.sd-sidebar.collapsed{width:80px}
.sd-sidebar.collapsed .menu-text{display:none}
.sd-sidebar.collapsed .menu-title{font-size:0;padding-bottom:6px;margin-bottom:10px}
.sd-sidebar.collapsed .menu-title::after{display:none}
.sd-sidebar.collapsed .nav-link{padding:6px;justify-content:center}
.sd-sidebar.collapsed .nav-link::after{
  content:attr(data-tooltip);position:absolute;left:76px;top:50%;transform:translateY(-50%);
  background:var(--panel-strong);color:var(--text);border:1px solid var(--line-soft);border-radius:8px;
  padding:6px 10px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:var(--shadow)}
.sd-sidebar.collapsed .nav-link:hover::after{opacity:1;transform:translateY(-50%) translateX(2px)}

/* Toggle button + icon colors */
.sd-sidebar-toggle{left:15px;width:40px;display:grid;place-items:center;border:0;
  border-radius:10px;background:var(--primary);color:#001018;cursor:pointer;z-index:1001;
  box-shadow:0 10px 30px rgba(0,212,255,.35);margin:8px 0 20px}
.sd-sidebar .menu-list li a .menu-icon{color:initial !important;-webkit-text-fill-color:initial;background:none !important;
  text-shadow:none !important;filter:none !important;margin-right:.75rem}
.sd-sidebar .menu-list li a:hover .menu-icon,
.sd-sidebar .menu-list li a:active .menu-icon,
.sd-sidebar .menu-list li a.active .menu-icon{color:initial !important;-webkit-text-fill-color:initial}

/* ===== Quick Edit Modal (StarShipDealers) ===== */
body.modal-open{ overflow:hidden; }

.sd-modal-overlay{
  position:fixed; inset:0; z-index:2000; display:grid; place-items:center;
  background: radial-gradient(120% 120% at 0 0, rgba(0,212,255,.12), rgba(0,0,0,.55) 60%);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}

.sd-modal{
  width:min(720px, 92vw); max-height:88vh; overflow:auto;
  background:var(--panel-strong);
  border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
}

.sd-modal-header, .sd-modal-footer{
  display:flex; align-items:center; gap:12px; padding:16px 18px;
}
.sd-modal-header{ justify-content:space-between; border-bottom:1px solid var(--line-soft); }
.sd-modal-footer{ justify-content:flex-end; border-top:1px solid var(--line-soft); }
.sd-modal-body{ padding:18px; }

.sd-modal-header h5{
  margin:0; font-family:Orbitron, monospace;
  text-shadow:0 0 16px rgba(0,212,255,.45);
}

.sd-modal-close{
  background:transparent; color:var(--text); cursor:pointer;
  border:1px solid var(--line-soft); border-radius:10px; padding:6px 10px;
}
.sd-modal-close:hover{ border-color:var(--line); }

.sd-modal-enter{ animation:sdModalIn .18s ease-out both; }
@keyframes sdModalIn{
  from{ transform:translateY(6px) scale(.98); opacity:0; }
  to{ transform:none; opacity:1; }
}

/* ===== PRODUCT ACTION GROUP (Quantity + Cart + Wishlist) ===== */
.product-action-group {
  display: inline-flex;
  align-items: stretch;
  height: 40px;
  width: auto;
}

/* Quantity input (left button) - same width as others */
.product-action-group .action-qty-input {
  width: 50px;
  height: 36px;
  padding: 0;
  text-align: center;
  line-height: 36px;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid var(--line-soft);
  background: rgba(15, 25, 42, 0.6);
  color: var(--text);
  border-radius: 0;
  outline: 0;
  -moz-appearance: textfield;
  appearance: textfield;
  /* Rounded left corners only */
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.product-action-group .action-qty-input::-webkit-outer-spin-button,
.product-action-group .action-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* Add to cart button (center) - same width as others */
.product-action-group .action-cart-btn {
  width: 50px;
  height: 36px;
  padding: 0;
  border-radius: 0 !important;
  margin-left: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Wishlist button (right) - same width as others */
.product-action-group .action-wishlist-btn {
  width: 50px;
  height: 36px;
  padding: 0;
  margin-left: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Rounded right corners only */
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

/* Ensure seamless connection between buttons */
.product-action-group .action-qty-input + .btn,
.product-action-group .btn + .btn {
  margin-left: -1px;
}

/* Mobile responsive for product action group */
@media (max-width: 480px) {
  .product-action-group {
    height: 40px;
  }
  
  .product-action-group .action-qty-input {
    width: 44px;
    height: 40px;
    line-height: 40px;
    font-size: 0.9rem;
  }
  
  .product-action-group .action-cart-btn {
    width: 44px;
    height: 40px;
  }
  
  .product-action-group .action-wishlist-btn {
    width: 44px;
    height: 40px;
  }
}

/* ========== CART QUANTITY CONTROLS - OUTSIDE @layer FOR PRIORITY ========== */
/* Quantity group container - inline-flex to not break parent column layout */
.product-row .actions .qty-group{ 
  display: inline-flex; 
  align-items: center; 
  gap: 0;
  height: 28px; 
}

.product-row .actions .btn-danger svg{
  width: 16px;
  height: 16px;
}

/* Square center input + perfect centering */
.product-row .actions .qty-group .qty-input{
  width: 2.6rem;
  height: 28px;
  padding: 0;
  text-align: center;
  line-height: 28px;
  font-weight: 600; 
  font-size: .85rem;
  border: 1px solid var(--line-soft);
  background: rgba(15,25,42,.60);
  color: var(--text);
  border-radius: 0 !important;
  outline: 0;
  -moz-appearance: textfield;
}
.product-row .actions .qty-group .qty-input::-webkit-outer-spin-button,
.product-row .actions .qty-group .qty-input::-webkit-inner-spin-button{
  -webkit-appearance: none; 
  margin: 0;
}

/* Buttons: override only what's needed for centering */
.product-row .actions .qty-group .btn{
  padding: 0 .50rem;
  font-size: .85rem;
  height: 28px;
  line-height: 1;
  border-width: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* EXACT corner shapes */
.product-row .actions .qty-group .qty-minus{
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.product-row .actions .qty-group .qty-plus{
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

/* Seamless borders */
.product-row .actions .qty-group .btn + .qty-input,
.product-row .actions .qty-group .qty-input + .btn{ 
  margin-left: -1px; 
}

/* Note: Cart mobile qty-group styles are in cart/static/cart/css/cart-mobile.css */

/* === Buyer Dashboard: neutralize global hamburger collapse === */
body[data-dashboard="buyer"] #nav-toggle:checked ~ .page-layout {
  grid-template-columns: var(--sidebar-w, 280px) 1fr;
}
body[data-dashboard="buyer"] #nav-toggle:checked ~ .page-layout .sidebar{
  transform:none; opacity:1; pointer-events:auto;
}




/* === Under-Construction Hologram Overlay (with moving stripes) === */

.feature-locked {
  /* Visual tuning variables */
  --uc-dim: 0.10;                 /* 0..1 : veil strength */
  --uc-width: min(1000px, 96%);   /* banner width */
  --uc-height: 80px;             /* banner height */
  --uc-top: 50%;                  /* vertical position: 25% top, 50% center, 80% bottom */
  --uc-blur: 20px;               /* veil blur - augmenté pour effet verre sablé */

  position: relative;
  filter: grayscale(0.5) contrast(0.98) brightness(0.97);
  pointer-events: none;           /* Désactive tous les clics */
  user-select: none;              /* Empêche la sélection du texte */
  opacity: 0.65;                  /* Réduit la visibilité globale */
}

.feature-locked::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  /* Effet frosted glass / verre sablé */
  background: rgba(10, 15, 28, 0.75);
  backdrop-filter: blur(var(--uc-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--uc-blur)) saturate(180%);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  pointer-events: none;
}

/* Animated banner holder (inline SVG include goes here) */
.uc-holo-anim {
  position: absolute;
  left: 50%;
  top: var(--uc-top);
  transform: translate(-50%, -50%);
  width: var(--uc-width);
  height: var(--uc-height);
  pointer-events: none;
  z-index: 2;
}
.uc-holo-anim svg { width: 100%; height: 100%; display: block; }

/* Quick presets (optional) */
.feature-locked.uc-wide  { --uc-width: min(1200px, 98%); --uc-height: 120px; }
.feature-locked.uc-full  { --uc-width: 100%;            --uc-height: 130px; }
.feature-locked.uc-tall  { --uc-height: 150px; }
.feature-locked.uc-top   { --uc-top: 25%; }
.feature-locked.uc-bottom{ --uc-top: 80%; }

@media (max-width: 768px) {
  .feature-locked { --uc-width: 95%; --uc-height: 88px; }
}

/* ========================================
   PULSE ANIMATION (Global Utility)
   ======================================== */

/* 
 * Usage: Add class .pulse to any element
 * Optional: Add .pulse-green, .pulse-yellow, .pulse-blue for different colors
 * Default: Red (#dc3545)
 * 
 * Example:
 * <span class="pulse">URGENT</span>
 * <span class="pulse pulse-green">OK</span>
 */

.pulse {
  animation: pulse-effect 1s ease-in-out infinite;
}

/* Color variants */
.pulse-red {
  --pulse-color: #dc3545;
  --pulse-glow: rgba(220, 53, 69, 0.8);
}

.pulse-green {
  --pulse-color: #21e6a3;
  --pulse-glow: rgba(33, 230, 163, 0.8);
}

.pulse-yellow {
  --pulse-color: #ffcc66;
  --pulse-glow: rgba(255, 204, 102, 0.8);
}

.pulse-blue {
  --pulse-color: #00d4ff;
  --pulse-glow: rgba(0, 212, 255, 0.8);
}

/* Default to red if no color specified */
.pulse:not(.pulse-green):not(.pulse-yellow):not(.pulse-blue) {
  --pulse-color: #dc3545;
  --pulse-glow: rgba(220, 53, 69, 0.8);
}

@keyframes pulse-effect {
  0%, 100% {
    transform: scale(1);
    text-shadow: 
      0 0 8px var(--pulse-glow),
      0 0 12px var(--pulse-glow),
      0 0 16px var(--pulse-glow);
  }
  50% {
    transform: scale(1);
    text-shadow: 
      0 0 15px var(--pulse-glow),
      0 0 25px var(--pulse-glow),
      0 0 35px var(--pulse-glow),
      0 0 45px var(--pulse-glow);
  }
}

/* For non-text elements (badges, icons, etc.) */
.pulse-bg {
  animation: pulse-bg-effect 1s ease-in-out infinite;
}

@keyframes pulse-bg-effect {
  0%, 100% {
    transform: scale(1);
    box-shadow: 
      0 0 10px var(--pulse-glow),
      0 0 20px var(--pulse-glow);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 
      0 0 20px var(--pulse-glow),
      0 0 40px var(--pulse-glow),
      0 0 60px var(--pulse-glow);
    filter: brightness(1.3);
  }
}

/* ========================================
   COUNTDOWN TIMERS
   ======================================== */

/* Timer countdown base styling */
.countdown {
  font-weight: 700 !important;
  font-size: 0.95rem;
  display: inline-block;
}

/* Urgent/Expired row styling - soft red alert */
.row-urgent {
  background-color: #fff5f5 !important;
  border-left: 3px solid #dc3545;
}

.row-urgent:hover {
  background-color: #ffe5e5 !important;
}

/* Expired timer badge */
.timer-expired {
  display: inline-block;
  padding: 4px 10px;
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  color: white;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

.timer-expired i {
  margin-right: 4px;
}

/* ========================================
   LANDING PAGE - COMPLETE REDESIGN
   ======================================== */

/* =============================================
   HERO CAROUSEL SECTION
   ============================================= */
.hero-carousel-section {
  position: relative;
  z-index: 1;
}

.hero-carousel-section .carousel {
  height: 80vh;
  min-height: 500px;
  max-height: 750px;
}

.hero-carousel-section .carousel-inner,
.hero-carousel-section .carousel-item {
  height: 100%;
}

.hero-slide {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  /* No background - show stars background through */
}

/* Subtle gradient overlay for text readability */
.hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(0, 212, 255, 0.08), transparent 50%);
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 650px;
}

.hero-carousel-title {
  font-family: Orbitron, monospace;
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-bottom: 16px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 212, 255, 0.4);
  animation: fadeInUp 0.8s ease-out;
}

.hero-carousel-subtitle {
  font-size: clamp(14px, 1.8vw, 17px);
  line-height: 1.5;
  margin-bottom: 24px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.hero-carousel-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

.hero-carousel-cta .btn {
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.hero-carousel-cta .btn.primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border: none;
}

.hero-carousel-cta .btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 212, 255, 0.5);
}

.hero-carousel-cta .btn.outline {
  background: rgba(15, 25, 42, 0.7);
  border: 2px solid var(--primary);
  color: var(--primary);
  backdrop-filter: blur(10px);
}

.hero-carousel-cta .btn.outline:hover {
  background: var(--primary);
  color: #001018;
  transform: translateY(-2px);
}

/* Compact Bottom Controls */
.carousel-controls-bottom {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 10;
  background: rgba(10, 15, 28, 0.6);
  backdrop-filter: blur(10px);
  padding: 10px 18px;
  border-radius: 40px;
  border: 1px solid rgba(0, 212, 255, 0.2);
}

/* Hero Carousel Mobile Responsive - Base */
@media (max-width: 768px) {
  .hero-carousel-section .carousel {
    height: 75vh;
    min-height: 420px;
    max-height: 520px;
  }
  
  /* Align content to bottom on mobile */
  .hero-slide {
    align-items: flex-end;
  }
  
  .hero-slide .row {
    align-items: flex-end !important;
  }
  
  .hero-content {
    max-width: 100%;
    padding: 0 16px 70px 16px; /* Bottom padding for controls */
  }
  
  .hero-carousel-title {
    font-size: clamp(20px, 5.5vw, 28px);
    margin-bottom: 8px;
  }
  
  .hero-carousel-subtitle {
    font-size: clamp(12px, 3vw, 14px);
    margin-bottom: 12px;
  }
  
  .hero-carousel-cta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }
  
  .hero-carousel-cta .btn {
    width: auto;
    min-height: auto;
    padding: 8px 16px;
    font-size: 0.8rem;
    text-align: center;
    justify-content: center;
  }
  
  .carousel-controls-bottom {
    bottom: 16px;
    padding: 8px 14px;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .hero-carousel-section .carousel {
    height: 65vh;
    min-height: 380px;
    max-height: 480px;
  }
  
  .hero-content {
    padding-bottom: 70px;
  }
  
  .hero-carousel-title {
    font-size: clamp(18px, 6vw, 24px);
  }
  
  .hero-carousel-cta .btn {
    padding: 6px 12px;
    font-size: 0.75rem;
  }
  
  .carousel-controls-bottom {
    bottom: 12px;
    gap: 10px;
    padding: 6px 12px;
  }
  
  .carousel-nav-btn {
    font-size: 22px;
  }
  
  .carousel-indicators-custom button {
    width: 8px;
    height: 8px;
  }
}

/* =============================================
   TRUST BADGES SECTION
   ============================================= */
.trust-badges-section {
  position: relative;
  padding: 60px 0 80px;
  background: linear-gradient(180deg, rgba(10, 15, 28, 0.4) 0%, transparent 100%);
  overflow: hidden;
}

.trust-badges-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.3), transparent);
}

.trust-badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--panel);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.trust-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.05), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.trust-badge:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 212, 255, 0.5);
  box-shadow: 0 8px 24px rgba(0, 212, 255, 0.2);
}

.trust-badge:hover::before {
  opacity: 1;
}

.trust-badge-icon {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
  transition: all 0.3s ease;
}

.trust-badge:hover .trust-badge-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 20px rgba(0, 212, 255, 0.5);
}

.trust-badge-icon i {
  font-size: 24px;
  color: #001018;
}

.trust-badge-content {
  position: relative;
  z-index: 1;
  flex: 1;
}

.trust-badge-title {
  font-family: Orbitron, monospace;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.trust-badge-text {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

/* Trust Stats Row */
.trust-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  padding: 32px;
  background: rgba(15, 25, 42, 0.4);
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

.trust-stat {
  text-align: center;
  position: relative;
}

.trust-stat-number {
  font-family: Orbitron, monospace;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  background: linear-gradient(135deg, #fff, var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 8px;
  text-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
}

.trust-stat-label {
  font-size: 14px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.trust-stat-divider {
  width: 1px;
  height: 50px;
  background: linear-gradient(180deg, transparent, rgba(0, 212, 255, 0.3), transparent);
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  .trust-badges-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
  }
  
  .trust-badge {
    padding: 16px 20px;
  }
  
  .trust-badge-icon {
    width: 40px;
    height: 40px;
  }
  
  .trust-badge-icon i {
    font-size: 20px;
  }
  
  .trust-badge-title {
    font-size: 14px;
  }
  
  .trust-badge-text {
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .trust-badges-section {
    padding: 40px 0 60px;
  }
  
  .trust-badges-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 32px;
  }
  
  .trust-stats {
    gap: 24px;
    padding: 24px;
  }
  
  .trust-stat-divider {
    display: none;
  }
  
  .trust-stat-number {
    font-size: 28px;
  }
  
  .trust-stat-label {
    font-size: 12px;
  }
}

/* =====================================================
   LIVE ACTIVITY BAR - Social Proof Counters
   ===================================================== */
.live-activity-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 24px;
  padding: 16px 32px;
  background: linear-gradient(135deg, rgba(33, 230, 163, 0.08), rgba(0, 212, 255, 0.08));
  border: 1px solid rgba(33, 230, 163, 0.25);
  border-radius: 50px;
  backdrop-filter: blur(10px);
}

.live-counter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.live-pulse {
  width: 10px;
  height: 10px;
  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--success);
  animation: pulse-live 1.5s ease-in-out infinite;
}

@keyframes pulse-live {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

.live-icon {
  font-size: 18px;
  color: var(--success);
}

.live-icon.escrow-icon {
  color: var(--primary);
}

.live-count {
  font-family: Orbitron, monospace;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.live-count.escrow-amount {
  color: var(--success);
}

.live-label {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}

.live-divider {
  width: 1px;
  height: 30px;
  background: linear-gradient(180deg, transparent, rgba(0, 212, 255, 0.4), transparent);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .live-activity-bar {
    flex-direction: column;
    gap: 16px;
    padding: 16px 24px;
    border-radius: 16px;
  }
  
  .live-divider {
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.4), transparent);
  }
  
  .live-counter {
    gap: 8px;
  }
  
  .live-count {
    font-size: 18px;
  }
  
  .live-label {
    font-size: 12px;
  }
}

/* Extra small mobile - prevent overflow */
@media (max-width: 480px) {
  .trust-badges-section {
    padding: 24px 0 40px;
  }
  
  .trust-badges-section .container {
    padding: 0 12px;
  }
  
  .trust-badges-grid {
    gap: 10px;
    margin-bottom: 24px;
  }
  
  .trust-badge {
    padding: 14px 16px;
    gap: 12px;
  }
  
  .trust-badge-icon {
    width: 36px;
    height: 36px;
  }
  
  .trust-badge-icon i {
    font-size: 18px;
  }
  
  .trust-badge-title {
    font-size: 13px;
  }
  
  .trust-badge-text {
    font-size: 11px;
  }
  
  .trust-stats {
    padding: 16px;
    gap: 16px;
    flex-direction: column;
  }
  
  .trust-stat-number {
    font-size: 24px;
  }
  
  .trust-stat-label {
    font-size: 11px;
  }
  
  .live-activity-bar {
    margin-top: 16px;
    padding: 14px 16px;
    gap: 12px;
    border-radius: 12px;
  }
  
  .live-counter {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
  
  .live-count {
    font-size: 16px;
  }
  
  .live-label {
    font-size: 11px;
    text-align: center;
  }
  
  .live-icon {
    font-size: 16px;
  }
}

.carousel-nav-btn {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  border: none;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  margin: 0;
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
  font-family: Arial, sans-serif;
}

.carousel-nav-btn:hover {
  color: #fff;
  transform: scale(1.2);
}

.carousel-pause-btn {
  font-size: 12px;
  letter-spacing: 1px;
  padding: 0;
  margin: 0;
}

.carousel-indicators-custom {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
}

.carousel-indicators-custom button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(0, 212, 255, 0.6);
  background-color: transparent;
  opacity: 0.7;
  transition: all 0.3s ease;
  padding: 0;
  cursor: pointer;
}

.carousel-indicators-custom button.active {
  background-color: var(--primary);
  border-color: var(--primary);
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
}

.carousel-indicators-custom button:hover {
  opacity: 1;
  background-color: rgba(0, 212, 255, 0.5);
}

/* Fade animation */
.carousel-fade .carousel-item {
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.carousel-fade .carousel-item.active {
  opacity: 1;
}

/* Fade in up animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Featured Products Cards */
.featured-products {
  padding: 80px 20px;
}

.featured-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.featured-card:hover {
  transform: translateY(-8px);
  border-color: var(--line);
  box-shadow: 0 20px 70px rgba(0, 212, 255, 0.3);
}

.featured-ribbon {
  position: absolute;
  top: 16px;
  right: -32px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #001018;
  padding: 6px 40px;
  font-weight: 700;
  font-size: 12px;
  transform: rotate(45deg);
  box-shadow: 0 4px 16px rgba(0, 212, 255, 0.4);
  z-index: 2;
}

.featured-ribbon.ribbon-special {
  background: linear-gradient(135deg, var(--success), #1abc9c);
}

.featured-ribbon.ribbon-promo {
  background: linear-gradient(135deg, var(--warning), #ff9966);
}

.featured-ribbon.ribbon-luxury {
  background: linear-gradient(135deg, #ffcc00, #ff9900);
}

.featured-thumb {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.12), rgba(0, 128, 255, 0.12));
  border-bottom: 1px solid var(--line-soft);
}

.featured-content {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.featured-content h3 {
  font-family: Orbitron, monospace;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}

.featured-desc {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 16px;
  flex: 1;
}

.featured-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
  text-shadow: 0 0 12px rgba(0, 212, 255, 0.5);
  margin-bottom: 16px;
}

.old-price {
  font-size: 18px;
  color: var(--muted);
  text-decoration: line-through;
  margin-left: 12px;
  font-weight: 600;
}

/* Featured Products Carousel */
.featured-carousel-wrapper {
  padding-top: 30px;
  padding-bottom: 20px;
}

#featuredProductsCarousel .carousel-inner {
  overflow: visible;
}

#featuredProductsCarousel .carousel-item {
  overflow: visible;
}

.featured-carousel-control {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  opacity: 1 !important;
  transition: all 0.3s ease;
  top: 50%;
  transform: translateY(-50%);
  filter: none !important;
}

.featured-carousel-control:hover,
.featured-carousel-control:focus {
  opacity: 1 !important;
  background: transparent !important;
}

.featured-carousel-control:focus {
  opacity: 1 !important;
}

.featured-carousel-control i,
.featured-carousel-control .bi {
  font-size: 48px;
  color: #00d4ff !important;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
  transition: all 0.3s ease;
  display: inline-block;
}

.featured-carousel-control:hover i,
.featured-carousel-control:hover .bi {
  color: #ffffff !important;
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
  transform: scale(1.2);
}

.featured-carousel-control.carousel-control-prev {
  left: -60px;
}

.featured-carousel-control.carousel-control-next {
  right: -60px;
}

/* Custom positioning without Bootstrap classes */
.featured-carousel-prev {
  left: -60px;
  position: absolute;
}

.featured-carousel-next {
  right: -60px;
  position: absolute;
}

/* Hide default Bootstrap carousel icons */
.featured-carousel-control .carousel-control-prev-icon,
.featured-carousel-control .carousel-control-next-icon {
  display: none !important;
}

.featured-carousel-indicators {
  position: absolute !important;
  top: -25px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 12px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  bottom: auto !important;
  right: auto !important;
}

.featured-carousel-indicators button {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  border: 2px solid var(--primary) !important;
  background: transparent !important;
  opacity: 0.6 !important;
  transition: all 0.3s ease;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden;
}

.featured-carousel-indicators button:hover {
  opacity: 0.9 !important;
  transform: scale(1.2);
}

.featured-carousel-indicators button.active {
  background: var(--primary) !important;
  opacity: 1 !important;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
}

.featured-icon-placeholder {
  font-size: 48px;
  color: var(--primary);
}

.featured-icon-success {
  color: var(--success);
}

.featured-icon-warning {
  color: var(--warning);
}

.featured-icon-luxury {
  color: #ffcc00;
}

.featured-badge {
  font-size: 0.65rem;
}

.featured-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-card-empty {
  opacity: 0.3;
  min-height: 400px;
}

@media (max-width: 1400px) {
  .featured-carousel-control.carousel-control-prev,
  .featured-carousel-prev {
    left: -30px;
  }
  
  .featured-carousel-control.carousel-control-next,
  .featured-carousel-next {
    right: -30px;
  }
  
  .featured-carousel-control i {
    font-size: 40px;
  }
}

@media (max-width: 992px) {
  .featured-carousel-control.carousel-control-prev,
  .featured-carousel-prev {
    left: 0;
  }
  
  .featured-carousel-control.carousel-control-next,
  .featured-carousel-next {
    right: 0;
  }
  
  .featured-carousel-control i {
    font-size: 32px;
  }
  
  .featured-carousel-wrapper {
    padding-top: 25px;
  }
}

/* Timeline Container (How It Works) */
.how-it-works {
  padding: 80px 20px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(0, 212, 255, 0.06), transparent 60%);
}

.how-it-works-subtitle {
  font-family: Orbitron, monospace;
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 0;
}

.how-it-works-subtitle .how-it-works-icon {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 2px 8px rgba(0, 212, 255, 0.4));
  transition: all 0.3s ease;
}

.how-it-works-subtitle i {
  font-size: 26px;
  filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.5));
}

.timeline-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.timeline-step {
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
}

.timeline-number {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 40px rgba(0, 212, 255, 0.5);
  position: relative;
  z-index: 2;
}

.timeline-number span {
  font-family: Orbitron, monospace;
  font-size: 26px;
  font-weight: 900;
  color: #001018;
}

.timeline-content {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 24px 28px;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

.timeline-content h3 {
  font-family: Orbitron, monospace;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}

.timeline-content p {
  color: var(--muted);
  margin: 0;
  font-size: 16px;
}

.timeline-connector {
  width: 3px;
  height: 50px;
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
  margin-left: 28.5px;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .timeline-number {
    width: 50px;
    height: 50px;
  }
  
  .timeline-number span {
    font-size: 22px;
  }
  
  .timeline-connector {
    height: 40px;
    margin-left: 23.5px;
  }
  
  .timeline-step {
    gap: 16px;
  }
  
  .timeline-content {
    padding: 18px 20px;
  }
  
  .timeline-content h3 {
    font-size: 18px;
  }
  
  .timeline-content p {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .how-it-works .row {
    flex-direction: column;
    gap: 32px;
  }
  
  .timeline-step {
    gap: 12px;
  }
  
  .timeline-number {
    width: 44px;
    height: 44px;
  }
  
  .timeline-number span {
    font-size: 18px;
  }
  
  .timeline-connector {
    height: 30px;
    margin-left: 20.5px;
  }
  
  .timeline-content {
    padding: 14px 16px;
  }
  
  .timeline-content h3 {
    font-size: 16px;
    margin-bottom: 6px;
  }
  
  .timeline-content p {
    font-size: 13px;
    line-height: 1.4;
  }
}

/* Categories Showcase */
.categories-showcase {
  padding: 80px 20px;
}

.category-card {
  position: relative;
  display: block;
  height: 280px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(0, 128, 255, 0.10));
  transition: all 0.3s ease;
  text-decoration: none;
  box-shadow: var(--shadow);
  background-size: cover;
  background-position: center;
}

/* Category specific backgrounds - now set via inline styles in template */

.category-card.category-upgrades {
  background: none;
}

.category-card.category-upgrades::before {
  content: '';
  position: absolute;
  top: -70px;
  left: -90px;
  right: 0;
  bottom: 0;
  background-size: 100%;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  clip-path: polygon(0 0, 140% 0, 0 140%);
  z-index: 0;
}

.category-card.category-upgrades::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: -90px;
  bottom: -70px;
  background-size: 100%;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  clip-path: polygon(90% 0, 100% 100%, 0 83%);
  z-index: 0;
}

.category-card.category-large {
  height: 360px;
}

.category-card:hover {
  transform: translateY(-6px);
  border-color: var(--line);
  box-shadow: 0 20px 70px rgba(0, 212, 255, 0.35);
}

.category-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 10, 20, 0.9) 100%);
  transition: all 0.3s ease;
}

.category-card:hover .category-overlay {
  background: linear-gradient(180deg, transparent 30%, rgba(0, 10, 20, 0.85) 100%);
}

.category-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px;
  z-index: 2;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 20px;
}

.category-content .category-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 16px rgba(0, 212, 255, 0.5));
  transition: all 0.3s ease;
}

.category-card:hover .category-icon {
  filter: drop-shadow(0 6px 24px rgba(0, 212, 255, 0.8));
  transform: scale(1.08);
}

.category-text {
  flex: 1;
}

.category-content i {
  font-size: 48px;
  color: var(--primary);
  margin-bottom: 16px;
  display: block;
  filter: drop-shadow(0 0 12px rgba(0, 212, 255, 0.6));
}

.category-content h3 {
  font-family: Orbitron, monospace;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 6px;
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
  line-height: 1.2;
}

.category-content p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
  line-height: 1.4;
}

/* Guides Section */
.guides-section {
  padding: 80px 20px;
}

.guide-card {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.guide-card:hover {
  transform: translateY(-6px);
  border-color: var(--line);
  box-shadow: 0 18px 60px rgba(0, 212, 255, 0.3);
}

.guide-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.guide-icon img {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 8px rgba(0, 212, 255, 0.3));
  transition: all 0.3s ease;
}

.guide-card:hover .guide-icon {
  transform: translateY(-4px);
}

.guide-card:hover .guide-icon img {
  filter: drop-shadow(0 4px 16px rgba(0, 212, 255, 0.6));
}

.guide-card h3 {
  font-family: Orbitron, monospace;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.guide-card p {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 20px;
  flex: 1;
}

.guide-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.guide-link:hover {
  gap: 12px;
  color: var(--primary-2);
}

/* Ships Carousel Section */
.ships-carousel-section {
  padding: 80px 20px;
  background: radial-gradient(120% 120% at 50% 100%, rgba(0, 212, 255, 0.06), transparent 60%);
}

.carousel-category {
  margin-bottom: 60px;
}

.carousel-category-title {
  font-family: Orbitron, monospace;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
}

.carousel-category-title i {
  color: var(--primary);
  filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.5));
}

.ships-scroll-wrapper {
  position: relative;
  overflow: hidden;
  margin: 0 -20px;
  padding: 0 20px;
}

.ships-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 0 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--panel);
  cursor: grab;
}

.ships-scroll:active {
  cursor: grabbing;
}

.ships-scroll::-webkit-scrollbar {
  height: 8px;
}

.ships-scroll::-webkit-scrollbar-track {
  background: var(--panel);
  border-radius: 10px;
}

.ships-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  border-radius: 10px;
}

.ship-mini-card {
  flex: 0 0 220px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  transition: all 0.3s ease;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}

.ship-mini-card:hover {
  transform: translateY(-6px);
  border-color: var(--line);
  box-shadow: 0 16px 50px rgba(0, 212, 255, 0.3);
}

.ship-mini-thumb {
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(0, 128, 255, 0.10));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--line-soft);
}

.ship-mini-thumb i {
  font-size: 36px;
  color: var(--primary);
  filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.5));
}

.ship-mini-name {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 8px;
  color: var(--text);
}

.ship-mini-price {
  font-weight: 800;
  font-size: 20px;
  color: var(--primary);
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

/* Ship Categories Section */
.ship-categories-section {
  padding: 100px 20px;
}

.category-ship-large,
.category-ship-small {
  display: block;
  height: 100%;
  min-height: 300px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 40px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
}

.category-ship-large {
  min-height: 500px;
}

.category-ship-small {
  min-height: 240px;
}

/* Ship role specific backgrounds - now set via inline styles in template */
.category-role-fighter,
.category-role-cargo,
.category-role-industrial,
.category-role-exploration,
.category-role-support {
  background-size: cover;
  background-position: center;
}

.category-ship-large:hover,
.category-ship-small:hover {
  transform: translateY(-8px);
  border-color: var(--line);
  box-shadow: 0 20px 60px rgba(0, 212, 255, 0.4);
}

.category-ship-large .category-overlay,
.category-ship-small .category-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0, 212, 255, 0.1), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.category-ship-large:hover .category-overlay,
.category-ship-small:hover .category-overlay {
  opacity: 1;
}

.category-ship-large .category-content,
.category-ship-small .category-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* Position text at bottom-left for Ship Categories */
.category-content.category-content-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  height: auto;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 10, 20, 0.85) 100%);
}

.category-ship-large .category-content i,
.category-ship-small .category-content i {
  display: none; /* Hide icons when text is at bottom */
}

.category-ship-large .category-content h3 {
  font-family: Orbitron, monospace;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--text);
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
  line-height: 1.1;
}

.category-ship-small .category-content h3 {
  font-family: Orbitron, monospace;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--text);
  text-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
  line-height: 1.1;
}

.category-ship-large .category-content p {
  font-size: 13px;
  color: var(--muted);
  max-width: 400px;
  margin: 0;
  line-height: 1.4;
}

.category-ship-small .category-content p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

/* =============================================
   PREMIUM CTA SECTION
   ============================================= */
.cta-premium-section {
  padding: 100px 20px;
  position: relative;
  overflow: hidden;
}

.cta-premium-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.1), transparent 70%);
  pointer-events: none;
  animation: pulse-glow 4s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.cta-premium-card {
  position: relative;
  background: linear-gradient(135deg, rgba(15, 25, 42, 0.9), rgba(5, 10, 20, 0.95));
  border: 2px solid rgba(0, 212, 255, 0.3);
  border-radius: 24px;
  padding: 64px 48px;
  text-align: center;
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0, 212, 255, 0.2);
  overflow: hidden;
  transition: all 0.4s ease;
}

.cta-premium-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--primary), var(--primary-2), var(--primary));
  border-radius: 24px;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s ease;
  filter: blur(10px);
}

.cta-premium-card:hover::before {
  opacity: 0.3;
}

.cta-premium-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 212, 255, 0.6);
  box-shadow: 0 24px 80px rgba(0, 212, 255, 0.3);
}

.cta-premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 128, 255, 0.2));
  border: 1px solid rgba(0, 212, 255, 0.4);
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
  animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(0, 212, 255, 0); }
}

.cta-premium-badge i {
  font-size: 16px;
}

.cta-premium-title {
  font-family: Orbitron, monospace;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  background: linear-gradient(135deg, #fff, var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.cta-premium-subtitle {
  font-size: clamp(16px, 2vw, 18px);
  color: var(--muted);
  margin-bottom: 40px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.cta-premium-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 40px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.cta-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(0, 212, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  transition: all 0.3s ease;
  white-space: nowrap;
}

.cta-feature:hover {
  background: rgba(0, 212, 255, 0.1);
  border-color: rgba(0, 212, 255, 0.4);
  transform: translateX(4px);
}

.cta-feature i {
  font-size: 18px;
  color: var(--success);
  flex-shrink: 0;
}

.cta-premium-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.cta-premium-buttons .btn {
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 12px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.cta-premium-buttons .btn.primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border: none;
  color: #001018;
  box-shadow: 0 8px 24px rgba(0, 212, 255, 0.4);
}

.cta-premium-buttons .btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 212, 255, 0.6);
}

.cta-premium-buttons .btn.outline {
  background: rgba(15, 25, 42, 0.6);
  border: 2px solid var(--primary);
  color: var(--primary);
  backdrop-filter: blur(10px);
}

.cta-premium-buttons .btn.outline:hover {
  background: rgba(0, 212, 255, 0.1);
  transform: translateY(-2px);
}

.cta-premium-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.trust-item i {
  color: var(--primary);
  font-size: 16px;
}

.trust-divider {
  color: rgba(0, 212, 255, 0.3);
}

/* Responsive */
@media (max-width: 992px) {
  .cta-premium-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .cta-premium-card {
    padding: 40px 24px;
  }
  
  .cta-premium-features {
    grid-template-columns: 1fr;
  }
  
  .cta-premium-buttons {
    flex-direction: column;
  }
  
  .cta-premium-buttons .btn {
    width: 100%;
  }
  
  .cta-premium-trust {
    flex-direction: column;
    gap: 12px;
  }
  
  .trust-divider {
    display: none;
  }
}

/* Guides Page Specific Styles */
.guide-section {
  display: none;
}

.guide-section.active {
  display: block;
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Guides sidebar: outer <aside> is a transparent grid column,
   inner .sidebar-content is the actual sticky + styled element */
.guides-sidebar {
  position: relative !important;
  top: 0 !important;
  align-self: start !important;
  overflow: visible;
  max-height: none;
  /* Strip visual styling from the column itself */
  background: transparent !important;
  border-right: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

.guides-sidebar::before {
  display: none !important; /* hide the glow pseudo-element */
}

.guides-sidebar .sidebar-content {
  position: sticky;
  top: calc(var(--header-h, 64px) + 16px);
  max-height: calc(100vh - var(--header-h, 64px) - 32px);
  overflow-y: auto;
  height: auto;
  /* Visual styling moved here from the <aside> */
  background: var(--panel-strong);
  border-right: 1px solid var(--line-soft);
  box-shadow: 4px 0 20px rgba(0, 212, 255, 0.15);
  backdrop-filter: blur(16px);
  border-radius: var(--radius, 12px);
  padding-top: 0;
}

/* Reduce top gap inside guides sidebar */
.guides-sidebar .menu-section:first-child {
  padding-top: 16px;
}

.guide-header {
  display: flex;
  align-items: center;
}

.guide-content h2 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.guide-content h3 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  color: var(--primary);
}

.guide-content ul, 
.guide-content ol {
  margin: 1rem 0;
  padding-left: 0;
  list-style: none;
}

.guide-content li {
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
  position: relative;
}

.guide-content li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--success, #28a745);
  font-weight: bold;
}

/* Override for "cannot" lists - use X instead of checkmark */
.guide-content .cannot-list li::before {
  content: "✗";
  color: var(--danger, #dc3545);
}

.guide-content p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.guide-content p strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.guide-content strong {
  font-weight: 600;
  color: var(--primary);
}

.guide-content hr {
  margin: 2rem 0;
  border: none;
  border-top: 2px dashed var(--border);
}

.guide-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.2s;
  line-height: 1.5;
}

.guide-link.active {
  color: var(--primary);
  font-weight: 600;
}

.guide-link i {
  font-size: 1rem;
  flex-shrink: 0;
  color: var(--primary);
  opacity: 0.8;
  transition: all 0.2s;
}

.guide-link.active i,
.guide-link:hover i {
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.6));
}

.guide-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  align-self: center;
}

.guide-menu-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0.8);
  transition: all 0.2s;
}

.guide-link.active .guide-menu-icon img,
.guide-link:hover .guide-menu-icon img {
  filter: brightness(1.2) drop-shadow(0 0 4px rgba(0, 212, 255, 0.6));
}

.menu-separator {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 1.5rem 0;
}

/* Final CTA */
.final-cta {
  padding: 80px 20px;
}

.cta-card {
  background: radial-gradient(120% 120% at 50% 0%, rgba(0, 212, 255, 0.15), rgba(0, 0, 0, 0.2) 60%);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 60px 40px;
  text-align: center;
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 90px rgba(0, 212, 255, 0.3);
}

.cta-card h2 {
  font-family: Orbitron, monospace;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  margin-bottom: 16px;
  color: var(--text);
  text-shadow: 0 0 24px rgba(0, 212, 255, 0.3);
}

.cta-card p {
  color: var(--muted);
  font-size: clamp(16px, 2vw, 18px);
  max-width: 600px;
  margin: 0 auto 32px;
}

.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-buttons .btn {
  padding: 16px 32px;
  font-size: 16px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  /* Hero Carousel Mobile */
  .hero-carousel-section .carousel {
    height: 70vh;
    min-height: 450px;
  }

  /* Adjust slide background gradient for better mobile visibility */
  .hero-slide[style*="background"] {
    background-position: center !important;
  }

  .hero-carousel-title {
    font-size: clamp(24px, 7vw, 38px);
  }

  .hero-carousel-subtitle {
    font-size: clamp(13px, 3.5vw, 16px);
  }

  .hero-carousel-cta {
    flex-direction: column;
    width: 100%;
  }

  .hero-carousel-cta .btn {
    padding: 12px 24px;
    font-size: 14px;
    width: 100%;
  }

  .carousel-controls-bottom {
    bottom: 20px;
    padding: 6px 12px;
    gap: 10px;
  }

  .carousel-nav-btn {
    font-size: 24px;
    padding: 4px 6px;
  }

  .carousel-pause-btn {
    font-size: 11px;
  }

  .carousel-indicators-custom {
    gap: 8px;
  }

  .carousel-indicators-custom button {
    width: 8px;
    height: 8px;
  }

  .how-it-works-subtitle {
    font-size: 18px;
  }

  .how-it-works-subtitle i {
    font-size: 22px;
  }

  .featured-products,
  .how-it-works,
  .categories-showcase,
  .guides-section,
  .ship-categories-section,
  .trust-security-section,
  .final-cta {
    padding: 60px 20px;
  }

  .category-card,
  .category-card.category-large {
    height: 240px;
  }

  .category-ship-large,
  .category-ship-small {
    min-height: 240px;
  }

  .category-ship-large .category-content h3,
  .category-ship-large .category-content.category-content-bottom h3 {
    font-size: 22px;
  }

  .category-ship-small .category-content h3,
  .category-ship-small .category-content.category-content-bottom h3 {
    font-size: 16px;
  }

  .category-ship-large .category-content p,
  .category-ship-small .category-content p {
    font-size: 12px;
  }

  .guide-icon {
    width: 42px;
    height: 42px;
  }

  .trust-card {
    padding: 32px 20px;
  }

  .trust-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 16px;
  }

  .trust-value {
    font-size: 28px;
  }

  .trust-label {
    font-size: 16px;
  }

  .cta-card {
    padding: 40px 24px;
  }
}

/* Extra small devices (very small phones, < 576px) */
@media (max-width: 576px) {
  /* Optimize carousel gradient for small screens */
  .hero-slide[style*="linear-gradient"] {
    background-blend-mode: normal !important;
  }

  .hero-carousel-section .carousel {
    height: 65vh;
    min-height: 400px;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-carousel-title {
    font-size: clamp(22px, 6vw, 32px);
    margin-bottom: 12px;
  }

  .hero-carousel-subtitle {
    font-size: clamp(12px, 3vw, 14px);
    margin-bottom: 20px;
  }

  .hero-carousel-cta .btn {
    padding: 10px 20px;
    font-size: 13px;
  }

  .carousel-controls-bottom {
    bottom: 15px;
    padding: 5px 10px;
    gap: 8px;
  }

  .carousel-nav-btn {
    font-size: 20px;
  }

  .carousel-pause-btn {
    font-size: 10px;
  }

  .carousel-indicators-custom button {
    width: 7px;
    height: 7px;
  }

  .guide-icon {
    width: 38px;
    height: 38px;
  }

  .trust-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
  }
}

/* ===========================
   Utility Classes
   =========================== */

/* Classe pour cards/éléments inactifs (stats, features, etc.) */
.inactive-card {
  opacity: 0.4;
  filter: grayscale(100%);
  pointer-events: none;
  position: relative;
  user-select: none;
}

.inactive-card::after {
  content: "🔒";
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 20px;
  opacity: 0.6;
  pointer-events: none;
}

/* Alternative sans icône cadenas */
.inactive-card.no-icon::after {
  content: none;
}

/* ---------- Form Switch Toggle (Bootstrap fix) ---------- */
.form-check-input[type="checkbox"][role="switch"],
.form-switch .form-check-input {
  width: 3rem;
  height: 1.5rem;
  background-color: #6c757d;
  background-image: none !important;
  border: none;
  border-radius: 2rem;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease-in-out;
  appearance: none;
  -webkit-appearance: none;
  margin-right: 20px;
}

.form-check-input[type="checkbox"][role="switch"]::before,
.form-switch .form-check-input::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;
  height: 1.25rem;
  background-color: #d1d5db;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
}

.form-check-input[type="checkbox"][role="switch"]:checked,
.form-switch .form-check-input:checked {
  background-color: var(--primary);
}

.form-check-input[type="checkbox"][role="switch"]:checked::before,
.form-switch .form-check-input:checked::before {
  background-color: #ffffff;
  transform: translateX(1.5rem);
}

.form-check-input[type="checkbox"][role="switch"]:focus,
.form-switch .form-check-input:focus {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(0, 212, 255, 0.25);
}

.form-check-input[type="checkbox"][role="switch"]:disabled,
.form-switch .form-check-input:disabled {
  background-color: #495057;
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========================================
   Wallet / Store Credit & Refund Styles
   ======================================== */

/* Modal customization for dark theme */
.modal-content {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}

.modal-header {
  border-bottom-color: var(--line-soft);
}

.modal-title {
  color: var(--text);
}

.btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Input group styling for wallet */
.input-group-text {
  background-color: var(--panel);
  border-color: var(--line-soft);
  color: var(--muted);
}

/* Alert info styling */
.alert-info {
  background-color: rgba(0, 212, 255, 0.1);
  border-color: var(--primary);
  color: var(--text);
}

/* Transaction table enhancements */
.table-hover tbody tr:hover {
  background-color: rgba(0, 212, 255, 0.05);
}

/* Balance display in modal */
.bg-opacity-10 {
  background-color: rgba(0, 212, 255, 0.1) !important;
}

/* Pagination active state */
.page-item.active .page-link {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--bg);
}

.page-link {
  background-color: var(--panel);
  border-color: var(--line-soft);
  color: var(--primary);
}

.page-link:hover {
  background-color: rgba(0, 212, 255, 0.1);
  border-color: var(--primary);
  color: var(--primary);
}

.page-item.disabled .page-link {
  background-color: var(--panel);
  border-color: var(--line-soft);
  color: var(--muted);
  opacity: 0.5;
}

/* ============================================
   MARKET PAGINATION MOBILE
   ============================================ */
/* NOTE: Mobile pagination styles moved to market/static/market/css/market-mobile.css */
/* These global styles are disabled to prevent conflicts */


/* ============================================
   MOBILE BOTTOM MENU
   ============================================ */

/* Trigger button - sticky at bottom */
.mobile-menu-trigger {
  display: none; /* Hidden on desktop */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  height: 56px;
  background: linear-gradient(180deg, rgba(10, 15, 28, 0.95), rgba(5, 10, 20, 0.98));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: none;
  border-top: 1px solid var(--line-soft);
  color: var(--primary);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.mobile-menu-trigger i {
  font-size: 22px;
}

.mobile-menu-trigger:hover,
.mobile-menu-trigger:focus {
  background: linear-gradient(180deg, rgba(0, 212, 255, 0.15), rgba(10, 15, 28, 0.98));
  color: #fff;
}

/* Show on mobile only */
@media (max-width: 900px) {
  .mobile-menu-trigger {
    display: flex;
  }
  
  /* Adjust other fixed elements to account for menu bar */
  /* Discord goes higher (above back-to-top) */
  .sticky-discord {
    right: 5px !important;
    bottom: 105px !important;
  }
  
  /* Back-to-top just above the menu */
  #sd-to-top,
  .back-to-top {
    bottom: 60px !important;
    right: 8px !important;
    width: 38px !important;
    height: 38px !important;
    z-index: 58 !important;
  }
  
  /* Trustpilot - highest position */
  .sticky-trustpilot {
    right: 5px !important;
    bottom: 153px !important;
  }
  
  /* Hide the sticky CTA since we have the menu now */
  .sticky-cta {
    display: none !important;
  }
  
  /* Add padding to body to prevent content being hidden behind menu */
  body {
    padding-bottom: 56px;
  }
}

/* Safe area for iPhone X+ */
@supports(padding: max(0px)) {
  .mobile-menu-trigger {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    height: calc(56px + max(0px, env(safe-area-inset-bottom)));
  }
  
  @media (max-width: 900px) {
    body {
      padding-bottom: calc(56px + max(0px, env(safe-area-inset-bottom)));
    }
  }
}

/* Overlay */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-menu-overlay.open {
  display: block;
  opacity: 1;
}

/* Bottom sheet */
.mobile-menu-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1070;
  max-height: 85vh;
  background: linear-gradient(180deg, rgba(15, 25, 42, 0.98), rgba(10, 15, 28, 0.99));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  border: 1px solid var(--line-soft);
  border-bottom: none;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4), 
              0 0 60px rgba(0, 212, 255, 0.1);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mobile-menu-sheet.open {
  transform: translateY(0);
}

/* Sheet header */
.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}

.mobile-menu-handle {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
}

.mobile-menu-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Orbitron, monospace;
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
}

.mobile-menu-title i {
  color: var(--primary);
  font-size: 20px;
}

.mobile-menu-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.mobile-menu-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  border-color: var(--line);
}

/* Sheet content */
.mobile-menu-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 24px;
  -webkit-overflow-scrolling: touch;
}

/* Menu sections */
.mobile-menu-section {
  margin-bottom: 24px;
}

.mobile-menu-section:last-child {
  margin-bottom: 0;
}

.mobile-menu-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.mobile-menu-section-title i {
  color: var(--primary);
  font-size: 14px;
}

/* Menu list */
.mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu-list li {
  margin-bottom: 4px;
}

.mobile-menu-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  font-size: 15px;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.mobile-menu-link:hover,
.mobile-menu-link:focus {
  background: rgba(0, 212, 255, 0.08);
  border-color: var(--line-soft);
  color: var(--primary);
}

.mobile-menu-link i {
  font-size: 18px;
  color: var(--primary);
  width: 24px;
  text-align: center;
}

.mobile-menu-link-highlight {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 128, 255, 0.05));
  border-color: rgba(0, 212, 255, 0.2) !important;
}

.mobile-menu-badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--danger);
  color: white;
  font-size: 12px;
  font-weight: 700;
}

/* Auth buttons */
.mobile-menu-auth {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
}

.mobile-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 20px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  transition: all 0.25s ease;
  min-height: 52px;
}

.mobile-menu-btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #001018;
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3);
}

.mobile-menu-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 212, 255, 0.4);
  color: #001018;
}

.mobile-menu-btn-outline {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
}

.mobile-menu-btn-outline:hover {
  background: rgba(0, 212, 255, 0.1);
  color: var(--primary);
}

/* Logout button */
.mobile-menu-section-logout {
  border-top: 1px solid var(--line-soft);
  padding-top: 16px;
  margin-top: 8px;
}

.mobile-menu-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 122, 122, 0.3);
  background: rgba(255, 122, 122, 0.08);
  color: var(--danger);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.2s ease;
}

.mobile-menu-logout:hover {
  background: rgba(255, 122, 122, 0.15);
  border-color: var(--danger);
  color: var(--danger);
}

/* Hide desktop header nav on mobile when menu is present */
@media (max-width: 900px) {
  /* Optional: hide desktop header CTA buttons since menu handles it */
  /* .header-neo .nav-cta { display: none; } */
}

/* ==========================================================
   GLOBAL RESPONSIVE - Cards & Form Cards
   ========================================================== */
@media (max-width: 900px) {
  .form-card {
    padding: 20px !important;
    border-radius: 12px !important;
  }
  .card {
    border-radius: 10px !important;
  }
  .card-body {
    padding: 0.75rem !important;
  }
  /* Reduce row gaps */
  .row.g-3, .row.g-4 {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
  }
}

@media (max-width: 768px) {
  .form-card {
    padding: 12px !important;
    border-radius: 10px !important;
  }
  .card {
    border-radius: 8px !important;
  }
  .card-body {
    padding: 0.5rem !important;
  }
  /* Typography reductions */
  .h1, h1 { font-size: 1.5rem !important; }
  .h2, h2 { font-size: 1.25rem !important; }
  .h3, h3 { font-size: 1.1rem !important; }
  .h4, h4 { font-size: 1rem !important; }
  .h5, h5 { font-size: 0.9rem !important; }
  .h6, h6 { font-size: 0.8rem !important; }
  /* Smaller gaps */
  .row.g-3, .row.g-4 {
    --bs-gutter-x: 0.5rem;
    --bs-gutter-y: 0.5rem;
  }
  .mb-4 { margin-bottom: 1rem !important; }
  .mb-3 { margin-bottom: 0.75rem !important; }
  .py-3 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  /* Form elements smaller */
  .form-control, .form-select {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.85rem !important;
  }
  .form-label {
    font-size: 0.75rem !important;
    margin-bottom: 0.25rem !important;
  }
  /* Table text smaller */
  .table {
    font-size: 0.8rem !important;
  }
  .table th, .table td {
    padding: 0.4rem 0.5rem !important;
  }
  /* Badges smaller */
  .badge {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.4rem !important;
  }
  /* Small text even smaller */
  .small, small {
    font-size: 0.7rem !important;
  }
  .text-muted.small {
    font-size: 0.65rem !important;
  }
}

@media (max-width: 480px) {
  .form-card {
    padding: 8px !important;
    border-radius: 8px !important;
  }
  .card-body {
    padding: 0.4rem !important;
  }
  /* Even smaller typography */
  .h4, h4 { font-size: 0.95rem !important; }
  .h5, h5 { font-size: 0.85rem !important; }
  .h6, h6 { font-size: 0.75rem !important; }
  /* Tighter gaps */
  .row.g-3, .row.g-4, .row.g-2 {
    --bs-gutter-x: 0.35rem;
    --bs-gutter-y: 0.35rem;
  }
  .mb-4 { margin-bottom: 0.75rem !important; }
  .mb-3 { margin-bottom: 0.5rem !important; }
  /* Form elements even smaller */
  .form-control, .form-select {
    padding: 0.35rem 0.5rem !important;
    font-size: 0.8rem !important;
  }
  /* Table extra compact */
  .table {
    font-size: 0.75rem !important;
  }
  .table th, .table td {
    padding: 0.3rem 0.4rem !important;
  }
}

/* ==========================================================
   GLOBAL RESPONSIVE - Buttons (at end to override all)
   ========================================================== */
@media (max-width: 900px) {
  .btn {
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
    border-radius: 8px;
  }
  .btn.primary {
    padding: 0.5rem 1rem;
  }
  .btn.outline {
    padding: 0.45rem 0.8rem;
  }
  .btn-sm, .btn.btn-sm {
    padding: 0.35rem 0.65rem;
    font-size: 0.7rem;
  }
}

@media (max-width: 576px) {
  .btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 6px;
  }
  .btn.primary {
    padding: 0.4rem 0.85rem;
  }
  .btn.outline {
    padding: 0.35rem 0.65rem;
  }
  .btn-sm, .btn.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.65rem;
  }
}

/* =============================================
   LANDING PAGE MOBILE OPTIMIZATIONS
   ============================================= */

@media (max-width: 768px) {
  /* ===== HERO CAROUSEL MOBILE ===== */
  .hero-carousel-section .carousel {
    height: 75vh;
    min-height: 420px;
    max-height: 520px;
  }
  
  .hero-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding-bottom: 80px; /* Space above controls */
  }
  
  .hero-carousel-title {
    font-size: clamp(20px, 5.5vw, 28px);
    margin-bottom: 8px;
  }
  
  .hero-carousel-subtitle {
    font-size: clamp(12px, 3vw, 14px);
    margin-bottom: 12px;
  }
  
  /* Hero buttons - much smaller on mobile */
  .hero-carousel-cta {
    justify-content: center;
  }
  
  .hero-carousel-cta .btn {
    width: auto;
    min-height: auto;
    padding: 8px 16px;
    font-size: 0.8rem;
  }
  
  /* ===== FEATURED PRODUCTS CAROUSEL MOBILE ===== */
  .featured-products {
    padding: 40px 12px;
  }
  
  .featured-products .title {
    font-size: 1.4rem;
  }
  
  .featured-products .subtitle {
    font-size: 0.85rem;
  }
  
  /* Show 2 cards per slide on mobile */
  .featured-card {
    transform: scale(0.95);
  }
  
  .featured-thumb {
    height: 120px;
  }
  
  .featured-content {
    padding: 12px;
  }
  
  .featured-content h3 {
    font-size: 14px;
    margin-bottom: 4px;
  }
  
  .featured-desc {
    font-size: 11px;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .featured-price {
    font-size: 18px;
    margin-bottom: 8px;
  }
  
  .featured-ribbon {
    font-size: 9px;
    padding: 4px 30px;
    top: 10px;
    right: -28px;
  }
  
  .featured-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
  }
  
  .featured-card .btn {
    padding: 6px 10px;
    font-size: 0.75rem;
  }
  
  /* Carousel controls */
  .featured-carousel-control i,
  .featured-carousel-control .bi {
    font-size: 32px;
  }
  
  .featured-carousel-control.carousel-control-prev {
    left: -5px;
  }
  
  .featured-carousel-control.carousel-control-next {
    right: -5px;
  }
  
  /* ===== GUIDES SECTION MOBILE ===== */
  .guides-section {
    padding: 40px 12px;
  }
  
  .guides-section .title {
    font-size: 1.4rem;
  }
  
  .guide-card {
    padding: 20px 16px;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 16px;
  }
  
  .guide-icon {
    width: 40px;
    height: 40px;
    margin: 0;
    flex-shrink: 0;
  }
  
  .guide-card h3 {
    font-size: 14px;
    margin-bottom: 4px;
  }
  
  .guide-card p {
    font-size: 12px;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .guide-link {
    font-size: 12px;
  }
  
  /* ===== HOW IT WORKS MOBILE ===== */
  .how-it-works {
    padding: 40px 12px;
  }
  
  .how-it-works .title {
    font-size: 1.4rem;
  }
  
  .how-it-works-subtitle {
    font-size: 1rem;
  }
  
  .timeline-content h3 {
    font-size: 0.95rem;
  }
  
  .timeline-content p {
    font-size: 0.8rem;
  }
  
  .timeline-number {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  
  /* ===== CTA SECTION MOBILE ===== */
  .cta-premium-section {
    padding: 40px 12px;
  }
  
  .cta-premium-card {
    padding: 24px 16px;
  }
  
  .cta-premium-title {
    font-size: 1.3rem;
  }
  
  .cta-premium-subtitle {
    font-size: 0.85rem;
  }
  
  .cta-premium-features {
    gap: 8px;
  }
  
  .cta-feature {
    font-size: 0.75rem;
    padding: 6px 10px;
  }
  
  .cta-premium-buttons {
    flex-direction: column;
    gap: 10px;
  }
  
  .cta-premium-buttons .btn {
    width: 100%;
  }
  
  .cta-premium-trust {
    flex-direction: column;
    gap: 8px;
  }
  
  .trust-divider {
    display: none;
  }
}

@media (max-width: 480px) {
  /* Extra small screens - non-hero elements */
  .featured-thumb {
    height: 100px;
  }
  
  .featured-content h3 {
    font-size: 12px;
  }
  
  .featured-price {
    font-size: 16px;
  }
  
  .guide-card {
    padding: 16px 12px;
    gap: 12px;
  }
  
  .guide-icon {
    width: 32px;
    height: 32px;
  }
  
  .guide-card h3 {
    font-size: 13px;
  }
  
  .guide-card p {
    display: none; /* Hide description on very small screens */
  }
}

/* ============================================
   NOTIFICATIONS — User notification pages
   ============================================ */

/* Page wrapper */
.notifications-page {
  max-width: 720px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.notifications-page .page-title {
  font-family: 'Orbitron', monospace;
  color: var(--primary);
  text-shadow: 0 0 12px rgba(0, 212, 255, 0.3);
}

/* Tab navigation */
.notif-tabs .nav-link {
  color: var(--muted, #b8c2d9);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.5rem 1rem;
}
.notif-tabs .nav-link.active {
  color: var(--primary, #00d4ff);
  border-bottom-color: var(--primary, #00d4ff);
  background: transparent;
}

/* Notification card */
.notif-card {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius, 10px);
  padding: 1rem;
  margin-bottom: 0.75rem;
  backdrop-filter: blur(14px);
  transition: background 0.2s, border-color 0.2s;
}
.notif-card:hover {
  background: rgba(0, 212, 255, 0.08);
  border-color: rgba(0, 212, 255, 0.3);
}
.notif-card.unread {
  border-left: 3px solid var(--primary, #00d4ff);
}

/* Notification icon bubble */
.notif-card .notif-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.notif-card .notif-icon.text-info    { background: rgba(0, 212, 255, 0.1); }
.notif-card .notif-icon.text-success { background: rgba(33, 230, 163, 0.1); }
.notif-card .notif-icon.text-warning { background: rgba(255, 193, 7, 0.1); }
.notif-card .notif-icon.text-danger  { background: rgba(255, 122, 122, 0.1); }

/* Timestamp */
.notif-time { font-size: 0.75rem; color: var(--muted, #b8c2d9); }

/* Empty state */
.notif-empty {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--muted, #b8c2d9);
  opacity: 0.6;
}