.rc-ticket, .rc-dialog {
  --rc-red-hot:#ff2948;
  --rc-red:#ed1235;
  --rc-red-deep:#7f0912;
  --rc-navy:#071124;
  --rc-navy-mid:#030916;
  --rc-navy-deep:#01040d;
  --metal-white:#ffffff;
  --metal-light:#e7edf6;
  --ticket-width:760px;
  --hover-duration:420ms;
  --claim-duration:720ms;
  --hover-ease:cubic-bezier(.2,.82,.26,1);
  --claim-ease:cubic-bezier(.18,.86,.26,1);
  --perforation-x:160px;
  --stub-width:160px;
  --body-width:600px;
  --font-display:var(--display-font);
  --font-body:"DM Sans",sans-serif;
}
.claim-stage{appearance:none;border:0;padding:0;background:transparent;position:relative;width:min(90vw,var(--ticket-width));aspect-ratio:760/280;cursor:pointer;perspective:1500px;transform-style:preserve-3d;outline:none;}
.claim-stage:focus-visible{outline:2px solid rgba(157,199,255,.95);outline-offset:14px;border-radius:20px;}
.ticket-full,.front-ticket{position:absolute;inset:0;display:block;transform-style:preserve-3d;}
.ticket-card__svg{position:absolute;top:0;left:0;display:block;width:760px;height:100%;max-width:none;overflow:visible;}
.ticket-card__tear-seam{display:none;}
.ticket-card__inner-border{fill:none;stroke-width:7;}
.ticket-card__inner-dark-rim{fill:none;stroke:rgba(10,17,38,.96);stroke-width:3;}


.ticket-full--back{z-index:1;transform:translate3d(6px,4px,-16px) rotate(1.2deg) scale(.992);opacity:0;filter:brightness(.80) saturate(.82) drop-shadow(0 12px 15px rgba(0,0,0,.20));transition:transform var(--hover-duration) var(--hover-ease),opacity 280ms ease,filter 280ms ease;}
.front-ticket{z-index:2;}
.front-ticket__part{position:absolute;top:0;bottom:0;display:block;overflow:hidden;transform-style:preserve-3d;transition:transform var(--hover-duration) var(--hover-ease),filter var(--hover-duration) ease,opacity 280ms ease,clip-path 180ms ease,visibility 0s linear 0s;will-change:transform,filter,opacity;}

/* Split geometry rebuilt so the remaining ticket truly ends on the perforation axis.
   The body piece starts at x=160 and the SVG is shifted left, so the holes become REAL half-holes. */
.front-ticket__part--stub{
  left:0;width:var(--stub-width);z-index:2;transform-origin:100% 50%;
  clip-path:polygon(0 0, 160px 0, 160px 280px, 0 280px);
  transform:translate3d(0,0,0) rotate(0deg) scale(1);
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.44)) drop-shadow(0 5px 10px rgba(45,82,166,.15));
}
.front-ticket__part--stub .ticket-card__svg{left:0;}

.front-ticket__part--body{
  left:var(--stub-width);width:var(--body-width);z-index:3;transform-origin:0 50%;
  clip-path:polygon(0 0, 600px 0, 600px 280px, 0 280px);
  transform:translate3d(0,0,0) rotate(0deg) scale(1);
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.44)) drop-shadow(0 5px 10px rgba(45,82,166,.15));
}
.front-ticket__part--body .ticket-card__svg{left:-160px;}

