/*
 * f_accounting — course price component.
 *
 * Registered by FAccounting\Shortcode\PriceAssets and enqueued by the
 * [f_accounting_course_price] shortcode when it renders. Urbanist is loaded
 * by the Oxygen builder site settings — the component only references the
 * family, with safe fallbacks.
 *
 * Design source: Figma "First Accounting" → price component (node 837:3202).
 * Layout: struck-through original price + "N% off" teal badge on a top row,
 * the current price centred below.
 */

.f-accounting-price {
	--f-price-ink: #172133;
	--f-price-muted: #50555e;
	--f-price-accent: #00f5d4;
	--f-price-badge-ink: #172133;
	--f-price-font: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-family: var(--f-price-font);
	line-height: 1.3;
}

.f-accounting-price *,
.f-accounting-price *::before,
.f-accounting-price *::after {
	box-sizing: border-box;
}

/* Top row: struck-through original price beside the discount badge. */
.f-accounting-price__group {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Current price — the large, bold headline number, centred below the row.
   Also used for the non-sale regular price so a full-price card keeps the
   same treatment. */
.f-accounting-price__sale,
.f-accounting-price--regular .f-accounting-price__regular {
	font-size: 46px;
	font-weight: 700;
	color: var(--f-price-ink);
	letter-spacing: -0.23px;
	line-height: 1.3;
}

/* Original price, struck through, in the top row. */
.f-accounting-price--sale .f-accounting-price__regular {
	font-size: 22px;
	font-weight: 500;
	color: var(--f-price-muted);
	line-height: 1.4;
	text-decoration: line-through;
}

/* Discount pill beside the original price. */
.f-accounting-price__badge {
	flex-shrink: 0;
	padding: 4px 8px;
	border-radius: 25px;
	background: var(--f-price-accent);
	color: var(--f-price-badge-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

/* Neutralise theme/WooCommerce defaults on the price markup so our own
   font, size and colour win. wc_price() wraps the amount in
   .woocommerce-Price-amount; <del>/<ins> get default browser styling. */
.f-accounting-price del,
.f-accounting-price ins {
	background: none;
	text-decoration: inherit;
}

.f-accounting-price .woocommerce-Price-amount,
.f-accounting-price .woocommerce-Price-currencySymbol {
	font: inherit;
	color: inherit;
}

@media (max-width: 640px) {
	.f-accounting-price__sale,
	.f-accounting-price--regular .f-accounting-price__regular {
		font-size: 34px;
	}

	.f-accounting-price--sale .f-accounting-price__regular {
		font-size: 18px;
	}

	.f-accounting-price__badge {
		font-size: 12px;
	}
}