/*
 * BoostsShop — restored theme matching boostsshop.com index.html exactly
 *
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 *  HOW TO CHANGE THE MAIN COLOR OF YOUR SHOP
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 *  Find every occurrence of:   #5865f2
 *  Replace it with your color, e.g. #22c55e for green
 *  or  #e11d48 for red, etc.
 *
 *  Also update the rgba() glow shadows:
 *  rgba(88,101,242, ...) → change 88,101,242 to your
 *  color's RGB values (use any "hex to rgb" converter).
 *
 *  The Sellauth dashboard also has a "Theme Color" field —
 *  set it to the same color so buttons/links stay in sync.
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 */

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

/* ── ROOT VARIABLES ── */
:root {
  --bg:       #0e0f13;
  --panel:    rgba(30,31,38,.85);
  --line:     rgba(255,255,255,.07);
  --text:     #dcddde;
  --soft:     #96989d;
  --muted:    #72767d;
  --blurple:  #5865f2;
  --blurple2: #7289da;
  --blurple3: #99aab5;
  --green:    #3ba55d;
  --green2:   #57f287;
  --red:      #ed4245;

  /* Override Sellauth CSS variables */
  --cl-accent:                 #5865f2;
  --cl-accent-rgb:             88,101,242;
  --cl-background-primary:     #0e0f13;
  --cl-background-secondary:   #1a1b21;
  --cl-border:                 rgba(255,255,255,.07);
  --bs-body-bg:                #0e0f13;
  --bs-gray-bg:                #1a1b21;
  --bs-border-color:           rgba(255,255,255,.07);
  --bs-primary:                #5865f2;
  --bs-primary-rgb:            88,101,242;
  --bs-body-color:             #dcddde;
  --bs-font-sans-serif:        'Inter Tight', Inter, system-ui, sans-serif;
  --bs-border-radius:          0.5rem;
}

/* ── FONTS & BASE ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter Tight', Inter, system-ui, sans-serif !important;
  background-color: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}

/* ── GRID + RADIAL BACKGROUND (exact from index.html) ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(700px 400px at 85%  8%,  rgba(88,101,242,.12), transparent 60%),
    radial-gradient(500px 350px at 10%  5%,  rgba(88,101,242,.07), transparent 55%),
    radial-gradient(600px 400px at 50% 110%, rgba(114,137,218,.08), transparent 62%),
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: auto, auto, auto, 60px 60px, 60px 60px;
}

/* ── VIGNETTE ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 80% at 50% 38%, transparent 30%, rgba(0,0,0,.75) 100%);
  z-index: 0;
}

/* All page content above fixed bg */
nav, main, section, footer,
.component, header, .container, .container-fluid { position: relative; z-index: 1; }
.flex-wrapper { position: relative; }

/* Kill old particle layers & Sellauth bg-image */
#bs-particles, #bs-orbs { display: none !important; }
.bg-image { display: none !important; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); }

/* ── NAVBAR ── */
.navbar, nav.navbar {
  background: rgba(14,15,19,.72) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
}
.navbar .navbar-brand {
  font-family: 'Inter Tight', Inter, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  color: #fff !important;
  gap: 10px;
}
.navbar .navbar-brand img { height: 28px; border-radius: 8px; }
.navbar .nav-link { color: #99aab5 !important; font-weight: 700 !important; font-size: 14px !important; }
.navbar .nav-link:hover,
.navbar .nav-link.active { color: #fff !important; }
.navbar .navbar-toggler {
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,.04) !important;
  box-shadow: none !important;
  padding: 8px 10px !important;
}

/* ── BUTTONS ── */
.btn {
  font-family: 'Inter Tight', Inter, sans-serif !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
  transition: transform .15s ease, filter .15s ease, border-color .15s ease, background .15s ease !important;
}
.btn:active { transform: scale(.98) !important; }

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: #5865f2 !important;
  border-color: #5865f2 !important;
  color: #fff !important;
  box-shadow: 0 8px 32px rgba(88,101,242,.30) !important;
}
.btn-primary:hover { filter: brightness(1.10) !important; }

.btn-outline-primary {
  border-color: rgba(88,101,242,.40) !important;
  color: #7289da !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  background: rgba(88,101,242,.15) !important;
  border-color: rgba(88,101,242,.60) !important;
  color: #fff !important;
}

.btn-secondary, .btn-light, .btn-outline-secondary {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #99aab5 !important;
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #fff !important;
}

