/**
 * Kimsoft events — frontend surface
 * Använder temats (--k-*) och Elementors globalfärger där det finns.
 */

.elementor-widget-kimsoft-events-list,
.elementor-widget-kimsoft-events-calendar,
.elementor-widget-kimsoft-events-filter,
.kimsoft-ev-filter-host {
	--kev-accent: var(--k-primary, #2563eb);
	--kev-accent-soft: color-mix(in srgb, var(--kev-accent) 22%, transparent);
	--kev-text: var(--k-text, #0f172a);
	--kev-muted: var(--k-muted, #64748b);
	--kev-surface: color-mix(in srgb, var(--k-muted, #64748b) 6%, var(--k-bg, #fff));
	--kev-card: color-mix(in srgb, var(--k-bg, #fff) 96%, var(--kev-text) 4%);
	--kev-line: color-mix(in srgb, var(--k-border, #e2e8f0) 55%, transparent);
	--kev-shadow: color-mix(in srgb, var(--kev-text) 14%, transparent);
	--kev-radius-lg: clamp(14px, 2.8vw, 20px);
	--kev-radius-md: 12px;
	--kev-radius-sm: 9px;
	--kev-font: var(--e-global-typography-text-font-family, var(--k-font, system-ui, sans-serif));
	font-family: var(--kev-font);
	color: var(--kev-text);
}

/* ========== List ========== */
.kimsoft-ev-list {
	max-width: 100%;
}

.kimsoft-ev-list .kimsoft-ev-list__ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 2.6vw, 20px);
}

.kimsoft-ev-row {
	--row-accent: var(--kev-accent);
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: stretch;
	min-width: 0;
	border-radius: var(--kev-radius-lg);
	overflow: clip;
	background:
		linear-gradient(
			122deg,
			color-mix(in srgb, var(--kev-text) 14%, transparent) 0%,
			transparent 38%,
			transparent 72%,
			color-mix(in srgb, var(--row-accent) 10%, transparent) 100%
		),
		linear-gradient(
			168deg,
			color-mix(in srgb, var(--kev-card) 94%, var(--row-accent) 6%) 0%,
			var(--kev-card) 52%,
			color-mix(in srgb, var(--kev-card) 90%, var(--row-accent) 10%) 100%
		);
	border: 1px solid color-mix(in srgb, var(--kev-line) 72%, var(--row-accent) 18%);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--kev-text) 7%, transparent),
		0 0 0 1px color-mix(in srgb, var(--row-accent) 6%, transparent),
		0 1px 2px color-mix(in srgb, var(--kev-shadow) 22%, transparent),
		0 16px 40px color-mix(in srgb, var(--kev-shadow) 14%, transparent);
	transition:
		transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.26s ease,
		border-color 0.26s ease;
	font-variant-numeric: tabular-nums;
}

.kimsoft-ev-row::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: linear-gradient(
		180deg,
		var(--row-accent) 0%,
		color-mix(in srgb, var(--row-accent) 52%, var(--kev-muted)) 100%
	);
	box-shadow: 2px 0 14px color-mix(in srgb, var(--row-accent) 22%, transparent);
	opacity: 0.95;
	pointer-events: none;
	z-index: 1;
}

.kimsoft-ev-row::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 0;
	background: linear-gradient(
		172deg,
		color-mix(in srgb, var(--kev-text) 11%, transparent) 0%,
		transparent 34%,
		transparent 74%,
		color-mix(in srgb, var(--row-accent) 7%, transparent) 120%
	);
	opacity: 0.58;
}

.kimsoft-ev-row:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--row-accent) 38%, var(--kev-line));
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--kev-text) 9%, transparent),
		0 0 0 1px color-mix(in srgb, var(--row-accent) 22%, transparent),
		0 10px 24px color-mix(in srgb, var(--kev-shadow) 16%, transparent),
		0 28px 64px color-mix(in srgb, var(--row-accent) 12%, transparent);
}

