html,
body{
  margin:0;
  padding:0;
}

:root{
  --ik-primary-grad:linear-gradient(180deg, #93a0ff 0%, #6366f1 42%, #4f46e5 78%, #3730a3 100%);
  --ik-primary-shadow:0 6px 20px rgba(67,56,202,0.32), 0 1px 0 rgba(255,255,255,0.15) inset;
  /* Donkerblauw = zelfde als .ikash-header */
  --ik-header-navy:#23223B;
  --ik-modal-header-bg:var(--ik-header-navy);
}

/* Verberg scrollbar (scroll blijft werken) */
.ik-no-scrollbar{
  scrollbar-width:none; /* Firefox */
  -ms-overflow-style:none; /* IE/Edge legacy */
}

.ik-no-scrollbar::-webkit-scrollbar{
  width:0;
  height:0;
}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:#ffffff;
  color:#1e293b;
}

/* Auth view toggles (index.html landing vs portal) */
body:not(.ikash-ondernemer-logged-in) #view-home-user{
  display:none !important;
}

body.ikash-ondernemer-logged-in #view-home-guest{
  display:none !important;
}

.container{
  max-width:880px;
  margin:40px auto;
  padding:0 16px;
}

.ikash-header{
  background:var(--ik-header-navy);
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  position:sticky;
  top:0;
  z-index:10;
  margin:0 !important;
}

/* Embed mode: pagina content zonder dubbele chrome */
body[data-embed="true"] .ikash-header,
body[data-embed="true"] .city-banner,
body[data-embed="true"] .portal-banner,
body[data-embed="true"] .ikash-site-footer{
  display:none !important;
}

.header-container{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px clamp(16px, 4vw, 40px);
}

/* Desktop header: menu altijd exact gecentreerd (ongeacht rechter actions) */
@media (min-width: 900px){
  .header-container{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    justify-items:stretch;
    flex-wrap:nowrap;
  }

  .header-container > .logo{
    justify-self:start;
  }

  /* nav zit soms direct, soms in wrapper */
  .header-container > nav.menu,
  .header-container > .ondernemer-portaal-nav{
    justify-self:center;
  }

  .header-container > .ondernemer-portaal-nav{
    display:flex;
    justify-content:center;
  }

  .menu{
    flex:0 0 auto;
    justify-content:center;
    min-width:0;
    width:max-content;
    margin:0;
  }

  .header-buttons{
    justify-self:end;
  }
}

/* Landing (gasten): login/aanmelden helemaal rechts */
@media (min-width: 900px){
  body.landing-page:not(.ikash-ondernemer-logged-in) .header-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:nowrap;
  }
}

.logo{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}

.logo img{
  display:block;
  height:30px;
  width:auto;
}

.menu{
  display:flex;
  flex:1;
  gap:26px;
  flex-wrap:wrap;
  justify-content:center;
  min-width:min(100%, 12rem);
}

.menu a{
  color:#fff;
  text-decoration:none;
  font-weight:500;
  padding:6px 0;
  border-bottom:2px solid transparent;
}

.menu a:hover{
  border-bottom-color:rgba(188,105,0,0.7);
}

.menu a[aria-current="page"]{
  font-weight:700;
  border-bottom-color:#BC6900;
}

.header-buttons{
  display:flex;
  align-items:center;
  gap:10px;
}

.ondernemer-auth-guest,
.ondernemer-auth-user{
  display:flex;
  align-items:center;
  gap:10px;
}

.ondernemer-auth-guest[hidden],
.ondernemer-auth-user[hidden]{
  display:none !important;
}

.ondernemer-user-name{
  color:#fff;
  font-weight:700;
}

.ikash-user-menu{
  position:relative;
}

.ikash-user-menu-trigger{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:6px 0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  font:inherit;
  cursor:pointer;
  font-weight:500;
  border-bottom:2px solid transparent;
}

.ikash-user-menu-trigger:hover{
  border-bottom-color:rgba(188,105,0,0.7);
}

.ikash-user-menu-trigger[aria-expanded="true"]{
  font-weight:700;
  border-bottom-color:#BC6900;
}

