/* ============================================================
   FACILITY APPLICATION PAGE — facility_application.css
   Combined account-creation + facility-application form
   (app/views/facility_applications/new.html.erb).

   This page reuses two existing stylesheets wholesale rather than
   redefining their look:
     - registration.css    → .registration-page / .registration-card /
                              .registration-field / .registration-input
                              (Section 1: Create Your Account)
     - customer_facility.css → .cmf-form__* / .cmf-btn (Section 2:
                              Facility Application, same nested-field
                              markup as customer/facilities/new.html.erb)

   Everything here is only what's unique to combining the two: a wider
   card (the facility section's 3-wide address/availability rows don't
   fit the registration card's normal ~420-560px width), section labels/
   dividers to separate "Create Your Account" from "Facility Application",
   and the intro copy. Classes prefixed `fap-` to avoid collisions with
   either source file.
   ============================================================ */

/* Widen the shared registration card for this page only. Selector
   specificity (.registration-card.fap-card, two classes on the same
   element) intentionally matches/beats registration.css's own
   `.registration-page .registration-card` desktop rule regardless of
   stylesheet load order. */
.registration-page .registration-card.fap-card {
  --rp-card-w: 660px;
}

@media (min-width: 1025px) {
  .registration-card.fap-card {
    width: var(--rp-card-w);
    max-width: none;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .registration-card.fap-card {
    max-width: var(--rp-card-w);
  }
}

.fap-intro {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--rp-muted);
}

/* Section dividers/labels inside the combined form — visually separate
   "Create Your Account" from "Facility Application" and "Verify Your
   Role" without introducing a whole new card-within-a-card. */
.fap-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rp-accent-alt);
}

.fap-section-hint {
  margin-top: -0.35rem;
  margin-bottom: 0.25rem;
}

.fap-divider {
  height: 1px;
  border: 0;
  background: var(--rp-border);
  margin: 0.5rem 0 0.25rem;
}

/* The nested facility fields (cmf-form__*) come from customer_facility.css,
   which is normally scoped inside the authenticated dashboard shell and
   relies on --csb-* custom properties for its colors/sizing (all with
   sane fallbacks, e.g. `var(--csb-primary, #1d4ed8)`) — so it renders
   correctly here with no --csb-* tokens defined at all. This block only
   nudges spacing/typography so it reads as part of the same registration
   card rather than a visually distinct component pasted in. */
.fap-form .cmf-form__section-label {
  margin: 0;
}

.fap-form .cmf-form__field {
  margin-bottom: 0.9rem;
}

@media (max-width: 640px) {
  .registration-card.fap-card {
    max-width: none;
  }
}