:root{
  --c-deep:  #05002b;
  --c-mid:   #2a0b66;
  --c-violet:#5a1cff;
  --c-purple:#7a1bff;
  --c-mag:   #ff3bd6;
}

/* Bootstrap tweak */
.btn-primary{
  --bs-btn-bg: #c603fa;
  --bs-btn-border-color: hsl(287 98% 66% / 1);
}

html, body { height: 100%; }

body{
  margin: 0;
  min-height: 100vh;
  font-family: Poppins, sans-serif;

  background:
    radial-gradient(900px 700px at 22% 70%, rgba(122,27,255,.55) 0%, rgba(122,27,255,0) 62%),
    radial-gradient(800px 600px at 76% 80%, rgba(255,59,214,.22) 0%, rgba(255,59,214,0) 60%),
    radial-gradient(700px 500px at 10% 20%, rgba(90,28,255,.35) 0%, rgba(90,28,255,0) 60%),
    linear-gradient(135deg, var(--c-purple) 0%, var(--c-violet) 28%, var(--c-mid) 62%, var(--c-deep) 100%);
  background-attachment: fixed;
}

body::before{
  content:"";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  opacity: .55;

  background:
    linear-gradient(135deg,
      rgba(255,255,255,0) 0 38%,
      rgba(255,255,255,.10) 38% 52%,
      rgba(255,255,255,0) 52% 100%
    ) 12% 44% / 520px 420px no-repeat,

    linear-gradient(225deg,
      rgba(255,255,255,0) 0 42%,
      rgba(255,255,255,.08) 42% 58%,
      rgba(255,255,255,0) 58% 100%
    ) 38% 18% / 360px 280px no-repeat,

    linear-gradient(140deg,
      rgba(255,255,255,0) 0 46%,
      rgba(255,255,255,.07) 46% 63%,
      rgba(255,255,255,0) 63% 100%
    ) 62% 56% / 520px 360px no-repeat,

    radial-gradient(900px 600px at 45% 55%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 70%);

  transform: rotate(-6deg);
  filter: blur(.2px);
  mix-blend-mode: screen;
}

body::after{
  content:"";
  position: fixed;
  inset: -40%;
  pointer-events: none;

  background:
    repeating-linear-gradient(
      115deg,
      rgba(255,255,255,.18) 0 2px,
      rgba(255,255,255,0) 2px 18px
    ),
    repeating-linear-gradient(
      115deg,
      rgba(255,255,255,.07) 0 1px,
      rgba(255,255,255,0) 1px 10px
    );

  -webkit-mask-image: radial-gradient(900px 700px at 82% 35%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%);
  mask-image: radial-gradient(900px 700px at 82% 35%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%);

  opacity: .9;
  transform: rotate(-6deg);
  mix-blend-mode: screen;
}

.page{
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 24px;

  /* Allow sticky footer layouts without forcing extra scroll */
  flex: 1 0 auto;
  width: 100%;
  min-height: 0;
}

/* --- Public registration wizard (/inschrijven) ---
   The base .card-glass is intentionally narrow (login, small forms).
   For the multi-step registration wizard we want a wider, centered work area.
*/
.page-register .container-register{
  max-width: 1200px;
}

.page-register .card-glass{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}


/* Override base .page grid-centering for the wizard: we want a normal document flow.
   This also fixes occasional off-center/narrow rendering on wide screens.
*/
.page-register{
  display: block;
  place-items: unset;
  padding: 16px;
}

/* Room for the fixed bottom action bar */
.page-register .container-register{
  padding-bottom: 110px;
}

/* Splash (step 1) has no sticky action bar, so remove the extra bottom padding
   to keep the content visually centered (login-like). */
.page-register.is-splash .container-register{
  padding-bottom: 0;
}

/* Wizard shell components */
.wizard-inline-nav{ display: none !important; }

.wizard-topbar{
  display: flex;
  align-items: center;
  gap: 12px;
}

.wizard-logo-small{
  width: 38px;
  height: auto;
  display: block;
}

