/* === Kwikly nice-select (mobile-first) === */
:root{
  --kw-primary:#000c7c;
}

/* Basis */
.nice-select{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  background:#fff;
  border:1px solid #e8e8e8;
  border-radius:8px;
  box-sizing:border-box;
  cursor:pointer;
  display:block;
  width:100%;               /* full width (ook op mobiel) */
  height:48px;
  line-height:46px;
  padding-left:14px;
  padding-right:38px;       /* ruimte voor caret */
  position:relative;
  text-align:left!important;
  font:400 16px/1.2 inherit;/* 16px voorkomt iOS-zoom */
  user-select:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.nice-select:hover{ border-color:#dbdbdb; }
.nice-select:focus,
.nice-select.open{ border-color:var(--kw-primary); box-shadow:0 0 0 3px rgba(182,231,255,.6); }

/* Caret */
.nice-select:after{
  content:"";
  position:absolute; right:12px; top:50%; width:7px; height:7px;
  border-right:2px solid #999; border-bottom:2px solid #999;
  transform:translateY(-50%) rotate(45deg);
  transition:transform .2s ease, border-color .2s ease;
  pointer-events:none;
}
.nice-select.open:after{ transform:translateY(-50%) rotate(-135deg); border-color:var(--kw-primary); }

/* Lijst (popup) */
.nice-select .list{
  position:absolute; left:0; top:calc(100% + 6px);
  background:#fff; border-radius:8px; margin:0;
  box-shadow:0 10px 30px rgba(0,0,0,.12), 0 0 0 1px rgba(68,68,68,.08);
  z-index:10000; opacity:0; pointer-events:none;
  transform:translateY(-6px) scale(.98);
  transition:opacity .15s ease, transform .15s cubic-bezier(.5,0,0,1.25);
  overflow:hidden;
  max-height:240px;                 /* desktop default */
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; /* iOS smooth */
}
.nice-select.open .list{
  opacity:1; pointer-events:auto; transform:none;
}

/* Opties */
.nice-select .option{
  list-style:none; cursor:pointer;
  padding:10px 14px; min-height:44px; /* goede tap-target */
  display:flex; align-items:center;
  transition:background-color .15s;
}
.nice-select .option:hover,
.nice-select .option.focus{ background:#f6f6f6; }
.nice-select .option.selected{ font-weight:600; }
.nice-select .option.disabled{ color:#999; cursor:default; background:transparent; }

/* Variaties / utilities */
.nice-select.wide .list{ left:0!important; right:0!important; }
.nice-select.right .list{ left:auto; right:0; }
.nice-select.small{ height:42px; line-height:40px; font-size:14px; }
.nice-select.small .option{ min-height:40px; padding:8px 12px; }
.nice-select.disabled{ border-color:#ededed; color:#999; pointer-events:none; }
.nice-select.disabled:after{ border-color:#ccc; }

/* Scrollbar (optioneel) */
.nice-select .list::-webkit-scrollbar{ width:1px; }
.nice-select .list::-webkit-scrollbar-track{ background:#fff; border-radius:8px; }
.nice-select .list::-webkit-scrollbar-thumb{ background:var(--kw-primary); border-radius:8px; }

/* --- Mobile tweaks --- */
/* Phones/kleine schermen: grotere doelen, hogere lijst, geen scale-anim (stabiliteit Safari) */
@media (max-width: 640px){
  .nice-select{ height:52px; line-height:50px; padding-left:16px; padding-right:42px; border-radius:10px; }
  .nice-select:after{ right:14px; width:8px; height:8px; }
  .nice-select .list{
    max-height:60vh;       /* meer items zichtbaar */
    transform:none;        /* voorkomt jank in iOS bij zoom/keyboard */
    will-change:auto;
  }
  .nice-select .option{ min-height:48px; padding:12px 16px; }
}

/* Grote touchscreens (tablets in landscape) – iets hogere lijst */
@media (hover:none) and (pointer:coarse){
  .nice-select .list{ max-height:70vh; }
}

/* No-pointer-events fallback */
.no-csspointerevents .nice-select .list{ display:none; }
.no-csspointerevents .nice-select.open .list{ display:block; }