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

/* ============================================================
   CUSTOM.CSS — Booster Hub design layer for SellAuth "Pro" (2.9.x)
   OLED black + restrained red. Sora (display) · Manrope (body, set
   in the theme's Font setting) · JetBrains Mono (prices / data).
   Lives in assets/custom.css on purpose: it is the one file SellAuth
   keeps when a theme is updated. Colours that Pro reads from the
   theme settings (theme_color, backgrounds, border) are set there,
   not here. No template edits, no backdrop-filter on repeated cards.
   ============================================================ */

:root {
  --bh-surface: #0B0B0D;
  --bh-surface-2: #131316;
  --bh-surface-3: #1B1B1F;
  --bh-brd: #1F1F24;
  --bh-brd-2: #2E2E35;
  --bh-field: #62626E;
  --bh-ink: #F5F5F7;
  --bh-muted: #B4B4BC;
  --bh-faint: #9A9AA4;
  --bh-red: #FF2E44;
  --bh-btn: #D8142A;
  --bh-btn-hover: #C20E1B;
  --bh-rose: #FF6A6E;
  --bh-ok: #37D39A;
  --bh-glow: rgba(255, 46, 68, 0.35);
  --bh-disp: 'Sora', 'Manrope', system-ui, sans-serif;
  --bh-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --bh-r-sm: 6px;
  --bh-r-md: 10px;
  --bh-r-lg: 14px;
  --bs-border-radius: 0.625rem;
  --bs-border-radius-lg: 0.875rem;
}

/* Bootstrap dark tokens -> Booster Hub neutrals. #D8142A is the button FILL (white text 5.2:1);
   as TEXT on black it is only ~4:1, so every text/link accent below uses the rose tone. */
html[data-bs-theme="dark"] {
  --bs-body-color: #F5F5F7;
  --bs-body-color-rgb: 245, 245, 247;
  --bs-secondary-color: #B4B4BC;
  --bs-secondary-color-rgb: 180, 180, 188;
  --bs-tertiary-color: #9A9AA4;
  --bs-emphasis-color: #ffffff;
  --bs-link-color: #FF6A6E;
  --bs-link-color-rgb: 255, 106, 110;
  --bs-link-hover-color: #ffffff;
  --bs-link-hover-color-rgb: 255, 255, 255;
}