/* subtle torn highlight only on the extreme top/bottom, keeping the middle aligned to the holes */
.front-ticket__part--body::before,
.front-ticket__part--stub::after{content:"";position:absolute;pointer-events:none;opacity:0;transition:opacity 140ms ease;}
.front-ticket__part--body::before{
  left:0;top:0;bottom:0;width:10px;
  background:
    radial-gradient(circle at 2px 7px, rgba(255,255,255,.90) 0 1.5px, transparent 1.8px),
    radial-gradient(circle at 7px 15px, rgba(255,255,255,.78) 0 1.2px, transparent 1.5px),
    radial-gradient(circle at 3px 23px, rgba(255,255,255,.70) 0 1px, transparent 1.3px),
    radial-gradient(circle at 3px calc(100% - 7px), rgba(255,255,255,.90) 0 1.5px, transparent 1.8px),
    radial-gradient(circle at 7px calc(100% - 15px), rgba(255,255,255,.78) 0 1.2px, transparent 1.5px),
    radial-gradient(circle at 3px calc(100% - 23px), rgba(255,255,255,.70) 0 1px, transparent 1.3px);
  background-repeat:no-repeat;
  filter:drop-shadow(-1px 0 0 rgba(0,0,0,.14));
}
.front-ticket__part--stub::after{
  right:0;top:0;bottom:0;width:10px;
  background:
    radial-gradient(circle at 8px 7px, rgba(255,255,255,.90) 0 1.5px, transparent 1.8px),
    radial-gradient(circle at 3px 15px, rgba(255,255,255,.78) 0 1.2px, transparent 1.5px),
    radial-gradient(circle at 7px 23px, rgba(255,255,255,.70) 0 1px, transparent 1.3px),
    radial-gradient(circle at 7px calc(100% - 7px), rgba(255,255,255,.90) 0 1.5px, transparent 1.8px),
    radial-gradient(circle at 3px calc(100% - 15px), rgba(255,255,255,.78) 0 1.2px, transparent 1.5px),
    radial-gradient(circle at 7px calc(100% - 23px), rgba(255,255,255,.70) 0 1px, transparent 1.3px);
  background-repeat:no-repeat;
  filter:drop-shadow(1px 0 0 rgba(0,0,0,.14));
}

.front-ticket__tear-sparks{position:absolute;left:153px;top:0;width:14px;height:30px;z-index:4;opacity:0;pointer-events:none;}
.front-ticket__tear-sparks i{position:absolute;left:50%;width:2px;background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.2));border-radius:999px;box-shadow:0 0 5px rgba(255,255,255,.55);transform:translateX(-50%) scaleY(0);transform-origin:center;}
.front-ticket__tear-sparks i:nth-child(1){top:3px;height:10px;}
.front-ticket__tear-sparks i:nth-child(2){top:8px;height:12px;left:35%;}
.front-ticket__tear-sparks i:nth-child(3){top:14px;height:8px;left:65%;}
.front-ticket__tear-sparks i:nth-child(4){top:1px;height:6px;left:25%;}
.front-ticket__tear-sparks i:nth-child(5){top:18px;height:9px;left:74%;}
.front-ticket__tear-sparks i:nth-child(6){top:22px;height:6px;left:48%;}
.front-ticket__tear-sparks::after{content:"";position:absolute;left:0;bottom:-250px;width:14px;height:30px;background:radial-gradient(circle at 30% 8px, rgba(255,255,255,.95) 0 1.8px, transparent 2px),radial-gradient(circle at 70% 16px, rgba(255,255,255,.92) 0 1.6px, transparent 1.8px),radial-gradient(circle at 40% 24px, rgba(255,255,255,.95) 0 1.8px, transparent 2px);opacity:0;}

.claim-stage:not(.is-claiming):not(.is-final):hover .ticket-full--back,
.claim-stage:not(.is-claiming):not(.is-final):focus-visible .ticket-full--back{transform:translate3d(38px,12px,-18px) rotate(7.2deg) scale(.986);opacity:.95;filter:brightness(.92) saturate(.94) drop-shadow(0 20px 24px rgba(0,0,0,.28));}
.claim-stage:not(.is-claiming):not(.is-final):hover .front-ticket__part--stub,
.claim-stage:not(.is-claiming):not(.is-final):focus-visible .front-ticket__part--stub,
.claim-stage:not(.is-claiming):not(.is-final):hover .front-ticket__part--body,
.claim-stage:not(.is-claiming):not(.is-final):focus-visible .front-ticket__part--body{transform:translate3d(-17px,-7px,28px) rotate(-3.1deg) scale(1.008);filter:drop-shadow(0 31px 38px rgba(0,0,0,.46)) drop-shadow(0 7px 12px rgba(45,82,166,.18));}

