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;
  /* Tekst op paarse primaire knoppen: semibold (tussen 400 en 700). */
  --ik-primary-btn-font-weight:600;
}

/* 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:#23223B;
  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-nav: altijd wit (ook focus/active/hover); alleen onderstreep-indicator wijzigt.
   index.html laadt ook handleiding-css met globale `a { color: accent }` — die moet hier niet doorlekken. */
.ikash-header .menu a,
.ikash-header .menu a:visited,
.ikash-header .menu a:hover,
.ikash-header .menu a:active,
.ikash-header .menu a:focus,
.ikash-header .menu a:focus-visible{
  color:#fff;
}

.ikash-header .menu a[aria-current="page"],
.ikash-header .menu a[aria-current="page"]:visited,
.ikash-header .menu a[aria-current="page"]:hover,
.ikash-header .menu a[aria-current="page"]:active,
.ikash-header .menu a[aria-current="page"]:focus,
.ikash-header .menu a[aria-current="page"]:focus-visible{
  color:#fff;
}

.ikash-header .menu a:focus-visible{
  outline:2px solid rgba(255,255,255,0.55);
  outline-offset:3px;
}

.ikash-header .menu a{
  -webkit-tap-highlight-color:transparent;
}

.ikash-header .menu a::selection{
  background:rgba(188,105,0,0.45);
  color:#fff;
}

.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;
}

.ikash-verification-badge{
  flex-shrink:0;
  font-size:0.72rem;
  font-weight:600;
  line-height:1.2;
  padding:0.28rem 0.55rem;
  border-radius:999px;
  letter-spacing:0.01em;
  max-width:11rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ikash-verification-badge--approved{
  background:#22c55e;
  color:#fff;
}
.ikash-verification-badge--pending{
  background:#e2e8f0;
  color:#334155;
}
.ikash-verification-badge--rejected{
  background:#fecaca;
  color:#991b1b;
}
.ikash-verification-badge--none{
  background:rgba(255,255,255,0.25);
  color:#fff;
  border:1px solid rgba(255,255,255,0.35);
  max-width:min(100%,19rem);
}

.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:var(--ik-primary-btn-font-weight);
  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 — structuur + basis als ikash20 (consumer); ::before-fade + knoop = ondernemer-blauw */
.auth-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:10000;
  flex:none;
  width:100%;
  box-sizing:border-box;
}

/* Boven login/signup wanneer een melding tegelijk open kan zijn */
#ikash-message-modal.auth-modal{
  z-index:10050;
}

/* Meldingsdialoog: bovenkant op ~1/3 viewport (alleen tekstmeldingen) */
#ikash-message-modal.auth-modal.active{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  padding-top:min(33vh, 240px);
  padding-top:min(33dvh, min(33vh, 240px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-bottom:max(16px, env(safe-area-inset-bottom, 0px));
  padding-left:max(16px, env(safe-area-inset-left, 0px));
}
@media (max-height:520px){
  #ikash-message-modal.auth-modal.active:not(.ikash-msg-modal--redeem-pin):not(.ikash-msg-modal--voucher-pin-alert){
    padding-top:min(12vh, 120px);
    padding-top:min(12dvh, min(12vh, 120px));
    padding-left:max(12px, env(safe-area-inset-left, 0px));
    padding-right:max(12px, env(safe-area-inset-right, 0px));
  }
}

#ikash-message-modal .auth-dialog{
  position:relative;
  z-index:1;
  margin:0 auto;
  align-self:center;
  width:min(520px, calc(100vw - 32px));
  max-width:calc(100vw - 32px);
  box-sizing:border-box;
  max-height:min(88vh, calc(100vh - 120px));
  max-height:min(88dvh, calc(100dvh - 140px));
  flex-shrink:0;
}

/*
 * Voucher Scan - Pin: zelfde patroon als login (#login-modal) — .auth-modal.active = block, geen flex-overlay;
 * zelfde .auth-dialog / .auth-backdrop / margins als overige auth (zie .auth-dialog + #ikash-message-modal .auth-dialog).
 * Alleen: max-height met --ikash-pin-vv-h (JS) voor toetsenbord; popup 20px onder bovenkant (+ safe-area).
 * Breedte: JS zet --ikash-pin-dialog-w (80% layout bij openen) zodat toetsenbord de breedte niet wijzigt.
 */