.wizard-progress{
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.wizard-progress .badge{
  white-space: nowrap;
  font-weight: 600;
  padding: 8px 12px;
}

.wizard-splash{
  text-align: center;
  /* More like /login: content feels vertically centered, but keep room for the fixed footer */
  /* Account for .page-register padding (16px top + 16px bottom) to avoid extra scroll */
  min-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 32px;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

/* Splash-only layout helpers (step 1). */
.wizard-splash-main{
  /* Keep the content from sitting under the fixed footer */
  padding-bottom: 0;
}

.wizard-splash-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Match /login footer: no extra side padding */
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  z-index: 6;
}

.wizard-logo-hero{
  width: 100%;
  max-width: 320px;
  height: auto;
}

.wizard-actionbar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: rgba(255,255,255,.06);
  border-top: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.wizard-actionbar-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  gap: 12px;
}

.wizard-actionbar-inner .btn{
  flex: 1 1 auto;
}

/* Floating sticky logo overlayed on the action bar (decorative; click-through). */
.wizard-floatlogo{
  position: fixed;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  z-index: 21;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: min(360px, 78vw);
  height: 103px;
}

.wizard-floatlogo img{
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
  opacity: .92;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.45));
}

.wizard-errorbar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 84px;
  z-index: 30;
  padding: 0 12px;
  pointer-events: none;
}

