/* =============================================================================
   custom.css  –  UI-stijlen voor beheeromgeving
   -----------------------------------------------------------------------------
   • Design tokens (CSS custom properties) met theming via --brand (PHP)
   • Basis typografie/achtergrond
   • Tabel weergaves (desktop + mobile card pattern)
   • Gestandaardiseerde actieknoppen (edit/history/delete) + responsive sizing
   • FAB (+) en Back-FAB (met semitransparante achtergrondlaag)
   • “Lead-only” modal mode
   • Badges, loaders & toasts, iOS safe-areas
   -----------------------------------------------------------------------------
   Aannames:
   - PHP zet :root --brand via print_app_css_vars()
   - Bootstrap 5 aanwezig
   - Iconen via Bootstrap Icons
============================================================================= */

/* ============================================================================
   1) DESIGN TOKENS (te themen via --brand)
============================================================================= */
:root{
  /* Kleur uit PHP (print_app_css_vars) */
  --ui-brand: var(--brand);

  /* Palet */
  --accent:     #51cf66;
  --ink:        #0b0b0c;
  --bg:         #f6f9fb;
  --ui-bg:      #f6f7f9;
  --ui-card:    #ffffff;
  --ui-border:  #e8ecf0;
  --ui-text:    #0f172a;
  --ui-muted:   #64748b;
  --ui-warm:    #f4b740; /* edit-knop (amber) */
  --ui-danger:  #dc3545; /* Bootstrap danger */
  --ocean:      #0c6f8f; /* filter-button oceaanblauw */
  --radius:     18px;
  --register-form-brand: var(--brand, #0d6efd);
  --register-form-card-bg: var(--bs-body-bg, #fff);
  --register-form-card-shadow: 0 10px 25px rgba(16,24,40,.08), 0 4px 8px rgba(16,24,40,.05);
  --register-form-card-radius: 20px;

  /* Schaduwen */
  --ui-shadow:        0 8px 22px rgba(15,23,42,.06);
  --ui-shadow-h:      0 12px 28px rgba(15,23,42,.09);

  /* 3D card effect */
  --ui-shadow-outer:   0 10px 24px rgba(15,23,42,.10);
  --ui-shadow-outer-h: 0 14px 30px rgba(15,23,42,.14);
  --ui-shadow-outer-a: 0 6px 18px rgba(15,23,42,.10);
  --ui-inset-top:      inset 0 1px 0 rgba(255,255,255,.90);
  --ui-inset-bottom:   inset 0 -12px 20px rgba(15,23,42,.06);
  --ui-inset-bottom-h: inset 0 -14px 22px rgba(15,23,42,.07);
  --ui-inset-bottom-a: inset 0 -10px 16px rgba(15,23,42,.07);
  --ui-inset-edge:     inset 0 0 0 1px rgba(255,255,255,.65);
  --ui-inset-edge-h:   inset 0 0 0 1px rgba(255,255,255,.70);
  --ui-inset-edge-a:   inset 0 0 0 1px rgba(255,255,255,.60);

  /* FAB Back – RGB basis (zodat we alpha kunnen gebruiken) */
  --fab-back-rgb: 220, 53, 69; /* zelfde rood als --ui-danger */
}

/* ============================================================================
   2) BASIS
============================================================================= */
body{
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--ui-bg);
}

h1{
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}

/* Primair merk-knopje */
.btn-brand{
  background: var(--ui-brand);
  border: 1px solid var(--ui-brand);
  color: #fff;
}
.btn-brand:hover{
  filter: brightness(.92);
  color: #fff;
}

/* Kaart-omhulling rond tabellen */
.table-wrap{
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 1rem;
}

/* Sticky table header met merk-kleur */
th.sticky{
  position: sticky;
  top: 0;
  background: var(--ui-brand);
  color: #111 !important;
  z-index: 1;
}

/* Loader & toasts */
.loader{ display: none; }
.loader.show{ display: inline-block; }
.toast-container{ z-index: 2000; }

/* Bootstrap zebra/accents uit voor cleane “cards” */
.table,
.table.table-striped{
  --bs-table-bg: transparent !important;
  --bs-table-striped-bg: transparent !important;
  --bs-table-accent-bg: transparent !important;
}
.table.table-striped > tbody > tr:nth-of-type(odd) > *{
  --bs-table-accent-bg: transparent !important;
}
.table > :not(caption) > * > *{
  background-color: transparent !important;
}



/* ============================================================================
   3) TABLES – DESKTOP + MOBILE “CARD” PATTERN (generiek)
   ========================================================================== */

/* Alleen tabellen met .table-cards--mobile krijgen de mobile card layout.
   We sluiten module-events expliciet uit, die heeft z'n eigen grid. */
@media (max-width: 767.98px){
  body:not(.module-events) .table-cards--mobile thead{ display:none; }

  body:not(.module-events) .table-cards--mobile,
  body:not(.module-events) .table-cards--mobile tbody,
  body:not(.module-events) .table-cards--mobile tr,
  body:not(.module-events) .table-cards--mobile td{
    display: block;
    width: 100%;
  }

  body:not(.module-events) .table-cards--mobile tr{
    position: relative;
    background: var(--ui-card) !important;
    margin: 0 0 1.6rem 0;
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    padding: 1.25rem 1.3rem;
    box-shadow:
      var(--ui-shadow-outer),
      var(--ui-inset-top),
      var(--ui-inset-bottom),
      var(--ui-inset-edge);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }
  body:not(.module-events) .table-cards--mobile tr:hover{
    transform: translateY(-2px);
    box-shadow:
      var(--ui-shadow-outer-h),
      var(--ui-inset-top),
      var(--ui-inset-bottom-h),
      var(--ui-inset-edge-h);
  }
  body:not(.module-events) .table-cards--mobile tr:active{
    transform: translateY(0);
    box-shadow:
      var(--ui-shadow-outer-a),
      inset 0 2px 6px rgba(15,23,42,.10),
      var(--ui-inset-bottom-a),
      var(--ui-inset-edge-a);
  }

  body:not(.module-events) .table-cards--mobile td{
    background: transparent !important;
    padding: .55rem 0 !important;
    border: 0 !important;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    gap: .25rem;
    text-align: center;
    font-size: .98rem;
    color: var(--ui-text);
  }
  body:not(.module-events) .table-cards--mobile td::before{
    content: attr(data-label);
    font-weight: 600;
    color: var(--ui-muted);
    letter-spacing: .2px;
  }

  body:not(.module-events) .table-cards--mobile td:first-child{
    padding-top: .2rem !important;
    padding-bottom: .7rem !important;
    border-bottom: 1px solid var(--ui-border) !important;
  }
  body:not(.module-events) .table-cards--mobile td:first-child .small{
    color: var(--ui-muted);
  }

  body:not(.module-events) .table-cards--mobile td[data-label="Status"]{
    display: grid;
    grid-auto-rows: min-content;
    gap: .45rem;
  }
  body:not(.module-events) .table-cards--mobile td[data-label="Status"] .badge{
    display: inline-block;
    margin: 0 auto;
    font-weight: 600;
    letter-spacing: .2px;
  }
  body:not(.module-events) .table-cards--mobile td[data-label="Status"] .btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    max-width: 100%;
  }

  body:not(.module-events) .table-cards--mobile td.actions{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .7rem;
    padding-top: .7rem !important;
    margin-top: .25rem;
  }
  body:not(.module-events) .table-cards--mobile td.actions::before{
    content:''; display:none;
  }
}

/* Klein extra 3D-randje specifiek voor mobile cards */
@media (max-width: 767.98px){
  body:not(.module-events) .table-cards--mobile tr{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.7),
      inset 0 -1px 0 rgba(0,0,0,.03),
      0 10px 24px rgba(15,23,42,.08),
      0 2px 6px rgba(15,23,42,.05);
    margin-bottom: 1.6rem;
  }
  body:not(.module-events) .table-cards--mobile tr:last-child{
    margin-bottom: 2rem;
  }
}



/* ============================================================================
   4) ACTIEKNOPPEN – gestandaardiseerd (herbruikbaar)
============================================================================= */

/* Container */
.actions{
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* Basisknop (effect/schaduw) */
.btn-action{
  border-radius: .6rem;
  font-weight: 600;
  transition:
    background-color .16s ease,
    color .16s ease,
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease;
  box-shadow: 0 2px 6px rgba(15,23,42,.06);
}
.btn-action:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(15,23,42,.10);
}
.btn-action:active{ transform: translateY(0); }

/* Variants ---------------------------------------------------- */

/* EDIT (geel) */
.btn-action--edit,
.btn-edit{ /* compat alias voor bestaande HTML */
  background: var(--ui-warm);
  color: #111;
  border: none;
}
.btn-action--edit:hover,
.btn-edit:hover{ filter: brightness(1.05); }

/* DELETE (rode outline) */
.btn-action--delete,
.btn-verwijderen{ /* compat alias */
  border: 2px solid var(--bs-danger);
  background: transparent;
  color: var(--bs-danger);
}
.btn-action--delete:hover,
.btn-verwijderen:hover{ background-color: rgba(220,53,69,.10); }

/* HISTORY (donkergrijs outline) */
.btn-action--history,
.btn-hist{ /* compat alias */
  border: 2px solid #444;
  background: transparent;
  color: #444;
}
.btn-action--history:hover,
.btn-hist:hover{
  background-color: rgba(68,68,68,.08);
  color: #222;
}

/* Icoonmaat */
.actions .btn-action i{ font-size: 1.05em; line-height: 1; }

/* Volgorde (optioneel): history – edit – delete */
td.actions .btn-action--history, td.actions .btn-hist{ order: 1; }
td.actions .btn-action--edit,    td.actions .btn-edit{ order: 2; }
td.actions .btn-action--delete,  td.actions .btn-verwijderen{ order: 3; }

/* Responsive sizing ------------------------------------------- */
@media (max-width: 767.98px){
  .table-cards td.actions .btn-action{
    padding: .62rem 1rem;
    font-size: 1.05rem;
    min-width: 52px;
  }
  /* Edit extra nadruk op mobiel */
  .table-cards td.actions .btn-action--edit,
  .table-cards td.actions .btn-edit{
    padding: .70rem 1.1rem;
    font-size: 1.15rem;
    min-width: 56px;
    min-height: 56px;
  }
}
@media (min-width: 768px){
  .actions .btn-action{
    padding: .50rem .78rem;
    font-size: .98rem;
    min-width: 46px;
  }
}