html { background: #000; scrollbar-color: #2E2E35 #000; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6, .display-6, .navbar-brand { font-family: var(--bh-disp); letter-spacing: -0.01em; }
::selection { background: var(--bh-btn); color: #fff; }
:focus-visible { outline: 2px solid var(--bh-rose); outline-offset: 2px; }
.text-primary { color: var(--bh-rose) !important; }
.text-accent-500 { color: var(--bh-rose); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #2E2E35; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3F3F48; }

/* ---------- buttons: solid, no shimmer / lift ---------- */
.btn { border-radius: var(--bh-r-md); font-weight: 700; --bs-btn-focus-shadow-rgb: 255, 106, 110; }
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-bg: #D8142A;
  --bs-btn-border-color: #D8142A;
  --bs-btn-hover-bg: #C20E1B;
  --bs-btn-hover-border-color: #C20E1B;
  --bs-btn-active-bg: #A50C19;
  --bs-btn-active-border-color: #A50C19;
  --bs-btn-disabled-bg: #D8142A;
  --bs-btn-disabled-border-color: #D8142A;
}
.btn-primary:hover,
.btn-primary:focus-visible { background-color: #C20E1B; border-color: #C20E1B; box-shadow: 0 0 22px var(--bh-glow); }
.btn-outline-primary {
  --bs-btn-color: #F5F5F7;
  --bs-btn-border-color: #2E2E35;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #1B1B1F;
  --bs-btn-hover-border-color: #D8142A;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #1B1B1F;
  --bs-btn-active-border-color: #D8142A;
  --bs-btn-disabled-color: #9A9AA4;
  --bs-btn-disabled-border-color: #2E2E35;
}
.btn-outline-primary:hover { background-color: #1B1B1F; border-color: #D8142A; }

/* ---------- announcement + navbar: full-bleed solid black, red hairline ---------- */
.announcement { font-weight: 600; letter-spacing: 0.01em; }
.navbar {
  position: relative;
  background: #000;
  border-bottom: 1px solid var(--bh-brd);
  padding: 0;
}
.navbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 46, 68, 0.75) 50%, transparent 100%);
  pointer-events: none;
}
.navbar .container { min-height: 64px; }
.navbar .navbar-brand { font-size: 1.05rem; color: #fff; }
.navbar .navbar-brand img,
.footer .logo img { max-height: 2.25rem; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 14px rgba(255, 46, 68, 0.28); }
.navbar .nav-link {
  position: relative;
  color: var(--bh-muted);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--bh-r-sm);
}
.navbar .nav-link:hover,
.navbar .nav-item a.nav-link.active { color: #fff; }
.navbar .nav-item a.nav-link.active::after {
  content: '';
  position: absolute;
  left: 0.5rem; right: 0.5rem; bottom: -0.25rem;
  height: 2px;
  background: var(--bh-btn);
  box-shadow: 0 0 10px var(--bh-glow);
  border-radius: 2px;
}
.navbar .cart .btn .count { font-family: var(--bh-mono); font-weight: 600; }
.navbar .user .btn, .navbar .cart .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 991.98px) {
  .navbar .navbar-collapse { padding: 0.5rem 0 1rem; border-top: 1px solid var(--bh-brd); margin-top: 0.5rem; }
  .navbar .nav-link { padding: 0.75rem 0.25rem; min-height: 44px; }
}

/* currency + language pickers (Pro paints them with the raw accent colour) */
.currency-selector select, .language-selector select { border-color: var(--bh-brd-2); color: var(--bh-ink); background-color: #050507; }
.currency-selector .choices__inner,
.language-selector .choices__inner,
.currency-selector .choices.is-open .choices__inner,
.language-selector .choices.is-open .choices__inner { border: 1px solid var(--bh-brd-2) !important; }
.currency-selector .symbol,
.currency-selector .choices__inner .symbol,
.language-selector .code { color: var(--bh-rose) !important; }

/* ---------- generic section rhythm + titles ---------- */
.py-20 { padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(32px, 5vw, 56px); }
.py-5-nav { padding-top: clamp(28px, 4vw, 48px); padding-bottom: 1.5rem; }
.section-title h1, .section-title h2 { font-family: var(--bh-disp); font-weight: 700; letter-spacing: -0.015em; }
.section-title h1 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); }
.section-title h2 { font-size: clamp(1.4rem, 2.8vw, 1.85rem); }
.section-title p { color: var(--bh-muted); }
.bg-block-secondary { background: var(--bh-surface); border-top: 1px solid var(--bh-brd); border-bottom: 1px solid var(--bh-brd); }