.claim-stage.is-claiming,.claim-stage.is-final{cursor:default;}
.claim-stage.is-claiming .ticket-full--back{transition:transform 360ms cubic-bezier(.28,.05,.7,.25),opacity 260ms ease,filter 320ms ease;transform:translate3d(76px,20px,-90px) rotate(10deg) scale(.92);opacity:0;filter:brightness(.62) saturate(.72) blur(2px) drop-shadow(0 8px 12px rgba(0,0,0,.16));}
.claim-stage.is-claiming .front-ticket__part--stub::after,.claim-stage.is-claiming .front-ticket__part--body::before{opacity:.98;}
.claim-stage.is-claiming .front-ticket__part--stub{
  clip-path:polygon(0 0, 160px 0, 156px 8px, 162px 16px, 157px 24px, 160px 32px, 160px 248px, 157px 256px, 162px 264px, 156px 272px, 160px 280px, 0 280px);
}
.claim-stage.is-claiming .front-ticket__part--body{
  clip-path:polygon(0 32px, 0 248px, 3px 256px, 0 264px, 6px 272px, 0 280px, 600px 280px, 600px 0, 0 0, 0 8px, 6px 16px, 1px 24px);
}
.claim-stage.is-claiming .front-ticket__tear-sparks{opacity:1;}
.claim-stage.is-claiming .front-ticket__tear-sparks i{animation:sparkTop 320ms ease forwards;}
.claim-stage.is-claiming .front-ticket__tear-sparks::after{animation:sparkBottom 320ms ease forwards;}
.claim-stage.is-claiming .front-ticket__part--stub{transition:transform var(--claim-duration) var(--claim-ease),filter 420ms ease,opacity 240ms linear 220ms,visibility 0s linear 460ms;transform:translate3d(-132px,12px,8px) rotate(-17deg) scale(.95);opacity:0;visibility:hidden;filter:blur(1.3px) brightness(.78) saturate(.82) drop-shadow(-8px 12px 16px rgba(0,0,0,.18));}
.claim-stage.is-claiming .front-ticket__part--body{transition:transform var(--claim-duration) var(--claim-ease),filter var(--claim-duration) ease;transform:translate3d(-80px,-2px,54px) rotate(0deg) scale(1.074);filter:drop-shadow(0 38px 48px rgba(0,0,0,.46)) drop-shadow(0 8px 16px rgba(45,82,166,.20));}

/* final: remove discarded elements completely */
.claim-stage.is-final .ticket-full--back,
.claim-stage.is-final .front-ticket__part--stub,
.claim-stage.is-final .front-ticket__tear-sparks{display:none;}
.claim-stage.is-final .front-ticket__part--body{transform:translate3d(-80px,-2px,54px) rotate(0deg) scale(1.074);}

@keyframes sparkTop{0%{transform:translateX(-50%) scaleY(0);opacity:0;}45%{transform:translateX(-50%) scaleY(1);opacity:1;}100%{transform:translateX(-50%) scaleY(0);opacity:0;}}
@keyframes sparkBottom{0%{opacity:0;}45%{opacity:1;}100%{opacity:0;}}

@media (prefers-reduced-motion: reduce){
  .ticket-full--back,.front-ticket__part,.front-ticket__tear-sparks i,.front-ticket__tear-sparks::after{transition:none !important;animation:none !important;}
  .claim-stage:not(.is-claiming):not(.is-final):hover .ticket-full--back,.claim-stage:not(.is-claiming):not(.is-final):focus-visible .ticket-full--back{transform:translate3d(20px,6px,0) rotate(3.3deg);opacity:.9;}
  .claim-stage:not(.is-claiming):not(.is-final):hover .front-ticket__part--stub,.claim-stage:not(.is-claiming):not(.is-final):hover .front-ticket__part--body,.claim-stage:not(.is-claiming):not(.is-final):focus-visible .front-ticket__part--stub,.claim-stage:not(.is-claiming):not(.is-final):focus-visible .front-ticket__part--body{transform:translate3d(-7px,-2px,0) rotate(-1.2deg);}
  .claim-stage.is-claiming .ticket-full--back{opacity:0;}
  .claim-stage.is-claiming .front-ticket__part--stub{transform:translate3d(-88px,8px,0) rotate(-12deg);opacity:0;visibility:hidden;}
  .claim-stage.is-claiming .front-ticket__part--body{transform:translate3d(-80px,0,0) scale(1.04);}
}
@media (max-width:600px){
  .rc-flow{padding-inline:12px;}
  .claim-stage{width:95vw;}
  .front-ticket__part--body{width:calc(100% - var(--stub-width));}
  .claim-stage.is-claiming .front-ticket__part--stub{transform:translate3d(-78px,8px,4px) rotate(-12deg) scale(.97);opacity:0;visibility:hidden;}
  .claim-stage.is-claiming .front-ticket__part--body{transform:translate3d(-60px,-1px,34px) rotate(0deg) scale(1.05);}
  .claim-stage.is-claiming .ticket-full--back{transform:translate3d(46px,18px,-50px) rotate(8deg) scale(.94);}
  .claim-stage.is-final .front-ticket__part--body{transform:translate3d(-60px,-1px,34px) rotate(0deg) scale(1.05);}
}

