/* ===========================================================================
 * VAMPIRE HALLOWEEN THEME (BLACK / WHITE / CRIMSON RED)
 * =========================================================================== */

/* --------------------------------------------------------------------------
 * HERO SECTION: CLEAN SELECTORS, 60/40 GRID & PNG CONTOUR GLOW
 * -------------------------------------------------------------------------- */

/* 1. 60/40 Grid Split to balance left text and right mascot */
.sa-hero .wrap > div {
  display: grid !important;
  grid-template-columns: 1.2fr 0.8fr !important; /* 60% text / 40% image ratio */
  align-items: center !important;
  gap: 2.5rem !important;
}

/* 2. Left-Bound Text Column with balanced grouping */
.sa-hero .wrap > div > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  width: 100% !important;
  max-width: 620px !important;
  margin: 0 !important;
}

.sa-hero h1,
.sa-hero p,
.sa-hero .text-display {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 3. Top Pill Badge Alignment (No :has selector) */
.sa-hero [class*="rounded-full"],
.sa-hero [class*="badge"] {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  white-space: nowrap !important;
  margin: 0 0 0.75rem 0 !important;
}

/* 4. Left-Align Buttons & Feature Checkmark Row */
.sa-hero ul,
.sa-hero .flex-wrap,
.sa-hero div[class*="flex"] {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 100% !important;
  gap: 1rem !important;
}

.sa-hero .btn-accent,
.sa-hero a[class*="border"],
.sa-hero button {
  white-space: nowrap !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 5. Character Container & PNG Crimson Contour Drop Shadow (Unclipped) */
.sa-hero [class*="rounded-card"],
.sa-hero .relative {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

.sa-hero img {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  max-width: 380px !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  display: block !important;
  clip-path: none !important;
  /* Crimson/Blood Red drop-shadows conforming directly to character silhouette */
  filter: drop-shadow(0 0 25px rgba(220, 38, 38, 0.65))
          drop-shadow(0 0 50px rgba(153, 27, 27, 0.45))
          drop-shadow(0 15px 30px rgba(0, 0, 0, 0.95)) !important;
}

/* --------------------------------------------------------------------------
 * 2. TYPOGRAPHY & HIGHLIGHT FIXES
 * -------------------------------------------------------------------------- */
p, 
.text-t-muted, 
.text-neutral-400, 
.text-neutral-500 {
  color: #D1D5DB !important; /* Cool silver ash */
}

h1, h2, h3, h4, 
.text-t-primary {
  color: #FFFFFF !important;
}

/* Crimson Red Accent Highlights */
.text-accent-500,
.text-gold,
h1 span, h2 span,
h1 em, h2 em,
h1 mark, h2 mark {
  color: #EF4444 !important;
  font-style: normal !important;
  text-shadow: 0 0 12px rgba(239, 68, 68, 0.35) !important;
}

/* Prevent flex gaps or whitespace expansion around asterisk/em tags */
.sa-section-header h2 em,
.sa-section-header h2 span,
.sa-section-header h2 mark,
.component h2 em,
.component h2 span {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
}

/* --------------------------------------------------------------------------
 * 3. GLASSMORPHIC CARDS & VAMPIRE SURFACES
 * -------------------------------------------------------------------------- */
.sa-card,
.sa-product-card,
.kk-cat-card,
div[class*="bg-surface"]:not(.kk-steps-container):not(.kk-step-item):not(.keykings-about-section),
div[class*="bg-card"]:not(.kk-steps-container):not(.kk-step-item):not(.keykings-about-section) {
  background: rgba(14, 10, 12, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(220, 38, 38, 0.25) !important;
  border-radius: 14px !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}

.sa-product-card:hover,
.kk-cat-card:hover {
  border-color: rgba(239, 68, 68, 0.75) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.85),
              0 0 25px rgba(220, 38, 38, 0.25) !important;
  transform: translateY(-3px) !important;
}

/* --------------------------------------------------------------------------
 * 4. BUTTONS, BADGES & FAQ LINKS
 * -------------------------------------------------------------------------- */
/* Primary Vampire Crimson Buttons */
.btn-accent,
button[class*="bg-accent"],
a[class*="bg-accent"],
a[href="#products"],
[class*="sa-faq"] a.btn-accent,
[class*="sa-faq"] a[class*="bg-accent"],
[class*="sa-faq"] a[class*="btn"] {
  background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 18px rgba(220, 38, 38, 0.4) !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
}

.btn-accent *,
a[class*="bg-accent"] *,
button[class*="bg-accent"] *,
[class*="sa-faq"] a[class*="btn"] * {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  text-decoration: none !important;
}

.btn-accent:hover,
a[href="#products"]:hover,
a[class*="bg-accent"]:hover,
[class*="sa-faq"] a[class*="btn"]:hover {
  background: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 24px rgba(239, 68, 68, 0.6) !important;
  transform: translateY(-2px) !important;
}

.kk-cat-badge,
.sa-product-card-badge {
  background: rgba(18, 10, 12, 0.95) !important;
  border: 1px solid rgba(220, 38, 38, 0.45) !important;
  color: #EF4444 !important;
}

/* FAQ Inline Text Answer Links (Excludes Buttons) */
.sa-faq a:not([class*="btn"]):not([class*="bg-accent"]),
.sa-faq-answer a:not([class*="btn"]):not([class*="bg-accent"]),
.sa-faq-item a:not([class*="btn"]):not([class*="bg-accent"]),
.sa-faq-content a:not([class*="btn"]):not([class*="bg-accent"]),
[class*="sa-faq"] div a:not([class*="btn"]):not([class*="bg-accent"]),
[class*="sa-faq"] p a:not([class*="btn"]):not([class*="bg-accent"]) {
  color: #EF4444 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(220, 38, 38, 0.6) !important;
  text-underline-offset: 4px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease-in-out !important;
}

.sa-faq a:not([class*="btn"]):not([class*="bg-accent"]):hover,
.sa-faq-answer a:not([class*="btn"]):not([class*="bg-accent"]):hover,
.sa-faq-item a:not([class*="btn"]):not([class*="bg-accent"]):hover,
.sa-faq-content a:not([class*="btn"]):not([class*="bg-accent"]):hover,
[class*="sa-faq"] div a:not([class*="btn"]):not([class*="bg-accent"]):hover,
[class*="sa-faq"] p a:not([class*="btn"]):not([class*="bg-accent"]):hover {
  color: #FFFFFF !important;
  text-decoration-color: #FFFFFF !important;
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.7) !important;
}

/* --------------------------------------------------------------------------
 * 5. SECTION HEADERS & DECORATIVE FLANKING LINES (STABLE RESPONSIVE)
 * -------------------------------------------------------------------------- */
.sa-section-header,
.component .sa-section-header {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  margin-bottom: 2rem !important;
}

.sa-section-header h2,
.sa-section-header .text-display,
.component h2.text-display,
.component h2 {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Inner accent tags inline formatting */
.sa-section-header h2 em,
.sa-section-header h2 span,
.sa-section-header h2 mark,
.component h2 em,
.component h2 span {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
}

/* Hide lines on mobile (< 768px) */
.sa-section-header h2::before,
.sa-section-header h2::after,
.component h2::before,
.component h2::after {
  content: none !important;
  display: none !important;
}

/* Desktop Only: Flanking Crimson Gradient Lines */
@media (min-width: 768px) {
  .sa-section-header h2::before,
  .sa-section-header h2::after,
  .component h2::before,
  .component h2::after {
    content: "" !important;
    display: inline-block !important;
    vertical-align: middle !important;
    height: 1px !important;
    width: 80px !important;
  }

  .sa-section-header h2::before,
  .component h2::before {
    margin-right: 1.25rem !important;
    background: linear-gradient(90deg, transparent 0%, rgba(220, 38, 38, 0.6) 100%) !important;
  }

  .sa-section-header h2::after,
  .component h2::after {
    margin-left: 1.25rem !important;
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.6) 0%, transparent 100%) !important;
  }
}

.keykings-about-section h2 {
  display: block !important;
  white-space: normal !important;
}

.keykings-about-section h2::before,
.keykings-about-section h2::after {
  content: none !important;
  display: none !important;
}

/* --------------------------------------------------------------------------
 * AFFILIATE TIERS: LEFT-ALIGNED ROW CONTENT & VAMPIRE COLOR TINTS
 * -------------------------------------------------------------------------- */

.sa-page-customer-affiliate-item {
  width: 100% !important;
  box-sizing: border-box !important;
}

div:has(> .sa-page-customer-affiliate-item) {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.sa-page-customer-affiliate-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;
  padding: 0.85rem 1.25rem !important;
  border-radius: 10px !important;
  transition: all 0.25s ease-in-out !important;
}

.sa-page-customer-affiliate-item * {
  text-align: left !important;
}

.sa-page-customer-affiliate-item p:first-child {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  margin-bottom: 0 !important;
}

.sa-page-customer-affiliate-item p:last-child {
  font-size: 0.8rem !important;
  margin-top: 0 !important;
}

/* --- TIER COLORED OUTLINES & GRADIENT BACKGROUND TINTS --- */

/* Tier 1: Faint Blood Tint */
.sa-page-customer-affiliate-item:nth-child(1) {
  border: 1px solid rgba(153, 27, 27, 0.4) !important;
  background: linear-gradient(90deg, rgba(153, 27, 27, 0.15) 0%, rgba(10, 10, 12, 0.85) 100%) !important;
}
.sa-page-customer-affiliate-item:nth-child(1) p:first-child {
  color: #F87171 !important;
}

/* Tier 2: Vampire Silver Accent */
.sa-page-customer-affiliate-item:nth-child(2) {
  border: 1px solid rgba(229, 231, 235, 0.45) !important;
  background: linear-gradient(90deg, rgba(229, 231, 235, 0.1) 0%, rgba(10, 10, 12, 0.85) 100%) !important;
}
.sa-page-customer-affiliate-item:nth-child(2) p:first-child {
  color: #F3F4F6 !important;
}

/* Tier 3: Crimson Glow Tier */
.sa-page-customer-affiliate-item:nth-child(3) {
  border: 1px solid rgba(220, 38, 38, 0.6) !important;
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.2) 0%, rgba(10, 10, 12, 0.85) 100%) !important;
}
.sa-page-customer-affiliate-item:nth-child(3) p:first-child {
  color: #EF4444 !important;
}

