/*
 * Plan tier badges, banners, and gated-control styling.
 *
 * Used by \OliverPOS\Admin\Plan_Badge to label paid-tier features
 * across the WP admin in Oliver's house style.
 *
 * House rule: every plan badge is a fully-Rounded pill with the same
 * solid brand fill and white text — only the label text changes
 * between tiers ("Starter", "Pro", "Enterprise"). Tier-specific
 * colours were retired because the admin already shows plan state
 * by enabling or disabling the affected control via .oliver-pos-gated.
 */

/* ── Inline badge ───────────────────────────────────────────────── */

.oliver-plan-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: #14BDD1;
	color: #FAFCFD;
	border: 0;
	text-decoration: none;
	vertical-align: middle;
	white-space: nowrap;
	transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

a.oliver-plan-badge {
	cursor: pointer;
	color: #FAFCFD;
}

a.oliver-plan-badge:hover,
a.oliver-plan-badge:focus {
	color: #FAFCFD;
	filter: brightness(1.08);
	transform: translateY(-1px);
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(15, 35, 43, 0.12);
}

.oliver-plan-badge__tier {
	display: inline-block;
}

/* Sizes */

.oliver-plan-badge--size-md {
	padding: 4px 14px;
	font-size: 11px;
	gap: 6px;
}

/* ── Banner ────────────────────────────────────────────────────── */

.oliver-plan-banner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	margin: 16px 0 20px;
	border-radius: 10px;
	border: 1px solid #BDD1D7;
	background: #FAFCFD;
	box-shadow: 0 1px 3px rgba(15, 35, 43, 0.06), 0 1px 2px rgba(15, 35, 43, 0.04);
}

.oliver-plan-banner__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.oliver-plan-banner__body {
	flex: 1 1 auto;
	min-width: 0;
}

.oliver-plan-banner__title-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.oliver-plan-banner__title {
	font-size: 15px;
	font-weight: 700;
	margin: 0;
	color: #1F5160;
	line-height: 1.3;
}

.oliver-plan-banner__message {
	margin: 4px 0 0;
	color: #3A5A66;
	font-size: 13px;
	line-height: 1.5;
}

