/* Koksijde Kenmerken - front-end styles */

.kbkm-widget {
	--kbkm-bg: #FFFFFF;
	--kbkm-accent: #1B3E54;
	--kbkm-btn: #1B3E54;
	--kbkm-btn-text: #FFFFFF;
	--kbkm-sand: #D8C298;

	max-width: 480px;
	background: var(--kbkm-bg);
	border: 1px solid var(--kbkm-sand);
	border-radius: 4px;
	padding: 26px;
	box-shadow: 0 12px 30px -14px rgba(27, 62, 84, 0.25);
	font-family: var(--kbkm-font-family, inherit);
	font-size: var(--kbkm-font-size, 16px);
}

.kbkm-header h3 {
	margin: 0 0 18px;
	color: var(--kbkm-accent);
	font-size: calc(var(--kbkm-font-size, 16px) * 1.2) !important;
}

.kbkm-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 18px;
	margin-bottom: 18px;
}

.kbkm-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.kbkm-icon {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--kbkm-accent);
	display: inline-flex;
}

.kbkm-icon svg {
	width: 100%;
	height: 100%;
}

.kbkm-icon img.kbkm-icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.kbkm-text {
	font-weight: var(--kbkm-text-weight, 600) !important;
	color: var(--kbkm-text, #26312F);
	font-size: calc(var(--kbkm-font-size, 16px) * 0.95) !important;
}

.kbkm-toggle-full {
	display: block;
	width: 100%;
	background: transparent;
	border: none;
	color: var(--kbkm-accent);
	font-weight: 700;
	font-size: calc(var(--kbkm-font-size, 16px) * 0.85) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	padding: 6px 0 16px;
	text-align: left;
}

.kbkm-toggle-full:hover {
	opacity: 0.75;
}

.kbkm-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: var(--kbkm-btn);
	color: var(--kbkm-btn-text);
	text-decoration: none;
	font-weight: 700;
	font-size: calc(var(--kbkm-font-size, 16px) * 0.95) !important;
	padding: 13px 20px;
	border-radius: 3px;
	transition: opacity 0.15s ease;
}

.kbkm-cta:hover {
	opacity: 0.88;
	color: var(--kbkm-btn-text);
}

.kbkm-config-error {
	color: #7a2e26;
	background: #fbeaea;
	border: 1px solid #e3b3ad;
	padding: 10px 14px;
	border-radius: 3px;
	font-size: 0.85rem;
}

/* ---------- lightbox ---------- */

.kbkm-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(27, 62, 84, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 100000;
}

.kbkm-modal-overlay[hidden] {
	display: none;
}

.kbkm-modal {
	background: #fff;
	border-radius: 4px;
	max-width: 520px;
	width: 100%;
	max-height: 80vh;
	overflow-y: auto;
	padding: 32px;
	position: relative;
	box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.4);
}

.kbkm-modal h3 {
	margin: 0 0 18px;
	color: #1B3E54;
}

.kbkm-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 50% !important;
	padding: 0 !important;
	margin: 0;
	font-size: 1.3rem !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	cursor: pointer;
	color: #8a9099 !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.kbkm-modal-close:hover {
	background: #F3E9D4 !important;
	color: #1B3E54 !important;
}

.kbkm-modal-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.kbkm-modal-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: calc(var(--kbkm-font-size, 16px) * 0.92) !important;
	color: var(--kbkm-text, #26312F);
	padding: 6px 0;
	border-bottom: 1px solid #F3E9D4;
}

.kbkm-icon-inline {
	flex: none;
	width: 18px;
	height: 18px;
}

.kbkm-modal-list li:last-child {
	border-bottom: none;
}

@media (max-width: 480px) {
	.kbkm-grid {
		grid-template-columns: 1fr;
	}
	.kbkm-widget {
		padding: 20px;
	}
}

/* ---------- [koksijde_kenmerken_balk] - simpele iconenrij, geen kader/knop ---------- */

.kbkm-balk {
	--kbkm-accent: #1B3E54;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 22px;
	font-family: var(--kbkm-font-family, inherit);
	font-size: var(--kbkm-font-size, 16px);
}

.kbkm-balk-item {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.kbkm-balk-item .kbkm-icon {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--kbkm-accent);
	display: inline-flex;
}

.kbkm-balk-item .kbkm-icon svg,
.kbkm-balk-item .kbkm-icon img {
	width: 100%;
	height: 100%;
}