/* Final state: show only the actual geometric cutouts. */
.claim-stage.is-final .front-ticket__part--body::before{opacity:0 !important;}


/* === Details frame / coupon information panel === */
.details-panel{
  position:relative;
  width:min(96vw, 960px);
  opacity:0;
  transform:translateY(26px) scale(.965);
  pointer-events:none;
  transition:
    opacity 380ms ease,
    transform 500ms cubic-bezier(.18,.86,.26,1);
}

.rc-flow.is-panel-visible .details-panel{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.details-panel__shell{
  position:relative;
  padding:12px;
  border-radius:38px;
  background:
    linear-gradient(180deg, #ffffff 0%, #dce4ed 12%, #6a768a 28%, #f8fbff 45%, #515d71 63%, #edf2f7 80%, #4c576c 100%);
  box-shadow:
    0 32px 58px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.08),
    0 0 30px rgba(233,29,43,.16);
  overflow:visible;
}

.details-panel__shell::before,
.details-panel__shell::after{
  content:"";
  position:absolute;
  top:12px;
  bottom:12px;
  width:2px;
  border-radius:999px;
  opacity:.85;
  pointer-events:none;
}

.details-panel__shell::before{
  left:14px;
  background:linear-gradient(180deg, rgba(255,96,71,.0), rgba(255,76,47,.95) 18%, rgba(255,76,47,.38) 50%, rgba(255,76,47,.96) 82%, rgba(255,96,71,.0));
  box-shadow:0 0 14px rgba(255,76,47,.55);
}

.details-panel__shell::after{
  right:14px;
  background:linear-gradient(180deg, rgba(255,96,71,.0), rgba(255,76,47,.65) 18%, rgba(255,76,47,.28) 50%, rgba(255,76,47,.72) 82%, rgba(255,96,71,.0));
  box-shadow:0 0 12px rgba(255,76,47,.42);
}

.details-panel__inner{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 100%, rgba(223,24,31,.14), transparent 36%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.06), transparent 24%),
    radial-gradient(circle, rgba(255,255,255,.055) 0 1px, transparent 1.5px) 0 0 / 14px 14px,
    linear-gradient(180deg, rgba(5,14,32,.96), rgba(3,9,22,.98));
  padding:34px;
  min-height:350px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -22px 30px rgba(0,0,0,.18);
}

.details-panel__inner::before{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:22px;
  border:7px solid transparent;
  background:
    linear-gradient(180deg, #ffffff 0%, #dce4ed 16%, #6b778a 32%, #f7f9fc 48%, #576176 66%, #eef3f8 82%, #4f5a70 100%) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  opacity:.96;
}

.details-panel__inner::after{
  content:"";
  position:absolute;
  inset:25px;
  border-radius:16px;
  border:2px solid rgba(255,255,255,.12);
  pointer-events:none;
}

.details-panel__discount{
  position:absolute;
  top:-20px;
  right:24px;
  z-index:3;
  width:122px;
  aspect-ratio:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:2px;
  padding:12px 8px 10px;
  text-align:center;
  color:#fff;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), transparent 28%),
    linear-gradient(180deg, #ff654c 0%, var(--rc-red) 35%, var(--rc-red-deep) 100%);
  clip-path:polygon(50% 0%, 60% 12%, 74% 4%, 78% 19%, 92% 15%, 89% 30%, 100% 40%, 89% 50%, 100% 60%, 89% 70%, 92% 85%, 78% 81%, 74% 96%, 60% 88%, 50% 100%, 40% 88%, 26% 96%, 22% 81%, 8% 85%, 11% 70%, 0% 60%, 11% 50%, 0% 40%, 11% 30%, 8% 15%, 22% 19%, 26% 4%, 40% 12%);
  box-shadow:
    0 12px 24px rgba(0,0,0,.26),
    0 0 18px rgba(255,62,44,.35),
    inset 0 1px 0 rgba(255,255,255,.28);
}

.details-panel__discount strong{
  display:block;
  font-family:var(--font-display);
  font-size:2rem;
  line-height:.95;
  letter-spacing:-.045em;
}

.details-panel__discount small{
  display:block;
  font-family:var(--font-display);
  font-size:.82rem;
  line-height:1;
  letter-spacing:.18em;
  font-weight:800;
}

.details-panel__logo-area{
  position:relative;
  z-index:1;
  display:grid;
  gap:14px;
  align-content:center;
  justify-items:center;
  padding-inline:6px;
}

.details-panel__logo-frame{
  position:relative;
  width:min(100%, 300px);
  min-height:150px;
  padding:16px;
  border-radius:32px;
  background:
    linear-gradient(180deg, #ffffff 0%, #dce4ed 15%, #667286 30%, #f7f9fc 49%, #576176 68%, #eef3f8 82%, #4f5a70 100%);
  box-shadow:
    0 16px 28px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.28),
    0 0 20px rgba(255,76,47,.14);
}

.details-panel__logo-frame::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:24px;
  border:2px solid rgba(255,255,255,.25);
  pointer-events:none;
}

.business-logo{
  height:100%;
  min-height:114px;
  border-radius:22px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:12px;
  text-align:center;
  padding:24px 18px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.12), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18)),
    linear-gradient(180deg, #09152f 0%, #040a17 100%);
  color:#fff;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.06),
    inset 0 -14px 18px rgba(0,0,0,.20);
}

