/* =====================================================================
 * 97-instagram-wizard.css — /instagram-importeren/ (templates/tb-instagram-wizard.php)
 *
 * Bouwt op het vel van het open verzoek (96-verzoek.css, .tb-ov-*): band, kaarten, velden, knop en uitleg rechts.
 * Hier alleen wat de wizard extra heeft: het @-veld, de voortgangsbalk en de resultaatlijsten.
 * ===================================================================== */

.tb-igw [hidden]{display:none !important; /* beats .tb-ov-kaart{display} and .tb-ov-knoprij{display:flex} */}
.tb-igw h2[tabindex="-1"]:focus{outline:none;}
.tb-igw p.tb-igw-tekst{margin:0 0 14px;font:400 14.5px/1.6 var(--tb-sans);color:var(--ov-tekst);}
.tb-igw p.tb-igw-klein{margin:8px 0 0;font:400 13px/1.5 var(--tb-sans);color:var(--ov-zacht);}
.tb-igw .tb-igw-knoprij{margin-top:18px;}
.tb-igw .tb-igw-zelf{font:500 14px/1.4 var(--tb-sans);color:var(--tb-accent-text);text-decoration:underline;text-underline-offset:3px;}
.tb-igw .tb-ov-test{margin:4px 0 16px;}
.tb-igw .tb-verzoek-fout{margin:14px 0 0;}

/* @gebruikersnaam: het apenstaartje staat vast in het veld. */
.tb-igw-apenstaart{position:relative;}
.tb-igw-apenstaart span{position:absolute;left:14px;top:50%;transform:translateY(-50%);font:500 15px/1 var(--tb-sans);color:var(--ov-zacht);pointer-events:none;}
.tb-ov-veld .tb-igw-apenstaart input{padding-left:30px;}

/* Voortgang */
.tb-igw p.tb-igw-status{margin:10px 0 12px;font:600 16px/1.4 var(--tb-sans);color:var(--ov-inkt);}
.tb-igw-balk{height:10px;margin:0 0 16px;border-radius:999px;background:var(--ov-rust);overflow:hidden;box-shadow:inset 0 0 0 1px var(--ov-lijn);}
.tb-igw-balk span{display:block;height:100%;width:0;border-radius:999px;background:var(--ov-or);transition:width .6s ease;}
@media (prefers-reduced-motion:reduce){.tb-igw-balk span{transition:none;}}

/* Resultaat */
.tb-igw h3.tb-igw-subkop{margin:20px 0 10px;font:600 15px/1.3 var(--tb-sans);color:var(--ov-inkt);}
.tb-igw-baksels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;}
.tb-igw-baksels li{display:flex;gap:12px;align-items:center;min-width:0;padding:8px;border:1px solid var(--ov-lijn);border-radius:12px;background:var(--ov-vlak);}
.tb-igw-baksels img{flex:0 0 auto;width:64px;height:64px;object-fit:cover;border-radius:8px;}
.tb-igw-baksels div{display:flex;flex-direction:column;gap:2px;min-width:0;}
.tb-igw-baksels b{font:600 14px/1.35 var(--tb-sans);color:var(--ov-inkt);}
.tb-igw-baksels span{font:400 12.5px/1.4 var(--tb-sans);color:var(--ov-zacht);}

/* Galerij kiezen (fase 3): elke foto is een keuzevakje, met eronder eventueel "Hoofdfoto". */
.tb-igw-fotos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;}
.tb-igw-fotos li{display:flex;flex-direction:column;gap:6px;min-width:0;}
.tb-igw-fotos li.is-overgeslagen img{opacity:.45;filter:grayscale(.6);}
.tb-igw .tb-igw-binnenkort{margin:20px 0 0;}
.tb-igw-kies{position:relative;display:block;cursor:pointer;border-radius:8px;overflow:hidden;background:var(--ov-rust);aspect-ratio:1/1;}
.tb-igw-kies img{width:100%;height:100%;object-fit:cover;display:block;}
.tb-igw-kies .tb-igw-vink{position:absolute;top:6px;left:6px;width:20px;height:20px;margin:0;accent-color:var(--ov-or);cursor:pointer;}
.tb-igw-kies:has(.tb-igw-vink:checked){outline:3px solid var(--ov-or);outline-offset:-3px;}
.tb-igw-kies:has(.tb-igw-vink:disabled){cursor:default;}
.tb-igw-badge{position:absolute;left:0;right:0;bottom:0;padding:3px 6px;background:rgba(20,26,51,.72);color:#fff;font:600 11px/1.3 var(--tb-sans);text-align:center;}
/* "Hoofdfoto" alleen onder een aangevinkte foto: 39 keuzerondjes onder elkaar leest als ruis. */
.tb-igw-hoofd{display:none;align-items:center;gap:6px;font:400 12px/1.3 var(--tb-sans);color:var(--ov-zacht);cursor:pointer;}
.tb-igw-fotos li:has(.tb-igw-vink:checked) .tb-igw-hoofd{display:flex;}
.tb-igw-hoofd input{width:14px;height:14px;margin:0;accent-color:var(--ov-or);}
.tb-igw p.tb-igw-uitslag{margin:12px 0 0;padding:10px 14px;border-radius:10px;font:400 14px/1.5 var(--tb-sans);}
.tb-igw p.tb-igw-uitslag.is-goed{background:var(--ov-groen-vlak);color:var(--ov-groen-inkt);}
.tb-igw p.tb-igw-uitslag.is-fout{background:var(--ov-rood-vlak);color:var(--ov-rood);}
.tb-igw-uitslag a{margin-left:6px;color:inherit;text-decoration:underline;text-underline-offset:3px;}

/* Fase 4: het voorstel in het formulier zetten */
.tb-igw-baksels .tb-igw-zet{align-self:start;margin-top:2px;font:600 13px/1.3 var(--tb-sans);color:var(--tb-accent-text);text-decoration:underline;text-underline-offset:3px;}
.tb-igw-baksels .tb-igw-zet.is-geopend{color:var(--ov-zacht);font-weight:400;}

/* De melding boven het formulier Baksel toevoegen (tb-instagram-invullen.js) */
.tb-igv-melding{margin:0 0 16px;padding:12px 16px;border-radius:var(--tb-r-card,14px);background:var(--tb-warn-bg);color:var(--tb-warn-ink);font:400 14px/1.55 var(--tb-sans);}
.tb-igv-melding.is-goed{background:var(--tb-ok-bg);color:var(--tb-ok-ink);}
.tb-igv-melding.is-fout{background:var(--tb-bad-bg);color:var(--tb-bad-ink);}
.tb-igv-melding a{color:inherit;text-decoration:underline;text-underline-offset:3px;}