/* ============================================ */
/* EARNINGS CALCULATOR STYLES */
/* ============================================ */

/* Section base styles */
.earnings-calculator-section {
  position        : relative;
  overflow        : hidden;
  color           : white !important;
  background-color: #23282a !important;
}

/* Override any gradient background */
.earnings-calculator-section .bg-gradient-radial {
  background: transparent !important;
}

/* =========================================
     LAYOUT STYLES
     ========================================= */

.earnings-calculator-section .earnings-layout-wrapper {
  display        : flex;
  flex-direction : column;
  gap            : 4rem;
  align-items    : center;
  justify-content: center;
}

@media (min-width: 1024px) {
  .earnings-calculator-section .earnings-layout-wrapper {
    flex-direction: row !important;
    gap           : 6rem !important;
  }

  .earnings-calculator-section .earnings-col-left,
  .earnings-calculator-section .earnings-col-right {
    width    : 50% !important;
    flex     : 0 0 50% !important;
    max-width: 100% !important;
  }

  .earnings-calculator-section .earnings-col-right {
    padding-top   : 0 !important;
    padding-bottom: 0 !important;
  }
}

/* =========================================
     COMPONENT STYLES
     ========================================= */

/* Main Heading Typography - Force Primary Font */
.earnings-calculator-section h2 {
  font-family: var(--font-heading-family) !important;
  font-weight: 400 !important;
}

/* Heading container spacing */
.earnings-calculator-section .earnings-col-left>div:first-child {
  margin-bottom: 2.5rem !important;
}

/* Slider Card (Main) */
.earnings-calculator-section .bg-slate-800\/50 {
  background-color       : #3b4041 !important;
  backdrop-filter        : none !important;
  -webkit-backdrop-filter: none !important;
  border-radius          : 0.75rem !important;
  padding                : 1.5rem !important;
  border                 : none !important;
  margin-bottom          : 1rem !important;
}

.earnings-calculator-section .space-y-6 {
  margin-bottom: 1rem !important;
}

.earnings-calculator-section .space-y-6>*+* {
  margin-top: 1rem !important;
}

/* Stats Cards (Discount & Rewards) */
.earnings-calculator-section .bg-slate-800\/30 {
  background-color       : #3b4041 !important;
  border                 : none !important;
  backdrop-filter        : none !important;
  -webkit-backdrop-filter: none !important;
  border-radius          : 0.75rem !important;
  padding                : 1rem !important;
  height                 : auto !important;
}

.earnings-calculator-section .grid.gap-3,
.earnings-calculator-section .grid.gap-4 {
  gap       : 0.75rem !important;
  margin-top: 0 !important;
}

/* Typography */
.earnings-calculator-section [data-sales-display] {
  color      : white !important;
  font-size  : 4rem !important;
  line-height: 1 !important;
  font-family: var(--font-heading-family) !important;
  font-weight: 400 !important;
}

.earnings-calculator-section .text-xl.lg\:text-2xl {
  font-family  : var(--font-heading-family) !important;
  font-size    : 2rem !important;
  line-height  : 1 !important;
  margin-top   : 0.25rem !important;
  margin-bottom: 0.25rem !important;
  font-weight  : 400 !important;
}

/* Stat labels */
.earnings-calculator-section .tracking-wider {
  letter-spacing: 0.05em !important;
  font-size     : 0.75rem !important;
  color         : #b5b5b5 !important;
}

/* Stat descriptions */
.earnings-calculator-section .text-slate-500 {
  color    : #b5b5b5 !important;
  font-size: 0.875rem !important;
}

/* === SLIDER TRACK & FILL === */