.business-logo__icon{
  width:62px;
  height:62px;
  border-radius:20px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), transparent 32%),
    linear-gradient(180deg, #ff6047 0%, var(--rc-red) 38%, var(--rc-red-deep) 100%);
  transform:rotate(8deg);
  box-shadow:
    0 12px 20px rgba(0,0,0,.28),
    0 0 16px rgba(255,72,52,.28),
    inset 0 1px 0 rgba(255,255,255,.28);
}

.business-logo__name{
  font-family:var(--font-display);
  font-size:1.28rem;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-shadow:0 4px 12px rgba(0,0,0,.35);
}

.details-panel__product-frame{
  width:min(100%, 300px);
  margin:0;
  padding:10px;
  border-radius:24px;
  background:linear-gradient(180deg, #f7f9fc 0%, #9ca8b8 18%, #ffffff 48%, #667286 76%, #eef3f8 100%);
  box-shadow:0 14px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.35);
}

.details-panel__product-image{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:16px;
  background:#071126;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.08);
}

.details-panel__description{
  width:min(100%,300px);
  margin:0;
  color:#fff;
  font-size:.96rem;
  line-height:1.5;
  text-align:left;
  overflow-wrap:anywhere;
  white-space:pre-line;
}

.details-panel__description:empty{
  display:none;
}

.details-panel__partner-note{
  margin:0;
  color:rgba(255,255,255,.74);
  font-size:.92rem;
  text-align:center;
  line-height:1.4;
}

.details-panel__content{
  position:relative;
  z-index:1;
  display:grid;
  align-content:center;
  gap:16px;
  color:#fff;
}

.details-panel__eyebrow{
  margin:0;
  color:#ff5c43;
  font-family:var(--font-display);
  font-size:.84rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:900;
  text-shadow:0 0 10px rgba(255,76,47,.24);
}

.details-panel__title{
  margin:0;
  max-width:14ch;
  font-family:var(--font-display);
  font-size:clamp(1.9rem, 2.3vw + 1rem, 3rem);
  line-height:.96;
  letter-spacing:-.05em;
  text-transform:uppercase;
  text-wrap:balance;
  text-shadow:
    0 8px 20px rgba(0,0,0,.40),
    0 0 18px rgba(255,255,255,.06);
}

.coupon-details{
  margin:0;
  display:grid;
  gap:12px;
}

.coupon-details__row{
  display:grid;
  gap:4px;
  padding:13px 15px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 18px rgba(0,0,0,.12);
}

.coupon-details dt{
  margin:0;
  color:rgba(255,255,255,.70);
  font-family:var(--font-display);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.coupon-details dd{
  margin:0;
  color:#fff;
  font-size:1rem;
  font-weight:600;
  line-height:1.35;
}

.details-panel__claim-btn{
  position:relative;
  isolation:isolate;
  appearance:none;
  border:0;
  min-height:64px;
  padding:0 32px;
  border-radius:18px;
  justify-self:start;
  font-family:var(--font-display);
  background:
    linear-gradient(180deg, #ff5d45 0%, #e61d26 48%, #8b0a12 100%);
  color:#e7edf6;
  font-size:1.08rem;
  font-weight:900;
  letter-spacing:.015em;
  text-transform:none;
  cursor:pointer;
  box-shadow:
    0 16px 28px rgba(0,0,0,.25),
    0 0 18px rgba(255,68,52,.40),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -10px 14px rgba(88,0,0,.22);
  transition:transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.details-panel__claim-btn::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:14px;
  border:2px solid rgba(231,237,246,.78);
  opacity:.95;
  z-index:-1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 10px rgba(231,237,246,.08);
}

.details-panel__claim-btn::after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:7px;
  height:38%;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0));
  pointer-events:none;
}