/* “Lead” vervolg-knop (inline bij status) */
.btn-follow-lead{
  border: 2px solid var(--ui-warm);
  background: transparent;
  color: var(--ui-warm);
  font-weight: 600;
  border-radius: .6rem;
  transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn-follow-lead:hover{
  background: var(--ui-warm);
  color: #111;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(15,23,42,.10);
}
.btn-follow-lead:active{
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(15,23,42,.08);
}

/* Filterknop “Verlengen” (outline oceaan) */
.btn-outline-verlengen{
  border: 1px solid var(--ocean);
  color: var(--ocean);
  background: transparent;
  font-weight: 600;
  border-radius: .2rem;
  transition: background-color .18s ease, color .18s ease, transform .16s ease, box-shadow .16s ease;
}
.btn-outline-verlengen:hover,
.btn-outline-verlengen:focus{
  background-color: rgba(12,111,143,.12);
  color: var(--ocean);
}
.btn-check:checked + .btn-outline-verlengen,
.btn-check:active  + .btn-outline-verlengen{
  background-color: var(--ocean);
  border-color: var(--ocean);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0,0,0,.10);
}
.btn-check:checked + .btn-outline-verlengen:focus{
  box-shadow: 0 0 0 .2rem rgba(12,111,143,.25);
}

/* ============================================================================
   5) FAB (+) EN FAB BACK
============================================================================= */

/* Hoofd-FAB (+) */
.fab{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: 0;
  background: var(--ui-brand);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 14px 26px rgba(15,23,42,.18), inset 0 -2px 6px rgba(255,255,255,.15);
  cursor: pointer;
  z-index: 1060;
  transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.fab:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 30px rgba(15,23,42,.22), inset 0 -2px 6px rgba(255,255,255,.15);
}
.fab i{
  font-size: 1.7rem;
  transition: transform .25s ease;
  transform-origin: center;
}
.fab.open i{ transform: rotate(45deg); }

/* FAB menu */
.fab-menu{
  position: fixed;
  right: 22px;
  bottom: 90px;
  display: grid;
  gap: .5rem;
  transform-origin: bottom right;
  transform: translateY(8px) scale(.98);
  opacity: 0;
  pointer-events: none;
  z-index: 1059;
  transition: opacity .18s ease, transform .18s ease;
}
.fab-menu.open{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* FAB menu-item */
.fab-item{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .8rem;
  border-radius: 12px;
  border: 1px solid var(--ui-border, #e8ecf0);
  background: var(--ui-card, #fff);
  color: var(--ui-text, #0f172a);
  box-shadow: 0 8px 18px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.7);
  font-weight: 600;
  white-space: nowrap;
}
.fab-item i{ font-size: 1.05rem; }
.fab-item:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(15,23,42,.10);
}

/* Verberg FAB (+ en menu) als er een modal open is */
body.modal-open #fab,
body.modal-open #fabMenu{
  display: none !important;
}

/* Z-index onder modal/backdrop */
#fab, #fabBack, #fabLive { z-index: 1060; }
#fabMenu { z-index: 1059; }

/* Back FAB – links-onder, met semitransparante achtergrondlaag
   ----------------------------------------------------------------
   - We gebruiken ::before voor de (rode) achtergrond met alpha,
     zodat het icoon zelf 100% dekkend blijft. */
.fab-back{
  left: 22px;
  right: auto;
  bottom: calc(22px + env(safe-area-inset-bottom, 0));
  position: fixed;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  z-index: 1060;
  overflow: hidden; /* clip de ::before */
}
.fab-back::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(var(--fab-back-rgb), .82); /* ← opacity van de rode achtergrond */
  box-shadow: 0 14px 26px rgba(15,23,42,.18), inset 0 -2px 6px rgba(255,255,255,.15);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.fab-back i{
  position: relative; /* boven de ::before */
  font-size: 1.7rem;
}
.fab-back:hover::before{
  transform: translateY(-1px);
  box-shadow: 0 18px 30px rgba(15,23,42,.22), inset 0 -2px 6px rgba(255,255,255,.15);
}
/* ============================================================================
   MIDDEN-FAB: "Bekijk site" (Live indicator)
   - Tekst i.p.v. icoon
   - Groen pulserend live-bolletje
   - Exact gecentreerd tussen back en plus
============================================================================ */
/* ========================================================================
   MIDDEN-FAB: "Bekijk site" + live dot (altijd exact gecentreerd)
======================================================================== */

.fab-live{
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0));
  transform: translateX(-50%);

  width: 92px;
  height: 92px;
  border-radius: 50%;

  background: var(--ui-danger);
  color: #fff;

  /* 🔑 dit centreert alles perfect */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  gap: 6px;

  z-index: 1060;
  box-shadow:
    0 14px 26px rgba(15,23,42,.18),
    inset 0 -2px 6px rgba(255,255,255,.15);

  font-weight: 800;
  font-size: .95rem;
  line-height: 1.05;

  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.fab-live:hover{
  transform: translateX(-50%) translateY(-1px);
  box-shadow:
    0 18px 30px rgba(15,23,42,.22),
    inset 0 -2px 6px rgba(255,255,255,.15);
}

/* Tekst */
.fab-live-label{
  pointer-events: none;
}

/* Live dot (altijd gecentreerd boven tekst) */
.fab-live-dot{
  order: -1; /* zet dot altijd boven label, ook als HTML andersom is */
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2ecc71;

  /* glow */
  box-shadow:
    0 0 0 0 rgba(46,204,113,.55),
    0 0 14px rgba(46,204,113,.55);

  animation: fab-live-pulse 1.6s infinite;
}

/* Pulse / “fonkelen” */
@keyframes fab-live-pulse{
  0%{
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(46,204,113,.55),
      0 0 14px rgba(46,204,113,.55);
    filter: brightness(1);
  }
  50%{
    transform: scale(1.12);
    box-shadow:
      0 0 0 10px rgba(46,204,113,0),
      0 0 18px rgba(46,204,113,.75);
    filter: brightness(1.08);
  }
  100%{
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(46,204,113,0),
      0 0 14px rgba(46,204,113,.55);
    filter: brightness(1);
  }
}

/* consistent met jouw modal gedrag */
body.modal-open #fabLive{ display: none !important; }
body.modal-open #fabBack{ display: none !important; }


/* ============================================================================
   6) LEAD-ONLY MODAL MODE (alleen “Company” tab tonen)
============================================================================= */
#sponsorModal.lead-only #frmTabs{ display: none !important; }
#sponsorModal.lead-only #frmAcc button[data-target]:not([data-target="#tab-company"]){ display: none !important; }
#sponsorModal.lead-only .tab-pane{ display: none !important; opacity: 0 !important; }
#sponsorModal.lead-only #tab-company{ display: block !important; opacity: 1 !important; }

/* ============================================================================
   7) PAGE HEADER HULPJES (zoekveld & logo)
============================================================================= */
.page-title{ text-align: center; }

.club-logo-wrap{ line-height: 1; }
.club-logo{ max-height: 56px; width: auto; display: block; }
@media (max-width: 576px){
  .club-logo{ max-height: 48px; }
}

.page-header .header-controls{ width: 100%; }
.page-header .header-controls .input-group{
  min-width: 280px;
  max-width: 520px;
  width: 100%;
}
@media (min-width: 768px){
  .page-header .header-controls{ justify-content: flex-end; }
}

/* ============================================================================
   8) FOOTER BRAND GLOW (subtiele merk-gloed onderin)
============================================================================= */
.footer-brand-glow{
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom, 0);
  height: 2px;
  background: var(--ui-brand, #0e5b4f);
  box-shadow:
    0 0 8px  var(--ui-brand, #0e5b4f),
    0 0 14px var(--ui-brand, #0e5b4f);
  opacity: .55;
  pointer-events: none;
  z-index: 1030;
}
.footer-brand-glow::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -10px;
  height: 22px;
  background: var(--ui-brand, #0e5b4f);
  filter: blur(10px);
  opacity: .28;
  pointer-events: none;
}
body.modal-open .footer-brand-glow{ opacity: .30; }

/* ============================================================================
   9) BADGES (rustiger tinten)
============================================================================= */
.badge.text-bg-success{ background-color: #2e7d6b !important; }
.badge.text-bg-danger{  background-color: #c53a4a !important; }
.badge.text-bg-warning{ background-color: #e3b23c !important; color:#111 !important; }

/* ============================================================================
   10) SAFE AREA SUPPORT (iOS e.d.)
============================================================================= */
@supports (padding: env(safe-area-inset-bottom)){
  #btnBack{ margin-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .footer-brand-glow{ bottom: env(safe-area-inset-bottom); }
}


/* Zorg dat hij boven de sticky table header ligt maar onder modals */
#stateFilters.sticky-top,
#emailListToolbar.sticky-top {
  z-index: 1030;
}

@supports (backdrop-filter: blur(4px)) {
  #stateFilters.sticky-top,
  #emailListToolbar.sticky-top {
    backdrop-filter: blur(4px);
  }
}

/* Heb je ooit een fixed navbar? Geef dan top-offset mee: */
:root { --sticky-offset: 0px; }          /* pas aan als nodig */
#stateFilters.sticky-top { top: var(--sticky-offset); }

/* Zelfde sticky gedrag voor email lists toolbar */
#emailListsToolbar.sticky-top {
  z-index: 1030;
  top: var(--sticky-offset);
}

@supports (backdrop-filter: blur(4px)) {
  #emailListsToolbar.sticky-top {
    backdrop-filter: blur(4px);
  }
}

#MetaCrudModal .modal-body > .row,
#MetaCrudModal #MetaFormFields {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#MetaCrudModal #MetaFormFields .accordion {
  width: 100% !important;
  max-width: 100% !important;
}






/* ============================================================================
   11) ONBOARDING & REGISTRATION FORMS
============================================================================= */


.register-form-body { background: var(--bs-body-bg); }

/* Container & hero */
.register-form {}
.register-form-hero { text-align:center; margin:1rem auto 1.5rem; }
.register-form-brand { color: var(--register-form-brand); }

/* Card */
.register-form-card{
  background: var(--register-form-card-bg);
  border: 0;
  border-radius: var(--register-form-card-radius);
  box-shadow: var(--register-form-card-shadow);
  padding: clamp(1rem, 2vw, 2rem);
}

/* QR-gebied */
.register-form-qrcode{
  width:240px; height:240px; margin:1rem auto;
  border-radius: 16px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, #fff, #f7f9fc);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 4px 20px rgba(0,0,0,.06);
}

/* Key/Value lijst */
.register-form-kv li{ margin:.15rem 0; }

/* Monospace helper */
.mono{ font-family: ui-monospace, Menlo, Consolas, monospace; font-size:.95rem }

/* Contextuele hulpteksten standaard uit, JS toont juiste variant */
.register-form-help-ios,
.register-form-help-android { display:none; }

/* Secret + copy: netjes op één regel op grotere schermen,
   maar onder elkaar (knop onder) op mobiel */
.register-form-secret{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-top:.25rem;
  flex-wrap:wrap; /* fallback */
}

.register-form-secret-text{
  /* lange Base32 strings mooi breken */
  overflow-wrap:anywhere;
  word-break:break-word;
}

.register-form-copy-btn{ cursor:pointer; }

/* Mobiel: knop onder het secret en 100% breed */
@media (max-width: 576px){
  .register-form-secret{
    flex-direction:column;
    align-items:stretch;
  }
  .register-form-copy-btn{
    width:100%;
  }
}