/* Tier 4: Royal Blood Tier */
.sa-page-customer-affiliate-item:nth-child(4) {
  border: 1px solid rgba(185, 28, 28, 0.8) !important;
  background: linear-gradient(90deg, rgba(185, 28, 28, 0.3) 0%, rgba(10, 10, 12, 0.9) 100%) !important;
}
.sa-page-customer-affiliate-item:nth-child(4) p:first-child {
  color: #DC2626 !important;
}

/* Tier 5: Lord Vampire Tier */
.sa-page-customer-affiliate-item:nth-child(5) {
  border: 1px solid rgba(239, 68, 68, 0.9) !important;
  background: linear-gradient(90deg, rgba(153, 27, 27, 0.45) 0%, rgba(10, 10, 12, 0.95) 100%) !important;
  box-shadow: 0 0 15px rgba(220, 38, 38, 0.2) !important;
}
.sa-page-customer-affiliate-item:nth-child(5) p:first-child {
  color: #FFFFFF !important;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.8) !important;
}

/* ===================================================================
   SellAuth custom.css - KeyKings Floating Discord FAB (Fixed Status Colors)
   =================================================================== */

.keykings-discord-fab-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

/* Tooltip preview overlay */
.keykings-discord-tooltip {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.95);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: #0f0a0c;
  border: 1px solid rgba(220, 38, 38, 0.45);
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.8), 0 0 15px rgba(220, 38, 38, 0.25);
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  pointer-events: auto;
  text-decoration: none;
}

