/* Dark purple button refinement */
:root{
  --btn-purple-1:#2b123f;
  --btn-purple-2:#4b1f73;
  --btn-purple-3:#6d2aa8;
  --btn-purple-4:#8d45d6;
  --btn-purple-border:rgba(202,169,255,.20);
  --btn-purple-text:#f7f2ff;
}

html body a.btn.primary,
html body button.btn.primary,
html body input.btn.primary,
html body .btn.primary,
html body .one-configure.btn.primary,
html body .full.btn.primary,
html body .top-actions a.btn.primary,
html body .inline-actions a.btn.primary,
html body .actions a.btn.primary,
html body .cta-band a.btn.primary,
html body .one-package-faq-cta a.btn.primary,
html body .dedicated-card-bottom a.btn.primary,
html body .uc-auth-form button.btn.primary,
html body .uc-contact-form button.btn.primary,
html body .package-order,
html body .add-balance-btn{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.11), transparent 38%),
    linear-gradient(180deg,var(--btn-purple-4) 0%,var(--btn-purple-3) 16%,var(--btn-purple-2) 58%,var(--btn-purple-1) 100%)!important;
  background-color:var(--btn-purple-2)!important;
  border-color:var(--btn-purple-border)!important;
  color:var(--btn-purple-text)!important;
  text-shadow:0 1px 0 rgba(0,0,0,.18)!important;
  box-shadow:
    0 12px 30px rgba(59,18,96,.28),
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 1px 0 rgba(255,255,255,.12) inset!important;
}

html body a.btn.primary:hover,
html body button.btn.primary:hover,
html body .btn.primary:hover,
html body .one-configure.btn.primary:hover,
html body .cta-band a.btn.primary:hover,
html body .one-package-faq-cta a.btn.primary:hover,
html body .package-order:hover,
html body .add-balance-btn:hover{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.14), transparent 38%),
    linear-gradient(180deg,#9f5ae8 0%,#7d35c8 18%,#59238c 58%,#33174f 100%)!important;
  background-color:#59238c!important;
  border-color:rgba(220,195,255,.28)!important;
  box-shadow:
    0 16px 36px rgba(78,24,124,.34),
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 1px 0 rgba(255,255,255,.14) inset!important;
}

html body a.btn.ghost,
html body button.btn.ghost,
html body .btn.ghost,
html body .top-actions a.btn.ghost,
html body .inline-actions a.btn.ghost,
html body .actions a.btn.ghost,
html body .cta-band a.btn.ghost,
html body .one-package-faq-cta a.btn.ghost,
html body .api-method-filter button,
html body .copy-btn,
html body .action-btn,
html body .top-actions .wallet-chip,
html body a.wallet-chip,
html body .top-actions .icon-btn,
html body a.icon-btn,
html body .icon-btn.dashboard-shortcut,
html body .language-switcher,
html body .flag-language-switcher{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.06), transparent 40%),
    linear-gradient(180deg,rgba(96,38,146,.34),rgba(40,17,64,.92))!important;
  border-color:rgba(202,169,255,.18)!important;
  color:#ede3ff!important;
  box-shadow:
    0 10px 24px rgba(38,11,61,.18),
    0 0 0 1px rgba(255,255,255,.05) inset!important;
}

html body a.btn.ghost:hover,
html body button.btn.ghost:hover,
html body .btn.ghost:hover,
html body .api-method-filter button:hover,
html body .copy-btn:hover,
html body .action-btn:hover,
html body .top-actions .wallet-chip:hover,
html body a.wallet-chip:hover,
html body .top-actions .icon-btn:hover,
html body a.icon-btn:hover,
html body .icon-btn.dashboard-shortcut:hover{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), transparent 40%),
    linear-gradient(180deg,rgba(116,54,171,.40),rgba(50,21,78,.95))!important;
  border-color:rgba(220,195,255,.26)!important;
  color:#fff!important;
}