/* Call-to-action styling (herbruikbare brand-knop) */
.btn-brand{
  background: var(--register-form-brand);
  border-color: var(--register-form-brand);
  color:#fff;
  box-shadow: 0 4px 14px rgba(13,110,253,.3);
}
.btn-brand:hover{ filter: brightness(.96); }





/* ============================================================================
   12) CHECKLIST BUTTON PWD
============================================================================= */


/* ===== Password policy UI (L2S) ===== */
.pw-checklist {
  margin-top: .5rem;
  padding: .625rem .75rem;
  border-radius: .75rem;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,248,248,.95));
  border: 1px solid rgba(0,0,0,.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,   /* subtiele highlight (3D) */
    0 6px 14px rgba(0,0,0,.06);           /* zachte drop shadow */
}

.pw-checklist-title {
  font-weight: 600;
  font-size: .95rem;
  margin: 0 0 .25rem 0;
  color: #222;
}

.pw-checklist-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pw-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem 0;
  font-size: .92rem;
  color: #6b7280; /* neutraal */
  transition: color .16s ease, transform .12s ease;
}
.pw-check::before {
  content: '✗';
  flex: 0 0 auto;
  width: 1.1rem;
  text-align: center;
  font-weight: 700;
  opacity: .8;
}

.pw-check--ok {
  color: #137333;              /* zacht groen */
  transform: translateZ(0);    /* GPU hint */
}
.pw-check--ok::before {
  content: '✓';
}

/* mislukte regel expliciet (alleen wanneer je het wil markeren) */
.pw-check--fail {
  color: #b00020;              /* zacht rood */
}

/* a11y: voorkom onnodige animatie bij reduce motion */
@media (prefers-reduced-motion: reduce) {
  .pw-check { transition: none; }
}

/* Submitknop subtiel pulsen als alles klopt (mag je weglaten) */
.pw-ready {
  box-shadow: 0 8px 18px rgba(19,115,51,.15);
  transform: translateY(-1px);
}




/* ============================================================================
   13) CONTRACT FROM SPONSORS
============================================================================= */


.contract-doc { font-size: .95rem; line-height: 1.45; }
.contract-head { display:flex; align-items:center; gap:1rem; border-bottom:2px solid var(--brand, #d2232a); padding-bottom:.5rem; margin-bottom:1rem; }
.contract-head .logo { width:60px; height:60px; object-fit:contain; }
.contract-head .title h2 { margin:0; font-size:1.25rem; }
.contract-head .sub { color:#6c757d; font-size:.9rem; }
.contract-doc h3 { font-size:1.05rem; margin:.9rem 0 .4rem; }
.contract-doc ul { margin:0 0 .5rem 1rem; }
.contract-doc .party { margin-bottom:.5rem; }
.contract-doc .sign-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin-top:.5rem; }
.contract-doc .small { font-size:.85em; }

/* Printvriendelijk */
@media print {
  .contract-doc { font-size: 12pt; }
  .modal, .btn, #fab { display:none !important; }
}




/* ============================================================================
   14) FLOWS MAIL PREVIEW
============================================================================= */


/* === FLOWS MAIL PREVIEW — definitive sizing & scrolling ================= */

/* modal body as flex so preview can grow */
.flow-mail-dialog .modal-body {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-height: 0;
}

/* wrapper flex child */
.flow-mail-modal .flow-preview-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* the preview area defines the height; iframe fills it */
.flow-mail-modal .flow-preview {
  flex: 1 1 auto;
  min-height: 260px;            /* nice floor */
  height: auto;                 /* JS zet exacte px-hoogte */
  max-height: none !important;  /* overschrijf oude 50vh caps */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: .5rem;
  padding: .5rem;
}

/* iframe always fills container */
.flow-mail-modal .flow-preview .flow-iframe {
  display: block;
  width: 100%;
  height: 100% !important;  /* cruciaal: vul container-hoogte */
  border: 0;
  background: #fff;
}

/* mobile: nothing special – JS rekent hoogte al uit */



/* ============================================================================
   15 MODALS – brand header line + subtiele glow
============================================================================ */
.modal-content{
  /* Override Bootstrap variabelen → werkt op alle modals */
  --bs-modal-header-border-color: var(--ui-brand);
  --bs-modal-header-border-width: 2px;
}

/* Optioneel: extra zachte glow precies onder de rand */
.modal-header{
  position: relative; /* nodig voor ::after */
}
.modal-header::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;                          /* even hoog als de border */
  background: var(--ui-brand);
  box-shadow:
    0 0 8px  var(--ui-brand),
    0 0 14px var(--ui-brand);
  opacity: .35;                          /* subtiel houden */
  pointer-events: none;
}



/* ============================================================================
  16  Flow buttons – witte bg + brand border, filled op click
============================================================================ */
:root{
  /* Fallback: zet in PHP ook --brand-rgb voor perfecte match met --ui-brand */
  --brand-rgb: 13,110,253;
}

.btn-flow{
  background: #fff !important;
  color: var(--ui-brand) !important;
  border: 1.5px solid var(--ui-brand) !important;
  border-radius: .6rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(15,23,42,.06);
  transition:
    background-color .16s ease,
    color .16s ease,
    transform .12s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}

.btn-flow:hover{
  background: rgba(var(--brand-rgb), .06) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(15,23,42,.10);
}

.btn-flow:active,
.btn-flow:focus:active{
  background: var(--ui-brand) !important;
  color: #fff !important;
  border-color: var(--ui-brand) !important;
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(var(--brand-rgb), .25);
}

.btn-flow:disabled,
.btn-flow.disabled{
  opacity: .55;
  transform: none;
  box-shadow: none;
}





/* ============================================================================
   17) CONTRACT2PDF
============================================================================= */

.contract-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .75rem;
  justify-content: flex-end; /* <--- rechts uitlijnen */
}

/* ============================================================================
   LANDING-PAGE BASE (SCHOON, GEEN BACKGROUND IMAGE)
============================================================================ */

/* Landing body: rustige basis, met overflow fix */
body.landing {
  min-height: 100vh;
  position: relative;
  background: var(--ui-bg);
  overflow-x: hidden;
}

/* Verwijder oude foto / overlay lagen */
body.landing::before,
body.landing::after {
  content: none !important;
  display: none !important;
}


/* ============================================================================
   HERO ELEMENTEN
============================================================================ */

.hero-veil {
  display: inline-block;
  padding: .3rem .75rem;
  border-radius: .75rem;
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,.06);
}

.hero-title {
  font-weight: 800;
  letter-spacing: .2px;
  text-shadow:
    0 1px 0 rgba(255,255,255,.9),
    0 8px 22px rgba(0,0,0,.25);
}


/* ============================================================================
   3D APP CARDS (PREMIUM UI — COMPLEET HERSTELD)
============================================================================ */

:root {
  --brand-rgb: 210, 35, 42; /* fallback */
}

/* BASIS 3D TILE */
.card-3d {
  --tile-r: 20px;
  --tile-brd: rgba(0,0,0,.06);

  position: relative;
  border-radius: var(--tile-r);
  border: 1px solid var(--tile-brd);

  background: linear-gradient(
    180deg,
    rgba(255,255,255,.98),
    rgba(255,255,255,.90)
  );

  box-shadow:
    0 16px 30px rgba(15,23,42,.12),
    0 3px 8px rgba(15,23,42,.06);

  backdrop-filter: blur(4px);
  transform: translateZ(0);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease;
}

/* GLOW + INNER HIGHLIGHT */
.card-3d::before,
.card-3d::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--tile-r);
  pointer-events: none;
}

.card-3d::before {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.card-3d::after {
  box-shadow: 0 0 0 1px rgba(var(--brand-rgb), .22);
  opacity: .7;
}


/* HOVER DEPTH */
.card-3d:hover {
  transform: translateY(-6px);
  box-shadow:
    0 22px 42px rgba(15,23,42,.18),
    0 8px 16px rgba(15,23,42,.10);
  border-color: rgba(var(--brand-rgb), .35);
}

.card-3d:active {
  transform: translateY(-2px);
}


/* MICRO TILT */
@media (pointer: fine) {
  .card-3d:hover .card-body {
    transform: perspective(900px) rotateX(1deg);
    transition: transform .2s ease;
  }
}

/* A11Y */
@media (prefers-reduced-motion: reduce) {
  .card-3d, .card-3d * {
    transition: none !important;
  }
}


/* BRAND TITLES */
.card-3d h5,
.card-3d .display-6,
.card-3d .display-6 i,
.card-3d .bi {
  color: var(--ui-brand) !important;
}

.card-3d h5 {
  display: inline-block;
  position: relative;
}

.card-3d h5::after {
  display: none !important;
}

.card-3d .text-muted {
  color: #5f6b7a !important;
}


/* FOCUS OUTLINE */
a:focus .card-3d,
.card-3d:focus-within {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(var(--brand-rgb), .25),
    0 18px 36px rgba(15,23,42,.16);
}


/* MOBIEL TILE LAYOUT */
@media (max-width: 576px) {
  .row.g-3 > [class*="col-"] {
    display: flex;
    justify-content: center;
    align-items: stretch;
  }
  .card-3d {
    width: min(88vw, 360px);
    margin-left: auto;
    margin-right: auto;
  }
}


/* ICON MINI ANIMATIE */
.card-3d:hover i {
  transform: translateY(-2px) scale(1.03);
}


/* ============================================================================
   19) READ MODAL LAYOUT FOR FLOWS (EMAIL_LISTS.JSON, ETC.)
============================================================================= */
/* read-modal generic styles */
.rm-open { overflow: hidden; }
#read-modal .rm-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  z-index: 1050;
}
#read-modal .rm-card{
  background:#fff; color:#222; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.2);
  width: min(1100px, 96vw);
  display:flex; flex-direction:column; max-height:90vh; overflow:hidden;
}
#read-modal .rm-card.rm-sm{ width:min(520px, 96vw); }
#read-modal .rm-card.rm-md{ width:min(820px, 96vw); }
#read-modal .rm-card.rm-lg{ width:min(1100px, 96vw); }

#read-modal .rm-header{ display:flex; align-items:center; gap:.75rem; padding:14px 16px; border-bottom:1px solid #eee; }
#read-modal .rm-title{ margin:0; font-size:1.25rem; font-weight:600; }
#read-modal .rm-toolbar{ display:flex; gap:.5rem; align-items:center; padding:10px 12px; border-bottom:1px solid #f1f1f1; }
#read-modal .rm-toolbar .rm-filter{ max-width: 340px; }
#read-modal .rm-body{ overflow:auto; -webkit-overflow-scrolling:touch; }
#read-modal .rm-footer{ padding:12px 16px; border-top:1px solid #f1f1f1; display:flex; justify-content:flex-end; gap:.5rem; }

#read-modal .rm-table{ width:100%; border-collapse:collapse; }
#read-modal .rm-table thead th{
  position: sticky; top: 0; background:#fff; z-index:1;
  border-bottom:2px solid #e6e6e6; padding:10px 12px; text-align:left; font-weight:600;
}
#read-modal .rm-table tbody td{ border-bottom:1px solid #f0f0f0; padding:10px 12px; vertical-align:top; }
#read-modal code{ background:#fafafa; border:1px solid #eee; border-radius:6px; padding:.15rem .35rem; display:inline-block; }

