/**
 * NextDash — Subscription Card UI (frontend product page)
 */

/* Fallback values if the admin hasn't set a primary color yet.
   The real values are injected per-request as an inline style from
   get_option('nextdash_settings')['primary_color']. */
:root {
	--nd-sub-primary: #ff6600;
	--nd-sub-primary-dark: #d95600;
	--nd-sub-primary-soft: rgba(255, 102, 0, 0.12);
	--nd-sub-primary-border: rgba(255, 102, 0, 0.35);
}

/* ─── Card list wrapper ──────────────────────────────── */
.nd-sub-cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0 0 20px;
	padding: 0;
}

/* ─── Two-group layout (One-time purchase + Subscribe and Save) ─
   Active on variable subscriptions when both groups are present.
   Each group has a small uppercase label above a white "block" card
   that contains the individual option rows. */
.nd-sub-cards--grouped {
	gap: 20px;
}

.nd-sub-cards__group {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ─── Block card container ────────────────────────────── */
/* Base reset: transparent, no border/padding. The "fieldset" styling
   (border + legend label + inner padding) is only applied to the
   subscribe group below. The one-time group just uses this as a thin
   structural wrapper so its card renders stand-alone, as before. */
.nd-sub-cards__block {
	position: relative;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	overflow: visible; /* allow "Most Popular" pill to overhang */
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Subscribe block gets the full fieldset/legend treatment. */
.nd-sub-cards__group--subscribe .nd-sub-cards__block {
	border: 1.5px solid #646464;
	border-radius: 18px;
	padding: 19px 14px 14px;
}

/* ─── Subscribe block: "legend" label sits on the top border ──
   Absolute-positioned label with a page-coloured background that
   visually "cuts out" a section of the block border — matching the
   reference design (fieldset/legend pattern). */
.nd-sub-cards__group--subscribe .nd-sub-cards__block > .nd-sub-cards__group-label {
	position: absolute;
	top: 0;
	left: 24px;
	transform: translateY(-50%);
	z-index: 3;
	padding: 0 10px;
	background: #fff; /* match typical page background so border is cut cleanly */
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: #1a1f36;
	line-height: 1;
	pointer-events: none;
}

/* ─── Cards inside a block: standalone white rows ─────── */
/* Each option row keeps its own visible border + white background,
   matching the reference "pill" look. */
.nd-sub-cards__block .nd-sub-card {
	border-color: #e4e7f0;
	background: #fff;
	box-shadow: none;
}

.nd-sub-cards__block .nd-sub-card:hover {
	border-color: #b8bfda;
	background: #fff;
	box-shadow: none;
}

.nd-sub-cards__block .nd-sub-card.nd-sub-card--selected {
	border-color: var(--nd-sub-primary);
	background: #fff;
	box-shadow: 0 0 0 1px var(--nd-sub-primary);
}

/* Hide native WooCommerce variation table & single-add-to-cart button
   when the card UI is active */
.nd-sub-cards ~ .variations_form .variations,
.nd-sub-cards ~ .variations_form .woocommerce-variation-add-to-cart,
.nd-sub-cards ~ .single_add_to_cart_button,
.nd-sub-cards ~ form.cart .single_add_to_cart_button {
	display: none !important;
}

/* ─── Individual card ────────────────────────────────── */
.nd-sub-card {
	position: relative;
	border-radius: 14px;
	border: 1.5px solid #e4e7f0;
	background: #fff;
	/* overflow stays visible so the floating "Most Popular" pill can sit on the top edge. */
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nd-sub-card:hover {
	border-color: #b8bfda;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.nd-sub-card.nd-sub-card--selected {
	border-color: var(--nd-sub-primary);
	box-shadow: 0 0 0 1px var(--nd-sub-primary);
}

/* ─── "Most Popular" floating pill ───────────────────── */
/* Uses the card's own --nd-sub-pill-solid* variables so the ribbon colour
   matches the admin "Badge colour" selection. Falls back to the storefront
   primary colour if the card has no badge-type class. */
.nd-sub-card__popular {
	position: absolute;
	top: 0;
	right: 16px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--nd-sub-pill-solid, var(--nd-sub-primary));
	color: var(--nd-sub-pill-solid-fg, #fff);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 999px;
	box-shadow: 0 2px 8px var(--nd-sub-pill-shadow, var(--nd-sub-primary-soft)),
	            0 0 0 3px #fff;
	z-index: 2;
	white-space: nowrap;
	line-height: 1.2;
}

/* Tiny star dot before the label for extra "popular" polish. */
.nd-sub-card__popular::before {
	content: "★";
	font-size: 10px;
	line-height: 1;
}

/* ─── Inner label (flex row) ─────────────────────────── */
.nd-sub-card__inner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 13px;
	cursor: pointer;
	user-select: none;
	margin: 0 !important;
	width: 100%;
	box-sizing: border-box;
}

/* A hair of extra top padding when the popular pill overhangs the border,
   so it sits cleanly clear of any content beneath it. */
.nd-sub-card--has-popular .nd-sub-card__inner {
	padding-top: 10px;
}

/* ─── Radio button ───────────────────────────────────── */
.nd-sub-card input[type="radio"] {
	width: 18px;
	height: 18px;
	min-width: 18px;
	margin: 2px 0 0;
	/* accent-color: var(--nd-sub-primary); */
	cursor: pointer;
	flex-shrink: 0;
}

/* ─── Card content area ──────────────────────────────── */
/* Two-column flex row:
     __body      → flex: 1 (left column; title + badges + meta stacked)
     __price-wrap → auto width (right column; price + period)
   Both columns vertically centred so the price sits beside the middle
   of the title + meta stack regardless of how many meta lines render. */
.nd-sub-card__content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

/* Left column — vertical stack of the title-row (title + inline badges)
   and any meta lines (sign-up fee / trial / per-period) stacked beneath.
   Small gap separates stacked children for breathing room. */
.nd-sub-card__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Title row — holds the card title plus any inline text badges side-by-side
   (e.g. "Subscribe and save" + "Popular" pill). Wraps on narrow widths so
   the badge drops beneath the title instead of overflowing the card. */
.nd-sub-card__title-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.nd-sub-card__title {
	font-size: 14px;
	font-weight: 600;
	color: #1a1f36;
	line-height: 1.3;
	flex: 1 1 auto;
	min-width: 0;
}

/* Explicit title variants (storefront + admin parity; avoids flex squeeze hiding copy) */
.nd-sub-card__title--one-time,
.nd-sub-card__title--variation {
	display: block;
}

/* Subscribe heading (simple products) uses the same typography as the
   variation card title so the inline "Popular" badge sits with the same
   visual weight as on variable-subscription cards. */
.nd-sub-card__title--subscribe {
	display: block;
	min-width: 0;
}

@media (max-width: 480px) {
	/* Shrink the gap between left column (body) and right column
	   (price-wrap) so the title keeps maximum room on narrow screens. */
	.nd-sub-card__content {
		gap: 8px;
	}

	.nd-sub-cards--variable .nd-sub-card:not(.nd-sub-card--one-time) .nd-sub-card__title {
		font-size: 14px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.nd-sub-cards--variable .nd-sub-card:not(.nd-sub-card--one-time) .nd-sub-card__price-wrap {
		gap: 2px;
	}

	.nd-sub-cards--variable .nd-sub-card:not(.nd-sub-card--one-time) .nd-sub-card__price {
		font-size: 15px;
	}

	.nd-sub-cards--variable .nd-sub-card:not(.nd-sub-card--one-time) .nd-sub-card__period {
		font-size: 12px;
	}

	.nd-sub-cards--variable .nd-sub-card:not(.nd-sub-card--one-time) .nd-sub-card__original-price {
		font-size: 12px;
	}

	/* Tighten the inner padding on variation cards so the row stays
	   compact on narrow screens. */
	.nd-sub-cards--variable .nd-sub-card:not(.nd-sub-card--one-time) .nd-sub-card__inner {
		padding: 10px 12px;
		gap: 10px;
	}
}

/* ─── Badges ─────────────────────────────────────────── */
.nd-sub-card__badges {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	align-items: center;
}

.nd-sub-card__badge {
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 20px;
	white-space: nowrap;
	/* Pulls from the per-card CSS variables below so the text badge always
	   matches the card's colour scope. Legacy --{type} classes still win
	   when explicitly set for backward compat with older markup. */
	background: var( --nd-sub-pill-bg, #fff3e0 );
	color: var( --nd-sub-pill-fg, #c45c00 );
}

/* ─── Per-card colour scope ──────────────────────────
   Each card root gets a .nd-sub-card--badge-{type} class based on the
   admin's "Badge colour" selector. The class sets the three pill
   variables which are then consumed by BOTH the small text badge and
   the "Most Popular" ribbon, so they always visually match. */
.nd-sub-card--badge-primary {
	--nd-sub-pill-bg: var( --nd-sub-primary-soft, #fff3e0 );
	--nd-sub-pill-fg: var( --nd-sub-primary-dark, #c45c00 );
	--nd-sub-pill-solid: var( --nd-sub-primary, #ff6600 );
	--nd-sub-pill-solid-fg: #fff;
	--nd-sub-pill-shadow: var( --nd-sub-primary-soft, rgba(255,102,0,0.25) );
}

.nd-sub-card--badge-discount {
	--nd-sub-pill-bg: #fff3e0;
	--nd-sub-pill-fg: #c45c00;
	--nd-sub-pill-solid: #e07000;
	--nd-sub-pill-solid-fg: #fff;
	--nd-sub-pill-shadow: rgba(224, 112, 0, 0.25);
}

.nd-sub-card--badge-popular {
	--nd-sub-pill-bg: #ede9ff;
	--nd-sub-pill-fg: #5a0fc8;
	--nd-sub-pill-solid: #6d28d9;
	--nd-sub-pill-solid-fg: #fff;
	--nd-sub-pill-shadow: rgba(109, 40, 217, 0.25);
}

.nd-sub-card--badge-info {
	--nd-sub-pill-bg: #e3f0ff;
	--nd-sub-pill-fg: #0060cc;
	--nd-sub-pill-solid: #0066cc;
	--nd-sub-pill-solid-fg: #fff;
	--nd-sub-pill-shadow: rgba(0, 102, 204, 0.25);
}

.nd-sub-card--badge-success {
	--nd-sub-pill-bg: #e6f8f0;
	--nd-sub-pill-fg: #0a7d4a;
	--nd-sub-pill-solid: #0a9254;
	--nd-sub-pill-solid-fg: #fff;
	--nd-sub-pill-shadow: rgba(10, 146, 84, 0.25);
}

.nd-sub-card--badge-custom {
	--nd-sub-pill-bg: #eef0ff;
	--nd-sub-pill-fg: #4357cc;
	--nd-sub-pill-solid: #4357cc;
	--nd-sub-pill-solid-fg: #fff;
	--nd-sub-pill-shadow: rgba(67, 87, 204, 0.25);
}

/* ─── Page-level price replacement ───────────────────── */
/* Used when a card is selected and the summary <p class="price"> is swapped
   out via JS. Keeps WooCommerce's base price typography and adds a compact
   meta line beneath for sign-up fee / trial info. */
.nd-sub-page-price__per {
	font-weight: 500;
	font-size: 0.85em;
	color: inherit;
	opacity: 0.8;
	text-transform: capitalize;
}

/* Hidden for now — the sign-up fee / free-trial info is already shown
   per-row in the subscription cards below, so repeating it under the
   main page price is redundant. Remove this rule (or flip `display`
   back to `block`) to re-enable. */
.nd-sub-page-price__meta {
	display: none;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 500;
	color: var( --nd-sub-primary-dark, #555 );
	opacity: 0.9;
}

.nd-sub-card__badge--discount {
	background: #fff3e0;
	color: #c45c00;
}

.nd-sub-card__badge--popular {
	background: #ede9ff;
	color: #5a0fc8;
}

.nd-sub-card__badge--info {
	background: #e3f0ff;
	color: #0060cc;
}

.nd-sub-card__badge--success {
	background: #e6f8f0;
	color: #0a7d4a;
}

.nd-sub-card__badge--custom {
	background: #eef0ff;
	color: #4357cc;
}

/* ─── Price ──────────────────────────────────────────── */
.nd-sub-card__price-wrap {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-left: auto;
	flex-shrink: 0;
}

.nd-sub-card__price {
	font-size: 16px;
	font-weight: 700;
	color: #1a1f36;
	white-space: nowrap;
}

.nd-sub-card__price .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.nd-sub-card__original-price {
	font-size: 13px;
	color: #9aa0b5;
	text-decoration: line-through;
	white-space: nowrap;
}

.nd-sub-card__original-price .woocommerce-Price-amount {
	font-size: inherit;
	color: inherit;
}

/* Billing period label — "/ Month" shown next to price. Uppercased first
   letter via CSS so translations remain in their source form. */
.nd-sub-card__period {
	font-size: 12px;
	font-weight: 500;
	color: #6b7280;
	white-space: nowrap;
	text-transform: capitalize;
}

/* ─── Meta rows (per-period, trial, sign-up) ─────────── */
.nd-sub-card__meta {
	font-size: 12px;
	color: #6b7280;
	line-height: 1.4;
	margin: 0;
}

.nd-sub-card__meta .woocommerce-Price-amount {
	font-size: inherit;
	color: inherit;
}

.nd-sub-card__frequency {
	margin-bottom: 6px;
}

.nd-sub-card__frequency select,
.nd-sub-frequency-select {
	width: 100%;
	height: 38px;
	border: 1px solid #d1d5e0;
	border-radius: 8px;
	padding: 0 32px 0 12px;
	font-size: 13px;
	color: #374151;
	background-color: #f8f9fc;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 4 5-4' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	box-sizing: border-box;
}

.nd-sub-card__frequency select:focus,
.nd-sub-frequency-select:focus {
	outline: none;
	border-color: var(--nd-sub-primary);
	box-shadow: 0 0 0 2px var(--nd-sub-primary-soft);
}

/* ─── CTA row: Add to cart (full) + optional View cart ─── */
.nd-sub-cta {
	display: flex;
	align-items: stretch;
	gap: 10px;
	margin-top: 4px;
}

/* Primary "Add to cart" — full width by default; shrinks to 70% only when
   the "has-items" modifier is present on the CTA row. */
.nd-sub-add-to-cart.button {
	flex: 1 1 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-height: 48px;
	padding: 14px 20px;
	border: none;
	border-radius: 10px;
	background: var(--nd-sub-primary) !important;
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: flex-basis 0.25s ease, background-color 0.15s ease,
	            opacity 0.15s ease, transform 0.1s ease;
	box-shadow: 0 2px 8px var(--nd-sub-primary-soft);
	word-break: normal !important;
}

.nd-sub-add-to-cart.button:hover {
	background: var(--nd-sub-primary-dark);
	color: #fff !important;
}

.nd-sub-add-to-cart.button:active {
	transform: translateY(0);
	opacity: 0.95;
}

.nd-sub-add-to-cart.button.loading {
	opacity: 0.7;
	cursor: wait;
}

.nd-sub-add-to-cart.nd-sub-add-to-cart--added {
	background: var(--nd-sub-primary-dark);
}

/* Secondary "View cart" — hidden by default, revealed only when
   the cart has at least one item (server-side initial state or JS after add). */
.nd-sub-view-cart.button {
	flex: 0 0 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	/* min-height: 48px; */
	padding: 0;
	border: 1.5px solid var(--nd-sub-primary-border) !important;
	border-radius: 10px;
	background: #fff !important;
	color: var(--nd-sub-primary) !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	pointer-events: none;
	transform: translateX(6px);
	transition: flex-basis 0.25s ease, opacity 0.2s ease 0.05s,
	            transform 0.25s ease, background-color 0.15s ease,
	            border-color 0.15s ease, color 0.15s ease;
}

.nd-sub-cta--has-items .nd-sub-add-to-cart.button {
	flex-basis: 70%;
}

.nd-sub-cta--has-items .nd-sub-view-cart.button {
	flex: 0 0 calc(30% - 10px);
	padding: 12px 14px;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(0);
}

.nd-sub-view-cart.button:hover {
	background: var(--nd-sub-primary-soft);
	border-color: var(--nd-sub-primary);
	color: var(--nd-sub-primary) !important;
}

.nd-sub-view-cart.button:active {
	transform: translateY(0);
}

.nd-sub-view-cart__icon {
	flex-shrink: 0;
}

/* Compact mode: hide the label on small buttons, keep the icon */
@media (max-width: 360px) {
	.nd-sub-view-cart__label {
		display: none;
	}
}

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 480px) {
	.nd-sub-card__price {
		font-size: 15px;
	}
}