/* ============================================================
   QKB Offer Widget — floating tab + multi-step modal
   Design notes:
   - Rainbow is used as an ACCENT, not a wash. Dark neutral base
     keeps it premium; gradient carries the eye to the discount
     number and the primary CTA only.
   - Type is tight, high-contrast, generous tracking on the small
     caps — mirrors the clean look of the reference without copying.
   ============================================================ */

#qkb-offer-root{
  --qkb-rainbow: linear-gradient(101deg,#ff2d2d 0%,#ff7a00 15%,#ffc814 30%,#28c76f 48%,#1e9bf0 66%,#7c4dff 83%,#ff4fa3 100%);
  --qkb-ink:#0d0d0f;
  --qkb-panel:#141417;
  --qkb-line:rgba(255,255,255,.10);
  --qkb-dim:#9b9ba3;
  --qkb-radius:10px;
  --qkb-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ---------------- Floating tab ---------------- */
#qkb-offer-root .qkb-tab{
  position:fixed; left:0; bottom:32px; z-index:99990;
  display:flex; align-items:center; gap:11px;
  padding:0; border:0; border-radius:0 10px 10px 0;
  background:var(--qkb-ink);
  cursor:pointer; font-family:var(--qkb-font);
  box-shadow:0 8px 30px rgba(0,0,0,.34), 0 1px 0 rgba(255,255,255,.05) inset;
  overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s;
}
/* thin rainbow spine on the right edge of the tab */
#qkb-offer-root .qkb-tab::after{
  content:''; position:absolute; right:0; top:0; bottom:0; width:3px;
  background:var(--qkb-rainbow); background-size:100% 320%;
  animation:qkb-slide 6s ease-in-out infinite;
}
#qkb-offer-root .qkb-tab:hover{
  transform:translateX(4px);
  box-shadow:0 12px 38px rgba(0,0,0,.45);
}
#qkb-offer-root .qkb-tab-label{
  display:flex; align-items:center; gap:9px;
  padding:14px 16px 14px 18px;
  font-size:12.5px; font-weight:800; letter-spacing:.1em;
  line-height:1; text-transform:uppercase; color:#fff;
}
#qkb-offer-root .qkb-spark{
  width:7px; height:7px; border-radius:50%;
  background:var(--qkb-rainbow); background-size:340% 100%;
  animation:qkb-shift 4s linear infinite;
  box-shadow:0 0 9px rgba(255,120,180,.8);
  flex:0 0 auto;
}
#qkb-offer-root .qkb-x{
  display:flex; align-items:center; justify-content:center;
  width:26px; align-self:stretch; margin-left:-3px;
  border-left:1px solid var(--qkb-line);
  color:#8e8e96; font-size:13px; font-style:normal; line-height:1;
  transition:color .15s, background .15s;
}
#qkb-offer-root .qkb-x:hover{ color:#fff; background:rgba(255,255,255,.07); }

@keyframes qkb-shift{ 0%{background-position:0% 50%} 100%{background-position:340% 50%} }
@keyframes qkb-slide{ 0%,100%{background-position:50% 0%} 50%{background-position:50% 100%} }

/* ---------------- Overlay ---------------- */
#qkb-offer-root .qkb-ov{
  position:fixed; inset:0; z-index:99991;
  background:rgba(6,6,8,.62);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:24px; opacity:0;
  animation:qkb-fade .24s ease forwards;
}
@keyframes qkb-fade{ to{opacity:1} }

/* ---------------- Modal shell ---------------- */
#qkb-offer-root .qkb-modal{
  position:relative;
  display:grid; grid-template-columns:minmax(0,0.92fr) minmax(0,1fr);
  /* minmax(0,1fr) lets the row shrink under the 90vh cap so .qkb-body can scroll.
     With a plain `auto` row the body overflows a clipped modal instead, which on
     short viewports silently hides the consent copy and the coupon. */
  grid-template-rows:minmax(0,1fr);
  width:min(880px,100%); max-height:90vh;
  background:var(--qkb-panel);
  border:1px solid var(--qkb-line);
  border-radius:var(--qkb-radius);
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  font-family:var(--qkb-font);
  transform:translateY(14px) scale(.975); opacity:0;
  animation:qkb-pop .3s cubic-bezier(.2,.9,.25,1) forwards;
}
@keyframes qkb-pop{ to{transform:translateY(0) scale(1); opacity:1} }
/* rainbow hairline across the very top of the modal */
#qkb-offer-root .qkb-modal::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:4;
  background:var(--qkb-rainbow); background-size:220% 100%;
  animation:qkb-shift 8s linear infinite;
}

