/* ============================================================
   FORM BUILDER — STRUCTURAL CSS
   ------------------------------------------------------------
   Scope: everything is nested under .fb-shell so this stylesheet
   cannot leak into the host page. The host site wraps the form
   builder elements like so:

     <div class="fb-shell">
       <div id="error-message"></div>
       <div id="progress_wrapper">...</div>
       <div id="form-wrapper"></div>
     </div>

   Theming:
   ALL colors, fonts, and brand values come from CSS variables
   that theme.css can override.

   Class naming:
   The builder owns its own classes (fb-*) — no Bootstrap class
   names are required. Sites can still load Bootstrap for the
   rest of the page; the builder just doesn't depend on it.
   ============================================================ */


/* ----- Variable defaults -------------------------------------
   Base palette. theme.css overrides any/all of these.
   ------------------------------------------------------------ */
.fb-shell {
    --fb-primary:           #0d6efd;
    --fb-primary-hover:     #0a58ca;
    --fb-primary-contrast:  #ffffff;
    --fb-focus-ring:        rgba(13, 110, 253, 0.25);
    --fb-input-border:      #a4a4a4;
    --fb-input-bg:          #ffffff;
    --fb-text:              #212529;
    --fb-muted:             #6c757d;
    --fb-font-body:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fb-font-heading:      var(--fb-font-body);
    --fb-radius:            0.5rem;

    /* Per-button color tokens. Default to the primary palette so
       buttons look unified out of the box. Override any individual
       variable in theme.css (or at runtime via JS) to recolor a
       single button role without disturbing the others. */

    /* Next */
    --fb-btn-next-bg:       var(--fb-primary);
    --fb-btn-next-hover:    var(--fb-primary-hover);
    --fb-btn-next-text:     var(--fb-primary-contrast);

    /* Submit */
    --fb-btn-submit-bg:     var(--fb-primary);
    --fb-btn-submit-hover:  var(--fb-primary-hover);
    --fb-btn-submit-text:   var(--fb-primary-contrast);

    /* Prev (back). Outlined by default. */
    --fb-btn-prev-bg:       transparent;
    --fb-btn-prev-hover:    rgba(0, 0, 0, 0.04);
    --fb-btn-prev-text:     var(--fb-text);
    --fb-btn-prev-border:   var(--fb-input-border);

    color: var(--fb-text);
    font-family: var(--fb-font-body);
}


/* ----- Error banner ----------------------------------------- */
.fb-shell #error-message {
    border-radius: var(--fb-radius);
}


/* ----- Progress bar ----------------------------------------- */
.fb-shell #progress_wrapper {
    display: none;
    margin-bottom: 1.25rem;
}

.fb-shell #percent {
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    color: var(--fb-muted);
}

.fb-shell .progress {
    height: 0.625rem;
    border-radius: var(--fb-radius);
    background-color: rgba(0, 0, 0, 0.08);
}

.fb-shell #progress-bar {
    background-color: var(--fb-primary);
}


/* ----- Slide titles ----------------------------------------- */
.fb-shell .form-step h2 {
    font-family: var(--fb-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    color: var(--fb-text);
    margin: 0 0 0.5rem 0;
}

.fb-shell .form-step h3 {
    font-family: var(--fb-font-heading);
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
    color: var(--fb-muted);
    margin: 0 0 1.25rem 0;
}

.fb-shell .form-step h3:empty {
    display: none;
}


/* ----- Field wrapper + label -------------------------------- */
.fb-shell .fb-field {
    margin-bottom: 1rem;
}

.fb-shell .fb-label {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 500;
    color: var(--fb-text);
}


/* ----- Radio-as-button (.bttn) ------------------------------
   The actual <input type="radio"> is hidden; .bttn is the
   visible click target. logic.js toggles .active.
   ------------------------------------------------------------ */
.fb-shell .fb-radio-option {
    display: block;
    margin: 0.5rem 0;
    cursor: pointer;
}

.fb-shell input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fb-shell .bttn {
    display: block;
    background: var(--fb-primary);
    color: var(--fb-primary-contrast);
    border: 2px solid var(--fb-primary);
    border-radius: var(--fb-radius);
    padding: 0.75rem 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    user-select: none;
    min-height: 48px;
    line-height: 1.4;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.fb-shell .bttn:hover {
    background: var(--fb-primary-hover);
    border-color: var(--fb-primary-hover);
}

.fb-shell .bttn.active,
.fb-shell .bttn:active {
    background: var(--fb-primary-hover);
    border-color: var(--fb-primary-hover);
    transform: translateY(1px);
}


/* ----- Checkbox ---------------------------------------------
   Native checkbox sized up and tinted with accent-color so the
   brand color shows through on the check. flex-start alignment
   keeps the box anchored to the first line of text on multi-line
   labels (e.g., TOS acceptance copy).
   ------------------------------------------------------------ */
.fb-shell .fb-checkbox-option {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin: 0.75rem 0;
    cursor: pointer;
    user-select: none;
}

.fb-shell .fb-checkbox-option input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    accent-color: var(--fb-primary);
    cursor: pointer;
    margin: 0.1875rem 0 0 0; /* nudge to align with first line of label */
}

.fb-shell .fb-checkbox-label {
    color: var(--fb-text);
    font-size: 0.95rem;
    line-height: 1.4;
}

/* ----- Multi-checkbox grid ----------------------------------
   builder.js wraps consecutive checkbox fields in this grid.
   2 columns on desktop, 1 column on mobile. Lone checkboxes
   skip the grid entirely (rendered in plain .fb-field).
   ------------------------------------------------------------ */
.fb-shell .fb-checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 0;
    margin-bottom: 1rem;
}