/* ========================================================================
  20 STICKY FOOTER LAYOUT (voor pagina's met .layout-sticky-footer op <body>)
   ===================================================================== */

html,
body {
  height: 100%;
}

body.layout-sticky-footer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* hoofdcontent vult de ruimte */
body.layout-sticky-footer main {
  flex: 1 0 auto;
}

/* sponsors-balk fungeert als footer en plakt onderaan */
body.layout-sticky-footer .top-sponsors {
  margin-top: auto;
}


/* ============================================================================
   21) PARTIALS FOOTER TOP SPONSORS
============================================================================= */


.top-sponsors {
  background-color: var(--brand);
  padding: 1.5rem 1rem;
}

.top-sponsors-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
}

.top-sponsor {
  margin: 0;
  padding: 0.5rem 1rem;
  /* optioneel lichte transparante achtergrond voor contrast */
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 0.75rem;
}

.top-sponsor-logo {
  display: block;
  max-height: 60px;
  max-width: 180px;
  height: auto;
  width: auto;
  object-fit: contain;
}


/* ============================================================================
   22) LANDINGPAGE HEADER IMAGES 
============================================================================= */
.landing-header-logos-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

/* Middenlogo (club) */
.landing-logo-main {
  display: block;
  height: 120px;     /* hoofdmaat */
  width: auto;
  object-fit: contain;
}

/* Zijlogo's ~20% kleiner dan main */
.landing-logo-side {
  display: block;
  height: 60px;     /* 20% kleiner dan 60px */
  width: 60px;
  object-fit: contain;
  opacity: .95;
}

/* Kleinere schermen: alles kleiner, verhouding blijft 20% */
@media (max-width: 576px) {
  .landing-header-logos-row {
    gap: 1.25rem;
  }

  .landing-logo-main {
    height: 100px;
  }

  .landing-logo-side {
    height: 40px;
  }
}

/* ============================================================================
   EVENTS – GRID VIEW (cards i.p.v. standaard tabel)
   ========================================================================== */

body.module-events #MetaTable {
  border-collapse: separate;
  border-spacing: 0;
}

/* Header weg; info zit op de card zelf */
body.module-events #MetaTable thead {
  display: none;
}

/* Tbody als flex-grid container */
body.module-events #MetaTable tbody {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: flex-start;
}

/* Elke <tr> wordt één “tile” */
body.module-events #MetaTable tbody tr {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Breedtes per breakpoint */
body.module-events #MetaTable tbody tr {
  flex: 0 0 100%;
}

@media (min-width: 576px) {
  body.module-events #MetaTable tbody tr {
    flex: 0 0 calc(50% - 1.25rem);
  }
}

@media (min-width: 768px) {
  body.module-events #MetaTable tbody tr {
    flex: 0 0 calc(33.333% - 1.25rem);
  }
}

@media (min-width: 1200px) {
  body.module-events #MetaTable tbody tr {
    flex: 0 0 calc(25% - 1.25rem); /* 4 per rij */
  }
}

/* Cellen zelf: card-cel tonen, rest verbergen via JS-class */
body.module-events #MetaTable tbody tr td {
  padding: 0;
  border: 0;
}

/* Nieuwe kaart-cel die je in JS maakt */
body.module-events #MetaTable td.event-card-cell {
  display: block !important;
}

/* Originele data/flow/actie-cellen, door JS gemarkeerd */
body.module-events #MetaTable td.event-row-hidden-cell {
  display: none !important;
}


/* ====================================================================
   EVENTS – Maand-pills in brand-kleur
   ==================================================================== */

body.module-events #stateFilters .btn-primary {
  background-color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(var(--brand-rgb), .35);
}

/* Seizoenslabel boven de maand-pills */
body.module-events #stateFilters .season-label {
  color: var(--ui-brand);
  font-weight: 700;
  text-align: center;
}

body.module-events #stateFilters .btn-primary:hover,
body.module-events #stateFilters .btn-primary:focus {
  filter: brightness(1.03);
  background-color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  box-shadow: 0 4px 10px rgba(var(--brand-rgb), .45);
}

/* “Niet actieve” pills – outline variant in brand-kleur */
body.module-events #stateFilters .btn-outline-primary {
  background-color: transparent !important;
  color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  box-shadow: none;
}

body.module-events #stateFilters .btn-outline-primary:hover,
body.module-events #stateFilters .btn-outline-primary:focus {
  background-color: rgba(var(--brand-rgb), .06) !important;
  color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  box-shadow: 0 2px 6px rgba(var(--brand-rgb), .25);
}


/* ============================================================================
   EVENTS – CARD STYLE (gebaseerd op landing-page card-feature)
   ========================================================================== */

/* Outer card: overal waar .event-card voorkomt (manage, public, embedded) */
.event-card {
  --card-r: 22px;

  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;

  border-radius: var(--card-r);
  background: #fff;
  box-shadow:
    0 16px 34px rgba(15,23,42,.14),
    0 4px 10px rgba(15,23,42,.06);
  overflow: hidden;
  transform: translateZ(0);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease;
}

.event-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 22px 46px rgba(15,23,42,.18),
    0 8px 16px rgba(15,23,42,.10);
}

.event-card:active {
  transform: translateY(-2px);
}

/* Media bovenin: 16:9 banner, zelfde gradient als card-feature */
.event-card__media {
  position: relative;
  padding-top: 56%;
  background:
    linear-gradient(
      135deg,
      rgba(var(--brand-rgb), .10),
      rgba(var(--brand-rgb), .22)
    );
  border-radius: var(--card-r) var(--card-r) 0 0;
  overflow: hidden;
}

.event-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;              /* onder pill */
}

/* Datum / tijd pill bovenin de banner */
.event-card__pill {
  position: absolute;
  left: .75rem;
  top: .75rem;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: var(--ui-brand);
  color: #fff;
  font-size: .8rem;
  z-index: 2;              /* boven img */
}

/* Grotere datum-pill op publieke landing */
body.landing .event-card__pill {
  padding: .25rem .75rem;
  font-size: .9rem;
  font-weight: 600;
  border-radius: 999px;
}

/* Titel + tekst van event-kaart centreren op publieke landing */
body.landing .event-card__title,
body.landing .event-card__meta,
body.landing .event-card__desc {
  text-align: center;
}

/* Titel net wat groter */
body.landing .event-card__title {
  font-size: 1.25rem;
}

/* Beschrijving beter leesbaar */
body.landing .event-card__desc {
  font-size: 1rem;
  line-height: 1.5;
}


/* Body van de kaart */
.event-card__body {
  padding: 1.1rem 1.25rem 0.9rem;
}

.event-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 .3rem;
  color: var(--ui-text);
}

.event-card__meta {
  margin: 0;
  font-size: .94rem;
  line-height: 1.4;
  color: var(--ui-muted);
}

.event-card__desc {
  margin-top: .45rem;
  font-size: .94rem;
  color: var(--ui-text);
}

/* Footer binnen de kaart – flows boven, acties eronder, alles gecentreerd */
.event-card__footer {
  padding: 0 1.25rem 1.25rem;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  text-align: center;
}

.event-card__flows,
.event-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
}

/* Buttons in de footer in brand-kleur */
.event-card__footer .btn-primary,
.event-card__footer .btn-brand {
  background-color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  box-shadow: 0 4px 10px rgba(var(--brand-rgb), .35);
}

.event-card__footer .btn-primary:hover,
.event-card__footer .btn-brand:hover,
.event-card__footer .btn-primary:focus,
.event-card__footer .btn-brand:focus {
  filter: brightness(1.03);
  background-color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  box-shadow: 0 6px 14px rgba(var(--brand-rgb), .45);
}

/* Focus outline zoals op landing cards */
.event-card:focus-within {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(var(--brand-rgb), .25),
    0 22px 46px rgba(15,23,42,.2);
}

/* Optioneel: korte omschrijving clampen (mag global voor alle event-cards) */
.event-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ============================================================
   Sponsor product – publish status badge
   (admin webshop cards)
   ============================================================ */

.sp-publish-badge {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: .35rem .85rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 6px 14px rgba(15,23,42,.18);
  z-index: 3;
  white-space: nowrap;
}

.sp-publish-badge--on {
  background: #2fb344;
  color: #fff;
  box-shadow:
    0 6px 14px rgba(47,179,68,.35),
    inset 0 -1px 0 rgba(255,255,255,.25);
}

.sp-publish-badge--off {
  background: #6c757d;
  color: #fff;
  box-shadow:
    0 6px 14px rgba(108,117,125,.35),
    inset 0 -1px 0 rgba(255,255,255,.2);
}


/* ============================================================================
   EVENTS_PUBLIC – MODAL + CARD DESCRIPTION
   ========================================================================== */

/* Alleen op de publieke read-pagina (public-read) de event-info modal centreren */
body.public-read #eventInfoModal .modal-header,
body.public-read #eventInfoModal .modal-body,
body.public-read #eventInfoModal .modal-footer {
  text-align: center;
}

body.public-read #eventInfoModal .modal-header {
  flex-direction: column;
  align-items: center;
}

body.public-read #eventInfoModal .modal-title {
  width: 100%;
  margin-bottom: .5rem;
}

body.public-read #eventInfoSponsorLogo {
  margin-top: .25rem;
}

/* Kaart-description: max 2 regels + ellipsis, alleen op events-cards */
body.module-events .event-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ============================================================================
   23) ACCORDION THEME
============================================================================= */

