/* CSI event feedback: glowing prompt under the sticky ticket bar + liquid-glass form. */
.ev-cta.has-fb { bottom: calc(var(--dock-space) + 52px); }
body.csi-ev-single { padding-bottom: 58px; }

.ev-fbpill {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--dock-space) - 4px); width: min(calc(100% - 24px), 560px); height: 46px;
  display: block; padding: 0; border: 0; border-radius: 999px; overflow: hidden; isolation: isolate;
  background: none; color: #fff; cursor: pointer; text-decoration: none;
  animation: fbPillIn .8s .45s cubic-bezier(.2,1.2,.3,1) both, fbBreath 2.6s 1.2s ease-in-out infinite;
}
@keyframes fbPillIn { from { opacity: 0; transform: translate(-50%, 90%); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes fbBreath {
  0%, 100% { box-shadow: 0 0 14px 1px rgba(255,204,92,.34), 0 10px 26px -8px rgba(0,0,0,.7); }
  50% { box-shadow: 0 0 30px 6px rgba(255,204,92,.62), 0 10px 26px -8px rgba(0,0,0,.7); }
}
.ev-fbpill::before {
  content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(from 0deg, #ffd978, #ff9f43 18%, rgba(255,217,120,.15) 38%, #fff4cf 52%, #ffc24d 72%, rgba(255,217,120,.15) 86%, #ffd978);
  animation: fbSpin 3.6s linear infinite;
}
@keyframes fbSpin { to { rotate: 360deg; } }
.ev-fbpill::after {
  content: ""; position: absolute; z-index: -1; inset: 1.5px; border-radius: inherit;
  background: linear-gradient(180deg, rgba(58,44,18,.94), rgba(24,19,10,.96));
  box-shadow: inset 0 1px .5px rgba(255,255,255,.34);
}
.ev-fbpill .in { display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%; padding: 0 14px; font-size: 13.5px; }
.ev-fbpill b { min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #ffe9b0; }
.ev-fbpill .spark { color: #ffd978; font-size: 15px; animation: fbTwinkle 1.5s ease-in-out infinite; }
@keyframes fbTwinkle { 50% { opacity: .45; scale: .8; } }
.ev-fbpill:active { scale: .97; }
.ev-fbpill.is-done { animation: fbPillIn .8s .45s cubic-bezier(.2,1.2,.3,1) both; box-shadow: 0 10px 26px -8px rgba(0,0,0,.7); }
.ev-fbpill.is-done::before { background: rgba(48,209,88,.55); animation: none; }
.ev-fbpill.is-done::after { background: linear-gradient(180deg, rgba(20,48,30,.95), rgba(10,26,16,.97)); }
.ev-fbpill.is-done b { color: #a8f5bf; }
.ev-fbpill.is-done em { font-style: normal; font-weight: 700; color: #fff; }
.ev-fbpill.is-done svg { width: 18px; height: 18px; flex: none; color: #63e68a; }

/* ---------- the form ---------- */
.fb {
  position: fixed; inset: 0; z-index: 2147483100; display: flex; align-items: center; justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background: rgba(3,3,5,.62); opacity: 0; transition: opacity .35s; overflow: hidden; color: #fff;
  font-family: var(--font);
}
.fb.is-in { opacity: 1; }
.fb-orb { position: absolute; border-radius: 50%; filter: blur(52px); pointer-events: none; animation: fbDrift 12s ease-in-out infinite alternate; }
.fb-orb.a { width: 62vmin; height: 62vmin; left: -12vmin; top: -8vmin; background: rgba(255,190,80,.62); }
.fb-orb.b { width: 70vmin; height: 70vmin; right: -18vmin; bottom: -14vmin; background: rgba(96,120,255,.6); animation-delay: -4s; }
.fb-orb.c { width: 46vmin; height: 46vmin; right: 8vmin; top: 4vmin; background: rgba(102,207,213,.46); animation-delay: -8s; }
@keyframes fbDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(9vmin, 7vmin) scale(1.16); } }

.fb-panel {
  position: relative; isolation: isolate; width: min(100%, 540px); max-height: 100%; min-height: min(580px, 100%);
  display: flex; flex-direction: column; padding: 16px 22px 22px; border-radius: 36px; overflow: hidden;
  background: linear-gradient(155deg, rgba(255,255,255,.2), rgba(255,255,255,.055) 42%, rgba(255,255,255,.1));
  -webkit-backdrop-filter: blur(30px) saturate(200%); backdrop-filter: blur(30px) saturate(200%);
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,.62), inset 0 -1px 1px rgba(255,255,255,.2), inset 0 0 26px rgba(255,255,255,.07), 0 34px 80px -18px rgba(0,0,0,.8);
  transform: translateY(26px) scale(.965); transition: transform .6s cubic-bezier(.2,1.25,.35,1);
}
.fb.is-in .fb-panel { transform: none; }
.fb-panel::before { /* specular rim */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: conic-gradient(from 210deg, rgba(255,255,255,.75), rgba(255,255,255,.08) 28%, rgba(255,225,160,.5) 52%, rgba(255,255,255,.08) 74%, rgba(255,255,255,.75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.fb-panel::after { /* highlight sweeping the top of the glass */
  content: ""; position: absolute; z-index: -1; left: -20%; right: -20%; top: -46%; height: 76%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.2), transparent);
}

.fb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fb-ic {
  flex: none; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.1); box-shadow: inset 0 1px .5px rgba(255,255,255,.45), inset 0 0 0 .5px rgba(255,255,255,.2);
}
.fb-ic:active { scale: .9; }
.fb-ic[hidden] { visibility: hidden; display: grid; }
.fb-ic svg { width: 18px; height: 18px; }
.fb-prog { flex: 1; height: 7px; border-radius: 9px; overflow: hidden; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.fb-prog i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffb340, #ffe39a); box-shadow: 0 0 12px rgba(255,204,92,.8); transition: width .6s cubic-bezier(.3,1.3,.5,1); }

.fb-stage { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; padding: 14px 2px; }
.fb-step { animation: fbStep .45s cubic-bezier(.2,1,.3,1) both; }
.fb-step.is-back { animation-name: fbStepBack; }
@keyframes fbStep { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes fbStepBack { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.fb-count { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #ffd978; margin: 0 0 12px; }
.fb-q { margin: 0 0 26px; font-size: clamp(23px, 5.8vw, 29px); line-height: 1.18; font-weight: 700; letter-spacing: -.015em; outline: none; }

.fb-stars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; border: 0; margin: 0; padding: 0; }
.fb-stars legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fb-star { display: block; padding: 11% 10%; border-radius: 22px; cursor: pointer; background: rgba(255,255,255,.055); box-shadow: inset 0 1px .5px rgba(255,255,255,.22), inset 0 0 0 .5px rgba(255,255,255,.1); transition: background .25s, scale .3s cubic-bezier(.3,1.9,.5,1); }
.fb-star input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fb-star svg { display: block; width: 100%; aspect-ratio: 1; overflow: visible; }
.fb-star path { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.42); stroke-width: 1.3; stroke-linejoin: round; transition: fill .2s, stroke .2s; }
.fb-star.on { background: rgba(255,204,92,.13); }
.fb-star.on path { fill: url(#fbGold); stroke: #fff0c4; }
.fb-star.on svg { filter: drop-shadow(0 0 9px rgba(255,204,92,.7)); }
.fb-star:has(input:focus-visible) { outline: 2px solid #ffe39a; outline-offset: 2px; }
.fb-star.pop { animation: fbPop .45s cubic-bezier(.3,1.9,.5,1); }
@keyframes fbPop { 40% { scale: 1.18; } }
.fb-label { min-height: 24px; margin: 16px 0 0; text-align: center; font-weight: 700; font-size: 16px; color: #ffe39a; }

.fb-field {
  display: block; width: 100%; padding: 15px 17px; border: 0; border-radius: 22px; outline: none; resize: none; color: #fff;
  font: 500 16px/1.45 var(--font); background: rgba(0,0,0,.24);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.34), inset 0 0 0 .5px rgba(255,255,255,.24), 0 1px 0 rgba(255,255,255,.12);
  transition: box-shadow .25s;
}
.fb-field::placeholder { color: rgba(255,255,255,.45); }
.fb-field:focus { box-shadow: inset 0 2px 8px rgba(0,0,0,.34), inset 0 0 0 1.2px #ffd978, 0 0 22px rgba(255,204,92,.22); }
textarea.fb-field { height: 158px; }
.fb-hint { margin: 10px 2px 0; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.72); }
.fb-err { margin: 10px 2px 0; font-size: 13.5px; font-weight: 600; color: #ff9a8f; }

.fb-next {
  position: relative; overflow: hidden; width: 100%; height: 56px; margin-top: 6px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 16px/1 var(--font); color: #2a1b00; background: linear-gradient(180deg, #ffe7a6, #ffbe45);
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,.8), 0 12px 28px -8px rgba(255,180,60,.65); transition: opacity .25s, scale .2s;
}
.fb-next:active { scale: .97; }
.fb-next[disabled] { opacity: .35; cursor: default; box-shadow: inset 0 1px .5px rgba(255,255,255,.6); }
.fb-next.is-loading { color: transparent; pointer-events: none; }
.fb-next.is-loading::before { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border-radius: 50%; border: 2.5px solid #2a1b00; border-right-color: transparent; animation: fbSpin .7s linear infinite; }

.fb-done { text-align: center; animation: fbStep .5s both; }
.fb-done h2 { margin: 0 0 6px; font-size: 26px; line-height: 1.15; letter-spacing: -.015em; }
.fb-done p { margin: 0 auto 16px; max-width: 390px; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.76); }
.fb-cert { display: block; width: 100%; aspect-ratio: 2000 / 1414; margin: 0 0 16px; border-radius: 12px; background: rgba(255,255,255,.1); box-shadow: 0 0 34px rgba(255,204,92,.4), 0 16px 36px -10px rgba(0,0,0,.7); animation: fbCert .8s .15s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes fbCert { from { opacity: 0; transform: translateY(18px) scale(.92) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
a.fb-next { display: flex; align-items: center; justify-content: center; text-decoration: none; color: #2a1b00 !important; }
.fb-text { width: 100%; height: 46px; margin-top: 4px; border: 0; background: none; cursor: pointer; color: rgba(255,255,255,.75); font: 600 14.5px var(--font); }
html.fb-lock, html.fb-lock body { overflow: hidden; }

@media (max-height: 640px) {
  .fb-panel { min-height: 0; }
  .fb-q { margin-bottom: 16px; font-size: 21px; }
  textarea.fb-field { height: 110px; }
}