/* Digi Hosting Billing – klantenzone. Volgt de Lagom2-variabelen waar beschikbaar. */
:root {
    --dhb-ok: #16a34a;
    --dhb-ok-bg: #f0fdf4;
    --dhb-warn: #b45309;
    --dhb-warn-bg: #fffbeb;
    --dhb-err: #dc2626;
    --dhb-err-bg: #fef2f2;
    --dhb-muted: #6b7280;
    --dhb-border: var(--ui-block-border-color, #e5e7eb);
    --dhb-radius: var(--border-radius-base, 8px);
    --dhb-primary: var(--brand-primary, #2563eb);
}

/* ---- VIES ---- */
.dhb-vies { margin: -6px 0 16px; font-size: 13px; line-height: 1.45; border-radius: var(--dhb-radius); transition: all .2s ease; }
.dhb-vies--idle { display: none; }
.dhb-vies--checking, .dhb-vies--valid, .dhb-vies--invalid, .dhb-vies--format, .dhb-vies--unavailable { padding: 10px 12px; border: 1px solid var(--dhb-border); }
.dhb-vies--checking { color: var(--dhb-muted); }
.dhb-vies--valid { background: var(--dhb-ok-bg); border-color: #bbf7d0; }
.dhb-vies--invalid, .dhb-vies--format { background: var(--dhb-err-bg); border-color: #fecaca; color: var(--dhb-err); }
.dhb-vies--unavailable { background: var(--dhb-warn-bg); border-color: #fde68a; color: var(--dhb-warn); }
.dhb-vies__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dhb-vies__icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; color: #fff; background: currentColor; }
.dhb-vies--valid .dhb-vies__icon { background: var(--dhb-ok); }
.dhb-vies--invalid .dhb-vies__icon, .dhb-vies--format .dhb-vies__icon { background: var(--dhb-err); }
.dhb-vies--unavailable .dhb-vies__icon { background: var(--dhb-warn); }
.dhb-vies--checking .dhb-vies__icon { background: none; border: 2px solid var(--dhb-border); border-top-color: var(--dhb-primary); animation: dhb-spin .8s linear infinite; }
.dhb-vies--valid .dhb-vies__text { color: var(--dhb-ok); }
.dhb-vies__vat { margin-left: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--dhb-muted); }
.dhb-vies__company { margin-top: 6px; font-weight: 600; color: #111827; }
.dhb-vies__address { color: var(--dhb-muted); }
.dhb-vies__tax { margin-top: 6px; color: #374151; }
.dhb-vies__tax--reverse { font-weight: 600; color: var(--dhb-ok); }
.dhb-vies__fill { margin-top: 8px; padding: 4px 10px; font-size: 12px; border: 1px solid var(--dhb-border); border-radius: 999px; background: #fff; cursor: pointer; }
.dhb-vies__fill:hover { border-color: var(--dhb-primary); color: var(--dhb-primary); }
@keyframes dhb-spin { to { transform: rotate(360deg); } }

/* ---- Adres ---- */
.dhb-addr-wrap { position: relative; }
.dhb-addr-list { position: absolute; z-index: 1050; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--dhb-border); border-radius: var(--dhb-radius); box-shadow: 0 12px 32px rgba(17, 24, 39, .12); }
.dhb-addr-item { display: flex; flex-direction: column; padding: 8px 10px; border-radius: calc(var(--dhb-radius) - 2px); cursor: pointer; }
.dhb-addr-item.is-active, .dhb-addr-item:hover { background: #f3f4f6; }
.dhb-addr-main { font-weight: 600; color: #111827; }
.dhb-addr-sub { font-size: 12px; color: var(--dhb-muted); }
.dhb-addr-powered { padding: 6px 10px 2px; font-size: 11px; color: var(--dhb-muted); text-align: right; }
.dhb-addr-hint { margin: -6px 0 14px; font-size: 12px; }
.dhb-addr-hint:empty { display: none; }
.dhb-addr-hint--ok { color: var(--dhb-ok); }
.dhb-addr-hint--warn { color: var(--dhb-warn); }
.dhb-addr-hint--info { color: var(--dhb-muted); }

/* ---- Betaalkaart ---- */
.dhb-pay-card { display: flex; gap: 24px; align-items: center; margin: 0 0 24px; padding: 20px 24px; background: #fff; border: 1px solid var(--dhb-border); border-radius: calc(var(--dhb-radius) + 4px); box-shadow: 0 1px 2px rgba(17, 24, 39, .04); }
.dhb-pay-qr { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border: 1px solid var(--dhb-border); border-radius: var(--dhb-radius); }
.dhb-pay-qr svg { width: 150px; height: 150px; display: block; }
.dhb-pay-qr small { font-size: 11px; color: var(--dhb-muted); }
.dhb-pay-details { flex: 1 1 auto; min-width: 0; }
.dhb-pay-title { margin-bottom: 10px; font-size: 16px; font-weight: 700; color: #111827; }
.dhb-pay-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--dhb-border); }
.dhb-pay-row:last-of-type { border-bottom: 0; }
.dhb-pay-label { flex: 0 0 110px; font-size: 13px; color: var(--dhb-muted); }
.dhb-pay-value { flex: 1 1 auto; font-weight: 600; font-variant-numeric: tabular-nums; word-break: break-all; }
.dhb-pay-copy { flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid var(--dhb-border); border-radius: 6px; background: #fff; color: var(--dhb-muted); cursor: pointer; }
.dhb-pay-copy:hover { color: var(--dhb-primary); border-color: var(--dhb-primary); }
.dhb-pay-copy.is-copied { color: var(--dhb-ok); border-color: var(--dhb-ok); }
.dhb-pay-note { margin-top: 10px; font-size: 12px; color: var(--dhb-muted); }
@media (max-width: 640px) {
    .dhb-pay-card { flex-direction: column; align-items: stretch; padding: 16px; }
    .dhb-pay-qr { align-self: center; }
    .dhb-pay-label { flex-basis: 90px; }
}