/**
 * Shared styling for rendered lead-form steps/fields (the output of
 * render.js's buildStep()/initStep()). Loaded by both the live form
 * (index.html) and the admin question builder's live preview
 * (dash.ezlender.org/questions.html), same reasoning as render.js itself:
 * one shared source so the preview can never visually drift from what
 * actually ships.
 *
 * Every selector is scoped under .ez-rendered-form so it can never bleed
 * into either host page's own chrome/editor styling, and so neither host
 * page's own CSS (e.g. questions.html's admin-editor input styling) can
 * bleed into rendered form content — scoped selectors always win regardless
 * of stylesheet load order.
 *
 * Relies on --primary/--primary-light/--primary-dark/--gray custom
 * properties being defined by the host page's own :root block (both
 * index.html and questions.html already define matching values).
 */

/* Multi-step slide transition. Lives here, not in either host page's own
   stylesheet, because the whole point of the admin builder's live preview
   is to look and behave exactly like what a lead sees — an admin clicking
   Previous/Next in the preview should see the same slide (and the same
   quick fade, timed so outgoing content doesn't linger over the nav
   buttons once .form-content's height snaps to the new active step) that
   the live form plays. Requires the host page's .ez-rendered-form element
   itself to be the positioning context for its .step children. index.html's
   #form-content carries this class directly; the admin preview's wrapper
   (created fresh by renderPreview() in dash.ezlender.org/js/questions.js)
   does too. */
.ez-rendered-form {
    position: relative;
    display: flex;
    flex-direction: column;
}
.ez-rendered-form .step {
    position: absolute;
    width: 100%;
    opacity: 0;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.1s ease-out;
}
.ez-rendered-form .step.active {
    opacity: 1;
    transform: translateX(0);
    position: relative;
}
.ez-rendered-form .step.prev {
    transform: translateX(-100%);
}

.ez-rendered-form h2 {
    color: var(--primary-dark);
    margin-bottom: 2.5rem;
    margin-top: 2.5rem;
    font-size: 1.8rem;
    text-align: center;
}
.ez-rendered-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--gray);
}
.ez-rendered-form input[type="text"],
.ez-rendered-form input[type="email"],
.ez-rendered-form input[type="tel"],
.ez-rendered-form input[type="number"],
.ez-rendered-form input[type="date"],
.ez-rendered-form input[type="file"],
.ez-rendered-form textarea,
.ez-rendered-form select {
    width: 100%;
    padding: 13px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    transition: border 0.3s;
    margin-bottom: 1.5rem;
    font-family: inherit;
}
/* Explicit height + line-height on the single-line controls only — not
   textarea, which sizes itself to multiple rows and would collapse to
   one line if either applied to it too. Turns out padding/box-height
   headroom was never the issue (confirmed by testing: giving the box
   more room around the text didn't move where descenders clipped) —
   the input's rendered/clipped text area is bound by line-height
   itself, regardless of how much extra padding surrounds it. Setting
   line-height: 53px directly (matching height) gives that line box
   enough room to stop clipping g/y/p/q/j. */
.ez-rendered-form input[type="text"],
.ez-rendered-form input[type="email"],
.ez-rendered-form input[type="tel"],
.ez-rendered-form input[type="number"],
.ez-rendered-form input[type="date"],
.ez-rendered-form input[type="file"],
.ez-rendered-form select {
    height: 53px;
    line-height: 53px;
}
.ez-rendered-form input:focus,
.ez-rendered-form textarea:focus,
.ez-rendered-form select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
}
.ez-rendered-form .options {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}
.ez-rendered-form .option-card {
    padding: 1.5rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    background: #fafafa;
    text-align: center;
}
.ez-rendered-form .option-card:hover {
    border-color: var(--primary-light);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.ez-rendered-form .option-card.selected {
    border-color: var(--primary);
    background: #eff6ff;
    box-shadow: 0 8px 20px rgba(37,99,235,0.15);
}
/* The generic label rule above adds margin-bottom:0.5rem for the space a
   field's own label needs above its input — irrelevant here since the
   label *is* the card's content. Without a sublabel (no <br> — see
   buildRadioCards in render.js, which only adds one when opt.sublabel is
   set) that margin is just dead space under the option's title, making
   sublabel-less cards taller than they need to be. */
.ez-rendered-form .option-card label:not(:has(br)) {
    margin-bottom: 0;
}
.ez-rendered-form .checkbox-group {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}
.ez-rendered-form .checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 500;
}
.ez-rendered-form .checkbox-item:hover {
    border-color: var(--primary-light);
}
.ez-rendered-form .checkbox-item input {
    width: auto;
    margin: 0;
}
/* max_selectable reached — locked out until something else is unchecked
   (see render.js's enforceMaxSelectable). Disabled, not hidden, so it stays
   clear why an option can't be picked right now. */
