/* ==========================================================================
   Mammacita Erstattungsrechner
   Brand-Tokens und Typografie nach mammacita-brand-book.html
   ========================================================================== */

.mc-erstattung {
	/* === Brand Tokens (Mammacita Brand Book) === */
	--mint:        #80cbb7;
	--mint-hover:  #6ab8a3;
	--mint-active: #56a08e;
	--mint-soft:   #d6eae7;
	--petrol:      #0a897d;
	--petrol-dark: #086d63;
	--creme:       #faf3ec;
	--anthrazit:   #1d2b2a;
	--warmgrau:    #5a6b69;
	--linie:       #e5ebea;
	--weiss:       #ffffff;
	--blush:       #f7bebb;

	/* Breite folgt dem Eltern-Container — über Elementor (Spalten/Container) frei einstellbar. */
	box-sizing: border-box;
	width: 100%;
	margin: 1.5em 0;
	padding: 28px;
	background: var(--weiss);
	border: 1px solid var(--linie);
	border-radius: 20px;
	font-family: 'Raleway', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--anthrazit);
}
.mc-erstattung *, .mc-erstattung *::before, .mc-erstattung *::after { box-sizing: border-box; }

/* Kopfzeile */
.mc-erstattung__head { margin-bottom: 22px; }
.mc-erstattung__title {
	font-family: 'Raleway', system-ui, sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
	color: var(--petrol);
	margin: 0 0 6px;
}
.mc-erstattung__subline {
	margin: 0;
	font-family: 'Raleway', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--warmgrau);
}