#ikash-message-modal.ikash-msg-modal--redeem-pin.auth-modal.active{
  display:block !important;
  flex-direction:initial !important;
  align-items:initial !important;
  justify-content:initial !important;
  padding:0 !important;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  min-height:0 !important;
  height:auto !important;
}
#ikash-message-modal.ikash-msg-modal--redeem-pin .auth-dialog{
  margin-top:calc(20px + env(safe-area-inset-top, 0px)) !important;
  width:min(520px, 80vw) !important;
  max-width:min(520px, 80vw) !important;
  width:var(--ikash-pin-dialog-w, min(520px, 80vw)) !important;
  max-width:var(--ikash-pin-dialog-w, min(520px, 80vw)) !important;
  max-height:min(
    min(88dvh, calc(100dvh - 140px)),
    calc(var(--ikash-pin-vv-h, 100dvh) - 40px)
  );
}
#ikash-message-modal.ikash-msg-modal--redeem-pin .auth-form--session-notice{
  padding:14px 20px 22px;
}
#ikash-message-modal.ikash-msg-modal--redeem-pin .ikash-msg-pin-hint{
  margin:6px 0 0;
  font-size:12.5px;
  line-height:1.45;
  color:#64748b;
  font-weight:400;
}
#ikash-message-modal.ikash-msg-modal--redeem-pin #ikash-msg-pin-error:empty{
  display:none;
}
/* Pin: Annuleren + Bevestigen altijd op één rij, gelijke breedte binnen de popup */
#ikash-message-modal.ikash-msg-modal--redeem-pin .ikash-msg-actions{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:8px;
  width:100%;
  box-sizing:border-box;
}
#ikash-message-modal.ikash-msg-modal--redeem-pin .auth-form--session-notice .ikash-msg-actions .auth-submit{
  width:auto !important;
  max-width:none !important;
  flex:1 1 0 !important;
  min-width:0 !important;
  box-sizing:border-box;
}

/*
 * Voucher PIN-fout / lock: zelfde .auth-dialog-breedte en form-padding als Voucher Scan - Pin;
 * overlay flex met justify-content:center (verschil: pin staat bovenaan met margin-top op de kaart).
 */
#ikash-message-modal.ikash-msg-modal--voucher-pin-alert.auth-modal.active{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  padding-top:max(10px, env(safe-area-inset-top, 0px)) !important;
  padding-bottom:max(10px, env(safe-area-inset-bottom, 0px)) !important;
  padding-left:max(14px, env(safe-area-inset-left, 0px)) !important;
  padding-right:max(14px, env(safe-area-inset-right, 0px)) !important;
  min-height:100dvh;
  min-height:100svh;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
#ikash-message-modal.ikash-msg-modal--voucher-pin-alert .auth-dialog{
  margin-top:0 !important;
  margin-bottom:0 !important;
  width:min(520px, 80vw) !important;
  max-width:min(520px, 80vw) !important;
  width:var(--ikash-pin-dialog-w, min(520px, 80vw)) !important;
  max-width:var(--ikash-pin-dialog-w, min(520px, 80vw)) !important;
  max-height:min(88dvh, calc(100dvh - 80px));
  max-height:min(88dvh, calc(100svh - 80px));
}
#ikash-message-modal.ikash-msg-modal--voucher-pin-alert .auth-form--session-notice{
  padding:14px 20px 22px;
}

/* #ikash-message-modal gebruikt flex (hierboven); overige .auth-modal blijft block */
.auth-modal.active:not(#ikash-message-modal){
  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(520px, 92vw);
  max-height:90vh;
  overflow:auto;
  overflow-x:hidden;
  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);
  box-sizing:border-box;
}

/* Zelfde idee als consumer, maar oranje → indigo (ondernemer) */
.auth-dialog::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(800px 260px at 20% 0%, rgba(99,102,241,0.16), transparent 60%),
    radial-gradient(700px 240px at 90% 10%, rgba(35,34,59,0.20), transparent 55%);
}

.auth-close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  color:#23223B;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.08);
  background:rgba(255,255,255,0.85);
  cursor:pointer;
  font-size:18px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  box-sizing:border-box;
}

.auth-close:hover{
  background:#fff;
}

.auth-close:focus-visible{
  outline:2px solid rgba(99,102,241,0.5);
  outline-offset:2px;
}

.auth-banner{
  background:#23223B;
  border-radius:18px 18px 0 0;
  padding:20px 20px;
  text-align:center;
  flex-shrink:0;
  position:relative;
  z-index:1;
}