/* === SLIDER FILL - Green Gradient === */
/* Multiple selectors for maximum compatibility */
.earnings-calculator-section [data-slider-fill],
.earnings-calculator-section div[data-slider-fill],
#earnings-calculator-4pbrc6sfj8h [data-slider-fill],
[id^="earnings-calculator-"] [data-slider-fill] {
  height                    : 100% !important;
  background                : linear-gradient(to right, #16a34a, #4ade80) !important;
  background-image          : linear-gradient(to right, #16a34a, #4ade80) !important;
  transition-property       : width !important;
  transition-duration       : 300ms !important;
  transition-timing-function: ease-out !important;
  border-radius             : 0 !important;
  display                   : block !important;
  position                  : relative !important;
}

.earnings-calculator-section .relative.h-4 {
  height  : 14px !important;
  position: relative !important;
  margin  : 1rem 0 !important;
}

.earnings-calculator-section .bg-slate-700 {
  background-color: #1a1d1e !important;
  border-radius   : 9999px !important;
}

.earnings-calculator-section .absolute.inset-0.rounded-full {
  border-radius: 9999px !important;
  overflow     : hidden !important;
}

/* Force the fill to be visible inside the container - multiple approaches */
.earnings-calculator-section .absolute.inset-0.rounded-full>[data-slider-fill],
.earnings-calculator-section .overflow-hidden>[data-slider-fill],
.earnings-calculator-section .pointer-events-none>[data-slider-fill] {
  background      : linear-gradient(to right, #16a34a, #4ade80) !important;
  background-image: linear-gradient(to right, #16a34a, #4ade80) !important;
  height          : 100% !important;
}

/* Direct child selector for slider container */
.earnings-calculator-section .relative.h-4>.absolute>[data-slider-fill] {
  background: linear-gradient(to right, #16a34a, #4ade80) !important;
  height    : 100% !important;
}

/* Slider Thumb */
.earnings-calculator-section input[type="range"] {
  -webkit-appearance: none;
  appearance        : none;
  width             : 100%;
  height            : 100%;
  background        : transparent;
  cursor            : pointer;
  z-index           : 30;
  position          : absolute;
  top               : 0;
  left              : 0;
  opacity           : 0;
}

.earnings-calculator-section [data-slider-thumb] {
  width           : 32px !important;
  height          : 32px !important;
  background-color: white !important;
  border-radius   : 50% !important;
  box-shadow      : 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  z-index         : 25 !important;
  display         : flex !important;
  align-items     : center !important;
  justify-content : center !important;
  top             : 50% !important;
  transform       : translate(0, -50%) !important;
}

.earnings-calculator-section [data-slider-thumb]>div {
  width           : 10px !important;
  height          : 10px !important;
  background-color: #22c55e !important;
  border-radius   : 50% !important;
}

/* === GREEN OVERLAY (FILL EFFECT) - REVISED === */

/* Bright Green Glow Layer */
.earnings-calculator-section .bg-green-glow {
  background-color     : rgba(74, 222, 128, 0.9) !important;
  /* Bright green */
  mix-blend-mode       : color !important;
  -webkit-mask-image   : var(--mask-url) !important;
  mask-image           : var(--mask-url) !important;
  -webkit-mask-size    : contain !important;
  mask-size            : contain !important;
  -webkit-mask-repeat  : no-repeat !important;
  mask-repeat          : no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position        : center !important;
  z-index              : 21 !important;
}

/* Deep Green Tint Layer */
.earnings-calculator-section .bg-green-tint {
  background-color     : rgba(22, 163, 74, 0.6) !important;
  /* Darker green */
  mix-blend-mode       : multiply !important;
  -webkit-mask-image   : var(--mask-url) !important;
  mask-image           : var(--mask-url) !important;
  -webkit-mask-size    : contain !important;
  mask-size            : contain !important;
  -webkit-mask-repeat  : no-repeat !important;
  mask-repeat          : no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position        : center !important;
  z-index              : 22 !important;
}

/* Hide the original image inside the fill layer so only color shows */
.earnings-calculator-section [data-fill-layer] img {
  opacity: 0 !important;
}

/* Ensure fill layer is on top */
.earnings-calculator-section [data-fill-layer] {
  pointer-events: none !important;
  z-index       : 30 !important;
  transition    : clip-path 1000ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* === BONUS BADGE === */
.earnings-calculator-section [data-bonus-badge] {
  background   : transparent !important;
  border       : none !important;
  border-radius: 0 !important;
  padding      : 0 !important;
  display      : flex !important;
  align-items  : center !important;
  gap          : 1.5rem !important;
  max-width    : 24rem !important;
  width        : 100% !important;
  margin-top   : 2rem !important;
  justify-content: center;
}

/* Left side - Image container */
.earnings-calculator-section [data-bonus-badge]>div:first-child {
  background     : transparent !important;
  width          : auto !important;
  flex-shrink    : 0 !important;
  display        : flex !important;
  align-items    : center !important;
  justify-content: center !important;
  padding        : 0 !important;
}

/* Right side - Text container */
.earnings-calculator-section [data-bonus-badge]>div:last-child {
  background     : transparent !important;
  width          : auto !important;
  padding        : 0 !important;
  display        : flex !important;
  flex-direction : column !important;
  justify-content: center !important;
}

/* Bag Image */
.earnings-calculator-section [data-bonus-badge] img {
  width     : 7rem !important;
  height    : 7rem !important;
  object-fit: contain !important;
  transform : none !important;
}

/* Bonus Text Styling */
.earnings-calculator-section [data-bonus-badge] .text-thermo-400 {
  color        : #4ade80 !important;
  /* Bright green for "Bonus Unlocked" */
  font-size    : 0.875rem !important;
  font-weight  : 700 !important;
  margin-bottom: 0.25rem !important;
}

.earnings-calculator-section [data-bonus-badge] .leading-tight {
  font-family  : var(--font-heading-family) !important;
  font-size    : 1.25rem !important;
  line-height  : 1.2 !important;
  color        : white !important;
  margin-bottom: 0.25rem !important;
}

.earnings-calculator-section [data-bonus-badge] .text-xs {
  font-size: 0.75rem !important;
  color    : #b5b5b5 !important;
  opacity  : 1 !important;
}

/* Text colors */
.earnings-calculator-section .text-slate-300 {
  color: #b5b5b5 !important;
}

.earnings-calculator-section .text-slate-400 {
  color: #b5b5b5 !important;
}

.earnings-calculator-section .text-slate-600 {
  color: #b5b5b5 !important;
}

/* Product container */
.earnings-calculator-section [data-product-container] {
  position       : relative !important;
  width          : 100% !important;
  max-width      : 28rem !important;
  display        : flex !important;
  align-items    : center !important;
  justify-content: center !important;
}

@media (min-width: 1024px) {
  .earnings-calculator-section [data-product-container] {
    aspect-ratio: 1 / 1 !important;
  }
}

@media (max-width: 1023px) {
  .earnings-calculator-section [data-product-container] {
    aspect-ratio: 4 / 5 !important;
  }
}

@media (max-width: 1023px) {
  .earnings-calculator-section {
    padding-top   : 3rem !important;
    padding-bottom: 3rem !important;
  }
}