/* Combobox */
.mc-erstattung__select-wrap { margin-bottom: 20px; }
.mc-erstattung__label {
	display: block;
	font-family: 'Raleway', system-ui, sans-serif;
	font-weight: 500;
	font-size: 12px;
	color: var(--warmgrau);
	letter-spacing: 0.4px;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.mc-erstattung__combo { position: relative; }

.mc-erstattung__search-icon {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--petrol);
	pointer-events: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.mc-erstattung .mc-erstattung__input {
	width: 100%;
	height: 48px;
	padding: 0 46px 0 44px;
	font-family: 'Raleway', system-ui, sans-serif;
	font-weight: 500;
	font-size: 15px;
	color: var(--anthrazit);
	background: var(--weiss);
	border: 1.5px solid var(--linie);
	border-radius: 999px;
	outline: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.mc-erstattung .mc-erstattung__input::placeholder { color: var(--warmgrau); font-weight: 400; }
.mc-erstattung .mc-erstattung__input:hover { border-color: var(--mint); }
.mc-erstattung .mc-erstattung__input:focus {
	border-color: var(--mint);
	box-shadow: 0 0 0 4px rgba(128, 203, 183, 0.25);
}

.mc-erstattung .mc-erstattung__toggle {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	border: 0;
	background: transparent;
	color: var(--petrol);
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background 0.15s ease, transform 0.25s ease;
}
.mc-erstattung .mc-erstattung__toggle:hover { background: var(--mint-soft); }
.mc-erstattung__combo[data-open="true"] .mc-erstattung__toggle { transform: translateY(-50%) rotate(180deg); }

/* Dropdown-Liste */
.mc-erstattung__list {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: 320px;
	overflow-y: auto;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--weiss);
	border: 1px solid var(--linie);
	border-radius: 20px;
	box-shadow: 0 16px 40px rgba(10, 137, 125, 0.12);
	z-index: 10;
}
.mc-erstattung__list[hidden] { display: none; }

.mc-erstattung__list li {
	padding: 10px 14px;
	cursor: pointer;
	font-family: 'Raleway', system-ui, sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.35;
	color: var(--anthrazit);
	border-radius: 999px;
	display: flex;
	align-items: center;
	gap: 10px;
	transition: background 0.12s ease, color 0.12s ease;
}
.mc-erstattung__list li .mc-erstattung__opt-name {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mc-erstattung__list li .mc-erstattung__opt-pct {
	flex: 0 0 auto;
	font-family: 'Raleway', system-ui, sans-serif;
	font-weight: 700;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	background: var(--mint-soft);
	color: var(--petrol);
	padding: 3px 10px;
	border-radius: 999px;
}
.mc-erstattung__list li:hover { background: var(--mint-soft); color: var(--petrol); }
.mc-erstattung__list li:hover .mc-erstattung__opt-pct { background: var(--weiss); }
.mc-erstattung__list li.is-active { background: var(--mint-soft); color: var(--petrol); }
.mc-erstattung__list li[aria-selected="true"] {
	background: var(--mint);
	color: var(--anthrazit);
	font-weight: 700;
}
.mc-erstattung__list li[aria-selected="true"] .mc-erstattung__opt-pct {
	background: var(--weiss);
	color: var(--petrol);
}
.mc-erstattung__list li.is-empty {
	cursor: default;
	color: var(--warmgrau);
	font-style: italic;
	font-weight: 400;
	justify-content: center;
}
.mc-erstattung__list li.is-empty:hover { background: transparent; color: var(--warmgrau); }

.mc-erstattung__legal {
	display: block;
	margin-top: 8px;
	font-size: 11px;
	font-weight: 400;
	color: var(--warmgrau);
}

/* Ergebnis-Box */
.mc-erstattung__result {
	background: var(--mint-soft);
	border-radius: 16px;
	padding: 18px 20px;
	margin-bottom: 16px;
}
.mc-erstattung__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 8px 0;
	font-family: 'Raleway', system-ui, sans-serif;
	font-size: 14px;
}
.mc-erstattung__row + .mc-erstattung__row { border-top: 1px solid rgba(10, 137, 125, 0.18); }
.mc-erstattung__row-label { color: var(--anthrazit); font-weight: 500; }
.mc-erstattung__row-value { color: var(--anthrazit); font-weight: 700; font-variant-numeric: tabular-nums; }
.mc-erstattung__percent { font-weight: 500; color: var(--petrol); margin-left: 4px; font-size: 12px; }
.mc-erstattung__row--coverage .mc-erstattung__row-value {
	color: var(--petrol);
	font-size: 22px;
	font-weight: 700;
}
.mc-erstattung__row--own .mc-erstattung__row-value { font-size: 16px; }

.mc-erstattung__comparison {
	margin: 4px 0 0;
	padding: 6px 0 0;
	font-family: 'Raleway', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 400;
	font-style: italic;
	line-height: 1.4;
	color: var(--warmgrau);
	text-align: right;
}
.mc-erstattung__comparison[hidden] { display: none; }

/* Badges + Hinweise */
.mc-erstattung__badges { display: flex; flex-direction: column; gap: 8px; }
.mc-erstattung__badge {
	display: inline-block;
	padding: 10px 16px;
	background: var(--mint);
	color: var(--anthrazit);
	font-family: 'Raleway', system-ui, sans-serif;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.4;
	border-radius: 999px;
	border-left: 0;
}
.mc-erstattung__badge[hidden] { display: none; }
.mc-erstattung__badge--capped { background: var(--blush); }

.mc-erstattung__note {
	margin: 0;
	padding: 12px 16px;
	background: var(--blush);
	color: var(--anthrazit);
	font-family: 'Raleway', system-ui, sans-serif;
	font-weight: 500;
	font-size: 13px;
	line-height: 1.5;
	border-radius: 12px;
	border-left: 0;
}
.mc-erstattung__note[hidden] { display: none; }

/* Fehler-Box (nur für Admins sichtbar) */
.mc-erstattung-error {
	padding: 10px 14px;
	background: #fee;
	border: 1px solid #f99;
	color: #900;
	font-size: 0.9em;
	border-radius: 6px;
}

/* Mobile */
@media (max-width: 520px) {
	.mc-erstattung { padding: 22px; border-radius: 16px; }
	.mc-erstattung__title { font-size: 20px; }
	.mc-erstattung__row--coverage .mc-erstattung__row-value { font-size: 20px; }
}