.fb-shell .fb-checkbox-grid .fb-checkbox-option {
    margin: 0.5rem 0;
}

@media (max-width: 600px) {
    .fb-shell .fb-checkbox-grid {
        grid-template-columns: 1fr;
    }
}


/* ----- Text / email / tel / select inputs --------------------
   Styled by element type, not class — per-field classes in
   slides.json are optional and cumulative.
   ------------------------------------------------------------ */
.fb-shell input[type="text"],
.fb-shell input[type="email"],
.fb-shell input[type="tel"],
.fb-shell input[type="number"],
.fb-shell select {
    width: 100%;
    background: var(--fb-input-bg);
    color: var(--fb-text);
    border: 2px solid var(--fb-input-border);
    border-radius: var(--fb-radius);
    padding: 0.75rem 1rem;
    font-size: 1.125rem;
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.fb-shell input[type="text"]:focus,
.fb-shell input[type="email"]:focus,
.fb-shell input[type="tel"]:focus,
.fb-shell input[type="number"]:focus,
.fb-shell select:focus {
    outline: none;
    border-color: var(--fb-primary);
    box-shadow: 0 0 0 0.2rem var(--fb-focus-ring);
}

.fb-shell ::placeholder {
    color: var(--fb-muted);
    opacity: 1;
}

/* Custom select arrow (replaces the native one we suppressed via appearance:none). */
.fb-shell select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='gray'><path d='M5 7l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 14px 14px;
    padding-right: 2.25rem;
}


/* ============================================================
   ACTION BUTTONS (next / prev / submit)
   ------------------------------------------------------------
   Layout:
     .fb-button-row              — flex container holding the buttons
                                   (default: space-between)
     .fb-button-row-left         — pin row to the left
     .fb-button-row-center       — center the row
     .fb-button-row-right        — pin row to the right
     .fb-btn                     — base button (typography, radius)
   Roles:
     .fb-btn-prev                — back / cancel (outlined)
     .fb-btn-next                — primary forward action
     .fb-btn-submit              — final submit
   Width modifier:
     .fb-btn-wide                — full-width (Submit gets this by default)
   ============================================================ */

.fb-shell .fb-button-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.fb-shell .fb-button-row-left   { justify-content: flex-start; }
.fb-shell .fb-button-row-center { justify-content: center;     }
.fb-shell .fb-button-row-right  { justify-content: flex-end;   }

.fb-shell .fb-btn {
    display: inline-block;
    border-radius: var(--fb-radius);
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    line-height: 1.4;
    text-align: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* ---- Next ---- */
.fb-shell .fb-btn-next {
    background:    var(--fb-btn-next-bg);
    border-color:  var(--fb-btn-next-bg);
    color:         var(--fb-btn-next-text);
}
.fb-shell .fb-btn-next:hover,
.fb-shell .fb-btn-next:focus {
    background:    var(--fb-btn-next-hover);
    border-color:  var(--fb-btn-next-hover);
    color:         var(--fb-btn-next-text);
    box-shadow:    0 0 0 0.2rem var(--fb-focus-ring);
    outline:       none;
}

/* ---- Submit ---- */
.fb-shell .fb-btn-submit {
    background:    var(--fb-btn-submit-bg);
    border-color:  var(--fb-btn-submit-bg);
    color:         var(--fb-btn-submit-text);
}
.fb-shell .fb-btn-submit:hover,
.fb-shell .fb-btn-submit:focus {
    background:    var(--fb-btn-submit-hover);
    border-color:  var(--fb-btn-submit-hover);
    color:         var(--fb-btn-submit-text);
    box-shadow:    0 0 0 0.2rem var(--fb-focus-ring);
    outline:       none;
}

/* ---- Prev ---- */
.fb-shell .fb-btn-prev {
    background:    var(--fb-btn-prev-bg);
    border-color:  var(--fb-btn-prev-border);
    color:         var(--fb-btn-prev-text);
    font-weight:   500;
}
.fb-shell .fb-btn-prev:hover,
.fb-shell .fb-btn-prev:focus {
    background:    var(--fb-btn-prev-hover);
    border-color:  var(--fb-btn-prev-border);
    color:         var(--fb-btn-prev-text);
    outline:       none;
}

/* ---- Width modifier ---- */
.fb-shell .fb-btn-wide {
    display: block;
    width: 100%;
}


/* ============================================================
   AUTO-ADVANCE INTERSTITIAL
   ------------------------------------------------------------
   Used by slides that have `autoAdvanceMs` set in slides.json.
   The fill bar animates from 0 to 100% over the configured
   duration, then the slide auto-advances. Pure CSS animation —
   builder.js only sets the transition duration inline so it
   matches autoAdvanceMs exactly.
   ============================================================ */

.fb-shell .fb-interstitial-wrapper {
    margin: 1.5rem 0;
}

.fb-shell .fb-interstitial-track {
    height: 0.5rem;
    background: rgba(0, 0, 0, 0.08);
    border-radius: var(--fb-radius);
    overflow: hidden;
}

.fb-shell .fb-interstitial-fill {
    height: 100%;
    width: 0;
    background: var(--fb-primary);
    border-radius: var(--fb-radius);
}


/* ----- TCPA / disclaimer block ------------------------------ */
.fb-shell #disclaimer {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--fb-muted);
    text-align: center;
}

.fb-shell #disclaimer a {
    color: var(--fb-muted);
    text-decoration: underline;
}


/* ----- Hidden fields ---------------------------------------- */
.fb-shell input[type="hidden"] {
    display: none;
}