/* Item: brand-border + zachte 3D card-look */
.accordion .accordion-item{
  border: 1px solid rgba(var(--brand-rgb), .35);
  border-radius: 16px;                         /* consistent met jouw UI */
  background: #fff;
  box-shadow:
    0 8px 22px rgba(15,23,42,.06),             /* drop shadow */
    inset 0 1px 0 rgba(255,255,255,.85),       /* top highlight (3D) */
    inset 0 -10px 16px rgba(15,23,42,.04);     /* bodem-inset (diepte) */
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.accordion .accordion-item:hover{
  transform: translateY(-1px);
  box-shadow:
    0 12px 28px rgba(15,23,42,.09),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -12px 18px rgba(15,23,42,.05);
}

/* Header-knop: rustige gradient + brand-underline wanneer open */
.accordion .accordion-button{
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border-radius: 16px;             /* matcht de item radius */
  color: var(--ui-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.accordion .accordion-button:focus{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 0 0 .2rem rgba(var(--brand-rgb), .25);
}
.accordion .accordion-button:not(.collapsed){
  background: linear-gradient(180deg, rgba(var(--brand-rgb), .06), #ffffff);
  border-bottom: 1px solid rgba(var(--brand-rgb), .35); /* “tab”-gevoel */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 0 rgba(var(--brand-rgb), .15);
}

/* Body: lichte binnenrand zodat het paneel “ingezet” voelt */
.accordion .accordion-body{
  background: #fff;
  border-radius: 0 0 16px 16px;
  box-shadow:
    inset 0 0 0 1px rgba(var(--brand-rgb), .08),
    inset 0 10px 18px rgba(15,23,42,.03);
}


/* ====================================================================
   REPORTS – PUBLIC NEWSFEED (FEED-CARDS BINNEN EEN FIXED-CARD)
   ==================================================================== */

/* === 1. Layout van de reports-card zelf ============================= */

body.landing .card-feature--reports {
  display: flex;
  flex-direction: column;
  height: 100%; /* blijft net zo hoog als de andere cards */
}

body.landing .card-feature--reports .card-feature__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0; /* nodig voor scroll in child */
}

/* Feedcontainer die scrollt */
body.landing .card-feature--reports .report-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(480px, 65vh); /* pas aan naar smaak */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Binnen de card geen extra marge */
body.landing .card-feature--reports .report-feed-table {
  margin-bottom: 0;
}



/* Titel + ondertitel van de hoofdkaarten centreren + brandkleur */
body.landing .card-feature--reports .card-feature__body,
body.landing .card-feature--events  .card-feature__body,
body.landing .card-feature--tabs    .card-feature__body {
  text-align: center;
}

body.landing .card-feature--reports .card-feature__title,
body.landing .card-feature--events  .card-feature__title,
body.landing .card-feature--tabs    .card-feature__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ui-brand);
  margin-bottom: .35rem;
}

body.landing .card-feature--reports .card-feature__text,
body.landing .card-feature--events  .card-feature__text,
body.landing .card-feature--tabs    .card-feature__text {
  font-size: 1rem;
  color: var(--ui-muted);
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
}

/* ====================================================================
   2. MetaTable → feedcards i.p.v. tabel
   ==================================================================== */

body.module-events_reports #MetaTable {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

body.module-events_reports #MetaTable thead {
  display: none; /* tabelhead niet nodig */
}

body.module-events_reports #MetaTable tbody {
  display: block;
}

/* Elke <tr> is één feed-kaart */
body.module-events_reports #MetaTable tbody tr {
  display: block;
  margin: 0 0 1.2rem 0;
}

/* Eén cel per kaart, fullwidth */
body.module-events_reports #MetaTable tbody tr > td {
  display: block;
  padding: 0;
  border: 0;
}



/* ====================================================================
   3. Feed-card styling (zoals je screenshot)
   ==================================================================== */

.report-feed-item {
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.06);
  box-shadow:
    0 10px 24px rgba(15,23,42,.08),
    0 2px 6px rgba(15,23,42,.04);
  padding: 1rem 1.25rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* ---- header ---- */

.report-feed-header {
  display: flex;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
}

.report-feed-header-main {
  display: flex;
  gap: .75rem;
  align-items: center;
}

.report-feed-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.report-feed-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.report-feed-meta {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.report-feed-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem;
}

.report-feed-team {
  font-weight: 600;
  color: var(--ui-text);
}

.report-feed-type {
  font-size: .85rem;
  color: var(--ui-muted);
}

.report-feed-date {
  font-size: .82rem;
  color: var(--ui-muted);
}

/* ---- body ---- */

.report-feed-body {
  font-size: .94rem;
}

.report-feed-link {
  color: var(--ui-brand);
  text-decoration: none;
}

.report-feed-link:hover {
  text-decoration: underline;
}

.report-feed-snippet {
  margin: .25rem 0 0;
  color: var(--ui-text);
}

.report-feed-snippet a {
  font-weight: 600;
  text-decoration: none;
  color: var(--ui-brand);
}

.report-feed-snippet a:hover {
  text-decoration: underline;
}

/* ---- image ---- */

.report-feed-image-wrap {
  margin: .25rem 0 0;
}

.report-feed-image-wrap img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 12px;
}

/* ---- footer ---- */

.report-feed-footer {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .4rem 0 .1rem;
  font-size: .85rem;
  color: var(--ui-muted);
}

.report-feed-footer .icon-btn {
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.report-feed-footer .icon-btn i {
  font-size: 1rem;
}

.report-feed-footer .feed-comment-link {
  text-decoration: none;
  color: var(--ui-muted);
}

.report-feed-footer .feed-comment-link:hover {
  text-decoration: underline;
}

/* ---- mobiel ---- */

@media (max-width: 576px) {
  body.module-events_reports #MetaTable tbody tr {
    margin-bottom: 1.6rem;
  }
}

/* ==== EVENTS CARD: feed scrolt binnen de kaart ==== */

body.landing .card-feature--events {
  display: flex;
  flex-direction: column;
  height: 100%; /* gelijke hoogte met andere cards */
}

body.landing .card-feature--events .card-feature__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0; /* belangrijk i.c.m. overflow */
}

body.landing .card-feature--events .events-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(480px, 65vh); /* pas gerust aan */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.landing .card-feature--events .event-feed-table {
  margin-bottom: 0;
}

/* Events-table zelf als verticale lijst kaarten */
#EventsTable {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

#EventsTable thead {
  display: none; /* header verbergen, info zit al in de card */
}

#EventsTable tbody {
  display: block;
}

#EventsTable tbody tr {
  display: block;
  margin: 0 0 1.2rem 0;
}

#EventsTable tbody tr > td {
  display: block;
  padding: 0;
  border: 0;
}

/* optioneel: op mobiel wat extra ruimte tussen kaarten */
@media (max-width: 576px) {
  #EventsTable tbody tr {
    margin-bottom: 1.6rem;
  }
}

/* Maand-pills op publieke reports/events pagina in zelfde merkstijl als beheer */
body.landing.module-events_reports #EventsFilters .btn-primary {
  background-color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(var(--brand-rgb), .35);
}

body.landing.module-events_reports #EventsFilters .btn-primary:hover,
body.landing.module-events_reports #EventsFilters .btn-primary:focus {
  filter: brightness(1.03);
  background-color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  box-shadow: 0 4px 10px rgba(var(--brand-rgb), .45);
}

/* Outline-variant (niet-actieve maanden) */
body.landing.module-events_reports #EventsFilters .btn-outline-primary {
  background-color: transparent !important;
  color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  box-shadow: none;
}

body.landing.module-events_reports #EventsFilters .btn-outline-primary:hover,
body.landing.module-events_reports #EventsFilters .btn-outline-primary:focus {
  background-color: rgba(var(--brand-rgb), .06) !important;
  color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  box-shadow: 0 2px 6px rgba(var(--brand-rgb), .25);
}


/* ====================================================================
   SPONSOR_PRODUCT_PUBLIC + SHOP_PUBLIC – GRID VIEW
   ==================================================================== */

body.module-sponsor_product_public #MetaTable,
body.module-shop_public #MetaTable,
body.module-webshop_public #MetaTable {
  border-collapse: separate;
  border-spacing: 0;
}

/* Header weg; info zit op de kaart */
body.module-sponsor_product_public #MetaTable thead,
body.module-shop_public #MetaTable thead,
body.module-webshop_public #MetaTable thead {
  display: none;
}

/* Tbody als flex-grid container */
body.module-sponsor_product_public #MetaTable tbody,
body.module-shop_public #MetaTable tbody,
body.module-webshop_public #MetaTable tbody {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
}

/* Elke <tr> wordt één “tile” */
body.module-sponsor_product_public #MetaTable tbody tr,
body.module-shop_public #MetaTable tbody tr,
body.module-webshop_public #MetaTable tbody tr {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  flex: 0 0 100%;
}

@media (min-width: 576px) {
  body.module-sponsor_product_public #MetaTable tbody tr,
  body.module-shop_public #MetaTable tbody tr,
  body.module-webshop_public #MetaTable tbody tr {
    flex: 0 0 calc(50% - 1.25rem);
  }
}

@media (min-width: 768px) {
  body.module-sponsor_product_public #MetaTable tbody tr,
  body.module-shop_public #MetaTable tbody tr,
  body.module-webshop_public #MetaTable tbody tr {
    flex: 0 0 calc(33.333% - 1.25rem);
  }
}

@media (min-width: 1200px) {
  body.module-sponsor_product_public #MetaTable tbody tr,
  body.module-shop_public #MetaTable tbody tr,
  body.module-webshop_public #MetaTable tbody tr {
    flex: 0 0 calc(25% - 1.25rem);
  }
}

/* Table-cellen voor cards */
body.module-sponsor_product_public #MetaTable tbody tr td,
body.module-shop_public #MetaTable tbody tr td,
body.module-webshop_public #MetaTable tbody tr td {
  padding: 0;
  border: 0;
}

/* De kaart-cel die je JS maakt */
body.module-sponsor_product_public #MetaTable td.sponsor-card-cell,
body.module-shop_public #MetaTable td.sponsor-card-cell,
body.module-webshop_public #MetaTable td.sponsor-card-cell {
  display: block !important;
}

body.module-sponsor_product_public #MetaTable td.sponsor-card-cell,
body.module-shop_public #MetaTable td.sponsor-card-cell,
body.module-webshop_public #MetaTable td.sponsor-card-cell {
  display: flex;
  justify-content: center;
}

/* ====================================================================
   SPONSOR_PRODUCT (ADMIN) – zelfde grid als public
   ==================================================================== */

body.meta-page.module-sponsor_product #MetaTable {
  border-collapse: separate;
  border-spacing: 0;
}

/* Header weg; info zit op de kaart */
body.meta-page.module-sponsor_product #MetaTable thead {
  display: none;
}

/* Tbody als flex-grid container */
body.meta-page.module-sponsor_product #MetaTable tbody {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: flex-start;
}

/* Elke <tr> wordt één “tile” */
body.meta-page.module-sponsor_product #MetaTable tbody tr {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Breedtes per breakpoint (zelfde als public) */
body.meta-page.module-sponsor_product #MetaTable tbody tr {
  flex: 0 0 100%;
}

@media (min-width: 576px) {
  body.meta-page.module-sponsor_product #MetaTable tbody tr {
    flex: 0 0 calc(50% - 1.25rem);
  }
}

@media (min-width: 768px) {
  body.meta-page.module-sponsor_product #MetaTable tbody tr {
    flex: 0 0 calc(33.333% - 1.25rem);
  }
}

@media (min-width: 1200px) {
  body.meta-page.module-sponsor_product #MetaTable tbody tr {
    flex: 0 0 calc(25% - 1.25rem); /* 4 per rij */
  }
}

/* Table-cellen voor cards */
body.meta-page.module-sponsor_product #MetaTable tbody tr td {
  padding: 0;
  border: 0;
}

/* Nieuwe kaart-cel */
body.meta-page.module-sponsor_product #MetaTable td.sponsor-card-cell {
  display: block !important;
}

/* Originele data/actie-cellen die we in JS verstoppen */
body.meta-page.module-sponsor_product #MetaTable td.sp-admin-hidden-cell {
  display: none !important;
}



