/* Oostakker.online — Design V2
   Purpose-built clean override loaded AFTER app.css. */

:root{
  --v2-bg:#04111f; --v2-bg2:#071727; --v2-panel:#0a1d31;
  --v2-panel2:#0b2138; --v2-border:rgba(255,255,255,.09);
  --v2-text:#f6f8fb; --v2-muted:#98a8bc; --v2-blue:#1677ff;
  --v2-blue2:#2d91ff; --v2-green:#3bd970; --v2-orange:#ffa100;
  --v2-purple:#b05cff; --v2-pink:#ff3d82; --v2-radius:18px;
}

html{background:var(--v2-bg);}
body{background:var(--v2-bg)!important;color:var(--v2-text)!important;overflow-x:hidden;}
body main{padding-bottom:0!important;background:linear-gradient(180deg,#04111f,#061624 62%,#071828);}
.wrap{max-width:1440px!important;width:min(100% - 48px,1440px)!important;padding:0!important;}
main>.wrap:first-child{padding-top:0!important}
.is-home main>.wrap:first-child:empty{display:none}

/* Alle toevoeg- en bewerkformulieren delen deze kaart. Houd ze op iedere
   desktopbreedte in het midden, zonder de inhoudelijke pagina's te wijzigen. */
.kaart-formulier{
  width:100%;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* HEADER */
.site-header{
  position:sticky!important;top:0!important;z-index:1000!important;
  background:rgba(2,11,20,.94)!important;border-bottom:1px solid rgba(255,255,255,.08)!important;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.header-stack{max-width:1480px!important;width:min(100% - 42px,1480px)!important;margin:auto!important;
  padding:13px 0!important;display:flex!important;align-items:center!important;gap:24px!important;flex-wrap:nowrap!important;}
.brand{display:flex!important;align-items:center!important;gap:12px!important;text-decoration:none!important;flex:0 0 auto}
.brand-logo{height:43px!important;width:auto!important;filter:brightness(0) invert(1);}
.brand-name{font-family:"Space Grotesk",sans-serif!important;color:#fff!important;font-size:20px!important;font-weight:700!important;letter-spacing:-.04em!important}
.brand-hub{font-family:Pacifico,cursive!important;color:#1889ff!important;font-weight:400!important;text-shadow:0 0 20px rgba(24,137,255,.35)}
.main-nav{flex:1!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;min-width:0!important}
.nav-links-primary{display:flex!important;align-items:center!important;gap:5px!important;min-width:0}
.nav-link,.nav-trigger{
  min-height:42px!important;padding:0 13px!important;border:0!important;border-radius:12px!important;background:transparent!important;
  color:#d5dce6!important;display:inline-flex!important;align-items:center!important;gap:8px!important;
  font-size:13px!important;font-weight:600!important;text-decoration:none!important;white-space:nowrap!important;
}
.nav-link:hover,.nav-trigger:hover,.nav-link.nav-actief,.nav-trigger.nav-actief{background:rgba(22,119,255,.14)!important;color:#fff!important}
.nav-link.nav-actief{box-shadow:inset 0 -2px #2588ff}
.nav-svg{display:inline-flex!important;width:17px!important;height:17px!important}
.nav-svg svg{width:17px!important;height:17px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.nav-rechts{display:flex!important;align-items:center!important;gap:8px!important;flex:0 0 auto}
.nav-icoon,.thema-schakelaar{
  width:42px!important;height:42px!important;border-radius:50%!important;border:1px solid var(--v2-border)!important;
  background:rgba(255,255,255,.025)!important;color:#d9e1eb!important;display:grid!important;place-items:center!important;
}
.nav-user{min-height:42px!important;padding:4px 10px 4px 4px!important;border:1px solid var(--v2-border)!important;border-radius:999px!important;background:rgba(255,255,255,.03)!important;color:#fff!important}
.nav-avatar,.nav-avatar-leeg{width:34px!important;height:34px!important}
.nav-dropdown{background:#08192b!important;border:1px solid rgba(255,255,255,.11)!important;box-shadow:0 18px 50px rgba(0,0,0,.4)!important;border-radius:14px!important}
.nav-dropdown a,.nav-dropdown button{color:#e8edf4!important}
.mobiel-hamburger{display:none!important}

/* HERO */
.v2-hero{
  position:relative;isolation:isolate;width:100%;max-width:none;height:clamp(360px,var(--v2-hero-height,420px),560px);margin:0;overflow:hidden;
  border:0;border-radius:0;
  background:var(--v2-hero-bg,#05111f);
  box-shadow:none;
}
.v2-hero::before{
  content:"";position:absolute;inset:0;z-index:-3;
  background-image:var(--v2-hero-image);background-size:100% 100%;background-position:center;
  background-repeat:no-repeat;background-color:var(--v2-hero-bg,#05111f);
}
.v2-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(2,10,18,.05) 0%,rgba(2,10,18,0) 68%,#061624 100%);
}
.v2-hero-shade{
  position:absolute;inset:0;z-index:-2;
  background:linear-gradient(90deg,rgba(1,12,25,var(--v2-hero-overlay,.78)) 0%,rgba(1,12,25,calc(var(--v2-hero-overlay,.78) * .84)) 28%,rgba(1,12,25,calc(var(--v2-hero-overlay,.78) * .42)) 55%,rgba(1,12,25,.03) 82%);
}
.v2-hero-inner{height:100%;min-height:0;display:flex;align-items:center;}
.v2-hero-copy{width:600px;max-width:50vw;padding:48px 0 66px}
.v2-kicker{margin:0 0 22px;color:var(--v2-hero-kicker-color,#3197ff);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.v2-hero h1{margin:0!important;color:var(--v2-hero-title-color,#fff)!important;font-family:"Space Grotesk",sans-serif!important;
  font-size:clamp(36px,var(--v2-hero-title-size,68px),88px)!important;line-height:.99!important;letter-spacing:-.055em!important;font-weight:700!important}
.v2-hero-text{max-width:560px;margin:25px 0 0;color:var(--v2-hero-text-color,#d0d8e3);font-size:clamp(12px,var(--v2-hero-subtitle-size,17px),26px);line-height:1.65}
.v2-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.v2-btn{min-height:54px;padding:0 23px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;gap:11px;text-decoration:none!important;font-weight:700;font-size:15px;border:1px solid transparent;cursor:pointer}
.v2-btn-primary{background:linear-gradient(135deg,#2491ff,#1265ed);color:#fff!important;box-shadow:0 13px 30px rgba(18,101,237,.25)}
.v2-btn-secondary{background:rgba(4,17,31,.48);border-color:rgba(255,255,255,.20);color:#fff!important;backdrop-filter:blur(12px)}
.v2-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}
.v2-hero-edit{position:absolute;z-index:4;top:22px;right:28px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#122033;text-decoration:none}

/* HERO BUILDER */
.hero-builder{max-width:1180px!important;padding-top:34px!important;padding-bottom:60px!important}
.hero-builder-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
.hero-builder-heading h1{margin:3px 0 8px!important;color:#fff!important;font:700 clamp(28px,4vw,44px)/1 "Space Grotesk",sans-serif!important;letter-spacing:-.04em}
.hero-builder-heading>div>p:last-child{max-width:760px;margin:0;color:#98a8bc;line-height:1.6}
.hero-builder-kicker{margin:0;color:#3197ff;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.hero-builder-preview{position:relative;isolation:isolate;height:clamp(360px,var(--preview-height,420px),560px);min-height:0;margin-bottom:18px;border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden;background-color:var(--preview-bg,#05111f);background-image:var(--preview-image);background-size:100% 100%;background-repeat:no-repeat;background-position:center;box-shadow:0 24px 70px rgba(0,0,0,.28)}
.hero-builder-preview-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(1,12,25,var(--preview-overlay,.78)) 0%,rgba(1,12,25,calc(var(--preview-overlay,.78) * .82)) 35%,rgba(1,12,25,.05) 82%)}
.hero-builder-preview-copy{width:min(600px,64%);padding:72px 54px}
.hero-builder-preview-copy p{margin:0 0 16px;color:var(--preview-eyebrow,#3197ff);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.hero-builder-preview-copy h2{margin:0!important;color:var(--preview-title,#fff)!important;font:700 clamp(30px,var(--preview-title-size,68px),76px)/1 "Space Grotesk",sans-serif!important;letter-spacing:-.05em}
.hero-builder-preview-copy div{margin-top:20px;color:var(--preview-subtitle,#d0d8e3);font-size:clamp(12px,var(--preview-subtitle-size,17px),24px);line-height:1.55}
.hero-builder-preview-label{position:absolute;top:14px;right:14px;padding:7px 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(4,17,31,.66);color:#d7e4f2;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(10px)}
.hero-builder-form{display:flex;flex-direction:column;gap:14px}
.hero-builder-panel{border:1px solid rgba(255,255,255,.09);border-radius:16px;background:linear-gradient(145deg,rgba(10,29,49,.96),rgba(7,23,39,.96));padding:20px}
.hero-builder-panel-head{display:flex;align-items:flex-start;gap:13px;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.07)}
.hero-builder-panel-head>span{width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:grid;place-items:center;background:rgba(49,151,255,.12);color:#55a7ff;font-size:11px;font-weight:800}
.hero-builder-panel-head h2{margin:0!important;color:#fff!important;font-size:17px!important}.hero-builder-panel-head p{margin:3px 0 0;color:#8295aa;font-size:12px}
.hero-builder-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hero-builder-wide{grid-column:1/-1}
.hero-builder .veld{margin:0}.hero-builder .veld label{color:#dce5ef;font-size:12px;font-weight:700}.hero-builder .veld-hint{color:#71869c;font-size:11px;line-height:1.5}
.hero-builder input[type="text"],.hero-builder textarea,.hero-builder input[type="file"]{background:#061725!important;color:#eef3f8!important;border-color:rgba(255,255,255,.12)!important}
.hero-builder input[type="range"]{width:100%;max-width:none;accent-color:#2d91ff}
.hero-builder output{color:#58a9ff;font-weight:800}
.hero-builder-colors{grid-template-columns:repeat(4,1fr)}
.hero-color-control{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px}
.hero-color-control input[type="color"]{width:48px;height:42px;padding:3px;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:#061725;cursor:pointer}
.hero-color-control input[type="text"]{width:100%;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase}
.hero-remove-photo{margin-top:12px;padding:11px 12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.025);color:#c4d0dd!important}
.hero-builder-save{position:sticky;bottom:12px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(5,19,32,.92);box-shadow:0 14px 45px rgba(0,0,0,.35);backdrop-filter:blur(16px)}
.hero-builder-save p{margin:0;color:#8194a9;font-size:11px}.hero-builder-save .knoppen-rij{margin:0}

/* SEARCH */
.v2-search-shell{position:relative;max-width:1180px!important;margin-top:-20px!important;z-index:5}
.v2-search-form{display:grid;grid-template-columns:1.05fr 1fr;gap:26px;padding:22px;border-radius:16px;border:1px solid var(--v2-border);background:rgba(8,27,46,.94);box-shadow:0 24px 60px rgba(0,0,0,.24)}
.v2-search-form label{display:block;margin-bottom:9px;color:#fff;font-weight:700;font-size:14px}
.v2-search-input{height:48px;border:1px solid rgba(255,255,255,.12);border-radius:10px;display:flex;overflow:hidden;background:rgba(255,255,255,.02)}
.v2-search-input input{flex:1;min-width:0;border:0!important;background:transparent!important;color:#fff!important;padding:0 16px!important;outline:0!important}
.v2-search-input input::placeholder{color:#6f8197}
.v2-search-input button{width:52px;border:0;background:transparent;color:#d7e2ee;display:grid;place-items:center}
.v2-search-input svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.v2-popular{border-left:1px solid rgba(255,255,255,.08);padding-left:20px;display:flex;flex-direction:column;justify-content:center}
.v2-popular>span{color:#a7b4c4;font-size:12px;margin-bottom:10px}
.v2-chips{display:flex;gap:8px;flex-wrap:wrap}
.v2-chips a{padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.10);color:#cbd5e1!important;text-decoration:none;font-size:12px;background:rgba(255,255,255,.02)}

/* DASHBOARD */
.v2-dashboard{padding:20px 0 0}
.v2-dashboard-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.v2-panel{min-width:0;border:1px solid var(--v2-border);border-radius:15px;background:linear-gradient(145deg,rgba(10,29,49,.96),rgba(7,23,39,.96));overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.18)}
.v2-panel-head{min-height:66px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-between;gap:12px}
.v2-panel-title{display:flex;align-items:center;gap:10px;min-width:0}
.v2-panel-head h2{margin:0!important;color:#fff!important;font-size:16px!important;white-space:nowrap}
.v2-panel-head>a{color:#258dff!important;font-size:12px;text-decoration:none;white-space:nowrap}
.v2-panel-icon,.v2-value-icon{display:grid;place-items:center;background:rgba(255,255,255,.04);border-radius:12px}
.v2-panel-icon{width:38px;height:38px}.v2-panel-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2}
.v2-blue{color:#2c91ff!important;background:rgba(31,126,255,.15)!important}.v2-green{color:#52e579!important;background:rgba(59,217,112,.13)!important}
.v2-orange{color:#ffad14!important;background:rgba(255,161,0,.14)!important}.v2-purple{color:#b66cff!important;background:rgba(176,92,255,.14)!important}.v2-pink{color:#ff4b8a!important;background:rgba(255,61,130,.14)!important}
.v2-panel-body{min-height:188px;padding:8px 16px}
.v2-empty{min-height:170px;display:grid;place-items:center;text-align:center;color:#8999ad;font-size:14px;line-height:1.6}
.v2-empty a{color:#3398ff!important}
.v2-feed-item{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.065);text-decoration:none!important;color:#fff!important}
.v2-feed-item:last-child{border-bottom:0}
.v2-thumb{width:70px;height:58px;border-radius:8px;overflow:hidden;background:#102840;display:grid;place-items:center;font-size:24px;color:#6eaaf5}
.v2-thumb img{width:100%;height:100%;object-fit:cover}
.v2-thumb-tool svg{width:24px;height:24px;fill:none;stroke:#54e87d;stroke-width:1.8}
.v2-feed-copy{min-width:0;display:flex;flex-direction:column}
.v2-feed-copy strong{font-size:13px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-feed-copy small{font-size:11px;color:#a2afbe;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-feed-copy span{margin-top:auto;font-size:10px;color:#7f90a5}
.v2-panel-button{margin:0 14px 14px;height:38px;border:1px solid rgba(255,255,255,.10);border-radius:8px;display:grid;place-items:center;color:#fff!important;text-decoration:none;font-size:12px;font-weight:600}
.v2-event-list{display:flex;flex-direction:column;gap:0}
.v2-event-item{display:grid;grid-template-columns:60px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07);text-decoration:none!important;color:#fff!important}
.v2-event-date{height:60px;border:1px solid rgba(255,255,255,.10);border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.v2-event-date strong{font-size:23px}.v2-event-date small{font-size:10px;color:#b7c3d1}
.v2-event-item>span:last-child{display:flex;flex-direction:column;justify-content:center}
.v2-event-item>span:last-child strong{font-size:13px}.v2-event-item>span:last-child small{font-size:11px;color:#a4b1c0}

/* WALL */
.v2-wall{max-width:1150px!important;margin-top:16px!important;padding:14px!important;border:1px solid var(--v2-border);border-radius:15px;background:linear-gradient(145deg,rgba(10,29,49,.96),rgba(7,23,39,.96))}
.v2-wall-head{display:flex;align-items:center;justify-content:space-between;gap:18px}
.v2-wall-head h2{margin:0!important;color:#fff!important;font-size:18px!important}.v2-wall-head p{max-width:760px;margin:4px 0 0;color:#9cacbe;font-size:12px;line-height:1.5}
.v2-wall-head .v2-btn{min-height:42px;padding:0 16px;font-size:13px;border-radius:10px}
.v2-wall-form{margin-top:12px;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.025)}
.v2-wall-form form{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;align-items:end}
.v2-wall-form .veld{margin:0}.v2-wall-form .veld:nth-of-type(3){grid-column:1/-1}
.v2-wall-form button[type="submit"]{min-height:42px;justify-self:start;padding:0 16px;font-size:13px}
.v2-wall-form input,.v2-wall-form textarea{background:#071827!important;color:#fff!important;border-color:rgba(255,255,255,.12)!important}
.v2-wall-empty{min-height:130px;margin-top:14px;border:1px solid rgba(255,255,255,.07);border-radius:11px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:#91a1b5}
.v2-wall-empty-icon{width:40px;height:40px;border:1px dashed rgba(255,255,255,.35);border-radius:50%;display:grid;place-items:center;margin-bottom:9px;color:#c6d0dd}
.v2-wall-empty strong{color:#dfe6ee}.v2-wall-empty p{margin:4px 0 0;font-size:12px}
.v2-wall-scroll{width:100%;height:clamp(560px,72vh,820px);margin-top:12px;padding:0 7px 0 0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:rgba(82,139,204,.45) transparent;scrollbar-width:thin}
.v2-wall-scroll:focus-visible{outline:1px solid rgba(49,151,255,.45);outline-offset:4px;border-radius:10px}
.v2-wall-scroll::-webkit-scrollbar{width:8px}.v2-wall-scroll::-webkit-scrollbar-track{background:transparent}.v2-wall-scroll::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:999px;background:rgba(82,139,204,.42);background-clip:padding-box}
.v2-wall-grid{display:flex!important;flex-direction:column!important;gap:12px!important;width:min(100%,1120px)!important;max-width:1120px!important;margin:0 auto!important}
.v2-wall .wall-post{min-width:0;min-height:260px;border:1px solid rgba(255,255,255,.08);border-radius:12px;display:grid!important;grid-template-columns:minmax(320px,42%) minmax(0,1fr);grid-template-rows:auto 1fr auto;overflow:hidden;background:#081b2e!important;box-shadow:0 10px 24px rgba(0,0,0,.14)}
.v2-wall .wall-kop{grid-column:2;grid-row:1;min-height:64px;gap:9px;padding:10px 13px;border-color:rgba(255,255,255,.07)}
.v2-wall .wall-kop>div{min-width:0}.v2-wall .wall-kop strong{overflow:hidden;color:#f3f6fa;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.v2-wall .wall-avatar{width:34px;height:34px;border-width:1px;font-size:12px}
.v2-wall .wall-locatie,.v2-wall .wall-tijd{display:inline;margin:2px 7px 0 0;font-size:10px}.v2-wall .wall-locatie{color:#68aefb}.v2-wall .wall-tijd{color:#8394a8}
.v2-wall .wall-foto{grid-column:1;grid-row:1/4;width:100%;height:100%;min-height:260px;max-height:360px!important;object-fit:cover;border-right:1px solid rgba(255,255,255,.07);background:#061421}
.v2-wall .wall-bijschrift{grid-column:2;grid-row:2;display:-webkit-box;min-height:0;margin:0;padding:14px 13px;overflow:hidden;color:#d4dce6;font-size:13px;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:4}
.v2-wall .wall-acties{grid-column:2;grid-row:3;min-height:42px;margin-top:auto;gap:10px;padding:6px 11px;border-color:rgba(255,255,255,.07);color:#8fa0b4;font-size:11px}
.v2-wall .wall-like-knop{padding:4px 6px;color:#9eacbc;font-size:11px}.v2-wall .wall-comments-teller{padding:4px 0}
.v2-wall .wall-verwijder{flex:0 0 auto;margin:0 0 0 auto}
.v2-wall .wall-verwijder-knop{width:32px;height:32px;padding:0;border:1px solid rgba(255,255,255,.08);border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.025);color:#8fa0b4;cursor:pointer;transition:background .16s,border-color .16s,color .16s}
.v2-wall .wall-verwijder-knop:hover,.v2-wall .wall-verwijder-knop:focus-visible{border-color:rgba(255,91,113,.38);background:rgba(255,67,91,.12);color:#ff7285;outline:0}
.v2-wall .wall-verwijder-knop svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wall-scroll-sentinel{min-height:48px;width:100%;border:1px dashed rgba(255,255,255,.10);border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.02);color:#7fa9d7;font:600 12px Inter,sans-serif;cursor:pointer}.wall-scroll-sentinel:hover{border-color:rgba(49,151,255,.35);background:rgba(49,151,255,.07);color:#a8cff8}.wall-scroll-sentinel.is-loading{pointer-events:none;opacity:.7}.wall-scroll-sentinel.is-loading span::after{content:"";display:inline-block;width:12px;height:12px;margin-left:8px;border:2px solid rgba(255,255,255,.25);border-top-color:#55a7ff;border-radius:50%;vertical-align:-2px;animation:wall-spin .7s linear infinite}.wall-scroll-sentinel.has-error{border-color:rgba(255,91,113,.3);color:#ff8796}
.wall-scroll-end{margin:2px 0 0;padding:14px;text-align:center;color:#657991;font-size:11px}
@keyframes wall-spin{to{transform:rotate(360deg)}}

/* VALUE CARDS */
.v2-values{padding:20px 0 44px!important;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.v2-values>a{min-height:90px;border:1px solid rgba(255,255,255,.075);border-radius:14px;background:rgba(9,27,45,.78);display:flex;align-items:center;gap:12px;padding:14px 16px;text-decoration:none!important}
.v2-value-icon{width:42px;height:42px;flex:0 0 auto;font-size:22px}
.v2-values strong{display:block;color:#fff;font-size:13px}.v2-values small{display:block;margin-top:4px;color:#8999ad;font-size:10px;line-height:1.45}

/* FOOTER */
.v2-footer{background:#061522!important;border-top:1px solid rgba(255,255,255,.08)!important;padding:38px 0 18px!important;color:#8fa0b4!important}
.v2-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:50px}
.v2-footer-grid h3{color:#fff!important;font-size:14px!important;margin:0 0 12px!important}
.v2-footer-grid>div:not(:first-child){display:flex;flex-direction:column;align-items:flex-start}
.v2-footer-grid a:not(.brand){color:#94a4b6!important;text-decoration:none;margin:3px 0;font-size:12px}
.v2-footer-brand p{font-size:12px;line-height:1.7}
.v2-footer-logo{margin-bottom:12px}.v2-footer-logo .brand-logo{height:35px!important}.v2-footer-logo .brand-name{font-size:18px!important}
.v2-footer-bottom{margin-top:28px;padding-top:14px!important;border-top:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;font-size:11px}

/* RESPONSIVE */
@media(max-width:1180px){
  .nav-link,.nav-trigger{padding:0 9px!important;font-size:12px!important}.nav-svg{display:none!important}
  .v2-dashboard-grid{grid-template-columns:1fr 1fr}.v2-dashboard-grid .v2-panel:last-child{grid-column:1/-1}
  .v2-wall{max-width:1440px!important}
  .v2-wall-grid{width:100%!important;max-width:none!important}
  .v2-values{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .wrap{width:min(100% - 28px,1440px)!important}
  .header-stack{width:min(100% - 28px,1480px)!important;padding:12px 0!important}
  .brand-logo{height:38px!important}.brand-name{font-size:18px!important}
  .mobiel-hamburger{display:flex!important;width:46px!important;height:46px!important;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid var(--v2-border)!important;border-radius:13px!important;background:#0a1c2e!important}
  .mobiel-hamburger span{width:22px!important;height:2px!important;background:#fff!important;border-radius:3px}
  .main-nav{display:none!important;position:fixed!important;top:71px!important;left:14px!important;right:14px!important;max-height:calc(100dvh - 86px)!important;overflow:auto!important;padding:16px!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:18px!important;background:#061523!important;box-shadow:0 25px 70px rgba(0,0,0,.55)!important;flex-direction:column!important;align-items:stretch!important}
  .main-nav.mobiel-open{display:flex!important}.nav-links-primary,.nav-rechts{width:100%!important;flex-direction:column!important;align-items:stretch!important}
  .nav-link,.nav-trigger{width:100%!important;justify-content:flex-start!important;padding:0 15px!important}.nav-svg{display:inline-flex!important}
  .nav-rechts{padding-top:12px!important;border-top:1px solid rgba(255,255,255,.08)!important;display:grid!important;grid-template-columns:minmax(0,1fr) repeat(2,46px)!important;gap:10px!important}
  .nav-rechts>.nav-punten{grid-column:auto!important;min-width:0!important;max-width:none!important;overflow:hidden!important}
  .nav-rechts>.nav-icoon{justify-self:end!important}
  .nav-groep-user{grid-column:1/-1!important}.nav-user{width:100%!important}
  .v2-hero{width:100%;height:clamp(400px,var(--v2-hero-height,420px),500px);margin:0}.v2-hero::before{background-position:var(--v2-hero-position,70% center)}.v2-hero-inner{height:100%;min-height:0}.v2-hero-copy{max-width:72vw;width:520px}
  .v2-hero h1{font-size:clamp(34px,calc(var(--v2-hero-title-size,68px) * .82),62px)!important}.v2-hero-text{font-size:clamp(12px,calc(var(--v2-hero-subtitle-size,17px) * .94),23px)}
  .v2-search-form{grid-template-columns:1fr}.v2-popular{border-left:0;border-top:1px solid rgba(255,255,255,.08);padding:16px 0 0}
  .v2-dashboard-grid{grid-template-columns:1fr}.v2-dashboard-grid .v2-panel:last-child{grid-column:auto}
  .v2-wall-head{align-items:flex-start;flex-direction:column}
  .v2-wall-head .v2-btn{width:100%}.v2-wall-form form{grid-template-columns:1fr}.v2-wall-form .veld:nth-of-type(3){grid-column:auto}
  .v2-wall-scroll{height:clamp(520px,70vh,760px);padding-right:5px}
  .v2-wall .wall-post{min-height:0;display:flex!important;flex-direction:column}
  .v2-wall .wall-kop{min-height:58px;order:0}
  .v2-wall .wall-foto{order:1;width:100%;height:auto;min-height:0;max-height:none!important;aspect-ratio:16/9;border-right:0;border-top:1px solid rgba(255,255,255,.07)}
  .v2-wall .wall-bijschrift{order:2;min-height:0;padding:10px 12px;-webkit-line-clamp:3}
  .v2-wall .wall-acties{order:3;width:100%}
  .v2-values{grid-template-columns:1fr 1fr}
  .v2-footer-grid{grid-template-columns:1fr 1fr}
  .hero-builder-heading{align-items:flex-start;flex-direction:column}.hero-builder-preview{height:380px;min-height:0}.hero-builder-preview-copy{width:76%;padding:62px 34px}.hero-builder-fields,.hero-builder-colors{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .wrap{width:calc(100% - 24px)!important}
  .brand-name{font-size:16px!important}.brand-logo{height:34px!important}
  .v2-hero{width:100%;height:360px;margin:0;border-radius:0}.v2-hero::before{background-size:cover;background-position:center}
  .v2-hero-shade{background:linear-gradient(90deg,rgba(1,12,25,var(--v2-hero-overlay,.78)) 0%,rgba(1,12,25,calc(var(--v2-hero-overlay,.78) * .78)) 58%,rgba(1,12,25,.12) 100%)}
  .v2-hero-inner{height:100%;min-height:0;align-items:center}.v2-hero-copy{width:100%;max-width:none;padding:25px 0 28px}
  .v2-kicker{font-size:9px;margin-bottom:10px}.v2-hero h1{max-width:330px;font-size:clamp(27px,calc(var(--v2-hero-title-size,68px) * .48),34px)!important;line-height:1.02!important}
  .v2-hero-text{max-width:320px;font-size:clamp(12px,calc(var(--v2-hero-subtitle-size,17px) * .76),15px);line-height:1.4;margin-top:12px}.v2-hero-actions{width:100%;margin-top:16px;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px}
  .v2-hero-actions .v2-btn{min-height:42px;padding:0 11px;font-size:11.5px;gap:7px;white-space:nowrap}
  .v2-hero-actions .v2-btn svg{width:15px;height:15px}
  .v2-hero-edit{top:12px;right:12px;width:34px;height:34px;font-size:13px}
  .v2-btn{min-height:48px;padding:0 18px;font-size:14px}
  .v2-search-shell{margin-top:-10px!important}.v2-search-form{padding:14px}.v2-chips{gap:6px}.v2-chips a{padding:6px 10px;font-size:11px}
  .v2-panel-head h2{font-size:14px!important}.v2-panel-head>a{font-size:11px}.v2-feed-item{grid-template-columns:58px 1fr}.v2-thumb{width:58px;height:52px}
  .v2-values{grid-template-columns:1fr}.v2-wall{padding:10px!important}.v2-wall-scroll{height:68vh;min-height:480px}.v2-wall .wall-foto{aspect-ratio:4/3}.v2-footer-grid{grid-template-columns:1fr;gap:22px}.v2-footer-bottom{flex-direction:column;gap:6px}
  .hero-builder{padding-top:24px!important}.hero-builder-preview{min-height:310px}.hero-builder-preview-copy{width:88%;padding:62px 22px 38px}.hero-builder-preview-copy h2{font-size:clamp(28px,calc(var(--preview-title-size,68px) * .62),46px)!important}.hero-builder-fields,.hero-builder-colors{grid-template-columns:1fr}.hero-builder-wide{grid-column:auto}.hero-builder-save{align-items:stretch;flex-direction:column}.hero-builder-save .knoppen-rij{display:grid;grid-template-columns:1fr 1fr}.hero-builder-save .btn{justify-content:center}
}


/* =========================================================
   MODERN NAV ICONS — FINAL OVERRIDE
   ========================================================= */
@media (min-width:901px){
  #main-nav .nav-links-primary .nav-svg{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:18px!important;
    height:18px!important;
    flex:0 0 18px!important;
    color:#c9d4e2!important;
    opacity:.95!important;
  }

  #main-nav .nav-links-primary .nav-svg svg{
    display:block!important;
    width:18px!important;
    height:18px!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.8!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
  }

  #main-nav .nav-link:hover .nav-svg,
  #main-nav .nav-trigger:hover .nav-svg{
    color:#fff!important;
  }

  #main-nav .nav-link.nav-actief .nav-svg,
  #main-nav .nav-trigger.nav-actief .nav-svg{
    color:#2c91ff!important;
  }

  /* Right-side utility icons */
  #main-nav .nav-rechts .nav-icoon,
  #main-nav .nav-rechts .thema-schakelaar{
    display:grid!important;
    width:42px!important;
    height:42px!important;
    place-items:center!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.025)!important;
    color:#d9e2ec!important;
    transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease!important;
  }

  #main-nav .nav-rechts .nav-icoon:hover,
  #main-nav .nav-rechts .thema-schakelaar:hover{
    background:rgba(255,255,255,.07)!important;
    border-color:rgba(255,255,255,.18)!important;
    color:#fff!important;
    transform:translateY(-1px)!important;
  }

  #main-nav .nav-rechts .nav-svg{
    display:inline-flex!important;
    width:19px!important;
    height:19px!important;
    align-items:center!important;
    justify-content:center!important;
  }

  #main-nav .nav-rechts .nav-svg svg{
    display:block!important;
    width:19px!important;
    height:19px!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.8!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
  }

  #main-nav .nav-badge{
    min-width:16px!important;
    height:16px!important;
    padding:0 4px!important;
    font-size:9px!important;
    top:2px!important;
    right:2px!important;
  }
}

/* Keep the same icon language inside the mobile menu. */
@media (max-width:900px){
  #main-nav .nav-svg{
    display:inline-flex!important;
    width:20px!important;
    height:20px!important;
    flex:0 0 20px!important;
  }

  #main-nav .nav-svg svg{
    display:block!important;
    width:20px!important;
    height:20px!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.8!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
  }
}


/* =========================================================
   DESKTOP NAVBAR — AUTHORITATIVE FINAL RULES
   These rules intentionally come LAST and override every
   earlier navbar breakpoint in app.css/design-v2.css.
   ========================================================= */

/* Desktop / desktop-site mode */
@media (min-width:901px) {
  .site-header {
    position:sticky!important;
    top:0!important;
    z-index:1000!important;
  }

  .header-stack {
    width:min(calc(100% - 32px), 1500px)!important;
    max-width:1500px!important;
    min-height:74px!important;
    margin:0 auto!important;
    padding:10px 0!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:24px!important;
  }

  .brand {
    flex:0 0 auto!important;
    min-width:max-content!important;
  }

  .brand-logo {
    height:44px!important;
    width:auto!important;
  }

  .brand-name {
    font-size:20px!important;
    white-space:nowrap!important;
  }

  /* Never show the hamburger/X on desktop. */
  .mobiel-hamburger,
  .mobiel-hamburger[aria-expanded="true"] {
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  /* Desktop nav is ALWAYS visible, even if JS left mobiel-open on it. */
  #main-nav.main-nav,
  #main-nav.main-nav.mobiel-open {
    position:static!important;
    inset:auto!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    max-height:none!important;
    overflow:visible!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:14px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  #main-nav .nav-links-primary {
    min-width:0!important;
    width:auto!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:2px!important;
    overflow:hidden!important;
  }

  #main-nav .nav-link,
  #main-nav .nav-trigger {
    flex:0 1 auto!important;
    width:auto!important;
    min-width:0!important;
    min-height:42px!important;
    padding:0 10px!important;
    border-radius:10px!important;
    justify-content:center!important;
    font-size:13px!important;
    white-space:nowrap!important;
  }

  #main-nav .nav-link > span:last-child,
  #main-nav .nav-trigger > span:nth-child(2) {
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #main-nav .nav-svg {
    display:inline-flex!important;
    flex:0 0 17px!important;
    width:17px!important;
    height:17px!important;
  }

  #main-nav .nav-svg svg {
    width:17px!important;
    height:17px!important;
  }

  #main-nav .nav-rechts {
    width:auto!important;
    min-width:max-content!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    padding:0 0 0 10px!important;
    margin:0!important;
    border-top:0!important;
    border-left:1px solid rgba(255,255,255,.08)!important;
  }

  #main-nav .nav-rechts .nav-icoon,
  #main-nav .nav-rechts .thema-schakelaar {
    display:grid!important;
    flex:0 0 38px!important;
    width:38px!important;
    height:38px!important;
    border-radius:11px!important;
  }

  #main-nav .nav-groep-user {
    grid-column:auto!important;
    width:auto!important;
    min-width:max-content!important;
    margin:0!important;
  }

  #main-nav .nav-user {
    width:auto!important;
    min-width:78px!important;
    max-width:128px!important;
    min-height:40px!important;
    padding:3px 9px 3px 4px!important;
  }

  #main-nav .nav-avatar,
  #main-nav .nav-avatar-leeg {
    width:32px!important;
    height:32px!important;
    flex:0 0 32px!important;
  }

  #main-nav .nav-dropdown {
    position:absolute!important;
    width:max-content!important;
    min-width:190px!important;
  }
}

/* Compact desktop: keep one clean row, no hamburger. */
@media (min-width:901px) and (max-width:1180px) {
  .header-stack {
    width:min(calc(100% - 18px), 1500px)!important;
    gap:12px!important;
  }

  .brand-logo { height:38px!important; }
  .brand-name { font-size:16px!important; }

  #main-nav.main-nav,
  #main-nav.main-nav.mobiel-open {
    gap:8px!important;
  }

  #main-nav .nav-link,
  #main-nav .nav-trigger {
    padding:0 6px!important;
    font-size:11px!important;
  }

  #main-nav .nav-svg {
    flex-basis:14px!important;
    width:14px!important;
    height:14px!important;
  }

  #main-nav .nav-svg svg {
    width:14px!important;
    height:14px!important;
  }

  #main-nav .nav-rechts {
    gap:4px!important;
    padding-left:6px!important;
  }

  #main-nav .nav-rechts .nav-icoon,
  #main-nav .nav-rechts .thema-schakelaar {
    flex-basis:34px!important;
    width:34px!important;
    height:34px!important;
  }

  #main-nav .nav-user {
    min-width:62px!important;
    max-width:86px!important;
  }

  #main-nav .nav-user-naam {
    display:none!important;
  }
}

/* True mobile only */
@media (max-width:900px) {
  .header-stack {
    width:min(calc(100% - 24px), 1500px)!important;
    min-height:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
  }

  .mobiel-hamburger {
    display:flex!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  #main-nav.main-nav {
    display:none!important;
  }

  #main-nav.main-nav.mobiel-open {
    display:flex!important;
  }
}


/* ===================================================================
   Overgenomen uit app.css, zodat de kop uit een bestand komt.
   =================================================================== */

.thema-icoon-licht {
    display: inline;
}

.thema-icoon-donker {
    display: none;
}

:root[data-thema="donker"] .thema-icoon-licht {
    display: none;
}

:root[data-thema="donker"] .thema-icoon-donker {
    display: inline;
}

.nav-caret {
    font-size: 0.7rem;
    opacity: 0.65;
    margin-left: 0.1rem;
    transition: transform 0.15s;
}

.nav-trigger[aria-expanded="true"] .nav-caret {
    transform: rotate(180deg);
}

.nav-groep {
    position: relative;
}

.nav-dropdown-rechts {
    left: auto; right: 0;
}

.nav-groep.nav-open .nav-dropdown {
    display: flex;
}

.nav-logout-form {
    margin: 0; padding: 0.25rem 0 0; border-top: 1px solid var(--lijn); margin-top: 0.25rem;
}

.nav-caret {
    opacity: .65; font-size: .78rem; margin-left: -2px;
}

.nav-login-link {
    color:#d6dee8; text-decoration:none; font-weight:600; padding:0 8px; font-size:.9rem;
}

.nav-login-link:hover {
    color:#fff;
}

.nav-register-link {
    border-radius:999px; background:linear-gradient(135deg,var(--modern-blue),var(--modern-blue-2)); border:0;
}

@media (max-width: 1180px) {
    .nav-user-name { display:none; }
}

@media (max-width: 900px) {
    .nav-groep { width: 100%; }
    .nav-groep.nav-open .nav-dropdown { display: flex; }
    .nav-groep { width:100%; }
    .nav-login-link, .nav-register-link { grid-column:1 / -1;text-align:center;justify-content:center; }
    #main-nav .nav-groep { width: 100% !important; }
    #main-nav .nav-user-name { display: inline !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; }
    #main-nav .nav-user .nav-caret { margin-left: auto !important; }
    #main-nav .nav-groep-user .nav-dropdown, #main-nav .nav-groep-user .nav-dropdown-rechts { position: static !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 7px 0 0 !important;
        padding: 6px !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        transform: none !important; }
    #main-nav .nav-login-link, #main-nav .nav-register-link { flex: 1 0 100% !important;
        width: 100% !important; }
    #main-nav .nav-groep-user.nav-open > .nav-dropdown, #main-nav .nav-groep-user.nav-open > .nav-dropdown-rechts { display: flex !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 8px 0 2px !important;
        padding: 6px !important;
        transform: none !important;
        z-index: auto !important; }
}

/* ===================================================================
   HERSTEL — drie dingen die uit app.css kwamen en hier misten
   Dit blok staat achteraan, zodat het van de rest wint.
   =================================================================== */

/* --- 1. Het uitklapmenu zet zijn items onder elkaar ---------------
   design-v2.css zette wel display:flex, maar zonder richting.
   Flex staat standaard horizontaal, dus stonden Profiel en Beheer
   naast elkaar.                                                     */

.nav-dropdown {
    display: none;
    flex-direction: column !important;
    gap: 0.1rem;
}

/* Alleen open als de groep .nav-open heeft. Deze selector telt drie
   klassen tegen een van de regel hierboven, dus hij wint altijd,
   waar hij ook in het bestand staat. */

.nav-groep.nav-open > .nav-dropdown,
.nav-groep.nav-open > .nav-dropdown-rechts {
    display: flex;
}

/* --- 2. De links en de afmeldknop krijgen weer opmaak -------------
   Zonder deze regels houdt een <button> zijn standaard browserstijl:
   een wit blok met een randje.                                      */

.nav-dropdown a,
.nav-dropdown button {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: none;
    border-radius: 10px;
    background: none;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.14s, color 0.14s;
}

.nav-dropdown a:hover,
.nav-dropdown button:hover {
    background: rgba(44, 145, 255, 0.14) !important;
    color: #ffffff !important;
    text-decoration: none;
}

.nav-logout-form {
    display: block;
    width: 100%;
    margin: 0;
}

/* --- 3. Van maan en zon is er altijd precies een zichtbaar --------
   Beide iconen dragen ook .nav-svg, en die klasse wordt elders in
   dit bestand op display:inline-flex !important gezet met een
   id-selector. Daarom staat het hier met dezelfde kracht.           */

.thema-icoon-licht,
#main-nav .nav-rechts .thema-icoon-licht {
    display: inline-flex !important;
}

.thema-icoon-donker,
#main-nav .nav-rechts .thema-icoon-donker {
    display: none !important;
}

:root[data-thema="donker"] .thema-icoon-licht,
:root[data-thema="donker"] #main-nav .nav-rechts .thema-icoon-licht {
    display: none !important;
}

:root[data-thema="donker"] .thema-icoon-donker,
:root[data-thema="donker"] #main-nav .nav-rechts .thema-icoon-donker {
    display: inline-flex !important;
}

/* FIX: Ontdek dropdown desktop */
@media (min-width: 901px) {

    #main-nav .nav-links-primary {
        overflow: visible !important;
    }

    #main-nav .nav-groep {
        position: relative !important;
        overflow: visible !important;
    }

    #main-nav .nav-dropdown {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        z-index: 9999 !important;
    }

    #main-nav .nav-groep.nav-open > .nav-dropdown {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Het gebruikersmenu hoort tegen de rechterrand van de profielknop te
       eindigen. Zo kan het niet onder de browser-scrollbalk schuiven. */
    #main-nav .nav-groep-user > .nav-dropdown-rechts {
        left: auto !important;
        right: 0 !important;
        max-width: min(260px, calc(100vw - 24px)) !important;
    }
}


/* ===================================================================
   PUNTEN — overzicht en geschiedenis
   =================================================================== */

.punten-totalen {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}

@media (min-width: 640px) {
    .punten-totalen { grid-template-columns: 1.4fr 1fr 1fr; gap: 1rem; }
}

.punten-vak {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: #0c1826;
}

.punten-vak-groot {
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(44, 145, 255, 0.18), transparent 62%),
        #0c1826;
    border-color: rgba(74, 144, 255, 0.25);
}

.punten-label {
    color: #64789c;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.punten-getal {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: #fff;
}

.punten-getal-klein {
    font-size: 1.5rem;
    font-weight: 750;
    letter-spacing: -0.03em;
    color: #cdd8e6;
}

.punten-eenheid { color: #93a6c4; font-size: 0.85rem; }

/* Wat levert wat op */
.punten-regels { list-style: none; margin: 0; padding: 0; }

.punten-regels li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-block: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.punten-regels li:last-child { border-bottom: none; }
.punten-regel-tekst { flex: 1; min-width: 0; }
.punten-regel-tekst strong { display: block; font-size: 0.94rem; font-weight: 650; }
.punten-regel-tekst p { margin: 0.15rem 0 0; color: #93a6c4; font-size: 0.84rem; line-height: 1.45; }

.punten-badge {
    flex-shrink: 0;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(62, 207, 127, 0.15);
    color: #3ecf7f;
    font-size: 0.88rem;
    font-weight: 750;
}

/* De geschiedenis */
.punten-lijst { list-style: none; margin: 0; padding: 0; }

.punten-rij {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "tekst aantal" "status aantal";
    align-items: center;
    gap: 0.3rem 0.8rem;
    padding-block: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

@media (min-width: 640px) {
    .punten-rij {
        grid-template-columns: 1fr auto auto;
        grid-template-areas: "tekst status aantal";
        gap: 1rem;
    }
}

.punten-rij:last-child { border-bottom: none; }

.punten-rij-tekst { grid-area: tekst; min-width: 0; }
.punten-rij-tekst strong { display: block; font-size: 0.92rem; font-weight: 600; }
.punten-datum { color: #64789c; font-size: 0.8rem; }

.punten-status {
    grid-area: status;
    justify-self: start;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 650;
    white-space: nowrap;
}

.punten-status-verdiend     { background: rgba(62, 207, 127, 0.14); color: #3ecf7f; }
.punten-status-uitgegeven   { background: rgba(44, 123, 245, 0.16); color: #6ba6ff; }
.punten-status-teruggenomen { background: rgba(242, 97, 110, 0.14); color: #f2616e; }
.punten-status-handmatig    { background: rgba(237, 177, 78, 0.16); color: #edb14e; }

.punten-aantal {
    grid-area: aantal;
    justify-self: end;
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.punten-plus { color: #3ecf7f; }
.punten-min  { color: #f2616e; }


/* ===================================================================
   PUNTEN IN DE NAVIGATIEBALK
   Label in blauw, de score in paars ernaast.
   =================================================================== */

.nav-punten {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 38px;
    padding: 0 0.7rem 0 0.85rem;
    border: 1px solid rgba(124, 92, 255, 0.28);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(44, 123, 245, 0.1), rgba(124, 92, 255, 0.12));
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color 0.16s, background 0.16s, transform 0.16s;
}

.nav-punten:hover {
    border-color: rgba(124, 92, 255, 0.5);
    background: linear-gradient(135deg, rgba(44, 123, 245, 0.16), rgba(124, 92, 255, 0.2));
    text-decoration: none;
    transform: translateY(-1px);
}

.nav-punten-label {
    color: #5aa2ff;
    font-size: 0.86rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.nav-punten-score {
    color: #b08cff;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: 0 0 14px rgba(176, 140, 255, 0.45);
}

/* In lichte modus moeten beide kleuren donkerder om leesbaar te blijven */
:root[data-thema="licht"] .nav-punten {
    border-color: rgba(107, 70, 220, 0.28);
    background: linear-gradient(135deg, rgba(21, 80, 200, 0.07), rgba(107, 70, 220, 0.09));
}

:root[data-thema="licht"] .nav-punten-label { color: #0f47b8; }

:root[data-thema="licht"] .nav-punten-score {
    color: #5b32c9;
    text-shadow: none;
}

/* Onder 1500px alleen de score, anders wordt de balk te vol.
   Sinds Shop erbij kwam is er een menu-item meer, dus deze drempel ligt
   hoger dan je zou verwachten. */
@media (max-width: 1750px) {
    .nav-punten { padding-inline: 0.7rem; gap: 0.35rem; }
    .nav-punten-label { display: none; }
}

/* In het mobiele uitschuifmenu staat hij weer voluit */
@media (max-width: 900px) {
    .nav-punten {
        width: 100%;
        height: auto;
        justify-content: space-between;
        padding: 0.7rem 0.9rem;
        border-radius: 12px;
    }
    .nav-punten-label { display: inline; }
}


/* ===================================================================
   COMMUNITYSHOP
   =================================================================== */

.shop-kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.3rem;
}

.shop-saldo {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    padding: 0.7rem 1.1rem;
    border: 1px solid rgba(124, 92, 255, 0.28);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(44, 123, 245, 0.1), rgba(124, 92, 255, 0.12));
    text-decoration: none;
    flex-shrink: 0;
}

.shop-saldo:hover { border-color: rgba(124, 92, 255, 0.5); text-decoration: none; }

.shop-saldo-label {
    color: #5aa2ff;
    font-size: 0.74rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.shop-saldo-getal {
    color: #b08cff;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

:root[data-thema="licht"] .shop-saldo-label { color: #0f47b8; }
:root[data-thema="licht"] .shop-saldo-getal { color: #5b32c9; }

/* Het raster met artikelen */
.shop-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 560px) {
    .shop-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 980px) {
    .shop-grid { grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
}

.shop-kaart {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: #0c1826;
    overflow: hidden;
    transition: border-color 0.16s, transform 0.16s;
}

.shop-kaart:hover {
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-2px);
}

.shop-beeld {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #071120;
    overflow: hidden;
}

.shop-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }

.shop-beeld-leeg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2.6rem;
    opacity: 0.5;
}

.shop-type {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    background: rgba(4, 12, 26, 0.82);
    backdrop-filter: blur(8px);
    color: #cdd8e6;
    font-size: 0.72rem;
    font-weight: 650;
}

.shop-inhoud {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1rem 1.1rem 1.1rem;
}

.shop-naam {
    margin: 0 0 0.3rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.shop-omschrijving {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 0.8rem;
    color: #93a6c4;
    font-size: 0.85rem;
    line-height: 1.5;
}

.shop-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-top: auto;
    margin-bottom: 0.85rem;
}

.shop-prijs {
    color: #b08cff;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

:root[data-thema="licht"] .shop-prijs { color: #5b32c9; }

.shop-voorraad {
    color: #64789c;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.shop-voorraad-laag { color: #edb14e; }

.shop-actie form { margin: 0; }

.shop-limiet {
    margin: 0.45rem 0 0;
    color: #64789c;
    font-size: 0.76rem;
    text-align: center;
}

.shop-voet { margin-top: 1.4rem; text-align: center; }

/* ===================================================================
   BESTELLINGEN
   =================================================================== */

.bestel-lijst { list-style: none; margin: 0; padding: 0; }

.bestel-rij {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "tekst punten" "status punten";
    align-items: center;
    gap: 0.35rem 0.8rem;
    padding-block: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

@media (min-width: 640px) {
    .bestel-rij {
        grid-template-columns: 1fr auto auto;
        grid-template-areas: "tekst status punten";
        gap: 1rem;
    }
}

.bestel-rij:last-child { border-bottom: none; }

.bestel-tekst { grid-area: tekst; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.bestel-tekst strong { font-size: 0.94rem; font-weight: 650; }
.bestel-datum { color: #64789c; font-size: 0.8rem; }

.bestel-code code {
    padding: 0.1rem 0.4rem;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.07);
    font-size: 0.82rem;
    color: #6ba6ff;
}

.bestel-opmerking { color: #93a6c4; font-size: 0.82rem; }

.bestel-status {
    grid-area: status;
    justify-self: start;
    padding: 0.18rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 650;
    white-space: nowrap;
}

.bestel-status-nieuw          { background: rgba(44, 123, 245, 0.16); color: #6ba6ff; }
.bestel-status-in_behandeling { background: rgba(237, 177, 78, 0.16); color: #edb14e; }
.bestel-status-verzonden      { background: rgba(124, 92, 255, 0.18); color: #b08cff; }
.bestel-status-voltooid       { background: rgba(62, 207, 127, 0.14); color: #3ecf7f; }
.bestel-status-geannuleerd    { background: rgba(242, 97, 110, 0.14); color: #f2616e; }

.bestel-punten {
    grid-area: punten;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #93a6c4;
    font-size: 1rem;
    font-weight: 750;
    white-space: nowrap;
}

.bestel-terugbetaald {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(62, 207, 127, 0.14);
    color: #3ecf7f;
    font-size: 0.7rem;
    font-weight: 650;
}


/* ===================================================================
   REVIEWS-LINK IN DE NAVIGATIEBALK
   Warm geel accent tussen De Lounge en Shop.
   =================================================================== */

.nav-link.nav-link-reviews,
#main-nav .nav-link.nav-link-reviews .nav-svg {
    color: #f8c84c !important;
}

.nav-link.nav-link-reviews:hover,
.nav-link.nav-link-reviews.nav-actief {
    color: #fff6cf !important;
    background: rgba(248, 200, 76, 0.16) !important;
}

#main-nav .nav-link.nav-link-reviews:hover .nav-svg,
#main-nav .nav-link.nav-link-reviews.nav-actief .nav-svg {
    color: #ffe07a !important;
}

:root[data-thema="licht"] .nav-link.nav-link-reviews,
:root[data-thema="licht"] #main-nav .nav-link.nav-link-reviews .nav-svg {
    color: #8a5a00 !important;
}

:root[data-thema="licht"] .nav-link.nav-link-reviews:hover,
:root[data-thema="licht"] .nav-link.nav-link-reviews.nav-actief {
    color: #684100 !important;
    background: rgba(222, 160, 0, 0.13) !important;
}

/* ===================================================================
   SHOP-LINK IN DE NAVIGATIEBALK
   Zelfde paars als de puntenscore, zodat de twee bij elkaar horen.

   De bestaande navbar-regels zetten kleur met !important, en de
   icoonkleur met een id-selector. Deze regels gebruiken daarom dezelfde
   kracht, en staan achteraan zodat ze bij gelijke sterkte winnen.
   =================================================================== */

.nav-link.nav-link-shop {
    color: #b08cff !important;
}

/* Het icoon erft de kleur van de link */
#main-nav .nav-link.nav-link-shop .nav-svg,
.nav-link.nav-link-shop .nav-svg {
    color: #b08cff !important;
}

.nav-link.nav-link-shop:hover,
.nav-link.nav-link-shop.nav-actief {
    color: #ffffff !important;
    background: rgba(124, 92, 255, 0.2) !important;
}

#main-nav .nav-link.nav-link-shop:hover .nav-svg,
#main-nav .nav-link.nav-link-shop.nav-actief .nav-svg,
.nav-link.nav-link-shop:hover .nav-svg,
.nav-link.nav-link-shop.nav-actief .nav-svg {
    color: #d9c4ff !important;
}

/* In lichte modus donkerder, anders onleesbaar op wit */
:root[data-thema="licht"] .nav-link.nav-link-shop {
    color: #5b32c9 !important;
}

:root[data-thema="licht"] #main-nav .nav-link.nav-link-shop .nav-svg,
:root[data-thema="licht"] .nav-link.nav-link-shop .nav-svg {
    color: #5b32c9 !important;
}

:root[data-thema="licht"] .nav-link.nav-link-shop:hover,
:root[data-thema="licht"] .nav-link.nav-link-shop.nav-actief {
    color: #3d1f96 !important;
    background: rgba(107, 70, 220, 0.12) !important;
}

:root[data-thema="licht"] #main-nav .nav-link.nav-link-shop:hover .nav-svg,
:root[data-thema="licht"] #main-nav .nav-link.nav-link-shop.nav-actief .nav-svg,
:root[data-thema="licht"] .nav-link.nav-link-shop:hover .nav-svg,
:root[data-thema="licht"] .nav-link.nav-link-shop.nav-actief .nav-svg {
    color: #3d1f96 !important;
}


/* ===================================================================
   RUIMTE IN DE BALK OP KRAPPE SCHERMEN

   Houd de moderne iconen op elke desktopbreedte zichtbaar. Op compactere
   desktops blijven de labels toegankelijk voor schermlezers, maar tonen we
   visueel alleen de iconen zodat de navigatie niet tegen de acties rechts
   aandrukt.
   =================================================================== */

@media (min-width: 901px) and (max-width: 1750px) {
    .main-nav .nav-links-primary .nav-link .nav-svg,
    #main-nav .nav-links-primary .nav-link .nav-svg,
    #main-nav .nav-links-primary .nav-trigger .nav-svg {
        display: inline-flex !important;
    }

    .nav-link, .nav-trigger {
        padding: 0 7px !important;
        font-size: 0.82rem !important;
        gap: 0.35rem !important;
    }
}

@media (min-width: 901px) and (max-width: 1320px) {
    #main-nav .nav-links-primary > .nav-link,
    #main-nav .nav-links-primary > .nav-groep > .nav-trigger {
        width: 36px !important;
        min-width: 36px !important;
        padding-inline: 0 !important;
        gap: 0 !important;
    }

    #main-nav .nav-links-primary > .nav-link > span:last-child,
    #main-nav .nav-links-primary > .nav-groep > .nav-trigger > span:nth-child(2) {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    #main-nav .nav-links-primary .nav-trigger .nav-caret {
        display: none !important;
    }
}

@media (max-width: 360px) {
    #main-nav .nav-rechts > .nav-punten {
        padding: 0.65rem 0.45rem !important;
        gap: 0.25rem !important;
    }

    #main-nav .nav-punten-label { font-size: 0.75rem !important; }
    #main-nav .nav-punten-score { font-size: 0.82rem !important; }
}

/* Zoekertje-detail: bewust compacter dan de brede V2-pagina's. */
.wrap.listing-detail-pagina {
    width: min(100% - 48px, 960px) !important;
    max-width: 960px !important;
}

@media (max-width: 820px) {
    .wrap.listing-detail-pagina {
        width: min(100% - 28px, 960px) !important;
    }
}

@media (max-width: 520px) {
    .wrap.listing-detail-pagina {
        width: calc(100% - 24px) !important;
    }
}

/* Online gebruikers */
.nav-online {
    min-height: 38px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgba(59, 217, 112, 0.26);
    border-radius: 999px;
    background: rgba(59, 217, 112, 0.08);
    color: #dffbea !important;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.nav-online:hover,
.nav-online.nav-actief {
    border-color: rgba(85, 223, 145, 0.5);
    background: rgba(59, 217, 112, 0.15);
    color: #fff !important;
    transform: translateY(-1px);
}

.nav-online-stip,
.online-stip {
    width: 8px;
    height: 8px;
    display: inline-block;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #3bd970;
    box-shadow: 0 0 0 3px rgba(59, 217, 112, 0.13), 0 0 12px rgba(59, 217, 112, 0.5);
}

.nav-online-stip {animation: online-pulse 2.2s ease-in-out infinite;}

@keyframes online-pulse {
    50% {box-shadow: 0 0 0 5px rgba(59, 217, 112, 0.06), 0 0 15px rgba(59, 217, 112, 0.58);}
}

.wrap.online-pagina {width: min(100% - 48px, 960px) !important; max-width: 960px !important; padding-top: 34px !important; padding-bottom: 70px !important;}
.online-pagina-kop {display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px;}
.online-pagina-kop h1 {margin: 4px 0 8px !important; color: #fff !important; font-size: clamp(30px, 5vw, 46px) !important;}
.online-pagina-kop > div > p:last-child {margin: 0; color: var(--v2-muted);}
.online-eyebrow {display: flex; align-items: center; gap: 9px; margin: 0; color: #55df91; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;}
.online-totaal {min-width: 116px; padding: 12px 16px; border: 1px solid rgba(59,217,112,.22); border-radius: 14px; background: rgba(59,217,112,.08); color: #bfeecf; text-align: center;}
.online-totaal strong {display: block; color: #55df91; font: 700 24px/1 "Space Grotesk", sans-serif;}
.online-gebruikers-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;}
.online-gebruiker {position: relative; display: flex; align-items: center; gap: 13px; max-width: none; margin: 0; padding: 16px; border-radius: 16px; color: inherit !important; text-decoration: none !important; transition: border-color .18s ease, transform .18s ease, background .18s ease;}
.online-gebruiker:hover {border-color: rgba(45,145,255,.42); background: #1d2939; transform: translateY(-2px);}
.online-gebruiker:hover h2 {color: #66b4ff !important;}
.online-gebruiker h2 {margin: 0 0 2px !important; color: #fff !important; font-size: 16px !important;}
.online-gebruiker p {margin: 0; color: #55df91; font-size: 12px;}
.online-avatar-wrap {position: relative; flex: 0 0 auto;}
.online-avatar {width: 50px; height: 50px; display: block; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; object-fit: cover;}
.online-avatar-leeg {display: grid; place-items: center; background: #0d2c48; color: #62adff; font: 700 18px "Space Grotesk", sans-serif;}
.online-avatar-stip {position: absolute; right: 0; bottom: 1px; width: 12px; height: 12px; border: 2px solid #1a2331; border-radius: 50%; background: #3bd970;}
.online-jij {margin-left: auto; padding: 3px 8px; border-radius: 999px; background: rgba(45,145,255,.12); color: #6eb4ff; font-size: 10px; font-weight: 800; text-transform: uppercase;}
.online-leeg {max-width: none; padding: 42px; text-align: center;}
.online-leeg .online-stip {margin-bottom: 16px;}
.online-leeg h2 {color: #fff !important;}
.online-leeg p {margin-bottom: 0; color: var(--v2-muted);}

@media (min-width: 901px) and (max-width: 1250px) {
    .nav-online-label {display: none;}
    .nav-online {padding-inline: 9px;}
}

@media (max-width: 900px) {
    #main-nav .nav-rechts {grid-template-columns: minmax(0,1fr) minmax(0,1fr) 46px 46px !important;}
    #main-nav .nav-rechts > .nav-online {width: 100%; min-width: 0; min-height: 44px;}
    #main-nav .nav-rechts > .nav-punten {grid-column: auto !important;}
    .wrap.online-pagina {width: min(100% - 28px, 960px) !important; padding-top: 24px !important;}
}

@media (max-width: 560px) {
    .online-pagina-kop {align-items: stretch; flex-direction: column; gap: 14px;}
    .online-totaal {align-self: flex-start; min-width: 104px;}
    .online-gebruikers-grid {grid-template-columns: 1fr;}
}

@media (prefers-reduced-motion: reduce) {
    .nav-online-stip {animation: none;}
}

/* Openbaar buurtprofiel — uitsluitend niet-gevoelige gegevens. */
.wrap.publiek-profiel-pagina {width: min(100% - 48px, 820px) !important; max-width: 820px !important; padding-top: 28px !important; padding-bottom: 70px !important;}
.publiek-profiel-terug {margin: 0 0 15px;}
.publiek-profiel-terug a {color: #89bdf6; font-size: 12px; font-weight: 700; text-decoration: none;}
.publiek-profiel-kaart {overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: linear-gradient(145deg,#0b1d30,#101f32); box-shadow: 0 24px 70px rgba(0,0,0,.24);}
.publiek-profiel-header {display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 22px; padding: clamp(24px,5vw,42px); border-bottom: 1px solid rgba(255,255,255,.08); background: radial-gradient(circle at 5% 0%,rgba(45,145,255,.16),transparent 42%);}
.publiek-profiel-avatar-wrap {position: relative;}
.publiek-profiel-avatar {width: clamp(96px,15vw,132px); height: clamp(96px,15vw,132px); display: block; border: 3px solid #3095ff; border-radius: 50%; object-fit: cover; box-shadow: 0 12px 35px rgba(0,0,0,.28),0 0 0 7px rgba(45,145,255,.08);}
.publiek-profiel-avatar-leeg {display: grid; place-items: center; background: #0b2b48; color: #6db6ff; font: 700 clamp(32px,7vw,48px) "Space Grotesk",sans-serif;}
.publiek-profiel-identiteit {min-width: 0;}
.publiek-profiel-label {margin: 0 0 7px; color: #55a7ff; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;}
.publiek-profiel-identiteit h1 {margin: 0 0 10px !important; color: #fff !important; font-size: clamp(28px,5vw,42px) !important; overflow-wrap: anywhere;}
.publiek-profiel-geslacht {display: inline-flex; padding: 5px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.04); color: #c9d5e2; font-size: 11px; font-weight: 700;}
.publiek-profiel-punten {min-width: 104px; padding: 14px 16px; border: 1px solid rgba(176,92,255,.26); border-radius: 15px; background: linear-gradient(145deg,rgba(176,92,255,.13),rgba(45,145,255,.08)); text-align: center;}
.publiek-profiel-punten span {display: block; margin-bottom: 5px; color: #b9a6d4; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;}
.publiek-profiel-punten strong {display: block; color: #c38aff; font: 700 clamp(24px,4vw,34px)/1 "Space Grotesk",sans-serif;}
.publiek-profiel-bio {padding: clamp(24px,5vw,42px);}
.publiek-profiel-bio h2 {margin: 0 0 14px !important; color: #fff !important; font-size: 20px !important;}
.publiek-profiel-bio > div {color: #d3dce7; line-height: 1.75; overflow-wrap: anywhere;}
.publiek-profiel-leeg {margin: 0; color: #8092a7; font-style: italic;}
.publiek-profiel-acties {padding: 0 clamp(24px,5vw,42px) clamp(24px,5vw,42px);}
.publiek-profiel-bericht {padding: clamp(24px,5vw,42px); border-top: 1px solid rgba(255,255,255,.08); background: rgba(3,14,25,.22);}
.publiek-profiel-bericht h2 {margin: 0 0 8px !important; color: #fff !important; font-size: 20px !important;}
.publiek-profiel-bericht > p:not(.publiek-profiel-label) {margin: 0 0 18px; color: #aebdcd; line-height: 1.55;}
.publiek-profiel-bericht-formulier {display: grid; gap: 10px; margin-top: 16px;}
.publiek-profiel-bericht-formulier label {color: #dbe6f2; font-size: 12px; font-weight: 800;}
.publiek-profiel-bericht-formulier textarea {min-height: 110px; resize: vertical;}
.publiek-profiel-bericht-formulier .btn {justify-self: start;}

/* Dezelfde herkenbare profiellink voor namen in alle publieke onderdelen. */
.user-profile-link {color: inherit; font-weight: inherit; text-decoration: underline; text-decoration-color: rgba(83,167,255,.42); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .16s ease,text-decoration-color .16s ease;}
.user-profile-link:hover,.user-profile-link:focus-visible {color: #63adff; text-decoration-color: currentColor;}
.kaart-detail-link {display: inline-block; margin-top: 8px; color: #63adff; font-size: 12px; font-weight: 800; text-decoration: none;}
.artikel-kaart > a {display: block;}
.artikel-inhoud h3 a {color: inherit; text-decoration: none;}
.artikel-inhoud h3 a:hover,.artikel-inhoud h3 a:focus-visible {color: #63adff;}
.gesprek-open-link {color: inherit; text-decoration: none;}
.gesprek-open-link:hover,.gesprek-open-link:focus-visible {color: #63adff;}

@media (max-width: 620px) {
    .wrap.publiek-profiel-pagina {width: calc(100% - 24px) !important; padding-top: 20px !important;}
    .publiek-profiel-header {grid-template-columns: auto minmax(0,1fr); gap: 17px;}
    .publiek-profiel-punten {grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; text-align: left;}
    .publiek-profiel-punten span {margin: 0;}
    .publiek-profiel-bericht-formulier .btn {width: 100%;}
}


/* Compacte paginering zonder afhankelijkheid van Tailwind. */
.paginering { margin-top: 1.25rem !important; }
.paginering-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: rgba(10,29,49,.72); }
.paginering-info { margin: 0; color: #8fa2b7; font-size: 0.78rem; white-space: nowrap; }
.paginering-info strong { color: #dce6f1; }
.paginering-knoppen { display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; flex-wrap: wrap; }
.paginering-knop { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0.45rem 0.7rem; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(255,255,255,.035); color: #c9d7e6; font-size: 0.78rem; font-weight: 750; line-height: 1; text-decoration: none; transition: background .15s,border-color .15s,color .15s,transform .15s; }
a.paginering-knop:hover,a.paginering-knop:focus-visible { border-color: rgba(45,145,255,.55); background: rgba(45,145,255,.15); color: #fff; text-decoration: none; transform: translateY(-1px); }
.paginering-actief { border-color: #2d91ff; background: #2d91ff; color: #061523; }
.paginering-uitgeschakeld { opacity: .38; cursor: not-allowed; }
.paginering-puntjes { padding: 0 0.2rem; color: #6f8297; }
.paginering-nav-eenvoudig { justify-content: flex-end; }

:root[data-thema="licht"] .paginering-nav { border-color: #d9e2ec; background: #fff; }
:root[data-thema="licht"] .paginering-info { color: #60748a; }
:root[data-thema="licht"] .paginering-info strong { color: #17283b; }
:root[data-thema="licht"] .paginering-knop { border-color: #d8e1eb; background: #f7f9fc; color: #34516f; }
:root[data-thema="licht"] .paginering-actief { border-color: #1677ff; background: #1677ff; color: #fff; }

@media (max-width: 620px) {
    .paginering-nav { align-items: stretch; flex-direction: column; padding: 0.75rem; }
    .paginering-info { text-align: center; white-space: normal; }
    .paginering-knoppen { justify-content: center; }
    .paginering-knop { min-width: 34px; min-height: 34px; padding: 0.42rem 0.58rem; }
}

/* Extra vangnet voor eventueel gecachete standaardpaginering. */
.paginering svg { width: 20px !important; height: 20px !important; }

/* ===================================================================
   BEHEERSCHERMEN
   =================================================================== */

.beheer-onderdelen { margin-bottom: 1rem; }

.beheer-zoek {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.beheer-zoek input[type="search"] {
    flex: 1 1 260px;
    width: auto;
    min-height: 40px;
}

.tabel-scroll { overflow-x: auto; margin-inline: -0.4rem; padding-inline: 0.4rem; }

.beheer-status {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 650;
    white-space: nowrap;
}

.beheer-ok    { background: rgba(62, 207, 127, 0.14); color: #3ecf7f; }
.beheer-wacht { background: rgba(237, 177, 78, 0.16); color: #edb14e; }
.beheer-uit   { background: rgba(255, 255, 255, 0.08); color: #93a6c4; }

.beheer-leeg { color: #64789c; font-size: 0.82rem; }

.beheer-acties {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    align-items: center;
}

.beheer-acties form { margin: 0; }

/* Puntenacties */
.regel-kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.regel-kop h2 { margin: 0 0 0.2rem; font-size: 1.08rem; font-weight: 700; }

.regel-sleutel { margin: 0; color: #64789c; font-size: 0.82rem; }

.regel-sleutel code {
    padding: 0.08rem 0.4rem;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.07);
    color: #93a6c4;
}

.regel-verwijder { margin-top: 0.7rem; }

/* Bestellingen in het beheer */
.bestel-beheer {
    padding: 1.1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.bestel-beheer:last-of-type { border-bottom: none; }

.bestel-beheer-kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}

.bestel-beheer-kop strong { font-size: 0.98rem; }

.bestel-beheer-meta {
    margin: 0.15rem 0 0;
    color: #64789c;
    font-size: 0.82rem;
}

.bestel-beheer-form .veld { margin-bottom: 0.7rem; }

@media (min-width: 760px) {
    .bestel-beheer-form {
        display: grid;
        grid-template-columns: 180px 1fr 1fr auto;
        gap: 0.7rem;
        align-items: end;
    }
    .bestel-beheer-form .veld { margin-bottom: 0; }
    .bestel-beheer-form .knoppen-rij { margin: 0; }
}

.logboek-datum { white-space: nowrap; color: #93a6c4; font-size: 0.85rem; }

.shop-prijs-cel { color: #b08cff; font-weight: 750; white-space: nowrap; }
:root[data-thema="licht"] .shop-prijs-cel { color: #5b32c9; }

.shop-voorbeeld {
    display: block;
    width: 130px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0.6rem;
}

.beheer-tegels {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.6rem;
}

.beheer-tegel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.03);
    color: #cdd8e6;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.beheer-tegel:hover {
    border-color: rgba(74, 144, 255, 0.4);
    background: rgba(44, 123, 245, 0.1);
    color: #fff;
    text-decoration: none;
}

.beheer-tegel-punten { color: #b08cff; }

.beheer-tegel-punten:hover {
    border-color: rgba(124, 92, 255, 0.45);
    background: rgba(124, 92, 255, 0.12);
    color: #c4a8ff;
}

:root[data-thema="licht"] .beheer-tegel-punten { color: #5b32c9; }


/* ===================================================================
   BABBELBOX — MULTIPLAYER DAMMEN
   =================================================================== */

.babbel-start-grid {
    display: grid;
    grid-template-columns: minmax(0, 720px) minmax(290px, 370px);
    align-items: start;
    gap: 1.5rem;
}

.babbel-start-grid[hidden] { display: none !important; }

.babbel-start-grid-zonder-spel {
    grid-template-columns: minmax(0, 820px);
}

.babbelbox-pagina-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.babbelbox-pagina-kop .pagina-titel { margin-bottom: 0; }

.babbelbox-edit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(110, 170, 255, 0.3);
    border-radius: 999px;
    background: rgba(49, 151, 255, 0.1);
    color: #8fc2ff;
    font-size: 0.78rem;
    font-weight: 750;
    text-decoration: none;
}

.babbelbox-edit-link:hover {
    border-color: rgba(110, 170, 255, 0.6);
    background: rgba(49, 151, 255, 0.18);
    color: #fff;
    text-decoration: none;
}

.babbel-bewerkbare-tekst { white-space: pre-line; }

.babbel-start-kaart {
    width: 100%;
    max-width: none;
    margin: 0;
}

.dam-intro {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1.15rem;
    border: 1px solid rgba(124, 92, 255, 0.28);
    border-radius: 16px;
    background:
        radial-gradient(circle at 0 0, rgba(44, 145, 255, 0.16), transparent 45%),
        linear-gradient(135deg, rgba(44, 123, 245, 0.08), rgba(124, 92, 255, 0.12));
}

.dam-intro-los {
    grid-template-columns: 1fr;
    align-content: start;
    margin: 0;
    padding: 1.5rem;
}

.dam-intro-los .dam-intro-icoon { margin-bottom: 0.25rem; }
.dam-intro-los h3 { font-size: 1.18rem; }
.dam-intro-los .btn { width: 100%; justify-content: center; }

/* De Lounge: Dammen staat los van de Babbelbox op een eigen Spellen-pagina. */
.spellen-pagina { max-width: 1180px !important; padding-bottom: 4rem !important; }

.spellen-pagina-kop {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.spellen-pagina-kop .pagina-titel { margin: 0 0 0.45rem; }
.spellen-pagina-kop > div > p:last-child { max-width: 670px; margin: 0; color: #91a5ba; line-height: 1.6; }
.spellen-kicker { margin: 0 0 0.35rem; color: #63adff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.spellen-grid { display: grid; grid-template-columns: minmax(280px, 430px); gap: 1.25rem; }
.spellen-grid[hidden] { display: none !important; }
.spellen-tegel { min-height: 330px; }
.spellen-tegel .dam-intro-tekst { display: flex; flex: 1; flex-direction: column; }
.spellen-tegel h2 { margin: 0.35rem 0 0.7rem; color: #f4f7fa; font-size: 1.35rem; }
.spellen-meta { margin-top: auto !important; padding-top: 1rem; color: #7690aa !important; font-size: 0.76rem; font-weight: 650; }

.babbel-editor { max-width: 1180px !important; padding-bottom: 4rem !important; }

.babbel-editor-preview {
    position: relative;
    margin-bottom: 1.2rem;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: #061524;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
}

.babbel-editor-preview > h2 {
    margin: 0 0 1rem;
    color: #fff;
}

.babbel-editor-preview [data-preview="chat_intro"],
.babbel-editor-preview [data-preview="dam_intro"] { white-space: pre-line; }

.babbel-editor-preview .btn {
    margin-top: 0.85rem;
    pointer-events: none;
}

.dam-intro-icoon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: #081b2e;
    color: #b995ff;
    font-size: 2rem;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.dam-intro-kicker,
.dam-kicker,
.dam-info-label,
.dam-speler-label {
    display: block;
    color: #6eaaff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dam-intro h3 {
    margin: 0.15rem 0 0.25rem;
    color: #fff;
    font-size: 1rem;
}

.dam-intro p {
    margin: 0;
    color: #93a6bc;
    font-size: 0.82rem;
    line-height: 1.5;
}

.dam-feedback {
    min-height: 1.1em;
    margin-top: 0.35rem !important;
    color: #ff8291 !important;
    font-weight: 650;
}

.dam-wachtkaart {
    text-align: center;
}

.dam-wacht-animatie {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(300px, 80%);
    margin: 0 auto 1.2rem;
}

.dam-mini-steen {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border: 4px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28), inset 0 0 0 4px rgba(255, 255, 255, 0.08);
    animation: dam-wachten 1.4s ease-in-out infinite alternate;
}

.dam-mini-wit { background: linear-gradient(145deg, #fff, #bfcddd); }
.dam-mini-zwart { background: linear-gradient(145deg, #25384c, #07111d); animation-delay: -0.7s; }

.dam-zoeklijn {
    height: 2px;
    flex: 1;
    background: linear-gradient(90deg, rgba(110, 170, 255, 0.15), #6eaaff, rgba(176, 140, 255, 0.15));
    animation: dam-zoeklijn 1.4s ease-in-out infinite;
}

@keyframes dam-wachten {
    to { transform: translateY(-7px); }
}

@keyframes dam-zoeklijn {
    50% { opacity: 0.35; }
}

.dam-kaart {
    width: 100%;
    max-width: 1180px !important;
    padding: 1.25rem !important;
    overflow: hidden;
}

.dam-game-kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dam-game-kop h2 {
    margin: 0.2rem 0 0 !important;
    color: #fff !important;
    font-size: 1.35rem !important;
}

.dam-spel-id {
    margin: 0.25rem 0 0;
    color: #6f8299;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.72rem;
}

.dam-game-acties {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.dam-verbinding {
    padding: 0.4rem 0.65rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
}

.dam-online { background: rgba(62, 207, 127, 0.13); color: #55df91; }
.dam-offline { background: rgba(237, 177, 78, 0.14); color: #f0bc65; }

.dam-spelers {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

.dam-speler {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.025);
}

.dam-speler-tegenstander {
    justify-content: flex-end;
    text-align: right;
}

.dam-speler > div { min-width: 0; }
.dam-speler strong { display: block; overflow: hidden; color: #f4f7fa; text-overflow: ellipsis; white-space: nowrap; }
.dam-speler small { display: block; margin-top: 0.1rem; color: #8295aa; font-size: 0.72rem; }

.dam-speler-steen {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 3px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25), inset 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.dam-beurt {
    min-width: 150px;
    padding: 0.6rem 0.85rem;
    border: 1px solid rgba(49, 151, 255, 0.26);
    border-radius: 999px;
    background: rgba(49, 151, 255, 0.1);
    color: #8fc2ff;
    font-size: 0.78rem;
    font-weight: 750;
    text-align: center;
}

.dam-spel-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    align-items: start;
    gap: 1.2rem;
}

.dam-zijbalk {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dam-info-blok {
    padding: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;
    background: #071827;
}

.dam-info-blok strong {
    display: block;
    margin-top: 0.35rem;
    color: #fff;
    font-size: 0.92rem;
}

.dam-info-blok p {
    margin: 0.35rem 0 0;
    color: #8ca0b6;
    font-size: 0.76rem;
    line-height: 1.5;
}

.dam-bord-kolom {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dam-bord {
    width: min(100%, 700px);
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    overflow: hidden;
    border: 8px solid #102840;
    border-radius: 14px;
    background: #102840;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: opacity 0.15s;
}

.dam-bord-bezig { opacity: 0.7; pointer-events: none; }

.dam-cel {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    appearance: none;
    cursor: default;
}

.dam-cel-licht { background: #b9cad9; }
.dam-cel-donker { background: #31506e; cursor: pointer; }
.dam-cel-donker:hover { background: #3a5f82; }
.dam-cel:focus-visible { z-index: 3; outline: 3px solid #64b1ff; outline-offset: -3px; }

.dam-steen {
    position: relative;
    z-index: 1;
    width: 76%;
    height: 76%;
    display: grid;
    place-items: center;
    border: clamp(2px, 0.32vw, 4px) solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    box-shadow: 0 0.16em 0.28em rgba(0, 0, 0, 0.38), inset 0 0 0 0.12em rgba(255, 255, 255, 0.08);
    transition: transform 0.13s, box-shadow 0.13s;
}

.dam-steen-wit {
    background: radial-gradient(circle at 36% 28%, #fff 0 18%, #e2e9f1 42%, #aab9c9 100%);
    border-color: rgba(255, 255, 255, 0.78);
}

.dam-steen-zwart {
    background: radial-gradient(circle at 36% 28%, #40556c 0 10%, #1c2b3b 42%, #050b12 100%);
    border-color: rgba(130, 158, 188, 0.36);
}

.dam-koning::after {
    content: "♛";
    display: grid;
    place-items: center;
    color: #e7b955;
    font-size: clamp(0.65rem, 2vw, 1.55rem);
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.dam-speelbaar .dam-steen {
    box-shadow: 0 0 0 3px rgba(84, 178, 255, 0.48), 0 0 18px rgba(49, 151, 255, 0.58), inset 0 0 0 0.12em rgba(255, 255, 255, 0.1);
}

.dam-speelbaar:hover .dam-steen { transform: translateY(-4%) scale(1.04); }

.dam-doel::after {
    content: "";
    position: absolute;
    z-index: 2;
    width: 28%;
    height: 28%;
    border: 3px solid rgba(255, 255, 255, 0.78);
    border-radius: 50%;
    background: #2c91ff;
    box-shadow: 0 0 0 5px rgba(44, 145, 255, 0.24), 0 0 18px #2c91ff;
}

.dam-geselecteerd {
    box-shadow: inset 0 0 0 4px #54b2ff;
}

.dam-laatste-veld::before {
    content: "";
    position: absolute;
    inset: 7%;
    border: 2px solid rgba(255, 203, 87, 0.72);
    border-radius: 8px;
}

.dam-bord-hint {
    max-width: 700px;
    margin: 0.75rem 0 0;
    color: #73879e;
    font-size: 0.74rem;
    line-height: 1.45;
    text-align: center;
}

.dam-fout { margin: 1rem 0 0; }

.dam-resultaat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(62, 207, 127, 0.26);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(62, 207, 127, 0.1), rgba(44, 145, 255, 0.08));
}

.dam-resultaat[hidden],
.dam-kaart[hidden],
.dam-wachtkaart[hidden],
#knop-dam-opgeven[hidden],
#knop-dam-sluiten[hidden] { display: none !important; }

.dam-resultaat-icoon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 1.45rem;
}

.dam-resultaat strong {
    display: block;
    margin-top: 0.2rem;
    color: #fff;
}

:root[data-thema="licht"] .dam-intro h3,
:root[data-thema="licht"] .spellen-tegel h2,
:root[data-thema="licht"] .dam-game-kop h2,
:root[data-thema="licht"] .dam-speler strong,
:root[data-thema="licht"] .dam-info-blok strong,
:root[data-thema="licht"] .dam-resultaat strong { color: #122033 !important; }

:root[data-thema="licht"] .dam-info-blok,
:root[data-thema="licht"] .dam-intro-icoon { background: #eef5fb; }

@media (max-width: 900px) {
    .babbel-start-grid { grid-template-columns: 1fr; }
    .spellen-pagina-kop { align-items: stretch; flex-direction: column; }
    .spellen-pagina-kop .babbelbox-edit-link { align-self: flex-start; }
    .spellen-grid { grid-template-columns: 1fr; }
    .dam-intro { grid-template-columns: auto minmax(0, 1fr); }
    .dam-intro .btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
    .dam-spel-layout { grid-template-columns: 1fr; }
    .dam-zijbalk { order: 2; display: grid; grid-template-columns: 1fr 1fr; }
    .dam-regels-kort { grid-column: 1 / -1; }
    .dam-bord-kolom { order: 1; }
}

@media (max-width: 620px) {
    .dam-kaart { padding: 0.8rem !important; }
    .dam-game-kop { align-items: stretch; flex-direction: column; }
    .dam-game-acties { justify-content: flex-start; }
    .dam-spelers { grid-template-columns: 1fr 1fr; gap: 0.55rem; }
    .dam-beurt { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
    .dam-speler { grid-row: 2; padding: 0.55rem; }
    .dam-speler-steen { width: 34px; height: 34px; flex-basis: 34px; }
    .dam-speler strong { font-size: 0.8rem; }
    .dam-speler small { font-size: 0.64rem; }
    .dam-bord { border-width: 5px; border-radius: 10px; }
    .dam-zijbalk { grid-template-columns: 1fr; }
    .dam-regels-kort { grid-column: auto; }
    .dam-resultaat { grid-template-columns: auto minmax(0, 1fr); }
    .dam-resultaat .btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
}

@media (max-width: 440px) {
    .dam-intro { grid-template-columns: 1fr; text-align: center; }
    .dam-intro-icoon { margin: auto; }
    .dam-intro .btn { grid-column: auto; }
    .dam-game-acties .dam-verbinding { width: 100%; text-align: center; }
    .dam-game-acties .btn { flex: 1; }
    .dam-speler { align-items: flex-start; }
    .dam-speler-tegenstander { flex-direction: row-reverse; text-align: left; }
    .dam-bord-hint { font-size: 0.68rem; }
}

@media (max-width: 360px) {
    .dam-speler,
    .dam-speler-tegenstander {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .dam-speler-label {
        overflow: hidden;
        font-size: 0.58rem;
        letter-spacing: 0.06em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


/* ===================================================================
   INSTELLINGEN MET SCHAKELAARS
   =================================================================== */

.instelling-rij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding-block: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.instelling-rij:last-child { border-bottom: none; }

.instelling-tekst { flex: 1; min-width: 0; }
.instelling-tekst strong { display: block; font-size: 0.96rem; font-weight: 650; }
.instelling-tekst p { margin: 0.2rem 0 0; color: #93a6c4; font-size: 0.85rem; line-height: 1.5; }

.instelling-veld { max-width: 220px; }

/* De aan/uit-schakelaar */
.schakelaar { flex-shrink: 0; cursor: pointer; }
.schakelaar input { position: absolute; opacity: 0; width: 0; height: 0; }

.schakelaar-baan {
    display: block;
    width: 52px;
    height: 30px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.18s, border-color 0.18s;
    position: relative;
}

.schakelaar-knop {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #93a6c4;
    transition: transform 0.2s cubic-bezier(.34,1.4,.5,1), background 0.18s;
}

.schakelaar input:checked + .schakelaar-baan {
    background: rgba(62, 207, 127, 0.28);
    border-color: rgba(62, 207, 127, 0.5);
}

.schakelaar input:checked + .schakelaar-baan .schakelaar-knop {
    transform: translateX(22px);
    background: #3ecf7f;
}

.schakelaar input:focus-visible + .schakelaar-baan {
    outline: 2px solid #4a90ff;
    outline-offset: 3px;
}

:root[data-thema="licht"] .schakelaar-baan {
    background: rgba(10, 30, 66, 0.12);
    border-color: rgba(10, 30, 66, 0.14);
}

:root[data-thema="licht"] .schakelaar-knop { background: #7b8ca8; }
:root[data-thema="licht"] .instelling-tekst p { color: #4f668a; }