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

.selp-top-user strong { color: var(--ink); font-weight: 700; }
.selp-wrap { width: 100%; max-width: 700px; display: flex; flex-direction: column; gap: 26px; }

/* Welkom */
.selp-welcome { text-align: center; padding: 0 8px; }
.selp-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: var(--paper); border: 1px solid rgba(22,46,37,0.15); color: var(--forest); padding: 6px 14px; border-radius: var(--r-pill); font-size: var(--fs-11); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px; box-shadow: none; }
.selp-eyebrow .icon { width: 13px; height: 13px; color: var(--gold); }
.selp-title { font-size: 30px; font-weight: 800; color: var(--forest); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 8px; }
.selp-sub { font-size: var(--fs-14); color: var(--text-soft); max-width: 480px; margin: 0 auto; line-height: 1.55; }

/* Card */
.selp-card { overflow: hidden; }
.selp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 24px; }
.selp-card-title { font-size: var(--fs-16); font-weight: 700; color: var(--ink); }
.selp-card-count { font-size: var(--fs-12); color: var(--text-soft); font-weight: 600; }
.selp-card-count b { color: var(--forest); font-weight: 700; }

/* Account-rijen */
.selp-list { display: flex; flex-direction: column; gap: 12px; padding: 18px 24px 22px; }
.selp-row { position: relative; display: grid; grid-template-columns: 64px 1fr auto; align-items: stretch; border: 1.5px solid var(--grey-line); border-radius: var(--r-md); overflow: hidden; background: var(--paper); color: inherit; transition: border-color var(--t-med), box-shadow var(--t-med), transform var(--t-med); }
@media (hover: hover) {
  .selp-row:hover { border-color: var(--forest); box-shadow: none; transform: translateY(-1px); }
  .selp-row:hover .selp-arrow { color: var(--forest); transform: translateX(3px); }
}
.selp-ic { background: var(--paper); color: var(--forest); border-right: 1px solid var(--grey-line); display: flex; align-items: center; justify-content: center; align-self: stretch; }
.selp-ic .icon { width: 23.4px; height: 23.4px; }
.selp-body { padding: 13px 20px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.selp-name { font-size: var(--fs-15); font-weight: 700; color: var(--ink); line-height: 1.25; }
.selp-sublabel { color: var(--text-muted); font-weight: 500; }
.selp-balance { font-size: var(--fs-18); font-weight: 500; color: var(--forest); font-variant-numeric: tabular-nums; }
.selp-arrow { display: flex; align-items: center; padding-right: 18px; color: var(--text-muted); transition: color var(--t-fast), transform var(--t-fast); }
.selp-arrow .icon { width: 18px; height: 18px; }

/* Help strip */
.selp-help { text-align: center; font-size: var(--fs-13); color: var(--text-soft); line-height: 1.6; }
.selp-help a { color: var(--forest); font-weight: 700; text-decoration: underline; }
.selp-help a:hover { color: var(--forest-deep); }

@media (max-width: 640px) {
  /* .selp-top / .selp-main mobiel-padding staat in 03-components.css
     (selp-shell wordt ook door de registratie-schermen gebruikt). */
  .selp-top-user { display: none; }
  .selp-title { font-size: 25px; }
  .selp-sub { font-size: var(--fs-13); }
  .selp-card-head { padding: 16px 18px; }
  .selp-list { padding: 14px 16px 18px; }
  .selp-row { grid-template-columns: 52px 1fr auto; }
  .selp-ic .icon { width: 19.8px; height: 19.8px; }
  .selp-body { padding: 12px 14px; }
  .selp-balance { font-size: var(--fs-16); }
}