/**
 * forge-funnel-blocks.css — the shared BLOCK LIBRARY (proven, brand-adaptive).
 * Loaded after forge-funnel.css and before a funnel's own custom_css. Everything the
 * blocks in lib/funnel-blocks.ts need to look like the real funnels lives here, styled
 * ONCE and driven by --f-* brand variables. Promoted from the Sanionair build so every
 * funnel inherits the same tuned look. No review block (dropped by decision).
 * Plan: plans/2026-07-18-funnel-block-library-bulk-duplicate.md
 */

/* tighter, mobile-first column + top breathing room */
.f-funnel { max-width: 480px; padding: 30px 18px 24px; }

/* headers — landing headline and question headers share the big size */
.f-h1 { text-align: center; font-weight: 800; font-size: 31px; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 12px; }
.f-h2 { font-weight: 800; font-size: 31px; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 8px; }
.f-sub { margin: 0 0 6px; font-size: 14px; }
.f-hint { color: #5a5f66; }
.f-hint .arw { color: #e8830c; font-weight: 700; }

/* hero image — fixed band, faces framed (imgix crop set on the URL by the builder) */
.f-media-hero { margin: 12px 0; }
.f-media-hero img { border-radius: 14px; width: 100%; height: auto; display: block; }

/* text answer bars */
.f-answers { display: grid; gap: 11px; margin-top: 14px; }
.f-answer { display: block; width: 100%; text-align: left; padding: 16px 18px; border: 0; border-radius: 9px;
  background: var(--f-accent, #059669); color: var(--f-accent-fg, #fff); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.f-answer:active { transform: scale(.99); }

/* icon answer-cards (the Ja/Nee squares) — icon centered, label bottom-centered */
.f-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin: 14px 0; }
.f-choice-card { position: relative; display: flex; align-items: center; justify-content: center; min-height: 172px;
  background: var(--f-accent, #059669); color: var(--f-accent-fg, #fff); border: 0; border-radius: 16px; padding: 18px; cursor: pointer; font: inherit; font-weight: 700; }
.f-choice-card:active { transform: scale(.99); }
.f-choice-ic { width: 60px; height: 60px; }
.f-choice-lbl { position: absolute; left: 0; right: 0; bottom: 15px; text-align: center; font-size: 18px; }

/* image answer cards */
.f-answer-media { padding: 0; overflow: hidden; flex-direction: column; align-items: stretch; text-align: center; }
.f-answer-media img { width: 100%; height: 118px; object-fit: cover; display: block; }
.f-answer-media span { padding: 12px 14px; }

/* form fields with a left icon + optional verified badge */
.f-field2 { position: relative; display: flex; align-items: center; background: #fff; border: 1px solid #e6e8ec; border-radius: 12px; padding: 0 14px; margin-bottom: 10px; }
.f-field2 .ic { font-size: 17px; margin-right: 10px; }
.f-field2 input, .f-field2 select { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; padding: 15px 0; color: var(--f-fg, #111827); }
.f-field2 input::placeholder { color: #9aa0a6; }

/* CTA button */
.f-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 17px; border: 0; border-radius: 11px;
  background: var(--f-accent, #059669); color: var(--f-accent-fg, #fff); font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; }
.f-btn[disabled] { opacity: .6; }