/* =========================================================
   DEALER PAGE
   Layout/styling specific to dealer.html only.
   ========================================================= */

/* ---------- Hero brochure button (replaces breadcrumb) ---------- */
.dealer-hero__brochure {
  order: 2;
}

/* ---------- Centered content wrapper ----------
   Explicit centered container for the Intro, Dealer Benefits and
   Dealer Enquiry sections, layered on top of the site's existing
   .container so these blocks sit balanced in the middle of the
   viewport on desktop/laptop rather than hugging the left edge. */
.dealer-intro .container,
.dealer-benefits .container,
.dealer-enquiry .container {
  max-width: 1100px;
  width: calc(100% - 48px);
  margin: 0 auto;
}

/* ---------- Intro ----------
   .section-head is capped at 720px with no auto margin by default
   (see base.css), which left-aligns it inside the wider container
   instead of centering it. Overridden here and centered so the
   heading, paragraph and pills all sit in the middle of the page. */
.dealer-intro .section-head {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: var(--space-4);
  text-align: center;
}

.dealer-intro .lede {
  max-width: 760px;
  margin-inline: auto;
}

.dealer-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.dealer-chip {
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-forest);
}

/* ---------- Dealer Benefits ---------- */
.dealer-benefits__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-4);
  max-width: 100%;
  margin-inline: auto;
}

.dealer-benefits__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.dealer-benefits__check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(76,122,87,0.12);
  color: var(--color-leaf);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.15rem;
}

.dealer-benefits__check svg { width: 15px; height: 15px; }

.dealer-benefits__list h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.dealer-benefits__list p { font-size: 0.88rem; margin-bottom: 0; }

/* ---------- Dealer Enquiry Form ---------- */
.dealer-enquiry__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-6);
  align-items: start;
}

.dealer-enquiry__intro h2 { margin-block: var(--space-2) var(--space-3); }

.dealer-form {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.dealer-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.dealer-form .form-group {
  margin-bottom: var(--space-3);
}

.dealer-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 0.4rem;
}

.dealer-form input,
.dealer-form textarea {
  width: 100%;
  background: rgba(255,255,255,0.95);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-ink);
  resize: vertical;
}

.dealer-form input::placeholder,
.dealer-form textarea::placeholder {
  color: var(--color-ink-soft);
}

.dealer-form input.is-invalid,
.dealer-form textarea.is-invalid {
  border-color: #C0473D;
}

.form-error {
  display: none;
  color: #F3A79C;
  font-size: 0.78rem;
  margin-top: 0.35rem;
}

.form-error.is-visible { display: block; }

.form-success {
  display: none;
  color: var(--color-leaf-light);
  font-size: 0.88rem;
  font-weight: 600;
  margin-top: var(--space-2);
  text-align: center;
}

.form-success.is-visible { display: block; }

/* =========================================================
   RESPONSIVE — Dealer page specific
   ========================================================= */

@media (max-width: 1024px) {
  .dealer-enquiry__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

@media (max-width: 768px) {
  .dealer-intro .container,
  .dealer-benefits .container,
  .dealer-enquiry .container {
    width: 100%;
  }

  .dealer-intro .section-head,
  .dealer-intro .lede {
    text-align: left;
    margin-inline: 0;
  }

  .dealer-chips { justify-content: flex-start; }

  .dealer-benefits__list { grid-template-columns: 1fr; }
  .dealer-form .form-row { grid-template-columns: 1fr; gap: 0; }
  .dealer-hero__brochure .btn { padding: 0.75rem 1.3rem; font-size: 0.85rem; }
}

@media (max-width: 480px) {
  .dealer-form { padding: var(--space-3); }
}