/* FDRC overrides — loaded LAST so it wins the cascade.
 * 1) Map the theme's font vars onto the self-hosted next/font faces (Dosis + Roboto).
 * 2) Re-create the inline <style> tweaks FDRC ships in every live page <head>
 *    (black top-bar, logo sizing, form borders, top-bar layout) so the mirror matches.
 * 3) Hide the preloader (we don't render it; a fast static page would leave it stuck). */

:root {
  --title-font: var(--font-dosis), "Dosis", sans-serif;
  --body-font: var(--font-roboto), "Roboto", sans-serif;
}

/* --- FDRC live-site inline customisations (verbatim behaviour) --- */
.header-logo-container {
  width: 15.6667%;
  padding: 0 15px;
}
@media (max-width: 768px) {
  .header-logo-container {
    width: 33.3333%;
  }
  #get-member {
    display: block !important;
  }
}
.header-logo2 {
  text-align: center;
}
img.logo {
  max-width: 100%;
  height: auto;
}
.footer--layout1 {
  padding-top: 50px;
}
input.form-control,
.form-control {
  border: 1px solid black;
}
input[type="radio"] ~ label::before {
  content: none !important;
}
.top-bar.bg-main {
  background: black;
}
.content-topbar {
  display: flex;
  justify-content: space-between;
  padding: 5px;
}
.right-top-bar {
  color: white;
}
#get-member {
  display: none;
}

/* --- Preloader: not rendered; ensure it can never cover the page --- */
.preloader {
  display: none !important;
}

/* --- getquote (Become A Member) page-specific styles (from the live inline <style>) ---
 * The card headers render in the theme RED (the theme's `.bg-theme` uses
 * `background-color: var(--theme-color) !important`, which overrode the live page's
 * navy inline value — so the live site shows red headers; we match that). What the
 * live inline DID achieve was white header text + padding, which we replicate here.
 * Scoped to the page wrapper so .bg-theme elsewhere is unaffected. */
.getquote-page .bg-theme {
  color: #fff !important;
  padding-left: 9px;
}
.getquote-page .bg-theme h4 {
  padding: 10px;
  color: #fff;
}

/* --- make-claim: uniform, vertically-centred accident-type tiles + larger Find button --- */
.make-claim-page .radiolabel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 120px;
  margin: 0;
  padding: 12px;
}
.make-claim-page .findBtn {
  font-size: 1.3rem;
  padding: 0.55rem 1.6rem;
}

/* --- make-claim: the "Is this your vehicle?" facts grid ---------------------------------------
 * 🔴 The theme sets `.table > :not(caption) > * > * { color: var(--white-color) }` in style.css
 * (correct for the dark footer table, fatal inside this white card) — a Bootstrap `.table` here
 * rendered the vehicle WHITE ON WHITE, so the driver saw an empty box. Colours are stated
 * explicitly here so no theme rule can wash them out again. */
.make-claim-page .vehicleFacts .vehicleFactLabel {
  color: #6c757d;
}
.make-claim-page .vehicleFacts .vehicleFactValue {
  color: #212529;
  font-weight: 600;
  word-break: break-word;
}

/* --- CLS fix: before slick initialises, a .vs-carousel renders ALL its slides stacked
 * (e.g. the 3 hero slides = ~3x viewport height), then collapses to one when JS runs —
 * a large layout shift. Show only the first slide until slick adds .slick-initialized. */
.vs-carousel:not(.slick-initialized) > *:not(:first-child) {
  display: none;
}

/* --- make-claim: the accident form's section headings, labels and fault radios -----------------
 * todo-20260831 step 2. Page-scoped, like every other block in this file — no global CSS.
 *
 * 🔴 **The three "Who was at fault?" radios render as BARE TEXT without the last rule.**
 * `style.css:1177` sets `display: none` on every native radio and draws the replacement entirely
 * from a sibling `label::before`; the `content: none !important` at :39 above then kills that
 * pseudo-element — so a REQUIRED field ships with nothing on screen showing what is selected.
 * 🔴 **Scoped to `.form-check`, NOT to the page.** The accident-type tiles are radios with sibling
 * labels inside this same wrapper (`ClaimForm.tsx:112-135`) and `style.css:1195-1213` already
 * supplies every property of the circle except `content`, so a page-wide restore draws a stray
 * 20px red circle on all six tiles. `.form-check` appears only on the fault radios.
 * 🔴 **`!important` is required.** The rule it has to beat is itself `!important`, so a scoped
 * rule without it loses no matter how specific. */
.make-claim-page .claimSection {
  color: var(--title-color);
  font-size: 19px;
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 6px;
  margin-bottom: 12px;
}
.make-claim-page .claimSubSection {
  color: var(--title-color);
  font-size: 15px;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 6px;
}
.make-claim-page .form-label {
  color: var(--title-color);
}
.make-claim-page .form-check input[type="radio"] ~ label::before {
  content: "\f111" !important;
}