/* ============================================================
   RFONLINE.DEV — BLACKHOLE THEME (Purple Singularity)
   Visual redesign layer. Loads AFTER main.css / admin.css.
   - Re-skins existing components via CSS variables (no markup logic touched)
   - Adds dark (default) + light theme via html[data-theme]
   - Blackhole vortex background + smooth transitions + responsive polish
   Inspired by the uploaded reference video: deep void black, swirling
   violet accretion disk, magenta highlights (#A855F7 / #7C3AED / #D8A8F0).
   ============================================================ */

/* ---------- THEME TOKENS ---------- */
:root,
html[data-theme="dark"] {
  --color-bg-primary:    #08040F;
  --color-bg-secondary:  #100A1F;
  --color-bg-card:       #160C2A;
  /* accent + gradient now come from Appearance settings (inline <style> in head) */
  --color-accent-soft:   #D8A8F0;
  --color-text-primary:  #F3EAFF;
  --color-text-secondary:#B8AAD6;
  --glass-bg:            rgba(255,255,255,.05);
  --glass-bg-hover:      rgba(255,255,255,.09);
  --glass-border:        rgba(255,255,255,.12);
  --glass-shadow:        0 10px 38px rgba(0,0,0,.55);
  --bh-trail:            rgba(8,4,15,.30);
  --bh-veil:             radial-gradient(ellipse 52% 44% at 68% 44%, rgba(124,58,237,.09) 0%, transparent 60%),
                         radial-gradient(ellipse 60% 50% at 82% 84%, rgba(168,85,247,.12) 0%, transparent 60%);
}

html[data-theme="light"] {
  --color-bg-primary:    #F6F3FF;
  --color-bg-secondary:  #ECE6FB;
  --color-bg-card:       #FFFFFF;
  /* accent + gradient now come from Appearance settings (inline <style> in head) */
  --color-accent-soft:   #6D28D9;
  --color-text-primary:  #1B1030;
  --color-text-secondary:#5C4B7D;
  --glass-bg:            rgba(0,0,0,.04);
  --glass-bg-hover:      rgba(0,0,0,.07);
  --glass-border:        rgba(30,20,60,.14);
  --glass-shadow:        0 10px 30px rgba(76,29,149,.14);
  --bh-trail:            rgba(246,243,255,.34);
  --bh-veil:             radial-gradient(ellipse 52% 44% at 68% 44%, rgba(124,58,237,.06) 0%, transparent 60%),
                         radial-gradient(ellipse 60% 50% at 82% 84%, rgba(147,51,234,.08) 0%, transparent 60%);
}

/* ---------- CANVAS BACKGROUND TECHNIQUE ----------
   Dark base lives on <html>; <body> becomes transparent so the fixed
   blackhole canvas (z-index:-1) shows behind normal-flow content. */
html { background: var(--color-bg-primary); }
body { background: transparent !important; }

#blackhole-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  display: block;
}
/* Soft colored veil layered above the canvas for cohesion */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--bh-veil);
}

/* ---------- GLOBAL THEME TRANSITION ---------- */
html.theme-transition,
html.theme-transition * {
  transition: background-color .45s ease, border-color .45s ease,
              color .35s ease, box-shadow .45s ease, fill .35s ease !important;
}

/* ---------- ACCENT GRADIENTS / BRAND ---------- */
.brand-text {
  background: linear-gradient(115deg, var(--color-accent-soft), var(--color-accent) 45%, var(--color-accent-alt));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- NAVBAR ---------- */
html[data-theme="dark"] .navbar.scrolled {
  background: rgba(12,6,24,.78);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 6px 30px rgba(91,33,182,.22);
}
html[data-theme="light"] .navbar.scrolled {
  background: rgba(246,243,255,.86);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 6px 24px rgba(76,29,149,.10);
}
.nav-link.active { color: var(--color-accent); background: var(--glass-bg); }

/* ---------- GLASS CARDS ---------- */
.glass-card { box-shadow: var(--glass-shadow); }
.glass-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 14px 44px var(--color-accent-glow);
  transform: translateY(-3px);
}

