/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}

.leaflet-container {
	overflow: hidden;
	}

.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}

/* Prevents IE11 from highlighting tiles in blue */

.leaflet-tile::-moz-selection {
	background: transparent;
}

.leaflet-tile::selection {
	background: transparent;
}

/* Safari renders non-retina tile on retina better with this, but Chrome is worse */

.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}

/* hack that prevents hw layers "stretching" when loading new tiles */

.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}

.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}

/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */

/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */

.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}

.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	touch-action: pan-x pan-y;
	}

.leaflet-container.leaflet-touch-drag {
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}

.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	touch-action: none;
}

.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}

.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}

.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}

.leaflet-tile-loaded {
	visibility: inherit;
	}

.leaflet-zoom-box {
	width: 0;
	height: 0;
	box-sizing: border-box;
	z-index: 800;
	}

/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */

.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }

.leaflet-overlay-pane { z-index: 400; }

.leaflet-shadow-pane  { z-index: 500; }

.leaflet-marker-pane  { z-index: 600; }

.leaflet-tooltip-pane   { z-index: 650; }

.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }

.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}

.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}

/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}

.leaflet-top {
	top: 0;
	}

.leaflet-right {
	right: 0;
	}

.leaflet-bottom {
	bottom: 0;
	}

.leaflet-left {
	left: 0;
	}

.leaflet-control {
	float: left;
	clear: both;
	}

.leaflet-right .leaflet-control {
	float: right;
	}

.leaflet-top .leaflet-control {
	margin-top: 10px;
	}

.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}

.leaflet-left .leaflet-control {
	margin-left: 10px;
	}

.leaflet-right .leaflet-control {
	margin-right: 10px;
	}

/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	transition: opacity 0.2s linear;
	}

.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}

.leaflet-zoom-animated {
	transform-origin: 0 0;
	}

svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}

.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}

/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}

.leaflet-grab {
	cursor:         grab;
	}

.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}

.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}

.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */

.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}

.leaflet-container a {
	color: #0078A8;
	}

.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}

/* general typography */

.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}

/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}

.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}

.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}

.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}

.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}

.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}

.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}

.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}

.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}

/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}

.leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);
	width: 36px;
	height: 36px;
	}

.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);
	background-size: 26px 26px;
	}

.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}

.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}

.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}

.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}

.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}

.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}

.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}

.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */

.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=);
	}

/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}

.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}

.leaflet-control-attribution a {
	text-decoration: none;
	}

.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}

.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}

.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}

.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}

.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}

.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}

.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}

.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}

/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}

.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}

.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}

.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}

.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}

.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;
	transform: rotate(45deg);
	}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}

.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}

.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}

.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}

.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}

/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}

/* Tooltip */

/* Base styles for the element that has a tooltip */

.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}

.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}

.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}

.leaflet-tooltip-top {
	margin-top: -6px;
}

.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}

.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}

.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}

.leaflet-tooltip-left {
	margin-left: -6px;
}

.leaflet-tooltip-right {
	margin-left: 6px;
}

.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}

.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}

.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}

*, ::before, ::after {
	--tw-border-spacing-x: 0;
	--tw-border-spacing-y: 0;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-pan-x:  ;
	--tw-pan-y:  ;
	--tw-pinch-zoom:  ;
	--tw-scroll-snap-strictness: proximity;
	--tw-gradient-from-position:  ;
	--tw-gradient-via-position:  ;
	--tw-gradient-to-position:  ;
	--tw-ordinal:  ;
	--tw-slashed-zero:  ;
	--tw-numeric-figure:  ;
	--tw-numeric-spacing:  ;
	--tw-numeric-fraction:  ;
	--tw-ring-inset:  ;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgb(59 130 246 / 0.5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	--tw-blur:  ;
	--tw-brightness:  ;
	--tw-contrast:  ;
	--tw-grayscale:  ;
	--tw-hue-rotate:  ;
	--tw-invert:  ;
	--tw-saturate:  ;
	--tw-sepia:  ;
	--tw-drop-shadow:  ;
	--tw-backdrop-blur:  ;
	--tw-backdrop-brightness:  ;
	--tw-backdrop-contrast:  ;
	--tw-backdrop-grayscale:  ;
	--tw-backdrop-hue-rotate:  ;
	--tw-backdrop-invert:  ;
	--tw-backdrop-opacity:  ;
	--tw-backdrop-saturate:  ;
	--tw-backdrop-sepia:  ;
	--tw-contain-size:  ;
	--tw-contain-layout:  ;
	--tw-contain-paint:  ;
	--tw-contain-style:  ;
}

::backdrop {
	--tw-border-spacing-x: 0;
	--tw-border-spacing-y: 0;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-pan-x:  ;
	--tw-pan-y:  ;
	--tw-pinch-zoom:  ;
	--tw-scroll-snap-strictness: proximity;
	--tw-gradient-from-position:  ;
	--tw-gradient-via-position:  ;
	--tw-gradient-to-position:  ;
	--tw-ordinal:  ;
	--tw-slashed-zero:  ;
	--tw-numeric-figure:  ;
	--tw-numeric-spacing:  ;
	--tw-numeric-fraction:  ;
	--tw-ring-inset:  ;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgb(59 130 246 / 0.5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	--tw-blur:  ;
	--tw-brightness:  ;
	--tw-contrast:  ;
	--tw-grayscale:  ;
	--tw-hue-rotate:  ;
	--tw-invert:  ;
	--tw-saturate:  ;
	--tw-sepia:  ;
	--tw-drop-shadow:  ;
	--tw-backdrop-blur:  ;
	--tw-backdrop-brightness:  ;
	--tw-backdrop-contrast:  ;
	--tw-backdrop-grayscale:  ;
	--tw-backdrop-hue-rotate:  ;
	--tw-backdrop-invert:  ;
	--tw-backdrop-opacity:  ;
	--tw-backdrop-saturate:  ;
	--tw-backdrop-sepia:  ;
	--tw-contain-size:  ;
	--tw-contain-layout:  ;
	--tw-contain-paint:  ;
	--tw-contain-style:  ;
}

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: var(--font-mono), monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

:root {
    --font-display: "Space Grotesk";
    --font-body: "DM Sans";
    --font-mono: "Geist Mono";
    --radius: 0.625rem;

    /* Premium chauffeurs-palet: rood (primary), navy (background), wit
       (foreground), goud (premium accent), groen (online/succes), rood
       (uitsluitend annulering/verwijderen/fout). GEEN lichtgrijs, GEEN paars.
       --muted-foreground is een warme goud-tint (champagne), geen grijs. */
    --background: 0.18 0.05 255;
    --foreground: 0.98 0.005 260;
    --card: 0.1 0.02 250;
    --card-foreground: 0.98 0.005 260;
    --popover: 0.1 0.02 250;
    --popover-foreground: 0.98 0.005 260;

    --primary: 0.7 0.18 55;
    --primary-foreground: 0.98 0.005 260;

    /* Valk Taxi CTA-accent — Van der Valk geel (#ffec00) voor primaire
        call-to-action knoppen. Foreground is donkerblauw voor contrast. */
    --cta: 0.93 0.21 100;
    --cta-foreground: 0.18 0.05 255;

    --secondary: 0.1 0.02 250;
    --secondary-foreground: 0.85 0.13 85;
    --muted: 0.08 0.02 250;
    /* Lichtblauw-wit i.p.v. grijs/champagne — leest als een zachte
        blauwe tint op zwart, niet als grijs. oklch(0.85 0.03 250). */
    --muted-foreground: 0.85 0.03 250;

    --accent: 0.12 0.03 250;
    --accent-foreground: 0.97 0.005 260;

    /* Verfijnd jade-groen — dieper, minder appelgroen, premium emerald.
        oklch(0.68 0.13 155) = rustig jade. Behoudt online/succes semantiek. */
    --accent-green: 0.68 0.13 155;
    --accent-green-foreground: 0.13 0.02 155;

    --destructive: 0.45 0.1 55;
    --destructive-foreground: 0.99 0.005 260;

    --success: 0.68 0.13 155;
    --success-foreground: 0.13 0.02 155;
    --warning: 0.55 0.18 250;
    --warning-foreground: 0.98 0.005 260;

    --border: 0.22 0.05 250;
    --input: 0.22 0.05 250;
    --ring: 0.7 0.18 55;

    /* Hoogte van de vaste menubalk (DriverNav/PassengerNav: h-14 = 3.5rem).
       Gebruikt door .dashboard-bottom-sheet zodat de zwevende sheet boven
       de nav zweeft in plaats van eronder te verdwijnen. */
    --bottom-nav-height: 3.5rem;

    /* Hoogte van de vaste bovenbalk (DriverTopBar: h-14 = 3.5rem) op alle
       /driver/* routes. Gebruikt door in-flow driver-pagina's voor hun
       top-padding (pt-16) zodat hun headers onder de vaste bovenbalk
       renderen in plaats van erachter verborgen. */
    --driver-top-bar-height: 3.5rem;

    /* Hoogte van de vaste passagiers-bovenbalk (PassengerTopBar: h-14 =
       3.5rem) op alle /passenger/* routes. Spiegelt --driver-top-bar-height
       voor hergebruik door in-flow passagiers-pagina's. */
    --passenger-top-bar-height: 3.5rem;

    --chart-1: 0.7 0.18 55;
    --chart-2: 0.55 0.22 250;
    --chart-3: 0.85 0.13 85;
    --chart-4: 0.7 0.18 145;
    --chart-5: 0.55 0.18 250;

    --sidebar: 0.08 0.02 250;
    --sidebar-foreground: 0.98 0.005 260;
    --sidebar-primary: 0.7 0.18 55;
    --sidebar-primary-foreground: 0.98 0.005 260;
    --sidebar-accent: 0.12 0.03 250;
    --sidebar-accent-foreground: 0.85 0.13 85;
    --sidebar-border: 0.22 0.05 250;
    --sidebar-ring: 0.7 0.18 55;

    --gradient-primary: linear-gradient(
      135deg,
      oklch(0.7 0.18 55) 0%,
      oklch(0.85 0.13 85) 100%
    );
    --gradient-subtle: linear-gradient(
      180deg,
      oklch(0.05 0.005 260) 0%,
      oklch(0.1 0.005 260) 100%
    );
    --gradient-navy: linear-gradient(
      160deg,
      oklch(0.08 0.008 260) 0%,
      oklch(0.18 0.05 255) 100%
    );

    /* Autocomplete dropdown — zwevende adres-suggestie lijst (light/zwart).
        Popover-oppervlak iets lichter dan card voor elevatie boven het
        formulier; rand subtiel verlicht; item-hover paars-tint; item-active
        (toetsenbord-focus) sterkere paars-tint met paars linkerrand. */
    --dropdown-bg: 0.08 0.005 260;
    --dropdown-border: 0.22 0.008 260;
    --dropdown-item-hover: 0.7 0.18 55 / 0.12;
    --dropdown-item-active: 0.7 0.18 55 / 0.2;
    --dropdown-item-active-border: 0.7 0.18 55;
    --dropdown-shadow: 0 12px 32px -10px oklch(0 0 0 / 0.6), 0 4px 12px -6px
      oklch(0 0 0 / 0.4);

    /* Wachtrij-meldingen — semantische notice-achtergronden (light/zwart).
        Drie types: info (blauw), waarschuwing (paars), succes (groen).
        Elk type heeft een subtiele getinte achtergrond, een gekleurde
        linkerrand-strook (4px), en een bijpassende tekstkleur. */
    --notice-info-bg: 0.55 0.22 250 / 0.14;
    --notice-info-border: 0.55 0.22 250;
    --notice-info-fg: 0.78 0.1 240;
    --notice-warning-bg: 0.7 0.18 55 / 0.16;
    --notice-warning-border: 0.7 0.18 55;
    --notice-warning-fg: 0.88 0.12 75;
    --notice-success-bg: 0.7 0.18 145 / 0.14;
    --notice-success-border: 0.7 0.18 145;
    --notice-success-fg: 0.82 0.14 145;

    /* Tijdgevoelig / hoge-prioriteit push-melding (light/zwart).
        Geïnspireerd op Uber "TIJDGEVOELIG" ride-request flag: een
        rood-oranje accent dat hoge urgentie signaleert en door Focus-
        modi heen breekt. Subtiele getinte achtergrond, gekleurde
        linkerrand-strook, en bijpassende tekstkleur. Hergebruikt het
        notice-patroon maar met een eigen urgentie-hue. */
    --notice-urgent-bg: 0.45 0.1 55 / 0.16;
    --notice-urgent-border: 0.45 0.1 55;
    --notice-urgent-fg: 0.82 0.1 55;

    /* Push-instellingenpagina — instellingen-kaart tokens (light).
       Kaarten op /driver/settings die push-voorkeuren groeperen
       (meldingen, geluid, trillen, PWA-installatie). Iets hogere
       elevatie dan basis .glass; subtiele paars-tint op de actieve
       kaart; muted-achtergrond voor inactieve/uitgeschakelde toggles. */
    --settings-card-bg: 0.99 0.005 260;
    --settings-card-bg-active: 0.7 0.18 55 / 0.06;
    --settings-card-border: 0.97 0.005 260;
    --settings-card-border-active: 0.7 0.18 55 / 0.45;
    --settings-card-shadow: 0 2px 8px -2px oklch(0.16 0.005 260 / 0.1), 0 1px
      3px -1px oklch(0.16 0.005 260 / 0.08);
    --settings-card-shadow-active: 0 8px 24px -8px oklch(0.7 0.18 55 / 0.28), 0
      2px 8px -4px oklch(0.16 0.005 260 / 0.1);
    --settings-toggle-on: 0.7 0.18 55;
    --settings-toggle-on-fg: 0.16 0.005 260;
    --settings-toggle-off: 0.88 0.008 260;
    --settings-toggle-off-fg: 0.55 0.22 250;
    --settings-row-divider: 0.97 0.005 260;

    /* PWA-manifest / installatie accent (light).
        Een lichte paars-tint voor de "Installeer app" CTA en PWA-
        status-indicator. Hergebruikt primary paars maar met een eigen
        subtiele achtergrond-tint voor het PWA-blok. */
    --pwa-accent-bg: 0.7 0.18 55 / 0.08;
    --pwa-accent-border: 0.7 0.18 55 / 0.3;
    --pwa-accent-fg: 0.55 0.22 250;
    --pwa-installed-fg: 0.55 0.18 250;

    /* Kaart-landingspagina — rol-tokens (light).
        Twee primaire rollen op de kaart-landingspagina: Passagier
        (logo-blauw) en Chauffeur (logo-groen). Spiegelt het
        glassmorphism-patroon: een eigen rol-hue, een zwakke en sterke
        getinte glas-achtergrond, een gekleurde glas-rand, en een
        bijpassende glas-schaduw. Hergebruikt door .glass-button-passenger
        en .glass-button-driver in @layer utilities. */
    --role-passenger: 0.7 0.18 55;
    --role-driver: 0.85 0.13 85;
    --glass-bg-passenger: 0.7 0.18 55 / 0.14;
    --glass-bg-passenger-strong: 0.7 0.18 55 / 0.22;
    --glass-border-passenger: 0.7 0.18 55 / 0.55;
    --glass-shadow-passenger: 0 8px 24px -8px oklch(0.7 0.18 55 / 0.45), 0 2px
      8px -4px oklch(0.16 0.005 260 / 0.12);
    --glass-bg-driver: 0.85 0.13 85 / 0.14;
    --glass-bg-driver-strong: 0.85 0.13 85 / 0.22;
    --glass-border-driver: 0.85 0.13 85 / 0.55;
    --glass-shadow-driver: 0 8px 24px -8px oklch(0.85 0.13 85 / 0.45), 0 2px 8px
      -4px oklch(0.16 0.005 260 / 0.12);

    /* Goud-accent tokens (light) — warm goud (oklch 0.85 0.13 85) als
        opvallend accent voor actieve toestanden, highlights, premium
        elementen (referral-cards, actieve rit-status, logo-gloed).
        Spiegelt het glassmorphism-patroon: zwakke/sterke getinte
        glas-achtergrond, gekleurde glas-rand, bijpassende glas-schaduw. */
    --gold-accent: 0.85 0.13 85;
    --glass-bg-gold: 0.85 0.13 85 / 0.14;
    --glass-bg-gold-strong: 0.85 0.13 85 / 0.22;
    --glass-border-gold: 0.85 0.13 85 / 0.55;
    --glass-shadow-gold: 0 8px 24px -8px oklch(0.85 0.13 85 / 0.45), 0 2px 8px
      -4px oklch(0.16 0.005 260 / 0.12);

    /* Glassmorphism — iOS App Library frosted glass tokens (light/zwart).
       Donker-glas (i.p.v. wit-glas) zodat de pre-login landingspagina
       zwart-dominant wordt en glas-panelen zichtbaar blijven op de zwarte
       achtergrond. Spiegelt het .dark glass patroon. Alpha laag gehouden
       zodat de onderliggende kaart erdoorheen schijnt. */
    --glass-bg: 0.12 0.005 260 / 0.22;
    --glass-bg-strong: 0.1 0.005 260 / 0.34;
    --glass-bg-active: 0.7 0.18 55 / 0.16;
    --glass-bg-primary: 0.7 0.18 55 / 0.14;
    --glass-bg-primary-strong: 0.7 0.18 55 / 0.24;
    --glass-bg-success: 0.7 0.18 145 / 0.14;
    --glass-bg-success-strong: 0.7 0.18 145 / 0.24;
    --glass-border: 0.95 0.012 75 / 0.18;
    --glass-border-active: 0.95 0.012 75 / 0.32;
    --glass-border-primary: 0.7 0.18 55 / 0.6;
    --glass-border-success: 0.7 0.18 145 / 0.6;
    --glass-blur: 18px;
    --glass-blur-strong: 28px;
    --glass-shadow: 0 8px 32px -8px oklch(0 0 0 / 0.6), 0 2px 8px -4px
      oklch(0 0 0 / 0.45);
    --glass-shadow-primary: 0 8px 24px -8px oklch(0.7 0.18 55 / 0.4), 0 2px 8px
      -4px oklch(0 0 0 / 0.45);
    --glass-shadow-success: 0 8px 24px -8px oklch(0.7 0.18 145 / 0.4), 0 2px 8px
      -4px oklch(0 0 0 / 0.45);

    /* Flat map — real city planchette, paars-on-navy palette (light).
        Contrast bumped so the map reads unmistakably as "a city plan with
        streets" in screenshot inspection, not "plain white". Block vs
        block-alt are clearly different greys; streets have a visible line
        color; major roads are darker/thicker; park is clearly green; water
        is clearly blue; route has a strong paars glow. Overlay alpha lowered
        from 0.45 to 0.20 so the map shines through the dimming layer. */
    --map-bg: 0.94 0.012 75;
    --map-block: 0.86 0.014 250;
    --map-block-alt: 0.92 0.008 75;
    --map-building: 0.82 0.01 250;
    --map-building-alt: 0.78 0.012 75;
    --map-street: 0.99 0.005 260;
    --map-street-minor: 0.72 0.008 75;
    --map-street-major: 0.55 0.025 75;
    --map-street-secondary: 0.65 0.012 75;
    --map-street-line: 0.7 0.025 250;
    --map-street-casing: 0.45 0.03 250;
    --map-label: 0.45 0.02 250;
    --map-label-major: 0.35 0.025 250;
    --map-park: 0.72 0.12 150;
    --map-park-edge: 0.6 0.14 150;
    --map-water: 0.62 0.14 230;
    --map-water-edge: 0.5 0.14 230;
    --map-route: 0.78 0.18 75;
    --map-route-glow: 0.78 0.18 75 / 0.55;
    --map-marker: 0.7 0.18 55;
    --map-marker-dest: 0.16 0.005 260;
    --map-overlay: 0.99 0.005 260 / 0.2;
    --map-grid: 0.97 0.005 260 / 0.5;
  }

.dark {
    /* Dark — premium chauffeurs-palet: rood, navy, wit, goud, groen, rood.
       GEEN lichtgrijs, GEEN paars. --muted-foreground = warme goud-tint. */
    --background: 0.18 0.05 255;
    --foreground: 0.95 0.012 75;
    --card: 0.08 0.005 260;
    --card-foreground: 0.95 0.012 75;
    --popover: 0.1 0.008 260;
    --popover-foreground: 0.95 0.012 75;

    --primary: 0.7 0.18 55;
    --primary-foreground: 0.98 0.005 260;

    /* Valk Taxi CTA-accent — Van der Valk geel (#ffec00) voor primaire
        call-to-action knoppen. Foreground is donkerblauw voor contrast. */
    --cta: 0.93 0.21 100;
    --cta-foreground: 0.18 0.05 255;

    --secondary: 0.12 0.005 260;
    --secondary-foreground: 0.85 0.13 85;
    --muted: 0.1 0.005 260;
    /* Warme goud-tint (champagne) i.p.v. lichtgrijs. oklch(0.78 0.045 85). */
    --muted-foreground: 0.78 0.045 85;

    --accent: 0.16 0.008 260;
    --accent-foreground: 0.97 0.005 260;

    /* Verfijnd jade-groen — premium emerald, online/succes semantiek. */
    --accent-green: 0.68 0.13 155;
    --accent-green-foreground: 0.13 0.02 155;

    --destructive: 0.45 0.1 55;
    --destructive-foreground: 0.99 0.005 260;

    --success: 0.68 0.13 155;
    --success-foreground: 0.13 0.02 155;
    --warning: 0.55 0.18 250;
    --warning-foreground: 0.98 0.005 260;

    --border: 0.18 0.008 260;
    --input: 0.18 0.008 260;
    --ring: 0.7 0.18 55;

    --chart-1: 0.7 0.18 55;
    --chart-2: 0.55 0.22 250;
    --chart-3: 0.85 0.13 85;
    --chart-4: 0.7 0.18 145;
    --chart-5: 0.55 0.18 250;

    --sidebar: 0.05 0.005 260;
    --sidebar-foreground: 0.95 0.012 75;
    --sidebar-primary: 0.7 0.18 55;
    --sidebar-primary-foreground: 0.98 0.005 260;
    --sidebar-accent: 0.12 0.005 260;
    --sidebar-accent-foreground: 0.85 0.13 85;
    --sidebar-border: 0.18 0.008 260;
    --sidebar-ring: 0.7 0.18 55;

    --gradient-primary: linear-gradient(
      135deg,
      oklch(0.7 0.18 55) 0%,
      oklch(0.85 0.13 85) 100%
    );
    --gradient-subtle: linear-gradient(
      180deg,
      oklch(0.18 0.05 255) 0%,
      oklch(0.08 0.005 260) 100%
    );
    --gradient-navy: linear-gradient(
      160deg,
      oklch(0.05 0.005 260) 0%,
      oklch(0.18 0.05 255) 100%
    );

    /* Autocomplete dropdown — zwevende adres-suggestie lijst (dark/zwart).
       Popover-oppervlak iets hoger dan card voor elevatie; rand subtiel
       verlicht; item-hover paars-tint; item-active sterkere paars-tint
       met paars linkerrand. Schaduw dieper voor dark-mode. */
    --dropdown-bg: 0.1 0.008 260;
    --dropdown-border: 0.22 0.008 260;
    --dropdown-item-hover: 0.7 0.18 55 / 0.12;
    --dropdown-item-active: 0.7 0.18 55 / 0.2;
    --dropdown-item-active-border: 0.7 0.18 55;
    --dropdown-shadow: 0 16px 40px -12px oklch(0 0 0 / 0.7), 0 6px 16px -8px
      oklch(0 0 0 / 0.5);

    /* Wachtrij-meldingen — semantische notice-achtergronden (dark/zwart).
        Subtiele getinte achtergronden op zuiver zwart; gekleurde linkerrand;
        verlichte tekstkleur per type. */
    --notice-info-bg: 0.55 0.22 250 / 0.14;
    --notice-info-border: 0.55 0.22 250;
    --notice-info-fg: 0.78 0.1 240;
    --notice-warning-bg: 0.7 0.18 55 / 0.16;
    --notice-warning-border: 0.7 0.18 55;
    --notice-warning-fg: 0.88 0.12 75;
    --notice-success-bg: 0.7 0.18 145 / 0.14;
    --notice-success-border: 0.7 0.18 145;
    --notice-success-fg: 0.82 0.14 145;

    /* Tijdgevoelig / hoge-prioriteit push-melding (dark/zwart).
        Rood-oranje urgentie-accent op zuiver zwart; verlichte tekst. */
    --notice-urgent-bg: 0.45 0.1 55 / 0.16;
    --notice-urgent-border: 0.45 0.1 55;
    --notice-urgent-fg: 0.82 0.1 55;

    /* Push-instellingenpagina — instellingen-kaart tokens (dark/zwart).
       Donkere kaarten op zwart; paars-tint op actieve kaart; verlichte
       toggles. Elevatie-schaduwen dieper voor dark-mode. */
    --settings-card-bg: 0.08 0.005 260;
    --settings-card-bg-active: 0.7 0.18 55 / 0.1;
    --settings-card-border: 0.18 0.008 260;
    --settings-card-border-active: 0.7 0.18 55 / 0.55;
    --settings-card-shadow: 0 4px 12px -3px oklch(0 0 0 / 0.6), 0 2px 6px -2px
      oklch(0 0 0 / 0.4);
    --settings-card-shadow-active: 0 12px 28px -8px oklch(0.7 0.18 55 / 0.4), 0
      4px 12px -4px oklch(0 0 0 / 0.4);
    --settings-toggle-on: 0.7 0.18 55;
    --settings-toggle-on-fg: 0.98 0.005 260;
    --settings-toggle-off: 0.18 0.008 260;
    --settings-toggle-off-fg: 0.62 0.018 75;
    --settings-row-divider: 0.18 0.008 260;

    /* PWA-manifest / installatie accent (dark/zwart).
        Paars-tint op zuiver zwart; verlichte tekst. */
    --pwa-accent-bg: 0.7 0.18 55 / 0.12;
    --pwa-accent-border: 0.7 0.18 55 / 0.4;
    --pwa-accent-fg: 0.88 0.12 75;
    --pwa-installed-fg: 0.82 0.14 145;

    /* Kaart-landingspagina — rol-tokens (dark/zwart).
       Passagier (paars) en Chauffeur (blauw) rol-hues, afgestemd op
       zuiver zwart: lagere glas-alpha zodat de kaart erdoorheen schijnt,
       en diepere schaduwen voor dark-mode. Spiegelt het glassmorphism
       dark-patroon. Goud-tokens voor premium accent-staten. */
    --role-passenger: 0.7 0.18 55;
    --role-driver: 0.85 0.13 85;
    --gold-accent: 0.85 0.13 85;
    --glass-bg-passenger: 0.7 0.18 55 / 0.12;
    --glass-bg-passenger-strong: 0.7 0.18 55 / 0.22;
    --glass-border-passenger: 0.7 0.18 55 / 0.6;
    --glass-shadow-passenger: 0 8px 24px -8px oklch(0.7 0.18 55 / 0.4), 0 2px
      8px -4px oklch(0 0 0 / 0.5);
    --glass-bg-driver: 0.85 0.13 85 / 0.14;
    --glass-bg-driver-strong: 0.85 0.13 85 / 0.22;
    --glass-border-driver: 0.85 0.13 85 / 0.6;
    --glass-shadow-driver: 0 8px 24px -8px oklch(0.85 0.13 85 / 0.4), 0 2px 8px
      -4px oklch(0 0 0 / 0.5);
    --glass-bg-gold: 0.85 0.13 85 / 0.14;
    --glass-bg-gold-strong: 0.85 0.13 85 / 0.24;
    --glass-border-gold: 0.85 0.13 85 / 0.6;
    --glass-shadow-gold: 0 8px 24px -8px oklch(0.85 0.13 85 / 0.4), 0 2px 8px
      -4px oklch(0 0 0 / 0.5);

    /* Glassmorphism — iOS App Library frosted glass tokens (dark/zwart).
        Donker-glas (i.p.v. wit-glas) zodat de glas-panelen zichtbaar
        blijven op de zwarte achtergrond. Alpha laag gehouden zodat de
        onderliggende kaart erdoorheen schijnt. */
    --glass-bg: 0.12 0.005 260 / 0.22;
    --glass-bg-strong: 0.1 0.005 260 / 0.34;
    --glass-bg-active: 0.7 0.18 55 / 0.16;
    --glass-bg-primary: 0.7 0.18 55 / 0.14;
    --glass-bg-primary-strong: 0.7 0.18 55 / 0.24;
    --glass-bg-success: 0.7 0.18 145 / 0.14;
    --glass-bg-success-strong: 0.7 0.18 145 / 0.24;
    --glass-border: 0.95 0.012 75 / 0.18;
    --glass-border-active: 0.95 0.012 75 / 0.32;
    --glass-border-primary: 0.7 0.18 55 / 0.6;
    --glass-border-success: 0.7 0.18 145 / 0.6;
    --glass-blur: 18px;
    --glass-blur-strong: 28px;
    --glass-shadow: 0 8px 32px -8px oklch(0 0 0 / 0.6), 0 2px 8px -4px
      oklch(0 0 0 / 0.45);
    --glass-shadow-primary: 0 8px 24px -8px oklch(0.7 0.18 55 / 0.4), 0 2px 8px
      -4px oklch(0 0 0 / 0.45);
    --glass-shadow-success: 0 8px 24px -8px oklch(0.7 0.18 145 / 0.4), 0 2px 8px
      -4px oklch(0 0 0 / 0.45);

    /* Flat map — real city planchette, paars-on-zwart palette (dark).
        Donkere tegels op zwart; straten verlicht voor zichtbaarheid. */
    --map-bg: 0.08 0.005 260;
    --map-block: 0.12 0.008 260;
    --map-block-alt: 0.1 0.005 250;
    --map-building: 0.14 0.01 260;
    --map-building-alt: 0.12 0.008 250;
    --map-street: 0.18 0.012 260;
    --map-street-minor: 0.28 0.012 75;
    --map-street-major: 0.5 0.03 75;
    --map-street-secondary: 0.4 0.022 75;
    --map-street-line: 0.4 0.04 255;
    --map-street-casing: 0.22 0.025 260;
    --map-label: 0.7 0.02 75;
    --map-label-major: 0.8 0.025 75;
    --map-park: 0.3 0.1 150;
    --map-park-edge: 0.4 0.12 150;
    --map-water: 0.32 0.1 230;
    --map-water-edge: 0.42 0.12 230;
    --map-route: 0.7 0.18 55;
    --map-route-glow: 0.7 0.18 55 / 0.55;
    --map-marker: 0.7 0.18 55;
    --map-marker-dest: 0.95 0.012 75;
    --map-overlay: 0 0 0 / 0.25;
    --map-grid: 0.18 0.008 260 / 0.4;

    /* Hoogte van de vaste bovenbalk (DriverTopBar: h-14 = 3.5rem) op alle
       /driver/* routes. Spiegelt de :root waarde voor hergebruik in
       dark-mode. */
    --driver-top-bar-height: 3.5rem;

    /* Hoogte van de vaste passagiers-bovenbalk (PassengerTopBar: h-14 =
       3.5rem) op alle /passenger/* routes. Spiegelt --driver-top-bar-height
       voor hergebruik in dark-mode. */
    --passenger-top-bar-height: 3.5rem;
  }

/* ============================================================
   * PREMIUM LED-STYLE dashboard tokens — LICHT-modus.
   * GESCOPEERD op .dashboard-dark — overschrijft NIET de globale
   * :root / .dark tokens. Geldt alleen binnen de passagiers- en
   * chauffeursdashboards (BookingPage, WaitingPage, DriverHomePage,
   * DriverDashboardPage). De landingpagina en andere pagina's blijven
   * onaangetast.
   *
   * DEZE BLOK definieert de LICHT-modus waarden (actief wanneer .dark
   * NIET op <html> staat). De donker-modus waarden staan in de
   * `.dark .dashboard-dark` override hieronder — die selector heeft
   * specificity (0,2,0) en wint dus van zowel .dark (0,1,0) als
   * .dashboard-dark (0,1,0), zodat de nachtmodus-toggle een zichtbaar
   * verschil maakt op passagiers- en chauffeurspagina's.
   *
   * LICHT palet: donkerblauwe achtergrond (oklch 0.13 0.005 260 — zoals
   * DESIGN.md specificeert) met witte teksten (oklch 0.97), blauw primary
   * accent (hue 250), appelgroen success (hue 145). LED-rand in licht-modus
   * een zachtere blauw-tint zodat de gloed niet overheerst op een donkere
   * ondergrond. Glas-panelen gebruiken donkerblauwe tinten met lage alpha
   * zodat de kaart erdoorheen schijnt. Frontend zet class op de dashboard-
   * root. De donkerblauw-wit-blauw combinatie is hierdoor zichtbaar in
   * zowel dag- als nachtmodus op de dashboards.
   * ========================================================== */

.dashboard-dark {
    /* Premium chauffeurs-dashboard: blauw, zwart, wit, goud, groen, rood.
       GEEN lichtgrijs, GEEN paars. --muted-foreground = lichtblauw-wit. */
    --background: 0.13 0.005 260;
    --foreground: 0.97 0.005 250;
    --card: 0.1 0.02 250;
    --card-foreground: 0.97 0.005 250;
    --popover: 0.1 0.02 250;
    --popover-foreground: 0.97 0.005 250;

    --primary: 0.7 0.18 55;
    --primary-foreground: 0.99 0.005 260;

    --secondary: 0.1 0.02 250;
    --secondary-foreground: 0.85 0.13 85;
    --muted: 0.1 0.02 250;
    /* Lichtblauw-wit i.p.v. grijs/goud. oklch(0.85 0.03 250). */
    --muted-foreground: 0.85 0.03 250;

    --accent: 0.1 0.02 250;
    --accent-foreground: 0.97 0.005 250;

    /* Verfijnd jade-groen — premium emerald, online/succes semantiek. */
    --accent-green: 0.68 0.13 155;
    --accent-green-foreground: 0.13 0.02 155;

    --destructive: 0.45 0.1 55;
    --destructive-foreground: 0.99 0.005 260;

    --success: 0.68 0.13 155;
    --success-foreground: 0.13 0.02 155;
    --warning: 0.55 0.18 250;
    --warning-foreground: 0.99 0.005 260;

    /* LED-rand in LICHT-modus: blauw gloeiende rand als standaard
        border + ring op de donkerblauwe achtergrond. Iets hogere chroma/L
        zodat de LED-gloed leesbaar is tegen het donkerblauw. Blauw als
        accentkleur voor knoppen/links/actieve elementen. */
    --border: 0.5 0.14 255;
    --input: 0.5 0.14 255;
    --ring: 0.7 0.18 55;

    /* Hoogte van de vaste menubalk (h-14 = 3.5rem). Gebruikt door
       .dashboard-bottom-sheet zodat de sheet boven de nav zweeft. */
    --bottom-nav-height: 3.5rem;

    /* Hoogte van de vaste driver-topbar (h-14 = 3.5rem). Gebruikt door
       map-dashboard paginas zodat normale-flow content onder de vaste
       topbar begint in plaats van eronder te verdwijnen. */
    --driver-top-bar-height: 3.5rem;

    /* Hoogte van de vaste passagiers-topbar (h-14 = 3.5rem). Spiegelt
       --driver-top-bar-height binnen de .dashboard-dark scope (actief
       op BookingPage, WaitingPage) zodat passagiers-pagina's dezelfde
       top-offset hebben als chauffeurs-pagina's. */
    --passenger-top-bar-height: 3.5rem;

    /* Dashboard LED-glas in LICHT-modus — DONKERBLAUW/ZWART glas met blauw LED-
       randaccenten. Hoge alpha (0.55 / 0.78) zodat de bottom-sheet leest als
       zwart/blauw-zwart i.p.v. semi-transparant grijs; frosted blur behoudt
       de glas-identiteit. Randen zijn blauwe LED-lijnen in plaats van donker.
       Glas-tint op diep blauw-zwart (oklch 0.08 0.02 250) i.p.v. licht,
       consistent met de donkerblauwe achtergrond. */
    --glass-bg: 0.08 0.02 250 / 0.55;
    --glass-bg-strong: 0.08 0.02 250 / 0.78;
    --glass-bg-active: 0.7 0.18 55 / 0.16;
    --glass-bg-primary: 0.7 0.18 55 / 0.14;
    --glass-bg-primary-strong: 0.7 0.18 55 / 0.24;
    --glass-bg-success: 0.7 0.18 145 / 0.14;
    --glass-bg-success-strong: 0.7 0.18 145 / 0.24;
    --glass-border: 0.7 0.18 55 / 0.45;
    --glass-border-active: 0.7 0.18 55 / 0.75;
    --glass-border-primary: 0.7 0.18 55 / 0.8;
    --glass-border-success: 0.7 0.18 145 / 0.8;
    --glass-blur: 18px;
    --glass-blur-strong: 26px;
    /* LED-gloed-schaduwen in LICHT-modus: zachtere blauwe halo (lagere
        alpha) zodat de gloed past bij een lichte ondergrond. */
    --glass-shadow: 0 0 0 1px oklch(0.7 0.18 55 / 0.12), 0 0 18px -4px
      oklch(0.7 0.18 55 / 0.22), 0 8px 28px -10px oklch(0.16 0.005 260 / 0.18);
    --glass-shadow-primary: 0 0 0 1px oklch(0.7 0.18 55 / 0.3), 0 0 24px -2px
      oklch(0.7 0.18 55 / 0.4), 0 8px 24px -8px oklch(0.16 0.005 260 / 0.18);
    --glass-shadow-success: 0 0 0 1px oklch(0.7 0.18 145 / 0.3), 0 0 24px -2px
      oklch(0.7 0.18 145 / 0.38), 0 8px 24px -8px oklch(0.16 0.005 260 / 0.18);

    /* Goud-tokens (premium accent) — warm goud (oklch 0.85 0.13 85) voor
        actieve/premium staten. Spiegelt de rol-goud-tokens uit .dark scope. */
    --gold-accent: 0.85 0.13 85;
    --glass-bg-gold: 0.85 0.13 85 / 0.14;
    --glass-bg-gold-strong: 0.85 0.13 85 / 0.24;
    --glass-border-gold: 0.85 0.13 85 / 0.6;
    --glass-shadow-gold: 0 0 0 1px oklch(0.85 0.13 85 / 0.3), 0 0 24px -2px
      oklch(0.85 0.13 85 / 0.4), 0 8px 24px -8px oklch(0.16 0.005 260 / 0.18);

    /* Dashboard LED-kaart in LICHT-modus — LICHTE kaarttegels zodat de
       blauw gloeiende modules en routes er helder tegen afsteken.
       Lichte blokken, donkere blauwe straten, blauwe routemarkering
       met gloed. Dimming-overlay minimaal (licht) zodat de kaart zichtbaar
       blijft. */
    --map-bg: 0.94 0.012 75;
    --map-block: 0.86 0.014 250;
    --map-block-alt: 0.92 0.008 75;
    --map-building: 0.82 0.01 250;
    --map-building-alt: 0.78 0.012 75;
    --map-street: 0.42 0.03 255;
    --map-street-minor: 0.72 0.008 75;
    --map-street-major: 0.55 0.025 75;
    --map-street-secondary: 0.65 0.012 75;
    --map-street-line: 0.7 0.025 250;
    --map-street-casing: 0.45 0.03 250;
    --map-label: 0.45 0.02 250;
    --map-label-major: 0.35 0.025 250;
    --map-park: 0.72 0.12 150;
    --map-park-edge: 0.6 0.14 150;
    --map-water: 0.62 0.14 230;
    --map-water-edge: 0.5 0.14 230;
    --map-route: 0.55 0.22 250;
    --map-route-glow: 0.55 0.22 250 / 0.55;
    --map-marker: 0.55 0.22 250;
    --map-marker-dest: 0.16 0.005 260;
    --map-overlay: 0.99 0.005 260 / 0.2;
    --map-grid: 0.7 0.18 55 / 0.08;
  }

/* ============================================================
    * PREMIUM LED-STYLE dashboard tokens — DONKER-modus override.
   * GESCOPEERD op `.dark .dashboard-dark` — actief wanneer .dark op
   * <html> staat EN de dashboard-root heeft .dashboard-dark. Deze
   * selector heeft specificity (0,2,0) en wint daarmee van zowel
   * .dark (0,1,0) als .dashboard-dark (0,1,0), zodat de nachtmodus-
   * toggle een zichtbaar verschil maakt op passagiers- en chauffeurs-
   * pagina's: in licht-modus lichte achtergronden, in donker-modus
   * donkere achtergronden met paarse accenten.
   *
   * DONKER palet: donkerblauwe achtergrond (oklch 0.13 0.005 260 — zoals
   * DESIGN.md specificeert), witte teksten (oklch 0.97), paars LED-primary
   * (oklch 0.70 0.18 55) met gloeiende accentwaarden voor randen, actieve
   * staten en focus-ringen. Donker glas met paars LED-randaccenten; zwevende
   * modules laten de 3D-kaart erachter zichtbaar blijven. Consistent met
   * DESIGN.md zodat de donkerblauwe achtergrond echt zichtbaar wordt op de
   * dashboards in zowel dag- als nachtmodus.
   * ========================================================== */

.dark .dashboard-dark {
    /* Premium chauffeurs-dashboard (donker): blauw, zwart, wit, goud, groen, rood.
       GEEN lichtgrijs, GEEN paars. --muted-foreground = lichtblauw-wit. */
    --background: 0.13 0.005 260;
    --foreground: 0.97 0.005 250;
    --card: 0.1 0.02 250;
    --card-foreground: 0.97 0.005 250;
    --popover: 0.1 0.02 250;
    --popover-foreground: 0.97 0.005 250;

    --primary: 0.7 0.18 55;
    --primary-foreground: 0.99 0.005 260;

    --secondary: 0.1 0.02 250;
    --secondary-foreground: 0.85 0.13 85;
    --muted: 0.1 0.02 250;
    /* Lichtblauw-wit i.p.v. grijs/goud. oklch(0.85 0.03 250). */
    --muted-foreground: 0.85 0.03 250;

    --accent: 0.1 0.02 250;
    --accent-foreground: 0.97 0.005 250;

    --accent-green: 0.68 0.13 155;
    --accent-green-foreground: 0.13 0.02 155;

    --destructive: 0.45 0.1 55;
    --destructive-foreground: 0.99 0.005 260;

    --success: 0.68 0.13 155;
    --success-foreground: 0.13 0.005 260;
    --warning: 0.55 0.18 250;
    --warning-foreground: 0.13 0.02 60;

    /* LED-rand in DONKER-modus: blauw gloeiende rand als standaard
        border + ring. Iets hogere chroma/L dan de licht-modus rand
        zodat de LED-gloed leesbaar is tegen het diepe zwart. */
    --border: 0.5 0.14 255;
    --input: 0.5 0.14 255;
    --ring: 0.7 0.18 55;

    /* Dashboard LED-glas in DONKER-modus — DONKER glas met blauw LED-
       randaccenten. Hoge alpha (0.55 / 0.78) zodat de bottom-sheet leest als
       zwart/blauw-zwart i.p.v. semi-transparant grijs; frosted blur behoudt
       de glas-identiteit. Randen zijn blauwe LED-lijnen (hoge alpha) in plaats
       van wit. Glas-tint op diep blauw-zwart (oklch 0.08 0.02 250) i.p.v.
       zuiver zwart, consistent met DESIGN.md. */
    --glass-bg: 0.08 0.02 250 / 0.55;
    --glass-bg-strong: 0.08 0.02 250 / 0.78;
    --glass-bg-active: 0.7 0.18 55 / 0.16;
    --glass-bg-primary: 0.7 0.18 55 / 0.14;
    --glass-bg-primary-strong: 0.7 0.18 55 / 0.24;
    --glass-bg-success: 0.7 0.18 145 / 0.14;
    --glass-bg-success-strong: 0.7 0.18 145 / 0.24;
    --glass-border: 0.7 0.18 55 / 0.55;
    --glass-border-active: 0.7 0.18 55 / 0.85;
    --glass-border-primary: 0.7 0.18 55 / 0.9;
    --glass-border-success: 0.7 0.18 145 / 0.9;
    --glass-blur: 18px;
    --glass-blur-strong: 26px;
    /* LED-gloed-schaduwen in DONKER-modus: blauw gloeiende halo rond
        glas-panelen. Vervangt de lichte schaduwen door blauwe LED-glow. */
    --glass-shadow: 0 0 0 1px oklch(0.7 0.18 55 / 0.18), 0 0 18px -4px
      oklch(0.7 0.18 55 / 0.35), 0 8px 28px -10px oklch(0 0 0 / 0.6);
    --glass-shadow-primary: 0 0 0 1px oklch(0.7 0.18 55 / 0.4), 0 0 24px -2px
      oklch(0.7 0.18 55 / 0.55), 0 8px 24px -8px oklch(0 0 0 / 0.55);
    --glass-shadow-success: 0 0 0 1px oklch(0.7 0.18 145 / 0.4), 0 0 24px -2px
      oklch(0.7 0.18 145 / 0.5), 0 8px 24px -8px oklch(0 0 0 / 0.55);

    --gold-accent: 0.85 0.13 85;
    --glass-bg-gold: 0.85 0.13 85 / 0.14;
    --glass-bg-gold-strong: 0.85 0.13 85 / 0.24;
    --glass-border-gold: 0.85 0.13 85 / 0.6;
    --glass-shadow-gold: 0 0 0 1px oklch(0.85 0.13 85 / 0.4), 0 0 24px -2px
      oklch(0.85 0.13 85 / 0.5), 0 8px 24px -8px oklch(0 0 0 / 0.55);

    /* Dashboard LED-kaart in DONKER-modus — DONKERBLAUWE kaarttegels
       (LED-stijl) op donkerblauwe basis (oklch 0.13 0.005 260) zodat
       de blauw gloeiende modules en routes er helder tegen afsteken
       en de donkerblauwe achtergrond echt zichtbaar blijft. Lichte
       blauwe straten, blauwe routemarkering met gloed. Dimming-
       overlay minimaal (donker) zodat de kaart zichtbaar blijft maar
       donkerblauw genoeg is voor LED-contrast. */
    --map-bg: 0.13 0.005 260;
    --map-block: 0.16 0.022 260;
    --map-block-alt: 0.14 0.018 250;
    --map-building: 0.18 0.024 260;
    --map-building-alt: 0.16 0.02 250;
    --map-street: 0.42 0.03 255;
    --map-street-minor: 0.28 0.022 260;
    --map-street-major: 0.5 0.05 255;
    --map-street-secondary: 0.45 0.04 255;
    --map-street-line: 0.5 0.05 255;
    --map-street-casing: 0.22 0.03 260;
    --map-label: 0.7 0.02 250;
    --map-label-major: 0.8 0.025 250;
    --map-park: 0.24 0.06 150;
    --map-park-edge: 0.3 0.08 150;
    --map-water: 0.28 0.08 230;
    --map-water-edge: 0.34 0.1 230;
    --map-route: 0.7 0.18 55;
    --map-route-glow: 0.7 0.18 55 / 0.65;
    --map-marker: 0.7 0.18 55;
    --map-marker-dest: 0.85 0.13 85;
    --map-overlay: 0 0 0 / 0.12;
    --map-grid: 0.5 0.14 255 / 0.08;
  }

/* ============================================================
    * LANDING-LED scope — kaart-landingspagina in premium LED-stijl.
   * GESCOPEERD op .landing-led (gezet op de MapLanding root-wrapper).
   * Erft alle .dashboard-dark LED-tokens door ze hier te herdefiniëren
   * op dezelfde waarden, PLUS rol-knop overrides: beide rolknoppen
   * (Passagier + Chauffeur) worden zwevende LED-modules met blauwe
   * gloeiende randen en witte tekst/iconen in plaats van paars/groen.
   *
   * Waarom een eigen scope i.p.v. .dashboard-dark hergebruiken?
   * .dashboard-dark overschrijft NIET de rol-tokens (--role-passenger,
   * --glass-bg-passenger, etc.), dus de rolknoppen zouden paars/groen
   * blijven. De gebruiker wil echter beide knoppen als blauwe LED-
   * modules. .landing-led herdefinieert die rol-tokens naar de blauwe
   * LED-hue (oklch 0.70 0.18 55) met witte foreground, zodat
   * .glass-button-passenger en .glass-button-success automatisch
   * blauwe LED-knoppen worden — geen per-utility overrides nodig
   * (de glass-utilities lezen de --glass-* CSS vars).
   * ========================================================== */

.landing-led {
    /* Erft .dashboard-dark LED-tokens (identieke waarden) — premium
       chauffeurs-palet: blauw, zwart, wit, goud, groen, rood. GEEN grijs,
       GEEN paars. --muted-foreground = warme goud-tint. */
    --background: 0 0 0;
    --foreground: 0.97 0.005 250;
    --card: 0.08 0.005 260;
    --card-foreground: 0.97 0.005 250;
    --popover: 0.1 0.008 260;
    --popover-foreground: 0.97 0.005 250;

    --primary: 0.7 0.18 55;
    --primary-foreground: 0.99 0.005 260;

    --secondary: 0.12 0.005 260;
    --secondary-foreground: 0.85 0.13 85;
    --muted: 0.1 0.005 260;
    /* Lichtblauw-wit i.p.v. grijs/goud. oklch(0.85 0.03 250). */
    --muted-foreground: 0.85 0.03 250;

    --accent: 0.78 0.14 220;
    --accent-foreground: 0.13 0.005 260;

    /* Verfijnd jade-groen — premium emerald, online/succes semantiek. */
    --accent-green: 0.68 0.13 155;
    --accent-green-foreground: 0.13 0.02 155;

    --destructive: 0.45 0.1 55;
    --destructive-foreground: 0.99 0.005 260;

    --success: 0.68 0.13 155;
    --success-foreground: 0.13 0.02 155;
    --warning: 0.55 0.18 250;
    --warning-foreground: 0.13 0.02 60;

    --border: 0.5 0.14 255;
    --input: 0.5 0.14 255;
    --ring: 0.7 0.18 55;

    /* LED-glas — donker glas met paars LED-randaccenten op zuiver zwart.
       STERKER OPAK (0.22 → 0.55 / 0.34 → 0.72): de OpenStreetMap-tegels
       zijn licht en schijnen door de lage-alpha glas-panelen heen,
       waardoor tekst op de landingspagina onleesbaar werd. Hogere alpha
       houdt de glas-identiteit (frosted blur) maar maakt de panelen
       donker genoeg dat witte en muted-foreground tekst altijd leesbaar
       blijft. Spiegelt het .dashboard-dark glas-patroon (zwart-tinted). */
    --glass-bg: 0.08 0.005 260 / 0.55;
    --glass-bg-strong: 0.06 0.005 260 / 0.72;
    --glass-bg-active: 0.7 0.18 55 / 0.16;
    --glass-bg-primary: 0.7 0.18 55 / 0.14;
    --glass-bg-primary-strong: 0.7 0.18 55 / 0.24;
    --glass-bg-success: 0.7 0.18 145 / 0.14;
    --glass-bg-success-strong: 0.7 0.18 145 / 0.24;
    --glass-border: 0.7 0.18 55 / 0.55;
    --glass-border-active: 0.7 0.18 55 / 0.85;
    --glass-border-primary: 0.7 0.18 55 / 0.9;
    --glass-border-success: 0.7 0.18 145 / 0.9;
    --glass-blur: 18px;
    --glass-blur-strong: 26px;
    --glass-shadow: 0 0 0 1px oklch(0.7 0.18 55 / 0.18), 0 0 18px -4px
      oklch(0.7 0.18 55 / 0.35), 0 8px 28px -10px oklch(0 0 0 / 0.6);
    --glass-shadow-primary: 0 0 0 1px oklch(0.7 0.18 55 / 0.4), 0 0 24px -2px
      oklch(0.7 0.18 55 / 0.55), 0 8px 24px -8px oklch(0 0 0 / 0.55);
    --glass-shadow-success: 0 0 0 1px oklch(0.7 0.18 145 / 0.4), 0 0 24px -2px
      oklch(0.7 0.18 145 / 0.5), 0 8px 24px -8px oklch(0 0 0 / 0.55);

    /* ROL-KNOP OVERRIDES — passagier = blauwe LED-module, chauffeur = groene
        LED-module. .glass-button-passenger leest --role-passenger /
        --glass-*-passenger (blauw); .glass-button-success leest --glass-*-success
        (groen). Beide rolknoppen lezen als zwevende LED-modules met witte
        tekst/iconen, maar met hun eigen rol-hue (passagier=blauw,
        chauffeur=groen) zodat de rollen visueel onderscheiden blijven. */
    --role-passenger: 0.7 0.18 55;
    --role-driver: 0.85 0.13 85;
    --glass-bg-passenger: 0.7 0.18 55 / 0.14;
    --glass-bg-passenger-strong: 0.7 0.18 55 / 0.24;
    --glass-border-passenger: 0.7 0.18 55 / 0.9;
    --glass-shadow-passenger: 0 0 0 1px oklch(0.7 0.18 55 / 0.4), 0 0 24px -2px
      oklch(0.7 0.18 55 / 0.55), 0 8px 24px -8px oklch(0 0 0 / 0.45);
    --glass-bg-driver: 0.85 0.13 85 / 0.14;
    --glass-bg-driver-strong: 0.85 0.13 85 / 0.24;
    --glass-border-driver: 0.85 0.13 85 / 0.9;
    --glass-shadow-driver: 0 0 0 1px oklch(0.85 0.13 85 / 0.4), 0 0 24px -2px
      oklch(0.85 0.13 85 / 0.55), 0 8px 24px -8px oklch(0 0 0 / 0.45);

    /* LED-kaart — donkere tegels op zuiver zwart met paars/blauwe straten
        zodat de paars gloeiende modules en routes er helder tegen
        afsteken. Spiegelt het .dashboard-dark kaart-patroon.

        DIMMING-OVERLAY VERSTERKT (0.10 → 0.62): de OpenStreetMap-tegels
        zijn licht (witte straten, lichte blokken) en schijnen door de
        lage-alpha glas-panelen heen, waardoor witte/lichte tekst op
        de landingspagina bijna onzichtbaar werd. Een donkere overlay
        van 62% maakt de kaart een donkere achtergrond zodat alle
        tekst en knoppen leesbaar blijven. De kaart blijft zichtbaar
        als een donkere plattegrond-structuur achter de glas-content. */
    --map-bg: 0.06 0.005 260;
    --map-block: 0.1 0.008 260;
    --map-block-alt: 0.08 0.005 250;
    --map-building: 0.12 0.01 260;
    --map-building-alt: 0.1 0.008 250;
    --map-street: 0.42 0.03 255;
    --map-street-minor: 0.28 0.022 260;
    --map-street-major: 0.5 0.05 255;
    --map-street-secondary: 0.45 0.04 255;
    --map-street-line: 0.5 0.05 255;
    --map-street-casing: 0.22 0.03 260;
    --map-label: 0.7 0.02 250;
    --map-label-major: 0.8 0.025 250;
    --map-park: 0.24 0.06 150;
    --map-park-edge: 0.3 0.08 150;
    --map-water: 0.28 0.08 230;
    --map-water-edge: 0.34 0.1 230;
    --map-route: 0.7 0.18 55;
    --map-route-glow: 0.7 0.18 55 / 0.65;
    --map-marker: 0.7 0.18 55;
    --map-marker-dest: 0.85 0.13 85;
    --map-overlay: 0 0 0 / 0.62;
    --map-grid: 0.5 0.14 255 / 0.08;

    /* REFERRAL BANNER — premium LED-stijl met paars accent.
        Opvallend maar premium: donker glas met paars gloei-rand,
        pulse-glow animatie (met prefers-reduced-motion override).
        Werkt binnen .landing-led scope (donker glas, blauwe LED base). */
    --referral-amber: 0.7 0.18 55;
    --referral-amber-strong: 0.7 0.18 55;
    --referral-amber-soft: 0.7 0.18 55 / 0.14;
  }

/* ==========================================================
   * REFERRAL BANNER — premium LED-stijl met paars accent.
   * Opvallend maar premium: donker glas met paars gloei-rand,
   * pulse-glow animatie (met prefers-reduced-motion override).
   * Werkt binnen .landing-led scope (donker glas, blauwe LED base).
   * ========================================================== */

.referral-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: 100%;
    border-radius: 1.25rem;
    padding: 1.125rem 1.25rem;
    background: linear-gradient(
      135deg,
      oklch(0.08 0.005 260 / 0.55) 0%,
      oklch(0.1 0.008 260 / 0.32) 100%
    );
    border: 1px solid oklch(var(--referral-amber) / 0.55);
    box-shadow: 0 0 0 1px oklch(var(--referral-amber) / 0.18), 0 0 22px -4px
      oklch(var(--referral-amber) / 0.45), 0 8px 28px -10px oklch(0 0 0 / 0.6);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    overflow: hidden;
    isolation: isolate;
    text-align: left;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s
      ease;
  }

/* Amber gloei-rand die zacht pulseert — trekt de aandacht
     zonder de premium donkere glas-esthetiek te breken. */

.referral-banner::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
      120deg,
      oklch(var(--referral-amber) / 0.0) 0%,
      oklch(var(--referral-amber-strong) / 0.85) 50%,
      oklch(var(--referral-amber) / 0.0) 100%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.7;
    animation: referral-pulse-glow 2.8s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
  }

.referral-banner:hover {
    transform: translateY(-1px);
    border-color: oklch(var(--referral-amber-strong) / 0.85);
    box-shadow: 0 0 0 1px oklch(var(--referral-amber) / 0.3), 0 0 30px -2px
      oklch(var(--referral-amber) / 0.6), 0 12px 32px -10px oklch(0 0 0 / 0.55);
  }

.referral-banner:focus-visible {
    outline: none;
    border-color: oklch(var(--referral-amber-strong) / 0.95);
    box-shadow: 0 0 0 2px oklch(var(--referral-amber) / 0.4), 0 0 30px -2px
      oklch(var(--referral-amber) / 0.6), 0 12px 32px -10px oklch(0 0 0 / 0.55);
  }

.referral-banner-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    align-self: flex-start;
    border-radius: 9999px;
    padding: 0.25rem 0.625rem;
    background: oklch(var(--referral-amber-soft));
    border: 1px solid oklch(var(--referral-amber) / 0.5);
    color: oklch(var(--referral-amber-strong));
    font-family: var(--font-display), sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
  }

.referral-banner-title {
    font-family: var(--font-display), sans-serif;
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: oklch(0.98 0.01 75);
    text-shadow: 0 1px 8px oklch(var(--referral-amber) / 0.25);
  }

.referral-banner-desc {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: oklch(0.88 0.02 75 / 0.92);
  }

.referral-banner-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    align-self: flex-start;
    margin-top: 0.25rem;
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    background: linear-gradient(
      135deg,
      oklch(var(--referral-amber-strong)) 0%,
      oklch(var(--referral-amber)) 100%
    );
    color: oklch(0.16 0.02 260);
    font-family: var(--font-display), sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 0 0 1px oklch(var(--referral-amber) / 0.4), 0 0 18px -4px
      oklch(var(--referral-amber) / 0.6);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  }

.referral-banner-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 0 0 1px oklch(var(--referral-amber) / 0.55), 0 0 24px -2px
      oklch(var(--referral-amber) / 0.75);
  }

.referral-banner-cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px oklch(var(--referral-amber) / 0.5), 0 0 24px -2px
      oklch(var(--referral-amber) / 0.75);
  }

/* Compacte variant voor de MapLanding (minder padding, kleinere
      titel) zodat de banner past binnen de zwevende glas-contentlaag
      boven de kaart zonder de rol-knoppen te verdringen. */

.referral-banner-compact {
    padding: 0.875rem 1rem;
    gap: 0.5rem;
    border-radius: 1rem;
  }

.referral-banner-compact .referral-banner-title {
    font-size: 0.9375rem;
  }

.referral-banner-compact .referral-banner-desc {
    font-size: 0.75rem;
    line-height: 1.4;
  }

.referral-banner-compact .referral-banner-cta {
    padding: 0.4rem 0.875rem;
    font-size: 0.75rem;
  }

/* ============================================================
   * LANDING-LED REFERRAL BANNER — STERKER CONTRAST.
   * GESCOPEERD op .landing-led — alleen de kaart-landingspagina.
   * De referral-banner had onvoldoende contrast op de lichte kaart
   * omdat de glas-achtergrond (alpha 0.55) de OpenStreetMap-tegels
   * doorliet. Binnen .landing-led krijgt de banner een donkerder
   * achtergrond (alpha 0.82) zodat de paars gloeiende rand, de
   * badge en de CTA-knop volledig zichtbaar blijven. Tekstkleuren
   * blijven ongewijzigd (wit/licht) maar lezen nu tegen donker glas.
   * ========================================================== */

.landing-led .referral-banner {
    background: linear-gradient(
      135deg,
      oklch(0.08 0.005 260 / 0.82) 0%,
      oklch(0.1 0.008 260 / 0.68) 100%
    );
  }

/* Succes-status nadat ?ref=CODE is gekoppeld — groene check,
     minder opdringerig dan de actieve banner. */

.referral-banner-linked {
    border-color: oklch(var(--success) / 0.55);
    box-shadow: 0 0 0 1px oklch(var(--success) / 0.18), 0 0 18px -4px
      oklch(var(--success) / 0.4), 0 8px 28px -10px oklch(0 0 0 / 0.5);
  }

.referral-banner-linked::before {
    background: linear-gradient(
      120deg,
      oklch(var(--success) / 0.0) 0%,
      oklch(var(--success) / 0.7) 50%,
      oklch(var(--success) / 0.0) 100%
    );
    animation: none;
    opacity: 0.4;
  }

.referral-banner-linked .referral-banner-badge {
    background: oklch(var(--success) / 0.14);
    border-color: oklch(var(--success) / 0.5);
    color: oklch(var(--success));
  }

@keyframes referral-pulse-glow {
    0%,
    100% {
      opacity: 0.45;
    }
    50% {
      opacity: 0.9;
    }
  }

@media (prefers-reduced-motion: reduce) {
    .referral-banner,
    .referral-banner-cta {
      transition: none;
    }
    .referral-banner:hover,
    .referral-banner-cta:hover {
      transform: none;
    }
    .referral-banner::before {
      animation: none;
      opacity: 0.6;
    }
  }

* {
	border-color: oklch(var(--border));
}

body {
	background-color: oklch(var(--background));
	font-family: var(--font-body), sans-serif;
	color: oklch(var(--foreground));
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
	font-family: var(--font-display), serif;
	letter-spacing: -0.025em;
}

.container {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-right: 2rem;
	padding-left: 2rem;
}

@media (min-width: 1400px) {

	.container {
		max-width: 1400px;
	}
}

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

.pointer-events-none {
	pointer-events: none;
}

.pointer-events-auto {
	pointer-events: auto;
}

.visible {
	visibility: visible;
}

.invisible {
	visibility: hidden;
}

.static {
	position: static;
}

.fixed {
	position: fixed;
}

.absolute {
	position: absolute;
}

.relative {
	position: relative;
}

.sticky {
	position: sticky;
}

.inset-0 {
	inset: 0px;
}

.inset-x-0 {
	left: 0px;
	right: 0px;
}

.inset-x-2 {
	left: 0.5rem;
	right: 0.5rem;
}

.inset-y-0 {
	top: 0px;
	bottom: 0px;
}

.-bottom-12 {
	bottom: -3rem;
}

.-left-12 {
	left: -3rem;
}

.-right-1 {
	right: -0.25rem;
}

.-right-1\.5 {
	right: -0.375rem;
}

.-right-12 {
	right: -3rem;
}

.-top-0\.5 {
	top: -0.125rem;
}

.-top-1 {
	top: -0.25rem;
}

.-top-12 {
	top: -3rem;
}

.bottom-0 {
	bottom: 0px;
}

.bottom-14 {
	bottom: 3.5rem;
}

.bottom-20 {
	bottom: 5rem;
}

.bottom-\[4\.5rem\] {
	bottom: 4.5rem;
}

.left-0 {
	left: 0px;
}

.left-1\/2 {
	left: 50%;
}

.left-2 {
	left: 0.5rem;
}

.left-3 {
	left: 0.75rem;
}

.left-\[50\%\] {
	left: 50%;
}

.right-0 {
	right: 0px;
}

.right-1 {
	right: 0.25rem;
}

.right-2 {
	right: 0.5rem;
}

.right-3 {
	right: 0.75rem;
}

.right-4 {
	right: 1rem;
}

.top-0 {
	top: 0px;
}

.top-1\.5 {
	top: 0.375rem;
}

.top-1\/2 {
	top: 50%;
}

.top-14 {
	top: 3.5rem;
}

.top-16 {
	top: 4rem;
}

.top-20 {
	top: 5rem;
}

.top-3 {
	top: 0.75rem;
}

.top-3\.5 {
	top: 0.875rem;
}

.top-4 {
	top: 1rem;
}

.top-\[1px\] {
	top: 1px;
}

.top-\[50\%\] {
	top: 50%;
}

.top-\[60\%\] {
	top: 60%;
}

.top-full {
	top: 100%;
}

.isolate {
	isolation: isolate;
}

.z-0 {
	z-index: 0;
}

.z-10 {
	z-index: 10;
}

.z-20 {
	z-index: 20;
}

.z-30 {
	z-index: 30;
}

.z-50 {
	z-index: 50;
}

.z-\[1100\] {
	z-index: 1100;
}

.z-\[1200\] {
	z-index: 1200;
}

.z-\[1250\] {
	z-index: 1250;
}

.z-\[1300\] {
	z-index: 1300;
}

.z-\[1400\] {
	z-index: 1400;
}

.z-\[1\] {
	z-index: 1;
}

.z-\[2000\] {
	z-index: 2000;
}

.z-\[9999\] {
	z-index: 9999;
}

.col-start-2 {
	grid-column-start: 2;
}

.row-span-2 {
	grid-row: span 2 / span 2;
}

.row-start-1 {
	grid-row-start: 1;
}

.-mx-1 {
	margin-left: -0.25rem;
	margin-right: -0.25rem;
}

.mx-1\.5 {
	margin-left: 0.375rem;
	margin-right: 0.375rem;
}

.mx-2 {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}

.mx-3\.5 {
	margin-left: 0.875rem;
	margin-right: 0.875rem;
}

.mx-4 {
	margin-left: 1rem;
	margin-right: 1rem;
}

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

.my-0\.5 {
	margin-top: 0.125rem;
	margin-bottom: 0.125rem;
}

.my-1 {
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
}

.-ml-2 {
	margin-left: -0.5rem;
}

.-ml-4 {
	margin-left: -1rem;
}

.-mt-1 {
	margin-top: -0.25rem;
}

.-mt-4 {
	margin-top: -1rem;
}

.mb-1 {
	margin-bottom: 0.25rem;
}

.mb-1\.5 {
	margin-bottom: 0.375rem;
}

.mb-2 {
	margin-bottom: 0.5rem;
}

.mb-3 {
	margin-bottom: 0.75rem;
}

.mb-4 {
	margin-bottom: 1rem;
}

.mb-5 {
	margin-bottom: 1.25rem;
}

.mb-6 {
	margin-bottom: 1.5rem;
}

.mb-8 {
	margin-bottom: 2rem;
}

.ml-1 {
	margin-left: 0.25rem;
}

.ml-1\.5 {
	margin-left: 0.375rem;
}

.ml-auto {
	margin-left: auto;
}

.mt-0\.5 {
	margin-top: 0.125rem;
}

.mt-1 {
	margin-top: 0.25rem;
}

.mt-1\.5 {
	margin-top: 0.375rem;
}

.mt-16 {
	margin-top: 4rem;
}

.mt-2 {
	margin-top: 0.5rem;
}

.mt-20 {
	margin-top: 5rem;
}

.mt-3 {
	margin-top: 0.75rem;
}

.mt-32 {
	margin-top: 8rem;
}

.mt-4 {
	margin-top: 1rem;
}

.mt-5 {
	margin-top: 1.25rem;
}

.mt-6 {
	margin-top: 1.5rem;
}

.mt-8 {
	margin-top: 2rem;
}

.mt-auto {
	margin-top: auto;
}

.line-clamp-1 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.block {
	display: block;
}

.inline-block {
	display: inline-block;
}

.inline {
	display: inline;
}

.flex {
	display: flex;
}

.inline-flex {
	display: inline-flex;
}

.table {
	display: table;
}

.table-caption {
	display: table-caption;
}

.table-cell {
	display: table-cell;
}

.table-row {
	display: table-row;
}

.grid {
	display: grid;
}

.hidden {
	display: none;
}

.aspect-\[4\/3\] {
	aspect-ratio: 4/3;
}

.aspect-square {
	aspect-ratio: 1 / 1;
}

.aspect-video {
	aspect-ratio: 16 / 9;
}

.size-2 {
	width: 0.5rem;
	height: 0.5rem;
}

.size-2\.5 {
	width: 0.625rem;
	height: 0.625rem;
}

.size-3 {
	width: 0.75rem;
	height: 0.75rem;
}

.size-3\.5 {
	width: 0.875rem;
	height: 0.875rem;
}

.size-4 {
	width: 1rem;
	height: 1rem;
}

.size-7 {
	width: 1.75rem;
	height: 1.75rem;
}

.size-8 {
	width: 2rem;
	height: 2rem;
}

.size-9 {
	width: 2.25rem;
	height: 2.25rem;
}

.size-auto {
	width: auto;
	height: auto;
}

.size-full {
	width: 100%;
	height: 100%;
}

.h-0\.5 {
	height: 0.125rem;
}

.h-1\.5 {
	height: 0.375rem;
}

.h-10 {
	height: 2.5rem;
}

.h-11 {
	height: 2.75rem;
}

.h-12 {
	height: 3rem;
}

.h-14 {
	height: 3.5rem;
}

.h-16 {
	height: 4rem;
}

.h-2 {
	height: 0.5rem;
}

.h-2\.5 {
	height: 0.625rem;
}

.h-20 {
	height: 5rem;
}

.h-24 {
	height: 6rem;
}

.h-28 {
	height: 7rem;
}

.h-3 {
	height: 0.75rem;
}

.h-3\.5 {
	height: 0.875rem;
}

.h-32 {
	height: 8rem;
}

.h-4 {
	height: 1rem;
}

.h-5 {
	height: 1.25rem;
}

.h-56 {
	height: 14rem;
}

.h-6 {
	height: 1.5rem;
}

.h-64 {
	height: 16rem;
}

.h-7 {
	height: 1.75rem;
}

.h-8 {
	height: 2rem;
}

.h-9 {
	height: 2.25rem;
}

.h-\[1\.15rem\] {
	height: 1.15rem;
}

.h-\[100dvh\] {
	height: 100dvh;
}

.h-\[90dvh\] {
	height: 90dvh;
}

.h-\[calc\(100\%-1px\)\] {
	height: calc(100% - 1px);
}

.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
	height: var(--radix-navigation-menu-viewport-height);
}

.h-\[var\(--radix-select-trigger-height\)\] {
	height: var(--radix-select-trigger-height);
}

.h-auto {
	height: auto;
}

.h-dvh {
	height: 100dvh;
}

.h-full {
	height: 100%;
}

.h-px {
	height: 1px;
}

.h-svh {
	height: 100svh;
}

.max-h-44 {
	max-height: 11rem;
}

.max-h-\[300px\] {
	max-height: 300px;
}

.max-h-\[80dvh\] {
	max-height: 80dvh;
}

.max-h-\[85dvh\] {
	max-height: 85dvh;
}

.max-h-\[88dvh\] {
	max-height: 88dvh;
}

.max-h-\[calc\(100dvh-3\.5rem-12rem\)\] {
	max-height: calc(100dvh - 3.5rem - 12rem);
}

.max-h-\[calc\(100dvh-3\.5rem-1rem\)\] {
	max-height: calc(100dvh - 3.5rem - 1rem);
}

.min-h-0 {
	min-height: 0px;
}

.min-h-16 {
	min-height: 4rem;
}

.min-h-20 {
	min-height: 5rem;
}

.min-h-4 {
	min-height: 1rem;
}

.min-h-\[100dvh\] {
	min-height: 100dvh;
}

.min-h-\[18px\] {
	min-height: 18px;
}

.min-h-\[2\.5rem\] {
	min-height: 2.5rem;
}

.min-h-\[40vh\] {
	min-height: 40vh;
}

.min-h-\[44px\] {
	min-height: 44px;
}

.min-h-\[48px\] {
	min-height: 48px;
}

.min-h-\[60px\] {
	min-height: 60px;
}

.min-h-\[60vh\] {
	min-height: 60vh;
}

.min-h-\[70vh\] {
	min-height: 70vh;
}

.min-h-dvh {
	min-height: 100dvh;
}

.min-h-svh {
	min-height: 100svh;
}

.w-0 {
	width: 0px;
}

.w-1 {
	width: 0.25rem;
}

.w-1\.5 {
	width: 0.375rem;
}

.w-10 {
	width: 2.5rem;
}

.w-11 {
	width: 2.75rem;
}

.w-12 {
	width: 3rem;
}

.w-14 {
	width: 3.5rem;
}

.w-16 {
	width: 4rem;
}

.w-2 {
	width: 0.5rem;
}

.w-2\.5 {
	width: 0.625rem;
}

.w-20 {
	width: 5rem;
}

.w-24 {
	width: 6rem;
}

.w-3 {
	width: 0.75rem;
}

.w-3\.5 {
	width: 0.875rem;
}

.w-3\/4 {
	width: 75%;
}

.w-32 {
	width: 8rem;
}

.w-4 {
	width: 1rem;
}

.w-40 {
	width: 10rem;
}

.w-5 {
	width: 1.25rem;
}

.w-56 {
	width: 14rem;
}

.w-6 {
	width: 1.5rem;
}

.w-64 {
	width: 16rem;
}

.w-7 {
	width: 1.75rem;
}

.w-72 {
	width: 18rem;
}

.w-8 {
	width: 2rem;
}

.w-9 {
	width: 2.25rem;
}

.w-\[100px\] {
	width: 100px;
}

.w-\[90vw\] {
	width: 90vw;
}

.w-auto {
	width: auto;
}

.w-fit {
	width: -moz-fit-content;
	width: fit-content;
}

.w-full {
	width: 100%;
}

.w-max {
	width: -moz-max-content;
	width: max-content;
}

.w-px {
	width: 1px;
}

.min-w-0 {
	min-width: 0px;
}

.min-w-10 {
	min-width: 2.5rem;
}

.min-w-5 {
	min-width: 1.25rem;
}

.min-w-8 {
	min-width: 2rem;
}

.min-w-9 {
	min-width: 2.25rem;
}

.min-w-\[12rem\] {
	min-width: 12rem;
}

.min-w-\[18px\] {
	min-width: 18px;
}

.min-w-\[8rem\] {
	min-width: 8rem;
}

.min-w-\[var\(--radix-select-trigger-width\)\] {
	min-width: var(--radix-select-trigger-width);
}

.max-w-2xl {
	max-width: 42rem;
}

.max-w-3xl {
	max-width: 48rem;
}

.max-w-6xl {
	max-width: 72rem;
}

.max-w-7xl {
	max-width: 80rem;
}

.max-w-\[140px\] {
	max-width: 140px;
}

.max-w-\[85\%\] {
	max-width: 85%;
}

.max-w-\[calc\(100\%-2rem\)\] {
	max-width: calc(100% - 2rem);
}

.max-w-max {
	max-width: -moz-max-content;
	max-width: max-content;
}

.max-w-md {
	max-width: 28rem;
}

.max-w-sm {
	max-width: 24rem;
}

.max-w-xs {
	max-width: 20rem;
}

.flex-1 {
	flex: 1 1 0%;
}

.flex-shrink {
	flex-shrink: 1;
}

.flex-shrink-0 {
	flex-shrink: 0;
}

.shrink-0 {
	flex-shrink: 0;
}

.flex-grow {
	flex-grow: 1;
}

.grow {
	flex-grow: 1;
}

.grow-0 {
	flex-grow: 0;
}

.basis-full {
	flex-basis: 100%;
}

.caption-bottom {
	caption-side: bottom;
}

.border-collapse {
	border-collapse: collapse;
}

.-translate-x-1\/2 {
	--tw-translate-x: -50%;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-px {
	--tw-translate-x: -1px;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1 {
	--tw-translate-y: -0.25rem;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
	--tw-translate-y: -50%;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-\[-50\%\] {
	--tw-translate-x: -50%;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-px {
	--tw-translate-x: 1px;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0\.5 {
	--tw-translate-y: 0.125rem;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-\[-50\%\] {
	--tw-translate-y: -50%;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-\[calc\(-50\%_-_2px\)\] {
	--tw-translate-y: calc(-50% - 2px);
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180 {
	--tw-rotate: 180deg;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-45 {
	--tw-rotate: 45deg;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-90 {
	--tw-rotate: 90deg;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes countdown-tick {

	0%, 100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.04);
	}
}

.animate-countdown-tick {
	animation: countdown-tick 1s ease-in-out infinite;
}

@keyframes install-button-pulse {

	0%, 100% {
		box-shadow: 0 0 0 1px oklch(0.70 0.18 55 / 0.4), 0 0 18px -4px oklch(0.70 0.18 55 / 0.45), 0 0 32px -10px oklch(0.62 0.18 250 / 0.35);
	}

	50% {
		box-shadow: 0 0 0 1px oklch(0.70 0.18 55 / 0.65), 0 0 28px -2px oklch(0.70 0.18 55 / 0.7), 0 0 44px -8px oklch(0.62 0.18 250 / 0.55);
	}
}

.animate-install-button-pulse {
	animation: install-button-pulse 2.6s ease-in-out infinite;
}

@keyframes landing-glow-pulse {

	0% {
		opacity: 0.6;
	}

	100% {
		opacity: 1;
	}
}

.animate-landing-glow-pulse {
	animation: landing-glow-pulse 2.4s ease-in-out infinite alternate;
}

@keyframes led-pulse {

	0%, 100% {
		box-shadow: 0 0 12px -2px oklch(0.70 0.18 55 / 0.45), 0 0 24px -6px oklch(0.70 0.18 55 / 0.3);
	}

	50% {
		box-shadow: 0 0 22px -1px oklch(0.70 0.18 55 / 0.7), 0 0 40px -8px oklch(0.70 0.18 55 / 0.5);
	}
}

.animate-led-pulse {
	animation: led-pulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes ping {

	75%, 100% {
		transform: scale(2);
		opacity: 0;
	}
}

.animate-ping {
	animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pulse {

	50% {
		opacity: .5;
	}
}

.animate-pulse {
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-marker {

	0%, 100% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		transform: scale(1.15);
		opacity: 0.85;
	}
}

.animate-pulse-marker {
	animation: pulse-marker 2s ease-in-out infinite;
}

@keyframes spin {

	to {
		transform: rotate(360deg);
	}
}

.animate-spin {
	animation: spin 1s linear infinite;
}

@keyframes squirrel-wave {

	0%, 100% {
		transform: rotate(0deg);
	}

	20% {
		transform: rotate(-12deg);
	}

	40% {
		transform: rotate(8deg);
	}

	60% {
		transform: rotate(-6deg);
	}

	80% {
		transform: rotate(4deg);
	}
}

.animate-squirrel-wave {
	animation: squirrel-wave 2.4s ease-in-out infinite;
}

.cursor-default {
	cursor: default;
}

.cursor-not-allowed {
	cursor: not-allowed;
}

.cursor-pointer {
	cursor: pointer;
}

.touch-none {
	touch-action: none;
}

.select-none {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
}

.resize-none {
	resize: none;
}

.resize {
	resize: both;
}

.scroll-my-1 {
	scroll-margin-top: 0.25rem;
	scroll-margin-bottom: 0.25rem;
}

.scroll-py-1 {
	scroll-padding-top: 0.25rem;
	scroll-padding-bottom: 0.25rem;
}

.list-none {
	list-style-type: none;
}

.auto-rows-min {
	grid-auto-rows: min-content;
}

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

.grid-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.grid-cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-\[0_1fr\] {
	grid-template-columns: 0 1fr;
}

.grid-rows-\[auto_auto\] {
	grid-template-rows: auto auto;
}

.flex-row {
	flex-direction: row;
}

.flex-col {
	flex-direction: column;
}

.flex-col-reverse {
	flex-direction: column-reverse;
}

.flex-wrap {
	flex-wrap: wrap;
}

.items-start {
	align-items: flex-start;
}

.items-end {
	align-items: flex-end;
}

.items-center {
	align-items: center;
}

.items-baseline {
	align-items: baseline;
}

.items-stretch {
	align-items: stretch;
}

.justify-start {
	justify-content: flex-start;
}

.justify-end {
	justify-content: flex-end;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.justify-around {
	justify-content: space-around;
}

.justify-items-start {
	justify-items: start;
}

.gap-0\.5 {
	gap: 0.125rem;
}

.gap-1 {
	gap: 0.25rem;
}

.gap-1\.5 {
	gap: 0.375rem;
}

.gap-2 {
	gap: 0.5rem;
}

.gap-2\.5 {
	gap: 0.625rem;
}

.gap-3 {
	gap: 0.75rem;
}

.gap-4 {
	gap: 1rem;
}

.gap-5 {
	gap: 1.25rem;
}

.gap-6 {
	gap: 1.5rem;
}

.gap-y-0\.5 {
	row-gap: 0.125rem;
}

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
	--tw-divide-y-reverse: 0;
	border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
	border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-\[oklch\(var\(--border\)\)\] > :not([hidden]) ~ :not([hidden]) {
	border-color: oklch(var(--border));
}

.divide-white\/5 > :not([hidden]) ~ :not([hidden]) {
	border-color: rgb(255 255 255 / 0.05);
}

.self-start {
	align-self: flex-start;
}

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

.overflow-auto {
	overflow: auto;
}

.overflow-hidden {
	overflow: hidden;
}

.overflow-visible {
	overflow: visible;
}

.overflow-x-auto {
	overflow-x: auto;
}

.overflow-y-auto {
	overflow-y: auto;
}

.overflow-x-hidden {
	overflow-x: hidden;
}

.overscroll-contain {
	overscroll-behavior: contain;
}

.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.whitespace-nowrap {
	white-space: nowrap;
}

.whitespace-pre-line {
	white-space: pre-line;
}

.whitespace-pre-wrap {
	white-space: pre-wrap;
}

.text-wrap {
	text-wrap: wrap;
}

.text-balance {
	text-wrap: balance;
}

.break-words {
	overflow-wrap: break-word;
}

.break-all {
	word-break: break-all;
}

.rounded {
	border-radius: 0.25rem;
}

.rounded-2xl {
	border-radius: 1rem;
}

.rounded-3xl {
	border-radius: 1.5rem;
}

.rounded-\[2px\] {
	border-radius: 2px;
}

.rounded-\[4px\] {
	border-radius: 4px;
}

.rounded-\[inherit\] {
	border-radius: inherit;
}

.rounded-full {
	border-radius: 9999px;
}

.rounded-lg {
	border-radius: var(--radius);
}

.rounded-md {
	border-radius: calc(var(--radius) - 2px);
}

.rounded-none {
	border-radius: 0px;
}

.rounded-sm {
	border-radius: calc(var(--radius) - 4px);
}

.rounded-xl {
	border-radius: 0.75rem;
}

.rounded-l-md {
	border-top-left-radius: calc(var(--radius) - 2px);
	border-bottom-left-radius: calc(var(--radius) - 2px);
}

.rounded-r-md {
	border-top-right-radius: calc(var(--radius) - 2px);
	border-bottom-right-radius: calc(var(--radius) - 2px);
}

.rounded-tl-sm {
	border-top-left-radius: calc(var(--radius) - 4px);
}

.border {
	border-width: 1px;
}

.border-0 {
	border-width: 0px;
}

.border-2 {
	border-width: 2px;
}

.border-4 {
	border-width: 4px;
}

.border-\[1\.5px\] {
	border-width: 1.5px;
}

.border-\[3px\] {
	border-width: 3px;
}

.border-y {
	border-top-width: 1px;
	border-bottom-width: 1px;
}

.border-b {
	border-bottom-width: 1px;
}

.border-l {
	border-left-width: 1px;
}

.border-r {
	border-right-width: 1px;
}

.border-t {
	border-top-width: 1px;
}

.border-dashed {
	border-style: dashed;
}

.border-\[oklch\(var\(--border\)\)\] {
	border-color: oklch(var(--border));
}

.border-\[oklch\(var\(--cta\)\)\] {
	border-color: oklch(var(--cta));
}

.border-\[oklch\(var\(--cta\)\/0\.4\)\] {
	border-color: oklch(var(--cta)/0.4);
}

.border-\[oklch\(var\(--destructive\)\/0\.4\)\] {
	border-color: oklch(var(--destructive)/0.4);
}

.border-\[oklch\(var\(--gold-accent\)\/0\.3\)\] {
	border-color: oklch(var(--gold-accent)/0.3);
}

.border-\[oklch\(var\(--success\)\/0\.4\)\] {
	border-color: oklch(var(--success)/0.4);
}

.border-\[var\(--gold-accent\)\] {
	border-color: var(--gold-accent);
}

.border-amber-500\/20 {
	border-color: rgb(245 158 11 / 0.2);
}

.border-amber-500\/30 {
	border-color: rgb(245 158 11 / 0.3);
}

.border-amber-500\/40 {
	border-color: rgb(245 158 11 / 0.4);
}

.border-border {
	border-color: oklch(var(--border));
}

.border-current {
	border-color: currentColor;
}

.border-destructive {
	--tw-border-opacity: 1;
	border-color: oklch(var(--destructive) / var(--tw-border-opacity, 1));
}

.border-destructive\/30 {
	border-color: oklch(var(--destructive) / 0.3);
}

.border-destructive\/40 {
	border-color: oklch(var(--destructive) / 0.4);
}

.border-destructive\/50 {
	border-color: oklch(var(--destructive) / 0.5);
}

.border-emerald-500\/20 {
	border-color: rgb(16 185 129 / 0.2);
}

.border-emerald-500\/40 {
	border-color: rgb(16 185 129 / 0.4);
}

.border-input {
	border-color: oklch(var(--input));
}

.border-primary {
	--tw-border-opacity: 1;
	border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}

.border-primary\/20 {
	border-color: oklch(var(--primary) / 0.2);
}

.border-primary\/30 {
	border-color: oklch(var(--primary) / 0.3);
}

.border-primary\/40 {
	border-color: oklch(var(--primary) / 0.4);
}

.border-rose-500\/20 {
	border-color: rgb(244 63 94 / 0.2);
}

.border-rose-500\/30 {
	border-color: rgb(244 63 94 / 0.3);
}

.border-rose-500\/40 {
	border-color: rgb(244 63 94 / 0.4);
}

.border-sidebar-border {
	border-color: oklch(var(--sidebar-border));
}

.border-transparent {
	border-color: transparent;
}

.border-white\/10 {
	border-color: rgb(255 255 255 / 0.1);
}

.border-zinc-500\/40 {
	border-color: rgb(113 113 122 / 0.4);
}

.border-l-transparent {
	border-left-color: transparent;
}

.border-t-\[oklch\(var\(--gold-accent\)\)\] {
	border-top-color: oklch(var(--gold-accent));
}

.border-t-foreground {
	border-top-color: oklch(var(--foreground));
}

.border-t-primary {
	--tw-border-opacity: 1;
	border-top-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}

.border-t-primary-foreground {
	border-top-color: oklch(var(--primary-foreground));
}

.border-t-transparent {
	border-top-color: transparent;
}

.bg-\[oklch\(var\(--background\)\)\] {
	background-color: oklch(var(--background));
}

.bg-\[oklch\(var\(--card\)\)\] {
	background-color: oklch(var(--card));
}

.bg-\[oklch\(var\(--card\)\/0\.5\)\] {
	background-color: oklch(var(--card)/0.5);
}

.bg-\[oklch\(var\(--cta\)\/0\.15\)\] {
	background-color: oklch(var(--cta)/0.15);
}

.bg-\[oklch\(var\(--destructive\)\/0\.1\)\] {
	background-color: oklch(var(--destructive)/0.1);
}

.bg-\[oklch\(var\(--destructive\)\/0\.15\)\] {
	background-color: oklch(var(--destructive)/0.15);
}

.bg-\[oklch\(var\(--gold-accent\)\/0\.1\)\] {
	background-color: oklch(var(--gold-accent)/0.1);
}

.bg-\[oklch\(var\(--muted\)\/0\.4\)\] {
	background-color: oklch(var(--muted)/0.4);
}

.bg-\[oklch\(var\(--success\)\/0\.15\)\] {
	background-color: oklch(var(--success)/0.15);
}

.bg-\[var\(--cta\)\] {
	background-color: var(--cta);
}

.bg-accent {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.bg-amber-500\/15 {
	background-color: rgb(245 158 11 / 0.15);
}

.bg-amber-500\/20 {
	background-color: rgb(245 158 11 / 0.2);
}

.bg-amber-500\/5 {
	background-color: rgb(245 158 11 / 0.05);
}

.bg-background {
	background-color: oklch(var(--background));
}

.bg-black {
	--tw-bg-opacity: 1;
	background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-black\/50 {
	background-color: rgb(0 0 0 / 0.5);
}

.bg-black\/70 {
	background-color: rgb(0 0 0 / 0.7);
}

.bg-border {
	background-color: oklch(var(--border));
}

.bg-card {
	background-color: oklch(var(--card));
}

.bg-current {
	background-color: currentColor;
}

.bg-destructive {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--destructive) / var(--tw-bg-opacity, 1));
}

.bg-destructive\/10 {
	background-color: oklch(var(--destructive) / 0.1);
}

.bg-destructive\/15 {
	background-color: oklch(var(--destructive) / 0.15);
}

.bg-destructive\/5 {
	background-color: oklch(var(--destructive) / 0.05);
}

.bg-emerald-500 {
	--tw-bg-opacity: 1;
	background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}

.bg-emerald-500\/10 {
	background-color: rgb(16 185 129 / 0.1);
}

.bg-emerald-500\/15 {
	background-color: rgb(16 185 129 / 0.15);
}

.bg-emerald-500\/20 {
	background-color: rgb(16 185 129 / 0.2);
}

.bg-foreground {
	background-color: oklch(var(--foreground));
}

.bg-green-500 {
	--tw-bg-opacity: 1;
	background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-muted {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}

.bg-muted-foreground {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--muted-foreground) / var(--tw-bg-opacity, 1));
}

.bg-muted-foreground\/60 {
	background-color: oklch(var(--muted-foreground) / 0.6);
}

.bg-muted\/40 {
	background-color: oklch(var(--muted) / 0.4);
}

.bg-muted\/50 {
	background-color: oklch(var(--muted) / 0.5);
}

.bg-popover {
	background-color: oklch(var(--popover));
}

.bg-primary {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.bg-primary-foreground {
	background-color: oklch(var(--primary-foreground));
}

.bg-primary\/10 {
	background-color: oklch(var(--primary) / 0.1);
}

.bg-primary\/15 {
	background-color: oklch(var(--primary) / 0.15);
}

.bg-primary\/20 {
	background-color: oklch(var(--primary) / 0.2);
}

.bg-primary\/5 {
	background-color: oklch(var(--primary) / 0.05);
}

.bg-red-500 {
	--tw-bg-opacity: 1;
	background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.bg-rose-500\/10 {
	background-color: rgb(244 63 94 / 0.1);
}

.bg-rose-500\/15 {
	background-color: rgb(244 63 94 / 0.15);
}

.bg-rose-500\/20 {
	background-color: rgb(244 63 94 / 0.2);
}

.bg-rose-500\/90 {
	background-color: rgb(244 63 94 / 0.9);
}

.bg-secondary {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}

.bg-secondary\/40 {
	background-color: oklch(var(--secondary) / 0.4);
}

.bg-sidebar {
	background-color: oklch(var(--sidebar));
}

.bg-sidebar-border {
	background-color: oklch(var(--sidebar-border));
}

.bg-transparent {
	background-color: transparent;
}

.bg-white {
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/30 {
	background-color: rgb(255 255 255 / 0.3);
}

.bg-white\/5 {
	background-color: rgb(255 255 255 / 0.05);
}

.bg-zinc-500\/15 {
	background-color: rgb(113 113 122 / 0.15);
}

.bg-zinc-700\/40 {
	background-color: rgb(63 63 70 / 0.4);
}

.bg-zinc-900 {
	--tw-bg-opacity: 1;
	background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
}

.bg-zinc-900\/60 {
	background-color: rgb(24 24 27 / 0.6);
}

.fill-current {
	fill: currentColor;
}

.fill-primary {
	fill: oklch(var(--primary) / 1);
}

.object-contain {
	-o-object-fit: contain;
	   object-fit: contain;
}

.object-cover {
	-o-object-fit: cover;
	   object-fit: cover;
}

.p-0 {
	padding: 0px;
}

.p-0\.5 {
	padding: 0.125rem;
}

.p-1 {
	padding: 0.25rem;
}

.p-10 {
	padding: 2.5rem;
}

.p-12 {
	padding: 3rem;
}

.p-2 {
	padding: 0.5rem;
}

.p-2\.5 {
	padding: 0.625rem;
}

.p-3 {
	padding: 0.75rem;
}

.p-4 {
	padding: 1rem;
}

.p-5 {
	padding: 1.25rem;
}

.p-6 {
	padding: 1.5rem;
}

.p-8 {
	padding: 2rem;
}

.p-\[3px\] {
	padding: 3px;
}

.p-px {
	padding: 1px;
}

.\!px-2 {
	padding-left: 0.5rem !important;
	padding-right: 0.5rem !important;
}

.\!py-0\.5 {
	padding-top: 0.125rem !important;
	padding-bottom: 0.125rem !important;
}

.px-0 {
	padding-left: 0px;
	padding-right: 0px;
}

.px-1 {
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

.px-1\.5 {
	padding-left: 0.375rem;
	padding-right: 0.375rem;
}

.px-2 {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.px-2\.5 {
	padding-left: 0.625rem;
	padding-right: 0.625rem;
}

.px-3 {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

.px-3\.5 {
	padding-left: 0.875rem;
	padding-right: 0.875rem;
}

.px-4 {
	padding-left: 1rem;
	padding-right: 1rem;
}

.px-5 {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.px-6 {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.px-7 {
	padding-left: 1.75rem;
	padding-right: 1.75rem;
}

.py-0 {
	padding-top: 0px;
	padding-bottom: 0px;
}

.py-0\.5 {
	padding-top: 0.125rem;
	padding-bottom: 0.125rem;
}

.py-1 {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.py-1\.5 {
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
}

.py-10 {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

.py-12 {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.py-16 {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.py-2 {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.py-2\.5 {
	padding-top: 0.625rem;
	padding-bottom: 0.625rem;
}

.py-3 {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

.py-3\.5 {
	padding-top: 0.875rem;
	padding-bottom: 0.875rem;
}

.py-4 {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.py-5 {
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

.py-6 {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

.py-8 {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.py-9 {
	padding-top: 2.25rem;
	padding-bottom: 2.25rem;
}

.pb-0 {
	padding-bottom: 0px;
}

.pb-12 {
	padding-bottom: 3rem;
}

.pb-14 {
	padding-bottom: 3.5rem;
}

.pb-16 {
	padding-bottom: 4rem;
}

.pb-24 {
	padding-bottom: 6rem;
}

.pb-3 {
	padding-bottom: 0.75rem;
}

.pb-4 {
	padding-bottom: 1rem;
}

.pb-6 {
	padding-bottom: 1.5rem;
}

.pl-10 {
	padding-left: 2.5rem;
}

.pl-11 {
	padding-left: 2.75rem;
}

.pl-2 {
	padding-left: 0.5rem;
}

.pl-4 {
	padding-left: 1rem;
}

.pl-8 {
	padding-left: 2rem;
}

.pr-1 {
	padding-right: 0.25rem;
}

.pr-10 {
	padding-right: 2.5rem;
}

.pr-12 {
	padding-right: 3rem;
}

.pr-2 {
	padding-right: 0.5rem;
}

.pr-2\.5 {
	padding-right: 0.625rem;
}

.pr-3 {
	padding-right: 0.75rem;
}

.pr-4 {
	padding-right: 1rem;
}

.pr-8 {
	padding-right: 2rem;
}

.pt-0 {
	padding-top: 0px;
}

.pt-1 {
	padding-top: 0.25rem;
}

.pt-14 {
	padding-top: 3.5rem;
}

.pt-16 {
	padding-top: 4rem;
}

.pt-2 {
	padding-top: 0.5rem;
}

.pt-24 {
	padding-top: 6rem;
}

.pt-3 {
	padding-top: 0.75rem;
}

.pt-4 {
	padding-top: 1rem;
}

.pt-5 {
	padding-top: 1.25rem;
}

.pt-6 {
	padding-top: 1.5rem;
}

.pt-8 {
	padding-top: 2rem;
}

.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.align-middle {
	vertical-align: middle;
}

.font-body {
	font-family: var(--font-body), sans-serif;
}

.font-display {
	font-family: var(--font-display), serif;
}

.font-mono {
	font-family: var(--font-mono), monospace;
}

.\!text-\[10px\] {
	font-size: 10px !important;
}

.text-2xl {
	font-size: 1.5rem;
	line-height: 2rem;
}

.text-3xl {
	font-size: 1.875rem;
	line-height: 2.25rem;
}

.text-4xl {
	font-size: 2.25rem;
	line-height: 2.5rem;
}

.text-5xl {
	font-size: 3rem;
	line-height: 1;
}

.text-\[0\.7em\] {
	font-size: 0.7em;
}

.text-\[0\.8rem\] {
	font-size: 0.8rem;
}

.text-\[10px\] {
	font-size: 10px;
}

.text-\[11px\] {
	font-size: 11px;
}

.text-base {
	font-size: 1rem;
	line-height: 1.5rem;
}

.text-lg {
	font-size: 1.125rem;
	line-height: 1.75rem;
}

.text-sm {
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.text-xl {
	font-size: 1.25rem;
	line-height: 1.75rem;
}

.text-xs {
	font-size: 0.75rem;
	line-height: 1rem;
}

.font-bold {
	font-weight: 700;
}

.font-extrabold {
	font-weight: 800;
}

.font-medium {
	font-weight: 500;
}

.font-normal {
	font-weight: 400;
}

.font-semibold {
	font-weight: 600;
}

.uppercase {
	text-transform: uppercase;
}

.capitalize {
	text-transform: capitalize;
}

.italic {
	font-style: italic;
}

.tabular-nums {
	--tw-numeric-spacing: tabular-nums;
	font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-3 {
	line-height: .75rem;
}

.leading-none {
	line-height: 1;
}

.leading-relaxed {
	line-height: 1.625;
}

.leading-snug {
	line-height: 1.375;
}

.leading-tight {
	line-height: 1.25;
}

.tracking-\[0\.5em\] {
	letter-spacing: 0.5em;
}

.tracking-tight {
	letter-spacing: -0.025em;
}

.tracking-wide {
	letter-spacing: 0.025em;
}

.tracking-wider {
	letter-spacing: 0.05em;
}

.tracking-widest {
	letter-spacing: 0.1em;
}

.text-\[oklch\(var\(--cta\)\)\] {
	color: oklch(var(--cta));
}

.text-\[oklch\(var\(--destructive\)\)\] {
	color: oklch(var(--destructive));
}

.text-\[oklch\(var\(--foreground\)\)\] {
	color: oklch(var(--foreground));
}

.text-\[oklch\(var\(--gold-accent\)\)\] {
	color: oklch(var(--gold-accent));
}

.text-\[oklch\(var\(--muted-foreground\)\)\] {
	color: oklch(var(--muted-foreground));
}

.text-\[oklch\(var\(--success\)\)\] {
	color: oklch(var(--success));
}

.text-\[var\(--gold-accent\)\] {
	color: var(--gold-accent);
}

.text-accent-foreground {
	color: oklch(var(--accent-foreground));
}

.text-amber-300 {
	--tw-text-opacity: 1;
	color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}

.text-amber-400 {
	--tw-text-opacity: 1;
	color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.text-amber-500 {
	--tw-text-opacity: 1;
	color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}

.text-amber-600 {
	--tw-text-opacity: 1;
	color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}

.text-amber-700 {
	--tw-text-opacity: 1;
	color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}

.text-background {
	color: oklch(var(--background));
}

.text-black {
	--tw-text-opacity: 1;
	color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.text-card-foreground {
	color: oklch(var(--card-foreground));
}

.text-current {
	color: currentColor;
}

.text-destructive {
	--tw-text-opacity: 1;
	color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.text-destructive-foreground {
	color: oklch(var(--destructive-foreground));
}

.text-emerald-300 {
	--tw-text-opacity: 1;
	color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}

.text-emerald-600 {
	--tw-text-opacity: 1;
	color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}

.text-emerald-700 {
	--tw-text-opacity: 1;
	color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}

.text-foreground {
	color: oklch(var(--foreground));
}

.text-green-400 {
	--tw-text-opacity: 1;
	color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.text-muted-foreground {
	--tw-text-opacity: 1;
	color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.text-muted-foreground\/60 {
	color: oklch(var(--muted-foreground) / 0.6);
}

.text-muted-foreground\/70 {
	color: oklch(var(--muted-foreground) / 0.7);
}

.text-muted-foreground\/80 {
	color: oklch(var(--muted-foreground) / 0.8);
}

.text-popover-foreground {
	color: oklch(var(--popover-foreground));
}

.text-primary {
	--tw-text-opacity: 1;
	color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}

.text-primary-foreground {
	color: oklch(var(--primary-foreground));
}

.text-red-400 {
	--tw-text-opacity: 1;
	color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.text-rose-300 {
	--tw-text-opacity: 1;
	color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}

.text-rose-400 {
	--tw-text-opacity: 1;
	color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}

.text-rose-600 {
	--tw-text-opacity: 1;
	color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}

.text-rose-700 {
	--tw-text-opacity: 1;
	color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}

.text-secondary-foreground {
	color: oklch(var(--secondary-foreground));
}

.text-sidebar-foreground {
	color: oklch(var(--sidebar-foreground));
}

.text-white {
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/40 {
	color: rgb(255 255 255 / 0.4);
}

.text-white\/50 {
	color: rgb(255 255 255 / 0.5);
}

.text-white\/60 {
	color: rgb(255 255 255 / 0.6);
}

.text-white\/70 {
	color: rgb(255 255 255 / 0.7);
}

.text-white\/90 {
	color: rgb(255 255 255 / 0.9);
}

.text-zinc-100 {
	--tw-text-opacity: 1;
	color: rgb(244 244 245 / var(--tw-text-opacity, 1));
}

.text-zinc-200 {
	--tw-text-opacity: 1;
	color: rgb(228 228 231 / var(--tw-text-opacity, 1));
}

.text-zinc-300 {
	--tw-text-opacity: 1;
	color: rgb(212 212 216 / var(--tw-text-opacity, 1));
}

.text-zinc-400 {
	--tw-text-opacity: 1;
	color: rgb(161 161 170 / var(--tw-text-opacity, 1));
}

.text-zinc-500 {
	--tw-text-opacity: 1;
	color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}

.text-zinc-600 {
	--tw-text-opacity: 1;
	color: rgb(82 82 91 / var(--tw-text-opacity, 1));
}

.underline-offset-4 {
	text-underline-offset: 4px;
}

.antialiased {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.opacity-0 {
	opacity: 0;
}

.opacity-50 {
	opacity: 0.5;
}

.opacity-70 {
	opacity: 0.7;
}

.opacity-80 {
	opacity: 0.8;
}

.opacity-90 {
	opacity: 0.9;
}

.shadow {
	--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
	--tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
	--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_12px_-2px_oklch\(var\(--cta\)\/0\.5\)\] {
	--tw-shadow: 0 0 12px -2px oklch(var(--cta)/0.5);
	--tw-shadow-colored: 0 0 12px -2px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_12px_-2px_oklch\(var\(--destructive\)\/0\.5\)\] {
	--tw-shadow: 0 0 12px -2px oklch(var(--destructive)/0.5);
	--tw-shadow-colored: 0 0 12px -2px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_12px_-2px_oklch\(var\(--success\)\/0\.5\)\] {
	--tw-shadow: 0 0 12px -2px oklch(var(--success)/0.5);
	--tw-shadow-colored: 0 0 12px -2px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_12px_-4px_oklch\(var\(--muted-foreground\)\/0\.4\)\] {
	--tw-shadow: 0 0 12px -4px oklch(var(--muted-foreground)/0.4);
	--tw-shadow-colored: 0 0 12px -4px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_18px_-2px_var\(--cta\)\] {
	--tw-shadow: 0 0 18px -2px var(--cta);
	--tw-shadow-colored: 0 0 18px -2px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_18px_-4px_var\(--cta\)\] {
	--tw-shadow: 0 0 18px -4px var(--cta);
	--tw-shadow-colored: 0 0 18px -4px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_6px_currentColor\] {
	--tw-shadow: 0 0 6px currentColor;
	--tw-shadow-colored: 0 0 6px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_8px_2px_rgba\(239\2c 68\2c 68\2c 0\.6\)\] {
	--tw-shadow: 0 0 8px 2px rgba(239,68,68,0.6);
	--tw-shadow-colored: 0 0 8px 2px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_8px_2px_rgba\(34\2c 197\2c 94\2c 0\.6\)\] {
	--tw-shadow: 0 0 8px 2px rgba(34,197,94,0.6);
	--tw-shadow-colored: 0 0 8px 2px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_8px_24px_rgba\(0\2c 0\2c 0\2c 0\.45\)\] {
	--tw-shadow: 0 8px 24px rgba(0,0,0,0.45);
	--tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-led-glow {
	--tw-shadow: 0 0 12px -2px oklch(0.70 0.18 55 / 0.45), 0 0 24px -6px oklch(0.70 0.18 55 / 0.3), inset 0 0 8px -4px oklch(0.70 0.18 55 / 0.2);
	--tw-shadow-colored: 0 0 12px -2px var(--tw-shadow-color), 0 0 24px -6px var(--tw-shadow-color), inset 0 0 8px -4px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-led-glow-strong {
	--tw-shadow: 0 0 22px -1px oklch(0.70 0.18 55 / 0.7), 0 0 40px -8px oklch(0.70 0.18 55 / 0.5), inset 0 0 12px -2px oklch(0.70 0.18 55 / 0.35);
	--tw-shadow-colored: 0 0 22px -1px var(--tw-shadow-color), 0 0 40px -8px var(--tw-shadow-color), inset 0 0 12px -2px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
	--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
	--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-none {
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
	--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
	--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none {
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.outline {
	outline-style: solid;
}

.ring {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-0 {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-1 {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-2 {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-card {
	--tw-ring-color: oklch(var(--card));
}

.ring-primary\/40 {
	--tw-ring-color: oklch(var(--primary) / 0.4);
}

.ring-ring {
	--tw-ring-opacity: 1;
	--tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}

.ring-ring\/50 {
	--tw-ring-color: oklch(var(--ring) / 0.5);
}

.ring-sidebar-ring {
	--tw-ring-color: oklch(var(--sidebar-ring));
}

.ring-offset-background {
	--tw-ring-offset-color: oklch(var(--background));
}

.blur {
	--tw-blur: blur(8px);
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow {
	--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-\[0_0_6px_currentColor\] {
	--tw-drop-shadow: drop-shadow(0 0 6px currentColor);
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-\[0_0_6px_oklch\(var\(--gold-accent\)\/0\.6\)\] {
	--tw-drop-shadow: drop-shadow(0 0 6px oklch(var(--gold-accent)/0.6));
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-\[0_2px_8px_rgba\(0\2c 0\2c 0\2c 0\.45\)\] {
	--tw-drop-shadow: drop-shadow(0 2px 8px rgba(0,0,0,0.45));
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-lg {
	--tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.grayscale {
	--tw-grayscale: grayscale(100%);
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert {
	--tw-invert: invert(100%);
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur {
	--tw-backdrop-blur: blur(8px);
	backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-md {
	--tw-backdrop-blur: blur(12px);
	backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm {
	--tw-backdrop-blur: blur(4px);
	backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-filter {
	backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.transition-\[color\2c box-shadow\] {
	transition-property: color,box-shadow;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.transition-\[left\2c right\2c width\] {
	transition-property: left,right,width;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.transition-\[margin\2c opacity\] {
	transition-property: margin,opacity;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.transition-\[width\2c height\2c padding\] {
	transition-property: width,height,padding;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.transition-\[width\] {
	transition-property: width;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.transition-all {
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.transition-colors {
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.transition-none {
	transition-property: none;
}

.transition-opacity {
	transition-property: opacity;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.transition-shadow {
	transition-property: box-shadow;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.transition-transform {
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.duration-1000 {
	transition-duration: 1000ms;
}

.duration-200 {
	transition-duration: 200ms;
}

.duration-300 {
	transition-duration: 300ms;
}

.ease-in-out {
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-linear {
	transition-timing-function: linear;
}

.ease-out {
	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.\@container\/card-header {
	container-type: inline-size;
	container-name: card-header;
}

@keyframes enter {

	from {
		opacity: var(--tw-enter-opacity, 1);
		transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
	}
}

@keyframes exit {

	to {
		opacity: var(--tw-exit-opacity, 1);
		transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
	}
}

.animate-in {
	animation-name: enter;
	animation-duration: 150ms;
	--tw-enter-opacity: initial;
	--tw-enter-scale: initial;
	--tw-enter-rotate: initial;
	--tw-enter-translate-x: initial;
	--tw-enter-translate-y: initial;
}

.fade-in {
	--tw-enter-opacity: 0;
}

.fade-in-0 {
	--tw-enter-opacity: 0;
}

.fade-out {
	--tw-exit-opacity: 0;
}

.zoom-in-95 {
	--tw-enter-scale: .95;
}

.slide-in-from-bottom-2 {
	--tw-enter-translate-y: 0.5rem;
}

.duration-1000 {
	animation-duration: 1000ms;
}

.duration-200 {
	animation-duration: 200ms;
}

.duration-300 {
	animation-duration: 300ms;
}

.ease-in-out {
	animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-linear {
	animation-timing-function: linear;
}

.ease-out {
	animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.running {
	animation-play-state: running;
}

.transition-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

.bg-gradient-primary {
    background-image: var(--gradient-primary);
  }

.bg-gradient-subtle {
    background-image: var(--gradient-subtle);
  }

.bg-gradient-navy {
    background-image: var(--gradient-navy);
  }

.text-gradient-brand {
    background-image: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

/* Backwards-compatibiliteit alias — oude naam hergebruikt de nieuwe
     blauw-naar-groen brand gradient. */

.text-gradient-amber {
    background-image: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

/* iOS App Library glassmorphism utilities — frosted glass containers.
     Theme-aware via CSS vars; degrade gracefully when backdrop-filter is
     unsupported (Safari < 9, older Firefox) by keeping the translucent bg.
     .glass uses --glass-bg (alpha 0.40 light / 0.06 dark) so the underlying
     map shines unmistakably through the frosted surface. */

.glass {
    background-color: oklch(var(--glass-bg));
    backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    border: 1px solid oklch(var(--glass-border));
    box-shadow: var(--glass-shadow);
  }

.glass-strong {
    background-color: oklch(var(--glass-bg-strong));
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.6);
    border: 1px solid oklch(var(--glass-border));
    box-shadow: var(--glass-shadow);
  }

/* Active nav item: translucent paars tint with frosted blur instead of a
     solid accent fill. Pairs with text-primary for the icon/label. */

.glass-active {
    background-color: oklch(var(--glass-bg-active));
    backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
    border: 1px solid oklch(var(--glass-border-active));
  }

/* Dashed glass — for empty / searching states that still need to float. */

.glass-dashed {
    background-color: oklch(var(--glass-bg));
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border: 1px dashed oklch(var(--glass-border));
    box-shadow: var(--glass-shadow);
  }

/* Glass button — translucent interactive surface with hover lift.
     Specificity bumped to button.glass-button (0,2,1) so it overrides
     shadcn Button base styles (which target button.bg-* etc.). The bare
     .glass-button selector is kept as an alias for non-<button> hosts. */

.glass-button,
  button.glass-button {
    background-color: oklch(var(--glass-bg));
    backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
    border: 1px solid oklch(var(--glass-border));
    box-shadow: var(--glass-shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

.glass-button:hover:not(:disabled),
  button.glass-button:hover:not(:disabled) {
    background-color: oklch(var(--glass-bg-strong));
    border-color: oklch(var(--glass-border-active));
  }

.glass-button:focus-visible,
  button.glass-button:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }

/* Glass button primary — translucent paars-tinted glass for the main CTA.
     Hierarchy via paars tint + paars border + paars glow, NOT solid fill.
     Keeps the frosted-glass identity while signaling "this is the main action".
     Specificity bumped to button.glass-button-primary to override shadcn.
     Defensive doubled-class (.glass-button-primary.glass-button-primary) at
     (0,2,0)+(0,1,0)=(0,3,0) guarantees no later stylesheet can override the
     translucent glass surface with a solid fill. */

.glass-button-primary,
  button.glass-button-primary,
  .glass-button-primary.glass-button-primary {
    background-color: oklch(var(--glass-bg-primary));
    backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
    border: 1px solid oklch(var(--glass-border-primary));
    box-shadow: var(--glass-shadow-primary);
    color: oklch(var(--primary));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

.glass-button-primary:hover:not(:disabled),
  button.glass-button-primary:hover:not(:disabled),
  .glass-button-primary.glass-button-primary:hover:not(:disabled) {
    background-color: oklch(var(--glass-bg-primary-strong));
    border-color: oklch(var(--primary));
    box-shadow: 0 12px 28px -8px oklch(0.7 0.18 55 / 0.5), 0 4px 12px -4px
      oklch(0 0 0 / 0.25);
  }

.glass-button-primary:focus-visible,
  button.glass-button-primary:focus-visible,
  .glass-button-primary.glass-button-primary:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }

/* Glass button success — translucent green-tinted glass for the driver
     availability toggle when online (available). Mirrors glass-button-primary
     but uses the green success hue so the current state reads as "online"
     at a glance, NOT as an action. Hierarchy via green tint + green border +
     green glow, NOT solid fill. Specificity bumped to override shadcn. */

.glass-button-success,
  button.glass-button-success,
  .glass-button-success.glass-button-success {
    background-color: oklch(var(--glass-bg-success));
    backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
    border: 1px solid oklch(var(--glass-border-success));
    box-shadow: var(--glass-shadow-success);
    color: oklch(var(--success));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

.glass-button-success:hover:not(:disabled),
  button.glass-button-success:hover:not(:disabled),
  .glass-button-success.glass-button-success:hover:not(:disabled) {
    background-color: oklch(var(--glass-bg-success-strong));
    border-color: oklch(var(--success));
    box-shadow: 0 12px 28px -8px oklch(0.85 0.13 85 / 0.5), 0 4px 12px -4px
      oklch(0 0 0 / 0.25);
  }

.glass-button-success:focus-visible,
  button.glass-button-success:focus-visible,
  .glass-button-success.glass-button-success:focus-visible {
    outline: 2px solid oklch(var(--success));
    outline-offset: 2px;
  }

/* Glass button destructive — translucent red-tinted glass for cancel/decline.
     Specificity bumped to button.glass-button-destructive to override shadcn. */

.glass-button-destructive,
  button.glass-button-destructive {
    background-color: oklch(0.45 0.1 55 / 0.12);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
    border: 1px solid oklch(0.45 0.1 55 / 0.4);
    color: oklch(var(--destructive));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

.glass-button-destructive:hover:not(:disabled),
  button.glass-button-destructive:hover:not(:disabled) {
    background-color: oklch(0.45 0.1 55 / 0.22);
    border-color: oklch(var(--destructive));
  }

.glass-button-destructive:focus-visible,
  button.glass-button-destructive:focus-visible {
    outline: 2px solid oklch(var(--destructive));
    outline-offset: 2px;
  }

/* CRYPTO-KNOP REPARATIE (requirement): de crypt2euro-betaalknop is
     permanent gedeactiveerd ('Binnenkort geactiveerd'). De knop moet
     ZICHTBAAR maar NIET-ACTIEF zijn — duidelijk uitgegrijsd, geen hover-
     effect, geen klikactie, cursor not-allowed. Deze utility overschrijft
     de glass-button-primary/glass hover- en focus-stijlen voor de crypto-
     knop zodat deze niet als een actieve CTA leest. Alleen van toepassing
     op knoppen met .crypto-disabled-button — raakt de werkende ideal/card-
     knoppen niet. */

.crypto-disabled-button,
  button.crypto-disabled-button {
    background-color: oklch(0.3 0.01 260 / 0.4);
    border: 1px dashed oklch(0.5 0.01 260 / 0.5);
    color: oklch(0.6 0.01 260);
    box-shadow: none;
    filter: grayscale(1);
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
    backdrop-filter: blur(var(--glass-blur)) saturate(0.6);
    transition: none;
  }

.crypto-disabled-button:hover,
  button.crypto-disabled-button:hover,
  .crypto-disabled-button:focus,
  button.crypto-disabled-button:focus,
  .crypto-disabled-button:focus-visible,
  button.crypto-disabled-button:focus-visible {
    background-color: oklch(0.3 0.01 260 / 0.4);
    border-color: oklch(0.5 0.01 260 / 0.5);
    box-shadow: none;
    outline: none;
    transform: none;
  }

/* Onderdruk het magnetische-effect van MagneticButton voor gedeactiveerde
     crypto-knoppen: de wrapper beweegt niet meer naar de cursor, zodat de
     knop niet "actief" aanvoelt. De wrapper krijgt .crypto-disabled-wrapper
     vanuit de pagina's. */

.crypto-disabled-wrapper.motion-magnetic {
    transform: none !important;
  }

/* Glass button passenger — translucent blauw-tinted glass voor de
     Passagier-knop op de oude kaart-landingspagina. Spiegelt
     .glass-button-success maar gebruikt de blauwe rol-hue (logo-blauw).
     Hiërarchie via blauwe tint + blauwe rand + blauwe glow, NIET solide
     fill — behoudt de frosted-glass identiteit. Specificity bumped om
     shadcn te overschrijven. */

.glass-button-passenger,
  button.glass-button-passenger,
  .glass-button-passenger.glass-button-passenger {
    background-color: oklch(var(--glass-bg-passenger));
    backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
    border: 1px solid oklch(var(--glass-border-passenger));
    box-shadow: var(--glass-shadow-passenger);
    color: oklch(var(--role-passenger));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

.glass-button-passenger:hover:not(:disabled),
  button.glass-button-passenger:hover:not(:disabled),
  .glass-button-passenger.glass-button-passenger:hover:not(:disabled) {
    background-color: oklch(var(--glass-bg-passenger-strong));
    border-color: oklch(var(--role-passenger));
    box-shadow: 0 12px 28px -8px oklch(0.7 0.18 55 / 0.5), 0 4px 12px -4px
      oklch(0 0 0 / 0.25);
  }

.glass-button-passenger:focus-visible,
  button.glass-button-passenger:focus-visible,
  .glass-button-passenger.glass-button-passenger:focus-visible {
    outline: 2px solid oklch(var(--role-passenger));
    outline-offset: 2px;
  }

/* ============================================================
   * LANDING-LOGO — vergroot de Logo-component op de landingspagina.
   * De Logo-component heeft hardcoded width=36 height=36 attributen
   * op zijn <svg>, die de h-16/w-16 (64px) container van
   * .landing-logo-large negeren. Deze regel forceert de svg om de
   * container te vullen (100% / 100%) zodat het logo daadwerkelijk
   * 64px wordt — groter en hoger geplaatst op de landingspagina,
   * zonder de rol-knoppen aan te raken.
   * ========================================================== */

.landing-logo-large svg {
    width: 100% !important;
    height: 100% !important;
  }

/* ============================================================
   * SELECTIEVE ZWART-BLAUW-WIT ACCENTEN — donkerblauwe achtergrond,
   * witte tekst, blauwe accenten. Blauwe primary (hue 250) blijft
   * behouden op de rol-knoppen en gloed-elementen via de bestaande
   * --role-passenger / --glass-*-passenger tokens. Toegepast op een
   * paar logische plekken waar het mooi en passend is, NIET overal.
   * ========================================================== */

/* Topbar-achtergrond op de landingspagina — diep donkerblauw i.p.v.
     transparant/zwart, zodat de topbar als een samenhangend blauw
     paneel leest boven de kaart. Witte tekst/iconen blijven leesbaar
     door de hoge L-foreground. Paars blijft de actiekleur (knoppen,
     gloed) — dit raakt alleen de topbar-achtergrond. */

.landing-led .landing-topbar,
  .landing-led [data-landing-topbar] {
    background-color: oklch(0.18 0.04 255 / 0.92);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border-bottom: 1px solid oklch(0.5 0.14 255 / 0.45);
  }

/* Glas-kaarten op de landingspagina — donkerblauwe tint i.p.v. neutraal
     zwart, zodat de zwevende panelen als blauwe glas-modules lezen. Paarse
     gloed-randen blijven behouden via --glass-border-primary. Alleen
     toegepast binnen .landing-led scope, niet op dashboard-pagina's. */

.landing-led .glass,
  .landing-led .glass-strong {
    background-color: oklch(0.16 0.035 255 / 0.62);
  }

/* ============================================================
   * LANDING-PAGE CTA KNOP-OVERRIDES (Passagier + Chauffeur).
   * GESCOPEERD op [data-landing-cta] — alleen de twee rol-knoppen op
   * de kaart-landingspagina (MapLanding.tsx). De gedeelde
   * .glass-button-success klasse wordt NIET globaal gewijzigd.
   *
   * Wijzigingen t.o.v. de basis-utility (alleen binnen deze scope):
   *   1. Tekstkleur → WIT (oklch 1 0 0) voor beide knoppen.
   *   2. Tekst dikker → font-weight 900 (i.p.v. 800/extrabold).
   *   3. Vulling donkerder → hogere alpha (0.30 rust / 0.40 hover).
   *   4. RANDJES BLIJVEN ONGEWIJZIGD — geen border-color/width/border
   *      overrides hier; de basis-utility randen blijven staan.
   * Werkt in light en dark theme: de alpha-waarden zijn theme-
   * onafhankelijk (zelfde hue als de rol-token, alleen donkerder).
   * ========================================================== */

[data-landing-cta] .glass-button-passenger,
  [data-landing-cta] button.glass-button-passenger,
  [data-landing-cta] .glass-button-passenger.glass-button-passenger {
    color: oklch(1 0 0);
    font-weight: 900;
    background-color: oklch(0.7 0.18 55 / 0.3);
  }

[data-landing-cta] .glass-button-passenger:hover:not(:disabled),
  [data-landing-cta] button.glass-button-passenger:hover:not(:disabled),
  [data-landing-cta]
    .glass-button-passenger.glass-button-passenger:hover:not(:disabled) {
    background-color: oklch(0.7 0.18 55 / 0.4);
  }

[data-landing-cta] .glass-button-success,
  [data-landing-cta] button.glass-button-success,
  [data-landing-cta] .glass-button-success.glass-button-success {
    color: oklch(1 0 0);
    font-weight: 900;
    background-color: oklch(0.85 0.13 85 / 0.3);
  }

[data-landing-cta] .glass-button-success:hover:not(:disabled),
  [data-landing-cta] button.glass-button-success:hover:not(:disabled),
  [data-landing-cta]
    .glass-button-success.glass-button-success:hover:not(:disabled) {
    background-color: oklch(0.85 0.13 85 / 0.4);
  }

/* Glass button driver — translucent logo-groen-tinted glass voor de
     Chauffeur-knop op de oude kaart-landingspagina. Spiegelt
     .glass-button-success maar gebruikt de groene rol-hue (logo-groen).
     Hiërarchie via groene tint + groene rand + groene glow, NIET solide
     fill. Specificity bumped om shadcn te overschrijven. */

.glass-button-driver,
  button.glass-button-driver,
  .glass-button-driver.glass-button-driver {
    background-color: oklch(var(--glass-bg-driver));
    backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
    border: 1px solid oklch(var(--glass-border-driver));
    box-shadow: var(--glass-shadow-driver);
    color: oklch(var(--role-driver));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

.glass-button-driver:hover:not(:disabled),
  button.glass-button-driver:hover:not(:disabled),
  .glass-button-driver.glass-button-driver:hover:not(:disabled) {
    background-color: oklch(var(--glass-bg-driver-strong));
    border-color: oklch(var(--role-driver));
    box-shadow: 0 12px 28px -8px oklch(0.85 0.13 85 / 0.5), 0 4px 12px -4px
      oklch(0 0 0 / 0.25);
  }

.glass-button-driver:focus-visible,
  button.glass-button-driver:focus-visible,
  .glass-button-driver.glass-button-driver:focus-visible {
    outline: 2px solid oklch(var(--role-driver));
    outline-offset: 2px;
  }

/* Landing-hero-title — grote hero-titel op de kaart-landingspagina.
     Gebruikt het display-font en een paars-text-gradient voor visuele
     hiërarchie boven de kaart. Theme-aware via --gradient-primary. */

.landing-hero-title {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    background-image: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

/* Glass input — translucent form field. */

.glass-input {
    background-color: oklch(var(--glass-bg));
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border: 1px solid oklch(var(--glass-border));
  }

/* Glass badge — small translucent pill. */

.glass-badge {
    background-color: oklch(var(--glass-bg-strong));
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border: 1px solid oklch(var(--glass-border));
  }

/* Flat map — real city planchette surface. Inline SVG consumes these tokens
     via currentColor / fill / stroke. No external service, no grid illustration. */

.flat-map {
    background-color: oklch(var(--map-bg));
    position: relative;
    overflow: hidden;
  }

.flat-map-block {
    fill: oklch(var(--map-block));
  }

.flat-map-block-alt {
    fill: oklch(var(--map-block-alt));
  }

.flat-map-building {
    fill: oklch(var(--map-building));
  }

.flat-map-building-alt {
    fill: oklch(var(--map-building-alt));
  }

.flat-map-street {
    stroke: oklch(var(--map-street-line));
  }

.flat-map-street-minor {
    stroke: oklch(var(--map-street-minor));
  }

.flat-map-street-secondary {
    stroke: oklch(var(--map-street-secondary));
  }

.flat-map-street-major {
    stroke: oklch(var(--map-street-major));
  }

.flat-map-street-casing {
    stroke: oklch(var(--map-street-casing));
  }

.flat-map-label {
    fill: oklch(var(--map-label));
    font-family: var(--font-body);
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }

.flat-map-label-major {
    fill: oklch(var(--map-label-major));
    font-family: var(--font-body);
    font-weight: 600;
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }

.flat-map-park {
    fill: oklch(var(--map-park));
  }

.flat-map-park-edge {
    stroke: oklch(var(--map-park-edge));
    fill: none;
  }

.flat-map-water {
    fill: oklch(var(--map-water));
  }

.flat-map-water-edge {
    stroke: oklch(var(--map-water-edge));
    fill: none;
  }

.flat-map-route {
    stroke: oklch(var(--map-route));
    filter: drop-shadow(0 0 6px oklch(var(--map-route-glow)));
  }

.flat-map-marker {
    fill: oklch(var(--map-marker));
  }

.flat-map-marker-dest {
    fill: oklch(var(--map-marker-dest));
  }

/* Dimming overlay for landing-page map backgrounds — keeps text legible. */

.flat-map-overlay {
    background-color: oklch(var(--map-overlay));
    pointer-events: none;
  }

/* ============================================================
   * LANDING-PAGE TEXT-PROTECTION BACKDROP.
   * GESCOPEERD op .landing-led — alleen de kaart-landingspagina.
   * Tekst-zware secties (security, paths, FAQ) op de landingspagina
   * hadden onleesbare muted-foreground tekst omdat de lichte
   * OpenStreetMap-tegels door de lage-alpha glas-panelen schijnen.
   * .landing-text-protect biedt een sterkere donkere achtergrond
   * (alpha 0.78) met frosted blur zodat de kaart-structuur erdoorheen
   * zichtbaar blijft maar de tekst altijd leesbaar is. Paars LED-rand
   * voor visuele consistentie met de .landing-led scope.
   * ========================================================== */

.landing-led .landing-text-protect {
    background-color: oklch(0.06 0.005 260 / 0.78);
    backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid oklch(0.7 0.18 55 / 0.45);
    box-shadow: 0 0 0 1px oklch(0.7 0.18 55 / 0.18), 0 0 18px -4px
      oklch(0.7 0.18 55 / 0.35), 0 8px 28px -10px oklch(0 0 0 / 0.6);
  }

@supports not (
      (backdrop-filter: blur(1px))
    ) {
    .landing-led .landing-text-protect {
      background-color: oklch(0.08 0.005 260 / 0.92);
    }
  }

/* Pulsing map marker — expanding ring that fades out, repeating. Used by
     FlatMap.tsx on the outer <circle> of pulsing markers (pickup/driver loc).
     Animates only transform (scale) + opacity per motion guidance. */

@keyframes pulse-marker {
    0% {
      transform: scale(0.6);
      opacity: 0.45;
    }
    70% {
      transform: scale(1.6);
      opacity: 0;
    }
    100% {
      transform: scale(1.6);
      opacity: 0;
    }
  }

.animate-pulse-marker {
    transform-box: fill-box;
    transform-origin: center;
    animation: pulse-marker 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }

/* Countdown tick — subtle scale pulse each second so the pickup countdown
     feels alive. Used by DriverDashboardPage.tsx on the countdown <div>.
     Honors prefers-reduced-motion below. */

@keyframes countdown-tick {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.04);
    }
  }

.animate-countdown-tick {
    animation: countdown-tick 1s ease-in-out infinite;
  }

@media (prefers-reduced-motion: reduce) {
    .animate-pulse-marker,
    .animate-countdown-tick {
      animation: none;
    }
  }

@supports not (
      (backdrop-filter: blur(1px))
    ) {
    /* Fallback for browsers without backdrop-filter: keep the translucent
       identity by using a semi-transparent rgba background (NOT opaque) so
       the underlying map still shines through. The frosted blur is gone,
       but the glass surface remains see-through. */
    .glass,
    .glass-strong,
    .glass-active,
    .glass-dashed,
    .glass-button,
    button.glass-button,
    .glass-input,
    .glass-badge {
      background-color: rgba(255, 255, 255, 0.45);
    }
    .glass-button-primary,
    button.glass-button-primary {
      background-color: oklch(0.7 0.18 55 / 0.45);
      color: oklch(var(--primary));
    }
    .glass-button-success,
    button.glass-button-success {
      background-color: oklch(0.85 0.13 85 / 0.45);
      color: oklch(var(--success));
    }
    .glass-button-destructive,
    button.glass-button-destructive {
      background-color: oklch(0.45 0.1 55 / 0.35);
      color: oklch(var(--destructive));
    }
    /* Dark-mode fallback: translucent navy instead of opaque card. */
    .dark .glass,
    .dark .glass-strong,
    .dark .glass-active,
    .dark .glass-dashed,
    .dark .glass-button,
    .dark button.glass-button,
    .dark .glass-input,
    .dark .glass-badge {
      background-color: rgba(20, 24, 40, 0.5);
    }
    .dark .glass-button-primary,
    .dark button.glass-button-primary {
      background-color: oklch(0.7 0.18 55 / 0.4);
    }
    .dark .glass-button-success,
    .dark button.glass-button-success {
      background-color: oklch(0.85 0.13 85 / 0.4);
    }
    .dark .glass-button-destructive,
    .dark button.glass-button-destructive {
      background-color: oklch(0.45 0.1 55 / 0.35);
    }
    /* Dashboard voertuigklasse-icoontjes — transparant ook zonder
       backdrop-filter. De basis .glass-badge fallback hierboven zet
       een semi-transparante rgba-achtergrond; in de dashboard-context
       (.dashboard-dark) willen we de plattegrond erdoorheen zien, dus
       forceren we transparant. Specifieke (0,3,0) selector wint van
       de (0,1,0) fallback-regel. */
    .dashboard-dark .glass-badge.glass-icon-passenger.glass-icon-passenger {
      background-color: transparent;
    }
  }

/* ============================================================
   * LeafMap — echte OpenStreetMap-kaart via react-leaflet.
   * Leaflet vereist een container met expliciete hoogte. We bieden twee
   * varianten: 'background' (full-viewport achter content, voor landing)
   * en 'panel' (vult een gebied binnen een flex-container).
   * ========================================================== */

.leaf-map-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid oklch(var(--border));
    box-shadow: var(--glass-shadow);
  }

/* Background-variant: full-viewport, geen rand/radius (landing gebruikt
     een eigen overlay-container). Hoogte via 100vh zodat Leaflet tegels
     rendert. */

.leaf-map-background {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    z-index: 0;
  }

/* Panel-variant: vult een gebied binnen een flex-container. Minimale
     hoogte zodat Leaflet altijd tegels rendert ook zonder expliciete
     parent-hoogte. */

.leaf-map-panel {
    width: 100%;
    min-height: 16rem;
    height: 100%;
  }

/* De inner MapContainer moet de parent volledig vullen. */

.leaf-map-inner {
    width: 100%;
    height: 100%;
    min-height: 16rem;
    background-color: oklch(var(--map-bg));
    z-index: 0;
  }

/* ============================================================
   * DARK LEAFLET TEGELS binnen .dashboard-dark — ALLEEN in donker-modus.
   * LeafMap laadt lichte OpenStreetMap-raster-tegels van
   * tile.openstreetmap.org. De --map-bg token zet alleen de container-
   * achtergrond, NIET de tegel-imagery — dus de zichtbare kaart blijft
   * licht wit/grijs ook binnen .dashboard-dark. De transparante bottom-
   * sheet laat de lichte kaart doorschijnen, waardoor het dashboard
   * paars/grijs i.p.v. zwart oogt (de chauffeur-pagina bug).
   *
   * FIX: binnen `.dark .dashboard-dark` draaien we de Leaflet-tegel-
   * panes om (invert(1) hue-rotate(180deg) brightness(0.85)
   * contrast(1.05)). Dit is de standaard techniek om OSM-tegels
   * donker te maken zonder een aparte donkere tegel-server:
   * invert+hue-rotate behoudt straten, gebouwen, parken (groen) en
   * water (blauw) herkenbaar maar op een donkere achtergrond.
   * brightness/contrast houden de kaart leesbaar. De overlay-panes
   * (markers, route-polyline, popups) worden NIET geïnverteerd —
   * alleen de tile-pane + de container-achtergrond. Zo blijven de
   * gekleurde markers en route zichtbaar bovenop de donkere kaart.
   *
   * BELANGRIJK: deze regels gebruiken `.dark .dashboard-dark` (i.p.v.
   * bare `.dashboard-dark`) zodat de tegel-invertie ALLEEN in donker-
   * modus actief is. In licht-modus blijven de OSM-tegels licht, passend
   * bij de lichte dashboard-achtergrond — de nachtmodus-toggle maakt
   * dus een zichtbaar verschil op passagiers- en chauffeurspagina's.
   * ========================================================== */

.dark .dashboard-dark .leaf-map-inner {
    background-color: oklch(0.18 0.05 255);
  }

.dark .dashboard-dark .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(1.05);
  }

/* Marker- en overlay-panes mogen NIET geïnverteerd worden — de
      gekleurde pins en route-polyline blijven zichtbaar bovenop de
      donkere tegels. Leaflet plaatst markers in .leaflet-marker-pane
      en overlays in .leaflet-overlay-pane; we forceren filter:none
      zodat ze niet de tile-pane-filter erven. */

.dark .dashboard-dark .leaflet-marker-pane,
  .dark .dashboard-dark .leaflet-overlay-pane,
  .dark .dashboard-dark .leaflet-popup-pane {
    filter: none;
  }

/* Leaflet-controls (zoom/attribution) ook niet inverteren — anders
      worden de zoom-knoppen en attributie onleesbaar. */

.dark .dashboard-dark .leaflet-control-container .leaflet-control {
    filter: none;
  }

/* Donkere achtergrond voor de attributie-balk zodat deze leesbaar
      blijft boven de donkere tegels. */

.dark .dashboard-dark .leaflet-control-attribution {
    background-color: oklch(0 0 0 / 0.6) !important;
    color: oklch(0.7 0.01 250) !important;
  }

.dark .dashboard-dark .leaflet-control-attribution a {
    color: oklch(0.7 0.18 55) !important;
  }

/* Zoom-knoppen donker zodat ze boven de donkere kaart leesbaar zijn. */

.dark .dashboard-dark .leaflet-bar a {
    background-color: oklch(0.08 0.005 260 / 0.85) !important;
    color: oklch(0.97 0.005 250) !important;
    border-color: oklch(0.5 0.14 255 / 0.5) !important;
  }

.dark .dashboard-dark .leaflet-bar a:hover {
    background-color: oklch(0.12 0.008 260 / 0.95) !important;
  }

/* ============================================================
   * LANDING-LED DARK LEAFLET TEGELS.
   * Spiegelt de .dashboard-dark Leaflet-regels hierboven. De
   * kaart-landingspagina (MapLanding.tsx) laadt dezelfde lichte
   * OpenStreetMap-raster-tegels via LeafMap (variant="background").
   * De --map-bg token zet alleen de container-achtergrond, NIET de
   * tegel-imagery — dus de zichtbare kaart bleef licht wit/grijs
   * ook binnen .landing-led. Dat is de root cause dat de landings-
   * pagina "licht" oogt terwijl het chauffeurs-dashboard donker is:
   * de dark-tile filter bestond ALLEEN onder .dashboard-dark, niet
   * onder .landing-led.
   *
   * FIX: binnen .landing-led draaien we dezelfde Leaflet-tegel-panes
   * om (invert(1) hue-rotate(180deg) brightness(0.85) contrast(1.05)).
   * Dit is dezelfde techniek als .dashboard-dark: invert+hue-rotate
   * behoudt straten, gebouwen, parken (groen) en water (blauw)
   * herkenbaar maar op een donkere achtergrond. De overlay-panes
   * (markers, route-polyline, popups) worden NIET geïnverteerd —
   * alleen de tile-pane + de container-achtergrond. Zo blijven de
   * gekleurde markers en route zichtbaar bovenop de donkere kaart.
   * ========================================================== */

.landing-led .leaf-map-inner {
    background-color: oklch(0.18 0.05 255);
  }

.landing-led .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(1.05);
  }

.landing-led .leaflet-marker-pane,
  .landing-led .leaflet-overlay-pane,
  .landing-led .leaflet-popup-pane {
    filter: none;
  }

.landing-led .leaflet-control-container .leaflet-control {
    filter: none;
  }

.landing-led .leaflet-control-attribution {
    background-color: oklch(0 0 0 / 0.6) !important;
    color: oklch(0.7 0.01 250) !important;
  }

.landing-led .leaflet-control-attribution a {
    color: oklch(0.7 0.18 55) !important;
  }

.landing-led .leaflet-bar a {
    background-color: oklch(0.08 0.005 260 / 0.85) !important;
    color: oklch(0.97 0.005 250) !important;
    border-color: oklch(0.5 0.14 255 / 0.5) !important;
  }

.landing-led .leaflet-bar a:hover {
    background-color: oklch(0.12 0.008 260 / 0.95) !important;
  }

/* ============================================================
   * DEFENSIEVE CSS-BACKSTOP voor .leaflet-map-pane binnen .dashboard-dark.
   * AANVULLING op de JS-fix in LeafMap.tsx (MapRotation component, regel
   * ~577-624) die imperatief mapPane.style.transformOrigin = "center" en
   * mapPane.style.transition = "transform ...ms ease-out" zet voor de
   * kaart-rotatie (heading-up / course-up zoals Waze/Google Maps).
   *
   * Waarom een CSS-backstop naast de JS-fix?
   *   1. De JS-fix in MapRotation draait alleen wanneer driverHeading
   *      wordt doorgegeven (TurnByTurnMap). Op passagiers-kaarten en
   *      andere dashboard-callers zonder driverHeading wordt MapRotation
   *      niet gemonteerd, waardoor de mapPane geen transform-origin/
   *      transition heeft. De CSS-backstop garandeert dat de mapPane
   *      ALTIJD center-origin heeft, ongeacht of MapRotation draait.
   *   2. will-change: transform hint de browser dat de mapPane-transform
   *      regelmatig verandert (rotatie/schaal), zodat de compositor de
   *      laag promoot naar een eigen GPU-laag. Dit voorkomt jank tijdens
   *      de vloeiende rotatie-transition (ROTATE_TRANSITION_MS=800ms).
   *   3. transform-origin: center is de pivot die Waze/Google Maps
   *      gebruiken — de kaart draait rond het viewport-center, niet rond
   *      een hoek. Zonder deze regel zou Leaflet's default transform-origin
   *      (0 0, linksboven) de kaart rond de linkerbovenhoek draaien, wat
   *      visueel onjuist is.
   *
   * GESCOPEERD op .dashboard-dark — alleen de passagiers- en chauffeurs-
   * dashboards (BookingPage, WaitingPage, DriverHomePage,
   * DriverDashboardPage). De landingpagina (.landing-led) en andere
   * pagina's blijven onaangetast. De JS-fix in LeafMap blijft de
   * autoriteit voor de daadwerkelijke rotatie-waarden; deze CSS-regel
   * levert enkel de defensieve basis-eigenschappen (origin + will-change)
   * die de JS-fix aanvullen i.p.v. vervangen.
   * ========================================================== */

.dashboard-dark .leaflet-map-pane {
    transform-origin: center;
    will-change: transform;
  }

/* Marker- en popup-panes krijgen dezelfde defensieve origin zodat de
     tegengestelde rotatie (compensatie waardoor markers rechtop blijven
     staan) rond hetzelfde center draait als de mapPane. will-change op
     deze panes is bewust NIET gezet — markers/popups veranderen minder
     frequent dan de mapPane-rotatie en extra will-change-laag zou
     onnodig GPU-geheugen claimmen. */

.dashboard-dark .leaflet-marker-pane,
  .dashboard-dark .leaflet-popup-pane {
    transform-origin: center;
  }

/* Leaflet-marker divIcon: reset de default Leaflet-stijlen op de wrapper
     zodat onze inline-SVG pin zonder extra padding/achtergrond rendert. */

.leaf-map-marker {
    background: transparent !important;
    border: 0 !important;
  }

/* ============================================================
   * VOERTUIG-ICOON KEUZEMENU — zwevend glas-paneel boven de kaart.
   * GESCOPEERD op .vehicle-icon-picker (gemonteerd binnen TurnByTurnMap,
   * dus binnen de .dashboard-dark scope). De chauffeur tikt op zijn
   * eigen driver-marker om dit menu te openen en een voertuig-icoon
   * te kiezen dat het standaard 🚖 symbool binnen de pin vervangt.
   * Hergebruikt uitsluitend bestaande tokens (--glass-bg, --glass-border,
   * --primary, --map-marker, --font-display, --font-body) — geen nieuwe
   * kleuren. Spiegelt de .leaf-map-marker / .dashboard-dark LED-stijl.
   * ========================================================== */

/* Backdrop — full-screen transparante vanglaag voor buiten-klik.
     z-index onder het paneel (1200) maar boven de kaart (z-0) en de
     recenter-knop (z-1250) zodat een tik buiten het paneel het menu
     sluit zonder de recenter-knop te raken. Transparant zodat de kaart
     erdoorheen zichtbaar blijft. */

.vehicle-icon-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background-color: transparent;
    pointer-events: auto;
  }

/* Paneel — zwevend glas-paneel, onder-center boven de kaart.
     Gebruikt --glass-bg / --glass-border / --glass-shadow voor de
     frosted-glas identiteit consistent met de dashboard LED-stijl.
     z-index 1250: boven de backdrop (1200) en recenter-knop (1250)
     zodat het paneel altijd zichtbaar blijft. */

.vehicle-icon-picker {
    position: fixed;
    bottom: calc(3.5rem + 5.5rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1250;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: min(20rem, calc(100vw - 2rem));
    padding: 0.875rem 1rem 1rem;
    border-radius: 1rem;
    background-color: oklch(var(--glass-bg-strong));
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.6);
    border: 1px solid oklch(var(--glass-border-primary));
    box-shadow: var(--glass-shadow-primary);
    color: oklch(var(--foreground));
    pointer-events: auto;
  }

/* Fallback voor browsers zonder backdrop-filter — semi-opaque navy. */

@supports not (
      (backdrop-filter: blur(1px))
    ) {
    .vehicle-icon-picker {
      background-color: oklch(0.1 0.02 250 / 0.92);
    }
  }

/* Titel — display-font, compact, muted-foreground voor hiërarchie. */

.vehicle-icon-picker-title {
    font-family: var(--font-display), sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
    text-align: center;
  }

/* Knop-grid — 3 kolommen zodat de 6 opties in 2 rijen passen. */

.vehicle-icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

/* Knop — glas-achtige tegel met emoji + label. Minimale hit-target
     44px hoog (mobiel). Hover verlicht de achtergrond; focus-visible
     toont een primary ring voor toetsenbord-navigatie. */

.vehicle-icon-picker-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 3.5rem;
    padding: 0.5rem 0.25rem;
    border-radius: 0.625rem;
    background-color: oklch(var(--glass-bg));
    border: 1px solid oklch(var(--glass-border));
    color: oklch(var(--foreground));
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform
      0.2s ease;
  }

.vehicle-icon-picker-button:hover {
    background-color: oklch(var(--glass-bg-active));
    border-color: oklch(var(--glass-border-active));
  }

.vehicle-icon-picker-button:focus-visible {
    outline: 2px solid oklch(var(--primary));
    outline-offset: 2px;
  }

.vehicle-icon-picker-button:active {
    transform: scale(0.97);
  }

/* Actieve knop — primary-tint achtergrond + primary rand + primary
     gloed zodat de huidige keuze onmiskenbaar leest. Geen nieuwe kleur:
     hergebruikt --primary / --glass-bg-primary / --glass-border-primary. */

.vehicle-icon-picker-button-active {
    background-color: oklch(var(--glass-bg-primary-strong));
    border-color: oklch(var(--primary));
    box-shadow: 0 0 0 1px oklch(var(--primary) / 0.4), 0 0 14px -2px
      oklch(var(--primary) / 0.45);
  }

.vehicle-icon-picker-button-active:hover {
    background-color: oklch(var(--glass-bg-primary-strong));
    border-color: oklch(var(--primary));
  }

/* Emoji-symbool — groot genoeg om het voertuig herkenbaar te maken. */

.vehicle-icon-picker-symbol {
    font-size: 1.5rem;
    line-height: 1;
    font-family: var(--font-body), sans-serif;
  }

/* Label — klein, muted-foreground, voor screenreaders en visuele
     duidelijkheid. */

.vehicle-icon-picker-label {
    font-family: var(--font-body), sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    color: oklch(var(--muted-foreground));
    letter-spacing: 0.01em;
  }

.vehicle-icon-picker-button-active .vehicle-icon-picker-label {
    color: oklch(var(--primary));
  }

/* Leaflet-controls (zoom, attribution) blijven zichtbaar boven de kaart
     maar onder glas-knoppen. Leaflet gebruikt z-index 200-700 voor zijn
     eigen controls; wij tillen glas-knoppen naar 1000+ (zie hieronder). */

.leaflet-control-container .leaflet-top,
  .leaflet-control-container .leaflet-bottom {
    z-index: 800;
  }

/* hervat @layer utilities na de unlayered override */

/* Glas-knoppen en overlays BOVEN de Leaflet-kaart houden.
     Leaflet-panes gebruiken z-index 200-700. Wij positioneren glas-knoppen
     relatief en tillen ze naar 1000+ zodat ze altijd boven de kaart staan.
     Dit breekt geen bestaande layout — .glass en .flat-map-overlay krijgen
     enkel een position + z-index wanneer ze niet al absoluut/fixed zijn. */

.glass,
  .glass-strong,
  .glass-active,
  .glass-dashed,
  .glass-button,
  button.glass-button,
  .glass-button-primary,
  button.glass-button-primary,
  .glass-button-success,
  button.glass-button-success,
  .glass-button-destructive,
  button.glass-button-destructive,
  .glass-input,
  .glass-badge {
    position: relative;
    z-index: 1000;
  }

/* .flat-map-overlay is absoluut/fixed voor de landing-dimming; die heeft
      al een hoge stacking door z-0/z-10 op de parent. We tillen hem expliciet
      boven de Leaflet-kaart (z-index 900) maar onder de glas-knoppen (1000). */

.flat-map-overlay {
    z-index: 900;
  }

/* ============================================================
   * DRIVER NAV — DEFENSIEVE Z-INDEX REPARATIE
   * De .glass-regel hierboven (specificiteit (0,1,0)) forceert
   * z-index:1000 op alle .glass elementen, inclusief de DriverNav
   * <nav class="glass ... z-[1200]">. Omdat .glass later in de
   * bron-volgorde staat dan Tailwind's z-[1200] utility, wint .glass
   * en capt de nav op z-1000. De kaartlaag (Leaflet-panes z-200-700,
   * controls z-800, .flat-map-overlay z-900) bedekt daardoor de nav
   * visueel op de chauffeurs-dashboard home weergave.
   *
   * Deze defensieve regel gebruikt een hogere specificity (0,1,1)
   * via het data-ocid attribuut-selector, zodat toekomstige class-
   * wijzigingen de bug niet herintroduceren. Combinatie met de inline
   * style={{ zIndex: 1300 }} op het <nav> element in DriverNav.tsx
   * (inline-stijlen winnen altijd) garandeert robuuste z-stacking.
   * ========================================================== */

nav[data-ocid="driver.nav"] {
    /* CRITICAL FIX: the .glass rule above (line ~1485) forces
       `position: relative; z-index: 1000` on ALL .glass elements with
       specificity (0,1,0). Tailwind's `fixed` and `z-[1200]` utilities
       are also (0,1,0) and are injected earlier (@tailwind utilities on
       line 5), so .glass wins by source order — the nav becomes
       position:relative and renders in normal flow at the end of
       document.body (BELOW the h-dvh shell), i.e. off-screen below the
       viewport. That is the "white margin at the very base" seen in the
       /driver screenshot. Force position:fixed here (specificity 0,1,1
       wins over .glass 0,1,0) so the nav pins to the viewport bottom
       regardless of the .glass position override. Combined with the
       inline style={{ zIndex: 1300 }} on the <nav> in DriverNav.tsx
       (inline styles always win), z-stacking is also guaranteed. */
    position: fixed;
    z-index: 1300;
    /* SOLID visible background — the nav is portaled to document.body,
       so it sits OUTSIDE the .dashboard-dark scope and would otherwise
       inherit the global .glass tokens (translucent). Against the deep
       navy dashboard a translucent glass strip is nearly invisible.
       Force an opaque dark surface with a bright top border so the nav
       bar is unmistakably visible at the bottom of the viewport on the
       /driver route. Matches the dashboard LED aesthetic (deep navy +
       blue LED border). !important wins over the .glass background-color
       rule (same specificity 0,1,1 but later in source order is fragile,
       so !important guarantees the solid surface). */
    background-color: oklch(0.13 0.005 260) !important;
    border-top: 1px solid oklch(0.7 0.18 55 / 0.85) !important;
    box-shadow: 0 -1px 0 0 oklch(0.7 0.18 55 / 0.4), 0 -8px 24px -8px
      oklch(0.7 0.18 55 / 0.25), 0 -4px 12px -6px oklch(0 0 0 / 0.5) !important;
  }

/* Dark-theme parity — same opaque navy surface so the nav reads
     identically whether the app shell is in light or dark mode. The
     portaled nav is theme-agnostic (it lives at document.body), so we
     pin the surface explicitly rather than relying on .dark cascading. */

.dark nav[data-ocid="driver.nav"],
  .dashboard-dark nav[data-ocid="driver.nav"] {
    background-color: oklch(0.13 0.005 260) !important;
    border-top: 1px solid oklch(0.7 0.18 55 / 0.85) !important;
  }

/* Nav item labels & icons must stay light against the now-solid dark
     surface. The .nav-link-idle color (muted-foreground) is fine on a
     light background but illegible on opaque navy; force a light idle
     color within the driver nav so all 5 items read clearly. */

nav[data-ocid="driver.nav"] .nav-link-idle {
    color: oklch(0.72 0.015 250);
  }

nav[data-ocid="driver.nav"] .nav-link-idle:hover {
    color: oklch(0.95 0.012 75);
  }

/* ============================================================
   * PASSENGER NAV — POSITION-FIX REPARATIE
   * Spiegelt de driver-nav position-reparatie hierboven. De .glass-
   * regel (specificiteit 0,1,0) forceert `position: relative;
   * z-index: 1000` op ALLE .glass elementen, inclusief de PassengerNav
   * <nav class="glass ... fixed bottom-0 z-[1200]">. Omdat .glass later
   * in de bron-volgorde staat dan Tailwind's `fixed`/`bottom-0`/
   * `z-[1200]` utilities (allemaal 0,1,0), wint .glass op source-order:
   * de nav wordt position:relative en rendert in normal flow.
   *
   * PassengerLayout monteert PassengerNav als laatste sibling ná
   * <div className="pt-14"><Outlet/></div>. Op map-dashboard pagina's
   * (BookingPage, WaitingPage) is de pagina-root `fixed inset-0 z-0` —
   * de kaart vult het viewport en neemt GEEN flow-ruimte in. De
   * relative PassengerNav valt daardoor terug naar de BOVENKANT van
   * de pt-14 wrapper (die in flow leeg is) en verschijnt ONDER de
   * topbar in plaats van onderaan het scherm. Dat is de "menubalk
   * staat bovenaan i.p.v. onderaan"-bug die de gebruiker meldt.
   *
   * Deze defensieve regel (specificiteit 0,1,1 via het data-ocid
   * attribuut-selector) wint van .glass (0,1,0) en forceert
   * position:fixed + z-index:1300 zodat de nav vast onderaan het
   * viewport pinnet, identiek aan de driver-nav. Gecombineerd met de
   * inline style={{ position: "fixed", zIndex: 1300 }} op het <nav>
   * element in PassengerNav.tsx (inline-stijlen winnen altijd) is de
   * z-stacking robuust gegarandeerd.
   * ========================================================== */

nav[data-ocid="passenger.nav"] {
    position: fixed;
    z-index: 1300;
  }

/* ==========================================================
   * DRIVER-TOPBAR Z-INDEX REPARATIE
   * De vaste driver-topbar (header) op map-dashboard paginas moet
   * boven de kaartlagen en .glass elementen zweven. .glass caps
   * z-index op 1000 via een lagere-specificiteit regel; deze
   * attribuut-selector (specificiteit 0,1,1) wint daarvan en houdt
   * de topbar boven de kaart. Combinatie met eventuele inline
   * style={{ zIndex: 1300 }} op het <header> element garandeert
   * robuuste z-stacking.
   * ========================================================== */

header[data-ocid="driver.topbar"] {
    z-index: 1300;
  }

/* ==========================================================
   * PASSENGER-TOPBAR Z-INDEX REPARATIE
   * Spiegelt de driver-topbar z-index reparatie hierboven. De vaste
   * passagiers-topbar (header) op passagiers-dashboard paginas moet
   * boven de kaartlagen en .glass elementen zweven. .glass caps
   * z-index op 1000 via een lagere-specificiteit regel; deze
   * attribuut-selector (specificiteit 0,1,1) wint daarvan en houdt
   * de topbar boven de kaart. Combinatie met eventuele inline
   * style={{ zIndex: 1300 }} op het <header> element garandeert
   * robuuste z-stacking — identiek aan de driver-topbar aanpak.
   * ========================================================== */

header[data-ocid="passenger.topbar"] {
    z-index: 1300;
  }

/* ============================================================
   * LAYOUT-HEADER — DEFENSIEVE VERBERGING OP DE LANDINGS-PAGINA.
   * De Layout-header (data-ocid='layout.header') is de menubalk
   * onderaan met logo + LanguageSwitcher + ThemeToggle. Op de
   * landingspagina (route '/') mag deze HELEMAAL NIET tonen
   * (user instruction: "Landingspagina mag geen enkele
   * navigatiebalk tonen").
   *
   * De hoofdoplossing is voorwaardelijke JSX in Layout.tsx: het
   * <header> element wordt helemaal niet gemount wanneer isLanding
   * true is. Deze CSS-regel is een EXTRA VEILIGHEIDSNET voor het
   * geval de voorwaardelijke JSX ergens niet voldoet (bijv. een
   * toekomstige refactor die de header wél mount met
   * data-hidden='true'). De regel gebruikt een dubbele attribuut-
   * selector (specificiteit 0,2,1) plus !important zodat ze wint
   * van alle eerdere defensieve header[data-ocid] regels
   * (specificiteit 0,1,1) én van de Tailwind data-[hidden=true]:hidden
   * utility (specificiteit 0,2,0). display:none !important garandeert
   * dat de header geen layout-ruimte inneemt en niet zichtbaar is,
   * ongeacht andere regels.
   * ========================================================== */

header[data-ocid="layout.header"][data-hidden="true"] {
    display: none !important;
  }

/* ============================================================
   * LANDING-PAGE CTA Z-INDEX REPARATIE
   * De .flat-map-overlay is position:fixed met z-index:900, wat een
   * root-level stacking context creëert. De landing-CTA-wrappers
   * (.motion-magnetic op de LandingPage) stonden voorheen op
   * `relative z-10` (Tailwind z-index:10), wat een stacking context
   * op z-10 in de root maakte. De inner .glass-button (z-index:1000)
   * stapelde daardoor alleen BINNEN die z-10 context — effectief z-10
   * tegen de overlay's z-900, dus de overlay bedekte de knoppen.
   *
   * De LandingPage JSX zet nu `z-[1100]` + `pointer-events:auto` op de
   * wrappers. Deze defensieve CSS-regel garandeert dat .motion-magnetic
   * wrappers die een landing-CTA bevatten ALTIJD boven de overlay staan,
   * zelfs als een toekomstige Tailwind-class-wijziging de z-[1100]
   * per ongeluk verwijdert. Specificiteit (0,2,0) wint van de bare
   * .motion-magnetic transition-regel (0,1,0) zonder de transition te
   * breken — we voegen alleen position + z-index + pointer-events toe.
   * ========================================================== */

.motion-magnetic.motion-magnetic {
    position: relative;
    z-index: 1100;
    pointer-events: auto;
  }

/* ============================================================
   * Betaalstatus-badges — kleine pillen die de PaymentStatus tonen.
   * Gebruikt door PaymentPage, WaitingPage en DriverDashboardPage.
   * Kleuren via de bestaande success/warning/destructive tokens.
   * ========================================================== */

.payment-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
  }

.payment-badge-paid {
    background-color: oklch(var(--success) / 0.12);
    color: oklch(var(--success));
    border-color: oklch(var(--success) / 0.3);
  }

.payment-badge-pending {
    background-color: oklch(var(--warning) / 0.12);
    color: oklch(var(--warning));
    border-color: oklch(var(--warning) / 0.3);
  }

.payment-badge-unpaid {
    background-color: oklch(var(--muted));
    color: oklch(var(--muted-foreground));
    border-color: oklch(var(--border));
  }

.payment-badge-refunded,
  .payment-badge-partially_refunded {
    background-color: oklch(var(--destructive) / 0.12);
    color: oklch(var(--destructive));
    border-color: oklch(var(--destructive) / 0.3);
  }

/* Countdown-weergave — grote monospace cijfers voor de 5-min pickup
     countdown. Gebruikt door DriverDashboardPage Phase4. */

.countdown-display {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

.countdown-display-expired {
    color: oklch(var(--destructive));
  }

/* ============================================================
   * Autocomplete-dropdown — zwevende adres-suggestie lijst.
   * Verschijnt onder een tekstveld tijdens het typen (3+ tekens).
   * Toetsenbord-navigatie: pijltjes omhoog/omlaag, Enter, Esc.
   * Mobiel-vriendelijk: aanraakdoelen min 44px hoog.
   * Zweeft boven alle andere content (z-index 1100, boven glas-knoppen 1000).
   *
   * PORTAL-RENDERING: de dropdown wordt via createPortal naar
   * document.body gerenderd met position:fixed (zie AddressAutocomplete.tsx).
   * Hierdoor wordt de dropdown niet meer beperkt door de stacking context
   * van de parent div.relative in BookingPage, die door de Taxiklasse-sectie
   * eronder visueel werd overlapt. De top/left/width worden via inline-stijl
   * gezet op basis van getBoundingClientRect van het input-veld; de CSS levert
   * enkel de visuele stijl (achtergrond, rand, schaduw, blur, animatie).
   * Volgt hetzelfde patroon als LanguageSwitcher (.language-menu) en
   * MeerMenu (.meer-menu). z-index 1100 blijft boven glas-knoppen (1000)
   * en onder het language-menu (1200) en meer-menu (1300).
   * ========================================================== */

.autocomplete-dropdown {
    position: fixed;
    background-color: oklch(var(--dropdown-bg));
    border: 1px solid oklch(var(--dropdown-border));
    border-radius: var(--radius);
    box-shadow: var(--dropdown-shadow);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.6);
    z-index: 1100;
    overflow: hidden;
    animation: dropdown-in 0.18s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

.autocomplete-list {
    max-height: 18rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.25rem;
  }

.autocomplete-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.625rem 0.75rem;
    min-height: 2.75rem;
    border-radius: calc(var(--radius) - 2px);
    cursor: pointer;
    transition: background-color 0.12s ease-out;
    border-left: 3px solid transparent;
  }

.autocomplete-item:hover {
    background-color: oklch(var(--dropdown-item-hover));
  }

.autocomplete-item[data-active="true"] {
    background-color: oklch(var(--dropdown-item-active));
    border-left-color: oklch(var(--dropdown-item-active-border));
  }

.autocomplete-item-street {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25;
    color: oklch(var(--foreground));
  }

.autocomplete-item-city {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.8125rem;
    line-height: 1.25;
    color: oklch(var(--muted-foreground));
  }

.autocomplete-item-country {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.6875rem;
    color: oklch(var(--muted-foreground));
    margin-top: 0.125rem;
  }

.autocomplete-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    font-size: 0.8125rem;
    color: oklch(var(--muted-foreground));
  }

.autocomplete-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid oklch(var(--dropdown-border));
    border-top-color: oklch(var(--primary));
    border-radius: 9999px;
    animation: autocomplete-spin 0.6s linear infinite;
  }

.autocomplete-empty {
    padding: 0.75rem;
    font-size: 0.8125rem;
    color: oklch(var(--muted-foreground));
    text-align: center;
  }

/* Fuzzy-match-badge — kleine badge rechts in een suggestie-item voor
     niet-exacte matches (isExact=false). Exacte matches tonen geen badge.
     Gebruikt een zachte accent-tint (geen felle kleur) zodat de badge
     opvalt zonder de suggestie-lijst visueel te verstoren. */

.autocomplete-fuzzy-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: 0.125rem;
    padding: 0.0625rem 0.4375rem;
    border-radius: 9999px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.625rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background-color: oklch(var(--accent) / 0.18);
    color: oklch(var(--accent-foreground));
    border: 1px solid oklch(var(--accent) / 0.35);
  }

/* Manuele-invoer-formulier — fallback-formulier dat in de dropdown
     verschijnt wanneer de gebruiker "Adres handmatig invoeren" kiest of
     wanneer er geen zoekresultaten zijn. Bevat velden voor straat,
     huisnummer, postcode, stad en land, plus een opslaan-knop. Wordt
     onder de suggestie-lijst (of de lege-resultaten-melding) getoond,
     binnen hetzelfde portaled paneel. */

.autocomplete-manual-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid oklch(var(--dropdown-border));
    background-color: oklch(var(--dropdown-bg));
  }

.autocomplete-manual-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8125rem;
    color: oklch(var(--foreground));
    margin: 0;
  }

.autocomplete-manual-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

@media (min-width: 30rem) {
    .autocomplete-manual-grid {
      grid-template-columns: 1fr 1fr;
    }
    .autocomplete-manual-field--full {
      grid-column: 1 / -1;
    }
  }

.autocomplete-manual-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

.autocomplete-manual-label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.75rem;
    color: oklch(var(--muted-foreground));
  }

.autocomplete-manual-input {
    height: 2.5rem;
    width: 100%;
    padding: 0 0.625rem;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid oklch(var(--input));
    background-color: oklch(var(--card));
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: oklch(var(--foreground));
    transition: border-color 0.12s ease-out, box-shadow 0.12s ease-out;
  }

.autocomplete-manual-input:focus-visible {
    outline: none;
    border-color: oklch(var(--ring));
    box-shadow: 0 0 0 2px oklch(var(--ring) / 0.4);
  }

.autocomplete-manual-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

.autocomplete-manual-error {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: oklch(var(--destructive));
  }

.autocomplete-manual-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 2.5rem;
    padding: 0 0.875rem;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid oklch(var(--primary));
    background-color: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color 0.12s ease-out, opacity 0.12s ease-out;
  }

.autocomplete-manual-submit:hover:not(:disabled) {
    opacity: 0.92;
  }

.autocomplete-manual-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

.autocomplete-manual-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    border-top: 1px solid oklch(var(--dropdown-border));
    background-color: transparent;
    color: oklch(var(--muted-foreground));
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color 0.12s ease-out, color 0.12s ease-out;
  }

.autocomplete-manual-toggle:hover {
    background-color: oklch(var(--dropdown-item-hover));
    color: oklch(var(--foreground));
  }

@keyframes dropdown-in {
    from {
      opacity: 0;
      transform: translateY(-4px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

@keyframes autocomplete-spin {
    to {
      transform: rotate(360deg);
    }
  }

/* ============================================================
   * Language-menu — taalkeuze-dropdown (LanguageSwitcher).
   * Het paneel moet BOVEN alle glas-elementen (.glass / .glass-button
   * etc. forceren z-index:1000) en boven de autocomplete-dropdown
   * (z-index:1100) renderen, anders bedekken glas-knoppen in de
   * header de taallijst. Daarom tillen we het paneel naar z-index:1200.
   *
   * Viewport-veiligheid op smalle schermen (vanaf 320px): het paneel
   * ankerde voorheen rechts (right:0) met min-width:12rem, wat op een
   * 320px-viewport kon uitsteken als de trigger in een smalle header-
   * kolom zat. We beperken de maximale breedte tot calc(100vw - 1rem)
   * zodat het paneel nooit buiten de viewport valt; right:0 blijft de
   * standaard-anker rechts. De min-width blijft 12rem op brede schermen
   * maar wijkt op smalle schermen voor de viewport-breedte.
   *
   * Verticale viewport-veiligheid: het paneel wordt nu via een portal
   * met position:fixed gerenderd (buiten de overflow-x-hidden header),
   * zodat alle 5 talen altijd zichtbaar zijn. Op korte schermen kan de
   * 5-item-lijst toch de viewport-onderkant raken; daarom beperken we
   * de hoogte tot calc(100dvh - 8rem) met interne scroll, en vangen we
   * overscroll af zodat scrollen binnen het paneel de pagina erachter
   * niet meesleept.
   * ========================================================== */

.language-menu {
    z-index: 1200;
    max-width: calc(100vw - 1rem);
    max-height: calc(100dvh - 8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

/* ============================================================
   * Bottom-nav labels — passagier & chauffeur navigatiebalk.
   *
   * CALMER NAV REDESIGN — visuele drukte verminderd terwijl de
   * bestaande glass/kaart-stijl en Icon3D Ambilight-gloed behouden
   * blijven. Idle items zijn lichter (muted-foreground i.p.v. full
   * foreground) zodat alleen het actieve item eruit springt; actieve
   * items gebruiken een zachtere paars-tint (.glass-active is hier-
   * onder verfijnd) in plaats van een harde accentrand. Labels zijn
   * iets compacter (text-xs i.p.v. text-sm) voor een slankere
   * bottom-nav, maar blijven dik (font-bold) en leesbaar tijdens
   * het rijden.
   * ========================================================== */

.nav-link {
    /* basis — kleur wordt overschreven door -active / -idle */
    transition: color 0.2s var(--motion-ease, cubic-bezier(0.4, 0, 0.2, 1));
  }

.nav-link-active {
    color: oklch(var(--primary));
  }

.nav-link-idle {
    /* Calmer: idle items lezen als secundair (muted-foreground) i.p.v.
       full foreground. Alleen het actieve item trekt de blik. */
    color: oklch(var(--muted-foreground));
  }

.nav-link-idle:hover {
    color: oklch(var(--primary));
  }

.nav-label {
    font-family: var(--font-body);
    /* text-xs (0.75rem) i.p.v. text-sm — slankere bottom-nav, minder
       visuele drukte. Blijft dik (font-bold) voor leesbaarheid. */
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.005em;
  }

/* Compacte variant voor de slimmere bottom-nav — iets minder
     verticale padding rond het label zodat 4-5 hoofditems + Meer-knop
     comfortabel naast elkaar passen op smalle schermen. */

.nav-label-compact {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.005em;
  }

/* Compactere bottom-nav iconen — de Icon3D-glasfoto's zijn verkleind
     (size 18 i.p.v. 22) zodat 5 items netjes naast elkaar passen zonder
     overlap. De Ambilight-gloed (::before op .icon3d) wordt hier binnen
     de nav strakker gehouden (minder spread) zodat de kleinere iconen
     elkaar niet visueel raken. Alleen van toepassing binnen .nav-link. */

.nav-link .icon3d::before {
    inset: -8% -12% -20% -12%;
    --icon3d-glow-spread: 0.62;
  }

/* Calmer active state — zachtere paars-tint, geen harde rand.
     De bestaande .glass-active (zie hierboven) gebruikt --glass-bg-
     active + --glass-border-active. Voor de bottom-nav willen we een
     RUSTIGERE actieve marker: een lichtere paars-tint met een subtiele
     paars onderstreping (nav-active-bar) in plaats van een volle rand.
     Dit vermindert visuele drukte terwijl het actieve item duidelijk
     blijft. De originele .glass-active blijft behouden voor andere
     actieve glas-elementen; .glass-active-nav is specifiek voor nav. */

.glass-active-nav {
    background-color: oklch(var(--glass-bg-active));
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border: 1px solid oklch(var(--glass-border-primary) / 0.45);
    border-radius: 9999px;
    position: relative;
  }

/* Subtiele paars onderstreping onder het actieve nav-item — een 2px
     balk die zacht in-fadet. Vervangt de eerdere harde accentrand. */

.glass-active-nav::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.25rem;
    width: 1.25rem;
    height: 0.125rem;
    border-radius: 9999px;
    background-color: oklch(var(--primary));
    transform: translateX(-50%);
    opacity: 0.85;
    pointer-events: none;
  }

.glass-active-nav:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }

/* ============================================================
   * MEER-MENU — calmer navigation redesign.
   *
   * Twee Meer-menu varianten die beide een portal-gericht overlay
   * openen dat sluit bij klik buiten of Escape:
   *
   *  1. HEADER MEER-MENU (kebab/hamburger) — groepeert admin-login,
   *     language, theme en logout in één rustige header-entry. Op
   *     smalle schermen tonen max 2 zichtbare acties; de rest schuift
   *     hierin. Opent naar BENEDEN onder de header.
   *
   *  2. BOTTOM-NAV MEER-KNOP — vijfde item in de bottom-nav dat een
   *     opklapmenu opent met secundaire items (chauffeur: Welkom,
   *     Historie, Instellingen; passagier: Welkom). Opent BOVEN de
   *     bottom-nav zonder overlap met hoofditems.
   *
   * Beide hergebruiken de bestaande glassmorphism tokens (.glass-
   * strong + --glass-shadow + --glass-blur-strong) en paars primary
   * voor actieve items. Geen nieuwe kleur-tokens. Icon3D Ambilight-
   * gloed blijft intact — items gebruiken dezelfde glowRole als de
   * hoofditems (passenger violet / driver teal / neutral paars).
   * ========================================================== */

/* --- Meer-trigger (kebab/hamburger pill) ---
   * Spiegelt .theme-toggle geometrie (ronde glass-knop 2.5rem) zodat
   * de header-cluster visueel consistent blijft. Compact pictogram
   * met optionele tooltip; volledige labels alleen bij hover of in
   * het menu zelf. */

.meer-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: oklch(var(--glass-bg));
    backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    border: 1px solid oklch(var(--glass-border));
    box-shadow: var(--glass-shadow);
    color: oklch(var(--foreground));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }

.meer-trigger:hover:not(:disabled) {
    background-color: oklch(var(--glass-bg-strong));
    border-color: oklch(var(--glass-border-active));
    color: oklch(var(--primary));
  }

.meer-trigger:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }

/* Actieve indicator op de Meer-trigger — een klein paars puntje
     rechtsboven dat verschijnt wanneer een secundair item actief is.
     Hierdoor leest de Meer-knop als "hier zit je ergens onder". */

.meer-trigger[data-has-active="true"] {
    color: oklch(var(--primary));
    border-color: oklch(var(--glass-border-primary) / 0.55);
  }

.meer-trigger[data-has-active="true"]::after {
    content: "";
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 9999px;
    background-color: oklch(var(--primary));
    box-shadow: 0 0 0 2px oklch(var(--glass-bg-strong));
    pointer-events: none;
  }

/* Open-state — trigger blijft gemarkeerd wanneer menu open is */

.meer-trigger[data-open="true"] {
    background-color: oklch(var(--glass-bg-active));
    border-color: oklch(var(--glass-border-active));
    color: oklch(var(--primary));
  }

/* Kebab/hamburger icoon — drie puntjes of drie streepjes. Frontend
     wisselt op basis van schermbreedte; CSS levert enkel de geometrie. */

.meer-trigger-icon {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

.meer-trigger[data-open="true"] .meer-trigger-icon {
    transform: rotate(90deg);
  }

/* --- Meer-menu surface (portal overlay) ---
   * Glass-strong oppervlak met elevated schaduw. Positionering wordt
   * door de frontend via portal + inline-stijl gezet (boven bottom-nav
   * of onder header). z-index boven alle glas-knoppen (1000) en de
   * autocomplete-dropdown (1100) — 1300. */

.meer-menu {
    position: fixed;
    z-index: 1300;
    min-width: 14rem;
    max-width: calc(100vw - 1.5rem);
    background-color: oklch(var(--glass-bg-strong));
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.7);
    border: 1px solid oklch(var(--glass-border-active));
    border-radius: var(--radius);
    box-shadow: var(--glass-shadow), 0 16px 40px -12px oklch(0 0 0 / 0.35);
    overflow: hidden;
    padding: 0.375rem;
    animation: meer-menu-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

/* Close-state — frontend toggelt data-state="closed" voor uit-fade */

.meer-menu[data-state="closed"] {
    animation: meer-menu-out 0.18s cubic-bezier(0.4, 0, 0.2, 1) both;
    pointer-events: none;
  }

/* Sluit de menu-lijst af met interne scroll + overscroll-containment
     voor lange secundaire lijsten op korte schermen. */

.meer-menu-list {
    max-height: calc(100dvh - 10rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

/* --- Meer-item (rij in het menu) ---
   * Full-width rij met Icon3D + label. Aanraakdoel min 44px hoog.
   * Actief item krijgt paars-tint + paars linkerrand (spiegelt
   * autocomplete-item patroon). Hover = subtiele paars-tint. */

.meer-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    min-height: 2.75rem;
    border-radius: calc(var(--radius) - 2px);
    cursor: pointer;
    transition: background-color 0.15s ease-out, color 0.15s ease-out;
    border-left: 3px solid transparent;
    color: oklch(var(--foreground));
    text-align: left;
    width: 100%;
    background: transparent;
    border-top: 0;
    border-right: 1px solid transparent;
    border-bottom: 0;
    font-family: var(--font-body);
  }

.meer-item:hover:not(:disabled) {
    background-color: oklch(var(--glass-bg-primary) / 0.5);
    color: oklch(var(--primary));
  }

.meer-item:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: -2px;
  }

.meer-item[data-active="true"] {
    background-color: oklch(var(--glass-bg-active));
    border-left-color: oklch(var(--primary));
    color: oklch(var(--primary));
  }

.meer-item-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

.meer-item-label {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.005em;
    flex: 1;
    min-width: 0;
  }

.meer-item-hint {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    color: oklch(var(--muted-foreground));
    flex-shrink: 0;
  }

.meer-item[data-active="true"] .meer-item-hint {
    color: oklch(var(--primary) / 0.7);
  }

/* Chevron rechts voor submenu-indicator (optioneel) */

.meer-item-chevron {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: oklch(var(--muted-foreground));
    transition: transform 0.2s ease-out;
  }

.meer-item:hover .meer-item-chevron {
    color: oklch(var(--primary));
  }

/* --- Admin-variant — prominente paarse accent-stijl ---
   * Markeert de Admin-knop in het Meer-menu zodat deze direct opvalt
   * wanneer het menu opent. Paarse tint achtergrond, paarse linker
   * rand (dikker dan actief-item), paarse glow, bold label en paars
   * icoon. Werkt in zowel licht- als donker-modus via de --primary /
   * --glass-bg-primary tokens. Specificiteit (0,2,0) wint van de
   * basis .meer-item (0,1,0) en .meer-item[data-active] (0,2,0) — bij
   * gelijke specificiteit wint de later-gedefinieerde regel, dus deze
   * staat ná de data-active regel. */

.meer-item[data-variant="admin"] {
    background-color: oklch(var(--glass-bg-primary));
    border-left: 4px solid oklch(var(--primary));
    color: oklch(var(--primary));
    box-shadow: 0 0 0 1px oklch(var(--primary) / 0.25), 0 0 14px -4px
      oklch(var(--primary) / 0.45);
  }

.meer-item[data-variant="admin"] .meer-item-label {
    font-weight: 800;
    letter-spacing: 0.01em;
  }

.meer-item[data-variant="admin"]:hover:not(:disabled) {
    background-color: oklch(var(--glass-bg-primary-strong));
    border-left-color: oklch(var(--primary));
    color: oklch(var(--primary));
    box-shadow: 0 0 0 1px oklch(var(--primary) / 0.4), 0 0 20px -2px
      oklch(var(--primary) / 0.6);
  }

.meer-item[data-variant="admin"]:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: -2px;
  }

/* --- Meer-divider (subtiele scheiding tussen groepen) ---
   * Gebruikt om secundaire nav-items visueel te groeperen (bijv.
   * navigatie vs. account/instellingen). */

.meer-divider {
    height: 1px;
    margin: 0.375rem 0.5rem;
    background-color: oklch(var(--glass-border));
    border: 0;
  }

/* Sectie-label boven een groep items — klein, muted, uppercase. */

.meer-section-label {
    padding: 0.5rem 0.75rem 0.25rem;
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
  }

/* --- Meer-menu header (optionele titelbalk binnen het menu) ---
   * Voor de bottom-nav Meer-knop — een kleine titel "Meer" bovenaan
   * zodat het opklapmenu zichzelf verklaart. */

.meer-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 0.375rem;
  }

.meer-menu-title {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: oklch(var(--foreground));
  }

.meer-menu-close {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: oklch(var(--muted-foreground));
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color 0.2s ease-out, background-color 0.2s ease-out;
  }

.meer-menu-close:hover {
    color: oklch(var(--foreground));
    background-color: oklch(var(--glass-bg-strong));
  }

.meer-menu-close:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }

/* --- Meer-backdrop (klik-buiten om te sluiten) ---
   * Transparante overlay die de hele viewport afdekt om klik-buiten
   * te vangen. pointer-events: auto, maar visueel onzichtbaar. */

.meer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1290;
    background: transparent;
    pointer-events: auto;
  }

/* --- Bottom-nav Meer-knop (vijfde nav-item) ---
   * Spiegelt de geometrie van een hoofd-nav-item (Icon3D + label)
   * maar opent in plaats van direct te navigeren. Gebruikt dezelfde
   * .nav-link / .nav-label states voor visuele consistentie. */

.nav-meer-button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    transition: background-color 0.2s ease-out;
  }

.nav-meer-button:hover {
    background-color: oklch(var(--glass-bg) / 0.5);
  }

.nav-meer-button:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }

.nav-meer-button[data-open="true"] {
    background-color: oklch(var(--glass-bg-active));
  }

/* --- Meer-menu keyframes ---
   * Open: subtiele scale + fade van 96% → 100% (rustig, niet bouncy).
   * Close: omgekeerd, sneller. Origin afhankelijk van variant (header
   * = top-right, bottom-nav = bottom-center) — frontend zet via
   * inline transform-origin. */

@keyframes meer-menu-in {
    from {
      opacity: 0;
      transform: scale(0.96) translateY(4px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

@keyframes meer-menu-out {
    from {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
    to {
      opacity: 0;
      transform: scale(0.96) translateY(4px);
    }
  }

/* Subtiele actieve-indicator puls op de Meer-trigger puntje —
     een zacht 2s ademhaling zodat het puntje opvalt zonder te
     flitsen. Geen theatralische beweging. */

@keyframes nav-active-pulse {
    0%,
    100% {
      opacity: 0.85;
      transform: scale(1);
    }
    50% {
      opacity: 1;
      transform: scale(1.15);
    }
  }

.meer-trigger[data-has-active="true"]::after {
    animation: nav-active-pulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }

/* --- Reduced-motion: Meer-menu animaties uit, puntje statisch ---
   * Menu verschijnt/verdwijnt instant; actieve-puls stopt. De puntje-
     indicator blijft zichtbaar (geen beweging, alleen status). */

@media (prefers-reduced-motion: reduce) {
    .meer-menu,
    .meer-menu[data-state="closed"],
    .meer-trigger .meer-trigger-icon,
    .meer-trigger[data-has-active="true"]::after {
      animation: none;
      transition: none;
    }
  }

/* ============================================================
   * Wachtrij-meldingen — semantische notice-cards.
   * Drie types: info (blauw), waarschuwing (paars), succes (groen).
   * Elke melding heeft een gekleurde linkerrand-strook (4px), een
   * subtiele getinte achtergrond, en duidelijke typografische hiërarchie.
   * Mobiel-vriendelijk: voldoende padding, grote aanraakdoelen.
   * ========================================================== */

.notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius);
    border-left-width: 4px;
    border-left-style: solid;
    border-top: 1px solid oklch(var(--border));
    border-right: 1px solid oklch(var(--border));
    border-bottom: 1px solid oklch(var(--border));
    animation: notice-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

.notice-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.notice-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

.notice-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.3;
  }

.notice-body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: oklch(var(--muted-foreground));
  }

.notice-action {
    margin-top: 0.5rem;
  }

.notice-info {
    background-color: oklch(var(--notice-info-bg));
    border-left-color: oklch(var(--notice-info-border));
  }

.notice-info .notice-title {
    color: oklch(var(--notice-info-fg));
  }

.notice-warning {
    background-color: oklch(var(--notice-warning-bg));
    border-left-color: oklch(var(--notice-warning-border));
  }

.notice-warning .notice-title {
    color: oklch(var(--notice-warning-fg));
  }

.notice-success {
    background-color: oklch(var(--notice-success-bg));
    border-left-color: oklch(var(--notice-success-border));
  }

.notice-success .notice-title {
    color: oklch(var(--notice-success-fg));
  }

/* Wachtrij-positie badge — groot paars cijfer in cirkel. */

.queue-position-badge {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.25rem;
    background-color: oklch(var(--primary) / 0.15);
    color: oklch(var(--primary));
    border: 2px solid oklch(var(--primary) / 0.4);
  }

@keyframes notice-slide-in {
    from {
      opacity: 0;
      transform: translateX(-8px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

@media (prefers-reduced-motion: reduce) {
    .autocomplete-dropdown,
    .notice {
      animation: none;
    }
  }

/* ============================================================
   * 1. Thema-schakelaar — lichte/donker toggle-knop in header.
   *    Spiegel de LanguageSwitcher-pill: ronde glass-knop met
   *    paars accent bij focus/active. Icon wisselt zon/maan.
   *    Geen nieuwe kleur-tokens — hergebruikt glass + primary.
   * ========================================================== */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: oklch(var(--glass-bg));
    backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    border: 1px solid oklch(var(--glass-border));
    box-shadow: var(--glass-shadow);
    color: oklch(var(--foreground));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

.theme-toggle:hover:not(:disabled) {
    background-color: oklch(var(--glass-bg-strong));
    border-color: oklch(var(--glass-border-active));
    color: oklch(var(--primary));
  }

.theme-toggle:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }

.theme-toggle[data-active="true"] {
    background-color: oklch(var(--glass-bg-active));
    border-color: oklch(var(--glass-border-active));
    color: oklch(var(--primary));
  }

/* Icon cross-fade tussen zon/maan. */

.theme-toggle-icon {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s
      ease-out;
  }

.theme-toggle-icon-sun {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }

.theme-toggle-icon-moon {
    transform: rotate(-90deg) scale(0);
    opacity: 0;
    position: absolute;
  }

.dark .theme-toggle-icon-sun {
    transform: rotate(90deg) scale(0);
    opacity: 0;
    position: absolute;
  }

.dark .theme-toggle-icon-moon {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }

/* ============================================================
   * 2. Chatpaneel — zijpaneel dat opent vanuit bestaande
   *    Chat-knoppen. Bevat berichtbubbels (eigen/inkomend),
   *    vertaal-badge, en een glas-invoer. Geen nieuwe kleuren —
   *    hergebruikt card / muted / primary / glass tokens.
   * ========================================================== */

.chat-panel {
    display: flex;
    flex-direction: column;
    background-color: oklch(var(--card));
    border: 1px solid oklch(var(--border));
    border-radius: var(--radius);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
    animation: chat-panel-slide 0.28s cubic-bezier(0.4, 0, 0.2, 1) both;
    /* BUGFIX: dvh (dynamic viewport height) als robuuste fallback voor
       moderne mobiele browsers. De inline style (height: panelHeightPx)
       uit ChatPanel is de primaire hoogte-bron en wint via specificiteit;
       deze max-height vangt het zeldzame geval op waarin de inline
       waarde nog niet is herberekend na een snelle keyboard-wissel.
       60dvh komt overeen met de oorspronkelijke 60vh intentie maar
       past zich aan aan de dynamische viewport (exclusief browser-
       chrome op mobiel). 480px behoudt de desktop-cap. */
    max-height: min(60dvh, 480px);
  }

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background-color: oklch(var(--glass-bg));
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border-bottom: 1px solid oklch(var(--border));
  }

.chat-thread {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background-color: oklch(var(--background));
  }

.chat-bubble {
    max-width: 80%;
    padding: 0.625rem 0.875rem;
    border-radius: calc(var(--radius) + 0.25rem);
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.4;
    word-wrap: break-word;
    animation: chat-bubble-in 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

/* Eigen bericht — paars-tint glas, rechts uitgelijnd. */

.chat-bubble-own {
    align-self: flex-end;
    background-color: oklch(var(--glass-bg-primary));
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border: 1px solid oklch(var(--glass-border-primary));
    color: oklch(var(--foreground));
    border-bottom-right-radius: 0.25rem;
  }

/* Inkomend bericht — muted/card glas, links uitgelijnd. */

.chat-bubble-incoming {
    align-self: flex-start;
    background-color: oklch(var(--muted));
    border: 1px solid oklch(var(--border));
    color: oklch(var(--foreground));
    border-bottom-left-radius: 0.25rem;
  }

/* Vertaal-badge — kleine pill onder een vertaald bericht. */

.chat-translate-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.375rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    background-color: oklch(var(--primary) / 0.12);
    color: oklch(var(--primary));
    border: 1px solid oklch(var(--primary) / 0.3);
  }

/* Oorspronkelijke tekst (ingeklapte weergave) — muted. */

.chat-bubble-original {
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px dashed oklch(var(--border));
    font-size: 0.8125rem;
    color: oklch(var(--muted-foreground));
    font-style: italic;
  }

.chat-meta {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    color: oklch(var(--muted-foreground));
    margin-top: 0.25rem;
  }

.chat-bubble-own .chat-meta {
    text-align: right;
  }

.chat-input-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* BUGFIX: expliciet width:100% + box-sizing:border-box zodat de
       invoerbalk (een <form>) altijd de volledige panel-breedte vult
       en padding nooit de breedte laat overlopen. Zonder dit kan een
       flex-item in een flex-column parent in sommige engines kleiner
       of breder renderen dan de panel-rand, waardoor de verzendknop
       door de schermrand wordt afgesneden op smalle telefoons. */
    width: 100%;
    box-sizing: border-box;
    /* BUGFIX: overflow:hidden beperkt de Icon3D Ambilight-gloed
       (inset:-12% -18% -28% -18% op .icon3d::before) tot de bar-rand.
       De gloed mag niet buiten de invoerbalk stralen — anders steekt
       de verzendknop-gloed door de panel-rand op een 375px telefoon.
       De bar is de onderste sectie van het paneel; bovenkant afsnijden
       is visueel neutraal (de bar heeft een eigen border-top). */
    overflow: hidden;
    /* BUGFIX: safe-area-inset-bottom padding zodat de invoerbalk (en
       verzendknop) altijd klikbaar blijven boven de home-indicator op
       iPhones met notch/Dynamic Island, en boven eventuele browser-
       chrome. env(safe-area-inset-bottom) is 0 op apparaten zonder
       safe-area, dus dit is een no-op op desktop. De inline
       panelHeightPx uit ChatPanel positioneert het paneel boven het
       keyboard; deze padding garandeert dat de verzendknop niet onder
       de home-indicator verdwijnt. */
    padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid oklch(var(--border));
    background-color: oklch(var(--card));
  }

.chat-input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 9999px;
    background-color: oklch(var(--muted));
    border: 1px solid oklch(var(--border));
    color: oklch(var(--foreground));
    font-family: var(--font-body);
    font-size: 0.875rem;
  }

.chat-input:focus {
    outline: none;
    border-color: oklch(var(--ring));
    box-shadow: 0 0 0 2px oklch(var(--ring) / 0.25);
  }

.chat-send-button {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: oklch(var(--glass-bg-primary));
    backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    border: 1px solid oklch(var(--glass-border-primary));
    color: oklch(var(--primary));
    box-shadow: var(--glass-shadow-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

.chat-send-button:hover:not(:disabled) {
    background-color: oklch(var(--glass-bg-primary-strong));
    border-color: oklch(var(--primary));
  }

.chat-send-button:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }

.chat-send-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

@keyframes chat-panel-slide {
    from {
      opacity: 0;
      transform: translateX(16px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

@keyframes chat-bubble-in {
    from {
      opacity: 0;
      transform: translateY(6px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

/* ============================================================
   * 3. Zoekbalk — geschiedenistab. Glas-invoer met paars
   *    focus-ring en subtiele zoek-icoon. Hergebruikt
   *    glass-input + ring tokens. Geen nieuwe kleuren.
   * ========================================================== */

.history-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
  }

.history-search-input {
    width: 100%;
    padding: 0.625rem 0.875rem 0.625rem 2.5rem;
    border-radius: 9999px;
    background-color: oklch(var(--glass-bg));
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border: 1px solid oklch(var(--glass-border));
    color: oklch(var(--foreground));
    font-family: var(--font-body);
    font-size: 0.9375rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

.history-search-input::-moz-placeholder {
    color: oklch(var(--muted-foreground));
  }

.history-search-input::placeholder {
    color: oklch(var(--muted-foreground));
  }

.history-search-input:focus {
    outline: none;
    border-color: oklch(var(--ring));
    background-color: oklch(var(--glass-bg-strong));
    box-shadow: 0 0 0 3px oklch(var(--ring) / 0.22);
  }

.history-search-icon {
    position: absolute;
    left: 0.875rem;
    width: 1.125rem;
    height: 1.125rem;
    color: oklch(var(--muted-foreground));
    pointer-events: none;
  }

.history-search-clear {
    position: absolute;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: oklch(var(--muted-foreground));
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color 0.2s ease-out;
  }

.history-search-clear:hover {
    color: oklch(var(--primary));
  }

/* Highlight-markering voor zoektreffer in geschiedenis-rijen. */

.history-search-match {
    background-color: oklch(var(--primary) / 0.22);
    color: oklch(var(--foreground));
    border-radius: 0.125rem;
    padding: 0 0.0625rem;
    font-weight: 600;
  }

/* ============================================================
   * 4. Pushmeldingen — toast-stijl voor in-app meldingen.
   *    Drie types: info (blauw), waarschuwing (paars), succes
   *    (groen). Hergebruikt notice-* tokens + glassmorphism.
   *    Schuift in van rechtsboven (desktop) / boven (mobiel).
   * ========================================================== */

.push-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius);
    background-color: oklch(var(--glass-bg-strong));
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.6);
    border: 1px solid oklch(var(--glass-border));
    border-left-width: 4px;
    border-left-style: solid;
    box-shadow: var(--glass-shadow);
    min-width: 18rem;
    max-width: 24rem;
    animation: push-toast-in 0.32s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

.push-toast-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.push-toast-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

.push-toast-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.25;
    color: oklch(var(--foreground));
  }

.push-toast-body {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: oklch(var(--muted-foreground));
  }

.push-toast-close {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: oklch(var(--muted-foreground));
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color 0.2s ease-out;
  }

.push-toast-close:hover {
    color: oklch(var(--foreground));
  }

.push-toast-info {
    border-left-color: oklch(var(--notice-info-border));
  }

.push-toast-info .push-toast-icon {
    color: oklch(var(--notice-info-fg));
  }

.push-toast-warning {
    border-left-color: oklch(var(--notice-warning-border));
  }

.push-toast-warning .push-toast-icon {
    color: oklch(var(--notice-warning-fg));
  }

.push-toast-success {
    border-left-color: oklch(var(--notice-success-border));
  }

.push-toast-success .push-toast-icon {
    color: oklch(var(--notice-success-fg));
  }

/* Actie-knop binnen een push-toast (optioneel). */

.push-toast-action {
    margin-top: 0.375rem;
    align-self: flex-start;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    background-color: oklch(var(--glass-bg-primary));
    border: 1px solid oklch(var(--glass-border-primary));
    color: oklch(var(--primary));
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

.push-toast-action:hover {
    background-color: oklch(var(--glass-bg-primary-strong));
    border-color: oklch(var(--primary));
  }

/* Urgent / tijdgevoelig push-toast variant — rood-oranje accent.
     Spiegelt de notice-urgent tokens voor hoge-prioriteit ride-
     request meldingen die door Focus-modi heen breken (Uber-style). */

.push-toast-urgent {
    border-left-color: oklch(var(--notice-urgent-border));
  }

.push-toast-urgent .push-toast-icon {
    color: oklch(var(--notice-urgent-fg));
  }

.push-toast-urgent .push-toast-title {
    color: oklch(var(--notice-urgent-fg));
  }

/* "TIJDGEVOELIG" flag-pill bovenaan een urgent toast. */

.push-toast-urgent-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background-color: oklch(var(--notice-urgent-bg));
    color: oklch(var(--notice-urgent-fg));
    border: 1px solid oklch(var(--notice-urgent-border) / 0.4);
    margin-bottom: 0.25rem;
    align-self: flex-start;
  }

/* ============================================================
   * 5. Push-instellingenpagina — /driver/settings kaarten.
   *    Instellingen-kaarten die push-voorkeuren groeperen:
   *    meldingen aan/uit, geluid, trillen, voorbeeld-melding,
   *    PWA-installatie. Hergebruikt glass + notice-urgent +
   *    pwa-accent tokens. Mobiel-vriendelijk: grote touch-
   *    doelen, duidelijke toggles, rij-dividers.
   * ========================================================== */

.settings-card {
    background-color: oklch(var(--settings-card-bg));
    border: 1px solid oklch(var(--settings-card-border));
    border-radius: var(--radius);
    box-shadow: var(--settings-card-shadow);
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

.settings-card[data-active="true"] {
    background-color: oklch(var(--settings-card-bg-active));
    border-color: oklch(var(--settings-card-border-active));
    box-shadow: var(--settings-card-shadow-active);
  }

.settings-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.125rem;
    border-bottom: 1px solid oklch(var(--settings-row-divider));
  }

.settings-card-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: calc(var(--radius) - 2px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: oklch(var(--glass-bg-primary));
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border: 1px solid oklch(var(--glass-border-primary));
    color: oklch(var(--primary));
  }

.settings-card-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.25;
    color: oklch(var(--foreground));
  }

.settings-card-desc {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: oklch(var(--muted-foreground));
    margin-top: 0.125rem;
  }

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid oklch(var(--settings-row-divider));
    min-height: 3.5rem;
  }

.settings-row:last-child {
    border-bottom: 0;
  }

.settings-row-label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9375rem;
    color: oklch(var(--foreground));
  }

.settings-row-hint {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: oklch(var(--muted-foreground));
    margin-top: 0.125rem;
  }

.settings-row[data-disabled="true"] {
    opacity: 0.55;
  }

.settings-row[data-disabled="true"] .settings-row-label {
    color: oklch(var(--muted-foreground));
  }

/* Toggle-switch — iOS-stijl schuifschakelaar voor push-voorkeuren. */

.settings-toggle {
    flex-shrink: 0;
    position: relative;
    width: 3rem;
    height: 1.75rem;
    border-radius: 9999px;
    background-color: oklch(var(--settings-toggle-off));
    border: 1px solid oklch(var(--border));
    cursor: pointer;
    transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

.settings-toggle[data-on="true"] {
    background-color: oklch(var(--settings-toggle-on));
    border-color: oklch(var(--settings-toggle-on));
  }

.settings-toggle-thumb {
    position: absolute;
    top: 50%;
    left: 0.125rem;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 9999px;
    background-color: oklch(var(--settings-toggle-off-fg));
    box-shadow: 0 1px 3px -1px oklch(0 0 0 / 0.3);
    transform: translateY(-50%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color
      0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

.settings-toggle[data-on="true"] .settings-toggle-thumb {
    transform: translateX(1.25rem) translateY(-50%);
    background-color: oklch(var(--settings-toggle-on-fg));
  }

.settings-toggle:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }

/* Voorbeeld-melding preview-knop — toont een voorbeeld push-toast. */

.settings-preview-btn {
    flex-shrink: 0;
    padding: 0.5rem 0.875rem;
    border-radius: 9999px;
    background-color: oklch(var(--glass-bg-primary));
    border: 1px solid oklch(var(--glass-border-primary));
    color: oklch(var(--primary));
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

.settings-preview-btn:hover:not(:disabled) {
    background-color: oklch(var(--glass-bg-primary-strong));
    border-color: oklch(var(--primary));
  }

.settings-preview-btn:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }

/* ============================================================
   * 6. PWA-elementen — manifest/installatie/status.
   *    "Installeer app" CTA-blok, PWA-status-indicator, en
   *    installatie-stappen. Hergebruikt pwa-accent tokens.
   * ========================================================== */

.pwa-card {
    background-color: oklch(var(--pwa-accent-bg));
    border: 1px solid oklch(var(--pwa-accent-border));
    border-radius: var(--radius);
    padding: 1rem 1.125rem;
  }

.pwa-status-dot {
    display: inline-flex;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background-color: oklch(var(--pwa-installed-fg));
    box-shadow: 0 0 0 3px oklch(var(--pwa-installed-fg) / 0.18);
  }

.pwa-status-dot[data-installed="false"] {
    background-color: oklch(var(--muted-foreground));
    box-shadow: 0 0 0 3px oklch(var(--muted-foreground) / 0.18);
  }

.pwa-install-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    border-radius: 9999px;
    background-color: oklch(var(--glass-bg-primary));
    backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    border: 1px solid oklch(var(--glass-border-primary));
    box-shadow: var(--glass-shadow-primary);
    color: oklch(var(--primary));
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

.pwa-install-btn:hover:not(:disabled) {
    background-color: oklch(var(--glass-bg-primary-strong));
    border-color: oklch(var(--primary));
  }

.pwa-install-btn:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }

.pwa-install-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

/* ============================================================
   * 6b. PWA-installatie banner — passagiers install-prompt.
   *     Zwevende banner boven de passagiers-content en boven de
   *     vaste PassengerNav (fixed bottom-0 z-[1200]). De banner
   *     zit op z-[1300] zodat hij altijd boven de nav zweeft, ook
   *     boven fixed inset-0 map-pagina's (BookingPage/WaitingPage).
   *     Hergebruikt --pwa-accent-bg/border/fg tokens voor visuele
   *     consistentie met de landingspagina install-CTA. Mobiel-
   *     vriendelijk: grote touch-doelen, truncatie, veilige
   *     bottom-offset boven de 3.5rem nav.
   * ========================================================== */

.pwa-install-banner {
    position: fixed;
    left: 50%;
    /* Zweeft boven de vaste PassengerNav (h-14 = 3.5rem) met een
       kleine veiligheidsmarge (0.5rem) zodat de banner de nav
       nooit raakt of overlapt. */
    bottom: calc(var(--bottom-nav-height, 3.5rem) + 0.5rem);
    transform: translateX(-50%);
    z-index: 1300;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: calc(100% - 1.5rem);
    max-width: 32rem;
    padding: 0.75rem 0.875rem;
    border-radius: 1rem;
    background: linear-gradient(
      135deg,
      oklch(var(--pwa-accent-bg)) 0%,
      oklch(var(--glass-bg-strong)) 100%
    );
    border: 1px solid oklch(var(--pwa-accent-border));
    box-shadow: 0 0 0 1px oklch(var(--pwa-accent-fg) / 0.12), 0 8px 24px -8px
      oklch(0 0 0 / 0.45), 0 2px 8px -4px oklch(0 0 0 / 0.3);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    color: oklch(var(--foreground));
    animation: pwa-install-banner-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s
      cubic-bezier(0.4, 0, 0.2, 1);
  }

.pwa-install-banner-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

.pwa-install-banner-title {
    font-family: var(--font-display), sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: oklch(var(--foreground));
    /* Truncatie-beveiliging voor lange vertalingen op smalle
       schermen; titel mag op één regel blijven. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

.pwa-install-banner-subtitle {
    font-family: var(--font-body), sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.35;
    color: oklch(var(--muted-foreground));
    /* Ondertitel mag op maximaal twee regels vóór truncatie zodat
       korte uitleg zichtbaar blijft zonder de banner te laten
       groeien op smalle schermen. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

.pwa-install-banner-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

/* Installatie-knop — hergebruikt de bestaande .install-button
     klasse (gradient-rand, pulse-glow) maar overschrijft width
     naar auto en verkleint padding/font voor de compacte banner-
     context. Min-hoogte 44px voor mobiele touch-toegankelijkheid. */

.pwa-install-banner-install {
    width: auto;
    min-height: 2.75rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    border-radius: 9999px;
  }

/* Afwijs-knop — subtiele icon-only knop met 44px touch-doel.
     Geen eigen achtergrond zodat de nadruk op de install-knop
     blijft; wel duidelijke hover/focus states. */

.pwa-install-banner-dismiss {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background-color: transparent;
    border: 1px solid oklch(var(--border) / 0.6);
    color: oklch(var(--muted-foreground));
    cursor: pointer;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color
      0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

.pwa-install-banner-dismiss:hover {
    background-color: oklch(var(--accent));
    border-color: oklch(var(--border));
    color: oklch(var(--foreground));
  }

.pwa-install-banner-dismiss:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }

/* Spinner — getoond tijdens de native beforeinstallprompt. */

.pwa-install-banner-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    border: 2px solid oklch(var(--primary-foreground) / 0.35);
    border-top-color: oklch(var(--primary-foreground));
    animation: pwa-install-banner-spin 0.7s linear infinite;
  }

@keyframes pwa-install-banner-in {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(0.75rem) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(1);
    }
  }

@keyframes pwa-install-banner-spin {
    to {
      transform: rotate(360deg);
    }
  }

/* Responsive — op zeer smalle schermen (≤ 360px) verkleint de
     banner padding/gap zodat titel + knoppen altijd passen zonder
     horizontaal scrollen of tekst-afsnede op de knoppen. */

@media (max-width: 360px) {
    .pwa-install-banner {
      gap: 0.5rem;
      padding: 0.625rem 0.75rem;
      width: calc(100% - 1rem);
    }
    .pwa-install-banner-install {
      padding: 0.5rem 0.75rem;
    }
    .pwa-install-banner-dismiss {
      width: 2.5rem;
      height: 2.5rem;
    }
  }

/* prefers-reduced-motion — schakel alle banner-animaties uit
     (entrance, spinner-rotatie, install-button pulse) maar behoud
     de statische spinner-zichtbaarheid zodat de gebruiker ziet dat
     de installatie bezig is. */

@media (prefers-reduced-motion: reduce) {
    .pwa-install-banner {
      animation: none;
      transition: none;
    }
    .pwa-install-banner-spinner {
      animation: none;
      /* Vervang rotatie door een statische halve cirkel zodat de
         spinner nog steeds als "bezig-indicator" herkenbaar is. */
      border-top-color: oklch(var(--primary-foreground));
    }
  }

/* ==========================================================
   * PWA-INSTALL FAB — persistente zwevende actieknop.
   * Altijd zichtbaar zolang canInstall true (ongeacht dismiss),
   * gemonteerd in App.tsx binnen PassengerLayout als sibling van
   * de PwaInstallBanner. Triggert op Android de native
   * beforeinstallprompt (promptInstall) en opent op iOS Safari de
   * InstallGuideModal met handmatige instructies.
   *
   * POSITIONERING (REPARATIE): rechtsboven, ONDER de vaste
   * PassengerTopBar (h-14 = 3.5rem). Voorheen stond de FAB
   * rechtsonder (bottom: calc(3.5rem + 1rem)) — daar zweeft de
   * DashboardBottomSheet (fixed bottom-0, tot 88dvh hoog) bovenop,
   * waardoor de FAB exact op de 'rit aanvragen'-knop onderaan het
   * scrollbare boekingsformulier viel en niet betrouwbaar klikbaar
   * was. Door de FAB naar rechtsboven te verplaatsen (top i.p.v.
   * bottom, net onder de topbar) komt hij volledig buiten de
   * verticale band van de bottom-sheet, overlapt hij de rit-knop
   * nooit, en blijft hij altijd tappable — ongeacht de scroll-
   * stand van het formulier.
   *
   * Z-INDEX (REPARATIE): z-index 1500 — boven de bottom-sheet
   * (z-[1100]), de PassengerNav (z-[1200]), de PassengerTopBar
   * (z-[1300]) en de chat/payment FAB's (z-[1400]) zodat geen
   * enkel ander vast/vloatinge element de FAB kan bedekken. De FAB
   * wordt in PassengerLayout als sibling van de Outlet gemonteerd
   * (root stacking context), dus zijn z-index is niet opgesloten in
   * de BookingPage motion.div (z-0) stacking context.
   *
   * POINTER-EVENTS (REPARATIE): expliciet pointer-events: auto op
   * de FAB-knop zelf. De InstallGuideModal rendert null wanneer
   * gesloten (geen wrapper die clicks kan onderscheppen), maar de
   * expliciete verklaring garandeert dat geen enkele toekomstige
   * CSS-regel de FAB per ongeluk pointer-events: none kan geven.
   *
   * Hergebruikt --pwa-accent-bg/border/fg tokens voor visuele
   * consistentie met de landingspagina install-CTA en de
   * PwaInstallBanner. Pulse-glow animatie consistent met
   * .install-button (install-button-pulse keyframe uit
   * tailwind.config.js) zodat de FAB dezelfde aandacht-trekker
   * gebruikt als de primaire install-knop. Van der Valk kleur-
   * palet ongewijzigd.
   * ========================================================== */

.pwa-install-fab {
    position: fixed;
    right: 1rem;
    /* Rechtsboven, direct onder de vaste PassengerTopBar
       (h-14 = 3.5rem) met een kleine veiligheidsmarge (0.75rem)
       zodat de FAB de topbar nooit raakt of overlapt. Leest de
       --passenger-top-bar-height token (3.5rem op alle scopes)
       zodat de FAB consistent onder de topbar zweeft op elke
       passagiers-pagina. top i.p.v. bottom onttrekt de FAB aan de
       verticale band van de DashboardBottomSheet. */
    top: calc(var(--passenger-top-bar-height, 3.5rem) + 0.75rem);
    /* Boven alle vaste lagen: bottom-sheet (z-1100), nav (z-1200),
       topbar (z-1300), chat/payment FAB's (z-1400). */
    z-index: 1500;
    /* Expliciet auto — garandeert dat de FAB altijd clicks
       ontvangt, ook wanneer een voorouder of sibling toevallig
       pointer-events: none zou erven/instellen. */
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.75rem 1.125rem;
    border-radius: 9999px;
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    color: oklch(var(--primary-foreground));
    background: linear-gradient(
      135deg,
      oklch(var(--pwa-accent-bg)) 0%,
      oklch(var(--glass-bg-strong)) 100%
    );
    border: 1.5px solid oklch(var(--pwa-accent-border));
    box-shadow: 0 0 0 1px oklch(var(--pwa-accent-fg) / 0.4), 0 0 18px -4px
      oklch(var(--pwa-accent-fg) / 0.45), 0 0 32px -10px
      oklch(var(--pwa-accent-fg) / 0.35), 0 8px 24px -8px oklch(0 0 0 / 0.45);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    cursor: pointer;
    animation: install-button-pulse 2.6s ease-in-out infinite;
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s
      cubic-bezier(0.4, 0, 0.2, 1);
  }

.pwa-install-fab:hover {
    transform: translateY(-1px);
  }

.pwa-install-fab:active {
    transform: translateY(0) scale(0.98);
  }

.pwa-install-fab:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 3px;
  }

.pwa-install-fab:disabled {
    cursor: progress;
    opacity: 0.85;
    transform: none;
  }

/* Spinner — getoond tijdens de native beforeinstallprompt
     (installPending true). Hergebruikt de pwa-install-banner-spin
     keyframe voor consistentie met de PwaInstallBanner-spinner. */

.pwa-install-fab-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    border: 2px solid oklch(var(--primary-foreground) / 0.35);
    border-top-color: oklch(var(--primary-foreground));
    animation: pwa-install-banner-spin 0.7s linear infinite;
  }

/* Responsive — op zeer smalle schermen (≤ 360px) verkleint de
     FAB padding zodat de knop + label altijd passen zonder
     horizontaal scrollen. */

@media (max-width: 360px) {
    .pwa-install-fab {
      padding: 0.625rem 0.875rem;
      font-size: 0.8125rem;
    }
  }

/* prefers-reduced-motion — schakel de FAB pulse-glow en spinner-
     rotatie uit maar behoud de statische spinner-zichtbaarheid
     zodat de gebruiker ziet dat de installatie bezig is. */

@media (prefers-reduced-motion: reduce) {
    .pwa-install-fab {
      animation: none;
      transition: none;
    }
    .pwa-install-fab-spinner {
      animation: none;
      border-top-color: oklch(var(--primary-foreground));
    }
  }

@keyframes push-toast-in {
    from {
      opacity: 0;
      transform: translateY(-12px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

@media (prefers-reduced-motion: reduce) {
    .autocomplete-dropdown,
    .notice,
    .chat-panel,
    .chat-bubble,
    .push-toast {
      animation: none;
    }
  }

/* ============================================================
   * MOTION LAYER — cosmetische 3D- en bewegingslaag (uitbreiding).
   * Alle tokens hieronder zijn ADDITIEF — geen bestaande tokens worden
   * gewijzigd. De laag is theme-aware (light/dark via :root/.dark),
   * pointer-events-safe, en volledig geparkeerd achter
   * prefers-reduced-motion. Beweging is subtiel en nooit theatralisch:
   * "quiet confidence" boven de bestaande paars-on-navy glassmorphism.
   * ========================================================== */

/* --- Motion timing tokens (theme-onafhankelijk) --- */

:root {
    --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-duration-fast: 0.18s;
    --motion-duration-base: 0.3s;
    --motion-duration-slow: 0.5s;
    /* 3D-tilt amplitude — klein gehouden zodat kaartinhoud leesbaar blijft */
    --tilt-max: 6deg;
    --tilt-perspective: 800px;
    --tilt-scale: 1.012;
    /* Magnetische knop — maximale translatie als fractie van de knop-afmeting */
    --magnetic-strength: 0.18;
    --magnetic-duration: 0.25s;
    /* Cursor-glow straal in px (vast, theme-onafhankelijk) */
    --cursor-glow-size: 320px;
  }

/* --- 3D-tilt glow tokens (theme-aware) ---
   * Zachte radiale gloed die verschijnt op hover bij een tilt-kaart.
   * Light: warme witte basis met paars centrum, lage alpha.
   * Dark: dieper paars met navy-falloff, iets hogere alpha voor zichtbaarheid. */

:root {
    --tilt-glow-color: 0.7 0.18 55;
    --tilt-glow-alpha: 0.18;
    --tilt-glow-spread: 0.55;
    --tilt-glow-shadow: 0 18px 48px -16px oklch(0.16 0.005 260 / 0.22);
  }

.dark {
    --tilt-glow-color: 0.7 0.18 55;
    --tilt-glow-alpha: 0.28;
    --tilt-glow-spread: 0.6;
    --tilt-glow-shadow: 0 22px 56px -18px oklch(0 0 0 / 0.55);
  }

/* --- Float-glow tokens (theme-aware) ---
   * "Muur-soul" / tv-aan-de-muur LED-backlight effect: een zachte, diffuse
   * radiale gloed ONDER/ACHTER de kaart die het gevoel geeft dat de kaart
   * los van de achtergrond zweeft — als een tv die aan de muur hangt met een
   * LED-backlight erachter. Dit is een NIEUW, STATISCH effect (altijd aan,
   * niet hover-geactiveerd) — de bestaande .motion-tilt::before is een
   * glow aan de bovenkant op hover; dit is een glow eronder die altijd brandt.
   *
   * De gloed gebruikt de accentkleur van de rand:
   *  - passagier: violet #327BFF
   *  - chauffeur: teal #22C55E
   * Alpha is laag gehouden (subtiele ambient gloed, geen neon). Dark-mode
   * heeft iets hogere alpha voor zichtbaarheid op navy. */

:root {
    --float-glow-alpha: 0.22;
    --float-glow-spread: 0.62;
  }

.dark {
    --float-glow-alpha: 0.32;
    --float-glow-spread: 0.66;
  }

/* --- Cursor-glow tokens (theme-aware) ---
   * Zachte lichtvlek die de muis volgt. Lage opacity, pointer-events:none.
   * Light: warm wit (subtiele verlichting op off-white achtergrond).
   * Dark: warm paars (lichtvlek leest als "taxi-lantaarn" op navy). */

:root {
    --cursor-glow-color: 0.95 0.04 75;
    --cursor-glow-alpha: 0.1;
    --cursor-glow-falloff: 0.5;
  }

.dark {
    --cursor-glow-color: 0.7 0.18 55;
    --cursor-glow-alpha: 0.14;
    --cursor-glow-falloff: 0.45;
  }

/* --- Smooth theme transition (scoped, FOUC-safe) ---
   * next-themes gebruikt disableTransitionOnChange=true wat een abrupte swap
   * geeft. We voegen een SCOPED transition toe op kleur-eigenschappen die
   * pas actief wordt NADAT de theme-class is geset (via .theme-transition op
   * <html>). Hierdoor loopt de transition op de NIEUWE theme-waarden, niet
   * tijdens de swap-flash. Geen globale `* { transition: ... }` — dat zou
   * elke property animeren en de swap-flash verergeren. Alleen kleur-eigenschappen.
   * prefers-reduced-motion schakelt de transition uit (instant swap blijft). */

html.theme-transition,
  html.theme-transition body,
  html.theme-transition .glass,
  html.theme-transition .glass-strong,
  html.theme-transition .glass-active,
  html.theme-transition .glass-button,
  html.theme-transition button.glass-button,
  html.theme-transition .glass-button-primary,
  html.theme-transition button.glass-button-primary,
  html.theme-transition .glass-button-destructive,
  html.theme-transition button.glass-button-destructive,
  html.theme-transition .glass-input,
  html.theme-transition .glass-badge,
  html.theme-transition .theme-toggle,
  html.theme-transition .flat-map,
  html.theme-transition .payment-badge,
  html.theme-transition .chat-panel,
  html.theme-transition .chat-bubble-own,
  html.theme-transition .chat-bubble-incoming,
  html.theme-transition .push-toast,
  html.theme-transition .notice,
  html.theme-transition .settings-card,
  html.theme-transition .settings-toggle,
  html.theme-transition .settings-preview-btn,
  html.theme-transition .pwa-card,
  html.theme-transition .pwa-install-btn {
    transition:
      background-color 0.24s var(--motion-ease),
      color 0.24s var(--motion-ease),
      border-color 0.24s var(--motion-ease),
      fill 0.24s var(--motion-ease),
      stroke 0.24s var(--motion-ease),
      box-shadow 0.24s var(--motion-ease);
  }

/* --- 3D-tilt card (cosmetic, pure CSS-transform) ---
   * Wordt toegevoegd aan bestaande .glass kaarten via een extra utility-klasse
   * .motion-tilt. Tilt verandert geen inhoud, data of klikgedrag. LeafMap-
   * kaarten krijgen deze klasse NIET (pan/zoom/marker-klik blijven intact).
   * De gloed is een ::before pseudo-element met radiaal verloop dat op hover
   * van opacity 0 naar --tilt-glow-alpha fadet. */

.motion-tilt {
    transform-style: preserve-3d;
    transition: transform var(--motion-duration-base) var(--motion-ease-out),
      box-shadow var(--motion-duration-base) var(--motion-ease);
    will-change: transform;
  }

.motion-tilt::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
      circle at var(--tilt-x, 50%) var(--tilt-y, 50%),
      oklch(var(--tilt-glow-color) / var(--tilt-glow-alpha)) 0%,
      transparent var(--tilt-glow-spread)
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-duration-base) var(--motion-ease);
    z-index: 0;
  }

.motion-tilt:hover::before {
    opacity: 1;
  }

.motion-tilt:hover {
    box-shadow: var(--tilt-glow-shadow);
  }

/* Inhoud boven de gloed houden */

.motion-tilt > * {
    position: relative;
    z-index: 1;
  }

/* --- Float-glow ("muur-soul" / tv-aan-de-muur LED-backlight) ---
   * Een zachte, diffuse radiale gloed ONDER/ACHTER de kaart via een ::after
   * pseudo-element. De gloed is STATISCH (altijd zichtbaar, geen hover-
   * trigger, geen intensivering op hover — dat is bewust uitgesloten in
   * doNotBuild). Samen met de bestaande glass-schaduw geeft dit het gevoel
   * dat de kaart los van de achtergrond zweeft, als een tv aan de muur met
   * LED-backlight erachter.
   *
   * De ::after wordt groter dan de kaart (vooral naar onderen) en achter de
   * kaart geplaatst (z-index: -1). Omdat de kaart zelf een translucent glass
   * achtergrond heeft, schijnt de gloed door de randen heen en eronder —
   * precies het backlight-effect. De kaartinhoud blijft volledig leesbaar
   * (de gloed zit erachter, niet erop).
   *
   * Kleur-modifiers:
   *  - .motion-float-glow-passenger → violet #327BFF (passagiers-landingskleur)
   *  - .motion-float-glow-driver    → teal #22C55E (chauffeurs-landingskleur)
   *
   * Toegankelijkheid:
   *  - Puur cosmetisch (pointer-events: none, geen inhoud/data/klikgedrag).
   *  - prefers-reduced-motion: de gloed mag STATISCH blijven staan (per
   *    requirement); alleen eventuele beweging wordt uitgezet. Omdat deze
   *    gloed geen animatie heeft, blijft hij onder reduced-motion zichtbaar.
   *    TiltCard's tilt-rotatie wordt door TiltCard zelf uitgezet bij
   *    reduced-motion; de statische gloed blijft.
   *  - Werkt op mobiel (geen hover nodig — gloed is altijd aan) en desktop
   *    zonder layout te breken (::after is absoluut, geen layout-shift). */

.motion-float-glow {
    position: relative;
    /* isolation: isolate garandeert dat ::after (z-index: -1) binnen deze
       stacking context blijft en niet achter de pagina-achtergrond verdwijnt.
       Zonder dit zou z-index: -1 de gloed achter ancestor-achtergronden kunnen
       duwen (onzichtbaar) wanneer het element zelf geen stacking context
       creëert (bijv. TiltCard onder reduced-motion zonder transform). */
    isolation: isolate;
  }

.motion-float-glow::after {
    content: "";
    position: absolute;
    /* Glow concentreert zich ONDER/ACHTER de kaart: kleine inset aan de
       bovenkant en zijkanten, grote negatieve inset aan de onderkant zodat
       de halo als een zachte backlight onder de kaart uitstraalt. Dit geeft
       het "tv-aan-de-muur met LED-backlight eronder" gevoel zonder de
       kaartinhoud (boven/centrum) te verdunnen — tekst/iconen blijven
       leesbaar. */
    inset: -4% -8% -22% -8%;
    border-radius: inherit;
    background: radial-gradient(
      ellipse 100% 80% at 50% 100%,
      var(--float-glow-color, transparent) 0%,
      transparent var(--float-glow-spread, 0.62)
    );
    /* Achter de kaartinhoud (z-index: -1 binnen de kaart's stacking context).
       De kaart's eigen glass-bg en inhoud schilderen boven de gloed, dus de
       gloed is zichtbaar als halo rond/onder de randen en schijnt zacht door
       de translucent glass heen — het backlight-effect. */
    z-index: -1;
    pointer-events: none;
    /* Geen transition — statische gloed (geen hover-intensivering). */
  }

/* Passagiers-gloed — violet #327BFF (oklch-equivalent voor zachte gloed). */

.motion-float-glow-passenger::after {
    --float-glow-color: oklch(0.7 0.18 55 / var(--float-glow-alpha, 0.22));
  }

/* Chauffeurs-gloed — teal #22C55E (oklch-equivalent voor zachte gloed). */

.motion-float-glow-driver::after {
    --float-glow-color: oklch(0.85 0.13 85 / var(--float-glow-alpha, 0.22));
  }

/* --- Magnetic button (cosmetic transform-translate) ---
   * Wordt toegevoegd aan bestaande CTA-knoppen via .motion-magnetic. De
   * translatie is puur visueel via transform — onClick-handlers en klik-
   * registratie blijven onaangetast (geen delay, geen event-interceptie).
   * Frontend implementeert via useMotionValue+useSpring (motion/react); deze
   * klasse levert enkel de transition-fallback voor niet-JS / reduced-motion. */

.motion-magnetic {
    transition: transform var(--magnetic-duration) var(--motion-ease-out),
      box-shadow var(--motion-duration-base) var(--motion-ease);
    will-change: transform;
  }

/* --- Cursor-glow (cosmetic radial light spot) ---
   * Een vaste pointer-events:none overlay die de muis volgt. Frontend zet
   * de positie via CSS-variabelen --cursor-x / --cursor-y (geüpdatet door
   * een pointermove-listener). Uitgeschakeld op touch-apparaten (geen hover)
   * en bij prefers-reduced-motion. Lage opacity via --cursor-glow-alpha. */

.motion-cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--cursor-glow-size);
    height: var(--cursor-glow-size);
    margin-left: calc(var(--cursor-glow-size) / -2);
    margin-top: calc(var(--cursor-glow-size) / -2);
    transform: translate3d(var(--cursor-x, -100vw), var(--cursor-y, -100vh), 0);
    background: radial-gradient(
      circle,
      oklch(var(--cursor-glow-color) / var(--cursor-glow-alpha)) 0%,
      transparent var(--cursor-glow-falloff)
    );
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity var(--motion-duration-slow) var(--motion-ease);
    will-change: transform, opacity;
  }

/* Alleen zichtbaar op apparaten met fijne pointer (muis) — niet op touch */

@media (hover: hover) and (pointer: fine) {
    .motion-cursor-glow.is-active {
      opacity: 1;
    }
  }

/* --- Scroll-reveal (fade/slide-in, cosmetic) ---
   * Frontend gebruikt motion/react useInView om .is-visible te toggelen bij
   * in-view. Puur cosmetisch — geen layout-shift (geen height/width animatie).
   * Start-state is opacity:0 + kleine translatie; visible-state is reset. */

.motion-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--motion-duration-slow) var(--motion-ease-out),
      transform var(--motion-duration-slow) var(--motion-ease-out);
    will-change: opacity, transform;
  }

.motion-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

/* --- Reduced-motion: volledige motion-layer uitschakeling ---
   * Alle cosmetische beweging wordt instant. Tilt = geen rotatie, gloed =
   * statisch, magnetisch = geen translatie, cursor-glow = verborgen, scroll-
   * reveal = direct zichtbaar, theme-transition = instant swap. Bestaande
   * prefers-reduced-motion blokken (regels 588, 1014, 1440) blijven onaangetast;
   * dit is een aanvullend blok specifiek voor de motion-layer. */

@media (prefers-reduced-motion: reduce) {
    .motion-tilt,
    .motion-magnetic,
    .motion-reveal {
      transition: none;
      transform: none;
      opacity: 1;
    }
    .motion-tilt::before {
      display: none;
    }
    .motion-cursor-glow {
      display: none;
    }
    html.theme-transition,
    html.theme-transition body,
    html.theme-transition .glass,
    html.theme-transition .glass-strong,
    html.theme-transition .glass-active,
    html.theme-transition .glass-button,
    html.theme-transition button.glass-button,
    html.theme-transition .glass-button-primary,
    html.theme-transition button.glass-button-primary,
    html.theme-transition .glass-button-destructive,
    html.theme-transition button.glass-button-destructive,
    html.theme-transition .glass-input,
    html.theme-transition .glass-badge,
    html.theme-transition .theme-toggle,
    html.theme-transition .flat-map,
    html.theme-transition .payment-badge,
    html.theme-transition .chat-panel,
    html.theme-transition .chat-bubble-own,
    html.theme-transition .chat-bubble-incoming,
    html.theme-transition .push-toast,
    html.theme-transition .notice,
    html.theme-transition .settings-card,
    html.theme-transition .settings-toggle,
    html.theme-transition .settings-preview-btn,
    html.theme-transition .pwa-card,
    html.theme-transition .pwa-install-btn {
      transition: none;
    }
  }

/* Pagina-wrapper: donkere achtergrond, gecentreerde kolom,
     voldoende padding voor scherm-weergave. In print wordt dit
     gereset door @media print hieronder. */

.qr-sticker-page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    padding: 3rem 1.25rem;
    background: oklch(var(--background));
    color: oklch(var(--foreground));
    font-family: var(--font-body);
  }

/* Sticker-kaart: het printbare element. Goud accent-rand,
     donker oppervlak op scherm. In print → witruimte, geen rand. */

.qr-sticker-card {
    width: 100%;
    max-width: 22rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
    padding: 2.5rem 2rem;
    background: oklch(var(--qr-sticker-surface));
    border: 1.5px solid oklch(var(--qr-sticker-gold) / 0.5);
    border-radius: 1.25rem;
    box-shadow: 0 24px 60px -20px oklch(0 0 0 / 0.6), 0 0 0 1px
      oklch(var(--qr-sticker-gold) / 0.12), inset 0 1px 0
      oklch(0.98 0.005 260 / 0.04);
  }

/* Merk-rij: logo + woordmerk naast elkaar. */

.qr-sticker-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }

.qr-sticker-brand-logo {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
  }

.qr-sticker-brand-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    color: oklch(var(--foreground));
  }

/* QR-plaat: puur wit vlak met zwarte modules, hoge contrast,
     ruime quiet-zone. Geen glas-blur — print-veilig. */

.qr-sticker-qr {
    width: 14rem;
    height: 14rem;
    padding: 0.75rem;
    background: oklch(var(--qr-sticker-plate));
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px -10px oklch(0 0 0 / 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
  }

.qr-sticker-qr svg,
  .qr-sticker-qr img {
    width: 100%;
    height: 100%;
    display: block;
    /* Modules zwart, achtergrond wit — print-veilig. */
    color: oklch(var(--qr-sticker-module));
  }

/* Instructie-tekst: NL, gecentreerd, warme goud-tint. */

.qr-sticker-instructions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

.qr-sticker-instruction-main {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5;
    color: oklch(var(--qr-sticker-instruction));
  }

.qr-sticker-instruction-tip {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.5;
    color: oklch(var(--qr-sticker-instruction-soft));
  }

/* Print-knop: glas-knop met amber/goud tint (spiegelt
     .glass-button-primary patroon, maar hier goud-tint). */

.qr-sticker-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    color: oklch(var(--foreground));
    background: oklch(var(--qr-sticker-gold) / 0.12);
    border: 1.5px solid oklch(var(--qr-sticker-gold) / 0.55);
    border-radius: 9999px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s
      ease;
    box-shadow: 0 8px 24px -10px oklch(var(--qr-sticker-gold) / 0.4);
  }

.qr-sticker-print-btn:hover {
    background: oklch(var(--qr-sticker-gold) / 0.2);
    border-color: oklch(var(--qr-sticker-gold) / 0.8);
    box-shadow: 0 12px 32px -10px oklch(var(--qr-sticker-gold) / 0.55);
  }

.qr-sticker-print-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px oklch(var(--background)), 0 0 0 4px
      oklch(var(--qr-sticker-gold) / 0.7);
  }

@supports not (backdrop-filter) {
    .qr-sticker-print-btn {
      background: oklch(var(--qr-sticker-gold) / 0.18);
    }
  }

/* Actie-knoppen rij: Print + Delen naast elkaar, gelijke breedte,
     flexibele gap. Spiegelt de print-knop in radius/padding. */

.qr-sticker-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    flex-wrap: wrap;
  }

/* Primaire Delen-knop: zelfde radius/padding als .qr-sticker-print-btn,
     goud-accent via --qr-sticker-gold token. */

.qr-sticker-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    color: oklch(var(--foreground));
    background: oklch(var(--qr-sticker-gold) / 0.18);
    border: 1.5px solid oklch(var(--qr-sticker-gold) / 0.7);
    border-radius: 9999px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s
      ease;
    box-shadow: 0 8px 24px -10px oklch(var(--qr-sticker-gold) / 0.45);
  }

.qr-sticker-share-btn:hover:not(:disabled) {
    background: oklch(var(--qr-sticker-gold) / 0.28);
    border-color: oklch(var(--qr-sticker-gold) / 0.9);
    box-shadow: 0 12px 32px -10px oklch(var(--qr-sticker-gold) / 0.6);
  }

.qr-sticker-share-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px oklch(var(--background)), 0 0 0 4px
      oklch(var(--qr-sticker-gold) / 0.7);
  }

.qr-sticker-share-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

.qr-sticker-share-btn-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
  }

/* Responsive 2x2 fallback grid: WhatsApp / e-mail / SMS / kopiëren. */

.qr-sticker-share-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
    width: 100%;
  }

/* Grid-knoppen: zelfde radius/padding, icon + label. */

.qr-sticker-share-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.875rem;
    color: oklch(var(--foreground));
    background: oklch(var(--qr-sticker-gold) / 0.08);
    border: 1.5px solid oklch(var(--qr-sticker-gold) / 0.45);
    border-radius: 9999px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s
      ease;
  }

.qr-sticker-share-item:hover {
    background: oklch(var(--qr-sticker-gold) / 0.18);
    border-color: oklch(var(--qr-sticker-gold) / 0.75);
    box-shadow: 0 8px 24px -12px oklch(var(--qr-sticker-gold) / 0.5);
  }

.qr-sticker-share-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px oklch(var(--background)), 0 0 0 4px
      oklch(var(--qr-sticker-gold) / 0.7);
  }

.qr-sticker-share-item-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
  }

/* Toast: fixed onderaan, fade-in animatie, 4s zichtbaar (JS auto-dismiss),
     accent-achtergrond via --qr-sticker-gold. */

.qr-sticker-share-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.875rem;
    color: oklch(var(--foreground));
    background: oklch(var(--qr-sticker-gold) / 0.95);
    border: 1.5px solid oklch(var(--qr-sticker-gold) / 0.9);
    border-radius: 9999px;
    box-shadow: 0 12px 32px -10px oklch(0 0 0 / 0.5);
    z-index: 9999;
    animation: qr-sticker-toast-fade 4s ease forwards;
    pointer-events: none;
  }

@keyframes qr-sticker-toast-fade {
    0% {
      opacity: 0;
      transform: translate(-50%, 0.5rem);
    }
    10% {
      opacity: 1;
      transform: translate(-50%, 0);
    }
    85% {
      opacity: 1;
      transform: translate(-50%, 0);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, 0.5rem);
    }
  }

/* ============================================================
     HERONTWERP DASHBOARDS — Stap-iconen, zwevende kaart,
     aftel-icoon, GPS-keuze, foto-kaarten.
     Hergebruikt bestaande OKLCH tokens: --primary (blauw),
     --accent-green (jade), --foreground, --card, --border,
     --muted-foreground, --font-display, --font-body.
     Geen nieuwe kleur-tokens; alleen lokale layout-vars.
     ============================================================ */

/* Lokale tokens — alleen voor deze component-groep. */

.ride-step-rail,
  .floating-map-overlay,
  .proximity-countdown-ring,
  .gps-choice-button,
  .driver-photo-card,
  .vehicle-photo-card,
  .license-plate-photo-card {
    --ride-step-size: 2.75rem;
    --ride-step-gap: 1.5rem;
    --ride-step-line: 0.125rem;
    --ride-step-radius: 9999px;
    --map-overlay-blur: 0.5rem;
    --map-overlay-pad: 0.875rem;
    --proximity-ring-size: 3.5rem;
    --proximity-ring-stroke: 0.25rem;
    --gps-choice-radius: 1rem;
    --gps-choice-pad: 1rem 1.25rem;
    --photo-card-radius: 1.25rem;
    /* Foto domineert het icoon: grote thumb (8.5rem = 136px) met een
       kleine strook voor het label eronder. Beide foto-kaarten
       (chauffeur + voertuig) delen dezelfde afmetingen, aspect-ratio
       en radius zodat ze visueel identiek zijn. */
    --photo-thumb-size: 8.5rem;
    --photo-thumb-radius: 1rem;
  }

/* --- Stap-iconen (ride-step) --------------------------------
     Horizontale rail van iconen, verbonden door een dunne lijn.
     Actieve stap = jade-glow; voltooide stap = primary-blauw;
     toekomstige stap = muted border. Geen blok-gegevens, alleen
     iconen + korte labels eronder. */

.ride-step-rail {
    display: flex;
    align-items: flex-start;
    gap: var(--ride-step-gap);
    width: 100%;
    padding: 0 0.25rem;
  }

.ride-step-icon {
    position: relative;
    flex: 0 0 auto;
    width: var(--ride-step-size);
    height: var(--ride-step-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ride-step-radius);
    background: oklch(var(--card) / 0.6);
    border: 1.5px solid oklch(var(--border) / 0.7);
    color: oklch(var(--muted-foreground));
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    backdrop-filter: blur(var(--map-overlay-blur));
    transition:
      background 0.25s ease, border-color 0.25s ease, color 0.25s
      ease, box-shadow 0.25s ease, transform 0.25s ease;
    animation: ride-step-enter 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

.ride-step-icon-active {
    background: oklch(var(--accent-green) / 0.16);
    border-color: oklch(var(--accent-green) / 0.85);
    color: oklch(var(--accent-green));
    box-shadow: 0 0 18px -2px oklch(var(--accent-green) / 0.6), 0 0 32px -8px
      oklch(var(--accent-green) / 0.4), inset 0 0 10px -3px
      oklch(var(--accent-green) / 0.3);
    transform: scale(1.06);
  }

.ride-step-icon-done {
    background: oklch(var(--primary) / 0.14);
    border-color: oklch(var(--primary) / 0.55);
    color: oklch(var(--primary));
  }

/* Connector-lijn tussen opeenvolgende iconen — loopt van
     rechterkant van het ene icoon naar linkerkant van het volgende.
     Wordt ingekleurd jade zodra de stap voltooid is. */

.ride-step-connector {
    position: relative;
    flex: 1 1 auto;
    align-self: center;
    height: var(--ride-step-line);
    min-width: 1.5rem;
    margin-top: calc(var(--ride-step-size) / 2 - var(--ride-step-line) / 2);
    background: oklch(var(--border) / 0.55);
    border-radius: var(--ride-step-radius);
    transition: background 0.3s ease;
  }

.ride-step-connector-done {
    background: oklch(var(--accent-green) / 0.7);
    box-shadow: 0 0 8px -2px oklch(var(--accent-green) / 0.5);
  }

/* --- Zwevende kaart-overlay -------------------------------
     De kaart blijft dominant en zweeft bovenop de UI. Deze
     overlay's leggen zachte status-chips / instructies over de
     kaart heen zonder de kaart te verbergen — glassmorphism op
     --card met jade- of primary-tint. */

.floating-map-overlay {
    position: absolute;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--map-overlay-pad);
    background: oklch(var(--card) / 0.55);
    border: 1px solid oklch(var(--border) / 0.6);
    border-radius: 1rem;
    backdrop-filter: blur(var(--map-overlay-blur)) saturate(1.2);
    color: oklch(var(--foreground));
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.8125rem;
    box-shadow: 0 8px 24px -12px oklch(0 0 0 / 0.5);
    pointer-events: auto;
  }

/* Sterkere variant — gebruikt op de actieve stap (bijv. "Je gaat
     meneer Jan ophalen") met jade-glow rand. */

.floating-map-overlay-strong {
    background: oklch(var(--accent-green) / 0.18);
    border-color: oklch(var(--accent-green) / 0.7);
    color: oklch(var(--foreground));
    box-shadow: 0 0 18px -4px oklch(var(--accent-green) / 0.45), 0 8px 24px
      -12px oklch(0 0 0 / 0.5);
  }

/* --- Aftel-icoon (proximity-countdown) --------------------
     Ring met SVG-cirkel die leegloopt naarmate de chauffeur
     dichterbij komt. Tijd in het midden. Jade-glow pulseert. */

.proximity-countdown-ring {
    position: relative;
    width: var(--proximity-ring-size);
    height: var(--proximity-ring-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: oklch(var(--card) / 0.5);
    border: 1px solid oklch(var(--accent-green) / 0.45);
    backdrop-filter: blur(var(--map-overlay-blur));
    box-shadow: 0 0 18px -2px oklch(var(--accent-green) / 0.55), 0 0 32px -8px
      oklch(var(--accent-green) / 0.35), inset 0 0 10px -3px
      oklch(var(--accent-green) / 0.3);
    animation: proximity-ring-pulse 2.2s ease-in-out infinite;
  }

.proximity-countdown-ring svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
  }

.proximity-countdown-ring circle {
    fill: none;
    stroke-width: var(--proximity-ring-stroke);
    stroke-linecap: round;
  }

.proximity-countdown-ring .proximity-ring-track {
    stroke: oklch(var(--border) / 0.5);
  }

.proximity-countdown-ring .proximity-ring-progress {
    stroke: oklch(var(--accent-green));
    stroke-dasharray: 100;
    filter: drop-shadow(0 0 4px oklch(var(--accent-green) / 0.7));
    transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

.proximity-countdown-time {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.875rem;
    color: oklch(var(--foreground));
    letter-spacing: -0.01em;
  }

/* --- GPS-keuze (deep link naar Waze / Google Maps) --------
     Twee knopen naast elkaar. Geen in-app navigatie — opent de
     externe app via deep link. Waze = jade-tint, Google =
     primary-blauw-tint, zodat de keuze visueel onderscheidbaar is. */

.gps-choice-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: var(--gps-choice-pad);
    border-radius: var(--gps-choice-radius);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s
      ease, transform 0.18s ease;
    animation: gps-choice-tap 0.24s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

.gps-choice-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px oklch(var(--background)), 0 0 0 4px
      oklch(var(--primary) / 0.7);
  }

/* Waze — jade accent. */

.gps-choice-button-waze {
    background: oklch(var(--accent-green) / 0.14);
    border: 1.5px solid oklch(var(--accent-green) / 0.6);
    color: oklch(var(--accent-green));
  }

.gps-choice-button-waze:hover {
    background: oklch(var(--accent-green) / 0.22);
    border-color: oklch(var(--accent-green) / 0.85);
    box-shadow: 0 0 18px -4px oklch(var(--accent-green) / 0.5), 0 8px 24px -12px
      oklch(0 0 0 / 0.45);
  }

.gps-choice-button-waze:active {
    transform: scale(0.97);
  }

/* Google Maps — primary-blauw accent. */

.gps-choice-button-google {
    background: oklch(var(--primary) / 0.12);
    border: 1.5px solid oklch(var(--primary) / 0.55);
    color: oklch(var(--primary));
  }

.gps-choice-button-google:hover {
    background: oklch(var(--primary) / 0.2);
    border-color: oklch(var(--primary) / 0.8);
    box-shadow: 0 0 18px -4px oklch(var(--primary) / 0.5), 0 8px 24px -12px
      oklch(0 0 0 / 0.45);
  }

.gps-choice-button-google:active {
    transform: scale(0.97);
  }

.gps-choice-button-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
  }

/* --- Foto-kaarten (chauffeur, taxi, kenteken) -------------
     Herintroduceerd op het passagiersdashboard. Drie kaart-types
     delen dezelfde radius/schaduw/stijl; alleen de thumb-toon
     verschilt (jade voor chauffeur, primary voor voertuig, goud
     voor kenteken). De foto DOMINEERT het icoon: grote thumb met
     een kleine label-strook eronder. Chauffeur- en voertuig-foto
     hebben IDENTIEKE afmetingen, aspect-ratio en radius. */

.driver-photo-card,
  .vehicle-photo-card,
  .license-plate-photo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: oklch(var(--card) / 0.7);
    border: 1px solid oklch(var(--border) / 0.65);
    border-radius: var(--photo-card-radius);
    backdrop-filter: blur(var(--map-overlay-blur));
    box-shadow: 0 8px 24px -12px oklch(0 0 0 / 0.5);
    overflow: hidden;
  }

.driver-photo-card {
    border-color: oklch(var(--accent-green) / 0.45);
  }

.vehicle-photo-card {
    border-color: oklch(var(--primary) / 0.4);
  }

.license-plate-photo-card {
    border-color: oklch(var(--secondary-foreground) / 0.4);
  }

/* Foto-thumb — GROOT, domineert het icoon. Beide thumbs (chauffeur
     + voertuig) delen identieke afmetingen (8.5rem), aspect-ratio 1,
     en dezelfde afgeronde vierkante radius (1rem = rounded-2xl-stijl).
     object-fit: cover zodat de foto de hele thumb vult. De foto is het
     prominente element; het label eronder neemt slechts een kleine
     strook in. */

.driver-photo-thumb,
  .vehicle-photo-thumb,
  .license-plate-photo-thumb {
    width: var(--photo-thumb-size, 8.5rem);
    height: var(--photo-thumb-size, 8.5rem);
    aspect-ratio: 1;
    border-radius: var(--photo-thumb-radius, 1rem);
    -o-object-fit: cover;
       object-fit: cover;
    background: oklch(var(--muted) / 0.6);
    border: 1px solid oklch(var(--border) / 0.5);
    flex-shrink: 0;
  }

/* Kleinere thumb-variant — gebruikt in de header-strip. */

.driver-photo-thumb-sm,
  .vehicle-photo-thumb-sm,
  .license-plate-photo-thumb-sm {
    width: var(--photo-thumb-size);
    height: var(--photo-thumb-size);
    aspect-ratio: 1;
    border-radius: 0.75rem;
    -o-object-fit: cover;
       object-fit: cover;
    background: oklch(var(--muted) / 0.6);
    border: 1px solid oklch(var(--border) / 0.5);
    flex-shrink: 0;
  }

.driver-photo-card .photo-card-label,
  .vehicle-photo-card .photo-card-label,
  .license-plate-photo-card .photo-card-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.75rem;
    color: oklch(var(--muted-foreground));
    letter-spacing: 0.01em;
    text-align: center;
    line-height: 1.2;
  }

/* Kenteken-plaat overlay — NL kenteken: verzadigd geel, zwarte tekst,
     monospace, goud-rand. Visueel onmiskenbaar een Nederlands kenteken. */

.license-plate-plate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.625rem;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: oklch(0.15 0.02 90);
    background: oklch(0.92 0.15 90);
    border: 1.5px solid oklch(0.72 0.14 90);
    border-radius: 0.375rem;
    box-shadow: 0 2px 8px -2px oklch(0 0 0 / 0.4);
    min-width: 5.5rem;
    text-transform: uppercase;
  }

/* --- Chauffeur-flow actie-balk (kaart-dominant) --- */

/* Zwevende glasbalk onderaan het scherm; kaart blijft volledig zichtbaar eronder. */

.driver-flow-action-bar {
    position: fixed;
    left: 50%;
    /* Iets hoger geplaatst zodat de onderste iconen wat verder van de
       schermrand zweven — kaart blijft volledig zichtbaar eronder. */
    bottom: max(2.5rem, calc(env(safe-area-inset-bottom) + 1.5rem));
    transform: translateX(-50%);
    z-index: 30;
    width: min(100%, 32rem);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: oklch(var(--glass-bg, 0.18 0.02 250) / 0.82);
    backdrop-filter: blur(0.625rem) saturate(1.3);
    -webkit-backdrop-filter: blur(0.625rem) saturate(1.3);
    border: 1px solid oklch(var(--glass-border, 0.7 0.02 250) / 0.45);
    border-radius: 1.25rem;
    box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.08) inset, 0 12px 32px -10px
      oklch(0 0 0 / 0.55), 0 4px 12px -4px oklch(0 0 0 / 0.35);
  }

/* Timer-badge in de actie-balk — monospace, jade-gekleurd.
     ROND icoon met jade-glow voor de 5-minuten aftel-timer die
     verschijnt in de laatste 100m (proximity). De badge is een
     echte cirkel (gelijke width/height, border-radius 50%, flex
     centering) zodat de timer in een rond element verschijnt zoals
     de requirement specificeert. De badge pulseert zachtjes via
     de driver-timer-pulse animatie om de aandacht te trekken zonder
     de kaart-dominantie te breken.

     MULTIPLE-CHILD OVERRIDE: wanneer de badge meer dan één kind
     bevat (bijv. de passagiers-no-show badge die een countdown +
     waarschuwingstekst combineert), valt automatisch terug op een
     bredere pill-vorm via :has() zodat die content niet in de
     cirkel wordt geknipt. Het enkele-kind (driver 100m proximity)
     geval blijft de ronde cirkel zoals gespecificeerd. */

.driver-flow-timer-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    line-height: 1;
    color: oklch(var(--success-foreground, 0.16 0.02 250));
    background: oklch(var(--accent-green) / 0.16);
    border: 1px solid oklch(var(--accent-green) / 0.45);
    border-radius: 50%;
    box-shadow: 0 0 12px -4px oklch(var(--accent-green) / 0.45);
    flex-shrink: 0;
    animation: driver-timer-pulse 2s ease-in-out infinite;
  }

/* Passagiers-no-show badge (meerdere kinderen: countdown +
     waarschuwing) — valt terug op pill-vorm zodat de tekst niet
     in de cirkel wordt geknipt. Driver 100m proximity badge heeft
     één kind en blijft rond. */

.driver-flow-timer-badge:has(> * + *) {
    width: auto;
    min-width: 3.5rem;
    height: auto;
    min-height: 3.5rem;
    padding: 0.375rem 0.75rem;
    gap: 0.375rem;
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    border-radius: 9999px;
  }

/* driver-flow-timer-badge--alert — PROMINENTE zwevende
     waarschuwings-badge voor de chauffeur (requirement: countdown-timer
     is een WAARSCHUWING — moet opvallen met felle kleur, niet
     transparant). Wordt uitsluitend gebruikt door
     PickupCountdownBadge perspective='driver', gemonteerd via
     createPortal naar document.body in DriverDashboardPage.tsx
     (alleen phase3_en_route_to_pickup en phase4_at_pickup).

      STYLING:
      - Actieve countdown: felle oranje waarschuwingskleur
        (oklch(0.70 0.18 55) — hardcoded, niet de --warning token die
        blauw is) voor achtergrond, rand en glow — trekt direct de
        aandacht.
      - Expiry (no-show): rode --destructive styling met sterkere glow
        zodat de chauffeur ziet dat de 5-min window is verstreken.
     - Sterkere pulse-animatie (driver-timer-pulse-alert) dan de
       bestaande zachte driver-timer-pulse — grotere glow-swing en
       snellere cyclus (1.4s i.p.v. 2s) voor urgente waarschuwing.

     POSITIONERING: fixed gecentreerd bovenaan (left-1/2 top-16
     -translate-x-1/2), hoge z-index (z-[1300]) boven de kaart, onder
     de top-bar. !important op position/z-index/background-color als
     defensief patroon — unlayered CSS regels of een voorouder met
     transform kunnen een portal anders override (gespiegeld aan de
     AiChatFab defensive pattern in Layout.tsx). De monteur geeft
     dezelfde utilities ook via className mee (dubbele verzekering). */

.driver-flow-timer-badge--alert {
    position: fixed !important;
    z-index: 1300 !important;
    top: 4rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: 11rem;
    padding: 0.875rem 1.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    color: oklch(0.99 0.02 55);
    background-color: oklch(0.7 0.18 55 / 0.96) !important;
    border: 2px solid oklch(0.7 0.18 55 / 0.85);
    border-radius: 1.25rem;
    box-shadow: 0 0 28px -4px oklch(0.7 0.18 55 / 0.75), 0 12px 32px -8px
      oklch(0.7 0.18 55 / 0.55);
    animation: driver-timer-pulse-alert 1.4s ease-in-out infinite;
    pointer-events: auto;
  }

/* Expiry-styling: rode --destructive in plaats van fel oranje.
     PickupCountdownBadge zet geen aparte expiry-klasse op de badge,
     maar de annuleer-knop (bg-destructive) en de timer-tekst
     (text-destructive via de expired-branch in de component) geven
     visuele expiry-signalen. Hier versterken we de badge-glow naar
     rood wanneer de annuleer-knop aanwezig is (kind-button = expired
     state) via :has(). */

.driver-flow-timer-badge--alert:has(button) {
    color: oklch(var(--destructive-foreground, 0.99 0.005 260));
    background-color: oklch(var(--destructive) / 0.96) !important;
    border-color: oklch(var(--destructive) / 0.9);
    box-shadow: 0 0 32px -2px oklch(var(--destructive) / 0.85), 0 12px 36px -8px
      oklch(var(--destructive) / 0.65);
    animation: none;
  }

/* driver-timer-pulse-alert — STERKERE pulse-animatie dan de bestaande
     zachte driver-timer-pulse. Grotere glow-swing (12px → 36px) en
     snellere cyclus (1.4s i.p.v. 2s) voor urgente waarschuwings-
     werking. Animateert alleen box-shadow en border-color alpha —
     GEEN layout properties — veilig voor performance en layout-
     stabiliteit. De badge blijft altijd leesbaar. */

@keyframes driver-timer-pulse-alert {
    0%,
    100% {
      box-shadow: 0 0 12px -4px oklch(0.7 0.18 55 / 0.75), 0 12px 32px -8px
        oklch(0.7 0.18 55 / 0.55);
      border-color: oklch(0.7 0.18 55 / 0.85);
    }
    50% {
      box-shadow: 0 0 36px -2px oklch(0.7 0.18 55 / 0.95), 0 16px 40px -8px
        oklch(0.7 0.18 55 / 0.75);
      border-color: oklch(0.7 0.18 55 / 1);
    }
  }

/* driver-timer-pulse — zachte jade-glow pulsatie rond de timer-badge.
     Animateert alleen box-shadow (glow intensity) en border-color alpha,
     NIET layout properties — veilig voor performance en layout-stabiliteit.
     De badge blijft altijd leesbaar; de pulsatie is subtiel en trekt
     aandacht zonder de kaart-dominantie te breken. */

@keyframes driver-timer-pulse {
    0%,
    100% {
      box-shadow: 0 0 12px -4px oklch(var(--accent-green) / 0.45);
      border-color: oklch(var(--accent-green) / 0.45);
    }
    50% {
      box-shadow: 0 0 20px -2px oklch(var(--accent-green) / 0.75);
      border-color: oklch(var(--accent-green) / 0.7);
    }
  }

/* Navigeer-knop — opent externe app direct via deep link, geen tussen-scherm. */

.driver-flow-navigate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.01em;
    color: oklch(var(--success-foreground, 0.16 0.02 250));
    background: oklch(var(--accent-green) / 0.92);
    border: 1px solid oklch(var(--accent-green) / 0.6);
    border-radius: 9999px;
    box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.2) inset, 0 8px 20px -6px
      oklch(var(--accent-green) / 0.55);
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s
      cubic-bezier(0.4, 0, 0.2, 1);
    flex: 1 1 auto;
    min-width: 0;
  }

.driver-flow-navigate-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.25) inset, 0 12px 26px -6px
      oklch(var(--accent-green) / 0.7);
  }

.driver-flow-navigate-btn:active {
    transform: translateY(0) scale(0.98);
  }

/* Status-pill — gekleurde badge voor status-labels in de actie-balk
     (bijv. 'Aangekomen bij bestemming' in Phase6). Complementair aan de
     groene driver-flow-navigate-btn: gebruikt de blauwe --primary-tint
     zodat beide onderste elementen gekleurd/branded zijn, niet één
     platte tekst + één groene knop. Zelfde pill-vorm, zelfde hoogte-
     gevoel, zelfde flex-gedrag als de navigatie-knop zodat ze visueel
     als paar balanceren in de zwevende actie-balk. */

.driver-flow-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.01em;
    color: oklch(var(--primary-foreground, 0.98 0.005 260));
    background: oklch(var(--primary) / 0.92);
    border: 1px solid oklch(var(--primary) / 0.6);
    border-radius: 9999px;
    box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.2) inset, 0 8px 20px -6px
      oklch(var(--primary) / 0.55);
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s
      cubic-bezier(0.4, 0, 0.2, 1);
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
  }

.driver-flow-status-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.25) inset, 0 12px 26px -6px
      oklch(var(--primary) / 0.7);
  }

/* eta-refresh-pulse — subtiele pulsatie op de ETA-refresh-indicator
     (klein RefreshCw-icoon naast de aankomsttijd). Animateert alleen
     transform (rotate) en opacity — veilig voor performance en
     layout-stabiliteit. De indicator verschijnt alleen tijdens een
     actieve background-refetch (isFetching) zodat de passagier ziet
     dat de vaste aankomsttijd live wordt vernieuwd. */

@keyframes eta-refresh-pulse {
    0%,
    100% {
      opacity: 0.55;
      transform: rotate(0deg);
    }
    50% {
      opacity: 1;
      transform: rotate(180deg);
    }
  }

.eta-refresh-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: eta-refresh-pulse 1.6s ease-in-out infinite;
  }

/* Reduced motion — schakel pulse/enter animaties uit. */

@media (prefers-reduced-motion: reduce) {
    .ride-step-icon,
    .proximity-countdown-ring,
    .gps-choice-button,
    .driver-flow-navigate-btn,
    .driver-flow-timer-badge,
    .driver-flow-timer-badge--alert,
    .eta-refresh-indicator {
      animation: none;
      transition: none;
    }
    .proximity-countdown-ring {
      box-shadow: 0 0 12px -2px oklch(var(--accent-green) / 0.4);
    }
    .driver-flow-timer-badge {
      box-shadow: 0 0 12px -4px oklch(var(--accent-green) / 0.45);
    }
    .driver-flow-timer-badge--alert {
      box-shadow: 0 0 28px -4px oklch(var(--warning) / 0.75), 0 12px 32px -8px
        oklch(var(--warning) / 0.55);
    }
  }

.\[--cell-size\:--spacing\(8\)\] {
	--cell-size: var(--spacing(8));
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/SpaceGrotesk.woff2") format("woff2");
  font-display: swap;
  font-weight: 300 700;
}

@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/DMSans.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 1000;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/GeistMono.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 800;
}

/* einde @layer utilities — tijdelijk gesloten voor unlayered override hieronder */

/* CHAUFFEURS-DASHBOARD: ZOOM-KNOPPEN LINKS, ONDER DE EXTERNAL-MAPS-KNOP.
 * Leaflet's eigen CSS is unlayered (regel 1) en wint altijd van
 * @layer utilities. Daarom staat deze regel buiten @layer en gebruikt
 * ze !important zodat ze wint van Leaflet's unlayered top/left defaults.
 *
 * Positie: de "Extern (Waze/Google Maps)"-knop zit aan de linkerkant
 * op top: 3.75rem (net onder de DriverTopBar h-14 = 3.5rem + 0.25rem gap)
 * en is ~2.75rem hoog (py-3 + 20px icon), dus de onderkant zit op ~6.5rem.
 * De zoom-knoppen worden hieronder geplaatst op top: 6.75rem (kleine gap
 * onder de external-knop) aan de linkerrand (left: 0.75rem, gelijk aan de
 * external-knop left-3 = 0.75rem). z-index 1100: boven kaart (z-0) en
 * Leaflet-controls (z-800), onder de DriverTopBar (z-[1300]) en de
 * external-knop (z-[1250]). */

.dashboard-dark .leaflet-top.leaflet-left {
  top: 6.75rem !important;
  left: 0.75rem !important;
  z-index: 1100 !important;
}

/* ============================================================
 * Landing-page role CTA's — dikke ronde gekleurde rand.
 * De .glass-button / .glass-button-primary regels hierboven
 * zetten expliciet een 1px border (specificiteit (0,2,1) resp.
 * (0,3,0) voor de verdubbelde .glass-button-primary.glass-
 * button-primary selector). Tailwind border-[3px] utilities
 * hebben specificiteit (0,1,0) en verliezen dus van de CSS-
 * regel. Deze marker-class overrides tillen de specificiteit
 * naar (0,3,0) resp. (0,4,0) — boven de verdubbelde primary-
 * selector — zodat de dikke gekleurde rand betrouwbaar wint.
 * Glass background, backdrop-filter, box-shadow en z-index
 * blijven onaangetast; alleen de border wordt overschreven.
 * Passagier = violet (#327BFF), chauffeur = teal (#22C55E).
 * ========================================================== */

button.glass-button-primary.landing-passenger-btn {
  border: 3px solid #327bff;
}

button.glass-button.landing-driver-btn {
  border: 3px solid #22c55e;
}

/* ============================================================
 * Landing-page role CTA's — ZWARTE tekst op de glas-knoppen.
 * De .glass-button-primary.glass-button-primary verdubbelde
 * selector hierboven (specificiteit (0,3,0)) forceert de gele
 * primary-kleur (color: oklch(var(--primary))). Tailwind text-
 * black (0,1,0) verliest daarvan. Deze overrides tillen de
 * specificiteit naar (0,3,0) voor de driver-knop (voldoende
 * boven .glass-button (0,1,0)) en naar (0,4,0) voor de passagier-
 * knop via een verdubbelde .landing-passenger-btn selector, zodat
 * de zwarte tekst betrouwbaar wint van de verdubbelde primary-
 * selector. Glass background, backdrop-filter, box-shadow en de
 * gekleurde rand blijven onaangetast — alleen de tekstkleur wordt
 * zwart voor beide landing-knoppen.
 * ========================================================== */

button.glass-button.landing-driver-btn {
  color: #000 !important;
}

button.glass-button-primary.landing-passenger-btn.landing-passenger-btn {
  color: #000 !important;
}

/* ============================================================
 * Passagiers- en chauffeurs-iconen — glazen stijl met thematische
 * gekleurde rand. De .glass / .glass-badge basisregels zetten
 * expliciet een 1px border (specificiteit (0,1,0)). Een losse
 * .glass-icon-* klasse op hetzelfde element heeft ook (0,1,0) en
 * verliest bij gelijke specificiteit van de later-gedefinieerde
 * .glass / .glass-badge regel. Daarom gebruiken we gecombineerde
 * selectors (.glass.glass-icon-passenger / .glass-badge.glass-
 * icon-passenger) met specificiteit (0,2,0) zodat de gekleurde
 * 2px rand betrouwbaar wint. Glass background, backdrop-filter
 * en box-shadow blijven onaangetast — alleen de border wordt
 * overschreven. Passagier = violet (#327BFF), chauffeur = teal
 * (#22C55E), passend bij de landingsknoppen.
 * ========================================================== */

.glass.glass-icon-passenger,
.glass-badge.glass-icon-passenger,
.glass-strong.glass-icon-passenger {
  border: 2px solid #327bff;
}

.glass.glass-icon-driver,
.glass-badge.glass-icon-driver,
.glass-strong.glass-icon-driver {
  border: 2px solid #22c55e;
}

/* ============================================================
 * Dashboard voertuigklasse-icoontjes — transparante achtergrond.
 * In de passagiers-dashboard (BookingPage, .dashboard-dark scope)
 * staan de voertuigklasse-icoontjes (.glass-badge.glass-icon-
 * passenger) boven op de plattegrond. De basis .glass-badge regel
 * (specificiteit (0,1,0)) zet een donkere gevulde cirkel via
 * --glass-bg-strong (in .dashboard-dark = 0.18 0.022 260 / 0.88,
 * nagenoeg ondoorzichtig navy), wat de plattegrond erachter verbergt.
 *
 * Deze scoped override maakt de achtergrond volledig transparant
 * EN verwijdert de backdrop-filter blur, zodat de plattegrond
 * ongehinderd door de icoontjes schijnt. De 2px gekleurde rand
 * (#327BFF violet) blijft behouden via de .glass-badge.glass-
 * icon-passenger regel hierboven; het Icon3D voertuig-symbool en
 * de bijbehorende tekst blijven onaangetast (die staan in de JSX
 * binnen de cirkel-span).
 *
 * Specificiteit (0,3,0) — .dashboard-dark (0,1,0) + .glass-badge
 * (0,1,0) + .glass-icon-passenger (0,1,0) — wint betrouwbaar van
 * de basis .glass-badge (0,1,0) en de gecombineerde .glass-badge.
 * glass-icon-passenger border-regel (0,2,0). Geldt UITSLUITEND
 * binnen .dashboard-dark, dus waar dezelfde icoonstijl elders met
 * gevulde achtergrond getoond moet worden (landingpagina, andere
 * pagina's) blijft de donkere glas-cirkel behouden.
 * ========================================================== */

.dashboard-dark .glass-badge.glass-icon-passenger.glass-icon-passenger {
  background-color: transparent;
  backdrop-filter: none;
}

/* ============================================================
 * 3D-ICOONSYSTEEM — Gala iPhone-glas + Ambilight-gloed + 3D-diepte.
 *
 * Doel: Vervang alle platte lucide-lijn-icoontjes op landingspagina,
 * passagiersaccount en chauffeursaccount door 3D-icoontjes die in een
 * kleine Three.js-Canvas renderen, verpakt in een Gala iPhone-glascirkel
 * met een zachte gekleurde Ambilight-backlight erachter.
 *
 * Drie lagen (van achter naar voren):
 *  1. Ambilight-gloed  — .icon3d-glow-* ::before, zachte radiale halo
 *     ONDER/ACHTER de glascirkel (zoals een tv-aan-de-muur LED-backlight).
 *     Drie rolkleuren: passagier violet, chauffeur teal, neutraal paars.
 *  2. Gala iPhone-glas — .icon3d-glass, frosted-glass cirkel met backdrop-
 *     blur, dubbele binnenrand (lichte bovenrand, donkere onderrand),
 *     speculaire highlight bovenaan, vage verticale reflectie.
 *  3. 3D-diepte        — .icon3d, gelaagde box-shadows: buitenste drop-
 *     shadow (elevatie), binnenste top-highlight (rim light), binnenste
 *     bottom-shadow (diepte), zodat de glascirkel als 3D-geometrie leest.
 *
 * De Three.js-Canvas (frontend-component) rendert echte 3D-primitieven
 * (afgeronde kubus, torus, sfeer) BINNEN de glascirkel. De Canvas zelf
 * is position:absolute, vult de cirkel, en zit tussen de gloed (z-index:-1)
 * en de glas-highlight (z-index:2). De frontend-component levert de
 * geometrie + belichting; deze tokens leveren de visuele omhulling.
 *
 * Float/idle-animatie: .icon3d-float — subtiele 6s zweefbeweging
 * (translateY ±3px + tiny scale), respecteert prefers-reduced-motion.
 *
 * ADDITIEF — geen bestaande tokens, utilities of component-stijlen worden
 * gewijzigd. Bestaande .glass / .glass-badge / .glass-icon-* / .motion-
 * float-glow blijven onaangetast; dit is een nieuw, parallel icoonsysteem.
 * ========================================================== */

/* --- 3D-icon tokens (theme-aware) ---
 * Diepte-schaduwen en highlight-randen per thema. Light: warme schaduwen
 * op off-white; Dark: diepere schaduwen op navy met hogere alpha. */

:root {
  /* 3D-diepte: gelaagde box-shadow — elevatie + inner highlights + rim.
   * Volgorde: (1) binnenste top-rim highlight, (2) binnenste bottom diepte,
   * (3) middelste contact-schaduw, (4) buitenste zachte drop-shadow. */
  --icon3d-shadow:
    inset 0 1px 0 0 oklch(1 0 0 / 0.55),
    inset 0 -2px 4px -1px oklch(0.16 0.005 260 / 0.18),
    0 4px 10px -3px oklch(0.16 0.005 260 / 0.16),
    0 12px 28px -10px oklch(0.16 0.005 260 / 0.22);
  /* Speculaire highlight bovenaan (iOS app-icon glas-look) */
  --icon3d-specular: linear-gradient(
    180deg,
    oklch(1 0 0 / 0.42) 0%,
    oklch(1 0 0 / 0.08) 22%,
    transparent 45%
  );
  /* Vage verticale reflectie (Gala iPhone-glas) */
  --icon3d-reflection: linear-gradient(
    180deg,
    transparent 0%,
    transparent 60%,
    oklch(1 0 0 / 0.06) 100%
  );
  /* Binnenrand: lichte bovenrand + donkere onderrand (diepte) */
  --icon3d-border-top: oklch(1 0 0 / 0.5);
  --icon3d-border-bottom: oklch(0.16 0.005 260 / 0.16);
  /* Gala-glas achtergrond (frosted) */
  --icon3d-glass-bg: 1 0 0 / 0.16;
  --icon3d-glass-blur: 14px;
  /* Ambilight-gloed kleuren + alpha (per rol, overschreven door modifiers) */
  --icon3d-glow-color: 0.7 0.18 55; /* default = neutraal paars */
  --icon3d-glow-alpha: 0.38;
  --icon3d-glow-spread: 0.7;
  /* Float-animatie amplitude */
  --icon3d-float-y: 3px;
  --icon3d-float-scale: 1.015;
}

.dark {
  --icon3d-shadow:
    inset 0 1px 0 0 oklch(1 0 0 / 0.32),
    inset 0 -2px 4px -1px oklch(0 0 0 / 0.45),
    0 4px 10px -3px oklch(0 0 0 / 0.4),
    0 14px 32px -10px oklch(0 0 0 / 0.55);
  --icon3d-specular: linear-gradient(
    180deg,
    oklch(1 0 0 / 0.28) 0%,
    oklch(1 0 0 / 0.05) 22%,
    transparent 45%
  );
  --icon3d-reflection: linear-gradient(
    180deg,
    transparent 0%,
    transparent 60%,
    oklch(1 0 0 / 0.04) 100%
  );
  --icon3d-border-top: oklch(1 0 0 / 0.28);
  --icon3d-border-bottom: oklch(0 0 0 / 0.4);
  --icon3d-glass-bg: 0.95 0.012 75 / 0.08;
  --icon3d-glass-blur: 16px;
  --icon3d-glow-alpha: 0.48;
  --icon3d-glow-spread: 0.72;
  --icon3d-float-y: 3px;
  --icon3d-float-scale: 1.015;
}

/* --- .icon3d — 3D-diepte container (gelaagde box-shadows) ---
 * Dit is de buitenste wrapper. Frontend plaatst hierin de glascirkel +
 * Canvas. De gelaagde box-shadows geven het 3D-geometrie gevoel: elevatie
 * (drop-shadow), rim-light (inset top highlight), diepte (inset bottom). */

.icon3d {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  box-shadow: var(--icon3d-shadow);
  isolation: isolate; /* ::before glow blijft achter de cirkel */
  transition: transform var(--motion-duration-base) var(--motion-ease-out),
    box-shadow var(--motion-duration-base) var(--motion-ease);
  will-change: transform;
}

/* --- .icon3d-glass — Gala iPhone-glascirkel ---
 * Frosted-glass cirkel met backdrop-blur, dubbele binnenrand (lichte
 * bovenrand via border-top-color, donkere onderrand via inset shadow),
 * speculaire highlight bovenaan (::before radial), vage reflectie (::after
 * linear). Dit is de iOS app-icon glas-look, niet de platte glass-badge. */

.icon3d-glass {
  position: relative;
  border-radius: 9999px;
  background-color: oklch(var(--icon3d-glass-bg));
  backdrop-filter: blur(var(--icon3d-glass-blur)) saturate(1.8);
  /* Dubbele binnenrand: lichte bovenrand (border-top-color) + donkere
     onderrand (inset bottom shadow uit --icon3d-shadow, overgenomen door
     .icon3d). Hier zetten we een 1px rand met lichte kleur; de donkere
     onderrand komt uit de inset shadow van .icon3d. */
  border: 1px solid oklch(var(--icon3d-border-top));
  overflow: hidden;
  /* Zorg dat de Canvas (3D-geometrie) tussen glas en highlight zit */
  isolation: isolate;
}

/* Speculaire highlight bovenaan — iOS app-icon glas-look. Een radial-
   gradient ::before die de bovenste ~40% van de cirkel vult met een zacht
   wit verloop, als een lichtbron van boven. Boven de Canvas (z-index:2),
   onder de pointer (pointer-events:none). */

.icon3d-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--icon3d-specular);
  pointer-events: none;
  z-index: 2;
}

/* Vage verticale reflectie — Gala iPhone-glas. Een lineair-gradient ::after
   die de onderste ~40% subtiel verlicht, als een weerkaatst licht van
   onder. Boven de Canvas, onder de speculaire highlight. */

.icon3d-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--icon3d-reflection);
  pointer-events: none;
  z-index: 2;
}

/* Donkere onderrand voor diepte — aparte inset shadow op de glascirkel
   zelf, zodat de binnenrand leest als 3D-rand (licht boven, donker onder). */

.icon3d-glass {
  box-shadow: inset 0 -1px 1px 0 oklch(var(--icon3d-border-bottom));
}

/* --- Ambilight-gloed (tv-aan-de-muur LED-backlight) ---
 * Een zachte, diffuse radiale halo ONDER/ACHTER de glascirkel via ::before
 * op de buitenste .icon3d wrapper. Groter dan de cirkel (vooral naar
 * onderen en zijkanten) zodat de halo eromheen straalt — als een tv die
 * aan de muur hangt met een gekleurde LED-backlight erachter. De gloed
 * is STATISCH (altijd aan, geen hover-trigger — per doNotBuild).
 *
 * Drie rolkleuren via modifier-klassen:
 *  - .icon3d-glow-passenger → logo-blauw (passagier)
 *  - .icon3d-glow-driver    → logo-groen (chauffeur)
 *  - .icon3d-glow-amber     → blauw (neutraal, default)
 *  - .icon3d-glow-gold      → paars (premium accent)
 *
 * De ::before zit op .icon3d (niet op .icon3d-glass) zodat de gloed achter
 * de volledige cirkel valt, niet alleen achter het glas. z-index:-1 binnen
 * de .icon3d stacking context (isolation:isolate garandeert zichtbaarheid). */

.icon3d::before {
  content: "";
  position: absolute;
  /* Glow concentreert zich ONDER/ACHTER de cirkel: kleine inset boven,
     grote negatieve inset onder + zijkanten, zodat de halo eromheen straalt. */
  inset: -12% -18% -28% -18%;
  border-radius: 9999px;
  background: radial-gradient(
    ellipse 100% 80% at 50% 50%,
    oklch(var(--icon3d-glow-color) / var(--icon3d-glow-alpha)) 0%,
    transparent var(--icon3d-glow-spread)
  );
  z-index: -1;
  pointer-events: none;
  /* Geen transition — statische gloed (per doNotBuild: geen hover-intensivering). */
}

/* Passagiers-gloed — logo-blauw (oklch-equivalent). */

.icon3d-glow-passenger::before {
  --icon3d-glow-color: 0.7 0.18 55;
}

/* Chauffeurs-gloed — logo-groen (oklch-equivalent). */

.icon3d-glow-driver::before {
  --icon3d-glow-color: 0.85 0.13 85;
}

/* Neutrale gloed — blauw (default kleur, expliciet gemaakt voor duidelijkheid). */

.icon3d-glow-amber::before {
  --icon3d-glow-color: 0.7 0.18 55;
}

/* Goud-gloed — warm goud (premium accent). */

.icon3d-glow-gold::before {
  --icon3d-glow-color: 0.7 0.18 55;
}

/* --- Landing wordmark gloed ---
 * Subtiele, diffuse radiale halo achter de gestileerde 'Valk Taxi' tekst in de
 * hero-section van de landingpagina. Vervangt de oude logo-cirkel; behoudt
 * de paars/primary-themegloed voor visuele consistentie. Statisch (geen hover),
 * respecteert prefers-reduced-motion. */

.landing-wordmark {
  position: relative;
  isolation: isolate;
  text-shadow: 0 0 28px oklch(var(--primary) / 0.35);
}

.landing-wordmark::after {
  content: "";
  position: absolute;
  inset: -20% -10% -30% -10%;
  background: radial-gradient(
    ellipse 90% 70% at 50% 50%,
    oklch(var(--primary) / 0.18) 0%,
    transparent 70%
  );
  z-index: -1;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .landing-wordmark {
    text-shadow: none;
  }
  .landing-wordmark::after {
    background: none;
  }
}

/* --- Landing wordmark 3D-effect (logo-vergroting + 3D) ---
 * Versterkte 3D-versie van .landing-wordmark voor de vergrote hero-
 * wordmark op de landingpagina. Combineert:
 *  1. Gelaagde text-shadow (diepte + paars primary gloed) zodat de
 *     letters eruitzien alsof ze uit het glas geëxtrudeerd zijn.
 *  2. Perspectief-transform (subtiele rotateX) voor een 3D-geometrie-
 *     gevoel — alsof het woordmerk naar voren helt.
 *  3. Drop-shadow filter voor een zachte elevatie-schaduw onder de
 *     tekst (los van de text-shadow).
 *  4. ::after radiale halo (paars primary) blijft behouden — versterkt
 *     via een grotere, fellere variant.
 * Respecteert prefers-reduced-motion (geen transform-animatie, maar de
 * statische 3D-schaduwen blijven zichtbaar). */

.landing-wordmark-3d {
  position: relative;
  isolation: isolate;
  display: inline-block;
  /* FIX: rotateX/perspective-transform verwijderd om verticale clipping
     van de 'Valk Taxi' wordmark op smalle viewports te stoppen. De 3D-
     diepte blijft zichtbaar via de gelaagde text-shadow + drop-shadow
     hieronder (geen geometrie-transform nodig). overflow: visible
     garandeert dat de gloed en de letters nooit door de parent-container
     worden afgesneden. */
  overflow: visible;
  /* Gelaagde text-shadow: (1) paarse primary gloed, (2) diepe elevatie-
     schaduw onder de letters, (3) subtiele top-rim highlight. */
  text-shadow: 0 0 32px oklch(var(--primary) / 0.55), 0 4px 8px
    oklch(0 0 0 / 0.45), 0 2px 2px oklch(0 0 0 / 0.35), 0 -1px 0
    oklch(1 0 0 / 0.18);
  /* Zachte elevatie-schaduw onder het hele woordmerk. */
  filter: drop-shadow(0 8px 16px oklch(0 0 0 / 0.5));
  transition: filter 0.4s var(--motion-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.landing-wordmark-3d::after {
  content: "";
  position: absolute;
  inset: -28% -14% -38% -14%;
  background: radial-gradient(
    ellipse 95% 75% at 50% 50%,
    oklch(var(--primary) / 0.32) 0%,
    transparent 72%
  );
  z-index: -1;
  pointer-events: none;
}

/* De vergrote R- en M-letters (paars primary) krijgen een extra 3D-
   diepte via een sterkere text-shadow, zodat ze visueel uit het
   woordmerk "stappen" — niet alleen groter, maar ook meer diepte. */

.landing-wordmark-3d .landing-wordmark-accent {
  display: inline-block;
  text-shadow: 0 0 36px oklch(var(--primary) / 0.7), 0 6px 10px
    oklch(0 0 0 / 0.5), 0 3px 3px oklch(0 0 0 / 0.4), 0 -1px 0
    oklch(1 0 0 / 0.25);
  filter: drop-shadow(0 0 12px oklch(var(--primary) / 0.45));
}

@media (prefers-reduced-motion: reduce) {
  .landing-wordmark-3d {
    /* Behoud de statische 3D-schaduwen; transform is al verwijderd. */
    transform: none;
  }
}

/* --- Hero wordmark / pill overflow-fix (cut-off 'Valk Taxi' title) ---
 * Garandeert dat de 'Valk Taxi' wordmark en de glass-badge pill op de
 * landingspagina nooit verticaal clippen. De pill groeit mee met de
 * tekst (geen vaste hoogte), en de gloed (::after halo) mag buiten de
 * pill renderen. */

.landing-hero-wordmark,
.landing-hero-pill {
  overflow: visible;
}

.landing-hero-pill {
  /* Ruime verticale padding + line-height zodat de pill meegroeit met
     de tekst op alle viewport-breedtes. min-height voorkomt dat een
     te korte pill de tekst afsnijdt op mobiel. */
  line-height: 1.2;
  min-height: 0;
  white-space: nowrap;
}

/* --- Logo-afbeelding 3D-effect (driver/passenger/layout topbars) ---
 * 3D-stijl voor de vierkante Valk Taxi-logo-afbeelding in de topbars.
 * Combineert:
 *  1. Gelaagde drop-shadow (elevatie + paarse primary gloed) zodat het
 *     logo eruitziet alsof het boven de balk zweeft.
 *  2. Subtiele perspectief-transform (rotateX) voor 3D-geometrie-gevoel.
 *  3. Paarse primary rand-gloed via box-shadow (led-glow-stijl).
 * Werkt op <img> elementen met class .logo-3d. Respecteert prefers-
   reduced-motion (geen transform, schaduwen blijven). */

.logo-3d {
  /* Subtiele 3D-helling — alsof het logo naar voren helt. */
  transform: perspective(600px) rotateX(6deg);
  /* Gelaagde box-shadow: (1) paarse primary gloed-rand, (2) diepe
     elevatie-schaduw onder het logo, (3) subtiele top-rim highlight. */
  box-shadow:
    0 0 0 1px oklch(var(--primary) / 0.4),
    0 0 18px -2px oklch(var(--primary) / 0.55),
    0 0 32px -6px oklch(var(--primary) / 0.35),
    0 6px 14px -4px oklch(0 0 0 / 0.5),
    0 12px 24px -8px oklch(0 0 0 / 0.4),
    inset 0 1px 0 0 oklch(1 0 0 / 0.25);
  /* Drop-shadow filter voor extra elevatie (los van box-shadow). */
  filter: drop-shadow(0 4px 8px oklch(0 0 0 / 0.4));
  transition: transform 0.4s var(--motion-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

@media (prefers-reduced-motion: reduce) {
  .logo-3d {
    transform: none;
  }
}

/* --- Float/idle-animatie — subtiele zweefbeweging ---
 * 6s loop: cirkel zweeft ±3px op/neer + tiny scale (1.015). Subtiel,
 * "quiet confidence" — niet theatralisch. Respecteert prefers-reduced-
 * motion (uitgeschakeld hieronder). Frontend kan dit op de buitenste
 * .icon3d wrapper zetten; de Canvas-geometrie beweegt mee (transform op
 * wrapper, niet op Canvas-internals, dus geen WebGL-recompile). */

@keyframes icon3d-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(calc(var(--icon3d-float-y) * -1))
      scale(var(--icon3d-float-scale));
  }
}

.icon3d-float {
  animation: icon3d-float 6s var(--motion-ease) infinite;
}

/* --- Hover-lift (optioneel, cosmetisch) ---
 * Subtiele elevatie-toename op hover — de cirkel komt iets hoger en de
 * gloed wordt iets feller (maar NIET geanimeerd geïntensiveerd — alleen
 * een statische box-shadow-toename). Frontend kan dit op interactieve
 * iconen zetten; op puur decoratieve iconen weglaten. */

.icon3d-hover:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    inset 0 1px 0 0 oklch(1 0 0 / 0.6),
    inset 0 -2px 4px -1px oklch(0.16 0.005 260 / 0.2),
    0 6px 14px -3px oklch(0.16 0.005 260 / 0.2),
    0 18px 36px -10px oklch(0.16 0.005 260 / 0.28);
}

/* --- Reduced-motion: float + hover-lift uit, gloed blijft statisch ---
 * De Ambilight-gloed is statisch (geen animatie) en mag zichtbaar blijven
 * per requirement. Alleen de float-beweging en hover-lift worden uitgezet;
 * de 3D-diepte-schaduwen en Gala-glas blijven behouden (geen beweging). */

@media (prefers-reduced-motion: reduce) {
  .icon3d-float {
    animation: none;
  }
  .icon3d-hover,
  .icon3d-hover:hover {
    transform: none;
  }
}

/* --- @supports fallback: geen backdrop-filter ---
 * Als backdrop-filter niet wordt ondersteund, valt de glascirkel terug op
 * een semi-transparante achtergrond (niet opaque) zodat de gloed erdoorheen
 * schijnt. De 3D-diepte-schaduwen blijven behouden. */

@supports not (
    (backdrop-filter: blur(1px))
  ) {
  .icon3d-glass {
    background-color: oklch(1 0 0 / 0.45);
  }
  .dark .icon3d-glass {
    background-color: oklch(0.2 0.025 255 / 0.5);
  }
}

/* --- Plattegrond-icoontjes (chauffeur-dashboard) ---
 * Alleen icoontjes gemarkeerd met .icon3d-glass--map op de buitenste wrapper
 * krijgen een transparante glas-achtergrond, zodat de plattegrond eronder
 * volledig zichtbaar blijft. De gekleurde rand, de speculaire highlight
 * (::before), de reflectie (::after) en de donkere onderrand (box-shadow
 * inset) blijven behouden — alleen de achtergrond + backdrop-filter worden
 * uitgezet. Geldt uitsluitend voor plattegrond-icoontjes; alle andere
 * Icon3D's in de app behouden hun frosted glas. */

.icon3d-glass--map .icon3d-glass {
  background-color: transparent;
  backdrop-filter: none;
}

@supports not (
    (backdrop-filter: blur(1px))
  ) {
  .icon3d-glass--map .icon3d-glass {
    background-color: transparent;
  }
}

/* --- Dashboard-icoontjes — transparant glas op de plattegrond ---
 * Binnen .dashboard-dark zweven alle Icon3D-icoontjes op de plattegrond:
 * de frosted glas-achtergrond + backdrop-blur worden uitgezet zodat de
 * kaart erdoorheen schijnt. De gekleurde rand (via .glass-icon-* of de
 * icon3d-glow-* ::before), de speculaire highlight, de reflectie, de
 * donkere onderrand (box-shadow inset), de 3D-diepte-schaduwen (.icon3d)
 * en de Ambilight-gloed blijven behouden — alleen de vul-achtergrond
 * verdwijnt. Geldt voor ALLE .icon3d-glass binnen .dashboard-dark, dus
 * ook icoontjes die niet expliciet .icon3d-glass--map meekregen
 * (BookingPage voertuigklasse-icoontjes, DriverDashboardPage fase-
 * icoontjes). De .icon3d-glass--map regel hierboven is nu een subset
 * van deze bredere override en blijft voor backwards-compatibiliteit. */

.dashboard-dark .icon3d-glass {
  background-color: transparent;
  backdrop-filter: none;
}

@supports not (
    (backdrop-filter: blur(1px))
  ) {
  .dashboard-dark .icon3d-glass {
    background-color: transparent;
  }
}

/* --- Dashboard 3D-zweef-effect (LED-stijl, gereduceerde gloed) ---
 * Binnen .dashboard-dark zweven de Icon3D-icoontjes op de plattegrond.
 * Eerdere versie had een felle neon-gloed (alpha 0.78, spread 0.92,
 * 18px halo) die visuele drukte veroorzaakte. Per user-instruction
 * "Icoontjes compact houden, minder glow/animatie" is de gloed
 * gereduceerd: alpha 0.78 → 0.5, spread 0.92 → 0.7, halo 18px → 9px
 * met lagere opacity. De rolkleuren (glowRole='driver' paars,
 * glowRole='gold' voor rating-sterren) blijven behouden via
 * var(--icon3d-glow-color); alleen de intensiteit is subtieler.
 * De float-animatie wordt hieronder afzonderlijk uitgezet. */

.dashboard-dark .icon3d {
  --icon3d-glow-alpha: 0.5;
  --icon3d-glow-spread: 0.7;
  box-shadow:
    inset 0 1px 0 0 oklch(1 0 0 / 0.4),
    inset 0 -2px 4px -1px oklch(0 0 0 / 0.35),
    0 0 9px -2px oklch(0.7 0.18 55 / 0.3),
    0 4px 10px -3px oklch(0 0 0 / 0.35),
    0 12px 28px -12px oklch(0 0 0 / 0.45);
}

/* Subtielere Ambilight-halo op de dashboards — kleinere inset (minder
   uitloop rond de cirkel) en lagere alpha zodat de rolkleur zacht
   aanwezig is zonder felle neon-intensiteit. Gebruikt
   var(--icon3d-glow-color) zodat glowRole='driver' (paars) en
   glowRole='gold' (paars rating-sterren) hun kleur behouden. */

.dashboard-dark .icon3d::before {
  inset: -8% -10% -16% -10%;
  background: radial-gradient(
    ellipse at center,
    oklch(var(--icon3d-glow-color) / 0.22),
    oklch(var(--icon3d-glow-color) / 0) 70%
  );
}

/* --- Dashboard float-animatie uitzetten (visuele rust) ---
 * Per user-instruction "minder glow/animatie" wordt de niet-functionele
 * zweefbeweging (.icon3d-float, 6s translateY ±3px + scale) binnen
 * .dashboard-dark uitgezet. Functionele animaties (active-state,
 * hover-feedback, button-press) blijven onaangetast; alleen de decoratieve
 * idle-float verdwijnt voor visuele rust op het chauffeurs-dashboard. */

.dashboard-dark .icon3d-float {
  animation: none;
}

/* --- Dashboard glas-overlay subtieler maken ---
 * De speculaire highlight (::before) en reflectie (::after) op
 * .icon3d-glass erven van :root/.dark tokens die witte highlights
 * met hoge alpha (0.28-0.42) gebruiken. Binnen .dashboard-dark
 * (zwarte achtergrond, transparant glas) voegen deze witte overlays
 * visuele ruis toe. We verlagen de highlight-alpha subtiel zodat
 * de glas-identiteit behouden blijft maar minder opdringerig is. */

.dashboard-dark .icon3d-glass::before {
  background: linear-gradient(
    180deg,
    oklch(1 0 0 / 0.16) 0%,
    oklch(1 0 0 / 0.04) 22%,
    transparent 45%
  );
}

.dashboard-dark .icon3d-glass::after {
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 60%,
    oklch(1 0 0 / 0.03) 100%
  );
}

/* --- Dashboard LED-glow utilities ---
 * Binnen .dashboard-dark voegen we blauwe LED-gloed box-shadows toe die
 * op zwevende modules, randen en actieve staten worden toegepast. Subtiele
 * gloed op borders, sterkere gloed op hover/active. Globaal gedefinieerd
 * maar geconsumeerd via Tailwind utility classes (shadow-led-glow / 
 * shadow-led-glow-strong) — alleen zichtbaar binnen .dashboard-dark omdat
 * de kleurwaarden via oklch hardcoded blauw zijn (LED-identiteit). */

.dashboard-dark .led-border {
  border: 1px solid oklch(0.7 0.18 55 / 0.55);
  box-shadow: 0 0 12px -2px oklch(0.7 0.18 55 / 0.35), inset 0 0 8px -4px
    oklch(0.7 0.18 55 / 0.18);
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s
    cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-dark .led-border:hover {
  border-color: oklch(0.7 0.18 55 / 0.85);
  box-shadow: 0 0 18px -2px oklch(0.7 0.18 55 / 0.55), 0 0 32px -6px
    oklch(0.7 0.18 55 / 0.4), inset 0 0 10px -3px oklch(0.7 0.18 55 / 0.3);
}

.dashboard-dark .led-border-active,
.dashboard-dark .led-border[data-state="active"] {
  border-color: oklch(0.7 0.18 55 / 0.95);
  box-shadow: 0 0 22px -1px oklch(0.7 0.18 55 / 0.7), 0 0 40px -8px
    oklch(0.7 0.18 55 / 0.5), inset 0 0 12px -2px oklch(0.7 0.18 55 / 0.4);
}

/* Focus-ring als blauwe LED-gloed i.p.v. dunne outline. */

.dashboard-dark *:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px oklch(0.13 0.005 260), 0 0 0 4px
    oklch(0.7 0.18 55 / 0.9), 0 0 18px -2px oklch(0.7 0.18 55 / 0.6);
}

/* --- Landing-LED glow utilities ---
 * Spiegelt de .dashboard-dark LED-glow utilities voor de kaart-
 * landingspagina (.landing-led scope). Voegt blauwe LED-gloed toe aan
 * randen van zwevende modules (logo-pill, feature-pills, rolknoppen).
 * Subtiele gloed op borders, sterkere gloed op hover/active. */

.landing-led .led-border {
  border: 1px solid oklch(0.7 0.18 55 / 0.55);
  box-shadow: 0 0 12px -2px oklch(0.7 0.18 55 / 0.35), inset 0 0 8px -4px
    oklch(0.7 0.18 55 / 0.18);
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s
    cubic-bezier(0.4, 0, 0.2, 1);
}

.landing-led .led-border:hover {
  border-color: oklch(0.7 0.18 55 / 0.85);
  box-shadow: 0 0 18px -2px oklch(0.7 0.18 55 / 0.55), 0 0 32px -6px
    oklch(0.7 0.18 55 / 0.4), inset 0 0 10px -3px oklch(0.7 0.18 55 / 0.3);
}

.landing-led .led-border-active,
.landing-led .led-border[data-state="active"] {
  border-color: oklch(0.7 0.18 55 / 0.95);
  box-shadow: 0 0 22px -1px oklch(0.7 0.18 55 / 0.7), 0 0 40px -8px
    oklch(0.7 0.18 55 / 0.5), inset 0 0 12px -2px oklch(0.7 0.18 55 / 0.4);
}

/* Focus-ring als blauwe LED-gloed i.p.v. dunne outline. */

.landing-led *:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px oklch(0.13 0.005 260), 0 0 0 4px
    oklch(0.7 0.18 55 / 0.9), 0 0 18px -2px oklch(0.7 0.18 55 / 0.6);
}

/* ============================================================
 * MEER-MENU — calmer navigation redesign (appendix).
 *
 * Twee Meer-menu varianten die beide een portal-gericht overlay
 * openen dat sluit bij klik buiten of Escape:
 *
 *  1. HEADER MEER-MENU (kebab/hamburger) — groepeert admin-login,
 *     language, theme en logout in één rustige header-entry. Opent
 *     naar BENEDEN onder de header.
 *
 *  2. BOTTOM-NAV MEER-KNOP — vijfde item in de bottom-nav dat een
 *     opklapmenu opent met secundaire items. Opent BOVEN de
 *     bottom-nav zonder overlap met hoofditems.
 *
 * Beide hergebruiken bestaande glassmorphism tokens en paars
 * primary voor actieve items. Geen nieuwe kleur-tokens. Icon3D
 * Ambilight-gloed blijft intact.
 * ========================================================== */

/* --- Meer-trigger (kebab/hamburger pill) ---
 * Spiegelt .theme-toggle geometrie (ronde glass-knop 2.5rem) zodat
 * de header-cluster visueel consistent blijft. */

.meer-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: oklch(var(--glass-bg));
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  border: 1px solid oklch(var(--glass-border));
  box-shadow: var(--glass-shadow);
  color: oklch(var(--foreground));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.meer-trigger:hover:not(:disabled) {
  background-color: oklch(var(--glass-bg-strong));
  border-color: oklch(var(--glass-border-active));
  color: oklch(var(--primary));
}

.meer-trigger:focus-visible {
  outline: 2px solid oklch(var(--ring));
  outline-offset: 2px;
}

/* Actieve indicator — klein paars puntje rechtsboven dat verschijnt
   wanneer een secundair item actief is. */

.meer-trigger[data-has-active="true"] {
  color: oklch(var(--primary));
  border-color: oklch(var(--glass-border-primary) / 0.55);
}

.meer-trigger[data-has-active="true"]::after {
  content: "";
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 9999px;
  background-color: oklch(var(--primary));
  box-shadow: 0 0 0 2px oklch(var(--glass-bg-strong));
  pointer-events: none;
  animation: nav-active-pulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Open-state — trigger blijft gemarkeerd wanneer menu open is */

.meer-trigger[data-open="true"] {
  background-color: oklch(var(--glass-bg-active));
  border-color: oklch(var(--glass-border-active));
  color: oklch(var(--primary));
}

.meer-trigger-icon {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.meer-trigger[data-open="true"] .meer-trigger-icon {
  transform: rotate(90deg);
}

/* --- Meer-menu surface (portal overlay) ---
 * Glass-strong oppervlak met elevated schaduw. Positionering via
 * portal + inline-stijl (boven bottom-nav of onder header).
 * z-index 1300 — boven glas-knoppen (1000) en autocomplete (1100). */

.meer-menu {
  position: fixed;
  z-index: 1300;
  min-width: 14rem;
  max-width: calc(100vw - 1.5rem);
  background-color: oklch(var(--glass-bg-strong));
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.7);
  border: 1px solid oklch(var(--glass-border-active));
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow), 0 16px 40px -12px oklch(0 0 0 / 0.35);
  overflow: hidden;
  padding: 0.375rem;
  animation: meer-menu-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
  transform-origin: var(--meer-origin, top right);
}

.meer-menu[data-state="closed"] {
  animation: meer-menu-out 0.18s cubic-bezier(0.4, 0, 0.2, 1) both;
  pointer-events: none;
}

.meer-menu-list {
  max-height: calc(100dvh - 10rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

/* --- Meer-item (rij in het menu) ---
 * Full-width rij met Icon3D + label. Aanraakdoel min 44px hoog.
 * Actief item = paars-tint + paars linkerrand. */

.meer-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  min-height: 2.75rem;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
  border-left: 3px solid transparent;
  color: oklch(var(--foreground));
  text-align: left;
  width: 100%;
  background: transparent;
  border-top: 0;
  border-right: 1px solid transparent;
  border-bottom: 0;
  font-family: var(--font-body);
}

.meer-item:hover:not(:disabled) {
  background-color: oklch(var(--glass-bg-primary) / 0.5);
  color: oklch(var(--primary));
}

.meer-item:focus-visible {
  outline: 2px solid oklch(var(--ring));
  outline-offset: -2px;
}

.meer-item[data-active="true"] {
  background-color: oklch(var(--glass-bg-active));
  border-left-color: oklch(var(--primary));
  color: oklch(var(--primary));
}

.meer-item-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.meer-item-label {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  flex: 1;
  min-width: 0;
}

.meer-item-hint {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: oklch(var(--muted-foreground));
  flex-shrink: 0;
}

.meer-item[data-active="true"] .meer-item-hint {
  color: oklch(var(--primary) / 0.7);
}

.meer-item-chevron {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: oklch(var(--muted-foreground));
  transition: transform 0.2s ease-out;
}

.meer-item:hover .meer-item-chevron {
  color: oklch(var(--primary));
}

/* --- Admin-variant — prominente paarse accent-stijl ---
 * Spiegelt de @layer utilities admin-variant regels hierboven voor de
 * onge-layerde .meer-item definities. Markeert de Admin-knop in het
 * Meer-menu zodat deze direct opvalt wanneer het menu opent: paarse
 * tint achtergrond, paarse linker rand (4px), paarse glow, bold label.
 * Specificiteit (0,2,0) wint van basis .meer-item (0,1,0). */

.meer-item[data-variant="admin"] {
  background-color: oklch(var(--glass-bg-primary));
  border-left: 4px solid oklch(var(--primary));
  color: oklch(var(--primary));
  box-shadow: 0 0 0 1px oklch(var(--primary) / 0.25), 0 0 14px -4px
    oklch(var(--primary) / 0.45);
}

.meer-item[data-variant="admin"] .meer-item-label {
  font-weight: 800;
  letter-spacing: 0.01em;
}

.meer-item[data-variant="admin"]:hover:not(:disabled) {
  background-color: oklch(var(--glass-bg-primary-strong));
  border-left-color: oklch(var(--primary));
  color: oklch(var(--primary));
  box-shadow: 0 0 0 1px oklch(var(--primary) / 0.4), 0 0 20px -2px
    oklch(var(--primary) / 0.6);
}

.meer-item[data-variant="admin"]:focus-visible {
  outline: 2px solid oklch(var(--ring));
  outline-offset: -2px;
}

/* --- Meer-divider + sectie-label --- */

.meer-divider {
  height: 1px;
  margin: 0.375rem 0.5rem;
  background-color: oklch(var(--glass-border));
  border: 0;
}

.meer-section-label {
  padding: 0.5rem 0.75rem 0.25rem;
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(var(--muted-foreground));
}

/* --- Meer-menu header (optionele titelbalk) --- */

.meer-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem 0.375rem;
}

.meer-menu-title {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: oklch(var(--foreground));
}

.meer-menu-close {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: oklch(var(--muted-foreground));
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.2s ease-out, background-color 0.2s ease-out;
}

.meer-menu-close:hover {
  color: oklch(var(--foreground));
  background-color: oklch(var(--glass-bg-strong));
}

.meer-menu-close:focus-visible {
  outline: 2px solid oklch(var(--ring));
  outline-offset: 2px;
}

/* --- Meer-backdrop (klik-buiten om te sluiten) --- */

.meer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1290;
  background: transparent;
  pointer-events: auto;
}

/* --- Bottom-nav Meer-knop (vijfde nav-item) ---
 * Spiegelt de geometrie van een hoofd-nav-item maar opent een menu. */

.nav-meer-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  transition: background-color 0.2s ease-out;
}

.nav-meer-button:hover {
  background-color: oklch(var(--glass-bg) / 0.5);
}

.nav-meer-button:focus-visible {
  outline: 2px solid oklch(var(--ring));
  outline-offset: 2px;
}

.nav-meer-button[data-open="true"] {
  background-color: oklch(var(--glass-bg-active));
}

/* --- Meer-menu keyframes --- */

@keyframes meer-menu-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes meer-menu-out {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.96) translateY(4px);
  }
}

@keyframes nav-active-pulse {
  0%,
  100% {
    opacity: 0.85;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* --- Reduced-motion: Meer-menu animaties uit --- */

@media (prefers-reduced-motion: reduce) {
  .meer-menu,
  .meer-menu[data-state="closed"],
  .meer-trigger .meer-trigger-icon,
  .meer-trigger[data-has-active="true"]::after {
    animation: none;
    transition: none;
  }
}

/* --- @supports fallback: geen backdrop-filter ---
 * Meer-menu valt terug op semi-transparante card-achtergrond. */

@supports not (
    (backdrop-filter: blur(1px))
  ) {
  .meer-menu {
    background-color: oklch(var(--popover));
  }
}

/* ============================================================
 * MODIFICATION BUILD — Telefoon+PIN login, profiel-taalkeuze,
 * foto-uploadzones. ADDITIEF: geen bestaande tokens, utilities
 * of component-stijlen gewijzigd. Alles hergebruikt :root/.dark
 * OKLCH-tokens, glassmorphism utilities, paars primary, en de
 * bestaande LanguageSwitcher / LanguageMenu tokens.
 * ========================================================== */

/* --- 7. Telefoon+PIN login-scherm — gelijkwaardige II/PIN keuze.
 *    Toont Internet Identity en telefoon+PIN naast elkaar als twee
 *    even grote glas-kaarten. PIN-kaart bevat telefoon-invoer +
 *    4-cijferige PIN-invoer (grote mono digits, glas-stijl).
 *    Mobiel: kaarten stapelen verticaal; desktop: naast elkaar.
 *    Geen nieuwe kleuren — hergebruikt glass + primary + ring. */

.login-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
}

@media (min-width: 640px) {
  .login-split {
    grid-template-columns: 1fr 1fr;
  }
}

.login-option-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius);
  background-color: oklch(var(--glass-bg));
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  border: 1px solid oklch(var(--glass-border));
  box-shadow: var(--glass-shadow);
  transition: border-color 0.25s
    var(--motion-ease, cubic-bezier(0.4, 0, 0.2, 1)), box-shadow 0.25s
    var(--motion-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.login-option-card:hover {
  border-color: oklch(var(--glass-border-active));
  box-shadow: var(--glass-shadow-primary);
}

.login-option-card[data-selected="true"] {
  border-color: oklch(var(--glass-border-primary));
  box-shadow: var(--glass-shadow-primary);
}

.login-option-icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: oklch(var(--glass-bg-primary));
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid oklch(var(--glass-border-primary));
  color: oklch(var(--primary));
}

.login-option-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: oklch(var(--foreground));
}

.login-option-desc {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: oklch(var(--muted-foreground));
}

.login-option-cta {
  margin-top: auto;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* II-kaart CTA — navy accent (geen paars, zodat beide kaarten gelijkwaardig
   lezen; paars blijft voor de PIN-kaart als "eenvoudigste optie"). */

.login-option-cta-ii {
  background-color: oklch(var(--glass-bg));
  border: 1px solid oklch(var(--glass-border-active));
  color: oklch(var(--foreground));
}

.login-option-cta-ii:hover:not(:disabled) {
  background-color: oklch(var(--glass-bg-strong));
  border-color: oklch(var(--accent-foreground, var(--foreground)));
}

/* PIN-kaart CTA — amber primary (markeert telefoon+PIN als de
   aanbevolen eenvoudige route voor niet-tech-savvy gebruikers). */

.login-option-cta-pin {
  background-color: oklch(var(--glass-bg-primary));
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  border: 1px solid oklch(var(--glass-border-primary));
  box-shadow: var(--glass-shadow-primary);
  color: oklch(var(--primary));
}

.login-option-cta-pin:hover:not(:disabled) {
  background-color: oklch(var(--glass-bg-primary-strong));
  border-color: oklch(var(--primary));
}

.login-option-cta:focus-visible {
  outline: 2px solid oklch(var(--ring));
  outline-offset: 2px;
}

.login-option-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Telefoon-invoer — grote aanraakvriendelijke glas-invoer.
 *    Landcode-prefix + nationaal nummer. Hergebruikt glass-input
 *    stijl maar met grotere padding voor mobiel. */

.login-phone-field {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.login-phone-prefix {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.875rem;
  min-width: 4.5rem;
  border-radius: calc(var(--radius) - 2px);
  background-color: oklch(var(--glass-bg-strong));
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid oklch(var(--glass-border));
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.9375rem;
  color: oklch(var(--foreground));
}

.login-phone-input {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 0.875rem;
  border-radius: calc(var(--radius) - 2px);
  background-color: oklch(var(--glass-bg));
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid oklch(var(--glass-border));
  color: oklch(var(--foreground));
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-phone-input::-moz-placeholder {
  color: oklch(var(--muted-foreground));
  font-family: var(--font-body);
  letter-spacing: 0;
}

.login-phone-input::placeholder {
  color: oklch(var(--muted-foreground));
  font-family: var(--font-body);
  letter-spacing: 0;
}

.login-phone-input:focus {
  outline: none;
  border-color: oklch(var(--ring));
  background-color: oklch(var(--glass-bg-strong));
  box-shadow: 0 0 0 3px oklch(var(--ring) / 0.22);
}

/* --- 4-cijferige PIN-invoer — vier grote mono digits.
 *    Elke cel is een glas-kaartje dat oplicht bij focus/invulling.
 *    Groot aanraakdoel (3rem), mono font, tabular-nums.
 *    Frontend beheert focus-volgorde + auto-advance per cel. */

.pin-input-row {
  display: flex;
  gap: 0.625rem;
  justify-content: center;
  width: 100%;
}

.pin-cell {
  flex: 1;
  max-width: 3.25rem;
  aspect-ratio: 1 / 1.15;
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--radius) - 2px);
  background-color: oklch(var(--glass-bg));
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1.5px solid oklch(var(--glass-border));
  color: oklch(var(--foreground));
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  caret-color: oklch(var(--primary));
  transition: border-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), background-color
    0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s
    cubic-bezier(0.4, 0, 0.2, 1);
}

.pin-cell::-moz-placeholder {
  color: oklch(var(--muted-foreground) / 0.5);
  font-weight: 400;
}

.pin-cell::placeholder {
  color: oklch(var(--muted-foreground) / 0.5);
  font-weight: 400;
}

.pin-cell:focus {
  outline: none;
  border-color: oklch(var(--primary));
  background-color: oklch(var(--glass-bg-primary));
  box-shadow: 0 0 0 3px oklch(var(--ring) / 0.28);
}

.pin-cell[data-filled="true"] {
  border-color: oklch(var(--glass-border-primary));
  background-color: oklch(var(--glass-bg-primary));
  color: oklch(var(--primary));
}

.pin-cell[data-error="true"] {
  border-color: oklch(var(--destructive));
  background-color: oklch(var(--destructive) / 0.08);
  box-shadow: 0 0 0 3px oklch(var(--destructive) / 0.18);
  animation: pin-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.pin-cell:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@keyframes pin-shake {
  10%,
  90% {
    transform: translateX(-1px);
  }
  20%,
  80% {
    transform: translateX(2px);
  }
  30%,
  50%,
  70% {
    transform: translateX(-3px);
  }
  40%,
  60% {
    transform: translateX(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pin-cell[data-error="true"] {
    animation: none;
  }
}

/* --- Login-foutmelding — kleine paars/warning pill onder het formulier. */

.login-error {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: 9999px;
  background-color: oklch(var(--notice-warning-bg));
  border: 1px solid oklch(var(--notice-warning-border) / 0.4);
  color: oklch(var(--notice-warning-fg));
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* --- Login-voordelen lijst — kleine vinkjes die telefoon+PIN
 *    als de eenvoudige keuze markeren (geen II-complexiteit). */

.login-benefits {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.login-benefit {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: oklch(var(--muted-foreground));
}

.login-benefit-check {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: oklch(var(--primary) / 0.15);
  color: oklch(var(--primary));
  margin-top: 0.0625rem;
}

/* ============================================================
 * 8. Profiel-taalkeuze — dropdown in passagiers- en
 *    chauffeursprofiel. Vindbaar in het profiel-formulier (niet
 *    in de header). Hergebruikt de bestaande LanguageMenu tokens
 *    (.language-menu z-index 1200) maar met een profiel-form-
 *    georiënteerde trigger die past tussen de andere velden.
 * ========================================================== */

.profile-lang-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  width: 100%;
}

.profile-lang-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: oklch(var(--foreground));
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.profile-lang-label-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: oklch(var(--muted-foreground));
}

.profile-lang-hint {
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.35;
  color: oklch(var(--muted-foreground));
}

.profile-lang-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  width: 100%;
  padding: 0.75rem 0.875rem;
  min-height: 2.75rem;
  border-radius: calc(var(--radius) - 2px);
  background-color: oklch(var(--glass-bg));
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid oklch(var(--glass-border));
  color: oklch(var(--foreground));
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-lang-trigger:hover:not(:disabled) {
  background-color: oklch(var(--glass-bg-strong));
  border-color: oklch(var(--glass-border-active));
}

.profile-lang-trigger:focus-visible {
  outline: none;
  border-color: oklch(var(--ring));
  box-shadow: 0 0 0 3px oklch(var(--ring) / 0.22);
}

.profile-lang-trigger[data-open="true"] {
  border-color: oklch(var(--primary));
  background-color: oklch(var(--glass-bg-primary));
}

.profile-lang-current {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.profile-lang-flag {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.25rem;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.625rem;
  background-color: oklch(var(--muted));
  color: oklch(var(--foreground));
  border: 1px solid oklch(var(--border));
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.profile-lang-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-lang-chevron {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: oklch(var(--muted-foreground));
  transition: transform 0.2s ease-out, color 0.2s ease-out;
}

.profile-lang-trigger[data-open="true"] .profile-lang-chevron {
  transform: rotate(180deg);
  color: oklch(var(--primary));
}

/* Hergebruikt .language-menu (z-index 1200, max-width/max-height
   viewport-veilig) voor het paneel zelf. Profiel-specifieke items: */

.profile-lang-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  min-height: 2.75rem;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  transition: background-color 0.15s ease-out;
  border-left: 3px solid transparent;
  color: oklch(var(--foreground));
  width: 100%;
  background: transparent;
  border-top: 0;
  border-right: 1px solid transparent;
  border-bottom: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: left;
}

.profile-lang-item:hover {
  background-color: oklch(var(--dropdown-item-hover));
}

.profile-lang-item[data-active="true"] {
  background-color: oklch(var(--dropdown-item-active));
  border-left-color: oklch(var(--dropdown-item-active-border));
  color: oklch(var(--primary));
  font-weight: 600;
}

.profile-lang-item[data-active="true"] .profile-lang-flag {
  background-color: oklch(var(--primary) / 0.15);
  color: oklch(var(--primary));
  border-color: oklch(var(--primary) / 0.4);
}

.profile-lang-item-check {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: oklch(var(--primary));
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

.profile-lang-item[data-active="true"] .profile-lang-item-check {
  opacity: 1;
}

/* ============================================================
 * 9. Foto-uploadzones — voertuigfoto (verplicht) en
 *    chauffeurfoto (optioneel). Beide zijn glas-kaarten met een
 *    dropzone, preview, en status-badge. Voertuig = amber accent
 *    (verplicht); chauffeur = muted (optioneel). Hergebruikt
 *    glass + primary + muted + success tokens.
 * ========================================================== */

.photo-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--radius);
  background-color: oklch(var(--glass-bg));
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1.5px dashed oklch(var(--glass-border));
  transition: border-color 0.25s
    var(--motion-ease, cubic-bezier(0.4, 0, 0.2, 1)), background-color 0.25s
    var(--motion-ease, cubic-bezier(0.4, 0, 0.2, 1));
  min-height: 8rem;
}

.photo-zone:hover {
  border-color: oklch(var(--glass-border-active));
}

/* Verplichte voertuigfoto — amber accentrand (solid, niet dashed
   wanneer gevuld). */

.photo-zone-vehicle {
  border-color: oklch(var(--primary) / 0.45);
  border-style: dashed;
}

.photo-zone-vehicle:hover {
  border-color: oklch(var(--primary));
}

.photo-zone-vehicle[data-filled="true"] {
  border-style: solid;
  border-color: oklch(var(--primary) / 0.55);
  background-color: oklch(var(--glass-bg-primary));
}

/* Optionele chauffeurfoto — muted, geen amber dwang. */

.photo-zone-driver {
  border-color: oklch(var(--glass-border));
}

.photo-zone-driver[data-filled="true"] {
  border-style: solid;
  border-color: oklch(var(--glass-border-active));
}

/* Drag-over state — kaart licht op in amber. */

.photo-zone[data-dragging="true"] {
  border-color: oklch(var(--primary));
  background-color: oklch(var(--glass-bg-primary-strong));
  box-shadow: 0 0 0 3px oklch(var(--ring) / 0.22);
}

.photo-zone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
}

.photo-zone-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  color: oklch(var(--foreground));
}

.photo-zone-title-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: oklch(var(--muted-foreground));
}

.photo-zone-vehicle .photo-zone-title-icon {
  color: oklch(var(--primary));
}

/* Verplicht-badge — kleine amber pill voor voertuigfoto. */

.photo-zone-required {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background-color: oklch(var(--primary) / 0.12);
  color: oklch(var(--primary));
  border: 1px solid oklch(var(--primary) / 0.3);
}

/* Optioneel-badge — muted pill voor chauffeurfoto. */

.photo-zone-optional {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background-color: oklch(var(--muted));
  color: oklch(var(--muted-foreground));
  border: 1px solid oklch(var(--border));
}

.photo-zone-drop {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem 0.75rem;
  border-radius: calc(var(--radius) - 4px);
  text-align: center;
  cursor: pointer;
  min-height: 5rem;
}

.photo-zone-drop-icon {
  width: 2rem;
  height: 2rem;
  color: oklch(var(--muted-foreground));
}

.photo-zone-vehicle .photo-zone-drop-icon {
  color: oklch(var(--primary) / 0.7);
}

.photo-zone-drop-text {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: oklch(var(--foreground));
}

.photo-zone-drop-hint {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: oklch(var(--muted-foreground));
}

.photo-zone-preview {
  position: relative;
  width: 100%;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  background-color: oklch(var(--muted));
  border: 1px solid oklch(var(--border));
}

.photo-zone-preview-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 14rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.photo-zone-preview-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.375rem;
  padding: 0.5rem;
  background: linear-gradient(180deg, transparent 50%, oklch(0 0 0 / 0.35) 100%);
}

.photo-zone-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: oklch(var(--glass-bg-strong));
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  border: 1px solid oklch(var(--glass-border-active));
  color: oklch(var(--foreground));
  cursor: pointer;
  transition: all 0.2s ease-out;
}

.photo-zone-action:hover {
  background-color: oklch(var(--glass-bg-primary-strong));
  color: oklch(var(--primary));
  border-color: oklch(var(--primary));
}

.photo-zone-action-danger:hover {
  background-color: oklch(var(--destructive) / 0.18);
  color: oklch(var(--destructive));
  border-color: oklch(var(--destructive));
}

.photo-zone-action:focus-visible {
  outline: 2px solid oklch(var(--ring));
  outline-offset: 2px;
}

/* Geüploade-status badge — groen vinkje. */

.photo-zone-uploaded {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background-color: oklch(var(--success) / 0.12);
  color: oklch(var(--success));
  border: 1px solid oklch(var(--success) / 0.3);
}

/* Voortgangsfeedback tijdens client-side foto-compressie —
   flex-col layout met een dunne track, gevuld met primary,
   en een compact label in primary-kleur. */

.photo-zone-progress {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.photo-zone-progress-track {
  height: 0.375rem;
  border-radius: 9999px;
  background-color: oklch(var(--muted));
  overflow: hidden;
}

.photo-zone-progress-fill {
  height: 100%;
  border-radius: 9999px;
  background-color: oklch(var(--primary));
  transition: width 0.2s ease-out;
}

.photo-zone-progress-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: oklch(var(--primary));
}

/* Foto-placeholder bij passage-kaart — kleine ronde thumb die
   ontbreekt-status toont (geen foto geüpload). Hergebruikt
   muted + destructive voor de "ontbreekt" marker. */

.passage-photo-thumb {
  position: relative;
  width: 3rem;
  height: 3rem;
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
  background-color: oklch(var(--muted));
  border: 1px solid oklch(var(--border));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.passage-photo-thumb-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.passage-photo-thumb[data-missing="true"] {
  border-style: dashed;
  border-color: oklch(var(--destructive) / 0.4);
  background-color: oklch(var(--destructive) / 0.06);
  color: oklch(var(--muted-foreground));
}

.passage-photo-thumb[data-missing="true"]::after {
  content: "!";
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: oklch(var(--destructive));
}

/* Voertuig-foto variant — groter dan de chauffeur-thumb (3rem×3rem) zodat
   de auto prominent zichtbaar is op de passagiers-ritstatuspagina. De thumb
   behoudt dezelfde missing-state styling als .passage-photo-thumb via de
   gedeelde data-missing="true" selector hierboven. Wordt gebruikt op
   RidePage en WaitingPage in combinatie met het kenteken ernaast. */

.passage-photo-vehicle {
  position: relative;
  width: 100%;
  height: 14rem;
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
  background-color: oklch(var(--muted));
  border: 1px solid oklch(var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.passage-photo-vehicle[data-missing="true"] {
  border-style: dashed;
  border-color: oklch(var(--destructive) / 0.4);
  background-color: oklch(var(--destructive) / 0.06);
  color: oklch(var(--muted-foreground));
}

.passage-photo-vehicle[data-missing="true"]::after {
  content: "!";
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: oklch(var(--destructive));
}

/* ============================================================
   * UBER-STYLE DASHBOARD DARK-MODE UTILITIES
   *
   * Zwevende bottom-sheet en rit-statusbalk voor de passagiers- en
   * chauffeursdashboards. GESCOPEERD op .dashboard-dark — deze
   * utilities lezen de dashboard-tokens (blauw primary, lichtgroen
   * accent, witte tekst, donkere glas-achtergrond) die alleen binnen
   * .dashboard-dark gelden. Buiten .dashboard-dark vallen ze terug
   * op de globale tokens, dus ze zijn veilig om elders te gebruiken
   * maar krijgen dan de globale amber-stijl (geen visuele breuk).
   *
   * Componenten: .dashboard-bottom-sheet, .dashboard-status-bar,
   * .dashboard-status-segment, .dashboard-status-segment-active,
   * .dashboard-status-segment-done, .dashboard-status-label.
   * ========================================================== */

/* --- Zwevende bottom-sheet (LED-stijl) ---
    * Drijft bovenop de donkere kaart, afgeronde bovenhoeken (24px),
    * donkere glas-achtergrond, BLAUWE GLOEIENDE BOVENRAND (LED),
    * zachte schaduw, safe-zone padding. Frontend positioneert met
    * fixed/absolute bottom-0; CSS levert de visuele stijl. slide-up
    * animatie bij mount (0.32s). De blauwe gloeiende bovenrand wordt
    * geleverd via een box-shadow inset + outer halo op de bovenrand
    * zodat de sheet leest als een zwevende LED-module. */

.dashboard-bottom-sheet {
  background-color: oklch(var(--glass-bg-strong));
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.8);
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  border: 1px solid oklch(var(--glass-border));
  border-bottom: 0;
  /* LED-gloeiende bovenrand: dunne blauwe inset-lijn boven + brede
     blauwe halo boven + donkere elevatie-schaduw. De bovenrand gloeit
     blauw (LED-identiteit) terwijl de zijkanten subtiel blijven. */
  box-shadow:
    inset 0 1px 0 0 oklch(0.7 0.18 55 / 0.85),
    0 -2px 14px -1px oklch(0.7 0.18 55 / 0.45),
    0 -8px 32px -6px oklch(0.7 0.18 55 / 0.3),
    0 -12px 40px -8px oklch(0 0 0 / 0.55),
    0 -4px 12px -4px oklch(0 0 0 / 0.35);
  /* Nav-offset: zweef boven de vaste menubalk (DriverNav/PassengerNav,
     h-14 = 3.5rem) in plaats van eronder te verdwijnen. Frontend kan dit
     overschrijven via een inline `bottom` style op DashboardBottomSheet
     (bottomOffset prop). De CSS-utility levert de veilige default. */
  bottom: var(--bottom-nav-height, 0);
  padding: 0.75rem 1.25rem max(1.25rem, env(safe-area-inset-bottom));
  animation: dashboard-sheet-slide-up 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Sleepgreep bovenaan de sheet — BLAUWE LED-streepje, gecentreerd.
    * Vervangt het grijze streepje door een blauw LED-streepje met
    * subtiele gloed zodat de sleepgreep de LED-identiteit versterkt. */

.dashboard-bottom-sheet::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 0.25rem;
  margin: 0 auto 0.75rem;
  border-radius: 9999px;
  background-color: oklch(0.7 0.18 55 / 0.9);
  box-shadow: 0 0 8px oklch(0.7 0.18 55 / 0.6);
}

/* --- Rit-statusbalk (LED-stijl) ---
    * Horizontale voortgangsbalk met segmenten per fase. BLAUWE LED-
    * gloei voor de actieve fase (met pulse), BLAUW/WIT voor voltooide
    * fasen, subtiele DONKERE achtergrond voor pending.
    * Witte labels, subtiele donkere achtergrond. Frontend rendert N
    * segmenten met data-state="pending" | "active" | "done".
    *
    * STEPPER REPARATIE (requirement): labels mogen NOOIT afgekapt
    * worden. De balk is horizontaal scrollbaar wanneer de segmenten
    * niet passen; labels wrap op maximaal 2 regels met text-wrap:
    * balance zodat korte woorden volledig leesbaar blijven. */

.dashboard-status-bar {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  width: 100%;
  padding: 0.5rem;
  border-radius: calc(var(--radius) - 2px);
  background-color: oklch(var(--card) / 0.6);
  border: 1px solid oklch(var(--glass-border));
  /* STEPPER REPARATIE: laat de balk horizontaal scrollen wanneer de
     7 segmenten niet in de beschikbare breedte passen, i.p.v. de
     labels af te kappen. overflow-x:auto met een dunne scrollbar. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: oklch(0.5 0.14 255 / 0.5) transparent;
  -webkit-overflow-scrolling: touch;
}

.dashboard-status-bar::-webkit-scrollbar {
  height: 4px;
}

.dashboard-status-bar::-webkit-scrollbar-thumb {
  background-color: oklch(0.5 0.14 255 / 0.5);
  border-radius: 9999px;
}

/* Enkel segment — flexibel, minimaal 0, met label erboven. Frontend
      zet een wrapper met label + track. */

.dashboard-status-segment {
  /* STEPPER REPARATIE: min-width zodat elk label volledig past i.p.v.
     afgekapt te worden. flex-basis 0 houdt gelijke verdeling wanneer
     er ruimte is; wanneer niet, schuift de balk horizontaal. */
  flex: 1 1 0;
  min-width: 5.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.125rem;
  border-radius: 0.375rem;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* De track-strook onder het label — LED-stijl:
    *  - pending  → subtiele donkere strook (subtiel donker)
    *  - active   → blauwe LED-vulling met gloed + pulse-animatie
    *  - done     → blauwe vulling (voltooid) */

.dashboard-status-segment-track {
  width: 100%;
  height: 0.25rem;
  border-radius: 9999px;
  /* pending = inactieve blauw-zwarte strook (geen grijs) */
  background-color: oklch(0.2 0.05 250 / 0.5);
  overflow: hidden;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow
    0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* STEPPER KLEUR (requirement): actieve en voltooide segmenten krijgen
    een duidelijke BLAUWE achtergrond met WITTE tekst, zodat blauw
    dominant leest i.p.v. de blauwe balk-rand. De blauwe hue (250)
    is opzettelijk anders dan de blauwe --primary (250) — alleen de
    statusbalk wordt blauw/wit, de rest van het kleurensysteem blijft
    onaangetast. */

.dashboard-status-segment[data-state="active"] {
  background-color: oklch(0.85 0.13 85 / 0.22);
}

.dashboard-status-segment[data-state="done"] {
  background-color: oklch(0.85 0.13 85 / 0.16);
}

/* Actieve fase — BLAUWE LED-vulling met gloed + pulse-animatie. */

.dashboard-status-segment[data-state="active"] .dashboard-status-segment-track {
  background-color: oklch(0.85 0.13 85);
  box-shadow: 0 0 8px oklch(0.85 0.13 85 / 0.85), 0 0 16px
    oklch(0.85 0.13 85 / 0.5), inset 0 0 4px oklch(0.97 0.005 250 / 0.4);
  animation: dashboard-status-pulse 2s ease-in-out infinite;
}

/* Voltooide fase — BLAUWE vulling (LED-stijl). */

.dashboard-status-segment[data-state="done"] .dashboard-status-segment-track {
  background-color: oklch(0.85 0.13 85);
  box-shadow: 0 0 6px oklch(0.85 0.13 85 / 0.5);
}

/* Faselabel — wit actief/voltooid, muted inactief. Labels mogen NOOIT
    afgekapt worden (STEPPER REPARATIE): wrap op max 2 regels met
    text-wrap: balance zodat korte woorden volledig leesbaar blijven. */

.dashboard-status-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-align: center;
  color: oklch(var(--muted-foreground));
  text-transform: uppercase;
  /* STEPPER REPARATIE: geen truncatie meer. Labels wrap en blijven
     volledig leesbaar; de balk schuift horizontaal wanneer nodig. */
  white-space: normal;
  word-break: break-word;
  text-wrap: balance;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* STEPPER KLEUR (requirement): actieve en voltooide labels zijn WIT
    i.p.v. muted/blauw, zodat blauwe segment + witte tekst duidelijk
    leest als de actieve/voltooide stap. */

.dashboard-status-segment[data-state="active"] .dashboard-status-label {
  color: oklch(0.99 0.005 250);
}

.dashboard-status-segment[data-state="done"] .dashboard-status-label {
  color: oklch(0.97 0.02 250);
}

/* --- Animaties --- */

@keyframes dashboard-sheet-slide-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dashboard-status-pulse {
  0%,
  100% {
    opacity: 0.85;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-bottom-sheet {
    animation: none;
  }
  .dashboard-status-segment[data-state="active"]
    .dashboard-status-segment-track {
    animation: none;
  }
}

/* @supports fallback — zonder backdrop-filter blijft de sheet leesbaar
      met een semi-transparante donkere achtergrond (niet opaque). */

@supports not (
    (backdrop-filter: blur(1px))
  ) {
  .dashboard-dark .dashboard-bottom-sheet {
    background-color: oklch(0.08 0.02 250 / 0.95);
  }
}

/* ============================================================
   * PREMIUM LED-MODULES — drie aparte zwevende modules in het
   * passagiers-dashboard (Ophaallocatie, Bestemming, Ritcategorie).
   * GESCOPEERD op .dashboard-dark — leest de LED-tokens (blauwe
   * gloeiende randen, donker glas, witte tekst). Elke module is
   * een donker glas-paneel met een blauwe gloeiende rand die
   * intenser wordt op focus/active. De 3D-kaart erachter blijft
   * zichtbaar door het transparante glas.
   * ========================================================== */

.dashboard-dark .led-module {
  position: relative;
  background-color: oklch(var(--glass-bg-strong));
  backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  border: 1px solid oklch(0.7 0.18 55 / 0.45);
  border-radius: 1rem;
  /* LED-gloed: dunne blauwe rand-schaduw + brede zachte blauwe halo +
     donkere elevatie-schaduw. */
  box-shadow: 0 0 0 1px oklch(0.7 0.18 55 / 0.18), 0 0 18px -4px
    oklch(0.7 0.18 55 / 0.35), 0 8px 28px -10px oklch(0 0 0 / 0.5);
  padding: 1rem;
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s
    cubic-bezier(0.4, 0, 0.2, 1);
}

/* Module-kop — klein label met LED-icoon-streepje links. */

.dashboard-dark .led-module-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: oklch(0.78 0.14 220);
  margin-bottom: 0.625rem;
}

.dashboard-dark .led-module-label::before {
  content: "";
  display: inline-block;
  width: 0.25rem;
  height: 0.875rem;
  border-radius: 9999px;
  background-color: oklch(0.7 0.18 55);
  box-shadow: 0 0 8px oklch(0.7 0.18 55 / 0.7);
  flex-shrink: 0;
}

/* --- LED-styled adres-invoer (AddressAutocomplete) ---
    * Vervangt de standaard shadcn-input stijl door een LED-stijl
    * binnen .dashboard-dark: donker glas, blauwe gloeiende rand op
    * focus, witte tekst, wit/lichtblauw icoon. Geldt alleen binnen
    * .dashboard-dark zodat andere pagina's onaangetast blijven. */

.dashboard-dark .led-input {
  width: 100%;
  height: 2.75rem;
  padding: 0 0.875rem 0 2.5rem;
  border-radius: 0.75rem;
  background-color: oklch(0.16 0.022 260 / 0.55);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid oklch(0.7 0.18 55 / 0.4);
  color: oklch(var(--foreground));
  font-family: var(--font-body);
  font-size: 0.9375rem;
  transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s
    cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s
    cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-dark .led-input::-moz-placeholder {
  color: oklch(var(--muted-foreground));
}

.dashboard-dark .led-input::placeholder {
  color: oklch(var(--muted-foreground));
}

.dashboard-dark .led-input:focus {
  outline: none;
  border-color: oklch(0.7 0.18 55 / 0.95);
  background-color: oklch(0.16 0.022 260 / 0.7);
  box-shadow: 0 0 0 3px oklch(0.7 0.18 55 / 0.22), 0 0 16px -2px
    oklch(0.7 0.18 55 / 0.45);
}

.dashboard-dark .led-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* LED-input label — wit, iets compacter. */

.dashboard-dark .led-input-label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: oklch(var(--foreground));
}

/* --- LED-styled TaxiClass optiekaart ---
    * De optiekaarten krijgen een blauwe gloeiende rand op selectie
    * (led-border-active) en een subtiele blauwe rand in rust. De
    * bestaande glass-button / glass-button-primary utilities blijven
    * behouden; deze klasse voegt enkel de LED-gloed-rand toe. */

.dashboard-dark .led-taxi-option {
  position: relative;
  border: 1px solid oklch(0.7 0.18 55 / 0.3);
  box-shadow: 0 0 0 1px oklch(0.7 0.18 55 / 0.1), 0 4px 16px -8px
    oklch(0 0 0 / 0.4);
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s
    cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-dark .led-taxi-option[data-active="true"] {
  border-color: oklch(0.7 0.18 55 / 0.95);
  box-shadow: 0 0 0 1px oklch(0.7 0.18 55 / 0.4), 0 0 22px -1px
    oklch(0.7 0.18 55 / 0.7), 0 0 40px -8px oklch(0.7 0.18 55 / 0.5), inset 0 0
    12px -2px oklch(0.7 0.18 55 / 0.4);
}

.dashboard-dark
  .led-taxi-option:hover:not([data-active="true"]):not(:disabled) {
  border-color: oklch(0.7 0.18 55 / 0.7);
  box-shadow: 0 0 0 1px oklch(0.7 0.18 55 / 0.2), 0 0 16px -2px
    oklch(0.7 0.18 55 / 0.45);
}

/* --- LED-prijsweergave ---
    * De prijs in het schattingspaneel krijgt een blauwe LED-gloed
    * zodat de prijs als een "LED-display" leest. Subtiele text-shadow
    * met blauwe gloed, behoudt de primary kleur. */

.dashboard-dark .led-price {
  color: oklch(0.7 0.18 55);
  text-shadow: 0 0 8px oklch(0.7 0.18 55 / 0.6), 0 0 16px
    oklch(0.7 0.18 55 / 0.35);
}

/* ==========================================================================
   Referral dashboard utilities — dashboard-dark scope, LED-stijl
   ==========================================================================
   * Hergebruikt led-module patroon, glass-button-primary / LED-active,
   * Geist Mono voor IBAN en link. Geen nieuwe kleur tokens.
   * ------------------------------------------------------------------------ */

/* Referral kaart — LED-stijl, led-module patroon */

.dashboard-dark .referral-card {
  position: relative;
  padding: 1.5rem;
  border-radius: 1rem;
  background: oklch(0.13 0.005 260 / 0.55);
  border: 1px solid oklch(0.7 0.18 55 / 0.25);
  box-shadow: 0 0 0 1px oklch(0.7 0.18 55 / 0.08), 0 8px 24px -10px
    oklch(0 0 0 / 0.5), inset 0 0 24px -8px oklch(0.7 0.18 55 / 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Link veld — Geist Mono, tabular-nums, kopieerbaar */

.dashboard-dark .referral-link-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.625rem;
  background: oklch(0.14 0.02 255 / 0.6);
  border: 1px solid oklch(0.7 0.18 55 / 0.2);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: oklch(0.85 0.05 255);
  letter-spacing: 0.02em;
  overflow-x: auto;
  white-space: nowrap;
}

/* Kopieer-knop */

.dashboard-dark .referral-copy-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  border: 1px solid oklch(0.7 0.18 55 / 0.3);
  background: oklch(0.2 0.04 255 / 0.5);
  color: oklch(0.7 0.18 55);
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.dashboard-dark .referral-copy-btn:hover {
  border-color: oklch(0.7 0.18 55 / 0.7);
  color: oklch(0.78 0.16 255);
  box-shadow: 0 0 14px -2px oklch(0.7 0.18 55 / 0.5);
}

.dashboard-dark .referral-copy-btn[data-copied="true"] {
  color: oklch(0.72 0.18 145);
  border-color: oklch(0.72 0.18 145 / 0.6);
  box-shadow: 0 0 14px -2px oklch(0.72 0.18 145 / 0.5);
}

/* Grid voor 4 stat kaarten (2x2 of 4x1 responsive) */

.dashboard-dark .referral-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
}

@media (min-width: 768px) {
  .dashboard-dark .referral-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Stat kaart — led-module patroon */

.dashboard-dark .referral-stat-card {
  position: relative;
  padding: 1rem 1.125rem;
  border-radius: 0.75rem;
  background: oklch(0.16 0.03 255 / 0.5);
  border: 1px solid oklch(0.7 0.18 55 / 0.2);
  box-shadow: inset 0 0 18px -8px oklch(0.7 0.18 55 / 0.25);
  overflow: hidden;
}

.dashboard-dark .referral-stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at top,
    oklch(0.7 0.18 55 / 0.12),
    transparent 70%
  );
  pointer-events: none;
}

.dashboard-dark .referral-stat-card .referral-stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 600;
  color: oklch(0.7 0.18 55);
  text-shadow: 0 0 8px oklch(0.7 0.18 55 / 0.55), 0 0 16px
    oklch(0.7 0.18 55 / 0.3);
}

.dashboard-dark .referral-stat-card .referral-stat-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: oklch(0.75 0.05 255 / 0.75);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Multi-level referral stat-card varianten
   -------------------------------------------------------------------------
   * Elke variant hergebruikt het .referral-stat-card basis-patroon en
   * overschrijft enkel de LED-tint (rand, gloed, waarde, label-kleur).
   * Geen nieuwe kleur-tokens — alles OKLCH literals binnen bestaande hue's.
   * ------------------------------------------------------------------------ */

/* Level 1 — chauffeur commissie (blauwe primary tint, krachtigste gloed) */

.dashboard-dark .referral-stat-card[data-level="1"] {
  border-color: oklch(0.7 0.18 55 / 0.45);
  box-shadow: inset 0 0 22px -8px oklch(0.7 0.18 55 / 0.4), 0 0 14px -6px
    oklch(0.7 0.18 55 / 0.25);
}

.dashboard-dark .referral-stat-card[data-level="1"]::before {
  background: radial-gradient(
    ellipse at top,
    oklch(0.7 0.18 55 / 0.18),
    transparent 70%
  );
}

.dashboard-dark .referral-stat-card[data-level="1"] .referral-stat-value {
  color: oklch(0.72 0.16 255);
  text-shadow: 0 0 8px oklch(0.7 0.18 55 / 0.6), 0 0 16px
    oklch(0.7 0.18 55 / 0.35);
}

.dashboard-dark .referral-stat-card[data-level="1"] .referral-stat-label {
  color: oklch(0.78 0.1 255 / 0.85);
}

/* Level 2 — commissie (lichtere blauwe tint, zachtere gloed) */

.dashboard-dark .referral-stat-card[data-level="2"] {
  border-color: oklch(0.55 0.14 220 / 0.4);
  box-shadow: inset 0 0 20px -8px oklch(0.55 0.14 220 / 0.35), 0 0 12px -6px
    oklch(0.55 0.14 220 / 0.2);
}

.dashboard-dark .referral-stat-card[data-level="2"]::before {
  background: radial-gradient(
    ellipse at top,
    oklch(0.55 0.14 220 / 0.15),
    transparent 70%
  );
}

.dashboard-dark .referral-stat-card[data-level="2"] .referral-stat-value {
  color: oklch(0.72 0.12 220);
  text-shadow: 0 0 8px oklch(0.55 0.14 220 / 0.55), 0 0 16px
    oklch(0.55 0.14 220 / 0.3);
}

.dashboard-dark .referral-stat-card[data-level="2"] .referral-stat-label {
  color: oklch(0.75 0.08 220 / 0.85);
}

/* Contacts — contacten-bonus (amber tint, onderscheidend van blauwe levels) */

.dashboard-dark .referral-stat-card[data-level="contacts"] {
  border-color: oklch(0.7 0.18 55 / 0.45);
  box-shadow: inset 0 0 22px -8px oklch(0.7 0.18 55 / 0.38), 0 0 14px -6px
    oklch(0.7 0.18 55 / 0.25);
}

.dashboard-dark .referral-stat-card[data-level="contacts"]::before {
  background: radial-gradient(
    ellipse at top,
    oklch(0.7 0.18 55 / 0.18),
    transparent 70%
  );
}

.dashboard-dark
  .referral-stat-card[data-level="contacts"]
  .referral-stat-value {
  color: oklch(0.7 0.18 55);
  text-shadow: 0 0 8px oklch(0.7 0.18 55 / 0.6), 0 0 16px
    oklch(0.7 0.18 55 / 0.35);
}

.dashboard-dark
  .referral-stat-card[data-level="contacts"]
  .referral-stat-label {
  color: oklch(0.82 0.1 75 / 0.88);
}

/* Residual — 5% restinkomen (groene tint, success-kleur) */

.dashboard-dark .referral-stat-card[data-level="residual"] {
  border-color: oklch(0.72 0.18 145 / 0.42);
  box-shadow: inset 0 0 22px -8px oklch(0.72 0.18 145 / 0.38), 0 0 14px -6px
    oklch(0.72 0.18 145 / 0.25);
}

.dashboard-dark .referral-stat-card[data-level="residual"]::before {
  background: radial-gradient(
    ellipse at top,
    oklch(0.72 0.18 145 / 0.16),
    transparent 70%
  );
}

.dashboard-dark
  .referral-stat-card[data-level="residual"]
  .referral-stat-value {
  color: oklch(0.78 0.16 145);
  text-shadow: 0 0 8px oklch(0.72 0.18 145 / 0.55), 0 0 16px
    oklch(0.72 0.18 145 / 0.3);
}

.dashboard-dark
  .referral-stat-card[data-level="residual"]
  .referral-stat-label {
  color: oklch(0.78 0.1 145 / 0.85);
}

/* -------------------------------------------------------------------------
   Secundaire voortgangsbalk — €250 contacten-bonus drempel
   -------------------------------------------------------------------------
   * Amber kleur, onderscheidend van de primaire blauwe balk.
   * Frontend voegt .referral-progress--secondary toe naast .referral-progress.
   * ------------------------------------------------------------------------ */

.dashboard-dark .referral-progress--secondary {
  background: oklch(0.14 0.02 75 / 0.7);
  border-color: oklch(0.7 0.18 55 / 0.22);
}

.dashboard-dark .referral-progress--secondary .referral-progress-fill {
  background: linear-gradient(
    90deg,
    oklch(0.7 0.18 55 / 0.85),
    oklch(0.88 0.14 75)
  );
  box-shadow: 0 0 10px oklch(0.7 0.18 55 / 0.7), 0 0 18px -2px
    oklch(0.7 0.18 55 / 0.5);
}

/* Voortgangsbalk container */

.dashboard-dark .referral-progress {
  position: relative;
  width: 100%;
  height: 0.5rem;
  border-radius: 9999px;
  background: oklch(0.14 0.02 255 / 0.7);
  border: 1px solid oklch(0.7 0.18 55 / 0.18);
  overflow: hidden;
}

/* Voortgangsbalk fill — met animatie */

.dashboard-dark .referral-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 9999px;
  background: linear-gradient(
    90deg,
    oklch(0.7 0.18 55 / 0.85),
    oklch(0.72 0.16 255)
  );
  box-shadow: 0 0 10px oklch(0.7 0.18 55 / 0.7), 0 0 18px -2px
    oklch(0.7 0.18 55 / 0.5);
  animation: referral-progress-fill 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* IBAN invoerveld — Geist Mono, tabular-nums */

.dashboard-dark .referral-iban-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border-radius: 0.625rem;
  background: oklch(0.14 0.02 255 / 0.6);
  border: 1px solid oklch(0.7 0.18 55 / 0.25);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: oklch(0.88 0.04 255);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.dashboard-dark .referral-iban-input::-moz-placeholder {
  color: oklch(0.6 0.04 255 / 0.6);
}

.dashboard-dark .referral-iban-input::placeholder {
  color: oklch(0.6 0.04 255 / 0.6);
}

.dashboard-dark .referral-iban-input:focus {
  outline: none;
  border-color: oklch(0.7 0.18 55 / 0.7);
  box-shadow: 0 0 0 1px oklch(0.7 0.18 55 / 0.4), 0 0 14px -2px
    oklch(0.7 0.18 55 / 0.4);
}

/* Uitkering knop — hergebruik glass-button-primary / LED-active;
   disabled wanneer saldo < €250 */

.dashboard-dark .referral-payout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.625rem;
  border: 1px solid oklch(0.7 0.18 55 / 0.6);
  background: oklch(0.7 0.18 55 / 0.18);
  color: oklch(0.85 0.12 255);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 0 14px -3px oklch(0.7 0.18 55 / 0.5), inset 0 0 12px -4px
    oklch(0.7 0.18 55 / 0.4);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s
    ease, background 0.25s ease;
}

.dashboard-dark .referral-payout-btn:hover:not(:disabled) {
  border-color: oklch(0.7 0.18 55 / 0.95);
  background: oklch(0.7 0.18 55 / 0.28);
  box-shadow: 0 0 22px -1px oklch(0.7 0.18 55 / 0.7), 0 0 40px -8px
    oklch(0.7 0.18 55 / 0.5), inset 0 0 16px -4px oklch(0.7 0.18 55 / 0.5);
  transform: translateY(-1px);
}

.dashboard-dark .referral-payout-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: oklch(0.7 0.18 55 / 0.2);
  background: oklch(0.2 0.02 255 / 0.4);
  box-shadow: none;
  color: oklch(0.6 0.04 255 / 0.7);
}

/* Uitkeringsgeschiedenis lijst */

.dashboard-dark .referral-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 16rem;
  overflow-y: auto;
}

/* Geschiedenis item */

.dashboard-dark .referral-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.625rem;
  background: oklch(0.16 0.03 255 / 0.45);
  border: 1px solid oklch(0.7 0.18 55 / 0.15);
  font-family: var(--font-body);
  font-size: 0.8125rem;
}

.dashboard-dark .referral-history-item .referral-history-amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: oklch(0.78 0.14 255);
}

.dashboard-dark .referral-history-item .referral-history-date {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: oklch(0.65 0.04 255 / 0.75);
}

/* Status badge — #pending / #processed, met pulse voor pending */

.dashboard-dark .referral-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.2rem 0.625rem;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dashboard-dark .referral-status-badge[data-status="pending"] {
  background: oklch(0.72 0.18 70 / 0.15);
  border: 1px solid oklch(0.72 0.18 70 / 0.5);
  color: oklch(0.82 0.16 70);
  animation: payout-status-pulse 2s ease-in-out infinite;
}

.dashboard-dark .referral-status-badge[data-status="processed"] {
  background: oklch(0.72 0.18 145 / 0.12);
  border: 1px solid oklch(0.72 0.18 145 / 0.45);
  color: oklch(0.82 0.16 145);
}

/* ==========================================================================
   Referral deel-functie — Web Share API + fallback paneel
   ==========================================================================
   * Nieuwe .referral-share-* klassen, gescopeerd op .dashboard-dark.
   * Hergebruikt bestaande LED-tokens (blauwe primary, donker glas, witte
   * tekst) en de .referral-copy-btn / .glass-button-primary patronen.
   * Geen nieuwe kleur-tokens — alleen OKLCH literals binnen bestaande
   * hue's (blauw primary, groen success, amber, grijs muted).
   *
   * Componenten:
   *  - .referral-share-section  — container voor deel-knop(pen)
   *  - .referral-share-btn      — hoofd-knop (groot, opvallend, gradient,
   *                               min 48px hoog, met icoon, pulse-glow)
   *  - .referral-share-fallback — fallback-paneel met losse knoppen,
   *                               getoond als Web Share API niet beschikbaar is
   *  - .referral-share-option   — individuele fallback-knop (WhatsApp/e-mail/
   *                               SMS/kopiëren), elk met eigen accentkleur
   *                               via data-platform attribuut
   *
   * Mobiel-vriendelijk: hoofd-knop min 48px hoog, fallback-knoppen min 44px
   * tiktbaar, flex-wrap rij. Werkt op iPhone (Safari) en Android (Chrome)
   * met standaard CSS — geen vendor-prefixes.
   * ========================================================================= */

/* Container voor de deel-functie — verticale stack met subtiele marge
   bovenaan zodat de sectie visueel afscheidt van de link/IBAN-velden. */

.dashboard-dark .referral-share-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* Hoofd-knop — groot, opvallend, gradient-vulling met blauwe LED-gloed.
   Min 48px hoog voor mobiele tiktbaarheid. Hergebruikt het .referral-
   payout-btn patroon maar voller (gradient i.p.v. tint) en groter. */

.dashboard-dark .referral-share-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid oklch(0.7 0.18 55 / 0.7);
  background: linear-gradient(
    135deg,
    oklch(0.7 0.18 55 / 0.35) 0%,
    oklch(0.55 0.16 220 / 0.28) 100%
  );
  color: oklch(0.95 0.04 255);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 0 0 1px oklch(0.7 0.18 55 / 0.25), 0 0 22px -2px
    oklch(0.7 0.18 55 / 0.55), 0 0 40px -8px oklch(0.7 0.18 55 / 0.35), inset 0
    0 18px -4px oklch(0.7 0.18 55 / 0.4);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.18s
    ease, background 0.25s ease;
  animation: referral-share-pulse 3s ease-in-out infinite;
}

/* Icoon in de hoofd-knop — groot en duidelijk (inline-SVG via frontend),
   wit/lichtblauw met drop-shadow zodat het opvalt tegen de gradient. */

.dashboard-dark .referral-share-btn svg,
.dashboard-dark .referral-share-btn .referral-share-btn-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: oklch(0.95 0.04 255);
  filter: drop-shadow(0 0 6px oklch(0.7 0.18 55 / 0.7));
}

/* Hover — intensere gloed, lichte lift. */

.dashboard-dark .referral-share-btn:hover:not(:disabled) {
  border-color: oklch(0.7 0.18 55 / 0.95);
  background: linear-gradient(
    135deg,
    oklch(0.7 0.18 55 / 0.45) 0%,
    oklch(0.55 0.16 220 / 0.38) 100%
  );
  box-shadow: 0 0 0 1px oklch(0.7 0.18 55 / 0.4), 0 0 30px -1px
    oklch(0.7 0.18 55 / 0.75), 0 0 50px -6px oklch(0.7 0.18 55 / 0.5), inset 0 0
    22px -4px oklch(0.7 0.18 55 / 0.5);
  transform: translateY(-1px);
}

/* Press feedback — knop zakt in, geen lift. */

.dashboard-dark .referral-share-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
  box-shadow: 0 0 0 1px oklch(0.7 0.18 55 / 0.5), 0 0 16px -2px
    oklch(0.7 0.18 55 / 0.6), inset 0 0 14px -4px oklch(0.7 0.18 55 / 0.45);
}

/* Focus-visible — blauwe LED-ring conform .dashboard-dark *:focus-visible. */

.dashboard-dark .referral-share-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px oklch(0.13 0.005 260), 0 0 0 4px
    oklch(0.7 0.18 55 / 0.9), 0 0 22px -2px oklch(0.7 0.18 55 / 0.7);
}

/* Disabled — gedimde rust-staat, geen gloed, geen animatie. */

.dashboard-dark .referral-share-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: oklch(0.7 0.18 55 / 0.2);
  background: oklch(0.2 0.02 255 / 0.4);
  box-shadow: none;
  color: oklch(0.6 0.04 255 / 0.7);
  animation: none;
}

/* Fallback-paneel — getoond als Web Share API niet beschikbaar is.
   Donker glas-oppervlak met blauwe LED-rand, bevat een responsieve
   rij losse knoppen (flex-wrap). Subtiele marge bovenaan zodat het
   visueel afscheidt van de hoofd-knop. */

.dashboard-dark .referral-share-fallback {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  padding: 0.875rem;
  border-radius: 0.75rem;
  background: oklch(0.16 0.03 255 / 0.5);
  border: 1px solid oklch(0.7 0.18 55 / 0.2);
  box-shadow: inset 0 0 18px -8px oklch(0.7 0.18 55 / 0.25);
}

/* Toast-feedback — zichtbare inline melding na clipboard-copy fallback
   (of bij een klembord-fout). Toont de gekopieerde-tekst bevestiging
   met een groene check, of een fout/unsupported-melding. Auto-dismiss
   na 4s (zie ReferralPage handleShare/handleCopy). Donker glas-oppervlak
   met groene LED-rand voor succes, amber voor waarschuwing/fout.
   role="status" zodat schermlezers de melding aankondigen. */

.dashboard-dark .referral-share-toast {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.625rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.625rem;
  background: oklch(0.16 0.03 255 / 0.55);
  border: 1px solid oklch(0.85 0.13 85 / 0.55);
  box-shadow: 0 0 0 1px oklch(0.85 0.13 85 / 0.18), 0 0 18px -4px
    oklch(0.85 0.13 85 / 0.4);
  color: oklch(0.88 0.12 145);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
}

.dashboard-dark .referral-share-toast svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: oklch(0.85 0.13 85);
}

/* Individuele fallback-knop — min 44px tiktbaar, eigen accentkleur via
   data-platform attribuut. Hergebruikt het .referral-copy-btn patroon
   maar met flex-grow zodat knoppen de rij vullen en netjes wrappen. */

.dashboard-dark .referral-share-option {
  flex: 1 1 calc(50% - 0.3125rem);
  min-width: 8rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.625rem;
  border: 1px solid oklch(0.7 0.18 55 / 0.3);
  background: oklch(0.2 0.04 255 / 0.5);
  color: oklch(0.85 0.05 255);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease,
    background 0.25s ease, transform 0.18s ease;
}

/* Icoon in fallback-knop — 1rem, neemt de knop-kleur over. */

.dashboard-dark .referral-share-option svg,
.dashboard-dark .referral-share-option .referral-share-option-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Hover — intensere rand + gloed in de platform-kleur. */

.dashboard-dark .referral-share-option:hover:not(:disabled) {
  transform: translateY(-1px);
}

/* Press feedback — knop zakt in. */

.dashboard-dark .referral-share-option:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

/* Focus-visible — blauwe LED-ring conform .dashboard-dark *:focus-visible. */

.dashboard-dark .referral-share-option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px oklch(0.13 0.005 260), 0 0 0 4px
    oklch(0.7 0.18 55 / 0.9), 0 0 18px -2px oklch(0.7 0.18 55 / 0.6);
}

/* Disabled — gedimde rust-staat. */

.dashboard-dark .referral-share-option:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- Platform-specifieke varianten via data-platform attribuut ---
   Elke variant hergebruikt het .referral-share-option basis-patroon en
   overschrijft enkel de accentkleur (rand, gloed, icoon, hover). Geen
   nieuwe kleur-tokens — alleen OKLCH literals binnen bestaande hue's. */

/* WhatsApp — groen (success-hue, herkenbaar als WhatsApp-merk-kleur). */

.dashboard-dark .referral-share-option[data-platform="whatsapp"] {
  border-color: oklch(0.72 0.18 145 / 0.5);
  color: oklch(0.82 0.16 145);
}

.dashboard-dark
  .referral-share-option[data-platform="whatsapp"]:hover:not(:disabled) {
  border-color: oklch(0.72 0.18 145 / 0.85);
  background: oklch(0.72 0.18 145 / 0.18);
  box-shadow: 0 0 16px -2px oklch(0.72 0.18 145 / 0.55), inset 0 0 12px -4px
    oklch(0.72 0.18 145 / 0.35);
}

.dashboard-dark .referral-share-option[data-platform="whatsapp"] svg,
.dashboard-dark
  .referral-share-option[data-platform="whatsapp"]
  .referral-share-option-icon {
  color: oklch(0.82 0.16 145);
  filter: drop-shadow(0 0 4px oklch(0.72 0.18 145 / 0.5));
}

/* E-mail — blauw (primary-hue, herkenbaar als e-mail/communicatie). */

.dashboard-dark .referral-share-option[data-platform="email"] {
  border-color: oklch(0.7 0.18 55 / 0.5);
  color: oklch(0.78 0.14 255);
}

.dashboard-dark
  .referral-share-option[data-platform="email"]:hover:not(:disabled) {
  border-color: oklch(0.7 0.18 55 / 0.85);
  background: oklch(0.7 0.18 55 / 0.18);
  box-shadow: 0 0 16px -2px oklch(0.7 0.18 55 / 0.55), inset 0 0 12px -4px
    oklch(0.7 0.18 55 / 0.35);
}

.dashboard-dark .referral-share-option[data-platform="email"] svg,
.dashboard-dark
  .referral-share-option[data-platform="email"]
  .referral-share-option-icon {
  color: oklch(0.78 0.14 255);
  filter: drop-shadow(0 0 4px oklch(0.7 0.18 55 / 0.5));
}

/* SMS — grijs (muted, neutraal — SMS is een basis-functie). */

.dashboard-dark .referral-share-option[data-platform="sms"] {
  border-color: oklch(0.5 0.02 260 / 0.5);
  color: oklch(0.78 0.03 260);
  background: oklch(0.22 0.02 260 / 0.5);
}

.dashboard-dark
  .referral-share-option[data-platform="sms"]:hover:not(:disabled) {
  border-color: oklch(0.6 0.02 260 / 0.8);
  background: oklch(0.28 0.02 260 / 0.6);
  box-shadow: 0 0 14px -2px oklch(0.5 0.02 260 / 0.45), inset 0 0 12px -4px
    oklch(0.5 0.02 260 / 0.3);
}

.dashboard-dark .referral-share-option[data-platform="sms"] svg,
.dashboard-dark
  .referral-share-option[data-platform="sms"]
  .referral-share-option-icon {
  color: oklch(0.78 0.03 260);
}

/* Kopiëren — amber (referral-amber-hue, herkenbaar als "kopieer"-actie
   conform de bestaande .referral-copy-btn groene succes-staat). */

.dashboard-dark .referral-share-option[data-platform="copy"] {
  border-color: oklch(0.7 0.18 55 / 0.5);
  color: oklch(0.7 0.18 55);
}

.dashboard-dark
  .referral-share-option[data-platform="copy"]:hover:not(:disabled) {
  border-color: oklch(0.7 0.18 55 / 0.85);
  background: oklch(0.7 0.18 55 / 0.18);
  box-shadow: 0 0 16px -2px oklch(0.7 0.18 55 / 0.55), inset 0 0 12px -4px
    oklch(0.7 0.18 55 / 0.35);
}

.dashboard-dark .referral-share-option[data-platform="copy"] svg,
.dashboard-dark
  .referral-share-option[data-platform="copy"]
  .referral-share-option-icon {
  color: oklch(0.7 0.18 55);
  filter: drop-shadow(0 0 4px oklch(0.7 0.18 55 / 0.5));
}

/* "Gekopieerd"-succes-staat voor de copy-variant — spiegelt de
   .referral-copy-btn[data-copied="true"] groene succes-staat. */

.dashboard-dark
  .referral-share-option[data-platform="copy"][data-copied="true"] {
  color: oklch(0.82 0.16 145);
  border-color: oklch(0.72 0.18 145 / 0.7);
  background: oklch(0.72 0.18 145 / 0.16);
  box-shadow: 0 0 16px -2px oklch(0.72 0.18 145 / 0.55), inset 0 0 12px -4px
    oklch(0.72 0.18 145 / 0.35);
}

.dashboard-dark
  .referral-share-option[data-platform="copy"][data-copied="true"]
  svg,
.dashboard-dark
  .referral-share-option[data-platform="copy"][data-copied="true"]
  .referral-share-option-icon {
  color: oklch(0.82 0.16 145);
  filter: drop-shadow(0 0 4px oklch(0.72 0.18 145 / 0.5));
}

/* ==========================================================================
   Keyframes — lokaal, volgens bestaande pulse-marker / countdown-tick patroon
   ========================================================================== */

@keyframes referral-progress-fill {
  0% {
    width: 0;
  }
}

@keyframes payout-status-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 oklch(0.72 0.18 70 / 0.5);
  }
  50% {
    box-shadow: 0 0 12px -1px oklch(0.72 0.18 70 / 0.7);
  }
}

/* Subtiele pulse-glow voor de referral-share hoofd-knop — zachte blauwe
   LED-gloed ademt in/uit, trekt de blik zonder te flitsen. 3s loop,
   ease-in-out. Spiegelt het ai-chat-fab-pulse patroon. */

@keyframes referral-share-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px oklch(0.7 0.18 55 / 0.25), 0 0 18px -2px
      oklch(0.7 0.18 55 / 0.45), 0 0 36px -8px oklch(0.7 0.18 55 / 0.3), inset 0
      0 18px -4px oklch(0.7 0.18 55 / 0.4);
  }
  50% {
    box-shadow: 0 0 0 1px oklch(0.7 0.18 55 / 0.4), 0 0 28px -1px
      oklch(0.7 0.18 55 / 0.7), 0 0 48px -6px oklch(0.7 0.18 55 / 0.45), inset 0
      0 22px -4px oklch(0.7 0.18 55 / 0.5);
  }
}

/* ==========================================================================
   prefers-reduced-motion overrides voor alle nieuwe animaties
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .dashboard-dark .referral-progress-fill,
  .dashboard-dark .referral-progress--secondary .referral-progress-fill,
  .dashboard-dark .referral-payout-btn,
  .dashboard-dark .referral-copy-btn,
  .dashboard-dark .referral-share-btn,
  .dashboard-dark .referral-share-option,
  .dashboard-dark .referral-status-badge[data-status="pending"],
  .dashboard-dark .referral-stat-card[data-level="1"],
  .dashboard-dark .referral-stat-card[data-level="2"],
  .dashboard-dark .referral-stat-card[data-level="contacts"],
  .dashboard-dark .referral-stat-card[data-level="residual"] {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   @supports not (backdrop-filter) fallbacks voor nieuwe glass elementen
   ========================================================================== */

@supports not (
    (backdrop-filter: blur(1px)) or
    (-webkit-backdrop-filter: blur(1px))
  ) {
  .dashboard-dark .referral-card,
  .dashboard-dark .referral-stat-card,
  .dashboard-dark .referral-stat-card[data-level="1"],
  .dashboard-dark .referral-stat-card[data-level="2"],
  .dashboard-dark .referral-stat-card[data-level="contacts"],
  .dashboard-dark .referral-stat-card[data-level="residual"],
  .dashboard-dark .referral-link-field,
  .dashboard-dark .referral-iban-input,
  .dashboard-dark .referral-history-item,
  .dashboard-dark .referral-share-fallback {
    background: oklch(0.16 0.03 255 / 0.9);
  }
  .dashboard-dark .referral-share-btn {
    background: oklch(0.7 0.18 55 / 0.85);
    color: oklch(0.99 0.005 2600);
  }
  .dashboard-dark .referral-share-option {
    background: oklch(0.2 0.03 255 / 0.88);
  }
}

/* ============================================================
 * STICKY PAGE-HEADER — scrollbare chauffeurs-/passagierspagina's.
 *
 * Op routes met een eigen bottom-nav (driver/passenger) is de
 * Layout-shell gebonden tot de viewport (h-dvh overflow-hidden) en
 * is <main> de enige scroll-container (overflow-y-auto). De
 * pagina-header (titel + iconen bovenaan) moet VAST bovenaan
 * blijven staan terwijl de content in het midden schuift.
 *
 * We maken het eerste kind van de pagina-root (de header-wrapper
 * met titel + iconen) position:sticky; top:0; z-index:30 met een
 * --background backdrop zodat scrollende content erachter wordt
 * afgedekt en de header niet "doorschijnt".
 *
 * GESCOPEERD op de scrollbare pagina's via hun page-scope klasse:
 *  - page.driver.today, page.driver.history, page.driver.profile,
 *    page.driver.revenue, page.driver.settings, referral.page
 *
 * EXCLUSIEF: page.driver.home en page.driver.dashboard beheren
 * hun eigen viewport (kaart-dashboards) en mogen NIET sticky
 * worden — hun header zweeft al boven de kaart.
 * ========================================================== */

.page.driver.today > :first-child,
.page.driver.history > :first-child,
.page.driver.profile > :first-child,
.page.driver.revenue > :first-child,
.page.driver.settings > :first-child,
.referral.page > :first-child {
  position: sticky;
  top: 0;
  z-index: 30;
  background-color: oklch(var(--background));
  /* Subtiele ondergrens zodat de header visueel afsluit van de
     scrollende content eronder, zonder een harde rand te trekken. */
  border-bottom: 1px solid oklch(var(--border) / 0.6);
  /* backdrop-filter voor het geval de header semi-transparante
     kinderen bevat; leest als een solide --background oppervlak. */
  backdrop-filter: blur(8px) saturate(1.4);
}

/* ============================================================
 * KLEINE-SCHERM VEILIGHEIDEN (max-width: 380px).
 *
 * Doel: de app blijft correct werken op iPhone SE (375px) en
 * kleinere Android-viewports (<360px) ZONDER horizontale
 * overflow. Deze regels zijn ADDITIEF — ze wijzigen geen
 * bestaande design-tokens, kleuren, of layout-beslissingen op
 * bredere schermen. Ze grijpen alleen in op viewports <= 380px
 * waar vaste controls, bottom-nav, chat-FABs en zwevende panels
 * anders konden uitsteken of knellen.
 *
 * Aanpak (per risico):
 *  1. Root overflow-lock: html/body mogen nooit horizontaal
 *     scrollen, ongeacht de viewport-breedte. Dit is de
 *     ultieme veiligheidsnet-laag.
 *  2. Bottom-nav: 5 items (4 hoofd + Meer) met flex-1 en
 *     justify-around. Op <360px kunnen vertaalde labels
 *     (bijv. "Instellingen", "Reserveringen") de celbreedte
 *     overschrijden. We verkleinen de label-font-size iets,
 *     verkleinen de interne padding, en forceren truncatie op
 *     de label-span zodat lange labels netjes afbreken in
 *     plaats van de cel te verbreden.
 *  3. Chat-FABs: fixed bottom-[4.5rem] right-4 met max-w-[140px]
 *     en px-4. Op 320px: 320 - 16 (right-4) = 304px beschikbaar;
 *     140px max-w past ruimschoots. Maar w-auto laat de knop
 *     groeien tot max-w vóór truncatie — op een 320px viewport
 *     met een lange vertaalde label kon de knop toch de linker-
 *     kant op schuiven. We kap de max-w op calc(100vw - 5rem)
 *     zodat er altijd minstens 1rem marge aan de linkerkant
 *     blijft, en we verkleinen de padding iets.
 *  4. Zwevende panels (autocomplete-dropdown, meer-menu,
 *     language-menu, push-toast): deze hebben min-width waarden
 *     (12rem-18rem) die op een 320px viewport konden uitsteken.
 *     We forceren max-width: calc(100vw - 1rem) op alle
 *     portal-gerenderde panels zodat ze nooit buiten de viewport
 *     vallen. De bestaande max-width regels worden hierdoor
 *     verfijnd (kleinere waarde wint).
 *  5. Container padding: hoofdcontent-areas met px-4 / px-5
 *     konden op 320px meer ruimte innemen dan nodig. We
 *     verkleinen de horizontale padding op key containers
 *     (kaart-kaarten, notice-cards, chat-bubbles) naar px-3.
 *
 * Geen van deze regels raakt booking- of payment-code; ze zijn
 * puur visuele veiligheidsnetten voor de kleinste schermen.
 * ========================================================== */

/* 1. Root overflow-lock — voorkomt horizontale scroll op alle
   viewports <= 380px, ongeacht de oorzaak. Dit is de ultieme
   veiligheidsnet-laag; individuele element-regels hieronder
   pakken de specifieke knelpunten op. */

@media (max-width: 380px) {
  html,
  body {
    overflow-x: hidden;
    /* Voorkom dat de browser een horizontale scrollbar toont
       zelfs als een kind-element per ongeluk uitsteekt. De
       verticale scroll blijft intact. */
    max-width: 100vw;
  }
  #root {
    /* De React-root mag nooit breder zijn dan de viewport; dit
       vangt elke per ongeluk brede kind-laag op. */
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* 2. Bottom-nav — verklein labels en padding zodat 5 items
     (4 hoofd + Meer) netjes naast elkaar passen op <360px.
     De nav zelf is fixed inset-x-0 (volle breedte), dus de
     <ul> met max-w-md (28rem = 448px) wordt smaller dan het
     viewport op 320px. De items gebruiken flex-1 + justify-
     around; het risico is dat vertaalde labels de celbreedte
     overschrijden. We forceren truncatie + kleinere font-size. */
  nav[data-ocid="driver.nav"] .nav-label,
  nav[data-ocid="passenger.nav"] .nav-label,
  nav[data-ocid="driver.nav"] .nav-label-compact,
  nav[data-ocid="passenger.nav"] .nav-label-compact {
    /* Iets kleinere label op de kleinste schermen; blijft dik
       (font-weight 700) voor leesbaarheid tijdens het rijden. */
    font-size: 0.625rem;
    /* Truncate lange vertaalde labels in plaats van de cel te
       verbreden. white-space:nowrap + overflow:hidden +
       text-overflow:ellipsis zorgen dat "Instellingen" →
       "Instell…" netjes afbreekt. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Beperk de label-breedte tot de celbreedte minus icon
       zodat het label nooit de cel oprekt. */
    max-width: 100%;
  }
  /* Verklein de interne padding van nav-items op de kleinste
     schermen zodat icon + label comfortabel passen. */
  nav[data-ocid="driver.nav"] .nav-link,
  nav[data-ocid="passenger.nav"] .nav-link,
  nav[data-ocid="driver.nav"] .nav-meer-button,
  nav[data-ocid="passenger.nav"] .nav-meer-button {
    padding-left: 0.125rem;
    padding-right: 0.125rem;
    gap: 0.125rem;
  }
  /* Verklein de Icon3D-gloed binnen de nav op de kleinste
     schermen zodat aangrenzende iconen elkaar niet visueel
     raken. De basis .nav-link .icon3d::before regel (inset
     -8% -12% -20% -12%) blijft; we verkleinen alleen de
     glow-spread. */
  nav[data-ocid="driver.nav"] .nav-link .icon3d::before,
  nav[data-ocid="passenger.nav"] .nav-link .icon3d::before,
  nav[data-ocid="driver.nav"] .nav-meer-button .icon3d::before,
  nav[data-ocid="passenger.nav"] .nav-meer-button .icon3d::before {
    --icon3d-glow-spread: 0.4;
  }

  /* 3. Chat-FABs — kap de max-w op viewport-veilige breedte.
     De FABs gebruiken fixed bottom-[4.5rem] right-4 (1rem
     marge rechts). We forceren max-width: calc(100vw - 5rem)
     zodat er altijd minstens 1rem marge aan de linkerkant
     blijft op het kleinste viewport (320px: 320 - 80 = 240px
     max-w, ruim voldoende voor icon + truncated label). */
  .glass-button-primary.fixed.bottom-\[4\.5rem\],
  .bg-primary.fixed.bottom-\[4\.5rem\] {
    max-width: calc(100vw - 5rem);
    /* Iets minder horizontale padding zodat icon + label
       meer ruimte krijgen binnen de kleinere max-w. */
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* 4. Zwevende panels — forceren max-width: calc(100vw - 1rem)
     op alle portal-gerenderde panels zodat ze nooit buiten de
     viewport vallen. De bestaande min-width waarden blijven
     staan op bredere schermen; hier verfijnen we alleen de
     bovengrens. */
  .autocomplete-dropdown,
  .meer-menu,
  .language-menu {
    /* calc(100vw - 1rem) laat 0.5rem marge aan elke kant; dit
       wint van de bestaande max-width: calc(100vw - 1.5rem)
       op .meer-menu (kleinere waarde wint) en van de
       max-width: calc(100vw - 1rem) op .language-menu
       (gelijk, geen conflict). */
    max-width: calc(100vw - 1rem);
  }
  /* Push-toast — min-width: 18rem kon op 320px uitsteken.
     Kap op viewport-breedte minus marge. */
  .push-toast {
    min-width: min(18rem, calc(100vw - 1.5rem));
    max-width: calc(100vw - 1rem);
  }

  /* 5. Container padding — verklein horizontale padding op key
     containers zodat content meer ademruimte krijgt op de
     kleinste schermen. Dit zijn subtiele aanpassingen die de
     bestaande layout niet breken. */
  .notice {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .chat-bubble {
    /* Iets smallere max-width zodat bubbels niet de chat-thread
       oprekken op smalle schermen. */
    max-width: 85%;
  }
  .referral-banner {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .referral-banner-compact {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  /* Reduced-motion veiligheidsnet: de kleine-scherm aanpassingen
     zijn puur statisch (geen animatie-wijzigingen), dus geen
     aparte prefers-reduced-motion override nodig binnen deze
     media-query. */
}

/* Extra fijnmazige laag voor de ALLERkleinste schermen (<360px)
   — alleen van toepassing op Android-viewports onder 360px
   waar zelfs de 380px-laag net niet volstaat. We verkleinen hier
   alleen de bottom-nav label verder en de chat-FAB padding, zodat
   5 nav-items + een chat-FAB op een 320px-viewport zonder
   overflow passen. Geen verdere layout-wijzigingen. */

@media (max-width: 360px) {
  nav[data-ocid="driver.nav"] .nav-label,
  nav[data-ocid="passenger.nav"] .nav-label,
  nav[data-ocid="driver.nav"] .nav-label-compact,
  nav[data-ocid="passenger.nav"] .nav-label-compact {
    /* Kleinste leesbare label-size; blijft font-weight 700. */
    font-size: 0.5625rem;
  }
  /* Verklein de chat-FAB padding verder op <360px zodat icon +
     truncated label comfortabel passen binnen de viewport-veilige
     max-w. */
  .glass-button-primary.fixed.bottom-\[4\.5rem\],
  .bg-primary.fixed.bottom-\[4\.5rem\] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    gap: 0.375rem;
  }
}

/* =========================================================================
   Uber-Style Reservation Card & Chat — driver-side dark scope
   =========================================================================
   Additive dark scope `.uber-dark` mirrors the `.dashboard-dark` pattern.
   Does NOT touch `:root` / `.dark` / `.dashboard-dark` tokens — all colors
   are OKLCH literals scoped to `.uber-dark`. UI language: Dutch. Booking
   and payment systems are NOT touched (pure visual layer for the driver
   reservation card + chat panel). Excluded per doNotBuild: real-time
   bestuurder-ETA in reservering kaart, spraakberichten in chat.
   ------------------------------------------------------------------------- */

.uber-dark {
  --uber-bg: oklch(0.18 0.05 255); /* zuiver zwart — zwart-dominant */
  --uber-surface: oklch(0.08 0.005 260); /* donkere kaart op zwart */
  --uber-surface-2: oklch(0.1 0.008 260); /* verhoogd oppervlak */
  --uber-text: oklch(0.98 0 0); /* white */
  --uber-text-secondary: oklch(0.65 0.01 260); /* gray */
  --uber-text-tertiary: oklch(0.5 0.01 260); /* muted gray */
  --uber-accent: oklch(0.5 0.18 255); /* received bubble blue #2D42C4 */
  --uber-accent-strong: oklch(0.55 0.19 255);
  --uber-sent: oklch(0.12 0.005 260); /* sent bubble donker-grijs op zwart */
  --uber-border: oklch(0.18 0.008 260);
  --uber-border-strong: oklch(0.28 0.01 260);
  --uber-accept-bg: oklch(0.98 0 0); /* white accept button */
  --uber-accept-fg: oklch(0.18 0.05 255); /* zwart tekst op accept */
  --uber-decline-bg: oklch(0.1 0.005 260); /* donkere decline-knop op zwart */
  --uber-decline-fg: oklch(0.98 0 0); /* white text on decline */
  --uber-radius: 1rem;
  --uber-radius-pill: 9999px;
  --uber-shadow: 0 12px 40px -12px oklch(0 0 0 / 0.6), 0 4px 12px -6px
    oklch(0 0 0 / 0.4);
  --uber-shadow-btn: 0 4px 14px -4px oklch(0 0 0 / 0.5);
  background-color: var(--uber-bg);
  color: var(--uber-text);
  font-family: var(--font-body);
}

/* --- Reservation card (driver side) ------------------------------------- */

.uber-dark .uber-reservation-card {
  background-color: var(--uber-surface);
  border: 1px solid var(--uber-border);
  border-radius: var(--uber-radius);
  box-shadow: var(--uber-shadow);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: uber-card-slide-up 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.uber-dark .uber-reservation-card .uber-card-class {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--uber-text-secondary);
}

.uber-dark .uber-reservation-card .uber-card-price {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--uber-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

.uber-dark .uber-reservation-card .uber-card-time {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--uber-text);
  font-variant-numeric: tabular-nums;
}

.uber-dark .uber-reservation-card .uber-card-meta {
  font-size: 0.875rem;
  color: var(--uber-text-secondary);
  line-height: 1.4;
}

.uber-dark .uber-reservation-card .uber-card-rider-name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--uber-text);
  font-size: 1rem;
}

.uber-dark .uber-reservation-card .uber-card-rating {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--uber-text-secondary);
  font-variant-numeric: tabular-nums;
}

.uber-dark .uber-reservation-card .uber-card-address {
  font-size: 0.875rem;
  color: var(--uber-text-secondary);
  line-height: 1.45;
}

.uber-dark .uber-reservation-card .uber-card-notice {
  font-size: 0.8125rem;
  color: var(--uber-text-tertiary);
  line-height: 1.4;
  padding-top: 0.75rem;
  border-top: 1px solid var(--uber-border);
}

.uber-dark .uber-reservation-card .uber-card-minimap {
  background-color: oklch(0.11 0.02 260);
  border: 1px solid var(--uber-border);
  border-radius: 0.75rem;
  height: 7.5rem;
  overflow: hidden;
  position: relative;
}

.uber-dark .uber-reservation-card .uber-card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* --- Accept / Decline buttons (vertically stacked) ---------------------- */

.uber-dark .uber-accept-btn {
  background-color: var(--uber-accept-bg);
  color: var(--uber-accept-fg);
  border: none;
  border-radius: var(--uber-radius-pill);
  padding: 0.875rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: var(--uber-shadow-btn);
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s
    cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.uber-dark .uber-accept-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px oklch(0 0 0 / 0.6);
}

.uber-dark .uber-accept-btn:active {
  transform: translateY(0) scale(0.99);
}

.uber-dark .uber-accept-btn:focus-visible {
  outline: 2px solid var(--uber-accent-strong);
  outline-offset: 2px;
}

.uber-dark .uber-accept-btn .uber-accept-amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.uber-dark .uber-decline-btn {
  background-color: var(--uber-decline-bg);
  color: var(--uber-decline-fg);
  border: 1px solid var(--uber-border-strong);
  border-radius: var(--uber-radius-pill);
  padding: 0.875rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), border-color
    0.18s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

.uber-dark .uber-decline-btn:hover {
  background-color: oklch(0.24 0.01 260);
  border-color: var(--uber-border-strong);
}

.uber-dark .uber-decline-btn:active {
  transform: scale(0.99);
}

.uber-dark .uber-decline-btn:focus-visible {
  outline: 2px solid var(--uber-text-secondary);
  outline-offset: 2px;
}

/* --- Chat panel (dark) --------------------------------------------------- */

.uber-dark .uber-chat-panel {
  background-color: var(--uber-surface);
  border: 1px solid var(--uber-border);
  border-radius: var(--uber-radius);
  box-shadow: var(--uber-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.uber-dark .uber-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  background-color: oklch(0.14 0.02 260);
  border-bottom: 1px solid var(--uber-border);
}

.uber-dark .uber-chat-header .uber-chat-contact {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--uber-text);
}

.uber-dark .uber-chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  background-color: var(--uber-bg);
  scroll-behavior: smooth;
}

.uber-dark .uber-chat-thread::-webkit-scrollbar {
  width: 6px;
}

.uber-dark .uber-chat-thread::-webkit-scrollbar-thumb {
  background-color: var(--uber-border-strong);
  border-radius: var(--uber-radius-pill);
}

/* --- Chat bubbles -------------------------------------------------------- */

.uber-dark .uber-chat-bubble-sent {
  align-self: flex-end;
  max-width: 78%;
  background-color: var(--uber-sent);
  color: var(--uber-text);
  border-radius: 1.125rem 1.125rem 0.25rem 1.125rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  animation: uber-bubble-pop 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.uber-dark .uber-chat-bubble-received {
  align-self: flex-start;
  max-width: 78%;
  background-color: var(--uber-accent);
  color: oklch(0.98 0 0);
  border-radius: 1.125rem 1.125rem 1.125rem 0.25rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  animation: uber-bubble-pop 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.uber-dark .uber-chat-timestamp {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--uber-text-tertiary);
  letter-spacing: 0.02em;
  padding: 0.25rem 0;
  font-variant-numeric: tabular-nums;
}

/* --- Quick-reply chips (functional + visual) ----------------------------- */

.uber-dark .uber-chat-quick-reply {
  background-color: var(--uber-surface-2);
  color: var(--uber-text);
  border: 1px solid var(--uber-border-strong);
  border-radius: var(--uber-radius-pill);
  padding: 0.5rem 0.875rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.16s cubic-bezier(0.4, 0, 0.2, 1), border-color
    0.16s cubic-bezier(0.4, 0, 0.2, 1), transform 0.16s
    cubic-bezier(0.4, 0, 0.2, 1);
}

.uber-dark .uber-chat-quick-reply:hover {
  background-color: var(--uber-accent);
  border-color: var(--uber-accent-strong);
  color: oklch(0.98 0 0);
}

.uber-dark .uber-chat-quick-reply:active {
  animation: uber-chip-tap 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.uber-dark .uber-chat-quick-reply:focus-visible {
  outline: 2px solid var(--uber-accent-strong);
  outline-offset: 2px;
}

.uber-dark .uber-chat-quick-replies {
  display: flex;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  overflow-x: auto;
  border-top: 1px solid var(--uber-border);
  background-color: oklch(0.14 0.02 260);
  scrollbar-width: none;
}

.uber-dark .uber-chat-quick-replies::-webkit-scrollbar {
  display: none;
}

/* --- Chat input ---------------------------------------------------------- */

.uber-dark .uber-chat-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: oklch(0.14 0.02 260);
  border-top: 1px solid var(--uber-border);
}

.uber-dark .uber-chat-input .uber-chat-input-field {
  flex: 1;
  background-color: var(--uber-surface-2);
  border: 1px solid var(--uber-border-strong);
  border-radius: var(--uber-radius-pill);
  padding: 0.625rem 1rem;
  color: var(--uber-text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  outline: none;
  transition: border-color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.uber-dark .uber-chat-input .uber-chat-input-field::-moz-placeholder {
  color: var(--uber-text-tertiary);
}

.uber-dark .uber-chat-input .uber-chat-input-field::placeholder {
  color: var(--uber-text-tertiary);
}

.uber-dark .uber-chat-input .uber-chat-input-field:focus {
  border-color: var(--uber-accent-strong);
}

.uber-dark .uber-chat-input .uber-chat-send-btn {
  background-color: var(--uber-accent);
  color: oklch(0.98 0 0);
  border: none;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), transform
    0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.uber-dark .uber-chat-input .uber-chat-send-btn:hover {
  background-color: var(--uber-accent-strong);
}

.uber-dark .uber-chat-input .uber-chat-send-btn:active {
  transform: scale(0.94);
}

.uber-dark .uber-chat-input .uber-chat-send-btn:focus-visible {
  outline: 2px solid var(--uber-accent-strong);
  outline-offset: 2px;
}

/* --- Chat send-error bar ------------------------------------------------- */

.uber-dark .uber-chat-error-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: oklch(0.22 0.06 55);
  border-top: 1px solid var(--uber-border);
  color: oklch(0.85 0.08 55);
  overflow: hidden;
}

.uber-dark .uber-chat-error-bar .uber-chat-error-text {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uber-dark .uber-chat-error-bar .uber-chat-error-action {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: transparent;
  border: 1px solid var(--uber-border-strong);
  border-radius: var(--uber-radius-pill);
  padding: 0.25rem 0.625rem;
  color: var(--uber-text);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.uber-dark .uber-chat-error-bar .uber-chat-error-action:hover:not(:disabled) {
  background-color: var(--uber-surface-2);
}

.uber-dark .uber-chat-error-bar .uber-chat-error-action:focus-visible {
  outline: 2px solid var(--uber-accent-strong);
  outline-offset: 2px;
}

.uber-dark .uber-chat-error-bar .uber-chat-error-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.uber-dark .uber-chat-error-bar .uber-chat-error-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--uber-text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.uber-dark .uber-chat-error-bar .uber-chat-error-close:hover {
  color: var(--uber-text);
}

.uber-dark .uber-chat-error-bar .uber-chat-error-close:focus-visible {
  outline: 2px solid var(--uber-accent-strong);
  outline-offset: 2px;
}

/* --- Chat send-status + spinner ------------------------------------------- */

.uber-dark .uber-chat-send-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--uber-text-tertiary);
  font-size: 0.75rem;
}

.uber-dark .uber-chat-spinner {
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid oklch(0.3 0.02 260);
  border-top-color: var(--uber-accent-strong);
  border-radius: 50%;
  animation: uber-chat-spin 0.6s linear infinite;
}

@keyframes uber-chat-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .uber-dark .uber-reservation-card,
  .uber-dark .uber-chat-bubble-sent,
  .uber-dark .uber-chat-bubble-received,
  .uber-dark .uber-chat-quick-reply:active {
    animation: none;
  }
  .uber-dark .uber-chat-spinner {
    animation-duration: 1.2s;
  }
}

/* =========================================================================
   Install-feature — "Zet op je beginscherm" knop + modaal + eekhoorn-mascotte
   Additief. Hergebruikt --glass-bg-strong, --glass-border, --primary (amber),
   --success (groen), --gradient-primary. Geen nieuwe kleur-tokens.
   ========================================================================= */

.install-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 1.25rem;
  border-radius: 9999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  color: oklch(var(--primary-foreground));
  background: linear-gradient(
      90deg,
      oklch(0.7 0.18 55 / 0.14),
      oklch(0.85 0.13 85 / 0.14)
    ), var(--glass-bg-strong);
  border: 1.5px solid transparent;
  -o-border-image: var(--gradient-primary) 1;
     border-image: var(--gradient-primary) 1;
  box-shadow: 0 0 0 1px oklch(0.7 0.18 55 / 0.4), 0 0 18px -4px
    oklch(0.7 0.18 55 / 0.45), 0 0 32px -10px oklch(0.85 0.13 85 / 0.35);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  cursor: pointer;
  animation: install-button-pulse 2.6s ease-in-out infinite;
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s
    cubic-bezier(0.4, 0, 0.2, 1);
}

.install-button:hover {
  transform: translateY(-1px);
}

.install-button:active {
  transform: translateY(0) scale(0.98);
}

.install-button:focus-visible {
  outline: 2px solid oklch(var(--ring));
  outline-offset: 3px;
}

/* Opvallende PWA-installatie CTA-sectie — hoog op de landingspagina,
   * direct na de hero. Combineert een korte uitleg-regel met de
   * eekhoorn-mascotte (klein, zwevend) en de bestaande .install-button
   * als primaire actie. Hergebruikt --glass-bg-strong, --glass-border,
   * --gradient-primary, --primary, --success — geen nieuwe kleur-tokens.
   *
   * Visueel duidelijk onderscheiden van de login-kaart: eigen glas-
   * oppervlak met amber→groen gradient-rand, pulse-glow animatie, en
   * de mascotte die zacht zweeft. Trekt de aandacht zonder de premium
   * esthetiek te breken. */

.install-cta-prominent {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  width: 100%;
  padding: 1.125rem 1.25rem 1.25rem;
  border-radius: 1.25rem;
  background: linear-gradient(
    135deg,
    oklch(0.13 0.005 260 / 0.45) 0%,
    oklch(0.18 0.03 75 / 0.28) 100%
  );
  border: 1px solid oklch(0.7 0.18 55 / 0.45);
  box-shadow: 0 0 0 1px oklch(0.7 0.18 55 / 0.18), 0 0 22px -4px
    oklch(0.7 0.18 55 / 0.4), 0 8px 28px -10px oklch(0 0 0 / 0.45);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  overflow: hidden;
  isolation: isolate;
}

/* Amber→groen gloei-rand die zacht pulseert — trekt de aandacht. */

.install-cta-prominent::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    120deg,
    oklch(0.7 0.18 55 / 0.0) 0%,
    oklch(0.7 0.18 55 / 0.85) 50%,
    oklch(0.85 0.13 85 / 0.0) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.7;
  animation: install-cta-pulse-glow 3s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

.install-cta-prominent-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Klein eekhoorn-mascotte-icoon (inline SVG) naast de koptekst —
   * opvallend maar niet overheersend. Zweeft zacht. */

.install-cta-prominent-mascot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  animation: install-cta-mascot-float 4s ease-in-out infinite;
}

.install-cta-prominent-mascot svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 10px oklch(0.7 0.18 55 / 0.4));
}

.install-cta-prominent-titles {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.install-cta-prominent-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: oklch(0.98 0.01 75);
  text-shadow: 0 1px 8px oklch(0.7 0.18 55 / 0.25);
}

.install-cta-prominent-subtitle {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: oklch(0.88 0.02 75 / 0.92);
}

/* De primaire install-knop binnen de sectie — full-width. */

.install-cta-prominent .install-button {
  width: 100%;
}

@keyframes install-cta-pulse-glow {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.9;
  }
}

@keyframes install-cta-mascot-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .install-cta-prominent::before {
    animation: none;
    opacity: 0.6;
  }
  .install-cta-prominent-mascot {
    animation: none;
  }
}

/* Backdrop-filter fallback voor de CTA-sectie. */

@supports not (
    (backdrop-filter: blur(1px)) or
    (-webkit-backdrop-filter: blur(1px))
  ) {
  .install-cta-prominent {
    background: linear-gradient(
      135deg,
      oklch(0.18 0.025 255 / 0.92) 0%,
      oklch(0.2 0.03 75 / 0.88) 100%
    );
  }
}

/* ============================================================
   * LANDING-LED INSTALL-CTA — STERKER CONTRAST.
   * GESCOPEERD op .landing-led — alleen de kaart-landingspagina.
   * De install-cta-prominent had onvoldoende contrast op de lichte
   * kaart omdat de glas-achtergrond (alpha 0.45) de OpenStreetMap-
   * tegels doorliet. Binnen .landing-led krijgt de sectie een
   * donkerder achtergrond (alpha 0.82) zodat de titel, ondertitel
   * en install-knop volledig leesbaar blijven.
   * ========================================================== */

.landing-led .install-cta-prominent {
  background: linear-gradient(
    135deg,
    oklch(0.1 0.005 260 / 0.82) 0%,
    oklch(0.14 0.03 75 / 0.68) 100%
  );
}

.install-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: oklch(0.13 0.005 260 / 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fade-in 0.2s ease-out both;
}

.install-modal {
  position: relative;
  width: 100%;
  max-width: 30rem;
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.25rem;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  box-shadow: 0 24px 64px -16px oklch(0 0 0 / 0.5), 0 8px 24px -8px
    oklch(0 0 0 / 0.35);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.8);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.8);
  animation: install-modal-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (max-width: 640px) {
  .install-modal {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 1.25rem 1.25rem 0 0;
    align-self: flex-end;
  }
  .install-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
}

.install-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem 0.75rem;
  flex-shrink: 0;
}

.install-modal-header h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: oklch(var(--foreground));
  margin: 0;
}

.install-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: oklch(var(--foreground) / 0.06);
  color: oklch(var(--muted-foreground));
  border: 1px solid oklch(var(--foreground) / 0.08);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s
    cubic-bezier(0.4, 0, 0.2, 1);
}

.install-modal-close:hover {
  background: oklch(var(--primary) / 0.16);
  color: oklch(var(--primary));
}

.install-modal-close:focus-visible {
  outline: 2px solid oklch(var(--ring));
  outline-offset: 2px;
}

.squirrel-mascot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.5rem 1rem 0.25rem;
  flex-shrink: 0;
  animation: squirrel-float 4s ease-in-out infinite;
}

.squirrel-mascot svg {
  width: 5.5rem;
  height: auto;
  filter: drop-shadow(0 6px 14px oklch(0.7 0.18 55 / 0.35));
}

.install-platform-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0 1.25rem;
  margin: 0.5rem 0 0.75rem;
  background: oklch(var(--foreground) / 0.05);
  border-radius: 9999px;
  border: 1px solid oklch(var(--foreground) / 0.08);
  flex-shrink: 0;
}

.install-platform-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  color: oklch(var(--muted-foreground));
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.18s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.18s
    cubic-bezier(0.4, 0, 0.2, 1);
}

.install-platform-tab[data-active="true"] {
  color: oklch(var(--primary));
  background: oklch(0.7 0.18 55 / 0.18);
  box-shadow: inset 0 0 0 1px oklch(0.7 0.18 55 / 0.4);
}

.install-platform-tab:focus-visible {
  outline: 2px solid oklch(var(--ring));
  outline-offset: 2px;
}

.install-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.25rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.install-step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: oklch(var(--foreground) / 0.04);
  border: 1px solid oklch(var(--foreground) / 0.06);
}

.install-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8125rem;
  color: oklch(0.13 0.005 260);
  background: linear-gradient(135deg, oklch(0.7 0.18 55), oklch(0.85 0.13 85));
  box-shadow: 0 4px 10px -3px oklch(0.7 0.18 55 / 0.45);
  flex-shrink: 0;
}

.install-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background: oklch(var(--primary) / 0.12);
  color: oklch(var(--primary));
  border: 1px solid oklch(var(--primary) / 0.22);
  flex-shrink: 0;
}

.install-step-text {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: oklch(var(--foreground));
  padding-top: 0.125rem;
}

/* --- backdrop-filter fallback ----------------------------------------- */

@supports not (
    (backdrop-filter: blur(1px)) or
    (-webkit-backdrop-filter: blur(1px))
  ) {
  .install-button {
    background: linear-gradient(
      90deg,
      oklch(0.7 0.18 55 / 0.92),
      oklch(0.85 0.13 85 / 0.92)
    );
    color: oklch(0.13 0.005 260);
  }
  .install-modal-overlay {
    background: oklch(0.13 0.005 260 / 0.78);
  }
  .install-modal {
    background: oklch(var(--card) / 0.96);
  }
}

/* --- prefers-reduced-motion ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .install-button,
  .install-modal,
  .install-modal-overlay,
  .squirrel-mascot {
    animation: none;
  }
  .install-button:hover,
  .install-button:active {
    transform: none;
  }
}

/* ==========================================================================
   ADDITIEVE UTILITIES (requirement) — nieuwe @layer utilities
   ==========================================================================
   * Behoudt de bestaande amber-on-navy glassmorphism identiteit. Hergebruikt
   * --primary (amber), --success, --notice-*, --muted-foreground, .glass.
   * Geen nieuwe kleur-tokens. Geen QR-code utilities. Geen stats-dashboard
   * utilities (doNotBuild).
   * ------------------------------------------------------------------------ */

/* --- .payment-received-notice -----------------------------------------
   Success-tinted glass card voor de 'betaling ontvangen'-melding. Hergebruikt
   .glass voor het frosted oppervlak en voegt een groene (--success) tint toe
   met de payment-received-in animatie (subtiele lift + fade-in). */

.payment-received-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
  border-radius: var(--radius);
  background-color: oklch(var(--success) / 0.08);
  border: 1px solid oklch(var(--success) / 0.35);
  box-shadow: 0 0 0 1px oklch(var(--success) / 0.12), 0 8px 24px -10px
    oklch(0 0 0 / 0.25), inset 0 0 18px -6px oklch(var(--success) / 0.22);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  color: oklch(var(--foreground));
  animation: payment-received-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.payment-received-notice .payment-received-notice-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: oklch(var(--success));
  filter: drop-shadow(0 0 6px oklch(var(--success) / 0.55));
}

.payment-received-notice .payment-received-notice-title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: oklch(var(--success));
  letter-spacing: 0.01em;
}

.payment-received-notice .payment-received-notice-body {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: oklch(var(--muted-foreground));
  margin-top: 0.125rem;
}

/* --- .status-timeline + .status-timeline-step + [data-state] -----------
   Verticale fase-lijst voor de rit-status. Hergebruikt .glass voor elke stap
   en --primary / --success / --muted-foreground voor de status-kleuren via
   het [data-state] attribuut. status-phase-enter animatie per stap. */

.status-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0;
  list-style: none;
}

.status-timeline-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius);
  background-color: oklch(var(--glass-bg));
  border: 1px solid oklch(var(--glass-border));
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  animation: status-phase-enter 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.status-timeline-step .status-timeline-step-marker {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  border: 1px solid oklch(var(--muted-foreground) / 0.4);
  background: oklch(var(--muted) / 0.5);
  color: oklch(var(--muted-foreground));
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
}

.status-timeline-step .status-timeline-step-label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: oklch(var(--foreground));
  line-height: 1.4;
}

.status-timeline-step .status-timeline-step-time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: oklch(var(--muted-foreground));
  margin-top: 0.125rem;
}

/* Actieve stap — amber (--primary) tint, marker gevuld. */

.status-timeline-step[data-state="active"] {
  border-color: oklch(var(--primary) / 0.55);
  box-shadow: 0 0 0 1px oklch(var(--primary) / 0.18), 0 8px 24px -10px
    oklch(0 0 0 / 0.25), inset 0 0 18px -6px oklch(var(--primary) / 0.22);
}

.status-timeline-step[data-state="active"] .status-timeline-step-marker {
  border-color: oklch(var(--primary));
  background: oklch(var(--primary) / 0.18);
  color: oklch(var(--primary));
  box-shadow: 0 0 12px -2px oklch(var(--primary) / 0.5);
}

.status-timeline-step[data-state="active"] .status-timeline-step-label {
  color: oklch(var(--primary));
}

/* Voltooide stap — groen (--success) tint, marker met check. */

.status-timeline-step[data-state="done"] {
  border-color: oklch(var(--success) / 0.4);
}

.status-timeline-step[data-state="done"] .status-timeline-step-marker {
  border-color: oklch(var(--success) / 0.7);
  background: oklch(var(--success) / 0.16);
  color: oklch(var(--success));
}

.status-timeline-step[data-state="done"] .status-timeline-step-label {
  color: oklch(var(--foreground));
}

/* Inactieve/pending stap — muted, geen accent. */

.status-timeline-step[data-state="pending"] {
  opacity: 0.65;
}

.status-timeline-step[data-state="pending"] .status-timeline-step-marker {
  background: oklch(var(--muted) / 0.4);
}

/* --- .referral-share-grid ---------------------------------------------
   2x2 grid voor de referral-share fallback-knoppen (WhatsApp / e-mail /
   SMS / kopiëren). Mobiel-vriendelijk: min 44px tiktbaar per knop. */

.referral-share-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}

@media (min-width: 640px) {
  .referral-share-grid {
    gap: 0.75rem;
  }
}

/* --- .referral-share-native -------------------------------------------
   Primaire CTA voor de native Web Share API. Hergebruikt het .glass-button-
   primary patroon (amber-tinted glass) maar voller — gradient-vulling met
   amber LED-gloed, min 48px hoog voor mobiele tiktbaarheid. */

.referral-share-native {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid oklch(var(--primary) / 0.7);
  background: linear-gradient(
    135deg,
    oklch(var(--primary) / 0.35) 0%,
    oklch(var(--primary) / 0.22) 100%
  );
  color: oklch(var(--primary));
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 0 0 1px oklch(var(--primary) / 0.25), 0 0 22px -2px
    oklch(var(--primary) / 0.55), 0 0 40px -8px oklch(var(--primary) / 0.35),
    inset 0 0 18px -4px oklch(var(--primary) / 0.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.18s
    ease, background 0.25s ease;
}

.referral-share-native:hover:not(:disabled) {
  border-color: oklch(var(--primary));
  background: linear-gradient(
    135deg,
    oklch(var(--primary) / 0.45) 0%,
    oklch(var(--primary) / 0.32) 100%
  );
  box-shadow: 0 0 0 1px oklch(var(--primary) / 0.4), 0 0 30px -1px
    oklch(var(--primary) / 0.75), 0 0 50px -6px oklch(var(--primary) / 0.5),
    inset 0 0 22px -4px oklch(var(--primary) / 0.5);
  transform: translateY(-1px);
}

.referral-share-native:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
}

.referral-share-native:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px oklch(var(--ring)), 0 0 0 4px
    oklch(var(--primary) / 0.6), 0 0 22px -2px oklch(var(--primary) / 0.7);
}

.referral-share-native:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: oklch(var(--primary) / 0.2);
  background: oklch(var(--muted) / 0.4);
  box-shadow: none;
  color: oklch(var(--muted-foreground));
}

.referral-share-native svg,
.referral-share-native .referral-share-native-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: oklch(var(--primary));
  filter: drop-shadow(0 0 6px oklch(var(--primary) / 0.7));
}

/* --- .referral-code-display -------------------------------------------
   Geist Mono, tabular-nums weergave van de referral-code. Kopieerbaar —
   hergebruikt het .referral-link-field patroon maar dan voor de korte code
   (geen URL). Donker glas-oppervlak met amber accent. */

.referral-code-display {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius);
  background: oklch(var(--glass-bg));
  border: 1px solid oklch(var(--primary) / 0.3);
  box-shadow: inset 0 0 18px -8px oklch(var(--primary) / 0.25);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: oklch(var(--primary));
  letter-spacing: 0.06em;
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.referral-code-display:hover {
  border-color: oklch(var(--primary) / 0.6);
  box-shadow: 0 0 14px -2px oklch(var(--primary) / 0.4), inset 0 0 18px -8px
    oklch(var(--primary) / 0.3);
}

.referral-code-display:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px oklch(var(--ring)), 0 0 0 4px
    oklch(var(--primary) / 0.5);
}

.referral-code-display[data-copied="true"] {
  color: oklch(var(--success));
  border-color: oklch(var(--success) / 0.6);
  box-shadow: 0 0 14px -2px oklch(var(--success) / 0.45), inset 0 0 18px -8px
    oklch(var(--success) / 0.3);
}

/* --- Keyframes (lokaal, additief) -------------------------------------
   payment-received-in: subtiele lift + fade-in voor de betalingsmelding.
   status-phase-enter: horizontale slide-in voor tijdlijn-stappen. */

@keyframes payment-received-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes status-phase-enter {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- prefers-reduced-motion voor de nieuwe animaties ------------------ */

@media (prefers-reduced-motion: reduce) {
  .payment-received-notice,
  .status-timeline-step {
    animation: none;
  }
}

/* ============================================================
 * CALMER LANDING PAGE — COMPACT ICON-CARDS
 * Additieve utilities voor de rustigere landingspagina. Kleinere,
 * klikbare icoon-kaarten in een strak grid (max 2 kolommen mobiel,
 * 3 op breder). Elke kaart toont alleen icoon + korte titel; de
 * lange beschrijving verschijnt pas in IconDetailModal (popup).
 * Geen tekst-afbreking — titels passen volledig binnen de kaart.
 * Raakt NIET de .install-modal-*, .referral-banner base, .landing-led
 * of .dashboard-dark tokens aan — puur additief.
 * ========================================================== */

/* Sectie-titel — subtieler dan de huidige grote headings. Consistent
   over security/paths/FAQ secties, niet prominent. */

.landing-section-title {
  font-family: var(--font-display), sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(var(--muted-foreground));
  margin-bottom: 0.625rem;
  line-height: 1.3;
}

/* Strak grid voor compacte icoon-kaarten. Mobiel 2 kolommen, breder 3.
   Gap is klein om de rustige, compacte uitstraling te behouden. */

.landing-icon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}

@media (min-width: 640px) {
  .landing-icon-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Compacte icoon-kaart — klikt open IconDetailModal. Toont alleen
   icoon + korte titel, geen beschrijving op de kaart zelf. Kleinere
   padding dan de huidige losse kaarten, frosted glass met violet LED
   rand (binnen .landing-led scope). */

.landing-icon-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: 0.875rem;
  background: oklch(var(--glass-bg));
  border: 1px solid oklch(var(--glass-border));
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease,
    background 0.2s ease;
  text-align: left;
  width: 100%;
  min-height: 0;
}

.landing-icon-card:hover {
  border-color: oklch(var(--glass-border-active));
  background: oklch(var(--glass-bg-strong));
  transform: translateY(-1px);
}

.landing-icon-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px oklch(var(--ring)), var(--glass-shadow);
}

.landing-icon-card:active {
  transform: translateY(0) scale(0.985);
}

/* Compacte icoon-badge — kleiner dan de huidige h-6 w-6 badges:
   h-9 w-9 (2.25rem) container met h-4 w-4 (1rem) icoon erin.
   Frosted glas-cirkel met violet LED-tint binnen .landing-led. */

.landing-icon-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: oklch(var(--glass-bg-strong));
  border: 1px solid oklch(var(--glass-border));
  box-shadow: inset 0 0 12px -6px oklch(var(--primary) / 0.35);
  flex-shrink: 0;
}

.landing-icon-card-badge svg,
.landing-icon-card-badge .lucide {
  width: 1rem;
  height: 1rem;
  color: oklch(var(--primary));
  filter: drop-shadow(0 0 4px oklch(var(--primary) / 0.45));
}

/* Korte titel op de kaart — past volledig, geen ellipsis op essentiële
   woorden zoals 'tweefactor'. Witregel-gedrag: woorden blijven heel,
   titel mag naar een tweede regel maar wordt nooit afgesneden. */

.landing-icon-card-title {
  font-family: var(--font-display), sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: oklch(var(--foreground));
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  margin: 0;
  width: 100%;
}

/* Compacte PWA-install CTA — minder verticale ruimte dan de huidige
   .install-cta-prominent. Hergebruikt amber primary tint + amber rand
   + amber gloed (spiegelt .glass-button-primary), maar compacter. */

.landing-install-cta-compact {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 9999px;
  background: oklch(var(--glass-bg-primary));
  border: 1px solid oklch(var(--glass-border-primary));
  box-shadow: var(--glass-shadow-primary);
  color: oklch(var(--primary));
  font-family: var(--font-display), sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
  cursor: pointer;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.18s
    ease;
}

.landing-install-cta-compact:hover {
  transform: translateY(-1px);
  border-color: oklch(var(--primary));
  box-shadow: 0 0 0 1px oklch(var(--primary) / 0.4), 0 0 22px -2px
    oklch(var(--primary) / 0.7);
}

.landing-install-cta-compact:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px oklch(var(--ring)), 0 0 0 4px
    oklch(var(--primary) / 0.6);
}

.landing-install-cta-compact svg,
.landing-install-cta-compact .lucide {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* --- prefers-reduced-motion voor compacte icoon-kaarten -------------- */

@media (prefers-reduced-motion: reduce) {
  .landing-icon-card,
  .landing-install-cta-compact {
    transition: none;
  }
  .landing-icon-card:hover,
  .landing-install-cta-compact:hover {
    transform: none;
  }
  .landing-icon-card:active {
    transform: none;
  }
}

/* --- @supports fallback voor backdrop-filter -------------------------- */

@supports not (backdrop-filter: blur(1px)) {
  .landing-icon-card {
    background: oklch(var(--card) / 0.92);
  }
  .landing-icon-card-badge {
    background: oklch(var(--card) / 0.92);
  }
  .landing-install-cta-compact {
    background: oklch(var(--primary) / 0.92);
    color: oklch(var(--background));
  }
}

/* ============================================================
 * STRUCTUREEL VEREENVOUDIGDE LANDING (v308+)
 * Vervangt de oude security/path/FAQ-kaarten-stapel + referral-banner
 * + install-CTA door één rij kleine ronde icoontjes + één referral-bel.
 * Doel: rustig, overzichtelijk, weinig elementen, duidelijke hiërarchie.
 * ========================================================== */

/* Sterkere dimming voor de achtergrond-kaart zodat de inhoud rustig
   en leesbaar blijft. GESCOPEERD op .flat-map-overlay-calm — alleen
   de structureel vereenvoudigde landingspagina gebruikt dit. De
   basis-.flat-map-overlay (zonder -calm) blijft ongewijzigd voor andere
   consumers (DashboardMapOverlay). */

.flat-map-overlay.flat-map-overlay-calm {
  background-color: oklch(0.04 0.004 260 / 0.72);
  backdrop-filter: blur(6px) saturate(0.85);
  -webkit-backdrop-filter: blur(6px) saturate(0.85);
}

@supports not (
    (backdrop-filter: blur(1px))
  ) {
  .flat-map-overlay.flat-map-overlay-calm {
    background-color: oklch(0.04 0.004 260 / 0.88);
  }
}

/* Referral-bel — groter (3.75rem) rond amber icoontje zonder tekstlabel,
   consistent met de gekleurde icoontjes-rij. Gecentreerd onder de
   knoppen. Vervangt de oude grote referral-banner. Amber gloeiend, met een
   optionele indicator-dot wanneer er een referral-code is opgeslagen. */

.landing-referral-bell {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 4.5rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.landing-referral-bell::before {
  content: "";
  display: block;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 9999px;
  background: linear-gradient(
    135deg,
    oklch(0.18 0.06 75 / 0.85) 0%,
    oklch(0.14 0.05 75 / 0.7) 100%
  );
  border: 1px solid oklch(var(--referral-amber) / 0.6);
  box-shadow: 0 0 0 1px oklch(var(--referral-amber) / 0.18), 0 0 18px -4px
    oklch(var(--referral-amber) / 0.5), 0 6px 20px -8px oklch(0 0 0 / 0.55);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.landing-referral-bell svg {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1.75rem;
  height: 1.75rem;
  color: oklch(var(--referral-amber-strong));
  filter: drop-shadow(0 0 5px oklch(var(--referral-amber) / 0.55));
  pointer-events: none;
}

/* Tekstlabel verwijderd — alleen icoon + aria-label. */

.landing-referral-bell .landing-referral-bell-label {
  display: none;
}

.landing-referral-bell:hover {
  transform: translateY(-1px);
}

.landing-referral-bell:hover::before {
  border-color: oklch(var(--referral-amber-strong) / 0.85);
  box-shadow: 0 0 0 1px oklch(var(--referral-amber) / 0.3), 0 0 24px -2px
    oklch(var(--referral-amber) / 0.7), 0 8px 24px -8px oklch(0 0 0 / 0.6);
}

.landing-referral-bell:focus-visible {
  outline: none;
}

.landing-referral-bell:focus-visible::before {
  box-shadow: 0 0 0 2px oklch(var(--referral-amber) / 0.5), 0 0 24px -2px
    oklch(var(--referral-amber) / 0.7);
}

/* Indicator-dot — kleine amber punt rechtsboven op de bel wanneer er
   een referral-code is opgeslagen. */

.landing-referral-bell-dot {
  position: absolute;
  top: 0.5rem;
  right: calc(50% - 1.75rem + 0.5rem);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: oklch(var(--referral-amber-strong));
  box-shadow: 0 0 6px oklch(var(--referral-amber) / 0.8);
  pointer-events: none;
}

/* Compacte icoontjes-rij — 8 icoontjes in een 4-koloms grid (2 rijen van 4).
   Ieder chip is een verticale kolom (icoon-cirkel + label eronder). De
   4-koloms grid garandeert een vaste 2x4 layout op alle schermgrootten; op
   zeer smalle schermen schalen de kolommen mee via minmax(0,1fr) zodat de
   icoontjes leesbaar blijven. Blauw (hue 250) i.p.v. paars. */

.landing-icon-chip-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 4.5rem));
  justify-content: center;
  align-items: flex-start;
  gap: 0.875rem 0.75rem;
  max-width: 30rem;
  margin: 0 auto;
}

/* Blauw icoontje zonder tekstlabel. Ronde icoon-cirkel (3.75rem hit-
   target) met per-icoon accent-kleur via --landing-chip-color (default
   blauw hue 250). Opent een popup bij klik. Geen tekstlabel meer —
   alleen icoon + aria-label. */

.landing-icon-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  gap: 0.4rem;
  width: 4.5rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 0.18s ease;
}

/* De ronde icoon-cirkel zelf — groter (4.25rem) voor zichtbaarheid op
   afstand. Frosted glas met per-icoon gekleurde gloed via
   --landing-chip-color (default blauw hue 250). */

.landing-icon-chip::before {
  content: "";
  display: block;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 9999px;
  background: oklch(0.18 0.06 var(--landing-chip-color, 250) / 0.55);
  border: 1px solid oklch(0.62 0.18 var(--landing-chip-color, 250) / 0.6);
  box-shadow: 0 0 0 1px oklch(0.62 0.18 var(--landing-chip-color, 250) / 0.18),
    0 0 16px -4px oklch(0.62 0.18 var(--landing-chip-color, 250) / 0.55), 0 6px
    20px -8px oklch(0 0 0 / 0.55);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Het icoon zelf — groter (2rem) en per-icoon gekleurd via
   --landing-chip-color (default blauw hue 250). Gecentreerd op de
   cirkel eronder. */

.landing-icon-chip svg {
  position: absolute;
  top: 1.125rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2rem;
  height: 2rem;
  color: oklch(var(--landing-chip-color, 0.78 0.16 250));
  filter: drop-shadow(
    0 0 5px oklch(0.62 0.18 var(--landing-chip-color, 250) / 0.6)
  );
  pointer-events: none;
}

/* Tekstlabel verwijderd — alleen icoon + aria-label. Lege regel
   behouden voor eventuele toekomstige hergebruik; geen rendering. */

.landing-icon-chip .landing-icon-chip-label {
  display: none;
}

.landing-icon-chip:hover {
  transform: translateY(-1px);
}

.landing-icon-chip:hover::before {
  border-color: oklch(0.78 0.16 var(--landing-chip-color, 250) / 0.9);
  background: oklch(0.22 0.08 var(--landing-chip-color, 250) / 0.65);
  box-shadow: 0 0 0 1px oklch(0.62 0.18 var(--landing-chip-color, 250) / 0.3), 0
    0 22px -2px oklch(0.62 0.18 var(--landing-chip-color, 250) / 0.7), 0 8px
    24px -8px oklch(0 0 0 / 0.6);
}

.landing-icon-chip:focus-visible {
  outline: none;
}

.landing-icon-chip:focus-visible::before {
  box-shadow: 0 0 0 2px oklch(0.78 0.16 var(--landing-chip-color, 250) / 0.7), 0
    0 22px -2px oklch(0.62 0.18 var(--landing-chip-color, 250) / 0.7);
}

.landing-icon-chip:active {
  transform: translateY(0) scale(0.96);
}

/* --- prefers-reduced-motion voor referral-bel + icoontjes -------------- */

@media (prefers-reduced-motion: reduce) {
  .landing-referral-bell,
  .landing-icon-chip {
    transition: none;
  }
  .landing-referral-bell:hover,
  .landing-icon-chip:hover {
    transform: none;
  }
  .landing-icon-chip:active {
    transform: none;
  }
}

/* --- @supports fallback voor backdrop-filter (referral-bel + chips) ---- */

@supports not (backdrop-filter: blur(1px)) {
  .landing-referral-bell::before {
    background: oklch(0.16 0.06 75 / 0.92);
  }
  .landing-icon-chip::before {
    background: oklch(0.16 0.06 250 / 0.92);
  }
}

/* ============================================================
 * CALMER LANDING — MINDER GLOW, MINDER ANIMATIE, COMPACTER.
 * GESCOPEERD op .landing-led — alleen de kaart-landingspagina.
 * Raakt NIET .dashboard-dark, :root, .dark of andere pagina's.
 *
 * Doel (per user instruction "Minder glow/animatie, compactere
 * layout op landingspagina"):
 *  1. Glow-intensiteit omlaag — kleinere halo's, lagere alpha op
 *     icon3d-gloed, led-border, referral-bel en icoon-chips.
 *  2. Niet-functionele animaties uit — icon3d-float, led-pulse,
 *     referral-pulse-glow, install-button-pulse. Functionele
 *     animaties (button-press, popup-transitions, hover-lift)
 *     blijven behouden.
 *  3. Compactere spacing — minder padding/margin op logo-pill,
 *     icoon-chips, referral-bel en glas-panelen. Leesbaarheid
 *     behouden.
 * Kleuren blijven ongewijzigd — alleen glow/animatie/spacing.
 * ========================================================== */

/* --- 1. MINDER GLOW OP ICON3D BINNEN .landing-led ---
 * Verlaagt de Ambilight-halo alpha (0.38 → 0.22) en trekt de
 * spread strakker (0.7 → 0.5) zodat de paarse/neon halo's
 * subtieler worden. Kleinere inset zodat de halo dichter om
 * de cirkel blijft i.p.v. er ver buiten te stralen. */

.landing-led .icon3d {
  --icon3d-glow-alpha: 0.22;
  --icon3d-glow-spread: 0.5;
}

.landing-led .icon3d::before {
  inset: -6% -10% -14% -10%;
}

/* Rol-gloed kleuren blijven gelijk (paars/blauw/groen) — alleen
 * de intensiteit verandert via de alpha/spread vars hierboven. */

/* --- 2. MINDER GLOW OP LED-BORDER BINNEN .landing-led ---
 * Verlaagt de blauwe LED-rand gloed van 12px/0.35 naar 6px/0.2
 * en de hover/active varianten naar subtielere waarden. De rand
 * zelf blijft zichtbaar (kleur ongewijzigd), alleen de halo eromheen
 * wordt kleiner. */

.landing-led .led-border {
  box-shadow: 0 0 6px -2px oklch(0.7 0.18 55 / 0.2), inset 0 0 4px -4px
    oklch(0.7 0.18 55 / 0.1);
}

.landing-led .led-border:hover {
  box-shadow: 0 0 10px -2px oklch(0.7 0.18 55 / 0.35), 0 0 18px -6px
    oklch(0.7 0.18 55 / 0.22), inset 0 0 6px -3px oklch(0.7 0.18 55 / 0.18);
}

.landing-led .led-border-active,
.landing-led .led-border[data-state="active"] {
  box-shadow: 0 0 12px -1px oklch(0.7 0.18 55 / 0.45), 0 0 22px -8px
    oklch(0.7 0.18 55 / 0.3), inset 0 0 6px -2px oklch(0.7 0.18 55 / 0.25);
}

/* Focus-ring als subtielere blauwe LED-gloed i.p.v. brede halo. */

.landing-led *:focus-visible {
  box-shadow: 0 0 0 2px oklch(0.13 0.005 260), 0 0 0 4px
    oklch(0.7 0.18 55 / 0.7), 0 0 10px -2px oklch(0.7 0.18 55 / 0.4);
}

/* --- 3. MINDER GLOW OP REFERRAL-BEL BINNEN .landing-led ---
 * Verlaagt de amber gloed rond de referral-bel van 18px/0.5 naar
 * 10px/0.3. De bel blijft zichtbaar en herkenbaar, alleen de halo
 * wordt subtieler. Hover-gloed ook gereduceerd. */

.landing-led .landing-referral-bell::before {
  box-shadow: 0 0 0 1px oklch(var(--referral-amber) / 0.12), 0 0 10px -4px
    oklch(var(--referral-amber) / 0.3), 0 4px 14px -8px oklch(0 0 0 / 0.5);
}

.landing-led .landing-referral-bell:hover::before {
  box-shadow: 0 0 0 1px oklch(var(--referral-amber) / 0.22), 0 0 14px -2px
    oklch(var(--referral-amber) / 0.45), 0 6px 18px -8px oklch(0 0 0 / 0.55);
}

.landing-led .landing-referral-bell:focus-visible::before {
  box-shadow: 0 0 0 2px oklch(var(--referral-amber) / 0.4), 0 0 14px -2px
    oklch(var(--referral-amber) / 0.45);
}

/* Indicator-dot gloed subtieler. */

.landing-led .landing-referral-bell-dot {
  box-shadow: 0 0 4px oklch(var(--referral-amber) / 0.55);
}

/* --- 4. MINDER GLOW OP ICOON-CHIPS BINNEN .landing-led ---
 * Verlaagt de gekleurde gloed rond elke icoon-chip van 16px/0.55
 * naar 8px/0.3. De chip blijft een herkenbaar gekleurd rondje,
 * alleen de neon-halo eromheen wordt subtieler. Hover-gloed ook
 * gereduceerd. */

.landing-led .landing-icon-chip::before {
  box-shadow: 0 0 0 1px oklch(0.62 0.18 var(--landing-chip-color, 250) / 0.12),
    0 0 8px -4px oklch(0.62 0.18 var(--landing-chip-color, 250) / 0.3), 0 4px
    14px -8px oklch(0 0 0 / 0.5);
}

.landing-led .landing-icon-chip:hover::before {
  box-shadow: 0 0 0 1px oklch(0.62 0.18 var(--landing-chip-color, 250) / 0.22),
    0 0 12px -2px oklch(0.62 0.18 var(--landing-chip-color, 250) / 0.45), 0 6px
    18px -8px oklch(0 0 0 / 0.55);
}

.landing-led .landing-icon-chip:focus-visible::before {
  box-shadow: 0 0 0 2px oklch(0.78 0.16 var(--landing-chip-color, 250) / 0.6), 0
    0 12px -2px oklch(0.62 0.18 var(--landing-chip-color, 250) / 0.45);
}

/* Icoon drop-shadow subtieler (5px → 3px). */

.landing-led .landing-icon-chip svg {
  filter: drop-shadow(
    0 0 3px oklch(0.62 0.18 var(--landing-chip-color, 250) / 0.4)
  );
}

/* --- 5. MINDER GLOW OP REFERRAL-BANNER BINNEN .landing-led ---
 * Verlaagt de paars gloei-rand op de referral-banner. De banner
 * blijft zichtbaar (donkere achtergrond + paars rand), alleen de
 * halo eromheen wordt subtieler. Pulse-animatie wordt hieronder
 * uitgezet. */

.landing-led .referral-banner {
  box-shadow: 0 0 0 1px oklch(var(--referral-amber) / 0.12), 0 0 10px -4px
    oklch(var(--referral-amber) / 0.25), 0 6px 20px -10px oklch(0 0 0 / 0.55);
}

.landing-led .referral-banner:hover {
  box-shadow: 0 0 0 1px oklch(var(--referral-amber) / 0.22), 0 0 16px -2px
    oklch(var(--referral-amber) / 0.4), 0 10px 26px -10px oklch(0 0 0 / 0.5);
}

.landing-led .referral-banner-cta {
  box-shadow: 0 0 0 1px oklch(var(--referral-amber) / 0.28), 0 0 10px -4px
    oklch(var(--referral-amber) / 0.4);
}

.landing-led .referral-banner-cta:hover {
  box-shadow: 0 0 0 1px oklch(var(--referral-amber) / 0.4), 0 0 14px -2px
    oklch(var(--referral-amber) / 0.55);
}

/* --- 6. MINDER GLOW OP INSTALL-CTA-COMPACT BINNEN .landing-led ---
 * Verlaagt de paars gloed op de compacte install-CTA knop. */

.landing-led .landing-install-cta-compact:hover {
  box-shadow: 0 0 0 1px oklch(var(--primary) / 0.3), 0 0 14px -2px
    oklch(var(--primary) / 0.5);
}

/* --- 7. ANIMATIES UIT BINNEN .landing-led ---
 * Niet-functionele animaties worden uitgezet. Functionele
 * animaties (button-press feedback, popup/modal transitions,
 * hover-lift) blijven behouden.
 *
 * icon3d-float: zweefbeweging uit (decoratief, niet functioneel).
 * led-pulse: box-shadow puls uit (decoratief).
 * referral-pulse-glow: rand-puls uit (decoratief).
 * install-button-pulse: knop-puls uit (decoratief).
 * landing-glow-pulse: gloed-puls uit (decoratief).
 * nav-active-pulse: puntje-puls uit (decoratief). */

.landing-led .icon3d-float {
  animation: none;
}

.landing-led .icon3d {
  will-change: auto;
}

/* led-pulse wordt toegepast via Tailwind animate-led-pulse utility;
 * binnen .landing-led zetten we de animatie uit op elementen die
 * de class dragen. */

.landing-led .animate-led-pulse {
  animation: none;
}

/* referral-banner rand-puls — de ::before pulseert; zet uit en
 * houdt een statische subtielere opacity. */

.landing-led .referral-banner::before {
  animation: none;
  opacity: 0.4;
}

/* install-button-pulse via Tailwind utility — uit binnen .landing-led. */

.landing-led .animate-install-button-pulse {
  animation: none;
}

/* landing-glow-pulse via Tailwind utility — uit binnen .landing-led. */

.landing-led .animate-landing-glow-pulse {
  animation: none;
}

/* nav-active-pulse puntje — uit binnen .landing-led (puntje wordt
 * statisch). */

.landing-led .meer-trigger[data-has-active="true"]::after {
  animation: none;
}

/* --- 8. COMPACTERE SPACING BINNEN .landing-led ---
 * Verlaagt padding/margin op decoratieve elementen voor een
 * dichtere, minder drukke layout. Leesbaarheid behouden:
 * teksten behouden hun regelhoogte; alleen de omringende
 * witruimte wordt strakker.
 *
 * logo-pill (glass-badge in header): px-4 py-1.5 → px-3 py-1.
 * icoon-chip-row gap: 0.875rem → 0.625rem (strakker).
 * icoon-chip: width 4.5rem → 4rem, cirkel 4.25rem → 3.75rem.
 * referral-bel: width 4.5rem → 4rem, cirkel 3.75rem → 3.25rem.
 * contentlaag gap-6 → gap-4 (via override op de fixed container). */

/* Logo-pill compacter — px-3 py-1 i.p.v. px-4 py-1.5.
 * Verticale padding ruimer (0.6rem) en line-height 1.2 zodat de
 * responsief verkleinde 'Valk Taxi' wordmark (text-3xl → sm:text-4xl →
 * md:text-5xl) volledig binnen de pill past zonder top/bottom-clipping
 * door de overflow-y-auto contentlaag. overflow: visible laat de
 * ::after halo buiten de pill renderen. */

.landing-led .glass-badge {
  padding: 0.6rem 0.85rem;
  line-height: 1.2;
  overflow: visible;
}

/* Contentlaag (fixed container) — gap-6 → gap-4 voor dichtere
 * verticale stapeling. De container heeft Tailwind gap-6; deze
 * override trekt hem naar 1rem. Specifieke (0,2,0) selector wint
 * van de Tailwind utility (0,1,0).
 *
 * justify-content: flex-end duurt alle elementen naar de onderkant
 * van de viewport, zodat de 9 icoontjes maximaal onderaan de pagina
 * staan i.p.v. in het midden. */

.landing-led .pointer-events-none.fixed.inset-0 {
  gap: 1rem;
  justify-content: flex-end;
}

/* Icoon-chip-rij — 4-koloms grid met kleinere gap (0.625rem rij / 0.5rem
 * kolom) en smallere kolombreedte (4.75rem) voor een 2x4 cluster.
 * Kolombreedte en max-width meegeschaald met de grotere cirkels
 * (~20% groter: 3.75rem → 4.5rem). max-width herbergt 4 kolommen van
 * 4.75rem + 3 kolomgaps van 0.5rem (20.5rem) met een kleine marge. */

.landing-led .landing-icon-chip-row {
  grid-template-columns: repeat(4, minmax(0, 4.75rem));
  gap: 0.625rem 0.5rem;
  max-width: 21.5rem;
}

/* Icoon-chip — breder (4.75rem i.p.v. 4rem) en grotere cirkel
 * (4.5rem i.p.v. 3.75rem, ~20% groter). Icoonpositie wordt aangepast
 * zodat het icoon gecentreerd blijft op de grotere cirkel. */

.landing-led .landing-icon-chip {
  width: 4.75rem;
  gap: 0.3rem;
}

.landing-led .landing-icon-chip::before {
  width: 4.5rem;
  height: 4.5rem;
}

.landing-led .landing-icon-chip svg {
  top: 1.0625rem;
  width: 2.05rem;
  height: 2.05rem;
}

/* Referral-bel — breder (4.75rem i.p.v. 4rem) en grotere cirkel
 * (3.875rem i.p.v. 3.25rem, ~19% groter). Icoonpositie aangepast. */

.landing-led .landing-referral-bell {
  width: 4.75rem;
  gap: 0.3rem;
}

.landing-led .landing-referral-bell::before {
  width: 3.875rem;
  height: 3.875rem;
}

.landing-led .landing-referral-bell svg {
  top: 0.875rem;
  width: 1.8125rem;
  height: 1.8125rem;
}

/* Indicator-dot positie aangepast aan grotere cirkel. */

.landing-led .landing-referral-bell-dot {
  top: 0.4375rem;
  right: calc(50% - 1.9375rem + 0.5rem);
}

/* Referral-banner compact — al compact via .referral-banner-compact;
 * binnen .landing-led iets strakker voor consistentie. */

.landing-led .referral-banner-compact {
  padding: 0.75rem 0.875rem;
  gap: 0.375rem;
}

/* --- 9. REDUCED-MOTION PARITEIT ---
 * Binnen .landing-led zijn de decoratieve animaties al uitgezet
 * (hierboven). Deze regel garandeert dat ook buiten .landing-led
 * de prefers-reduced-motion override blijft werken — geen extra
 * regel nodig, de bestaande @media (prefers-reduced-motion: reduce)
 * blokken elders in dit bestand blijven onaangetast. */

/* ============================================================
 * QR-STICKER PAGINA — publieke route /qr-sticker
 * Additieve scope. Geen nieuwe kleur-tokens; hergebruikt
 * :root/.dark OKLCH-tokens (--background, --foreground, --primary,
 * --gold-accent, --border, --muted-foreground), Space Grotesk +
 * DM Sans. Print-CSS verbergt alle page-chrome en print alleen de
 * sticker op A4 met witruimte. Kaart-CSS (1755-1934) onaangetast.
 * ============================================================ */

/* --- QR-sticker tokens (lokaal, hergebruikt bestaande hues) --- */

:root {
  /* Goud-accent voor sticker-rand en instructie-tekst.
     Hergebruikt --gold-accent hue 85; lichte chroma voor premium
     uitstraling zonder de primary-blauw te concurreren. */
  --qr-sticker-gold: 0.85 0.13 85;
  --qr-sticker-gold-soft: 0.85 0.13 85 / 0.55;
  --qr-sticker-gold-tint: 0.85 0.13 85 / 0.08;
  /* Witte QR-plaat (print-veilig, hoog contrast). */
  --qr-sticker-plate: 0.99 0 0;
  --qr-sticker-module: 0 0 0;
  /* Donkere sticker-achtergrond iets verheven boven --background
     voor elevatie op het scherm (niet in print). */
  --qr-sticker-surface: 0.1 0.015 260;
  --qr-sticker-surface-border: 0.85 0.13 85 / 0.5;
  /* Instructie-tekst: warme goud-tint (spiegelt --muted-foreground
     beslissing: geen grijs). */
  --qr-sticker-instruction: 0.82 0.05 85;
  --qr-sticker-instruction-soft: 0.78 0.04 85;
}

/* --- PRINT-CSS — alleen de sticker op A4, chrome verborgen --- */

@media print {
  /* Pagina-instelling: A4, marges voor witruimte rondom. */
  @page {
    size: A4 portrait;
    margin: 2.5cm;
  }

  /* Verberg ALLE page-chrome: nav, knoppen, footer, overlays,
     AI-chat FAB, alles wat geen deel is van de sticker. */
  body * {
    visibility: hidden !important;
  }

  /* Alleen de sticker-kaart en zijn kinderen zichtbaar. */
  .qr-sticker-card,
  .qr-sticker-card * {
    visibility: visible !important;
  }

  /* Sticker-kaart centreren op de pagina, geen donkere achtergrond,
     geen rand of schaduw in print — alleen QR + logo + tekst. */
  .qr-sticker-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 14cm;
    padding: 0;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    gap: 1.5cm;
  }

  /* QR-plaat in print: wit, zwart, geen schaduw, groter voor
     betrouwbare scan vanaf autosticker. */
  .qr-sticker-qr {
    width: 11cm;
    height: 11cm;
    padding: 0.6cm;
    box-shadow: none !important;
    border-radius: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .qr-sticker-qr svg,
  .qr-sticker-qr img {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Instructie-tekst in print: donker op wit (print-veilig,
     niet de goud-tint die op scherm staat). */
  .qr-sticker-instruction-main,
  .qr-sticker-instruction-tip {
    color: oklch(0.18 0.01 260) !important;
  }

  /* Merk-naam in print: donker. */
  .qr-sticker-brand-name {
    color: oklch(0.18 0.01 260) !important;
  }

  /* Forceer kleuren afdrukken (voorkomt browser-stripping). */
  .qr-sticker-card,
  .qr-sticker-qr,
  .qr-sticker-qr svg,
  .qr-sticker-qr img,
  .qr-sticker-brand-logo {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Print-knop altijd verborgen in print. */
  .qr-sticker-print-btn {
    display: none !important;
  }

  /* Share-elementen verborgen in print — alleen de sticker-kaart
      wordt geprint. Verbergt de actie-rij, het fallback-grid en
      de toast zodat de print-output schoon blijft. */
  .qr-sticker-actions,
  .qr-sticker-share-grid,
  .qr-sticker-share-toast {
    display: none !important;
  }
}

/* einde @media print — AI-assistent CSS hieronder is top-level
     (unlayered), zodat .ai-chat-fab op het scherm wordt toegepast.
     VOORHEEN stond deze hele block per ongeluk binnen @media print,
     waardoor de FAB op het scherm position:static + 24x24px kreeg
     (browser-default) i.p.v. position:fixed + 56x56px. */

/* ============================================================
 * AI-ASSISTENT — zwevende FAB-knop + uitklapbaar chat-venster.
 * GESCOPEERD op .ai-chat-fab / .ai-chat-window (gemonteerd in
 * LandingPage en HelpPage via AiChatFab.tsx). Hergebruist
 * bestaande design tokens (bg-primary, bg-card, bg-secondary,
 * border-border, text-foreground, text-muted-foreground) — geen
 * nieuwe kleur-tokens. De FAB zweeft rechtsonder boven de
 * bottom-nav (z-[1200]); het chat-venster opent boven de FAB.
 * Subtiele pulse-glow animatie trekt de aandacht zonder te
 * flitsen; prefers-reduced-motion schakelt de animatie uit.
 * ========================================================== */

/* FAB-knop — zwevende pill-knop RECHTSBOVEN met AI-icoon + label.
     Gesloten staat: pill-vorm (rounded-rectangle) met Sparkles-icoon
     en zichtbaar 'AI-assistent' label naast het icoon, zodat de knop
     direct herkenbaar is als AI-assistent (niet een generieke chat-
     knop). Open staat: ronde knop met alleen het X-sluit-icoon.
     bg-primary met primary-foreground icoon/label, schaduw + pulse-glow.
     Blijft altijd zichtbaar (ook wanneer het chat-venster open is);
     de sluit-knop in het venster sluit het venster.

     POSITIE: rechtsboven, ONDER de vaste bovenbalk (DriverTopBar /
     PassengerTopBar — fixed top-0 h-14 = 3.5rem). Op routes zonder
     bovenbalk (landing, admin) staat de knop iets lager maar blijft
     duidelijk rechtsboven. Eén universele top-offset (4rem) werkt op
     ALLE pagina's — geen route-afhankelijke positie meer.

     GROOTTE: kleiner dan voorheen (44px i.p.v. 56px) — voldoet nog aan
     de 44px mobiele hit-target minimum. Het label en icoon zijn
     proportioneel meegeschaald.

     Hit-target: minimaal 44px hoog (2.75rem = 44px). De pill-breedte
     groeit met het label maar blijft compact (max-width clamp).

     DEFENSIEVE !important op position/z-index/background-color
     (gespiegeld aan nav[data-ocid='driver.nav'] hierboven, regels
     2181-2211): de FAB staat in @layer utilities, maar er is een
     structurele anomalie op regels 2113-2134 waar @layer utilities
     tijdelijk wordt gesloten en een unlayered regel
     (.dashboard-dark .leaflet-top.leaflet-left) wordt uitgezonden.
     Unlayered CSS wint van layered CSS in de cascade, dus elke
     unlayered regel of hoge-specificiteit selector die de FAB
     raakt zou position/z-index/background kunnen override.
     !important garandeert dat de FAB fixed blijft, boven de
     bottom-nav (z-1200) en Leaflet-controls (z-800) staat, en
     altijd de primary-achtergrondkleur houdt. */

.ai-chat-fab {
  position: fixed !important;
  right: 0.75rem;
  top: 4rem;
  z-index: 1500 !important;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.875rem;
  border-radius: 9999px;
  background-color: oklch(var(--primary)) !important;
  color: oklch(var(--primary-foreground));
  border: 1px solid oklch(var(--primary) / 0.6);
  box-shadow: 0 0 0 1px oklch(var(--primary) / 0.25), 0 6px 18px -5px
    oklch(var(--primary) / 0.55), 0 3px 10px -3px oklch(0 0 0 / 0.4);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s
    cubic-bezier(0.4, 0, 0.2, 1);
  animation: ai-chat-fab-pulse-glow 2.8s ease-in-out infinite;
}

/* Inhoud-wrapper voor de gesloten staat — icoon + label naast elkaar.
   Gebruikt door AiChatFab.tsx (.ai-chat-fab-content). */

.ai-chat-fab-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
}

/* Icoon-wrapper voor de open staat (alleen het X-sluit-icoon).
   Gebruikt door AiChatFab.tsx (.ai-chat-fab-icon). */

.ai-chat-fab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Sparkles-icoon — iets groter dan het label, duidelijk herkenbaar
   als AI-symbool. Subtiele glow rond het icoon voor extra nadruk. */

.ai-chat-fab-sparkles {
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px oklch(var(--primary-foreground) / 0.45));
}

/* Zichtbaar label naast het icoon — 'AI-assistent' in het Nederlands.
   font-display voor visuele hiërarchie, semibold, witte tekst
   (primary-foreground) voor maximaal contrast op de primary-achtergrond.
   whitespace-nowrap voorkomt dat het label afbreekt op smalle viewports.
   Kleinere font-size (0.8125rem) passend bij de kleinere 44px FAB. */

.ai-chat-fab-label {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: oklch(var(--primary-foreground));
}

/* Disabled / offline / crash-fallback staat — grijze achtergrond,
     géén pulse-glow animatie, cursor not-allowed. Wordt toegevoegd door
     AiChatFabInner wanneer aiUnavailable (null actor) en door de
     AiChatFabBoundary fallback-knop in Layout.tsx wanneer de FAB crasht.
     !important op background-color/border/box-shadow/animation/cursor
     garandeert dat de disabled-staat wint van de default .ai-chat-fab
     regels (zelfde !important-patroon als de base-regels hierboven). */

.ai-chat-fab.ai-chat-fab-disabled,
.ai-chat-fab:disabled,
.ai-chat-fab[aria-disabled="true"] {
  background-color: oklch(0.45 0.01 250) !important;
  color: oklch(0.7 0.01 250);
  border-color: oklch(0.4 0.01 250 / 0.6);
  box-shadow: 0 0 0 1px oklch(0.4 0.01 250 / 0.25), 0 4px 12px -4px
    oklch(0 0 0 / 0.4) !important;
  cursor: not-allowed !important;
  animation: none !important;
}

.ai-chat-fab.ai-chat-fab-disabled:hover,
.ai-chat-fab:disabled:hover,
.ai-chat-fab[aria-disabled="true"]:hover {
  transform: none;
  box-shadow: 0 0 0 1px oklch(0.4 0.01 250 / 0.25), 0 4px 12px -4px
    oklch(0 0 0 / 0.4) !important;
}

.ai-chat-fab:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 0 0 1px oklch(var(--primary) / 0.4), 0 12px 28px -6px
    oklch(var(--primary) / 0.7), 0 6px 16px -4px oklch(0 0 0 / 0.45);
}

.ai-chat-fab:focus-visible {
  outline: 2px solid oklch(var(--ring));
  outline-offset: 3px;
}

.ai-chat-fab:active {
  transform: translateY(0) scale(0.98);
}

@keyframes ai-chat-fab-pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 0 1px oklch(var(--primary) / 0.25), 0 8px 24px -6px
      oklch(var(--primary) / 0.55), 0 4px 12px -4px oklch(0 0 0 / 0.4);
  }
  50% {
    box-shadow: 0 0 0 1px oklch(var(--primary) / 0.4), 0 10px 28px -4px
      oklch(var(--primary) / 0.7), 0 6px 16px -4px oklch(0 0 0 / 0.45);
  }
}

/* Chat-venster — uitklapbaar paneel ONDER de FAB, rechtsboven.
     Opent naar beneden i.p.v. naar boven omdat de FAB nu rechtsboven
     zit (top: 4rem). top-offset = FAB-top (4rem) + FAB-hoogte (2.75rem)
     + 0.5rem gap = 7.25rem.
     bg-card met border, rounded-2xl, width min(92vw, 24rem),
     max-height 70vh, flex column. Schaduw + frosted blur voor
     premium glas-identiteit consistent met de dashboard LED-stijl. */

.ai-chat-window {
  position: fixed;
  right: 0.75rem;
  top: 7.25rem;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  width: min(92vw, 24rem);
  max-height: 70vh;
  border-radius: 1rem;
  background-color: oklch(var(--card));
  border: 1px solid oklch(var(--border));
  box-shadow: 0 0 0 1px oklch(var(--primary) / 0.12), 0 16px 40px -12px
    oklch(0 0 0 / 0.55), 0 6px 16px -8px oklch(0 0 0 / 0.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  overflow: hidden;
}

/* Fallback voor browsers zonder backdrop-filter — semi-opaque card. */

@supports not (
    (backdrop-filter: blur(1px))
  ) {
  .ai-chat-window {
    background-color: oklch(var(--card));
  }
}

/* Header — mascotte + titel + sluitknop. bg-secondary tint met
     border-bottom voor visuele scheiding van de berichtgeschiedenis. */

.ai-chat-window-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  background-color: oklch(var(--secondary) / 0.4);
  border-bottom: 1px solid oklch(var(--border));
}

/* Sluitknop — ronde glas-knop, muted-foreground, hover naar foreground. */

.ai-chat-window-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: transparent;
  border: 0;
  color: oklch(var(--muted-foreground));
  cursor: pointer;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

.ai-chat-window-close:hover {
  background-color: oklch(var(--secondary));
  color: oklch(var(--foreground));
}

.ai-chat-window-close:focus-visible {
  outline: 2px solid oklch(var(--ring));
  outline-offset: 2px;
}

/* Berichtgeschiedenis — scrollbaar gebied, flex-1, bg-background.
     overscroll-containment zodat scrollen binnen het venster de
     pagina erachter niet meesleept. */

.ai-chat-window-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  background-color: oklch(var(--background));
}

/* Suggestie-chips — alleen bij lege geschiedenis. Compacte
     sectie boven de invoer met Valk Taxi-only suggestie-knoppen. */

.ai-chat-window-suggestions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  border-top: 1px solid oklch(var(--border));
  background-color: oklch(var(--card));
}

/* Invoer-formulier — textarea + verzendknop, bg-card met border-top. */

.ai-chat-window-input-form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  border-top: 1px solid oklch(var(--border));
  background-color: oklch(var(--card));
}

/* Textarea — flex-1, bg-secondary, border-input, rounded-lg.
     rows=1 met auto-grow via min-height; resize verticaal uit. */

.ai-chat-window-textarea {
  flex: 1;
  min-width: 0;
  min-height: 2.5rem;
  max-height: 8rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  background-color: oklch(var(--secondary));
  border: 1px solid oklch(var(--input));
  color: oklch(var(--foreground));
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.4;
  resize: none;
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.ai-chat-window-textarea::-moz-placeholder {
  color: oklch(var(--muted-foreground));
}

.ai-chat-window-textarea::placeholder {
  color: oklch(var(--muted-foreground));
}

.ai-chat-window-textarea:focus-visible {
  outline: none;
  border-color: oklch(var(--ring));
  box-shadow: 0 0 0 2px oklch(var(--ring) / 0.3);
}

.ai-chat-window-textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Verzendknop — ronde primary-knop, 40px, met Send-icoon.
     Disabled-state: opacity 0.5, cursor not-allowed. */

.ai-chat-window-send {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: oklch(var(--primary));
  color: oklch(var(--primary-foreground));
  border: 1px solid oklch(var(--primary) / 0.6);
  box-shadow: 0 0 0 1px oklch(var(--primary) / 0.2), 0 4px 12px -4px
    oklch(var(--primary) / 0.45);
  cursor: pointer;
  transition: background-color 0.2s ease-out, transform 0.2s ease-out,
    box-shadow 0.2s ease-out;
}

.ai-chat-window-send:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px oklch(var(--primary) / 0.35), 0 6px 16px -4px
    oklch(var(--primary) / 0.6);
}

.ai-chat-window-send:focus-visible {
  outline: 2px solid oklch(var(--ring));
  outline-offset: 2px;
}

.ai-chat-window-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* Disclaimer — kleine muted-foreground tekst onder de invoer. */

.ai-chat-window-disclaimer {
  padding: 0.5rem 0.875rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  line-height: 1.35;
  color: oklch(var(--muted-foreground));
  text-align: center;
  background-color: oklch(var(--card));
}

/* Reduced-motion: pulse-glow animatie uit, hover/active transforms
     behouden (subtiel, niet-thatralisch). */

@media (prefers-reduced-motion: reduce) {
  .ai-chat-fab {
    animation: none;
  }
  .ai-chat-fab:hover:not(:disabled),
  .ai-chat-fab:active {
    transform: none;
  }
  .ai-chat-window-send:hover:not(:disabled) {
    transform: none;
  }
}

/* --- SplashScreen ---
 * Korte intro-weergave bij app-load: goud Valk Taxi-logo gecentreerd op
 * een zwarte achtergrond met fade-in/fade-out (~2,8s totaal). Van der
 * Valk kleurenpalet: zwart + goud. Geen navigatie, puur decoratief.
 *
 * .splash-screen[data-visible="true"] → opacity 1 (fade-in voltooid).
 * .splash-screen[data-visible="false"] → opacity 0 (fade-out).
 * De transition op opacity verzorgt de cross-fade; de parent unmount
 * de component na SPLASH_DURATION_MS (zie SplashScreen.tsx). */

.splash-screen {
  opacity: 1;
  transition: opacity 0.4s var(--motion-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.splash-screen[data-visible="false"] {
  opacity: 0;
  pointer-events: none;
}

/* Goud logo met subtiele goud-gloed + fade-in scale. De gloed gebruikt
 * een warme goud-oklch (0.85 0.13 85) i.p.v. de paarse primary, passend
 * bij het gouden logo en de Van der Valk goud-accent. */

.splash-logo {
  opacity: 0;
  transform: scale(0.92);
  animation: splash-logo-in 0.6s
    var(--motion-ease, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
  box-shadow: 0 0 0 1px oklch(0.85 0.13 85 / 0.4), 0 0 24px -2px
    oklch(0.85 0.13 85 / 0.55), 0 0 48px -8px oklch(0.85 0.13 85 / 0.35), 0 8px
    20px -6px oklch(0 0 0 / 0.6);
  filter: drop-shadow(0 4px 10px oklch(0 0 0 / 0.5));
}

@keyframes splash-logo-in {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Reduced-motion: kortere fade-in (0.3s), geen scale, gloed behouden
 * (statisch, geen beweging). De fade-out via .splash-screen[data-visible]
 * blijft 0.4s (subtiel). */

@media (prefers-reduced-motion: reduce) {
  .splash-logo {
    animation: splash-logo-in-reduced 0.3s
      var(--motion-ease, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
  }
  @keyframes splash-logo-in-reduced {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
}

/* --- IntroScreen ---
 * Korte intro-pagina die na de splash en vóór de landingspagina
 * verschijnt (~2,8s). Toont een korte uitleg in de actieve taal in een
 * donkere glas-kaart met gouden accenten — dezelfde Van der Valk
 * huisstijl als de splash- en landingspagina.
 *
 * .intro-screen[data-visible="true"] → opacity 1 (fade-in voltooid).
 * .intro-screen[data-visible="false"] → opacity 0 (fade-out).
 * De transition op opacity verzorgt de cross-fade; de parent unmount
 * de component na INTRO_DURATION_MS (zie IntroScreen.tsx). De
 * automatische overgang blijft altijd werken — alleen de fade-animatie
 * wordt door prefers-reduced-motion uitgeschakeld. */

.intro-screen {
  opacity: 1;
  transition: opacity 0.4s var(--motion-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.intro-screen[data-visible="false"] {
  opacity: 0;
  pointer-events: none;
}

/* Glas-contentkaart met goud-gloed + fade-in scale. Hergebruikt de
 * goud-oklch (0.85 0.13 85) gloed van .splash-logo voor visuele
 * consistentie met de splash en de landingspagina. De .glass-strong
 * class (zie @layer utilities) verzorgt de frosted-glas achtergrond;
 * .intro-content voegt de fade-in animatie en de goud-gloed toe. */

.intro-content {
  opacity: 0;
  transform: scale(0.96);
  animation: intro-content-in 0.5s
    var(--motion-ease, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
  box-shadow: 0 0 0 1px oklch(0.85 0.13 85 / 0.35), 0 0 28px -4px
    oklch(0.85 0.13 85 / 0.45), 0 0 56px -10px oklch(0.85 0.13 85 / 0.3), 0 12px
    32px -8px oklch(0 0 0 / 0.65);
}

@keyframes intro-content-in {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Goud logo binnen de intro-kaart — hergebruikt de splash-logo
 * gloed-stijl (warm goud, layered box-shadow). De fade-in animatie
 * is iets korter dan .splash-logo zodat het logo verschijnt vóór de
 * tekst. */

.intro-logo {
  opacity: 0;
  transform: scale(0.92);
  animation: intro-content-in 0.5s
    var(--motion-ease, cubic-bezier(0.4, 0, 0.2, 1)) 0.05s forwards;
  box-shadow: 0 0 0 1px oklch(0.85 0.13 85 / 0.4), 0 0 24px -2px
    oklch(0.85 0.13 85 / 0.55), 0 0 48px -8px oklch(0.85 0.13 85 / 0.35), 0 8px
    20px -6px oklch(0 0 0 / 0.6);
  filter: drop-shadow(0 4px 10px oklch(0 0 0 / 0.5));
}

/* Reduced-motion: de automatische overgang blijft werken (timer in
 * IntroScreen.tsx ongewijzigd), maar de fade-animaties vallen uit.
 * .intro-screen houdt zijn opacity-transition (subtiel, 0.4s) — dat
 * is een cross-fade, geen beweging. De scale-animatie op .intro-content
 * en .intro-logo wordt vervangen door een pure opacity-fade zonder
 * transform. */

@media (prefers-reduced-motion: reduce) {
  .intro-content,
  .intro-logo {
    animation: intro-content-in-reduced 0.3s
      var(--motion-ease, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
  }
  @keyframes intro-content-in-reduced {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
}

.selection\:bg-primary *::-moz-selection {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:bg-primary *::selection {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:text-primary-foreground *::-moz-selection {
	color: oklch(var(--primary-foreground));
}

.selection\:text-primary-foreground *::selection {
	color: oklch(var(--primary-foreground));
}

.selection\:bg-primary::-moz-selection {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:bg-primary::selection {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:text-primary-foreground::-moz-selection {
	color: oklch(var(--primary-foreground));
}

.selection\:text-primary-foreground::selection {
	color: oklch(var(--primary-foreground));
}

.file\:inline-flex::file-selector-button {
	display: inline-flex;
}

.file\:h-7::file-selector-button {
	height: 1.75rem;
}

.file\:border-0::file-selector-button {
	border-width: 0px;
}

.file\:bg-transparent::file-selector-button {
	background-color: transparent;
}

.file\:text-sm::file-selector-button {
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.file\:font-medium::file-selector-button {
	font-weight: 500;
}

.file\:text-foreground::file-selector-button {
	color: oklch(var(--foreground));
}

.placeholder\:text-\[oklch\(var\(--muted-foreground\)\)\]::-moz-placeholder {
	color: oklch(var(--muted-foreground));
}

.placeholder\:text-\[oklch\(var\(--muted-foreground\)\)\]::placeholder {
	color: oklch(var(--muted-foreground));
}

.placeholder\:text-muted-foreground::-moz-placeholder {
	--tw-text-opacity: 1;
	color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.placeholder\:text-muted-foreground::placeholder {
	--tw-text-opacity: 1;
	color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.after\:absolute::after {
	content: var(--tw-content);
	position: absolute;
}

.after\:-inset-2::after {
	content: var(--tw-content);
	inset: -0.5rem;
}

.after\:inset-y-0::after {
	content: var(--tw-content);
	top: 0px;
	bottom: 0px;
}

.after\:left-1\/2::after {
	content: var(--tw-content);
	left: 50%;
}

.after\:w-1::after {
	content: var(--tw-content);
	width: 0.25rem;
}

.after\:w-\[2px\]::after {
	content: var(--tw-content);
	width: 2px;
}

.after\:-translate-x-1\/2::after {
	content: var(--tw-content);
	--tw-translate-x: -50%;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.first\:rounded-l-md:first-child {
	border-top-left-radius: calc(var(--radius) - 2px);
	border-bottom-left-radius: calc(var(--radius) - 2px);
}

.first\:border-l:first-child {
	border-left-width: 1px;
}

.last\:rounded-r-md:last-child {
	border-top-right-radius: calc(var(--radius) - 2px);
	border-bottom-right-radius: calc(var(--radius) - 2px);
}

.last\:border-b-0:last-child {
	border-bottom-width: 0px;
}

.hover\:scale-110:hover {
	--tw-scale-x: 1.1;
	--tw-scale-y: 1.1;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-\[1\.02\]:hover {
	--tw-scale-x: 1.02;
	--tw-scale-y: 1.02;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-\[oklch\(var\(--gold-accent\)\/0\.5\)\]:hover {
	border-color: oklch(var(--gold-accent)/0.5);
}

.hover\:border-primary\/60:hover {
	border-color: oklch(var(--primary) / 0.6);
}

.hover\:bg-\[oklch\(var\(--cta\)\/0\.25\)\]:hover {
	background-color: oklch(var(--cta)/0.25);
}

.hover\:bg-\[oklch\(var\(--gold-accent\)\/0\.06\)\]:hover {
	background-color: oklch(var(--gold-accent)/0.06);
}

.hover\:bg-accent:hover {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.hover\:bg-accent\/40:hover {
	background-color: oklch(var(--accent) / 0.4);
}

.hover\:bg-card:hover {
	background-color: oklch(var(--card));
}

.hover\:bg-destructive:hover {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--destructive) / var(--tw-bg-opacity, 1));
}

.hover\:bg-destructive\/10:hover {
	background-color: oklch(var(--destructive) / 0.1);
}

.hover\:bg-destructive\/20:hover {
	background-color: oklch(var(--destructive) / 0.2);
}

.hover\:bg-destructive\/90:hover {
	background-color: oklch(var(--destructive) / 0.9);
}

.hover\:bg-emerald-400:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}

.hover\:bg-muted:hover {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}

.hover\:bg-muted\/50:hover {
	background-color: oklch(var(--muted) / 0.5);
}

.hover\:bg-primary\/90:hover {
	background-color: oklch(var(--primary) / 0.9);
}

.hover\:bg-rose-500:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
}

.hover\:bg-secondary:hover {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}

.hover\:bg-secondary\/40:hover {
	background-color: oklch(var(--secondary) / 0.4);
}

.hover\:bg-secondary\/80:hover {
	background-color: oklch(var(--secondary) / 0.8);
}

.hover\:bg-sidebar-accent:hover {
	background-color: oklch(var(--sidebar-accent));
}

.hover\:bg-white\/10:hover {
	background-color: rgb(255 255 255 / 0.1);
}

.hover\:bg-white\/5:hover {
	background-color: rgb(255 255 255 / 0.05);
}

.hover\:text-\[oklch\(var\(--foreground\)\)\]:hover {
	color: oklch(var(--foreground));
}

.hover\:text-accent-foreground:hover {
	color: oklch(var(--accent-foreground));
}

.hover\:text-destructive-foreground:hover {
	color: oklch(var(--destructive-foreground));
}

.hover\:text-foreground:hover {
	color: oklch(var(--foreground));
}

.hover\:text-muted-foreground:hover {
	--tw-text-opacity: 1;
	color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.hover\:text-primary:hover {
	--tw-text-opacity: 1;
	color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}

.hover\:text-sidebar-accent-foreground:hover {
	color: oklch(var(--sidebar-accent-foreground));
}

.hover\:underline:hover {
	text-decoration-line: underline;
}

.hover\:opacity-100:hover {
	opacity: 1;
}

.hover\:opacity-80:hover {
	opacity: 0.8;
}

.hover\:opacity-90:hover {
	opacity: 0.9;
}

.hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
	--tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
	--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_10px_28px_rgba\(0\2c 0\2c 0\2c 0\.55\)\]:hover {
	--tw-shadow: 0 10px 28px rgba(0,0,0,0.55);
	--tw-shadow-colored: 0 10px 28px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:ring-4:hover {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.hover\:brightness-110:hover {
	--tw-brightness: brightness(1.1);
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.hover\:after\:bg-sidebar-border:hover::after {
	content: var(--tw-content);
	background-color: oklch(var(--sidebar-border));
}

.focus\:z-10:focus {
	z-index: 10;
}

.focus\:border-\[oklch\(var\(--cta\)\)\]:focus {
	border-color: oklch(var(--cta));
}

.focus\:bg-accent:focus {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.focus\:text-accent-foreground:focus {
	color: oklch(var(--accent-foreground));
}

.focus\:outline-none:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.focus\:ring-2:focus {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-\[oklch\(var\(--cta\)\/0\.3\)\]:focus {
	--tw-ring-color: oklch(var(--cta)/0.3);
}

.focus\:ring-ring:focus {
	--tw-ring-opacity: 1;
	--tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}

.focus\:ring-offset-2:focus {
	--tw-ring-offset-width: 2px;
}

.focus-visible\:z-10:focus-visible {
	z-index: 10;
}

.focus-visible\:border-ring:focus-visible {
	--tw-border-opacity: 1;
	border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}

.focus-visible\:bg-accent\/40:focus-visible {
	background-color: oklch(var(--accent) / 0.4);
}

.focus-visible\:outline-none:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.focus-visible\:outline-1:focus-visible {
	outline-width: 1px;
}

.focus-visible\:outline-ring:focus-visible {
	outline-color: oklch(var(--ring) / 1);
}

.focus-visible\:ring-1:focus-visible {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-2:focus-visible {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-4:focus-visible {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-\[3px\]:focus-visible {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-inset:focus-visible {
	--tw-ring-inset: inset;
}

.focus-visible\:ring-destructive:focus-visible {
	--tw-ring-opacity: 1;
	--tw-ring-color: oklch(var(--destructive) / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-destructive\/20:focus-visible {
	--tw-ring-color: oklch(var(--destructive) / 0.2);
}

.focus-visible\:ring-primary:focus-visible {
	--tw-ring-opacity: 1;
	--tw-ring-color: oklch(var(--primary) / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-ring:focus-visible {
	--tw-ring-opacity: 1;
	--tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-ring\/50:focus-visible {
	--tw-ring-color: oklch(var(--ring) / 0.5);
}

.focus-visible\:ring-offset-1:focus-visible {
	--tw-ring-offset-width: 1px;
}

.focus-visible\:ring-offset-2:focus-visible {
	--tw-ring-offset-width: 2px;
}

.focus-visible\:ring-offset-background:focus-visible {
	--tw-ring-offset-color: oklch(var(--background));
}

.active\:scale-\[0\.98\]:active {
	--tw-scale-x: 0.98;
	--tw-scale-y: 0.98;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:bg-sidebar-accent:active {
	background-color: oklch(var(--sidebar-accent));
}

.active\:text-sidebar-accent-foreground:active {
	color: oklch(var(--sidebar-accent-foreground));
}

.disabled\:pointer-events-none:disabled {
	pointer-events: none;
}

.disabled\:cursor-not-allowed:disabled {
	cursor: not-allowed;
}

.disabled\:opacity-50:disabled {
	opacity: 0.5;
}

.disabled\:opacity-60:disabled {
	opacity: 0.6;
}

.disabled\:opacity-70:disabled {
	opacity: 0.7;
}

.disabled\:hover\:scale-100:hover:disabled {
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100 {
	opacity: 1;
}

.group:hover .group-hover\:translate-x-1 {
	--tw-translate-x: 0.25rem;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:text-foreground {
	color: oklch(var(--foreground));
}

.group\/menu-item:hover .group-hover\/menu-item\:opacity-100 {
	opacity: 1;
}

.group:hover .group-hover\:opacity-100 {
	opacity: 1;
}

.peer\/menu-button:hover ~ .peer-hover\/menu-button\:text-sidebar-accent-foreground {
	color: oklch(var(--sidebar-accent-foreground));
}

.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
	cursor: not-allowed;
}

.peer:disabled ~ .peer-disabled\:opacity-50 {
	opacity: 0.5;
}

.has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has(>svg) {
	grid-template-columns: calc(var(--spacing) * 4) 1fr;
}

.has-\[\>svg\]\:gap-x-3:has(>svg) {
	-moz-column-gap: 0.75rem;
	     column-gap: 0.75rem;
}

.has-\[\:checked\]\:border-primary:has(:checked) {
	--tw-border-opacity: 1;
	border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}

.has-\[\:checked\]\:bg-primary:has(:checked) {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.has-\[\>svg\]\:px-2\.5:has(>svg) {
	padding-left: 0.625rem;
	padding-right: 0.625rem;
}

.has-\[\>svg\]\:px-3:has(>svg) {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

.has-\[\>svg\]\:px-4:has(>svg) {
	padding-left: 1rem;
	padding-right: 1rem;
}

.has-\[\:checked\]\:text-primary-foreground:has(:checked) {
	color: oklch(var(--primary-foreground));
}

.aria-disabled\:pointer-events-none[aria-disabled="true"] {
	pointer-events: none;
}

.aria-disabled\:opacity-50[aria-disabled="true"] {
	opacity: 0.5;
}

.aria-selected\:text-muted-foreground[aria-selected="true"] {
	--tw-text-opacity: 1;
	color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
	pointer-events: none;
}

.data-\[disabled\]\:pointer-events-none[data-disabled] {
	pointer-events: none;
}

.data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction="bottom"] {
	left: 0px;
	right: 0px;
}

.data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction="left"] {
	top: 0px;
	bottom: 0px;
}

.data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction="right"] {
	top: 0px;
	bottom: 0px;
}

.data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction="top"] {
	left: 0px;
	right: 0px;
}

.data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction="bottom"] {
	bottom: 0px;
}

.data-\[vaul-drawer-direction\=left\]\:left-0[data-vaul-drawer-direction="left"] {
	left: 0px;
}

.data-\[vaul-drawer-direction\=right\]\:right-0[data-vaul-drawer-direction="right"] {
	right: 0px;
}

.data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction="top"] {
	top: 0px;
}

.data-\[active\=true\]\:z-10[data-active="true"] {
	z-index: 10;
}

.data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction="bottom"] {
	margin-top: 6rem;
}

.data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction="top"] {
	margin-bottom: 6rem;
}

.data-\[hidden\=true\]\:hidden[data-hidden="true"] {
	display: none;
}

.data-\[orientation\=horizontal\]\:h-1\.5[data-orientation="horizontal"] {
	height: 0.375rem;
}

.data-\[orientation\=horizontal\]\:h-full[data-orientation="horizontal"] {
	height: 100%;
}

.data-\[orientation\=horizontal\]\:h-px[data-orientation="horizontal"] {
	height: 1px;
}

.data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] {
	height: 100%;
}

.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
	height: 1px;
}

.data-\[size\=default\]\:h-9[data-size="default"] {
	height: 2.25rem;
}

.data-\[size\=sm\]\:h-8[data-size="sm"] {
	height: 2rem;
}

.data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction="bottom"] {
	max-height: 80vh;
}

.data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction="top"] {
	max-height: 80vh;
}

.data-\[orientation\=vertical\]\:min-h-44[data-orientation="vertical"] {
	min-height: 11rem;
}

.data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"] {
	width: 100%;
}

.data-\[orientation\=vertical\]\:w-1\.5[data-orientation="vertical"] {
	width: 0.375rem;
}

.data-\[orientation\=vertical\]\:w-auto[data-orientation="vertical"] {
	width: auto;
}

.data-\[orientation\=vertical\]\:w-full[data-orientation="vertical"] {
	width: 100%;
}

.data-\[orientation\=vertical\]\:w-px[data-orientation="vertical"] {
	width: 1px;
}

.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
	width: 100%;
}

.data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction="left"] {
	width: 75%;
}

.data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction="right"] {
	width: 75%;
}

.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
	--tw-translate-y: 0.25rem;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
	--tw-translate-x: -0.25rem;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=right\]\:translate-x-1[data-side="right"] {
	--tw-translate-x: 0.25rem;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
	--tw-translate-y: -0.25rem;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state="checked"] {
	--tw-translate-x: calc(100% - 2px);
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
	--tw-translate-x: 0px;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes accordion-up {

	from {
		height: var(--radix-accordion-content-height);
	}

	to {
		height: 0;
	}
}

.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
	animation: accordion-up 0.2s ease-out;
}

@keyframes accordion-down {

	from {
		height: 0;
	}

	to {
		height: var(--radix-accordion-content-height);
	}
}

.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
	animation: accordion-down 0.2s ease-out;
}

.data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] {
	flex-direction: column;
}

.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
	flex-direction: column;
}

.data-\[range-end\=true\]\:rounded-md[data-range-end="true"] {
	border-radius: calc(var(--radius) - 2px);
}

.data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"] {
	border-radius: 0px;
}

.data-\[range-start\=true\]\:rounded-md[data-range-start="true"] {
	border-radius: calc(var(--radius) - 2px);
}

.data-\[selected\=true\]\:rounded-none[data-selected="true"] {
	border-radius: 0px;
}

.data-\[range-end\=true\]\:rounded-r-md[data-range-end="true"] {
	border-top-right-radius: calc(var(--radius) - 2px);
	border-bottom-right-radius: calc(var(--radius) - 2px);
}

.data-\[range-start\=true\]\:rounded-l-md[data-range-start="true"] {
	border-top-left-radius: calc(var(--radius) - 2px);
	border-bottom-left-radius: calc(var(--radius) - 2px);
}

.data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction="bottom"] {
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
}

.data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction="top"] {
	border-bottom-right-radius: var(--radius);
	border-bottom-left-radius: var(--radius);
}

.data-\[variant\=outline\]\:border-l-0[data-variant="outline"] {
	border-left-width: 0px;
}

.data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction="bottom"] {
	border-top-width: 1px;
}

.data-\[vaul-drawer-direction\=left\]\:border-r[data-vaul-drawer-direction="left"] {
	border-right-width: 1px;
}

.data-\[vaul-drawer-direction\=right\]\:border-l[data-vaul-drawer-direction="right"] {
	border-left-width: 1px;
}

.data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction="top"] {
	border-bottom-width: 1px;
}

.data-\[active\=true\]\:border-ring[data-active="true"] {
	--tw-border-opacity: 1;
	border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}

.data-\[state\=checked\]\:border-primary[data-state="checked"] {
	--tw-border-opacity: 1;
	border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}

.data-\[active\=true\]\:bg-accent\/50[data-active="true"] {
	background-color: oklch(var(--accent) / 0.5);
}

.data-\[active\=true\]\:bg-sidebar-accent[data-active="true"] {
	background-color: oklch(var(--sidebar-accent));
}

.data-\[range-end\=true\]\:bg-primary[data-range-end="true"] {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[range-middle\=true\]\:bg-accent[data-range-middle="true"] {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[range-start\=true\]\:bg-primary[data-range-start="true"] {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[selected-single\=true\]\:bg-primary[data-selected-single="true"] {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[selected\=true\]\:bg-accent[data-selected="true"] {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=active\]\:bg-background[data-state="active"] {
	background-color: oklch(var(--background));
}

.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[state\=on\]\:bg-accent[data-state="on"] {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:bg-accent[data-state="open"] {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
	background-color: oklch(var(--accent) / 0.5);
}

.data-\[state\=open\]\:bg-secondary[data-state="open"] {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}

.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}

.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
	background-color: oklch(var(--input));
}

.data-\[inset\]\:pl-8[data-inset] {
	padding-left: 2rem;
}

.data-\[active\=true\]\:font-medium[data-active="true"] {
	font-weight: 500;
}

.data-\[active\=true\]\:text-accent-foreground[data-active="true"] {
	color: oklch(var(--accent-foreground));
}

.data-\[active\=true\]\:text-sidebar-accent-foreground[data-active="true"] {
	color: oklch(var(--sidebar-accent-foreground));
}

.data-\[error\=true\]\:text-destructive[data-error="true"] {
	--tw-text-opacity: 1;
	color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
	--tw-text-opacity: 1;
	color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.data-\[range-end\=true\]\:text-primary-foreground[data-range-end="true"] {
	color: oklch(var(--primary-foreground));
}

.data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle="true"] {
	color: oklch(var(--accent-foreground));
}

.data-\[range-start\=true\]\:text-primary-foreground[data-range-start="true"] {
	color: oklch(var(--primary-foreground));
}

.data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single="true"] {
	color: oklch(var(--primary-foreground));
}

.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
	color: oklch(var(--accent-foreground));
}

.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
	color: oklch(var(--primary-foreground));
}

.data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
	color: oklch(var(--accent-foreground));
}

.data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
	color: oklch(var(--accent-foreground));
}

.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
	--tw-text-opacity: 1;
	color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"] {
	--tw-text-opacity: 1;
	color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
	opacity: 0.5;
}

.data-\[disabled\]\:opacity-50[data-disabled] {
	opacity: 0.5;
}

.data-\[state\=open\]\:opacity-100[data-state="open"] {
	opacity: 1;
}

.data-\[state\=active\]\:shadow-sm[data-state="active"] {
	--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.data-\[active\=true\]\:ring-\[3px\][data-active="true"] {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.data-\[active\=true\]\:ring-ring\/50[data-active="true"] {
	--tw-ring-color: oklch(var(--ring) / 0.5);
}

.data-\[state\=closed\]\:duration-300[data-state="closed"] {
	transition-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"] {
	transition-duration: 500ms;
}

.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"] {
	animation-name: enter;
	animation-duration: 150ms;
	--tw-enter-opacity: initial;
	--tw-enter-scale: initial;
	--tw-enter-rotate: initial;
	--tw-enter-translate-x: initial;
	--tw-enter-translate-y: initial;
}

.data-\[state\=open\]\:animate-in[data-state="open"] {
	animation-name: enter;
	animation-duration: 150ms;
	--tw-enter-opacity: initial;
	--tw-enter-scale: initial;
	--tw-enter-rotate: initial;
	--tw-enter-translate-x: initial;
	--tw-enter-translate-y: initial;
}

.data-\[state\=visible\]\:animate-in[data-state="visible"] {
	animation-name: enter;
	animation-duration: 150ms;
	--tw-enter-opacity: initial;
	--tw-enter-scale: initial;
	--tw-enter-rotate: initial;
	--tw-enter-translate-x: initial;
	--tw-enter-translate-y: initial;
}

.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"] {
	animation-name: exit;
	animation-duration: 150ms;
	--tw-exit-opacity: initial;
	--tw-exit-scale: initial;
	--tw-exit-rotate: initial;
	--tw-exit-translate-x: initial;
	--tw-exit-translate-y: initial;
}

.data-\[state\=closed\]\:animate-out[data-state="closed"] {
	animation-name: exit;
	animation-duration: 150ms;
	--tw-exit-opacity: initial;
	--tw-exit-scale: initial;
	--tw-exit-rotate: initial;
	--tw-exit-translate-x: initial;
	--tw-exit-translate-y: initial;
}

.data-\[state\=hidden\]\:animate-out[data-state="hidden"] {
	animation-name: exit;
	animation-duration: 150ms;
	--tw-exit-opacity: initial;
	--tw-exit-scale: initial;
	--tw-exit-rotate: initial;
	--tw-exit-translate-x: initial;
	--tw-exit-translate-y: initial;
}

.data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"] {
	--tw-enter-opacity: 0;
}

.data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"] {
	--tw-exit-opacity: 0;
}

.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
	--tw-exit-opacity: 0;
}

.data-\[state\=hidden\]\:fade-out[data-state="hidden"] {
	--tw-exit-opacity: 0;
}

.data-\[state\=open\]\:fade-in-0[data-state="open"] {
	--tw-enter-opacity: 0;
}

.data-\[state\=visible\]\:fade-in[data-state="visible"] {
	--tw-enter-opacity: 0;
}

.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
	--tw-exit-scale: .95;
}

.data-\[state\=open\]\:zoom-in-90[data-state="open"] {
	--tw-enter-scale: .9;
}

.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
	--tw-enter-scale: .95;
}

.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"] {
	--tw-enter-translate-x: 13rem;
}

.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"] {
	--tw-enter-translate-x: -13rem;
}

.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"] {
	--tw-exit-translate-x: 13rem;
}

.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"] {
	--tw-exit-translate-x: -13rem;
}

.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
	--tw-enter-translate-y: -0.5rem;
}

.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
	--tw-enter-translate-x: 0.5rem;
}

.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
	--tw-enter-translate-x: -0.5rem;
}

.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
	--tw-enter-translate-y: 0.5rem;
}

.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
	--tw-exit-translate-y: 100%;
}

.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
	--tw-exit-translate-x: -100%;
}

.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
	--tw-exit-translate-x: 100%;
}

.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
	--tw-exit-translate-y: -100%;
}

.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
	--tw-enter-translate-y: 100%;
}

.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
	--tw-enter-translate-x: -100%;
}

.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
	--tw-enter-translate-x: 100%;
}

.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
	--tw-enter-translate-y: -100%;
}

.data-\[state\=closed\]\:duration-300[data-state="closed"] {
	animation-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"] {
	animation-duration: 500ms;
}

.\*\:data-\[slot\=select-value\]\:line-clamp-1[data-slot="select-value"] > * {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.\*\:data-\[slot\=select-value\]\:flex[data-slot="select-value"] > * {
	display: flex;
}

.\*\:data-\[slot\=select-value\]\:items-center[data-slot="select-value"] > * {
	align-items: center;
}

.\*\:data-\[slot\=select-value\]\:gap-2[data-slot="select-value"] > * {
	gap: 0.5rem;
}

.\*\:data-\[slot\=alert-description\]\:text-destructive\/90[data-slot="alert-description"] > * {
	color: oklch(var(--destructive) / 0.9);
}

.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after {
	content: var(--tw-content);
	left: 0px;
}

.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after {
	content: var(--tw-content);
	height: 0.25rem;
}

.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after {
	content: var(--tw-content);
	width: 100%;
}

.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after {
	content: var(--tw-content);
	--tw-translate-y: -50%;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after {
	content: var(--tw-content);
	--tw-translate-x: 0px;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[variant\=outline\]\:first\:border-l:first-child[data-variant="outline"] {
	border-left-width: 1px;
}

.data-\[active\=true\]\:hover\:bg-accent:hover[data-active="true"] {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"] {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:hover\:bg-sidebar-accent:hover[data-state="open"] {
	background-color: oklch(var(--sidebar-accent));
}

.data-\[state\=open\]\:hover\:text-sidebar-accent-foreground:hover[data-state="open"] {
	color: oklch(var(--sidebar-accent-foreground));
}

.data-\[active\=true\]\:focus\:bg-accent:focus[data-active="true"] {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"] {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[variant\=destructive\]\:focus\:bg-destructive\/10:focus[data-variant="destructive"] {
	background-color: oklch(var(--destructive) / 0.1);
}

.data-\[variant\=destructive\]\:focus\:text-destructive:focus[data-variant="destructive"] {
	--tw-text-opacity: 1;
	color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.group[data-disabled="true"] .group-data-\[disabled\=true\]\:pointer-events-none {
	pointer-events: none;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:relative {
	position: relative;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\] {
	left: calc(var(--sidebar-width) * -1);
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\] {
	right: calc(var(--sidebar-width) * -1);
}

.group[data-side="left"] .group-data-\[side\=left\]\:-right-4 {
	right: -1rem;
}

.group[data-side="right"] .group-data-\[side\=right\]\:left-0 {
	left: 0px;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:top-full {
	top: 100%;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:z-10 {
	z-index: 10;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:-mt-8 {
	margin-top: -2rem;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:mt-1\.5 {
	margin-top: 0.375rem;
}

.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block {
	display: block;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:hidden {
	display: none;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\)\] {
	width: calc(var(--sidebar-width-icon) + (--spacing(4)));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\] {
	width: calc(var(--sidebar-width-icon) + (--spacing(4)) + 2px);
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0 {
	width: 0px;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:translate-x-0 {
	--tw-translate-x: 0px;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-side="right"] .group-data-\[side\=right\]\:rotate-180 {
	--tw-rotate: 180deg;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-state="open"] .group-data-\[state\=open\]\:rotate-180 {
	--tw-rotate: 180deg;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
	overflow: hidden;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:overflow-hidden {
	overflow: hidden;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:rounded-lg {
	border-radius: var(--radius);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:rounded-md {
	border-radius: calc(var(--radius) - 2px);
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border {
	border-width: 1px;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:border {
	border-width: 1px;
}

.group[data-side="left"] .group-data-\[side\=left\]\:border-r {
	border-right-width: 1px;
}

.group[data-side="right"] .group-data-\[side\=right\]\:border-l {
	border-left-width: 1px;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:border-ring {
	--tw-border-opacity: 1;
	border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border-sidebar-border {
	border-color: oklch(var(--sidebar-border));
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:bg-popover {
	background-color: oklch(var(--popover));
}

.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center {
	text-align: center;
}

.group\/drawer-content[data-vaul-drawer-direction="top"] .group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center {
	text-align: center;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:text-popover-foreground {
	color: oklch(var(--popover-foreground));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:opacity-0 {
	opacity: 0;
}

.group[data-disabled="true"] .group-data-\[disabled\=true\]\:opacity-50 {
	opacity: 0.5;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:shadow-sm {
	--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:shadow {
	--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-\[3px\] {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-ring\/50 {
	--tw-ring-color: oklch(var(--ring) / 0.5);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:duration-200 {
	transition-duration: 200ms;
	animation-duration: 200ms;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:after\:left-full::after {
	content: var(--tw-content);
	left: 100%;
}

.group[data-collapsible="offcanvas"] .hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar:hover {
	background-color: oklch(var(--sidebar));
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:animate-in[data-state="open"] {
	animation-name: enter;
	animation-duration: 150ms;
	--tw-enter-opacity: initial;
	--tw-enter-scale: initial;
	--tw-enter-rotate: initial;
	--tw-enter-translate-x: initial;
	--tw-enter-translate-y: initial;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:animate-out[data-state="closed"] {
	animation-name: exit;
	animation-duration: 150ms;
	--tw-exit-opacity: initial;
	--tw-exit-scale: initial;
	--tw-exit-rotate: initial;
	--tw-exit-translate-x: initial;
	--tw-exit-translate-y: initial;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
	--tw-exit-opacity: 0;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:fade-in-0[data-state="open"] {
	--tw-enter-opacity: 0;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
	--tw-exit-scale: .95;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:zoom-in-95[data-state="open"] {
	--tw-enter-scale: .95;
}

.peer\/menu-button[data-size="default"] ~ .peer-data-\[size\=default\]\/menu-button\:top-1\.5 {
	top: 0.375rem;
}

.peer\/menu-button[data-size="lg"] ~ .peer-data-\[size\=lg\]\/menu-button\:top-2\.5 {
	top: 0.625rem;
}

.peer\/menu-button[data-size="sm"] ~ .peer-data-\[size\=sm\]\/menu-button\:top-1 {
	top: 0.25rem;
}

.peer\/menu-button[data-active="true"] ~ .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground {
	color: oklch(var(--sidebar-accent-foreground));
}

.dark\:border-input:is(.dark *) {
	border-color: oklch(var(--input));
}

.dark\:bg-destructive\/60:is(.dark *) {
	background-color: oklch(var(--destructive) / 0.6);
}

.dark\:text-amber-300:is(.dark *) {
	--tw-text-opacity: 1;
	color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-300:is(.dark *) {
	--tw-text-opacity: 1;
	color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-400:is(.dark *) {
	--tw-text-opacity: 1;
	color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}

.dark\:text-muted-foreground:is(.dark *) {
	--tw-text-opacity: 1;
	color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.dark\:text-rose-300:is(.dark *) {
	--tw-text-opacity: 1;
	color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}

.dark\:text-rose-400:is(.dark *) {
	--tw-text-opacity: 1;
	color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}

.dark\:hover\:bg-accent\/50:hover:is(.dark *) {
	background-color: oklch(var(--accent) / 0.5);
}

.dark\:hover\:text-accent-foreground:hover:is(.dark *) {
	color: oklch(var(--accent-foreground));
}

.dark\:focus-visible\:ring-destructive\/40:focus-visible:is(.dark *) {
	--tw-ring-color: oklch(var(--destructive) / 0.4);
}

.dark\:data-\[state\=active\]\:border-input[data-state="active"]:is(.dark *) {
	border-color: oklch(var(--input));
}

.dark\:data-\[state\=checked\]\:bg-primary[data-state="checked"]:is(.dark *) {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.dark\:data-\[state\=checked\]\:bg-primary-foreground[data-state="checked"]:is(.dark *) {
	background-color: oklch(var(--primary-foreground));
}

.dark\:data-\[state\=unchecked\]\:bg-foreground[data-state="unchecked"]:is(.dark *) {
	background-color: oklch(var(--foreground));
}

.dark\:data-\[state\=active\]\:text-foreground[data-state="active"]:is(.dark *) {
	color: oklch(var(--foreground));
}

.dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:focus[data-variant="destructive"]:is(.dark *) {
	background-color: oklch(var(--destructive) / 0.2);
}

@media (min-width: 640px) {

	.sm\:mb-8 {
		margin-bottom: 2rem;
	}

	.sm\:block {
		display: block;
	}

	.sm\:inline {
		display: inline;
	}

	.sm\:flex {
		display: flex;
	}

	.sm\:hidden {
		display: none;
	}

	.sm\:h-10 {
		height: 2.5rem;
	}

	.sm\:h-20 {
		height: 5rem;
	}

	.sm\:h-24 {
		height: 6rem;
	}

	.sm\:h-64 {
		height: 16rem;
	}

	.sm\:w-10 {
		width: 2.5rem;
	}

	.sm\:w-20 {
		width: 5rem;
	}

	.sm\:w-24 {
		width: 6rem;
	}

	.sm\:w-64 {
		width: 16rem;
	}

	.sm\:w-auto {
		width: auto;
	}

	.sm\:max-w-lg {
		max-width: 32rem;
	}

	.sm\:max-w-sm {
		max-width: 24rem;
	}

	.sm\:flex-none {
		flex: none;
	}

	.sm\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sm\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sm\:grid-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.sm\:flex-row {
		flex-direction: row;
	}

	.sm\:items-end {
		align-items: flex-end;
	}

	.sm\:items-center {
		align-items: center;
	}

	.sm\:justify-end {
		justify-content: flex-end;
	}

	.sm\:justify-between {
		justify-content: space-between;
	}

	.sm\:gap-2 {
		gap: 0.5rem;
	}

	.sm\:gap-2\.5 {
		gap: 0.625rem;
	}

	.sm\:gap-3 {
		gap: 0.75rem;
	}

	.sm\:gap-4 {
		gap: 1rem;
	}

	.sm\:p-4 {
		padding: 1rem;
	}

	.sm\:p-5 {
		padding: 1.25rem;
	}

	.sm\:px-3 {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}

	.sm\:px-4 {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.sm\:px-6 {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.sm\:px-9 {
		padding-left: 2.25rem;
		padding-right: 2.25rem;
	}

	.sm\:py-1\.5 {
		padding-top: 0.375rem;
		padding-bottom: 0.375rem;
	}

	.sm\:py-11 {
		padding-top: 2.75rem;
		padding-bottom: 2.75rem;
	}

	.sm\:py-2\.5 {
		padding-top: 0.625rem;
		padding-bottom: 0.625rem;
	}

	.sm\:pl-2\.5 {
		padding-left: 0.625rem;
	}

	.sm\:pr-2\.5 {
		padding-right: 0.625rem;
	}

	.sm\:text-left {
		text-align: left;
	}

	.sm\:text-3xl {
		font-size: 1.875rem;
		line-height: 2.25rem;
	}

	.sm\:text-4xl {
		font-size: 2.25rem;
		line-height: 2.5rem;
	}

	.sm\:text-5xl {
		font-size: 3rem;
		line-height: 1;
	}

	.sm\:text-base {
		font-size: 1rem;
		line-height: 1.5rem;
	}

	.sm\:text-lg {
		font-size: 1.125rem;
		line-height: 1.75rem;
	}

	.sm\:text-sm {
		font-size: 0.875rem;
		line-height: 1.25rem;
	}

	.sm\:text-xs {
		font-size: 0.75rem;
		line-height: 1rem;
	}

	.sm\:font-medium {
		font-weight: 500;
	}

	.sm\:text-muted-foreground {
		--tw-text-opacity: 1;
		color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
	}

	.data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction="left"] {
		max-width: 24rem;
	}

	.data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction="right"] {
		max-width: 24rem;
	}
}

@media (min-width: 768px) {

	.md\:absolute {
		position: absolute;
	}

	.md\:block {
		display: block;
	}

	.md\:flex {
		display: flex;
	}

	.md\:h-24 {
		height: 6rem;
	}

	.md\:h-80 {
		height: 20rem;
	}

	.md\:w-24 {
		width: 6rem;
	}

	.md\:w-80 {
		width: 20rem;
	}

	.md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
		width: var(--radix-navigation-menu-viewport-width);
	}

	.md\:w-auto {
		width: auto;
	}

	.md\:max-w-2xl {
		max-width: 42rem;
	}

	.md\:flex-row {
		flex-direction: row;
	}

	.md\:items-start {
		align-items: flex-start;
	}

	.md\:justify-between {
		justify-content: space-between;
	}

	.md\:gap-1\.5 {
		gap: 0.375rem;
	}

	.md\:px-7 {
		padding-left: 1.75rem;
		padding-right: 1.75rem;
	}

	.md\:py-3 {
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}

	.md\:text-left {
		text-align: left;
	}

	.md\:text-5xl {
		font-size: 3rem;
		line-height: 1;
	}

	.md\:text-6xl {
		font-size: 3.75rem;
		line-height: 1;
	}

	.md\:text-sm {
		font-size: 0.875rem;
		line-height: 1.25rem;
	}

	.md\:opacity-0 {
		opacity: 0;
	}

	.md\:after\:hidden::after {
		content: var(--tw-content);
		display: none;
	}

	.peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:m-2 {
		margin: 0.5rem;
	}

	.peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:ml-0 {
		margin-left: 0px;
	}

	.peer[data-variant="inset"][data-state="collapsed"] ~ .md\:peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:ml-2 {
		margin-left: 0.5rem;
	}

	.peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:rounded-xl {
		border-radius: 0.75rem;
	}

	.peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:shadow-sm {
		--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
		--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	}
}

@media (min-width: 1024px) {

	.lg\:col-span-2 {
		grid-column: span 2 / span 2;
	}

	.lg\:max-w-4xl {
		max-width: 56rem;
	}

	.lg\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.lg\:grid-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.lg\:px-8 {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

@media (min-width: 1280px) {

	.xl\:max-w-6xl {
		max-width: 72rem;
	}
}

.\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected=true] button {
	border-top-left-radius: calc(var(--radius) - 2px);
	border-bottom-left-radius: calc(var(--radius) - 2px);
}

.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
	padding-right: 0px;
}

.\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected=true] button {
	border-top-right-radius: calc(var(--radius) - 2px);
	border-bottom-right-radius: calc(var(--radius) - 2px);
}

.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] {
	--tw-translate-y: 2px;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\>button\]\:hidden>button {
	display: none;
}

.\[\&\>span\:last-child\]\:truncate>span:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.\[\&\>span\]\:text-xs>span {
	font-size: 0.75rem;
	line-height: 1rem;
}

.\[\&\>span\]\:opacity-70>span {
	opacity: 0.7;
}

.\[\&\>svg\]\:pointer-events-none>svg {
	pointer-events: none;
}

.\[\&\>svg\]\:size-3>svg {
	width: 0.75rem;
	height: 0.75rem;
}

.\[\&\>svg\]\:size-3\.5>svg {
	width: 0.875rem;
	height: 0.875rem;
}

.\[\&\>svg\]\:size-4>svg {
	width: 1rem;
	height: 1rem;
}

.\[\&\>svg\]\:h-2\.5>svg {
	height: 0.625rem;
}

.\[\&\>svg\]\:h-3>svg {
	height: 0.75rem;
}

.\[\&\>svg\]\:w-2\.5>svg {
	width: 0.625rem;
}

.\[\&\>svg\]\:w-3>svg {
	width: 0.75rem;
}

.\[\&\>svg\]\:shrink-0>svg {
	flex-shrink: 0;
}

.\[\&\>svg\]\:translate-y-0\.5>svg {
	--tw-translate-y: 0.125rem;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\>svg\]\:text-current>svg {
	color: currentColor;
}

.\[\&\>svg\]\:text-muted-foreground>svg {
	--tw-text-opacity: 1;
	color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.\[\&\>svg\]\:text-sidebar-accent-foreground>svg {
	color: oklch(var(--sidebar-accent-foreground));
}

.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
	border-bottom-width: 0px;
}

.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div {
	--tw-rotate: 90deg;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
	--tw-rotate: 180deg;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text {
	fill: oklch(var(--muted-foreground) / 1);
}

.\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor {
	stroke: oklch(var(--border));
}

.\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke='#fff'] {
	stroke: transparent;
}

.\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke='#ccc'] {
	stroke: oklch(var(--border));
}

.\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector {
	fill: oklch(var(--muted) / 1);
}

.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
	fill: oklch(var(--muted) / 1);
}

.\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke='#ccc'] {
	stroke: oklch(var(--border));
}

.\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke='#fff'] {
	stroke: transparent;
}

.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
}

.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
	font-size: 0.75rem;
	line-height: 1rem;
}

.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
	font-weight: 500;
}

.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
	--tw-text-opacity: 1;
	color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
	padding-top: 0px;
}

.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
	height: 1.25rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
	width: 1.25rem;
}

.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
	height: 3rem;
}

.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
	height: 1.25rem;
}

.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
	width: 1.25rem;
}

.\[\&_p\]\:leading-relaxed p {
	line-height: 1.625;
}

.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']) {
	width: 1rem;
	height: 1rem;
}

.\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*='text-']) {
	--tw-text-opacity: 1;
	color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.\[\&_svg\]\:pointer-events-none svg {
	pointer-events: none;
}

.\[\&_svg\]\:shrink-0 svg {
	flex-shrink: 0;
}

.\[\&_tr\:last-child\]\:border-0 tr:last-child {
	border-width: 0px;
}

.\[\&_tr\]\:border-b tr {
	border-bottom-width: 1px;
}

[data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
	right: -0.5rem;
}

[data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize {
	cursor: e-resize;
}

[data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 {
	left: -0.5rem;
}

[data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize {
	cursor: w-resize;
}

[data-slot=card-content] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent {
	background-color: transparent;
}

[data-slot=popover-content] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent {
	background-color: transparent;
}

a.\[a\&\]\:hover\:bg-accent:hover {
	--tw-bg-opacity: 1;
	background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

a.\[a\&\]\:hover\:bg-destructive\/90:hover {
	background-color: oklch(var(--destructive) / 0.9);
}

a.\[a\&\]\:hover\:bg-primary\/90:hover {
	background-color: oklch(var(--primary) / 0.9);
}

a.\[a\&\]\:hover\:bg-secondary\/90:hover {
	background-color: oklch(var(--secondary) / 0.9);
}

a.\[a\&\]\:hover\:text-accent-foreground:hover {
	color: oklch(var(--accent-foreground));
}