/* ---------------- Media panel ---------------- */
#qkb-offer-root .qkb-media{
  position:relative; min-height:452px;
  background:#101013 center/cover no-repeat;
  background-image:var(--qkb-img);
}
#qkb-offer-root .qkb-media::after{ /* readability + depth toward the seam */
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,0) 45%,rgba(20,20,23,.55) 100%);
}
/* fallback panel when no image is set */
#qkb-offer-root .qkb-media.is-fallback{
  background:
    radial-gradient(120% 90% at 20% 15%,rgba(255,255,255,.10),transparent 55%),
    var(--qkb-rainbow);
  background-size:auto, 260% 100%;
  animation:qkb-shift 14s linear infinite;
  display:flex; align-items:center; justify-content:center;
}
#qkb-offer-root .qkb-mark{
  position:relative; z-index:2; text-align:center; padding:28px;
  color:#fff; font-weight:900; letter-spacing:.03em; line-height:1.08;
  font-size:clamp(28px,3.4vw,40px);
  text-shadow:0 4px 24px rgba(0,0,0,.45);
}
#qkb-offer-root .qkb-mark small{
  display:block; margin-top:12px;
  font-size:11px; font-weight:700; letter-spacing:.3em;
  opacity:.9; text-transform:uppercase;
}

/* ---------------- Body ---------------- */
#qkb-offer-root .qkb-body{
  display:flex; flex-direction:column; justify-content:center;
  padding:52px 46px; text-align:center; min-height:452px;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  background:
    radial-gradient(90% 60% at 50% 0%,rgba(255,255,255,.045),transparent 60%),
    var(--qkb-panel);
}

#qkb-offer-root .qkb-close{
  position:absolute; top:14px; right:14px; z-index:5;
  width:32px; height:32px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.18); border-radius:50%;
  /* On mobile this button lands on the photo, over the storefront sign — it needs
     to read as a control against a bright image, not just against the dark panel. */
  background:rgba(8,8,10,.66);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#e8e8ee;
  font-size:17px; line-height:1; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  transition:background .16s, color .16s, transform .16s;
}
#qkb-offer-root .qkb-close:hover{ background:rgba(255,255,255,.12); color:#fff; transform:rotate(90deg); }

#qkb-offer-root .qkb-pre,
#qkb-offer-root .qkb-post{
  margin:0; color:#fff;
  font-size:12.5px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
}
#qkb-offer-root .qkb-pre{ opacity:.72; }
#qkb-offer-root .qkb-post{ opacity:.9; }

#qkb-offer-root .qkb-big{
  margin:10px 0 8px; line-height:.92;
  font-size:clamp(56px,7.6vw,84px); font-weight:900; letter-spacing:-.025em;
  background:var(--qkb-rainbow); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:qkb-shift 7s linear infinite;
}
#qkb-offer-root .qkb-post{ margin-bottom:30px; }

/* buttons */
#qkb-offer-root .qkb-btn{
  position:relative; display:block; width:100%;
  padding:16px 22px; border:0; border-radius:7px;
  background:var(--qkb-rainbow); background-size:220% 100%;
  color:#fff; font-family:inherit;
  font-size:14px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; overflow:hidden;
  animation:qkb-shift 7s linear infinite;
  box-shadow:0 8px 24px rgba(0,0,0,.34);
  transition:transform .16s cubic-bezier(.2,.8,.3,1), filter .16s, box-shadow .16s;
}
#qkb-offer-root .qkb-btn:hover:not(:disabled){
  transform:translateY(-2px); filter:saturate(1.15) brightness(1.06);
  box-shadow:0 14px 34px rgba(0,0,0,.44);
}
#qkb-offer-root .qkb-btn:active:not(:disabled){ transform:translateY(0); }
#qkb-offer-root .qkb-btn:disabled{ opacity:.5; cursor:progress; animation-play-state:paused; }

