/* ─────────────────────────────────────────────────────────────
   Instellingen orkest — gedeelde opmaak
   Gebruikt door de app (/orkest/) en door het klantenportaal
   (/account/, tabblad "App inrichten"). Alles staat onder .oi,
   zodat de pagina er op beide plaatsen exact hetzelfde uitziet
   en niets van de omringende site meespeelt.

   De kleuren komen uit de variabelen van de app (die volgen de
   vereniging). Staan die er niet, dan gelden de standaardkleuren
   van Marcato hieronder.
   ───────────────────────────────────────────────────────────── */
/* Lettertypes van de app: staan op de eigen server (map /fonts), niet bij Google. */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/bebas-neue-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dm-sans-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/dm-sans-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/dm-sans-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/bebas-neue-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dm-sans-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/dm-sans-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/dm-sans-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.oi {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--navy, #172260);
  text-align: left;
}
.oi *, .oi *::before, .oi *::after { box-sizing: border-box; }
.oi [hidden] { display: none !important; }
.oi p, .oi h1, .oi h2, .oi h3 { margin: 0; }
.oi img, .oi svg { max-width: 100%; }

/* ── kaarten & bouwstenen ── */
.oi .kaart { background: #fff; border: 1px solid var(--rand, #e3e9f3); border-radius: 16px; padding: 20px 22px; margin-bottom: 14px; display: block; box-shadow: none; gap: 0; }
.oi .kaart-titel { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 22px; letter-spacing: .05em; color: var(--navy, #172260); margin-bottom: 4px; }
.oi .kaart-sub { font-size: 13px; color: var(--zacht, #4a5586); line-height: 1.5; margin-bottom: 14px; }
.oi .sectie-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 12px; }
.oi .sectie-kop:first-child { margin-top: 0; }
.oi .sectie-titel { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--licht-tekst, #5f86bd); }

.oi .formulier { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.oi .formulier .vol { grid-column: 1 / -1; }
.oi .veld-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--licht-tekst, #5f86bd); margin-bottom: 6px; }
.oi .veld { width: 100%; background: #fff; border: 1.5px solid var(--rand, #e3e9f3); border-radius: 10px; padding: 11px 13px; color: var(--navy, #172260); font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.4; outline: none; margin-bottom: 14px; }
.oi .veld:focus { border-color: var(--navy, #172260); box-shadow: 0 0 0 3px rgba(var(--navy-rgb, 23, 34, 96), .08); }
.oi .veld-hint { font-size: 11px; color: var(--licht-tekst, #5f86bd); margin: -8px 0 14px; }

.oi .knop-rij { display: flex; gap: 10px; flex-wrap: wrap; }
.oi .knop { padding: 11px 18px; border-radius: 10px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; border: 1.5px solid transparent; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.oi .knop.primair { background: var(--navy, #172260); color: #fff; }
.oi .knop.secundair { background: #fff; color: var(--navy, #172260); border-color: var(--rand, #e3e9f3); }
.oi .knop.secundair:hover { border-color: var(--licht, #87A8D2); background: var(--tint, #eef3fa); }
.oi .knop:disabled { opacity: .6; cursor: default; }
.oi .knop-gevaar { background: #fff !important; color: #b91c1c !important; border: 1.5px solid #f3c9c9 !important; }

.oi .melding-regel { font-size: 13px; margin-bottom: 12px; min-height: 1em; }
.oi .melding-regel.ok { color: #166534; }
.oi .melding-regel.fout { color: #b91c1c; }

.oi .loading-inline { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: oi-draai .7s linear infinite; vertical-align: middle; }
.oi .loading-inline.donker { border-color: rgba(var(--navy-rgb, 23, 34, 96), .2); border-top-color: var(--navy, #172260); }
@keyframes oi-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .oi .loading-inline { animation: none; } }

.oi .pk-slot { border: 1px solid var(--rand, #e3e9f3); background: var(--tint, #eef3fa); border-radius: 12px; padding: 14px 16px; font-size: 13px; color: var(--navy, #172260); line-height: 1.55; }
.oi .pk-slot b { display: block; font-size: 15px; margin-bottom: 4px; }

/* ── 1 · Algemeen ── */
.oi .ok-keuze { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--tint, #eef3fa); padding: 4px; border-radius: 12px; margin-bottom: 14px; }
.oi .ok-keuze button { padding: 10px 6px; line-height: 1.2; border: none; background: transparent; border-radius: 9px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700; color: var(--zacht, #4a5586); cursor: pointer; }
.oi .ok-keuze button.active { background: #fff; color: var(--navy, #172260); box-shadow: 0 1px 6px rgba(var(--navy-rgb, 23, 34, 96), .12); }

/* ── 2 · Locatie ── */
.oi .ok-rij { display: grid; grid-template-columns: 3fr 1fr; gap: 0 14px; }
.oi .ok-rij.pc { grid-template-columns: 1fr 2fr 1.4fr; }
.oi .ok-voorbeeld { display: flex; gap: 10px; align-items: flex-start; background: var(--tint, #eef3fa); border-radius: 12px; padding: 12px 14px; font-size: 14px; color: var(--navy, #172260); margin-bottom: 14px; line-height: 1.45; }
.oi .ok-voorbeeld .ico { color: var(--licht-tekst, #5f86bd); flex-shrink: 0; margin-top: 1px; }
.oi .ok-voorbeeld small { display: block; color: var(--zacht, #4a5586); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; }
.oi .ok-voorbeeld a { color: var(--licht-tekst, #5f86bd); font-weight: 700; font-size: 12px; }
.oi .ok-voorbeeld.leeg-adres { color: var(--zacht, #4a5586); }

/* ── 3 · Design: logo ── */
.oi .ok-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.oi .ok-logo { border: 1.5px dashed var(--rand, #e3e9f3); border-radius: 14px; padding: 10px; transition: border-color .15s, background .15s; }
.oi .ok-logo.sleep { border-color: var(--navy, #172260); background: var(--tint, #eef3fa); }
.oi .ok-logo-beeld { height: 170px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #fff; overflow: hidden; }
.oi .ok-logo-beeld.ruit { background-color: #fff; background-image: conic-gradient(#e6ebf3 25%, transparent 0 50%, #e6ebf3 0 75%, transparent 0); background-size: 18px 18px; }
.oi .ok-logo-beeld img { max-width: 92%; max-height: 92%; object-fit: contain; }
.oi .ok-logo-beeld.leeg { flex-direction: column; gap: 6px; color: var(--licht-tekst, #5f86bd); font-size: 13px; cursor: pointer; text-align: center; padding: 10px; }
.oi .ok-logo-label { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--licht-tekst, #5f86bd); margin-top: 8px; }
.oi .ok-logo-label .nieuw { color: #b45309; }
.oi .ok-verwerk { background: var(--tint, #eef3fa); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.oi .ok-verwerk-rij { display: grid; grid-template-columns: auto 1fr 36px; align-items: center; gap: 12px; font-size: 13px; color: var(--navy, #172260); }
.oi .ok-verwerk .veld-hint { margin: 6px 0 0; }
.oi .ok-vink { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--navy, #172260); margin-top: 10px; cursor: pointer; }
.oi .ok-vink input { width: 18px; height: 18px; accent-color: var(--navy, #172260); }

/* ── 3 · Design: kleuren ── */
.oi .ok-omdraai { display: flex; justify-content: center; margin: -4px 0 14px; }
.oi .ok-omdraai .knop { font-size: 13px; padding: 6px 12px; }
.oi .ok-gevonden { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--zacht, #4a5586); margin-bottom: 14px; }
.oi .ok-staal { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border: 1px solid var(--rand, #e3e9f3); border-radius: 999px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--navy, #172260); background: #fff; }
.oi .ok-staal i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .1); }
.oi .ok-kleur { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: start; padding: 16px 0; border-top: 1px solid var(--rand, #e3e9f3); }
.oi .ok-kleur.eerste { border-top: none; padding-top: 4px; }
.oi .ok-swatch { position: relative; width: 76px; height: 76px; border-radius: 16px; border: 1px solid rgba(0, 0, 0, .1); cursor: pointer; overflow: hidden; display: block; }
.oi .ok-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; }
.oi .ok-swatch span { position: absolute; left: 0; right: 0; bottom: 0; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; text-align: center; padding: 3px 0; background: rgba(0, 0, 0, .28); color: #fff; pointer-events: none; }
.oi .ok-kleur-kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.oi .ok-kleur-naam { font-weight: 700; font-size: 15px; color: var(--navy, #172260); }
.oi .ok-kleur-sub { font-size: 12px; color: var(--zacht, #4a5586); margin-bottom: 6px; }
.oi .ok-hex { width: 112px; font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; margin: 0; padding: 7px 10px; font-size: 15px; }
.oi .ok-hex.fout { border-color: #b91c1c; }
.oi .ok-schuif { display: grid; grid-template-columns: 92px 1fr 44px; align-items: center; gap: 10px; font-size: 12px; color: var(--zacht, #4a5586); margin-top: 8px; }
.oi .ok-schuif output { font-variant-numeric: tabular-nums; text-align: right; color: var(--navy, #172260); font-weight: 700; }
.oi .ok-bereik { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; border-radius: 999px; outline: none; border: 1px solid rgba(0, 0, 0, .1); margin: 0; padding: 0; background: var(--tint, #eef3fa); }
.oi .ok-bereik::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--navy, #172260); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); cursor: pointer; }
.oi .ok-bereik::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--navy, #172260); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); cursor: pointer; }
.oi .ok-bereik.neutraal { background: linear-gradient(90deg, #fff, var(--navy, #172260)); }
.oi .ok-contrast { font-size: 12px; margin-top: 10px; }
.oi .ok-contrast.goed { color: #166534; }
.oi .ok-contrast.matig { color: #b45309; }

/* ── 3 · Design: voorbeeld ── */
.oi .ok-proef { border: 1px solid var(--rand, #e3e9f3); border-radius: 14px; overflow: hidden; margin: 4px 0 16px; }
.oi .ok-proef-balk { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border-bottom: 1px solid #e3e9f3; }
.oi .ok-proef-balk img { width: 32px; height: 32px; object-fit: contain; }
.oi .ok-proef-naam { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .06em; line-height: 1; }
.oi .ok-proef-lijf { padding: 16px 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.oi .ok-proef-titel { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: .05em; width: 100%; }
.oi .ok-proef-knop { padding: 9px 16px; border-radius: 10px; color: #fff; font-weight: 700; font-size: 13px; }
.oi .ok-proef-knop2 { padding: 8px 14px; border-radius: 10px; font-weight: 700; font-size: 13px; background: #fff; border: 1.5px solid; }
.oi .ok-proef-chip { padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

/* ── eerdere versies ── */
.oi .ok-versie { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rand, #e3e9f3); }
.oi .ok-versie:first-child { border-top: none; padding-top: 0; }
.oi .ok-versie-logo { width: 64px; height: 64px; border-radius: 10px; border: 1px solid var(--rand, #e3e9f3); display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: #fff; background-image: conic-gradient(#e6ebf3 25%, transparent 0 50%, #e6ebf3 0 75%, transparent 0); background-size: 12px 12px; }
.oi .ok-versie-logo img { max-width: 88%; max-height: 88%; object-fit: contain; }
.oi .ok-versie-kleuren { display: flex; align-items: center; gap: 6px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--navy, #172260); flex-wrap: wrap; }
.oi .ok-versie-kleuren i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .1); }
.oi .ok-versie-kleuren span { margin-left: 4px; }
.oi .ok-versie-sub { font-size: 12px; color: var(--zacht, #4a5586); margin-top: 4px; line-height: 1.4; }

@media (max-width: 860px) {
  .oi .formulier { grid-template-columns: 1fr; }
  .oi .ok-versie { grid-template-columns: 52px 1fr; gap: 12px; }
  .oi .ok-versie-logo { width: 52px; height: 52px; }
  .oi .ok-versie .knop { grid-column: 2; justify-self: start; padding: 8px 14px; }
  .oi .ok-logo-beeld { height: 130px; }
  .oi .ok-kleur { grid-template-columns: 58px 1fr; gap: 12px; }
  .oi .ok-swatch { width: 58px; height: 58px; border-radius: 14px; }
  .oi .ok-schuif { grid-template-columns: 76px 1fr 40px; gap: 8px; }
  .oi .ok-rij.pc { grid-template-columns: 1fr 2fr; }
  .oi .ok-rij.pc > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
  .oi .ok-logos { gap: 8px; }
  .oi .ok-logo { padding: 6px; }
  .oi .ok-rij { grid-template-columns: 2fr 1fr; }
}