.ikash-user-menu-chev{
  display:inline-block;
  opacity:0.9;
  transform:translateY(1px);
}

.ikash-user-menu-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:220px;
  padding:8px;
  border-radius:12px;
  border:1px solid rgba(35,34,59,0.12);
  background:#fff;
  box-shadow:0 14px 38px rgba(0,0,0,0.2);
  z-index:1200;
}

.ikash-user-menu-dropdown[hidden]{
  display:none !important;
}

.ikash-user-menu-item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:10px 12px;
  border:none;
  border-radius:10px;
  background:transparent;
  color:#23223B;
  text-decoration:none;
  font:inherit;
  font-weight:600;
  cursor:pointer;
}

.ikash-user-menu-item:hover{
  background:rgba(35,34,59,0.08);
}

.ikash-user-menu-item--danger{
  color:#b91c1c;
}

.btn,
.login,
.signup{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border:none;
  border-radius:8px;
  font:inherit;
  cursor:pointer;
  text-decoration:none;
  font-weight:700;
  color:#fff;
  background:var(--ik-primary-grad);
  box-shadow:var(--ik-primary-shadow);
}

.city-banner{
  position:relative;
  min-height:clamp(180px, calc(100dvh - 284px), 560px);
  background:#23223B;
  overflow:hidden;
  margin:0 !important;
}

.ikash-header + .city-banner{
  margin-top:0 !important;
}

.city-image{
  position:absolute;
  inset:0;
  background-image:url("../images/banner.png");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
  background-color:#23223B;
}

@media (max-width:900px){
  .city-image{
    background-position:center top;
  }
}

.city-text{
  display:none;
}

/* Landingspagina: portaalnav staat in .ondernemer-portaal-nav (hidden tot ingelogd, zie auth.js) */

body.landing-page .city-text{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:clamp(140px, 32vh, 280px);
  position:relative;
  z-index:1;
  text-align:left;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.45);
  padding:0 clamp(16px, 4vw, 56px);
}

.city-text-inner{
  max-width:min(980px, 92vw);
  margin-left:80px;
  margin-top:140px;
}

.city-title{
  display:inline-block;
  position:relative;
  font-size:clamp(48px, 7.2vw, 80px);
  font-weight:500;
  letter-spacing:-0.03em;
  line-height:1.02;
}

.city-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-14px;
  width:min(340px, 70%);
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg, #ef4444 0%, #f97316 60%, rgba(249,115,22,0) 100%);
  box-shadow:0 8px 18px rgba(0,0,0,0.22);
}

.city-title-line{
  display:block;
}

.city-text-sub{
  margin-top:22px;
  font-size:clamp(16px, 2.2vw, 22px);
  font-weight:650;
  color:rgba(255,255,255,0.92);
  letter-spacing:-0.01em;
  max-width:48rem;
}

h1{
  margin:0 0 12px;
}

form{
  display:grid;
  gap:10px;
  max-width:360px;
}

input, button{
  padding:10px 12px;
  font:inherit;
}

/* AUTH MODALS (zelfde stijlrichting als consumentensite) */
.auth-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:10000;
}

.auth-modal.active{
  display:block;
}

.auth-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15, 23, 42, 0.62);
  backdrop-filter:blur(8px);
}

.auth-dialog{
  position:relative;
  width:min(460px, 92vw);
  max-height:90vh;
  overflow:auto;
  margin:clamp(16px, 6vh, 60px) auto;
  border-radius:18px;
  background:linear-gradient(to bottom, rgba(255,255,255,0.98), rgba(255,255,255,0.94));
  box-shadow:0 30px 90px rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.65);
}

.auth-dialog-head{
  position:relative;
}

.auth-banner{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  box-sizing:border-box;
  height:40px;
  min-height:40px;
  max-height:40px;
  padding:0 16px;
  padding-right:48px;
  text-align:left;
  background:var(--ik-modal-header-bg);
  border-radius:18px 18px 0 0;
}

/* Iets compacter dan de site-header (.logo img = 30px) */
.auth-banner .logo{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
}

.auth-banner .logo img{
  display:block;
  height:24px;
  width:auto;
}

