/* =========================================================
   GLOBAL TOKENS + RESET
   ========================================================= */
:root{
  --amber:#D97706;
  --copper:#B45309;
  --dark-malt:#1C1410;
  --cream:#FEF3E2;
  --off-white:#FAF8F5;
  --warm-gray:#57534E;
  --light-gray:#E7E5E4;
  --accent:#EA580C;
  --success:#059669;          /* algemeen groen (checkout/landing) */
  --success-green:#16A34A;    /* dashboard shipped/alerts */
  --warning-orange:#F59E0B;   /* dashboard warning */

  --font-display:'Bitter',serif;
  --font-body:'Work Sans',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  font-family:var(--font-body);
  background:var(--off-white);
  color:var(--dark-malt);
  line-height:1.6;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.1;
}

h1{font-size:clamp(2.5rem,6vw,5rem);}
h2{font-size:clamp(2rem,4vw,3.5rem);}
h3{font-size:clamp(1.5rem,3vw,2rem);}

/* =========================================================
   SHARED UTILITIES
   ========================================================= */

/* Info Callout (shared) */
.info-callout{
  background:rgba(217,119,6,.1);
  border-left:4px solid var(--copper);
  padding:1.5rem;
  margin:2rem 0;
}
.info-callout-title{font-weight:700;margin-bottom:.5rem;}

/* Scroll Progress (landing) */
.scroll-progress{
  position:fixed;
  top:0;left:0;
  width:0%;
  height:3px;
  background:var(--copper);
  z-index:10000;
  transition:width .1s ease;
}

/* =========================================================
   BUTTONS (MERGED)
   - Fix: hover fill always behind text (no span needed)
   ========================================================= */

.btn-custom{
  padding:0.875rem 2rem;
  border:none;
  border-radius:0;
  font-weight:600;
  font-family:var(--font-body);
  cursor:pointer;
  transition:all .2s ease;
  display:inline-block;
  text-decoration:none;
  text-align:center;
  font-size:1rem;
}

/* Primary (global fix) */
.btn-primary-custom{
  background:var(--dark-malt);
  color:var(--cream);
  padding:1.25rem 3rem;
  font-size:1.1rem;
  font-weight:700;
  border:none;
  transition:transform .3s ease, box-shadow .3s ease, color .3s ease;
  width:100%;
  text-align:center;
  position:relative;

  overflow:hidden;
  isolation:isolate;          /* ✅ key: fixes z-index layering */
}

.btn-primary-custom::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--copper);
  transform:translateX(-100%);
  transition:transform .4s ease;
  z-index:-1;                 /* ✅ ALWAYS behind text */
}

.btn-primary-custom:hover{
  color:var(--cream);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(185,83,9,.3);
}

.btn-primary-custom:hover::before{
  transform:translateX(0);
}