.kimsoft-ev-row:focus-within {
	border-color: color-mix(in srgb, var(--row-accent) 42%, var(--kev-line));
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--kev-text) 9%, transparent),
		0 0 0 1px color-mix(in srgb, var(--row-accent) 22%, transparent),
		0 0 0 3px color-mix(in srgb, var(--row-accent) 22%, transparent),
		0 16px 40px color-mix(in srgb, var(--kev-shadow) 14%, transparent);
}

.kimsoft-ev-row > * {
	position: relative;
	z-index: 2;
}

.kimsoft-ev-row__thumb {
	flex-shrink: 0;
	display: flex;
	align-items: stretch;
	padding: 11px 0 11px 14px;
}

.kimsoft-ev-row__thumb img {
	display: block;
	width: clamp(88px, 21vw, 124px);
	aspect-ratio: 1;
	height: auto;
	object-fit: cover;
	border-radius: calc(var(--kev-radius-md) + 1px);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--row-accent) 16%, transparent),
		0 0 0 1px color-mix(in srgb, var(--kev-text) 6%, transparent) inset,
		0 12px 36px color-mix(in srgb, var(--kev-shadow) 22%, transparent);
}

.kimsoft-ev-row__body {
	display: grid;
	grid-template-columns: minmax(0, min(44%, 12.5rem)) minmax(0, 1fr);
	gap: 0.5rem clamp(12px, 2.8vw, 1.35rem);
	padding: clamp(15px, 3.2vw, 20px) clamp(14px, 3vw, 22px)
		clamp(15px, 3.2vw, 20px) clamp(12px, 2.6vw, 16px);
	align-items: center;
	flex: 1;
	min-width: 0;
}

.kimsoft-ev-row--has-thumb .kimsoft-ev-row__body {
	padding-inline-start: clamp(8px, 2vw, 12px);
}

.kimsoft-ev-row__when {
	display: inline-flex;
	align-self: center;
	justify-self: start;
	max-width: 100%;
	padding: 0.32rem 0.72rem;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.3;
	word-break: break-word;
	color: color-mix(in srgb, var(--row-accent) 8%, var(--kev-text));
	background: linear-gradient(
		165deg,
		color-mix(in srgb, var(--row-accent) 14%, var(--kev-surface)) 0%,
		color-mix(in srgb, var(--kev-card) 88%, var(--row-accent) 12%) 100%
	);
	border: 1px solid color-mix(in srgb, var(--row-accent) 26%, var(--kev-line));
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--kev-text) 5%, transparent),
		0 2px 8px color-mix(in srgb, var(--row-accent) 8%, transparent);
}

.kimsoft-ev-row__title {
	grid-column: 2 / -1;
	grid-row: 1;
	font-weight: 700;
	font-size: clamp(1rem, 1.65vw + 0.52rem, 1.14rem);
	line-height: 1.28;
	letter-spacing: -0.024em;
	word-break: break-word;
	text-wrap: balance;
}

.kimsoft-ev-row__title a {
	color: var(--kev-text);
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
	transition:
		color 0.18s ease,
		background-size 0.26s cubic-bezier(0.22, 1, 0.36, 1);
	border-radius: 2px;
}

.kimsoft-ev-row__title a:hover {
	color: var(--kev-accent);
	background-size: 100% 2px;
}

.kimsoft-ev-row__title a:focus-visible {
	outline: 2px solid var(--row-accent);
	outline-offset: 3px;
}

@media (max-width: 440px) {
	.kimsoft-ev-row__body {
		grid-template-columns: 1fr;
		justify-items: start;
		align-items: start;
	}
	.kimsoft-ev-row__when {
		align-self: start;
		justify-self: start;
	}
	.kimsoft-ev-row__title {
		grid-column: 1 / -1;
		grid-row: auto;
	}
	.kimsoft-ev-row__thumb {
		padding: 12px 12px 0;
	}
	.kimsoft-ev-row__thumb img {
		width: 100%;
		max-height: 200px;
		aspect-ratio: 16 / 10;
	}
}