/* Show tooltip on hover or focus */
.keykings-discord-fab-container:hover .keykings-discord-tooltip,
.keykings-discord-fab-container:focus-within .keykings-discord-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Animated status indicator (Restored Discord Green) */
.keykings-status-dot {
  width: 10px;
  height: 10px;
  background-color: #23a55a !important; /* Discord Online Green */
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

.keykings-status-dot::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background-color: #23a55a !important; /* Discord Online Green */
  border-radius: 50%;
  opacity: 0.4;
  animation: keykings-ping 2s infinite cubic-bezier(0, 0, 0.2, 1);
}

@keyframes keykings-ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.keykings-tooltip-text {
  display: flex;
  flex-direction: column;
}

.keykings-tooltip-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
}

.keykings-tooltip-sub {
  font-size: 11px;
  color: #ef4444;
  font-weight: 500;
  margin-top: 2px;
}

/* Floating Action Button (FAB) */
.keykings-discord-fab {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: #dc2626; /* Crimson Red Base */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.45), 0 4px 10px rgba(0, 0, 0, 0.6);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  outline: none;
  cursor: pointer;
}

.keykings-discord-fab svg {
  width: 30px;
  height: 30px;
  fill: #ffffff;
  transition: transform 0.3s ease;
}

.keykings-discord-fab:hover {
  transform: scale(1.1) translateY(-2px);
  background-color: #ef4444;
  box-shadow: 0 12px 28px rgba(239, 68, 68, 0.6), 0 0 22px rgba(220, 38, 38, 0.5);
}

.keykings-discord-fab:hover svg {
  transform: scale(1.08);
}

.keykings-discord-fab:active {
  transform: scale(0.95) translateY(0);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* Online Badge on Icon (Restored Discord Green) */
.keykings-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  background-color: #23a55a !important; /* Discord Online Green */
  border: 3px solid #0f0a0c;
  border-radius: 50%;
}

@media (max-width: 480px) {
  .keykings-discord-fab-container {
    bottom: 16px;
    right: 16px;
  }

  .keykings-discord-fab {
    width: 52px;
    height: 52px;
  }

  .keykings-discord-fab svg {
    width: 26px;
    height: 26px;
  }

  .keykings-discord-tooltip {
    display: none;
  }
}

