/* ================================
   NEW YEAR (VIVID / HIGH CONTRAST)
   ================================ */

:root {
   --ny-bg: #060818;
   --ny-white: #ffffff;
   --ny-black: #040614;

   --ny-blue: #3a7cff;
   --ny-cyan: #2de0ff;
   --ny-pink: #ff3aa6;
   --ny-gold: #f2b334;
}

/* Banner can stay as you have it, but ensure text is not muted */
.offer-banner--newyear {
   color: var(--ny-white);
   padding: 20px;
}

/* Card: solid, not glass (this is the big fix) */
.offer-card--newyear {
   position: relative;
   max-width: 980px;
   margin: 0 auto;
   text-align: center;
   padding: 22px 14px;
   border-radius: 18px;

   background: rgba(6, 8, 24, .92);
   border: 2px solid rgba(255, 255, 255, .22);

   box-shadow:
      0 18px 60px rgba(0, 0, 0, .65),
      0 0 0 1px rgba(255, 255, 255, .08) inset;
}

/* Strong neon frame */
.offer-card--newyear::before {
   content: "";
   position: absolute;
   inset: -2px;
   border-radius: 20px;
   padding: 2px;
   background: linear-gradient(90deg, var(--ny-cyan), var(--ny-blue), var(--ny-pink));
   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   opacity: 1;
   pointer-events: none;
}

/* Topline */
.ny-topline {
   display: flex;
   justify-content: center;
   gap: 10px;
   margin-bottom: 10px;
}

.ny-pill {
   padding: 7px 12px;
   border-radius: 999px;
   background: linear-gradient(90deg, rgba(45, 224, 255, .30), rgba(58, 124, 255, .18));
   border: 2px solid rgba(45, 224, 255, .35);

   color: var(--ny-white);
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: .14em;
   font-size: 11px;
}

.ny-year {
   padding: 7px 12px;
   border-radius: 999px;
   background: linear-gradient(90deg, var(--ny-gold), var(--ny-cyan));
   color: var(--ny-black);
   font-weight: 900;
   letter-spacing: .18em;
   font-size: 11px;
   line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Title: big + clean (no transparent colors) */
.ny-title {
   margin: 0 0 10px;
   font-size: 34px;
   font-weight: 1000;
   text-transform: uppercase;
   color: var(--ny-white);
   letter-spacing: .02em;

   text-shadow:
      0 2px 0 rgba(0, 0, 0, .75),
      0 10px 26px rgba(0, 0, 0, .75);
}

.ny-title span {
   border: 4px dashed #eb40ae;
   font-weight: 900;
   display: block;
   margin-top: 15px;
   margin-bottom: 20px;
   max-width: max-content;
   margin-left: auto;
   margin-right: auto;
   padding: 5px 11px;
}

/* Discount badge: the main “CTA” visually */
.ny-hero-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 12px;
   padding: 12px 16px;
   border-radius: 14px;

   background: linear-gradient(90deg, var(--ny-cyan), var(--ny-blue));
   color: var(--ny-black);

   font-weight: 1000;
   font-size: 20px;
   letter-spacing: .02em;

   box-shadow:
      0 14px 30px rgba(0, 0, 0, .55),
      0 0 0 2px rgba(255, 255, 255, .12) inset;
}

/* Two short messages, big pills, easy scanning */
.ny-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: center;
   margin-bottom: 10px;
}

.ny-actions.tiered {
   flex-direction: column;
   max-width: 500px;
   margin-left: auto;
   margin-right: auto;
}

.ny-actions.tiered .ny-action--primary {
   font-size: 20px;
}

.ny-action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 10px 14px;
   border-radius: 10px;

   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: .06em;
   font-size: 12px;

   border: 2px solid rgba(255, 255, 255, .18);
   box-shadow: 0 10px 22px rgba(0, 0, 0, .40);
}

.ny-action--primary {
   background: linear-gradient(90deg, var(--ny-pink), rgba(255, 58, 166, .75));
   color: var(--ny-white);
   border-color: rgba(255, 58, 166, .55);
}

.ny-action--secondary {
   background: rgba(255, 255, 255, .10);
   color: var(--ny-white);
   border-color: rgba(255, 255, 255, .20);
}

/* Note: still readable (no opacity) */
.ny-note {
   display: inline-block;
   margin-top: 4px;
   padding: 6px 10px;
   border-radius: 999px;
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(255, 255, 255, .18);

   color: var(--ny-white);
   font-size: 12px;
   font-weight: 700;
}

/* Stock urgency: brighter */
.stock-urgency--newyear {
   margin-top: 12px;
   max-width: 520px;
   margin-left: auto;
   margin-right: auto;
}

.stock-urgency--newyear .stock-urgency__label {
   display: flex;
   align-items: baseline;
   gap: 10px;

   justify-content: center;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--ny-white);
   margin-bottom: 6px;
}

.stock-urgency--newyear .stock-urgency__dot {
   background: red;
   box-shadow: 0 0 14px rgba(255, 45, 104, 0.7);
}

.stock-urgency--newyear .stock-urgency__bar::before {
   height: 8px;
   background: rgba(255, 255, 255, .18);
}



