/**
 * MTV Member — shared design tokens & component classes.
 *
 * Loaded by both admin.css and public.css so the plugin's own admin
 * screens and its front-end templates draw from one palette. No webfont
 * import on purpose — this inherits the surrounding theme's/wp-admin's
 * own font stack rather than importing one, so it never causes a layout
 * shift or a mismatched typeface next to native WordPress chrome.
 *
 * Everything below is scoped under the .mtvm wrapper class that every
 * plugin template/screen renders inside, so nothing here can leak onto
 * the surrounding theme or wp-admin markup.
 */

:root {
	/* Accent ("seal" ink) */
	--mtvm-color-primary: #1f6f78;
	--mtvm-color-primary-hover: #17565d;
	--mtvm-color-primary-contrast: #ffffff;

	/* Secondary (quiet action) */
	--mtvm-color-secondary: #eef3f3;
	--mtvm-color-secondary-hover: #e1eaea;
	--mtvm-color-secondary-contrast: #16242a;

	/* Neutrals — teal-biased, not a flat grey */
	--mtvm-color-canvas: #f2f6f6;
	--mtvm-color-surface: #ffffff;
	--mtvm-color-border: #d7e3e3;
	--mtvm-color-text: #16242a;
	--mtvm-color-muted: #5b6e71;

	/* Status ("stamp" colors) — used identically front-end and admin */
	--mtvm-color-active: #2f7d4f;
	--mtvm-color-active-bg: #e3f3e8;
	--mtvm-color-expired: #a8641a;
	--mtvm-color-expired-bg: #fbeedd;
	--mtvm-color-cancelled: #b23a34;
	--mtvm-color-cancelled-bg: #fbe7e5;

	/* Spacing scale */
	--mtvm-space-xs: 4px;
	--mtvm-space-sm: 8px;
	--mtvm-space-md: 16px;
	--mtvm-space-lg: 24px;
	--mtvm-space-xl: 40px;

	/* Shape */
	--mtvm-radius: 8px;
	--mtvm-radius-sm: 4px;
	--mtvm-radius-pill: 999px;
	--mtvm-shadow: 0 1px 2px rgba(22, 36, 42, 0.06), 0 1px 3px rgba(22, 36, 42, 0.08);

	/* Type — system stacks only, no @font-face */
	--mtvm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--mtvm-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	--mtvm-font-size: 14px;
	--mtvm-line-height: 1.55;
}

/* ---------- Scope wrapper ---------- */

.mtvm {
	font-family: var(--mtvm-font);
	font-size: var(--mtvm-font-size);
	line-height: var(--mtvm-line-height);
	color: var(--mtvm-color-text);
	box-sizing: border-box;
}

.mtvm *,
.mtvm *::before,
.mtvm *::after {
	box-sizing: inherit;
}

/* :not(.mtvm-button) matters here: without it, this rule's extra
   element-selector specificity would beat .mtvm-button--primary's own
   color rule regardless of source order, recoloring any <a>-rendered
   button's text back to this teal link color — nearly invisible against
   a teal button background, and wrong (secondary/danger text color too)
   on every other anchor-rendered button variant. */
.mtvm a:not(.mtvm-button) {
	color: var(--mtvm-color-primary);
}

.mtvm-container {
	max-width: 480px;
	margin: 0 auto;
	padding: var(--mtvm-space-md);
}

.mtvm-container--wide {
	max-width: 720px;
}

/* ---------- Card ---------- */

.mtvm-card {
	background: var(--mtvm-color-surface);
	border: 1px solid var(--mtvm-color-border);
	border-radius: var(--mtvm-radius);
	box-shadow: var(--mtvm-shadow);
	padding: var(--mtvm-space-lg);
}

.mtvm-card + .mtvm-card {
	margin-top: var(--mtvm-space-md);
}

.mtvm-card__title {
	margin: 0 0 var(--mtvm-space-sm);
	font-size: 1.1em;
	font-weight: 600;
}

.mtvm-card__meta {
	color: var(--mtvm-color-muted);
	font-size: 0.9em;
}

/* ---------- Form ---------- */

.mtvm-form {
	display: flex;
	flex-direction: column;
	gap: var(--mtvm-space-md);
}

.mtvm-field {
	display: flex;
	flex-direction: column;
	gap: var(--mtvm-space-xs);
}

.mtvm-label {
	font-weight: 600;
	font-size: 0.9em;
}

