/* ==========================================================================
   Form pages (E1): login, register and contact.
   Markup: customer/login.php, customer/register.php, page/contact.php.
   Fields and buttons come from components.css and base.css; this file only
   lays the pages out. The form sits straight on the page, never in a card.
   ========================================================================== */

/* --- Login and register: one narrow column ------------------------------ */
.sp-auth { max-width: 420px; margin: 0 auto; padding: 48px 0 var(--sp-section); }
.sp-auth h1 { margin: 0 0 10px; }
.sp-auth-lead { margin: 0 0 28px; color: var(--sp-ink-soft); }
.sp-auth form { margin: 0; }
.sp-auth .sp-btn { margin-top: 6px; }
.sp-auth-alt { margin: 22px 0 0; font-size: var(--sp-fs-ui); color: var(--sp-ink-soft); text-align: center; }

/* --- Contact: details and form inside the information-page frame -------- */
.sp-contact-content { min-width: 0; }
.sp-contact-grid { display: grid; gap: 28px; max-width: 760px; }
.sp-contact-info h2 { margin: 0 0 8px; }
.sp-contact-info p { margin: 0; color: var(--sp-ink-soft); }
.sp-contact-details { display: grid; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; }
.sp-contact-details strong { font-weight: 600; }
.sp-contact-details a { display: inline-flex; align-items: center; min-height: var(--sp-hit); }
.sp-contact-form .sp-btn { min-height: 56px; }
.sp-contact-form { max-width: 620px; margin: 0; }
.sp-contact-req { color: var(--sp-ink-soft); }
.sp-contact-note { margin: 12px 0 0; font-size: var(--sp-fs-sm); color: var(--sp-ink-soft); }

@media (min-width: 900px) {
    .sp-contact-details { display: flex; flex-wrap: wrap; gap: 12px 28px; }
}
@media (max-width: 559px) {
    .sp-auth { padding-top: 28px; }
    .sp-auth .sp-btn, .sp-contact-form .sp-btn { width: 100%; }
}