.btn-link { color: #7289da !important; text-decoration: none !important; }
.btn-link:hover { color: #99aab5 !important; }
.navbar .cart .btn .count { background: #5865f2 !important; color: #fff !important; }

/* ── FORMS ── */
.form-control, .form-select {
  background: rgba(0,0,0,.40) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 4px !important;
  color: #dcddde !important;
  font-family: 'Inter Tight', Inter, sans-serif !important;
}
.form-control:focus, .form-select:focus {
  border-color: #5865f2 !important;
  box-shadow: 0 0 0 3px rgba(88,101,242,.20) !important;
  background: rgba(0,0,0,.40) !important;
  color: #dcddde !important;
}
.form-control::placeholder { color: #4f5058 !important; }
label {
  color: #b9bbbe !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── CARDS ── */
.card {
  background: rgba(30,31,38,.85) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 8px !important;
  color: #dcddde !important;
  backdrop-filter: blur(18px);
}
.card::before { display: none !important; }
.card:hover { border-color: rgba(88,101,242,.25) !important; }

/* ── HERO ── */
.hero { background: transparent !important; }
.hero .content h1 { font-weight: 900 !important; color: #fff !important; }
.hero .content p { color: #72767d !important; font-weight: 500; }
.hero .content .stats {
  background: rgba(30,31,38,.80) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 8px !important;
}
.hero .content .stats div .value { color: #fff !important; font-weight: 900 !important; }
.hero .content .stats div .label { color: #72767d !important; }
.hero .fake-searchbar input, .hero .search-modal .searchbar input {
  background: rgba(0,0,0,.40) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #dcddde !important;
  border-radius: 4px !important;
}
.hero .fake-searchbar input:focus, .hero .search-modal .searchbar input:focus {
  border-color: #5865f2 !important;
  box-shadow: 0 0 0 3px rgba(88,101,242,.20) !important;
}
.hero .search-modal .product .image .badges div { background: #5865f2 !important; }

/* ── MODALS ── */
.modal-content {
  background: #1e1f26 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 8px !important;
  color: #dcddde !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.60) !important;
}
.modal-header { border-bottom: 1px solid rgba(255,255,255,.07) !important; color: #fff !important; }
.modal-footer { border-top:   1px solid rgba(255,255,255,.07) !important; }
.modal-body { color: #96989d !important; }
.btn-close { filter: invert(1) opacity(.5); }

/* ── TABLES ── */
.table { color: #dcddde !important; --bs-table-bg: transparent; }
.table thead th {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.07) !important;
  color: #72767d !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .13em;
}
.table tbody td { border-color: rgba(255,255,255,.04) !important; font-size: 13px; vertical-align: middle; }
.table tbody tr:hover td { background: rgba(255,255,255,.02) !important; }
.table tbody tr:last-child td { border-bottom: none !important; }

/* ── BADGES ── */
.badge.bg-success   { background: rgba(59,165,93,.15)   !important; color: #57f287; border: 1px solid rgba(87,242,135,.2); }
.badge.bg-warning   { background: rgba(250,166,26,.12)  !important; color: #faa61a; border: 1px solid rgba(250,166,26,.2); }
.badge.bg-primary   { background: rgba(88,101,242,.15)  !important; color: #7289da; border: 1px solid rgba(88,101,242,.25); }
.badge.bg-secondary { background: rgba(255,255,255,.05) !important; color: #96989d; border: 1px solid rgba(255,255,255,.08); }
.badge.bg-light     { background: rgba(255,255,255,.06) !important; color: #dcddde !important; border: 1px solid rgba(255,255,255,.10); }
.badge.bg-danger    { background: rgba(237,66,69,.15)   !important; color: #ed4245; border: 1px solid rgba(237,66,69,.25); }

/* ── ALERTS ── */
.alert-info    { background: rgba(88,101,242,.08) !important; border: 1px solid rgba(88,101,242,.20) !important; color: #7289da !important; border-radius: 8px; }
.alert-success { background: rgba(59,165,93,.10)  !important; border: 1px solid rgba(87,242,135,.20) !important; color: #57f287 !important; border-radius: 8px; }
.alert-danger  { background: rgba(237,66,69,.10)  !important; border: 1px solid rgba(237,66,69,.25)  !important; color: #ed4245 !important; border-radius: 8px; }

/* ── LIST GROUPS ── */
.list-group { background: rgba(30,31,38,.85) !important; border: 1px solid rgba(255,255,255,.07) !important; border-radius: 8px !important; }
.list-group-item { background: transparent !important; border-color: rgba(255,255,255,.05) !important; color: #96989d !important; }
.list-group-item:hover, .list-group-item.active { background: rgba(88,101,242,.12) !important; color: #fff !important; }

/* ── PAGINATION ── */
.page-link { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; color: #96989d !important; border-radius: 4px !important; }
.page-link:hover { background: rgba(88,101,242,.15) !important; color: #fff !important; }
.page-item.active .page-link { background: #5865f2 !important; border-color: #5865f2 !important; color: #fff !important; }

/* ── PRODUCTS ── */
.products .card { transition: transform .18s ease, border-color .18s ease !important; }
.products .card:hover { transform: translateY(-4px) !important; border-color: rgba(88,101,242,.30) !important; }
.products .card .card-img-top { background: rgba(0,0,0,.25) !important; }
.products .card .card-img-top .badges div { background: #5865f2 !important; color: #fff !important; }

/* ── FEATURES ── */
.features .list .feature { background: rgba(30,31,38,.85) !important; border: 1px solid rgba(255,255,255,.06) !important; border-radius: 8px !important; }
.features .list .feature:hover { border-color: rgba(88,101,242,.30) !important; }
.features .list .feature i, .features .list .feature svg { color: #5865f2 !important; }

/* ── SOCIALS ── */
.socials { background: transparent !important; }
.socials .list .social { background: rgba(30,31,38,.85) !important; border: 1px solid rgba(255,255,255,.06) !important; border-radius: 8px !important; color: #dcddde !important; }
.socials .list .social .left svg { background-color: #5865f2 !important; }
.socials .list .social:hover { color: #5865f2 !important; }

/* ── TESTIMONIALS ── */
.testimonial { background: rgba(30,31,38,.85) !important; border: 1px solid rgba(255,255,255,.06) !important; border-radius: 8px !important; }
.testimonial .footer { background: rgba(0,0,0,.20) !important; border-top: 1px solid rgba(255,255,255,.05) !important; }
.testimonial .content .reply { border-left: 0.125rem solid #5865f2 !important; }
.testimonial .content .reply .author span { color: #5865f2 !important; }

/* ── STATUS ── */
.status-card { background: rgba(30,31,38,.85) !important; border: 1px solid rgba(255,255,255,.06) !important; border-radius: 8px !important; }

/* ── FAQ ── */
.faq .accordion {
  --bs-accordion-btn-bg: rgba(30,31,38,.85);
  --bs-accordion-active-bg: rgba(30,31,38,.85);
  --bs-accordion-border-color: rgba(255,255,255,.07);
  --bs-accordion-active-color: #5865f2;
  --bs-accordion-btn-focus-border-color: #5865f2;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(88,101,242,.20);
}
.accordion-button { color: #dcddde !important; }
.accordion-button:not(.collapsed) { color: #5865f2 !important; }

/* ── FOOTER ── */
footer.footer, .hyper-footer {
  background: #0e0f13 !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
  color: #4f5058 !important;
}
.footer .nav li a       { color: #72767d !important; }
.footer .nav li a:hover { color: #5865f2 !important; }

/* ── ANNOUNCEMENT ── */
.announcement { background: #5865f2 !important; color: #fff !important; }

/* ── PRODUCT VARIANTS ── */
.variants .variant { background: rgba(30,31,38,.85) !important; border: 1px solid rgba(255,255,255,.07) !important; }
.variants .variant.active { border-color: #5865f2 !important; box-shadow: 0 0 0 2px rgba(88,101,242,.30) !important; }

/* ── MAINTENANCE ── */
.maintenance-icon-wrapper {
  background: rgba(88,101,242,.12) !important;
  border: 1px solid rgba(88,101,242,.25) !important;
  color: #7289da !important;
  box-shadow: 0 0 40px rgba(88,101,242,.25) !important;
}
.maintenance-accent {
  background: linear-gradient(135deg, #99aab5, #5865f2) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── EDITOR ── */
.editor .e-quote { border-left-color: #5865f2 !important; }
.editor .e-hr, .editor hr { border-top-color: #5865f2 !important; }
.editor .e-link { color: #5865f2 !important; }

/* ── DROPDOWNS ── */
.dropdown-menu { background: #1e1f26 !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 8px !important; }
.dropdown-item { color: #b9bbbe !important; }
.dropdown-item:hover { background: rgba(88,101,242,.12) !important; color: #fff !important; }
.dropdown-item.active { background: #5865f2 !important; color: #fff !important; }

/* ── CART ── */
.cart .product, .cart .form { background: rgba(30,31,38,.85) !important; }
.cart-item-bg { background: rgba(255,255,255,.01) !important; border-color: rgba(255,255,255,.05) !important; }
.cart-qty-btn { background: rgba(255,255,255,.10) !important; }
.cart-qty-btn:hover:not(:disabled) { background: #5865f2 !important; }
.cart-qty-input { background: rgba(255,255,255,.05) !important; color: #fff !important; }

/* ── MISC ── */
.text-accent-500 { color: #7289da !important; }
.text-muted { color: #72767d !important; }


/* ── MODAL STACKING FIX ──
   .flex-wrapper creates a z-index:1 stacking context which traps modals
   below the body-level .modal-backdrop (z-index:1050). Force modals to
   escape and render above the backdrop. */
.modal { z-index: 1060 !important; }
.modal-backdrop { z-index: 1055 !important; }
.modal-dialog { pointer-events: auto !important; }