/* Quote overlay (#msOverlay), light theme: cream background, black text.
   The red NEXT/SUBMIT buttons (.ms-next-btn) keep their original colors.
   Linked from partials/footer.html, so it loads after the site stylesheets
   and applies on every page that has the overlay. Every selector is scoped
   to .ms-overlay so it out-ranks the dark-theme rules in public/css/site-*.css. */

.ms-overlay { background: #F7F5EF; color: #111; }

.ms-overlay .ms-progress { background: rgba(0,0,0,0.08); }
.ms-overlay .ms-progress-bar { background: #111; }

.ms-overlay .ms-nav-logo-img path { fill: #111; }
.ms-overlay .ms-close { color: #111; border-color: rgba(0,0,0,0.25); }
.ms-overlay .ms-close:hover { color: #000; border-color: rgba(0,0,0,0.45); }

.ms-overlay .ms-question,
.ms-overlay .ms-success-heading,
.ms-overlay .ms-success-phone { color: #111; }
.ms-overlay .ms-step-sub,
.ms-overlay .ms-success-sub { color: rgba(0,0,0,0.6); }

/* Option tiles */
.ms-overlay .pill-option,
.ms-overlay .pill-option.dark { border-color: rgba(0,0,0,0.15); }
.ms-overlay .pill-option:hover { border-color: rgba(0,0,0,0.35); }
.ms-overlay .pill-option:has(input:checked) { border-color: #111; background: rgba(0,0,0,0.04); }
.ms-overlay .pill-label,
.ms-overlay .pill-option:has(input:checked) .pill-label { color: #111; }
.ms-overlay .pill-radio { border-color: rgba(0,0,0,0.35); }
.ms-overlay .pill-radio::after { background: #111; }
.ms-overlay .pill-option:has(input:checked) .pill-radio { border-color: #111; }
.ms-overlay .other-inline-input { color: #111; }
.ms-overlay .other-inline-input::placeholder { color: rgba(0,0,0,0.4); }

/* Contact fields */
.ms-overlay .ms-field-label { color: rgba(0,0,0,0.65); }
.ms-overlay .ms-field-input { background: #fff; border-color: rgba(0,0,0,0.15); color: #111; }
.ms-overlay .ms-field-input::placeholder { color: rgba(0,0,0,0.35); }
.ms-overlay .ms-field-input:focus { border-color: rgba(0,0,0,0.45); }
.ms-overlay .ms-field-input.error { border-color: var(--red); }

/* Links and small print */
.ms-overlay .ms-back,
.ms-overlay .ms-close-success { color: rgba(0,0,0,0.55); }
.ms-overlay .ms-back:hover,
.ms-overlay .ms-close-success:hover { color: #111; }
.ms-overlay .recaptcha-disclosure { color: rgba(0,0,0,0.55); }
.ms-overlay .recaptcha-disclosure a { color: rgba(0,0,0,0.75); }

.ms-overlay .ms-success-icon { color: #111; border-color: rgba(0,0,0,0.25); }


/* Bold lettering throughout the form (the questions are already semi-bold). */
.ms-overlay .pill-label,
.ms-overlay .pill-option:has(input:checked) .pill-label,
.ms-overlay .other-inline-input,
.ms-overlay .ms-field-label,
.ms-overlay .ms-field-input,
.ms-overlay .ms-step-sub,
.ms-overlay .ms-back,
.ms-overlay .ms-success-sub,
.ms-overlay .ms-close-success { font-weight: 600; }
.ms-overlay .ms-question,
.ms-overlay .ms-success-heading { font-weight: 700; }

/* Accent: each step sits on a white card with a red top edge and a soft
   shadow, so it stands out from the cream page. Inside the card the tiles and
   fields switch to cream, so they still read against the white. */
.ms-overlay .ms-step {
  background: #fff;
  border-top: 4px solid var(--red);
  box-shadow: 0 18px 50px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
  padding: 40px 36px 36px;
}
@media (max-width: 600px) { .ms-overlay .ms-step { padding: 28px 20px 24px; } }
@media (min-width: 1024px) { .ms-overlay .ms-step { max-width: 540px; } }
.ms-overlay .pill-option { background: #F7F5EF; }
.ms-overlay .pill-option:has(input:checked) { background: #EFEBE2; }
.ms-overlay .ms-field-input { background: #F7F5EF; }
.ms-overlay .ms-field-input:focus { background: #fff; }