.stock-urgency--newyear .stock-urgency__bar-fill--low {
   height: 8px;
   margin-top: 10px;
   width: 26%;
   border-radius: 999px;
   background: linear-gradient(90deg, #cc1f1f, #a28f9f);
   box-shadow: 0 0 18px rgba(255, 58, 166, .45);
}

/* Mobile: compact, still loud */
@media (max-width: 768px) {
   .ny-title {
      font-size: 26px;
   }

   .ny-hero-badge {
      font-size: 18px;
      padding: 10px 14px;
   }

   .ny-action {
      font-size: 11px;
      padding: 9px 12px;
   }
}


/* Marquee: keep original glow background */
.marquee--newyear {
   background:
      radial-gradient(circle at 20% 50%, rgba(45, 224, 255, .18), transparent 40%),
      radial-gradient(circle at 80% 50%, rgba(255, 58, 166, .16), transparent 42%),
      var(--ny-bg);
   color: #ffffff;
   border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.marquee--newyear .track--newyear {
   font-weight: 900;
   color: #ffffff;
}

/* Section: keep original fireworks/stars background */
.offer-banner--newyear {
   background:
      radial-gradient(circle at 10% 20%, rgba(58, 124, 255, .22), transparent 35%),
      radial-gradient(circle at 90% 30%, rgba(255, 58, 166, .18), transparent 38%),
      radial-gradient(circle at 50% 95%, rgba(45, 224, 255, .20), transparent 45%),
      radial-gradient(circle at 22% 65%, rgba(242, 179, 52, .14), transparent 40%),
      linear-gradient(180deg, #050615 0%, #070a18 55%, #050615 100%);
}

/* ======================================================
   Vivid card BUT lets the background show through
   ====================================================== */

.offer-card--newyear {
   position: relative;
   max-width: 980px;
   margin: 0 auto;
   text-align: center;
   padding: 22px 14px;
   border-radius: 18px;

   /* allow background to be seen */
   background: rgba(255, 255, 255, .08);
   border: 2px solid rgba(255, 255, 255, .22);

   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);

   box-shadow:
      0 18px 60px rgba(0, 0, 0, .60),
      0 0 0 1px rgba(255, 255, 255, .08) inset;
}

/* Inner dark layer for readability (key trick) */
.offer-card--newyear::after {
   content: "";
   position: absolute;
   inset: 8px;
   border-radius: 14px;
   background: rgba(6, 8, 24, .68);
   pointer-events: none;
   z-index: 0;
}

/* Neon frame */
.offer-card--newyear::before {
   content: "";
   position: absolute;
   inset: -2px;
   border-radius: 20px;
   padding: 2px;
   background: linear-gradient(90deg, var(--ny-cyan), var(--ny-blue), var(--ny-pink));
   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   opacity: 1;
   pointer-events: none;
   z-index: 2;
}

/* Make all content sit above the inner layer */
.offer-card--newyear>* {
   position: relative;
   z-index: 1;
}

/* Keep everything fully vivid (no muted/opacity text) */
.ny-title,
.ny-pill,
.ny-note,
.stock-urgency__label,
.ny-action,
.ny-hero-badge {
   color: #ffffff;
}

/* Badge and actions remain vivid */
.ny-hero-badge {
   background: linear-gradient(90deg, var(--ny-cyan), var(--ny-blue));
   color: #040614;
}

.ny-action--primary {
   background: linear-gradient(90deg, var(--ny-pink), rgba(255, 58, 166, .80));
   border-color: rgba(255, 58, 166, .55);
}

.ny-action--secondary {
   background: rgba(255, 255, 255, .12);
   border-color: rgba(255, 255, 255, .22);
}

/* Note readable */
.ny-note {
   background: rgba(255, 255, 255, .10);
   border: 1px solid rgba(255, 255, 255, .18);
}

/* Stock bar vivid */
.stock-urgency--newyear .stock-urgency__bar::before {
   background: rgba(255, 255, 255, .18);
}

.stock-urgency--newyear .stock-urgency__bar-fill--low {
   background: linear-gradient(90deg, #cc1f1f, #dc7dcd);
}

/* Stock urgency animations (dot pulse + bar “selling” loop) */
.stock-urgency__dot {
   width: 10px;
   min-width: 10px;
   height: 10px;
   min-height: 10px;
   display: block;
   border-radius: 50%;
   animation: dtStockDotPulse 1.15s ease-in-out infinite;
   transform-origin: center;
}

@keyframes dtStockDotPulse {
   0% {
      transform: scale(1);
      box-shadow: 0 0 10px rgba(45, 224, 255, 0.55);
      opacity: 0.9;
   }

   50% {
      transform: scale(1.35);
      box-shadow: 0 0 22px rgba(45, 224, 255, 0.95);
      opacity: 1;
   }

   100% {
      transform: scale(1);
      box-shadow: 0 0 10px rgba(45, 224, 255, 0.55);
      opacity: 0.9;
   }
}

/* Animate the fill “down then back”, without changing layout width */
.stock-urgency__bar-fill {
   transform-origin: left center;
   will-change: transform, filter;
}

/* Apply the animation to your current fill (low) */
.stock-urgency__bar-fill--low {
   animation: dtStockBarSell 10s ease-in-out infinite;
}

/* Starts at “normal”, dips (stock sold), then returns */
@keyframes dtStockBarSell {
   0% {
      transform: scaleX(1);
      filter: brightness(1);
   }

   35% {
      transform: scaleX(0.82);
      /* 26% becomes ~18.7% visually */
      filter: brightness(1.08);
   }

   55% {
      transform: scaleX(0.78);
      /* a slightly lower dip */
      filter: brightness(1.15);
   }

   100% {
      transform: scaleX(1);
      filter: brightness(1);
   }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

   .stock-urgency__dot,
   .stock-urgency__bar-fill--low {
      animation: none !important;
   }
}