/**
 * DICO Amelia UX – Duration Variants
 *
 * Nutzt ausschließlich die von Amelia selbst pro Formular-Instanz gesetzten
 * CSS-Custom-Properties (--am-c-primary, --am-c-main-bgr, ...), damit sich
 * die Dauer-Chips automatisch an die im Amelia-Customizer gewählten Farben
 * anpassen. Keine Amelia-Selektoren werden umdefiniert – es werden nur neue,
 * eigene Klassen (dico-*) innerhalb der bestehenden Amelia-Kartenstruktur
 * ergänzt.
 */

.dico-duration-group {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	width: 100%;
}

.dico-duration-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	box-sizing: border-box;
	padding: 5px 10px;
	min-height: 30px;
	border-radius: 999px;
	border: 1px solid var( --am-c-inp-border, #d1d5d7 );
	background: var( --am-c-main-bgr, #ffffff );
	color: var( --am-c-main-text, #0e1920 );
	font-family: inherit;
	font-size: 12px;
	line-height: 1.3;
	white-space: nowrap;
}

button.dico-duration-chip {
	cursor: pointer;
	user-select: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

button.dico-duration-chip:hover {
	border-color: var( --am-c-primary, #265cf2 );
}

button.dico-duration-chip:focus-visible {
	outline: 2px solid var( --am-c-primary, #265cf2 );
	outline-offset: 2px;
}

button.dico-duration-chip.is-active,
button.dico-duration-chip[ aria-checked="true" ] {
	background: var( --am-c-primary, #265cf2 );
	border-color: var( --am-c-primary, #265cf2 );
	color: #ffffff;
}

.dico-duration-chip--static {
	cursor: default;
	opacity: 0.9;
}

.dico-duration-chip__duration {
	font-weight: 600;
}

.dico-duration-chip__price {
	opacity: 0.85;
}

button.dico-duration-chip.is-active .dico-duration-chip__price,
button.dico-duration-chip[ aria-checked="true" ] .dico-duration-chip__price {
	opacity: 1;
}

/* Größerer Tastziel-Bereich auf kleinen Bildschirmen (mobile Dialoge). */
@media ( max-width: 480px ) {
	.dico-duration-chip {
		padding: 8px 12px;
		min-height: 40px;
		font-size: 13px;
	}
}