/* Denim Store — exit-intent discount offer.
   Desktop: centred modal. Mobile: bottom sheet that slides up. */

/* The theme's base styles set display on generic divs, which beats the plain
   [hidden] UA rule — force it, or the banner flashes on every page load. */
.ds-exit[hidden] { display: none !important; }

.ds-exit {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.ds-exit-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 22, .68);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .3s ease;
}

.ds-exit.is-open .ds-exit-overlay { opacity: 1; }

/* ===== Panel ===== */

.ds-exit-panel {
  position: relative;
  width: 100%;
  max-width: 380px;
  text-align: center;
  /* Short viewports (landscape phones) must scroll the panel rather than push
     the CTA off-screen. overflow-x stays hidden so the confetti can't widen it. */
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(18, 31, 52, .42);
  transform: translateY(24px) scale(.94);
  opacity: 0;
  transition: transform .42s cubic-bezier(.2, .9, .28, 1.25), opacity .3s ease;
}

.ds-exit.is-open .ds-exit-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.ds-exit-grip { display: none; }

.ds-exit-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 4;
  width: 32px;
  height: 32px;
  border: 0;
  background: rgba(255, 255, 255, .18);
  font-size: 22px;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  transition: background .18s ease, transform .18s ease;
}

.ds-exit-close:hover { background: rgba(255, 255, 255, .34); transform: rotate(90deg); }

/* ===== Confetti burst ===== */

/* Lives inside the stub, so .ds-exit-head's overflow clips it — the old
   full-panel version dropped pieces across the copy and the badge. */
.ds-exit-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.ds-exit-burst i {
  position: absolute;
  top: -14px;
  left: calc(var(--n) * 9.5%);
  width: 6px;
  height: 9px;
  border-radius: 2px;
  opacity: 0;
  background: rgba(255, 255, 255, .85);
}

.ds-exit-burst i:nth-child(3n)   { background: var(--accent, #f5a524); }
.ds-exit-burst i:nth-child(4n)   { background: rgba(255, 255, 255, .6); width: 5px; height: 5px; border-radius: 50%; }

.ds-exit.is-open .ds-exit-burst i {
  animation: dsFall 3s linear infinite;
  animation-delay: calc(var(--n) * .26s);
}

/* Falls just past the stub's height, then repeats — a 420px drop meant most of
   the loop was spent animating something already clipped out of view. */
@keyframes dsFall {
  0%   { transform: translateY(0) rotate(0deg);      opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateY(210px) rotate(460deg); opacity: 0; }
}

/* ===== Voucher stub (coloured half) ===== */

.ds-exit-head {
  position: relative;
  overflow: hidden;
  padding: 26px 24px 22px;
  border-radius: 20px 20px 0 0;
  background:
    radial-gradient(120% 120% at 50% -20%, rgba(255, 255, 255, .22), transparent 60%),
    linear-gradient(150deg, var(--primary, #d21c3e) 0%, #a1112b 55%, #7d0c20 100%);
}

/* Faint diagonal ticket ribbing, so the stub reads as printed stock. */
.ds-exit-head::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, .05) 0 2px,
    transparent 2px 12px
  );
}

.ds-exit-gift {
  position: relative;
  z-index: 2;
  display: block;
  font-size: 34px;
  line-height: 1;
  margin-bottom: 6px;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .35));
}

.ds-exit.is-open .ds-exit-gift { animation: dsGift 2.6s ease-in-out .4s infinite; }

@keyframes dsGift {
  0%, 100%  { transform: translateY(0) rotate(0deg); }
  15%       { transform: translateY(-7px) rotate(-8deg); }
  30%       { transform: translateY(0) rotate(8deg); }
  45%       { transform: translateY(-3px) rotate(-3deg); }
  60%       { transform: translateY(0) rotate(0deg); }
}

/* The discount is the whole point, so it is the largest thing on the panel and
   sits directly on the colour rather than in a slab of its own. */
.ds-exit-amount {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}

.ds-exit.is-open .ds-exit-amount { animation: dsPop .55s cubic-bezier(.2, .9, .3, 1.5) .12s both; }

@keyframes dsPop {
  0%   { transform: scale(.5); opacity: 0; }
  70%  { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}

.ds-exit-amount-value {
  font-size: 52px;
  font-weight: 800;
  line-height: .95;
  letter-spacing: -1.5px;
  color: #fff;
  text-shadow: 0 4px 16px rgba(0, 0, 0, .28);
}

.ds-exit-amount-label {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, .82);
}