.kbkm-balk-item .kbkm-text {
	font-weight: var(--kbkm-text-weight, 600) !important;
	font-size: calc(var(--kbkm-font-size, 16px) * 0.92) !important;
	color: var(--kbkm-text, #26312F);
}

@media (max-width: 600px) {
	.kbkm-balk {
		gap: 10px 18px;
		font-size: 0.92em;
	}
	.kbkm-balk-item .kbkm-icon {
		width: 17px;
		height: 17px;
	}
}

.kbkm-balk.kbkm-balk-grid {
	display: grid;
	grid-template-columns: repeat(var(--kbkm-balk-cols, 3), 1fr);
	gap: 10px 24px;
}

.kbkm-balk.kbkm-balk-grid .kbkm-balk-item {
	white-space: normal;
}

@media (max-width: 700px) {
	.kbkm-balk.kbkm-balk-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 420px) {
	.kbkm-balk.kbkm-balk-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- [koksijde_kenmerken_balk bron="alle"] gegroepeerd per categorie ---------- */

.kbkm-balk-grouped {
	--kbkm-accent: #1B3E54;
	display: flex;
	flex-direction: column;
	gap: 28px;
	font-family: var(--kbkm-font-family, inherit);
	font-size: var(--kbkm-font-size, 16px);
}

.kbkm-balk-group-title {
	margin: 0 0 14px;
	font-size: var(--kbkm-cat-font-size, 15px);
	font-family: var(--kbkm-cat-font-family, inherit);
	font-weight: var(--kbkm-cat-weight, 700);
	color: var(--kbkm-cat-color, var(--kbkm-accent));
}

.kbkm-balk-group .kbkm-balk {
	justify-content: flex-start;
}

/* ---------- [koksijde_kenmerken_balk weergave="ligging"] ---------- */

.kbkm-ligging-card {
	--kbkm-accent: #1B3E54;
	margin: 0;
	padding: 0;
	font-family: var(--kbkm-font-family, inherit);
	font-size: var(--kbkm-font-size, 16px);
}

.kbkm-ligging-header {
	margin: 0 0 14px;
}

.kbkm-ligging-header h3 {
	margin: 0 0 8px;
	color: var(--kbkm-accent);
	font-size: calc(var(--kbkm-font-size, 16px) * 1.25) !important;
}

.kbkm-ligging-adres,
.kbkm-ligging-tekst {
	margin: 0 0 6px;
	color: var(--kbkm-text, #26312F);
	font-size: calc(var(--kbkm-font-size, 16px) * 0.95) !important;
	line-height: 1.5;
}

.kbkm-ligging-adres {
	font-weight: 600;
}

.kbkm-ligging-list {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.kbkm-ligging-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 4px 0;
}

.kbkm-ligging-item .kbkm-icon {
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	color: var(--kbkm-accent);
	display: inline-flex;
}

.kbkm-ligging-item .kbkm-icon svg,
.kbkm-ligging-item .kbkm-icon img {
	width: 100%;
	height: 100%;
}

.kbkm-ligging-label {
	flex: 1 1 auto;
	font-family: var(--kbkm-font-family, inherit);
	font-weight: var(--kbkm-text-weight, 600) !important;
	color: var(--kbkm-text, #26312F);
	line-height: 1.4;
}

.kbkm-ligging-afstand {
	flex: none;
	white-space: nowrap;
	font-family: var(--kbkm-font-family, inherit);
	font-weight: var(--kbkm-text-weight, 600) !important;
	color: var(--kbkm-text, #26312F);
	text-align: right;
	padding-left: 12px;
	line-height: 1.4;
}

/* ---------- "Lees meer" op mobiel + (optioneel) desktop ---------- */

.kbkm-balk-outer {
	--kbkm-accent: #1B3E54;
}

.kbkm-balk-collapse {
	/* Standaard (desktop/tablet) onbeperkt - overschreven zodra
	   --kbkm-collapse-max-desktop is meegegeven (zie desktop_max_hoogte
	   shortcode-attribuut), of altijd op mobiel (media query hieronder). */
	max-height: var(--kbkm-collapse-max-desktop, none);
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.kbkm-balk-collapse.kbkm-balk-open {
	max-height: 3000px;
}

.kbkm-balk-toggle {
	display: none;
	background: none !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	-webkit-tap-highlight-color: transparent;
	color: var(--kbkm-lees-meer-kleur, var(--kbkm-accent));
	font-family: var(--kbkm-font-family, inherit);
	font-weight: 700;
	font-size: calc(var(--kbkm-font-size, 16px) * 0.9) !important;
	cursor: pointer;
	margin-top: 1.5em;
	padding: 4px 0;
	text-align: left;
}

.kbkm-balk-toggle:hover,
.kbkm-balk-toggle:focus,
.kbkm-balk-toggle:focus-visible,
.kbkm-balk-toggle:active {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	color: var(--kbkm-lees-meer-kleur, var(--kbkm-accent));
	opacity: 0.8;
}

/* Enkel getoond op desktop/tablet als desktop_max_hoogte is opgegeven
   (anders is er op die schermbreedtes niets om in/uit te klappen). */
.kbkm-balk-toggle.kbkm-balk-toggle-always {
	display: inline-block;
}

@media (max-width: 600px) {
	.kbkm-balk-collapse {
		max-height: var(--kbkm-collapse-max, 11.5em);
	}
	.kbkm-balk-toggle {
		display: inline-block;
	}
}