:root {
      --verde-claro: #4ae22c;
      --verde-escuro: #1b5e20;
      --verde-hover: #57ff38;
      --cor-destaque-banner: #66ff8c;


      /* HERO vars (unificadas) */
      --hero-green: var(--verde-claro);
      --hero-green-2: var(--cor-destaque-banner);
      --hero-green-dark: #133315;
      --hero-text: #ffffff;
      --hero-muted: rgba(255, 255, 255, .75);
      --hero-card: rgba(255, 255, 255, .03);
      --hero-border: rgba(74, 226, 44, .25);
      --hero-shadow: rgba(74, 226, 44, .22);
  }


  /* ---------------------------
   PRODUTO: Card com borda RGB
---------------------------- */
  .product_card {
      position: relative;
      background: rgba(0, 0, 0, .5) !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      border-radius: 16px !important;
      color: #fff !important;
      transition: transform .25s ease !important;
      cursor: pointer !important;
      overflow: hidden;
      border: 1px solid transparent;
  }


  .product_card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 16px;
      padding: 2px;
      background: linear-gradient(45deg, #f00, #ff7f00, #ff0, #0f0, #0ff, #00f, #8a2be2, #f0f, #f00);
      background-size: 400% 400%;
      animation: rainbowBorder 8s ease infinite;
      z-index: 0;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
  }


  .product_card>* {
      position: relative;
      z-index: 1;
  }


  @keyframes rainbowBorder {
      0% {
          background-position: 0% 50%
      }


      50% {
          background-position: 100% 50%
      }


      100% {
          background-position: 0% 50%
      }
  }


  .product_card:hover {
      transform: scale(1.02) !important;
  }


  /* botão do card (se existir) */
  .product_card button {
      background: rgba(5, 250, 58, .78) !important;
      border: 1px solid rgba(15, 15, 15, .5) !important;
  }


  /* ---------------------------
   FUNDO: grade neon (FIXA + mais efeito)
   - remove animação infinita
   - adiciona glow + blur leve
---------------------------- */
  body::before {
      content: "";
      position: fixed;
      inset: 0;
      background:
          repeating-linear-gradient(0deg,
              rgba(74, 226, 44, .16) 0px,
              rgba(74, 226, 44, .16) 1px,
              transparent 1px,
              transparent 40px),
          repeating-linear-gradient(90deg,
              rgba(74, 226, 44, .16) 0px,
              rgba(74, 226, 44, .16) 1px,
              transparent 1px,
              transparent 40px);
      z-index: -2;
      pointer-events: none;


      /* ✅ fixa */
      animation: none !important;


      /* ✅ mais efeito */
      filter: blur(0.6px) drop-shadow(0 0 14px rgba(74, 226, 44, .22));
      opacity: .95;
  }


  /* Glow extra (camada suave por cima da grade) */
  body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;


      background: radial-gradient(circle at 50% 30%,
              rgba(74, 226, 44, .18) 0%,
              rgba(74, 226, 44, 0) 60%);
      filter: blur(18px);
      opacity: .9;
  }


  /* ==========================================================
   HERO PREMIUM - TEMA VERDE (SejaPro / Ereemby)
   ========================================================== */
  .boaplay-hero {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 72px 28px 40px 28px;
      background: transparent;
      overflow: hidden;
      margin: 0 0 50px 0;
      min-height: 520px;
      width: 100%;
      max-width: 100vw;
      box-sizing: border-box;
      z-index: 1;
  }


  /* Glow central */
  .boaplay-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 40%, rgba(74, 226, 44, .18) 0%, rgba(74, 226, 44, 0) 55%);
      filter: blur(50px);
      opacity: .9;
      pointer-events: none;
  }


  /* Partículas */
  .boaplay-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
          radial-gradient(circle, rgba(74, 226, 44, .16) 1px, transparent 1px),
          radial-gradient(circle, rgba(74, 226, 44, .10) 1px, transparent 1px);
      background-size: 54px 54px, 86px 86px;
      background-position: 0 0, 42px 42px;
      animation: particlesFloat 20s linear infinite;
      pointer-events: none;
      opacity: .9;
  }


  @keyframes particlesFloat {
      from {
          background-position: 0 0, 42px 42px;
      }


      to {
          background-position: 54px 54px, 96px 96px;
      }
  }


  .boaplay-hero-content {
      position: relative;
      z-index: 2;
      text-align: center;
      max-width: 980px;
  }


  .quality-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 22px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--hero-green);
      border: 2px solid var(--hero-green);
      background: linear-gradient(135deg, rgba(74, 226, 44, .12), rgba(74, 226, 44, .03));
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
      margin-bottom: 22px;
  }


  .quality-badge::before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--hero-green);
      box-shadow: 0 0 18px rgba(74, 226, 44, .65);
  }


  .boaplay-hero-content h1 {
      font-size: 4.2rem;
      line-height: 1.05;
      font-weight: 900;
      letter-spacing: -2px;
      margin: 0 0 20px 0;
      color: var(--hero-text) !important;
      text-shadow: 0 10px 60px rgba(0, 0, 0, .45);
  }


  .boaplay-hero-content h1 .highlight {
      background: linear-gradient(135deg, var(--hero-green) 0%, var(--hero-green-2) 55%, var(--hero-green) 100%);
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: inline-block;
      filter: drop-shadow(0 0 26px rgba(74, 226, 44, .35));
      animation: gradientShift 3s ease-in-out infinite;
  }


  @keyframes gradientShift {


      0%,
      100% {
          background-position: 0% center;
      }


      50% {
          background-position: 100% center;
      }
  }


  .boaplay-hero-content p {
      font-size: 1.08rem;
      line-height: 1.75;
      margin: 0 auto 28px auto;
      max-width: 760px;
      color: var(--hero-muted) !important;
  }


  .boaplay-hero-content p .store-name {
      color: var(--hero-green) !important;
      font-weight: 800;
      position: relative;
  }


  .boaplay-hero-content p .store-name::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -2px;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--hero-green), transparent);
      opacity: .9;
  }


  /* Badges */
  .info-badges {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 14px;
      margin: 0 0 26px 0;
  }


  .info-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      border-radius: 14px;
      border: 1px solid var(--hero-border);
      background: var(--hero-card);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: transform .25s ease, border-color .25s ease, background .25s ease;
  }


  .info-badge:hover {
      transform: translateY(-3px);
      border-color: rgba(74, 226, 44, .55);
      background: rgba(74, 226, 44, .08);
      box-shadow: 0 14px 40px rgba(74, 226, 44, .15);
  }


  .info-badge svg {
      width: 20px;
      height: 20px;
      fill: var(--hero-green);
      flex: 0 0 auto;
  }


  .info-badge span {
      color: var(--hero-text) !important;
      font-size: .92rem;
      font-weight: 700;
      white-space: nowrap;
  }


  /* Stats */
  .stats-container {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 16px;
      margin: 0 0 30px 0;
  }


  .stat-item {
      min-width: 170px;
      padding: 16px 18px;
      border-radius: 16px;
      border: 1px solid rgba(74, 226, 44, .16);
      background: rgba(255, 255, 255, .02);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: transform .25s ease, border-color .25s ease, background .25s ease;
  }


  .stat-item:hover {
      transform: translateY(-4px);
      border-color: rgba(74, 226, 44, .38);
      background: rgba(74, 226, 44, .06);
      box-shadow: 0 16px 40px rgba(74, 226, 44, .14);
  }


  .stat-number {
      display: block;
      font-size: 2.2rem;
      font-weight: 900;
      margin-bottom: 6px;
      background: linear-gradient(135deg, var(--hero-green), var(--hero-green-2));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
  }


  .stat-label {
      display: block;
      font-size: .9rem;
      color: rgba(255, 255, 255, .65) !important;
      font-weight: 600;
  }


  /* Botões */
  .boaplay-buttons {
      display: flex;
      gap: 12px;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 6px;
  }


  .boaplay-buttons .btn {
      position: relative;
      overflow: hidden;
      border-radius: 16px;
      padding: 16px 26px;
      min-width: 210px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 1.05rem;
      font-weight: 800;
      cursor: pointer;
      border: 1px solid transparent;
      text-decoration: none;
      user-select: none;
      transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  }


  .boaplay-buttons .btn>* {
      position: relative;
      z-index: 2;
  }


  .boaplay-buttons .btn svg {
      width: 20px;
      height: 20px;
  }


  .btn-explorar {
      background: linear-gradient(135deg, var(--hero-green), var(--hero-green-2));
      color: #0b1a0f !important;
      box-shadow: 0 8px 26px var(--hero-shadow);
  }


  .btn-explorar:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 36px rgba(74, 226, 44, .25);
  }


  .btn-grupos {
      background: rgba(19, 51, 21, .82);
      color: var(--hero-text) !important;
      border-color: rgba(102, 255, 140, .28);
      box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  }


  .btn-grupos:hover {
      transform: translateY(-3px);
      border-color: rgba(102, 255, 140, .55);
      background: rgba(19, 51, 21, 1);
      box-shadow: 0 14px 36px rgba(74, 226, 44, .18);
  }


  /* Ripple */
  .boaplay-hero .ripple {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      background: rgba(255, 255, 255, .35);
      transform: scale(0);
      animation: rippleEffect .6s ease-out;
      z-index: 1;
  }


  @keyframes rippleEffect {
      from {
          transform: scale(0);
          opacity: 1;
      }


      to {
          transform: scale(2);
          opacity: 0;
      }
  }


  /* ---------------------------
   OVERLAY
---------------------------- */
  #custom-overlay-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, .4);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      text-align: center;
      padding: 2rem;
      opacity: 0;
      animation: overlayEntrance .5s ease forwards;
      box-sizing: border-box;
      overflow: auto;
  }


  @supports (height: 100dvh) {
      #custom-overlay-wrapper {
          height: 100dvh;
      }
  }


  .custom-overlay-inner {
      width: 100%;
      max-width: 720px;
      margin: auto;
  }


  @keyframes overlayEntrance {
      from {
          opacity: 0;
          transform: scale(.96)
      }


      to {
          opacity: 1;
          transform: scale(1)
      }
  }


  /* ---------------------------
   RESPONSIVO
---------------------------- */
  @media (max-width: 980px) {
      .boaplay-hero {
          min-height: 480px;
      }


      .boaplay-hero-content h1 {
          font-size: 3rem;
          letter-spacing: -1px;
      }


      .boaplay-hero-content p {
          font-size: 1rem;
      }
  }


  /* Base mobile: botões em coluna */
  @media (max-width: 900px) {
      .boaplay-buttons {
          flex-direction: column;
          gap: 10px;
      }


      .boaplay-buttons .btn {
          width: calc(100% - 28px);
          min-width: unset;
          max-width: 560px;
          margin: 0 auto;
      }
  }


  /* performance: blur menor no mobile */
  @media (max-width: 768px) {
      .boaplay-hero {
          flex-direction: column;
          text-align: center;
          gap: 20px;
          padding: 18px 14px;
          box-sizing: border-box;
      }


      .boaplay-hero-left,
      .boaplay-hero-image {
          width: 100%;
          max-width: 520px;
          margin: 0 auto;
          padding: 0;
          box-sizing: border-box;
      }


      .boaplay-buttons button {
          width: 100%;
          max-width: 520px;
          font-size: 1.08rem;
          padding: 16px 22px;
      }


      .boaplay-hero-image img#boaplay-banner-img {
          display: block;
          width: 100%;
          margin: 0 auto;
      }


      .product_card,
      #custom-overlay-wrapper {
          backdrop-filter: blur(8px) !important;
          -webkit-backdrop-filter: blur(8px) !important;
      }


      /* background mais leve no mobile */
      body::before {
          filter: blur(0.4px) drop-shadow(0 0 10px rgba(74, 226, 44, .18));
          opacity: .9;
      }


      body::after {
          filter: blur(14px);
          opacity: .75;
      }
  }


  /* ✅ FIX Mobile: layout premium-green + mostrar badges/stats */
  @media (max-width: 900px) {


      .boaplay-hero,
      .boaplay-hero * {
          box-sizing: border-box !important;
      }


      .boaplay-hero[data-hero="premium-green"] {
          width: 100% !important;
          max-width: 100% !important;
          overflow-x: hidden !important;
          padding-left: 14px !important;
          padding-right: 14px !important;
      }


      .boaplay-hero[data-hero="premium-green"] .boaplay-hero-content {
          width: 100% !important;
          max-width: 560px !important;
          margin-left: auto !important;
          margin-right: auto !important;
          padding-left: 0 !important;
          padding-right: 0 !important;
      }


      .boaplay-hero[data-hero="premium-green"] .boaplay-buttons {
          width: 100%;
          justify-content: center;
          align-items: center;
      }


      .boaplay-hero[data-hero="premium-green"] .boaplay-buttons .btn {
          display: flex !important;
          width: calc(100% - 28px) !important;
          max-width: 560px !important;
          margin: 0 auto !important;
          box-sizing: border-box !important;
      }


      .boaplay-hero[data-hero="premium-green"] #grupos-hero.btn-grupos {
          left: auto !important;
          right: auto !important;
          text-align: center !important;
      }


      /* ✅ Badges (coluna, menor) */
      .boaplay-hero[data-hero="premium-green"] .info-badges {
          display: flex !important;
          flex-direction: column !important;
          gap: 10px !important;
          width: 100% !important;
          max-width: 520px !important;
          margin: 14px auto 18px auto !important;
          justify-content: center !important;
      }


      .boaplay-hero[data-hero="premium-green"] .info-badge {
          width: 100% !important;
          padding: 10px 14px !important;
          border-radius: 12px !important;
          justify-content: center !important;
          text-align: center !important;
          gap: 8px !important;
          backdrop-filter: blur(6px) !important;
          -webkit-backdrop-filter: blur(6px) !important;
      }


      .boaplay-hero[data-hero="premium-green"] .info-badge svg {
          width: 17px !important;
          height: 17px !important;
      }


      .boaplay-hero[data-hero="premium-green"] .info-badge span {
          font-size: 0.85rem !important;
          font-weight: 700 !important;
          white-space: normal !important;
      }


      /* ✅ Stats (grid 2 colunas) */
      .boaplay-hero[data-hero="premium-green"] .stats-container {
          display: grid !important;
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 10px !important;
          margin: 0 0 18px 0 !important;
          width: 100% !important;
          max-width: 560px !important;
          margin-left: auto !important;
          margin-right: auto !important;
      }


      .boaplay-hero[data-hero="premium-green"] .stat-item {
          min-width: unset !important;
          padding: 14px 12px !important;
          border-radius: 14px !important;
      }


      .boaplay-hero[data-hero="premium-green"] .stat-number {
          font-size: 1.8rem !important;
          margin-bottom: 4px !important;
      }


      .boaplay-hero[data-hero="premium-green"] .stat-label {
          font-size: 0.85rem !important;
      }
  }


  /* ✅ telas bem pequenas: stats em 1 coluna */
  @media (max-width: 420px) {
      .boaplay-hero[data-hero="premium-green"] .stats-container {
          grid-template-columns: 1fr !important;
      }
  }


  /* Acessibilidade: reduzir movimentos */
  @media (prefers-reduced-motion: reduce) {
      .boaplay-hero::after {
          animation: none !important;
      }


      .product_card::before {
          animation: none !important;
      }


      * {
          transition: none !important;
          animation: none !important;
      }
  }


  /* FIX Pix no card: usa imagem real do Pix */
  .product_card .pix-icon {
      width: 18px;
      height: 18px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 8px;
      object-fit: contain;
  }


  /* =========================
   HOTFIX: transparência / overlay do modal
   - garante que overlays/modais fiquem acima do background
========================= */


  /* background layers sempre atrás de tudo */
  body::before,
  body::after {
      z-index: -999 !important;
  }


  /* reforço do backdrop do overlay (quando você abre um produto) */
  #custom-overlay-wrapper {
      background: rgba(0, 0, 0, .62) !important;
      /* mais escuro */
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
  }


  /* Se o modal/overlay da plataforma usar outro backdrop, isso ajuda a não "lavar" */
  dialog::backdrop,
  .modal-backdrop,
  [class*="backdrop"],
  [class*="overlay"] {
      background: rgba(0, 0, 0, .62) !important;
  }


  /* =========================
   PERFORMANCE: HERO leve no mobile
========================= */
  @media (max-width: 900px) {


      /* remove partículas (muito caro em iPhone antigo) */
      .boaplay-hero::after {
          content: none !important;
          animation: none !important;
          background: none !important;
      }


      /* reduz glow pesado */
      .boaplay-hero::before {
          filter: blur(18px) !important;
          opacity: .7 !important;
      }


      /* desliga animação do gradiente no texto (GPU/paint) */
      .boaplay-hero-content h1 .highlight {
          animation: none !important;
          filter: none !important;
          /* drop-shadow também pesa */
      }


      /* reduz blur em cards do hero */
      .info-badge,
      .stat-item,
      .quality-badge {
          backdrop-filter: blur(6px) !important;
          -webkit-backdrop-filter: blur(6px) !important;
      }
  }


  /* EXTRA: aparelhos muito fracos (ou quando o browser indica) */
  @media (prefers-reduced-motion: reduce) {
      .boaplay-hero::after {
          content: none !important;
      }


      .boaplay-hero-content h1 .highlight {
          animation: none !important;
      }
  }


  /* =========================
   BACKGROUND: menos "lavado"
========================= */
  body::before {
      opacity: .72 !important;
      filter: blur(0.35px) drop-shadow(0 0 10px rgba(74, 226, 44, .16)) !important;
  }


  body::after {
      opacity: .55 !important;
      filter: blur(14px) !important;
  }


  .product_card .pix-icon {
      width: 18px;
      height: 18px;
      vertical-align: middle;
      margin-right: 8px;
      object-fit: contain;
  }


  /* Força o nome da marca no header ficar verde */
  #sp-brand .sp-brand__name {
      color: var(--verde-claro) !important;
  }


  @media (max-width: 768px) {
      .boaplay-hero[data-hero="premium-green"] .info-badges {
          display: flex !important;
          flex-direction: row !important;
          flex-wrap: wrap !important;
          justify-content: center !important;
          align-items: center !important;
          width: 100% !important;
          max-width: 320px !important;
          margin: 12px auto 16px !important;
          gap: 8px !important;
      }


      .boaplay-hero[data-hero="premium-green"] .info-badge {
          width: auto !important;
          max-width: max-content !important;
          min-width: 0 !important;
          padding: 6px 10px !important;
          border-radius: 999px !important;
          gap: 6px !important;
          justify-content: center !important;
          text-align: center !important;
          flex: 0 0 auto !important;
      }


      .boaplay-hero[data-hero="premium-green"] .info-badge span {
          font-size: 0.76rem !important;
          font-weight: 700 !important;
          white-space: nowrap !important;
          line-height: 1 !important;
      }


      .boaplay-hero[data-hero="premium-green"] .info-badge svg {
          width: 13px !important;
          height: 13px !important;
          flex: 0 0 auto !important;
      }
  }