/* ---------- BUTTONS (purple glow) ---------- */
.btn-primary {
  background: linear-gradient(120deg, var(--color-accent), var(--color-accent-alt));
  box-shadow: 0 0 22px var(--color-accent-glow);
}
.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 34px var(--color-accent-glow), 0 6px 20px rgba(124,58,237,.35);
  transform: translateY(-2px);
}
.btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); box-shadow: 0 0 18px var(--color-accent-glow); }

/* ---------- HERO (let the vortex show through) ---------- */
html[data-theme="dark"] .hero { background: transparent; }
html[data-theme="light"] .hero { background: transparent; }
html[data-theme="dark"] .hero-overlay {
  background: linear-gradient(to bottom, transparent 55%, var(--color-bg-primary));
}
html[data-theme="light"] .hero-overlay {
  background: linear-gradient(to bottom, transparent 60%, var(--color-bg-primary));
}
.hero-title {
  background: linear-gradient(120deg, var(--color-text-primary) 35%, var(--color-accent) 75%, var(--color-accent-soft));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-badge {
  border: 1px solid var(--glass-border) !important;
  background: var(--glass-bg) !important;
  color: var(--color-accent-soft) !important;
  box-shadow: 0 0 18px var(--color-accent-glow);
}

/* ---------- FORMS ---------- */
.form-control:focus {
  border-color: var(--color-accent);
  background: var(--glass-bg-hover);
  box-shadow: 0 0 0 3px var(--color-accent-glow);
}

/* ---------- CURRENCY + THEME TOGGLE ---------- */
.currency-btn.active { background: var(--color-accent); color: #fff; }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 34px; border-radius: var(--radius-sm, 8px);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  color: var(--color-text-secondary); cursor: pointer;
  transition: var(--transition, all .25s ease); flex-shrink: 0;
}
.theme-toggle:hover {
  color: var(--color-accent); border-color: var(--color-accent);
  box-shadow: 0 0 16px var(--color-accent-glow);
}
.theme-toggle svg { width: 17px; height: 17px; display: block; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html[data-theme="light"] .theme-toggle .icon-sun { display: block; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ---------- FOOTER ---------- */
html[data-theme="dark"] .footer { background: rgba(12,6,24,.55); border-top: 1px solid var(--glass-border); }
html[data-theme="light"] .footer { background: var(--color-bg-secondary); border-top: 1px solid var(--glass-border); }

/* ---------- BACK TO TOP / FAB ---------- */
.back-to-top {
  background: linear-gradient(120deg, var(--color-accent), var(--color-accent-alt)) !important;
  box-shadow: 0 0 22px var(--color-accent-glow) !important;
}
.cw-fab { box-shadow: 0 0 24px var(--color-accent-glow); }

/* ---------- ADMIN SURFACES ---------- */
html[data-theme="dark"] .admin-body { background: transparent; }
html[data-theme="light"] .admin-body { background: transparent; }
html[data-theme="dark"] .admin-sidebar { background: rgba(14,8,28,.94); border-right: 1px solid var(--glass-border); }
html[data-theme="light"] .admin-sidebar { background: rgba(255,255,255,.92); border-right: 1px solid var(--glass-border); }
html[data-theme="dark"] .admin-topbar { background: rgba(14,8,28,.66); border-bottom: 1px solid var(--glass-border); }
html[data-theme="light"] .admin-topbar { background: rgba(255,255,255,.7); border-bottom: 1px solid var(--glass-border); }
.sidebar-link:hover, .sidebar-link.active { background: var(--glass-bg); }

/* ---------- SCROLLBAR ---------- */
* { scrollbar-color: var(--color-accent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--color-accent), var(--color-accent-alt));
  border-radius: 99px; border: 2px solid transparent; background-clip: padding-box;
}

/* ---------- TEXT SELECTION ---------- */
::selection { background: var(--color-accent); color: #fff; }

/* ---------- ENTRANCE / MICRO ANIMATIONS ---------- */
@keyframes bhFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero-content > * { animation: bhFadeUp .7s cubic-bezier(.4,0,.2,1) both; }
.hero-content > *:nth-child(2) { animation-delay: .08s; }
.hero-content > *:nth-child(3) { animation-delay: .16s; }
.hero-content > *:nth-child(4) { animation-delay: .24s; }

/* ============================================================
   RESPONSIVE POLISH (additive; complements existing breakpoints)
   ============================================================ */
@media (max-width: 768px) {
  .theme-toggle { width: 34px; height: 32px; }
  #blackhole-bg { opacity: .85; }
  .hero-content { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 480px) {
  .navbar-actions { gap: 6px; }
  .theme-toggle { width: 32px; height: 30px; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-content > * { animation: none; }
  html.theme-transition, html.theme-transition * { transition: none !important; }
}

/* ============================================================
   v3 — calmer background + guaranteed hero text readability
   ============================================================ */
#blackhole-bg { opacity: .92; }
.hero-content { position: relative; z-index: 2; }
.hero-content::before {
  content: "";
  position: absolute;
  inset: -12% -10%;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}
html[data-theme="dark"] .hero-content::before {
  background: radial-gradient(ellipse 64% 74% at 50% 50%, rgba(6,3,13,.80) 0%, rgba(6,3,13,.46) 48%, transparent 78%);
}
html[data-theme="light"] .hero-content::before {
  background: radial-gradient(ellipse 64% 74% at 50% 50%, rgba(244,240,255,.85) 0%, rgba(244,240,255,.5) 48%, transparent 78%);
}

/* ============================================================
   v7 — Reflect-style centered hero (text top-center, dome below)
   ============================================================ */
#blackhole-bg { opacity: 1; }

@media (min-width: 861px) {
  .hero { align-items: flex-start; }
  .hero-content {
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
    padding-top: 12vh;
  }
  .hero-subtitle { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  /* soft scrim only behind the text block, top-centered */
  html[data-theme="dark"] .hero-content::before {
    background: radial-gradient(ellipse 64% 58% at 50% 30%, rgba(6,3,13,.7) 0%, rgba(6,3,13,.28) 52%, transparent 74%);
  }
  html[data-theme="light"] .hero-content::before {
    background: radial-gradient(ellipse 64% 58% at 50% 30%, rgba(244,240,255,.8) 0%, rgba(244,240,255,.4) 52%, transparent 74%);
  }
}

/* ============================================================
   v7 / reflect-fx — reveal, gradient titles, hardened security
   ============================================================ */
.theme-transition, .theme-transition * { transition: background-color .5s ease, color .5s ease, border-color .5s ease !important; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1!important;transform:none!important;} }

/* Reflect-style gradient section titles */
.section-title{
  background: linear-gradient(180deg, var(--color-text-primary, #F3EAFF) 0%, var(--color-accent-soft, #C9A8F0) 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  letter-spacing: -.02em;
}
html[data-theme="light"] .section-title{
  background: linear-gradient(180deg, #2A1652 0%, #7C3AED 140%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---- Hardened Security section ---- */
.section-security .security-grid{
  display:grid; grid-template-columns: 1.05fr .95fr; gap:48px; align-items:center;
}
.security-points{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px; }
.security-points li{ display:flex; align-items:center; gap:10px; color:var(--color-text-secondary,#A593CC); font-size:15px; }
.security-points li span{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--color-accent-glow, rgba(168,85,247,.25)); color:var(--color-accent, #A855F7); font-size:12px; font-weight:700; }

.security-visual{ position:relative; min-height:340px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; }

.lock-orb{ position:relative; width:150px; height:150px; display:flex; align-items:center; justify-content:center; }
.lock-orb::before{ content:""; position:absolute; inset:-40px; border-radius:50%;
  background: radial-gradient(circle, var(--color-accent-glow, rgba(168,85,247,.45)) 0%, transparent 68%);
  filter: blur(6px); animation: lockGlow 3.4s ease-in-out infinite; }
.lock-ring{ position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(168,85,247,.35); animation: lockSpin 9s linear infinite; }
.lock-ring-2{ inset:18px; border-style:dashed; border-color:rgba(216,168,240,.4); animation: lockSpin 6s linear infinite reverse; }
.lock-icon{ position:relative; width:74px; height:74px; border-radius:22px; display:flex; align-items:center; justify-content:center; color:#fff;
  background: linear-gradient(160deg, var(--color-accent, #A855F7), var(--color-accent-alt, #7C3AED));
  box-shadow: 0 10px 40px rgba(124,58,237,.55), inset 0 1px 0 rgba(255,255,255,.4); }
.lock-icon svg{ width:40px; height:40px; }
.lock-scan{ position:absolute; left:50%; top:50%; width:140px; height:140px; transform:translate(-50%,-50%); border-radius:50%; overflow:hidden; pointer-events:none; }
.lock-scan::after{ content:""; position:absolute; left:-20%; right:-20%; height:34%; top:-34%;
  background: linear-gradient(180deg, transparent, rgba(216,168,240,.55), transparent); animation: lockScan 2.8s ease-in-out infinite; }

@keyframes lockGlow{ 0%,100%{opacity:.6; transform:scale(.96);} 50%{opacity:1; transform:scale(1.06);} }
@keyframes lockSpin{ to{ transform:rotate(360deg);} }
@keyframes lockScan{ 0%{ top:-34%; } 60%,100%{ top:120%; } }

.cipher{
  font-family: "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: clamp(9px, 1.45vw, 13px); line-height:1.5; letter-spacing:.12em; margin:0;
  color: rgba(150,110,210,.55); white-space:pre; user-select:none; text-shadow:0 0 8px rgba(120,60,210,.25);
  padding:18px 20px; border-radius:14px; width:100%; max-width:430px; box-sizing:border-box;
  background: linear-gradient(180deg, rgba(120,70,210,.06), rgba(120,70,210,.02));
  border:1px solid rgba(168,85,247,.16); overflow:hidden;
}
.cipher b{ color:#F4E8FF; font-weight:600; text-shadow:0 0 12px rgba(216,168,240,.95), 0 0 4px rgba(255,255,255,.8); }
html[data-theme="light"] .cipher{ color: rgba(120,80,190,.5); background: linear-gradient(180deg, rgba(124,58,237,.07), rgba(124,58,237,.02)); border-color: rgba(124,58,237,.18); }
html[data-theme="light"] .cipher b{ color:#4C1D95; text-shadow:0 0 10px rgba(147,51,234,.5); }

@media (max-width: 820px){
  .section-security .security-grid{ grid-template-columns:1fr; gap:34px; }
  .security-visual{ min-height:300px; order:-1; }
}

/* ============================================================
   v9 — compact eclipse hosted INSIDE the hero (not full-screen)
   ============================================================ */
.hero{ position: relative; overflow: hidden; }
#blackhole-bg.in-hero{
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: 1;
}
.hero > .hero-content,
.hero > .container,
.hero > .hero-overlay{ position: relative; z-index: 2; }

/* ============================================================
   v12 — Starfield canvas + configurable accent gradient (1–4 colors)
   ============================================================ */
#blackhole-bg{
  position: fixed !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  z-index: -1 !important; opacity: 1 !important;
  pointer-events: none; display: block;
}
/* subtle accent vignette behind the stars */
body::before{
  background: radial-gradient(ellipse 120% 80% at 50% -10%, var(--color-accent-glow, rgba(124,58,237,.14)) 0%, transparent 55%) !important;
}

/* Apply the configurable accent gradient to accent elements.
   --accent-gradient is emitted per-page from settings; falls back to the solid accent. */
.brand-text,
.stat-number,
.section-title{
  background: var(--accent-gradient, var(--color-accent)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.btn-primary:not(.btn-selected),
.product-badge{
  background: var(--accent-gradient, var(--color-accent)) !important;
}

/* ============================================================
   v14 — dropdown theme, reflect-style testimonial wall, hero orbit
   ============================================================ */

/* 3) Profile dropdown now follows light / dark theme */
.nav-user-dropdown {
  background: rgba(22,12,42,.98) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 14px 44px rgba(0,0,0,.5) !important;
}
html[data-theme="light"] .nav-user-dropdown {
  background: #ffffff !important;
  border: 1px solid rgba(30,20,60,.12) !important;
  box-shadow: 0 14px 44px rgba(76,29,149,.16) !important;
}
.nav-dropdown-item:hover,
.nav-dropdown-item.active {
  background: var(--glass-bg-hover) !important;
  color: var(--color-text-primary) !important;
}
.nav-dropdown-divider { background: var(--glass-border) !important; }
html[data-theme="light"] .nav-dropdown-item.danger:hover { background: rgba(239,68,68,.08) !important; }

/* 2) Reflect-style testimonial "wall" */
#testimonials .section-header { position: relative; }
#testimonials .section-header::before {
  content: ""; position: absolute; left: 50%; top: -56px;
  width: 560px; max-width: 92vw; height: 280px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 60% at 50% 0%, var(--color-accent-glow, rgba(168,85,247,.35)) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none; z-index: 0;
}
#testimonials .section-header > * { position: relative; z-index: 1; }
.testimonials-slider {
  display: block !important;
  transform: none !important;
  column-count: 3; column-gap: 20px;
  max-width: 1060px; margin: 8px auto 0; padding: 4px;
}
.testimonials-slider .testimonial-card {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  display: inline-block; width: 100% !important; flex: none !important;
  margin: 0 0 20px !important; vertical-align: top;
}
.testimonials-slider .testimonial-card:hover { transform: translateY(-4px); }
#testimonials .slider-controls { display: none !important; }
@media (max-width: 880px) { .testimonials-slider { column-count: 2; } }
@media (max-width: 560px) { .testimonials-slider { column-count: 1; } }

/* 4) Hero orbit — animated visual to fill the empty space below the CTA */
.hero { overflow: hidden; }
.hero-orbit {
  position: absolute; left: auto; right: 0%; bottom: -320px;
  transform: rotate(-5deg);
  width: 680px; height: 680px; pointer-events: none;
  z-index: 1; opacity: .62;
  perspective: 1300px;
}
@media (max-width: 1100px) { .hero-orbit { right: -2%; opacity: .48; } }
.hero-orbit .orbit-core {
  position: absolute; left: 50%; top: 50%; width: 430px; height: 430px;
  transform: translate(-50%, -50%); border-radius: 50%; z-index: 2;
  overflow: hidden;
  background: radial-gradient(circle at 32% 27%, var(--color-accent, #A855F7) 0%, var(--color-accent-alt, #7C3AED) 55%, #1e0d3a 100%);
  box-shadow: 0 0 46px 8px var(--color-accent-glow, rgba(168,85,247,.4));
  animation: saturnGlow 5s ease-in-out infinite;
}
/* rotating planet surface (banded gas-giant texture scrolls horizontally) */
.hero-orbit .orbit-core::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 1;
  background: url('../images/planet-texture.png') repeat-x;
  background-size: auto 100%;
  animation: planetSpin 26s linear infinite;
}
/* fixed spherical shading: top-left highlight + bottom-right shadow */
.hero-orbit .orbit-core::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 32% 27%, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(circle at 72% 76%, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 64%);
}
@keyframes planetSpin {
  from { background-position: 0 0; }
  to   { background-position: -430px 0; }
}
@keyframes saturnGlow {
  0%, 100% { box-shadow: 0 0 38px 6px var(--color-accent-glow, rgba(168,85,247,.32)), inset -30px -22px 64px rgba(0,0,0,.6); }
  50% { box-shadow: 0 0 58px 12px var(--color-accent-glow, rgba(168,85,247,.48)), inset -30px -22px 64px rgba(0,0,0,.6); }
}
.hero-orbit .orbit-ring {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotateX(66deg);
  border-radius: 50%; border: 0;
  transform-style: preserve-3d;
}
.hero-orbit .orbit-ring i,
.hero-orbit .orbit-ring::before,
.hero-orbit .orbit-ring::after { display: none; }
/* hide the two helper rings; r2 carries the galaxy-disk texture */
.hero-orbit .r1, .hero-orbit .r3 { display: none; }
/* galaxy-disk ring: a real field of scattered stars (PNG) rotating slowly */
.hero-orbit .r2 {
  display: block; width: 1180px; height: 1180px; border: 0;
  background: url('../images/galaxy-ring.png') center / contain no-repeat;
  opacity: .92;
  animation: ringSpin 90s linear infinite;
}
@keyframes ringSpin {
  from { transform: translate(-50%, -50%) rotateX(66deg) rotateZ(0deg); }
  to   { transform: translate(-50%, -50%) rotateX(66deg) rotateZ(360deg); }
}
html[data-theme="light"] .hero-orbit .r2 { filter: invert(1) hue-rotate(180deg) contrast(1.15) brightness(.92); opacity: .9; }

/* Light mode: the floating order-summary cart was hardcoded dark — make it light & readable. */
html[data-theme="light"] .order-summary-inner {
  background: rgba(255,255,255,.96);
  border-color: var(--color-accent);
  box-shadow: 0 10px 40px rgba(90,70,150,.20);
  color: #241a3d;
}
html[data-theme="light"] .order-summary-inner * { color: #2a1f44; }
html[data-theme="light"] .order-summary-inner .order-summary-title { color: var(--color-accent); }
@media (max-width: 768px) { .hero-orbit { display: none; } }


/* ============================================================
   v15 — restore hero-circle removal + solid panels + selected btn;
         FAB priority select readable; reflect-style testimonial marquee
   ============================================================ */

/* #1 — remove the radial scrim circle behind hero text */
.hero-content::before { display: none !important; }

/* solid (non see-through) panels */
.glass-card,
.pricing-card,
.product-card,
.packages-sidebar {
  background: rgba(18,13,32,.82) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
html[data-theme="light"] .glass-card,
html[data-theme="light"] .pricing-card,
html[data-theme="light"] .product-card,
html[data-theme="light"] .packages-sidebar {
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(30,20,60,.12) !important;
}

/* selected package button: keep text readable */
.btn-selected {
  background: rgba(255,255,255,.10) !important;
  color: var(--color-text-primary) !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
  border: 2px solid var(--color-accent) !important;
}
html[data-theme="light"] .btn-selected {
  background: rgba(0,0,0,.05) !important;
}

/* #2 — support widget (FAB) priority <select> + options readable */
select.cw-form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: rgba(20,14,34,.98) !important;
  color: var(--color-text-primary) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 32px;
}
select.cw-form-control option {
  background: #140e22 !important;
  color: #e8e2f5 !important;
}
html[data-theme="light"] select.cw-form-control {
  background-color: #ffffff !important;
  color: #1b1030 !important;
}
html[data-theme="light"] select.cw-form-control option {
  background: #ffffff !important;
  color: #1b1030 !important;
}

/* #3 — testimonials: few = centered, many = two-row marquee (top→left, bottom→right) */
.tm-simple {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 820px;
  margin: 8px auto 0;
}
.tm-simple .testimonial-card { width: 380px; max-width: 100%; }

.tm-marquee {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 10px;
  overflow: hidden;
}
.tm-row {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.tm-track {
  display: flex;
  gap: 20px;
  width: max-content;
  will-change: transform;
}
.tm-row .testimonial-card {
  flex: 0 0 340px;
  width: 340px;
  margin: 4px 0;
}
.tm-left .tm-track  { animation: tmLeft 48s linear infinite; }
.tm-right .tm-track { animation: tmRight 48s linear infinite; }
.tm-marquee:hover .tm-track { animation-play-state: paused; }
@keyframes tmLeft  { from { transform: translateX(0); }     to { transform: translateX(-50%); } }
@keyframes tmRight { from { transform: translateX(-50%); }   to { transform: translateX(0); } }
@media (max-width: 560px) {
  .tm-row .testimonial-card { flex-basis: 280px; width: 280px; }
  .tm-left .tm-track, .tm-right .tm-track { animation-duration: 32s; }
}


/* ============================================================
   v16 — tame testimonial card sizing (main.css forces min-width:100%)
   ============================================================ */
#testimonials .testimonial-card {
  min-width: 0 !important;
  height: auto !important;
  padding: 22px 22px !important;
}
#testimonials .testimonial-content { font-size: .9rem; margin-bottom: 16px; }
.tm-simple .testimonial-card {
  width: 340px !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
}
.tm-row .testimonial-card {
  width: 320px !important;
  max-width: 320px !important;
  flex: 0 0 320px !important;
}
@media (max-width: 560px) {
  .tm-simple .testimonial-card { width: 100% !important; }
  .tm-row .testimonial-card { width: 250px !important; max-width: 250px !important; flex-basis: 250px !important; }
}


/* ============================================================
   v17 — auth/error theme toggle, Extra Modules polish,
          Add-to-Cart FAB + minimize
   ============================================================ */

/* fixed toggle for pages without a navbar (auth, 403/404, maintenance) */
.auth-theme-toggle { position: fixed; top: 18px; right: 18px; z-index: 50; }

/* ---- Extra Modules (add-ons): compact + equal size ---- */
.addons-checkout-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}
.addon-checkout-card {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  padding: 16px !important;
  height: 100% !important;
  min-height: 132px;
  border-radius: 14px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.addon-checkout-card:hover { transform: translateY(-3px); border-color: var(--color-accent) !important; }
.addon-checkout-card input:checked ~ .addon-check-icon { opacity: 1; transform: scale(1); }
.addon-checkout-info { display: flex; flex-direction: column; gap: 3px; width: 100%; height: 100%; }
.addon-checkout-name { font-size: .82rem !important; line-height: 1.3; }
.addon-checkout-desc {
  font-size: .72rem !important; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; flex: 1 1 auto;
}
.addon-checkout-price { font-size: .8rem !important; margin-top: 8px; }
.addon-check-icon { top: 10px !important; right: 10px !important; }
@media (max-width: 480px) {
  .addons-checkout-grid { grid-template-columns: repeat(auto-fill, minmax(160px,1fr)) !important; }
}

/* ---- Cart: minimize → FAB ---- */
.order-summary-inner { position: relative; }
.order-summary-title { padding-right: 34px; }
.order-summary-min {
  position: absolute; top: 14px; right: 14px;
  width: 26px; height: 26px; border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg); color: var(--color-text-primary);
  cursor: pointer; font-size: 1.2rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.order-summary-min:hover { background: var(--glass-bg-hover); }
.order-summary-sticky.order-min { display: none !important; }
.cart-fab {
  position: fixed; left: 20px; bottom: 20px; z-index: 850;
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent-gradient, var(--color-accent)); color: #fff;
  font-size: 1.4rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cart-fab:hover { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(0,0,0,.55); }
.cart-fab-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: #ef4444; color: #fff; font-size: .7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-bg-primary);
}
@media (max-width: 560px) { .cart-fab { left: 16px; bottom: 16px; } }

/* ---- Themed error pages (403/404) ---- */
.err-wrap { position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; }
.err-card { max-width: 520px; width: 100%; padding: 48px 40px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 24px; backdrop-filter: blur(24px); box-shadow: var(--glass-shadow); }
.err-code { font-family: 'Syne', sans-serif; font-size: 7rem; font-weight: 800; line-height: 1; background: var(--accent-gradient, linear-gradient(135deg, var(--color-accent), #a78bfa)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.err-title { font-size: 1.8rem; font-weight: 800; margin: 10px 0 8px; color: var(--color-text-primary); }
.err-desc { color: var(--color-text-secondary); margin-bottom: 28px; line-height: 1.6; }
@media (max-width: 480px) { .err-code { font-size: 5rem; } .err-card { padding: 36px 24px; } }


/* ============================================================
   v18 — HOME add-on cards: uniform size + tidy layout
   ============================================================ */
.addons-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}
.addon-card {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 20px !important;
  height: 100% !important;
  min-height: 158px;
  border-radius: 16px;
  transition: transform .18s ease, border-color .18s ease;
}
.addon-card:hover { transform: translateY(-3px); border-color: var(--color-accent) !important; }
.addon-icon { font-size: 1.6rem !important; flex-shrink: 0; line-height: 1.1; }
.addon-info { display: flex; flex-direction: column; height: 100%; width: 100%; min-width: 0; }
.addon-name { font-size: .9rem !important; line-height: 1.3; padding-right: 70px; margin-bottom: 6px !important; }
.addon-desc {
  font-size: .78rem !important; line-height: 1.5; margin-bottom: 10px !important;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden; flex: 1 1 auto;
}
.addon-price { margin-top: auto; }
.addon-category-badge { top: 16px !important; right: 16px !important; }
@media (max-width: 480px) {
  .addons-grid { grid-template-columns: 1fr !important; }
  .addon-card { min-height: 0; }
}

/* ============================================================
   v19 — Account pages: hide stacked sidebar when single-column
   (fixes Subscriptions/Account content pushed below the fold;
    nav still available in the user dropdown)
   ============================================================ */
@media (max-width: 1024px) {
  .account-layout { grid-template-columns: 1fr !important; }
  .account-sidebar { display: none !important; }
}


/* ============================================================
   v20 — account pages must never be hidden behind scroll-reveal
         (Subscriptions/Orders/etc. appeared empty until scrolled,
          which was unusable on mobile touchscreens)
   ============================================================ */
.account-layout .reveal-on-scroll,
.account-layout .glass-card,
.account-main .glass-card,
.account-sidebar.glass-card,
.account-sidebar,
.account-main,
.account-main .empty-state,
.account-main .stat-item,
.subscription-detail-card {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  animation: none !important;
  transition: none !important;
}

/* ============================================================
   v21 — user dropdown follows the configured accent theme
   ============================================================ */
.nav-user-trigger.open,
.nav-user-trigger:hover {
  border-color: var(--color-accent, #A855F7) !important;
}
.nav-user-dropdown {
  border-color: var(--color-accent-glow, rgba(168,85,247,.35)) !important;
}
.nav-dropdown-item:hover {
  background: var(--color-accent-glow, rgba(168,85,247,.16)) !important;
  color: var(--color-text-primary) !important;
}
.nav-dropdown-item.active {
  color: var(--color-accent, #A855F7) !important;
  background: var(--color-accent-glow, rgba(168,85,247,.16)) !important;
}
.nav-dropdown-item.active svg { opacity: 1; color: var(--color-accent, #A855F7); }
.nav-user-dropdown-header .dname { color: var(--color-accent, #A855F7) !important; }
html[data-theme="light"] .nav-user-dropdown { background: #ffffff !important; }


/* ============================================================
   v22 — SCROLL-REVEAL SAFETY (CSS-only, deploy-proof)
   main.js injects `.reveal-on-scroll{opacity:0}` and only shows content
   when its IntersectionObserver fires. If that JS is cached/stale, or the
   observer never triggers, content (e.g. the Subscriptions page) can stay
   invisible / fade away. A CSS @keyframes animation ALWAYS overrides a
   normal author rule and ALWAYS runs to its end state, so this guarantees
   every reveal element ends fully visible — on every page, regardless of JS.
   ============================================================ */
.reveal-on-scroll { animation: rfRevealSafe .6s ease both; }
@keyframes rfRevealSafe {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.reveal-on-scroll.revealed { opacity: 1; transform: none; }

/* Account / Subscriptions pages: hard guarantee — never hidden, never animated away. */
.account-layout .reveal-on-scroll,
.account-layout .glass-card,
.account-main .glass-card,
.account-main .account-card,
.account-main .subscription-detail-card,
.account-main .empty-state,
.account-main .stat-item,
.account-sidebar,
.account-main {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  animation: none !important;
  transition: none !important;
}