/* Compact pictogram rechts in de headerstrip (geen grote cirkel meer) */
.auth-banner .auth-modal-banner-icon{
  margin:0 0 0 auto;
  width:auto;
  height:auto;
  min-width:0;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:700;
  color:#fff;
  line-height:1;
}

.auth-banner .auth-modal-banner-icon:empty{
  display:none;
  margin:0;
}

.email-verified-actions{
  padding:8px 22px 24px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.email-verified-secondary{
  background:rgba(255,255,255,0.95) !important;
  color:#23223B !important;
  border:1px solid rgba(35,34,59,0.18) !important;
  box-shadow:none !important;
}

.auth-dialog-head .auth-close{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  box-sizing:border-box;
  width:36px;
  height:36px;
  margin:0;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#fff;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  z-index:2;
  -webkit-tap-highlight-color:transparent;
}

.auth-dialog-head .auth-close:hover{
  color:rgba(255,255,255,0.82);
}

.auth-dialog-head .auth-close:focus-visible{
  outline:2px solid rgba(255,255,255,0.7);
  outline-offset:2px;
}

.auth-header{
  padding:16px 22px 10px;
  text-align:center;
}

.auth-title{
  margin:0;
  font-size:24px;
  color:#23223B;
}

.auth-subtitle{
  margin:8px 0 0;
  color:#5b5b6c;
  font-size:14px;
  line-height:1.35;
}

/* Volle breedte t.o.v. dialog; globale form{max-width:360px} overschrijven */
.auth-modal form.auth-form{
  max-width:none;
  width:100%;
  display:flex;
  flex-direction:column;
}

.auth-form{
  padding:14px 22px 22px;
  gap:12px;
  margin:0 auto;
  box-sizing:border-box;
}

.auth-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
}

.auth-password-wrap{
  position:relative;
  display:block;
  width:100%;
}

.auth-password-wrap input{
  padding-right:46px;
  box-sizing:border-box;
}

.auth-password-toggle{
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  min-width:22px;
  padding:0;
  border-radius:6px;
  border:0;
  background:transparent;
  color:#64748b;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.auth-password-toggle:hover{
  color:#475569;
  background:rgba(100,116,139,0.12);
}

.auth-password-toggle:focus-visible{
  outline:2px solid rgba(188,105,0,0.45);
  outline-offset:2px;
}

.auth-password-toggle[aria-pressed="true"]{
  color:#475569;
}

.auth-pw-icon{
  display:block;
  width:20px;
  height:20px;
  flex-shrink:0;
}

.auth-pw-icon--hide{
  display:none;
}

.auth-password-toggle[aria-pressed="true"] .auth-pw-icon--show{
  display:none;
}

.auth-password-toggle[aria-pressed="true"] .auth-pw-icon--hide{
  display:block;
}

.auth-field > span{
  font-size:13px;
  font-weight:600;
  color:#334155;
}

.auth-field input{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(35,34,59,0.14);
  background:#fff;
  font-size:14px;
  outline:none;
  box-sizing:border-box;
}

.auth-field input:focus{
  border-color:rgba(188,105,0,0.65);
  box-shadow:0 0 0 4px rgba(188,105,0,0.18);
}

.auth-remember{
  display:flex;
  align-items:center;
  gap:10px;
  color:#334155;
  font-size:13px;
  font-weight:600;
  user-select:none;
}

.auth-remember input{
  width:16px;
  height:16px;
  accent-color:#BC6900;
}

.auth-submit{
  margin-top:4px;
  width:100%;
  box-sizing:border-box;
  min-height:44px;
  border:none;
  border-radius:12px;
  color:#fff;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  background:var(--ik-primary-grad);
  box-shadow:var(--ik-primary-shadow);
}

.auth-footer{
  margin-top:4px;
  text-align:center;
  font-size:13px;
  color:#555;
}

.auth-link{
  color:#23223B;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}

@media (max-width:900px){
  .header-container{
    flex-wrap:wrap;
    justify-content:center;
  }
  .menu{
    width:100%;
    justify-content:center;
    gap:14px 16px;
  }
}