/**
 * Doplnky k ďalšej zásielke v sekcii Môj účet.
 *
 * Farby, rozostupy, zaoblenia a písmo sú z dizajnového systému
 * (assets/css/tokens.css) – tu sa hex ani px rozostupy nepíšu. Stlmený text je
 * `--tlpb-ink-muted`, nie priehľadnosť: opacity ho pod 4,5:1 ticho stiahne.
 *
 * @package TulipoBox\SubscriptionAddons
 */

.tlpb-addons {
	margin: var( --tlpb-space-5 ) 0 0;
	padding: var( --tlpb-space-5 );
	border: 1px solid var( --tlpb-line );
	border-radius: var( --tlpb-radius-md );
	background: var( --tlpb-panel );
	box-shadow: var( --tlpb-shadow-card );
	color: var( --tlpb-ink );
}

.tlpb-addons__title {
	margin: 0 0 var( --tlpb-space-1 );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-h3 );
	font-weight: 800;
	line-height: 1.3;
}

.tlpb-addons__date {
	margin: 0 0 var( --tlpb-space-4 );
	color: var( --tlpb-ink-muted );
	font-size: var( --tlpb-text-sm );
}

.tlpb-addons__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tlpb-addons__item {
	display: flex;
	align-items: center;
	gap: var( --tlpb-space-3 );
	margin: 0;
	padding: var( --tlpb-space-3 ) 0;
	border-bottom: 1px solid var( --tlpb-line );
	list-style: none;
}

.tlpb-addons__list--offer .tlpb-addons__item:last-child,
.tlpb-addons__list--chosen .tlpb-addons__item:last-child {
	border-bottom: 0;
}

.tlpb-addons__img {
	flex: 0 0 auto;
	line-height: 0;
}

.tlpb-addons__img img {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: var( --tlpb-radius-sm );
	object-fit: cover;
}

.tlpb-addons__info {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.35;
}

.tlpb-addons__name {
	display: block;
	font-family: var( --tlpb-font-heading );
	font-weight: 700;
}

.tlpb-addons__price {
	display: block;
	color: var( --tlpb-ink-muted );
	font-size: var( --tlpb-text-sm );
}

.tlpb-addons__qty {
	color: var( --tlpb-ink-muted );
}

.tlpb-addons__form {
	flex: 0 0 auto;
	margin: 0;
}

.tlpb-addons__add,
.tlpb-addons__remove {
	min-height: var( --tlpb-acc-control-h );
	padding: 0 var( --tlpb-space-4 );
	border-radius: var( --tlpb-radius-pill );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-sm );
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.tlpb-addons__add {
	border: 1px solid var( --tlpb-plum );
	background: transparent;
	color: var( --tlpb-plum );
}

.tlpb-addons__add:hover,
.tlpb-addons__add:focus,
.tlpb-addons__add:focus-visible {
	background: var( --tlpb-plum );
	color: var( --tlpb-on-accent );
}

.tlpb-addons__remove {
	border: 0;
	background: none;
	color: var( --tlpb-ink-muted );
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Téma Hello Elementor maľuje <button> pri :hover a :focus ružovou – tu ostáva bez podkladu. */
.tlpb-addons__remove:hover,
.tlpb-addons__remove:focus,
.tlpb-addons__remove:focus-visible {
	background: none;
	color: var( --tlpb-ink );
}

.tlpb-addons__add:focus-visible,
.tlpb-addons__remove:focus-visible {
	outline: 2px solid var( --tlpb-plum );
	outline-offset: 2px;
}

/* Súčet k ďalšej platbe: šalvia, text vždy atrament (stlmený by tu nedal 4,5:1). */
.tlpb-addons__total {
	margin: var( --tlpb-space-3 ) 0 var( --tlpb-space-4 );
	padding: var( --tlpb-space-3 ) var( --tlpb-space-4 );
	border-radius: var( --tlpb-radius-sm );
	background: var( --tlpb-sage-soft );
	color: var( --tlpb-ink );
	font-size: var( --tlpb-text-sm );
	line-height: 1.5;
}

.tlpb-addons__note {
	display: block;
	margin-top: var( --tlpb-space-1 );
}

@media screen and ( max-width: 480px ) {
	.tlpb-addons {
		padding: var( --tlpb-space-4 );
	}

	.tlpb-addons__img img {
		width: 44px;
		height: 44px;
	}
}

/* Priebeh zmeny a hláška. */
.tlpb-addons.is-busy {
	opacity: 0.6;
	pointer-events: none;
	cursor: progress;
}

.tlpb-addons__status {
	display: block;
	margin-top: var( --tlpb-space-1 );
	color: var( --tlpb-ink-muted );
	font-size: var( --tlpb-text-sm );
}

.tlpb-addons__status:empty {
	display: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.tlpb-addons__add,
	.tlpb-addons__remove {
		transition: none;
	}
}