/* Tab win-back card (js/winback.js): a slightly tilted paper ticket with an orange offset shadow and a torn bottom edge */
.ks-wb { --paper: #fff6f2; --ink: #181b2e; --orange: #fe5621;
  position: fixed; z-index: 2147482000; left: 50%; top: calc(20px + env(safe-area-inset-top, 0px)); width: min(440px, calc(100vw - 32px));
  filter: drop-shadow(8px 8px 0 var(--orange));              /* the shadow lives on the outer layer so the torn edge doesn't clip it */
  transform: translate(-50%, -140%) rotate(-1.5deg); opacity: 0;
  transition: transform .55s cubic-bezier(.3, 1.35, .5, 1), opacity .25s ease; }
.ks-wb-paper { position: relative; box-sizing: border-box; padding: 22px 22px 30px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-bottom: 0;
  /* torn ticket edge along the bottom */
  -webkit-mask: radial-gradient(7px at 50% 100%, transparent 96%, #000) bottom / 18px 100% repeat-x;
          mask: radial-gradient(7px at 50% 100%, transparent 96%, #000) bottom / 18px 100% repeat-x;
  font: 400 15px/1.55 Outfit, system-ui, sans-serif; }
.ks-wb.ks-in { transform: translate(-50%, 0) rotate(-1.5deg); opacity: 1; }
.ks-wb.ks-out { transform: translate(-50%, -30px) rotate(-1.5deg); opacity: 0; transition: transform .3s ease-in, opacity .3s ease-in; }
.ks-wb h2 { margin: 0 28px 10px 0; font: 800 18px/1.2 Outfit, system-ui, sans-serif; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); text-wrap: balance; }
.ks-wb-mark { display: inline-block; width: .95em; height: .95em; vertical-align: -.1em; margin-left: .15em; color: var(--orange); }
.ks-wb p { margin: 0 0 18px; color: #474a60; }
.ks-wb-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ks-wb-row button { font: 700 13px/1 Outfit, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: 14px 16px; border-radius: 0; cursor: pointer; transition: transform .15s ease, background-color .15s ease, color .15s ease; }
.ks-wb-yes { flex: 1 1 200px; background: var(--ink); color: #fff; border: 2px solid var(--ink); }
.ks-wb-yes:hover { background: var(--orange); border-color: var(--orange); }
.ks-wb-no { flex: 0 1 auto; background: transparent; color: var(--ink); border: 2px solid rgba(24, 27, 46, .35); }
.ks-wb-no:hover { border-color: var(--ink); }
.ks-wb-row button:active { transform: translateY(1px); }
.ks-wb-row button:focus-visible, .ks-wb-x:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.ks-wb-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; background: transparent; color: var(--ink); font: 400 22px/1 Outfit, sans-serif; cursor: pointer; border-radius: 50%; }
.ks-wb-x:hover { background: rgba(24, 27, 46, .07); }
.ks-wb-spark { position: fixed; z-index: 2147482001; color: #fe5621; width: 14px; height: 14px; pointer-events: none; transform: translate(-50%, -50%); animation: ks-wb-spark .8s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes ks-wb-spark { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(180deg) scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ks-wb, .ks-wb.ks-in, .ks-wb.ks-out { transform: translate(-50%, 0) rotate(-1.5deg); transition: opacity .2s linear; } }
@media print { .ks-wb, .ks-wb-spark { display: none !important; } }
.ks-wb-spark .ks-wb-mark { width: 100%; height: 100%; margin: 0; vertical-align: top; }