/* ============================================================================
 * site-compat.css — Bootstrap-compatibiliteitslaag voor de geporte tools-/
 * portaalpagina's. Die pagina's (mijndns, doorsturingen, domain2products,
 * movedomain, dnsdiagnose, techdetector, sepa, mijnmailadressen, …) komen uit
 * de Lagom2-clientarea en gebruiken Bootstrap-klassen (.btn, .alert, .card,
 * .row/.col, .form-control, .table, .badge) plus Font Awesome-iconen. De eigen
 * site-layout laadt Bootstrap niet; deze compacte laag levert precies de
 * klassen die die pagina's gebruiken, in de WebOké-huisstijl. Font Awesome zelf
 * wordt los meegeladen (assets/fa/css/all.min.css).
 *
 * Alleen de klassen die de geporte pagina's echt gebruiken (gemeten). Pagina-
 * eigen <style>-blokken (bv. de mijndns-* stijl) bouwen hierop voort.
 * ========================================================================== */

:root {
  --wc-primary:#1062fe; --wc-primary-d:#0b4fd0;
  --wc-rand:#e5e7eb; --wc-inkt:#1f2937; --wc-dim:#6b7280;
  --wc-groen:#15803d; --wc-groen-bg:#dcfce7; --wc-groen-rand:#86efac;
  --wc-rood:#b91c1c;  --wc-rood-bg:#fef2f2;  --wc-rood-rand:#fecaca;
  --wc-oranje:#b45309;--wc-oranje-bg:#fffbeb;--wc-oranje-rand:#fde68a;
  --wc-blauw:#075985; --wc-blauw-bg:#eff6ff; --wc-blauw-rand:#bfdbfe;
}

/* ---- Grid (Bootstrap-achtig, 12 koloms) ---- */
.row{display:flex;flex-wrap:wrap;margin:0 -12px}
.row>[class^="col"],.row>[class*=" col"]{padding:0 12px;box-sizing:border-box}
[class^="col-"],[class*=" col-"]{flex:1 1 0;min-width:0;box-sizing:border-box}
.col-md-12,.col-sm-12{flex:0 0 100%;max-width:100%}
.col-md-8{flex:0 0 66.666%;max-width:66.666%}
.col-md-6,.col-sm-6{flex:0 0 50%;max-width:50%}
.col-md-5{flex:0 0 41.666%;max-width:41.666%}
.col-md-4{flex:0 0 33.333%;max-width:33.333%}
.col-md-2{flex:0 0 16.666%;max-width:16.666%}
@media (max-width:768px){
  .col-md-8,.col-md-6,.col-md-5,.col-md-4,.col-md-2,.col-sm-6{flex:0 0 100%;max-width:100%}
}

/* ---- Knoppen: basis, maten en primair/secundair/stil komen uit de centrale
   knoppenlaag in site.css (laadt eerder, dus hier NIET herhalen). Hier alleen
   de extra Bootstrap-varianten voor oude markup, gelijkgetrokken met de
   knoppengids: secondary/outline = geel secundair, default = stil. ---- */
.btn-lg{padding:15px 28px;font-size:15px}
.btn-block{display:flex;width:100%}
.btn-secondary,.btn-outline,.btn-outline-primary{background:rgba(255,209,102,.22);color:#7a5600}
.btn-secondary:hover,.btn-outline:hover,.btn-outline-primary:hover{background:rgba(255,209,102,.36);color:#634600}
.btn-default{background:#f0f2f6;color:#5e636e}
.btn-default:hover{background:#e8eaef;color:#17191c}
.btn-success{background:var(--wc-groen);color:#fff}
.btn-success:hover{background:#136c34;color:#fff}
.btn-danger{background:var(--wc-rood);color:#fff}
.btn-danger:hover{background:#991b1b;color:#fff}
.btn-warning{background:#f59e0b;color:#fff}
.btn-warning:hover{background:#d97706;color:#fff}
.btn-info{background:#0ea5e9;color:#fff}
.btn-info:hover{background:#0284c7;color:#fff}
.btn-group{display:inline-flex;gap:8px;flex-wrap:wrap}
.btn .btn-loading{display:none}
.btn.is-loading .btn-text{display:none}
.btn.is-loading .btn-loading{display:inline-flex}

/* ---- Meldingen ---- */
.alert{display:flex;align-items:flex-start;gap:10px;border:1px solid;border-radius:10px;
  padding:13px 16px;margin:0 0 18px;font-size:14.5px;line-height:1.55}
.alert .alert-icon,.alert>i{flex:none;margin-top:2px}
.alert-info{background:var(--wc-blauw-bg);border-color:var(--wc-blauw-rand);color:var(--wc-blauw)}
.alert-success{background:var(--wc-groen-bg);border-color:var(--wc-groen-rand);color:var(--wc-groen)}
.alert-danger{background:var(--wc-rood-bg);border-color:var(--wc-rood-rand);color:var(--wc-rood)}
.alert-warning{background:var(--wc-oranje-bg);border-color:var(--wc-oranje-rand);color:var(--wc-oranje)}

/* ---- Kaarten ---- */
.card{background:#fff;border:1px solid var(--wc-rand);border-radius:12px;
  box-shadow:0 1px 3px rgba(23,25,28,.05);margin-bottom:18px;overflow:hidden}
.card-header{padding:16px 20px;border-bottom:1px solid var(--wc-rand);
  font-weight:700;font-size:15px;color:var(--wc-inkt);background:#fafbfc}
.card-body{padding:20px}

/* ---- Formulieren ---- */
.form-group{margin-bottom:16px}
.form-label,label.form-label{display:block;font-weight:600;font-size:14px;margin-bottom:5px;color:var(--wc-inkt)}
.form-control{width:100%;padding:10px 13px;border:1.5px solid var(--wc-rand);border-radius:9px;
  font:inherit;font-size:14px;color:var(--wc-inkt);background:#fff;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.form-control:focus{outline:none;border-color:var(--wc-primary);box-shadow:0 0 0 3px rgba(16,98,254,.14)}
select.form-control{appearance:auto}
.input-group{display:flex;align-items:stretch}
.input-group>.form-control{border-radius:9px 0 0 9px;flex:1}
.input-group>.btn{border-radius:0 9px 9px 0}

/* ---- Tabellen ---- */
.table-responsive,.table-wrapper,.table-container{width:100%;overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--wc-rand);vertical-align:middle}
.table th,.table-header th{font-weight:700;color:var(--wc-dim);font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;background:#fafbfc}
.table-striped tbody tr:nth-child(even){background:#fafbfc}
.table-hover tbody tr:hover{background:#f5f8ff}

/* ---- Badges ---- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
  font-size:12px;font-weight:700;line-height:1.4;background:#f3f4f6;color:var(--wc-inkt)}
.badge-success{background:var(--wc-groen-bg);color:var(--wc-groen)}
.badge-danger{background:var(--wc-rood-bg);color:var(--wc-rood)}
.badge-warning{background:var(--wc-oranje-bg);color:var(--wc-oranje)}
.badge-info{background:var(--wc-blauw-bg);color:var(--wc-blauw)}

/* ---- Kleine utilities ---- */
.text-center{text-align:center}
.text-muted{color:var(--wc-dim)}
.d-flex{display:flex}
.mt-4{margin-top:24px}.mt-3{margin-top:16px}
.mb-3{margin-bottom:16px}.mb-4{margin-bottom:24px}
/* Mobiel: formuliervelden >= 16px, anders zoomt iOS Safari in bij focus. */
@media(max-width:640px){.form-control{font-size:16px}}