.kimsoft-ev-empty {
	margin: 0;
	padding: clamp(1.35rem, 4.2vw, 2.1rem);
	text-align: center;
	font-size: 0.9375rem;
	color: color-mix(in srgb, var(--kev-muted) 50%, var(--kev-text));
	background:
		linear-gradient(
			178deg,
			color-mix(in srgb, var(--kev-text) 7%, transparent) 0%,
			transparent 45%
		),
		color-mix(in srgb, var(--kev-surface) 62%, transparent);
	border-radius: var(--kev-radius-md);
	border: 1px dashed color-mix(in srgb, var(--kev-line) 75%, var(--kev-accent));
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--kev-text) 5%, transparent),
		0 10px 32px color-mix(in srgb, var(--kev-shadow) 10%, transparent);
}

/* ========== Filter ========== */
.kimsoft-ev-filter-host {
	margin-bottom: 1rem;
}

.kimsoft-ev-filters {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 6px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--kev-surface) 65%, transparent);
	border: 1px solid color-mix(in srgb, var(--kev-line) 70%, var(--kev-accent));
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--kev-text) 6%, transparent),
		0 14px 40px color-mix(in srgb, var(--kev-shadow) 10%, transparent);
}

.kimsoft-ev-filters button {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	padding: 0.55rem 1.18rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	letter-spacing: 0.02em;
	border: 1px solid transparent;
	color: color-mix(in srgb, var(--kev-muted) 25%, var(--kev-text));
	background: transparent;
	transition:
		background 0.2s ease,
		color 0.2s ease,
		transform 0.18s ease,
		box-shadow 0.2s ease;
}

.kimsoft-ev-filters button:hover {
	color: var(--kev-text);
	background: color-mix(in srgb, var(--kev-text) 6%, transparent);
}

