/* ============================================================================
 * style.css  —  huisstijl Verhuis-Voordelig, afgestemd op de live site
 * ============================================================================
 * Alles is gescoped onder .oc-container zodat het niet botst met het
 * WordPress-thema. De kleuren/afmetingen hieronder komen 1-op-1 uit de
 * bestaande site-CSS (verhuis-voordelig.com), zodat het formulier naadloos
 * aansluit bij de "Onze gegevens" / "Werkgebied"-kaarten op de contactpagina.
 *
 *   Site-tokens (uit :root op de live site):
 *     --vv-navy   #0B1F3A   (pagina-achtergrond)
 *     --vv-panel  #16294D   (achtergrond van alle kaarten/panelen)  <-- gebruikt hier
 *     --vv-text   #F2F2F0   (bodytekst)
 *     --vv-orange #FF5823   (CTA / accent)   hover: #E04E1F
 *   Kaarten (.vv-info-panel): border-radius 8px, padding 36px, geen rand, geen schaduw.
 *   CTA-knoppen: border-radius 4px, uppercase, letter-spacing .08em, padding 14px 28px.
 *   Fonts: 'Inter' (body), 'Montserrat' (koppen).
 * ========================================================================== */

.oc-container {
  /* --- kleuren, exact gelijk aan de site --- */
  --oc-navy:        #16294D;  /* = --vv-panel : achtergrond van dit paneel */
  --oc-panel:       rgba(255, 255, 255, 0.05);
  --oc-panel-rand:  rgba(255, 255, 255, 0.12);
  --oc-oranje:      #FF5823;  /* = --vv-orange */
  --oc-oranje-hover:#E04E1F;
  --oc-oranje-diep: #C9430F;
  --oc-wit:         #ffffff;
  --oc-tekst:       #F2F2F0;  /* = --vv-text */
  --oc-grijs:       #cfd6e4;  /* gedempte tekst op navy (zoals de site-footer) */
  --oc-fout:        #ff9d8a;
  --oc-veld-bg:     #ffffff;
  --oc-veld-tekst:  #0B1F3A;

  /* --- vormgeving, exact gelijk aan de kaarten op de site --- */
  --oc-radius:      8px;      /* panelen / invoervelden (= kaarten op de site) */
  --oc-radius-knop: 4px;      /* knoppen (= CTA-knoppen op de site) */
  --oc-veld-gap:    14px;     /* vaste verticale ruimte tussen velden */

  box-sizing: border-box;
  max-width: 760px;           /* lijnt met de introtekst (.vv-section-narrow) erboven */
  margin: 0 auto;
  padding: 24px 20px;
  background: var(--oc-navy);
  color: var(--oc-tekst);
  border: none;               /* de site-kaarten hebben geen rand ... */
  box-shadow: none;           /* ... en geen schaduw */
  border-radius: var(--oc-radius);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-wrap: break-word;
}

.oc-container *,
.oc-container *::before,
.oc-container *::after {
  box-sizing: border-box;
}

/* Voorkom horizontale overflow (o.a. de standaard min-width van <fieldset>) */
.oc-container * {
  min-width: 0;
}

/* --- Verborgen-startende blokken ---------------------------------------------
 * Deze blokken horen verborgen te starten; calculator.js zet ze zichtbaar
 * (met een inline display-stijl) zodra dat nodig is. We verbergen ze hier
 * zowel via het [hidden]-attribuut ALS via hun id, omdat het WordPress
 * "Custom HTML"-blok het hidden-attribuut kan wegfilteren bij opslaan.
 * De inline stijl die calculator.js zet, wint altijd van deze regels. */
.oc-container [hidden] {
  display: none !important;
}
.oc-container #particulier-velden,
.oc-container #overig-velden,
.oc-container #verdieping-veld,
.oc-container #uit-disclaimer,
.oc-container #verzend-fout,
.oc-container #oc-bevestiging {
  display: none;
}

.oc-titel {
  margin: 0 0 6px;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--oc-wit);
}

.oc-intro {
  margin: 0 0 20px;
  color: var(--oc-grijs);
  font-size: 0.95rem;
}

/* ---------- Velden ---------- */
.oc-veld {
  margin-bottom: var(--oc-veld-gap);
}

.oc-veld label,
.oc-items legend {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: var(--oc-wit);
}

.oc-verplicht { color: var(--oc-oranje); }

.oc-hint,
.oc-container .oc-hint {
  font-weight: 400;
  color: var(--oc-grijs);
  font-size: 0.85rem;
}

.oc-container input[type="text"],
.oc-container input[type="tel"],
.oc-container input[type="email"],
.oc-container input[type="number"],
.oc-container input[type="date"],
.oc-container select,
.oc-container textarea {
  width: 100%;
  height: auto;                 /* neutraliseer de vaste 40px van het thema */
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: var(--oc-radius);
  background: var(--oc-veld-bg);
  color: var(--oc-veld-tekst);
  box-shadow: none;             /* neutraliseer de inset-schaduw van het thema */
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.4;
}

