/* ============================================================
   goud999safe — pagina-CSS: Koop / Verkoop
   Afgesplitst uit de oude pagina-CSS (fase 2). Alleen deze pagina('s).
   ============================================================ */

  /* ============================================================
     Koop / Verkoop-pagina
     (metaal-keuze hergebruikt de transacties-tabs: .sub-tabs.orders-tabs / .sub-tab)
     ============================================================ */
  /* Layout: hoofd + zijbalk (1fr + 320px, zoals referentie) */
  .kv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; align-items: start; }
  .kv-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  .kv-side { display: flex; flex-direction: column; gap: 16px; }

  /* Handelskaart */
  .kv-trade-card, .kv-col { min-width: 0; }
  .kv-trade-card::after { background: var(--forest); width: 60px; height: 3px; }
  .kv-trade { display: grid; grid-template-columns: 1fr 1fr; }
  .kv-col { padding: 24px 28px; }
  .kv-col + .kv-col { border-left: 1px solid var(--grey-line); }
  /* Koop/Verkoop als twee aparte kaarten (desktop): marge tussen de twee.
     Elke kaart heeft in de vlakke stijl een eigen volledige rand (via .card), dus
     de linkerrand van de Verkoop-kaart blijft staan. */
  .kv-trade-card--split .kv-trade { gap: 20px; }
  .kv-col-title { font-size: var(--fs-22); font-weight: 700; color: var(--forest); letter-spacing: -0.01em; margin-bottom: 18px; }
  .kv-label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-14); font-weight: 600; color: var(--ink); white-space: nowrap; }
  .kv-label strong { color: var(--gold); font-weight: 700; }
  .kv-holding { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--fs-13); color: var(--text-soft); white-space: nowrap; }
  .kv-holding svg { width: 13px; height: 13px; color: var(--forest); }
  .kv-holding strong { color: var(--ink); font-weight: 700; }
  /* Desktop: holding terug naast "Order in Gram" (rechts in de veldkop); mobiel blijft hij onder het veld.
     Enkel de metaalnaam ("Goud:") wordt op desktop verborgen — hoeveelheid + Max blijven. */
  @media (min-width: 769px) {
    .kv-field:has(.kv-holding) { position: relative; }
    .kv-field:has(.kv-holding) .kv-holding { position: absolute; top: 0; right: 0; margin-top: 0; }
    .kv-holding-metal { display: none; }
  }
  .kv-input { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border: 1px solid var(--grey-line); border-radius: var(--r-sm); background: var(--paper); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
  .kv-input:focus-within { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(22,46,37,0.1); }
  .kv-input-prefix { color: var(--text-muted); font-size: var(--fs-14); font-weight: 600; flex-shrink: 0; }
  .kv-input input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--fs-16); font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
  .kv-input-suffix { color: var(--text-muted); font-size: var(--fs-13); flex-shrink: 0; }

  /* Swap (visueel, niet klikbaar) */
  .kv-swap { display: flex; justify-content: center; margin: 8px 0 2px; }
  /* Euro-veld (na de swap) iets dichter tegen de pijltjes */
  .kv-swap + .kv-field { margin-top: -6px; }
  .kv-swap-btn { width: 32px; height: 32px; display: grid; place-items: center; color: var(--text-muted); cursor: default; pointer-events: none; }
  .kv-swap-btn svg { width: 14px; height: 14px; }

  /* Spaarplan-callout */
  .kv-callout { display: flex; align-items: center; gap: 18px; background: var(--paper); border-radius: var(--r-md); box-shadow: var(--shadow-card); border: 1px solid var(--card-border); padding: 18px 24px; }
  .kv-callout-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--forest); color: var(--gold-soft); display: grid; place-items: center; flex-shrink: 0; }
  .kv-callout-icon svg { width: 18px; height: 18px; }
  .kv-callout-title { font-size: var(--fs-15); font-weight: 700; color: var(--ink); line-height: 1.2; margin-bottom: 0; }
  .kv-callout-link { font-size: var(--fs-13); font-weight: 600; color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
  .kv-callout-link:hover { color: var(--gold); }

  /* Zijbalk: koers-grafiek (vlakke kaart, geen accent) */
  .kv-koers { padding: 18px 20px 14px; }
  .kv-koers::before, .kv-koers::after { display: none; }
  .kv-koers-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
  .kv-koers-title { font-size: var(--fs-11); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--forest); }
  .kv-koers-period { font-size: var(--fs-11); color: var(--text-muted); }
  .kv-koers-img { width: calc(100% + 40px); height: 156px; margin: 0 -20px -14px; display: block; }

  /* Zijbalk: prijzen per gram (gecentreerd, zoals referentie) */
  .kv-prices { overflow: hidden; }
  .kv-prices::after { background: var(--forest); width: 40px; height: 3px; }
  .kv-price-row { display: grid; grid-template-columns: 1fr 1.1fr; align-items: stretch; }
  .kv-price-row + .kv-price-row { border-top: 1px solid var(--grey-line); }
  .kv-price-label { padding: 16px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
  .kv-price-label strong { font-size: var(--fs-12); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--forest); }
  .kv-price-label span { font-size: var(--fs-11); color: var(--text-soft); }
  .kv-price-value { background: var(--forest); color: #fff; font-size: var(--fs-15); font-weight: 700; letter-spacing: -0.01em; padding: 16px 18px; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
  .kv-price-live { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; font-size: var(--fs-11); color: var(--text-soft); border-top: 1px solid var(--grey-line); }
  .kv-live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--forest); flex-shrink: 0; }
  .kv-live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--forest); animation: kv-ping 1.8s ease-out infinite; }
  @keyframes kv-ping { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(3); opacity: 0; } }

  /* Responsive */
  @media (max-width: 1080px) {
    .kv-layout { grid-template-columns: 1fr; }
    .kv-side { flex-direction: row; }
    .kv-side > * { flex: 1; }
  }
  @media (max-width: 768px) {
    .kv-trade { grid-template-columns: 1fr; }
    .kv-col { padding: 24px 20px 14px; }
    .kv-col-title { display: none; }
    /* Grotere, hogere invoervelden + knop (mobiel) */
    .kv-input { height: 56px; }
    .kv-input input { font-size: 17px; }
    /* .btn-buy/.btn-sell mobiel-hoogte staat in 03-components.css (btn-buy wordt
       ook op prijsgrafieken gebruikt). */
    /* (Bedrag-veld .amount-wrap/.amount-input mobiel: zie override ná de base-regel,
       anders wint de later geladen base-regel.) */
    /* Labels boven de velden 1px groter */
    .kv-label { font-size: var(--fs-15); }
    /* Euro-veld dichter tegen de pijltjes erboven */
    .kv-swap { margin: 4px 0 0; }
    /* Metaaltabs als kaart-grid (2 boven / 3 onder), witte cellen, actief = groen + goud */
    .kv-metal-tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; padding: 0; margin-bottom: 14px; overflow: hidden; background: var(--grey-line); border: 1px solid var(--grey-line); border-radius: var(--r-md); }
    .kv-metal-tabs .sub-tab { display: flex; align-items: center; justify-content: center; padding: 15px 8px; background: var(--paper); color: var(--text-soft); font-size: var(--fs-15); font-weight: 700; text-align: center; border-bottom: none; white-space: nowrap; }
    .kv-metal-tabs .sub-tab:nth-child(1), .kv-metal-tabs .sub-tab:nth-child(2) { grid-column: span 3; }
    .kv-metal-tabs .sub-tab:nth-child(n+3) { grid-column: span 2; }
    .kv-metal-tabs .sub-tab.active { background: var(--forest); color: #fff; border-bottom: none; }
    .kv-col[data-panel="verkoop"] { display: none; }
    .kv-trade.show-verkoop .kv-col[data-panel="koop"] { display: none; }
    .kv-trade.show-verkoop .kv-col[data-panel="verkoop"] { display: block; }
    .kv-side { display: none; }
  }

  /* Koop/Verkoop — order-totaal onder de knop (verschijnt bij invoer) */
  .kv-total { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--grey-line); text-align: center; }
  .kv-total[hidden] { display: none; }
  /* Totaal-label */
  .kv-total-label { font-size: var(--fs-15); font-weight: 700; color: var(--forest); letter-spacing: -0.01em; }
  @media (max-width: 768px) { .kv-total-label { font-size: var(--fs-16); } }
  .kv-total-sub { font-size: var(--fs-12); color: #565656; margin-top: 2px; }
  .kv-total-amount { font-size: var(--fs-20); font-weight: 700; color: var(--forest); margin-top: 8px; font-variant-numeric: tabular-nums; }
  @media (max-width: 768px) { .kv-total-amount { font-size: 24px; } }

  /* Inline koop/verkoop-prijs naast "Order in Gram" — enkel mobiel (desktop toont de zijbalk-prijzen) */
  .kv-rate-inline { display: none; }
  @media (max-width: 768px) {
    .kv-rate-inline { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: var(--fs-12); color: var(--text-soft); white-space: nowrap; }
    .kv-rate-inline strong { color: var(--forest); font-weight: 700; }
    .kv-rate-inline .kv-live-dot { width: 7px; height: 7px; }
  }

  /* Geruststelling onder de koop/verkoop-knop */
  /* Verschijnt pas wanneer het totaal-blok zichtbaar is (d.w.z. bij een ingevulde waarde) */
  .kv-confirm-note { display: none; align-items: flex-start; gap: 6px; font-size: var(--fs-12); color: #565656; line-height: 1.4; margin-top: 12px; }
  .kv-total:not([hidden]) ~ .kv-confirm-note { display: flex; }
  .kv-confirm-note .kv-hint-icon { flex-shrink: 0; margin-top: 1px; }

  /* Verwerkings-overlay + spinner */
  .kv-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 24, 34, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .kv-overlay[hidden] { display: none; }
  .kv-overlay-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 200px; aspect-ratio: 1 / 1; padding: 16px; background: var(--paper); border-radius: var(--r-md); box-shadow: none; }
  /* Loader: geanimeerde goudstaven (GIF) */
  .kv-loader { width: 52px; height: 52px; border-radius: 50%; border: 4px solid var(--grey-line); border-top-color: var(--forest); animation: kv-spin .8s linear infinite; }
  @keyframes kv-spin { to { transform: rotate(360deg); } }
  .kv-overlay-text { font-size: var(--fs-15); font-weight: 700; color: var(--forest); letter-spacing: -0.01em; text-align: center; }

  /* ============================================================
     Koop/Verkoop — bevestiging / betaling
     ============================================================ */
  .confirm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
  /* Beide kaart-headers even hoog (= hoogte van de timer-ring, 40px + padding), zodat de titels
     'Overzicht order' en 'Bevestig koop' altijd op één lijn staan — ook terwijl de aftelklok loopt. */
  .confirm-grid .card-header-row { min-height: 72px; }

  /* Overzicht-tabel */
  .card-body:has(.order-table) { padding-top: 14px; padding-bottom: 16px; }
  .order-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
  .order-table td { padding: 9px 0; font-size: var(--fs-14); border-bottom: 1px solid var(--grey-line); }
  .order-table tbody tr:last-child td { border-bottom: none; }
  .order-table td:first-child { color: var(--text-soft); }
  .order-table td:last-child { text-align: right; font-weight: 600; color: var(--ink); }
  .order-table tr.total-row td { border-top: 2px solid var(--grey-line); border-bottom: none; padding-top: 14px; }
  .order-table tr.total-row td:first-child { font-weight: 700; color: var(--ink); }
  .order-table tr.total-row td:last-child { font-size: var(--fs-16); color: var(--forest); }
  .order-table tr.zero-row td:last-child { color: var(--status-ok); }
  .order-table tr.row-label-bold td { font-weight: 700; color: var(--ink); }

  /* Afgeronde-transactie: succesblok + melding + acties
     (.success-icon-wrap/.success-check + keyframes staan nu globaal in 03-components.css) */
  .success-block { text-align: center; margin-bottom: 24px; }
  .success-title { font-size: var(--fs-20); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 6px; }
  .success-ordernr { font-size: var(--fs-13); color: var(--text-soft); margin-bottom: 4px; }
  .success-ordernr strong { color: var(--ink); font-weight: 700; }
  .success-sub { font-size: var(--fs-14); color: var(--text-soft); }
  .info-callout { display: flex; align-items: flex-start; gap: 10px; background: var(--grey-soft); border-radius: var(--r-md); padding: 14px 18px; font-size: var(--fs-13); color: #565656; line-height: 1.45; margin-bottom: 24px; }
  .info-callout svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--forest); }
  .action-row { display: flex; flex-direction: column; gap: 10px; }
  .action-row .btn-on-white--solid, .action-row .btn-on-white--ghost { width: 100%; justify-content: center; }

  /* Aftel-progressiebalk: bovenste lijntje van de kaart (goud op donkergroen) */
  /* Verberg de standaard kaart-accenten (grijs lijntje + zwart hoekje) zodat de progressiebalk schoon bovenaan staat */
  .card:has(.timer-progress)::before,
  .card:has(.timer-progress)::after { display: none; }
  .timer-progress { height: 4px; background: var(--forest); overflow: hidden; }
  .timer-progress-fill { display: block; height: 100%; width: 100%; background: var(--gold); transition: width 1s linear; }
  /* Timer-balk boven de "Bevestig koop"-kaart */
  .timer-bar { background: var(--forest); color: #fff; padding: 12px 24px; font-size: var(--fs-13); font-weight: 600; }
  .timer-bar .time-left { font-variant-numeric: tabular-nums; }
  .timer-bar .timer-expired { display: none; }
  .timer-bar .timer-expired a { color: #fff; text-decoration: underline; }
  .timer-bar.is-expired { background: var(--status-error); }
  .timer-bar.is-expired .timer-running { display: none; }
  .timer-bar.is-expired .timer-expired { display: inline; }
  /* Mini prijs-lock timer in de kaartheader: cirkelvormige aftelling rechts naast de titel. */
  .kv-timer { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .kv-timer-ring { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--gold) calc(var(--p, 100) * 1%), var(--grey-line) 0); }
  .kv-timer-ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--paper); }
  .kv-timer-ring .time-left { position: relative; font-size: 11px; font-weight: 700; color: var(--forest); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
  .kv-timer .timer-expired { display: none; font-size: var(--fs-12); font-weight: 700; color: var(--status-error); }
  .kv-timer.is-expired .kv-timer-ring { display: none; }
  .kv-timer.is-expired .timer-expired { display: inline; }

  /* Order-totaal regel + divider */
  .order-total-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
  .order-total-label { font-size: var(--fs-14); color: var(--text-soft); }
  .order-total-amount { font-size: var(--fs-16); font-weight: 700; color: var(--forest); font-variant-numeric: tabular-nums; }
  .section-divider { height: 1px; background: var(--grey-line); margin: 16px 0; }

  /* Betaalmethodes */
  .pay-label { font-size: var(--fs-13); font-weight: 700; color: var(--forest); margin-bottom: 12px; }
  .payment-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 22px; }
  .payment-method { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border: 1.5px solid var(--grey-line); border-radius: var(--r-sm); font-size: var(--fs-13); font-weight: 600; color: var(--ink); cursor: pointer; text-align: center; transition: border-color var(--t-fast), background var(--t-fast); }
  .payment-method:hover { border-color: rgba(22,46,37,0.4); }
  .payment-method.selected { border-color: var(--forest); background: var(--forest-tint); color: var(--forest); }
  .payment-method input[type="radio"] { display: none; }
  .payment-logo { height: 22px; width: auto; display: block; }

  /* Betaling via positie contant (groen blok) */
  .cash-block { display: flex; align-items: flex-start; gap: 14px; background: var(--forest-tint); border: 1px solid rgba(22,46,37,0.18); border-radius: var(--r-md); padding: 16px 20px; margin-bottom: 22px; }
  .cash-block-icon { width: 36px; height: 36px; flex-shrink: 0; background: var(--status-ok); border-radius: 50%; display: grid; place-items: center; color: #fff; }
  .cash-block-icon svg { width: 17px; height: 17px; }
  .cash-block-body { flex: 1; min-width: 0; }
  .cash-block-label { font-size: var(--fs-12); font-weight: 700; color: var(--forest); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
  .cash-block-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--fs-14); }
  .cash-block-row span:first-child { color: var(--text-soft); }
  .cash-block-row span:last-child { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
  .cash-block-row + .cash-block-row { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(22,46,37,0.12); }
  .cash-block-row.highlight span:last-child { color: var(--forest); }

  /* Annuleer-link */
  .btn-cancel { display: block; text-align: center; margin-top: 14px; font-size: var(--fs-13); color: var(--text-soft); text-decoration: none; padding: 8px; border-radius: var(--r-sm); transition: color var(--t-fast), background var(--t-fast); }
  .btn-cancel:hover { color: var(--status-error); background: rgba(184,72,79,0.06); }

  /* Op deze pagina geen top-marge op de bevestig-knop */
  .confirm-grid .btn-buy { margin-top: 0; }

  /* ── Koop/Verkoop betaling — betaalstappen + bankgegevens ── */
  .pay-steps { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 18px; }
  .pay-step { position: relative; display: flex; align-items: flex-start; gap: 14px; }
  /* verbindingslijn tussen de stappen */
  .pay-step:not(:last-child)::before {
    content: ""; position: absolute; left: 15px; top: 32px; bottom: -18px;
    width: 2px; background: var(--forest);
  }
  .pay-step-mark { position: relative; z-index: 1; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--forest) 0%, var(--forest-light) 100%); color: var(--gold-soft); box-shadow: none; }
  .pay-step-mark svg { width: 16px; height: 16px; }
  /* 1) Actieve stap (bank): niet-gevulde cirkel — actie nog uit te voeren. */
  .pay-step--active .pay-step-mark { background: var(--paper); border: 2px solid var(--forest); color: var(--forest); box-shadow: none; }
  .pay-step-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 2px; }
  .pay-step-body .pay-badge { align-self: flex-start; margin-top: 2px; }
  .pay-step-title { font-size: var(--fs-14); font-weight: 600; color: var(--forest); }
  .pay-step-meta { margin-left: auto; margin-right: 28px; padding-top: 2px; font-size: var(--fs-14); font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }   /* 28px = copy-knop (20px) + gap (8px): getal lijnt uit met het bedrag mét copy-knop eronder */
  .pay-step-amount { margin-left: auto; padding-top: 2px; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-14); font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
  .pay-copy { color: var(--text-muted); }
  .pay-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--r-pill); background: var(--forest-tint); color: var(--forest); font-size: var(--fs-11); font-weight: 700; }
  .pay-warning { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; }
  .pay-warning svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; color: var(--status-error); }
  .pay-wait { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--forest-tint); border: 1px solid var(--grey-line); }
  .pay-wait-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .pay-wait-title { color: var(--forest); font-size: var(--fs-15); font-weight: 700; }
  .pay-wait-sub { color: var(--ink-soft); font-size: var(--fs-13); line-height: 1.45; opacity: .8; }
  .pay-spinner { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 2.5px solid rgba(22,46,37,.15); border-top-color: var(--forest); animation: pay-spin .7s linear infinite; }
  @keyframes pay-spin { to { transform: rotate(360deg); } }

  @media (max-width: 900px) {
    .confirm-grid { grid-template-columns: 1fr; }
    .kvb-order-card { display: none; }
  }

  /* Max-knop (verkoop-holding) */
  .kv-max { margin-left: 6px; padding: 1px 9px; font-size: var(--fs-11); font-weight: 700; color: var(--forest); background: var(--forest-tint); border: none; border-radius: var(--r-pill); cursor: pointer; font-family: inherit; }
  .kv-max:hover { background: var(--forest); color: #fff; }

  /* Helptekst onder het euro-veld */
  .kv-field-hint { font-size: var(--fs-12); color: #565656; line-height: 1.4; margin-top: 8px; }
  .kv-hint-icon { width: 14px; height: 14px; color: var(--forest); vertical-align: -2px; margin-right: 2px; }

  /* Koop/Verkoop-tabs: hergebruiken de .mobile-tabs/.mobile-tab balk (zelfde layout
     en positie als de Portfolio/Transacties-tabs). Hier enkel de button-reset +
     actief-stijl op basis van .is-active (JS schakelt deze class). */
  .kv-toggle-btn { background: transparent; border: none; border-bottom: 2px solid transparent; font-family: inherit; cursor: pointer; }
  .mobile-tab.kv-toggle-btn.is-active { color: var(--forest); border-bottom: 2px solid var(--forest); }

/* ═══════════════════════════════════════════════
   Koop/Verkoop — melding "Identiteitsdocument ontbreekt"
   (blokkeert het verkoopformulier) — kv-idnotice / kv-locked
   ═══════════════════════════════════════════════ */
.kv-idnotice { border: 1.5px solid var(--grey-line); border-radius: var(--r-md); background: var(--paper); overflow: hidden; margin-bottom: 18px; }
.kv-idnotice-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; }
.kv-idnotice-ic { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: #fae8ea; display: grid; place-items: center; color: var(--status-error); }
.kv-idnotice-ic .icon { width: 19px; height: 19px; }
.kv-idnotice-title { font-size: var(--fs-16); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; line-height: 1.25; }
.kv-idnotice-body { padding: 16px 18px 18px; font-size: var(--fs-14); color: var(--ink); line-height: 1.55; overflow-wrap: break-word; }
.kv-idnotice-body p + p { margin-top: 12px; }
.kv-idnotice-lead { font-weight: 700; }
.kv-idnotice-btn { display: flex; width: 100%; justify-content: center; margin: 14px 0; padding: 12px 18px; white-space: normal; text-align: center; }
.kv-idnotice-body a:not(.kv-idnotice-btn) { color: var(--forest); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.kv-idnotice-sub { margin-top: 16px; padding: 13px 15px; background: var(--grey-soft); border-radius: var(--r-sm); color: var(--text-soft); font-size: var(--fs-13); }
.kv-idnotice-sub strong { display: block; margin-bottom: 3px; color: var(--ink); }
.kv-idnotice-btn .icon { width: 15px; height: 15px; }

/* Geblokkeerd verkoopformulier — de melding ligt eroverheen (overlay) */
.kv-locked { opacity: 0.5; pointer-events: none; user-select: none; filter: grayscale(0.2); }

/* Stapel: melding bovenop de (gedimde) invoervelden i.p.v. erboven */
.kv-col--idblock, .kv-idstack, .kv-idstack > .kv-idnotice { min-width: 0; }
.kv-idstack { position: relative; display: grid; }
.kv-idstack > .kv-idnotice,
.kv-idstack > .kv-locked { grid-area: 1 / 1; }
.kv-idstack > .kv-locked { align-self: start; z-index: 1; }
.kv-idstack > .kv-idnotice { z-index: 2; align-self: start; justify-self: center; width: 100%; margin: 0; }

/* ═══════════════════════════════════════════════
   Koop/Verkoop — sectie-loader (per kolom, klein metaal-icoon
   zonder tekst). Het formulier eronder wordt geblokkeerd (.kv-locked),
   net als bij de ID-melding op de verkoop-sectie.
   ═══════════════════════════════════════════════ */
.kv-loadstack { position: relative; display: grid; }
.kv-loadstack > .kv-sectionloader,
.kv-loadstack > .kv-locked { grid-area: 1 / 1; }
.kv-loadstack > .kv-locked { align-self: start; z-index: 1; opacity: 0.25; }
.kv-sectionloader { z-index: 2; align-self: center; justify-self: center; display: grid; place-items: center; width: 90px; height: 90px; background: var(--paper); border: 1px solid var(--grey-line); border-radius: var(--r-md); box-shadow: var(--shadow-card); }
.kv-sectionloader-img { width: 55px; height: 55px; display: block; }

/* ═══════════════════════════════════════════════
   Koop/Verkoop — melding "Handelen tijdelijk gesloten" (per kolom,
   overlay bovenop het geblokkeerde formulier). kv-closed / kv-closedstack
   ═══════════════════════════════════════════════ */
.kv-closedstack { position: relative; display: grid; }
.kv-closedstack > .kv-closed,
.kv-closedstack > .kv-locked { grid-area: 1 / 1; }
.kv-closedstack > .kv-locked { align-self: start; z-index: 1; opacity: 0.3; }
.kv-closed { z-index: 2; align-self: center; justify-self: center; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; width: calc(100% - 28px); max-width: 296px; padding: 26px 24px; background: var(--paper); border: 1px solid var(--grey-line); border-radius: var(--r-lg); box-shadow: none; }
.kv-closed-ic { width: 40px; height: 40px; color: var(--forest); display: grid; place-items: center; margin-bottom: 2px; }
.kv-closed-ic .icon { width: 34px; height: 34px; }
.kv-closed-title { font-size: var(--fs-18); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; line-height: 1.25; }
.kv-closed-sub { font-size: var(--fs-13); color: var(--text-soft); line-height: 1.5; }
.kv-closed-sub strong { color: var(--ink); font-weight: 700; }
.kv-closed-link { display: inline-flex; align-items: center; justify-content: center; text-align: center; width: 100%; background: var(--forest); color: #fff; font-weight: 600; font-size: var(--fs-13); line-height: 1.35; padding: 11px 16px; border-radius: var(--r-md); margin-top: 6px; transition: background var(--t-fast); }
.kv-closed-link:hover { background: var(--forest-hover); color: #fff; }