.auth-banner .auth-logo-link{
  display:inline-block;
  text-decoration:none;
}

.auth-banner .auth-logo{
  height:28px;
  width:auto;
  max-width:min(160px, 55vw);
  display:block;
  margin:0 auto;
  opacity:0.95;
  object-fit:contain;
}

.auth-header{
  position:relative;
  padding:16px 20px 10px;
  text-align:center;
  z-index:1;
}

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

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

.auth-modal form.auth-form,
.auth-standalone form.auth-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
  max-width:none;
  margin:0;
  box-sizing:border-box;
}

/* Zelfstandige pagina’s (wachtwoord vergeten / reset), zelfde kaart als modals */
.auth-standalone{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
  box-sizing:border-box;
  background:linear-gradient(165deg, #eef2ff 0%, #e8e9f0 45%, #e0e7ff 100%);
}

.auth-form{
  position:relative;
  padding:14px 20px 22px;
  z-index:1;
}

.auth-form--session-notice{
  padding-top:6px;
  padding-bottom:24px;
}

.auth-form--session-notice .auth-submit{
  width:100%;
}

.auth-field{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
  max-width:100%;
}

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

.auth-modal .auth-field > input,
.auth-standalone .auth-field > input{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(35,34,59,0.14);
  background:rgba(255,255,255,0.9);
  font-size:14px;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  box-sizing:border-box;
  color:#0f172a;
}

.auth-modal .auth-field > input::placeholder,
.auth-standalone .auth-field > input::placeholder{
  color:#94a3b8;
}

.auth-modal .auth-field > input:focus,
.auth-standalone .auth-field > input:focus{
  border-color:rgba(99,102,241,0.65);
  box-shadow:0 0 0 4px rgba(99,102,241,0.18);
  background:#fff;
}

.auth-password{
  display:flex;
  align-items:stretch;
  gap:8px;
  width:100%;
  max-width:100%;
  min-width:0;
}

.auth-password > input{
  flex:1;
  min-width:0;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(35,34,59,0.14);
  background:rgba(255,255,255,0.9);
  font-size:14px;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  box-sizing:border-box;
  color:#0f172a;
}

.auth-password > input::placeholder{
  color:#94a3b8;
}

.auth-password > input:focus{
  border-color:rgba(99,102,241,0.65);
  box-shadow:0 0 0 4px rgba(99,102,241,0.18);
  background:#fff;
}

.auth-eye{
  width:44px;
  flex-shrink:0;
  border-radius:12px;
  border:1px solid rgba(35,34,59,0.14);
  background:rgba(255,255,255,0.9);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#2c2a45;
  padding:0;
  box-sizing:border-box;
}

.auth-eye:hover{
  background:#fff;
}

.auth-eye:focus-visible{
  outline:2px solid rgba(99,102,241,0.45);
  outline-offset:2px;
}

.auth-eye-icons{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.auth-eye .auth-eye-svg{
  display:block;
}

.auth-eye .auth-eye-svg[hidden]{
  display:none;
}

.auth-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:2px;
  width:100%;
  max-width:100%;
  min-width:0;
}

.auth-check{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:#444;
  user-select:none;
  margin:0;
  cursor:pointer;
}

.auth-check input{
  width:16px;
  height:16px;
  accent-color:#6366f1;
}

.auth-link{
  color:#4f46e5;
  font-weight:700;
  text-decoration:none;
  font-size:13px;
}

.auth-link:hover{
  text-decoration:underline;
}

.auth-submit{
  margin-top:6px;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  padding:13px 16px;
  border:none;
  border-radius:12px;
  font-weight:var(--ik-primary-btn-font-weight);
  font-size:15px;
  cursor:pointer;
  color:#fff;
  background:var(--ik-primary-grad);
  box-shadow:0 14px 30px rgba(67,56,202,0.26);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.auth-submit:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 38px rgba(67,56,202,0.32);
  filter:saturate(1.05);
}

.auth-submit:active{
  transform:translateY(0);
  box-shadow:0 10px 22px rgba(67,56,202,0.22);
}

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

.auth-footer .auth-link{
  font-size:inherit;
}

/* iKash message modal: één (OK) of twee knoppen (secundair + primair) */
#ikash-message-modal .ikash-msg-actions{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:10px;
  width:100%;
  box-sizing:border-box;
}
#ikash-message-modal .ikash-msg-actions .auth-submit{
  flex:1 1 140px;
  margin-top:0;
  min-width:0;
}
#ikash-message-modal .ikash-msg-actions--single .auth-submit{
  flex:1 1 100%;
  width:100%;
}
#ikash-message-modal .auth-submit--secondary{
  background:#f1f5f9;
  color:#334155;
  box-shadow:0 2px 10px rgba(15,23,42,0.08);
}
#ikash-message-modal .auth-submit--secondary:hover{
  filter:brightness(0.98);
  box-shadow:0 4px 14px rgba(15,23,42,0.1);
  transform:translateY(-1px);
}

