/* Mankind Miles: neemt lettertypes en tekstkleur over van het thema. */
.mm-wrap {
	--mm-accent: #E8836B;
	--mm-line: rgba(127, 127, 127, 0.3);
	--mm-soft: rgba(127, 127, 127, 0.08);
	max-width: 720px;
	margin: 0 auto;
	padding: 48px 16px;
	box-sizing: border-box;
}
.mm-wrap *, .mm-wrap *::before, .mm-wrap *::after { box-sizing: border-box; }

.mm-header { text-align: center; margin-bottom: 40px; }
.mm-wrap h2, .mm-wrap h3, .mm-wrap h4 { color: inherit; }
.mm-logo { width: 180px; max-width: 100%; height: auto; margin: 0 auto 16px; display: block; }
.mm-title { margin: 0 0 12px; }
.mm-intro { max-width: 560px; margin: 0 auto; opacity: 0.85; }
.mm-intro p { margin: 0 0 8px; }

.mm-empty { text-align: center; opacity: 0.8; }

.mm-card {
	border: 1px solid var(--mm-line);
	background: var(--mm-soft);
	border-radius: 12px;
	padding: 28px;
	margin-bottom: 24px;
}
.mm-card { position: relative; overflow: hidden; }
.mm-card > * { position: relative; z-index: 1; }
.mm-card > .mm-card-bg {
	position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 60%;
	background-size: cover; background-position: center;
	opacity: 0.28; pointer-events: none;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 45%, #000 100%);
	mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 45%, #000 100%);
}
.mm-card > .mm-partner-logo { position: absolute; z-index: 2; }
.mm-partner-logo { top: 22px; right: 24px; max-width: 200px; width: auto; height: 72px; object-fit: contain; opacity: 0.95; }
.mm-has-logo .mm-card-title, .mm-has-logo .mm-city { padding-right: 140px; }
.mm-maps { margin-left: 10px; color: var(--mm-accent); text-decoration: none; font-size: 0.9em; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.mm-maps:hover { text-decoration: underline; }
.mm-maps svg { vertical-align: -2px; }
.mm-card-title { margin: 0 0 4px; }
.mm-city { margin: 0 0 16px; font-size: 1.1em; opacity: 0.75; letter-spacing: 0.02em; }

.mm-meta { list-style: none; margin: 0 0 16px; padding: 0; }
.mm-meta li { padding: 6px 0; border-bottom: 1px solid var(--mm-line); display: flex; gap: 12px; }
.mm-meta li:last-child { border-bottom: 0; }
.mm-label { min-width: 96px; opacity: 0.6; font-size: 0.9em; }

.mm-card-intro { margin-bottom: 16px; }
.mm-card-intro p { margin: 0 0 8px; }

.mm-hosts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-bottom: 16px; }
.mm-hosts-label { width: 100%; opacity: 0.6; font-size: 0.9em; }
.mm-host { display: flex; align-items: center; gap: 10px; }
.mm-host-link { color: inherit; text-decoration: underline; text-decoration-color: var(--mm-accent); text-underline-offset: 3px; }
.mm-host-link:hover { color: var(--mm-accent); }
.mm-host-hint { opacity: 0.6; font-size: 0.9em; }
.mm-host img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }

.mm-spots { font-weight: bold; color: var(--mm-accent); margin: 0 0 12px; }

.mm-btn,
.mm-wrap a.mm-btn {
	display: inline-block;
	background: var(--mm-accent);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 12px 22px;
	font: inherit;
	font-weight: bold;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.2;
}
.mm-btn:hover { filter: brightness(1.08); }
.mm-btn:disabled { opacity: 0.6; cursor: wait; }

.mm-form { margin-top: 8px; }
.mm-form p { margin: 0 0 14px; }
.mm-form label { display: block; font-size: 0.9em; margin-bottom: 4px; opacity: 0.85; }
.mm-form input,
.mm-form select {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--mm-line);
	border-radius: 6px;
	background: #fff;
	color: #222;
	font: inherit;
}
.mm-wrap .mm-form input,
.mm-wrap .mm-form select {
	height: auto !important;
	min-height: 46px;
	line-height: 1.4 !important;
	margin: 0;
}
.mm-wrap .mm-form select {
	-webkit-appearance: none;
	appearance: none;
	padding: 11px 40px 11px 12px !important;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23555' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	text-overflow: ellipsis;
}
.mm-form input:focus,
.mm-form select:focus { outline: 2px solid var(--mm-accent); outline-offset: 1px; }
.mm-notice { font-size: 0.85em; opacity: 0.7; }
.mm-error { color: #fff; background: #b32d2e; padding: 10px 12px; border-radius: 6px; }

.mm-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.mm-success { border-left: 4px solid var(--mm-accent); padding: 4px 0 4px 16px; margin-top: 8px; }
.mm-success h4 { margin: 0 0 8px; }
.mm-cal { font-size: 0.95em; }
.mm-cal a { color: var(--mm-accent); }

.mm-wrap [hidden] { display: none !important; }

@media (max-width: 480px) {
	.mm-card { padding: 20px; }
	.mm-card > .mm-partner-logo { position: relative; display: block; margin: 0 0 12px; top: auto; right: auto; }
	.mm-card > .mm-card-bg { width: 100%; bottom: auto; height: 260px; opacity: 0.22;
		-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.5) 50%, transparent 100%); }
	.mm-has-logo .mm-card-title, .mm-has-logo .mm-city { padding-right: 0; }
	.mm-meta li { flex-direction: column; gap: 2px; }
}