#qkb-offer-root .qkb-link{
  margin-top:18px; padding:6px; background:none; border:0;
  color:#fff; opacity:.62; font-family:inherit;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:underline; text-underline-offset:4px;
  cursor:pointer; transition:opacity .15s;
}
#qkb-offer-root .qkb-link:hover{ opacity:1; }

/* form */
#qkb-offer-root .qkb-input{
  width:100%; padding:15px 16px; margin-bottom:12px;
  border:1px solid rgba(255,255,255,.16); border-radius:7px;
  background:rgba(255,255,255,.05); color:#fff;
  font-size:15px; font-family:inherit;
  transition:border-color .16s, background .16s, box-shadow .16s;
}
#qkb-offer-root .qkb-input::placeholder{ color:#7e7e88; }
#qkb-offer-root .qkb-input:focus{
  outline:0; border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.09);
  box-shadow:0 0 0 3px rgba(120,140,255,.16);
}
#qkb-offer-root .qkb-hp{ position:absolute; left:-9999px; width:0; height:0; opacity:0; }

#qkb-offer-root .qkb-err{
  margin:0 0 10px; min-height:17px;
  color:#ff7b7b; font-size:12.5px; font-weight:500;
}

#qkb-offer-root .qkb-fine{
  margin:20px 0 0; color:var(--qkb-dim);
  font-size:10.5px; line-height:1.6; letter-spacing:.02em;
}
#qkb-offer-root .qkb-fine a{ color:#b9b9c2; text-decoration:underline; }

/* ---------------- Success ---------------- */
#qkb-offer-root .qkb-code{
  position:relative; margin:16px 0 8px; padding:20px 16px;
  border:1px dashed rgba(255,255,255,.28); border-radius:8px;
  background:rgba(255,255,255,.045);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(22px,3.4vw,29px); font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; /* belt & braces — WC stores codes lowercased */
  color:#fff; user-select:all; cursor:copy;
  transition:border-color .16s, background .16s;
}
#qkb-offer-root .qkb-code:hover{ border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.075); }
#qkb-offer-root .qkb-code::after{
  content:'click to copy'; position:absolute; right:12px; bottom:6px;
  font-family:var(--qkb-font); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:#6f6f79;
}
#qkb-offer-root .qkb-copied{
  height:16px; margin:0 0 10px;
  color:#3ddc84; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}

/* ---------------- Responsive ---------------- */
@media (max-width:820px){
  /* stacked: image row sizes to its aspect, body row takes the rest and scrolls */
  #qkb-offer-root .qkb-modal{
    grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr);
    width:min(430px,100%);
  }
  #qkb-offer-root .qkb-body{ min-height:0; }
  /* letterbox crop keeps the storefront sign in frame; falls back to the tall
     image (anchored to the top, where the sign lives) if no mobile crop is set */
  /* Honour the mobile crop's own aspect ratio so the storefront sign isn't
     re-cropped away by `cover`. Capped so the panel can't eat the whole screen
     on short viewports; the fallback path anchors top, where the sign lives. */
  #qkb-offer-root .qkb-media{
    min-height:0; aspect-ratio:880/662; max-height:34vh;
    background-image:var(--qkb-img-m, var(--qkb-img));
    background-position:center top;
  }
  #qkb-offer-root .qkb-media::after{
    background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(20,20,23,.85) 100%);
  }
  #qkb-offer-root .qkb-mark{ font-size:24px; }
  #qkb-offer-root .qkb-body{ padding:34px 26px 30px; min-height:auto; }
  #qkb-offer-root .qkb-big{ font-size:58px; }
  #qkb-offer-root .qkb-post{ margin-bottom:24px; }
  #qkb-offer-root .qkb-tab{ bottom:18px; }
  #qkb-offer-root .qkb-tab-label{ padding:12px 13px 12px 15px; font-size:11.5px; letter-spacing:.08em; }
}
@media (max-width:400px){
  #qkb-offer-root .qkb-big{ font-size:50px; }
  #qkb-offer-root .qkb-body{ padding:28px 20px 26px; }
}

@media (prefers-reduced-motion:reduce){
  #qkb-offer-root *{ animation:none !important; transition:none !important; }
}