@media (max-width:520px){
  .auth-dialog{
    margin:14px auto;
  }
}

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

/* Verkopen (ondernemer) */
.verkopen-page .verkopen-lead{
  color:#475569;
  margin-bottom:1rem;
}
.verkopen-status{
  min-height:1.25rem;
  font-size:14px;
  color:#64748b;
  margin-bottom:0.75rem;
}
.verkopen-table-wrap{
  overflow-x:auto;
  border:1px solid #e2e8f0;
  border-radius:12px;
}
.verkopen-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.verkopen-table th,
.verkopen-table td{
  padding:10px 12px;
  text-align:left;
  border-bottom:1px solid #f1f5f9;
}
.verkopen-table th{
  background:#f8fafc;
  font-weight:600;
}
.verkopen-num{
  text-align:right;
  white-space:nowrap;
}

/* ========== Ondernemers-header: hamburger (alleen ≤899px; desktop ≥900px ongewijzigd) ========== */
@media (max-width: 899px) {
  .ikash-header .header-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }

  .ikash-header .header-container > .logo {
    flex: 1 1 auto;
    min-width: 0;
  }

  .ikash-header.ikash-header-nav-ready .header-container > nav.menu,
  .ikash-header.ikash-header-nav-ready .header-container > .ondernemer-portaal-nav {
    display: none !important;
  }

  .ikash-header .header-buttons {
    flex: 0 0 auto;
    margin-left: 0;
    gap: 8px;
  }

  .ikash-header .ikash-verification-badge {
    display: none;
  }

  .ikash-header .ikash-user-menu-trigger .ondernemer-user-name {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ikash-header .ikash-nav-toggle {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    position: relative;
    z-index: 2;
  }

  .ikash-header .ikash-nav-toggle[hidden] {
    display: none !important;
  }

  .ikash-nav-toggle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.55);
    outline-offset: 2px;
  }

  .ikash-nav-toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background: #fff;
  }

  body.ikash-nav-open .ikash-nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  body.ikash-nav-open .ikash-nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  body.ikash-nav-open .ikash-nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .ikash-nav-toggle-bar {
    transition: transform 0.15s ease, opacity 0.15s ease;
  }

  .ikash-nav-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .ikash-nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    visibility: hidden;
  }

  .ikash-nav-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
  }

  .ikash-nav-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .ikash-nav-drawer.is-open .ikash-nav-drawer-backdrop {
    opacity: 1;
  }

  .ikash-nav-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(100%, 320px);
    max-width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.22s ease;
    box-sizing: border-box;
  }

  .ikash-nav-drawer.is-open .ikash-nav-drawer-panel {
    transform: translateX(0);
  }

  .ikash-nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid #e8e8ef;
    background: #23223b;
    color: #fff;
  }

  .ikash-nav-drawer-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .ikash-nav-drawer-close {
    border: 0;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }

  .ikash-nav-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .ikash-nav-drawer .menu.menu--mobile-drawer {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin: 0;
    min-width: 0;
    flex: none;
    justify-content: flex-start;
  }

  .ikash-nav-drawer .menu.menu--mobile-drawer a {
    display: block;
    padding: 14px 18px;
    color: #23223b !important;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid #f1f5f9;
    border-left: 3px solid transparent;
  }

  .ikash-nav-drawer .menu.menu--mobile-drawer a:hover {
    background: #f8f9fc;
    border-bottom-color: #f1f5f9;
  }

  .ikash-nav-drawer .menu.menu--mobile-drawer a[aria-current="page"] {
    color: #4f38ad !important;
    background: #ede9fc;
    border-left-color: #bc6900;
    font-weight: 800;
  }

  body.ikash-nav-open {
    overflow: hidden;
  }
}

@media (min-width: 900px) {
  .ikash-nav-toggle,
  .ikash-nav-drawer {
    display: none !important;
  }
}