/* ====================================================================
   SPONSOR_PRODUCT_WEBSHOP (ADMIN) – zelfde grid als sponsor_product
   ==================================================================== */

body.meta-page.module-sponsor_product_webshop #MetaTable {
  border-collapse: separate;
  border-spacing: 0;
}

/* Header weg; info zit op de kaart */
body.meta-page.module-sponsor_product_webshop #MetaTable thead {
  display: none;
}

/* Tbody als flex-grid container */
body.meta-page.module-sponsor_product_webshop #MetaTable tbody {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: flex-start;
}

/* Elke <tr> wordt één “tile” */
body.meta-page.module-sponsor_product_webshop #MetaTable tbody tr {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  flex: 0 0 100%;
}

@media (min-width: 576px) {
  body.meta-page.module-sponsor_product_webshop #MetaTable tbody tr {
    flex: 0 0 calc(50% - 1.25rem);
  }
}
@media (min-width: 768px) {
  body.meta-page.module-sponsor_product_webshop #MetaTable tbody tr {
    flex: 0 0 calc(33.333% - 1.25rem);
  }
}
@media (min-width: 1200px) {
  body.meta-page.module-sponsor_product_webshop #MetaTable tbody tr {
    flex: 0 0 calc(25% - 1.25rem);
  }
}

/* Table-cellen voor cards */
body.meta-page.module-sponsor_product_webshop #MetaTable tbody tr td {
  padding: 0;
  border: 0;
}

/* Nieuwe kaart-cel */
body.meta-page.module-sponsor_product_webshop #MetaTable td.sponsor-card-cell {
  display: block !important;
}

/* Originele data/actie-cellen die we in JS verstoppen */
body.meta-page.module-sponsor_product_webshop #MetaTable td.sp-admin-hidden-cell {
  display: none !important;
}


/* ============================================================
   SPONSOR PRODUCT MODAL – Premium Styling
   ============================================================ */


/* Top-sponsors balk compacter maken in INFO + CHECKOUT + LEAD */
#sponsorProductInfoModal .top-sponsors,
#shopCheckoutModal .top-sponsors,
#spLeadModal .top-sponsors{
  background: transparent !important;
  padding: 0;
  margin-bottom: .35rem;
}

#sponsorProductInfoModal .top-sponsors-inner,
#shopCheckoutModal .top-sponsors-inner,
#spLeadModal .top-sponsors-inner{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

#sponsorProductInfoModal .top-sponsor,
#shopCheckoutModal .top-sponsor,
#spLeadModal .top-sponsor{
  padding: 0;
  background: transparent;
  box-shadow: none;
}

#sponsorProductInfoModal .top-sponsor-logo,
#shopCheckoutModal .top-sponsor-logo,
#spLeadModal .top-sponsor-logo{
  max-height: 38px;
  max-width: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.12));
}


/* Titel in modal header */
#sponsorProductInfoModal .modal-title {
  color: var(--ui-brand);
  font-weight: 700;
  font-size: 1.25rem;
}


#sponsorProductInfoModal .modal-content {
  border-radius: 22px;
  background: #fff;
  box-shadow:
    0 18px 48px rgba(15,23,42,.18),
    0 4px 12px rgba(15,23,42,.08);
  overflow: hidden;
}

#sponsorProductInfoModal .modal-header,
#sponsorProductInfoModal .modal-body,
#sponsorProductInfoModal .modal-footer {
  text-align: center;
}

/* Titel */
#sponsorProductInfoModal h5.modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ui-brand);
  margin-bottom: 0;
}

/* Productnaam onder de afbeelding */
#spInfoName {
  font-weight: 800;
  font-size: 1.45rem;
  color: var(--ui-brand);
  text-align: center;
}

/* Prijs + squad */
#spInfoSummary {
  font-size: 1rem;
  color: var(--ui-muted);
  margin-bottom: .25rem;
}

/* 3D IMAGE WRAP */
#spInfoImageWrap {
  margin: 1rem auto 1.4rem;
}

#spInfoImage {
  border-radius: 22px;
  box-shadow:
    0 14px 32px rgba(15,23,42,.18),
    0 3px 8px rgba(15,23,42,.08);
  background-size: cover !important;
  background-position: center !important;
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease;
}

#spInfoImage:hover {
  transform: translateY(-6px);
  box-shadow:
    0 22px 46px rgba(15,23,42,.25),
    0 8px 14px rgba(15,23,42,.10);
}

/* Omschrijving */
#spInfoDesc {
  font-size: 1.05rem;
  color: var(--ui-text);
  margin-bottom: 1.1rem;
  line-height: 1.55;
  text-align: center;
}

/* Sektion-titles */
#sponsorProductInfoModal h5,
#sponsorProductInfoModal h4 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 1.25rem 0 .5rem;
  color: var(--ui-brand);
}

/* Bulletlist (tegenprestaties) met CHECKMARKS */
#spInfoFavours {
  list-style: none;
  padding-left: 0;
  margin: 0 auto 1.4rem;
  max-width: 420px;
  text-align: left;
}

#spInfoFavours li {
  position: relative;
  padding-left: 28px;
  margin: .4rem 0;
  font-size: 1rem;
  color: var(--ui-text);
}

#spInfoFavours li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--ui-brand);
  font-size: 1.1rem;
}

/* Business club leden */
#spInfoBusinessClub {
  margin-top: 1.25rem;
  font-size: .9rem;
  color: var(--ui-muted);
}

#spInfoBusinessClub a {
  color: var(--ui-brand);
  font-weight: 600;
  text-decoration: none;
}

#spInfoBusinessClub a:hover {
  text-decoration: underline;
}

/* Footer button */
#sponsorProductInfoModal .modal-footer button {
  font-size: 1rem;
  padding: .55rem 1.25rem;
  border-radius: 10px;
}


/* Sponsor product modal slider */

.sp-slider {
  position: relative;
}

.sp-slider-viewport {
  border-radius: 18px;
  overflow: hidden;
}

.sp-slider-images {
  position: relative;
  width: 100%;
  padding-top: 56%; /* 16:9, net als je oude div */
  background: #eee;
}

.sp-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}

.sp-slide.is-active {
  opacity: 1;
}

.sp-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: color-mix(in srgb, var(--ui-brand) 85%, transparent) !important;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.sp-slider-arrow--prev { left: 8px; }
.sp-slider-arrow--next { right: 8px; }

.sp-slider-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
}

.sp-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
}

.sp-slider-dot.is-active {
  background: #fff;
}

/* Als er maar 1 afbeelding is → pijlen verstoppen */
.sp-slider--single .sp-slider-arrow {
  display: none;
}


/* Shared skin voor info + checkout modal */
.sp-product-modal{
  border-radius: 22px;
  background: #fff;
  box-shadow:
    0 18px 48px rgba(15,23,42,.18),
    0 4px 12px rgba(15,23,42,.08);
  overflow: hidden;
}

/* Centeren zoals info modal */
#shopCheckoutModal .modal-header,
#shopCheckoutModal .modal-body,
#shopCheckoutModal .modal-footer{
  text-align:center;
}

#shopCheckoutModal .modal-title{
  color: var(--ui-brand);
  font-weight: 700;
  font-size: 1.25rem;
}

#checkoutName{
  font-weight: 800;
  font-size: 1.45rem;
  color: var(--ui-brand);
  text-align: center;
}

#checkoutSummary{
  font-size: 1rem;
  color: var(--ui-muted);
  margin-bottom: .25rem;
}

/* Blokken (gender/maat) net als je “Wat krijg je terug…” sectie */
#shopCheckoutModal h5{
  font-size: 1.15rem;
  font-weight: 700;
  margin: 1.25rem 0 .5rem;
  color: var(--ui-brand);
}

/* Choice buttons row */
.sp-choice-row{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}

/* Buttons zelf (brand filled) */
.sp-choice-btn{
  border-radius: 999px;
  padding: .5rem 1.1rem;
  font-weight: 700;
}

/* Actieve state: Bootstrap doet dit al met btn-check,
   maar we geven ‘m extra “pressed” gevoel */
.btn-check:checked + .sp-choice-btn{
  filter: brightness(.95);
  box-shadow: 0 6px 14px rgba(var(--brand-rgb), .25);
}

/* Checkout inputs: iets “cleaner” (optioneel) */
#shopCheckoutModal .form-control,
#shopCheckoutModal .form-select{
  border-radius: 12px;
}






/* ============================================================
   Public sponsor lead modal – unified clean styling
   ============================================================ */

#spLeadModal .modal-content.sp-lead-modal {
  border-radius: 22px;
  background: #fff;
  box-shadow:
    0 18px 48px rgba(15,23,42,.18),
    0 4px 12px rgba(15,23,42,.08);
  overflow: hidden;
}

/* Top-sponsors header (zelfde als info-modal) */
#spLeadModal .top-sponsors {
  background: transparent !important;
  padding: 0;
  margin-bottom: .35rem;
}
#spLeadModal .top-sponsors-inner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}
#spLeadModal .top-sponsor {
  padding: 0;
  background: transparent;
  box-shadow: none;
}
#spLeadModal .top-sponsor-logo {
  max-height: 34px;
  max-width: 110px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.12));
}

/* Titel + subtitel */
#spLeadModal .modal-title {
  color: var(--ui-brand);
  font-weight: 700;
  font-size: 1.25rem;
  text-align: center;
}

.sp-lead-product-summary {
  font-family: "Montserrat", sans-serif;
  text-align: center;
}

.sp-lead-product-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ui-brand);
}

/* Form wrapper */
.sp-lead-form {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Elke form-group netjes onder elkaar */
.sp-lead-form-group {
  margin-bottom: 1rem;
  text-align: left;
}

/* Labels altijd boven de velden */
#spLeadModal .form-label {
  display: block;
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: .35rem;
  color: var(--ui-text, #111827);
}

/* Inputs / textarea modern styling */
#spLeadModal .form-control {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: .95rem;
  padding: .55rem .75rem;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background-color .15s ease;
}

#spLeadModal .form-control::placeholder {
  color: #9ca3af;
}

#spLeadModal .form-control:focus {
  background: #fff;
  border-color: color-mix(in srgb, var(--ui-brand) 90%, #ffffff 10%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-brand) 25%, transparent);
  outline: none;
}

#spLeadModal textarea.form-control {
  min-height: 110px;
  resize: vertical;
}

/* Disclaimer */
.sp-lead-disclaimer {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  color: var(--ui-muted);
}

/* Footer buttons */
#spLeadModal .modal-footer .btn {
  border-radius: 999px;
  padding: .55rem 1.35rem;
  font-size: .95rem;
}

#spLeadSubmit.btn-brand {
  min-width: 160px;
}


/* ====================================================================
   SPONSORS_PUBLIC – GRID VIEW (zelfde layout als sponsor_product_public)
   ==================================================================== */

body.module-sponsors_public #MetaTable {
  border-collapse: separate;
  border-spacing: 0;
}

/* Header weg; info zit in de kaart */
body.module-sponsors_public #MetaTable thead {
  display: none;
}