.mtvm-hint {
	color: var(--mtvm-color-muted);
	font-size: 0.85em;
}

.mtvm-input,
.mtvm-select {
	font: inherit;
	font-size: var(--mtvm-font-size);
	padding: var(--mtvm-space-sm);
	border: 1px solid var(--mtvm-color-border);
	border-radius: var(--mtvm-radius-sm);
	background: var(--mtvm-color-surface);
	color: var(--mtvm-color-text);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mtvm-input::placeholder {
	color: var(--mtvm-color-muted);
}

.mtvm-input:hover,
.mtvm-select:hover {
	border-color: #c1d2d2;
}

.mtvm-input:focus,
.mtvm-select:focus {
	outline: none;
	border-color: var(--mtvm-color-primary);
	box-shadow: 0 0 0 3px rgba(31, 111, 120, 0.15);
}

.mtvm-input:disabled,
.mtvm-select:disabled {
	background: var(--mtvm-color-secondary);
	color: var(--mtvm-color-muted);
	cursor: not-allowed;
}

.mtvm-input.is-invalid,
.mtvm-select.is-invalid {
	border-color: var(--mtvm-color-cancelled);
}

.mtvm-field__error {
	font-size: 0.85em;
	color: var(--mtvm-color-cancelled);
}

/* Coupon codes / dates / ids read as data, not prose */
.mtvm-code {
	font-family: var(--mtvm-font-mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

/* ---------- Buttons ---------- */

.mtvm-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mtvm-space-xs);
	font: inherit;
	font-size: var(--mtvm-font-size);
	font-weight: 600;
	padding: var(--mtvm-space-sm) var(--mtvm-space-md);
	border-radius: var(--mtvm-radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.mtvm-button--primary {
	background: var(--mtvm-color-primary);
	color: var(--mtvm-color-primary-contrast);
}

.mtvm-button--primary:hover {
	background: var(--mtvm-color-primary-hover);
}

.mtvm-button--secondary {
	background: var(--mtvm-color-secondary);
	color: var(--mtvm-color-secondary-contrast);
	border-color: var(--mtvm-color-border);
}

.mtvm-button--secondary:hover {
	background: var(--mtvm-color-secondary-hover);
}

.mtvm-button--danger {
	background: var(--mtvm-color-surface);
	color: var(--mtvm-color-cancelled);
	border-color: var(--mtvm-color-cancelled);
}

.mtvm-button--danger:hover {
	background: var(--mtvm-color-cancelled);
	color: #ffffff;
}

.mtvm-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.mtvm-button:focus-visible {
	outline: 2px solid var(--mtvm-color-primary);
	outline-offset: 2px;
}

/* ---------- Badges (status) ---------- */

.mtvm-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--mtvm-space-xs);
	font-size: 0.8em;
	font-weight: 600;
	padding: 2px 10px;
	border-radius: var(--mtvm-radius-pill);
	line-height: 1.6;
	white-space: nowrap;
}

.mtvm-badge--active {
	background: var(--mtvm-color-active-bg);
	color: var(--mtvm-color-active);
}

.mtvm-badge--expired {
	background: var(--mtvm-color-expired-bg);
	color: var(--mtvm-color-expired);
}

.mtvm-badge--cancelled {
	background: var(--mtvm-color-cancelled-bg);
	color: var(--mtvm-color-cancelled);
}

/* ---------- Alerts ---------- */

.mtvm-alert {
	padding: var(--mtvm-space-sm) var(--mtvm-space-md);
	border-radius: var(--mtvm-radius-sm);
	border: 1px solid transparent;
	font-size: 0.95em;
}

.mtvm-alert--error {
	background: var(--mtvm-color-cancelled-bg);
	border-color: #f3c8c5;
	color: #7a2824;
}

.mtvm-alert--success {
	background: var(--mtvm-color-active-bg);
	border-color: #c3e3cd;
	color: #1f5536;
}

/* ---------- Table (e.g. profile transaction history) ---------- */

.mtvm-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--mtvm-font-size);
}

.mtvm-table th,
.mtvm-table td {
	text-align: left;
	padding: var(--mtvm-space-sm);
	border-bottom: 1px solid var(--mtvm-color-border);
}

.mtvm-table th {
	color: var(--mtvm-color-muted);
	font-weight: 600;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.mtvm-table td.mtvm-col-numeric {
	font-variant-numeric: tabular-nums;
}