html body .top-actions .wallet-chip:before,
html body a.wallet-chip:before{
  background:linear-gradient(180deg,#d7c1ff,#9b61de,#6a2ca8)!important;
  box-shadow:0 0 14px rgba(118,63,181,.35)!important;
}

html body .language-flag.active{
  background:linear-gradient(180deg,rgba(125,53,200,.36),rgba(64,24,101,.88))!important;
  color:#fff!important;
}

/* ADMIN-SIDEBAR-SCROLL-FIX-20260705
   Zorgt dat alle admin menu knoppen zichtbaar blijven.
   Probleem: oudere dark/purple CSS zette sidebar overflow op hidden.
*/
html body .dashboard-sidebar,
html body .dashboard-sidebar.admin-side,
html body .admin-side,
html body aside.dashboard-sidebar,
html body aside.admin-side{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  max-height:calc(100dvh - 24px)!important;
  min-height:0!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
}

html body .dashboard-sidebar .side-nav,
html body .admin-side .side-nav,
html body aside.dashboard-sidebar nav,
html body aside.admin-side nav{
  padding-bottom:42px!important;
}

html body .dashboard-sidebar a,
html body .admin-side a{
  flex-shrink:0!important;
}

html body .dashboard-sidebar::-webkit-scrollbar,
html body .admin-side::-webkit-scrollbar{
  width:8px;
}

html body .dashboard-sidebar::-webkit-scrollbar-track,
html body .admin-side::-webkit-scrollbar-track{
  background:rgba(255,255,255,.035);
  border-radius:999px;
}

html body .dashboard-sidebar::-webkit-scrollbar-thumb,
html body .admin-side::-webkit-scrollbar-thumb{
  background:rgba(196,71,255,.38);
  border-radius:999px;
}

html body .dashboard-sidebar::-webkit-scrollbar-thumb:hover,
html body .admin-side::-webkit-scrollbar-thumb:hover{
  background:rgba(196,71,255,.58);
}

/* Mobile/tablet: sidebar niet vast afkappen */
@media (max-width:1100px){
  html body .dashboard-sidebar,
  html body .dashboard-sidebar.admin-side,
  html body .admin-side,
  html body aside.dashboard-sidebar,
  html body aside.admin-side{
    position:relative!important;
    top:auto!important;
    max-height:none!important;
    height:auto!important;
    overflow:visible!important;
  }
}

/* DARK-CHECKBOX-FIX-20260705
   Zorgt dat checkboxes/radio buttons en hun labels netjes in dark theme blijven.
*/
:root{
  --csp-check-bg:#111427;
  --csp-check-bg-hover:#171b35;
  --csp-check-border:rgba(166,177,214,.35);
  --csp-check-border-hover:rgba(196,71,255,.65);
  --csp-check-text:#e9edff;
  --csp-check-muted:#aeb8d8;
  --csp-check-accent:#8b5cf6;
  --csp-check-accent-2:#38bdf8;
}

/* Native checkbox/radio reset */
html body input[type="checkbox"],
html body input[type="radio"]{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  min-height:20px!important;
  margin:0 10px 0 0!important;
  display:inline-grid!important;
  place-content:center!important;
  vertical-align:middle!important;
  cursor:pointer!important;
  border:1px solid var(--csp-check-border)!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    var(--csp-check-bg)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(0,0,0,.25)!important;
  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease!important;
}

html body input[type="checkbox"]{
  border-radius:6px!important;
}

html body input[type="radio"]{
  border-radius:999px!important;
}

html body input[type="checkbox"]:hover,
html body input[type="radio"]:hover{
  border-color:var(--csp-check-border-hover)!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    var(--csp-check-bg-hover)!important;
}

html body input[type="checkbox"]:focus-visible,
html body input[type="radio"]:focus-visible{
  outline:none!important;
  border-color:var(--csp-check-accent)!important;
  box-shadow:
    0 0 0 4px rgba(139,92,246,.22),
    0 0 22px rgba(139,92,246,.28)!important;
}

/* Checked checkbox */
html body input[type="checkbox"]:checked{
  border-color:rgba(56,189,248,.8)!important;
  background:
    linear-gradient(135deg, var(--csp-check-accent), var(--csp-check-accent-2))!important;
  box-shadow:
    0 0 0 1px rgba(56,189,248,.25),
    0 8px 22px rgba(139,92,246,.32)!important;
}

html body input[type="checkbox"]:checked::before{
  content:""!important;
  width:11px!important;
  height:8px!important;
  display:block!important;
  background:#fff!important;
  clip-path:polygon(14% 44%, 0 60%, 42% 100%, 100% 16%, 84% 0, 38% 68%)!important;
}

/* Checked radio */
html body input[type="radio"]:checked{
  border-color:rgba(56,189,248,.8)!important;
  background:
    radial-gradient(circle at center, #fff 0 34%, transparent 36%),
    linear-gradient(135deg, var(--csp-check-accent), var(--csp-check-accent-2))!important;
  box-shadow:
    0 0 0 1px rgba(56,189,248,.25),
    0 8px 22px rgba(139,92,246,.32)!important;
}

html body input[type="checkbox"]:disabled,
html body input[type="radio"]:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
}

/* Labels en checkbox-cards donker maken */
html body label:has(input[type="checkbox"]),
html body label:has(input[type="radio"]),
html body .form-check,
html body .form-check-label,
html body .custom-control,
html body .custom-checkbox,
html body .custom-radio,
html body .checkbox-row,
html body .checkbox-card,
html body .option-row,
html body .option-card,
html body .permission-row,
html body .setting-row{
  color:var(--csp-check-text)!important;
}

/* Containers die soms nog wit/licht blijven */
html body label:has(input[type="checkbox"]),
html body label:has(input[type="radio"]),
html body .checkbox-card,
html body .option-card,
html body .permission-row,
html body .setting-row{
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
    rgba(12,15,31,.86)!important;
  border:1px solid rgba(166,177,214,.16)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 12px 34px rgba(0,0,0,.24)!important;
}

/* Mooie spacing voor checkbox labels */
html body label:has(input[type="checkbox"]),
html body label:has(input[type="radio"]){
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}

/* Omdat input zelf al margin heeft */
html body label:has(input[type="checkbox"]) input[type="checkbox"],
html body label:has(input[type="radio"]) input[type="radio"]{
  margin-right:0!important;
}

/* Beschrijving/subtekst in checkbox cards */
html body label:has(input[type="checkbox"]) small,
html body label:has(input[type="radio"]) small,
html body .checkbox-card small,
html body .option-card small,
html body .permission-row small,
html body .setting-row small{
  color:var(--csp-check-muted)!important;
}

/* Bootstrap compatibility */
html body .form-check-input{
  float:none!important;
}

html body .form-check-input:checked{
  background-color:var(--csp-check-accent)!important;
  border-color:rgba(56,189,248,.8)!important;
}

html body .form-check-label{
  cursor:pointer!important;
}

/* Tailwind/utility achtige lichte vlakken corrigeren bij checkbox groepen */
html body .bg-white:has(input[type="checkbox"]),
html body .bg-white:has(input[type="radio"]),
html body .bg-gray-50:has(input[type="checkbox"]),
html body .bg-gray-50:has(input[type="radio"]),
html body .bg-slate-50:has(input[type="checkbox"]),
html body .bg-slate-50:has(input[type="radio"]){
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
    rgba(12,15,31,.90)!important;
  color:var(--csp-check-text)!important;
  border-color:rgba(166,177,214,.16)!important;
}