/*
 * HCGPT Membership — pricing cards (frontend).
 *
 * Variant D from the mockups (mockups/pricing-D-hybrid.html):
 *
 *   OUTSIDE — "Davide-faithful": clean centered layout with
 *     horizontal dividers, top-center pill badge, gradient
 *     border on the featured tier.
 *
 *   INSIDE — "Glass & Glow": gradient icon tile, checkmark
 *     features, oversized modern price, hover lift.
 *
 * Adaptive grid:
 *   `grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))`
 * → with 2 visible levels you get 2 columns, with 4 you get 4.
 *   Never empty cells. On narrow viewports collapses to 1 column.
 *
 * Loaded by `Assets::enqueue_pricing_cards()` only when
 * `[hcgpt-membership-pricing]` is actually rendered, so this CSS
 * never weighs on a page that doesn't show pricing.
 *
 * @package HCGPT\Membership
 */

/* -----------------------------------------------------------------
 * 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 {
	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;
}

/* -----------------------------------------------------------------
 * 3) Top-center badge pill (A's structure, B's gradient fill)
 * --------------------------------------------------------------- */
.hcgpt-mb-pricing-card__badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, #6e3aff, #ff3a8c);
	color: #fff;
	padding: 6px 16px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(110, 58, 255, 0.3);
}

/* -----------------------------------------------------------------
 * 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
 * --------------------------------------------------------------- */
.hcgpt-mb-pricing-card__name {
	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 4 cards even if FREEMIUM has 2
 * features and PRO+ has 4.
 *
 * 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;
	margin: 0;
	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;
}

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

/* -----------------------------------------------------------------
 * 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--free {
	background: transparent;
	color: var(--pf-muted);
	border: 1.5px solid var(--pf-border-strong);
}
.hcgpt-mb-pricing-card__cta--free:hover {
	background: var(--pf-surface-2);
	color: var(--pf-text);
}

.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;
	}
}