/* ─────────────────────────────────────────────────────────────────────────
   dyja_finance in het klantportaal: melding (mislukte betaling, ticketvoortgang), abonnementsblok,
   pakket wijzigen, licenties en de bevestigingspagina. Geladen op elke klantpagina
   (dyja_finance_portal_css in includes/billing_rescue.php).
   Kleuren en rondingen volgen het nieuwe klantportaal (tokens --dyp-* van dyja_portal onder html.dyp);
   zonder dat portaal gelden de terugvalwaarden, afgestemd op het gewone Perfex-thema.
   Kaarten, tabellen en knoppen zijn die van het portaal zelf (.panel_s, .table, .btn): hier staat
   alleen wat het portaal niet heeft. Geen klassen "total"/"subtotal"/"adjustment" (Perfex-JS herschrijft die).
   ───────────────────────────────────────────────────────────────────────── */
.dfp {
    --dfp-ink: var(--dyp-ink, #1e293b);
    --dfp-ink2: var(--dyp-ink-2, #334155);
    --dfp-muted: var(--dyp-muted, #64748b);
    --dfp-line: var(--dyp-line, #e5e7eb);
    --dfp-paper: var(--dyp-paper, #fff);
    --dfp-accent: var(--dyp-accent-ink, #2563eb);
    --dfp-radius: var(--dyp-radius, 8px);
    --dfp-radius-sm: var(--dyp-radius-sm, 6px);
    --dfp-label-ls: var(--dyp-label-ls, .04em);
    --dfp-danger: #b91c1c;
    --dfp-danger-soft: #fef2f2;
    --dfp-danger-line: #fecaca;
}

/* Melding in de pagina: mislukte betaling (is-danger) en rustige regels (ticketvoortgang). */
.dfp-notice {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin: 0 0 20px;
    padding: 14px 18px;
    background: var(--dfp-paper);
    border: 1px solid var(--dfp-line);
    border-radius: var(--dfp-radius);
    box-shadow: 0 1px 2px rgba(10, 10, 10, .03);
    color: var(--dfp-ink2);
    font-size: 14px;
    line-height: 1.5;
}
/* Portaalpagina's zetten hun kop en kaarten in .row (15px breder dan de container): de melding volgt dat,
   ook op het dashboard van het nieuwe portaal (dat dezelfde lijn aanhoudt). */
.dfp-notice.is-bleed { margin-left: -15px; margin-right: -15px; }
.dfp-notice-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--dfp-accent) 12%, transparent);
    color: var(--dfp-accent);
    font-size: 14px;
}
.dfp-notice-body { flex: 1 1 280px; min-width: 0; }
.dfp-notice-body strong { color: var(--dfp-ink); font-weight: 600; }
.dfp-notice-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dfp-notice.is-danger { background: var(--dfp-danger-soft); border-color: var(--dfp-danger-line); }
.dfp-notice.is-danger .dfp-notice-icon { background: #fee2e2; color: var(--dfp-danger); }
.dfp-notice.is-danger .dfp-notice-body strong { color: #7f1d1d; }
/* Gelukt (abonnement afgesloten) */
.dfp-notice.is-success { background: #f0fdf4; border-color: #bbf7d0; }
.dfp-notice.is-success .dfp-notice-icon { background: #dcfce7; color: #15803d; }
.dfp-notice.is-success .dfp-notice-body strong { color: #14532d; }
/* Keuze van de website boven inloggen en registreren: even breed als het formulier eronder. */
.dfp-notice.dfp-intent { max-width: 560px; margin: 24px auto 16px; }
body.register .dfp-notice.dfp-intent { max-width: calc((100% + 30px) * .83333 - 30px); }
.dfp-notice-price { color: var(--dfp-muted); white-space: nowrap; }
/* Inloggen: even breed als het formulier (col-md-4, op de tablet col-sm-8) en dicht op de kop eronder. */
body.customers_login .dfp-notice.dfp-intent { max-width: calc((100% + 30px) / 3 - 30px); margin-bottom: 0; }
body.customers_login .dfp-notice.dfp-intent + .row > .mtop40 { margin-top: 28px; }
body.customers_login .dfp-intent .dfp-notice-body { flex-basis: 0; }
body.customers_login .dfp-intent .dfp-notice-actions, body.customers_login .dfp-intent .dfp-notice-actions .btn { flex: 1 1 100%; }

/* Paginakop: titel in de stijl van de Perfex-lijsten, één zin uitleg, acties rechts. */
.dfp-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 12px; }
.dfp-head h4 { margin: 0; }
.dfp-sub { margin: 4px 0 0; color: var(--dfp-muted); font-size: 14px; }
.dfp-label {
    display: block;
    margin: 0 0 6px;
    font-family: var(--dyp-mono, inherit);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: var(--dfp-label-ls);
    text-transform: uppercase;
    color: var(--dfp-muted);
}
.dfp-hints { list-style: none; margin: 0 0 16px; padding: 0; color: var(--dfp-muted); font-size: 13.5px; line-height: 1.55; }
.dfp-hints li { position: relative; padding-left: 16px; }
.dfp-hints li + li { margin-top: 2px; }
.dfp-hints li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .55; }
.dfp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
a.dfp-quiet, .dfp-quiet { color: var(--dfp-muted); font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--dfp-line); }
a.dfp-quiet:hover, a.dfp-quiet:focus { color: var(--dfp-ink); text-decoration-color: currentColor; }
a.dfp-quiet:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }
.dfp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--dfp-danger-soft);
    border: 1px solid var(--dfp-danger-line);
    color: var(--dfp-danger);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}
.dfp-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Abonnementsblok: één kaart, per abonnement een rij met rechts de acties. */
/* html.dyp zet 24px om de kaartinhoud: de rijen brengen hun eigen ruimte boven en onder mee. */
.dfp.dfp-subs .panel_s > .panel-body { padding-top: 4px; padding-bottom: 4px; }
.dfp-sub-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; min-height: 68px; padding: 16px 0; }
.dfp-sub-row + .dfp-sub-row { border-top: 1px solid var(--dfp-line); }
.dfp-sub-main { flex: 1 1 320px; min-width: 0; }
.dfp-sub-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0; font-size: 16px; font-weight: 600; color: var(--dfp-ink); }
.dfp-sub-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 6px; color: var(--dfp-muted); font-size: 13.5px; }
.dfp-sub-quota { display: inline-flex; align-items: center; gap: 10px; }
.dfp-sub-hint { margin: 6px 0 0; color: #7f1d1d; font-size: 13.5px; line-height: 1.5; }
.dfp-sub-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.dfp-sub-actions .dfp-quiet { margin-left: 6px; }
.dfp-meter { display: inline-block; width: 96px; height: 6px; border-radius: 999px; background: var(--dfp-line); overflow: hidden; }
.dfp-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--dyp-accent, #2563eb); }
.dfp-meter.is-full > span { background: #dc2626; }

/* Pakket wijzigen: huidig pakket boven de keuzes. */
.dfp-current { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 4px; }
.dfp-current-name { margin: 0; font-size: 18px; font-weight: 600; color: var(--dfp-ink); }
.dfp-current-price { color: var(--dfp-ink2); }
.dfp-page .table { margin-bottom: 0; }
.dfp-page .table form { margin: 0; }
.dfp-qty { display: inline-flex; align-items: center; gap: 8px; }
.dfp-qty .form-control { width: 96px; }
/* Pakket gekozen op de website (?kies=): in het gewone thema een licht geel vlak, in het nieuwe portaal een
   streep in de accentkleur (het vlak wordt op telefoonkaarten vlekkerig). */
.dfp-page .table > tbody > tr.is-chosen > td { background: #fcf8e3; }
html.dyp .dfp-page .table > tbody > tr.is-chosen > td { background: transparent !important; }
html.dyp .dfp-page .table > tbody > tr.is-chosen > td:first-child { box-shadow: inset 3px 0 0 var(--dyp-accent); }

/* Webshop (includes/webshop_guard.php): "excl. btw" achter de prijs, het pakket dat de klant al heeft. */
.dfp-shop-tax { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--dyp-muted, #64748b); }
/* Gewone thema: de tekst paste niet binnen de halve kolom van de module. */
html:not(.dyp) form.servicesForm.dfp-shop-current button.btn { padding-left: 4px; padding-right: 4px; }
html body form.servicesForm.dfp-shop-current button.btn[disabled] { opacity: 1; background: transparent !important; border: 1px solid var(--dyp-line-2, #d1d5db) !important; color: var(--dyp-muted, #64748b) !important; cursor: default; }

/* Bevestigen: wat verandert er, wat kost het nu, wat kost het daarna. */
.dfp-confirm { max-width: 720px; }
.dfp-step + .dfp-step { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--dfp-line); }
.dfp-change { display: flex; align-items: stretch; flex-wrap: wrap; gap: 10px; }
.dfp-change-item { flex: 1 1 220px; padding: 12px 14px; border: 1px solid var(--dfp-line); border-radius: var(--dfp-radius-sm); color: var(--dfp-ink2); }
.dfp-change-item.is-new { border-color: var(--dfp-ink); color: var(--dfp-ink); font-weight: 600; }
.dfp-change-item small { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 500; color: var(--dfp-muted); }
.dfp-change-arrow { flex: none; align-self: center; color: var(--dfp-muted); }
.dfp-explain { margin: 12px 0 0; color: var(--dfp-ink2); }
.dfp-now { margin: 0; font-size: 15px; color: var(--dfp-ink); }
.dfp-lines { margin: 0; }
.dfp-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 7px 0; color: var(--dfp-ink2); }
.dfp-line dt { font-weight: 400; }
.dfp-line dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dfp-line.is-sum { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--dfp-line); color: var(--dfp-ink); font-size: 16px; }
.dfp-line.is-sum dt, .dfp-line.is-sum dd { font-weight: 600; }
.dfp-fine { margin: 10px 0 0; color: var(--dfp-muted); font-size: 13px; line-height: 1.5; }
.dfp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 24px; }
.dfp-actions .dfp-quiet { margin-left: auto; }

@media (max-width: 991px) {
    body.register .dfp-notice.dfp-intent { max-width: none; }
    body.customers_login .dfp-notice.dfp-intent { max-width: calc((100% + 30px) * .66667 - 30px); }
}
@media (max-width: 767px) {
    .dfp-notice { padding: 14px; }
    body.customers_login .dfp-notice.dfp-intent { max-width: none; }
    html.dyp .dfp-page .table > tbody > tr.is-chosen { border-color: var(--dyp-accent); box-shadow: inset 3px 0 0 var(--dyp-accent); }
    html.dyp .dfp-page .table > tbody > tr.is-chosen > td:first-child { box-shadow: none; }
    .dfp-notice-body { flex-basis: 0; }
    .dfp-notice-actions, .dfp-notice-actions .btn { flex: 1 1 100%; }
    .dfp-sub-actions { flex: 1 1 100%; }
    .dfp-change-arrow { display: none; }
    .dfp-actions .btn { flex: 1 1 100%; }
    .dfp-actions .dfp-quiet { margin-left: 0; }
}

/* Productpagina van de webshop: wat er na de knop gebeurt. */
.dfp-shop-next { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--dyp-muted, #6b7280); }