/* ===================================================================
   SellAuth Fix: Infinite Dual-Row Review Marquee Card Sizing
   =================================================================== */

.sa-feedback-marquee-wrapper {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  padding: 1.5rem 0 !important;
  display: block !important;
}

.sa-marquee-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 1.25rem !important;
  width: max-content !important;
  will-change: transform !important;
}

.sa-marquee-track .sa-page-feedback-item {
  flex: 0 0 340px !important;
  width: 340px !important;
  max-width: 340px !important;
}

.sa-marquee-track .sa-feedback-card,
.sa-marquee-track [class*="feedback-card"] {
  height: 100% !important;
  width: 100% !important;
}

.sa-marquee-track--left {
  animation: marquee-left 40s linear infinite !important;
}

.sa-marquee-track--right {
  animation: marquee-right 40s linear infinite !important;
}

.sa-marquee-row:hover .sa-marquee-track {
  animation-play-state: paused !important;
}

@keyframes marquee-left {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes marquee-right {
  0% { transform: translate3d(-50%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Container spacing */
.sa-feedback-marquee-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  padding: 0.5rem 0 !important;
}

.sa-marquee-row {
  display: flex !important;
  width: 100% !important;
  margin-bottom: 0.5rem !important;
}

.sa-marquee-track {
  padding: 0.5rem 0 !important;
}

/* ===================================================================
   KeyKings Scroll Progression Timeline (Exact Center Fix)
   =================================================================== */

.kk-steps-container ol {
  position: relative !important;
}

.kk-steps-line-bg {
  position: absolute !important;
  left: 19px !important;
  width: 2px !important;
  background: rgba(220, 38, 38, 0.15) !important;
  border-radius: 2px !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Animated Crimson blood fill line */
.kk-steps-line-fill {
  position: absolute !important;
  left: 19px !important;
  width: 2px !important;
  height: 0px;
  background: linear-gradient(180deg, #DC2626 0%, rgba(153, 27, 27, 0.5) 100%) !important;
  box-shadow: 0 0 10px rgba(220, 38, 38, 0.8) !important;
  border-radius: 2px !important;
  z-index: 2 !important;
  pointer-events: none !important;
  transition: height 0.1s linear !important;
}

/* Timeline Item Container */
.sa-steps-items .kk-step-item {
  position: relative !important;
  z-index: 3 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Badge Base State (Inactive) */
.sa-steps-items .kk-step-item .kk-step-badge {
  position: relative !important;
  z-index: 5 !important;
  width: 40px !important;
  height: 40px !important;
  background-color: #0d080a !important;
  border: 1px solid rgba(220, 38, 38, 0.2) !important;
  color: #9CA3AF !important;
  box-shadow: none !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Text Content Base State (Inactive) */
.sa-steps-items .kk-step-item .kk-step-content {
  opacity: 0.35 !important;
  transform: translateY(6px) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sa-steps-items .kk-step-item .kk-step-content h3 {
  color: #D1D5DB !important;
  transition: color 0.3s ease !important;
}

/* Active Step State on Scroll */
.sa-steps-items .kk-step-item.is-active .kk-step-badge {
  background-color: #1a0b0e !important;
  border-color: #EF4444 !important;
  color: #EF4444 !important;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.55), inset 0 0 10px rgba(220, 38, 38, 0.3) !important;
  transform: scale(1.12) !important;
}

.sa-steps-items .kk-step-item.is-active .kk-step-content {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.sa-steps-items .kk-step-item.is-active .kk-step-content h3 {
  color: #FFFFFF !important;
}

.sa-steps-items .kk-step-item.is-active .kk-step-content p {
  color: #E5E7EB !important;
}

/* ===================================================================
   SellAuth - Bestsellers Splide Carousel Edge Fade
   =================================================================== */

.sa-products-splide {
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* ===================================================================
   KeyKings Bestseller Smooth Continuous Marquee
   =================================================================== */

.kk-products-marquee-container {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  padding: 0.5rem 0 !important;
}

.kk-products-marquee-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 1.5rem !important;
  width: max-content !important;
  will-change: transform !important;
  animation: kk-products-slide 35s linear infinite !important;
}

.kk-products-marquee-container:hover .kk-products-marquee-track {
  animation-play-state: paused !important;
}

.kk-products-card-wrapper {
  flex: 0 0 360px !important;
  width: 360px !important;
  box-sizing: border-box !important;
}

@keyframes kk-products-slide {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 640px) {
  .kk-products-card-wrapper {
    flex: 0 0 280px !important;
    width: 280px !important;
  }
}