/* ================================
   BUNDLE DEAL – "3 FOR €69"
   Same pink/red palette as Valentine's
   but with bd- prefixed classes
   ================================ */

:root {
   --bd-white: #ffffff;
   --bd-black: #0b0b10;

   --bd-ink: #2a0b18;
   --bd-bg1: #120612;
   --bd-bg2: #2a0614;

   --bd-pink: #ff3aa6;
   --bd-hot: #ff1f7a;
   --bd-rose: #ff5aa0;
   --bd-red: #ff2d55;
   --bd-wine: #7a0e2f;

   --bd-glow: rgba(255, 58, 166, .45);
   --bd-glow2: rgba(255, 45, 85, .35);
}

/* ── Section background ── */
.offer-banner--bundle {
   color: var(--bd-white);
   padding: 20px;
   background:
      radial-gradient(circle at 18% 18%, rgba(255, 58, 166, .30), transparent 40%),
      radial-gradient(circle at 82% 28%, rgba(255, 45, 85, .26), transparent 42%),
      radial-gradient(circle at 55% 95%, rgba(255, 90, 160, .40), transparent 50%),
      linear-gradient(180deg, var(--bd-bg1) 0%, var(--bd-bg2) 58%, var(--bd-bg1) 100%);
}

/* ── Marquee ── */
.marquee--bundle {
   background:
      radial-gradient(circle at 15% 50%, rgba(255, 58, 166, .26), transparent 42%),
      radial-gradient(circle at 85% 50%, rgba(255, 45, 85, .22), transparent 45%),
      linear-gradient(90deg, rgba(255, 58, 166, .12), rgba(255, 45, 85, .10)),
      #0a0610;
   color: #ffffff;
   border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.marquee--bundle .track--bundle {
   font-weight: 1000;
   color: #ffffff;
   text-shadow: 0 10px 30px rgba(255, 58, 166, .22);
}

/* ── Card ── */
.offer-card--bundle {
   position: relative;
   max-width: 980px;
   margin: 0 auto;
   text-align: center;
   padding: 24px 14px;
   border-radius: 20px;

   background: rgba(255, 255, 255, .06);
   border: 2px solid rgba(255, 255, 255, .18);

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

   box-shadow:
      0 22px 70px rgba(0, 0, 0, .65),
      0 0 0 1px rgba(255, 255, 255, .07) inset;
}

/* Inner dark layer */
.offer-card--bundle::after {
   content: "";
   position: absolute;
   inset: 8px;
   border-radius: 16px;
   background:
      radial-gradient(circle at 20% 20%, rgba(255, 58, 166, .18), transparent 40%),
      radial-gradient(circle at 80% 35%, rgba(255, 45, 85, .16), transparent 42%),
      rgba(10, 6, 16, .72);
   pointer-events: none;
   z-index: 0;
}

/* Neon frame: pink-red */
.offer-card--bundle::before {
   content: "";
   position: absolute;
   inset: -2px;
   border-radius: 22px;
   padding: 2px;
   background: linear-gradient(90deg, var(--bd-rose), var(--bd-pink), var(--bd-red));
   -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;
   filter: drop-shadow(0 0 18px rgba(255, 58, 166, .25));
}

.offer-card--bundle>* {
   position: relative;
   z-index: 1;
}

/* ── Title ── */
.bd-title {
   margin: 0 0 12px;
   font-size: 34px;
   font-weight: 1000;
   text-transform: uppercase;
   color: var(--bd-white);
   letter-spacing: .02em;

   text-shadow:
      0 2px 0 rgba(0, 0, 0, .75),
      0 14px 34px rgba(255, 58, 166, .18);
}

.bd-title__sub {
   font-weight: 900;
   display: block;
   margin-top: 15px;
   margin-bottom: 20px;
   max-width: max-content;
   margin-left: auto;
   margin-right: auto;
   border-width: 4px;
   border-style: dashed;
   border-color: rgb(235, 64, 174);
   border-image: initial;
   padding: 5px 16px;
   font-size: 26px;
}

/* ── Price highlight ── */
.bd-price {
   font-size: 56px;
   font-weight: 1000;
   display: block;
   margin: 10px 0 6px;
   background: linear-gradient(90deg, var(--bd-rose), var(--bd-pink), var(--bd-red));
   -webkit-background-clip: text;
   -webkit-text-fill-color: #ffffffe6;
   background-clip: text;
   filter: drop-shadow(0 4px 18px rgba(255, 58, 166, .90));
}

/* ── Actions ── */
.bd-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: center;
   margin-bottom: 12px;
   font-size: 14px;
}

.bd-action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 12px 16px;
   border-radius: 14px;
   font-weight: 1000;
   text-transform: uppercase;
   letter-spacing: .06em;
   font-size: 12px;
   border: 2px solid rgba(255, 255, 255, .16);
   box-shadow: 0 12px 26px rgba(0, 0, 0, .42);
   text-decoration: none;
   color: var(--bd-white);
}

.bd-action--primary {
   background: linear-gradient(90deg, var(--bd-pink), var(--bd-red));
   border-color: rgba(255, 58, 166, .55);
   color: var(--bd-white);
   transform: translateY(-1px);
   box-shadow:
      0 18px 36px rgba(0, 0, 0, .55),
      0 0 0 2px rgba(255, 255, 255, .10) inset,
      0 0 26px rgba(255, 58, 166, .22);
   animation: bdPrimaryPulse 2.6s ease-in-out infinite;
   margin-top: 10px;
}

