/**
 * DBA course-card strip.
 *
 * Carries no brand colour of its own: the accent resolves from the host theme
 * (Tutor first, then Kadence's Accent slot) and every neutral is derived from
 * currentColor, so the card is correct on any site that installs the plugin.
 * Only palette slot 1 may be assumed — sites repurpose the others freely.
 */

/* The strip and the price row are siblings, not nested, so the tokens have to
   be declared on both — a custom property does not reach a sibling subtree. */
.dba-card,
.dba-card-price {
	--dba-accent: var(--tutor-color-primary, var(--global-palette1, #ee6a22));
	--dba-success: #2f7d63;
	--dba-muted: #98a1a8;
}

.dba-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 13px;
}

/* ---------------------------------------------------------------- chip row */

.dba-card__top {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.dba-card__chip {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	padding: 2.5px 8px;
	border-radius: 99px;
	white-space: normal;
	background: rgba(0, 0, 0, .08);
	background: color-mix(in srgb, currentColor 10%, transparent);
}

.dba-card__chip--running {
	color: var(--dba-accent);
	background: rgba(238, 106, 34, .13);
	background: color-mix(in srgb, var(--dba-accent) 14%, transparent);
}

.dba-card__chip--success {
	color: var(--dba-success);
	background: rgba(47, 125, 99, .13);
	background: color-mix(in srgb, var(--dba-success) 14%, transparent);
}

.dba-card__chip--failed {
	color: var(--dba-muted);
}

/* --------------------------------------------------------------- countdown */

.dba-card__countdown {
	margin-left: auto;
	display: flex;
	align-items: baseline;
	gap: 3px;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	opacity: .75;
}

.dba-card__countdown b {
	font-weight: 600;
	font-size: 13px;
	opacity: 1;
}

.dba-card__countdown[data-cd-state="last24h"] b {
	color: var(--dba-accent);
}

/* ---------------------------------------------------------------- progress */

.dba-card__progress {
	height: 6px;
	border-radius: 99px;
	overflow: hidden;
	background: rgba(0, 0, 0, .09);
	background: color-mix(in srgb, currentColor 11%, transparent);
}

.dba-card__fill {
	height: 100%;
	border-radius: 99px;
	background: var(--dba-accent);
	width: 0;
	transition: width .9s cubic-bezier(.22, .9, .3, 1);
}

.dba-card__fill--success {
	background: var(--dba-success);
}

.dba-card__fill--muted {
	background: var(--dba-muted);
}

.dba-card__meta {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
	opacity: .72;
}

/* Skeleton state, until the batched progress request lands. The bar keeps its
   final height so nothing shifts when the real number arrives.
   `!important` is required: the server prints its own (cache-frozen) width
   inline as the fallback, and that inline value must lose while pending. */
.dba-card__progress-wrap[data-dba-progress-state="pending"] .dba-card__fill {
	width: 35% !important;
	background: linear-gradient(90deg,
		rgba(0, 0, 0, .10),
		rgba(0, 0, 0, .19),
		rgba(0, 0, 0, .10));
	background-size: 200% 100%;
	animation: dba-card-shimmer 1.15s linear infinite;
}

.dba-card__progress-wrap[data-dba-progress-state="pending"] .dba-card__meta span {
	color: transparent;
	background: rgba(0, 0, 0, .09);
	border-radius: 2px;
}

@keyframes dba-card-shimmer {
	0%   { background-position: 120% 0; }
	100% { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.dba-card__fill { transition: none; }
	.dba-card__progress-wrap[data-dba-progress-state="pending"] .dba-card__fill { animation: none; }
}

/* ------------------------------------------------------------- price + CTA */

.dba-card-price {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/* A course may configure a full marketing sentence as its CTA text. That does
   not fit beside the price in a card column, so the button takes its own row. */
.dba-card-price--stacked {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

.dba-card-price__stack {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.dba-card-price__label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .09em;
	color: var(--dba-accent);
}

.dba-card-price__now {
	font-size: 18px;
	font-weight: 700;
	color: var(--dba-accent);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.dba-card-price__was {
	font-size: 12px;
	text-decoration: line-through;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	opacity: .6;
}

.dba-card-price--muted .dba-card-price__now {
	color: var(--dba-muted);
}

.dba-card-price--muted .dba-card-price__label {
	color: var(--dba-muted);
}

.dba-card__cta.tutor-btn {
	white-space: normal;
	line-height: 1.35;
	text-align: center;
}


.dba-card__cta--off.tutor-btn {
	border-color: var(--dba-muted);
	color: var(--dba-muted);
	cursor: not-allowed;
	pointer-events: none;
}