:root {
	--hetweer-keuze: 				#293592;
	--hetweer-gekozen: 				#1c85e1;
	--hetweer-gekozen-text: 		#FFF;
	--hetweer-icon: 				rgba(0,0,0,0.025);
	--chart-bg: 					#FFFFFF;
	--chart-line-color: 			#062535;
	--chart-axis-text: 				#000;
	--chart-axis-text-hover:		#1c85e1;
	--chart-axis-text-hidden:		#CCC;
	--chart-windstoot-fill: 		#FFF;
	--chart-windstoot-line: 		#CCC;
	--chart-grid-line: 				#CCC;

	--chart-tooltip-bg: 			rgba(255,255,255,0.97);
	--chart-tooltip-text: 			#000;

	--bg-webcam-switch: 			linear-gradient(to right, #1E88E5 0%, #283593 100%);
	--text-webcam-switch: 			#FFF;
}
@media (prefers-color-scheme: dark) {
	:root {
		--hetweer-keuze: 			#293592;
		--hetweer-gekozen: 			#FFF;
		--hetweer-gekozen-text: 	#000;
		--hetweer-icon: 			rgba(255,255,255,0.025);
		--chart-bg: 				#111111;
		--chart-line-color: 		#cbcbcb;
		--chart-axis-text: 			#cbcbcb;
		--chart-axis-text-hover:	#FFF;
		--chart-axis-text-hidden:	#CCC;
		--chart-windstoot-fill: 	#111;
		--chart-windstoot-line: 	#cbcbcb;
		--chart-grid-line: 			#2c2c2c;

		--chart-tooltip-bg: 		rgba(0,0,0,0.5);
		--chart-tooltip-text: 		#FFF;
		--bg-webcam-switch: 		#FFF;
		--text-webcam-switch: 		#000;
	}
}

.hetweer-keuze{
	background: var(--bg-footer);
	padding: 10px;
	border-radius: 10px;
	margin: 0 auto;
}
	.keuze-station,
	.keuze-periode{
		display: block;
		width: 100%;
		text-align: center;
		font-size: 16px;
		font-family: 'f_sb';
		margin: 10px 0 10px 0;
	}
		.keuze-periode-item,
		.keuze-station-item{
			display: inline-block;
			background: var(--bg);
			border-radius: 10px;
			font-size: 16px;
			padding: 0 10px;
			font-family: 'f_r';
			cursor: pointer;
			margin: 0 5px;
			&:hover{
				background: var(--hetweer-keuze);
				color: #FFF;
			}
			&:active{
				transform: translateY(2px);
			}
			&.gekozen{
				background: var(--hetweer-gekozen);
				color: var(--hetweer-gekozen-text);
			}
		}
	.keuze-dag,
	.keuze-maand{
		border-top: 1px solid var(--border);
		margin: 5px 0 0 0;
		padding: 5px 0 0 0;
		display: block;
		width: 100%;
		text-align: center;
		input, select, option{
			font-family: 'f_r';
			font-size: 16px;
			padding: 5px 10px;
			border-radius: 10px;
			background: #FFF;
		}
	}

.hetweer-gegevens-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12-koloms basis voor desktop */
    gap: 15px; /* Ruimte tussen de blokjes */
    margin-top: 10px;
    width: 100%;

    .hetweer-gegevens-item {
        background-color: var(--bg-footer);
        border-radius: 8px;
        padding: 15px;
        text-align: center;
        font-size: 36px;
        font-family: 'f_b';
        position: relative;
        overflow-x: hidden;
        overflow-y: hidden;
        min-height: 150px;
        grid-column: span 4; /* Standaard weergegevens: 3 per rij (12 / 4 = 3) */

        &.webcam {
            grid-column: span 3; /* Webcams: 4 per rij op desktop (12 / 3 = 4) */
            overflow: hidden;
            padding: 0;

            .legenda {
                position: absolute;
                top: 0;
                left: 0;
                font-size: 12px;
                padding: 5px 8px 5px 8px;
                border-bottom-right-radius: 5px;
                background: var(--bg-footer);
                line-height: normal;
            }

            .datum {
                position: absolute;
                bottom: 0;
                right: 0;
                font-size: 12px;
                padding: 5px 8px 5px 8px;
                border-top-left-radius: 5px;
                background: var(--bg-footer);
                line-height: normal;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .icon {
            position: absolute;
            top: 0;
            left: -10px;
            font-size: 100px;
            color: var(--hetweer-icon);

            img {
                opacity: 0.025;
                width: 100px;
                height: 100px;
            }
        }

        .label {
            font-size: 18px;
            font-family: 'f_sb';
            color: #64748b;
            margin-bottom: 8px;
            letter-spacing: 0.5px;
        }

        .sublabel {
            color: #94a3b8;
            margin-top: 6px;
            font-family: 'f_r';
            font-size: 14px;
        }

        .neerslag {
            color: #2471d9;
        }
    }
}

/* Responsive: op mobiel 1 of 2 blokjes naast elkaar */
@media (max-width: 1001px) {
    .hetweer-gegevens-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media all and (max-width: 1001px) {
    .hetweer-gegevens-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Maximaal 2 gelijke kolommen */
        gap: 8px; /* Ruimte tussen de blokjes */
        margin-top: 10px;
        width: 100%;

        .hetweer-gegevens-item,
        .hetweer-gegevens-item.webcam {
            grid-column: auto; /* Zorgt dat de desktop-spans op kleinere schermen worden gereset */
        }
    }
}


		



@media all and (max-width: 1001px){

	.icon{
    	position: absolute;
    	top: 0;
    	left: -10px;
    	font-size: 100px;
    	color: var(--hetweer-icon);

    	img{
    		opacity: 0.025;
    		width: 100px;
    		height: 100px;
    	}
    }

    .label {
		font-size: 14px !important;
	    font-family: 'f_sb';
	    color: #64748b;
	    margin-bottom: 3px;
	    letter-spacing: 0.5px;
	}

	.sublabel {
	    color: #94a3b8;
	    margin-top: 3px;
	    font-family: 'f_r';
	    font-size: 12px;
	}

	.neerslag{
		color: #2471d9;
	}

}

@media all and (max-width: 1000px){
	.verkort{
		display: none;
	}
	.hetweer-gegevens-item.webcam{
		order: 99;
	}
}
@media all and (min-width: 1001px){
	.verwijzing{
		display: none;
	}
}

@media all and (max-width: 501px){
	.hetweer-gegevens-grid{
		grid-template-columns: repeat(1, 1fr);
	}
}

@media all and (min-width: 601px){
    .hetweer-grafiek{
        width: calc(100% - 20px);
        max-width: 1000px;
        aspect-ratio: 4 / 2;
        margin: 20px 10px 20px 10px;
        z-index: 0;
    }
}
@media all and (max-width: 600px){
    .hetweer-grafiek{
        width: 100%;
        margin: 0;
        height: 350px;
    }
}
@media all and (max-width: 600px){
	.hetweer-keuze{
		padding: 6px;
	}
		.keuze-station,
		.keuze-periode{
			font-size: 14px;
			margin: 5px 0 5px 0;
		}
	.keuze-periode-item,
	.keuze-station-item{
		font-size: 14px;
		padding: 0 5px;
		margin: 0 2px;
	}
	.keuze-dag,
	.keuze-maand{
		border-top: 1px solid var(--border);
		margin: 5px 0 0 0;
		padding: 5px 0 0 0;

		input, select, option{
			font-family: 'f_r';
			font-size: 14px;
			padding: 5px 10px;
			border-radius: 10px;
			background: #FFF;
		}
	}

}
.hetweer-grafieken{
	margin-top: 10px;
	h2{
        background: var(--bg-contact);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        padding: 10px 0 !important;
	}
}
.highcharts-tooltip-container {
    z-index: 99999 !important;
}

.pagina-tekstvak.hetweer{
	padding: 0 !important;
	margin: 0 !important;
	.pagina-tekstvak-container{
		width: 100%;
		max-width: 1100px;
	}
}

.hetweer-btn{
	display: inline-block;
	padding: 5px 5px 5px 5px;
	border: 2px solid var(--text);
	background: var(--bg);
	border-radius: 10px;
	line-height: 0;
	position: relative;
	top: 2px;
	cursor: pointer;
	&:hover{
		background: var(--a-hover);
		color: var(--bg);
	}
	&:active{
		top: 4px;
	}
	&.disabled{
		opacity: 0.2;
		cursor: not-allowed;
	}
}

.keuze-maand select{
	background: var(--bg);
	color: var(--text);
}

.chart-tooltip td{
	color: var(--chart-tooltip-text);
	font-size: 14px;
}

div.hetweer-daggegevens-datum{
	width: 100%;
	max-width: 600px;
	margin: 20px auto;
	font-size: 24px;
	color: var(--text);
	font-family: 'f_sb'
}

div.hetweer-daggegevens{
	background: var(--bg-footer);
	border-radius: 10px;
	width: 100%;
	max-width: 600px;
	margin: 20px auto;
	position: relative;
	.kop{
		width: 100%;
		background: #293593;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		color: #FFF;
		font-family: 'f_sb';
		padding: 10px;
		font-size: 18px;
		box-sizing: border-box;
		line-height: normal;
		z-index: 100;
		img{
			filter: brightness(0) invert(1); 
			width:26px; 
			height:26px; 
			margin:-5px -3px -6px 0;
		}
	}
	.icon{
    	position: absolute;
    	top: 15px;
    	right: -10px;
    	font-size: 100px;
    	color: var(--hetweer-icon);
    	z-index: 50;

    	img{
    		opacity: 0.025;
    		width: 100px;
    		height: 100px;
    	}
    }
	table.hetweer-daggegevens{
		border-collapse: collapse;
		border-spacing: 0;
		width: 100%;
		padding-bottom: 10px;
		margin: 0 0 10px 0;
		tr{
			td:nth-child(1),
			td:nth-child(2){
				font-family: 'f_sb';
			}
			td:nth-child(3){
				font-family: 'f_l';
			}
			td{
				padding: 8px 5px;
				font-size: clamp(14px, 2vw, 18px);
				line-height: normal;
				vertical-align: top;
			}
			td:nth-child(1){
				padding-left: 15px;
			}
			td:nth-child(2){
				width: 105px;
				text-align: right;
			}
			td:nth-child(3){
				width: 105px;
				text-align: right;
				font-size: 14px;
				padding-right: 10px;
			}
		}
	}
}

select[name="hetweer-maandgegevens-keuze"]{
	&, option{
		font-family: 'f_r';
		font-size: 14px;
		padding: 5px 10px;
		border-radius: 10px;
		background: #FFF;
		margin-left: 10px;
	}
}

div.hetweer-maandgegevens-keuze{
	width: 100%;
	text-align: center;
	margin: 10px;
	font-size: 16px;
}

div.center{
	width: 100%;
	text-align: center;
}

table.hetweer-maandgegevens{
	border-collapse: collapse;
	border-spacing: 0;
	margin: 20px auto;
	tr{
		&:nth-of-type(odd){
			td{
				background: var(--bg-footer);
			}
		}
		&:nth-child(1){
			td{
				font-family: 'f_sb';
				background: #293593;
				color: #FFF;
				text-align: right;
			}
		}
		td{
			&:nth-child(1){
				text-align: right;
				padding-right: 10px;
				width: 105px;
			}
			line-height: normal;
			font-size: clamp(12px, 2vw, 16px);
			padding: 5px clamp(5px, 2vw, 10px);
			font-family: 'f_sb';
			text-align: right;
		}
	}
}

/* Klikbaar maken van de thumbnails */
.hetweer-gegevens-item.webcam {
    cursor: pointer;
}

/* Lightbox Modal Structuur */
.webcam-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-in-out;
}

.webcam-modal.active {
    opacity: 1;
    pointer-events: auto;
}

/* Donkere achtergrond met blur */
.webcam-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.webcam-modal-container {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Afbeelding op groot formaat */
.webcam-modal-body {
    max-width: 98svw;
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.webcam-modal-body img {
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Sluitknop rechtsboven */
.webcam-modal-close {
    position: absolute;
    top: 20px;
    right: 25px;
    background: var(--bg-surface);
    color: var(--text);
    border: 1px solid var(--border);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.webcam-modal-close:hover {
    background: var(--accent);
    color: var(--text-contrast);
    transform: scale(1.05);
}

/* Switcher balk onderin */
.webcam-modal-switcher {
    position: absolute;
    bottom: 25px;
    display: flex;
    gap: 8px;
    background: var(--bg-surface);
    padding: 6px;
    border-radius: 40px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.webcam-switch-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.webcam-switch-btn:hover {
    color: var(--text);
    background: var(--overlay);
}

.webcam-switch-btn.active {
    background: var(--bg-webcam-switch);
    color: var(--text-webcam-switch);
}