.coupon-seal{--coupon-seal-red:var(--destructive);--coupon-seal-back:var(--muted);--coupon-seal-ink:var(--muted-foreground);isolation:isolate;border:1px dashed color-mix(in oklch, var(--coupon-seal-red) 72%, var(--foreground));border-radius:var(--radius);background:var(--coupon-seal-back);width:9.5rem;height:3.25rem;box-shadow:0 .3rem .75rem color-mix(in oklch, var(--coupon-seal-red) 20%, transparent);padding:.1875rem;transition:box-shadow .3s ease-out,transform .3s ease-out;position:relative;overflow:hidden}.coupon-seal__back{border-radius:calc(var(--radius) - .1875rem);background:var(--coupon-seal-back);color:var(--coupon-seal-ink);justify-content:flex-end;align-items:flex-start;display:flex;position:absolute;inset:.1875rem;overflow:hidden}.coupon-seal__preview{text-align:right;text-overflow:clip;opacity:0;transform-origin:100% 0;width:4.25rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.6875rem;font-weight:800;line-height:1;transition:opacity .2s ease-out 60ms,transform .3s ease-out;position:absolute;top:.42rem;right:.3rem;overflow:hidden;transform:translate(.4rem,-.3rem)scale(.85)}.coupon-seal__face{z-index:1;border-radius:calc(var(--radius) - .1875rem);background:var(--coupon-seal-red);color:var(--destructive-foreground);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);justify-content:center;align-items:center;transition:clip-path .3s ease-out;display:flex;position:absolute;inset:.1875rem}.coupon-seal__label{z-index:1;letter-spacing:0;font-size:.8125rem;font-weight:800;line-height:1;position:relative}.coupon-seal__scissors{width:.95rem;height:.95rem}.coupon-seal--redeemed{border-color:color-mix(in oklch, var(--coupon-seal-ink) 55%, transparent);background:var(--card);box-shadow:0 .2rem .5rem color-mix(in oklch, var(--foreground) 10%, transparent)}.coupon-seal--redeemed .coupon-seal__face{background:var(--card);color:var(--foreground);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.coupon-seal--redeemed .coupon-seal__label{justify-content:center;align-items:center;gap:.4rem;width:100%;min-width:0;padding-inline:.35rem;font-size:.75rem;display:flex}.coupon-seal__code{overflow-wrap:anywhere;text-align:center;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.coupon-seal--redeemed .coupon-seal__fold,.coupon-seal--redeemed .coupon-seal__preview{display:none}.coupon-seal--redeemed:is(:hover,:focus-visible,:active),.coupon-seal--redeemed.coupon-seal--preview-open{border-color:var(--dji-indigo);background:var(--card);box-shadow:0 .35rem .75rem color-mix(in oklch, var(--foreground) 12%, transparent)}.coupon-seal__fold{z-index:2;background:color-mix(in oklch, var(--coupon-seal-back) 86%, var(--background));clip-path:polygon(100% 0,100% 100%,0 0);width:1.45rem;height:1.45rem;box-shadow:-.25rem .3rem .45rem color-mix(in oklch, var(--foreground) 22%, transparent);opacity:0;transform-origin:100% 0;border-bottom-left-radius:.25rem;transition:opacity .18s ease-out,transform .3s ease-out;position:absolute;top:.1875rem;right:.1875rem;transform:translate(55%,-55%)rotate(-12deg)scale(.15)}.coupon-seal:is(:hover,:focus-visible,:active),.coupon-seal--preview-open{box-shadow:0 .55rem 1rem color-mix(in oklch, var(--coupon-seal-red) 28%, transparent);transform:translateY(-.125rem)}.coupon-seal:is(:hover,:focus-visible,:active) .coupon-seal__face,.coupon-seal--preview-open .coupon-seal__face{clip-path:polygon(0 0,48% 0,100% 62%,100% 100%,0 100%)}.coupon-seal:is(:hover,:focus-visible,:active) .coupon-seal__fold,.coupon-seal--preview-open .coupon-seal__fold{opacity:1;transform:translate(0)rotate(0)scale(1)}.coupon-seal:is(:hover,:focus-visible,:active) .coupon-seal__preview,.coupon-seal--preview-open .coupon-seal__preview{opacity:.9;transform:translate(0)scale(1)}.coupon-seal--redeemed:is(:hover,:focus-visible,:active) .coupon-seal__face,.coupon-seal--redeemed.coupon-seal--preview-open .coupon-seal__face{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}@media (prefers-reduced-motion:reduce){.coupon-seal,.coupon-seal__preview,.coupon-seal__face,.coupon-seal__fold{transition-duration:.01ms}.coupon-seal:is(:hover,:focus-visible,:active),.coupon-seal--preview-open{transform:none}}
