/* FlowForm — Typeform-style form engine styles. Generic: copy with flowform.js.
 * Theme via CSS custom properties — override these on the .ff-root element:
 *   --ff-bg        page background            (default #000)
 *   --ff-fg        text                        (default #fff)
 *   --ff-accent    brand accent                (default #f5304a)
 *   --ff-accent-2  progress gradient end       (default lighter accent)
 *   --ff-dim       secondary text              (default #666)
 *   --ff-line      borders                     (default #333)
 *   --ff-panel     card background             (default #111)
 *   --ff-font-body / --ff-font-mono            font stacks
 */
.ff-root{
  --ff-bg:#000; --ff-fg:#fff; --ff-accent:#f5304a; --ff-accent-2:#ff7a8c;
  --ff-dim:#666; --ff-dim-2:#999; --ff-line:#333; --ff-line-2:#1a1a1a; --ff-panel:#111;
  --ff-font-body:'Inter',system-ui,sans-serif; --ff-font-mono:'DM Mono',ui-monospace,monospace;
  position:fixed; inset:0; background:var(--ff-bg); color:var(--ff-fg); overflow:hidden;
  font-family:var(--ff-font-body);
}
.ff-root::after{content:'';position:absolute;right:-30vh;bottom:-30vh;width:70vh;height:70vh;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--ff-accent) 8%,transparent),transparent 65%);pointer-events:none}

/* progress */
.ff-progress{position:absolute;top:0;left:0;right:0;height:3px;background:var(--ff-line-2);z-index:200}
.ff-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--ff-accent),var(--ff-accent-2));
  transition:width .45s cubic-bezier(.22,1,.36,1)}

/* stage + question screens */
.ff-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 24px}
.ff-q{position:absolute;width:100%;max-width:640px;opacity:0;pointer-events:none;transform:translateY(48px);
  transition:opacity .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1)}
.ff-q.active{opacity:1;pointer-events:auto;transform:translateY(0)}
.ff-q.leave-up{opacity:0;transform:translateY(-48px)}

.ff-num{font-family:var(--ff-font-mono);font-size:13px;color:var(--ff-accent);letter-spacing:1px;margin-bottom:14px}
.ff-num .ff-arr{font-size:15px}
.ff-q h2{font-size:clamp(24px,4.2vw,34px);font-weight:700;line-height:1.25;margin:0 0 10px}
.ff-sub{font-size:15px;color:var(--ff-dim);line-height:1.7;margin:0 0 34px}
.ff-sub a{color:var(--ff-accent)}
.ff-sub:empty{margin-bottom:24px}

