/*
 * Best Lift — forms.css
 * Purpose: Request A Quote, Smart Quote Builder (multi-step), Track My
 *          Request, and shared form-field/alert styling.
 * Phase ref: Phase 4-5
 *
 * v35 BUG FIX: this file previously contained a stray duplicate of
 * main.css's content (copy-paste mistake) — none of the classes
 * quote-builder.php / track-request.php / request_quote_form.php
 * actually use (.quote-builder__step, .form-field, .form-alert,
 * .ticket-result, etc.) existed anywhere, so those pages rendered with
 * zero styling (raw unstyled HTML). Rewritten from scratch to match the
 * markup those three files actually render.
 *
 * Loaded after main.css/variables.css in header.php, so brand tokens
 * (--color-primary, --space-*, etc.) are already available.
 */

/* ---------------------------------------------------------------------
 * Shared: page hero blocks (quote-builder-hero, track-request-hero) —
 * same visual pattern as main.css's .about-hero/.projects-hero.
 * ------------------------------------------------------------------- */
.quote-builder-hero,
.track-request-hero {
    padding: var(--space-xl) 0 var(--space-lg);
    background: var(--color-bg-light);
    text-align: center;
}

.quote-builder-hero p,
.track-request-hero p {
    max-width: 640px;
    margin: 0 auto;
}

/* ---------------------------------------------------------------------
 * Shared: form fields, labels, inputs — used by both the Quote Builder
 * steps and the Track My Request form.
 * ------------------------------------------------------------------- */
.form-field {
    margin-bottom: var(--space-sm);
}

.form-field label {
    display: block;
    font-weight: 600;
    font-size: var(--font-size-sm);
    margin-bottom: 4px;
    color: var(--color-text-heading);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field select {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid #d9d9d9;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--font-size-base);
    background: var(--color-bg-white);
}

.form-field input:focus,
.form-field select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(75, 0, 114, 0.15);
}

.form-field--submit {
    margin-top: var(--space-md);
}

/* Honeypot field (leads.php) — invisible to real visitors, catches bots
   that auto-fill every input on a form. */
.form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Spam-challenge math question (spam_challenge.php) */
.form-spam-challenge {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-sm);
}

.form-spam-challenge input {
    width: 80px;
    padding: 0.5rem;
    border: 1px solid #d9d9d9;
    border-radius: var(--radius-sm);
}

.form-spam-challenge__hint {
    color: var(--color-text-body);
    font-size: 0.8rem;
}

/* Flash message after a form submit (leads.php / tickets.php's
   Post/Redirect/Get pattern) */
.form-alert {
    border-radius: var(--radius-sm);
    padding: 0.9rem 1.1rem;
    margin-bottom: var(--space-md);
    font-size: var(--font-size-sm);
}

.form-alert--success {
    background: #E8F5EC;
    border: 1px solid var(--color-accent);
    color: #0F8247;
}

.form-alert--error {
    background: #FDECEC;
    border: 1px solid var(--color-danger);
    color: var(--color-danger);
}

/* ---------------------------------------------------------------------
 * Smart Quote Builder (task 4.5) — multi-step fieldset wizard
 * ------------------------------------------------------------------- */
.quote-builder {
    padding: var(--space-lg) 0 var(--space-xl);
}

.quote-builder__inner {
    max-width: 620px;
}

.quote-builder__progress {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin: 0 0 var(--space-lg);
    padding: 0;
    list-style: none;
}

.quote-builder__progress li {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-light);
    color: var(--color-text-body);
    font-weight: 700;
    font-size: var(--font-size-sm);
    border: 2px solid transparent;
}

.quote-builder__progress li.is-active {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
}

.quote-builder__progress li.is-complete {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
}

.quote-builder__form {
    background: var(--color-bg-white);
}

.quote-builder__step {
    display: none;
    border: none;
    padding: 0;
    margin: 0;
}

.quote-builder__step.is-active {
    display: block;
}

.quote-builder__step legend {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-heading);
    margin-bottom: var(--space-md);
    padding: 0;
    width: 100%;
}

/* Focus outline is intentionally visible here — forms.js moves keyboard
   focus to the legend on each step change for screen-reader/keyboard
   users, so this needs to be obviously focusable, not hidden. */
.quote-builder__step legend:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

.quote-builder__nav {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.quote-builder__nav .btn {
    flex: 1;
}

.quote-builder__step[data-step="1"] .quote-builder__nav {
    justify-content: flex-end;
}

/* No-JS fallback (forms.js's docblock): if forms.js fails to load, every
   step shows stacked and the form still works end to end via the
   browser's own required/type validation on final submit. */
.no-js .quote-builder__step {
    display: block !important;
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-bg-light);
    margin-bottom: var(--space-lg);
}

.no-js .quote-builder__nav [data-step-next],
.no-js .quote-builder__nav [data-step-prev] {
    display: none;
}

.no-js .quote-builder__progress {
    display: none;
}

/* ---------------------------------------------------------------------
 * Track My Request (task 5.4)
 * ------------------------------------------------------------------- */
.track-request {
    padding: var(--space-lg) 0 var(--space-xl);
}

.track-request__inner {
    max-width: 560px;
}

.track-request__form {
    margin-bottom: var(--space-lg);
}

.ticket-result {
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.ticket-result__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.ticket-result__header h2 {
    margin: 0;
}

.ticket-result__status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 700;
    background: var(--color-bg-white);
}

.ticket-result__status--new { color: var(--color-primary); }
.ticket-result__status--assigned { color: #B0740C; }
.ticket-result__status--in-progress { color: #0F6FB0; }
.ticket-result__status--resolved,
.ticket-result__status--closed { color: var(--color-accent); }

.ticket-result__timeline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-md);
}

.ticket-result__timeline li {
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-white);
    color: var(--color-text-body);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.ticket-result__timeline li.is-complete {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
}

.ticket-result__desc,
.ticket-result__meta {
    font-size: var(--font-size-sm);
    margin-bottom: 4px;
}

@media (min-width: 768px) {
    .quote-builder__inner,
    .track-request__inner {
        margin: 0 auto;
    }
}

/* =====================================================================
 * v44 — textarea + hint styling (they had none), request-a-quote section
 * ===================================================================== */
.form-field textarea {
    width: 100%;
    min-height: 120px;
    padding: 0.7rem 0.9rem;
    border: 1px solid #d9d9d9;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--font-size-base);
    background: var(--color-bg-white);
    resize: vertical;
}

.form-field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(75, 0, 114, 0.15);
}

.form-field__hint {
    display: block;
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--color-text-body);
}

.quote-form {
    padding: var(--space-lg) 0 var(--space-xl);
}

.quote-form__inner {
    max-width: 620px;
}

.quote-form__intro {
    margin-bottom: var(--space-md);
}

@media (max-width: 420px) {
    .quote-builder__nav {
        flex-wrap: wrap;
    }

    .quote-builder__nav .btn {
        flex: 1 1 100%;
    }
}