.ds-exit-badge {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  backdrop-filter: blur(2px);
}

.ds-exit.is-open .ds-exit-badge { animation: dsBadge 2.6s ease-in-out infinite; }

@keyframes dsBadge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .4); }
  50%      { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
}

/* ===== Perforation ===== */

/* The tear line is the stub's bottom border, not a separate element: drawn at
   the seam it would be half on red and half on white, so white dashes vanished
   into the white half. On the stub itself they read cleanly.
   The element stays as a spacer the notches align to. */
.ds-exit-head {
  border-bottom: 2px dashed rgba(255, 255, 255, .45);
}

.ds-exit-perf { display: none; }

/* ===== Body (white half) ===== */

.ds-exit-body {
  position: relative;
  padding: 22px 24px 20px;
  border-radius: 0 0 20px 20px;
  background: #fff;
}

.ds-exit-body::before,
.ds-exit-body::after {
  content: '';
  position: absolute;
  top: -13px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
}

.ds-exit-body::before { left: -13px; }
.ds-exit-body::after  { right: -13px; }

.ds-exit-title {
  margin: 0 0 6px;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 800;
  color: var(--foreground, #121f34);
}

.ds-exit-text {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted-foreground, #68718a);
}

/* ===== Countdown ===== */

/* One compact pill instead of two large flip-tiles: the timer is a supporting
   detail here, and the old blocks competed with the discount for attention. */
.ds-exit-timer {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--muted, #f1f3f7);
  border: 1px solid var(--border, #e2e6ed);
}

.ds-exit-timer-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-foreground, #68718a);
}

.ds-exit-clock {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.ds-exit-digit {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--foreground, #121f34);
  transition: transform .2s ease;
}

.ds-exit-digit.is-tick { animation: dsTick .45s ease; }

@keyframes dsTick {
  0%   { transform: translateY(-2px) scale(1.14); }
  100% { transform: translateY(0) scale(1); }
}

.ds-exit-colon {
  font-size: 15px;
  font-weight: 800;
  color: var(--foreground, #121f34);
  animation: dsBlink 1s steps(1) infinite;
}

@keyframes dsBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .25; } }

/* Last 30 seconds — the whole pill goes red, which reads faster than
   recolouring the digits alone. */
.ds-exit-timer.is-urgent {
  background: #fee2e6;
  border-color: rgba(210, 28, 62, .35);
  animation: dsUrgent .9s ease-in-out infinite;
}

.ds-exit-timer.is-urgent .ds-exit-digit,
.ds-exit-timer.is-urgent .ds-exit-colon,
.ds-exit-timer.is-urgent .ds-exit-timer-label { color: var(--primary, #d21c3e); }

@keyframes dsUrgent {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

/* ===== CTA ===== */

.ds-exit-cta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 16px 20px;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary, #d21c3e), var(--primary-hover, #b21634));
  color: #fff;
  font-size: 16.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(210, 28, 62, .4);
  transition: transform .16s ease, box-shadow .16s ease;
}

.ds-exit.is-open .ds-exit-cta { animation: dsCta 2.3s ease-in-out .8s infinite; }

@keyframes dsCta {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.ds-exit-cta:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 15px 32px rgba(210, 28, 62, .55);
  color: #fff;
  animation-play-state: paused;
}

.ds-exit-cta:active { transform: translateY(0) scale(.99); }

/* Light sweep across the button. */
.ds-exit-cta-shine {
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent);
}

.ds-exit.is-open .ds-exit-cta-shine { animation: dsShine 2.6s ease-in-out 1.1s infinite; }

@keyframes dsShine {
  0%        { left: -60%; }
  55%, 100% { left: 130%; }
}

.ds-exit-cta-text { position: relative; z-index: 1; }

.ds-exit-cta-arrow {
  position: relative;
  z-index: 1;
  transition: transform .18s ease;
}

.ds-exit-cta:hover .ds-exit-cta-arrow { transform: translateX(5px); }

.ds-exit-dismiss {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  border: 0;
  background: transparent;
  color: #8893a7;
  font-size: 13.5px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 8px;
}

.ds-exit-dismiss:hover { color: #121f34; }

body.ds-exit-open { overflow: hidden; }

/* ===== Active-offer ribbon ===== */

.ds-fd-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 14px;
  background: linear-gradient(135deg, var(--primary, #d21c3e), #9e102b);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  animation: dsRibbon .45s ease both;
}

@keyframes dsRibbon {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.ds-fd-ribbon-icon { font-size: 16px; }

.ds-fd-ribbon-timer {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.ds-fd-ribbon-timer:empty { display: none; }

/* ===== Mobile: bottom sheet ===== */

@media (max-width: 560px) {
  .ds-exit {
    align-items: flex-end;
    padding: 0;
  }

  /* padding:0 — the stub and body carry their own now, and any padding here
     would frame the coloured half in white instead of letting it reach the
     sheet's edges. */
  .ds-exit-panel {
    max-width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    padding: 0;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    transform: translateY(100%) scale(1);
    transition: transform .4s cubic-bezier(.2, .85, .3, 1), opacity .25s ease;
  }

  .ds-exit.is-open .ds-exit-panel { transform: translateY(0); }

  /* The stub is the top of the sheet now, so the grip sits on the colour. */
  .ds-exit-grip {
    display: block;
    width: 42px;
    height: 4px;
    margin: 0 auto 14px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .5);
    position: relative;
    z-index: 3;
    margin: 0 auto 10px;
  }

  .ds-exit-close { top: 12px; right: 12px; }
  .ds-exit-head { padding: 16px 20px 18px; border-radius: 24px 24px 0 0; }
  .ds-exit-body { border-radius: 0; }
  .ds-exit-gift { font-size: 30px; }
  .ds-exit-amount-value { font-size: 46px; }
  .ds-exit-body { padding: 20px 20px 18px; }
  .ds-exit-title { font-size: 18px; }
  .ds-exit-text { font-size: 13px; margin-bottom: 14px; }
  .ds-exit-cta { padding: 15px 18px; font-size: 15.5px; }
  .ds-fd-ribbon { font-size: 12.5px; padding: 8px 10px; }
}

/* Short viewports (landscape phones) — keep everything reachable. */
@media (max-height: 620px) {
  .ds-exit-head { padding: 14px 20px 12px; }
  .ds-exit-gift { display: none; }
  .ds-exit-amount { margin-bottom: 7px; }
  .ds-exit-amount-value { font-size: 36px; }
  .ds-exit-body { padding: 16px 20px 14px; }
  .ds-exit-title { font-size: 16.5px; }
  .ds-exit-text { display: none; }
  .ds-exit-timer { margin-bottom: 11px; padding: 5px 12px; }
  .ds-exit-cta { padding: 13px 18px; }
  .ds-exit-dismiss { margin-top: 8px; }
}

/* ===== Reduced motion ===== */

@media (prefers-reduced-motion: reduce) {
  .ds-exit-panel,
  .ds-exit-overlay { transition-duration: .01ms; }

  .ds-exit.is-open .ds-exit-burst i,
  .ds-exit.is-open .ds-exit-gift,
  .ds-exit.is-open .ds-exit-badge,
  .ds-exit.is-open .ds-exit-amount,
  .ds-exit.is-open .ds-exit-cta,
  .ds-exit.is-open .ds-exit-cta-shine,
  .ds-exit-colon,
  .ds-exit-digit.is-tick,
  .ds-exit-timer.is-urgent,
  .ds-fd-ribbon {
    animation: none !important;
  }

  .ds-exit-burst { display: none; }
}

/* ===== Discount countdown in the order summary =====
   Lives in the discount row's label. Only ever rendered while a claim is live,
   and this stylesheet only loads while the exit offer is enabled, so it can
   safely sit here rather than in main.css. */
.so-disc-timer {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(10, 160, 110, .12);
  color: #0aa06e;
  font-size: 12px;
  font-weight: 700;
  /* Same width per digit, or the row jiggles on every tick. */
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
  vertical-align: middle;
}

.so-disc-timer.is-urgent {
  background: rgba(220, 38, 38, .12);
  color: #dc2626;
  animation: so-disc-pulse 1s ease-in-out infinite;
}

@keyframes so-disc-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.09); }
}

@media (prefers-reduced-motion: reduce) {
  .so-disc-timer.is-urgent { animation: none !important; }
}

/* Countdown on the confirm button — same clock, where the eyes already are. */
.so-btn-timer {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
  vertical-align: middle;
}

.so-btn-timer.is-urgent {
  background: rgba(255, 255, 255, .92);
  color: #dc2626;
  animation: so-disc-pulse 1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .so-btn-timer.is-urgent { animation: none !important; }
}