/**
 * @file
 * Opmaak voor de postcode-lookup.
 */

/* Velden die de lookup zelf heeft ingevuld, worden display-only: ze lezen als
   uitkomst, niet als invulvak. Bewust géén disabled-grijs — de bezoeker moet
   kunnen controleren of het gevonden adres klopt, en de waarde moet meegaan in
   de submit (een disabled veld wordt door Drupal genegeerd).

   Vindt de lookup niets, dan haalt de JS deze klasse weg en is het weer een
   gewoon invoerveld. */
input.ozk-postcode-auto {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  font-weight: 600;
  cursor: default;
}

input.ozk-postcode-auto:focus {
  outline: none;
  box-shadow: none;
}

/* Op smalle schermen valt een randloos veld weg tegen de achtergrond; een
   subtiele onderlijn houdt zichtbaar dat hier een waarde staat. */
@media (max-width: 767.98px) {
  input.ozk-postcode-auto {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }
}

/* De adresrij is een webform_flexbox (zie scripts/ozk-adres-flexbox.php).
   Standaard verdeelt die de volle breedte over zijn kolommen, waardoor er
   honderden pixels lucht tussen postcode en huisnummer valt. Hier krimpen de
   kolommen naar de breedte van hun veld, zodat de drie bij elkaar horen. */
.ozk-adresrij > .webform-flex {
  flex: 0 0 auto;
}

/* De velden onderaan uitlijnen, niet bovenaan. Het label "toevoegsel (bv. c
   of bis)" loopt in een smalle kolom over twee regels (390px, en op desktop
   in een halve kolom), en met de standaard uitlijning op de bovenkant zakte
   dat veld dan 24px onder postcode en huisnummer (webform_1525, 01-10-2026).
   Met de onderkant als lijn blijven de drie vakken op één hoogte, hoe lang het
   label ook is. */
.ozk-adresrij.webform-flexbox {
  align-items: flex-end;
}

.ozk-adresrij input[name$="_address_postal_code"] {
  max-width: 9em;
}

.ozk-adresrij input[name$="_address_street_number"],
.ozk-adresrij input[name$="_address_street_unit"] {
  max-width: 7em;
}

/* webform_flexbox stapelt zijn kolommen onder 768px. Voor drie smalle
   adresvelden is dat zonde van de ruimte — met deze maten passen ze ook op een
   telefoon naast elkaar, wat een stuk minder scrollen scheelt. */
@media (max-width: 767.98px) {
  .ozk-adresrij.webform-flexbox {
    display: flex;
    flex-wrap: nowrap;
    gap: 0 0.5rem;
  }

  .ozk-adresrij.webform-flexbox > .webform-flex {
    flex: 0 1 auto;
    min-width: 0;
  }

  .ozk-adresrij input[name$="_address_postal_code"] {
    max-width: 7em;
  }

  .ozk-adresrij input[name$="_address_street_number"] {
    max-width: 4.5em;
  }

  .ozk-adresrij input[name$="_address_street_unit"] {
    max-width: 4.5em;
  }
}

.ozk-postcode-melding {
  margin: 0.25em 0 0.75em;
  font-size: 0.9em;
  line-height: 1.35;
  color: #6b4b00;
}

/* Toevoeging nodig: het ingevulde huisnummer bestaat alleen mét toevoeging
   (Pro6PP suggest via nl.onvergetelijk.geo). Zelfde accentkleur als de
   actiebalken in CiviCRM. */
input.ozk-postcode-nodig {
  border-color: #c13c61;
  box-shadow: 0 0 0 2px rgba(193, 60, 97, 0.2);
}
input.ozk-postcode-nodig::placeholder {
  color: #c13c61;
}

/* Eigen keuzelijst onder postcode, nummer en toevoeging (01-10-2026). Een <datalist>
   tekent de browser zelf (donkere popup, niet te stylen); dit lijstje volgt de huisstijl:
   wit vlak, zachte rand, petrol voor de actieve regel, de roze accentkleur bij
   "toevoeging nodig". Positie: absoluut onder het veld, binnen het form-item. */
.ozk-keuzelijst {
  position: absolute;
  z-index: 1000;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #cfd8dc;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
  max-height: 16rem;
  overflow-y: auto;
  font-size: 0.95rem;
  line-height: 1.3;
}
.ozk-keuzelijst li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.ozk-keuzelijst-label {
  color: #6b7280;
  font-size: 0.85em;
}
.ozk-keuzelijst-nodig .ozk-keuzelijst-label {
  color: #c13c61;
}
.ozk-keuzelijst li.is-actief {
  background: #006e83;
  color: #fff;
}
.ozk-keuzelijst li.is-actief .ozk-keuzelijst-label {
  color: rgba(255, 255, 255, 0.85);
}

/* Ongeldige of onbekende postcode (Richard, 03-10-2026): rood veld en uitleg eronder, direct
   bij het typen zodra het niet meer goed kán komen, anders bij het verlaten van het veld. */
/* !important en :focus: het thema zet een paarse focusrand die anders wint terwijl de
   bezoeker nog in het veld staat, precies het moment dat de fout zichtbaar moet zijn. */
input.ozk-postcode-fout,
input.ozk-postcode-fout:focus {
  border-color: #d03b3b !important;
  outline-color: #d03b3b !important;
  box-shadow: 0 0 0 2px rgba(208, 59, 59, 0.25) !important;
}
.ozk-postcode-melding--fout {
  color: #d03b3b;
  font-size: 0.9em;
  margin-top: 0.25rem;
}

/* Herkende postcode en gevonden adres: groene rand die blijft staan tot het veld weer
   verandert (Richard, 03-10-2026). Groen = huisstijlkleur "prima". */
input.ozk-postcode-ok,
input.ozk-postcode-ok:focus {
  border-color: #0ca30c !important;
  outline-color: #0ca30c !important;
  box-shadow: 0 0 0 2px rgba(12, 163, 12, 0.2) !important;
}

/* Kort landmenu: bij "Anders…" staat de volledige landenlijst direct eronder. */
select.ozk-land-vol {
  margin-top: 0.5rem;
}

/* Focusring in de kleur van de status (Richard, 03-10-2026: "paars en rood waardoor je rood
   niet goed ziet"). De formulierstijl van het thema zet op elk veld met focus een paarse
   ring van 3px (ozk-formulieren.css, .webform-submission-form input:focus-visible); bij een
   foute of herkende postcode krijgt die ring dezelfde kleur als de rand. Toegankelijkheid
   blijft: er is nog steeds een ring van 3px, alleen in rood of groen. */
.webform-submission-form input.ozk-postcode-fout:focus,
.webform-submission-form input.ozk-postcode-fout:focus-visible,
form.ozk-formulier input.ozk-postcode-fout:focus-visible {
  outline: 3px solid #d03b3b !important;
  outline-offset: 2px !important;
}
.webform-submission-form input.ozk-postcode-ok:focus,
.webform-submission-form input.ozk-postcode-ok:focus-visible,
form.ozk-formulier input.ozk-postcode-ok:focus-visible {
  outline: 3px solid #0ca30c !important;
  outline-offset: 2px !important;
}

/* Volle landenlijst verborgen zolang het korte menu Nederland of België toont. */
select.ozk-land-verborgen,
select.ozk-land-verborgen + .chosen-container {
  display: none !important;
}
/* Het thema legt Chosen over keuzelijsten (eigen div direct na de select). Bij Anders…
   is dat juist handig: de volle landenlijst is dan doorzoekbaar. */
select.ozk-land-vol + .chosen-container {
  margin-top: 0.5rem;
}