.details-panel__claim-btn:hover{
  transform:translateY(-1px) scale(1.01);
  filter:brightness(1.04);
  box-shadow:
    0 18px 30px rgba(0,0,0,.28),
    0 0 24px rgba(255,68,52,.50),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -10px 14px rgba(88,0,0,.22);
}

@media (min-width: 760px){
  .details-panel__inner{
    display:grid;
    grid-template-columns:minmax(240px, 300px) minmax(0, 1fr);
    gap:34px;
    align-items:center;
    padding:36px 36px 36px 30px;
  }
}

@media (max-width: 759px){
  .details-panel__shell{
    border-radius:30px;
    padding:10px;
  }

  .details-panel__inner{
    padding:28px 20px 22px;
    min-height:unset;
  }

  .details-panel__discount{
    width:104px;
    right:14px;
    top:-14px;
    padding:10px 7px 9px;
  }

  .details-panel__discount strong{
    font-size:1.72rem;
  }

  .details-panel__discount small{
    font-size:.74rem;
  }

  .details-panel__logo-frame{
    width:min(100%, 250px);
    min-height:132px;
  }

  .details-panel__title{
    max-width:100%;
    font-size:clamp(1.75rem, 7vw, 2.35rem);
  }

  .coupon-details__row{
    padding:11px 12px;
  }

  .details-panel__claim-btn{
    width:100%;
    justify-self:stretch;
    min-height:60px;
    font-size:1rem;
  }
}


/* ================================================================
   QR FRAME — appears after clicking "Claim coupon"
   ================================================================ */

/* Details and QR occupy the same responsive frame slot. */
.rc-flow{
  grid-template-rows:auto auto;
  row-gap:22px;
}

.claim-stage{
  grid-row:1;
  grid-column:1;
}

.details-panel,
.qr-panel{
  grid-row:2;
  grid-column:1;
}

.qr-panel{
  position:relative;
  width:min(96vw, 960px);
  opacity:0;
  visibility:hidden;
  transform:translateY(26px) scale(.965);
  pointer-events:none;
  transition:
    opacity 360ms ease,
    transform 480ms cubic-bezier(.18,.86,.26,1),
    visibility 0s linear 480ms;
}

.rc-flow.is-qr-visible .details-panel{
  opacity:0;
  transform:translateY(-16px) scale(.975);
  pointer-events:none;
}

.rc-flow.is-qr-visible .qr-panel{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  pointer-events:auto;
  transition:
    opacity 380ms ease 80ms,
    transform 500ms cubic-bezier(.18,.86,.26,1) 40ms,
    visibility 0s linear 0s;
}

.qr-panel__shell{
  position:relative;
  padding:12px;
  border-radius:38px;
  background:
    linear-gradient(180deg, #ffffff 0%, #dce4ed 12%, #6a768a 28%, #f8fbff 45%, #515d71 63%, #edf2f7 80%, #4c576c 100%);
  box-shadow:
    0 32px 58px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.08),
    0 0 30px rgba(233,29,43,.16);
}

.qr-panel__shell::before,
.qr-panel__shell::after{
  content:"";
  position:absolute;
  top:12px;
  bottom:12px;
  width:2px;
  border-radius:999px;
  pointer-events:none;
}

.qr-panel__shell::before{
  left:14px;
  background:linear-gradient(180deg, transparent, rgba(255,76,47,.95) 18%, rgba(255,76,47,.38) 50%, rgba(255,76,47,.96) 82%, transparent);
  box-shadow:0 0 14px rgba(255,76,47,.55);
}

.qr-panel__shell::after{
  right:14px;
  background:linear-gradient(180deg, transparent, rgba(255,76,47,.65) 18%, rgba(255,76,47,.28) 50%, rgba(255,76,47,.72) 82%, transparent);
  box-shadow:0 0 12px rgba(255,76,47,.42);
}

.qr-panel__inner{
  position:relative;
  min-height:430px;
  padding:42px 38px 34px;
  border-radius:28px;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(260px, 330px);
  grid-template-areas:
    "heading qr"
    "meta qr";
  gap:28px 34px;
  align-items:center;
  background:
    radial-gradient(circle at 72% 46%, rgba(223,24,31,.14), transparent 30%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.06), transparent 24%),
    radial-gradient(circle, rgba(255,255,255,.055) 0 1px, transparent 1.5px) 0 0 / 14px 14px,
    linear-gradient(180deg, rgba(5,14,32,.97), rgba(3,9,22,.99));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -22px 30px rgba(0,0,0,.18);
}