.kimsoft-ev-filters button.is-active {
	color: var(--k-on-primary, #ffffff);
	background: linear-gradient(
		145deg,
		var(--kev-accent) 0%,
		color-mix(in srgb, var(--kev-accent) 72%, var(--k-accent, #7c3aed)) 100%
	);
	border-color: color-mix(in srgb, var(--kev-accent) 55%, transparent);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--kev-accent) 25%, transparent),
		0 10px 28px color-mix(in srgb, var(--kev-accent) 28%, transparent);
}

.kimsoft-ev-filters button:focus-visible {
	outline: 2px solid var(--kev-accent);
	outline-offset: 3px;
}

/* Kalender-widget: förhindra att rutnätet spräcker smala kolumnlayouter (flex min-width:auto) */
.elementor-widget.elementor-widget-kimsoft-events-calendar {
	max-width: 100%;
	min-width: 0;
}

.elementor-widget.elementor-widget-kimsoft-events-calendar > .elementor-widget-container {
	min-width: 0;
	max-width: 100%;
}

/* ========== Calendar ========== */
.kimsoft-ev-cal {
	max-width: 100%;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
	padding: clamp(16px, 3.8vw, 22px);
	border-radius: calc(var(--kev-radius-lg) + 4px);
	position: relative;
	background:
		radial-gradient(
			120% 90% at 10% -20%,
			color-mix(in srgb, var(--kev-accent) 14%, transparent) 0%,
			transparent 55%
		),
		radial-gradient(
			100% 70% at 100% 0%,
			color-mix(in srgb, var(--k-accent, #7c3aed) 10%, transparent) 0%,
			transparent 45%
		),
		color-mix(in srgb, var(--kev-surface) 40%, var(--k-bg, #fff));
	border: 1px solid color-mix(in srgb, var(--kev-line) 55%, var(--kev-accent));
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--kev-text) 5%, transparent),
		0 20px 50px color-mix(in srgb, var(--kev-shadow) 14%, transparent),
		inset 0 1px 0 color-mix(in srgb, var(--kev-text) 5%, transparent);
}

.kimsoft-ev-cal__nav {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.1rem;
}

.kimsoft-ev-cal__title {
	grid-column: 2;
	text-align: center;
	font-size: clamp(1.05rem, 2vw + 0.6rem, 1.35rem);
	font-weight: 800;
	margin: 0;
	letter-spacing: -0.035em;
	line-height: 1.15;
	text-transform: capitalize;
	color: var(--kev-text);
}

.kimsoft-ev-cal__prev,
.kimsoft-ev-cal__next {
	appearance: none;
	width: 2.65rem;
	height: 2.65rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--kev-line) 60%, var(--kev-accent));
	background: color-mix(in srgb, var(--k-bg, #fff) 88%, var(--kev-surface));
	color: var(--kev-text);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--kev-shadow) 12%, transparent);
	transition: transform 0.18s ease, background 0.2s ease, border-color 0.2s ease;
}

.kimsoft-ev-cal__prev:hover,
.kimsoft-ev-cal__next:hover {
	background: color-mix(in srgb, var(--kev-accent) 12%, var(--k-bg, #fff));
	border-color: color-mix(in srgb, var(--kev-accent) 45%, var(--kev-line));
}

.kimsoft-ev-cal__prev:active,
.kimsoft-ev-cal__next:active {
	transform: scale(0.94);
}

.kimsoft-ev-cal__prev:focus-visible,
.kimsoft-ev-cal__next:focus-visible {
	outline: 2px solid var(--kev-accent);
	outline-offset: 3px;
}

.kimsoft-ev-cal__grid-wrap {
	overflow-x: auto;
	padding-bottom: 2px;
	min-width: 0;
	max-width: 100%;
}

.kimsoft-ev-cal__weekhead,
.kimsoft-ev-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 7px;
	min-width: 0;
	width: 100%;
}

.kimsoft-ev-cal__weekhead span {
	text-align: center;
	font-size: 0.625rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: color-mix(in srgb, var(--kev-muted) 40%, var(--kev-text));
	padding: 0.35rem 0;
}

.kimsoft-ev-cal__grid button {
	all: unset;
	box-sizing: border-box;
	min-width: 0;
	min-height: 3.15rem;
	border-radius: var(--kev-radius-sm);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 0.5rem 0.15rem;
	font-variant-numeric: tabular-nums;
	color: var(--kev-text);
	background: color-mix(in srgb, var(--k-bg, #fff) 92%, transparent);
	border: 1px solid color-mix(in srgb, var(--kev-line) 55%, transparent);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--kev-shadow) 8%, transparent);
	transition:
		transform 0.18s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background 0.2s ease;
}

.kimsoft-ev-cal__grid button:not(.is-muted):hover {
	background: color-mix(in srgb, var(--kev-accent) 8%, var(--k-bg, #fff));
	border-color: color-mix(in srgb, var(--kev-accent) 35%, var(--kev-line));
}

.kimsoft-ev-cal__grid button.is-muted {
	opacity: 0.38;
	background: transparent;
	box-shadow: none;
	border-style: dashed;
	border-color: color-mix(in srgb, var(--kev-line) 85%, transparent);
}

.kimsoft-ev-cal__grid button.is-today:not(.is-muted) {
	box-shadow:
		0 0 0 2px var(--kev-accent),
		0 8px 24px color-mix(in srgb, var(--kev-accent) 22%, transparent);
	background: linear-gradient(
		160deg,
		color-mix(in srgb, var(--kev-accent) 11%, var(--k-bg, #fff)),
		color-mix(in srgb, var(--k-bg, #fff) 94%, transparent)
	);
	border-color: color-mix(in srgb, var(--kev-accent) 42%, transparent);
	font-weight: 800;
}

.kimsoft-ev-cal__grid button.is-busy:not(.is-muted) {
	border-color: color-mix(in srgb, var(--kev-accent) 52%, transparent);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--kev-accent) 20%, transparent),
		0 10px 28px color-mix(in srgb, var(--kev-accent) 20%, transparent);
	background: linear-gradient(
		175deg,
		color-mix(in srgb, var(--kev-accent) 13%, var(--k-bg, #fff)),
		var(--k-bg, #fff)
	);
	font-weight: 800;
}

.kimsoft-ev-cal__grid button:focus-visible {
	outline: 2px solid var(--kev-accent);
	outline-offset: 3px;
}

.kimsoft-ev-cal__num {
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.kimsoft-ev-cal__dot {
	min-height: 5px;
}

.kimsoft-ev-cal__grid button.is-busy:not(.is-muted) .kimsoft-ev-cal__dot::after {
	content: "";
	position: absolute;
	bottom: 0.38rem;
	left: 50%;
	transform: translateX(-50%);
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--kev-accent);
	box-shadow:
		0 0 0 2px var(--k-bg, #fff),
		0 0 14px color-mix(in srgb, var(--kev-accent) 55%, transparent);
}

/* ========== Öppettider → evenemangs-hint ========== */
.koh-widget__hero-hint-row {
	grid-column: 1 / -1;
	margin-top: 0.65rem;
}

.koh-ev-hint-btn {
	all: unset;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--k-text, #0f172a);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.koh-widget__day--interactive {
	cursor: pointer;
}

.koh-widget__ev-chip {
	position: absolute;
	bottom: 0.35rem;
	right: 0.38rem;
	font-size: 0.5625rem;
	font-weight: 800;
	min-width: 1.05rem;
	text-align: center;
	padding: 0.22rem 0.42rem;
	border-radius: 999px;
	background: linear-gradient(
		145deg,
		var(--k-primary, #2563eb),
		color-mix(in srgb, var(--k-accent, #7c3aed) 55%, var(--k-primary, #2563eb))
	);
	color: var(--k-on-primary, #ffffff);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--k-primary, #2563eb) 35%, transparent);
}

.koh-widget__day.koh-widget__day--has-events.koh-widget__day--interactive {
	position: relative;
}

/* ========== Modal ========== */
.koh-ev-backdrop {
	position: fixed;
	inset: 0;
	z-index: 29999;
	display: grid;
	align-items: end;
	justify-content: center;
	padding: clamp(14px, 4vw, 28px);
	background:
		radial-gradient(ellipse 80% 65% at 50% -10%, rgb(79 140 255 / 0.18), transparent 55%),
		radial-gradient(ellipse 60% 50% at 100% 100%, rgb(251 146 60 / 0.1), transparent 50%),
		rgb(15 23 42 / 0.58);
	backdrop-filter: blur(10px) saturate(140%);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
}

@media (min-width: 740px) {
	.koh-ev-backdrop {
		align-items: center;
	}
}

.koh-ev-panel {
	min-width: min(520px, 100%);
	max-height: min(86vh, 720px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border-radius: 1.15rem 1.15rem 0 0;
	background: linear-gradient(
		175deg,
		color-mix(in srgb, var(--k-bg, #fff) 99%, var(--k-text, #0f172a) 1%) 0%,
		var(--k-bg, #fff) 40%
	);
	color: var(--k-text, #0f172a);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--k-text, #0f172a) 8%, transparent),
		0 -32px 80px rgb(15 23 42 / 0.35),
		0 32px 96px rgb(15 23 42 / 0.22);
}

@media (min-width: 740px) {
	.koh-ev-panel {
		border-radius: 1.25rem;
	}
}

.koh-ev-panel--events::before {
	content: "";
	display: block;
	height: 5px;
	flex-shrink: 0;
	background: linear-gradient(
		90deg,
		var(--k-primary, #2563eb),
		color-mix(in srgb, var(--k-accent, #7c3aed) 70%, var(--k-primary, #2563eb)),
		var(--k-primary, #2563eb)
	);
	opacity: 0.95;
}

.koh-ev-panel-header {
	flex-shrink: 0;
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 18px clamp(18px, 4vw, 24px);
	background: color-mix(in srgb, var(--k-bg, #fff) 92%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	z-index: 2;
	border-bottom: 1px solid color-mix(in srgb, var(--k-border, #e2e8f0) 45%, transparent);
}

.kimsoft-ev-modal__hdr {
	font-family:
		var(--e-global-typography-text-font-family, var(--k-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));
	font-size: clamp(1.0625rem, 2vw + 0.5rem, 1.28rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.22;
	flex: 1;
	min-width: 0;
	font-style: normal;
}

.koh-ev-panel-header .kimsoft-ev-modal__close {
	all: unset;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	flex-shrink: 0;
	position: relative;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	display: inline-grid;
	place-items: center;
	cursor: pointer;
	color: var(--k-text, #0f172a);
	background: color-mix(in srgb, var(--k-text, #0f172a) 6%, var(--k-bg, #fff));
	border: 1px solid color-mix(in srgb, var(--k-border, #e2e8f0) 55%, transparent);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--k-bg, #fff) 80%, transparent),
		0 2px 10px color-mix(in srgb, var(--k-text, #0f172a) 8%, transparent);
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		transform 0.18s ease,
		box-shadow 0.2s ease;
}

.kimsoft-ev-modal__close-icon {
	display: block;
	width: 1.05rem;
	height: 1.05rem;
	position: relative;
	pointer-events: none;
}

.kimsoft-ev-modal__close-icon::before,
.kimsoft-ev-modal__close-icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform-origin: center;
}

.kimsoft-ev-modal__close-icon::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.kimsoft-ev-modal__close-icon::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.koh-ev-panel-header .kimsoft-ev-modal__close:hover {
	background: color-mix(in srgb, var(--k-primary, #2563eb) 12%, var(--k-bg, #fff));
	border-color: color-mix(in srgb, var(--k-primary, #2563eb) 42%, var(--k-border, #e2e8f0));
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--k-bg, #fff) 70%, transparent),
		0 4px 18px color-mix(in srgb, var(--k-primary, #2563eb) 18%, transparent);
}

.koh-ev-panel-header .kimsoft-ev-modal__close:active {
	transform: scale(0.94);
}

.koh-ev-panel-header .kimsoft-ev-modal__close:focus-visible {
	outline: 2px solid var(--k-primary, #2563eb);
	outline-offset: 3px;
}

.kimsoft-ev-modal__list {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(16px, 4vw, 22px) !important;
	scrollbar-color: color-mix(in srgb, var(--k-muted, #64748b) 55%, transparent) transparent;
	scrollbar-width: thin;
}

.kimsoft-ev-modal__card {
	display: grid;
	grid-template-columns: minmax(118px, 32%) minmax(0, 1fr);
	gap: 0;
	border-radius: var(--kev-radius-md);
	overflow: clip;
	background: linear-gradient(
		145deg,
		color-mix(in srgb, var(--k-muted, #64748b) 9%, var(--k-bg, #fff)),
		color-mix(in srgb, var(--k-bg, #fff) 96%, var(--k-primary, #2563eb) 4%)
	);
	border: 1px solid color-mix(in srgb, var(--k-border, #e2e8f0) 60%, transparent);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--k-text, #0f172a) 5%, transparent),
		0 10px 32px color-mix(in srgb, var(--k-text, #0f172a) 10%, transparent);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kimsoft-ev-modal__card:hover {
	transform: translateY(-1px);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--k-primary, #2563eb) 22%, transparent),
		0 18px 44px color-mix(in srgb, var(--k-primary, #2563eb) 14%, transparent);
}

.kimsoft-ev-modal__media {
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: stretch;
	background: color-mix(in srgb, var(--k-muted, #64748b) 16%, var(--k-bg, #fff));
}

.kimsoft-ev-modal__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		195deg,
		transparent 40%,
		color-mix(in srgb, var(--k-text, #0f172a) 18%, transparent) 100%
	);
	pointer-events: none;
	opacity: 0.35;
}

.kimsoft-ev-modal__media img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	min-height: 6.5rem;
	max-height: 9.5rem;
	object-fit: cover;
}

.kimsoft-ev-modal__media--empty {
	background:
		repeating-linear-gradient(
			-12deg,
			color-mix(in srgb, var(--k-muted, #64748b) 14%, transparent) 0 2px,
			transparent 2px 10px
		),
		color-mix(in srgb, var(--k-muted, #64748b) 10%, var(--k-bg, #fff));
}

.kimsoft-ev-modal__media--empty::before {
	content: "◆";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 5.5rem;
	font-size: 1.35rem;
	opacity: 0.16;
	font-weight: 800;
}

.kimsoft-ev-modal__body {
	position: relative;
	z-index: 1;
	padding: clamp(15px, 3.5vw, 20px) clamp(14px, 3.2vw, 18px);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
	justify-content: center;
}

.kimsoft-ev-modal__when {
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--k-muted, #64748b) 35%, var(--k-text, #0f172a));
	line-height: 1.45;
	word-break: break-word;
	font-variant-numeric: tabular-nums;
}

.kimsoft-ev-modal__title-link,
.kimsoft-ev-modal__title-span {
	display: inline;
	font-size: clamp(1.02rem, 1.5vw + 0.45rem, 1.14rem);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.025em;
	word-break: break-word;
	text-decoration: none;
}

.kimsoft-ev-modal__title-link {
	color: var(--k-text, #0f172a);
	background:
		linear-gradient(90deg, var(--k-primary, #2563eb), var(--k-accent, #7c3aed)) 0 100% / 100%
			2px no-repeat;
	background-position: 0 100%;
	opacity: 1;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.kimsoft-ev-modal__title-link:hover {
	color: var(--k-primary, #2563eb);
	opacity: 0.92;
}

.kimsoft-ev-modal__title-span {
	color: var(--k-text, #0f172a);
}

.kimsoft-ev-modal__empty {
	margin: 0;
	text-align: center;
	padding: 2rem 1rem;
	font-size: 0.95rem;
	color: color-mix(in srgb, var(--k-muted, #64748b) 45%, var(--k-text, #0f172a));
}

@media (max-width: 480px) {
	.kimsoft-ev-modal__card {
		grid-template-columns: 1fr;
	}
	.kimsoft-ev-modal__media img {
		max-height: 11rem;
		min-height: 8rem;
	}
}

/* Kompakt widget — evenemangsknapp */
.koh-el-compact .koh-ev-hint-mini {
	all: unset;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.75rem;
	font-weight: 800;
	margin-inline-start: 0.75rem;
	padding: 0.35rem 0.72rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--k-primary, #2563eb) 35%, transparent);
	color: var(--k-primary, #2563eb);
	background: color-mix(in srgb, var(--k-primary, #2563eb) 9%, transparent);
	box-shadow: 0 8px 22px color-mix(in srgb, var(--k-primary, #2563eb) 14%, transparent);
	transition: transform 0.18s ease, box-shadow 0.2s ease;
}

.koh-el-compact .koh-ev-hint-mini:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 28px color-mix(in srgb, var(--k-primary, #2563eb) 22%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.kimsoft-ev-row,
	.kimsoft-ev-modal__card,
	.kimsoft-ev-modal__close,
	.kimsoft-ev-filters button,
	.kimsoft-ev-cal__grid button,
	.kimsoft-ev-cal__prev,
	.kimsoft-ev-cal__next {
		transition: none;
	}
	.kimsoft-ev-row:hover {
		transform: none;
	}
	.koh-el-compact .koh-ev-hint-mini:hover {
		transform: none;
	}
	.koh-ev-panel-header .kimsoft-ev-modal__close:active {
		transform: none;
	}
}