/*
 * IELTS Drill — chapter 08 "credits" (#pricing), patterns/pricing.php.
 *
 * Port of the inline styles in src/features/landing/landing-page.tsx,
 * <section id="pricing" data-kind="credits">. The chapter shell (.id-ch,
 * .id-ch--last, rail/node, body grid, eyebrow/title/lede) lives in base.css;
 * this file styles only the right-hand graphic, .id-credits (data-gfx,
 * data-ref="credits").
 *
 * landing.js writes inline: transform/opacity on .id-credits (the gfx slide-in),
 * transform on [data-strike], background/box-shadow/transform on [data-coin],
 * textContent of [data-bal]. Nothing here fights those; the classes below are
 * the finished state the TSX rendered first.
 *
 * Breakpoints: credCols switched on xl only (>= 1180px).
 */

/* The data-gfx grid: two cards, stacked until xl. */
.id-credits {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	align-items: stretch;
}

/* ---- Cards ------------------------------------------------------------- */
.id-credits__card {
	border-radius: 28px;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.id-credits__card--sub {
	position: relative;
	background: #FFFFFF;
	box-shadow: 0 1px 2px rgba(9, 20, 40, 0.05), inset 0 0 0 1px rgba(9, 20, 40, 0.06);
}
.id-credits__card--wallet {
	background: #0B1120;
	color: #EEF3FB;
	box-shadow: 0 40px 70px -46px rgba(9, 20, 40, 0.8);
}

/* Card header row: label left, tag right. */
.id-credits__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

/* ---- Subscription card ------------------------------------------------- */
.id-credits__plan {
	font-size: 14px;
	font-weight: 800;
	color: #586A87;
}
.id-credits__per {
	position: relative;
	white-space: nowrap;
	font-family: 'Geist Mono', monospace;
	font-size: 12px;
	font-weight: 600;
	color: #586A87;
}
/* Finished state: fully drawn. landing.js scales it in with scaleX(). */
.id-credits__strike {
	position: absolute;
	left: -3px;
	right: -3px;
	top: 52%;
	height: 2px;
	border-radius: 1px;
	background: #AE2126;
	transform-origin: 0 50%;
}

.id-credits__months {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}
.id-credits__month {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 0;
	border-radius: 12px;
	background: #F7F9FD;
	box-shadow: inset 0 0 0 1px rgba(9, 20, 40, 0.05);
}
.id-credits__mname {
	font-size: 11px;
	font-weight: 700;
	color: #586A87;
}
.id-credits__mdot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #DCE4F2;
}

.id-credits__no {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 14px;
	background: #FBE9E9;
	color: #AE2126;
	font-size: 14px;
	font-weight: 800;
}
.id-credits__x {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #AE2126;
	color: #FFFFFF;
	display: grid;
	place-items: center;
	font-size: 13px;
}
.id-credits__notext {
	white-space: nowrap;
}

/* ---- Credits (wallet) card --------------------------------------------- */
.id-credits__mine {
	white-space: nowrap;
	font-size: 14px;
	font-weight: 800;
	color: #9AA9C4;
}
.id-credits__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(74, 222, 155, 0.14);
	color: #4ADE9B;
	font-size: 12px;
	font-weight: 800;
}
.id-credits__inf {
	font-size: 14px;
}

.id-credits__balance {
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.id-credits__bal {
	font-size: 56px;
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 0.9;
	font-variant-numeric: tabular-nums;
}
.id-credits__left {
	font-size: 14px;
	font-weight: 700;
	color: #9AA9C4;
}

.id-credits__coins {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
}
/* Unspent coin. landing.js overrides background/box-shadow/transform inline. */
.id-credits__coin {
	aspect-ratio: 1;
	border-radius: 50%;
	background: #FFC55A;
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), inset 0 0 0 2px #E9A23B;
	transition: background .35s ease, box-shadow .35s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
/* Spent coin (the first three in the finished state). */
.id-credits__coin--spent {
	background: transparent;
	box-shadow: inset 0 0 0 2px #2A3653;
}

.id-credits__chips {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.id-credits__chip {
	padding: 8px 12px;
	border-radius: 999px;
	background: #182238;
	font-size: 13px;
	font-weight: 700;
}

/* xl (>= 1180px): the two cards side by side. */
@media (min-width: 1180px) {
	.id-credits {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	}
}