.wg-newsletter-offer {
  position: relative;
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  align-items: stretch;
  gap: .9rem;
}

.wg-newsletter-title-wrapper {
  display: flex;
  min-width: 0;
  height: 9rem;
  flex-direction: column;
  padding: 1.35rem 1.65rem;
  box-sizing: border-box;
}

#footer .ps-emailsubscription .wg-newsletter-offer .h3.wg,
.ps-emailsubscription .wg-newsletter-offer .h3.wg {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.wg-newsletter-ticket {
    position: relative;
    z-index: 3;
    bottom: 0px;
    display: flex;
    min-width: 175px;
    max-height: 9rem;
    width: 100%;
    min-height: 0;
    /* height: fit-content; */
    aspect-ratio: 1 / 1;
    align-items: center;
    overflow: hidden;
    color: #111;
    background: rgb(255 255 255);
    border-radius: 0;
    box-shadow: 0px 5px 0 #14c7ba;
    /* transform: rotate(-1.5deg); */
    transform-origin: right center;
    cursor: grab;
    user-select: none;
    touch-action: none;
    border-radius: 53px 1px 1px 48px;
    will-change: transform, opacity;
}

.wg-newsletter-ticket:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.wg-newsletter-ticket.is-dragging {
  cursor: grabbing;
}

.wg-newsletter-ticket__body {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem 1.05rem;
  text-align: right;
}

.wg-newsletter-ticket__eyebrow,
.wg-newsletter-ticket__scope {
  color: #111;
  font-size: .65rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wg-newsletter-ticket__discount {
  margin: 4px auto;
  color: #e53935;
  font-size: 2.8rem;
  line-height: .95;

  letter-spacing: -.08em;
}

.wg-newsletter-ticket__perforation {
  position: absolute;
  top: .65rem;
  right: .5rem;
  bottom: .65rem;
  border-left: 2px dashed rgba(17, 17, 17, .32);
}

.wg-newsletter-ticket__pin {
  position: absolute;
  top: .2rem;
  right: .2rem;
  z-index: 2;
  width: 1rem;
  height: 1rem;
  background: #1680f9;
  border-radius: 50%;
  box-shadow: 0 .12rem .25rem rgba(0, 0, 0, .18);
}

.wg-newsletter-ticket.is-redeemed {
  transform-origin: calc(100% - .3rem) .3rem;
  animation: wg-newsletter-ticket-tear 1.45s cubic-bezier(.16, .74, .2, 1) .04s forwards;
}

.wg-newsletter-ticket.is-redeemed .wg-newsletter-ticket__pin {
  animation: wg-newsletter-pin-pop .3s cubic-bezier(.34, 1.4, .64, 1) .22s forwards;
}

.wg-newsletter-success-copy {
  display: block;
  margin-top: .25rem;
  font-weight: 600;
}

.wg-newsletter-confetti {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 22%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.wg-newsletter-confetti i {
  position: absolute;
  width: .55rem;
  height: .24rem;
  background: var(--wg-confetti-color);
  opacity: 0;
  animation: wg-newsletter-confetti-burst var(--wg-confetti-duration) cubic-bezier(.15, .7, .25, 1) var(--wg-confetti-delay) forwards;
}

@keyframes wg-newsletter-ticket-tear {
  /* Faza 1 (0–23%): opór — papier wciąż trzyma się szpilki, drobne szarpnięcia w obie strony. */
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(-1.5deg) scale(1); }
  7% { transform: translate3d(.06rem, -.03rem, 0) rotate(.4deg) scale(1.008); }
  15% { transform: translate3d(-.12rem, .04rem, 0) rotate(-3.8deg) scale(1.008); }
  23% { transform: translate3d(.04rem, 0, 0) rotate(-1.1deg) scale(1); }

  /* Faza 2 (30%): puszczenie — nagłe zerwanie, krótkie "wybrzuszenie" papieru. */
  30% {
    opacity: 1;
    transform: translate3d(-.42rem, .16rem, 0) rotate(-6.5deg) skewY(-1deg) scale(1.045);
  }

  /* Faza 3 (44–62%): lot — przyspieszenie, obrót i lekkie trzepotanie kartonika w powietrzu. */
  44% {
    opacity: 1;
    transform: translate3d(-2.6rem, 1.7rem, 0) rotate(-17deg) skewY(2deg) scale(1.005);
  }
  62% {
    opacity: 1;
    transform: translate3d(-6.4rem, 4.9rem, 0) rotate(-31deg) skewY(-1.8deg) scale(1);
  }

  /* Faza 4 (82–100%): zanikanie przy wylocie z pola widzenia. */
  82% {
    opacity: .55;
    transform: translate3d(-10.3rem, 7.9rem, 0) rotate(-43deg) skewY(1.2deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(-14rem, 11rem, 0) rotate(-54deg) skewY(0) scale(1);
  }
}

@keyframes wg-newsletter-pin-pop {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  35% { opacity: 1; transform: translate3d(.25rem, -.35rem, 0) rotate(35deg) scale(1.15); }
  100% { opacity: 0; transform: translate3d(1.6rem, -1.7rem, 0) rotate(140deg) scale(.35); }
}

@keyframes wg-newsletter-confetti-burst {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--wg-confetti-x), calc(var(--wg-confetti-y) + 12rem), 0) rotate(var(--wg-confetti-rotate)); }
}

