/**
 * Uitgesproken festivalpresentatie voor Event Portal Manager.
 * Bestandsversie: 0.9.2
 */
.epm-portal,
.event-portal-events {
	--epm-border: #d9d9e8;
	--epm-text: #171a35;
	--epm-muted: #626781;
	--epm-surface: #ffffff;
	--epm-soft: #f6f4ff;
	--epm-primary: #007d78;
	--epm-primary-dark: #005a57;
	--epm-success: #16714a;
	--epm-warning: #805300;
	--epm-error: #b32648;
	max-width: 1180px;
}

.epm-portal {
	position: relative;
}

.epm-portal::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -18px -18px auto;
	height: 240px;
	border-radius: 30px;
	background: linear-gradient(135deg, rgba(8,127,122,.08), rgba(20,28,45,.04));
	pointer-events: none;
}

.epm-portal__header,
.epm-card,
.epm-form,
.epm-notice,
.event-portal-event-card,
.epm-payment-report,
.epm-payment-link-box,
.epm-booking-total {
	border-color: var(--epm-border);
	border-radius: 22px;
	box-shadow: 0 18px 45px rgba(32, 35, 84, .12);
}

.epm-portal__header {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.42);
	background:
		linear-gradient(105deg, rgba(16,20,47,.88), rgba(113,59,199,.72) 55%, rgba(0,125,120,.72)),
		url("../images/camping-doodles.svg") right -30px center / 430px auto no-repeat;
	color: #fff;
}

.epm-portal__header::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 7px;
	background: linear-gradient(90deg, #ed4f72, #ff823b, #ffd34f, #32d6bd, #713bc7);
}