/* Tbody als flex-grid container */
body.module-sponsors_public #MetaTable tbody {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: flex-start;
}

/* Elke <tr> = één tile */
body.module-sponsors_public #MetaTable tbody tr {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Breedtes per breakpoint (zelfde als products) */
body.module-sponsors_public #MetaTable tbody tr {
  flex: 0 0 100%;
}

@media (min-width: 576px) {
  body.module-sponsors_public #MetaTable tbody tr {
    flex: 0 0 calc(50% - 1.25rem);
  }
}

@media (min-width: 768px) {
  body.module-sponsors_public #MetaTable tbody tr {
    flex: 0 0 calc(33.333% - 1.25rem);
  }
}

@media (min-width: 1200px) {
  body.module-sponsors_public #MetaTable tbody tr {
    flex: 0 0 calc(25% - 1.25rem); /* 4 per rij */
  }
}

body.module-sponsors_public #MetaTable tbody tr td {
  padding: 0;
  border: 0;
}

body.module-sponsors_public #MetaTable td.sponsor-card-cell {
  display: block !important;
}

/* ====================================================================
   Sponsor card – logo header + rode label
   ==================================================================== */

.sponsor-card {
  /* zelfde look & feel als event/sponsor-product cards */
}

.sponsor-card__media {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f9fafb;
  min-height: 180px; /* hoogte van het “plaatje”-deel */
}

/* Rode label linksboven over de afbeelding (tekst komt uit Sponsor_type_name) */
.sponsor-card__pill {
  background-color: var(--ui-brand);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  position: absolute;
  left: 0.85rem;
  top: 0.75rem;
}

/* Button onderin wat ronder en voller */
.sponsor-card .btn.btn-brand.btn-sm {
  border-radius: 999px;
  padding-inline: 1rem;
}
/* ===========================
   VIDEO HERO – LANDING PAGE
   =========================== */

/* Basis: mobiele / tablet card */
.landing-hero {
  position: relative;
  margin: 1.5rem auto 2.5rem;
  max-width: 1200px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 26px 60px rgba(15,23,42,.34),
    0 10px 22px rgba(15,23,42,.18);
  background: #000; /* fallback als video niet laadt */
}

/* Videolaag */
.landing-hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* BELANGRIJK: altijd een minimale hoogte, anders zie je niets */
.landing-hero,
.landing-hero__video-wrap,
.landing-hero__video {
  min-height: 280px;
}

.landing-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);          /* luxe mini-zoom */
  filter: brightness(.78) saturate(1.05);
}

/* Overlay voor leesbaarheid van logo + tekst */
.landing-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.45) 0%,
      rgba(0,0,0,.35) 30%,
      rgba(0,0,0,.15) 65%,
      rgba(0,0,0,0)   100%
    );
}

/* Inhoud boven de video */
.landing-hero__inner {
  position: relative;
  z-index: 2;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;      /* mobiel: logos + tekst centreren */
  justify-content: center;
  text-align: center;
  padding: 1.75rem 1rem 2.25rem;
}

/* Logo-row (basis = mobiel/tablet) */
.landing-header-logos-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  margin-bottom: 0.75rem;
}

/* Veil-bubbeltje onder logo’s */
.landing-hero__text {
  margin-top: .25rem;
}

.hero-veil {
  display: inline-block;
  padding: .3rem .9rem;
  border-radius: .9rem;
  background: rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.35);
  color: #f9fafb;
  font-size: .9rem;
  font-weight: 600;
}

/* Logo-formattering (basis = tablet) */
.landing-logo-main {
  display: block;
  height: 110px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.45));
}

.landing-logo-side {
  display: block;
  height: 70px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.45));
  opacity: .95;
}

/* =======================
   MOBIEL
   ======================= */

@media (max-width: 576px) {
  .landing-hero {
    margin: 1.25rem 1rem 1.75rem;
    border-radius: 18px;
  }

  .landing-hero__inner {
    min-height: 260px;
    padding: 1.25rem 1rem 1.75rem;
  }

  .landing-header-logos-row {
    flex-direction: row;
    gap: 1.25rem;
  }

  .landing-logo-main {
    height: 80px;
  }

  .landing-logo-side {
    height: 44px;
  }

  .hero-veil {
    font-size: .8rem;
    padding: .25rem .7rem;
  }
}

/* =======================
   TABLET
   ======================= */

@media (min-width: 577px) and (max-width: 991.98px) {
  .landing-hero__inner {
    min-height: 320px;
  }
}

/* =======================
   DESKTOP – FULL WIDTH + MEER HEIGHT
   ======================= */

@media (min-width: 992px) {
  /* Hero over hele breedte scherm */
  .landing-hero {
    max-width: none;
    width: 100%;
    margin: 0 0 3.5rem;
    border-radius: 0 0 36px 36px;   /* onderkant nog lekker rond */
    box-shadow:
      0 32px 70px rgba(15,23,42,.35),
      0 14px 28px rgba(15,23,42,.20);
  }

  /* Hogere hero / video op desktop */
  .landing-hero,
  .landing-hero__video-wrap,
  .landing-hero__video {
    min-height: 520px;
    height: 520px;
  }

  /* Logo’s duidelijk naar boven in de video */
  .landing-hero__inner {
    align-items: center;
    justify-content: flex-start;      /* niet meer verticaal gecentreerd */
    text-align: center;
    padding-top: 3.75rem;
    padding-bottom: 2.5rem;
    padding-inline: clamp(2rem, 6vw, 5rem);
  }

  .landing-header-logos-row {
    justify-content: center;
    gap: 3rem;
    margin-bottom: 1.25rem;
  }

  .landing-logo-main {
    height: 130px;
  }

  .landing-logo-side {
    height: 80px;
  }

  .hero-veil {
    font-size: .9rem;
    padding: .35rem 1rem;
  }
}
/* =============================================================================
   PREMIUM 3D BRAND HEADER (MATCHT JE UI)
============================================================================= */

header#l2sHeader {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #ffffff;

  /* premium zachte schaduw */
  box-shadow:
    0 4px 10px rgba(0,0,0,.06),
    inset 0 -1px 0 rgba(0,0,0,.05);
}

/* Brand-underline */
header#l2sHeader::after {
  content: "";
  display: block;
  height: 3px;
  background: var(--ui-brand); /* jouw brandkleur */
  box-shadow:
    0 0 10px color-mix(in srgb, var(--ui-brand) 60%, transparent),
    0 0 18px color-mix(in srgb, var(--ui-brand) 35%, transparent);
}

/* Typography — zwart, zoals origineel */
#l2sHeader .navbar-brand,
#l2sHeader .nav-link,
#l2sHeader .navbar-text,
#l2sHeader i {
  color: #111 !important;
}

/* Hover: subtiel */
#l2sHeader .nav-link:hover {
  color: var(--ui-brand) !important;
}

/* Toggler (mobile) */
#l2sHeader .navbar-toggler {
  border-color: rgba(0,0,0,.15);
}
#l2sHeader .navbar-toggler-icon {
  filter: brightness(0);
}

/* Logout button opnieuw wit-stijl */
#l2sHeader #btnLogout {
  border-color: var(--ui-danger);
  color: var(--ui-danger);
}
#l2sHeader #btnLogout:hover {
  background: rgba(var(--fab-back-rgb), .12);
}

/* Prevent overflow of menu items */
#l2sNav .navbar-nav {
  flex-wrap: wrap;
}

/* =============================================================================
   UITSLAGEN, PROGRAMMA, STAND 
============================================================================= */

/* Highlight eigen team in de stand */
.table-row--own-team {
  background: rgba(var(--brand-rgb, 210,35,42), .06) !important;
  border-top: 1px solid rgba(var(--brand-rgb, 210,35,42), .45) !important;
  border-bottom: 1px solid rgba(var(--brand-rgb, 210,35,42), .45) !important;
  font-weight: 600;
}


/* ============================================================================
   Players & Trainers – FIFA cards (public + admin CRUD)
   ========================================================================== */

/* GRID / TABLE WRAP
   ----------------- */

body.public-read.module-players_public .table-wrap,
body.meta-page.module-players .table-wrap,
body.meta-page.module-trainers .table-wrap {
  /* geen horizontale scroll, we doen een flex-grid */
}

body.public-read.module-players_public .table-cards,
body.meta-page.module-players .table-cards,
body.meta-page.module-trainers .table-cards {
  border-collapse: separate;
  border-spacing: 0;
}

body.public-read.module-players_public .table-cards thead,
body.meta-page.module-players .table-cards thead,
body.meta-page.module-trainers .table-cards thead {
  display: none; /* kop is niet nodig voor kaarten */
}

body.public-read.module-players_public .table-cards tbody,
body.meta-page.module-players .table-cards tbody,
body.meta-page.module-trainers .table-cards tbody {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* kaartenblok centreren */
  gap: 1.25rem;
}

/* ⬇️ tr zelf is nu een flex-item EN flex-container
      zodat de kaart in het midden staat, ook op mobiel */
body.public-read.module-players_public .table-cards tr,
body.meta-page.module-players .table-cards tr,
body.meta-page.module-trainers .table-cards tr {
  display: flex;
  justify-content: center;   /* kaart in het midden van de kolom */
  border: 0;
  padding: 0;
  flex: 1 1 100%;
}

/* Elke rij is 1 kaart-kolom */
body.public-read.module-players_public .table-cards td,
body.meta-page.module-players .table-cards td,
body.meta-page.module-trainers .table-cards td {
  border: 0;
  padding: 0;
}

/* Responsive kolommen:
   - xs: 1 per rij
   - sm: 2 per rij
   - md: 3 per rij
   - lg: 4 per rij
   - xl+: 5 per rij (20%)
*/
@media (min-width: 576px) {
  body.public-read.module-players_public .table-cards tr,
  body.meta-page.module-players .table-cards tr,
  body.meta-page.module-trainers .table-cards tr {
    flex: 1 1 calc(50% - 1.25rem);
  }
}

@media (min-width: 768px) {
  body.public-read.module-players_public .table-cards tr,
  body.meta-page.module-players .table-cards tr,
  body.meta-page.module-trainers .table-cards tr {
    flex: 1 1 calc(33.333% - 1.25rem);
  }
}

@media (min-width: 992px) {
  body.public-read.module-players_public .table-cards tr,
  body.meta-page.module-players .table-cards tr,
  body.meta-page.module-trainers .table-cards tr {
    flex: 1 1 calc(25% - 1.25rem);
  }
}

@media (min-width: 1400px) {
  body.public-read.module-players_public .table-cards tr,
  body.meta-page.module-players .table-cards tr,
  body.meta-page.module-trainers .table-cards tr {
    flex: 1 1 calc(20% - 1.25rem); /* max 5 per rij */
  }
}

/* In CRUD verstoppen we de oude cellen (maar laten ze in de DOM) */
body.meta-page.module-players .player-row-hidden-cell,
body.meta-page.module-trainers .player-row-hidden-cell {
  display: none !important;
}

/* ---- card base ---- */

