/*
 * HairCoPilot theme — public plan cards.
 *
 * Restored from the archived Membership renderer (hcgpt-membership
 * assets/css/pricing-cards.css, "Variant D" from mockups/pricing-D-hybrid.html):
 * centered cards, dividers, gradient icon tile, checkmark features, oversized
 * price at the bottom, featured tier with gradient border and CTA.
 *
 * Rendered by HCGSite\render_plan_cards() from the Node billing catalogue.
 * Tier styles are chosen by stable plan slug (pro = featured,
 * proplus = premium), never by order or price. The Freemium tier and the
 * badge pill of the original are not part of the current offer and were
 * removed; the trial/renewal terms line was added under the price.
 */

/* -----------------------------------------------------------------
 * 0) Tokens (scoped under .hcgpt-mb-pricing-grid)
 *
 * Surface / text / border tokens resolve from the host theme's
 * tone-aware tokens (--hcg-*) when present, so the cards follow
 * light / dark / auto instead of being locked to a white card.
 * The hardcoded values are the standalone fallback for when the
 * plugin runs outside the HairColorGPT theme.
 * --pf-on-ink is the contrasting text colour for "ink" solid
 * buttons (standard / premium), which use --pf-text as background.
 * --------------------------------------------------------------- */
.hcgpt-mb-pricing-grid {
	--pf-bg:        var(--hcg-bg, #fafafa);
	--pf-surface:   var(--hcg-surface, #ffffff);
	--pf-surface-2: var(--hcg-surface-2, #fafafa);
	--pf-border:    var(--hcg-border, rgba(23, 23, 23, 0.08));
	--pf-border-strong: var(--hcg-border-strong, rgba(23, 23, 23, 0.15));
	--pf-text:      var(--hcg-text, #171717);
	--pf-text-2:    var(--hcg-text-2, #262626);
	--pf-muted:     var(--hcg-muted, #737373);
	--pf-on-ink:    var(--hcg-bg, #ffffff);
	--pf-accent:    #6e3aff;
	--pf-accent-2:  #ff3a8c;
	--pf-accent-3:  #ff8a3a;
	--pf-gradient:  linear-gradient(135deg, #6e3aff 0%, #ff3a8c 50%, #ff8a3a 100%);
	--pf-radius:    14px;
	--pf-radius-lg: 18px;
}

/* -----------------------------------------------------------------
 * 1) Adaptive grid
 *
 * `auto-fit + minmax(260px, 1fr)` is the magic: with 2 visible
 * cards the grid is 2 cols, with 4 it's 4, never empty cells.
 * `max-width` caps the row so 5 levels go 4-on-row + 1 below
 * (instead of 5-tiny on huge displays). `justify-content: center`
 * keeps the row centered when fewer than max cards are visible.
 * --------------------------------------------------------------- */
.hcgpt-mb-pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 22px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 24px 16px;
	justify-content: center;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--pf-text);
}

/* Explicit column counts by visible-card count. `auto-fit` alone
 * under-fills to 3 columns when the host container is ~1120px wide
 * (4×260 + gaps does not fit), so 4 plans wrapped to a second row.
 * These deterministic rules keep 4 cards on one row; the media
 * queries below collapse them gracefully on narrow viewports. */
.hcgpt-mb-pricing-grid[data-card-count="2"] { grid-template-columns: repeat(2, 1fr); }
.hcgpt-mb-pricing-grid[data-card-count="3"] { grid-template-columns: repeat(3, 1fr); }
.hcgpt-mb-pricing-grid[data-card-count="4"] { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1040px) {
	.hcgpt-mb-pricing-grid[data-card-count="3"],
	.hcgpt-mb-pricing-grid[data-card-count="4"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.hcgpt-mb-pricing-grid[data-card-count] { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------
 * 2) Card chrome (OUTSIDE = A)
 * --------------------------------------------------------------- */
.hcgpt-mb-pricing-card {
	min-width: 0;
	overflow-wrap: anywhere;
	background: var(--pf-surface);
	border: 1px solid var(--pf-border);
	border-radius: var(--pf-radius-lg);
	padding: 32px 28px 28px;
	display: flex;
	flex-direction: column;
	text-align: center;
	position: relative;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
}

.hcgpt-mb-pricing-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 36px -16px rgba(23, 23, 23, 0.12);
}

/* Featured tier — gradient border (single source of "look at me"). */
.hcgpt-mb-pricing-card--featured {
	border-color: transparent;
	background:
		linear-gradient(var(--pf-surface), var(--pf-surface)) padding-box,
		linear-gradient(135deg, #6e3aff, #ff3a8c, #ff8a3a) border-box;
	border: 2px solid transparent;
	box-shadow: 0 16px 40px -16px rgba(110, 58, 255, 0.25);
}

.hcgpt-mb-pricing-card--featured:hover {
	box-shadow: 0 20px 48px -16px rgba(110, 58, 255, 0.35);
}

/* Premium tier — dark CTA, otherwise same outer shape as standard. */
.hcgpt-mb-pricing-card--premium {
	border-color: var(--pf-text);
	border-width: 1.5px;
}

/* -----------------------------------------------------------------
 * 4) Icon tile (INSIDE = B)
 * --------------------------------------------------------------- */
.hcgpt-mb-pricing-card__icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px;
	background: linear-gradient(135deg, rgba(110, 58, 255, 0.08), rgba(255, 58, 140, 0.08));
	color: var(--pf-accent);
	font-size: 24px;
	line-height: 1;
}

/* Tier icon — hardcoded Dashicon (see PricingPage::tier_dashicon). */
.hcgpt-mb-pricing-card__icon .dashicons {
	font-size: 28px;
	width: 28px;
	height: 28px;
}

.hcgpt-mb-pricing-card--featured .hcgpt-mb-pricing-card__icon {
	background: var(--pf-gradient);
	color: #fff;
	box-shadow: 0 6px 16px rgba(110, 58, 255, 0.35);
}

/* -----------------------------------------------------------------
 * 5) Name / subtitle / tagline
 * --------------------------------------------------------------- */
/* Scoped under the grid: the theme's `.hcg-site h2` (0,1,1) would otherwise win. */
.hcgpt-mb-pricing-grid .hcgpt-mb-pricing-card__name {
	font-family: inherit;
	line-height: 1.3;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pf-text);
	margin: 0 0 8px;
}

.hcgpt-mb-pricing-card--featured .hcgpt-mb-pricing-card__name {
	background: linear-gradient(135deg, #6e3aff, #ff3a8c);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.hcgpt-mb-pricing-card__subtitle {
	font-size: 14px;
	font-weight: 600;
	color: var(--pf-text);
	margin: 0 0 12px;
}

.hcgpt-mb-pricing-card__tagline {
	font-size: 13px;
	line-height: 1.5;
	color: var(--pf-muted);
	min-height: 50px; /* keep cards aligned vertically */
	margin: 0;
}

/* -----------------------------------------------------------------
 * 6) Dividers
 * --------------------------------------------------------------- */
.hcgpt-mb-pricing-card__divider {
	border: none;
	border-top: 1px solid var(--pf-border);
	margin: 22px 0;
}

/* Pin the price + CTA block to the bottom of every card,
 * regardless of how many features each plan lists.
 *
 * The card is `display: flex; flex-direction: column`. The grid
 * already gives every card the same height (auto-fit + stretch).
 * The divider that sits BETWEEN features and price gets
 * `margin-top: auto`, which in a flex column claims all the
 * vertical space left over — pushing the divider, price-wrap
 * and CTA to the bottom of the card. Result: prices and
 * buttons line up across all cards whatever the number of
 * features each plan lists.
 *
 * The selector targets specifically the SECOND divider
 * (the one immediately following the features list) — the
 * first divider (between tagline and features) keeps its
 * natural margin so the upper section stays anchored to the
 * top.
 */
.hcgpt-mb-pricing-card__features + .hcgpt-mb-pricing-card__divider {
	margin-top: auto;
}

.hcgpt-mb-pricing-card--featured .hcgpt-mb-pricing-card__divider {
	border-image: linear-gradient(90deg, transparent, rgba(110, 58, 255, 0.25), transparent) 1;
}

/* -----------------------------------------------------------------
 * 7) Features (checkmarks, left-aligned content inside centered card)
 * --------------------------------------------------------------- */
.hcgpt-mb-pricing-card__features {
	list-style: none;
	padding: 0;
	/* Minimum gap above the bottom divider on the tallest card (margin-top: auto there is 0). */
	margin: 0 0 22px;
	text-align: left;
	min-height: 110px;
}

.hcgpt-mb-pricing-card__features li {
	font-size: 13px;
	line-height: 1.55;
	color: var(--pf-text-2);
	padding: 5px 0;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.hcgpt-mb-pricing-card__features li::before {
	content: '';
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%236e3aff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5L6.5 11.5L12.5 5'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
	margin-top: 4px;
}

.hcgpt-mb-pricing-card__features-placeholder {
	color: var(--pf-muted);
	font-style: italic;
}

.hcgpt-mb-pricing-card__features--empty li::before {
	display: none;
}

/* -----------------------------------------------------------------
 * 8) Price (oversized, centered, B's treatment)
 * --------------------------------------------------------------- */
.hcgpt-mb-pricing-card__price-wrap {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
	margin-bottom: 4px;
}

.hcgpt-mb-pricing-card__price-amount {
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--pf-text);
	line-height: 1;
}

.hcgpt-mb-pricing-card__price-cycle {
	font-size: 14px;
	color: var(--pf-muted);
	font-weight: 500;
}

/* Trial / renewal terms from the catalogue (trialDays, price, interval). */
.hcgpt-mb-pricing-card__terms {
	font-size: 12px;
	line-height: 1.5;
	color: var(--pf-muted);
	margin: 8px 0 0;
}

/* -----------------------------------------------------------------
 * 9) CTA buttons (tier ladder)
 * --------------------------------------------------------------- */
.hcgpt-mb-pricing-card__cta {
	display: block;
	width: 100%;
	padding: 13px 20px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	margin-top: 16px;
	transition: all 0.18s ease;
	box-sizing: border-box;
	color: var(--pf-text);
	background: transparent;
}

.hcgpt-mb-pricing-card__cta--standard {
	background: var(--pf-text);
	color: var(--pf-on-ink);
}
.hcgpt-mb-pricing-card__cta--standard:hover {
	background: var(--pf-text-2);
	color: var(--pf-on-ink);
}

.hcgpt-mb-pricing-card__cta--featured {
	background: var(--pf-gradient);
	color: #fff;
	box-shadow: 0 8px 20px rgba(110, 58, 255, 0.35);
}
.hcgpt-mb-pricing-card__cta--featured:hover {
	box-shadow: 0 12px 28px rgba(110, 58, 255, 0.45);
	transform: translateY(-1px);
	color: #fff;
}

.hcgpt-mb-pricing-card__cta--premium {
	background:
		linear-gradient(var(--pf-text), var(--pf-text)) padding-box,
		var(--pf-gradient) border-box;
	color: var(--pf-on-ink);
	border: 2px solid transparent;
}
.hcgpt-mb-pricing-card__cta--premium:hover {
	background:
		linear-gradient(var(--pf-text-2), var(--pf-text-2)) padding-box,
		var(--pf-gradient) border-box;
	color: var(--pf-on-ink);
}

/* -----------------------------------------------------------------
 * 10) Mobile
 * --------------------------------------------------------------- */
@media (max-width: 540px) {
	.hcgpt-mb-pricing-grid {
		gap: 14px;
		padding: 16px 8px;
	}
	.hcgpt-mb-pricing-card {
		padding: 26px 22px 22px;
	}
	.hcgpt-mb-pricing-card__price-amount {
		font-size: 32px;
	}
}

/* -----------------------------------------------------------------
 * 11) Plan comparison (plans page only), ported from Node
 *     PricingComparison: a real table, PRO column tinted like its card,
 *     four compact columns at 390px with no horizontal scroll.
 * --------------------------------------------------------------- */
.hcg-compare { --cmp-tick: #a58bff; max-width: 1180px; margin: 24px auto 64px; padding: 0 16px; }
html[data-hcgpt-theme="light"] .hcg-compare,
body.hcgpt-theme-light .hcg-compare { --cmp-tick: #6e3aff; }
@media (prefers-color-scheme: light) {
	html[data-hcgpt-theme="system"] .hcg-compare,
	body.hcgpt-theme-system .hcg-compare { --cmp-tick: #6e3aff; }
}
.hcg-compare .hcg-sec-head { margin-bottom: 24px; }
.hcg-compare .hcg-section-sub { margin-left: auto; margin-right: auto; color: var(--hcg-muted); }
/* Section-title scale of the home page, over the generic .hcg-site h2. */
.hcg-site .hcg-compare .hcg-section-title { font: 700 clamp(28px, 5vw, 44px)/1.1 var(--hcg-font-heading); letter-spacing: -.025em; margin: 0; }
.hcg-compare table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: var(--hcg-surface); color: var(--hcg-text); border: 1px solid var(--hcg-border); border-radius: 18px; font-size: 14px; }
.hcg-compare caption { caption-side: bottom; text-align: left; color: var(--hcg-muted); font-size: 12px; padding: 14px 4px 0; }
.hcg-compare th, .hcg-compare td { padding: 13px 16px; border-bottom: 1px solid var(--hcg-border); vertical-align: middle; overflow-wrap: anywhere; }
.hcg-compare thead th { vertical-align: bottom; padding-top: 22px; }
.hcg-compare thead th:first-child { width: 40%; border-top-left-radius: 18px; }
.hcg-compare thead th:last-child { border-top-right-radius: 18px; }
.hcg-compare td { text-align: center; font-weight: 600; }
.hcg-compare tbody th { text-align: left; font-weight: 600; }
.hcg-compare__group th { position: relative; background: var(--hcg-surface-2); padding: 17px 18px 17px 48px; }
.hcg-compare__group .dashicons { position: absolute; left: 17px; top: 20px; color: var(--cmp-tick); }
.hcg-compare__group-title { display: block; font-size: 15px; color: var(--hcg-text); }
.hcg-compare__group-intro { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--hcg-muted); }
.hcg-compare__name { display: block; font-size: 13px; letter-spacing: .18em; }
.hcg-compare__price { display: block; margin-top: 6px; color: var(--hcg-muted); font-size: 13px; font-weight: 400; }
.hcg-compare__price b { display: block; color: var(--hcg-text); font-size: 22px; }
.hcg-compare .is-pro { background: color-mix(in srgb, #6e3aff 7%, transparent); }
.hcg-compare thead .is-pro { box-shadow: inset 0 3px #6e3aff; }
.hcg-compare__tick { color: var(--cmp-tick); font-size: 20px; }
.hcg-compare__dash { color: var(--hcg-muted); }
.hcg-compare tfoot td { padding-block: 18px; border-bottom: 0; }
.hcg-compare tfoot .hcg-btn { width: 100%; justify-content: center; padding: 11px 8px; font-size: 12px; }
.hcg-compare .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 640px) {
	.hcg-compare { padding: 0; }
	.hcg-compare table { font-size: 12px; border-radius: 14px; }
	.hcg-compare th, .hcg-compare td { padding: 11px 6px; }
	.hcg-compare thead th:first-child { width: 37%; }
	.hcg-compare__name { font-size: 11px; letter-spacing: .1em; }
	.hcg-compare__price { font-size: 11px; }
	.hcg-compare__price b { font-size: 16px; }
	.hcg-compare tfoot .hcg-btn { padding: 10px 3px; font-size: 10px; }
	.hcg-compare__group th { padding: 13px 12px 13px 38px; }
	.hcg-compare__group .dashicons { left: 10px; top: 16px; }
	.hcg-compare__group-title { font-size: 14px; }
	.hcg-compare__group-intro { font-size: 11px; }
}

/* Approved full-page proposal: these card refinements belong to Plans only. */
.hcg-site[data-site-role="plans"] .hcg-site-banner + .hcg-site-lead {
	padding: 16px 24px; border-radius: 18px; background: var(--hcg-gradient-soft);
	font-size: 16px; line-height: 1.5;
}
.hcg-site[data-site-role="plans"] .hcgpt-mb-pricing-grid { font-family: var(--hcg-font-body); }
.hcg-site[data-site-role="plans"] .hcgpt-mb-pricing-card { text-align: left; }
.hcg-site[data-site-role="plans"] .hcgpt-mb-pricing-card__icon { margin-left: 0; margin-right: 0; }
.hcg-site[data-site-role="plans"] .hcgpt-mb-pricing-card__name {
	font: 700 32px/1.1 var(--hcg-font-heading); letter-spacing: -.02em;
}
.hcg-site[data-site-role="plans"] .hcgpt-mb-pricing-card__price-wrap { justify-content: flex-start; }
.hcg-site[data-site-role="plans"] .hcgpt-mb-pricing-card__price-amount { font-family: var(--hcg-font-heading); font-size: 40px; }
.hcg-plans-trial { align-self: flex-start; padding: 4px 10px; margin-top: 14px; border-radius: 999px; background: color-mix(in srgb, #6e3aff 9%, transparent); color: var(--cmp-tick, #a58bff); font-size: 12px; font-weight: 700; }
html[data-hcgpt-theme="light"] .hcg-plans-trial,
body.hcgpt-theme-light .hcg-plans-trial { color: #6e3aff; }
@media (prefers-color-scheme: light) {
	html[data-hcgpt-theme="system"] .hcg-plans-trial,
	body.hcgpt-theme-system .hcg-plans-trial { color: #6e3aff; }
}

/* One horizontal quote banner below the comparison, with no enterprise claims. */
.hcg-salon-groups {
	display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: center;
	gap: 32px; width: calc(100% - 32px); max-width: 1148px; margin: 0 auto 48px; padding: 36px;
	border: 2px solid transparent; border-radius: 24px;
	background: linear-gradient(#181818, #181818) padding-box, var(--hcg-gradient) border-box;
	box-shadow: 0 12px 32px -24px #6e3aff; color: #fff;
}
.hcg-salon-groups .hcg-eyebrow { display: block; margin-bottom: 14px; color: #c4c4ca; }
.hcg-site .hcg-salon-groups h2 { font: 700 clamp(30px, 3.5vw, 44px)/1.08 var(--hcg-font-heading); letter-spacing: -.025em; margin: 0 0 18px; color: #fff; }
.hcg-site .hcg-salon-groups p { font-size: 16px; line-height: 1.6; color: #d2d2d7; margin: 0; }
.hcg-salon-groups__action { display: grid; justify-items: center; gap: 12px; min-width: 0; }
.hcg-salon-groups__action img { display: block; width: 100%; max-width: 360px; height: auto; }
.hcg-salon-groups__action .hcg-btn { justify-content: center; gap: 10px; width: 100%; max-width: 270px; }
.hcg-site .hcg-salon-groups__action p { font-size: 12px; text-align: center; }
.hcg-salon-groups a:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
@media (max-width: 760px) {
	.hcg-salon-groups { grid-template-columns: 1fr; padding: 28px; gap: 24px; }
	.hcg-salon-groups__action img { max-width: 300px; }
}
@media (max-width: 640px) {
	.hcg-salon-groups { width: 100%; padding: 24px; }
	.hcg-site[data-site-role="plans"] .hcg-site-banner + .hcg-site-lead { padding: 14px 16px; }
}