/* =========================================================
   OBSIDIAN — Premium SellAuth Theme Layer
   ========================================================= */

:root {
  --obs-accent: var(--cl-accent, #8b5cf6);
  --obs-accent-2: #22d3ee;
  --obs-bg: #050507;
  --obs-surface: rgba(15, 15, 20, .72);
  --obs-surface-strong: #0c0c11;
  --obs-border: rgba(255, 255, 255, .085);
  --obs-border-hover: rgba(255, 255, 255, .18);
  --obs-text: #f7f7fb;
  --obs-muted: #9292a3;
  --obs-radius: 20px;
  --obs-shadow: 0 24px 80px rgba(0, 0, 0, .38);
}

html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  background: var(--obs-bg) !important;
  color: var(--obs-text);
  font-family: var(--bs-font-sans-serif), sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 12% 10%, rgba(139, 92, 246, .12), transparent 28%),
    radial-gradient(circle at 88% 24%, rgba(34, 211, 238, .07), transparent 24%),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: auto, auto, 56px 56px, 56px 56px;
  mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,.65) 65%, transparent 100%);
}

#app { background: transparent !important; }

::selection { background: rgba(139,92,246,.35); color: #fff; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #050507; }
::-webkit-scrollbar-thumb { background: #25252f; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a49; }
* { scrollbar-width: thin; scrollbar-color: #25252f #050507; }

/* Shared section rhythm */
.component:not(.hero) { position: relative; }
.container { max-width: 1240px; }
section.container, .features.container { padding-top: 7rem !important; padding-bottom: 7rem !important; }

.section-title {
  width: 100% !important;
  display: block !important;
  margin: 0 auto 12px !important;
  text-align: center !important;
}
.section-title h2 {
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(2rem, 4vw, 3.1rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.055em !important;
  font-weight: 750 !important;
}
.section-subtitle {
  text-align: center !important;
  margin: 0 auto 3rem !important;
}
.section-subtitle p {
  color: var(--obs-muted) !important;
  font-size: .98rem !important;
  line-height: 1.75 !important;
  max-width: 700px !important;
  margin: 0 auto !important;
}

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar[data-component-id="navbar"] {
  position: static !important;
  background: transparent !important;
  border: 0 !important;
  padding: 18px 14px !important;
}
.navbar .navbar-inner {
  width: min(1180px, calc(100vw - 28px));
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 auto;
  padding: 9px 11px 9px 17px !important;
  border: 1px solid var(--obs-border) !important;
  border-radius: 18px !important;
  background: rgba(9,9,13,.74) !important;
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  box-shadow: 0 18px 55px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.045);
}
.navbar-brand { gap: 10px !important; font-weight: 700 !important; letter-spacing: -.02em !important; }
.navbar-brand img { height: 34px !important; border-radius: 10px !important; box-shadow: 0 0 28px rgba(139,92,246,.18); }
.navbar-nav .nav-link {
  color: #a9a9b8 !important;
  font-size: .88rem !important;
  font-weight: 550 !important;
  border-radius: 11px !important;
  padding: 9px 12px !important;
}
.navbar-nav .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.055) !important; }
.navbar .btn-outline-primary {
  color: #fff !important;
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.045) !important;
  border-radius: 11px !important;
}
.navbar .btn-outline-primary:hover { border-color: rgba(139,92,246,.5) !important; background: rgba(139,92,246,.11) !important; }
.navbar .cart .btn {
  width: 40px !important; height: 40px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.09) !important;
}
.navbar .cart .btn:hover { transform: translateY(-1px) !important; border-color: rgba(139,92,246,.45) !important; box-shadow: 0 8px 28px rgba(139,92,246,.16); }
.navbar .cart .count { background: var(--obs-accent) !important; box-shadow: 0 4px 15px rgba(139,92,246,.38) !important; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  min-height: clamp(610px, 78vh, 840px) !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(139,92,246,.13), transparent 30%),
    linear-gradient(180deg, #06060a 0%, #050507 100%) !important;
}
.hero .gradient-bg {
  opacity: 1 !important;
  background:
    radial-gradient(circle at 35% 40%, rgba(139,92,246,.22), transparent 28%),
    radial-gradient(circle at 72% 42%, rgba(34,211,238,.10), transparent 25%) !important;
  filter: blur(70px) !important;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 8% 5% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  z-index: 2;
}
.hero .bottom-fade { background: linear-gradient(to top, #050507 0%, rgba(5,5,7,.45) 35%, transparent 72%) !important; }
.hero .content { max-width: 850px; margin: 0 auto; }
.hero .hero-badge {
  margin-bottom: 1.5rem !important;
  padding: 8px 14px !important;
  gap: 9px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 8px 35px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
}
.hero .hero-badge svg { color: #b59cff !important; }
.hero .hero-badge span { font-size: .68rem !important; letter-spacing: .16em !important; color: #bdbdcc !important; }
.hero h1 {
  max-width: 950px;
  margin: 0 auto 1.25rem !important;
  font-size: clamp(3rem, 7.5vw, 6.7rem) !important;
  line-height: .94 !important;
  letter-spacing: -.075em !important;
  font-weight: 800 !important;
}
.hero .title-line-1 {
  background: linear-gradient(180deg, #fff 5%, #b8b8c5 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.hero p {
  max-width: 690px;
  margin: 0 auto !important;
  color: #9b9ba9 !important;
  font-size: clamp(1rem, 1.6vw, 1.16rem) !important;
  line-height: 1.75 !important;
}
.hero .hero-buttons { margin-top: 2rem !important; gap: 10px !important; }
.hero .hero-btn {
  min-height: 48px;
  padding: 0 21px !important;
  border-radius: 13px !important;
  font-size: .88rem !important;
  font-weight: 650 !important;
  border: 1px solid transparent;
}
.hero .hero-btn-primary {
  color: #08080b !important;
  background: linear-gradient(135deg, #fff 0%, #dedee7 100%) !important;
  box-shadow: 0 14px 45px rgba(255,255,255,.08);
}
.hero .hero-btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 18px 50px rgba(139,92,246,.20) !important; }
.hero .hero-btn-secondary {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.hero .hero-btn-secondary:hover { background: rgba(139,92,246,.10) !important; border-color: rgba(139,92,246,.35) !important; }
.hero .image img {
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 35px 100px rgba(0,0,0,.5), 0 0 70px rgba(139,92,246,.10);
}

/* =========================================================
   PRODUCTS
   ========================================================= */
#products { scroll-margin-top: 90px; }
.products .row { row-gap: 8px; }
.product-card-reveal { opacity: 1 !important; transform: none !important; }
.product-card {
  border: 1px solid var(--obs-border) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(18,18,24,.92), rgba(9,9,13,.96)) !important;
  box-shadow: 0 14px 50px rgba(0,0,0,.20) !important;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease !important;
}
.product-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(139,92,246,.35) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.38), 0 0 35px rgba(139,92,246,.07) !important;
}
.product-image-wrapper { background: #0b0b10 !important; aspect-ratio: 16/10 !important; }
.product-image { transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .5s ease !important; }
.product-card:hover .product-image { transform: scale(1.055) !important; filter: saturate(1.08) contrast(1.03); }
.product-image-wrapper::after { background: linear-gradient(180deg, transparent 35%, rgba(5,5,8,.34) 100%) !important; opacity: 1 !important; }
.product-info { padding: 19px 19px 18px !important; background: transparent !important; }
.product-title { font-size: .98rem !important; font-weight: 650 !important; letter-spacing: -.01em !important; }
.current-price { color: #fff !important; font-weight: 750 !important; }
.price-label { color: #6f6f7d !important; font-size: .62rem !important; letter-spacing: .14em !important; }
.product-stock { color: #7f7f8e !important; font-size: .72rem !important; }
.product-stock.stock-in { color: #79dca5 !important; }
.product-stock.stock-low { color: #f0c674 !important; }
.product-stock.stock-out { color: #f17e8a !important; }
.old-price { color: #666675 !important; }

/* =========================================================
   FEATURES
   ========================================================= */
.features-grid { gap: 14px !important; }
.feature-card {
  min-height: 245px;
  padding: 30px !important;
  border: 1px solid var(--obs-border) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(16,16,22,.88), rgba(8,8,12,.72)) !important;
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease !important;
}
.feature-card::before {
  content: "";
  position: absolute;
  width: 180px; height: 180px;
  top: -100px; right: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.16), transparent 68%);
  pointer-events: none;
}
.feature-card:hover {
  transform: translateY(-5px);
  border-color: rgba(139,92,246,.30) !important;
  box-shadow: 0 25px 60px rgba(0,0,0,.26), 0 0 30px rgba(139,92,246,.06);
}
.feature-gradient-overlay { display: none !important; }
.feature-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  margin-bottom: 30px !important;
  border-radius: 14px;
  color: #c6b5ff !important;
  background: rgba(139,92,246,.10);
  border: 1px solid rgba(139,92,246,.17);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.feature-icon i { font-size: 18px; }
.feature-content { position: relative; z-index: 2; }
.feature-indicator { display: none !important; }
.feature-title { color: #fff !important; font-size: 1.05rem !important; letter-spacing: -.02em; }
.feature-description { color: #858593 !important; font-size: .86rem !important; line-height: 1.75 !important; }

/* =========================================================
   FAQ / SOCIAL / FEEDBACK
   ========================================================= */
.faq, .socials, .feedbacks { position: relative; }
.faq .accordion-item,
.faq .card,
.faq [class*="accordion"] {
  background: rgba(12,12,17,.7) !important;
  border-color: var(--obs-border) !important;
}
.faq button, .faq .accordion-button {
  color: #f3f3f7 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.faq .accordion-button:not(.collapsed) { color: #c7b5ff !important; }

/* Generic cards used throughout SellAuth pages */
.card, .border, .form-control, .form-select, .input-group-text {
  border-color: var(--obs-border) !important;
}
.card {
  background: rgba(12,12,17,.78) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.20);
}
.form-control, .form-select, textarea {
  color: #fff !important;
  background: rgba(255,255,255,.035) !important;
  border-radius: 12px !important;
}
.form-control:focus, .form-select:focus, textarea:focus {
  border-color: rgba(139,92,246,.55) !important;
  box-shadow: 0 0 0 .2rem rgba(139,92,246,.10) !important;
}
.btn-primary {
  background: linear-gradient(135deg, #9a74ff, #7148d7) !important;
  border-color: transparent !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(113,72,215,.22);
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-outline-primary {
  color: #cdbfff !important;
  border-color: rgba(139,92,246,.30) !important;
  border-radius: 12px !important;
}
.btn-outline-primary:hover { background: rgba(139,92,246,.10) !important; border-color: rgba(139,92,246,.55) !important; }

/* =========================================================
   PRODUCT PAGE
   ========================================================= */
.product-wrapper { background: transparent !important; }
.product-image-wrapper {
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid var(--obs-border) !important;
  background: #0b0b10 !important;
}
.product-image-section .carousel-item img { border-radius: 20px; }
.product-thumbnail {
  border: 1px solid var(--obs-border) !important;
  border-radius: 10px !important;
  opacity: .65;
}
.product-thumbnail.active, .product-thumbnail:hover { border-color: rgba(139,92,246,.55) !important; opacity: 1; }
.product-info-section {
  padding: 30px !important;
  border: 1px solid var(--obs-border);
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(17,17,23,.90), rgba(8,8,12,.72));
  box-shadow: var(--obs-shadow);
}
.product-title { color: #fff !important; letter-spacing: -.045em !important; font-weight: 750 !important; }
.product-price { color: #fff !important; font-weight: 800 !important; }
.product-badge { border-radius: 999px !important; }
.product-tab-buttons { border-bottom-color: var(--obs-border) !important; }
.product-tab-btn { color: #81818f !important; }
.product-tab-btn.active { color: #c7b5ff !important; border-color: #9a74ff !important; }

/* =========================================================
   CART / ACCOUNT / POLICY PAGES
   ========================================================= */
.cart-item-bg { background: rgba(12,12,17,.78) !important; border-color: var(--obs-border) !important; }
.cart .form { background: rgba(12,12,17,.78) !important; border-color: var(--obs-border) !important; border-radius: 18px !important; }
.cart-quantity-controls { background: rgba(255,255,255,.035); border: 1px solid var(--obs-border); }
.cart-qty-btn { color: #fff !important; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer-modern {
  margin-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  background: linear-gradient(180deg, rgba(7,7,10,.55), #040406) !important;
}
.footer-container { max-width: 1240px !important; }
.footer-brand-name, .footer-heading { color: #fff !important; }
.footer-link { color: #777785 !important; transition: color .25s ease, transform .25s ease !important; }
.footer-link:hover { color: #c7b5ff !important; transform: translateX(2px); }
.footer-logo { border-radius: 12px !important; }

/* reveal helpers */
.scroll-reveal { will-change: transform, opacity; }

@media (max-width: 991px) {
  .navbar .navbar-inner { width: calc(100vw - 22px); }
  section.container, .features.container { padding-top: 5rem !important; padding-bottom: 5rem !important; }
}

@media (max-width: 767px) {
  .navbar[data-component-id="navbar"] { padding: 10px 6px !important; }
  .navbar .navbar-inner { border-radius: 15px !important; padding: 8px 9px !important; }
  .hero { min-height: 650px !important; }
  .hero h1 { font-size: clamp(2.8rem, 15vw, 4.5rem) !important; }
  .hero p { font-size: .94rem !important; }
  .hero .hero-buttons { width: 100%; padding: 0 10px; }
  .hero .hero-btn { flex: 1; max-width: none !important; }
  .feature-card { min-height: 215px; padding: 24px !important; }
  .product-card { border-radius: 15px !important; }
  .product-info-section { padding: 21px !important; border-radius: 18px !important; }
}

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