@keyframes bdPrimaryPulse {

   0%,
   100% {
      filter: brightness(1);
   }

   50% {
      filter: brightness(1.12);
   }
}

.bd-action--secondary {
   background: #902cf5;
   border-color: rgba(255, 255, 255, .22);
   color: var(--bd-white);
   z-index: 100;
}

/* ── How-it-works steps ── */
.bd-steps {
   display: flex;
   gap: 12px;
   justify-content: center;
   flex-wrap: wrap;
   margin: 20px 0 8px;
   list-style: none;
   padding: 0;
}

.bd-step {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 14px;
   border-radius: 10px;
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .12);
   font-size: 13px;
   font-weight: 700;
   color: var(--bd-white);
}

.bd-step__num {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--bd-pink), var(--bd-red));
   font-size: 13px;
   font-weight: 900;
   color: var(--bd-white);
   flex-shrink: 0;
}

/* ── Fine print ── */
.bd-note {
   margin: 12px 0 0;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .55);
}

/* ── Stock urgency (reuse structure, pink/red colors) ── */
.stock-urgency--bundle .stock-urgency__label {
   display: flex;
   align-items: baseline;
   gap: 10px;
   justify-content: center;
   font-size: 12px;
   font-weight: 800;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: #ffffff;
   margin-bottom: 6px;
}

.stock-urgency--bundle .stock-urgency__dot {
   background: var(--bd-red);
   box-shadow: 0 0 14px rgba(255, 45, 85, 0.75);
}

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


/* ================================
   STICKY BOTTOM BAR
   ================================ */
.bs-bar {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 9999;
   padding: 12px 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 14px;

   background:
      linear-gradient(90deg, rgba(255, 58, 166, .12), rgba(255, 45, 85, .10)),
      rgba(10, 6, 16, .96);
   border-top: 2px solid rgba(255, 58, 166, .35);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);

   transition: background .3s ease;
}

.bs-inner {
   display: flex;
   align-items: center;
   gap: 14px;
}

/* Progress dots */
.bs-dots {
   display: flex;
   gap: 6px;
}

.bs-dot {
   width: 14px;
   height: 14px;
   border-radius: 50%;
   border: 2px solid rgba(255, 255, 255, .25);
   background: transparent;
   transition: all .3s ease;
}

.bs-dot--filled {
   background: linear-gradient(135deg, var(--bd-pink), var(--bd-red));
   border-color: var(--bd-pink);
   box-shadow: 0 0 10px rgba(255, 58, 166, .50);
}

/* Text */
.bs-text {
   font-size: 14px;
   font-weight: 700;
   color: var(--bd-white);
}

.bs-text strong {
   color: var(--bd-rose);
}

/* Dismiss link */
.bs-dismiss {
   margin-left: auto;
   font-size: 11px;
   font-weight: 700;
   color: rgba(255, 255, 255, .95);
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: .04em;
   text-align: center;
   padding: 6px 10px;
   border-radius: 8px;
   border: 1px solid rgba(255, 255, 255, .12);
   transition: color .2s, border-color .2s, background .2s;
}

.bs-dismiss:hover {
   color: rgba(255, 255, 255, .80);
   border-color: rgba(255, 255, 255, .30);
   background: rgba(255, 255, 255, .06);
}

.bs-dismiss--loading {
   pointer-events: none;
   opacity: .5;
}

/* Unlocked state */
.bs-bar--unlocked {
   border-top-color: rgba(76, 217, 100, .50);
}

.bs-bar--unlocked .bs-text strong {
   color: #4cd964;
}

.bs-bar--unlocked .bs-dot--filled {
   background: linear-gradient(135deg, #4cd964, #30d158);
   border-color: #4cd964;
   box-shadow: 0 0 10px rgba(76, 217, 100, .50);
}

.li-text-bo span {
   text-decoration: underline;
}

/*Menu*/
.bundle-offer-menu a {
   color: #FFF;
}

.bundle-offer-menu {
   background: #ff3690;
   padding: 3px 12px;
   color: #FFF;
   font-weight: 700 !important;
   border-radius: 6px;
   margin-bottom: 3px;
}

.bundle-offer-menu.three {
   background: #5c1641;
}

.bundle-offer-menu:hover {
   background: black;
}

/* ── Mobile ── */
@media (max-width: 768px) {
   .bd-title {
      font-size: 26px;
   }

   .bd-price {
      font-size: 42px;
   }

   .bd-title__sub {
      font-size: 20px;
   }

   .bd-action {
      font-size: 11px;
      padding: 10px 12px;
   }

   .bd-steps {
      gap: 8px;
   }

   .bd-step {
      font-size: 11px;
      padding: 6px 10px;
   }

   .bs-bar {
      padding: 10px 12px;
      gap: 8px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
   }

   .bs-inner {
      gap: 8px;
   }

   .bs-text {
      font-size: 12px;
   }

   .bs-dot {
      width: 12px;
      height: 12px;
   }

   .bs-dismiss {
      font-size: 10px;
      padding: 4px 8px;
      color: white;
      margin-right: auto;
   }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
   .bd-action--primary {
      animation: none !important;
   }

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