/**
 * Pricing Box — Common base CSS (loads for every style).
 *
 * Shared structure only. Per-style files paint the card, header, price and
 * button. An --captwiki-pb-accent variable lets the Accent Color control
 * re-theme every style at once.
 *
 * @package captain-widgets-kit
 * @since   1.3.0
 */

.captwiki-pricing {
	--captwiki-pb-accent: #6366f1;
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	box-sizing: border-box;
}

.captwiki-pricing *,
.captwiki-pricing *::before,
.captwiki-pricing *::after {
	box-sizing: border-box;
}

/* ── Badge ─────────────────────────────────────────────── */
.captwiki-pricing__badge {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 2;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
	color: #ffffff;
	background: var( --captwiki-pb-accent );
	border-radius: 999px;
}

/* ── Header ────────────────────────────────────────────── */
.captwiki-pricing__header {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.captwiki-pricing__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	line-height: 1;
	color: var( --captwiki-pb-accent );
}

.captwiki-pricing__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.captwiki-pricing__icon i {
	font-size: inherit;
	font-style: normal;
}

.captwiki-pricing__title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: #111827;
}

.captwiki-pricing__subtitle {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #6b7280;
}

/* ── Price ─────────────────────────────────────────────── */
.captwiki-pricing__price {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 22px 0;
}

.captwiki-pricing__original {
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	color: #9ca3af;
	text-decoration: line-through;
}

.captwiki-pricing__price-row {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
}

.captwiki-pricing__currency {
	font-size: 60%;
	font-weight: 600;
	color: #111827;
}

.captwiki-pricing__amount {
	font-size: 48px;
	font-weight: 800;
	line-height: 1;
	color: #111827;
}

.captwiki-pricing__period {
	font-size: 15px;
	font-weight: 500;
	color: #6b7280;
}

/* Center alignment keeps the price row centered too. */
.captwiki-pricing[style*="text-align: center"] .captwiki-pricing__price,
.captwiki-pricing[style*="text-align:center"] .captwiki-pricing__price {
	align-items: center;
}

.captwiki-pricing[style*="text-align: right"] .captwiki-pricing__price,
.captwiki-pricing[style*="text-align:right"] .captwiki-pricing__price {
	align-items: flex-end;
}

/* ── Features ──────────────────────────────────────────── */
.captwiki-pricing__features {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.captwiki-pricing__feature {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	font-size: 15px;
	line-height: 1.4;
	border-bottom: 1px solid transparent;
}

.captwiki-pricing__features--divided .captwiki-pricing__feature {
	border-bottom-color: #eef0f4;
}

.captwiki-pricing__features--divided .captwiki-pricing__feature:last-child {
	border-bottom-color: transparent;
}

.captwiki-pricing[style*="text-align: center"] .captwiki-pricing__feature,
.captwiki-pricing[style*="text-align:center"] .captwiki-pricing__feature {
	justify-content: center;
}

.captwiki-pricing[style*="text-align: right"] .captwiki-pricing__feature,
.captwiki-pricing[style*="text-align:right"] .captwiki-pricing__feature {
	flex-direction: row-reverse;
}

.captwiki-pricing__feature-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	line-height: 1;
	color: var( --captwiki-pb-accent );
}

.captwiki-pricing__feature-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.captwiki-pricing__feature-icon i {
	font-size: inherit;
	font-style: normal;
}

.captwiki-pricing__feature-text {
	color: #374151;
}

.captwiki-pricing__feature.is-excluded {
	opacity: 0.85;
}

.captwiki-pricing__feature.is-excluded .captwiki-pricing__feature-icon {
	color: #cbd0d8;
}

.captwiki-pricing__feature.is-excluded .captwiki-pricing__feature-text {
	color: #9ca3af;
	text-decoration: line-through;
}

/* ── Footer / button ───────────────────────────────────── */
.captwiki-pricing__footer {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.captwiki-pricing__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	background: var( --captwiki-pb-accent );
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.captwiki-pricing__btn:hover {
	transform: translateY( -1px );
}

.captwiki-pricing__btn-icon {
	display: inline-flex;
	align-items: center;
}

.captwiki-pricing__btn-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.captwiki-pricing__btn-icon i {
	font-style: normal;
}

.captwiki-pricing__note {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: #9ca3af;
}