.qr-panel__inner::before{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:22px;
  border:7px solid transparent;
  background:
    linear-gradient(180deg, #ffffff 0%, #dce4ed 16%, #6b778a 32%, #f7f9fc 48%, #576176 66%, #eef3f8 82%, #4f5a70 100%) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  opacity:.96;
}

.qr-panel__inner::after{
  content:"";
  position:absolute;
  inset:25px;
  border-radius:16px;
  border:2px solid rgba(255,255,255,.12);
  pointer-events:none;
}

.qr-panel__discount{
  position:absolute;
  top:-20px;
  right:24px;
  z-index:5;
  width:122px;
  aspect-ratio:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:2px;
  padding:12px 8px 10px;
  text-align:center;
  color:#fff;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), transparent 28%),
    linear-gradient(180deg, #ff654c 0%, var(--rc-red) 35%, var(--rc-red-deep) 100%);
  clip-path:polygon(50% 0%, 60% 12%, 74% 4%, 78% 19%, 92% 15%, 89% 30%, 100% 40%, 89% 50%, 100% 60%, 89% 70%, 92% 85%, 78% 81%, 74% 96%, 60% 88%, 50% 100%, 40% 88%, 26% 96%, 22% 81%, 8% 85%, 11% 70%, 0% 60%, 11% 50%, 0% 40%, 11% 30%, 8% 15%, 22% 19%, 26% 4%, 40% 12%);
  box-shadow:
    0 12px 24px rgba(0,0,0,.26),
    0 0 18px rgba(255,62,44,.35),
    inset 0 1px 0 rgba(255,255,255,.28);
}

.qr-panel__discount strong{
  font-family:var(--font-display);
  font-size:2rem;
  line-height:.95;
  letter-spacing:-.045em;
}

.qr-panel__discount small{
  font-family:var(--font-display);
  font-size:.82rem;
  line-height:1;
  letter-spacing:.18em;
  font-weight:800;
}

/* Discount badges contain complete API offer labels; suppress unused suffixes. */
.details-panel__discount [hidden],
.qr-panel__discount [hidden] { display:none; }
.details-panel__discount.is-long-amount strong,
.qr-panel__discount.is-long-amount strong { font-size:clamp(.95rem, 2.6vw, 1.5rem); overflow-wrap:anywhere; }
.details-panel__discount.is-text-offer strong,
.qr-panel__discount.is-text-offer strong { font-size:clamp(.75rem, 2.2vw, 1.15rem); line-height:1.15; letter-spacing:0; overflow-wrap:anywhere; }

.qr-panel__heading{
  position:relative;
  z-index:1;
  grid-area:heading;
  align-self:end;
  color:#fff;
}

.qr-panel__eyebrow{
  margin:0 0 9px;
  color:#ff5c43;
  font-family:var(--font-display);
  font-size:.84rem;
  font-weight:900;
  letter-spacing:.20em;
  text-transform:uppercase;
}

.qr-panel__title{
  margin:0;
  max-width:12ch;
  font-family:var(--font-display);
  font-size:clamp(2rem, 2.6vw + 1rem, 3.2rem);
  line-height:.96;
  letter-spacing:-.05em;
  text-transform:uppercase;
  text-wrap:balance;
  text-shadow:0 8px 20px rgba(0,0,0,.40);
}

.qr-panel__lead{
  margin:16px 0 0;
  max-width:48ch;
  color:rgba(255,255,255,.80);
  font-size:1rem;
  line-height:1.5;
}

.qr-panel__code-wrap{
  position:relative;
  z-index:2;
  grid-area:qr;
  display:grid;
  justify-items:center;
  align-content:center;
  gap:8px;
}

.qr-panel__code-frame{
  width:min(100%, 310px);
  aspect-ratio:1;
  padding:16px;
  border-radius:30px;
  background:
    linear-gradient(180deg, #ffffff 0%, #dce4ed 15%, #667286 30%, #f7f9fc 49%, #576176 68%, #eef3f8 82%, #4f5a70 100%);
  box-shadow:
    0 20px 34px rgba(0,0,0,.30),
    0 0 20px rgba(255,76,47,.16),
    inset 0 1px 0 rgba(255,255,255,.32);
}

.qr-panel__image{
  width:100%;
  height:100%;
  display:block;
  border-radius:17px;
  background:#fff;
  object-fit:contain;
  box-shadow:
    inset 0 0 0 1px rgba(3,9,22,.20),
    0 8px 18px rgba(0,0,0,.18);
}

.qr-panel__code-label{
  margin:6px 0 0;
  color:rgba(255,255,255,.62);
  font-family:var(--font-display);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.qr-panel__coupon-code{
  color:#e7edf6;
  font-family:var(--font-display);
  font-size:1rem;
  letter-spacing:.10em;
}

.qr-panel__meta{
  position:relative;
  z-index:1;
  grid-area:meta;
  align-self:start;
  display:grid;
  gap:18px;
}

.qr-panel__business{
  display:flex;
  align-items:center;
  gap:13px;
  padding:14px 16px;
  border-radius:17px;
  color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
}

.qr-panel__business-mark{
  flex:0 0 auto;
  width:46px;
  height:46px;
  border-radius:15px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.27), transparent 32%),
    linear-gradient(180deg, #ff6047 0%, var(--rc-red) 38%, var(--rc-red-deep) 100%);
  transform:rotate(7deg);
  box-shadow:0 8px 16px rgba(0,0,0,.24);
}

.qr-panel__business div{
  min-width:0;
  display:grid;
  gap:2px;
}

.qr-panel__business small{
  color:rgba(255,255,255,.58);
  font-family:var(--font-display);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.qr-panel__business strong{
  font-family:var(--font-display);
  font-size:1rem;
}

.qr-panel__business span{
  color:rgba(255,255,255,.72);
  font-size:.88rem;
}

.qr-panel__back-btn{
  appearance:none;
  border:1px solid rgba(231,237,246,.28);
  min-height:48px;
  padding:0 20px;
  border-radius:14px;
  justify-self:start;
  background:rgba(255,255,255,.055);
  color:#e7edf6;
  font-family:var(--font-display);
  font-weight:800;
  cursor:pointer;
  transition:background 180ms ease, transform 180ms ease;
}

.qr-panel__back-btn:hover{
  background:rgba(255,255,255,.10);
  transform:translateY(-1px);
}

@media (max-width:759px){
  .rc-flow{
    row-gap:16px;
  }

  .qr-panel{
    width:min(96vw, 620px);
  }

  .qr-panel__shell{
    padding:10px;
    border-radius:30px;
  }

  .qr-panel__inner{
    min-height:unset;
    padding:30px 20px 22px;
    grid-template-columns:1fr;
    grid-template-areas:
      "heading"
      "qr"
      "meta";
    gap:22px;
  }

  .qr-panel__discount{
    width:104px;
    right:14px;
    top:-14px;
  }

  .qr-panel__discount strong{
    font-size:1.72rem;
  }

  .qr-panel__discount small{
    font-size:.74rem;
  }

  .qr-panel__heading{
    padding-right:78px;
  }

  .qr-panel__title{
    max-width:100%;
    font-size:clamp(1.75rem, 7vw, 2.45rem);
  }

  .qr-panel__lead{
    font-size:.95rem;
  }

  .qr-panel__code-frame{
    width:min(78vw, 300px);
  }

  .qr-panel__back-btn{
    width:100%;
    justify-self:stretch;
  }
}

@media (prefers-reduced-motion: reduce){
  .details-panel,
  .qr-panel{
    transition:none !important;
  }
}

.coupon-wallet { min-width: 0; color: white; }
.wallet-heading { margin: 0 0 10px; font-weight: 700; font-size: 1rem; }
.wallet-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.wallet-actions button { flex: 1 1 160px; min-height: 46px; padding: 12px 14px; border: 1px solid #8d9bae; border-radius: 9px; background: #02050b; color: white; font: 700 .85rem/1.3 'DM Sans', sans-serif; cursor: pointer; }
.wallet-actions button:hover { border-color: #ff344d; box-shadow: 0 0 15px #ff163833; }
.wallet-actions button:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.wallet-actions button:disabled { cursor: wait; opacity: .65; }
.wallet-status { margin: 10px 0 0; color: #c4cddd; font-size: .8rem; line-height: 1.55; }

.details-panel__description{
  max-width:58ch;
  margin:-4px 0 2px;
  color:rgba(255,255,255,.74);
  font-size:.96rem;
  line-height:1.55;
}
@media (min-width: 760px){
  .coupon-details{grid-template-columns:repeat(2,minmax(0,1fr));}
  .coupon-details__row--wide{grid-column:1/-1;}
}