.epm-portal__header h2,
.epm-portal__header h3,
.epm-portal__header p,
.epm-portal__header .epm-eyebrow { color: #fff; }

.epm-portal__header .epm-eyebrow {
	display: inline-flex;
	width: fit-content;
	padding: 6px 10px;
	border-radius: 999px;
	background: #ffd34f;
	color: #171a35;
	letter-spacing: .11em;
}

.epm-card,
.epm-form,
.epm-payment-report,
.epm-payment-link-box {
	position: relative;
	overflow: hidden;
	background: rgba(255,255,255,.96);
}

.epm-card::before,
.epm-form::before,
.epm-payment-report::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6px;
	background: linear-gradient(180deg, #32d6bd, #007d78);
}

.epm-dashboard-grid > .epm-card:nth-child(4n + 2)::before { background: linear-gradient(180deg, #ffd34f, #ff823b); }
.epm-dashboard-grid > .epm-card:nth-child(4n + 3)::before { background: linear-gradient(180deg, #ed4f72, #b32666); }
.epm-dashboard-grid > .epm-card:nth-child(4n + 4)::before { background: linear-gradient(180deg, #8b5cf6, #713bc7); }

.epm-card h3,
.epm-card h2,
.epm-form h3,
.epm-form h2 {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.epm-eyebrow { color: #007d78; }

.epm-button,
.epm-portal a.epm-button {
	min-height: 50px;
	border-radius: 999px;
	background: linear-gradient(135deg, #007d78, #096d91);
	box-shadow: 0 10px 24px rgba(0,125,120,.25);
	font-weight: 850;
	transition: transform .18s ease, box-shadow .18s ease;
}

.epm-button:hover,
.epm-button:focus,
.epm-portal a.epm-button:hover,
.epm-portal a.epm-button:focus {
	background: linear-gradient(135deg, #005a57, #174f81);
	transform: translateY(-2px);
	box-shadow: 0 14px 28px rgba(0,90,87,.3);
}

.epm-button--secondary,
.epm-portal a.epm-button--secondary {
	border: 2px solid #d4d4e5;
	background: #fff;
	color: #171a35;
	box-shadow: none;
}

.epm-button--secondary:hover,
.epm-button--secondary:focus,
.epm-portal a.epm-button--secondary:hover,
.epm-portal a.epm-button--secondary:focus {
	border-color: #713bc7;
	background: #f5efff;
	color: #4c2394;
}

.epm-button--danger,
.epm-portal a.epm-button--danger {
	background: linear-gradient(135deg, #d9365a, #b32648);
	box-shadow: 0 10px 24px rgba(179,38,72,.25);
}

.epm-field input,
.epm-field select,
.epm-field textarea {
	border: 2px solid #c9ccdc;
	border-radius: 14px;
	background: #fff;
}

.epm-field input:focus,
.epm-field select:focus,
.epm-field textarea:focus {
	border-color: #713bc7;
	outline: 4px solid rgba(113,59,199,.15);
}

.epm-choice,
.epm-guest-card,
.epm-person-summary,
.epm-registration-card,
.epm-payment-report,
.epm-payment-link-box {
	border-radius: 17px;
}

.epm-choice {
	border: 2px solid #e0deec;
	background: linear-gradient(145deg, #fff, #f8f5ff);
	transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.epm-choice:has(input:checked) {
	border-color: #007d78;
	background: linear-gradient(145deg, #e8fffb, #fff);
	box-shadow: 0 8px 22px rgba(0,125,120,.13);
	transform: translateY(-1px);
}

.event-portal-events {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 24px;
}

.event-portal-event-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 0;
	background: #fff;
	transition: transform .2s ease, box-shadow .2s ease;
}

.event-portal-event-card:hover {
	transform: translateY(-6px) rotate(-.25deg);
	box-shadow: 0 28px 60px rgba(32,35,84,.2);
}

.event-portal-event-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 8px;
	background: linear-gradient(90deg, #ed4f72, #ffd34f, #32d6bd, #713bc7);
}

.event-portal-event-card__image {
	position: relative;
	background: linear-gradient(135deg, #713bc7, #ed4f72, #ff823b);
}

.event-portal-event-card__image::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 45%;
	background: linear-gradient(transparent, rgba(16,20,47,.6));
	pointer-events: none;
}

.event-portal-event-card__image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.event-portal-event-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 22px;
}

.event-portal-event-card__body h3 {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: clamp(24px, 3vw, 32px);
}

.event-portal-event-card__body > p:last-child { margin-top: auto; }

.event-portal-event-card__meta span {
	border: 1px solid transparent;
	border-radius: 999px;
	background: #f2eeff;
	color: #4b2789;
	font-weight: 800;
}

.event-portal-event-card__meta span:nth-child(2n) { background: #e6fbf7; color: #00655f; }
.event-portal-event-card__meta span:nth-child(3n) { background: #fff1d2; color: #774900; }

.epm-progress--booking.epm-progress--nine li {
	border: 2px solid #dddceb;
	border-radius: 999px;
	background: #fff;
	color: #555b73;
}

.epm-progress--booking li.is-complete {
	border-color: #dddceb;
	border-style: dashed;
	background: #f3f3f7;
	opacity: .58;
}

.epm-progress--booking li[aria-current="step"] {
	border-color: transparent;
	background: linear-gradient(135deg, #713bc7, #c72f56);
	color: #fff;
	box-shadow: 0 10px 25px rgba(113,59,199,.25);
}

.epm-status {
	border: 1px solid currentColor;
	font-weight: 850;
}

.epm-status--active,
.epm-status--complete { background: #e8fff8; color: #086b48; }
.epm-status--attention { background: #fff4d3; color: #754a00; }

.epm-notice {
	border-width: 1px;
	border-left-width: 8px;
	box-shadow: 0 10px 28px rgba(32,35,84,.08);
}

.epm-notice--success { border-left-color: #32a76f; background: #edfff5; }
.epm-notice--warning { border-left-color: #ffb02e; background: #fff7df; }
.epm-notice--error { border-left-color: #d9365a; background: #fff0f4; }
.epm-notice--info { border-left-color: #713bc7; background: #f5efff; }

.epm-booking-total {
	border: 0;
	background: linear-gradient(145deg, #172033, #233047 62%, #087f7a);
	background-size: auto;
	color: #fff;
	box-shadow: 0 20px 45px rgba(23,26,53,.25);
}

.epm-booking-total h3,
.epm-booking-total strong,
.epm-booking-total p { color: #fff; }

.epm-summary-list dt,
.epm-data-list dt { color: #393d58; }

.epm-dashboard-grid {
	gap: 20px;
}

@media (max-width: 760px) {
	.epm-portal,
	.event-portal-events { margin: 18px auto; }
	.epm-portal__header,
	.epm-card,
	.epm-form { padding: 21px; border-radius: 18px; }
	.epm-portal__header { background-position: center, right -120px center; }
	.epm-booking-layout { grid-template-columns: 1fr; }
	.epm-booking-total { position: static; }
	.event-portal-event-card:hover { transform: none; }
}

@media (forced-colors: active) {
	.epm-portal__header,
	.epm-card,
	.epm-form,
	.epm-booking-total,
	.event-portal-event-card { border: 2px solid CanvasText; background: Canvas; color: CanvasText; }
	.epm-portal__header h2,
	.epm-portal__header h3,
	.epm-portal__header p,
	.epm-booking-total h3,
	.epm-booking-total p { color: CanvasText; }
}