/*
 * Bootstrap's .text-body-secondary / .text-muted read color from the
 * --bs-secondary-color custom property (themselves declared with
 * !important — that's Bootstrap's own utility-class contract, not
 * something to fight). Re-pointing the variable in this dark section
 * lets those utilities resolve to white on their own, without a
 * competing !important declaration on `color`.
 */
#emailsubscription_anchor_displayFooterBefore.ps-emailsubscription {
  --bs-secondary-color: #fff;
}

@media (max-width: 1199.98px) {
  .wg-newsletter-offer { grid-template-columns: 8rem minmax(0, 1fr); }
  .wg-newsletter-ticket__discount { font-size: 2.35rem; }
  .wg-newsletter-ticket__body { padding-inline: .8rem; }
}

@media (max-width: 991.98px) {
  .wg-newsletter-offer {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    margin-bottom: 1.5rem;
  }

  .wg-newsletter-ticket { min-height: 7.75rem; }
  .wg-newsletter-title-wrapper { height: 7.75rem; }
}

@media (max-width: 575.98px) {
  .wg-newsletter-offer {
    display: flex;
    width: 100%;
    margin-bottom: 1.5rem;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
  }

  .wg-newsletter-ticket {
    width: 7.5rem;
    min-width: 0;
    min-height: 7.5rem;
    max-height: 7.5rem;
    flex: 0 0 7.5rem;
    aspect-ratio: 1;
    border-radius: 3rem 0 0 3rem;
    box-shadow: 0 .3rem 0 #14c7ba;
  }

  .wg-newsletter-ticket__body {
    padding: .75rem .65rem;
    align-items: flex-end;
    text-align: right;
  }

  .wg-newsletter-ticket__eyebrow,
  .wg-newsletter-ticket__scope {
    font-size: .48rem;
    letter-spacing: .035em;
  }

  .wg-newsletter-ticket__discount {
    margin: .12rem 0 .08rem;
    font-size: 1.9rem;
  }

  .wg-newsletter-ticket__perforation {
    right: .15rem;
  }

  .wg-newsletter-title-wrapper {
    width: auto;
    min-width: 0;
    height: 7.5rem;
    min-height: 7.5rem;
    margin-right: 0;
    padding: .75rem .85rem .6rem;
    flex: 1 1 auto;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    border-radius: 0 .25rem 3rem 0;
    background: rgb(255 255 255 / .97);
    box-shadow: 0 .3rem 0 #14c7ba;
    text-align: left;
  }

  #footer .ps-emailsubscription .wg-newsletter-offer .h3.wg,
  .ps-emailsubscription .wg-newsletter-offer .h3.wg {
    max-width: 14rem;
    font-size: clamp(.92rem, 4.2vw, 1.12rem);
    line-height: 1.16;
  }

  .wg-newsletter-title-wrapper .wg-footer-brands {
    width: 100%;
    margin-top: .45rem;
    overflow: hidden;
  }

  .wg-newsletter-title-wrapper .wg-footer-brands__track,
  .wg-newsletter-title-wrapper .wg-footer-brands__group {
    align-items: center;
  }

  .wg-newsletter-title-wrapper .wg-footer-brands__logo {
    max-height: 1.65rem;
    margin-top: 0;
    margin-right: 1rem;
  }

  .wg-newsletter-fields {
    align-items: stretch !important;
    flex-direction: column;
  }

  .wg-newsletter-fields .btn {
    width: 100%;
  }

  .wg-newsletter-confetti {
    left: 20%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wg-newsletter-ticket.is-redeemed,
  .wg-newsletter-ticket.is-redeemed .wg-newsletter-ticket__pin,
  .wg-newsletter-confetti i { animation: none; }

  .wg-newsletter-ticket.is-redeemed { opacity: 0; }
}