/**
 * XC Tiered Pricing — public-facing styles.
 *
 * Designed to inherit the host theme as completely as possible:
 *   - Font family / size / weight / line-height come from the theme.
 *   - Text colour comes from the theme; structural lines use currentColor
 *     at low opacity so borders adapt to dark/light backgrounds.
 *   - Backgrounds stay transparent unless contrast is required, in which
 *     case a tint derived from currentColor is used.
 *
 * Brand customisation is optional. When a primary/accent colour is set
 * in the plugin settings the display class injects two CSS variables on
 * :root, and the rules below pick them up via `var(--xc-tp-*, currentColor)`
 * — so an unset value gracefully falls back to the theme's text colour.
 */

.xc-tp-pricing-table {
	margin: 1.25em 0;
	padding: 0;
	color: inherit;
	font: inherit;
}

.xc-tp-pricing-title {
	margin: 0 0 0.625em;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	color: inherit;
	line-height: inherit;
}

/* ---------- Base table — structural only ---------- */

.xc-tp-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	background: transparent;
	color: inherit;
	font: inherit;
}

.xc-tp-table caption {
	caption-side: top;
	text-align: left;
}

.xc-tp-table th,
.xc-tp-table td {
	padding: 0.625em 0.75em;
	text-align: left;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	vertical-align: middle;
}

.xc-tp-table th {
	font-weight: 600;
	opacity: 0.72;
}

.xc-tp-row {
	transition: background-color 120ms ease;
}

.xc-tp-unit-price {
	font-weight: 600;
}

.xc-tp-savings-amount {
	color: var(--xc-tp-accent, currentColor);
	font-weight: 600;
}

.xc-tp-savings-percent {
	opacity: 0.7;
	font-size: 0.875em;
	margin-left: 0.25em;
}

/* Active tier — subtle highlight that works on any theme */
.xc-tp-row.xc-tp-active {
	background: color-mix(in srgb, var(--xc-tp-primary, currentColor) 8%, transparent);
	font-weight: 600;
}

/* Fallback for browsers without color-mix support */
@supports not (background: color-mix(in srgb, red, blue)) {
	.xc-tp-row.xc-tp-active {
		background: rgba(127, 127, 127, 0.08);
	}
}

/* ---------- Style: modern (default) ---------- */

.xc-tp-style-modern .xc-tp-table {
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 14%, transparent);
	border-radius: 0.5em;
	overflow: hidden;
}

.xc-tp-style-modern .xc-tp-table thead th {
	background: color-mix(in srgb, currentColor 4%, transparent);
}

.xc-tp-style-modern .xc-tp-table tbody tr + tr {
	border-top: 1px solid;
	border-top-color: color-mix(in srgb, currentColor 8%, transparent);
}

.xc-tp-style-modern .xc-tp-table tbody tr:hover {
	background: color-mix(in srgb, currentColor 3%, transparent);
}

/* ---------- Style: minimal ---------- */

.xc-tp-style-minimal .xc-tp-table thead {
	border-bottom: 2px solid;
	border-bottom-color: color-mix(in srgb, currentColor 30%, transparent);
}

.xc-tp-style-minimal .xc-tp-table tbody tr + tr {
	border-top: 1px solid;
	border-top-color: color-mix(in srgb, currentColor 8%, transparent);
}

/* ---------- Style: bordered ---------- */

.xc-tp-style-bordered .xc-tp-table {
	border: 2px solid var(--xc-tp-primary, currentColor);
	border-radius: 0.25em;
}

.xc-tp-style-bordered .xc-tp-table th,
.xc-tp-style-bordered .xc-tp-table td {
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 12%, transparent);
}

.xc-tp-style-bordered .xc-tp-table thead th {
	background: var(--xc-tp-primary, currentColor);
	color: #fff;
	border-color: var(--xc-tp-primary, currentColor);
}

/* ---------- Style: striped ---------- */

.xc-tp-style-striped .xc-tp-table {
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 12%, transparent);
	border-radius: 0.375em;
	overflow: hidden;
}

.xc-tp-style-striped .xc-tp-table thead th {
	background: color-mix(in srgb, currentColor 5%, transparent);
}

.xc-tp-style-striped .xc-tp-table tbody tr:nth-child(even) {
	background: color-mix(in srgb, currentColor 3%, transparent);
}

/* ---------- Cart notices — theme-friendly ---------- */

.xc-tp-cart-notice,
.xc-tp-next-tier-notice {
	margin: 0 0 1em;
	padding: 0.75em 1em;
	border-left: 3px solid;
	border-radius: 0.25em;
	font: inherit;
	color: inherit;
}

.xc-tp-cart-notice {
	border-left-color: var(--xc-tp-accent, currentColor);
	background: color-mix(in srgb, var(--xc-tp-accent, currentColor) 7%, transparent);
}

.xc-tp-next-tier-notice {
	border-left-color: var(--xc-tp-primary, currentColor);
	background: color-mix(in srgb, var(--xc-tp-primary, currentColor) 7%, transparent);
}

@supports not (background: color-mix(in srgb, red, blue)) {
	.xc-tp-cart-notice,
	.xc-tp-next-tier-notice {
		background: rgba(127, 127, 127, 0.06);
	}
}

/* ---------- Bulk discount indicator on listings ---------- */

.xc-tp-bulk-badge {
	display: inline-block;
	padding: 0.15em 0.55em;
	margin-right: 0.4em;
	background: var(--xc-tp-accent, currentColor);
	color: #fff;
	border-radius: 0.25em;
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.4;
	vertical-align: middle;
}

.xc-tp-from {
	opacity: 0.7;
	font-size: 0.875em;
	margin-left: 0.25em;
}

/* ---------- Small viewports ---------- */

@media (max-width: 600px) {
	.xc-tp-table th,
	.xc-tp-table td {
		padding: 0.5em 0.6em;
	}

	.xc-tp-pricing-table {
		font-size: 0.95em;
	}
}