/* Affiliate materiaal (/affiliate-materiaal, taak 81). Kaarten, knoppen en velden uit website-testen.css; hier de bouwer en de rasters. */
.am-pagina .wt-kaart { scroll-margin-top: 90px; }
.am-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.am-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.am-nav a { padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .85); border: 1px solid rgba(15, 23, 42, .1); color: #0b1f5c; font-size: 14px; font-weight: 600; text-decoration: none; }
.am-nav a:hover { border-color: #1d65af; color: #1d65af; }
.am-code .wt-input { max-width: 260px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.am-fout { color: #c0392b; }
.am-kopje { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #17191c; }
.am-h3 { margin: 0 0 6px; font-size: 17px; }

.am-varianten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 14px 0 18px; }
.am-variant { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid rgba(15, 23, 42, .12); border-radius: 12px; cursor: pointer; background: #fff; }
.am-variant:has(input:checked) { border-color: #1d65af; box-shadow: 0 0 0 3px rgba(29, 101, 175, .12); }
.am-variant input { margin-top: 3px; accent-color: #1d65af; }
.am-variant b { display: block; font-size: 15px; }
.am-variant small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: #4a5672; }

.am-bouwer { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.25fr); gap: 22px; align-items: start; }
.am-opties { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.am-opties label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: #3a3f47; }
.am-opties label small { font-weight: 400; color: #6b7280; line-height: 1.4; }
.am-opties select, .am-opties .wt-input { flex: 0 0 auto; width: 100%; height: 40px; min-height: 0; padding-top: 0; padding-bottom: 0; font-size: 14px; }
.am-opties select { padding: 0 10px; border: 1px solid rgba(15, 23, 42, .18); border-radius: 8px; background: #fff; font: inherit; font-weight: 500; }
.am-opties .am-breed { grid-column: 1 / -1; }
.am-opties .am-eigen { display: grid; gap: 12px; }
.am-opties .am-eigen[hidden] { display: none; }
.am-opties .am-vink { flex-direction: row; align-items: center; align-self: end; height: 40px; }
.am-opties input[type="color"] { width: 100%; height: 40px; padding: 2px; border: 1px solid rgba(15, 23, 42, .18); border-radius: 8px; background: #fff; }
.am-opties input[type="range"] { height: 40px; accent-color: #1d65af; }
.am-smal { max-width: 120px; }
.am-opties-rij { grid-template-columns: repeat(auto-fit, minmax(160px, 220px)); margin: 6px 0 16px; }
.am-voorbeeld-vlak { padding: 18px; border-radius: 14px; background: repeating-conic-gradient(#f1f4f8 0% 25%, #fff 0% 50%) 50% / 22px 22px; border: 1px dashed rgba(15, 23, 42, .15); }
.am-voorbeeld iframe { display: block; width: 100%; height: 170px; border: 0; }
.am-codes { display: grid; gap: 14px; margin-top: 20px; }
.am-codes textarea, .am-teksten textarea { width: 100%; padding: 10px 12px; border: 1px solid rgba(15, 23, 42, .15); border-radius: 8px; background: #f8fafc; font: 12.5px/1.5 "Roboto Mono", ui-monospace, Menlo, monospace; color: #17191c; resize: vertical; }
.am-teksten textarea { font: 14px/1.5 inherit; font-family: inherit; background: #fff; }
.am-codes small { display: block; margin-top: 4px; font-size: 12.5px; color: #6b7280; }
.am-kopieer { margin-left: auto; padding: 4px 11px; border: 1px solid #1d65af; border-radius: 6px; background: #fff; color: #1d65af; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.am-kopieer:hover { background: rgba(29, 101, 175, .07); }
.am-kopieer.am-ok, .am-kleurvak code.am-ok { background: #1d9a52; border-color: #1d9a52; color: #fff; }

.am-inline { display: inline-flex; align-items: center; gap: 10px; margin: 4px 0 14px; font-size: 14px; font-weight: 600; }
.am-inline select { height: 38px; padding: 0 10px; border: 1px solid rgba(15, 23, 42, .18); border-radius: 8px; font: inherit; }
.am-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.am-vector { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 14px; }
.am-logo { margin: 0; border: 1px solid rgba(15, 23, 42, .1); border-radius: 12px; overflow: hidden; background: #fff; }
.am-logo-vlak { display: flex; align-items: center; justify-content: center; height: 110px; padding: 18px; }
.am-klein .am-logo-vlak { height: 84px; padding: 14px; }
.am-logo-vlak img { max-width: 100%; max-height: 100%; }
.am-logo-wit .am-logo-vlak { background: #0a1f6e; }
.am-logo figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 9px 12px; border-top: 1px solid rgba(15, 23, 42, .08); font-size: 13px; color: #3a3f47; }
.am-logo figcaption a { font-weight: 700; color: #1d65af; text-decoration: none; }
.am-logo figcaption a:first-of-type { margin-left: auto; }
.am-zip { display: inline-block; margin-top: 16px; text-decoration: none; }
.am-regels { margin: 14px 0 0; padding-left: 20px; font-size: 14px; color: #3a3f47; line-height: 1.6; }

.am-banners { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.am-banner { margin: 0; max-width: 100%; }
.am-banner-vlak { max-width: 100%; overflow: hidden; border-radius: 4px; box-shadow: 0 2px 10px rgba(15, 23, 42, .1); }
.am-banner img { display: block; max-width: 100%; height: auto; }
.am-banner figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 7px; font-size: 13px; }
.am-banner figcaption a { color: #1d65af; font-weight: 700; text-decoration: none; }
.am-banner .am-kopieer { margin-left: 0; }

.am-badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.am-badge { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid rgba(15, 23, 42, .1); border-radius: 12px; }
.am-badge-donker { background: #eef3fa; }
.am-badge-vlak { flex: 1 1 auto; min-width: 0; }

.am-teksten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.am-qr { display: flex; gap: 20px; align-items: center; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(15, 23, 42, .08); }
.am-qr img { flex: 0 0 auto; padding: 8px; border: 1px solid rgba(15, 23, 42, .1); border-radius: 10px; background: #fff; }
.am-qr .wt-knop { display: inline-block; text-decoration: none; }

.am-kleuren { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.am-kleurvak { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 0 10px; border: 1px solid rgba(15, 23, 42, .1); border-radius: 12px; background: #fff; overflow: hidden; cursor: pointer; font: inherit; text-align: left; }
.am-kleurvak span { display: block; width: 100%; height: 64px; }
.am-kleurvak b, .am-kleurvak code { margin: 0 12px; font-size: 13.5px; }
.am-kleurvak code { padding: 1px 6px; border-radius: 4px; color: #4a5672; }

.am-faq { border-top: 1px solid rgba(15, 23, 42, .08); padding: 12px 0; }
.am-faq summary { cursor: pointer; font-weight: 700; color: #17191c; }
.am-faq p { margin: 8px 0 0; color: #3a3f47; line-height: 1.6; }

@media (max-width: 820px) {
	.am-bouwer { grid-template-columns: 1fr; }
	.am-qr { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) { .am-opties { grid-template-columns: 1fr; } }