/* text inputs — bare underline style */
.ff-field-row{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.ff-field label{display:block;font-family:var(--ff-font-mono);font-size:11px;color:var(--ff-dim);
  letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px}
.ff-input{width:100%;background:transparent;border:none;border-bottom:2px solid var(--ff-line);border-radius:0;
  color:var(--ff-fg);font-family:var(--ff-font-body);font-size:clamp(20px,3vw,26px);font-weight:500;
  padding:6px 2px 12px;outline:none;transition:border-color .25s;caret-color:var(--ff-accent)}
.ff-input::placeholder{color:var(--ff-line)}
.ff-input:focus{border-bottom-color:var(--ff-accent)}
.ff-hint{font-family:var(--ff-font-mono);font-size:12px;color:var(--ff-dim);margin-top:12px;min-height:18px}
.ff-hint.ok{color:#4a4}
.ff-hint.bad{color:#f66}

/* option cards */
.ff-opts{display:flex;flex-direction:column;gap:10px}
.ff-opt{display:flex;align-items:center;gap:14px;padding:15px 18px;border:1px solid var(--ff-line);border-radius:10px;
  cursor:pointer;transition:border-color .15s,background .15s;user-select:none;background:rgba(255,255,255,.012)}
.ff-opt:hover{border-color:var(--ff-dim);background:var(--ff-panel)}
.ff-opt.selected{border-color:var(--ff-accent);background:color-mix(in srgb,var(--ff-accent) 14%,transparent)}
.ff-opt.flash{animation:ff-optflash .3s}
@keyframes ff-optflash{50%{background:color-mix(in srgb,var(--ff-accent) 32%,transparent)}}
.ff-keycap{width:26px;height:26px;border:1px solid var(--ff-line);border-radius:5px;display:flex;align-items:center;
  justify-content:center;font-family:var(--ff-font-mono);font-size:12px;color:var(--ff-dim-2);flex-shrink:0;background:var(--ff-bg)}
.ff-opt.selected .ff-keycap{border-color:var(--ff-accent);color:var(--ff-accent)}
.ff-body{flex:1;display:flex;flex-direction:column}
.ff-name{font-size:15px;font-weight:600}
.ff-detail{font-size:12px;color:var(--ff-dim);margin-top:2px}
.ff-price{font-family:var(--ff-font-mono);font-size:20px;letter-spacing:0;color:var(--ff-fg)}
.ff-price span{font-size:11px;color:var(--ff-dim)}

/* actions */
.ff-actions{display:flex;align-items:center;gap:16px;margin-top:34px}
.ff-ok{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;background:var(--ff-fg);color:var(--ff-bg);
  font-family:var(--ff-font-body);font-size:15px;font-weight:700;border:none;border-radius:8px;cursor:pointer;
  transition:transform .15s,box-shadow .2s}
.ff-ok:hover{transform:translateY(-2px);box-shadow:0 8px 28px color-mix(in srgb,var(--ff-accent) 25%,transparent)}
.ff-ok:disabled{opacity:.3;cursor:not-allowed;transform:none;box-shadow:none}
.ff-key-hint{font-family:var(--ff-font-mono);font-size:12px;color:var(--ff-dim)}
.ff-key-hint b{color:var(--ff-dim-2);font-weight:500}
.ff-skip{font-family:var(--ff-font-mono);font-size:12px;color:var(--ff-dim);cursor:pointer;
  text-decoration:underline dotted;background:none;border:none}
.ff-skip:hover{color:var(--ff-fg)}

/* agree row */
.ff-agree{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border:1px solid var(--ff-line);
  border-radius:10px;cursor:pointer;transition:border-color .15s}
.ff-agree:hover{border-color:var(--ff-dim)}
.ff-agree.selected{border-color:var(--ff-accent);background:color-mix(in srgb,var(--ff-accent) 14%,transparent)}
.ff-agree input{width:18px;height:18px;margin-top:2px;accent-color:var(--ff-accent);flex-shrink:0;cursor:pointer}
.ff-agree-txt{font-size:13px;color:var(--ff-dim-2);line-height:1.8}
.ff-agree-txt a{color:var(--ff-accent)}

/* error banner */
.ff-err{position:absolute;top:70px;left:50%;transform:translateX(-50%) translateY(-8px);z-index:300;
  background:rgba(204,68,68,.16);border:1px solid rgba(204,68,68,.4);color:#f88;
  padding:11px 18px;border-radius:8px;font-size:13px;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;max-width:90vw}
.ff-err.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* nav pad */
.ff-navpad{position:absolute;right:24px;bottom:24px;display:flex;gap:2px;z-index:100}
.ff-navpad button{width:42px;height:42px;background:var(--ff-accent);border:none;color:#fff;font-size:17px;
  cursor:pointer;transition:opacity .2s,filter .2s}
.ff-navpad button:hover{filter:brightness(1.15)}
.ff-navpad button:disabled{opacity:.35;cursor:not-allowed}
.ff-up{border-radius:8px 0 0 8px}
.ff-down{border-radius:0 8px 8px 0}

/* spinner */
.ff-spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(0,0,0,.25);
  border-top-color:var(--ff-bg);border-radius:50%;animation:ff-spin .6s linear infinite;
  vertical-align:middle;margin-right:8px}
@keyframes ff-spin{to{transform:rotate(360deg)}}

@media(max-width:560px){
  .ff-field-row{grid-template-columns:1fr;gap:20px}
  .ff-q h2{font-size:22px}
  .ff-navpad{right:16px;bottom:16px}
  .ff-stage{padding:0 18px}
}