/* Warranty registration page — shared across brands. Layered on top of
   contact.css (the form standard: .contact-page, .contact-form, .form-errors,
   .contact-page__thanks, .contact-form__hp); only what differs lives here.
   Colors come from the brand tokens; neutrals match contact.css. */

.warranty-page {
    max-width: 760px;
}

.warranty-page__intro p:last-child {
    margin-bottom: 0;
}

.warranty-form__required-note {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 1.5rem;
}

/* Fieldsets group the product and the person; the legend reads as a subheading. */
.warranty-form__group {
    border: 0;
    padding: 0;
    margin: 0 0 1.5rem;
    min-width: 0;
}

.warranty-form__legend {
    float: none;
    width: auto;
    font-size: 1.15rem;
    font-weight: 700;
    padding: 0;
    margin-bottom: 1rem;
    color: var(--brand-primary-dark, #111);
}

/* Two-up rows (serial + date, name + email); single column on small screens. */
.warranty-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.5rem;
}

@media (max-width: 576px) {
    .warranty-form__row {
        grid-template-columns: 1fr;
    }
}

/* Hints sit between the control and any error; #555 on white clears AA for small text. */
.warranty-form .form-text {
    color: #555;
}

/* Keep the focus ring on the brand color rather than Bootstrap's blue. */
.warranty-form .form-control:focus-visible,
.warranty-form .form-select:focus-visible {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.3);
    outline: 2px solid transparent;
}

/* Legal text below the form. Body-copy sizing comes from .legal-body (legal.css
   is not loaded here, so the essentials are restated). */
.warranty-terms {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
    color: #333;
    font-size: 0.95rem;
    line-height: 1.7;
}

.warranty-terms__heading {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.warranty-terms h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 1.5rem 0 0.5rem;
}

.warranty-terms a {
    color: var(--brand-link, var(--brand-primary));
    font-weight: 700;
}