/* ============================================================
   goud999safe — pagina-CSS: Geld overmaken/opnemen + bankoverschrijving
   Afgesplitst uit de oude pagina-CSS (fase 2). Alleen deze pagina('s).
   ============================================================ */

  /* ─────────────────────────────────────────────
     Geld overmaken / opnemen — contant-acties (framework)
     3 tabs (.cash-tabs) + omschakelbare panelen (.cash-panel).
     Inhoud per tab wordt later ingevuld.
     ───────────────────────────────────────────── */
  .cash-page { width: 100%; max-width: 580px; margin-left: auto; margin-right: auto; }
  .cash-page .card + .card { margin-top: 20px; }
  .cash-placeholder { color: var(--text-muted); font-size: var(--fs-14); }

  /* Panel-intro (titel + subtitel binnen een tab) */
  /* Titel met scheidingslijn over de volle kaartbreedte, zoals de bevestig-pagina */
  .cash-panel-title { font-size: var(--fs-18); font-weight: 700; color: var(--forest); letter-spacing: -0.01em; margin: -28px -32px 22px; padding: 16px 32px; }
  .cash-panel-sub { font-size: var(--fs-13); color: #3d444b; margin: -8px 0 22px; }
  /* Mobiel: scheidingslijn onder de titel behouden, over de volle kaartbreedte */
  @media (max-width: 768px) {
    /* Volledige breedte op mobiel (page-CSS laadt ná goud999.css, dus moet hier
       staan om de base .cash-page{max-width;margin:auto} te overrulen). */
    .cash-page { max-width: none; margin-left: 0; margin-right: 0; }
    .cash-panel-title { margin: 0 -16px 18px; padding: 0 16px 14px; }
    .cash-panel-sub { margin: 0 0 18px; }
  }

  /* Formulier-primitieven (contant-tabs) */
  .cash-form .form-group { display: flex; flex-direction: column; margin-bottom: 22px; }
  .cash-form .form-group:last-of-type { margin-bottom: 28px; }
  .cash-form .btn-on-white--solid { display: block; width: 100%; text-align: center; }
  .cash-form .btn-on-white--ghost { display: flex; width: 100%; justify-content: center; margin-top: 10px; }
  .cash-form .btn-cancel { display: block; width: 100%; text-align: center; }

  /* Tegenrekening-blok (Opname contant) */
  .payout-box { background: var(--grey-soft); border: 1px solid var(--grey-line); border-radius: var(--r-md); padding: 16px 20px; margin-bottom: 20px; }
  .payout-box-title { font-size: var(--fs-13); font-weight: 700; color: var(--ink); margin-bottom: 12px; }
  .payout-rows { margin: 0; }
  .payout-row { display: flex; gap: 14px; font-size: var(--fs-14); }
  .payout-row + .payout-row { margin-top: 8px; }
  .payout-row dt { color: var(--text-soft); flex-shrink: 0; min-width: 104px; }
  .payout-row dd { margin: 0; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
  .payout-note { margin: 0 0 20px; font-size: var(--fs-13); color: var(--text-soft); line-height: 1.55; }
  .payout-edit { display: inline-block; margin-top: 14px; font-size: var(--fs-13); font-weight: 700; color: var(--forest); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
  .payout-edit:hover { color: var(--forest-deep); }
  .modal { width: 100%; max-width: 440px; background: var(--paper); border-radius: var(--r-md); box-shadow: none; padding: 28px 28px 24px; }
  .modal-title { font-size: var(--fs-18); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 14px; }
  .modal .cash-text:last-of-type { margin-bottom: 0; }
  .modal-actions { margin-top: 24px; }
  .modal-actions .btn-on-white--solid { display: block; width: 100%; text-align: center; }
  .modal-actions .btn-on-white--ghost { display: flex; width: 100%; justify-content: center; margin-top: 10px; }

  /* Lopende tekst binnen een contant-formulier */
  .cash-text { font-size: var(--fs-14); color: #2f363d; line-height: 1.5; margin-bottom: 16px; }
  .cash-note { font-size: var(--fs-12); color: #565656; line-height: 1.4; margin-top: 20px; }

  /* Beschikbaar saldo naast het Bedrag-label */
  .cash-available { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--text-soft); white-space: nowrap; }
  .cash-available svg { width: 14px; height: 14px; color: var(--forest); flex-shrink: 0; }
  .cash-available strong { color: var(--forest); font-weight: 700; }
  .cash-form .form-label,
  .cash-form .method-label { font-size: var(--fs-13); font-weight: 700; color: var(--forest); margin-bottom: 8px; }
  .cash-form .method-label { margin-bottom: 12px; }
  .cash-form .req { color: var(--status-error); }

  .form-divider { height: 1px; background: var(--grey-line); margin: 4px 0 22px; }

  /* "OF"-scheiding tussen de online-betaling-groep en bankoverschrijving. */
  .cash-method-group { border: 1px solid var(--grey-line); border-radius: var(--r-md); padding: 20px 20px 22px; }
  .cash-method-group .form-group:last-of-type { margin-bottom: 22px; }
  /* Intro-tekst binnen de groep (geen negatieve marge zoals de panel-sub). */
  .cash-group-intro { margin: 0 0 18px; }
  .cash-or { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0; }
  .cash-or span { font-size: var(--fs-12); font-weight: 700; color: var(--text-muted); letter-spacing: 0.08em; }
  /* Extra ruimte tussen de bankoverschrijving-knop en de Annuleren-knop. */
  .cash-form .method-option--link { margin-bottom: 18px; }

/* DEMO-link onder opname-formulier (prototype-trigger foutmelding) */
.cash-demo-link { margin-top: 14px; text-align: center; font-size: var(--fs-12); }
.cash-demo-link a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.cash-demo-link a:hover { color: var(--forest); }

/* Bankoverschrijving — "Terug"-knop enkel op mobiel (breadcrumb dekt desktop) */
.cash-back-mobile { display: none; }
@media (max-width: 768px) { .cash-back-mobile { display: inline-flex; } }