/* =====================================================================
   PLUNEXA — CUSTOM THEME OVERRIDE  v1.0
   Paste into: Admin → Appearance → Themes → Custom CSS
   Built for Marketbob "basic" theme (Bootstrap 5 + FontAwesome).
   Palette: Ultraviolet #7C3AED · Nexus Cyan #22D3EE · Midnight Ink #12102A
   Layout: light content + dark header/footer
   ===================================================================== */

/* ------------------------------------------------------------------
   0. DESIGN TOKENS
------------------------------------------------------------------ */
:root {
  --px-violet: #7C3AED;
  --px-violet-600: #6D28D9;
  --px-violet-700: #5B21B6;
  --px-cyan: #22D3EE;
  --px-cyan-600: #0891B2;
  --px-ink: #12102A;
  --px-ink-2: #1A1740;
  --px-ink-3: #24204A;
  --px-porcelain: #F7F6FB;
  --px-surface: #FFFFFF;
  --px-text: #1B1836;
  --px-text-muted: #55526B;
  --px-line: #E7E4F0;
  --px-line-dark: #2A2750;
  --px-gradient: linear-gradient(135deg, #7C3AED 0%, #22D3EE 100%);
  --px-gradient-hover: linear-gradient(135deg, #6D28D9 0%, #0891B2 100%);
  --px-radius: 16px;
  --px-radius-sm: 10px;
  --px-shadow: 0 8px 30px rgba(18,16,42,.08);
  --px-shadow-lg: 0 20px 50px rgba(124,58,237,.16);
  --px-font: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Load brand fonts (Outfit + Geist Mono) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ------------------------------------------------------------------
   1. GLOBAL
------------------------------------------------------------------ */
body {
  font-family: var(--px-font);
  color: var(--px-text);
  background: var(--px-porcelain);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6,.section-title-text,.header-title { font-family: var(--px-font); font-weight: 700; letter-spacing: -.01em; }
a { color: var(--px-violet-600); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--px-violet); }
::selection { background: rgba(124,58,237,.18); }

/* Section rhythm */
.section { padding-block: 4.5rem; }
.section-title-text { font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--px-ink); }
.section-title-divider {
  height: 4px; width: 56px; border-radius: 99px;
  background: var(--px-gradient);
}
.section-text { color: var(--px-text-muted); }

/* ------------------------------------------------------------------
   2. ANNOUNCEMENT BAR  → gradient instead of green
------------------------------------------------------------------ */
.announcement {
  background: var(--px-gradient) !important;
  border: 0;
}
.announcement-text span { color:#fff; font-weight:500; letter-spacing:.01em; }
.announcement-text .btn {
  background:#fff !important; color: var(--px-violet-700) !important;
  font-weight:700; border-radius:99px; padding:.28rem 1rem;
}
.announcement-text .btn:hover { transform: translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.18); }
.announcement-close { color:#fff; opacity:.85; }

/* ------------------------------------------------------------------
   3. HEADER  → dark, glassy, constellation-friendly
------------------------------------------------------------------ */
.header.header-image {
  background-color: var(--px-ink) !important;
  background-blend-mode: overlay;
  position: relative;
}
.header.header-image::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(60% 120% at 80% 0%, rgba(124,58,237,.35), transparent 60%),
              radial-gradient(50% 100% at 15% 100%, rgba(34,211,238,.22), transparent 60%);
  pointer-events:none;
}
.header-inner, .header-container { position:relative; z-index:1; }
.header-title {
  color:#fff; font-weight:800;
  font-size: clamp(1.8rem, 4vw, 3rem); line-height:1.12;
  max-width: 22ch;
}
.header .section-text, .header p { color:#B9B6CE !important; }

/* Top nav bar (logo + menu row) sitting on dark */
.logo img { max-height: 42px; width:auto; }

/* Main dropdown menu buttons in navbar */
.drop-down-btn {
  color:#E7E5F2; font-weight:500; border-radius:10px;
  padding:.5rem .85rem; transition: background .2s ease, color .2s ease;
}
.drop-down-btn:hover { background: rgba(255,255,255,.08); color:#fff; }
.drop-down-btn span { color: inherit; }

/* Dropdown panels */
.drop-down-menu {
  background: var(--px-surface); border:1px solid var(--px-line);
  border-radius: var(--px-radius); box-shadow: var(--px-shadow);
  padding:.5rem;
}
.drop-down-item {
  border-radius: var(--px-radius-sm); padding:.55rem .7rem; font-weight:500;
  color: var(--px-text); transition: background .15s ease, color .15s ease;
}
.drop-down-item:hover { background: var(--px-porcelain); color: var(--px-violet-700); }
.drop-down-divider { border-color: var(--px-line); }

/* ------------------------------------------------------------------
   4. BUTTONS
------------------------------------------------------------------ */
.btn { border-radius: var(--px-radius-sm); font-weight:600; letter-spacing:.01em; transition: all .2s ease; }

/* Primary → gradient */
.btn-primary, .btn-success {
  background: var(--px-gradient) !important;
  border:0 !important; color:#fff !important;
  box-shadow: 0 6px 18px rgba(124,58,237,.28);
}
.btn-primary:hover, .btn-success:hover {
  background: var(--px-gradient-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(124,58,237,.36);
}

/* Outline light (cart, header icons on dark) */
.btn-outline-light {
  border:1.5px solid rgba(255,255,255,.35) !important; color:#fff !important;
  border-radius: var(--px-radius-sm);
}
.btn-outline-light:hover { background:#fff !important; color:var(--px-violet-700) !important; border-color:#fff !important; }

/* Sign In / Sign Up pills */
a[href$="/login"], a[href$="/register"] { font-weight:600; }
a[href$="/register"] {
  background: var(--px-gradient); color:#fff !important;
  padding:.5rem 1.15rem; border-radius:99px;
  box-shadow:0 6px 18px rgba(124,58,237,.3);
}
a[href$="/register"]:hover { background: var(--px-gradient-hover); transform: translateY(-1px); }

/* View-All / link button */
.link-btn .btn, .btn-padding { border-radius: var(--px-radius-sm); }

/* ------------------------------------------------------------------
   5. SEARCH FIELD (hero)
------------------------------------------------------------------ */
.header .form-control {
  border-radius: 99px; border:0; padding:1rem 1.5rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  font-size:1.05rem;
}
.header .form-control:focus { box-shadow: 0 0 0 4px rgba(34,211,238,.35); }
.header .btn[type="submit"], .header button[type="submit"] {
  background: var(--px-gradient) !important; color:#fff !important; border:0 !important;
  border-radius:99px; padding-inline:1.6rem;
}

/* ------------------------------------------------------------------
   6. CATEGORY TILES
------------------------------------------------------------------ */
.home-category {
  display:block; text-align:center; padding:1.75rem 1rem;
  background: var(--px-surface); border:1px solid var(--px-line);
  border-radius: var(--px-radius); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  height:100%;
}
.home-category:hover {
  transform: translateY(-6px);
  box-shadow: var(--px-shadow-lg); border-color: transparent;
}
.home-category-img {
  width:84px; height:84px; margin:0 auto 1rem; border-radius:20px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(34,211,238,.10));
}
.home-category-img img { width:56px; height:56px; object-fit:contain; }
.home-category-title { font-weight:700; color:var(--px-ink); margin:0; font-size:1rem; }

/* ------------------------------------------------------------------
   7. PRODUCT / CONTENT CARDS  (.card-v)
------------------------------------------------------------------ */
.card-v {
  background: var(--px-surface); border:1px solid var(--px-line) !important;
  border-radius: var(--px-radius) !important; box-shadow: var(--px-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow:hidden;
}
.card-v:hover { transform: translateY(-4px); box-shadow: var(--px-shadow-lg); border-color:transparent !important; }

/* Custom tabs (All / Themes / Code…) */
.custom-tabs-item {
  border-radius:99px; padding:.5rem 1.1rem; font-weight:600; color:var(--px-text-muted);
  transition: all .2s ease; border:1px solid transparent;
}
.custom-tabs-item:hover { color:var(--px-violet-700); background:var(--px-porcelain); }
.custom-tabs-item.active {
  background: var(--px-gradient); color:#fff;
  box-shadow:0 6px 16px rgba(124,58,237,.28);
}

/* ------------------------------------------------------------------
   8. TESTIMONIALS
------------------------------------------------------------------ */
.testimonial {
  background: var(--px-surface); border:1px solid var(--px-line);
  border-radius: var(--px-radius); padding:2rem; box-shadow: var(--px-shadow);
  position:relative;
}
.testimonial-quote { color: var(--px-cyan-600); font-size:2rem; opacity:.5; }
.testimonial-text { color: var(--px-text); line-height:1.7; }
.testimonial-img img, .testimonial-img {
  width:56px; height:56px; border-radius:99px; object-fit:cover;
  border:2px solid transparent; background:var(--px-gradient); padding:2px;
}
.testimonial-name { font-weight:700; color:var(--px-ink); }
.testimonial-place { color: var(--px-text-muted); font-size:.9rem; }

/* ------------------------------------------------------------------
   9. FAQ ACCORDION
------------------------------------------------------------------ */
.accordion-item {
  background: var(--px-surface); border:1px solid var(--px-line) !important;
  border-radius: var(--px-radius) !important; margin-bottom:.75rem; overflow:hidden;
}
.accordion-button {
  font-weight:600; color:var(--px-ink); background:transparent !important;
  padding:1.15rem 1.35rem;
}
.accordion-button:not(.collapsed) { color:var(--px-violet-700); background:var(--px-porcelain) !important; box-shadow:none; }
.accordion-button:focus { box-shadow:0 0 0 3px rgba(124,58,237,.18); }
.accordion-button-icon, .accordion-button::after { color:var(--px-violet); }
.accordion-body { color:var(--px-text-muted); line-height:1.7; }

/* ------------------------------------------------------------------
   10. FOOTER  → deep ink
------------------------------------------------------------------ */
.footer { background: var(--px-ink); color:#C7C4DA; }
.footer-upper { border-bottom:1px solid var(--px-line-dark); padding-block:3rem; }
.footer .logo img, .footer-logo img { max-height:40px; }
.footer-text { color:#9A97B4; line-height:1.7; }
.footer-title { color:#fff; font-weight:700; }
.footer-title-divider { height:3px; width:40px; background:var(--px-gradient); border-radius:99px; margin-top:.5rem; }
.footer-link, .footer-links a { color:#A9A6C2; transition: color .2s ease, padding .2s ease; }
.footer-link:hover, .footer-links a:hover { color:#fff; padding-left:4px; }
.footer-counter-title { color:var(--px-cyan); font-weight:800; font-size:1.9rem; }
.footer-counter-text { color:#9A97B4; }

/* Social buttons */
.social-btn {
  width:40px; height:40px; border-radius:12px; display:inline-flex;
  align-items:center; justify-content:center; color:#fff;
  background: rgba(255,255,255,.08); transition: all .2s ease;
}
.social-btn:hover { background: var(--px-gradient); transform:translateY(-3px); color:#fff; }

/* ------------------------------------------------------------------
   11. CURRENCY / USER DROPDOWN on dark header
------------------------------------------------------------------ */
.drop-down-btn-img img { border-radius:4px; }
.user-img img, .user-img { border-radius:99px; border:2px solid rgba(255,255,255,.2); }
.user-name { color:#fff; font-weight:600; }

/* ------------------------------------------------------------------
   12. MISC POLISH
------------------------------------------------------------------ */
.card-v .text-muted { color: var(--px-text-muted) !important; }
hr { border-color: var(--px-line); }
.badge { border-radius:8px; font-weight:600; }
.overlay { background: rgba(18,16,42,.6); }
img { image-rendering:auto; }

/* Scrollbar (webkit) */
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-thumb { background:var(--px-ink-3); border-radius:99px; border:3px solid var(--px-porcelain); }
::-webkit-scrollbar-thumb:hover { background:var(--px-violet); }

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; }
}