/* Auto-generated from Downloads/index.html — do not edit by hand; re-run scripts/extract-legacy-index-css.mjs */
/* ═══════════════════════════════════════════
TOKENS & RESET
═══════════════════════════════════════════ */
:root {
--blue:#43A3FA; --blue-dark:#1a7fd4; --blue-light:#EBF5FF;
--pink:#FDB2C7; --pink-dark:#e8799a; --pink-light:#FFF0F4;
--green:#5DE8B0; --green-dark:#28c484; --green-light:#EDFFF7;
--yellow:#FFD166; --orange:#FF6B6B;
--dark:#0F0F1A; --dark2:#1A1A2E; --dark3:#2A2A42;
--mid:#5C5C7A; --light:#9090AA;
--off:#F7F6F3; --white:#FFFFFF;
--border:rgba(15,15,26,0.09);
--shadow:0 2px 12px rgba(15,15,26,0.08);
--shadow-lg:0 12px 48px rgba(15,15,26,0.14);
--r:16px; --r-sm:10px; --r-full:999px;
--nav-h:58px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;}
html{overflow-x:hidden;overflow-y:scroll;}
body{font-family:'Outfit',sans-serif;background:var(--off);color:var(--dark);overflow-x:hidden;min-height:100vh;padding-top:var(--nav-h);}
/* removed for React SPA */
/* removed for React SPA */
img{max-width:100%;}
a{text-decoration:none;color:inherit;}
button{font-family:'Outfit',sans-serif;cursor:pointer;}
input,textarea,select{font-family:'Outfit',sans-serif;}
ul{list-style:none;}
/* ═══════════════════════════════════════════
SCROLLBAR
═══════════════════════════════════════════ */
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--light);border-radius:3px;}
/* ═══════════════════════════════════════════
TYPOGRAPHY HELPERS
═══════════════════════════════════════════ */
.ff{font-family:Fraunces,serif;}
.text-mid{color:var(--mid);}
.text-blue{color:var(--blue);}
.text-green{color:var(--green-dark);}
.fw600{font-weight:600;}
.fw700{font-weight:700;}
/* ═══════════════════════════════════════════
LAYOUT
═══════════════════════════════════════════ */
.container{max-width:1220px;margin:0 auto;padding:0 32px;}
.container-sm{max-width:780px;margin:0 auto;padding:0 32px;}
.page{display:none;min-height:calc(100vh - var(--nav-h));}
.page.active{display:block;}
.section{padding:96px 0;}
.section-sm{padding:64px 0;}
/* ═══════════════════════════════════════════
BUTTONS
═══════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:var(--r-full);font-size:.9rem;font-weight:600;border:none;transition:all .2s;cursor:pointer;white-space:nowrap;}
.btn-lg{padding:15px 32px;font-size:1rem;}
.btn-sm{padding:8px 18px;font-size:.82rem;}
.btn-dark{background:var(--dark);color:#fff;}
.btn-dark:hover{background:var(--dark2);transform:translateY(-1px);box-shadow:var(--shadow-lg);}
.btn-blue{background:var(--blue);color:#fff;}
.btn-blue:hover{background:var(--blue-dark);transform:translateY(-1px);}
.btn-outline{background:transparent;color:var(--dark);border:1.5px solid var(--border);}
.btn-outline:hover{border-color:var(--blue);color:var(--blue);}
.btn-ghost{background:transparent;color:var(--mid);border:none;padding:8px 12px;}
.btn-ghost:hover{color:var(--dark);background:rgba(0,0,0,.04);}
.btn-green{background:var(--green);color:var(--dark);}
.btn-green:hover{background:var(--green-dark);color:#fff;}
.btn-danger{background:#ff4d4f;color:#fff;}
.btn-danger:hover{background:#d9363e;}
.btn-pink{background:var(--pink);color:var(--dark);}
.btn-pink:hover{background:var(--pink-dark);color:#fff;}
.btn-full{width:100%;justify-content:center;}
.btn-loading{opacity:.7;pointer-events:none;}
/* ═══════════════════════════════════════════
INPUTS
═══════════════════════════════════════════ */
.input-group{margin-bottom:18px;}
.input-group label{display:block;font-size:.83rem;font-weight:600;color:var(--mid);margin-bottom:6px;letter-spacing:.02em;}
.input{width:100%;padding:12px 16px;border-radius:var(--r-sm);border:1.5px solid var(--border);background:#fff;font-size:.95rem;color:var(--dark);outline:none;transition:border-color .2s,box-shadow .2s;}
.input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(67,163,250,.12);}
.input.error{border-color:#ff4d4f;}
.input-icon{position:relative;}
.input-icon .input{padding-left:42px;}
.input-icon .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--light);font-size:1rem;}
.form-error{font-size:.78rem;color:#ff4d4f;margin-top:4px;}
.input-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
/* ═══════════════════════════════════════════
NAV
═══════════════════════════════════════════ */
#mainNav{
position:fixed;top:0;left:0;right:0;z-index:500;
height:var(--nav-h);
display:flex;align-items:center;
background:linear-gradient(180deg, #3a98f8 0%, #5eb3fa 60%, rgba(235,245,255,0.0) 100%);
border-bottom:none;
transition:box-shadow .3s;
}
#mainNav.scrolled{box-shadow:none;}
.nav-inner{width:100%;max-width:1220px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:0;overflow:visible;}
.nav-logo{display:flex;align-items:center;gap:12px;font-family:Fraunces,serif;font-size:1.7rem;font-weight:900;color:#fff;cursor:pointer;flex-shrink:0;letter-spacing:-.01em;justify-self:start;text-shadow:0 1px 2px rgba(15,22,40,.28);}
a.nav-logo{text-decoration:none;color:#fff;}
a.nav-link{text-decoration:none;display:inline-flex;align-items:center;}
.logo-heart{
width:52px;height:52px;border-radius:14px;
overflow:hidden;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
position:relative;
/* No border, no hard ring — pure image with CSS blending */
box-shadow:none;
}
/* Colour-tinted overlay that blends the edges into the nav background */
.logo-heart::before{
content:'';
position:absolute;
inset:0;
border-radius:14px;
/* Radial mask: transparent center, navy at rim — merges with nav gradient */
background:radial-gradient(ellipse 120% 120% at 50% 50%,
transparent 42%,
rgba(67,163,250,.22) 68%,
rgba(45,130,220,.55) 88%,
rgba(26,127,212,.82) 100%
);
pointer-events:none;
z-index:2;
}
/* Soft outer glow — same hue as nav, very low opacity, fully blurred */
.logo-heart::after{
content:'';
position:absolute;
inset:-8px;
border-radius:22px;
background:radial-gradient(ellipse 90% 90% at 50% 50%,
rgba(67,163,250,.28) 0%,
rgba(67,163,250,.10) 55%,
transparent 80%
);
filter:blur(6px);
pointer-events:none;
z-index:-1;
}
.logo-heart img{
width:52px;height:52px;object-fit:cover;
border-radius:13px;
display:block;
position:relative;
z-index:1;
}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:0;justify-self:center;flex:0 0 auto;width:max-content;}
.nav-link{padding:8px 14px;border-radius:var(--r-sm);font-size:.88rem;font-weight:500;color:rgba(255,255,255,.85);cursor:pointer;transition:all .2s;border:none;background:none;}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.18);}
.nav-link.active{color:#fff;background:rgba(255,255,255,.25);font-weight:700;}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:0;justify-self:end;}
.nav-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--pink));display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:#fff;cursor:pointer;box-shadow:var(--shadow);}
/* Show name on medium+ screens, hide on very small */
@media(max-width:380px){ #navUserName { display:none !important; } }
.nav-pts{display:flex;align-items:center;gap:5px;background:var(--green-light);color:var(--green-dark);border-radius:var(--r-full);padding:5px 12px;font-size:.82rem;font-weight:700;}
/* mobile nav toggle */
.nav-hamburger{display:none;flex-direction:column;gap:5px;padding:8px;cursor:pointer;background:none;border:none;}
.nav-hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:all .3s;}
.nav-mobile-account-btn{display:none;}
.nav-mobile{display:none;position:fixed;top:var(--nav-h);left:0;right:0;background:#fff;border-bottom:1.5px solid var(--border);padding:12px 16px 20px;z-index:499;flex-direction:column;gap:2px;box-shadow:0 12px 32px rgba(15,15,26,.12);}
/* Boven bottom-nav (z-index 600) wanneer uitgeklapt */
.nav-mobile.open{display:flex;z-index:610;}
.nav-mobile .nav-link{
width:100%;
text-align:left;
padding:13px 16px;
border-radius:12px;
font-size:.95rem;
font-weight:600;
color:#1f2937 !important; /* dark text — override the white nav-link color */
background:transparent;
display:flex;
align-items:center;
gap:10px;
line-height:1.3;
}
.nav-mobile .nav-link:hover{background:#f3f4f6;color:#1a237e !important;}
.nav-mobile .nav-link:active{background:#e8eaf6;color:#1a237e !important;}
/* Bottom nav bar – only mobile */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:600;background:#fff;border-top:1px solid var(--border);padding:6px 0 max(6px,env(safe-area-inset-bottom));box-shadow:0 -2px 12px rgba(15,15,26,.08);}
.bottom-nav-inner{display:grid;grid-template-columns:repeat(6,1fr);gap:0;}
.bnav-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;background:none;border:none;cursor:pointer;font-family:'Outfit',sans-serif;color:var(--mid);transition:color .18s;-webkit-tap-highlight-color:transparent;}
.bnav-btn .bnav-icon{font-size:1.3rem;line-height:1;}
.bnav-btn .bnav-lbl{font-size:.6rem;font-weight:600;letter-spacing:.02em;}
.bnav-btn.active,.bnav-btn:hover{color:var(--blue);}
/* Bottom nav hidden only for admin */
body.page-admin .bottom-nav,
body.admin-mode .bottom-nav { display:none !important; }
body.page-admin,
body.admin-mode { padding-bottom: 0 !important; }
/* Bottom-nav + extra ruimte onderaan: zelfde breakpoint als verborgen hoofdnav (.nav-links) */
@media(max-width:768px){
#commPageGrid{grid-template-columns:1fr!important;}
.bottom-nav{display:block;}
body{padding-bottom:calc(var(--nav-h) + 4px);}
/* Dashboard pages also need padding for bottom nav */
#page-dashboard,
#page-bedrijf-dashboard,
#page-influencer-dashboard { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* ═══════════════════════════════════════════
CARDS & SURFACES
═══════════════════════════════════════════ */
.card{background:#fff;border-radius:var(--r);border:1.5px solid var(--border);overflow:hidden;transition:transform .25s,box-shadow .25s;}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.card-flat{background:#fff;border-radius:var(--r);border:1.5px solid var(--border);overflow:hidden;}
/* ═══════════════════════════════════════════
BADGE / CHIPS
═══════════════════════════════════════════ */
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--r-full);font-size:.72rem;font-weight:700;letter-spacing:.04em;}
.chip-blue{background:var(--blue-light);color:var(--blue-dark);}
.chip-green{background:var(--green-light);color:var(--green-dark);}
.chip-pink{background:var(--pink-light);color:var(--pink-dark);}
.chip-dark{background:var(--dark);color:#fff;}
.chip-yellow{background:#FFF8E1;color:#F57F17;}
/* ═══════════════════════════════════════════
PROGRESS BAR
═══════════════════════════════════════════ */
.progress-track{height:7px;background:rgba(15,15,26,.07);border-radius:var(--r-full);overflow:hidden;}
.progress-fill{height:100%;border-radius:var(--r-full);background:linear-gradient(90deg,var(--blue),var(--green));transition:width 1.2s cubic-bezier(.25,.46,.45,.94);}
.progress-meta{display:flex;justify-content:space-between;margin-top:8px;font-size:.78rem;color:var(--mid);}
.progress-meta strong{color:var(--dark);}
/* ═══════════════════════════════════════════
SECTION LABELS
═══════════════════════════════════════════ */
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:10px;}
.eyebrow-green{color:var(--green-dark);}
.eyebrow-pink{color:var(--pink-dark);}
.section-title{font-family:Fraunces,serif;font-size:clamp(1.9rem,3.5vw,2.9rem);font-weight:900;line-height:1.08;letter-spacing:-.03em;}
.section-sub{font-size:1rem;color:var(--mid);line-height:1.75;margin-top:12px;max-width:520px;}
/* ═══════════════════════════════════════════
TOAST
═══════════════════════════════════════════ */
#toast{position:fixed;bottom:28px;right:28px;z-index:9999;display:flex;flex-direction:column;gap:10px;}
.toast-item{background:var(--dark);color:#fff;padding:14px 20px;border-radius:var(--r);font-size:.88rem;font-weight:500;box-shadow:var(--shadow-lg);animation:slideInRight .3s ease;display:flex;align-items:center;gap:10px;max-width:320px;}
.toast-item.success{background:var(--green-dark);}
.toast-item.error{background:#ff4d4f;}
@keyframes slideInRight{from{opacity:0;transform:translateX(40px);}to{opacity:1;transform:translateX(0);}}
/* ═══════════════════════════════════════════
MODAL
═══════════════════════════════════════════ */
.modal-overlay{position:fixed;inset:0;z-index:800;background:rgba(15,15,26,.55);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;padding:20px;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal-box{background:#fff;border-radius:24px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;padding:36px;position:relative;transform:translateY(20px);transition:transform .3s;box-shadow:0 24px 80px rgba(15,15,26,.2);}
.modal-overlay.open .modal-box{transform:translateY(0);}
.modal-close{position:absolute;top:16px;right:16px;background:rgba(0,0,0,.06);border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;transition:background .2s;}
.modal-close:hover{background:rgba(0,0,0,.12);}
.modal-title{font-family:Fraunces,serif;font-size:1.6rem;font-weight:900;margin-bottom:4px;}
.modal-sub{font-size:.87rem;color:var(--mid);margin-bottom:24px;}
/* ═══════════════════════════════════════════
██████████ PAGE: HOME ██████████
═══════════════════════════════════════════ */
/* HERO */
.hero{min-height:calc(100vh - var(--nav-h));display:flex;align-items:center;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(67,163,250,.12) 0%,var(--off) 280px);}
.hero-bg{position:absolute;inset:0;pointer-events:none;}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.28;animation:blobDrift 10s ease-in-out infinite alternate;}
.blob1{width:700px;height:700px;background:var(--blue);top:-200px;right:-150px;animation-delay:0s;}
.blob2{width:500px;height:500px;background:var(--pink);bottom:-100px;left:-80px;animation-delay:3s;}
.blob3{width:350px;height:350px;background:var(--green);top:40%;left:45%;animation-delay:6s;}
@keyframes blobDrift{from{transform:translate(0,0) scale(1);}to{transform:translate(30px,25px) scale(1.08);}}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;width:100%;max-width:1220px;margin:0 auto;padding:80px 32px;}
.hero-left{}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--border);border-radius:var(--r-full);padding:6px 16px 6px 10px;font-size:.8rem;font-weight:600;color:var(--mid);margin-bottom:28px;animation:fadeUp .6s ease both;}
.hero-badge-dot{width:8px;height:8px;border-radius:50%;background:var(--green-dark);}
.hero h1{font-family:Fraunces,serif;font-size:clamp(2.8rem,5.5vw,4.5rem);font-weight:900;line-height:1.04;letter-spacing:-.04em;animation:fadeUp .6s .1s ease both;}
.hero h1 em{font-style:italic;color:var(--blue);font-weight:300;}
.hero-desc{font-size:1.05rem;color:var(--mid);line-height:1.8;margin:22px 0 36px;max-width:460px;animation:fadeUp .6s .2s ease both;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;animation:fadeUp .6s .3s ease both;}
.hero-trust{display:flex;align-items:center;gap:12px;margin-top:32px;animation:fadeUp .6s .4s ease both;}
.hero-trust-avatars{display:flex;}
.trust-av{width:30px;height:30px;border-radius:50%;border:2px solid var(--off);background:linear-gradient(135deg,var(--blue),var(--pink));display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#fff;margin-left:-8px;}
.trust-av:first-child{margin-left:0;}
.hero-trust p{font-size:.82rem;color:var(--mid);}
.hero-trust strong{color:var(--dark);}
.hero-right{animation:fadeUp .6s .2s ease both;}
.hero-card-stack{position:relative;height:460px;}
.hcard{position:absolute;background:#fff;border-radius:20px;padding:24px;box-shadow:var(--shadow-lg);border:1.5px solid var(--border);}
.hcard1{width:300px;top:0;right:0;animation:float1 6s ease-in-out infinite;}
.hcard2{width:260px;bottom:60px;left:0;animation:float2 7s ease-in-out infinite;}
.hcard3{width:200px;top:180px;right:40px;animation:float3 5s ease-in-out infinite;}
@keyframes float1{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
@keyframes float2{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes float3{0%,100%{transform:translateY(0);}50%{transform:translateY(-15px);}}
.hcard-label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--light);margin-bottom:8px;}
.hcard-val{font-family:Fraunces,serif;font-size:2rem;font-weight:900;color:var(--dark);}
.hcard-sub{font-size:.78rem;color:var(--mid);margin-top:2px;}
.hcard-progress{margin-top:14px;}
.hcard-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.hcard-row:last-child{margin-bottom:0;}
.hcard-ava{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#fff;flex-shrink:0;}
.hcard-name{font-size:.82rem;font-weight:600;flex:1;}
.hcard-pts{font-size:.78rem;color:var(--green-dark);font-weight:700;}
.hcard-badge-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;}
/* STATS BAR */
.stats-bar{background:var(--dark);padding:32px 0;}
.stats-row{display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;gap:24px;}
.stat-item{text-align:center;}
.stat-num{font-family:Fraunces,serif;font-size:2.2rem;font-weight:900;color:#fff;}
.stat-lbl{font-size:.78rem;color:rgba(255,255,255,.5);margin-top:2px;}
/* HOW IT WORKS */
.hiw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px;}
.hiw-card{background:#fff;border-radius:var(--r);padding:28px;border:1.5px solid var(--border);transition:border-color .2s,transform .2s;}
.hiw-card:hover{border-color:var(--blue);transform:translateY(-4px);}
.hiw-num{font-family:Fraunces,serif;font-size:3rem;font-weight:900;color:rgba(15,15,26,.06);line-height:1;}
.hiw-icon{font-size:1.8rem;margin:10px 0 14px;}
.hiw-card h3{font-size:1rem;font-weight:700;margin-bottom:8px;}
.hiw-card p{font-size:.86rem;color:var(--mid);line-height:1.65;}
/* FEATURED CAUSES (home) */
.fcauses-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px;}
.cause-card{background:#fff;border-radius:var(--r);border:1.5px solid var(--border);overflow:hidden;transition:transform .25s,box-shadow .25s;cursor:pointer;}
.cause-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.cause-thumb{height:160px;display:flex;align-items:center;justify-content:center;font-size:3.5rem;position:relative;overflow:hidden;}
.cause-thumb .logo-wrap{display:flex;align-items:center;justify-content:center;width:104px;height:104px;border-radius:20px;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.12);padding:12px;}
.cause-thumb .logo-wrap img{width:100%;height:100%;object-fit:contain;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:pixelated;filter:none;}
.cause-cat-badge{position:absolute;top:12px;left:12px;}
.cause-body{padding:20px 22px 24px;}
.cause-org{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.cause-card h3{font-family:Fraunces,serif;font-size:1.15rem;font-weight:800;margin-bottom:8px;line-height:1.3;}
.cause-card p{font-size:.84rem;color:var(--mid);line-height:1.6;margin-bottom:14px;}
.cause-donate-btn{width:100%;padding:11px;background:var(--dark);color:#fff;border:none;border-radius:var(--r-sm);font-size:.88rem;font-weight:700;cursor:pointer;transition:background .2s,transform .15s;}
.cause-donate-btn:hover{background:var(--blue);transform:scale(1.02);}
/* GAMIFICATION SECTION */
.game-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.leaderboard-widget{background:var(--dark);border-radius:20px;padding:28px;color:#fff;}
.lb-title{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:20px;display:flex;align-items:center;gap:8px;}
/* Ranglijst widget — rij-layout */
.lb-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.lb-row:last-child{border-bottom:none;}
.lb-rank{font-family:Fraunces,serif;font-size:1.1rem;font-weight:900;width:26px;text-align:center;color:rgba(255,255,255,.25);}
.lb-rank.r1{color:#FFD700;}
.lb-rank.r2{color:#C0C0C0;}
.lb-rank.r3{color:#CD7F32;}
.lb-ava{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:#fff;flex-shrink:0;}
.lb-info{flex:1;}
.lb-name{font-size:.88rem;font-weight:600;}
.lb-amt{font-size:.72rem;color:rgba(255,255,255,.45);}
.lb-sticker{font-size:.85rem;}
.lb-pts{font-family:Fraunces,serif;font-size:1rem;font-weight:900;color:var(--green);margin-left:auto;min-width:68px;text-align:right;flex-shrink:0;}
.lb-you-bar{margin-top:18px;background:rgba(93,232,176,.1);border:1px solid rgba(93,232,176,.2);border-radius:var(--r-sm);padding:12px 16px;font-size:.83rem;color:rgba(255,255,255,.8);}
.lb-you-bar strong{color:var(--green);}
.features-col{display:flex;flex-direction:column;gap:26px;}
.feat-item{display:flex;gap:16px;align-items:flex-start;}
.feat-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;}
.feat-icon.b{background:var(--blue-light);}
.feat-icon.p{background:var(--pink-light);}
.feat-icon.g{background:var(--green-light);}
.feat-icon.y{background:#FFF8E1;}
.feat-item h4{font-size:.97rem;font-weight:700;margin-bottom:4px;}
.feat-item p{font-size:.85rem;color:var(--mid);line-height:1.6;}
/* STICKER PROMO */
.sticker-promo{background:linear-gradient(135deg,#43A3FA 0%,#1a7fd4 100%);color:#fff;border-radius:24px;padding:64px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;box-sizing:border-box;width:100%;}
.sticker-promo h2{font-family:Fraunces,serif;font-size:clamp(1.8rem,3vw,2.5rem);font-weight:900;line-height:1.1;}
.sticker-promo p{color:rgba(255,255,255,.75);margin-top:12px;font-size:.97rem;line-height:1.7;}
.sticker-promo ul{margin-top:20px;display:flex;flex-direction:column;gap:10px;}
.sticker-promo li{display:flex;align-items:center;gap:10px;font-size:.9rem;color:rgba(255,255,255,.85);}
.sticker-promo li::before{content:'✓';width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;flex-shrink:0;}
.sticker-visual{background:rgba(255,255,255,.15);border-radius:20px;padding:32px 40px;text-align:center;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);}
.sticker-visual .big-heart{font-size:3.5rem;display:block;margin-bottom:12px;}
.sticker-visual h3{font-family:Fraunces,serif;font-size:1.4rem;font-weight:900;color:#fff;}
.sticker-visual p{font-size:.78rem;color:rgba(255,255,255,.7);margin-top:4px;}
.sticker-visual .sticker-pts{margin-top:14px;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.2);border-radius:var(--r-full);padding:5px 14px;font-size:.8rem;font-weight:700;color:#fff;}
/* STICKER PROMO — MOBILE FIX */
@media(max-width:768px){
/* Zorg dat paneel volledig zichtbaar is, geen clipping aan rechterkant */
section[aria-label="Sticker programma"]{overflow:hidden;}
section[aria-label="Sticker programma"] .container{padding-left:16px;padding-right:16px;}
section[aria-label="Sticker programma"] .sticker-promo{
box-sizing:border-box;
width:100%;
max-width:100%;
padding:24px 16px;
margin:0;
border-radius:16px;
grid-template-columns:1fr;
gap:24px;
}
section[aria-label="Sticker programma"] .sticker-visual{
box-sizing:border-box;
width:100%;
max-width:100%;
padding:20px 16px;
margin:0 auto;
}
}
/* ═══════════════════════════════════════════
██████████ PAGE: GOEDE DOELEN ██████████
═══════════════════════════════════════════ */
.page-header{background:#fff;border-bottom:1px solid var(--border);padding:48px 0 32px;}
.page-header h1{font-family:Fraunces,serif;font-size:2.4rem;font-weight:900;margin-bottom:8px;}
.page-header p{font-size:1rem;color:var(--mid);}
.causes-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:24px 0;}
.search-wrap{position:relative;flex:1;min-width:220px;}
.search-wrap .input{padding-left:42px;}
.search-wrap .search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--light);pointer-events:none;}
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;}
.filter-btn{padding:8px 18px;border-radius:var(--r-full);font-size:.83rem;font-weight:600;border:1.5px solid var(--border);background:#fff;color:var(--mid);cursor:pointer;transition:all .2s;font-family:'Outfit',sans-serif;}
.filter-btn:hover{border-color:var(--blue);color:var(--blue);}
.filter-btn.active{background:var(--dark);color:#fff;border-color:var(--dark);}
.sort-select{padding:9px 14px;border-radius:var(--r-sm);border:1.5px solid var(--border);font-size:.85rem;font-family:'Outfit',sans-serif;color:var(--dark);outline:none;background:#fff;cursor:pointer;}
.causes-count{font-size:.83rem;color:var(--mid);font-weight:500;}
.causes-main-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;padding-bottom:64px;}
/* cause card detail */
.cause-detail-header{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;padding:40px 0;}
.cause-detail-thumb{border-radius:20px;overflow:hidden;height:300px;display:flex;align-items:center;justify-content:center;font-size:6rem;}
.cause-detail-info h1{font-family:Fraunces,serif;font-size:2rem;font-weight:900;margin-bottom:8px;}
.cause-detail-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.cause-detail-desc{font-size:.97rem;color:var(--mid);line-height:1.8;margin-bottom:24px;}
.cause-detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;}
.cd-stat{background:var(--off);border-radius:var(--r-sm);padding:16px;text-align:center;}
.cd-stat-num{font-family:Fraunces,serif;font-size:1.5rem;font-weight:900;}
.cd-stat-lbl{font-size:.73rem;color:var(--mid);margin-top:2px;}
/* ═══════════════════════════════════════════
██████████ PAGE: RANGLIJST ██████████
═══════════════════════════════════════════ */
/* ── RANGLIJST TABS — altijd op 1 regel, vult volle breedte ── */
.rank-tabs{display:flex;gap:3px;background:#f1f5f9;border:1.5px solid var(--border);border-radius:var(--r-full);padding:4px;width:100%;}
.rank-tab{flex:1;text-align:center;padding:8px 6px;border-radius:var(--r-full);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s;border:none;background:transparent;color:var(--mid);font-family:'Outfit',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.rank-tab.active{background:var(--dark);color:#fff;box-shadow:0 2px 8px rgba(15,15,26,.18);}
/* Verberg SVG-iconen in tabs op smal scherm zodat tekst past */
.rank-tab svg{vertical-align:middle;flex-shrink:0;}
/* ── Thead verbergen via class (niet via inline style!) ── */
.rl-thead-hidden { display: none !important; }
.rank-table{background:#fff;border-radius:20px;border:1.5px solid var(--border);overflow:hidden;margin-top:28px;max-height:520px;overflow-y:auto;}
/* Ranglijst: grijze icoon-tegel (zelfde thema als tab Goede doelen) */
#page-ranglijst .rl-row-icon-tile{
width:40px;height:40px;border-radius:12px;background:var(--off);
border:1px solid rgba(15,23,42,.08);display:flex;align-items:center;justify-content:center;
flex-shrink:0;box-sizing:border-box;
}
#page-ranglijst .rank-row.rl-row .rl-row-icon-tile .rank-ava{width:32px;height:32px;font-size:.72rem;}
#page-ranglijst .rank-row.proj-row .rl-row-icon-tile{color:#64748b;}
#page-ranglijst .rank-row.proj-row .rl-row-icon-tile svg{width:20px;height:20px;}
#page-ranglijst .rank-row.gd-row .rl-row-icon-tile{font-size:1.25rem;line-height:1;}
#page-ranglijst .rank-panel-gray{
margin:16px 18px 20px;padding:22px 20px 28px;background:#f8fafc;border:1px solid #e5e7eb;
border-radius:14px;font-size:.94rem;line-height:1.65;color:#334155;box-sizing:border-box;
}
#page-ranglijst .rank-panel-gray h3{
display:flex;align-items:center;gap:10px;margin:0 0 12px;font-family:Fraunces,serif;font-size:1.25rem;font-weight:800;color:#0f172a;
}
#page-ranglijst .rank-panel-gray-icon{
display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;
background:var(--off);border:1px solid rgba(15,23,42,.08);flex-shrink:0;color:#475569;
}
#page-ranglijst .rank-panel-gray-icon svg{width:18px;height:18px;}
.rank-thead{display:grid;grid-template-columns:56px 1fr 110px 110px 90px;padding:14px 20px;background:var(--off);border-bottom:1px solid var(--border);font-size:.75rem;font-weight:700;color:var(--light);letter-spacing:.08em;text-transform:uppercase;align-items:center;}
.rank-thead > div { text-align: center; }
.rank-thead > div:first-child { text-align: center; }
.rank-thead > div:nth-child(2) { text-align: left; }
.rank-row{display:grid;grid-template-columns:56px 1fr 110px 110px 90px;padding:14px 20px;border-bottom:1px solid var(--border);align-items:center;transition:background .15s;}
.rank-row:last-child{border-bottom:none;}
.rank-row:hover{background:var(--off);}
.rank-row.you{background:var(--blue-light);border-left:3px solid var(--blue);}
.rank-num{font-family:Fraunces,serif;font-size:1.3rem;font-weight:900;color:rgba(15,15,26,.2);}
.rank-num.r1{color:#FFD700;}
.rank-num.r2{color:#C0C0C0;}
.rank-num.r3{color:#CD7F32;}
.rank-user{display:flex;align-items:center;gap:12px;}
.rank-ava{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:#fff;flex-shrink:0;}
.rank-uname{font-size:.92rem;font-weight:700;}
.rank-usub{font-size:.73rem;color:var(--mid);}
.rank-amt{font-size:.9rem;font-weight:600;text-align:right;}
.rank-pts{font-family:Fraunces,serif;font-size:1rem;font-weight:900;color:var(--green-dark);}
.rank-sticker{font-size:1.1rem;text-align:center;}
.rank-diff{font-size:.8rem;font-weight:600;}
.rank-diff.up{color:var(--green-dark);}
.rank-diff.down{color:var(--orange);}
.rank-diff.same{color:var(--light);}
/* ═══════════════════════════════════════════════════
RANGLIJST — VASTE KOLOMUITLIJNING (GRID SYSTEEM)
Alle bedragen (€) staan altijd exact onder elkaar.
═══════════════════════════════════════════════════ */
/* Kolom 1: Rang-positie */
.rl-cell-rank {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
/* Kolom 2: Avatar + naam */
.rl-cell-user {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
overflow: hidden;
}
.rl-user-info {
min-width: 0;
overflow: hidden;
}
.rl-user-info .rank-uname {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 700;
font-size: .92rem;
color: #1f2937;
}
.rl-user-info .rank-usub {
font-size: .72rem;
color: var(--mid);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rl-badges {
display: flex;
align-items: center;
gap: 2px;
margin-top: 2px;
}
/* Kolom 3: Bedrag (€) — VASTE BREEDTE, altijd uitgelijnd */
.rl-cell-amt {
font-weight: 700;
font-size: .9rem;
color: #059669;
text-align: center;
white-space: nowrap;
/* Vaste breedte wordt bepaald door het grid, geen verschuiving mogelijk */
}
/* Kolom 4: Punten */
.rl-cell-pts {
font-weight: 800;
font-size: .9rem;
color: #1a237e;
text-align: center;
white-space: nowrap;
}
.rl-pts-label {
font-size: .72rem;
font-weight: 600;
color: #9ca3af;
}
/* Kolom 5: Extra (verschil / team / leden) */
.rl-cell-extra {
font-size: .75rem;
color: #9ca3af;
min-width: 0;
text-align: center;
}
/* ── Responsive: Tablet (≤1024px) — Verschil kolom WEL zichtbaar ─────── */
@media (max-width: 1024px) {
.rank-thead,
.rank-row.rl-row {
grid-template-columns: 48px 1fr 90px 90px 80px !important;
}
.rank-row.rl-row .rl-cell-extra { display: block !important; }
}
/* ── Responsive: Mobiel (≤768px) ──────────────────────── */
@media (max-width: 768px) {
/* thead blijft zichtbaar, maar compacter */
.rank-thead {
grid-template-columns: 44px 1fr 80px 80px 80px !important;
font-size: .72rem !important;
padding: 10px 14px !important;
}
.rank-row.rl-row {
grid-template-columns: 44px 1fr 80px 80px 80px !important;
padding: 11px 14px !important;
}
/* Verschil-kolom op tablet wel zichtbaar */
.rank-row.rl-row .rl-cell-extra { display: block !important; }
}
/* ── Responsive: Klein mobiel (≤600px) ────────────────── */
@media (max-width: 600px) {
.rank-thead {
grid-template-columns: 36px 1fr 60px 50px 60px !important;
font-size: .65rem !important;
padding: 8px 10px !important;
}
.rank-row.rl-row {
/* 5 kolommen: rang | naam | bedrag | punten | verschil */
grid-template-columns: 36px 1fr 60px 50px 60px !important;
padding: 9px 10px !important;
font-size: .80rem !important;
}
/* Toon punten-kolom ook op klein mobiel */
.rank-row.rl-row .rl-cell-pts { display: block !important; }
.rank-row.rl-row .rl-cell-extra { display: block !important; }
.rl-cell-amt {
font-size: .75rem !important;
}
.rl-cell-pts { font-size: .73rem !important; }
.rl-pts-label { display: none !important; }
.rank-ava {
width: 26px !important;
height: 26px !important;
font-size: .68rem !important;
}
.rl-user-info .rank-uname { font-size: .78rem !important; }
.rl-user-info .rank-usub { display: none !important; }
}
/* ── Responsive: Zeer klein (≤380px) ──────────────────── */
@media (max-width: 380px) {
.rank-row.rl-row {
grid-template-columns: 28px 1fr 52px 44px 52px !important;
padding: 8px !important;
}
.rank-thead {
grid-template-columns: 28px 1fr 52px 44px 52px !important;
padding: 7px 8px !important;
}
.rl-cell-amt { font-size: .70rem !important; }
.rl-cell-pts { font-size: .68rem !important; }
.rank-ava { width: 22px !important; height: 22px !important; }
}
/* ═══════════════════════════════════════════
NEWS SECTION
═══════════════════════════════════════════ */
.news-section{padding:80px 0;background:#fff;}
.news-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px;}
.news-header-left{}
.news-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:8px;}
.news-title{font-family:Fraunces,serif;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:900;line-height:1.1;color:var(--dark);}
.news-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:28px;}
.news-filter-btn{padding:6px 16px;border-radius:var(--r-full);border:1.5px solid var(--border);background:#fff;font-size:.8rem;font-weight:600;color:var(--mid);cursor:pointer;transition:all .18s;font-family:'Outfit',sans-serif;}
.news-filter-btn:hover{border-color:var(--blue);color:var(--blue);}
.news-filter-btn.active{background:var(--dark);color:#fff;border-color:var(--dark);}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.news-card{background:#fff;border-radius:20px;border:1.5px solid var(--border);overflow:hidden;transition:transform .22s,box-shadow .22s;cursor:pointer;display:flex;flex-direction:column;}
.news-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);}
.news-card.featured{grid-column:span 2;}
.news-card-thumb{height:180px;overflow:hidden;position:relative;background:linear-gradient(135deg,var(--blue-light),var(--blue));}
.news-card.featured .news-card-thumb{height:240px;}
.news-card-thumb img{width:100%;height:100%;object-fit:cover;}
.news-card-thumb-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:3.5rem;}
.news-card-type{position:absolute;top:12px;left:12px;padding:4px 12px;border-radius:var(--r-full);font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;}
.news-type-nieuw{background:#dbeafe;color:#1d4ed8;}
.news-type-project{background:#dcfce7;color:#15803d;}
.news-type-nieuws{background:#fef3c7;color:#b45309;}
.news-type-spotlight{background:#f3e8ff;color:#6d28d9;}
.news-card-body{padding:20px 22px;flex:1;display:flex;flex-direction:column;}
.news-card-org{font-size:.72rem;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.news-card-title{font-family:Fraunces,serif;font-size:1.05rem;font-weight:800;color:var(--dark);line-height:1.35;margin-bottom:8px;}
.news-card.featured .news-card-title{font-size:1.3rem;}
.news-card-excerpt{font-size:.83rem;color:var(--mid);line-height:1.65;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.news-card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--border);}
.news-card-date{font-size:.72rem;color:var(--light);}
.news-card-action{font-size:.78rem;font-weight:700;color:var(--blue);display:flex;align-items:center;gap:4px;}
.news-card-action:hover{color:var(--blue-dark);}
.news-load-more{display:flex;justify-content:center;margin-top:36px;}
/* News detail modal */
.news-modal-overlay{display:none;position:fixed;inset:0;background:rgba(15,15,26,.6);z-index:1500;align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto;}
.news-modal-overlay.open{display:flex;}
.news-modal{background:#fff;border-radius:24px;max-width:720px;width:100%;margin:auto;overflow:hidden;box-shadow:0 24px 80px rgba(15,15,26,.2);}
.news-modal-hero{height:280px;position:relative;background:linear-gradient(135deg,var(--blue),#1a237e);}
.news-modal-hero img{width:100%;height:100%;object-fit:cover;}
.news-modal-hero-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:5rem;}
.news-modal-close{position:absolute;top:16px;right:16px;background:rgba(0,0,0,.4);border:none;border-radius:50%;width:36px;height:36px;font-size:1.1rem;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;}
.news-modal-body{padding:32px 36px 36px;}
.news-modal-meta{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.news-modal-content{font-size:.95rem;color:var(--mid);line-height:1.8;}
.news-modal-content p{margin-bottom:14px;}
.news-modal-content h3{font-family:Fraunces,serif;font-size:1.15rem;font-weight:800;color:var(--dark);margin:20px 0 8px;}
.news-modal-donate{margin-top:24px;padding-top:24px;border-top:1px solid var(--border);}
@media(max-width:900px){.news-grid{grid-template-columns:1fr 1fr;}.news-card.featured{grid-column:span 2;}}
@media(max-width:640px){.news-grid{grid-template-columns:1fr;}.news-card.featured{grid-column:span 1;}}
.sticker-hero{background:linear-gradient(135deg,var(--blue) 0%,#1a7fd4 100%);color:#fff;padding:80px 0;text-align:center;}
.sticker-hero h1{font-family:Fraunces,serif;font-size:clamp(2rem,4vw,3.2rem);font-weight:900;margin-bottom:12px;}
.sticker-hero p{font-size:1.05rem;color:rgba(255,255,255,.75);max-width:500px;margin:0 auto;}
/* Desktop: 3-col grid via sticker-track; carousel actief op mobiel/tablet via JS */
.sticker-wrapper{overflow:visible;width:100%;touch-action:auto;margin:0;}
.sticker-track{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;transform:none!important;transition:none!important;padding:0;}
.sticker-card{min-width:unset;max-width:unset;margin:0;flex-shrink:unset;}
.sticker-pkg{background:#fff;border-radius:20px;border:1.5px solid var(--border);padding:32px;text-align:center;transition:transform .25s,box-shadow .25s,border-color .25s;overflow:visible;}
.sticker-pkg:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
/* Dots & swipe-hint hidden by default; shown via JS on mobile/tablet */
#stickerDots,#stickerSwipeHint{display:none;}
#stickerArrows,#stickerProgressBar{display:none;}
.sticker-pkg.featured{border-color:var(--blue);border-width:2px;position:relative;}
.sticker-featured-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;padding:4px 16px;border-radius:var(--r-full);font-size:.72rem;font-weight:700;}
.sticker-pkg-icon{font-size:3rem;margin-bottom:16px;display:block;}
.sticker-pkg h3{font-family:Fraunces,serif;font-size:1.3rem;font-weight:800;margin-bottom:6px;}
.sticker-pkg-price{font-family:Fraunces,serif;font-size:2.5rem;font-weight:900;color:var(--dark);margin:12px 0;}
.sticker-pkg-price span{font-size:1rem;font-weight:400;color:var(--mid);}
.sticker-pkg-pts{display:inline-flex;align-items:center;gap:6px;background:var(--green-light);color:var(--green-dark);border-radius:var(--r-full);padding:5px 14px;font-size:.8rem;font-weight:700;margin-bottom:16px;}
.sticker-pkg p{font-size:.85rem;color:var(--mid);line-height:1.65;margin-bottom:20px;}
.sticker-pkg ul{text-align:left;margin-bottom:24px;display:flex;flex-direction:column;gap:8px;}
.sticker-pkg ul li{font-size:.84rem;color:var(--mid);display:flex;align-items:center;gap:8px;}
.sticker-pkg ul li::before{content:'✓';color:var(--green-dark);font-weight:700;font-size:.8rem;flex-shrink:0;}
/* ═══════════════════════════════════════════
██████████ PAGE: ACCOUNT / AUTH ██████████
═══════════════════════════════════════════ */
.auth-wrap{min-height:calc(100vh - var(--nav-h));display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}
.auth-left{background:linear-gradient(155deg,#1a237e 0%,#3a98f8 60%,#43A3FA 100%);padding:60px 48px;display:flex;flex-direction:column;justify-content:center;color:#fff;position:relative;overflow:hidden;}
.auth-left::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");pointer-events:none;}
.auth-left-logo{display:flex;align-items:center;gap:12px;margin-bottom:48px;}
.auth-left-logo-icon{width:72px;height:72px;border-radius:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.25);flex-shrink:0;overflow:hidden;background:#fff;}
.auth-left-logo-text{font-family:Fraunces,serif;font-size:1.5rem;font-weight:900;color:#fff;}
.auth-left-title{font-family:Fraunces,serif;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:900;line-height:1.15;margin-bottom:16px;}
.auth-left-sub{font-size:.95rem;color:rgba(255,255,255,.8);line-height:1.6;margin-bottom:40px;max-width:340px;}
.auth-feature-list{display:flex;flex-direction:column;gap:12px;}
.auth-feature{display:flex;align-items:center;gap:12px;font-size:.88rem;color:rgba(255,255,255,.85);}
.auth-feature-dot{width:8px;height:8px;border-radius:50%;background:#fff;flex-shrink:0;}
.auth-right{background:#fff;padding:48px 48px;display:flex;align-items:center;justify-content:center;overflow-y:auto;}
.auth-card{width:100%;max-width:460px;}
.auth-logo{display:none;}
.auth-tabs{display:flex;background:var(--off);border-radius:var(--r-sm);padding:4px;margin-bottom:28px;}
.auth-tab{flex:1;padding:9px;text-align:center;border-radius:8px;font-size:.88rem;font-weight:600;cursor:pointer;transition:all .2s;border:none;background:transparent;color:var(--mid);font-family:'Outfit',sans-serif;}
.auth-tab.active{background:#fff;color:var(--dark);box-shadow:var(--shadow);}
.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.auth-divider span{font-size:.78rem;color:var(--light);}
.auth-footer{text-align:center;margin-top:20px;font-size:.84rem;color:var(--mid);}
.auth-footer a{color:var(--blue);font-weight:600;cursor:pointer;}
/* Scroll-offset so forms land below sticky header */
#loginForm,#registerForm,#registerFormBedrijf,#registerFormInfluencer{scroll-margin-top:80px;}
#login-section{scroll-margin-top:80px;}
html{scroll-behavior:smooth;}
.checkbox-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:18px;}
.checkbox-row input{margin-top:3px;accent-color:var(--blue);}
.checkbox-row label{font-size:.83rem;color:var(--mid);line-height:1.5;}
/* Auth type badge on right panel */
.auth-type-badge{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;font-weight:800;font-size:.88rem;margin-bottom:24px;}
/* Left panel themed per type */
.auth-left.theme-bedrijf{background:linear-gradient(155deg,#0f172a 0%,#1e3a8a 60%,#1a237e 100%);}
.auth-left.theme-influencer{background:linear-gradient(155deg,#4c1d95 0%,#7c3aed 60%,#a855f7 100%);}
@media(max-width:768px){
.auth-wrap{grid-template-columns:1fr;}
.auth-left{display:none;}
.auth-right{padding:32px 24px;}
}
/* ═══════════════════════════════════════════
██████████ PAGE: DASHBOARD ██████████
═══════════════════════════════════════════ */
.dashboard-layout{display:grid;grid-template-columns:260px 1fr;gap:32px;padding:40px 0 64px;}
.sidebar{position:sticky;top:calc(var(--nav-h) + 16px);}
.sidebar-card{background:#fff;border-radius:var(--r);border:1.5px solid var(--border);overflow:hidden;}
.sidebar-profile{padding:24px 16px;text-align:center;border-bottom:1px solid var(--border);box-sizing:border-box;width:100%;}
.sidebar-ava{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--pink));display:flex;align-items:center;justify-content:center;font-family:Fraunces,serif;font-size:1.8rem;font-weight:900;color:#fff;margin:0 auto 12px;}
.sidebar-name{font-family:Fraunces,serif;font-size:1.2rem;font-weight:800;}
.sidebar-email{font-size:.78rem;color:var(--mid);margin-top:2px;}
.sidebar-pts{display:inline-flex;align-items:center;gap:6px;background:var(--green-light);color:var(--green-dark);border-radius:var(--r-full);padding:5px 14px;font-size:.8rem;font-weight:700;margin-top:10px;}
/* Dashboard: vol puntenoverzicht (geen pill-layout; voorkomt overflow in smalle sidebar) */
.sidebar-pts-card{display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;text-align:left;align-self:stretch;margin-top:10px;}
#page-dashboard .sidebar-profile .sidebar-pts-card{align-self:stretch;}
.sidebar-nav{padding:12px;}
.sidebar-nav-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r-sm);font-size:.88rem;font-weight:500;color:var(--mid);cursor:pointer;transition:all .2s;border:none;background:none;width:100%;text-align:left;font-family:'Outfit',sans-serif;}
.sidebar-nav-item:hover{background:var(--off);color:var(--dark);}
.sidebar-nav-item.active{background:var(--blue-light);color:var(--blue-dark);font-weight:700;}
.sidebar-nav-item .nav-icon{font-size:1rem;width:20px;text-align:center;}
.dash-content{}
.dash-section{display:none;}
.dash-section.active{display:block;}
.dash-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;}
.dash-stat{background:#fff;border-radius:var(--r);border:1.5px solid var(--border);padding:20px 22px;}
.dash-stat-icon{font-size:1.3rem;margin-bottom:10px;}
.dash-stat-num{font-family:Fraunces,serif;font-size:1.7rem;font-weight:900;}
.dash-stat-lbl{font-size:.75rem;color:var(--mid);margin-top:2px;}
.dash-title{font-family:Fraunces,serif;font-size:1.4rem;font-weight:800;margin-bottom:18px;}
.donation-history{background:#fff;border-radius:var(--r);border:1.5px solid var(--border);overflow:hidden;}
.dh-header{display:grid;grid-template-columns:1fr 120px 100px 100px;padding:12px 20px;background:var(--off);border-bottom:1px solid var(--border);font-size:.73rem;font-weight:700;color:var(--light);letter-spacing:.08em;text-transform:uppercase;}
.dh-row{display:grid;grid-template-columns:1fr 120px 100px 100px;padding:16px 20px;border-bottom:1px solid var(--border);align-items:center;font-size:.88rem;}
.dh-row:last-child{border-bottom:none;}
.dh-cause{font-weight:600;}
.dh-org{font-size:.73rem;color:var(--mid);}
.dh-status{display:inline-flex;align-items:center;gap:4px;}
.dh-pts{font-weight:700;color:var(--green-dark);}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;margin-top:4px;}
.badge-item{background:#fff;border-radius:var(--r);border:1.5px solid var(--border);padding:18px;text-align:center;transition:transform .2s;}
.badge-item:hover{transform:translateY(-3px);}
.badge-item.locked{opacity:.45;filter:grayscale(1);}
.badge-icon{font-size:2rem;margin-bottom:8px;display:block;}
.badge-name{font-size:.8rem;font-weight:700;margin-bottom:2px;}
.badge-desc{font-size:.7rem;color:var(--mid);}
.rank-position-card{background:var(--dark);color:#fff;border-radius:20px;padding:28px;margin-bottom:24px;}
.rank-pos-label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:8px;}
.rank-pos-num{font-family:Fraunces,serif;font-size:3rem;font-weight:900;color:#fff;display:flex;align-items:baseline;gap:8px;}
.rank-pos-num sup{font-size:1rem;font-weight:400;color:rgba(255,255,255,.5);}
.rank-pos-bars{margin-top:16px;}
.rank-bar-row{display:flex;justify-content:space-between;font-size:.78rem;color:rgba(255,255,255,.6);margin-bottom:6px;}
.rank-bar-row strong{color:var(--green);}
.level-progress{margin-top:16px;}
.level-row{display:flex;justify-content:space-between;margin-bottom:8px;font-size:.82rem;}
.level-name{font-weight:700;color:#fff;}
.level-pts{color:rgba(255,255,255,.5);}
.profile-form{background:#fff;border-radius:var(--r);border:1.5px solid var(--border);padding:28px 20px;box-sizing:border-box;width:100%;}
.profile-ava-section{display:flex;align-items:center;gap:20px;margin-bottom:28px;padding-bottom:28px;border-bottom:1px solid var(--border);}
.profile-ava-big{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--pink));display:flex;align-items:center;justify-content:center;font-family:Fraunces,serif;font-size:2rem;font-weight:900;color:#fff;flex-shrink:0;}
.anon-toggle{display:flex;align-items:center;justify-content:space-between;background:var(--off);border-radius:var(--r-sm);padding:16px 20px;margin-top:4px;transition:background .25s,border-left .25s;}
.toggle-switch{position:relative;width:44px;height:24px;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;inset:0;background:var(--light);border-radius:12px;cursor:pointer;transition:background .3s;}
.toggle-slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .3s;}
.toggle-switch input:checked+.toggle-slider{background:var(--blue);}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(20px);}
/* ═══════════════════════════════════════════
██════════ FOR YOU QUIZ ════════
═══════════════════════════════════════════ */
.quiz-overlay{position:fixed;inset:0;z-index:900;background:rgba(15,15,26,.7);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s;}
.quiz-overlay.open{opacity:1;pointer-events:all;}
.quiz-box{background:#fff;border-radius:24px;width:100%;max-width:560px;padding:40px;box-shadow:0 24px 80px rgba(15,15,26,.25);transform:translateY(20px);transition:transform .3s;}
.quiz-overlay.open .quiz-box{transform:translateY(0);}
.quiz-progress{height:4px;background:var(--border);border-radius:2px;margin-bottom:32px;overflow:hidden;}
.quiz-progress-fill{height:100%;background:var(--blue);border-radius:2px;transition:width .4s ease;}
.quiz-step{display:none;}
.quiz-step.active{display:block;}
.quiz-q{font-family:Fraunces,serif;font-size:1.5rem;font-weight:900;margin-bottom:8px;}
.quiz-hint{font-size:.85rem;color:var(--mid);margin-bottom:24px;}
.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.quiz-option{padding:14px 18px;border-radius:var(--r-sm);border:2px solid var(--border);background:#fff;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;font-family:'Outfit',sans-serif;text-align:left;display:flex;align-items:center;gap:10px;}
.quiz-option:hover{border-color:var(--blue);color:var(--blue);}
.quiz-option.selected{border-color:var(--blue);background:var(--blue-light);color:var(--blue-dark);font-weight:700;}
.quiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:28px;}
.quiz-step-lbl{font-size:.78rem;color:var(--light);}
/* ═══════════════════════════════════════════
DONATE MODAL
═══════════════════════════════════════════ */
#donateModal .modal-box{max-width:440px;}
.amount-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px;}
.amount-opt{padding:14px;border-radius:var(--r-sm);border:2px solid var(--border);background:#fff;font-family:Fraunces,serif;font-size:1.2rem;font-weight:900;cursor:pointer;transition:all .2s;text-align:center;position:relative;}
.amount-opt:hover{border-color:var(--blue);color:var(--blue);}
/* Geselecteerd: gevulde blauwe achtergrond + witte tekst */
.amount-opt.sel{border-color:var(--blue) !important;background:var(--blue) !important;color:#fff !important;}
.amount-opt.sel::after{color:rgba(255,255,255,.8) !important;}
.pay-methods{display:flex;gap:8px;margin-top:4px;}
.pay-opt{flex:1;padding:11px;border-radius:var(--r-sm);border:2px solid var(--border);background:#fff;font-size:.83rem;font-weight:600;cursor:pointer;transition:all .2s;text-align:center;font-family:'Outfit',sans-serif;}
.pay-opt:hover{border-color:var(--blue);}
.pay-opt.sel{border-color:var(--blue);background:var(--blue-light);color:var(--blue-dark);}
.donate-pts-preview{background:var(--green-light);border:1px solid rgba(93,232,176,.35);border-radius:var(--r-sm);padding:12px 16px;font-size:.83rem;color:var(--mid);margin:14px 0;text-align:center;}
.freq-tab{flex:0 0 auto;white-space:nowrap;padding:7px 14px;border:none;border-radius:var(--r-sm);background:transparent;font-size:.78rem;font-weight:600;color:var(--mid);cursor:pointer;transition:all .18s;}
.freq-tab.freq-active{background:#fff;color:#1a237e;box-shadow:0 1px 4px rgba(0,0,0,.1);}
div:has(>.freq-tab)::-webkit-scrollbar{display:none;}
@media(max-width:480px){.freq-tab{font-size:.75rem;padding:7px 11px;}}
.amount-opt.popular{border-color:rgba(67,163,250,.5);background:#f0f7ff;}
.amount-opt.popular::after{content:"⭐ populair";display:block;font-size:.6rem;color:var(--blue);font-weight:700;margin-top:2px;}
/* Popular + selected = selected wins */
.amount-opt.popular.sel{border-color:var(--blue) !important;background:var(--blue) !important;color:#fff !important;}
.amount-opt.popular.sel::after{color:rgba(255,255,255,.75) !important;}
.donate-pts-preview strong{color:var(--dark);}
.confirm-screen{text-align:center;padding:16px 0;}
.confirm-icon{font-size:4rem;margin-bottom:16px;display:block;animation:popIn .5s cubic-bezier(.34,1.56,.64,1);}
@keyframes popIn{from{transform:scale(0);}to{transform:scale(1);}}
.confirm-pts-badge{display:inline-flex;align-items:center;gap:8px;background:var(--green-light);border:1px solid rgba(93,232,176,.35);border-radius:var(--r-full);padding:8px 20px;font-weight:700;color:var(--green-dark);margin:14px 0;font-size:.9rem;}
/* ═══════════════════════════════════════════
ANIMATIONS
═══════════════════════════════════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
/* ═══════════════════════════════════════════
FOOTER
═══════════════════════════════════════════ */
.site-footer{background:var(--dark);color:rgba(255,255,255,.5);padding:56px 0 32px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px;}
.footer-brand .footer-logo{font-family:Fraunces,serif;font-size:1.4rem;font-weight:900;color:#fff;display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.footer-brand p{font-size:.85rem;line-height:1.7;max-width:280px;}
.footer-col h4{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:14px;}
.footer-col a{display:block;font-size:.85rem;color:rgba(255,255,255,.45);margin-bottom:8px;cursor:pointer;transition:color .2s;}
.footer-col a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.footer-bottom p{font-size:.78rem;}
.footer-trust{display:flex;gap:12px;align-items:center;}
.trust-badge{background:rgba(255,255,255,.07);border-radius:var(--r-sm);padding:5px 12px;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.5);}
/* ═══════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════ */
@media(max-width:1024px){
.hero-inner{grid-template-columns:1fr;gap:40px;}
.hero-right{display:none;}
.game-split{grid-template-columns:1fr;}
.sticker-promo{grid-template-columns:1fr;gap:32px;padding:40px 36px;box-sizing:border-box;width:100%;max-width:100%;}
.footer-grid{grid-template-columns:1fr 1fr 1fr;}
.dashboard-layout{grid-template-columns:1fr;}
.sidebar{position:static;}
/* rank-row tablet — afgehandeld door .rl-row klasse (zie geconsolideerde CSS) */
.dh-header,.dh-row{grid-template-columns:1fr 100px 90px;}
.dh-header>:last-child,.dh-row>:last-child{display:none;}
/* ── sticker-cards tablet scroll ── */
.sticker-cards{
grid-template-columns:repeat(3,280px);
overflow-x:auto;
-webkit-overflow-scrolling:touch;
padding-bottom:12px;
gap:14px;
}
/* ── Carousel ook actief op tablet (769-1024px) ── */
.sticker-wrapper{
overflow-x: scroll;
overflow-y: visible;
/* -webkit-overflow-scrolling verwijderd: conflicteert met scroll-snap */
scroll-snap-type: x mandatory;
scroll-padding-inline: max(16px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right));
scroll-behavior: auto;
scrollbar-width: none;
touch-action: pan-x;
margin-left: -24px;
margin-right: -24px;
width: calc(100% + 48px);
margin-top: 34px;
padding: 20px 0 12px;
box-sizing: border-box;
/* GPU-laag: voorkomt repaint bij scroll */
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: scroll-position;
}
.sticker-wrapper::-webkit-scrollbar{ display: none; }
.sticker-track{
display: flex !important;
grid-template-columns: none !important;
gap: 14px !important;
margin: 0 !important;
padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)) !important;
transform: none !important;
transition: none !important;
width: max-content;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.sticker-card{
flex: 0 0 min(384px, calc(100vw - 52px)) !important;
min-width: min(384px, calc(100vw - 52px)) !important;
max-width: min(384px, calc(100vw - 52px)) !important;
width: min(384px, calc(100vw - 52px)) !important;
margin: 0 !important;
scroll-snap-align: start;
scroll-snap-stop: normal;
box-sizing: border-box;
padding: 0 8px !important;
/* Kaart-animaties alleen via opacity (geen scale = geen layout-thrashing) */
will-change: opacity;
transition: opacity 0.25s ease;
}
.sticker-pkg{
overflow: visible !important;
position: relative;
will-change: transform, box-shadow;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
#stickerDots{ display: flex; }
#stickerSwipeHint{ display: flex; }
}
@media(max-width:768px){
:root{--nav-h:60px;}
.nav-links,.nav-right .btn{display:none;}
/* Hamburger weer zichtbaar: volledige menu (nav-mobile) — was per ongeluk overal verborgen */
.nav-hamburger{display:flex!important;flex-direction:column;align-items:center;justify-content:center;}
.nav-mobile-account-btn{display:none !important;}
.nav-inner{padding:0 12px;}
.nav-right{gap:6px;}
.container,.container-sm{padding:0 20px;}
.section{padding:64px 0;}
.hero-inner{padding:48px 20px;}
.hero h1{font-size:2.4rem;}
.hiw-grid{grid-template-columns:1fr 1fr;}
.fcauses-grid{grid-template-columns:1fr;}
/* ── Scroll-snap carousel (mobiel/tablet) ── */
/* 1. Desktop grid uitschakelen */
.sticker-wrapper{
overflow-x: scroll;
overflow-y: visible;
/* -webkit-overflow-scrolling verwijderd: conflicteert met scroll-snap */
scroll-snap-type: x mandatory;
scroll-padding-inline: max(16px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right));
scroll-behavior: auto;
scrollbar-width: none; /* Firefox */
touch-action: pan-x;
/* Bleed voorbij container padding zodat wrapper = volledige viewport */
margin-left: -20px;
margin-right: -20px;
width: calc(100% + 40px);
margin-top: 34px;
padding: 20px 0 12px;
box-sizing: border-box;
/* GPU-laag: voorkomt repaint bij scroll */
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: scroll-position;
}
.sticker-wrapper::-webkit-scrollbar{ display:none; }
/* 2. Track = gewone flex-rij, geen transform */
.sticker-track{
display: flex !important;
grid-template-columns: none !important;
gap: 14px !important;
margin: 0 !important;
padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)) !important;
transform: none !important;
transition: none !important;
will-change: auto;
width: max-content;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* 3. Smalle kaarten + peek van volgende pakket (rechts) */
.sticker-card{
flex: 0 0 min(384px, calc(100vw - 52px)) !important;
min-width: min(384px, calc(100vw - 52px)) !important;
max-width: min(384px, calc(100vw - 52px)) !important;
width: min(384px, calc(100vw - 52px)) !important;
margin: 0 !important;
scroll-snap-align: start;
scroll-snap-stop: normal;
box-sizing: border-box;
padding: 0 8px !important;
user-select: none;
-webkit-user-select: none;
/* Alleen opacity-transitie: GPU-composited, geen layout/paint */
will-change: opacity;
transition: opacity 0.25s ease;
}
.sticker-pkg{
padding: 28px 20px;
border-radius: 20px;
overflow: visible !important; /* Badge niet afknippen */
position: relative;
will-change: opacity, box-shadow;
transform: translateZ(0);
-webkit-transform: translateZ(0);
/* Transitie alleen op veilige GPU-props */
transition: opacity 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
/* ── Carousel kaart-animaties: opacity i.p.v. scale (geen layout-thrashing) ── */
/* Klasse wordt pas gezet nádat scroll tot stilstand komt → geen jitter */
.sticker-card:not(.sc-active) .sticker-pkg{
opacity: 0.55;
box-shadow: none;
}
.sticker-card.sc-active .sticker-pkg{
opacity: 1;
box-shadow: 0 12px 40px rgba(0,0,0,.13);
}
.sticker-card.sc-active .sticker-pkg.featured{
box-shadow: 0 16px 48px rgba(67,163,250,.25);
}
#stickerDots{
display: flex;
justify-content: center;
gap: 8px;
margin-top: 18px;
margin-bottom: 4px;
}
.sticker-dots{
display: flex;
justify-content: center;
gap: 8px;
margin-top: 18px;
margin-bottom: 4px;
}
.sticker-dot{
width: 8px; height: 8px;
border-radius: 50%;
background: var(--border);
transition: background .25s, transform .25s;
cursor: pointer;
border: none;
padding: 0;
flex-shrink: 0;
}
.sticker-dot.active{
background: var(--blue);
transform: scale(1.4);
}
/* 5. Swipe hint */
@keyframes swipeHint{
0% { opacity:0; transform:translateX(0); }
30% { opacity:1; }
70% { opacity:1; transform:translateX(18px); }
100%{ opacity:0; transform:translateX(0); }
}
#stickerSwipeHint{
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: .78rem;
color: var(--mid);
margin-top: 8px;
animation: swipeHint 2s ease-in-out 0.6s 2 both;
}
.swipe-hint{
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: .78rem;
color: var(--mid);
margin-top: 8px;
animation: swipeHint 2s ease-in-out 0.6s 2 both;
}
.swipe-hint svg{ width:18px; height:18px; }
/* 4. Dot indicators */
.sticker-nav-arrows{
display: flex;
justify-content: center;
gap: 12px;
margin-top: 16px;
}
.sticker-arrow{
width: 40px; height: 40px;
border-radius: 50%;
border: 1.5px solid var(--border);
background: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .2s, border-color .2s, transform .15s;
color: var(--dark);
font-size: 1rem;
}
.sticker-arrow:hover{
background: var(--blue);
border-color: var(--blue);
color: #fff;
transform: scale(1.08);
}
.sticker-arrow:disabled{
opacity: .35;
pointer-events: none;
}
/* Auto-play progress bar */
.sticker-progress-bar{
height: 2px;
background: var(--border);
border-radius: 2px;
margin: 10px auto 0;
max-width: 120px;
overflow: hidden;
}
.sticker-progress-fill{
height: 100%;
background: var(--blue);
border-radius: 2px;
width: 0%;
transition: width linear;
}
.sticker-promo{grid-template-columns:1fr;gap:28px;padding:28px 20px;box-sizing:border-box;width:100%;max-width:100%;margin:0;}
.sticker-visual{box-sizing:border-box;width:100%;max-width:100%;}
.cause-detail-header{grid-template-columns:1fr;}
.cause-detail-thumb{height:200px;}
.dash-stat-grid{grid-template-columns:1fr 1fr;}
.stats-row{gap:20px;}
.stat-num{font-size:1.6rem;}
.input-row{grid-template-columns:1fr;}
.footer-grid{grid-template-columns:1fr 1fr;}
.footer-brand{grid-column:1 / -1;}
/* rank-row mobiel — afgehandeld door .rl-row klasse (zie geconsolideerde CSS) */
}
@media(max-width:480px){
.hero-actions{flex-direction:column;}
.hiw-grid{grid-template-columns:1fr;}
.quiz-options{grid-template-columns:1fr;}
.amount-grid{grid-template-columns:1fr 1fr 1fr;}
.dash-stat-grid{grid-template-columns:1fr 1fr;}
}
/* ═══ MOBILE OPTIMALISATIES (max 600px) ═══ */
@media(max-width:600px){
/* Algemeen */
.container,.container-sm{padding:0 16px;}
.section{padding:48px 0;}
.section-sm{padding:36px 0;}
/* Navbar */
.nav-inner{padding:0 16px;}
/* Hero */
.hero-inner{padding:40px 16px 48px;}
.hero h1{font-size:2rem;line-height:1.1;}
.hero-desc{font-size:.95rem;}
.hero-actions{flex-direction:column;gap:10px;width:100%;}
.hero-actions .btn{width:100%;text-align:center;}
.hero-trust{flex-direction:column;align-items:flex-start;gap:8px;}
/* Stats bar */
.stats-row{display:grid;grid-template-columns:1fr 1fr;gap:20px 12px;}
.stat-item{text-align:center;}
.stat-num{font-size:1.5rem;}
/* Cause cards */
.fcauses-grid{grid-template-columns:1fr;}
/* Punten & ranglijst split */
.game-split{grid-template-columns:1fr;gap:36px;}
.leaderboard-widget{margin:0;}
/* Sticker promo */
.sticker-promo{grid-template-columns:1fr;gap:24px;text-align:left;padding:20px 16px;box-sizing:border-box;width:100%;max-width:100%;margin:0;border-radius:16px;}
.sticker-visual{display:flex;justify-content:center;margin:0 auto;box-sizing:border-box;width:100%;max-width:100%;padding:20px 16px;}
#page-sticker .sticker-hero .container{grid-template-columns:1fr!important;text-align:center!important;padding:40px 20px!important;}
#page-sticker .sticker-hero .container>div:last-child{display:flex!important;justify-content:center!important;}
/* Section titles */
.section-title{font-size:1.6rem;}
/* Ranglijst */
.rank-table{border-radius:12px!important;overflow:hidden;}
#rankUserPosBox{flex-direction:column!important;gap:8px!important;padding:14px 16px!important;}
/* rank-row — afgehandeld door .rl-row klasse (zie geconsolideerde CSS) */
.rank-thead>:nth-child(3),.rank-row>:nth-child(3){font-size:.8rem;}
/* Puntensysteem hero grid → 1 col */
.pts-earn-grid,[style*="grid-template-columns:repeat(3"]{grid-template-columns:1fr!important;}
[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr 1fr!important;}
/* Puntensysteem pill */
[style*="inline-grid;grid-template-columns:auto auto auto"]{
grid-template-columns:1fr!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
gap:0!important;
width:100%;
max-width:280px;
margin:0 auto;
}
[style*="inline-grid;grid-template-columns:auto auto auto"] > div{
border-right:none!important;
border-bottom:1px solid rgba(255,255,255,.12);
width:100%;
text-align:center;
}
/* Start project */
.sp-hero [class*="container"]{padding:0 16px;}
.sp-hero h1{font-size:1.8rem;}
[style*="grid-template-columns:1fr 1fr"]:not(.nav-mobile){grid-template-columns:1fr!important;}
/* Sticker page hero */
.sticker-hero-inner{grid-template-columns:1fr;text-align:center;}
.sticker-hero-inner .sticker-visual{display:flex;justify-content:center;margin-top:24px;}
/* Auth pagina */
.auth-box{padding:28px 20px;border-radius:20px;}
.type-switch{flex-direction:column;gap:8px;}
.type-btn{width:100%;}
/* Dashboard */
.dash-stat-grid{grid-template-columns:1fr 1fr;}
.dashboard-layout{grid-template-columns:1fr;}
.sidebar{position:static;top:auto;}
/* Bedrijf dashboard sidebar */
.biz-shell{grid-template-columns:1fr;}
.biz-sidebar{display:none;}
/* Modals */
.modal-box{padding:24px 20px;border-radius:20px;margin:16px;}
.modal-box h2{font-size:1.3rem;}
/* Footer */
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.footer-brand{grid-column:1 / -1;text-align:center;}
.footer-col{text-align:left;}
.footer-links{text-align:left;}
/* Goede doelen pagina */
.doelen-filters{flex-direction:column;gap:10px;}
.doelen-grid{grid-template-columns:1fr;}
/* How it works */
.hiw-grid{grid-template-columns:1fr;max-width:340px;margin:0 auto;}
.hiw-step{text-align:center;}
/* Cause detail */
.cause-detail-header{grid-template-columns:1fr;gap:24px;}
.detail-main-grid{grid-template-columns:1fr!important;}
.cause-detail-thumb{height:220px;}
/* Puntensysteem beloningen grid */
.rewards-grid,[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr 1fr!important;}
/* Ranglijst leaderboard scores tabel */
.rank-row-inner{gap:6px;}
/* Featured project banner */
#homeFeaturedCard{border-radius:16px;}
/* Admin - hide on mobile */
.admin-sidebar{display:none;}
.admin-stats-grid{grid-template-columns:1fr 1fr;}
/* HOE-HET-WERKT steps */
.steps-grid{grid-template-columns:1fr;}
/* Input fields voller */
.form-input,.form-select,.form-textarea{font-size:16px;} /* voorkom zoom op iOS */
/* Buttons in hero's en sections */
.btn-lg{padding:14px 24px;font-size:.95rem;}
.btn{min-height:44px;} /* touch target */
/* Scrollable tabs */
.tabs-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* Hoe het werkt page — sticker section */
[style*="grid:1fr auto"],[style*="grid-template-columns:1fr auto"]{grid-template-columns:1fr!important;}
[style*="grid-template-columns:1fr auto"] > *:last-child{display:none;}
}
/* ═══ KLEINE TELEFOON (max 380px) ═══ */
@media(max-width:380px){
.hero h1{font-size:1.75rem;}
/* rank-row 380px — afgehandeld door .rl-row klasse */
.stat-num{font-size:1.3rem;}
.section-title{font-size:1.4rem;}
.amount-grid{grid-template-columns:1fr 1fr;}
.rewards-grid{grid-template-columns:1fr!important;}
}
/* Util */
.hidden{display:none!important;}
/* View toggle buttons */
.view-toggle{display:flex;gap:6px;background:var(--off);border-radius:var(--r-full);padding:4px;}
.view-toggle-btn{padding:7px 18px;border-radius:var(--r-full);font-size:.85rem;font-weight:600;border:none;background:transparent;color:var(--mid);cursor:pointer;font-family:'Outfit',sans-serif;transition:all .18s;}
.view-toggle-btn.active{background:#fff;color:var(--dark);box-shadow:0 1px 4px rgba(15,15,26,.1);}
/* Map */
#causeMap{height:580px;border-radius:var(--r);border:1.5px solid var(--border);overflow:hidden;}
@media(max-width:600px){
#causeMap{height:420px;border-radius:12px;}
#causesMapView{padding-bottom:80px;}
}
.leaflet-popup-content-wrapper{border-radius:12px!important;padding:0!important;overflow:hidden;box-shadow:0 8px 32px rgba(15,15,26,.14)!important;}
.leaflet-popup-content{margin:0!important;min-width:220px!important;}
.map-popup{padding:16px;}
.map-popup h4{font-family:Fraunces,serif;font-size:1rem;font-weight:900;color:var(--dark);margin-bottom:4px;line-height:1.25;}
.map-popup p{font-size:.8rem;color:var(--mid);line-height:1.5;margin-bottom:10px;}
.map-popup-btn{display:block;width:100%;text-align:center;background:var(--dark);color:#fff;border:none;border-radius:8px;padding:8px 12px;font-size:.82rem;font-weight:700;cursor:pointer;font-family:'Outfit',sans-serif;}
.map-popup-btn:hover{background:var(--blue-dark);}
/* Sector legend */
.map-legend{background:#fff;border-radius:var(--r-sm);border:1.5px solid var(--border);padding:12px 16px;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.legend-item{display:flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600;color:var(--dark);}
.mt4{margin-top:4px;} .mt8{margin-top:8px;} .mt12{margin-top:12px;} .mt16{margin-top:16px;} .mt24{margin-top:24px;} .mt32{margin-top:32px;} .mt48{margin-top:48px;}
.mb8{margin-bottom:8px;} .mb16{margin-bottom:16px;} .mb24{margin-bottom:24px;} .mb32{margin-bottom:32px;}
.flex{display:flex;} .items-center{align-items:center;} .gap8{gap:8px;} .gap12{gap:12px;} .gap16{gap:16px;}
.text-center{text-align:center;}
.w100{width:100%;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.divider{height:1px;background:var(--border);margin:24px 0;}
/* ═══════ ADMIN PANEL ═══════ */
#page-admin-login{display:none;position:fixed;inset:0;z-index:2000;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);align-items:center;justify-content:center;}
#page-admin-login.active{display:flex;}
.admin-login-box{background:rgba(255,255,255,.05);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:48px;width:100%;max-width:420px;text-align:center;}
.admin-login-logo{width:64px;height:64px;border-radius:16px;overflow:hidden;margin:0 auto 20px;box-shadow:0 8px 32px rgba(67,163,250,.4);}
.admin-login-logo img{width:100%;height:100%;object-fit:cover;}
.admin-login-title{font-family:Fraunces,serif;font-size:1.8rem;font-weight:900;color:#fff;margin-bottom:6px;}
.admin-login-sub{font-size:.85rem;color:rgba(255,255,255,.5);margin-bottom:32px;}
.admin-login-field{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:12px 16px;width:100%;color:#fff;font-size:.92rem;margin-bottom:12px;outline:none;font-family:Outfit,sans-serif;box-sizing:border-box;transition:border-color .2s;}
.admin-login-field::placeholder{color:rgba(255,255,255,.35);}
.admin-login-field:focus{border-color:rgba(67,163,250,.7);}
.admin-login-btn{width:100%;padding:13px;background:linear-gradient(135deg,#43A3FA,#1a7fd4);border:none;border-radius:10px;color:#fff;font-weight:700;font-size:.95rem;cursor:pointer;margin-top:8px;font-family:Outfit,sans-serif;transition:opacity .2s;}
.admin-login-btn:hover{opacity:.88;}
.admin-login-err{background:rgba(255,100,100,.15);border:1px solid rgba(255,100,100,.3);border-radius:8px;padding:10px;font-size:.82rem;color:#ff8a8a;margin-bottom:12px;display:none;}
.admin-back{font-size:.8rem;color:rgba(255,255,255,.35);margin-top:18px;cursor:pointer;text-decoration:underline;}
.admin-back:hover{color:rgba(255,255,255,.6);}
/* Admin panel wrapper */
#page-admin{background:#f0f2f7;}
/* Always hide footer and bottom nav on admin */
body.admin-mode #siteFooter,
body.page-admin #siteFooter { display:none !important; }
.admin-shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh;}
.admin-sidebar{background:linear-gradient(180deg,#1a237e 0%,#283593 100%);color:#fff;padding:0;display:flex;flex-direction:column;}
.admin-sidebar-logo{padding:24px 20px 20px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.12);}
.admin-sidebar-logo img{width:36px;height:36px;border-radius:9px;object-fit:cover;}
.admin-sidebar-logo span{font-family:Fraunces,serif;font-size:1rem;font-weight:900;color:#fff;}
.admin-sidebar-badge{background:rgba(255,255,255,.15);border-radius:4px;padding:2px 7px;font-size:.65rem;font-weight:700;color:rgba(255,255,255,.8);margin-left:4px;}
.admin-nav{padding:16px 12px;flex:1;display:flex;flex-direction:column;gap:2px;}
.admin-nav-item{
padding:10px 12px;border-radius:8px;cursor:pointer;font-size:.84rem;
font-weight:500;color:rgba(255,255,255,.7);
display:flex;align-items:center;gap:10px;
transition:all .18s;line-height:1.3;
white-space:nowrap;overflow:hidden;
}
.admin-nav-item svg{flex-shrink:0;opacity:.75;transition:opacity .15s;}
.admin-nav-item:hover svg,.admin-nav-item.active svg{opacity:1;}
.admin-nav-item:hover{background:rgba(255,255,255,.1);color:#fff;}
.admin-nav-item.active{background:rgba(255,255,255,.18);color:#fff;font-weight:700;}
.admin-nav-section{font-size:.68rem;font-weight:700;color:rgba(255,255,255,.3);letter-spacing:.1em;text-transform:uppercase;padding:16px 12px 6px;margin-top:8px;}
.admin-sidebar-footer{padding:16px 20px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:10px;}
.admin-sidebar-user{font-size:.82rem;color:rgba(255,255,255,.7);}
.admin-sidebar-user strong{display:block;color:#fff;font-size:.87rem;}
.admin-logout{margin-left:auto;background:rgba(255,255,255,.1);border:none;border-radius:6px;padding:5px 10px;color:rgba(255,255,255,.7);font-size:.75rem;cursor:pointer;font-family:Outfit,sans-serif;transition:background .2s;}
.admin-logout:hover{background:rgba(255,255,255,.2);}
/* Admin main area */
.admin-main{padding:32px;overflow:visible;}
.admin-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;}
.admin-topbar h1{font-family:Fraunces,serif;font-size:1.6rem;font-weight:900;color:#1a237e;}
.admin-topbar p{font-size:.85rem;color:#6b7280;margin-top:2px;}
.admin-panel{display:none;}
.admin-panel.active{display:block;}
/* Admin cards */
.admin-card{background:#fff;border-radius:16px;padding:24px;border:1px solid #e5e7eb;margin-bottom:20px;}
.admin-card-title{font-family:Fraunces,serif;font-size:1.05rem;font-weight:800;color:#1a237e;margin-bottom:4px;display:flex;align-items:center;gap:8px;}
.admin-card-sub{font-size:.82rem;color:#6b7280;margin-bottom:20px;}
.admin-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;}
.admin-stat{background:#fff;border-radius:14px;padding:20px;border:1px solid #e5e7eb;text-align:center;}
.admin-stat-num{font-family:Fraunces,serif;font-size:2rem;font-weight:900;color:#1a237e;}
.admin-stat-lbl{font-size:.78rem;color:#6b7280;margin-top:4px;}
.admin-stat-trend{font-size:.72rem;color:#059669;font-weight:700;margin-top:2px;}
/* Featured causes grid */
.featured-pick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.featured-pick{border:2px solid #e5e7eb;border-radius:12px;padding:14px;cursor:pointer;transition:all .2s;position:relative;}
.featured-pick.selected{border-color:#1a237e;background:#eef2ff;}
.featured-pick:hover{border-color:#93c5fd;}
.featured-pick .pick-name{font-weight:700;font-size:.87rem;color:#1f2937;margin-bottom:3px;}
.featured-pick .pick-sector{font-size:.72rem;color:#6b7280;}
.featured-pick .pick-check{position:absolute;top:10px;right:10px;width:22px;height:22px;background:#1a237e;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem;opacity:0;transition:opacity .2s;}
.featured-pick.selected .pick-check{opacity:1;}
.featured-slot{border:2px dashed #d1d5db;border-radius:12px;padding:16px;text-align:center;font-size:.82rem;color:#9ca3af;}
.featured-slot.filled{border-style:solid;border-color:#1a237e;background:#eef2ff;}
.featured-slot-label{font-size:.7rem;font-weight:700;color:#1a237e;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.featured-slot-name{font-weight:700;font-size:.9rem;color:#1f2937;}
.featured-slot-sector{font-size:.72rem;color:#6b7280;}
/* FAQ editor */
.faq-edit-item{border:1px solid #e5e7eb;border-radius:10px;padding:16px;margin-bottom:10px;background:#fafafa;}
.faq-edit-item input,.faq-edit-item textarea{width:100%;border:1px solid #d1d5db;border-radius:7px;padding:9px 12px;font-size:.85rem;font-family:Outfit,sans-serif;color:#1f2937;background:#fff;box-sizing:border-box;outline:none;transition:border-color .18s;}
.faq-edit-item input:focus,.faq-edit-item textarea:focus{border-color:#1a237e;}
.faq-edit-item textarea{min-height:72px;resize:vertical;}
.faq-edit-item label{font-size:.75rem;font-weight:700;color:#6b7280;display:block;margin-bottom:4px;margin-top:10px;}
.faq-edit-controls{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;}
.faq-add-btn{display:flex;align-items:center;gap:6px;background:#eef2ff;border:1.5px dashed #1a237e;border-radius:8px;padding:10px 16px;color:#1a237e;font-weight:700;font-size:.83rem;cursor:pointer;margin-top:8px;font-family:Outfit,sans-serif;transition:background .18s;}
.faq-add-btn:hover{background:#dce4ff;}
/* Admin table (gebruikers) */
.admin-table{width:100%;border-collapse:collapse;font-size:.84rem;}
.admin-table th{text-align:left;padding:10px 14px;background:#f3f4f6;color:#6b7280;font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;}
.admin-table td{padding:12px 14px;border-bottom:1px solid #f3f4f6;color:#1f2937;}
.admin-table tr:hover td{background:#fafafa;}
/* Scroll wrapper for dynamically generated admin tables */
.admin-table-scroll-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.admin-chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700;}
.admin-chip.green{background:#d1fae5;color:#059669;}
.admin-chip.blue{background:#dbeafe;color:#1d4ed8;}
.admin-chip.gray{background:#f3f4f6;color:#6b7280;}
.admin-chip.red{background:#fee2e2;color:#dc2626;}
.admin-view-btn{background:#eef2ff;border:none;border-radius:6px;padding:5px 12px;color:#1a237e;font-weight:700;font-size:.75rem;cursor:pointer;font-family:Outfit,sans-serif;transition:background .18s;}
.admin-view-btn:hover{background:#dce4ff;}
/* Admin input/select */
.admin-input{width:100%;border:1px solid #d1d5db;border-radius:8px;padding:10px 14px;font-size:.88rem;font-family:Outfit,sans-serif;color:#1f2937;box-sizing:border-box;outline:none;transition:border-color .2s;}
.admin-input:focus{border-color:#1a237e;box-shadow:0 0 0 3px rgba(26,35,126,.1);}
.admin-save-btn{background:#1a237e;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-weight:700;font-size:.88rem;cursor:pointer;font-family:Outfit,sans-serif;transition:opacity .2s;display:inline-flex;align-items:center;gap:7px;}
.admin-save-btn:hover{opacity:.88;}
.admin-cancel-btn{background:#f3f4f6;color:#6b7280;border:none;border-radius:8px;padding:10px 22px;font-weight:700;font-size:.88rem;cursor:pointer;font-family:Outfit,sans-serif;}
.admin-delete-btn{background:#fee2e2;color:#dc2626;border:none;border-radius:6px;padding:5px 10px;font-size:.75rem;cursor:pointer;font-family:Outfit,sans-serif;font-weight:700;}
.admin-toast{position:fixed;bottom:24px;right:24px;background:#1a237e;color:#fff;padding:12px 22px;border-radius:10px;font-size:.88rem;font-weight:600;z-index:9999;transform:translateY(60px);opacity:0;transition:all .3s;}
.admin-toast.show{transform:translateY(0);opacity:1;}
/* Gebruiker detail modal */
.admin-user-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:3000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;}
.admin-user-modal.open{opacity:1;pointer-events:all;}
.admin-user-modal-box{background:#fff;border-radius:20px;padding:32px;max-width:560px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.25);}
.admin-user-modal-close{float:right;background:none;border:none;font-size:1.3rem;cursor:pointer;color:#6b7280;}
/* Logo uploader */
.logo-preview-box{border:2px dashed #d1d5db;border-radius:12px;padding:20px;text-align:center;margin-bottom:12px;cursor:pointer;transition:border-color .2s;}
.logo-preview-box:hover{border-color:#1a237e;}
.logo-preview-box img{max-width:120px;max-height:60px;object-fit:contain;}
@media(max-width:768px){.admin-shell{grid-template-columns:1fr;}.admin-sidebar{display:none;}.admin-stats-grid{grid-template-columns:repeat(2,1fr);}.featured-pick-grid{grid-template-columns:1fr 1fr;}#adminMobileBar{display:flex!important;}}
/* Navbar editor */
.navbar-editor-preview{background:linear-gradient(90deg,#1a1a2e,#16213e,#0f3460);border-radius:10px;padding:10px 16px;display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.navbar-editor-preview a{color:#fff;font-size:.8rem;padding:4px 10px;border-radius:6px;background:rgba(255,255,255,.1);text-decoration:none;}
.navbar-editor-item{display:flex;align-items:center;gap:8px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:8px 12px;margin-bottom:6px;}
.navbar-editor-item input{border:none;background:transparent;font-size:.88rem;flex:1;outline:none;}
/* User profile tabs */
.uprofile-tabs{display:flex;gap:4px;border-bottom:2px solid #e5e7eb;margin-bottom:16px;overflow-x:auto;}
.uprofile-tab{padding:8px 14px;background:none;border:none;cursor:pointer;font-size:.83rem;color:#6b7280;border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;}
.uprofile-tab.active{color:#1a237e;border-bottom-color:#1a237e;font-weight:700;}
.uprofile-tab-panel{display:none;}.uprofile-tab-panel.active{display:block;}
/* ══ START PROJECT ══════════════════════════════ */
.sp-hero{background:linear-gradient(135deg,var(--blue) 0%,#1a7fd4 100%);color:#fff;padding:88px 0 72px;text-align:center;position:relative;overflow:hidden;}
.sp-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 90% 60% at 50% -10%,rgba(255,255,255,.08) 0%,transparent 65%);pointer-events:none;}
.sp-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(139,92,246,.2);border:1px solid rgba(139,92,246,.4);border-radius:50px;padding:6px 18px;font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:22px;color:rgba(255,255,255,.85);}
.sp-projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;}
.sp-card{background:#fff;border-radius:22px;border:1.5px solid #e8ecf8;overflow:hidden;box-shadow:0 4px 24px rgba(15,23,42,.07);transition:transform .2s,box-shadow .2s;cursor:pointer;}
.sp-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(15,23,42,.13);}
.sp-card-banner{height:160px;display:flex;align-items:flex-end;padding:16px;position:relative;}
.sp-card-banner-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 60%);}
.sp-card-cat{position:relative;z-index:1;display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);border-radius:50px;padding:4px 12px;font-size:.73rem;font-weight:700;color:#fff;}
.sp-card-body{padding:20px 22px 22px;}
.sp-card-title{font-family:Fraunces,serif;font-size:1.12rem;font-weight:900;color:#0f172a;margin-bottom:6px;line-height:1.25;}
.sp-card-desc{font-size:.82rem;color:#6b7280;line-height:1.55;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.sp-progress-wrap{margin-bottom:14px;}
.sp-progress-bar-bg{height:7px;background:#f1f5f9;border-radius:99px;overflow:hidden;margin:6px 0;}
.sp-progress-bar-fill{height:100%;border-radius:99px;transition:width .6s ease;}
.sp-progress-meta{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;}
.sp-progress-raised{font-family:Fraunces,serif;font-weight:900;font-size:1rem;color:#0f172a;}
.sp-progress-pct{font-weight:700;font-size:.78rem;border-radius:6px;padding:2px 8px;}
.sp-card-footer{display:flex;align-items:center;justify-content:space-between;}
.sp-avatar-row{display:flex;align-items:center;gap:-4px;}
.sp-avatar{width:26px;height:26px;border-radius:50%;border:2px solid #fff;font-size:.68rem;font-weight:800;display:flex;align-items:center;justify-content:center;color:#fff;margin-left:-6px;}
.sp-avatar:first-child{margin-left:0;}
.sp-donate-btn{background:linear-gradient(135deg,#6d28d9,#7c3aed);color:#fff;border:none;border-radius:10px;padding:8px 18px;font-size:.82rem;font-weight:700;cursor:pointer;transition:opacity .15s;}
.sp-donate-btn:hover{opacity:.88;}
.sp-days-left{font-size:.75rem;color:#9ca3af;display:flex;align-items:center;gap:4px;}
/* Create form */
.sp-form-section{background:#fff;padding:72px 0;}
.sp-form-card{background:#fff;border:1.5px solid #e2e8f0;border-radius:24px;padding:40px 44px;box-shadow:0 4px 32px rgba(15,23,42,.06);max-width:820px;margin:0 auto;}
@media(max-width:768px){
#spCreateGrid{grid-template-columns:1fr!important;gap:20px!important;}
.sp-form-card{padding:24px 16px!important;border-radius:16px!important;}
#sp-section-create{padding:32px 0!important;}
}
@media(max-width:480px){
.sp-form-card{padding:18px 12px!important;}
}
.sp-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.sp-field{display:flex;flex-direction:column;gap:7px;}
.sp-field label{font-size:.82rem;font-weight:700;color:#374151;letter-spacing:.02em;}
.sp-field input,.sp-field textarea,.sp-field select{border:1.5px solid #e2e8f0;border-radius:10px;padding:11px 14px;font-size:.9rem;font-family:Outfit,sans-serif;color:#111827;background:#fafafa;transition:border-color .15s,background .15s;outline:none;width:100%;box-sizing:border-box;}
.sp-field input:focus,.sp-field textarea:focus,.sp-field select:focus{border-color:#7c3aed;background:#fff;}
.sp-field-full{grid-column:1/-1;}
.sp-color-row{display:flex;gap:10px;flex-wrap:wrap;}
.sp-color-opt{width:32px;height:32px;border-radius:8px;cursor:pointer;border:2.5px solid transparent;transition:border-color .15s,transform .15s;flex-shrink:0;}
.sp-color-opt:hover,.sp-color-opt.active{border-color:#7c3aed;transform:scale(1.15);}
.sp-emoji-row{display:flex;gap:8px;flex-wrap:wrap;}
.sp-emoji-opt{width:38px;height:38px;border-radius:10px;background:#f1f5f9;border:2px solid transparent;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s;}
.sp-emoji-opt:hover,.sp-emoji-opt.active{border-color:#7c3aed;background:#ede9fe;}
.sp-preview-banner{height:130px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:3rem;position:relative;overflow:hidden;margin-bottom:10px;transition:background .3s;}
/* Project detail */
.sp-detail-banner{height:300px;display:flex;align-items:flex-end;padding:28px 32px;position:relative;}
/* ── Project-detail: mobiel donatiepaneel fix ── */
@media (max-width: 768px) {
/* 1. Zet 2-koloms grid om naar 1-koloms stapel */
#spDetailContent .sp-detail-grid {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
/* 2. Hef sticky positioning op en zorg voor volledige breedte */
#spDetailContent .sp-detail-right {
position: static !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* 3. Bedrag-knoppen grid: 2 kolommen op mobiel (3 is te krap) */
#spDetailContent .sp-amt-grid {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
/* 4. Zorg dat bedrag-knoppen goed klikbaar en gecentreerd zijn */
#spDetailContent .sp-amt-btn {
width: 100% !important;
padding: 14px 4px !important;
text-align: center !important;
box-sizing: border-box !important;
}
/* 5. Voorkom horizontale scroll op de projectpagina */
#spDetailContent {
overflow-x: hidden;
box-sizing: border-box;
}
/* 6. Zorg dat container geen overflow veroorzaakt */
#page-start-project {
overflow-x: hidden;
}
}
/* ── Responsive fixes v39 ── */
/* Prevent blobs from causing scrollWidth overflow */
.hero { overflow:hidden !important; }
.hero-bg { overflow:hidden !important; }
/* Donnie: always fits on small screens */
@media(max-width:420px){
#donnieWindow { width:calc(100vw - 16px) !important; right:8px !important; bottom:84px !important; }
#donnieBubble { right:12px !important; bottom:12px !important; width:52px !important; height:52px !important; }
}
/* Admin panel horizontal scroll fix */
@media(max-width:768px){
.admin-layout { flex-direction:column !important; }
.admin-sidebar { width:100% !important; }
.admin-content { min-height:auto !important; }
.admin-panel { padding:16px !important; }
}
/* Bedrijf dashboard tabs on mobile */
@media(max-width:640px){
#page-bedrijf-dashboard .sidebar-nav { display:flex; flex-direction:row; overflow-x:auto; padding:8px; gap:4px; border-right:none; border-bottom:1.5px solid var(--border); width:100%; }
#page-bedrijf-dashboard .sidebar-nav-item { white-space:nowrap; padding:8px 12px; font-size:.8rem; }
#page-bedrijf-dashboard .dash-layout { flex-direction:column; }
#page-bedrijf-dashboard .dash-sidebar { width:100%; }
}
/* Influencer tabs mobile */
@media(max-width:640px){
.infl-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.infl-tab { white-space:nowrap; }
}
/* Campaign modal mobile */
@media(max-width:480px){
#campaignCreateModal > div > div:last-child { padding:16px !important; }
#campaignCreateModal h3 { font-size:1rem !important; }
}
/* Donnie chat on very small screens */
@media(max-width:380px){
#donnieWindow { width:calc(100vw - 8px) !important; right:4px !important; }
.donnie-bubble { max-width:200px !important; }
.donnie-chip { font-size:.7rem !important; padding:3px 8px !important; }
}
/* Fix hero card stack on mobile */
@media(max-width:640px){
.hero-card-stack { display:none !important; }
.hero { min-height:auto !important; }
}
/* Payment admin grid mobile */
@media(max-width:560px){
#bedragenGrid { grid-template-columns:1fr !important; }
}
/* Stats bar wrapping on mobile */
@media(max-width:480px){
.stats-row { grid-template-columns:1fr 1fr !important; gap:12px !important; }
}
/* Table overflow protection — admin tables handled separately via card-layout CSS */
table { max-width:100%; }
.admin-panel table { overflow: visible !important; }
@media(max-width:640px){
/* rank-row — afgehandeld door .rl-row klasse (zie geconsolideerde CSS) */
/* rank-thead wordt getoond via geconsolideerde mobile CSS */
.rank-pts { font-size:.85rem; }
.rank-amt { font-size:.78rem; }
.rank-ava { width:32px; height:32px; font-size:.8rem; }
.rank-uname{ font-size:.82rem; }
.rank-usub { display:none; }
.rank-sticker{ display:none; }
.rank-num { font-size:1rem; min-width:28px; }
.rank-table{ border-radius:12px; }
}
@media(max-width:400px){
/* rank-row 400px — afgehandeld door .rl-row klasse */
}
/* Final responsive overflow fixes */
.nav-links { overflow:hidden; }
.container { overflow-x:hidden; }
.section-sm { overflow-x:hidden; }
/* Lock all pages - no horizontal scroll */
.page { max-width:100vw; overflow-x:hidden !important; }
html, body { overflow-x:hidden !important; max-width:100vw; }
html, body { overflow-x:hidden; }
/* ════════════════════════════════════════════════════════
RESPONSIVE FIXES v41 — Mobile-first overhaul
════════════════════════════════════════════════════════ */
html, body { overflow-x: hidden !important; }
.container { overflow-x: hidden; }
/* Mobile nav */
.nav-mobile { max-height: calc(100vh - var(--nav-h)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* nav-mobile .nav-link handled above */
/* Donnie compact on mobile */
@media(max-width: 640px) {
#donnieWindow { width: calc(100vw - 20px) !important; max-width: 380px !important; right: 10px !important; bottom: 76px !important; max-height: 68vh !important; }
#donnieMessages { max-height: 40vh !important; }
#donnieBubble { width: 50px !important; height: 50px !important; right: 14px !important; bottom: 14px !important; }
#donnieBubble img { width: 50px !important; height: 50px !important; }
.donnie-chip { font-size: .72rem !important; padding: 4px 10px !important; }
.donnie-bubble { max-width: calc(100vw - 80px) !important; }
#donnieChips { max-height: 80px !important; }
}
/* Ranglijst mobile — tabs vullen breedte, geen scroll */
@media(max-width: 640px) {
.rank-table { overflow-x: hidden !important; max-width: 100%; border-radius: 12px; }
}
/* Dashboard sidebar */
@media(max-width: 640px) {
.dash-layout { flex-direction: column !important; }
.dash-sidebar { width: 100% !important; border-right: none !important; border-bottom: 1.5px solid var(--border); }
.sidebar-nav { display: flex !important; flex-direction: row !important; overflow-x: auto; padding: 10px 12px; gap: 6px; }
.sidebar-nav-item { white-space: nowrap; flex-shrink: 0; padding: 8px 14px !important; font-size: .78rem !important; }
.dash-main { padding: 16px !important; }
}
/* Hero */
@media(max-width: 480px) {
.hero { padding: 40px 20px 32px !important; min-height: auto !important; }
.hero h1 { font-size: 1.9rem !important; }
.hero-actions { flex-direction: column !important; }
.hero-actions .btn { width: 100% !important; }
}
/* General */
@media(max-width: 480px) {
.section-lg { padding: 40px 0 !important; }
.section-sm { padding: 28px 0 !important; }
.container { padding: 0 16px !important; }
h2.section-title { font-size: 1.4rem !important; }
.stats-row { grid-template-columns: 1fr 1fr !important; }
}
/* Bottom nav spacing */
@media(max-width: 640px) {
.page { padding-bottom: 80px; }
#page-admin { padding-bottom: 0 !important; }
}
/* Tablet */
@media(max-width: 1024px) {
.nav-inner { overflow: hidden; }
.nav-links { gap: 2px !important; }
.nav-link { font-size: .8rem !important; padding: 6px 10px !important; }
.nav-mobile .nav-link { font-size: .95rem !important; padding: 13px 16px !important; color: #1f2937 !important; }
}
/* Influencer/Bedrijf tabs */
@media(max-width: 640px) {
.infl-tabs, .bd-tabs { display: flex !important; overflow-x: auto !important; border-bottom: 1.5px solid var(--border); gap: 0 !important; }
.infl-tab, .bd-tab { white-space: nowrap; flex-shrink: 0; font-size: .8rem !important; padding: 10px 14px !important; }
}
/* Leaderboard page */
@media(max-width: 640px) {
#page-ranglijst .container { padding: 0 12px !important; overflow-x: hidden !important; }
#page-ranglijst { overflow-x: hidden; }
}
/* Admin responsive panel */
@media(max-width: 900px) {
#admin-panel-responsive > div:last-of-type { grid-template-columns: 1fr !important; }
}
/* ════════════════════════════════════════════════
MOBILE FIXES v44 — All reported issues
════════════════════════════════════════════════ */
/* ── 1. Donnie higher on mobile (above bottom nav) — zelfde breakpoint als .bottom-nav ── */
@media(max-width: 768px) {
#donnieBubble {
bottom: 80px !important;
right: 14px !important;
width: 50px !important;
height: 50px !important;
}
#donnieWindow {
bottom: 140px !important;
right: 10px !important;
width: calc(100vw - 20px) !important;
max-width: 380px !important;
max-height: 60vh !important;
}
}
/* ── 2. Ranglijst — tabs vullen breedte, geen scroll ── */
@media(max-width: 640px) {
#page-ranglijst .container {
padding: 0 8px !important;
overflow: hidden;
}
.rank-table {
overflow-x: hidden !important;
border-radius: 12px !important;
margin: 8px 0 0 !important;
}
.rank-medal { font-size: 1.1rem !important; }
}
/* ── 3. Dashboard profile on mobile ── */
@media(max-width: 768px) {
.dashboard-layout {
display: flex !important;
flex-direction: column !important;
padding: 16px 0 80px !important;
gap: 0 !important;
}
.sidebar {
width: 100% !important;
position: static !important;
border-bottom: 1.5px solid var(--border);
}
.sidebar-card { border-radius: 0 !important; border-left: none !important; border-right: none !important; }
.sidebar-nav {
display: flex !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
padding: 8px 12px !important;
gap: 4px !important;
flex-direction: row !important;
}
.sidebar-nav-item {
flex-shrink: 0 !important;
white-space: nowrap !important;
padding: 8px 12px !important;
font-size: .8rem !important;
border-radius: 8px !important;
}
.dash-main { padding: 20px 16px !important; }
/* Stats grid */
.stats-grid, .kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.dash-card { border-radius: 14px !important; }
}
/* ── 4. Start-project buttons ── */
@media(max-width: 640px) {
#spTypePicker { display: flex !important; flex-direction: column !important; gap: 10px !important; }
#spTypePicker button { width: 100% !important; min-height: 56px !important; }
.sp-step { padding: 20px 16px !important; }
}
/* ── 5. Blog page buttons on mobile ── */
@media(max-width: 640px) {
.blog-card-actions { flex-wrap: wrap !important; gap: 8px !important; }
.blog-vote-btn, .vote-btn, [class*="vote"] { min-height: 40px !important; min-width: 44px !important; }
.blog-card { padding: 16px !important; }
}
/* ── 6. Amount selection — single only (visual fix) ── */
.amount-opt { user-select: none; }
.amount-opt.sel { outline: 2px solid var(--blue); }
/* ── 7. General mobile button touch targets ── */
@media(max-width: 640px) {
button, .btn, [onclick] { touch-action: manipulation; }
.modal-box { padding: 20px 16px !important; max-height: 90vh !important; overflow-y: auto !important; }
.modal-box .btn-full { margin-top: 8px !important; }
}
/* ── 8. Influencer/Bedrijf dashboard on mobile ── */
@media(max-width: 640px) {
.infl-tabs, .bd-tabs {
display: flex !important; overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap !important; gap: 0 !important;
border-bottom: 1.5px solid var(--border);
}
.infl-tab, .bd-tab {
flex-shrink: 0 !important; white-space: nowrap !important;
font-size: .8rem !important; padding: 10px 14px !important;
}
.infl-main, .bd-main { padding: 16px !important; }
}
/* ── 9. Community cards on mobile ── */
@media(max-width: 640px) {
.community-card { border-radius: 14px !important; }
.community-grid { grid-template-columns: 1fr !important; }
}
/* Compact navPts pill on mobile */
@media(max-width: 640px) {
#navPts {
padding: 4px 8px !important;
font-size: .72rem !important;
max-width: 70px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Nieuws grid on mobile */
#nieuwsGrid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
#page-nieuws .container {
padding: 0 16px !important;
}
}
@media(max-width: 380px) {
#navPts { display: none !important; }
}
.nieuws-card { transition: box-shadow .2s, transform .15s; cursor: default; }
.nieuws-card:hover { box-shadow: var(--shadow-lg) !important; }
/* SVG icon alignment in nav links */
.nav-mobile .nav-link { display: flex !important; align-items: center !important; gap: 10px !important; }
.nav-mobile .nav-link svg { opacity: .75; }
.nav-mobile .nav-link:hover svg { opacity: 1; }
/* Bottom nav SVG */
.bnav-icon svg { display: block; }
.bnav-btn.active svg { stroke: var(--blue) !important; }
/* Sidebar nav icons */
.sidebar-nav-item svg { opacity: .6; }
.sidebar-nav-item.active svg, .sidebar-nav-item:hover svg { opacity: 1; }
/* Remove star from navPts, add pill icon */
#navPts::before { content: ''; display: inline-block; width: 8px; height: 8px; background: #facc15; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
/* Profile avatar upload */
.profile-ava-big { width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--pink));display:flex;align-items:center;justify-content:center;font-family:Fraunces,serif;font-size:2rem;font-weight:900;color:#fff; }
.profile-ava-big:hover #avatarOverlay { opacity:1 !important; }
/* Sidebar avatar with photo */
.sidebar-ava { position:relative;overflow:hidden; }
.sidebar-ava img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%; }
/* Rank avatar with photo */
.rank-ava { position:relative;overflow:hidden; }
.rank-ava img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%; }
/* Nav avatar with photo */
.nav-avatar { position:relative;overflow:hidden; }
.nav-avatar img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%; }
/* ── Mobile nav: name/avatar button opens menu on mobile ── */
@media(max-width:768px) {
#navUserName { display:block !important; max-width:80px; }
}
/* ── Mobile nav dropdown chevron ── */
#navMenuChevron { display:none; color:rgba(255,255,255,.7); font-size:.7rem; }
/* ── Hide Donatie.nu text in nav on mobile ── */
@media(max-width:600px) {
.nav-logo > span { display:none !important; }
}
/* ── Horizontal scroll lock (mobile) ── */
html, body {
overscroll-behavior-x: none;
touch-action: pan-y;
}
*, *::before, *::after {
max-width: 100%;
box-sizing: border-box;
}
.page {
overflow-x: hidden;
max-width: 100vw;
}
/* Prevent wide tables/elements from causing body overflow */
@media (max-width: 768px) {
img, video, iframe, table { max-width: 100%; }
pre, code { overflow-x: auto; max-width: 100%; }
}
/* ── Compact view for causes grid ── */
.cause-grid-compact .cause-card { display:none; }
.cause-grid-compact .cause-card-slim { display:flex; }
.cause-card-slim { display:none; flex-direction:column; align-items:center; gap:8px; background:#fff; border-radius:14px; border:1.5px solid var(--border); padding:16px 10px 12px; cursor:pointer; transition:transform .2s,box-shadow .2s; text-align:center; }
.cause-card-slim:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(15,15,26,.1); border-color:#bfdbfe; }
.cause-card-slim-logo { width:52px; height:52px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cause-card-slim-logo img { width:52px; height:52px; object-fit:contain; border-radius:10px; }
.cause-card-slim-name { font-size:.78rem; font-weight:700; color:var(--dark); line-height:1.3; }
/* ══════════════════════════════════════════
MOBILE COMPREHENSIVE FIXES
══════════════════════════════════════════ */
/* Ensure all pages are locked - no horizontal scroll */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden !important; max-width: 100vw; }
.page { max-width: 100vw; overflow-x: hidden !important; }
img, video, iframe, table { max-width: 100%; }
@media(max-width: 768px) {
/* ── Bottom nav padding so content not hidden ── */
.page { padding-bottom: 80px !important; }
/* ── Dashboard stacks vertically ── */
.dashboard-layout { grid-template-columns: 1fr !important; gap: 16px !important; padding: 16px 0 80px !important; }
.sidebar { position: static !important; }
.sidebar-card { margin-bottom: 0 !important; }
/* ── Cause cards ── */
.causes-main-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 16px !important; }
/* ── Cause detail modal ── */
#causeDetail .container { padding: 0 12px !important; }
/* ── Section titles smaller on mobile ── */
.section-title { font-size: 1.5rem !important; }
/* ── Hero ── */
.hero { min-height: auto !important; }
/* ── Auth page ── */
.auth-card { margin: 16px !important; padding: 24px 20px !important; }
/* ── Input rows stack on mobile ── */
.input-row { grid-template-columns: 1fr !important; gap: 0 !important; }
/* ── Bottom nav labels ── */
.bnav-lbl { font-size: .65rem !important; }
/* ── Admin on mobile hides sidebar, shows hamburger ── */
.admin-shell { grid-template-columns: 1fr !important; }
.admin-sidebar { display: none !important; }
/* rank-row — afgehandeld door .rl-row klasse (zie geconsolideerde CSS) */
/* rank-thead zichtbaar via geconsolideerde mobile CSS */
.rank-usub { display: none !important; }
.rank-sticker { display: none !important; }
/* ── Nav user name hidden on very small screens ── */
#navUserName { max-width: 70px !important; overflow: hidden !important; text-overflow: ellipsis !important; }
/* ── Cause detail grid 2-col -> 1-col ── */
#causeDetailContent [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
#causeDetailContent [style*="grid-template-columns:repeat(auto-fit"] { grid-template-columns: 1fr 1fr !important; }
}
@media(max-width: 400px) {
/* ── Extra small phones ── */
.causes-main-grid { grid-template-columns: 1fr !important; }
.bnav-btn { min-width: 0 !important; }
.bottom-nav-inner { gap: 0 !important; }
}
/* v71 mobile extras */
@media(max-width:640px){
#page-ranglijst .container{padding:0 10px!important;overflow-x:hidden!important;}
#page-ranglijst{overflow-x:hidden!important;}
#page-ranglijst .rank-table{max-height:calc(100vh - 320px)!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;border-radius:12px!important;}
/* rank-tabs: geconsolideerd via scoped mobile CSS verderop */
#page-ranglijst .leaderboard-widget{padding:16px!important;border-radius:16px!important;}
#page-ranglijst .section{padding:16px 0 8px!important;}
#page-ranglijst h2.ff{font-size:1.4rem!important;}
#page-ranglijst .rank-table td,#page-ranglijst .rank-table th{padding:8px 10px!important;font-size:.78rem!important;}
#page-ranglijst .rank-table img{width:28px!important;height:28px!important;}
.rank-medal{font-size:1rem!important;}
.sp-projects-grid{grid-template-columns:1fr!important;gap:16px!important;}
#payMethodsGrid{grid-template-columns:1fr 1fr!important;}
#page-influencer-dashboard .sidebar-nav,#page-bedrijf-dashboard .sidebar-nav{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;scroll-snap-type:x mandatory;padding-bottom:4px;}
#page-influencer-dashboard .sidebar-nav-item,#page-bedrijf-dashboard .sidebar-nav-item{flex-shrink:0!important;scroll-snap-align:start;}
.admin-main{padding:16px!important;}
.admin-topbar{flex-direction:column!important;align-items:flex-start!important;gap:8px!important;}
}
/* ══════════════════════════════════════════════════════
RANGLIJST — DEFINITIEVE MOBIELE FIX
Locked op 1 pagina, geen horizontaal scrollen
══════════════════════════════════════════════════════ */
@media(max-width:640px){
/* Pagina zelf: geen overflow */
#page-ranglijst{overflow-x:hidden!important;overflow-y:auto;}
#page-ranglijst .container{padding:0 10px!important;overflow-x:hidden!important;max-width:100vw!important;}
#page-ranglijst .section-sm{padding:12px 0 8px!important;}
/* Page header compacter */
#page-ranglijst .page-header{padding:24px 0 16px!important;}
#page-ranglijst .page-header h1{font-size:1.5rem!important;}
#page-ranglijst .page-header p{font-size:.83rem!important;}
/* Tabs: altijd op 1 lijn, vullen volledige breedte — GEEN scroll */
#page-ranglijst .rank-tabs{
display:flex!important;
flex-wrap:nowrap!important;
justify-content:space-between!important;
overflow:visible!important;
width:100%!important;
gap:3px!important;
padding:4px!important;
border-radius:14px!important;
background:#f1f5f9!important;
border:1.5px solid #e5e7eb!important;
box-sizing:border-box!important;
}
#page-ranglijst .rank-tab{
flex:1 1 0!important;
min-width:0!important;
text-align:center!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
padding:8px 2px!important;
font-size:11px!important;
border-radius:10px!important;
font-weight:700!important;
line-height:1.2!important;
}
#page-ranglijst .rank-tab svg{display:none!important;}
#page-ranglijst .rank-tab.active{
background:#1a237e!important;
color:#fff!important;
box-shadow:0 2px 6px rgba(26,35,126,.25)!important;
}
/* Tabel: geen overflow naar rechts */
#page-ranglijst .rank-table{
overflow-x:hidden!important;
overflow-y:auto!important;
max-height:calc(100vh - 380px)!important;
min-height:200px!important;
border-radius:12px!important;
margin-top:8px!important;
border:1.5px solid var(--border)!important;
}
/* Header zichtbaar via geconsolideerde mobile CSS */
/* Rij: overgedragen aan .rl-row geconsolideerde CSS */
#page-ranglijst .rank-usub{display:none!important;}
#page-ranglijst .rank-sticker{display:none!important;}
#page-ranglijst .rank-num{font-size:.95rem!important;min-width:24px!important;}
#page-ranglijst .rank-medal{font-size:1rem!important;}
/* Legenda compacter, geen overflow */
#page-rankLegenda,
#page-ranglijst [style*="flex-wrap:wrap"][style*="gap:14px"]{
gap:8px 16px!important;
font-size:.76rem!important;
}
/* Jouw positie box */
#rankUserPosBox{
padding:14px 16px!important;
margin-top:12px!important;
flex-direction:column!important;
align-items:flex-start!important;
gap:8px!important;
}
/* Periode label */
#page-ranglijst [style*="Juni 2025"]{font-size:.75rem!important;}
/* Flex header boven tabel — afgehandeld door .rl-header-wrap via geconsolideerde CSS */
}
/* ══════════════════════════════════════════════════════
MOBIELE FIXES — Goede doelen / Donnie / Bottom nav
══════════════════════════════════════════════════════ */
/* ── Goede doelen pagina mobiel ── */
@media(max-width:640px){
/* Pagina padding */
#page-doelen .page-header { padding:20px 0 14px !important; }
#page-doelen .page-header h1 { font-size:1.5rem !important; }
#page-doelen .page-header p { font-size:.82rem !important; }
#page-doelen > .container { padding:0 10px !important; }
/* View-toggle + count rij */
#page-doelen .container > div:first-child { gap:8px !important; margin-bottom:10px !important; }
.view-toggle-btn { padding:6px 12px !important; font-size:.78rem !important; }
.causes-count { font-size:.78rem !important; }
/* Toolbar: zoek + filters verticaal gestapeld */
.causes-toolbar {
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
padding: 10px 0 !important;
}
.search-wrap { min-width: 0 !important; width: 100% !important; }
.search-wrap .input { font-size:.88rem !important; padding: 10px 10px 10px 38px !important; }
/* Filterbalk: horizontaal scrolbaar, geen wrapping */
.filter-bar {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
gap: 6px !important;
padding-bottom: 4px !important;
scrollbar-width: none !important;
}
.filter-bar::-webkit-scrollbar { display: none !important; }
.filter-btn {
flex-shrink: 0 !important;
white-space: nowrap !important;
padding: 6px 12px !important;
font-size: .78rem !important;
}
/* Sort dropdown */
.sort-select { width: 100% !important; font-size:.85rem !important; }
/* Cards grid: 1 kolom */
.causes-main-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
padding-bottom: 80px !important;
}
}
/* ── Donnie boven bottom nav op mobiel ── */
@media(max-width:640px){
#donnieBubble {
bottom: 76px !important;
right: 14px !important;
width: 52px !important;
height: 52px !important;
z-index: 601 !important;
}
#donnieBubble img {
width: 52px !important;
height: 52px !important;
}
#donnieWindow {
bottom: 140px !important;
right: 10px !important;
width: calc(100vw - 20px) !important;
max-width: 380px !important;
max-height: 60vh !important;
z-index: 601 !important;
}
}
/* ── Bottom nav verbeterd (zelfde range als zichtbare bottom-nav) ── */
@media(max-width:768px){
.bottom-nav {
display: block;
border-top: 1.5px solid #e5e7eb !important;
padding: 4px 0 max(8px,env(safe-area-inset-bottom)) !important;
background: #fff !important;
box-shadow: 0 -4px 16px rgba(15,15,26,.08) !important;
}
.bottom-nav-inner {
grid-template-columns: repeat(6,1fr) !important;
gap: 0 !important;
}
.bnav-btn {
padding: 5px 2px !important;
gap: 2px !important;
}
.bnav-btn svg {
width: 22px !important;
height: 22px !important;
}
.bnav-lbl {
font-size: .58rem !important;
font-weight: 700 !important;
letter-spacing: .01em !important;
}
/* Active tint */
.bnav-btn.active {
color: var(--blue) !important;
}
.bnav-btn.active svg {
stroke: var(--blue) !important;
}
}
/* ══════════════════════════════════════════════════════
PUNTENSYSTEEM — MOBIELE FIX
══════════════════════════════════════════════════════ */
@media(max-width:640px){
/* Hero */
#page-puntensysteem > div:first-child {
padding: 56px 0 44px !important;
}
#page-puntensysteem h1 {
font-size: clamp(1.7rem, 7vw, 2.2rem) !important;
line-height: 1.1 !important;
}
/* Core rule pill */
#page-puntensysteem > div:first-child > div > div:last-child {
grid-template-columns: 1fr auto 1fr !important;
font-size: .85rem !important;
width: 100% !important;
}
#page-puntensysteem > div:first-child > div > div:last-child > div {
padding: 12px 14px !important;
}
/* "Zo verdien je punten" grid: 1 kolom */
#page-puntensysteem .container [style*="grid-template-columns:repeat(3,1fr)"],
#page-puntensysteem .container [style*="grid-template-columns: repeat(3, 1fr)"] {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
/* Reward cards — 1 kolom */
#page-puntensysteem .container [style*="grid-template-columns:repeat(3,1fr)"],
#page-puntensysteem [style*="grid-template-columns:repeat(2,1fr)"] {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
/* Niveau-tabel: compact */
#page-puntensysteem table {
font-size: .78rem !important;
}
#page-puntensysteem td,
#page-puntensysteem th {
padding: 8px 10px !important;
}
/* Secties padding */
#page-puntensysteem > div {
padding: 40px 0 !important;
}
#page-puntensysteem .container {
padding: 0 12px !important;
}
/* Sectie-titels */
#page-puntensysteem h2 {
font-size: 1.4rem !important;
}
/* Donnie vraag knop onderaan pagina */
.pts-ask-donnie-btn {
display: flex !important;
}
}
/* Donnie knop op puntensysteem — altijd tonen op mobiel */
.pts-ask-donnie-btn {
display: none;
position: fixed;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg,#1a237e,#3a98f8);
color: #fff;
border: none;
border-radius: 50px;
padding: 12px 24px;
font-size: .88rem;
font-weight: 700;
font-family: Outfit, sans-serif;
cursor: pointer;
box-shadow: 0 4px 20px rgba(26,35,126,.35);
z-index: 500;
align-items: center;
gap: 8px;
white-space: nowrap;
}
@media(max-width:640px){
.pts-ask-donnie-btn { display: flex !important; }
}
/* Betaalpagina amount-opt mobiel */
@media(max-width:480px){
#amountGrid {
grid-template-columns: repeat(3,1fr) !important;
gap: 8px !important;
}
.amount-opt {
padding: 10px 6px !important;
font-size: 1rem !important;
}
}
/* ══════════════════════════════════════════════════════
PUNTENSHOP — MOBIELE FIX & ANIMATIES
══════════════════════════════════════════════════════ */
@keyframes fadeInUp {
from { opacity:0; transform:translateY(16px); }
to { opacity:1; transform:translateY(0); }
}
/* Shop items grid — mobiel 1 kolom */
@media(max-width:600px){
#shopItemsGrid {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
}
@media(min-width:400px) and (max-width:600px){
#shopItemsGrid {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
}
/* Shop item knop altijd aanraakbaar */
#shopItemsGrid button {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
min-height: 40px;
}
#shopItemsGrid [style*="pointer:pointer"] {
-webkit-tap-highlight-color: transparent;
}
/* Bevestigingsdialoog mobiel */
@media(max-width:480px){
#redeemConfirmOverlay > div,
#redeemSuccessOverlay > div {
padding: 24px 18px !important;
border-radius: 18px !important;
}
#redeemConfirmOverlay button,
#redeemSuccessOverlay button {
font-size: .85rem !important;
padding: 12px 10px !important;
}
}
/* Punten display in shop header */
#shopPtsDisplay {
font-variant-numeric: tabular-nums;
}
/* ══════════════════════════════════════════════════════
ACCOUNT SHEET — slide-up van onderaf
══════════════════════════════════════════════════════ */
/* Sheet nav buttons */
.sheet-nav-btn {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
text-align: left;
padding: 12px 14px;
border: none;
background: transparent;
border-radius: 12px;
cursor: pointer;
font-family: Outfit, sans-serif;
font-size: .92rem;
font-weight: 600;
color: #1f2937;
transition: background .15s, color .15s;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.sheet-nav-btn svg {
flex-shrink: 0;
opacity: .6;
transition: opacity .15s;
}
.sheet-nav-btn:hover,
.sheet-nav-btn:active {
background: #f3f4f6;
color: #1a237e;
}
.sheet-nav-btn:hover svg,
.sheet-nav-btn:active svg {
opacity: 1;
}
/* Meld button — rood */
.sheet-meld-btn {
background: linear-gradient(135deg,#fff5f5,#fee2e2) !important;
color: #dc2626 !important;
border: 1.5px solid #fecaca !important;
font-weight: 800 !important;
}
.sheet-meld-btn svg {
opacity: 1 !important;
stroke: #dc2626;
}
.sheet-meld-btn:hover,
.sheet-meld-btn:active {
background: #fee2e2 !important;
color: #b91c1c !important;
}
/* Sheet animatie open/dicht */
#accountSheet.open {
transform: translateY(0) !important;
}
#accountSheetBackdrop.open {
opacity: 1 !important;
}
/* Desktop (breed beeld): legacy accountSheet uit, hamburger uit — alleen .nav-links */
@media (min-width: 769px) {
#accountSheet,
#accountSheetBackdrop { display: none !important; }
.nav-hamburger { display: none !important; }
}
/* Kleine telefoons: legacy sheet kan nog aan (embedded HTML); hamburger-NIET verbergen hier */
@media (max-width: 640px) {
#accountSheet { display: flex; }
}
/* ══════════════════════════════════════════════════════
DEFINITIEVE MOBIELE FIXES — Ranglijst, NavPts, Compact
══════════════════════════════════════════════════════ */
/* ── 1. Punten logo in topbalk ── */
#navPts {
display: inline-flex;
align-items: center;
gap: 5px;
}
#navPts::before {
content: '';
display: inline-flex;
width: 16px;
height: 16px;
background: radial-gradient(circle at 35% 35%, #fef08a, #facc15, #d97706);
border-radius: 50%;
box-shadow: 0 1px 4px rgba(217,119,6,.4), inset 0 -1px 2px rgba(0,0,0,.15);
flex-shrink: 0;
vertical-align: middle;
}
@media(max-width:640px){
#navPts {
padding: 4px 10px !important;
font-size: .78rem !important;
font-weight: 800 !important;
background: rgba(255,255,255,.18) !important;
color: #fff !important;
border-radius: 20px !important;
border: 1px solid rgba(255,255,255,.3) !important;
gap: 5px !important;
max-width: 90px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#navPts::before {
width: 12px;
height: 12px;
flex-shrink: 0;
}
}
@media(max-width:380px){
#navPts { display: none !important; }
}
/* ── 2. Compact goede doelen grid (kleine kaartjes met logo) ── */
.cause-grid-compact {
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
gap: 10px !important;
}
@media(max-width:480px){
.cause-grid-compact {
grid-template-columns: repeat(4, 1fr) !important;
gap: 8px !important;
}
}
.cause-card-slim {
padding: 12px 8px 10px !important;
border-radius: 12px !important;
gap: 6px !important;
}
.cause-card-slim-logo {
width: 44px !important;
height: 44px !important;
}
.cause-card-slim-logo img {
width: 44px !important;
height: 44px !important;
border-radius: 8px !important;
}
.cause-card-slim-name {
font-size: .68rem !important;
line-height: 1.25 !important;
max-height: 2.5em;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* ══════════════════════════════════════════════════════
RANGLIJST — TABS SCROLL WRAPPER (desktop + mobiel)
══════════════════════════════════════════════════════ */
/* Wrapper rond tabs: volledige breedte, GEEN scroll — tabs verdelen zichzelf */
.rank-tabs-scroll-wrap {
overflow: visible;
flex: 1;
min-width: 0;
width: 100%;
}
/* Header-wrap: tabs + periode label naast elkaar */
.rl-header-wrap {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 24px;
}
/* Periode label — nooit afgekapt */
.rl-periode-label { white-space: nowrap; flex-shrink: 0; font-size: .82rem; color: var(--mid); }
/* ── NIEUW: Titel-rij met h1 + periode naast elkaar ── */
.rl-title-row {
display: flex;
align-items: baseline;
gap: 14px;
flex-wrap: wrap;
}
.rl-title-row h1 {
margin: 0;
}
/* ── NIEUW: rl-header-wrap alleen tabs, geen periode ── */
.rl-header-wrap {
display: flex;
align-items: center;
margin-bottom: 20px;
gap: 0;
}
/* Short/full label toggle — default: show full, hide short */
.col-label-short { display: none; }
.col-label-full { display: inline; }
/* ══════════════════════════════════════════════════════
RANGLIJST — MOBIELE THEAD (4-kolommen zichtbaar)
══════════════════════════════════════════════════════ */
/* Op mobiel: toon een compacte thead MET 4 zichtbare kolommen */
.rl-thead-mobile {
display: none; /* standaard verborgen, tonen via media query */
}
/* ── 3. Ranglijst mobiel — definitief overschrijven ── */
@media(max-width:640px){
/* Pagina container */
#page-ranglijst { overflow-x: hidden !important; }
#page-ranglijst > .container { padding: 0 8px !important; max-width: 100vw !important; }
#page-ranglijst .page-header { padding: 18px 8px 12px !important; }
#page-ranglijst .page-header h1 { font-size: 1.35rem !important; }
#page-ranglijst .page-header p { font-size: .78rem !important; display: none; }
/* ── PROBLEEM 1 FIX: Titel-rij (h1 + periode) netjes naast elkaar ── */
#page-ranglijst .rl-title-row {
display: flex !important;
flex-direction: row !important;
align-items: baseline !important;
flex-wrap: nowrap !important;
gap: 10px !important;
margin-bottom: 2px !important;
}
#page-ranglijst .rl-title-row h1 {
flex-shrink: 0 !important;
font-size: 1.35rem !important;
}
#page-ranglijst .rl-periode-label {
font-size: .68rem !important;
color: #9ca3af !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
/* ── PROBLEEM 1 FIX: Header-wrap = alleen scrollbare tabs, geen wrapping ── */
#page-ranglijst .rl-header-wrap {
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 0 !important;
margin-bottom: 8px !important;
width: 100% !important;
overflow: hidden !important;
}
/* Scroll-wrapper — tabs als grid (2×3), geen horizontaal scrollen */
#page-ranglijst .rank-tabs-scroll-wrap {
flex: 1 !important;
min-width: 0 !important;
overflow: visible !important;
width: 100% !important;
margin-bottom: 4px !important;
}
/* ── TABS: 2 rijen × 3 kolommen ── */
#page-ranglijst .rank-tabs {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 6px !important;
border-radius: 14px !important;
padding: 6px !important;
background: #f1f5f9 !important;
border: 1.5px solid #e5e7eb !important;
width: 100% !important;
overflow: visible !important;
box-sizing: border-box !important;
}
#page-ranglijst .rank-tab {
min-width: 0 !important;
font-size: 11px !important;
padding: 8px 4px !important;
border-radius: 10px !important;
white-space: normal !important;
overflow: visible !important;
text-align: center !important;
line-height: 1.18 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
min-height: 52px !important;
overflow-wrap: break-word !important;
hyphens: auto !important;
}
#page-ranglijst .rank-tab svg {
display: block !important;
width: 15px !important;
height: 15px !important;
flex-shrink: 0 !important;
}
/* Tabel wrapper */
#page-ranglijst .rank-table {
overflow-x: hidden !important;
overflow-y: auto !important;
max-height: calc(100vh - 320px) !important;
min-height: 180px !important;
border-radius: 12px !important;
margin-top: 8px !important;
border: 1.5px solid #e5e7eb !important;
box-shadow: none !important;
}
/* ── PROBLEEM 2 FIX: Gebruik korte label in tabelkop ── */
#page-ranglijst .col-label-full { display: none !important; }
#page-ranglijst .col-label-short { display: inline !important; }
/* ══ Gedeelde thead-stijl (basis) ══ */
#page-ranglijst .rank-thead {
display: grid !important;
font-size: .60rem !important;
padding: 8px 10px !important;
letter-spacing: .03em !important;
gap: 4px !important;
background: #f8fafc !important;
border-bottom: 1.5px solid #e5e7eb !important;
color: #6b7280 !important;
font-weight: 700 !important;
text-transform: uppercase !important;
text-align: center !important;
align-items: center !important;
white-space: nowrap !important;
}
#page-ranglijst .rank-thead > div:first-child { text-align: center !important; }
#page-ranglijst .rank-thead > div:nth-child(2) { text-align: left !important; }
#page-ranglijst .rank-thead > div:nth-child(n+3) { text-align: center !important; }
/* ══ TAB: INDIVIDUEN / BEDRIJVEN / INFLUENCERS — 4 kolommen, geen Verschil ══ */
#page-ranglijst .rank-table.tab-individuen .rank-thead,
#page-ranglijst .rank-table.tab-bedrijven .rank-thead,
#page-ranglijst .rank-table.tab-influencers .rank-thead {
grid-template-columns: 28px 1fr 70px 60px !important;
}
/* Verberg de 5e kolom (Verschil) in de header */
#page-ranglijst .rank-table.tab-individuen .rank-thead > div:nth-child(5),
#page-ranglijst .rank-table.tab-bedrijven .rank-thead > div:nth-child(5),
#page-ranglijst .rank-table.tab-influencers .rank-thead > div:nth-child(5) {
display: none !important;
}
/* Rijen: 4-kolom grid */
#page-ranglijst .rank-table.tab-individuen .rank-row.rl-row,
#page-ranglijst .rank-table.tab-bedrijven .rank-row.rl-row,
#page-ranglijst .rank-table.tab-influencers .rank-row.rl-row {
display: grid !important;
grid-template-columns: 28px 1fr 70px 60px !important;
padding: 9px 10px !important;
gap: 4px !important;
align-items: center !important;
}
/* Verberg Verschil-cel in rijen */
#page-ranglijst .rank-table.tab-individuen .rl-cell-extra,
#page-ranglijst .rank-table.tab-bedrijven .rl-cell-extra,
#page-ranglijst .rank-table.tab-influencers .rl-cell-extra {
display: none !important;
}
/* Punten cel tonen */
#page-ranglijst .rank-table.tab-individuen .rl-cell-pts,
#page-ranglijst .rank-table.tab-bedrijven .rl-cell-pts,
#page-ranglijst .rank-table.tab-influencers .rl-cell-pts {
display: block !important;
}
/* ══ TAB: PROJECTEN — 5 kolommen, gelijke data-kolommen (Opgehaald / Doel / Donateurs) ══ */
#page-ranglijst .rank-table.tab-projecten .rank-thead {
grid-template-columns: 24px minmax(0,1.4fr) 1fr 1fr 1fr !important;
font-size: 11px !important;
}
#page-ranglijst .rank-table.tab-projecten .rank-thead > div {
font-size: 10px !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: .02em !important;
}
#page-ranglijst .rank-table.tab-projecten .rank-thead > div:nth-child(1) {
text-align: center !important;
}
#page-ranglijst .rank-table.tab-projecten .rank-thead > div:nth-child(2) {
text-align: left !important;
}
#page-ranglijst .rank-table.tab-projecten .rank-thead > div:nth-child(n+3) {
text-align: center !important;
font-size: 10px !important;
}
#page-ranglijst .rank-table.tab-projecten .rank-row.proj-row {
display: grid !important;
grid-template-columns: 24px minmax(0,1.4fr) 1fr 1fr 1fr !important;
padding: 9px 10px !important;
gap: 4px !important;
align-items: center !important;
}
/* Toon alle cellen in projecten */
#page-ranglijst .rank-table.tab-projecten .rl-cell-pts,
#page-ranglijst .rank-table.tab-projecten .rl-cell-extra {
display: block !important;
}
/* ══ TAB: PUNTENSYSTEEM / GOEDE DOELEN — geen thead ══ */
#page-ranglijst .rank-table.tab-puntensysteem .rank-thead,
#page-ranglijst .rank-table.tab-goededoelen .rank-thead {
display: none !important;
}
/* Fallback voor nog-niet-geladen tab (geen tab-* klasse) */
#page-ranglijst .rank-table:not([class*="tab-"]) .rank-thead {
grid-template-columns: 28px 1fr 70px 60px !important;
}
#page-ranglijst .rank-table:not([class*="tab-"]) .rank-row.rl-row {
display: grid !important;
grid-template-columns: 28px 1fr 70px 60px !important;
padding: 9px 10px !important;
gap: 4px !important;
align-items: center !important;
}
/* Rang nummer */
#page-ranglijst .rank-num {
font-size: .78rem !important;
min-width: 0 !important;
text-align: center !important;
}
/* Avatar + naam samen in kolom 2 */
#page-ranglijst .rl-cell-user {
display: flex !important;
align-items: center !important;
gap: 5px !important;
min-width: 0 !important;
overflow: hidden !important;
}
#page-ranglijst .rank-ava {
width: 24px !important;
height: 24px !important;
font-size: .62rem !important;
flex-shrink: 0 !important;
}
#page-ranglijst .rank-row.rl-row .rl-row-icon-tile,
#page-ranglijst .rank-row.proj-row .rl-row-icon-tile,
#page-ranglijst .rank-row.gd-row .rl-row-icon-tile {
width: 36px !important;
height: 36px !important;
border-radius: 10px !important;
}
#page-ranglijst .rank-row.rl-row .rl-row-icon-tile .rank-ava {
width: 28px !important;
height: 28px !important;
font-size: .58rem !important;
}
#page-ranglijst .rank-row.proj-row .rl-row-icon-tile svg {
width: 18px !important;
height: 18px !important;
}
#page-ranglijst .rank-panel-gray {
margin: 12px 10px 16px !important;
padding: 18px 14px 22px !important;
}
#page-ranglijst .rank-panel-gray-icon {
width: 36px !important;
height: 36px !important;
border-radius: 10px !important;
}
#page-ranglijst .rank-uname {
font-size: .75rem !important;
font-weight: 700 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
min-width: 0 !important;
}
#page-ranglijst .rank-usub { display: none !important; }
#page-ranglijst .rank-sticker { display: none !important; }
#page-ranglijst .rl-badges { display: none !important; }
/* ── PROBLEEM 3 FIX: Kolommen 3-5 — gecentreerd, geen overlap ── */
#page-ranglijst .rl-cell-amt {
font-size: .70rem !important;
font-weight: 700 !important;
color: #059669 !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Punten kolom */
#page-ranglijst .rl-cell-pts {
font-size: .68rem !important;
font-weight: 800 !important;
text-align: center !important;
color: #1a237e !important;
white-space: nowrap !important;
}
#page-ranglijst .rl-pts-label { display: none !important; }
/* Verschil kolom */
#page-ranglijst .rl-cell-extra {
font-size: .60rem !important;
color: #9ca3af !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
min-width: 0 !important;
}
#page-ranglijst .rank-medal { font-size: .85rem !important; }
/* Legenda verbergen op kleine schermen */
#page-ranglijst .rank-table + div {
display: none !important;
}
/* Jouw positie box */
#rankUserPosBox {
padding: 12px 14px !important;
margin-top: 8px !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
border-radius: 12px !important;
flex-wrap: wrap !important;
}
#rankUserPosBox > div:first-child div:first-child { font-size: .68rem !important; }
#rankUserPosBox > div:first-child div:last-child { font-size: .82rem !important; }
/* ── Goede doelen rij: 4-kolom grid, knop altijd zichtbaar ── */
#page-ranglijst .rank-row.gd-row {
display: grid !important;
grid-template-columns: 28px 44px 1fr 80px !important;
gap: 6px !important;
padding: 10px 10px !important;
align-items: center !important;
}
#page-ranglijst .rank-row.gd-row button {
font-size: .72rem !important;
padding: 6px 8px !important;
border-radius: 14px !important;
white-space: nowrap !important;
}
/* Tekst in goede doelen rij compacter */
#page-ranglijst .rank-row.gd-row > div:nth-child(3) {
font-size: 12px !important;
}
/* ── Puntensysteem / goede doelen: tabel verbergt scroll ── */
#page-ranglijst .rank-table.ps-table { overflow-x: hidden !important; }
}
/* ── Zeer klein mobiel (≤380px) ── */
@media(max-width:380px){
#page-ranglijst .rl-title-row h1 { font-size: 1.15rem !important; }
/* Individuen/bedrijven/influencers: 4 kolommen, nog compacter */
#page-ranglijst .rank-table.tab-individuen .rank-thead,
#page-ranglijst .rank-table.tab-bedrijven .rank-thead,
#page-ranglijst .rank-table.tab-influencers .rank-thead {
grid-template-columns: 22px 1fr 52px 46px !important;
font-size: .55rem !important;
padding: 7px 8px !important;
}
#page-ranglijst .rank-table.tab-individuen .rank-row.rl-row,
#page-ranglijst .rank-table.tab-bedrijven .rank-row.rl-row,
#page-ranglijst .rank-table.tab-influencers .rank-row.rl-row {
grid-template-columns: 22px 1fr 52px 46px !important;
padding: 8px !important;
}
/* Projecten: 5 kolommen, compacter (≤380px) */
#page-ranglijst .rank-table.tab-projecten .rank-thead,
#page-ranglijst .rank-table.tab-projecten .rank-row.proj-row {
grid-template-columns: 20px minmax(0,1.2fr) 1fr 1fr 1fr !important;
font-size: 10px !important;
padding: 7px 8px !important;
}
#page-ranglijst .rank-table.tab-projecten .rank-thead > div {
font-size: 10px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
#page-ranglijst .rank-tab { font-size: 10px !important; padding: 6px 2px !important; }
#page-ranglijst .rl-cell-amt { font-size: .63rem !important; }
#page-ranglijst .rl-cell-pts { font-size: .62rem !important; }
#page-ranglijst .rank-ava { width: 20px !important; height: 20px !important; font-size: .55rem !important; }
#page-ranglijst .rank-row.rl-row .rl-row-icon-tile .rank-ava {
width: 24px !important;
height: 24px !important;
font-size: .52rem !important;
}
#page-ranglijst .rank-uname { font-size: .68rem !important; }
}
/* ══════════════════════════════════════════════════════
UNIVERSELE RESPONSIVE LAYOUT — werkt op elk scherm
══════════════════════════════════════════════════════ */
/* ── Reset & box-sizing op alles ── */
*, *::before, *::after { box-sizing: border-box; }
/* ── Viewport lock — nooit horizontale scroll ── */
html {
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
overflow-x: hidden;
min-width: 0;
width: 100%;
}
/* ── Container: fluid op ALLE schermen ── */
.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 clamp(12px, 3vw, 48px);
}
/* ── Nav: altijd volledig breedte ── */
#mainNav .nav-inner {
max-width: 100%;
padding: 0 clamp(10px, 2.5vw, 40px);
}
/* ── Typografie: fluid schalen ── */
h1 { font-size: clamp(1.5rem, 4vw + 0.5rem, 3.6rem); }
h2 { font-size: clamp(1.25rem, 2.5vw + 0.25rem, 2.2rem); }
h3 { font-size: clamp(1rem, 1.5vw + 0.25rem, 1.4rem); }
p { font-size: clamp(0.85rem, 1vw + 0.3rem, 1.05rem); }
/* ── Grid systeem: responsive auto-fill ── */
.causes-main-grid {
grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)) !important;
}
/* ── Dashboard grid ── */
.dash-grid {
grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}
/* ── Cards nooit breder dan scherm ── */
.cause-card, .news-card, .dash-section {
max-width: 100%;
overflow: hidden;
}
/* ── Tabel: geen horizontale scroll (kolommen worden door grid beheerd) ── */
.rank-table {
overflow-x: hidden;
}
/* ══ BREAKPOINTS ══════════════════════════════════════ */
/* ── XL: 1440px+ (groot beeldscherm) ── */
@media(min-width: 1440px) {
.container { max-width: 1360px; }
.causes-main-grid {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
}
}
/* ── LG: 1024–1439px (laptop/desktop) ── */
@media(min-width: 1024px) and (max-width: 1439px) {
.container { max-width: 100%; padding: 0 32px; }
.causes-main-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}
}
/* ── MD: 768–1023px (tablet, kleine laptop) ── */
@media(min-width: 768px) and (max-width: 1023px) {
.container { padding: 0 20px; }
.nav-links { gap: 4px; }
.nav-link { font-size: .8rem; padding: 6px 10px; }
.causes-main-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
}
.hero { padding: 80px 0 60px; }
.hero h1 { font-size: clamp(1.8rem, 5vw, 3rem); }
/* Dashboard sidebar op tablet: smaller */
.dash-sidebar { min-width: 180px; max-width: 200px; }
}
/* ── SM: 480–767px (grote telefoon, kleine tablet) ── */
@media(min-width: 480px) and (max-width: 767px) {
.container { padding: 0 14px; }
.causes-main-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.nav-links { display: none; }
.hero h1 { font-size: clamp(1.5rem, 7vw, 2.2rem); }
}
/* ── XS: <480px (kleine telefoon) ── */
@media(max-width: 479px) {
.container { padding: 0 10px; }
.causes-main-grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.hero { padding: 60px 0 40px; }
}
/* ── Logo schaalt mee ── */
.logo-heart {
width: clamp(36px, 5vw, 52px) !important;
height: clamp(36px, 5vw, 52px) !important;
}
.nav-logo span {
font-size: clamp(1.1rem, 2vw, 1.7rem) !important;
}
/* ── Formulieren: altijd max-width ── */
.auth-card, .register-card {
max-width: min(480px, 100%);
}
.input {
max-width: 100%;
width: 100%;
}
/* ── Modals: responsive width ── */
[id$="Modal"] > div,
.modal-inner {
max-width: min(540px, calc(100vw - 32px));
width: 100%;
}
/* ── Images nooit te breed ── */
img {
max-width: 100%;
height: auto;
}
/* ── Page sections: min padding ── */
.section-sm { padding: clamp(28px, 5vw, 64px) 0; }
/* ── Hero responsief ── */
@media(min-width: 769px) {
.hero { padding: 120px 0 90px; }
}
@media(max-width: 768px) {
.hero { padding: clamp(60px, 12vw, 100px) 0 clamp(40px, 8vw, 70px); }
.hero-inner { flex-direction: column; text-align: center; }
.hero-ctas { justify-content: center; }
}
/* ── Donnie boven bottom nav ── */
@media(max-width: 640px) {
#donnieBubble { bottom: 76px !important; right: 14px !important; z-index: 601 !important; }
#donnieWindow { bottom: 140px !important; z-index: 601 !important; }
}
/* ── Account sheet & overlays ── */
#redeemConfirmOverlay > div,
#redeemSuccessOverlay > div {
max-width: min(420px, calc(100vw - 24px));
}
/* ══════════════════════════════════════════════════════
ADMIN MOBIEL — menu verbeteringen
══════════════════════════════════════════════════════ */
@media(max-width:768px){
/* Admin mobile dropdown items */
#adminMobileNavDropdown .admin-nav-section {
padding: 10px 16px 4px !important;
font-size: .65rem !important;
color: rgba(255,255,255,.4) !important;
}
#adminMobileNavDropdown .admin-nav-item {
padding: 11px 16px !important;
font-size: .85rem !important;
border-radius: 0 !important;
border-bottom: 1px solid rgba(255,255,255,.06) !important;
white-space: nowrap !important;
}
#adminMobileNavDropdown .admin-nav-item:last-child {
border-bottom: none !important;
}
#adminMobileNavDropdown .admin-nav-item.active {
background: rgba(255,255,255,.15) !important;
border-left: 3px solid rgba(255,255,255,.8) !important;
}
/* Admin topbar uitlijning */
#adminMobileBar {
padding: 10px 14px !important;
min-height: 50px !important;
}
#adminMobileBar span {
font-size: .88rem !important;
}
}
/* ── Admin nav SVG uitlijning (sidebar desktop) ── */
.admin-nav-item svg {
flex-shrink: 0;
opacity: .75;
transition: opacity .15s;
}
.admin-nav-item:hover svg,
.admin-nav-item.active svg { opacity: 1; }
/* ── Logo overflow fix ── */
/* logo overflow managed by .logo-heart */
/* ══════════════════════════════════════════════════════
ADMIN MOBIEL MENU — stijl & uitlijning
══════════════════════════════════════════════════════ */
/* Admin topbar compacter */
#adminMobileBar {
padding: 8px 12px !important;
gap: 8px;
}
#adminMobileBar span {
font-size: .88rem !important;
}
/* Admin dropdown */
#adminMobileNavDropdown button {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition: background .15s;
font-weight: 600 !important;
}
#adminMobileNavDropdown button:hover,
#adminMobileNavDropdown button:active {
background: rgba(255,255,255,.12) !important;
color: #fff !important;
}
/* Admin shell mobiel */
@media(max-width:768px) {
.admin-shell {
display: block !important;
overflow-x: hidden !important;
}
.admin-content {
padding: 16px 12px !important;
max-width: 100vw !important;
overflow-x: hidden !important;
}
.admin-panel h1 {
font-size: 1.25rem !important;
}
.admin-panel h2 {
font-size: 1.1rem !important;
}
.admin-stats-grid {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
.admin-stat-card {
padding: 14px !important;
}
/* Tabellen in admin: card-layout via geconsolideerde mobile CSS verderop */
.admin-panel table {
font-size: .78rem !important;
width: 100% !important;
overflow: visible !important;
}
.admin-panel th,
.admin-panel td {
padding: 8px 10px !important;
white-space: normal !important;
word-break: break-word !important;
}
/* Cards/grids in admin */
.admin-panel [style*="grid-template-columns:repeat(2"] {
grid-template-columns: 1fr !important;
}
.admin-panel [style*="grid-template-columns: repeat(2"] {
grid-template-columns: 1fr !important;
}
/* Knoppen uitlijnen */
.admin-panel .btn {
width: 100% !important;
justify-content: center !important;
margin-bottom: 6px !important;
}
}
/* Logo heart klein (footer, sidebar) */
.logo-heart[style*="28px"] {
width: 28px !important;
height: 28px !important;
border-radius: 8px !important;
}
.logo-heart[style*="28px"]::before { display:none; }
.logo-heart[style*="28px"]::after { display:none; }
.logo-heart[style*="28px"] img { border-radius:8px !important; }
.logo-heart[style*="28px"] img {
width: 28px !important;
height: 28px !important;
border-radius: 6px !important;
}
.logo-heart[style*="28px"]::before {
inset: -5px !important;
border-radius: 11px !important;
}
.logo-heart[style*="28px"]::after {
inset: -10px !important;
border-radius: 18px !important;
}
/* Admin sidebar logo: ook met blend */
.admin-sidebar-logo .logo-heart,
.admin-login-logo .logo-heart {
width: 36px !important;
height: 36px !important;
}
.admin-sidebar-logo .logo-heart img,
.admin-login-logo .logo-heart img {
width: 36px !important;
height: 36px !important;
border-radius: 9px !important;
}
/* ══════════════════════════════════════════════════════
ADMIN PANEL — MOBIELE VERBETERINGEN
══════════════════════════════════════════════════════ */
/* Admin mobile topbar — strakker */
@media(max-width: 768px) {
#adminMobileBar {
padding: 8px 12px !important;
gap: 8px !important;
}
#adminMobileBar span {
font-size: .88rem !important;
}
/* Dropdown: slide-in animatie */
#adminMobileNavDropdown {
transition: max-height .28s cubic-bezier(.32,0,.15,1), opacity .22s ease !important;
overflow: hidden !important;
}
#adminMobileNavDropdown.open {
max-height: 72vh !important;
opacity: 1 !important;
}
#adminMobileNavDropdown:not(.open) {
max-height: 0 !important;
opacity: 0 !important;
}
/* Nav items in dropdown */
#adminMobileNavDropdown .admin-nav-item {
padding: 11px 16px !important;
font-size: .86rem !important;
border-radius: 0 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
color: rgba(255,255,255,.85) !important;
cursor: pointer !important;
transition: background .15s !important;
border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
#adminMobileNavDropdown .admin-nav-item:hover,
#adminMobileNavDropdown .admin-nav-item:active {
background: rgba(255,255,255,.12) !important;
color: #fff !important;
}
#adminMobileNavDropdown .admin-nav-item.active {
background: rgba(255,255,255,.2) !important;
color: #fff !important;
font-weight: 700 !important;
}
#adminMobileNavDropdown .admin-nav-item svg {
flex-shrink: 0 !important;
opacity: .75 !important;
}
#adminMobileNavDropdown .admin-nav-item.active svg {
opacity: 1 !important;
}
#adminMobileNavDropdown .admin-nav-section {
padding: 12px 16px 4px !important;
font-size: .65rem !important;
font-weight: 800 !important;
color: rgba(255,255,255,.4) !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
border-bottom: none !important;
}
/* Admin panel content — proper padding on mobile */
.admin-panel {
padding: 16px 12px !important;
}
.admin-panel h1 {
font-size: 1.2rem !important;
margin-bottom: 6px !important;
}
.admin-panel h2 {
font-size: 1rem !important;
}
/* Admin stat cards: 2 cols on mobile */
.admin-stats-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
/* Admin tables: scroll */
.admin-panel table {
font-size: .78rem !important;
display: block !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
width: 100% !important;
}
.admin-panel th,
.admin-panel td {
padding: 8px 10px !important;
white-space: nowrap !important;
}
}
/* Admin nav SVG alignment */
.admin-nav-item {
display: flex !important;
align-items: center !important;
gap: 9px !important;
}
.admin-nav-item svg {
flex-shrink: 0 !important;
}
/* ══════════════════════════════════════════════════════
ADMIN LAYOUT POLISH — Alignment & typography
══════════════════════════════════════════════════════ */
/* Dash section titles: clean, no emoji, consistent */
.dash-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.15rem !important;
font-weight: 800 !important;
color: #1f2937 !important;
margin-bottom: 18px;
padding-bottom: 10px;
border-bottom: 2px solid #f1f5f9;
}
/* Admin panel h1 consistent */
.admin-panel h1 {
font-size: 1.25rem;
font-weight: 800;
color: #1a237e;
margin-bottom: 6px;
}
/* Stat cards: value + label aligned */
.admin-stat-value {
font-size: 2rem;
font-weight: 900;
font-family: Fraunces, serif;
line-height: 1;
}
.admin-stat-label {
font-size: .75rem;
font-weight: 600;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: .06em;
margin-top: 4px;
}
/* Admin nav items — SVG + text properly spaced */
.admin-nav-item {
display: flex !important;
align-items: center !important;
gap: 9px !important;
font-size: .84rem !important;
padding: 9px 14px !important;
border-radius: 9px !important;
cursor: pointer !important;
transition: background .15s, color .15s !important;
color: rgba(255,255,255,.78) !important;
font-weight: 500 !important;
white-space: nowrap !important;
}
.admin-nav-item svg {
flex-shrink: 0 !important;
opacity: .65 !important;
transition: opacity .15s !important;
}
.admin-nav-item:hover svg,
.admin-nav-item.active svg { opacity: 1 !important; }
.admin-nav-item:hover { background: rgba(255,255,255,.1) !important; color: #fff !important; }
.admin-nav-item.active { background: rgba(255,255,255,.2) !important; color: #fff !important; font-weight: 700 !important; }
/* Mobile dropdown — inherit the same item styles */
@media(max-width:768px){
#adminMobileNavDropdown .admin-nav-item {
border-radius: 0 !important;
padding: 12px 18px !important;
font-size: .88rem !important;
border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
#adminMobileNavDropdown .admin-nav-section {
padding: 14px 18px 5px !important;
font-size: .66rem !important;
color: rgba(255,255,255,.38) !important;
font-weight: 800 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
pointer-events: none !important;
cursor: default !important;
border-bottom: none !important;
}
/* Smooth open/close animation via max-height */
#adminMobileNavDropdown {
overflow: hidden !important;
transition: max-height .3s cubic-bezier(.32,0,.15,1), opacity .25s ease !important;
max-height: 0 !important;
opacity: 0 !important;
}
#adminMobileNavDropdown.open {
max-height: 75vh !important;
opacity: 1 !important;
overflow-y: auto !important;
}
}
/* ═══════════════════════════════════════════
FAQ / HOE-HET-WERKT PAGINA – MOBIELE FIX
Scoped to #page-hoe-het-werkt only.
Andere pagina's worden NIET beïnvloed.
═══════════════════════════════════════════ */
@media (max-width: 768px) {
/* Verberg zwevend hart-icoon als die buiten beeld valt */
#page-hoe-het-werkt .floating-icon {
display: none;
}
/* Voorkom horizontale overflow op de pagina zelf */
#page-hoe-het-werkt {
overflow-x: hidden;
}
/* 2-koloms grid → 1 kolom (Veiligheid-sectie & Sticker info-sectie) */
#page-hoe-het-werkt .grid2 {
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
}
/* Rechterkolom (puntensysteem-voorbeeld blok) volledig breed */
#page-hoe-het-werkt .grid2 > * {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
/* Container padding op de FAQ-pagina */
#page-hoe-het-werkt .container.section {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
@media (max-width: 480px) {
/* Strakke spacing op kleine schermen */
#page-hoe-het-werkt .grid2 {
gap: 16px !important;
}
#page-hoe-het-werkt .grid2 > div[style*="background:var(--off)"] {
padding: 20px 16px !important;
}
}
/* ══════════════════════════════════════════════════════
MOBILE OVERRIDES — FINALE PATCH (max-width: 768px)
• Ranglijst-tabs: 2 rijen × 3 kolommen op mobiel
• Projecten header: 3 datakopjes gelijk en gecentreerd
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ── 1. Ranglijst-tabkopjes: 2×3 grid ── */
#page-ranglijst .rank-tabs-scroll-wrap {
overflow: visible !important;
width: 100% !important;
margin-bottom: 4px !important;
}
#page-ranglijst .rank-tabs {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 6px !important;
padding: 6px !important;
border-radius: 14px !important;
background: #f1f5f9 !important;
border: 1.5px solid #e5e7eb !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: visible !important;
}
#page-ranglijst .rank-tab {
min-width: 0 !important;
font-size: 11px !important;
padding: 8px 4px !important;
border-radius: 10px !important;
font-weight: 700 !important;
white-space: normal !important;
overflow: visible !important;
text-align: center !important;
line-height: 1.18 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
min-height: 52px !important;
overflow-wrap: break-word !important;
hyphens: auto !important;
}
#page-ranglijst .rank-tab svg {
display: block !important;
width: 15px !important;
height: 15px !important;
flex-shrink: 0 !important;
}
#page-ranglijst .rank-tab.active {
background: #1a237e !important;
color: #fff !important;
box-shadow: 0 2px 6px rgba(26,35,126,.25) !important;
}
/* ── 2. PROJECTEN HEADER: Opgehaald / Doel / Donateurs altijd zichtbaar ── */
#page-ranglijst .rank-table.tab-projecten .rank-thead {
display: grid !important;
grid-template-columns: 24px minmax(0,1.4fr) 1fr 1fr 1fr !important;
gap: 4px !important;
padding: 8px 10px !important;
background: #f8fafc !important;
border-bottom: 1.5px solid #e5e7eb !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .03em !important;
color: #6b7280 !important;
align-items: center !important;
white-space: nowrap !important;
}
#page-ranglijst .rank-table.tab-projecten .rank-thead > div {
font-size: 10px !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: .02em !important;
}
#page-ranglijst .rank-table.tab-projecten .rank-thead > div:nth-child(1) { text-align: center !important; }
#page-ranglijst .rank-table.tab-projecten .rank-thead > div:nth-child(2) { text-align: left !important; }
#page-ranglijst .rank-table.tab-projecten .rank-thead > div:nth-child(n+3) { text-align: center !important; }
#page-ranglijst .rank-table.tab-projecten .rank-row.proj-row {
display: grid !important;
grid-template-columns: 24px minmax(0,1.4fr) 1fr 1fr 1fr !important;
gap: 4px !important;
padding: 9px 10px !important;
align-items: center !important;
}
}
/* ── Extra compact voor allerkleinste schermen ── */
@media (max-width: 380px) {
#page-ranglijst .rank-tab { font-size: 10px !important; padding: 7px 1px !important; }
#page-ranglijst .rank-table.tab-projecten .rank-thead,
#page-ranglijst .rank-table.tab-projecten .rank-row.proj-row {
grid-template-columns: 20px minmax(0,1.2fr) 1fr 1fr 1fr !important;
font-size: 10px !important;
padding: 7px 8px !important;
}
#page-ranglijst .rank-table.tab-projecten .rank-thead > div { font-size: 9px !important; overflow: visible !important; text-overflow: clip !important; }
}
}
/* ═══════════════════════════════════════════
DEEL 1 – Beheer je project sidebar button
═══════════════════════════════════════════ */
#navProjectBeheer {
background: linear-gradient(135deg,#eff6ff,#e0f2fe) !important;
color: #1a237e !important;
border: 1.5px solid #bfdbfe !important;
border-radius: 10px !important;
font-weight: 800 !important;
margin: 6px 0 !important;
}
#navProjectBeheer:hover, #navProjectBeheer.active {
background: linear-gradient(135deg,#1a237e,#3a98f8) !important;
color: #fff !important;
border-color: transparent !important;
}
/* ═══════════════════════════════════════════
DEEL 2 – Mobile layout fixes: panels, cards
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
@media (max-width: 768px) {
/* Dashboard panels volledig zichtbaar */
.dash-section {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
.dash-content {
width: 100% !important;
min-width: 0 !important;
overflow-x: hidden !important;
padding: 0 16px !important;
box-sizing: border-box !important;
}
/* Sidebar card volledig zichtbaar */
.sidebar-card {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
border-radius: 16px !important;
border-left: 1.5px solid var(--border) !important;
border-right: 1.5px solid var(--border) !important;
overflow: hidden !important;
}
/* Donatie history kaarten */
#dash-donaties .dash-section-inner,
#inboxList,
#dash-donaties > * {
width: 100% !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
/* Badges & Levels */
#dash-badges,
#dash-badges > * {
width: 100% !important;
box-sizing: border-box !important;
}
/* Goed doel beheer */
#dash-goeddoel,
#dash-goeddoel > * {
width: 100% !important;
box-sizing: border-box !important;
}
/* Beheer je project */
#dash-project-beheer,
#dash-project-beheer > * {
width: 100% !important;
box-sizing: border-box !important;
}
/* Stat grid compact */
.dash-stat-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
/* Prevent any child from overflowing */
.page,
.container,
.dashboard-layout {
overflow-x: hidden !important;
max-width: 100vw !important;
box-sizing: border-box !important;
}
/* Forms in panels */
.profile-form,
.profile-ava-section {
width: 100% !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
.input, textarea {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.input-row {
flex-direction: column !important;
gap: 0 !important;
}
}
/* ═══════════════════════════════════════════
DEEL 3 – Tabs / scroll menu fix
(profiel tabs en account-sheet tabs)
═══════════════════════════════════════════ */
.uprofile-tabs {
flex-wrap: wrap !important;
overflow-x: visible !important;
gap: 2px !important;
justify-content: space-between !important;
}
.uprofile-tab {
flex: 1 1 auto !important;
min-width: 0 !important;
font-size: .75rem !important;
padding: 7px 6px !important;
white-space: nowrap !important;
text-align: center !important;
}
@media (max-width: 480px) {
.uprofile-tabs {
justify-content: flex-start !important;
flex-wrap: wrap !important;
gap: 4px !important;
overflow-x: hidden !important;
}
.uprofile-tab {
font-size: .72rem !important;
padding: 6px 8px !important;
flex: 0 0 auto !important;
border-radius: 8px !important;
background: #f3f4f6 !important;
}
.uprofile-tab.active {
background: #1a237e !important;
color: #fff !important;
border-bottom-color: transparent !important;
}
}
/* ═══════════════════════════════════════════
DEEL 4 – Centreren van content op mobiel
═══════════════════════════════════════════ */
@media (max-width: 768px) {
/* Donatiegeschiedenis: cards gecentreerd */
#dash-donaties .dash-title,
#dash-donaties h2,
#dash-donaties h3 {
text-align: center !important;
}
/* Badges gecentreerd */
#dash-badges .dash-title,
#dash-badges h2,
#dash-badges h3 {
text-align: center !important;
}
/* Algemene kaart spacing */
.dash-stat {
padding: 14px 10px !important;
text-align: center !important;
}
/* Referral/QR kaart */
#qrCodeParticulier {
margin: 0 auto !important;
}
/* Quick-action knoppen */
.dash-content [style*="display:flex"][style*="flex-wrap:wrap"] {
flex-direction: column !important;
}
}
/* ═══════════════════════════════════════════
DEEL 5 – Profiel dropdown / accountSheet fix
Volledig scrollbaar, geen overlap met bottom nav
═══════════════════════════════════════════ */
#accountSheet {
height: 90vh !important;
max-height: 90vh !important;
padding-bottom: 0 !important;
}
#accountSheetContent {
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
min-height: 0 !important; /* Essentieel voor flex scroll */
overscroll-behavior: contain !important; /* Prevent sheet drag during content scroll */
padding-bottom: calc(70px + max(16px, env(safe-area-inset-bottom))) !important;
/* 70px = hoogte bottom nav; zorgt dat laatste knop altijd zichtbaar is */
}
/* Mobile nav (hamburger) ook scrollbaar houden */
.nav-mobile {
max-height: calc(100vh - 120px) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding-bottom: calc(70px + max(8px, env(safe-area-inset-bottom))) !important;
}
/* ── DEEL 2 extra: Sidebar nav op mobiel — horizontaal scrollbaar ── */
@media (max-width: 768px) {
/* Stat grid: 2 cols on mobile */
#dashStatGrid4 {
grid-template-columns: repeat(2,1fr) !important;
gap: 10px !important;
}
/* Profile-form padding safe on mobile */
.profile-form {
padding: 16px !important;
border-radius: 14px !important;
}
/* Profile ava section stacks on mobile */
.profile-ava-section {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
/* Input row stacks */
.input-row {
flex-direction: column !important;
}
}
/* ── DEEL 4: Donatiegeschiedenis & Badges centreren op mobiel ── */
@media (max-width: 768px) {
#dash-donaties {
text-align: center;
}
#dash-donaties .dash-title {
text-align: center !important;
}
/* Donatie rijen: keep content readable */
#dash-donaties [style*="display:flex;justify-content:space-between"] {
text-align: left !important;
}
#dash-badges {
text-align: center;
}
#dash-badges .dash-title {
text-align: center !important;
}
/* Badge kaartjes gecentreerd */
#dash-badges [style*="display:grid"],
#dash-badges [style*="display:flex"] {
justify-content: center !important;
}
/* Donatie kaarten gecentreerd */
#dash-donaties .rank-table,
#inboxList {
margin: 0 auto !important;
width: 100% !important;
box-sizing: border-box !important;
}
}
/* ── DEEL 5 extra: mobileNav panel scroll fix ── */
.nav-mobile-backdrop + .nav-mobile,
#mobileNav {
box-sizing: border-box !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* Bottom-nav hoogte compensatie voor accountSheet */
@media (max-width: 768px) {
#accountSheet {
/* Sheet valt over bottom nav heen (z-index 701 > 600) */
bottom: 0 !important;
height: 90vh !important;
max-height: 90vh !important;
padding-bottom: 0 !important;
}
/* Scrollable content: ruimte voor drag handle + safe area + bottom nav */
#accountSheetContent {
max-height: none !important;
padding-bottom: calc(70px + max(16px, env(safe-area-inset-bottom))) !important;
}
}
/* ── DEEL 2 extra: Alle panels/cards binnen viewport ── */
.dash-section > div,
.dash-section > form {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Donatie history table fix */
@media (max-width: 768px) {
#dash-donaties table,
#dash-donaties .rank-table {
display: block !important;
overflow-x: auto !important;
max-width: 100% !important;
-webkit-overflow-scrolling: touch !important;
}
}
/* ═══════════════════════════════════════════
MOBIELE OPTIMALISATIE — ALLE FIXES
(Prompt: scrollgedrag, layout, centrering)
═══════════════════════════════════════════ */
/* 🔹 1 – Smooth scroll basis */
html {
scroll-behavior: smooth;
}
/* Scroll-ankers houden rekening met vaste header */
.dash-section {
scroll-margin-top: 80px;
}
/* 🔹 2 – "Meld fondsenwerver" knop centreren */
#accountSheetContent [onclick*="openMeldModal"],
.sidebar-nav [onclick*="openMeldModal"] {
display: flex !important;
margin: 16px auto !important;
justify-content: center !important;
text-align: center !important;
}
/* 🔹 3 – Donatiegeschiedenis header + rijen uitlijnen */
@media (max-width: 768px) {
.dh-header,
.dh-row {
display: grid !important;
grid-template-columns: 2fr 1fr 1fr !important;
font-size: 11px !important;
gap: 4px !important;
padding: 10px 12px !important;
align-items: center !important;
text-align: left !important;
box-sizing: border-box !important;
width: 100% !important;
overflow: hidden !important;
}
/* Verberg de overige kolommen (Datum & Punten) op heel smal scherm */
.dh-header > :nth-child(3),
.dh-row > :nth-child(3) { display: none !important; }
.dh-header > :nth-child(4),
.dh-row > :nth-child(4) { text-align: right !important; font-weight: 700; }
.dh-header > :nth-child(5),
.dh-row > :nth-child(5) { display: none !important; }
/* Override de inline style op de dh-header in dash-donaties */
#dash-donaties .dh-header {
grid-template-columns: 2fr 1fr 1fr !important;
}
}
/* 🔹 4 – Badges & Levels volledig zichtbaar */
.rank-position-card {
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
word-break: break-word !important;
}
@media (max-width: 768px) {
.rank-position-card {
padding: 20px 16px !important;
border-radius: 14px !important;
}
.rank-pos-num {
font-size: 2rem !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
.rank-pos-num span {
font-size: inherit !important;
}
/* Ambassadeur / level naam niet afkappen */
#dashLevel, #levelName {
font-size: 1.15rem !important;
word-break: break-word !important;
}
}
/* 🔹 5 – Panels altijd volledig zichtbaar & gecentreerd */
body {
overflow-x: hidden !important;
}
@media (max-width: 768px) {
.panel,
.dash-section,
.dash-section > *,
.card,
[class*="panel"],
[class*="-card"] {
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
/* Dashboard main content area */
.dash-main {
min-width: 0 !important;
overflow-x: hidden !important;
}
/* Jaar-samenvatting banner op mobiel */
#donationYearSummary {
flex-direction: column !important;
gap: 12px !important;
padding: 16px !important;
}
}
/* 🔹 6 – Menu onderin blokkeert geen content */
@media (max-width: 768px) {
body {
padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
}
/* Dropdown en account-sheet ruimte laten boven bottom nav */
.dropdown-menu {
max-height: 80vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
}
/* 🔹 7 – Tabs (sidebar nav) altijd volledig zichtbaar, geen horizontale scroll */
@media (max-width: 768px) {
/* Sidebar nav: wrap naar meerdere regels */
.sidebar-nav {
flex-wrap: wrap !important;
overflow-x: hidden !important;
justify-content: center !important;
}
/* Tabs gelijkmatig verdeeld */
.sidebar-nav .sidebar-nav-item {
flex: 1 1 calc(50% - 8px) !important;
min-width: 110px !important;
max-width: 100% !important;
font-size: .76rem !important;
white-space: normal !important;
text-align: center !important;
justify-content: center !important;
line-height: 1.3 !important;
height: auto !important;
padding: 8px 6px !important;
box-sizing: border-box !important;
}
}
@media (max-width: 400px) {
.sidebar-nav .sidebar-nav-item {
flex: 1 1 100% !important;
}
}
/* 🔹 8 – Algemene mobiele verbeteringen */
* {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
/* ══════════════════════════════════════════════════════
██████████ ADMIN SECTIE — VOLLEDIG MOBIEL ██████████
Final comprehensive mobile pass for the entire admin
══════════════════════════════════════════════════════ */
/* ── 1. Admin login scherm ── */
@media (max-width: 768px) {
.admin-login-box {
padding: 28px 20px !important;
border-radius: 16px !important;
margin: 16px !important;
width: calc(100% - 32px) !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.admin-login-title {
font-size: 1.4rem !important;
}
.admin-login-sub {
font-size: .8rem !important;
margin-bottom: 20px !important;
}
}
/* ── 2. Admin shell & layout ── */
@media (max-width: 768px) {
/* Shell is single-column, sidebar hidden */
.admin-shell {
display: block !important;
min-height: 100vh;
overflow-x: hidden !important;
}
.admin-sidebar {
display: none !important;
}
/* Main padding: compact on mobile */
.admin-main {
padding: 12px !important;
overflow-x: hidden !important;
width: 100% !important;
max-width: 100vw !important;
box-sizing: border-box !important;
}
}
/* ── 3. Admin topbar per panel ── */
@media (max-width: 768px) {
.admin-topbar {
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px !important;
margin-bottom: 16px !important;
}
.admin-topbar h1 {
font-size: 1.2rem !important;
line-height: 1.3 !important;
}
.admin-topbar p {
font-size: .8rem !important;
}
.admin-topbar > button,
.admin-topbar > a,
.admin-topbar > div:last-child {
width: 100% !important;
box-sizing: border-box !important;
}
.admin-topbar .admin-save-btn {
width: 100% !important;
justify-content: center !important;
}
}
/* ── 4. Stats grid ── */
@media (max-width: 768px) {
.admin-stats-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
margin-bottom: 14px !important;
}
/* Live stats inline style override */
#adminLiveStats {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
.admin-stat {
padding: 14px 10px !important;
}
.admin-stat-num {
font-size: 1.4rem !important;
}
.admin-stat-lbl {
font-size: .72rem !important;
}
}
@media (max-width: 380px) {
.admin-stats-grid,
#adminLiveStats {
grid-template-columns: 1fr !important;
}
}
/* ── 5. Admin cards ── */
@media (max-width: 768px) {
.admin-card {
padding: 16px !important;
border-radius: 12px !important;
margin-bottom: 14px !important;
}
.admin-card-title {
font-size: .95rem !important;
}
.admin-card-sub {
font-size: .78rem !important;
margin-bottom: 12px !important;
}
}
/* ── 6. Dashboard 2-column card grids → 1 column ── */
@media (max-width: 768px) {
/* Dashboard two-column section cards */
#admin-panel-dashboard > div[style*="grid-template-columns:1fr 1fr"],
#admin-panel-dashboard > div[style*="grid-template-columns: 1fr 1fr"] {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
}
}
/* ── 7. Tables — horizontal scroll ── */
@media (max-width: 768px) {
/* Wrap all admin tables */
.admin-card .admin-table,
.admin-panel .admin-table,
.admin-panel table {
display: block !important;
width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
font-size: .78rem !important;
}
/* Parent container must not clip */
.admin-card,
.admin-panel > * {
overflow-x: hidden;
}
/* Table wrapper for inline tables */
.admin-table-wrap {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
width: 100% !important;
}
.admin-table th,
.admin-table td {
padding: 8px 10px !important;
white-space: nowrap !important;
font-size: .76rem !important;
}
}
/* ── 8. Featured picks grid ── */
@media (max-width: 768px) {
.featured-pick-grid {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
}
@media (max-width: 400px) {
.featured-pick-grid {
grid-template-columns: 1fr !important;
}
}
/* ── 9. Admin panels — generic inline grid overrides ── */
@media (max-width: 768px) {
/* Any 3- or 4-column grid inside admin panels → single col */
.admin-panel [style*="grid-template-columns:repeat(3"],
.admin-panel [style*="grid-template-columns: repeat(3"],
.admin-panel [style*="grid-template-columns:repeat(4"],
.admin-panel [style*="grid-template-columns: repeat(4"] {
grid-template-columns: 1fr !important;
}
/* 2-column grids inside panels → single col */
.admin-panel [style*="grid-template-columns:1fr 1fr"],
.admin-panel [style*="grid-template-columns: 1fr 1fr"] {
grid-template-columns: 1fr !important;
}
/* auto-fill grids: keep responsive */
.admin-panel [style*="minmax(300px"] {
grid-template-columns: 1fr !important;
}
.admin-panel [style*="minmax(200px"] {
grid-template-columns: 1fr 1fr !important;
}
/* Finance panel 3-col → 1-col */
#admin-panel-finance [style*="grid-template-columns:repeat(3"],
#admin-panel-betalingen [style*="grid-template-columns:repeat(3"] {
grid-template-columns: 1fr !important;
}
/* punten winkel grid */
#admin-panel-shop [style*="grid-template-columns"],
#admin-panel-punten [style*="grid-template-columns:repeat"] {
grid-template-columns: 1fr 1fr !important;
}
}
/* ── 10. Form rows in admin — stack on mobile ── */
@media (max-width: 768px) {
/* Input rows with flex/grid that don't wrap */
.admin-panel > .admin-card > div[style*="display:flex"][style*="gap"],
.admin-panel .admin-card > div[style*="display: flex"][style*="gap"] {
flex-wrap: wrap !important;
}
/* Full-width inputs on mobile */
.admin-input {
font-size: .9rem !important;
}
/* Button groups */
.admin-save-btn,
.admin-cancel-btn {
padding: 10px 16px !important;
font-size: .84rem !important;
}
}
/* ── 11. Admin user modal — full-width on mobile ── */
@media (max-width: 768px) {
.admin-user-modal {
align-items: flex-end !important;
padding: 0 !important;
}
.admin-user-modal-box {
border-radius: 20px 20px 0 0 !important;
padding: 24px 16px !important;
max-width: 100% !important;
width: 100% !important;
max-height: 88vh !important;
box-sizing: border-box !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
}
/* ── 12. Admin toast — mobile position ── */
@media (max-width: 768px) {
.admin-toast {
bottom: 16px !important;
right: 16px !important;
left: 16px !important;
right: 16px !important;
text-align: center !important;
border-radius: 12px !important;
font-size: .82rem !important;
padding: 10px 14px !important;
}
}
/* ── 13. Admin topbar mobile bar refine ── */
@media (max-width: 768px) {
#adminMobileBar {
padding: 10px 14px !important;
position: sticky !important;
top: 0 !important;
z-index: 200 !important;
}
}
/* ── 14. Admin nav dropdown: sections not clickable ── */
@media (max-width: 768px) {
#adminMobileNavDropdown .admin-nav-section {
pointer-events: none !important;
cursor: default !important;
}
}
/* ── 15. Search/filter rows in admin ── */
@media (max-width: 768px) {
/* Search bars + selects in goededoelen, users etc. */
.admin-panel > div[style*="display:flex"][style*="gap"][style*="flex-wrap"] input,
.admin-panel > div[style*="display:flex"] input[class*="input"],
.admin-panel input.input,
.admin-panel select.input {
width: 100% !important;
box-sizing: border-box !important;
min-width: 0 !important;
font-size: .85rem !important;
}
/* Filter/search rows */
.admin-panel > div[style*="flex-wrap:wrap"],
.admin-panel > div[style*="flex-wrap: wrap"] {
flex-wrap: wrap !important;
}
}
/* ── 16. Admin panel header typography ── */
@media (max-width: 768px) {
.admin-panel h1 {
font-size: 1.15rem !important;
}
.admin-panel h2 {
font-size: 1rem !important;
}
.admin-panel h3 {
font-size: .9rem !important;
}
}
/* ── 17. Goede doelen grid ── */
@media (max-width: 768px) {
#gdList > div[style*="display:grid"],
#gdList > div[style*="grid-template"] {
grid-template-columns: 1fr !important;
}
/* GD card buttons: full-width */
#gdList button {
padding: 8px 12px !important;
font-size: .76rem !important;
}
}
/* ── 18. Homepage beheer, nieuws, email templates ── */
@media (max-width: 768px) {
/* Two column preview layouts */
#admin-panel-homepage [style*="display:grid"],
#admin-panel-nieuws [style*="display:grid"],
#admin-panel-email [style*="display:grid"] {
grid-template-columns: 1fr !important;
}
}
/* ── 19. Responsive preview panel ── */
@media (max-width: 768px) {
#admin-panel-responsive iframe {
width: 100% !important;
max-width: 100% !important;
height: 60vh !important;
}
#admin-panel-responsive [style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}
}
/* ── 20. Betalingen / Financieel: geen interne scroll, card-layout via admin-table regels ── */
@media (max-width: 768px) {
#admin-panel-betalingen .admin-card,
#admin-panel-finance .admin-card {
padding: 14px 10px !important;
overflow: visible !important;
}
#admin-panel-betalingen table,
#admin-panel-finance table,
#admin-panel-users table,
#admin-panel-influencers table,
#admin-panel-sessions table {
min-width: 0 !important; /* was 520px — veroorzaakte overflow */
width: 100% !important;
overflow: visible !important;
}
}
/* ── 21. Button groups: wrap on mobile ── */
@media (max-width: 768px) {
.admin-topbar div[style*="display:flex"],
.admin-card div[style*="display:flex"][style*="gap"] {
flex-wrap: wrap !important;
}
/* Chip tags don't overflow */
.admin-chip {
font-size: .68rem !important;
padding: 2px 8px !important;
}
}
/* ── 22. Admin view-btn & delete-btn spacing ── */
@media (max-width: 480px) {
.admin-view-btn,
.admin-delete-btn {
padding: 5px 9px !important;
font-size: .72rem !important;
}
}
/* ── 23. Admin sidebar footer (desktop only refinement) ── */
@media (min-width: 769px) {
.admin-sidebar {
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
}
/* ── 24. Punten winkel shop cards ── */
@media (max-width: 640px) {
#admin-panel-shop .featured-pick-grid,
#admin-panel-shop [style*="grid-template-columns:repeat"] {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
}
@media (max-width: 380px) {
#admin-panel-shop .featured-pick-grid,
#admin-panel-shop [style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}
}
/* ── 25. Admins / meldingen panels ── */
@media (max-width: 768px) {
#admin-panel-admins .admin-card,
#admin-panel-meldingen .admin-card,
#admin-panel-push .admin-card {
padding: 14px 12px !important;
}
}
/* ── 26. Vrijwilliger badge alignment ── */
@media (max-width: 768px) {
#vrijwilligerBadge {
margin-left: 6px !important;
}
}
/* ── 27. Admin form: select, textarea full-width ── */
@media (max-width: 768px) {
.admin-panel select,
.admin-panel textarea {
width: 100% !important;
box-sizing: border-box !important;
font-size: .86rem !important;
}
.admin-panel textarea {
min-height: 80px !important;
}
}
/* ── 28. Safe-area insets for notch phones ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
@media (max-width: 768px) {
.admin-main {
padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
}
}
}
/* ── 29. Logo preview boxes ── */
@media (max-width: 768px) {
.logo-preview-box {
flex-direction: column !important;
align-items: flex-start !important;
}
.logo-preview-box img {
max-width: 100px !important;
}
}
/* ── 30. Community & influencer panel grids ── */
@media (max-width: 768px) {
#admin-panel-communities [style*="grid-template-columns"],
#admin-panel-influencers [style*="grid-template-columns"],
#admin-panel-markten [style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}
}
/* ═══════════════ END ADMIN MOBILE ═══════════════ */
/* ══════════════════════════════════════════════════════════════
ADMIN MOBIEL & TABLET — VOLLEDIG ZICHTBAAR, GEEN INTERNE SCROLL
Versie: responsive-fix-final
══════════════════════════════════════════════════════════════ */
/* ── 0. Globale bescherming: geen horizontale overflow ── */
body { overflow-x: hidden; }
#page-admin,
#page-admin * {
box-sizing: border-box;
word-break: break-word;
}
/* ── 1. Admin main: geen interne scroll — pagina scrollt ── */
.admin-main {
overflow: visible !important;
overflow-y: visible !important;
height: auto !important;
min-height: 0 !important;
}
/* ── 2. Admin shell: geen vaste breedtes, altijd 100% ── */
.admin-shell {
max-width: 100vw;
overflow-x: hidden;
}
/* ── 3. Admin containers: altijd binnen scherm ── */
.admin-card,
.admin-panel,
.admin-stat,
.admin-stats-grid,
.featured-pick-grid {
width: 100%;
max-width: 100%;
overflow: visible !important;
}
/* ── 4. Formulieren: altijd full-width en gestapeld ── */
.admin-panel input,
.admin-panel select,
.admin-panel textarea,
.admin-input {
width: 100%;
max-width: 100%;
box-sizing: border-box;
min-width: 0;
}
/* ── TABLET (max 1024px) ── */
@media (max-width: 1024px) {
/* Shell: sidebar smaller */
.admin-shell {
grid-template-columns: 200px 1fr !important;
}
/* Stats grid: 2 kolommen */
.admin-stats-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
/* Featured picks: 2 kolommen */
.featured-pick-grid {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
/* Cards iets kleiner */
.admin-card {
padding: 18px !important;
}
/* Admin main: minder padding */
.admin-main {
padding: 20px !important;
}
/* Tabellen op tablet: wrap-vriendelijk */
.admin-table {
font-size: .8rem !important;
}
.admin-table th,
.admin-table td {
padding: 9px 10px !important;
white-space: normal !important;
}
/* Topbar op tablet */
.admin-topbar {
flex-wrap: wrap !important;
gap: 8px !important;
}
}
/* ── MOBIEL (max 768px) ── */
@media (max-width: 768px) {
/* Shell: 1 kolom, sidebar verborgen */
.admin-shell {
display: block !important;
width: 100% !important;
max-width: 100vw !important;
overflow-x: hidden !important;
}
/* Sidebar op mobiel: verborgen (mobile bar neemt het over) */
.admin-sidebar {
display: none !important;
overflow: visible !important;
max-height: none !important;
}
/* Admin main: geen scroll, normale page-flow */
.admin-main {
padding: 12px !important;
overflow: visible !important;
height: auto !important;
width: 100% !important;
max-width: 100vw !important;
overflow-x: hidden !important;
}
/* Topbar stapsgewijs */
.admin-topbar {
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
margin-bottom: 16px !important;
}
/* Stats grid: 2 kolommen op mobiel */
.admin-stats-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
margin-bottom: 16px !important;
}
/* Stat cards: kleiner */
.admin-stat {
padding: 14px 10px !important;
}
.admin-stat-num {
font-size: 1.5rem !important;
}
/* Admin cards */
.admin-card {
padding: 14px 12px !important;
border-radius: 12px !important;
margin-bottom: 14px !important;
overflow: visible !important;
}
/* ── TABELLEN → CARD LAYOUT op mobiel (GEEN horizontale scroll) ── */
.admin-table {
display: block !important;
width: 100% !important;
overflow: visible !important;
border-collapse: collapse !important;
font-size: .83rem !important;
}
/* Verberg thead op mobiel */
.admin-table thead {
display: none !important;
}
/* Tbody als block */
.admin-table tbody {
display: block !important;
width: 100% !important;
}
/* Elke tabel-rij als card */
.admin-table tr {
display: block !important;
width: 100% !important;
margin-bottom: 12px !important;
border: 1px solid #e5e7eb !important;
border-radius: 10px !important;
padding: 12px !important;
background: #fff !important;
box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
overflow: visible !important;
}
/* Elke cel: label links, waarde rechts */
.admin-table td {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 4px !important;
padding: 7px 0 !important;
border-bottom: 1px solid #f3f4f6 !important;
font-size: .82rem !important;
white-space: normal !important;
word-break: break-word !important;
min-width: 0 !important;
}
.admin-table td:last-child {
border-bottom: none !important;
}
/* Data-label attribuut als label (indien aanwezig) */
.admin-table td[data-label]::before {
content: attr(data-label);
font-weight: 700;
color: #6b7280;
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .04em;
flex-shrink: 0;
}
/* Tabellen die nog omhulst zijn in een overflow wrapper */
#admin-panel-betalingen .admin-card,
#admin-panel-finance .admin-card,
#admin-panel-users .admin-card,
#admin-panel-influencers .admin-card,
#admin-panel-sessions .admin-card {
overflow: visible !important;
}
/* Verwijder min-width van tabel-cellen (was oorzaak van overflow) */
#admin-panel-betalingen table,
#admin-panel-finance table,
#admin-panel-users table,
#admin-panel-influencers table,
#admin-panel-sessions table {
min-width: 0 !important;
width: 100% !important;
overflow: visible !important;
}
/* Featured picks: 1 kolom op mobiel */
.featured-pick-grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
/* Formulieren: volledig gestapeld */
.admin-panel form,
.faq-edit-item,
.faq-edit-controls {
width: 100% !important;
}
.faq-edit-controls {
flex-wrap: wrap !important;
gap: 8px !important;
justify-content: flex-start !important;
}
/* Knoppen op mobiel */
.admin-save-btn,
.admin-cancel-btn {
padding: 10px 16px !important;
font-size: .84rem !important;
}
/* Chips kleiner */
.admin-chip {
font-size: .68rem !important;
padding: 2px 8px !important;
}
/* Topbar knoppen: wrappen */
.admin-topbar div,
.admin-card > div[style*="flex"] {
flex-wrap: wrap !important;
min-width: 0 !important;
}
/* Grids in admin panels → 1 kolom */
.admin-panel [style*="grid-template-columns: repeat(3"],
.admin-panel [style*="grid-template-columns:repeat(3"] {
grid-template-columns: 1fr !important;
}
.admin-panel [style*="grid-template-columns: repeat(2"],
.admin-panel [style*="grid-template-columns:repeat(2"] {
grid-template-columns: 1fr !important;
}
.admin-panel [style*="grid-template-columns: 1fr 1fr"],
.admin-panel [style*="grid-template-columns:1fr 1fr"] {
grid-template-columns: 1fr !important;
}
/* Navbar editor items */
.navbar-editor-item {
flex-wrap: wrap !important;
}
.navbar-editor-preview {
flex-wrap: wrap !important;
}
/* Punten / shop grids */
#admin-panel-shop .featured-pick-grid {
grid-template-columns: 1fr !important;
}
/* Communities list: geen interne scroll */
#adminCommList {
max-height: none !important;
overflow: visible !important;
overflow-y: visible !important;
}
/* Dynamische tabel-containers: inline overflow-x:auto overschrijven */
#adminInflTable,
#adminCommTable,
#adminProjTable,
#adminBlogTable {
overflow: visible !important;
overflow-x: visible !important;
}
/* Scroll-wrap inside containers: card layout on mobile, no clip */
.admin-table-scroll-wrap {
overflow: visible !important;
width: 100% !important;
}
/* Stat grids met inline repeat(4): → 2 kolommen */
#adminLiveStats,
#commAdminStats,
#finKpiRow,
#inflDonStats {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
/* Donation history rows met fixed px kolommen → stack */
.dh-header {
display: none !important; /* verberg header op mobiel */
}
.dh-row {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
padding: 12px !important;
border: 1px solid var(--border, #e5e7eb) !important;
border-radius: 10px !important;
margin-bottom: 8px !important;
font-size: .84rem !important;
}
/* Markten / communities / influencer panel grids */
#admin-panel-communities [style*="grid-template-columns"],
#admin-panel-influencers [style*="grid-template-columns"],
#admin-panel-markten [style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}
/* Logo preview box */
.logo-preview-box {
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px !important;
}
/* User modal: ook goed op mobiel */
.admin-user-modal-box {
padding: 20px 16px !important;
max-height: 92vh !important;
border-radius: 16px !important;
width: calc(100vw - 24px) !important;
max-width: 100% !important;
}
/* Homepage beheer, nieuws, e-mail grids */
#admin-panel-homepage [style*="display:grid"],
#admin-panel-nieuws [style*="display:grid"],
#admin-panel-email [style*="display:grid"] {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
/* Responsive preview iframe */
#admin-panel-responsive iframe {
width: 100% !important;
max-width: 100% !important;
height: 55vh !important;
}
}
/* ── Extra klein (max 480px) ── */
@media (max-width: 480px) {
/* Dynamische tabel-containers: geen interne scroll */
#adminInflTable,
#adminCommTable,
#adminProjTable,
#adminBlogTable {
overflow: visible !important;
overflow-x: visible !important;
}
/* Scroll-wrap: card layout, geen clip */
.admin-table-scroll-wrap {
overflow: visible !important;
width: 100% !important;
}
/* adminCommList: geen interne scroll */
#adminCommList {
max-height: none !important;
overflow: visible !important;
overflow-y: visible !important;
}
/* Stats: 1 kolom op heel kleine schermen */
.admin-stats-grid {
grid-template-columns: 1fr 1fr !important;
}
.admin-stat-num {
font-size: 1.3rem !important;
}
/* Admin main: minimale padding */
.admin-main {
padding: 10px 8px !important;
}
.admin-card {
padding: 12px 10px !important;
border-radius: 10px !important;
}
/* Knoppen: full-width op kleinste schermen */
.admin-save-btn,
.admin-cancel-btn {
width: 100% !important;
justify-content: center !important;
}
}
/* ═══════════════ END RESPONSIVE FIX FINAL ═══════════════ */
/* ══════════════════════════════════════════════════════════════
iPHONE OPTIMALISATIE — PROFIEL & ADMIN PANEEL
Volledig gecentreerd, alles zichtbaar, geen overflow
══════════════════════════════════════════════════════════════ */
/* ── GLOBAAL: safe-area en box-sizing voor iPhone ── */
@supports (padding-top: env(safe-area-inset-top)) {
body {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
}
/* ══ PERSOONLIJK PROFIEL — iPhone & Android optimalisatie ══ */
@media (max-width: 600px) {
/* Dashboard layout: altijd 1 kolom, geen zijwaartse overflow */
.dashboard-layout,
#page-dashboard > .container,
#page-dashboard .dash-layout {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
padding: 0 !important;
width: 100% !important;
max-width: 100vw !important;
box-sizing: border-box !important;
gap: 0 !important;
}
/* Sidebar: volledig breed, sticky header effect */
.sidebar {
width: 100% !important;
position: static !important;
box-shadow: none !important;
}
/* Sidebar card: geen afgeronde hoeken aan de randen */
.sidebar-card {
border-radius: 0 !important;
border-left: none !important;
border-right: none !important;
border-top: none !important;
overflow: visible !important;
}
/* Sidebar profiel: gecentreerd met mooie spacing */
.sidebar-profile {
text-align: center !important;
padding: 16px 16px 10px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
border-bottom: none !important;
}
/* Punten badge iets groter op mobiel */
.sidebar-pts {
font-size: .85rem !important;
padding: 6px 16px !important;
margin-top: 8px !important;
}
/* ── MENU ONDER JE PUNTEN ──
Horizontaal scrollbare pill-navigatie, zoals particulier account */
.sidebar-nav {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior-x: contain !important;
gap: 6px !important;
padding: 10px 14px 12px !important;
scrollbar-width: none !important;
border-top: 1px solid var(--border) !important;
border-bottom: 1.5px solid var(--border) !important;
background: #fff !important;
width: 100% !important;
box-sizing: border-box !important;
}
.sidebar-nav::-webkit-scrollbar { display: none !important; }
/* Pill-knoppen */
.sidebar-nav-item {
flex: 0 0 auto !important;
white-space: nowrap !important;
font-size: .78rem !important;
font-weight: 600 !important;
padding: 8px 14px !important;
border-radius: 20px !important;
text-align: center !important;
justify-content: center !important;
min-width: auto !important;
min-height: 36px !important; /* voldoende tap-target */
width: auto !important;
border: 1.5px solid var(--border) !important;
background: #f8fafc !important;
color: var(--mid) !important;
}
.sidebar-nav-item.active {
background: var(--blue) !important;
color: #fff !important;
border-color: var(--blue) !important;
font-weight: 700 !important;
}
/* SVGs verbergen in pill-modus (legacy HTML-dashboard in iframe) */
#page-dashboard:not(.account-dashboard-v2) .sidebar-nav .sidebar-nav-item svg {
display: none !important;
}
/* Divider verbergen in horizontale pill-balk (legacy dashboard) */
#page-dashboard:not(.account-dashboard-v2) .sidebar-nav .divider {
display: none !important;
}
/* Legacy HTML-dashboard: meld-knop in iframe layout verborgen op smal scherm */
#page-dashboard:not(.account-dashboard-v2) .sidebar-nav [onclick*="openMeldModal"],
#page-dashboard:not(.account-dashboard-v2) .sidebar-nav > div:last-child {
display: none !important;
}
/*
* React account (account-dashboard-v2): geen horizontale scroll — meerdere rijen,
* zelfde menu-volgorde als desktop, inclusief meldfonds en scheidingslijn.
*/
#page-dashboard.account-dashboard-v2 .sidebar-nav {
flex-wrap: wrap !important;
overflow-x: visible !important;
overscroll-behavior-x: auto !important;
align-content: flex-start !important;
justify-content: flex-start !important;
row-gap: 8px !important;
column-gap: 6px !important;
}
#page-dashboard.account-dashboard-v2 .sidebar-nav-item,
#page-dashboard.account-dashboard-v2 .sidebar-nav a.sidebar-nav-item {
flex: 1 1 calc(50% - 4px) !important;
max-width: calc(50% - 4px) !important;
min-width: 0 !important;
width: auto !important;
white-space: normal !important;
text-align: left !important;
justify-content: flex-start !important;
}
#page-dashboard.account-dashboard-v2 .sidebar-nav button#navProjectBeheer.sidebar-nav-item,
#page-dashboard.account-dashboard-v2 .sidebar-nav button#navStartProject.sidebar-nav-item {
flex: 1 1 100% !important;
max-width: 100% !important;
}
#page-dashboard.account-dashboard-v2 .sidebar-nav .divider {
display: block !important;
flex: 1 1 100% !important;
width: 100% !important;
margin: 10px 0 !important;
height: 1px !important;
}
#page-dashboard.account-dashboard-v2 .sidebar-nav .sidebar-nav-meld-wrap {
display: flex !important;
flex: 1 1 100% !important;
width: 100% !important;
padding: 8px 6px 6px !important;
box-sizing: border-box !important;
justify-content: stretch !important;
}
#page-dashboard.account-dashboard-v2 .sidebar-nav .sidebar-nav-meld-wrap a {
width: 100% !important;
max-width: 100% !important;
}
#page-dashboard.account-dashboard-v2 .sidebar-nav-item svg {
display: inline-flex !important;
flex-shrink: 0 !important;
align-self: center !important;
}
/* Beheer je project: smalle pill in horizontale legacy-balk */
#page-dashboard:not(.account-dashboard-v2) #navProjectBeheer {
flex: 0 0 auto !important;
width: auto !important;
}
/* Dash content: volledige breedte */
.dash-content {
width: 100% !important;
padding: 16px !important;
box-sizing: border-box !important;
min-width: 0 !important;
}
/* Profiel avatar: gecentreerd, mooi groot */
.profile-ava-big {
width: 72px !important;
height: 72px !important;
margin: 0 auto 10px !important;
}
/* Profiel form: volledig breedte, mooi padding */
.profile-form {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding: 16px !important;
border-radius: 14px !important;
margin: 0 !important;
}
/* Profiel avatar sectie: gecentreerd stapelen */
.profile-ava-section {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 12px !important;
}
/* Input-rij: altijd gestapeld op iPhone */
.input-row {
grid-template-columns: 1fr !important;
flex-direction: column !important;
gap: 12px !important;
}
/* Alle inputs: volledige breedte */
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
select,
textarea {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
font-size: 16px !important; /* Voorkomt auto-zoom op iPhone */
}
/* Stat grid: 2 kolommen */
.dash-stat-grid,
#dashStatGrid4 {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
/* Stat kaartjes: gecentreerd en compact */
.dash-stat {
padding: 14px 8px !important;
text-align: center !important;
border-radius: 12px !important;
}
.dash-stat .stat-num {
font-size: 1.4rem !important;
}
/* Dash content: geen overflow */
.dash-content {
overflow-x: hidden !important;
}
/* Dash sections: volledig gecentreerd */
.dash-section {
width: 100% !important;
box-sizing: border-box !important;
padding: 0 !important;
}
/* Dash titles: gecentreerd */
.dash-title {
text-align: center !important;
font-size: 1.15rem !important;
margin-bottom: 16px !important;
}
/* Knoppen in profiel: full-width */
.dash-content .btn,
.dash-section .btn,
#dash-profiel .btn,
#dash-bd-profiel .btn {
width: 100% !important;
justify-content: center !important;
box-sizing: border-box !important;
}
/* Bedrijfsprofiel sectie */
#profileBedrijfSection {
padding: 14px !important;
}
#profileBedrijfSection > div[style*="display:flex"] {
flex-direction: column !important;
gap: 8px !important;
}
#profileBedrijfCode {
width: 100% !important;
min-width: 0 !important;
}
/* Referral / QR code: gecentreerd */
#qrCodeParticulier,
#qrCodeBedrijf {
margin: 0 auto !important;
display: block !important;
}
/* Profieltabs: compact en volledig zichtbaar */
.uprofile-tabs {
display: flex !important;
flex-wrap: wrap !important;
gap: 4px !important;
justify-content: center !important;
overflow-x: hidden !important;
padding: 8px 0 !important;
}
.uprofile-tab {
flex: 0 0 auto !important;
font-size: .72rem !important;
padding: 7px 10px !important;
border-radius: 20px !important;
background: #f3f4f6 !important;
border-bottom: none !important;
}
.uprofile-tab.active {
background: #1a237e !important;
color: #fff !important;
}
/* Donatie-rijen: leesbaar op iPhone */
.dh-row {
flex-direction: column !important;
gap: 4px !important;
text-align: left !important;
}
/* Badges: gecentreerd raster */
#dash-badges [style*="display:grid"] {
grid-template-columns: repeat(3, 1fr) !important;
gap: 10px !important;
}
/* Inbox / donaties lijst */
#inboxList,
#donationHistoryList {
width: 100% !important;
box-sizing: border-box !important;
}
}
/* ── Extra klein: iPhone SE / 5 (max 375px) ── */
@media (max-width: 375px) {
.sidebar-nav-item {
font-size: .72rem !important;
padding: 7px 9px !important;
}
.dash-stat-grid,
#dashStatGrid4 {
grid-template-columns: 1fr 1fr !important;
}
.dash-stat .stat-num {
font-size: 1.2rem !important;
}
.profile-form {
padding: 12px !important;
}
#dash-badges [style*="display:grid"] {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* ══ ADMIN PANEEL — iPhone optimalisatie ══ */
@media (max-width: 600px) {
/* Admin login box: volledig scherm, gecentreerd */
.admin-login-box {
padding: 28px 20px !important;
margin: 16px !important;
border-radius: 20px !important;
width: calc(100vw - 32px) !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.admin-login-title {
font-size: 1.4rem !important;
}
.admin-login-logo {
width: 52px !important;
height: 52px !important;
margin-bottom: 14px !important;
}
.admin-login-field {
font-size: 16px !important; /* Geen auto-zoom */
padding: 11px 14px !important;
}
/* Admin shell: 1 kolom */
.admin-shell {
display: block !important;
width: 100% !important;
max-width: 100vw !important;
overflow-x: hidden !important;
}
/* Admin main: nette padding */
.admin-main {
padding: 12px 12px calc(70px + env(safe-area-inset-bottom, 0px)) !important;
overflow-x: hidden !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Admin topbar: gecentreerd stapelen */
.admin-topbar {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 8px !important;
margin-bottom: 16px !important;
}
.admin-topbar h1 {
font-size: 1.25rem !important;
}
.admin-topbar div {
width: 100% !important;
}
/* Admin stats: 2 kolommen, gecentreerd */
.admin-stats-grid,
#adminDashStats,
#adminInflStats,
#adminLiveStats,
#commAdminStats,
#finKpiRow,
#inflDonStats {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Admin stat kaartjes: compact en gecentreerd */
.admin-stat {
padding: 14px 10px !important;
text-align: center !important;
border-radius: 12px !important;
}
.admin-stat-num {
font-size: 1.4rem !important;
}
.admin-stat-lbl {
font-size: .72rem !important;
}
/* Admin cards: volle breedte */
.admin-card {
padding: 14px 12px !important;
border-radius: 12px !important;
margin-bottom: 12px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.admin-card-title {
font-size: .95rem !important;
flex-wrap: wrap !important;
}
/* Admin inputs: geen auto-zoom */
.admin-input,
.admin-panel input,
.admin-panel select,
.admin-panel textarea {
font-size: 16px !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Admin knoppen: full-width */
.admin-save-btn,
.admin-cancel-btn,
.admin-delete-btn {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
margin-bottom: 6px !important;
}
/* Featured picks: 1 kolom */
.featured-pick-grid {
grid-template-columns: 1fr !important;
}
/* Mobile admin bar: zichtbaar en volledig */
#adminMobileBar {
display: flex !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
padding: 10px 8px !important;
gap: 6px !important;
background: #1a237e !important;
border-radius: 0 0 14px 14px !important;
margin-bottom: 12px !important;
}
#adminMobileBar::-webkit-scrollbar { display: none !important; }
#adminMobileBar button {
flex: 0 0 auto !important;
white-space: nowrap !important;
font-size: .72rem !important;
padding: 7px 11px !important;
}
/* Admin table: card layout op iPhone */
.admin-table {
display: block !important;
width: 100% !important;
font-size: .8rem !important;
}
.admin-table thead { display: none !important; }
.admin-table tbody { display: block !important; width: 100% !important; }
.admin-table tr {
display: block !important;
margin-bottom: 10px !important;
border: 1px solid #e5e7eb !important;
border-radius: 10px !important;
padding: 12px !important;
background: #fff !important;
}
.admin-table td {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 4px !important;
padding: 6px 0 !important;
border-bottom: 1px solid #f3f4f6 !important;
font-size: .8rem !important;
word-break: break-word !important;
}
.admin-table td:last-child { border-bottom: none !important; }
/* Admin table scroll wrap */
.admin-table-scroll-wrap {
overflow: visible !important;
width: 100% !important;
}
/* User modal: volledig scherm op iPhone */
.admin-user-modal {
align-items: flex-end !important;
padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
.admin-user-modal-box {
padding: 20px 16px !important;
max-height: 90vh !important;
border-radius: 20px 20px 0 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Admin toast: boven bottom-nav */
.admin-toast {
bottom: calc(70px + env(safe-area-inset-bottom, 8px)) !important;
right: 12px !important;
left: 12px !important;
text-align: center !important;
}
/* FAQ editor: volledig gestapeld */
.faq-edit-controls {
flex-direction: column !important;
gap: 8px !important;
}
.faq-edit-controls button {
width: 100% !important;
justify-content: center !important;
}
/* Grids in admin panelen: 1 kolom */
.admin-panel [style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}
.admin-panel [style*="display:grid"] {
grid-template-columns: 1fr !important;
}
/* Admin responsive preview */
#admin-panel-responsive iframe {
width: 100% !important;
height: 50vh !important;
}
/* Logo preview box */
.logo-preview-box {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
}
/* ── Admin iPhone SE (max 375px) ── */
@media (max-width: 375px) {
.admin-main {
padding: 10px 8px calc(70px + env(safe-area-inset-bottom, 0px)) !important;
}
.admin-stats-grid {
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
}
.admin-stat-num {
font-size: 1.2rem !important;
}
.admin-card {
padding: 12px 10px !important;
}
.admin-login-box {
padding: 22px 16px !important;
margin: 10px !important;
width: calc(100vw - 20px) !important;
}
}
/* ══════════════════════════════════════════════════════════════
EINDE iPHONE OPTIMALISATIE
══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
HOMEPAGE PARITY HOOKS (React/Vite)
══════════════════════════════════════════════════════════════ */
#page-home #homeFeaturedCausesSection { padding-top: 88px; }
#page-home #homeGamificationSection { padding-top: 84px; }
#page-home #homeFinalCtaSection { padding-top: 84px; padding-bottom: 84px; }
#page-home #homeStickerSection { padding-top: 40px; }
#page-home #heroActions .btn { min-width: 176px; }
#page-home #heroActions #heroCta2 { border-width: 1.5px; }
#page-home #homeLeaderboardWrap .leaderboard-widget {
min-height: 460px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Nieuws + DenkMee parity (React wrappers) */
#page-nieuws .news-section { padding-top: 72px; }
#page-nieuws #nieuwsGrid { margin-top: 4px; }
#page-blog .blog-post-card,
#page-denk-mee .blog-post-card { border-radius: 18px; border: 1.5px solid var(--border); background: #fff; }
@media (max-width: 768px) {
#page-nieuws .news-section { padding-top: 44px !important; }
#page-blog .container.section-sm,
#page-denk-mee .container.section-sm { padding-top: 24px !important; }
}
@media (max-width: 768px) {
#page-home #homeFeaturedCausesSection,
#page-home #homeGamificationSection,
#page-home #homeFinalCtaSection {
padding-top: 48px !important;
padding-bottom: 40px !important;
}
#page-home #homeStickerSection { padding-top: 18px !important; }
#page-home #heroActions {
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
}
#page-home #heroActions .btn {
width: 100%;
min-width: 0;
justify-content: center;
text-align: center;
}
#page-home #homeLeaderboardWrap .leaderboard-widget {
min-height: 0;
padding: 20px;
border-radius: 16px;
}
/* Cross-page mobile parity */
#page-goede-doelen .container.section-sm,
#page-nieuws .container,
#page-blog .container,
#page-denk-mee .container {
padding-left: 16px !important;
padding-right: 16px !important;
}
#page-goede-doelen #causesToolbar .causes-toolbar {
gap: 10px !important;
padding: 14px 0 !important;
}
#page-goede-doelen #causesToolbar .filter-bar {
width: 100%;
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
}
#page-goede-doelen #causesToolbar .filter-btn {
white-space: nowrap;
flex-shrink: 0;
}
#page-goede-doelen #causesToolbar .sort-select,
#page-goede-doelen #causesToolbar .search-wrap {
width: 100%;
min-width: 0;
}
#page-nieuws .nieuws-grid,
#page-nieuws #nieuwsGrid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
#page-blog [style*="grid-template-columns: 'repeat(auto-fill, minmax(320px, 1fr))'"],
#page-blog .container.section-sm > div[style*="grid-template-columns"],
#page-denk-mee [style*="grid-template-columns: 'repeat(auto-fill, minmax(320px, 1fr))'"],
#page-denk-mee .container.section-sm > div[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}
#page-blog .blog-post-card,
#page-denk-mee .blog-post-card {
padding: 16px !important;
border-radius: 14px !important;
}
}
@media (max-width: 380px) {
#page-home #heroH1 { font-size: 2rem !important; }
#page-home #heroDesc { font-size: .9rem !important; }
#page-goede-doelen .causes-count { font-size: .75rem !important; }
#page-nieuws h1 { font-size: 1.55rem !important; }
#page-blog h1,
#page-denk-mee h1 { font-size: 1.75rem !important; }
}
/* Dashboard parity touches (React) */
#page-dashboard .dash-content { min-width: 0; }
#page-dashboard .dash-section.active { display: block; }
#page-dashboard .sidebar-profile #dashAnonBadge { max-width: fit-content; }
#page-dashboard .sidebar-profile { min-width: 0; }
#page-dashboard .sidebar-card { min-width: 0; }
#page-dashboard .sidebar { min-width: 0; }
#dash-project-beheer button:disabled {
transform: none !important;
box-shadow: none !important;
}
#dash-goeddoel .btn,
#dash-collectant .btn {
min-height: 38px;
}
@media (max-width: 768px) {
#page-dashboard .dashboard-layout { padding-top: 16px !important; }
#page-dashboard .dash-stat-grid { grid-template-columns: 1fr 1fr !important; }
#page-dashboard .dash-content .dash-title { font-size: 1.35rem !important; }
#dash-goeddoel > div,
#dash-collectant > div,
#dash-project-beheer #projectActiefPanel > div {
border-radius: 12px !important;
padding: 14px !important;
}
}
/* React account-dashboard: tablet — zelfde doorbroken menu-rijen (geen enkele zeer brede kolomlijst voor navigatie) */
@media (min-width: 601px) and (max-width: 1024px) {
#page-dashboard.account-dashboard-v2 .sidebar-nav {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
overflow-x: visible !important;
align-content: flex-start !important;
justify-content: flex-start !important;
row-gap: 8px !important;
column-gap: 6px !important;
padding: 12px 14px !important;
box-sizing: border-box !important;
}
#page-dashboard.account-dashboard-v2 .sidebar-nav-item,
#page-dashboard.account-dashboard-v2 .sidebar-nav a.sidebar-nav-item {
flex: 1 1 calc(50% - 4px) !important;
max-width: calc(50% - 4px) !important;
min-width: 0 !important;
width: auto !important;
white-space: normal !important;
justify-content: flex-start !important;
text-align: left !important;
}
#page-dashboard.account-dashboard-v2 .sidebar-nav button#navProjectBeheer.sidebar-nav-item,
#page-dashboard.account-dashboard-v2 .sidebar-nav button#navStartProject.sidebar-nav-item {
flex: 1 1 100% !important;
max-width: 100% !important;
}
#page-dashboard.account-dashboard-v2 .sidebar-nav .divider {
flex: 1 1 100% !important;
width: 100% !important;
margin: 8px 0 !important;
}
#page-dashboard.account-dashboard-v2 .sidebar-nav .sidebar-nav-meld-wrap {
display: flex !important;
flex: 1 1 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
#page-dashboard.account-dashboard-v2 .sidebar-nav .sidebar-nav-meld-wrap a {
width: 100% !important;
max-width: 100% !important;
}
}
@media (max-width: 380px) {
#page-dashboard .dash-stat-grid { grid-template-columns: 1fr !important; }
#page-dashboard .sidebar-nav-item { font-size: .76rem !important; }
}