.btn-primary-custom:disabled{
  background:var(--warm-gray);
  opacity:.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* Variant: dashboard-style hover (cream background) */
.btn-primary-custom.is-invert-hover{
  border:2px solid var(--dark-malt);
}

.btn-primary-custom.is-invert-hover::before{
  display:none;
}

.btn-primary-custom.is-invert-hover:hover{
  background:var(--cream);
  color:var(--dark-malt);
  transform:none;
  box-shadow:none;
}

.button-group > .btn-primary-custom:first-child{
  width:auto;                       /* primary is 100%, vorige niet */
  background:transparent;
  color:var(--dark-malt);
  border:2px solid var(--dark-malt);
  padding:0.875rem 2rem;
  transform:none;
  box-shadow:none;
}

/* geen fill-animatie op vorige */
.button-group > .btn-primary-custom:first-child::before{
  display:none;
}

.button-group > .btn-primary-custom:first-child:hover{
  background:var(--dark-malt);
  color:var(--cream);
  transform:none;
  box-shadow:none;
}

/* Secondary */
.btn-custom.btn-secondary-custom{
  background:#fff;
  color:var(--dark-malt);
  border:2px solid var(--light-gray);
}
.btn-custom.btn-secondary-custom:hover{
  border-color:var(--dark-malt);
}

/* Danger (rood) */
.btn-custom.btn-danger-custom{
  background:#DC2626;
  color:#fff;
  border:2px solid #DC2626;
}
.btn-custom.btn-danger-custom:hover{
  background:#B91C1C;
  border-color:#B91C1C;
}

/* (optioneel) Primary zonder die “landing-flow” hover-fill,
   handig voor dashboard buttons die niet 100% breed moeten zijn */
.btn-custom.btn-primary-custom{
  background:var(--dark-malt);
  color:var(--cream);
  border:2px solid var(--dark-malt);
  width:auto;           /* voorkomt 100% breedte in dashboard */
  padding:.75rem 1.25rem;
  font-size:1rem;
}
.btn-custom.btn-primary-custom:hover{
  background:var(--copper);
  border-color:var(--copper);
}

/* =========================================================
   NAV (MERGED)
   - legacy .navbar (bootstrap-ish)
   - v2 (full) .nav-*
   - basic nav .basic-nav
   - dashboard nav .top-bar / .main-nav
   ========================================================= */

/* Dashboard top bar */
.top-bar{
  background-color:#ffb900;
  padding:.5rem 0;
  font-size:.875rem;
}

/* Dashboard main nav */
.main-nav{
  background:#fff;
  border-bottom:2px solid var(--dark-malt);
  padding:1rem 0;
}

/* Legacy navbar */
.navbar{
  background:rgba(250,248,245,.95);
  backdrop-filter:blur(10px);
  border-bottom:2px solid var(--dark-malt);
  padding:1.25rem 0;
}

/* Shared brand */
.navbar-brand{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:800;
  color:var(--dark-malt)!important;
  letter-spacing:-0.02em;
}

/* NAV v2 — full (conflict-proof) */
.nav-trust-bar{
  background:#ffb900;
  padding:.75rem 0;
  border-bottom:2px solid var(--dark-malt);
}
.nav-trust-bar-content{
  max-width:1400px;
  margin:0 auto;
  padding:0 2rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
}
.nav-trust-signals{
  display:flex;
  gap:2rem;
  align-items:center;
  flex-wrap:wrap;
}
.nav-trust-item{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.9rem;
  font-weight:500;
  color:var(--dark-malt);
  white-space:nowrap;
}
.nav-stars{color:var(--dark-malt);letter-spacing:2px;}
.nav-check-icon{color:var(--success);font-weight:700;font-size:1.2rem;}
.nav-top-links{display:flex;gap:1.5rem;align-items:center;}
.nav-top-link{
  color:var(--dark-malt);
  text-decoration:none;
  font-size:.9rem;
  font-weight:500;
  transition:all .2s;
}
.nav-top-link:hover{color:#000;text-decoration:underline;}

.nav-main{
  background:#fff;
  border-bottom:3px solid var(--dark-malt);
  position:sticky;
  top:0;
  z-index:1000;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.nav-content{
  max-width:1400px;
  margin:0 auto;
  padding:0 2rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:80px;
}
.nav-logo{
  margin:0;
  width:53px;
  height:50px;
  background-image:url(https://assets.bettyblocks.com/925f4b013a93471db3c8891617f3123e_assets/files/sprite.png);
  background-position:0 0;
  background-size:800px 600px;
  background-repeat:no-repeat;
  text-indent:-9999px;
  display:block;
  transition:transform .2s;
}
@media only screen and (-webkit-min-device-pixel-ratio:2), only screen and (min-resolution:192dpi){
  .nav-logo{background-image:url(https://assets.bettyblocks.com/925f4b013a93471db3c8891617f3123e_assets/files/sprite_2x.png);}
}
.nav-logo:hover{transform:scale(1.05);}

.nav-links{display:flex;gap:2.5rem;align-items:center;}
.nav-link{
  color:var(--dark-malt);
  text-decoration:none;
  font-weight:600;
  font-size:1.05rem;
  position:relative;
  transition:color .3s;
}
.nav-link::after{
  content:'';
  position:absolute;
  bottom:-5px;
  left:0;
  width:0;
  height:3px;
  background:var(--amber);
  transition:width .3s ease;
}
.nav-link:hover{color:var(--amber);}
.nav-link:hover::after{width:100%;}
.nav-link.active{color:var(--amber);}
.nav-link.active::after{width:100%;}
.nav-link.highlight{
  background:var(--amber);
  color:#fff;
  padding:.75rem 1.5rem;
  border-radius:4px;
  transition:all .3s;
}
.nav-link.highlight:hover{
  background:var(--copper);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(217,119,6,.3);
}
.nav-link.highlight::after{display:none;}

/* Mobile toggle + menu */
.nav-mobile-toggle{
  display:none;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
  padding:.5rem;
}
.nav-mobile-toggle span{
  width:28px;
  height:3px;
  background:var(--dark-malt);
  transition:all .3s;
  border-radius:2px;
}
.nav-mobile-toggle.active span:nth-child(1){transform:rotate(45deg) translate(8px,8px);}
.nav-mobile-toggle.active span:nth-child(2){opacity:0;}
.nav-mobile-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(8px,-8px);}

.nav-mobile-menu{
  display:none;
  background:#fff;
  border-bottom:3px solid var(--dark-malt);
  padding:2rem;
}
.nav-mobile-menu.active{display:block;}
.nav-mobile-links{display:flex;flex-direction:column;gap:1.5rem;}
.nav-mobile-link{
  color:var(--dark-malt);
  text-decoration:none;
  font-weight:600;
  font-size:1.2rem;
  padding:1rem;
  border-bottom:2px solid var(--light-gray);
  transition:all .3s;
}
.nav-mobile-link:hover{color:var(--amber);padding-left:1.5rem;}
.nav-mobile-link.active{
  color:var(--amber);
  font-weight:700;
  border-left:4px solid var(--amber);
  padding-left:1rem;
}

.nav-mobile-login{
  margin-top:2rem;
  padding-top:2rem;
  border-top:3px solid var(--dark-malt);
}
.nav-mobile-login h3{margin-bottom:1rem;font-size:1.2rem;}
.nav-login-form{display:flex;flex-direction:column;gap:1rem;}
.nav-login-form input{
  padding:.75rem;
  border:2px solid var(--light-gray);
  border-radius:4px;
  font-size:1rem;
  font-family:var(--font-body);
}
.nav-login-form input:focus{outline:none;border-color:var(--amber);}
.nav-login-form button{
  background:var(--dark-malt);
  color:#fff;
  border:none;
  padding:1rem;
  font-size:1rem;
  font-weight:600;
  border-radius:4px;
  cursor:pointer;
  transition:all .3s;
}
.nav-login-form button:hover{background:var(--amber);transform:translateY(-2px);}
.nav-login-links{display:flex;justify-content:space-between;font-size:.9rem;margin-top:.5rem;}
.nav-login-links a{color:var(--warm-gray);text-decoration:none;}
.nav-login-links a:hover{color:var(--amber);}

/* Basic nav — checkout/flow */
.basic-nav{
  background:#fff;
  border-bottom:3px solid var(--dark-malt);
  position:sticky;
  top:0;
  z-index:1000;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.basic-nav-content{
  max-width:1400px;
  margin:0 auto;
  padding:0 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
}
.basic-nav-left{display:flex;align-items:center;gap:1rem;}
.basic-nav-title{font-weight:700;color:var(--dark-malt);font-size:1rem;}
.basic-nav-right{display:flex;align-items:center;gap:1rem;color:var(--warm-gray);font-size:.9rem;}
.basic-nav-link{
  color:var(--dark-malt);
  text-decoration:none;
  font-weight:600;
  font-size:.95rem;
  opacity:.9;
}
.basic-nav-link:hover{opacity:1;text-decoration:underline;}

/* =========================================================
   LANDING / MARKETING
   ========================================================= */
.hero-section{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:8rem 0 4rem;
  position:relative;
  background:linear-gradient(135deg,var(--cream) 0%,var(--off-white) 100%);
  overflow:hidden;
}
.hero-section::before{
  content:'';
  position:absolute;
  top:0;right:0;
  width:50%;
  height:100%;
  background:repeating-linear-gradient(
    45deg,
    transparent,
    transparent 20px,
    rgba(217,119,6,.03) 20px,
    rgba(217,119,6,.03) 40px
  );
  z-index:1;
}
.hero-content{position:relative;z-index:2;}
.hero-subheadline{
  font-size:clamp(1.1rem,2vw,1.4rem);
  color:var(--warm-gray);
  line-height:1.6;
  margin-bottom:2.5rem;
}
.hero-cta{
  background:var(--dark-malt);
  color:var(--cream);
  padding:1.25rem 3rem;
  font-size:1.1rem;
  font-weight:600;
  border:none;
  transition:all .3s ease;
  display:inline-block;
  text-decoration:none;
  position:relative;
  overflow:hidden;
}
.hero-cta::before{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:100%;
  height:100%;
  background:var(--copper);
  transition:left .4s ease;
  z-index:-1;
}
.hero-cta:hover{
  color:var(--cream);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(28,20,16,.3);
}
.hero-cta:hover::before{left:0;}
.scroll-hint{display:block;margin-top:2rem;font-size:.9rem;color:var(--warm-gray);}

.section-label{
  font-size:.85rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--copper);
  margin-bottom:1rem;
  display:block;
}
.section-intro{
  font-size:1.15rem;
  color:var(--warm-gray);
  margin:1.5rem 0 3rem;
}

/* Why section */
.why-section{
  background:var(--dark-malt);
  color:var(--cream);
  border-top:3px solid var(--copper);
  border-bottom:3px solid var(--copper);
  padding:6rem 0;
}
.why-section .section-label{color:var(--amber);}
.why-section .section-intro{color:var(--cream);opacity:.9;}

.usp{position:relative;padding-left:4rem;margin-bottom:2rem;}
.usp::before{
  content:'';
  position:absolute;
  left:0;top:0;
  width:3rem;height:3rem;
  background:var(--copper);
  border-radius:50%;
}
.usp::after{
  content:'✓';
  position:absolute;
  left:.75rem;top:.4rem;
  font-size:1.5rem;
  color:var(--cream);
  font-weight:700;
}
.usp h3{font-size:1.5rem;margin-bottom:.75rem;}
.usp p{line-height:1.7;opacity:.9;}

/* Steps (landing cards) */
.step-card{
  background:#fff;
  padding:2.5rem;
  border:2px solid var(--light-gray);
  height:100%;
  transition:all .3s ease;
}
.step-card:hover{
  border-color:var(--copper);
  transform:translateY(-5px);
  box-shadow:0 10px 30px rgba(185,83,9,.15);
}
.step-number{
  font-family:var(--font-display);
  font-size:3rem;
  font-weight:800;
  color:var(--amber);
  line-height:1;
  margin-bottom:1rem;
  opacity:.3;
}

/* Control */
.control-section{background:var(--cream);padding:6rem 0;}
.toggle-item{
  background:#fff;
  padding:2rem;
  border-left:4px solid var(--copper);
  margin-bottom:2rem;
  transition:all .3s ease;
}
.toggle-item:hover{box-shadow:0 4px 20px rgba(185,83,9,.1);transform:translateX(5px);}
.toggle-btn{
  padding:.75rem 1.5rem;
  border:2px solid var(--light-gray);
  background:#fff;
  cursor:pointer;
  font-family:var(--font-body);
  font-weight:500;
  transition:all .3s ease;
  margin-right:.5rem;
}
.toggle-btn.active{
  background:var(--dark-malt);
  color:var(--cream);
  border-color:var(--dark-malt);
}
.toggle-btn:hover:not(.active){border-color:var(--copper);}
.toggle-note{
  margin-top:3rem;
  padding:1.5rem;
  background:rgba(217,119,6,.1);
  border-left:3px solid var(--copper);
  font-style:italic;
  color:var(--warm-gray);
}

/* Box cards */
.box-card{
  background:#fff;
  border:3px solid var(--light-gray);
  padding:3rem 2rem;
  position:relative;
  transition:all .4s ease;
  height:100%;
  display:flex;
  flex-direction:column;
}
.box-card:hover{
  border-color:var(--copper);
  transform:translateY(-8px);
  box-shadow:0 15px 40px rgba(185,83,9,.2);
}
.box-card.featured{border-color:var(--copper);background:var(--cream);}
.box-badge{
  position:absolute;
  top:-12px;
  right:2rem;
  background:var(--copper);
  color:var(--cream);
  padding:.35rem 1rem;
  font-size:.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.box-tagline{color:var(--warm-gray);font-style:italic;margin-bottom:1.5rem;}
.box-description{color:var(--warm-gray);line-height:1.7;margin-bottom:2rem;flex-grow:1;}
.box-price{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:700;
  color:var(--dark-malt);
  margin-bottom:1.5rem;
}
.box-cta{
  width:100%;
  padding:1rem;
  background:transparent;
  border:2px solid var(--dark-malt);
  color:var(--dark-malt);
  font-weight:600;
  cursor:pointer;
  transition:all .3s ease;
}
.box-cta:hover{background:var(--dark-malt);color:var(--cream);}
.box-card.featured .box-cta{background:var(--dark-malt);color:var(--cream);}
.box-card.featured .box-cta:hover{background:var(--copper);border-color:var(--copper);}

/* Rhythm cards */
.rhythm-card{
  background:#fff;
  padding:2.5rem;
  border:2px solid var(--light-gray);
  position:relative;
  cursor:pointer;
  transition:all .3s ease;
  height:100%;
}
.rhythm-card:hover{border-color:var(--copper);transform:scale(1.02);}
.rhythm-card.featured{border-color:var(--copper);background:var(--cream);}
.rhythm-badge{
  position:absolute;
  top:-12px;
  left:2rem;
  background:var(--copper);
  color:var(--cream);
  padding:.35rem 1rem;
  font-size:.8rem;
  font-weight:600;
  text-transform:uppercase;
}

/* Testimonials */
.testimonials-section{background:var(--cream);padding:6rem 0;}
.testimonial-card{
  background:#fff;
  padding:2.5rem;
  border-left:4px solid var(--copper);
  height:100%;
}
.testimonial-quote{
  font-size:1.3rem;
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.4;
  margin-bottom:1.5rem;
  color:var(--dark-malt);
}
.testimonial-text{
  color:var(--warm-gray);
  font-style:italic;
  margin-bottom:1.5rem;
  line-height:1.7;
}
.testimonial-author{font-weight:600;color:var(--dark-malt);}

/* Final CTA + footer */
.final-cta-section{
  background:var(--dark-malt);
  color:var(--cream);
  text-align:center;
  padding:8rem 0;
  border-top:3px solid var(--copper);
}
.final-cta-section .section-intro{color:var(--cream);opacity:.9;}
.secondary-link{
  color:var(--cream);
  text-decoration:none;
  font-size:.95rem;
  opacity:.8;
  transition:opacity .3s ease;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  margin:0 1rem;
}
.secondary-link:hover{
  opacity:1;
  color:var(--cream);
  border-bottom-color:var(--cream);
}
footer{
  background:var(--dark-malt);
  color:var(--cream);
  padding:3rem 0;
  border-top:1px solid rgba(254,243,226,.2);
  text-align:center;
  font-size:.9rem;
  opacity:.7;
}

/* Animations */
.fade-in-up{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .6s ease,transform .6s ease;
}
.fade-in-up.visible{opacity:1;transform:translateY(0);}

/* =========================================================
   FLOW / CHECKOUT WIZARD (landing flow)
   ========================================================= */
.progress-container{
  background:#fff;
  border-bottom:2px solid var(--light-gray);
  padding:2rem 0 1rem;
  position:sticky;
  top:0;
  z-index:100;
}
.progress-steps{
  display:flex;
  justify-content:space-between;
  position:relative;
  max-width:800px;
  margin:0 auto;
}
.progress-line{
  position:absolute;
  top:20px;left:0;right:0;
  height:3px;
  background:var(--light-gray);
  z-index:1;
}
.progress-line-fill{
  height:100%;
  background:var(--copper);
  width:0%;
  transition:width .4s ease;
}
.progress-step{position:relative;z-index:2;text-align:center;flex:1;}
.progress-dot{
  width:40px;height:40px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--light-gray);
  margin:0 auto .5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  transition:all .3s ease;
}
.progress-step.active .progress-dot{
  background:var(--copper);
  border-color:var(--copper);
  color:#fff;
  transform:scale(1.1);
}
.progress-step.completed .progress-dot{
  background:var(--success);
  border-color:var(--success);
  color:#fff;
}
.progress-step.completed .progress-dot::after{content:'✓';}
.progress-label{font-size:.85rem;font-weight:600;color:var(--warm-gray);}
.progress-step.active .progress-label{color:var(--copper);}

/* Flow layout */
.flow-container{
  max-width:900px;
  margin:0 auto;
  padding:3rem 1rem;
}
.step-section{display:none;animation:fadeInUpFlow .4s ease;}
.step-section.active{display:block;}
@keyframes fadeInUpFlow{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}
.step-title{font-size:2.5rem;margin-bottom:1rem;text-align:center;}
.step-subtitle{font-size:1.1rem;color:var(--warm-gray);text-align:center;margin-bottom:3rem;}

/* Choice cards */
.choice-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.5rem;
  margin:3rem 0;
}
.choice-card{
  background:#fff;
  border:3px solid var(--light-gray);
  padding:2rem;
  cursor:pointer;
  transition:all .3s ease;
  position:relative;
}
.choice-card:hover{
  border-color:var(--copper);
  transform:translateY(-5px);
  box-shadow:0 10px 30px rgba(185,83,9,.15);
}
.choice-card.selected{
  border-color:var(--copper);
  background:var(--cream);
}
.choice-card.selected::before{
  content:'✓';
  position:absolute;
  top:1rem;right:1rem;
  width:30px;height:30px;
  background:var(--copper);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}
.choice-badge{
  position:absolute;
  top:-12px;
  right:1rem;
  background:var(--copper);
  color:#fff;
  padding:.25rem .75rem;
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
}
.choice-icon{font-size:2.5rem;margin-bottom:1rem;}
.choice-title{font-size:1.5rem;font-weight:700;margin-bottom:.5rem;}
.choice-description{color:var(--warm-gray);font-size:.95rem;margin-bottom:1rem;}
.choice-price{
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:700;
  color:var(--dark-malt);
}
.choice-price-detail{font-size:.85rem;color:var(--warm-gray);font-weight:400;}

/* Toggle options (flow) */
.toggle-option{
  background:#fff;
  border:3px solid var(--light-gray);
  padding:1.5rem;
  margin-bottom:1.5rem;
  cursor:pointer;
  transition:all .3s ease;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.toggle-option:hover{border-color:var(--copper);}
.toggle-option.selected{border-color:var(--copper);background:var(--cream);}
.toggle-radio{
  width:24px;height:24px;
  border:3px solid var(--light-gray);
  border-radius:50%;
  transition:all .3s ease;
  flex-shrink:0;
}
.toggle-option.selected .toggle-radio{
  border-color:var(--copper);
  background:var(--copper);
  position:relative;
}
.toggle-option.selected .toggle-radio::after{
  content:'';
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:8px;height:8px;
  background:#fff;
  border-radius:50%;
}

/* Summary sidebar */
.summary-sidebar{
  position:sticky;
  top:120px;
  background:#fff;
  border:2px solid var(--light-gray);
  padding:2rem;
  margin-left:2rem;
}
.summary-title{
  font-size:1.3rem;
  font-weight:700;
  margin-bottom:1.5rem;
  border-bottom:2px solid var(--light-gray);
  padding-bottom:1rem;
}
.summary-item{
  display:flex;
  justify-content:space-between;
  margin-bottom:1rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--light-gray);
}
.summary-item:last-of-type{border-bottom:none;}
.summary-label{color:var(--warm-gray);font-size:.9rem;}
.summary-value{font-weight:600;}
.summary-total{
  margin-top:1.5rem;
  padding-top:1.5rem;
  border-top:2px solid var(--dark-malt);
}
.summary-total-label{font-size:1.2rem;font-weight:700;}
.summary-total-price{
  font-family:var(--font-display);
  font-size:2rem;
  font-weight:800;
  color:var(--copper);
}

/* Preview box */
.preview-box{
  background:var(--cream);
  padding:2rem;
  border-left:4px solid var(--copper);
  margin:2rem 0;
}
.preview-bottles{display:flex;gap:.5rem;margin:1rem 0;}
.preview-bottle{
  width:40px;height:80px;
  background:linear-gradient(135deg,var(--amber) 0%,var(--copper) 100%);
  border-radius:4px 4px 2px 2px;
  position:relative;
  opacity:.8;
  transition:all .3s ease;
}
.preview-bottle::before{
  content:'';
  position:absolute;
  top:-5px;left:50%;
  transform:translateX(-50%);
  width:15px;height:8px;
  background:var(--dark-malt);
  border-radius:2px 2px 0 0;
}
.preview-bottle.active{opacity:1;transform:translateY(-5px);}

/* Button group (flow) */
.button-group{
  display:flex;
  gap:1rem;
  margin-top:3rem;
  justify-content:center;
}

/* =========================================================
   CHECKOUT (YOUR FIRST SNIPPET)
   - names kept as-is to avoid HTML changes
   ========================================================= */
.checkout-progress{
  background:#fff;
  border-bottom:2px solid var(--light-gray);
  padding:2rem 0;
}
.progress-steps-checkout{
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}
.progress-step-checkout{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem 1.5rem;
  background:var(--cream);
  border-radius:50px;
  font-size:.9rem;
  font-weight:600;
}
.progress-step-checkout.completed{background:var(--success);color:#fff;}
.progress-step-checkout.active{background:var(--copper);color:#fff;}

.step-icon{
  width:24px;height:24px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.8rem;
}
.progress-step-checkout.completed .step-icon{background:#fff;color:var(--success);}
.progress-step-checkout.active .step-icon{background:#fff;color:var(--copper);}

/* Main Layout */
.checkout-container{
  max-width:1200px;
  margin:0 auto;
  padding:3rem 1rem;
}
.page-title{font-size:2.5rem;margin-bottom:.5rem;}
.page-subtitle{color:var(--warm-gray);margin-bottom:3rem;}

/* Form Sections */
.form-section{
  background:#fff;
  border:2px solid var(--light-gray);
  padding:2.5rem;
  margin-bottom:2rem;
}
.section-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:2rem;
  padding-bottom:1rem;
  border-bottom:2px solid var(--light-gray);
}
.section-title{font-size:1.5rem;margin:0;}
.section-number{
  width:40px;height:40px;
  background:var(--copper);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:1.2rem;
}
.form-label{font-weight:600;margin-bottom:.5rem;color:var(--dark-malt);}

.form-control,.form-select{
  border:2px solid var(--light-gray);
  padding:.75rem 1rem;
  font-size:1rem;
  transition:all .3s ease;
}
.form-control:focus,.form-select:focus{
  border-color:var(--copper);
  box-shadow:0 0 0 .2rem rgba(185,83,9,.15);
}
.form-text{color:var(--warm-gray);font-size:.875rem;margin-top:.25rem;}

/* Shipping Options */
.shipping-option{
  border:3px solid var(--light-gray);
  padding:1.5rem;
  margin-bottom:1rem;
  cursor:pointer;
  transition:all .3s ease;
  position:relative;
}
.shipping-option:hover{border-color:var(--copper);background:var(--cream);}
.shipping-option.selected{border-color:var(--copper);background:var(--cream);}
.shipping-option.selected::before{
  content:'✓';
  position:absolute;
  top:1rem;right:1rem;
  width:30px;height:30px;
  background:var(--copper);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
}
.shipping-option.selected .shipping-option-header{padding-right:3.25rem;}
.shipping-option-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:.5rem;
}
.shipping-title{font-weight:700;font-size:1.1rem;margin:0;}
.shipping-price{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.2rem;
  color:var(--copper);
}
.shipping-price.free{color:var(--success);}
.shipping-description{color:var(--warm-gray);font-size:.95rem;margin:0;}
.shipping-badge{
  background:var(--success);
  color:#fff;
  padding:.25rem .75rem;
  border-radius:4px;
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  display:inline-block;
  margin-top:.5rem;
}

/* Payment Options */
.payment-option{
  border:3px solid var(--light-gray);
  padding:1.5rem;
  margin-bottom:1rem;
  cursor:pointer;
  transition:all .3s ease;
  position:relative;
}
.payment-option:hover{border-color:var(--copper);}
.payment-option.selected{border-color:var(--copper);background:var(--cream);}
.payment-option.selected::before{
  content:'✓';
  position:absolute;
  top:1rem;right:1rem;
  width:30px;height:30px;
  background:var(--copper);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
}
.payment-option-header{display:flex;align-items:center;gap:1rem;}
.payment-details{flex:1;}
.payment-title{font-weight:700;font-size:1.1rem;margin:0 0 .25rem 0;}
.payment-description{color:var(--warm-gray);font-size:.9rem;margin:0;}
.payment-badge{
  background:var(--copper);
  color:#fff;
  padding:.25rem .75rem;
  border-radius:4px;
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
}

/* Auto-incasso */
.auto-incasso-box{
  background:rgba(5,150,105,.1);
  border:2px solid var(--success);
  border-radius:8px;
  padding:1.5rem;
  margin-top:1.5rem;
}
.auto-incasso-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;}
.auto-incasso-icon{font-size:2rem;}
.auto-incasso-title{font-weight:700;font-size:1.1rem;margin:0;}
.auto-incasso-benefits{list-style:none;padding:0;margin:1rem 0 0 0;}
.auto-incasso-benefits li{
  padding:.5rem 0;
  padding-left:2rem;
  position:relative;
}
.auto-incasso-benefits li::before{
  content:'✓';
  position:absolute;
  left:0;
  color:var(--success);
  font-weight:bold;
  font-size:1.2rem;
}

/* Order Summary */
.order-summary{
  position:sticky;
  top:2rem;
  background:#fff;
  border:2px solid var(--light-gray);
  padding:2rem;
}
.summary-item:last-of-type{border-bottom:2px solid var(--dark-malt);}
.summary-total{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.5rem 0 0 0;
}
.summary-total-label{font-size:1.3rem;font-weight:700;}
.summary-total-price{
  font-family:var(--font-display);
  font-size:2.5rem;
  font-weight:800;
  color:var(--copper);
}
.summary-note{
  background:var(--cream);
  padding:1rem;
  margin-top:1.5rem;
  border-left:3px solid var(--copper);
  font-size:.9rem;
}
.subscription-details{
  background:rgba(217,119,6,.1);
  padding:1.5rem;
  margin-top:1.5rem;
  border-radius:8px;
}
.subscription-details h4{font-size:1rem;font-weight:700;margin-bottom:1rem;}
.subscription-details ul{list-style:none;padding:0;margin:0;}
.subscription-details li{padding:.5rem 0;color:var(--warm-gray);font-size:.9rem;}

/* Trust Signals (checkout bottom) */
.trust-signals-bottom{
  display:flex;
  justify-content:center;
  gap:2rem;
  margin-top:2rem;
  padding-top:2rem;
  border-top:1px solid var(--light-gray);
  flex-wrap:wrap;
}
.trust-signal-bottom{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.9rem;
  color:var(--warm-gray);
}
.trust-icon-bottom{color:var(--success);font-size:1.2rem;}

/* =========================================================
   DASHBOARD (NEW SNIPPET) — merged + conflicts fixed
   ========================================================= */
.dashboard-container{
  max-width:1400px;
  margin:0 auto;
  padding:2rem 1rem;
}

.dashboard-header{
  background:var(--dark-malt);
  color:var(--cream);
  padding:2.5rem 2rem;
  border-radius:0;
  margin-bottom:2rem;
  position:relative;
  overflow:hidden;
  border:none;
}
.dashboard-header h1{
  font-size:clamp(2rem,4vw,3rem);
  margin-bottom:.5rem;
  position:relative;
  z-index:2;
}
.dashboard-header p{
  opacity:.9;
  font-size:1.1rem;
  position:relative;
  z-index:2;
}

/* Sidebar Navigation */
.dashboard-sidebar{
  background:#fff;
  border:1px solid var(--light-gray);
  border-radius:0;
  padding:1.5rem;
  position:sticky;
  top:2rem;
}
.sidebar-nav{list-style:none;padding:0;margin:0;}
.sidebar-nav li{margin-bottom:.5rem;}
.sidebar-nav a{
  display:flex;
  align-items:center;
  padding:.875rem 1rem;
  color:var(--dark-malt);
  text-decoration:none;
  border-radius:0;
  font-weight:500;
  transition:all .2s ease;
  border:1px solid transparent;
}
.sidebar-nav a i{margin-right:.75rem;font-size:1.2rem;}
.sidebar-nav a:hover{background:#fff;border:1px solid var(--dark-malt);}
.sidebar-nav a.active{
  background:var(--dark-malt);
  color:var(--cream);
  border:1px solid var(--dark-malt);
}

/* Cards */
.dashboard-card{
  background:#fff;
  border:1px solid var(--light-gray);
  border-radius:0;
  padding:2rem;
  margin-bottom:2rem;
  transition:all .3s ease;
}
.dashboard-card:hover{
  border-color:var(--dark-malt);
  box-shadow:0 2px 8px rgba(28,20,16,.08);
}
.card-header-custom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1.5rem;
  padding-bottom:1rem;
  border-bottom:2px solid var(--light-gray);
}
.card-header-custom h2{font-size:1.75rem;margin:0;}
.card-icon{
  width:50px;height:50px;
  background:var(--cream);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  color:var(--copper);
}

/* Taste */
.taste-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.5rem;
}
.taste-item{
  background:var(--cream);
  padding:1.5rem;
  border-radius:6px;
  border-left:4px solid var(--copper);
}
.taste-item h4{
  font-size:1.1rem;
  margin-bottom:.5rem;
  color:var(--dark-malt);
}
.taste-value{
  font-size:1.5rem;
  font-weight:700;
  color:var(--copper);
  font-family:var(--font-display);
}

/* Subscription info */
.subscription-info{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1.5rem;
  margin-bottom:2rem;
}
.info-box{
  background:#fff;
  padding:1.5rem;
  border:1px solid var(--light-gray);
  border-radius:0;
  text-align:center;
}
.info-label{
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--warm-gray);
  margin-bottom:.5rem;
}
.info-value{
  font-size:1.75rem;
  font-weight:800;
  color:var(--dark-malt);
  font-family:var(--font-display);
}

/* Form elements */
.form-group-custom{margin-bottom:1.5rem;}
.form-group-custom label{
  display:block;
  margin-bottom:.5rem;
  font-weight:600;
  color:var(--dark-malt);
}
.form-control-custom{
  width:100%;
  padding:.875rem 1rem;
  border:1px solid var(--light-gray);
  border-radius:0;
  font-family:var(--font-body);
  font-size:1rem;
  transition:all .2s ease;
}
.form-control-custom:focus{
  outline:none;
  border-color:var(--dark-malt);
  box-shadow:none;
}

/* Frequency selector */
.frequency-selector{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem;
  margin:1.5rem 0;
}
.frequency-option{
  background:#fff;
  border:2px solid var(--light-gray);
  border-radius:0;
  padding:1.5rem;
  cursor:pointer;
  transition:all .2s ease;
  text-align:center;
}
.frequency-option:hover{border-color:var(--dark-malt);}
.frequency-option.active{
  border-color:var(--dark-malt);
  background:#fff;
  box-shadow:0 0 0 2px var(--dark-malt);
}
.frequency-option h4{font-size:1.25rem;margin-bottom:.5rem;}
.frequency-option p{color:var(--warm-gray);font-size:.9rem;margin:0;}

/* Box planner */
.box-timeline{position:relative;padding-left:3rem;}
.box-timeline::before{
  content:'';
  position:absolute;
  left:1rem;
  top:0;
  bottom:0;
  width:3px;
  background:var(--light-gray);
}
.box-item{
  position:relative;
  background:#fff;
  border:1px solid var(--light-gray);
  border-radius:0;
  padding:1.5rem;
  margin-bottom:1.5rem;
  transition:all .2s ease;
}
.box-item::before{
  content:'';
  position:absolute;
  left:-2.5rem;
  top:1.5rem;
  width:1.5rem;
  height:1.5rem;
  background:var(--dark-malt);
  border-radius:50%;
  border:3px solid var(--off-white);
}
.box-item:hover{
  border-color:var(--dark-malt);
  box-shadow:0 2px 8px rgba(28,20,16,.08);
}
.box-item.skipped{opacity:.6;background:var(--light-gray);}
.box-item.skipped::before{background:var(--warm-gray);}
.box-date{
  font-size:1.25rem;
  font-weight:700;
  color:var(--copper);
  font-family:var(--font-display);
  margin-bottom:.5rem;
}
.box-status{
  display:inline-block;
  padding:.25rem .75rem;
  border-radius:20px;
  font-size:.85rem;
  font-weight:600;
  margin-bottom:.75rem;
}
.box-status.upcoming{background:var(--cream);color:var(--copper);}
.box-status.shipped{background:var(--success-green);color:#fff;}
.box-status.skipped{background:var(--warm-gray);color:#fff;}
.box-actions{
  display:flex;
  gap:.75rem;
  margin-top:1rem;
  flex-wrap:wrap;
}
.box-actions button{padding:.5rem 1rem;font-size:.9rem;}

/* Payment methods (dashboard)
   FIX: .payment-icon conflicteerde met checkout .payment-icon (font-size)
   => dashboard gebruikt .payment-method .payment-icon (scoped)
*/
.payment-method{
  background:#fff;
  border:1px solid var(--light-gray);
  border-radius:0;
  padding:1.5rem;
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition:all .2s ease;
}
.payment-method:hover{border-color:var(--dark-malt);}
.payment-method.active{
  border-color:var(--dark-malt);
  background:#fff;
  box-shadow:0 0 0 2px var(--dark-malt);
}
.payment-info{display:flex;align-items:center;gap:1rem;}
.payment-method .payment-icon{
  width:50px;height:50px;
  background:#fff;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
}
.payment-details h4{font-size:1rem;margin-bottom:.25rem;}
.payment-details p{color:var(--warm-gray);font-size:.9rem;margin:0;}

/* Address card */
.address-display{
  background:#fff;
  padding:1.5rem;
  border-radius:0;
  border:1px solid var(--light-gray);
  margin-bottom:1.5rem;
}
.address-display p{margin-bottom:.5rem;}
.address-display p:last-child{margin-bottom:0;}

/* Alerts */
.alert-custom{
  padding:1rem 1.5rem;
  border-radius:0;
  margin-bottom:1.5rem;
  display:flex;
  align-items:center;
  gap:1rem;
  border:1px solid;
}
.alert-success{
  background:#DCFCE7;
  border:2px solid var(--success-green);
  color:#166534;
}
.alert-warning{
  background:#FEF3C7;
  border:2px solid var(--warning-orange);
  color:#92400E;
}
.alert-info{
  background:var(--cream);
  border:2px solid var(--copper);
  color:var(--dark-malt);
}

/* Modal */
.modal-overlay{
  display:none;
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:rgba(28,20,16,.8);
  z-index:9999;
  align-items:center;
  justify-content:center;
  animation:fadeIn .3s ease;
}
.modal-overlay.active{display:flex;}
.modal-content{
  background:#fff;
  border-radius:0;
  padding:2rem;
  max-width:600px;
  width:90%;
  max-height:90vh;
  overflow-y:auto;
  animation:slideUp .3s ease;
  border:2px solid var(--dark-malt);
}
.modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1.5rem;
  padding-bottom:1rem;
  border-bottom:2px solid var(--light-gray);
}
.modal-header h3{margin:0;font-size:1.75rem;}
.modal-close{
  background:none;
  border:none;
  font-size:1.5rem;
  cursor:pointer;
  color:var(--warm-gray);
  padding:0;
  width:35px;height:35px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  transition:all .3s ease;
}
.modal-close:hover{background:var(--light-gray);color:var(--dark-malt);}

@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes slideUp{
  from{opacity:0;transform:translateY(30px);}
  to{opacity:1;transform:translateY(0);}
}

/* =========================================================
   RESPONSIVE (MERGED)
   ========================================================= */
@media (max-width: 992px){
  .summary-sidebar{
    position:static;
    margin:3rem 0 0 0;
  }
  .choice-grid{grid-template-columns:1fr;}
  .order-summary{position:static;margin-top:3rem;}
}

@media (max-width: 968px){
  .nav-trust-signals{gap:1rem;font-size:.85rem;}
  .nav-trust-item:nth-child(4){display:none;}
  .nav-links{display:none;}
  .nav-mobile-toggle{display:flex;}
  .nav-top-links{gap:1rem;}
  .basic-nav-content{padding:0 1rem;}
}

@media (max-width: 768px){
  .hero-section{padding:6rem 0 3rem;min-height:90vh;}
  .step-title{font-size:2rem;}
  .button-group{flex-direction:column;}
  .progress-label{font-size:.75rem;}

  .page-title{font-size:2rem;}
  .form-section{padding:1.5rem;}
  .trust-signals-bottom{flex-direction:column;gap:1rem;}

  .dashboard-sidebar{position:static;margin-bottom:2rem;}
  .sidebar-nav{display:flex;overflow-x:auto;gap:.5rem;}
  .sidebar-nav li{margin-bottom:0;}
  .sidebar-nav a{white-space:nowrap;padding:.75rem 1rem;}
  .taste-grid,
  .subscription-info,
  .frequency-selector{grid-template-columns:1fr;}
  .box-actions{flex-direction:column;}
  .box-actions button{width:100%;}
}

@media (max-width: 640px){
  .nav-trust-bar-content{padding:0 1rem;}
  .nav-content{padding:0 1rem;}
  .nav-trust-item:nth-child(1){width:100%;}
  .nav-trust-item:nth-child(3){display:none;}
  .nav-top-link:nth-child(1){display:none;}
  .nav-logo{width:53px;height:50px;}
}

/* Summary: "Inclusief BTW..." altijd onder de prijs */
.summary-total{
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.summary-total > .d-flex{
  width: 100%;
}

.summary-total small{
  display: block;
  width: 100%;
  margin-top: 0 !important;
}

/* Bonnetje / summary: sticky maar niet vastplakken aan navbar */
.summary-sidebar{
  position: sticky;
  top: 140px;                 
  max-height: calc(100vh - 7.5rem);
  overflow-y: auto;
  margin-top: 16px;
}

/* Button group layout (wizard) */
.button-group{
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  align-items: stretch;
}

/* op mobiel onder elkaar */
@media (max-width: 768px){
  .button-group{
    flex-direction: column;
  }
}

/* Base button reset + consistent sizing */
.btn-primary-custom,
.btn-secondary-custom{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 0;            /* past bij je hoekige stijl */
  min-height: 56px;            /* zelfde hoogte */
  padding: 1rem 1.25rem;       /* consistente padding */
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  width: auto;                 /* niet 100% in een 2-col layout */
  white-space: nowrap;
  cursor: pointer;
}

/* Secondary */
.btn-secondary-custom{
  background: transparent;
  color: var(--dark-malt);
  border: 2px solid var(--dark-malt);
  transition: all .25s ease;
  flex: 0 0 180px;             /* vaste breedte desktop */
}

.btn-secondary-custom:hover{
  background: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(28,20,16,.08);
}

.btn-secondary-custom:active{
  transform: translateY(0);
}

/* Primary */
.btn-primary-custom{
  background: var(--dark-malt);
  color: var(--cream);
  border: none;
  position: relative;
  overflow: hidden;
  transition: all .3s ease;
  flex: 1;                     /* pakt de rest van de ruimte */
  z-index: 0;                  /* nodig voor layering */
}

/* hover-sweep altijd ACHTER de tekst */
.btn-primary-custom::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background: var(--copper);
  transition:left .4s ease;
  z-index: -1;                 /* <- belangrijk: achter tekst */
}

/* tekst altijd erboven (ook zonder span) */
.btn-primary-custom{
  z-index: 1;
}

.btn-primary-custom:hover{
  color: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(185,83,9,.3);
}

.btn-primary-custom:hover::before{
  left:0;
}

.btn-primary-custom:disabled{
  background: var(--warm-gray);
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Mobiel: allebei full width */
@media (max-width: 768px){
  .btn-primary-custom,
  .btn-secondary-custom{
    width: 100%;
  }
  .btn-secondary-custom{
    flex: 1 1 auto;
  }
}


:root{
  --nav-height: 72px; /* hoogte van jouw basic-nav / nav-v2 */
}

/* Zorg dat de progressbar nooit achter de nav verdwijnt */
.progress-container{
  position: sticky;
  top: var(--nav-height);
  z-index: 900;            /* lager dan nav (nav zit vaak op 1000) */
  background: #fff;        /* voorkomt “doorkijk” */
  border-bottom: 2px solid var(--light-gray);
}

/* Kleine spacing zodat het niet “plakt” */
.progress-container .container{
  padding-top: .75rem;
  padding-bottom: .75rem;
}

/* Als jouw nav op mobiel hoger/lager is, dan dit: */
@media (max-width: 968px){
  :root{
    --nav-height: 72px; /* zet hier evt 64px of 80px afhankelijk van je nav */
  }
}

/* =========================================================
   COOKIE / AGE OVERLAYS — BIAB v2 styling (override)
   ========================================================= */

.cookie_age_container{
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;                 /* jij zet display via JS */
  background: rgba(28,20,16,.78); /* dark-malt overlay */
  backdrop-filter: blur(6px);
  padding: 1.25rem;
}

.acceptcookie_scherm{
  /* card */
  background: #fff;
  color: var(--dark-malt);
  border: 3px solid var(--dark-malt);
  border-radius: 0;              /* hoekig */
  width: min(640px, 100%);
  max-height: min(80vh, 720px);
  overflow: auto;

  /* center */
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* spacing */
  padding: 2rem;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

/* Header / brand */
.acceptcookie_scherm .logo{
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}
.acceptcookie_scherm .navbar-brand{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--dark-malt) !important;
  text-decoration: none;
}

/* Titels */
.acceptcookie_scherm .display{
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--dark-malt);
  margin-bottom: .75rem;
}

/* Tekst */
.acceptcookie_scherm p{
  color: var(--warm-gray);
  margin-bottom: 1rem;
}

/* Links */
.acceptcookie_scherm a.underline,
.acceptcookie_scherm a{
  color: var(--copper);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.acceptcookie_scherm a:hover{
  color: var(--amber);
}

/* Knoppen: gebruik jouw bestaande knoppen */
.acceptcookie_scherm .btn{
  border-radius: 0 !important;
}

/* Maak bootstrap btn-primary/btn-success even BIAB-achtig (alleen binnen modal) */
.acceptcookie_scherm .btn.btn-primary{
  background: var(--dark-malt);
  border-color: var(--dark-malt);
  font-weight: 700;
}
.acceptcookie_scherm .btn.btn-primary:hover{
  background: var(--copper);
  border-color: var(--copper);
}

.acceptcookie_scherm .btn.btn-success{
  background: var(--success);
  border-color: var(--success);
  font-weight: 700;
}
.acceptcookie_scherm .btn.btn-success:hover{
  filter: brightness(.95);
}

/* “Geen marketing cookies” link knopje */
.acceptcookie_scherm .btn-link-like{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1.1rem;
  border: 2px solid var(--dark-malt);
  background: transparent;
  color: var(--dark-malt);
  font-weight: 700;
  text-decoration: none;
  transition: all .25s ease;
}
.acceptcookie_scherm .btn-link-like:hover{
  background: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(28,20,16,.08);
}

/* Image */
.acceptcookie_scherm img{
  max-width: 220px;
  height: auto;
  margin-top: 1rem;
}

/* Mobile: card netter */
@media (max-width: 768px){
  .cookie_age_container{
    padding: 1rem;
  }
  .acceptcookie_scherm{
    position: relative;
    top: auto; left: auto;
    transform: none;
    margin: 10vh auto 0;
    max-height: 80vh;
    padding: 1.5rem;
  }
}

/* =========================================================
   BIAB SIMPLE FOOTER (new)
   ========================================================= */

.biab-footer{
  background: var(--dark-malt);
  color: var(--cream);
  width: 100%;
  border-top: 3px solid var(--copper);
}

.biab-footer-inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 3.5rem 2rem 1.5rem;
}

/* TOP LAYOUT:
   brand | 3 columns | socials */
.biab-footer-top{
  display: grid;
  grid-template-columns: 1.4fr 2fr 1fr; /* brand | 3 kolommen | socials */
  gap: 2.5rem;
  align-items: start;
}

/* Brand */
.biab-footer-logo{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--cream);
  text-decoration: none;
  display: inline-block;
  margin-bottom: .75rem;
}

.biab-footer-logo:hover{
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.biab-footer-text{
  color: rgba(254,243,226,.85);
  line-height: 1.6;
  max-width: 44ch;
  margin: 0 0 1.25rem;
}

.biab-footer-badges{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.biab-footer-badge{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .7rem;
  border: 1px solid rgba(254,243,226,.25);
  color: rgba(254,243,226,.9);
  font-size: .9rem;
}

/* 3 kolommen wrapper */
.biab-footer-columns{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

/* Link columns */
.biab-footer-links h6,
.biab-footer-social h6{
  font-family: var(--font-display);
  font-weight: 800;
  margin-bottom: .75rem;
  color: var(--cream);
}

.biab-footer-links a{
  display: block;
  color: rgba(254,243,226,.85);
  text-decoration: none;
  margin-bottom: .45rem;
  font-weight: 600;
  font-size: .95rem;
}

.biab-footer-links a:hover{
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Socials */
.biab-footer-socials{
  display: flex;
  gap: .75rem;
  margin: .25rem 0 1.25rem;
}

.biab-footer-socials a{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(254,243,226,.25);
  color: var(--cream);
  text-decoration: none;
  transition: all .2s ease;
}

.biab-footer-socials a:hover{
  border-color: var(--copper);
  transform: translateY(-2px);
}

.biab-footer-socials i{
  font-size: 1.25rem;
}

/* CTA button */
.biab-footer-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .85rem 1.1rem;
  border: 2px solid var(--cream);
  color: var(--cream);
  text-decoration: none;
  font-weight: 800;
  transition: all .25s ease;
}

.biab-footer-cta:hover{
  background: var(--copper);
  border-color: var(--copper);
  transform: translateY(-2px);
}

/* Bottom bar */
.biab-footer-bottom{
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(254,243,226,.2);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: rgba(254,243,226,.75);
  font-size: .9rem;
}

.biab-footer-bottom p{
  margin: 0;
}

.biab-footer-bottom-right{
  opacity: .85;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 992px){
  .biab-footer-top{
    grid-template-columns: 1fr;
  }

  .biab-footer-columns{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .biab-footer-inner{
    padding: 3rem 1rem 1.25rem;
  }

  .biab-footer-columns{
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .biab-footer-socials a{
    width: 48px;
    height: 48px;
  }
}