body.public-read.module-players_public .fifa-card,
body.public-read.module-squads_public .fifa-card,
body.meta-page.module-players .fifa-card,
body.meta-page.module-trainers .fifa-card {
  width: 310px;
  height: 470px;
  position: relative;
  overflow: hidden;
  border-radius: 26px;

  background: linear-gradient(180deg, #f7f7f7 0%, #d9d9d9 50%, #ececec 100%);
  background-image:
    radial-gradient(rgba(255,255,255,0.35) 1px, transparent 1px),
    linear-gradient(140deg, rgba(255,255,255,0.6), rgba(0,0,0,0.08));
  background-size: 5px 5px, 100% 100%;

  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.55);

  clip-path: path(
    "M20 0 H290 Q310 0 310 20 V360 Q310 400 190 470 Q155 490 120 470 Q0 400 0 360 V20 Q0 0 20 0 Z"
  );
}

/* ---- Header ---- */

body.public-read.module-players_public .fifa-card .rating,
body.public-read.module-squads_public .fifa-card .rating,
body.meta-page.module-players .fifa-card .rating,
body.meta-page.module-trainers .fifa-card .rating {
  position: absolute;
  top: 28px;
  left: 28px;
  font-size: 42px;
  font-weight: 900;
  color: #4a4217;
}

body.public-read.module-players_public .fifa-card .position,
body.public-read.module-squads_public .fifa-card .position,
body.meta-page.module-players .fifa-card .position,
body.meta-page.module-trainers .fifa-card .position {
  position: absolute;
  top: 78px;
  left: 32px;
  font-size: 24px;
  font-weight: 700;
  color: #4a4217;
}

body.public-read.module-players_public .fifa-card .flag,
body.public-read.module-squads_public .fifa-card .flag,
body.meta-page.module-players .fifa-card .flag,
body.meta-page.module-trainers .fifa-card .flag {
  position: absolute;
  top: 30px;
  right: 43px;
  width: 44px;
}

/* ---- Photo + circle ---- */

body.public-read.module-players_public .fifa-card .photo-wrapper,
body.public-read.module-squads_public .fifa-card .photo-wrapper,
body.meta-page.module-players .fifa-card .photo-wrapper,
body.meta-page.module-trainers .fifa-card .photo-wrapper {
  position: absolute;
  left: calc(50% - 7px);
  top: 105px;
  transform: translateX(-50%);
  width: 180px;
  height: 180px;
  pointer-events: none;
}

body.public-read.module-players_public .fifa-card .photo-bg,
body.public-read.module-squads_public .fifa-card .photo-bg,
body.meta-page.module-players .fifa-card .photo-bg,
body.meta-page.module-trainers .fifa-card .photo-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid var(--ui-brand, #d40000);
  box-shadow: 0 8px 18px rgba(0,0,0,0.3);
  background: radial-gradient(circle at 30% 20%, #ffffff, #d7d7d7);
}

body.public-read.module-players_public .fifa-card .player-img,
body.public-read.module-squads_public .fifa-card .player-img,
body.meta-page.module-players .fifa-card .player-img,
body.meta-page.module-trainers .fifa-card .player-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: auto;
  object-fit: contain;
}

/* ---- Info blok ---- */

body.public-read.module-players_public .fifa-card .info,
body.public-read.module-squads_public .fifa-card .info,
body.meta-page.module-players .fifa-card .info,
body.meta-page.module-trainers .fifa-card .info {
  position: absolute;
  top: 275px;
  left: calc(50% - 7px);
  transform: translateX(-50%);
  text-align: center;
  color: #4a4217;
  width: 250px;
}

body.public-read.module-players_public .fifa-card .player-name,
body.public-read.module-squads_public .fifa-card .player-name,
body.meta-page.module-players .fifa-card .player-name,
body.meta-page.module-trainers .fifa-card .player-name {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

body.public-read.module-players_public .fifa-card .stats,
body.public-read.module-squads_public .fifa-card .stats,
body.meta-page.module-players .fifa-card .stats,
body.meta-page.module-trainers .fifa-card .stats {
  font-size: 17px;
  font-weight: 700;
  line-height: 22px;
}

/* ---- Admin actions onder de naam (alleen CRUD) ---- */

body.meta-page.module-players .fifa-card__actions,
body.meta-page.module-trainers .fifa-card__actions {
  margin-top: 0.6rem;
  display: flex;
  justify-content: center;
  gap: .5rem;
}

body.meta-page.module-players .fifa-card__actions .btn,
body.meta-page.module-trainers .fifa-card__actions .btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ============================================================================
   READ.PHP?MODULE=SQUADS_PUBLIC MAIN SPONSOR BANNER
   ========================================================================== */
/* ===========================================
   SQUADS_PUBLIC – HEADER + SPONSOR BANNER
   =========================================== */

body.public-read.module-squads_public .squad-header-card {
  max-width: 1400px;
  margin: 0 auto 2rem;
  padding-inline: 0;
  border-radius: 0;
}

/* Titelblok boven de banner */
body.public-read.module-squads_public .header-info {
  text-align: center;
  margin-bottom: .75rem;
}

/* ---------------------------
   Hoofdsponsor-banner
   --------------------------- */

body.public-read.module-squads_public .header-main-sponsor-wrap {
  width: 100%;
}

body.public-read.module-squads_public .squad-main-sponsors {
  display: flex;
  flex-wrap: wrap;          /* NOOIT meer wegvallen */
  justify-content: center;
  align-items: center;
  gap: 1.8rem 2.4rem;
  background: #c62828;
  padding: 1.4rem 1rem;
  border-radius: 0;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* Elk item (link of div) */
body.public-read.module-squads_public .squad-main-sponsor-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Logo's zelf */
body.public-read.module-squads_public .squad-main-sponsor-logo {
  height: 60px !important;     /* basismaat */
  width: auto;
  object-fit: contain;
  display: block;
}

/* schaal bij veel sponsors (JS zet deze klassen) */
body.public-read.module-squads_public .squad-main-sponsors--md .squad-main-sponsor-logo {
  height: 54px !important;
}
body.public-read.module-squads_public .squad-main-sponsors--lg .squad-main-sponsor-logo {
  height: 48px !important;
}
body.public-read.module-squads_public .squad-main-sponsors--xlg .squad-main-sponsor-logo {
  height: 40px !important;
}

/* Tekstfallback (als er geen logo is) */
body.public-read.module-squads_public .squad-main-sponsor-text {
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
}

/* ========= MOBIEL: 3 per rij ========= */

@media (max-width: 768px) {
  body.public-read.module-squads_public .squad-main-sponsor-item {
    flex: 0 0 calc(33.33% - 1rem);  /* 3 per rij */
  }

  body.public-read.module-squads_public .squad-main-sponsor-logo {
    height: 42px !important;
  }

  body.public-read.module-squads_public .squad-main-sponsors {
    gap: 1rem 1.4rem;
    padding-inline: .75rem;
  }
}

/* ========= SLIDER FULL-WIDTH + RONDE ARROWS ========= */

body.public-read.module-squads_public .squad-slider {
  margin-top: 0;
  border-radius: 0;
  overflow: hidden;
}

body.public-read.module-squads_public .squad-slider .carousel-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* custom arrows in Nike-stijl */
body.public-read.module-squads_public .squad-slider-arrow {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 0;
  background: #c62828;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  top: 50%;
  transform: translateY(-50%);
}

body.public-read.module-squads_public .squad-slider-arrow .slider-arrow-icon {
  font-size: 1.4rem;
  color: #fff;
  line-height: 1;
}

body.public-read.module-squads_public .carousel-control-prev.squad-slider-arrow {
  left: 1.5rem;
}
body.public-read.module-squads_public .carousel-control-next.squad-slider-arrow {
  right: 1.5rem;
}

@media (max-width: 768px) {
  body.public-read.module-squads_public .squad-slider-arrow {
    width: 40px;
    height: 40px;
  }
}


/* ============================================================
   RELATED MANAGERS BAR (MetaCrudModal) — brand-ui + centered
   Targets: #relatedManagers bar in manage.php
============================================================ */

/* 1) Card header ook in brand feel (optioneel, maar matcht je UI) */
#MetaCrudModal #relatedManagers .card-header{
  background: linear-gradient(180deg, rgba(var(--brand-rgb), .06), #ffffff) !important;
  color: var(--ui-text) !important;
  border-bottom: 1px solid rgba(var(--brand-rgb), .22) !important;
  font-weight: 700;
}

/* 2) Button row centreren */
#MetaCrudModal #relatedManagers .card-body{
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;   /* <-- center */
  align-items: center;
  gap: .6rem !important;
}

/* 3) Shared button “brand-ui” skin */
#MetaCrudModal #relatedManagers .btn{
  border-radius: 12px;
  font-weight: 700;
  padding: .55rem 1rem;          /* iets voller dan default btn-sm */
  line-height: 1.1;
  box-shadow: 0 2px 8px rgba(15,23,42,.08);
  transition: transform .12s ease, box-shadow .16s ease, filter .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease;
}

#MetaCrudModal #relatedManagers .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(15,23,42,.12);
}

/* 4) Brand filled (= jouw “blauwe” buttons) */
#MetaCrudModal #relatedManagers .btn.btn-primary{
  background: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(var(--brand-rgb), .25);
}

#MetaCrudModal #relatedManagers .btn.btn-primary:hover{
  filter: brightness(.96);
  box-shadow: 0 10px 20px rgba(var(--brand-rgb), .30);
}

/* 5) Brand outline (= jouw “witte” buttons met border) */
#MetaCrudModal #relatedManagers .btn.btn-outline-primary{
  background: #fff !important;
  color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  border-width: 1.5px;
}

#MetaCrudModal #relatedManagers .btn.btn-outline-primary:hover{
  background: rgba(var(--brand-rgb), .06) !important;
  color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
}

/* “Pressed/active”: outline mag even filled worden */
#MetaCrudModal #relatedManagers .btn.btn-outline-primary:active,
#MetaCrudModal #relatedManagers .btn.btn-outline-primary.active{
  background: var(--ui-brand) !important;
  color: #fff !important;
  border-color: var(--ui-brand) !important;
  transform: translateY(0);
  box-shadow: 0 10px 18px rgba(var(--brand-rgb), .28);
}

/* 6) Mobile: buttons iets breder/leesbaarder */
@media (max-width: 576px){
  #MetaCrudModal #relatedManagers .btn{
    padding: .6rem 1.05rem;
    width: auto;
  }
}


/* ============================================================
   FINANCE STATS IN MANAGE FINANCE_SPONSORS
============================================================ */

.finance-stats {
  margin-top: 12px;
  margin-bottom: 10px;
}

.finance-stats .card-soft {
  background: var(--bs-body-bg);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  padding: 10px 14px;
  min-width: 160px;
  text-align: center;
}

.finance-stats .card-soft .label {
  font-size: .85rem;
  color: rgba(0,0,0,.55);
}

.finance-stats .card-soft .value {
  font-weight: 700;
  font-size: 1.15rem;
}