/* ---------- hero: static red haze instead of the stock photo ---------- */
.hero {
  background-image: none !important;
  background: radial-gradient(60% 90% at 50% 0%, rgba(255, 46, 68, 0.14) 0%, rgba(0, 0, 0, 0) 70%), #000;
  border-bottom: 1px solid var(--bh-brd);
}
.hero .bg-overlay { display: none; }
.hero .container { padding-top: clamp(56px, 9vw, 112px); padding-bottom: clamp(44px, 6vw, 80px); }
.hero .content h1 {
  font-family: var(--bh-disp);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(2.1rem, 5.5vw, 3.5rem);
}
.hero .content p { color: var(--bh-muted); font-size: 1.0625rem; }
.rainbowText,
.hero .content h1 span {
  background: linear-gradient(135deg, #FF6A6E 0%, #FF2E44 55%, #D8142A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero .fake-searchbar input,
.hero .search-modal .searchbar input {
  background: var(--bh-surface);
  border: 1px solid var(--bh-brd-2);
  border-radius: 999px;
  min-height: 52px;
  color: #fff;
}
.hero .fake-searchbar { cursor: pointer; }
.hero .fake-searchbar:hover input { border-color: var(--bh-field); }
.hero .fake-searchbar svg, .hero .search-modal .searchbar svg { fill: var(--bh-faint); width: 22px; height: 22px; }
.hero .content .stats {
  background: var(--bh-surface);
  border: 1px solid var(--bh-brd);
  border-radius: var(--bh-r-lg);
}
.hero .content .stats div .value { font-family: var(--bh-mono); font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.hero .content .stats div .label { color: var(--bh-faint); }
.hero .content .stats div .value svg { color: var(--bh-rose); }
.hero .search-modal .product .image { background: var(--bh-surface-3); }

/* ---------- product + category cards ---------- */
.products .card,
.categories .card {
  background: var(--bh-surface);
  color: var(--bh-ink);
  border: 1px solid var(--bh-brd);
  border-radius: var(--bh-r-lg);
  overflow: hidden;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.products .card:hover,
.categories .card:hover { transform: none; border-color: #3a1218; background: var(--bh-surface-2); }
.products .card .card-img-top,
.categories .card .card-img-top { background: var(--bh-surface-3); border-bottom: 1px solid var(--bh-brd); border-radius: 0; }
.products .card .card-img-top img,
.products .card .card-img-top svg { border-radius: 0; transition: transform 0.3s ease; }
.products .card:hover .card-img-top img { transform: scale(1.03); }
.products .card .card-img-top .overlay { background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); padding-top: 2.5rem; }
.products .card .card-img-top .badges div {
  border-radius: var(--bh-r-sm);
  font-family: var(--bh-mono);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.products .card .card-body { padding: 16px 18px 18px; }
.products .card .info { color: var(--bh-muted); margin-bottom: 0.4rem; }
.products .card .info .price {
  font-family: var(--bh-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}
.products .card .info { gap: 0.5rem; }
.products .card .info .price { min-width: 0; flex: 1 1 auto; }
.products .card .info .text-primary { flex: 0 0 auto; }
.products .card .info .price s { color: var(--bh-faint); font-weight: 500; font-size: 0.8rem; }
.products .card .info .text-primary { color: var(--bh-muted) !important; font-family: var(--bh-mono); font-size: 0.75rem; }
.products .card .card-title { font-family: var(--bh-disp); font-size: 1rem; font-weight: 700; line-height: 1.35; color: #fff; }
.categories .card .card-title { font-family: var(--bh-disp); font-weight: 700; }
.categories .card .card-text { color: var(--bh-muted); font-size: 0.875rem; }

/* ---------- single product page ---------- */
.product-wrapper .display-6 { font-weight: 800; font-size: clamp(1.6rem, 3.2vw, 2.25rem); letter-spacing: -0.015em; }
.product-wrapper .carousel img,
.product-wrapper .card-img-top {
  border-radius: var(--bh-r-lg);
  border: 1px solid var(--bh-brd);
  background: var(--bh-surface-3);
}
.product-wrapper .thumbnails button { border: 1px solid var(--bh-brd); overflow: hidden; background: var(--bh-surface-3); }
.product-wrapper .thumbnails button.active { border-color: var(--bh-rose); opacity: 1; }
.product-wrapper .badges div, .product-wrapper .badges a { border-radius: var(--bh-r-sm); font-family: var(--bh-mono); letter-spacing: 0.02em; }
.product-wrapper .live-stats svg { color: var(--bh-rose); }
.product-wrapper .product-tabs .editor { color: var(--bh-muted); line-height: 1.7; }
.product-wrapper .product-tabs .editor a { color: var(--bh-rose); }
.variants .variant {
  background: var(--bh-surface);
  border: 1px solid var(--bh-brd-2);
  border-radius: var(--bh-r-md);
  color: var(--bh-ink);
  min-height: 44px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
/* the option buttons carry the .btn-primary class in Pro, so cancel its red hover glow */
.variants .variant:hover { background: var(--bh-surface-2); border-color: var(--bh-field); }
.variants .variant:not(.active):hover { box-shadow: none; }
.variants .variant.active {
  background: rgba(216, 20, 42, 0.08);
  border-color: var(--bh-btn);
  box-shadow: 0 0 0 1px var(--bh-btn) inset;
}
.variants .variant .price { font-family: var(--bh-mono); font-variant-numeric: tabular-nums; font-weight: 700; color: #fff; background: var(--bh-surface-3); font-size: 1rem; padding: 0.35rem 0.65rem; white-space: nowrap; }
/* option text hierarchy: Sora name > Manrope description > mono stock line */
.variants .variant { padding: 0.9rem 1rem; gap: 1rem; font-weight: 500; }
.variants .variant .name-stock { display: flex; flex-direction: column; gap: 0.35rem; }
.variants .variant .name { font-family: var(--bh-disp); font-weight: 600; font-size: 0.975rem; line-height: 1.35; letter-spacing: -0.005em; color: #fff; }
.variants .variant .description { font-weight: 500; font-size: 0.8125rem; line-height: 1.6; color: var(--bh-muted); margin-bottom: 0; }
.variants .variant .stock { font-family: var(--bh-mono); font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bh-faint); margin-top: 0.15rem; }
.product-wrapper .form-label { font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--bh-muted); }
.product-wrapper .fs-5 { font-family: var(--bh-mono); font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.variants .variant .active-indicator { background: #000; color: var(--bh-rose); }
.addon-item { background: var(--bh-surface); border-color: var(--bh-brd); border-radius: var(--bh-r-md); }
.addon-item:hover { background: var(--bh-surface-2); }
.btn-addon-add, .btn-addon-add:hover { color: var(--bh-rose); }
.btn-addon-remove, .btn-addon-remove:hover { color: var(--bh-rose); }

/* ---------- forms ---------- */
.form-control, .form-select {
  background-color: #050507;
  border: 1px solid var(--bh-field);
  color: var(--bh-ink);
  border-radius: var(--bh-r-md);
  min-height: 44px;
}
.form-control::placeholder { color: var(--bh-faint); }
.form-control:focus, .form-select:focus {
  background-color: #050507;
  color: #fff;
  border-color: var(--bh-rose);
  box-shadow: 0 0 0 0.2rem rgba(255, 106, 110, 0.25);
}
.form-check-input { border-color: var(--bh-field); }
.form-check-input:checked { background-color: var(--bh-btn); border-color: var(--bh-btn); }

/* ---------- FAQ accordion ---------- */
.faq .accordion,
.faq.bg-block-secondary .accordion {
  --bs-accordion-bg: #0B0B0D;
  --bs-accordion-btn-bg: #0B0B0D;
  --bs-accordion-active-bg: #131316;
  --bs-accordion-color: #B4B4BC;
  --bs-accordion-btn-color: #F5F5F7;
  --bs-accordion-active-color: #ffffff;
  --bs-accordion-border-color: #1F1F24;
  --bs-accordion-border-radius: 14px;
  --bs-accordion-inner-border-radius: 13px;
  --bs-accordion-btn-focus-border-color: #FF6A6E;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(255, 106, 110, 0.25);
}
/* Bootstrap's dark theme re-declares the chevron colours on ::after itself (blue), so override it there */
.faq .accordion-button::after {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23B4B4BC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FF6A6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.faq .accordion-item { border: 1px solid var(--bh-brd); margin-bottom: 0.75rem; overflow: hidden; }
.faq .accordion-button { font-family: var(--bh-disp); font-weight: 600; min-height: 56px; }
.faq .accordion-button:not(.collapsed) { box-shadow: none; }
.faq .accordion-body { line-height: 1.7; }

/* ---------- feature cards ---------- */
.features .list .feature {
  align-items: flex-start;
  text-align: left;
  background: var(--bh-surface);
  border: 1px solid var(--bh-brd);
  border-radius: var(--bh-r-lg);
  height: calc(100% - var(--bs-gutter-x));
  transition: border-color 0.18s ease;
}
.features .list .feature:hover { border-color: #3a1218; }
.features .list .feature i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  color: var(--bh-rose);
  background: rgba(255, 46, 68, 0.08);
  border: 1px solid rgba(255, 46, 68, 0.22);
  border-radius: var(--bh-r-md);
}
.features .list .feature .title { font-family: var(--bh-disp); font-size: 1.05rem; margin-bottom: 0.5rem; }
.features .list .feature .description { padding: 0; color: var(--bh-muted); font-size: 0.9rem; line-height: 1.6; }

/* ---------- socials, reviews, status, CTA ---------- */
.socials { background: var(--bh-surface); border-top: 1px solid var(--bh-brd); border-bottom: 1px solid var(--bh-brd); }
.socials .list .social { background: #000; border: 1px solid var(--bh-brd); color: var(--bh-ink); transition: border-color 0.18s ease; }
.socials .list .social:hover { color: #fff; border-color: var(--bh-btn); }
.socials .list .social .left svg { background-color: var(--bh-btn); }
.testimonial { background: var(--bh-surface); border: 1px solid var(--bh-brd); border-radius: var(--bh-r-lg); overflow: hidden; }
.testimonial .footer { background: rgba(0, 0, 0, 0.45); border-top: 1px solid var(--bh-brd); }
.testimonial .content .reply .text { border-left-color: var(--bh-btn); }
.testimonial .content .reply .author span { color: var(--bh-rose); }
.status-card { background: var(--bh-surface); border: 1px solid var(--bh-brd); }
.cta-text-image, .cta-text-center { background: var(--bh-surface); }
.cta-text-image .content .subtitle, .cta-text-center .content .subtitle { color: var(--bh-rose); font-family: var(--bh-mono); letter-spacing: 0.06em; }

/* ---------- cart ---------- */
.cart .form, .cart .product { background: var(--bh-surface); border-color: var(--bh-brd) !important; border-radius: var(--bh-r-lg); }
.cart-item-bg { background: var(--bh-surface); border-color: var(--bh-brd) !important; }
.cart-qty-btn { background: var(--bh-surface-3); color: #fff; }
.cart-qty-btn:hover:not(:disabled) { background: var(--bh-btn); }
.cart-qty-input { background: #050507; }
.cart-price-text { font-family: var(--bh-mono); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

/* ---------- modals, dropdowns, pop-ups, pagination ---------- */
.modal-content { background: var(--bh-surface-2); border: 1px solid var(--bh-brd-2); border-radius: var(--bh-r-lg); }
.modal-header, .modal-footer { border-color: var(--bh-brd); }
.modal-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: 0.72; }
.dropdown-menu { background: var(--bh-surface-2); border-color: var(--bh-brd-2); border-radius: var(--bh-r-md); }
.notification-content { background: var(--bh-surface-2); border-color: var(--bh-brd-2); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6); }
.pagination .page-item:not(.active) .page-link { background: var(--bh-surface); border-color: var(--bh-brd); color: var(--bh-muted); }
.pagination .page-item.active .page-link { background: var(--bh-btn); border-color: var(--bh-btn); color: #fff; }

/* ---------- footer ---------- */
footer.footer { background: #000; border-top: 1px solid var(--bh-brd); }
.footer .logo p { font-family: var(--bh-disp); }
.footer h5 { font-family: var(--bh-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--bh-faint); }
.footer .nav li a { color: var(--bh-muted); font-weight: 500; }
.footer .nav li a:hover { color: var(--bh-rose); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}