.wizard-errorbar-inner{
  max-width: 1200px;
  margin: 0 auto;
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(220,53,69,.22);
  border: 1px solid rgba(220,53,69,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.wizard-errorbar-text{
  flex: 1 1 auto;
  font-weight: 600;
  line-height: 1.25;
}

.wizard-errorbar-dismiss{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.wizard-errorbar-dismiss:focus-visible{
  outline: 2px solid rgba(255,255,255,.18);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  .wizard-errorbar-inner{
    scroll-behavior: auto;
  }
}


/* --- /inschrijven step 2 (voorrondes) --- */
.page-register .prelim-choice-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-register .prelim-choice{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}

.page-register .prelim-choice-input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.page-register .prelim-choice-check{
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.page-register .prelim-choice-check::before{
  content: '';
  width: 7px;
  height: 12px;
  border-right: 2px solid rgba(255,255,255,.85);
  border-bottom: 2px solid rgba(255,255,255,.85);
  transform: rotate(45deg);
  opacity: 0;
}

.page-register .prelim-choice-body{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.page-register .prelim-choice-main{
  display: grid;
  gap: 2px;
  min-width: 0;
}

.page-register .prelim-choice-title{
  font-weight: 600;
  line-height: 1.15;
}

.page-register .prelim-choice-sub{
  line-height: 1.15;
}

.page-register .prelim-choice-date{
  white-space: nowrap;
}

.page-register .prelim-choice-input:checked ~ .prelim-choice-check{
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.12);
}

.page-register .prelim-choice-input:checked ~ .prelim-choice-check::before{
  opacity: 1;
}

.page-register .prelim-choice:focus-within{
  outline: 2px solid rgba(255,255,255,.18);
  outline-offset: 2px;
}

/* --- /inschrijven step 3 (act) --- */
.page-register .act-type-grid{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-register .act-type-card{
  position: relative;
  display: block;
}

.page-register .act-type-input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.page-register .act-type-body{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}

.page-register .act-type-title{
  font-weight: 650;
}

.page-register .act-type-input:checked + .act-type-body{
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 2px rgba(255,255,255,.08) inset;
}


/* Step 3 layout: allow swapping order for solo (member fields first, act-name below) */
.page-register .step3-field-actname{ order: 1; }
.page-register .step3-field-members{ order: 2; }

.page-register [data-act-type="solo"] .step3-field-members{ order: 1; }
.page-register [data-act-type="solo"] .step3-field-actname{ order: 2; }

/* Step 3 solo mode: show member fields as a plain form (no accordion chrome / glass background) */
.page-register [data-act-type="solo"] .step3-members-title{ display: none; }
.page-register .step3-age-note-solo{ display: none; }
.page-register [data-act-type="solo"] .step3-age-note{ display: none; }
.page-register [data-act-type="solo"] .step3-age-note-solo{ display: block; }
.page-register [data-act-type="solo"] .member-accordion{ margin-top: 0 !important; gap: 0 !important; }
.page-register [data-act-type="solo"] .member-acc{ background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0 !important; }
.page-register [data-act-type="solo"] .member-acc-header{ display: none !important; }
.page-register [data-act-type="solo"] .member-acc-body{ border-top: 0 !important; overflow: visible !important; opacity: 1 !important; transition: none !important; }
.page-register [data-act-type="solo"] .member-acc-body.d-none{ display: block !important; }
.page-register [data-act-type="solo"] .member-acc-body > .p-3{ padding: 0 !important; }
.page-register [data-act-type="solo"] .member-acc-body .row{ margin-top: 0 !important; }
/* Per-member delete button is not applicable in solo mode */
.page-register [data-act-type="solo"] [data-member-remove-one]{
  display: none !important;
}

/* Hide per-singer remove button when disabled (min reached) */
.page-register [data-member-remove-one]:disabled{
  display: none !important;
}

/* Per-singer delete button: keep white outline, but use danger hover (readability on dark background) */
.page-register .btn-remove-singer:hover,
.page-register .btn-remove-singer:focus-visible{
  background: var(--bs-danger);
  border-color: var(--bs-danger);
  color: #fff;
}
.page-register .btn-remove-singer:active{
  background: var(--bs-danger);
  border-color: var(--bs-danger);
  color: #fff;
}

.page-register .member-acc{
  overflow: hidden;
  border-radius: 18px;
}

.page-register .member-acc-header{
  width: 100%;
  text-align: left;
  border: 0;
  padding: 14px 16px;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.page-register .member-acc-title{
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-register .member-acc-right{
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.page-register .member-acc-caret{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,.85);
  border-bottom: 2px solid rgba(255,255,255,.85);
  transform: rotate(45deg);
  flex: 0 0 auto;
  transition: transform .18s ease;
  position: relative;
  top: -1px;
}


.page-register .member-acc.is-open .member-acc-caret{
  transform: rotate(-135deg);
}

.page-register .member-acc-body{
  border-top: 1px solid rgba(255,255,255,.14);
  overflow: hidden;
  opacity: 1;
  transition: height .17s cubic-bezier(.2,.8,.2,1), opacity .17s linear;
}

.page-register .member-acc-header:focus-visible{
  outline: 2px solid rgba(255,255,255,.18);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce){
  .page-register .member-acc-caret,
  .page-register .member-acc-body{
    transition: none !important;
  }
}




/* --- /inschrijven step 4 (liedjes per voorronde) --- */
.page-register .prelim-accordion{ gap: 10px; }

.page-register .prelim-acc{ overflow: hidden; border-radius: 18px; }

.page-register .prelim-acc-header{
  width: 100%;
  text-align: left;
  border: 0;
  padding: 14px 16px;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.page-register .prelim-acc-main{ min-width: 0; flex: 1 1 auto; }

.page-register .prelim-acc-title{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-register .prelim-acc-summary{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.page-register .prelim-acc-sep{ opacity: .65; }

.page-register .prelim-acc-right{
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.page-register .prelim-acc-caret{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,.85);
  border-bottom: 2px solid rgba(255,255,255,.85);
  transform: rotate(45deg);
  position: relative;
  top: -1px;
  flex: 0 0 auto;
  transition: transform .18s ease;
}

.page-register .prelim-acc.is-open .prelim-acc-caret{ transform: rotate(-135deg); }

.page-register .prelim-acc-body{
  border-top: 1px solid rgba(255,255,255,.14);
  overflow: hidden;
  opacity: 1;
  transition: height .17s cubic-bezier(.2,.8,.2,1), opacity .17s linear;
}

.page-register .prelim-acc-header:focus-visible{
  outline: 2px solid rgba(255,255,255,.18);
  outline-offset: -2px;
}

/* Shared building blocks (used in /inschrijven and contestant pages) */
.song-slot{ margin-top: 16px; }
.song-slot-divider{ height: 1px; background: rgba(255,255,255,.14); margin: 16px 0; }

.page-register .song-slot{ margin-top: 16px; }
.page-register .song-slot-divider{ height: 1px; background: rgba(255,255,255,.14); margin-top: 16px; }

@media (prefers-reduced-motion: reduce){
  .page-register .prelim-acc-caret,
  .page-register .prelim-acc-body{
    transition: none !important;
  }
}

.brand{
  display: grid;
  gap: 14px;
  justify-items: center;
  margin-bottom: 10px;
}

.card-glass{
  max-width: 520px;
  width: 100%;
  padding: 22px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.form-text-muted{ opacity: .85; }


/* --- Dashboard chrome (Bootstrap dashboard-inspired) --- */

.dashboard-body{
  position: relative;
  z-index: 0;
}

.dashboard-navbar{
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.dashboard-shell{
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 56px);
}

.dashboard-sidebar-col{
  min-height: calc(100vh - 56px);
}

.dashboard-sidebar{
  height: 100%;
  background: rgba(255,255,255,.06);
  border-right: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.dashboard-nav-link{
  color: rgba(255,255,255,.82);
  border-radius: 12px;
  padding: .55rem .75rem;
}

.dashboard-nav-link:hover{
  color: #fff;
  background: rgba(255,255,255,.08);
}

.dashboard-nav-link.active{
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
}

.dashboard-main .card-glass{
  max-width: 100%;
}

/* tables on glass background */
.table-glass{
  --bs-table-bg: transparent;
  --bs-table-color: rgba(255,255,255,.92);
}
.table-glass > :not(caption) > * > *{
  border-color: rgba(255,255,255,.12);
}


/* Participants desktop table */
.participants-row.is-open{
  background: rgba(255,255,255,.04);
}
.participants-row:hover{
  background: rgba(255,255,255,.03);
}
.participants-detail-row > td{
  background: rgba(255,255,255,.02);
}
.participants-caret{
  width: 10px;
  height: 10px;
  display: inline-block;
  border-right: 2px solid rgba(255,255,255,.8);
  border-bottom: 2px solid rgba(255,255,255,.8);
  transform: rotate(-45deg);
  transition: transform .15s ease, opacity .15s ease;
  opacity: .75;
}
.participants-row.is-open .participants-caret{
  transform: rotate(45deg);
  opacity: 1;
}


/* Accordion on glass background */
.accordion-glass .accordion-item{
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: .5rem;
}

.accordion-glass .accordion-button{
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  padding: .75rem .85rem;
}

.accordion-glass .accordion-button:not(.collapsed){
  background: rgba(255,255,255,.06);
  color: #fff;
  box-shadow: none;
}

.accordion-glass .accordion-button:focus{
  box-shadow: 0 0 0 .2rem rgba(198,3,250,.25);
}

.accordion-glass .accordion-button::after{
  filter: invert(1);
}

.accordion-glass .accordion-body{
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.92);
  padding: .75rem .85rem;
}

.dashboard-icon{
  display: inline-flex;
  opacity: .9;
}


/* Mobile: sidebar column should not push main content down.
   On < md screens the sidebar becomes an offcanvas (position:fixed) but the column is stacked above main.
   The previous min-height caused a ~1 screen tall empty block, forcing users to scroll on every page. */
@media (max-width: 767.98px){
  .dashboard-shell{
    min-height: auto;
  }
  .dashboard-sidebar-col{
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
  }

  /* Mobile: unify content horizontal padding with /inschrijven.
     The dashboard shell already provides horizontal padding (via .dashboard-main).
     Many pages wrap content in an extra padded wrapper (e.g. .container-fluid.p-3 or .p-2),
     which doubled the side padding on phones. We keep vertical spacing but remove the extra
     left/right padding for the first content wrapper.
  */
  .dashboard-main > .container,
  .dashboard-main > .container-fluid{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .dashboard-main > .p-1,
  .dashboard-main > .p-2,
  .dashboard-main > .p-3,
  .dashboard-main > .p-4,
  .dashboard-main > .px-1,
  .dashboard-main > .px-2,
  .dashboard-main > .px-3,
  .dashboard-main > .px-4{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* --- Contestant portal: mobile bottom navigation (app-feel) --- */

@media (max-width: 767.98px){
  .dashboard-body[data-role="contestant"] .dashboard-main{
    /* Prevent main content from being hidden behind the fixed bottom nav.
       Add a little extra breathing room so the last card/input never sits
       flush against the nav.
    */
    /* IMPORTANT: .dashboard-main has Bootstrap utility padding classes (py-4)
       which use !important, so we must also use !important here.
       Otherwise the fixed bottom navigation will overlap the last content.
    */
    padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important;
  }

  .mobile-bottom-nav{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030; /* above content, below modals */
    background: rgba(255,255,255,.06);
    border-top: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: .45rem .6rem calc(.55rem + env(safe-area-inset-bottom));
  }

  .mobile-bottom-nav-inner{
    display: flex;
    gap: .35rem;
  }

  .mobile-bottom-nav-item{
    flex: 1 1 0;
    text-decoration: none;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.78);
    border-radius: 14px;
    padding: .45rem .25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: 1.05;
    touch-action: manipulation;
  }

  .mobile-bottom-nav-item:active{
    transform: scale(.98);
  }

  .mobile-bottom-nav-item:hover{
    color: #fff;
  }

  .mobile-bottom-nav-item.active{
    color: #fff;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.14);
  }

  .mobile-bottom-nav-icon{
    display: inline-flex;
    opacity: .95;
  }

  .mobile-bottom-nav-icon svg{
    width: 20px;
    height: 20px;
  }

  .mobile-bottom-nav-label{
    font-size: 11px;
    opacity: .92;
  }
}

/* Sidebar footer (mobile: shown inside the offcanvas menu) */
.dashboard-sidebar-footer{
  line-height: 1.35;
  padding-bottom: calc(4px + env(safe-area-inset-bottom));
}

/* --- Contestant dashboard: app tiles + primary CTA --- */

.app-cta{
  display: block;
  text-decoration: none;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.08);
}

.app-cta:hover{
  color: #fff;
  background: rgba(255,255,255,.10);
}

.app-cta:focus-visible{
  outline: 2px solid rgba(255,255,255,.18);
  outline-offset: 3px;
}

.app-cta-title{
  font-size: 1.05rem;
  line-height: 1.2;
}

.app-cta-chevron{
  flex: 0 0 auto;
  opacity: .85;
}

.app-cta:active{
  transform: scale(.99);
}

.app-tiles{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.app-tile{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  text-decoration: none;
  color: rgba(255,255,255,.90);
}

.app-tile:hover{
  color: #fff;
  background: rgba(255,255,255,.06);
}

.app-tile:focus-visible{
  outline: 2px solid rgba(255,255,255,.18);
  outline-offset: 3px;
}

.app-tile:active{
  transform: scale(.99);
}

.app-tile-icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  flex: 0 0 auto;
}

.app-tile-body{
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.app-tile-title{
  font-weight: 650;
  line-height: 1.15;
}

.app-tile-sub{
  font-size: .875rem;
  color: rgba(255,255,255,.70);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-tile-right{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.app-tile-chevron{
  opacity: .75;
}

.app-tile-thumb{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.14);
}

.app-checklist-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  text-decoration: none;
  color: rgba(255,255,255,.92);
  touch-action: manipulation;
}

.app-checklist-item:hover{
  color: #fff;
  background: rgba(255,255,255,.05);
}

.app-checklist-item:active{
  transform: scale(.99);
}

.app-checklist-item:focus-visible{
  outline: 2px solid rgba(255,255,255,.18);
  outline-offset: 3px;
}

.app-checklist-right{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.app-checklist-chevron{
  opacity: .65;
}

.app-checklist-item:hover .app-checklist-chevron{
  opacity: .95;
}

.app-checklist-item:hover .app-checklist-label{
  color: rgba(255,255,255,.85) !important;
}

@media (max-width: 767.98px){
  .app-cta-title{
    font-size: 1.1rem;
  }
  .app-tile{
    padding: 14px 14px;
  }
}
/* Step 4: copy-to-all link block */
.page-register .copy-all-block{
  line-height: 1.35;
}
.page-register .copy-all-block a{
  display: inline-block;
  margin-top: 4px;
}

/* Step 7: review (app-feel list cards) */
.page-register .review-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-register .review-item{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}
.page-register .review-item-title{
  font-weight: 650;
}
.page-register .review-item-sub{
  margin-top: 2px;
  font-size: .875rem;
  color: rgba(255,255,255,.70);
}

/* Normalize legend label sizing across the whole project (browser defaults can be larger). */
legend.form-label{
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 0;
  margin: 0;
}

/* Google reCAPTCHA badge hidden (v3). When hidden, we show an explicit disclosure text in step 7. */
.grecaptcha-badge{
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Wizard actionbar: align button labels */
.wizard-actionbar-inner .js-wizard-prev{
  text-align: left;
}
.wizard-actionbar-inner .js-wizard-next,
.wizard-actionbar-inner [data-wizard-submit]{
  text-align: right;
}

/* Wizard actionbar: no special focus/active styling (keep same look) */
.wizard-actionbar .btn:focus,
.wizard-actionbar .btn:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}
.wizard-actionbar .btn:active,
.wizard-actionbar .btn.active{
  box-shadow: none !important;
}

.wizard-actionbar .btn-outline-light:active,
.wizard-actionbar .btn-outline-light.active,
.wizard-actionbar .btn-outline-light:focus,
.wizard-actionbar .btn-outline-light:focus-visible{
  background: transparent !important;
  color: #f8f9fa !important;
  border-color: #f8f9fa !important;
}

.wizard-actionbar .btn-primary:active,
.wizard-actionbar .btn-primary.active,
.wizard-actionbar .btn-primary:focus,
.wizard-actionbar .btn-primary:focus-visible{
  background: rgba(130, 90, 255, .88) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #fff !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.18) !important;
}

/* --- /contestant/prelims (extra voorrondes) - match /inschrijven step 2 --- */
.contestant-prelims .prelim-choice-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contestant-prelims .prelim-choice{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}

.contestant-prelims .prelim-choice-input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.contestant-prelims .prelim-choice-check{
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.contestant-prelims .prelim-choice-check::before{
  content: '';
  width: 7px;
  height: 12px;
  border-right: 2px solid rgba(255,255,255,.85);
  border-bottom: 2px solid rgba(255,255,255,.85);
  transform: rotate(45deg);
  opacity: 0;
}

.contestant-prelims .prelim-choice-body{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.contestant-prelims .prelim-choice-main{
  display: grid;
  gap: 2px;
  min-width: 0;
}

.contestant-prelims .prelim-choice-title{
  font-weight: 600;
  line-height: 1.15;
}

.contestant-prelims .prelim-choice-sub{
  line-height: 1.15;
}

.contestant-prelims .prelim-choice-date{
  white-space: nowrap;
}

.contestant-prelims .prelim-choice-input:checked ~ .prelim-choice-check{
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.12);
}

.contestant-prelims .prelim-choice-input:checked ~ .prelim-choice-check::before{
  opacity: 1;
}

.contestant-prelims .prelim-choice:focus-within{
  outline: 2px solid rgba(255,255,255,.18);
  outline-offset: 2px;
}

/* Password requirements checklist (registration + reset forms)
   CSP-friendly (no inline scripts), updated by public/js/inschrijven_password_tools.js
*/
.pwreq{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 10px 12px;
}

.pwreq-title{
  font-size: .875rem;
  color: rgba(255,255,255,.68);
  margin-bottom: 6px;
}

.pwreq-list{
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

@media (min-width: 768px){
  .page-register .pwreq-list{
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
  }
}

.pwreq-list li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: rgba(255,255,255,.78);
}

.pwreq-list li::before{
  content: '○';
  opacity: .65;
  line-height: 1.2;
}

.pwreq-list li.is-met{
  color: rgba(255,255,255,.95);
}

.pwreq-list li.is-met::before{
  content: '✓';
  opacity: 1;
}

/* Compact variant (admin tables / small forms) */
.pwreq.pwreq-compact{
  padding: 8px 10px;
  border-radius: 12px;
}

.pwreq.pwreq-compact .pwreq-title{
  font-size: .8125rem;
  margin-bottom: 4px;
}

.pwreq.pwreq-compact .pwreq-list{
  gap: 4px;
  font-size: .8125rem;
}

@media (min-width: 576px){
  .pwreq.pwreq-compact .pwreq-list{
    grid-template-columns: 1fr 1fr;
    gap: 4px 10px;
  }
}

.pwreq.pwreq-compact .pwreq-list li{
  gap: 8px;
}

/* ------------------------------------------------------------------
   Admin — Email templates
   ------------------------------------------------------------------ */

.email-template-preview-frame{
  height: 320px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(0,0,0,.12);
}

.email-template-preview-text{
  white-space: pre-wrap;
}

.email-template-token-type-col{
  width: 80px;
}