.oc-container ::placeholder {
  color: #8d97ab;
  opacity: 1;
}

.oc-container textarea {
  resize: vertical;
  min-height: 68px;
}

/* ---------- Focus: subtiele oranje rand + gloed (ook bij Tab-navigatie) ---------- */
.oc-container input:focus,
.oc-container select:focus,
.oc-container textarea:focus {
  outline: none;
  border-color: var(--oc-oranje);
  box-shadow: 0 0 0 3px rgba(255, 88, 35, 0.28);   /* rgba van #FF5823 */
}

.oc-container input[aria-invalid="true"],
.oc-container select[aria-invalid="true"] {
  border-color: var(--oc-fout);
  box-shadow: 0 0 0 3px rgba(255, 157, 138, 0.35);
}

/* ---------- Foutmeldingen ---------- */
.oc-fout {
  display: block;
  min-height: 1.1em;
  margin-top: 5px;
  color: var(--oc-fout);
  font-size: 0.85rem;
}

/* ---------- Checkbox-velden ---------- */
.oc-veld-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: var(--oc-veld-gap);
}

.oc-veld-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: 0 0 auto;
  border-radius: 4px;
  accent-color: var(--oc-oranje);
}

.oc-container input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--oc-oranje);
  outline-offset: 2px;
}

.oc-veld-checkbox label {
  margin: 0;
  font-weight: 400;
  color: var(--oc-tekst);
}

.oc-veld-checkbox a {
  color: var(--oc-oranje);
}

/* ---------- Items (aantallen) ---------- */
.oc-items {
  margin: var(--oc-veld-gap) 0;
  padding: 16px;
  border: 1px solid var(--oc-panel-rand);
  border-radius: var(--oc-radius);
  background: var(--oc-panel);
  min-width: 0;
}

.oc-items legend {
  padding: 0 6px;
  float: none;
}

.oc-item-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.oc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.oc-item label {
  margin: 0;
  font-weight: 400;
  color: var(--oc-tekst);
}

.oc-item input[type="number"] {
  width: 84px;
  flex: 0 0 auto;
  text-align: center;
}

/* ---------- Resultaatblok ---------- */
.oc-resultaat {
  margin: var(--oc-veld-gap) 0 0;
  padding: 16px 18px;
  border: 1px solid var(--oc-panel-rand);
  border-radius: var(--oc-radius);
  background: var(--oc-panel);
}

.oc-resultaat-rij {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}

.oc-resultaat-rij span { color: var(--oc-grijs); }
.oc-resultaat-rij strong { font-size: 1.05rem; color: var(--oc-wit); }

.oc-resultaat-rij.oc-groot strong {
  font-size: 1.5rem;
  color: var(--oc-oranje);
}

.oc-resultaat-tekst {
  margin: 8px 0 0;
  color: var(--oc-tekst);
}

.oc-resultaat-tekst:empty { display: none; }

.oc-disclaimer {
  margin: 10px 0 0;
  color: var(--oc-grijs);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* ---------- Knop: gelijk aan de CTA-knoppen op de site ---------- */
.oc-knop {
  display: block;
  width: 100%;
  margin-top: 22px;
  padding: 14px 28px;
  border: none;
  border-radius: var(--oc-radius-knop);
  background: var(--oc-oranje);
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.15s ease;
}

.oc-knop:hover:not(:disabled)  { background: var(--oc-oranje-hover); }
.oc-knop:active:not(:disabled) { background: var(--oc-oranje-diep); }
.oc-knop:disabled { opacity: 0.6; cursor: default; }

.oc-knop:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}

/* Het thema stuurt button[type="submit"] met !important aan; onderstaande
 * id-regels (hogere specificiteit) zorgen dat de hover/active-kleur blijft werken
 * wanneer het formulier in WordPress is ingebed. */
#oc-submit { background-color: var(--oc-oranje) !important; }
#oc-submit:hover:not(:disabled)  { background-color: var(--oc-oranje-hover) !important; }
#oc-submit:active:not(:disabled) { background-color: var(--oc-oranje-diep) !important; }

.oc-verzend-fout {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: var(--oc-radius);
  background: rgba(255, 157, 138, 0.14);
  color: var(--oc-fout);
  font-size: 0.9rem;
}

/* ---------- Bevestiging ---------- */
.oc-bevestiging {
  padding: 28px 8px;
  text-align: center;
}

.oc-bevestiging h2 {
  margin: 0 0 10px;
  color: var(--oc-oranje);
}

.oc-bevestiging p {
  margin: 0;
  color: var(--oc-tekst);
}

/* ---------- Honeypot (verborgen voor mensen) ---------- */
.oc-honeypot {
  display: none;
}

/* ---------- Desktop ---------- */
@media (min-width: 520px) {
  .oc-item-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 22px;
  }
}

@media (min-width: 760px) {
  .oc-container {
    padding: 36px;             /* gelijk aan .vv-info-panel op de site */
  }
  .oc-titel { font-size: 1.7rem; }
}