.oliver-plan-banner__cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: linear-gradient(135deg, #14BDD1 0%, #1F5160 100%);
	color: #FAFCFD;
	padding: 8px 18px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(15, 35, 43, 0.12);
	transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.oliver-plan-banner__cta:hover,
.oliver-plan-banner__cta:focus {
	color: #FAFCFD;
	filter: brightness(1.08);
	transform: translateY(-1px);
	text-decoration: none;
	box-shadow: 0 3px 6px rgba(15, 35, 43, 0.18);
}

/* Banner tier accents — left border stripe + soft background tint */

.oliver-plan-banner--starter {
	border-left: 4px solid #14BDD1;
	background: linear-gradient(180deg, #FAFCFD 0%, #E6F7FA 100%);
}

.oliver-plan-banner--pro {
	border-left: 4px solid #1F5160;
	background: linear-gradient(180deg, #FAFCFD 0%, #E6F7FA 100%);
}

.oliver-plan-banner--enterprise {
	border-left: 4px solid #0F232B;
	background: linear-gradient(180deg, #FAFCFD 0%, #EFF5F7 100%);
}

/* Banner included-state — soft success tint, hide upgrade CTA */
.oliver-plan-banner--state-included {
	background: linear-gradient(180deg, #FAFCFD 0%, #D4F9E4 100%);
	border-left-color: #28E279;
}

.oliver-plan-banner--state-included .oliver-plan-banner__cta {
	display: none;
}

/* Compact in-table use — same component, tighter spacing */
.oliver-plan-badge + .oliver-plan-badge {
	margin-left: 4px;
}

/* When a badge follows a heading/label, give it a little breathing room */
h1 .oliver-plan-badge,
h2 .oliver-plan-badge,
h3 .oliver-plan-badge,
th .oliver-plan-badge,
label .oliver-plan-badge,
.nav-tab .oliver-plan-badge,
.oliver-pos-report-tab .oliver-plan-badge {
	margin-left: 8px;
	position: relative;
	top: -1px;
}

/* ── Promo card ────────────────────────────────────────────────── */

/*
 * Larger, marketing-style sibling of `.oliver-plan-banner`. Used by
 * Plan_Badge::render_promo_card() above gated settings sections — gives
 * the merchant an icon, lead paragraph, checkmark benefit list and a
 * "View plans" CTA. Visually matches `.oliver-pos-storefront-promo`
 * (Storefront tab, "Drive Foot Traffic") so the family reads as one
 * design language across the admin.
 */
.oliver-plan-promo {
	display: flex;
	gap: 20px;
	padding: 24px 28px;
	margin: 16px 0 24px;
	background: linear-gradient(135deg, #E6F7FA 0%, #FAFCFD 100%);
	border: 1px solid #CDEBF0;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(15, 35, 43, 0.06), 0 1px 2px rgba(15, 35, 43, 0.04);
}

.oliver-plan-promo__icon {
	flex-shrink: 0;
	display: flex;
	align-items: flex-start;
	padding-top: 2px;
	color: #14BDD1;
}

.oliver-plan-promo__content {
	flex: 1 1 auto;
	min-width: 0;
}

.oliver-plan-promo__title-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
}

.oliver-plan-promo__title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #1F5160;
	line-height: 1.3;
}

.oliver-plan-promo__message {
	margin: 0 0 12px;
	font-size: 13.5px;
	line-height: 1.6;
	color: #3A5A66;
}

.oliver-plan-promo__benefits {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oliver-plan-promo__benefits li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 6px;
	font-size: 13px;
	line-height: 1.5;
	color: #3A5A66;
}

.oliver-plan-promo__benefits li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: #28E279;
	font-weight: 700;
	font-size: 14px;
}

.oliver-plan-promo__cta {
	flex-shrink: 0;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: linear-gradient(135deg, #14BDD1 0%, #1F5160 100%);
	color: #FAFCFD;
	padding: 10px 20px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(15, 35, 43, 0.12);
	transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
	white-space: nowrap;
}

.oliver-plan-promo__cta:hover,
.oliver-plan-promo__cta:focus {
	color: #FAFCFD;
	filter: brightness(1.08);
	transform: translateY(-1px);
	text-decoration: none;
	box-shadow: 0 3px 6px rgba(15, 35, 43, 0.18);
}

/* Included state — soft success tint, hide upgrade CTA */
.oliver-plan-promo--state-included {
	background: linear-gradient(135deg, #D4F9E4 0%, #FAFCFD 100%);
	border-color: #A4ECC4;
}

.oliver-plan-promo--state-included .oliver-plan-promo__cta {
	display: none;
}

@media (max-width: 782px) {
	.oliver-plan-promo {
		flex-direction: column;
		gap: 12px;
		padding: 18px 20px;
	}

	.oliver-plan-promo__cta {
		align-self: flex-start;
	}
}

/* ── Gated controls ────────────────────────────────────────────── */

/*
 * Applied to any control (or wrapper around a group of controls) whose
 * underlying feature is not included in the merchant's plan. Visually
 * mutes the control and blocks pointer/keyboard interaction. Used
 * alongside `disabled` on the form elements themselves so the gate
 * still holds if JS fails to run.
 */
.oliver-pos-gated {
	opacity: 0.55;
	pointer-events: none;
	cursor: not-allowed;
	user-select: none;
}

.oliver-pos-gated input,
.oliver-pos-gated select,
.oliver-pos-gated textarea,
.oliver-pos-gated button,
.oliver-pos-gated a.button {
	cursor: not-allowed;
}

/*
 * Disabled-look variant for buttons / links that we render as an
 * inert <span> (e.g. the WP "Add New" page-title-action when at the
 * outlet cap, or "Add Staff Member" when seats are full). Inherits
 * the page's primary-button look so it visually matches what the
 * merchant would otherwise click, without behaving like a link.
 */
span.oliver-pos-gated.button,
span.oliver-pos-gated.page-title-action {
	display: inline-block;
}

/* Report tabs rendered as inert <span>s when not included in plan. */
span.oliver-pos-report-tab.oliver-pos-gated {
	cursor: not-allowed;
}