/* ── Forms ── */

.form-page h1 { text-align: center; }
#dynamic-content .form-page h1::after { left: 50%; transform: translateX(-50%); }

.form-intro {
    text-align: center;
    margin: -4px auto 4px !important;
    max-width: 86ch !important;
    color: var(--text-dim) !important;
}

.form-intro a { white-space: nowrap; }

form {
    display: grid;
    /* Name, phone, email on one row; year, make, model on the next */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 1.2vh, 14px) clamp(10px, 1.2vw, 16px);
    width: 100%;
    max-width: 780px;
    padding: clamp(14px, 2.4vh, 26px) clamp(16px, 2vw, 26px);
    border-radius: var(--r-panel);
    background: var(--steel), var(--grain);
    border: 1px solid rgba(255,255,255,0.07);
    border-top: 3px solid var(--orange);
    box-shadow: var(--steel-edge), var(--steel-shadow);
}

form .full { grid-column: 1 / -1; }

form .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

form label {
    font-family: 'Russo One', sans-serif;
    font-size: 0.74rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--teal-text);
}

form input,
form textarea {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    background: linear-gradient(180deg, #0B0B0B, #141414);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--r-ctl);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.04);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

form input::placeholder,
form textarea::placeholder { color: #7C7C7C; }

form input:hover,
form textarea:hover { border-color: rgba(255,255,255,0.22); }

form input:focus,
form textarea:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.7), 0 0 0 2px rgba(9,166,136,0.35), 0 0 16px rgba(9,166,136,0.2);
}

form input:user-invalid,
form textarea:user-invalid { border-color: #E0543B; }

form textarea {
    height: clamp(72px, 11vh, 120px);
    resize: vertical;
}

form button {
    grid-column: 1 / -1;
    justify-self: stretch;
    min-height: 48px;
    padding: 12px 24px;
    background: linear-gradient(180deg, #C9500F 0%, var(--orange-btn) 55%, #A23A07 100%);
    color: #fff;
    border: 1px solid #D35A18;
    border-radius: var(--r-ctl);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 10px 22px -10px rgba(193,74,9,0.9);
    font-family: 'Russo One', sans-serif;
    font-size: 0.92rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.18s var(--ease), box-shadow 0.18s ease, background 0.18s ease;
}

form button:hover,
form button:focus-visible {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 14px 26px -10px rgba(224,100,42,0.95);
}

form button:active { transform: translateY(0); }
form button:disabled { opacity: 0.7; cursor: progress; transform: none; }

.form-status {
    grid-column: 1 / -1;
    min-height: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    text-align: center;
}

.form-status:empty { display: none; }

.form-status.success,
.form-status.error {
    padding: 10px 14px;
    border-radius: var(--r-ctl);
}

.form-status.success { color: #D9F5EE; background: rgba(6,122,100,0.25); border: 1px solid rgba(9,166,136,0.5); }
.form-status.error   { color: #FBE3DD; background: rgba(178,48,27,0.22); border: 1px solid rgba(224,84,59,0.55); }

/* Optional reminder opt-in */
form .remind-opt label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-body);
    cursor: pointer;
    line-height: 1.45;
}

form .remind-opt input {
    width: 18px;
    height: 18px;
    min-height: 0;
    flex: none;
    margin-top: 2px;
    padding: 0;
    box-shadow: none;
    accent-color: var(--teal);
}

@media (max-height: 800px) and (min-width: 701px) {
    form textarea { height: 64px; }
    .form-page { gap: 8px; }
    #dynamic-content .form-page h1 { margin-bottom: 6px; }
}

@media (max-width: 700px) {
    form { grid-template-columns: 1fr 1fr; }
    form .field:nth-child(1), form .field:nth-child(6) { grid-column: 1 / -1; }
    form textarea { height: 64px; }
}

@media (max-width: 400px) {
    form { grid-template-columns: 1fr; }
}

@media (max-height: 860px) and (min-width: 701px) {
    form input { min-height: 38px; padding: 7px 12px; }
    form textarea { height: 56px; }
    form button { min-height: 42px; }
    form label { font-size: 0.7rem; }
}

@media (max-height: 760px) and (min-width: 701px) {
    form { gap: 6px 12px; padding-top: 12px; padding-bottom: 12px; }
    .form-intro { margin-bottom: 0 !important; }
}