/**
 * Event delivery slot line — the "next pickup" note under a Botendienst option.
 *
 * Ships next to assets/js/event-slots.js, outside the webpack bundle, because
 * the same line renders on three surfaces that load three different bundles:
 * the pharmacy landing page, the Kostenkalkulator's delivery card and the
 * configurator modal (whose markup arrives over AJAX).
 *
 * Colours come from three custom properties the surface may override, the same
 * arrangement as the PLZ list in assets/sass/common/_plz-list.scss — one
 * component, and each card decides how loud it is.
 *
 * Mobile first: ~90% of visitors read this on a phone, and the line sits in the
 * narrowest column on the page (beside a radio and a logo). It therefore wraps
 * as normal text rather than trying to stay on one line.
 */

.mcos-slot-line {
	--mcos-slot-fg: #0b4033;
	--mcos-slot-bg: rgba(111, 217, 160, 0.16);
	--mcos-slot-border: rgba(11, 64, 51, 0.12);

	display: block;
	margin: 6px 0 0;
	padding: 6px 9px;
	border: 1px solid var(--mcos-slot-border);
	border-radius: 9px;
	background: var(--mcos-slot-bg);
	color: var(--mcos-slot-fg);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	text-wrap: pretty;
}

/**
 * The last run of the event has left. This is not a detail — the patient is
 * about to choose a delivery method that can no longer reach the booth — so it
 * changes colour rather than just wording.
 */
.mcos-slot-line[data-closed="true"] {
	--mcos-slot-fg: #8a3a12;
	--mcos-slot-bg: rgba(228, 87, 46, 0.12);
	--mcos-slot-border: rgba(228, 87, 46, 0.28);
}

/* The Kostenkalkulator's card sits on white and already carries a border, so
   the line indents under the option it belongs to instead of repeating it. */
.mcos-dcard__slots {
	padding: 0 12px 8px 40px;
}

.mcos-dcard__slots .mcos-slot-line {
	margin-top: 0;
}

/* The configurator modal is denser and its options are full-width rows. */
.delivery-option__slots {
	padding: 0 0 8px 38px;
}

.delivery-option__slots .mcos-slot-line {
	margin-top: 0;
}

@media (max-width: 380px) {
	.mcos-dcard__slots {
		padding-left: 12px;
	}

	.delivery-option__slots {
		padding-left: 0;
	}
}