.ez-rendered-form .checkbox-item:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}
.ez-rendered-form .checkbox-item:has(input:disabled):hover {
    border-color: #e5e7eb;
}
.ez-rendered-form .input-wrapper {
    position: relative;
    margin-bottom: 1.5rem;
}
.ez-rendered-form .input-wrapper input {
    width: 100%;
    padding: 14px 16px;
    padding-left: 40px;
    padding-right: 50px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    transition: border 0.3s;
    height: 56px;
    /* No line-height here (was 56px, matching height above) — with
       box-sizing: border-box (index.html's global `* { box-sizing:
       border-box }`) and 28px of vertical padding + 4px of border baked
       into that 56px, the actual content box is only 24px tall. A
       56px line box doesn't fit in a 24px content box, so it clips —
       cutting descenders (g/y/p/q/j) off at the bottom. line-height:
       normal centers correctly within whatever content box is left. */
    line-height: normal;
    margin-bottom: 0;
}
.ez-rendered-form .input-wrapper input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
}
.ez-rendered-form .prefix,
.ez-rendered-form .suffix {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: #4b5563;
    pointer-events: none;
    width: 40px;
}
.ez-rendered-form .prefix { left: 0; padding-left: 16px; }
.ez-rendered-form .suffix { right: 0; padding-right: 16px; }
.ez-rendered-form .hint {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    color: #9ca3af;
    pointer-events: none;
}
.ez-rendered-form input[type="number"]::-webkit-inner-spin-button,
.ez-rendered-form input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ez-rendered-form input[type="number"] {
    -moz-appearance: textfield;
}
.ez-rendered-form .navigation {
    display: flex;
    justify-content: space-between;
    padding-top: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
    /* Pinned to the bottom of .ez-rendered-form's own flex column (see
       that rule above) via auto margin rather than position:absolute —
       absolute took it out of flow entirely, collapsing .ez-rendered-form
       to the height of just the active .step (itself position:absolute
       for every step except the active one, which is why only it and
       .navigation exist as real flex items here) and overlapping the
       nav on top of the question content instead of sitting below it. */
    margin-top: auto;
}
.ez-rendered-form button {
    padding: 14px 32px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    flex: 1;
    min-width: 120px;
}
.ez-rendered-form .btn-prev { background: #9ca3af; color: white; }
.ez-rendered-form .btn-prev:hover { background: #6b7280; }
.ez-rendered-form .btn-next { background: var(--primary); color: white; }
.ez-rendered-form .btn-next:hover { background: var(--primary-dark); }
.ez-rendered-form .btn-next:disabled { background: #9ca3af; cursor: not-allowed; }
.ez-rendered-form .upload-feedback {
    margin-top: 8px;
    font-size: 0.9rem;
    color: var(--primary);
}
@media (max-width: 768px) {
    .ez-rendered-form h2 { font-size: 1.6rem; }
    .ez-rendered-form .options { grid-template-columns: 1fr; }
    .ez-rendered-form .option-card { padding: 1.2rem; }
}
@media (max-width: 480px) {
    .ez-rendered-form input,
    .ez-rendered-form select,
    .ez-rendered-form textarea {
        padding: 12px 14px;
        font-size: 1rem;
    }
    /* Previous/Next|Submit stay side by side down to narrow phones —
       tighter padding/font-size than desktop so neither label wraps. */
    .ez-rendered-form .navigation button {
        padding: 12px 16px;
        font-size: 1rem;
        min-width: 0;
    }
}