/* =====================================================================
   Mindset MMA — theme.css
   Only what theme.json + blocks can't express. Organised in 9 blocks:
     1. Plugin CSS-var aliases (so .cmp-* re-themes)
     2. Block style implementations (dark-hero, card, gold-accent, hatch…)
     3. Kicker utility
     4. Plugin component overrides (buttons, cards, alerts, chips, modal,
        steppers, tables, forms — the WCAG fix + sharp corners)
     5. Waiver banner
     6. Mobile tab bars
     7. Header / footer / nav fine-tuning
     8. Responsive
     9. Print
   ===================================================================== */


/* 1 — Plugin CSS-var aliases ------------------------------------------ */
:root {
	--cmp-primary:        var(--wp--preset--color--primary);
	--cmp-primary-hover:  var(--wp--preset--color--primary-hover);
	--cmp-on-primary:     var(--wp--preset--color--on-primary);
	--cmp-text:           var(--wp--preset--color--text);
	--cmp-text-light:     var(--wp--preset--color--text-light);
	--cmp-border:         var(--wp--preset--color--border);
	--cmp-bg:             var(--wp--preset--color--bg);
	--cmp-white:          var(--wp--preset--color--white);
	--cmp-success:        var(--wp--preset--color--success);
	--cmp-warning:        var(--wp--preset--color--warning);
	--cmp-danger:         var(--wp--preset--color--danger);
	--cmp-font:           var(--wp--preset--font-family--inter);
	--cmp-radius:         4px;

	/* theme-only */
	--mm-black: var(--wp--preset--color--black);
	--mm-ink:   var(--wp--preset--color--ink);
	--mm-steel: var(--wp--preset--color--steel);
}

html, body {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--inter);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }


/* 2 — Block style implementations ------------------------------------- */

/* Front-page hero — right-bleed photo placeholder.
   At <= 900px viewport the photo would crowd the text, so we hide it. */
.mm-hero { position: relative; overflow: hidden; }
.mm-hero__photo { z-index: 0; }
.mm-hero__content { position: relative; z-index: 1; }
@media (max-width: 900px) {
	.mm-hero__photo { display: none !important; }
	.mm-hero__content-inner { max-width: 100% !important; }
	/* Disciplines grid collapses 3→2 columns; inline style needs !important */
	.mm-disciplines-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 600px) {
	.mm-disciplines-grid { grid-template-columns: 1fr !important; }
}

/* Dark hero band — applied to a core/group. Provides the diagonal hatch
   overlay automatically when paired with .is-style-mm-hatch. */
.is-style-dark-hero {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	padding-top: clamp(48px, 6vw, 88px);
	padding-bottom: clamp(56px, 8vw, 96px);
	padding-left: clamp(20px, 4vw, 40px);
	padding-right: clamp(20px, 4vw, 40px);
	position: relative;
	overflow: hidden;
}
.is-style-dark-hero > * { position: relative; z-index: 1; }
.is-style-dark-hero a:not(.wp-block-button__link) { color: var(--wp--preset--color--primary); }
.is-style-dark-hero h1, .is-style-dark-hero h2, .is-style-dark-hero h3 { color: var(--wp--preset--color--white); }


/* Dark surface — softer than hero, no hatch overlay by default */
.is-style-dark {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}
.is-style-dark h1, .is-style-dark h2, .is-style-dark h3 { color: var(--wp--preset--color--white); }

/* Hero lede paragraphs — sit at the LEFT edge of the centered 1320px
   constrained content column, NOT at the section padding edge. WP's
   constrained layout caps direct children at contentSize (1320) and
   auto-centers them. The H1/breadcrumb fill 1320 so they look "left
   aligned" at the column edge. But the lede has max-width:620, which
   the same auto-margin rule would centre horizontally inside the 1320
   column — making it visually centred on the page instead of flush
   under the H1.
   The calc() trick reproduces the auto-centring offset by hand: at
   viewports wider than 1320+padding it pushes the lede right by
   (parentWidth − 1320)/2 so its left edge meets the column edge; at
   narrower viewports it falls back to 0 (lede sits at section padding
   edge, same as everything else). */
.is-style-dark-hero > p,
.is-style-dark-hero p.has-text-color,
.mm-hero-lede {
	margin-left: max(0px, calc((100% - 1320px) / 2)) !important;
	margin-right: auto !important;
}
.mm-hero-lede {
	max-width: 620px;
	margin-top: 18px !important;
}

/* Card */
.is-style-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
}

/* Gold-left accent stripe — the dominant visual rhythm */
.is-style-gold-accent {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 3px solid var(--wp--preset--color--primary);
}

/* Diagonal hatch overlay — pseudo-element so the parent's children stay above it */
.is-style-mm-hatch {
	position: relative;
	overflow: hidden;
}
.is-style-mm-hatch::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.06;
	background: repeating-linear-gradient(135deg,
		var(--wp--preset--color--primary) 0 2px,
		transparent 2px 80px);
	pointer-events: none;
	z-index: 0;
}
.is-style-mm-hatch.is-style-dark-hero::before { opacity: 0.05; }
.is-style-mm-hatch > * { position: relative; z-index: 1; }

/* Button variants */
.wp-block-button.is-style-gold > .wp-block-button__link {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	border: 1.5px solid var(--wp--preset--color--primary);
}
.wp-block-button.is-style-gold > .wp-block-button__link:hover,
.wp-block-button.is-style-gold > .wp-block-button__link:focus {
	background: var(--wp--preset--color--primary-hover);
	border-color: var(--wp--preset--color--primary-hover);
	color: var(--wp--preset--color--on-primary);
}

.wp-block-button.is-style-dark > .wp-block-button__link {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--black);
}
.wp-block-button.is-style-dark > .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-ghost > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--text);
	border: 1.5px solid var(--wp--preset--color--text);
}
.wp-block-button.is-style-ghost > .wp-block-button__link:hover {
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-ghost-light > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--white);
	border: 1.5px solid rgba(255,255,255,.35);
}
.wp-block-button.is-style-ghost-light > .wp-block-button__link:hover {
	background: rgba(255,255,255,.1);
	border-color: rgba(255,255,255,.6);
}

/* WP global styles inject `.has-text-color { color: var(--text) !important }`
   which overrides our inline white-on-dark text on every hero subhead. Reset
   the color so the inline `style="color:..."` on the element wins.
   `unset` is used so the existing inline color can take effect. */
.is-style-dark-hero :is(p, h1, h2, h3, h4, span, li, a).has-text-color,
.is-style-dark      :is(p, h1, h2, h3, h4, span, li, a).has-text-color,
.mm-waiver-banner   :is(p, h1, h2, h3, h4, span, li, a).has-text-color,
.is-style-dark-hero :is(p, h1, h2, h3, h4, span, li, a).has-background-color,
.is-style-dark      :is(p, h1, h2, h3, h4, span, li, a).has-background-color {
	color: unset !important;
}

/* Defensive: prevent text inside our chrome containers from collapsing to
   one character per line if a flex/grid container is squeezed too narrow.
   Common cause of the "letter-by-letter stacking" symptom. */
.mm-header *,
.mm-footer *,
.is-style-dark-hero *,
.is-style-dark * {
	word-break: normal;
	overflow-wrap: normal;
}

/* WP's wp-block-library inline CSS sets `.wp-block-column { word-break:
   break-word; overflow-wrap: break-word; min-width: 0; }`. In tight flex
   layouts this lets the column shrink below its content's minimum word
   width and breaks text letter-by-letter. Restore sensible defaults so
   words wrap on word boundaries only. */
.wp-block-column {
	word-break: normal;
	overflow-wrap: normal;
}

/* WP global styles add `:where(.wp-site-blocks) > * { margin-block-start:
   24px }` between every top-level child of <div.wp-site-blocks>. This
   creates an unwanted white gap between the header template-part and our
   hero band, and between our last content section and the footer. Each
   of our sections owns its own vertical padding, so we zero the gap. */
:where(.wp-site-blocks) > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}
:where(.is-layout-constrained) > .wp-block-template-part {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* 3 — Kicker utility -------------------------------------------------- */
/* `display: flex` (not inline-flex) so the paragraph remains block-level
   and respects WP's `.is-layout-constrained > * { margin-left: auto;
   margin-right: auto; max-width: ... }` rules. With inline-flex, auto
   margins are ignored and the kicker stays flush against section padding
   instead of aligning with the h2/h1/heading siblings inside the
   constrained content area. */
.is-style-kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-hover);
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}
.is-style-kicker::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 2px;
	background: var(--wp--preset--color--primary);
}
.is-style-kicker-dark,
.is-style-dark-hero .is-style-kicker,
.is-style-dark .is-style-kicker {
	color: var(--wp--preset--color--primary);
}

/* Breadcrumb pattern — small uppercase trail used in hero bands */
.mm-crumb {
	display: flex;
	gap: 8px;
	font-size: 12px;
	color: rgba(255,255,255,.5);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 700;
	margin-bottom: 14px;
}
.mm-crumb .current { color: var(--wp--preset--color--primary); }


/* 4 — Plugin component overrides (.cmp-*) ----------------------------- */

/* Buttons — the brief's WCAG fix + sharp corners + uppercase tracking */
.cmp-btn,
.cmp-btn:visited {
	border-radius: 4px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-family: var(--wp--preset--font-family--inter);
	padding: 12px 22px;
	border-width: 1.5px;
	border-style: solid;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	cursor: pointer;
	transition: background .15s ease;
}
.cmp-btn-primary,
.cmp-btn-primary:visited {
	background: var(--cmp-primary);
	color: var(--cmp-on-primary);
	border-color: var(--cmp-primary);
}
.cmp-btn-primary:hover,
.cmp-btn-primary:focus {
	background: var(--cmp-primary-hover);
	border-color: var(--cmp-primary-hover);
	color: var(--cmp-on-primary);
}
.cmp-btn-secondary,
.cmp-btn-secondary:visited {
	background: var(--mm-black);
	color: var(--cmp-white);
	border-color: var(--mm-black);
}
.cmp-btn-secondary:hover { background: var(--mm-ink); border-color: var(--mm-ink); }
.cmp-btn-outline-danger {
	background: var(--cmp-white);
	color: var(--cmp-danger);
	border-color: var(--cmp-danger);
}
.cmp-btn-danger {
	background: var(--cmp-danger);
	color: var(--cmp-white);
	border-color: var(--cmp-danger);
}
.cmp-btn-sm { padding: 8px 14px; font-size: 13px; min-height: 36px; }
.cmp-btn-block { width: 100%; }
.cmp-btn-link {
	background: transparent;
	border: none;
	text-decoration: underline;
	text-underline-offset: 4px;
	padding: 0;
	min-height: 0;
	color: var(--cmp-text);
	text-transform: none;
	letter-spacing: 0;
}

/* `[cmp_today]` — schedule preview rows on the front page.
   Brief design: dark inner panel, each row is a 4-column grid:
   time (gold, 28px tabular) | name + meta | spots chip | gold Book button.
   The plugin emits 3 children per item; we use `display: contents` on the
   inner `.cmp-today-info` so its children (name/meta/spots) become direct
   grid items and can occupy separate columns. */
.cmp-today { font-family: inherit !important; }
.cmp-today-title,
.cmp-today-date { display: none !important; }
.cmp-today-list {
	display: flex;
	flex-direction: column;
	gap: 0 !important;
	background: var(--mm-ink) !important;
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 0 !important;
}
.cmp-today-item {
	display: grid !important;
	grid-template-columns: 100px 1fr auto auto !important;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 24px;
	row-gap: 2px;
	padding: 22px 28px !important;
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid rgba(255,255,255,.06) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.cmp-today-item:last-child { border-bottom: none !important; }
.cmp-today-item:hover { box-shadow: none !important; }

/* Time block — gold tabular numbers, no purple background */
.cmp-today-time {
	grid-column: 1;
	grid-row: 1 / span 2;
	background: transparent !important;
	color: var(--cmp-primary) !important;
	padding: 0 !important;
	border-radius: 0 !important;
	display: flex !important;
	flex-direction: column;
	align-items: flex-start !important;
	min-width: 0 !important;
	flex-shrink: unset !important;
}
.cmp-today-time-start {
	font-size: 28px !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--cmp-primary);
}
.cmp-today-time-end {
	font-size: 11px !important;
	font-weight: 600;
	color: rgba(255,255,255,.45) !important;
	margin-top: 4px;
	opacity: 1 !important;
	letter-spacing: 0.04em;
}

/* Flatten .cmp-today-info into the parent grid so its children take
   separate grid columns instead of being stacked inside one. */
.cmp-today-info { display: contents !important; flex: unset !important; min-width: unset !important; }

.cmp-today-name {
	grid-column: 2;
	grid-row: 1;
	font-size: 19px !important;
	font-weight: 700 !important;
	color: #FFF !important;
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	margin-bottom: 0 !important;
}
.cmp-today-meta {
	grid-column: 2;
	grid-row: 2;
	font-size: 13px !important;
	color: rgba(255,255,255,.55) !important;
	margin: 0 !important;
}

/* Spots chip — its own grid column */
.cmp-today-spots {
	grid-column: 3;
	grid-row: 1 / span 2;
	align-self: center;
	margin-top: 0 !important;
	font-size: inherit !important;
}
.cmp-today-spots > span {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1px solid currentColor;
	line-height: 1.2;
}
.cmp-today-spots-available {
	background: #DCFCE7 !important;
	color: #15803D !important;
	border-color: #86EFAC !important;
}
.cmp-today-spots-low {
	background: #FEF3C7 !important;
	color: #A16207 !important;
	border-color: #FCD34D !important;
}
.cmp-today-spots-full {
	background: #FEE2E2 !important;
	color: #B91C1C !important;
	border-color: #FCA5A5 !important;
}

/* Actions column — gold Book button */
.cmp-today-actions {
	grid-column: 4;
	grid-row: 1 / span 2;
	flex-shrink: 0;
}
.cmp-today-book-btn {
	background: var(--cmp-primary) !important;
	color: var(--cmp-on-primary) !important;
	border: 1.5px solid var(--cmp-primary) !important;
	padding: 10px 18px !important;
	border-radius: 4px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	min-height: 36px;
}
.cmp-today-book-btn:hover {
	background: var(--cmp-primary-hover) !important;
	border-color: var(--cmp-primary-hover) !important;
	color: var(--cmp-on-primary) !important;
}
.cmp-today-waitlist-btn {
	background: transparent !important;
	color: #FFF !important;
	border: 1.5px solid rgba(255,255,255,.3) !important;
	padding: 10px 18px !important;
	border-radius: 4px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	min-height: 36px;
}
.cmp-today-login-link {
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--cmp-primary) !important;
	border: 1.5px solid rgba(219,173,2,.4);
	padding: 10px 18px;
	border-radius: 4px;
	text-decoration: none !important;
}

/* Past sessions — keep the fade but slightly dimmer than plugin default */
.cmp-today-item.cmp-today-item--past { opacity: 0.4 !important; }
.cmp-today-item.cmp-today-item--past .cmp-today-actions { visibility: hidden; }

/* Empty state */
.cmp-today-empty {
	padding: 40px 28px !important;
	background: var(--mm-ink) !important;
	border: 1px dashed rgba(255,255,255,.15) !important;
	border-radius: 0 !important;
	color: rgba(255,255,255,.55) !important;
	text-align: center !important;
}
.cmp-today-empty p {
	margin: 0;
	font-size: 14px;
	letter-spacing: 0.04em;
}

@media (max-width: 720px) {
	.cmp-today-item {
		grid-template-columns: 70px 1fr auto !important;
		grid-template-rows: auto auto auto;
		row-gap: 6px;
		padding: 16px 20px !important;
	}
	.cmp-today-name { grid-column: 2; grid-row: 1; }
	.cmp-today-meta { grid-column: 2; grid-row: 2; }
	.cmp-today-spots { grid-column: 2; grid-row: 3; justify-self: start; }
	.cmp-today-actions { grid-column: 3; grid-row: 1 / span 3; align-self: center; }
	.cmp-today-time { grid-row: 1 / span 3; }
	.cmp-today-time-start { font-size: 22px !important; }
}


/* Schedule list — compact horizontal session cards
   The plugin renders each session vertically by default. We make them
   denser: time / name + location / spots / book button all on one row at
   desktop, two rows at mobile. Gold left accent stripe + sharp corners. */
.cmp-schedule { font-family: inherit; }
.cmp-schedule-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.cmp-schedule-title {
	font-size: 11px !important;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--cmp-text-light);
	margin: 0 !important;
}
.cmp-schedule-day { margin-bottom: 28px; }
.cmp-day-header {
	font-size: 14px !important;
	font-weight: 800 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase;
	color: var(--cmp-text);
	padding: 0 0 10px 14px;
	border-bottom: 2px solid var(--cmp-text);
	border-left: 3px solid var(--cmp-primary);
	margin: 0 0 0 !important;
}

/* Hide the plugin's native location <select> — replaced by [mm_schedule_filters] */
.cmp-schedule .cmp-location-filter { display: none !important; }
.cmp-sessions-list {
	background: var(--cmp-white);
	border: 1px solid var(--cmp-border);
	border-top: none;
	list-style: none;
	padding: 0;
	margin: 0;
}
.cmp-session-card {
	display: grid !important;
	grid-template-columns: 90px 1fr auto auto;
	gap: 20px;
	align-items: center;
	padding: 16px 24px;
	border: none !important;
	border-bottom: 1px solid #F1F5F9 !important;
	border-left: 3px solid var(--cmp-primary) !important;
	border-radius: 0 !important;
	background: var(--cmp-white);
}
.cmp-session-card:last-child { border-bottom: none !important; }
/* Hide phantom <p> children inserted by stray wpautop </p> damage */
.cmp-session-card > p:empty { display: none !important; }
/* The plugin's session-info opens a <p> wrapping the location span that's
   never properly closed; flatten it so it doesn't add unwanted spacing. */
.cmp-session-info > p { display: contents !important; }

/* Calendar-add icon link — render as a small subtle button next to Book */
.cmp-session-actions {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
}
.cmp-add-to-calendar {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0 !important;
	color: var(--cmp-text) !important;       /* slate-900 — visible against white */
	border: 1px solid #CBD5E1 !important;    /* slate-300 — clearer button shape */
	border-radius: 4px;
	text-decoration: none !important;
	background: var(--cmp-white) !important;
}
.cmp-add-to-calendar:hover,
.cmp-add-to-calendar:focus-visible {
	color: var(--cmp-on-primary) !important;
	background: var(--cmp-primary) !important;
	border-color: var(--cmp-primary) !important;
}
.cmp-add-to-calendar .dashicons { font-size: 18px; width: 18px; height: 18px; }
.cmp-session-time {
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--cmp-text);
}
.cmp-session-info { display: flex; flex-direction: column; gap: 2px; }
.cmp-session-name { font-size: 16px; font-weight: 700; color: var(--cmp-text); }
.cmp-session-location { font-size: 13px; color: var(--cmp-text-light); }
.cmp-session-availability { font-size: 13px; color: var(--cmp-text); }
.cmp-session-actions .cmp-btn-primary { font-size: 13px; padding: 10px 18px; min-height: 36px; }

/* Day header sits flush against the session list */
.cmp-schedule-day .cmp-day-header + .cmp-sessions-list,
.cmp-schedule-day .cmp-day-header + * { margin-top: 0; }

/* Schedule view toggle (List / Calendar) */
.cmp-view-toggle { display: inline-flex; gap: 6px; }
.cmp-view-btn {
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	border: 1px solid var(--cmp-border);
	background: var(--cmp-white);
	color: var(--cmp-text);
	cursor: pointer;
	border-radius: 4px;
}
.cmp-view-btn.active {
	background: var(--cmp-primary);
	color: var(--cmp-on-primary);
	border-color: var(--cmp-primary);
}

@media (max-width: 600px) {
	.cmp-session-card {
		grid-template-columns: 72px 1fr auto !important;
		grid-template-areas: "time name spots" "time location action";
		gap: 8px 16px !important;
		padding: 14px 18px;
	}
	.cmp-session-time { grid-area: time; }
	.cmp-session-name { grid-area: name; }
	.cmp-session-location { grid-area: location; }
	.cmp-session-availability { grid-area: spots; }
	.cmp-session-actions { grid-area: action; }
}

/* Cards / panels — sharp corners, 1 px border, mostly white */
.cmp-pricing-card,
.cmp-credit-pack-card,
.cmp-session-card,
.cmp-family-member,
.cmp-membership-card,
.cmp-stat-card,
.cmp-instructor-card,
.cmp-class-card,
.cmp-location-card,
.cmp-empty-state {
	border-radius: 4px;
	border: 1px solid var(--cmp-border);
	background: var(--cmp-white);
}
.cmp-session-card,
.cmp-family-member { border-left: 3px solid var(--cmp-primary); }

/* Location cards on the home strip — brief design:
   gold left rail, 22/24 padding, name + pin row + hours.
   Plugin emits .cmp-location-card inside .mm-locations__list, so we scope to
   keep this from leaking into admin location pages. */
.mm-locations__list .cmp-location-card,
.mm-locations__list .cmp-location {
	padding: 22px 24px !important;
	background: #FFF !important;
	border: 1px solid #E2E8F0 !important;
	border-left: 3px solid var(--cmp-primary) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
}
.mm-locations__list .cmp-location-card h3,
.mm-locations__list .cmp-location-card h4,
.mm-locations__list .cmp-location h3,
.mm-locations__list .cmp-location h4 {
	font-size: 18px !important;
	font-weight: 700 !important;
	letter-spacing: -0.005em !important;
	color: var(--cmp-text) !important;
	margin: 0 0 8px !important;
}
.mm-locations__list .cmp-location-card p,
.mm-locations__list .cmp-location p,
.mm-locations__list .cmp-location-card address,
.mm-locations__list .cmp-location address {
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #475569 !important;
	margin: 0 0 4px !important;
	font-style: normal !important;
}
.mm-locations__list .cmp-location-card .cmp-hours,
.mm-locations__list .cmp-location .cmp-hours,
.mm-locations__list .cmp-location-card small,
.mm-locations__list .cmp-location small {
	font-size: 13px !important;
	color: #64748B !important;
	display: block;
	margin-top: 4px;
}

/* Locations section — mobile: stack columns, map on top */
@media (max-width: 900px) {
	.mm-locations__inner { grid-template-columns: 1fr !important; gap: 36px !important; }
	.mm-locations__map { aspect-ratio: 16/10 !important; }
}

/* Pricing card — match design brief
   The plugin's default style is bordered/rounded with small text. We
   override to: sharp corners, 1px border, big price, small gold uppercase
   tier name, and stack to bottom for the (theme-injected) CTA. */
.cmp-pricing-cards { gap: 16px !important; }
.cmp-pricing-card {
	border-radius: 4px !important;
	border: 1px solid var(--cmp-border) !important;
	padding: 36px 28px 28px !important;
	text-align: left !important;
	box-shadow: 0 4px 16px rgba(15,23,42,.04) !important;
	background: var(--cmp-white) !important;
	color: var(--cmp-text) !important;
	display: flex !important;
	flex-direction: column !important;
}
.cmp-pricing-card__name {
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--cmp-primary-hover) !important;
	margin: 0 !important;
}
.cmp-pricing-card__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-top: 14px !important;
}
.cmp-pricing-card__amount {
	font-size: 56px !important;
	font-weight: 900 !important;
	letter-spacing: -0.03em !important;
	line-height: 1 !important;
	color: var(--cmp-text) !important;
}
.cmp-pricing-currency { font-size: 0.6em; vertical-align: top; margin-right: 2px; opacity: 0.7; }
.cmp-pricing-card__period {
	font-size: 15px !important;
	font-weight: 500;
	opacity: 0.6;
	color: var(--cmp-text) !important;
}
.cmp-pricing-card__credits {
	display: inline-block;
	margin-top: 16px;
	padding: 4px 10px;
	background: var(--cmp-gold-soft, #FEF7CD);
	color: var(--cmp-primary-hover) !important;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 999px;
	border: 1px solid var(--cmp-gold-soft-border, #F5DA6E);
}
.cmp-pricing-card__description {
	margin-top: 12px !important;
	font-size: 14px;
	line-height: 1.55;
	color: var(--cmp-text-light);
	flex: 1;
}
/* CTA button injected via :after pseudo — links via a real anchor wrapping
   the card would be ideal but the plugin doesn't render one. We render a
   gold "Choose tier" button at the bottom of every card via a CSS-styled
   anchor that the plugin emits as `.cmp-pricing-card a` if any, otherwise
   we use a pseudo-element with a static href is impossible — so we apply
   a hover state inviting click on the whole card. */
.cmp-pricing-card a:not(.wp-element-button) {
	margin-top: 24px;
	background: var(--cmp-primary);
	color: var(--cmp-on-primary) !important;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 14px 22px;
	border-radius: 4px;
	border: 1.5px solid var(--cmp-primary);
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14.5px;
}
.cmp-pricing-card a:not(.wp-element-button):hover {
	background: var(--cmp-primary-hover);
	border-color: var(--cmp-primary-hover);
}

/* Featured/accent tier variant */
.cmp-pricing-card.is-featured,
.cmp-pricing-card--featured,
.cmp-pricing-card.is-popular,
.cmp-tier-card.is-selected {
	background: var(--mm-black) !important;
	color: var(--cmp-white) !important;
	border: 1px solid var(--cmp-primary) !important;
	box-shadow: 0 24px 60px rgba(219,173,2,.15) !important;
}
.cmp-pricing-card.is-featured .cmp-pricing-card__name,
.cmp-pricing-card--featured .cmp-pricing-card__name,
.cmp-pricing-card.is-popular .cmp-pricing-card__name { color: var(--cmp-primary) !important; }
.cmp-pricing-card.is-featured .cmp-pricing-card__amount,
.cmp-pricing-card--featured .cmp-pricing-card__amount,
.cmp-pricing-card.is-popular .cmp-pricing-card__amount,
.cmp-pricing-card.is-featured .cmp-pricing-card__period,
.cmp-pricing-card--featured .cmp-pricing-card__period,
.cmp-pricing-card.is-popular .cmp-pricing-card__period { color: var(--cmp-white) !important; }

/* Alerts — left accent + tone-coloured bg */
.cmp-alert {
	border-radius: 4px;
	border: 1px solid transparent;
	border-left: 3px solid currentColor;
	padding: 12px 14px;
	font-size: 14px;
}
.cmp-alert-success { background: #DCFCE7; color: #15803D; border-color: #86EFAC; }
.cmp-alert-warning { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.cmp-alert-error,
.cmp-alert-danger  { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; }
.cmp-alert-info    { background: #E0F2FE; color: #075985; border-color: #7DD3FC; }
.cmp-alert strong, .cmp-alert b { font-weight: 700; }

/* Chips / badges
 * Plugin emits `.cmp-member-tier-badge` (extra word vs. our original
 * `.cmp-tier-badge`), and `.cmp-waiver-needed-badge`, `.cmp-booked-badge`,
 * `.cmp-you-badge`. Selectors below cover both legacy and live plugin output. */
.cmp-tier-badge,
.cmp-member-tier-badge,
.cmp-status-badge,
.cmp-waiver-needed-badge,
.cmp-booked-badge,
.cmp-you-badge,
.cmp-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.2;
	background: #F1F5F9;
	color: var(--cmp-text);
	border: 1px solid var(--cmp-border);
}
.cmp-chip-gold,    .cmp-tier-badge-gold,    .cmp-tier-badge[data-tier="gold"],
.cmp-member-tier-badge,
.cmp-booked-badge { background: var(--cmp-primary); color: var(--cmp-on-primary); border-color: var(--cmp-primary); }
.cmp-chip-dark,    .cmp-tier-badge-dark    { background: var(--mm-black); color: var(--cmp-primary); border-color: var(--mm-black); }
.cmp-chip-success, .cmp-status-success     { background: #DCFCE7; color: #15803D; border-color: #86EFAC; }
.cmp-chip-warning, .cmp-status-warning,
.cmp-you-badge                             { background: #FEF3C7; color: #A16207; border-color: #FCD34D; }
.cmp-chip-danger,  .cmp-status-danger,
.cmp-waiver-needed-badge                   { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; }

/* Plugin's own waiver banner (separate from our .mm-waiver-banner) — soft-pink
   inline form near the booking flow. Keep it stylistically aligned. */
.cmp-waiver-banner {
	background: #FEF2F2;
	border: 1px solid #FCA5A5;
	border-left: 4px solid var(--cmp-danger);
	padding: 14px 18px;
	border-radius: 4px;
	color: #7F1D1D;
}

/* Membership stat blocks emitted by [cmp_my_membership] */
.cmp-membership-stat { padding: 24px 28px; border: 1px solid var(--cmp-border); background: var(--cmp-white); }
.cmp-stat-label      { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; color: var(--cmp-primary-hover); text-transform: uppercase; }
.cmp-stat-value      { font-size: 44px; font-weight: 900; letter-spacing: -0.025em; line-height: 1; margin-top: 8px; }

/* -----------------------------------------------------------------------
 * Customer payment-health UX (plugin v1.17.4+, post-refactor)
 *
 * The plugin exposes CSS variables for banner geometry + danger/warning
 * colour sets, and emits state-modifier classes (--critical / --warning)
 * + proper inner classes (__title / __body) instead of inline styles.
 * We override the vars for brand alignment (square 4px corners, our
 * spacing) and style the inner elements with Inter typography — no
 * !important needed.
 * --------------------------------------------------------------------- */

/* Override plugin geometry vars — brand uses square 4px corners
   throughout, slightly tighter spacing. Colour vars left at plugin
   defaults; they're already in our red/amber range. */
:root {
	--cmp-payment-banner-radius:  4px;
	--cmp-payment-banner-padding: 16px 20px;
	--cmp-payment-banner-margin:  0 0 24px;
}

.cmp-payment-banner,
.cmp-manage-sub__payment-banner {
	font-family: inherit;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.cmp-payment-banner__title,
.cmp-manage-sub__payment-banner__title {
	font-weight: 800;
	font-size: 15px;
	letter-spacing: -0.005em;
	font-family: inherit;
}
.cmp-payment-banner__body,
.cmp-manage-sub__payment-banner__body {
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
}
.cmp-payment-banner .cmp-btn {
	flex-shrink: 0;
}

/* Membership status badge — emitted by [cmp_my_membership] header card.
   8 states map to brand palette. Each variant is a small uppercase pill
   matching our existing chip aesthetic (border-radius 999px, weight 700,
   letter-spacing 0.04em — same family as .cmp-chip / .cmp-tier-badge). */
.cmp-membership-status,
.cmp-manage-sub__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 1px solid transparent;
	white-space: nowrap;
	font-family: inherit;
}
.cmp-membership-status.active,
.cmp-manage-sub__status--active { background: #DCFCE7; color: #15803D; border-color: #86EFAC; }
.cmp-membership-status.trialing,
.cmp-manage-sub__status.cmp-manage-sub__status--trialing {
	/* Doubled-up class on the manage-sub selector to win specificity over
	   the plugin's inline <style> in manage-subscription.php that ties
	   active+trialing to the same green palette. */
	background: var(--cmp-primary);
	color: var(--cmp-on-primary);
	border-color: var(--cmp-primary);
}
.cmp-membership-status.pending,
.cmp-manage-sub__status--pending { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.cmp-membership-status.pending_cancel,
.cmp-manage-sub__status--pending_cancel { background: #FEF3C7; color: #A16207; border-color: #FCD34D; }
.cmp-membership-status.cancelled,
.cmp-manage-sub__status--cancelled { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; }
.cmp-membership-status.on_hold,
.cmp-manage-sub__status--on_hold { background: #F1F5F9; color: #475569; border-color: #CBD5E1; }
.cmp-membership-status.expired,
.cmp-manage-sub__status--expired { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; }
.cmp-membership-status.inactive,
.cmp-manage-sub__status--inactive { background: #F1F5F9; color: #64748B; border-color: #CBD5E1; }

/* ⓘ info icon — plugin v1.17.4 ships Heroicons SVG inside the span with
   width/height 1em + inherits parent colour via currentColor. We bump
   the size a touch so it's discoverable at 11px badge font-size. */
.cmp-membership-status__info,
.cmp-manage-sub__status-info {
	font-size: 1em;
}

/* Pending-status explanatory paragraph. Plugin default is plain text in
   muted colour; we promote it to a soft-gold note panel since "Pending"
   represents a state the user needs to register. */
.cmp-membership-status__note,
.cmp-manage-sub__status-note {
	padding: 12px 16px;
	margin: 12px 0 16px;
	background: #FEF9E7;
	border-left: 3px solid #FCD34D;
	font-size: 13.5px;
	line-height: 1.55;
	color: #78350F;
	font-family: inherit;
}

/* Reconnect-card current-card-on-file pill. Default = green (card on
   file), --missing modifier = red (no card → renewal will fail).
   Inner structure: icon + label + value (+ optional note). */
.cmp-reconnect-card__current {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: #ECFDF5;
	border: 1px solid #A7F3D0;
	border-left: 4px solid #059669;
	border-radius: 4px;
	padding: 14px 18px;
	margin: 16px 0;
}
.cmp-reconnect-card__current--missing {
	background: #FEF2F2;
	border-color: #FCA5A5;
	border-left-color: #DC2626;
}
.cmp-reconnect-card__current-icon {
	font-size: 22px;
	line-height: 1;
	flex-shrink: 0;
	margin-top: 1px;
}
.cmp-reconnect-card__current-text {
	flex: 1;
	min-width: 0;
}
.cmp-reconnect-card__current-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #047857;
	margin-bottom: 4px;
}
.cmp-reconnect-card__current--missing .cmp-reconnect-card__current-label {
	color: #B91C1C;
}
.cmp-reconnect-card__current-value {
	font-size: 16px;
	font-weight: 700;
	color: var(--cmp-text, #0F172A);
	font-variant-numeric: tabular-nums;
}
.cmp-reconnect-card__current-note {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--cmp-text-light, #64748B);
}

/* Reconnect-card outer container + title + lead + CTA + hint */
.cmp-reconnect-card {
	max-width: 560px;
	margin: 0 auto;
}
.cmp-reconnect-card__inner {
	background: var(--cmp-white);
	border: 1px solid var(--cmp-border);
	padding: 32px 28px;
	border-radius: 4px;
}
.cmp-reconnect-card__title {
	font-size: 28px;
	font-weight: 900;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 0 16px;
}
.cmp-reconnect-card__lead {
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--cmp-text-light, #64748B);
	margin: 0 0 16px;
}
.cmp-reconnect-card__btn { width: 100%; margin-top: 8px; }
.cmp-reconnect-card__hint {
	margin-top: 16px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--cmp-text-light, #64748B);
}

/* Manage Subscription "Update Payment Method" button. Default is just
   .cmp-btn-secondary. The --urgent modifier promotes it to a red action
   button so it reads "different from the gold/dark buttons around it,
   you need to do this now." Doubled-up selector for specificity over
   .cmp-btn-primary's gold without needing !important. */
.cmp-btn.cmp-manage-sub__portal-btn--urgent {
	background: #B91C1C;
	border-color: #B91C1C;
	color: #FFFFFF;
}
.cmp-btn.cmp-manage-sub__portal-btn--urgent:hover,
.cmp-btn.cmp-manage-sub__portal-btn--urgent:focus {
	background: #991B1B;
	border-color: #991B1B;
	color: #FFFFFF;
}

/* Booking-modal inner wrapper class */
.cmp-booking-modal-content { padding: 0; }
.cmp-topup-modal           { border-radius: 4px; }

/* Modal — square, dark header, blur backdrop.
   Selectors cover both `.cmp-modal-*` (generic) and `.cmp-booking-modal-*`
   (which is what the schedule's Book Session modal actually emits).
   The booking modal overlay is always in the DOM; the plugin toggles
   the `.active` class to show it. We MUST NOT force `display: flex`
   on the overlay itself — that would make the modal appear on page
   load. Only paint when active. */
.cmp-modal-overlay.active,
.cmp-booking-modal-overlay.active {
	position: fixed;
	inset: 0;
	background: rgba(10,10,10,.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9000;
}
.cmp-modal-overlay:not(.active),
.cmp-booking-modal-overlay:not(.active) { display: none !important; }
.cmp-modal,
.cmp-booking-modal {
	background: var(--cmp-white);
	border-radius: 4px;
	box-shadow: 0 24px 80px rgba(0,0,0,.35);
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 0 !important;
}
.cmp-modal-header,
.cmp-booking-modal-header {
	background: var(--mm-black) !important;
	color: var(--cmp-white) !important;
	padding: 24px 28px !important;
	position: relative;
	overflow: hidden;
	border-bottom: none !important;
	margin: 0 !important;
}
.cmp-modal-header::before,
.cmp-booking-modal-header::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.08;
	background: repeating-linear-gradient(135deg,
		var(--cmp-primary) 0 1px, transparent 1px 30px);
	pointer-events: none;
}
.cmp-modal-header > *,
.cmp-booking-modal-header > * { position: relative; }
.cmp-modal-header h2,
.cmp-modal-header h3,
.cmp-booking-modal-header h2,
.cmp-booking-modal-header h3 {
	color: var(--cmp-white) !important;
	font-size: 22px !important;
	font-weight: 800 !important;
	letter-spacing: -0.01em !important;
	margin: 0 !important;
	line-height: 1.2 !important;
}
.cmp-modal-body,
.cmp-booking-modal-body { padding: 24px 28px !important; overflow-y: auto; }
.cmp-modal-footer,
.cmp-booking-modal-footer {
	padding: 18px 28px !important;
	background: #FAFBFC !important;
	border-top: 1px solid var(--cmp-border) !important;
	display: flex !important;
	gap: 10px !important;
	justify-content: flex-end !important;
	margin: 0 !important;
}
.cmp-modal-close,
.cmp-booking-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	background: rgba(255,255,255,.08) !important;
	border: 1px solid rgba(255,255,255,.15) !important;
	border-radius: 50% !important;
	color: var(--cmp-white) !important;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	padding: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cmp-modal-close:hover,
.cmp-booking-modal-close:hover {
	background: rgba(255,255,255,.16) !important;
	border-color: rgba(255,255,255,.28) !important;
}
/* Footer-mounted close button (Cancel) keeps regular button styling */
.cmp-booking-modal-footer .cmp-booking-modal-close {
	position: static;
	width: auto;
	height: auto;
	background: var(--cmp-white) !important;
	color: var(--mm-black) !important;
	border: 1.5px solid var(--mm-black) !important;
	border-radius: 4px !important;
	padding: 12px 22px !important;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Booking-modal body content: name, datetime, location, spots, "book for myself" radio.
   Plugin emits these as plain text blocks; style them to feel close to brief. */
.cmp-booking-modal-body h3,
.cmp-booking-modal-body h4 {
	font-size: 20px !important;
	font-weight: 800 !important;
	letter-spacing: -0.01em !important;
	margin: 0 0 8px !important;
}
.cmp-booking-modal-body p { margin: 0 0 6px !important; font-size: 14.5px; color: var(--cmp-text); }
.cmp-booking-modal-body p:has(+ p) { color: var(--cmp-text-light); }
.cmp-booking-modal-body .cmp-booking-spots,
.cmp-booking-modal-body .cmp-spots-available { color: #16A34A !important; font-weight: 700; }
.cmp-booking-modal-body label {
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 12px 14px !important;
	border: 1px solid var(--cmp-border);
	background: #F8FAFC;
	margin: 4px 0 !important;
	cursor: pointer;
	font-size: 14.5px;
	font-weight: 600;
}
.cmp-booking-modal-body label input[type="radio"] { accent-color: var(--cmp-primary); }
.cmp-booking-modal-body .cmp-insufficient-credits,
.cmp-booking-modal-body .cmp-payment-warning {
	margin-top: 12px !important;
	padding: 12px 14px !important;
	background: #FEF7CD !important;
	border: 1px solid var(--cmp-primary) !important;
	border-left: 3px solid var(--cmp-primary) !important;
	font-size: 13.5px;
	color: var(--cmp-text);
}
.cmp-booking-modal-body .cmp-insufficient-credits a,
.cmp-booking-modal-body .cmp-payment-warning a {
	color: var(--mm-black) !important;
	font-weight: 700;
	border-bottom: 1px solid var(--mm-black);
	text-decoration: none !important;
}

/* Stepper — used by [cmp_register] and [cmp_cancel_membership] */
.cmp-stepper {
	display: grid;
	grid-template-columns: repeat(var(--mm-stepper-count, 5), 1fr);
	background: var(--cmp-white);
	border: 1px solid var(--cmp-border);
}
.cmp-stepper-item {
	padding: 18px 20px;
	border-right: 1px solid var(--cmp-border);
	border-bottom: 3px solid transparent;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--cmp-white);
}
.cmp-stepper-item:last-child { border-right: none; }
.cmp-stepper-item.is-active {
	background: #FFFBEB;
	border-bottom-color: var(--cmp-primary);
}
.cmp-stepper-item.is-done { color: var(--cmp-text); }

/* Tables — member-facing */
.cmp-credit-table,
.cmp-booking-table,
table.cmp-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--cmp-white);
}
.cmp-credit-table th,
.cmp-booking-table th,
table.cmp-table th {
	background: var(--mm-black);
	color: var(--cmp-white);
	font-size: 11px;
	letter-spacing: 0.18em;
	font-weight: 700;
	text-transform: uppercase;
	text-align: left;
	padding: 14px 20px;
}
.cmp-credit-table td,
.cmp-booking-table td,
table.cmp-table td {
	padding: 14px 20px;
	border-bottom: 1px solid #F1F5F9;
	font-size: 14px;
}
.cmp-credit-table tr:nth-child(even) td,
.cmp-booking-table tr:nth-child(even) td { background: #FAFBFC; }

/* Form rows */
.cmp-form-row,
.cmp-form-row label {
	font-family: inherit;
}
.cmp-form-row input[type="text"],
.cmp-form-row input[type="email"],
.cmp-form-row input[type="tel"],
.cmp-form-row input[type="password"],
.cmp-form-row input[type="number"],
.cmp-form-row select,
.cmp-form-row textarea,
input[type="text"].cmp-input,
input[type="email"].cmp-input,
select.cmp-input,
textarea.cmp-input {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border: 1px solid #CBD5E1;
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
	background: var(--cmp-white);
}
.cmp-form-row textarea, textarea.cmp-input { height: auto; min-height: 96px; padding: 12px 14px; }
.cmp-form-row label,
label.cmp-label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--cmp-text);
	display: block;
	margin-bottom: 6px;
}

/* Toggle / radio cards (the "select your tier" pattern) */
.cmp-toggle-group,
.cmp-tier-picker {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cmp-toggle-option,
.cmp-tier-option {
	display: grid;
	grid-template-columns: 24px 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 18px 20px;
	border: 1px solid var(--cmp-border);
	background: var(--cmp-white);
	border-radius: 4px;
	cursor: pointer;
}
.cmp-toggle-option.is-selected,
.cmp-tier-option.is-selected {
	border: 2px solid var(--cmp-primary);
	background: #FFFBEB;
}

/* Empty states */
.cmp-empty-state {
	padding: 36px 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.cmp-empty-state__icon {
	width: 64px;
	height: 64px;
	background: var(--mm-black);
	color: var(--cmp-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
}


/* 5 — Waiver banner --------------------------------------------------- */
.mm-waiver-banner {
	background: var(--wp--preset--color--danger-band);
	color: var(--cmp-white);
	border-bottom: 2px solid var(--cmp-danger);
	padding: 14px clamp(20px, 4vw, 40px);
}
.mm-waiver-banner__inner {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 18px;
	align-items: center;
}
.mm-waiver-banner__icon {
	width: 36px;
	height: 36px;
	background: var(--cmp-danger);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 900;
}
.mm-waiver-banner__kicker {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #FCA5A5;
}
.mm-waiver-banner__body {
	font-size: 14.5px;
	font-weight: 600;
	margin-top: 2px;
}
.mm-waiver-banner__cta .wp-block-button__link,
.mm-waiver-banner__cta {
	background: var(--cmp-primary);
	color: var(--cmp-on-primary);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 10px 18px;
	border-radius: 4px;
	font-size: 13px;
}

/* Payment-retry banner — Stripe Smart Retry window. Amber/warning rather
 * than red — payment will likely recover and we don't want the member to
 * panic. Same structure as the waiver banner so they stack if both fire. */
.mm-payment-retry-banner {
	background: #78350F;          /* deep amber */
	color: #FFF;
	border-bottom: 2px solid #B45309;
	padding: 14px clamp(20px, 4vw, 40px);
}
.mm-payment-retry-banner__inner {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 18px;
	align-items: center;
}
.mm-payment-retry-banner__icon {
	width: 36px;
	height: 36px;
	background: #F59E0B;
	color: #0F172A;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 900;
}
.mm-payment-retry-banner__kicker {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #FCD34D;
}
.mm-payment-retry-banner__body {
	font-size: 14.5px;
	font-weight: 600;
	margin-top: 2px;
}
.mm-payment-retry-banner__cta {
	background: #FCD34D;
	color: #0F172A;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 10px 18px;
	border-radius: 4px;
	font-size: 13px;
	text-decoration: none;
}


/* 6 — Mobile tab bars -------------------------------------------------- */
.mm-mobile-tabs {
	display: none;
}
.mm-mobile-tabs__btn {
	background: transparent;
	border: none;
	padding: 8px 0;
	cursor: pointer;
	font-family: inherit;
	color: #94A3B8;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-align: center;
	text-decoration: none;
	display: block;
}
.mm-mobile-tabs__btn.is-active { color: var(--mm-black); }
.mm-mobile-tabs__btn::before {
	content: "";
	display: block;
	width: 4px;
	height: 4px;
	margin: 0 auto 6px;
	border-radius: 50%;
	background: transparent;
}
.mm-mobile-tabs__btn.is-active::before { background: var(--cmp-primary); }


/* 7 — Header / footer / nav ------------------------------------------ */

/* Logged-out / logged-in shared header chrome */
.mm-header {
	background: var(--mm-black);
	color: var(--cmp-white);
	border-bottom: 1px solid rgba(219,173,2,.25);
}
.mm-header__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 40px);
	height: 80px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(20px, 4vw, 48px);
}
.mm-nav {
	display: flex;
	gap: clamp(16px, 2.4vw, 32px);
	justify-content: center;
}
.mm-nav a {
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255,255,255,.85);
	text-decoration: none;
	padding: 8px 0;
	border-bottom: 2px solid transparent;
}
.mm-nav a.is-active,
.mm-nav a[aria-current="page"] {
	color: var(--cmp-primary);
	border-bottom-color: var(--cmp-primary);
}
.mm-nav a:hover { color: var(--cmp-primary); }

.mm-header__auth { display: flex; gap: 10px; align-items: center; }
.mm-header__auth .mm-login {
	font-size: 13.5px;
	font-weight: 600;
	color: rgba(255,255,255,.85);
	padding: 0 14px;
	text-decoration: none;
}
.mm-header__auth .mm-login:hover { color: var(--cmp-primary); }

/* Logged-in credit pill */
.mm-credit-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	background: rgba(219,173,2,.12);
	border: 1px solid rgba(219,173,2,.4);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	color: var(--cmp-white);
}
.mm-credit-pill__icon { color: var(--cmp-primary); display: inline-flex; }

/* Account chip */
.mm-account-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 14px 6px 6px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 999px;
	text-decoration: none;
}
.mm-account-chip__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--cmp-primary);
	color: var(--cmp-on-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.04em;
}
.mm-account-chip__meta { display: flex; flex-direction: column; line-height: 1.2; }
.mm-account-chip__name { font-size: 13px; font-weight: 700; color: var(--cmp-white); }
.mm-account-chip__tier {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--cmp-primary);
	text-transform: uppercase;
}

/* Mobile menu toggle (logged-out + logged-in) */
.mm-menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	background: transparent;
	border: none;
	color: inherit;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
.mm-menu-toggle svg { width: 22px; height: 22px; }

/* Footer */
.mm-footer {
	background: var(--mm-black);
	color: var(--cmp-white);
	padding: 56px clamp(20px, 4vw, 40px) 32px;
}
.mm-footer__inner {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr) 1.3fr;
	gap: 56px;
}
.mm-footer h4 {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: var(--cmp-primary);
	text-transform: uppercase;
	margin: 0 0 18px;
}
.mm-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mm-footer a { color: rgba(255,255,255,.75); text-decoration: none; font-size: 14px; }
.mm-footer a:hover { color: var(--cmp-primary); }
.mm-footer__legal {
	max-width: 1320px;
	margin: 40px auto 0;
	padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,.1);
	display: flex;
	justify-content: space-between;
	font-size: 12.5px;
	color: rgba(255,255,255,.5);
}
.mm-footer__socials { display: flex; gap: 12px; margin-top: 22px; }
.mm-footer__socials a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.18);
	display: flex;
	align-items: center;
	justify-content: center;
}
.mm-footer__socials a:hover { background: rgba(255,255,255,.05); }


/* 8 — Responsive ------------------------------------------------------ */
@media (max-width: 1024px) {
	.mm-footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
	.cmp-stepper { grid-template-columns: 1fr 1fr; }
	.cmp-stepper-item { border-right: none; border-bottom: 1px solid var(--cmp-border); }
}

@media (max-width: 720px) {
	.mm-header__inner { grid-template-columns: auto 1fr auto; }
	.mm-nav { display: none; }
	.mm-menu-toggle { display: inline-flex; }

	/* On mobile the header reduces to logo + hamburger; auth links move into overlay */
	.mm-header__auth .mm-login,
	.mm-header__auth .cmp-btn-primary { display: none !important; }

	.mm-footer__inner { grid-template-columns: 1fr; gap: 32px; }
	.mm-footer__legal { flex-direction: column; gap: 6px; }

	.is-style-dark-hero h1 { font-size: 44px !important; }

	/* Mobile tab bars visible only on member-hub / instructor-hub */
	body.page-template-page-member-hub,
	body.page-template-page-instructor-hub {
		padding-bottom: 80px;
	}
	body.page-template-page-member-hub .mm-mobile-tabs,
	body.page-template-page-instructor-hub .mm-mobile-tabs {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: var(--cmp-white);
		border-top: 1px solid var(--cmp-border);
		padding: 8px 0 22px;
		z-index: 100;
		box-shadow: 0 -8px 24px rgba(10,10,10,.08);
	}

	/* Sticky single-CTA strips collapse to bottom */
	.mm-sticky-cta {
		position: sticky;
		bottom: 0;
		z-index: 50;
		background: var(--cmp-primary);
		color: var(--cmp-on-primary);
		padding: 14px 18px;
		box-shadow: 0 -10px 30px rgba(0,0,0,.25);
	}
}

@media (max-width: 420px) {
	.is-style-dark-hero h1 { font-size: 36px !important; }
}


/* 9 — Print ----------------------------------------------------------- */
/* Print rules scoped to the two pages members actually print: their membership
   and their bookings. Other pages use the browser's default print. */
@media print {
	body.page-template-page-my-membership .mm-header,
	body.page-template-page-my-membership .mm-footer,
	body.page-template-page-my-membership .mm-waiver-banner,
	body.page-template-page-my-membership .mm-mobile-tabs,
	body.page-template-page-my-membership .mm-sticky-cta,
	body.page-template-page-my-membership .wp-block-buttons,
	body.page-template-page-my-membership .cmp-btn,
	body.page-template-page-my-membership .cmp-modal-overlay,
	body.page-template-page-my-bookings .mm-header,
	body.page-template-page-my-bookings .mm-footer,
	body.page-template-page-my-bookings .mm-waiver-banner,
	body.page-template-page-my-bookings .mm-mobile-tabs,
	body.page-template-page-my-bookings .mm-sticky-cta,
	body.page-template-page-my-bookings .wp-block-buttons,
	body.page-template-page-my-bookings .cmp-btn,
	body.page-template-page-my-bookings .cmp-modal-overlay {
		display: none !important;
	}
	body.page-template-page-my-membership,
	body.page-template-page-my-bookings { background: #fff !important; color: #000 !important; }
	body.page-template-page-my-membership .is-style-dark-hero,
	body.page-template-page-my-membership .is-style-dark,
	body.page-template-page-my-bookings .is-style-dark-hero,
	body.page-template-page-my-bookings .is-style-dark {
		background: #fff !important;
		color: #000 !important;
		border-bottom: 2px solid #000;
	}
	body.page-template-page-my-membership .is-style-dark-hero h1,
	body.page-template-page-my-membership .is-style-dark-hero h2,
	body.page-template-page-my-membership .is-style-dark-hero h3,
	body.page-template-page-my-membership .is-style-dark h1,
	body.page-template-page-my-membership .is-style-dark h2,
	body.page-template-page-my-membership .is-style-dark h3,
	body.page-template-page-my-bookings .is-style-dark-hero h1,
	body.page-template-page-my-bookings .is-style-dark-hero h2,
	body.page-template-page-my-bookings .is-style-dark-hero h3,
	body.page-template-page-my-bookings .is-style-dark h1,
	body.page-template-page-my-bookings .is-style-dark h2,
	body.page-template-page-my-bookings .is-style-dark h3 { color: #000 !important; }
	body.page-template-page-my-membership .is-style-dark-hero::before,
	body.page-template-page-my-membership .is-style-mm-hatch::before,
	body.page-template-page-my-bookings .is-style-dark-hero::before,
	body.page-template-page-my-bookings .is-style-mm-hatch::before { display: none !important; }
	body.page-template-page-my-membership .cmp-chip-gold,
	body.page-template-page-my-membership .cmp-tier-badge-gold,
	body.page-template-page-my-bookings .cmp-chip-gold,
	body.page-template-page-my-bookings .cmp-tier-badge-gold {
		background: #fff !important;
		color: #000 !important;
		border: 1px solid #000 !important;
	}
	body.page-template-page-my-membership a,
	body.page-template-page-my-bookings a { color: #000 !important; text-decoration: underline; }
}


/* =========================================================================
 * /my-membership/ — responsive overrides for the dashboard.
 *
 * Desktop layouts are set via inline `style="grid-template-columns:..."`
 * on widget containers in functions.php. At narrower viewports we override
 * with !important so the hero card stops squishing, the body collapses to
 * one column, and the heavier widget rows (Upcoming, Family, Session
 * Notes) restructure to stacked / wrappable blocks.
 *
 * Breakpoints follow the brief's narrow / mobile thinking:
 *   ≤ 980px : tablet — hero stacks, body collapses to 1col
 *   ≤ 640px : phone — stat row stacks, widget rows simplify
 * ======================================================================= */

@media (max-width: 980px) {
	/* Hero: greeting + action buttons on top, member card below */
	.mm-hero-row {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}
	/* Body: stack so each widget is full-width */
	.mm-membership-body {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}
	/* Member card max-width so it doesn't stretch corner-to-corner on tablet */
	.mm-member-card { max-width: 520px; }
}

@media (max-width: 640px) {
	/* Stat row collapses to one column */
	.mm-stat-row {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}
	.mm-stat-tile,
	.mm-stat-tile.cmp-stat-card { padding: 20px !important; }
	.mm-stat-tile [style*="font-size:56px"] { font-size: 40px !important; }

	/* Hero greeting H1 shrinks */
	.mm-hero-row h1.mm-hero-greeting,
	.mm-hero-row h1 {
		font-size: clamp(36px, 10vw, 56px) !important;
	}
	/* Hero action buttons full-width so they don't crowd */
	.mm-membership-actions { flex-direction: column; align-items: stretch; }
	.mm-membership-actions a { justify-content: center; }

	/* Member card header chips wrap and shrink slightly */
	.mm-member-card { max-width: none; }

	/* Upcoming Sessions: date pill spans rows on the left; time / class
	   info / status chip / manage button stack on the right. Anchored via
	   inline-style attribute since the desktop grid is set inline. */
	.mm-upcoming > div > div[style*="grid-template-columns:64px 80px 2fr auto auto"] {
		grid-template-columns: 64px 1fr !important;
		column-gap: 16px !important;
		row-gap: 6px !important;
		padding: 16px 18px !important;
	}
	.mm-upcoming > div > div[style*="grid-template-columns:64px 80px 2fr auto auto"] > :first-child {
		grid-row: 1 / span 4 !important;
		align-self: start !important;
	}
	.mm-upcoming > div > div[style*="grid-template-columns:64px 80px 2fr auto auto"] > :nth-child(n+2) {
		grid-column: 2 !important;
		justify-self: start !important;
	}
	/* Time becomes a small subtitle above the class name */
	.mm-upcoming > div > div[style*="grid-template-columns:64px 80px 2fr auto auto"] > :nth-child(2) {
		font-size: 14px !important;
		font-weight: 700 !important;
		color: #64748B !important;
	}
	/* Manage button: right-align on its own row */
	.mm-upcoming > div > div[style*="grid-template-columns:64px 80px 2fr auto auto"] > :nth-child(5) {
		justify-self: end !important;
	}

	/* Family rows: flex with wrap so monogram + name + tier chip + discount
	   pill all stay on one line; chips wrap to a second line only when the
	   name is genuinely too long. */
	.mm-family > div > div[style*="grid-template-columns:36px 1fr auto auto"] {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 10px !important;
	}
	.mm-family > div > div[style*="grid-template-columns:36px 1fr auto auto"] > :first-child {
		flex: 0 0 36px !important;
	}
	.mm-family > div > div[style*="grid-template-columns:36px 1fr auto auto"] > :nth-child(2) {
		flex: 1 1 140px !important; /* take available, shrink down to 140 */
		min-width: 0 !important;
	}
	.mm-family > div > div[style*="grid-template-columns:36px 1fr auto auto"] > :nth-child(3),
	.mm-family > div > div[style*="grid-template-columns:36px 1fr auto auto"] > :nth-child(4) {
		flex: 0 0 auto !important;
	}

	/* Family CTA card body padding tightens */
	.mm-family-cta { padding: 16px 18px !important; }

	/* Session-notes row date pill + class info stack */
	.mm-session-notes .mm-session-note-row > div {
		grid-template-columns: 56px 1fr !important;
		gap: 14px !important;
	}
	.mm-session-notes .mm-note-edit-btn {
		grid-column: 1 / -1 !important;
		justify-self: end !important;
		margin-top: -8px !important;
	}

	/* Quick links rows: ensure proper line wrapping */
	.mm-quick-links a { padding: 12px 14px !important; }

	/* Credit history row: tighten padding */
	.mm-credit-history > div[style*="grid-template-columns:70px"] {
		grid-template-columns: 60px 1fr auto !important;
		padding: 12px 18px !important;
	}

	/* Member card body padding tighter on phone */
	.mm-member-card > div { padding-left: 20px !important; padding-right: 20px !important; }
}


/* =========================================================================
 * /manage-subscription/ — responsive overrides.
 * Body grid stacks on tablet; switch-tier radio rows collapse to 2-col on
 * very narrow viewports so price stays readable.
 * ======================================================================= */

@media (max-width: 980px) {
	.mm-manage-sub-body { grid-template-columns: 1fr !important; gap: 20px !important; }
}

@media (max-width: 640px) {
	/* Hero header chips wrap on phone */
	.mm-manage-sub-card > div:first-child {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	.mm-manage-sub-card > div:first-child > span {
		margin-top: 6px;
	}

	/* Switch-tier radio rows: stack price below the name/description */
	.mm-manage-sub-card .mm-tier-radio {
		grid-template-columns: 24px 1fr !important;
		row-gap: 6px !important;
	}
	.mm-manage-sub-card .mm-tier-radio > :last-child {
		grid-column: 2 !important;
		justify-self: start !important;
		font-size: 16px !important;
	}
}


/* =========================================================================
 * /instructor-hub/ — responsive overrides.
 * Tablet: side rail moves below the session list. Phone: session card
 * actions stack vertically; detail panel (plan + roster) goes 1-col.
 * ======================================================================= */

@media (max-width: 980px) {
	/* Collapse the 2-col grid to a flex column so aside children can be
	 * reordered around the sessions list via `order`. `display: contents`
	 * on the aside hoists its kids into the flex parent. */
	.mm-instructor-body { display: flex !important; flex-direction: column !important; gap: 20px !important; align-items: stretch !important; }
	.mm-instructor-body > aside { display: contents !important; }
	.mm-instructor-body > div:first-child { order: 2; }
	.mm-instructor-body .mm-instructor-quick-actions { order: 1; }
	.mm-instructor-body .mm-instructor-stats        { order: 3; }
	.mm-instructor-body .mm-instructor-tip          { order: 4; }
}

@media (max-width: 640px) {
	/* Session card top row: stack content + buttons */
	.mm-instructor-session > div:first-child {
		grid-template-columns: 56px 1fr !important;
		row-gap: 12px !important;
	}
	.mm-instructor-session > div:first-child > :first-child {
		grid-row: 1 / span 2 !important;
		align-self: start !important;
	}
	.mm-instructor-session > div:first-child > :nth-child(2) {
		grid-column: 2 !important;
	}
	.mm-instructor-session > div:first-child > :nth-child(3) {
		grid-column: 1 / -1 !important;
		justify-content: flex-start !important;
	}
	/* Detail panel: stack plan + roster vertically */
	.mm-instructor-session .mm-detail-panel > div {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
}

/* =======================================================================
 * /locations/ — responsive overrides.
 * Tablet: stack photo above the text. Phone: tighten card padding and
 * stretch the two CTAs full-width.
 * ======================================================================= */

@media (max-width: 820px) {
	.mm-location-card { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
	.mm-location-card > div:last-child { padding: 24px 22px !important; }
	.mm-location-card h3 { font-size: 23px !important; }
	.mm-location-card__cta { flex-direction: column !important; align-items: stretch !important; }
	.mm-location-card__cta a { justify-content: center !important; }
}

/* =======================================================================
 * /my-bookings/ — small polish to the plugin's booking-list output.
 * Upgrade "Cannot cancel" from plain italic text to a soft pill so it
 * matches the rest of the page's badge language without competing with
 * primary actions.
 * ======================================================================= */

/* Logged-out empty state. The plugin's shortcode emits a small card with a
 * heading, a one-liner of context, and a primary "Log in" CTA — give it a
 * gold-left accent + breathing room so it feels intentional rather than a
 * placeholder. Lives on a white .cmp-my-bookings wrapper. */
.cmp-bookings-empty-loggedout {
	max-width: 560px;
	padding: 28px 32px;
	border-left: 4px solid var(--mm-gold, #DBAD02);
	background: #FAFAFA;
}
.cmp-bookings-empty-loggedout h3 {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--mm-ink, #0F172A);
}
.cmp-bookings-empty-loggedout p {
	margin: 0 0 20px;
	color: #475569;
	line-height: 1.55;
}
.cmp-bookings-empty-loggedout .cmp-btn-primary {
	display: inline-block;
	background: var(--mm-gold, #DBAD02);
	color: var(--mm-ink, #0F172A);
	border: 1px solid var(--mm-gold, #DBAD02);
	padding: 12px 22px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 12.5px;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.cmp-bookings-empty-loggedout .cmp-btn-primary:hover,
.cmp-bookings-empty-loggedout .cmp-btn-primary:focus {
	background: var(--mm-ink, #0F172A);
	color: var(--mm-gold, #DBAD02);
}

.cmp-booking-locked {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	background: #F1F5F9;
	color: #64748B;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 999px;
	border: 1px solid #E2E8F0;
	font-style: normal;
}

/* The plugin's "Download Calendar" link contains a stray <br> between the
 * dashicon and the label, which stacks them vertically inside our
 * inline-flex button. Strip the linebreak so icon + text sit side-by-side. */
.cmp-bookings-header .cmp-btn br { display: none; }
.cmp-bookings-header .cmp-btn .dashicons {
	line-height: 1;
	vertical-align: middle;
}

/* "Booked" affordance on the schedule list — appears in place of the BOOK
 * button on sessions the current user already has a live booking for.
 * Reads as confirmed (gold tick + soft gold fill) and links to /my-bookings/.
 * Deliberately not a "ghost" style — needs enough weight to feel decisive
 * on a row that otherwise looks identical to bookable ones. */
.cmp-btn-booked,
a.cmp-btn-booked {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(219, 173, 2, 0.12);
	color: var(--mm-ink, #0F172A);
	border: 1px solid var(--mm-gold, #DBAD02);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 12.5px;
	padding: 8px 14px;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.cmp-btn-booked:hover,
.cmp-btn-booked:focus {
	background: var(--mm-gold, #DBAD02);
	color: var(--mm-ink, #0F172A);
}
.cmp-btn-booked .cmp-booked-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--mm-gold, #DBAD02);
	color: var(--mm-ink, #0F172A);
	font-size: 11px;
	font-weight: 900;
	line-height: 1;
}
.cmp-btn-booked:hover .cmp-booked-check,
.cmp-btn-booked:focus .cmp-booked-check {
	background: var(--mm-ink, #0F172A);
	color: var(--mm-gold, #DBAD02);
}

/* The plugin emits the Download Calendar button with .cmp-btn-secondary,
 * which the theme paints solid dark — on the white .cmp-my-bookings card
 * that reads as a heavy, secondary block sat next to the section heading.
 * Promote it to a gold-ghost treatment so the action reads as an
 * available export, not an afterthought button. Scoped to the
 * bookings-header so we don't reflow the secondary style elsewhere. */
.cmp-bookings-header .cmp-btn-secondary {
	background: transparent;
	color: var(--mm-ink, #0F172A);
	border: 1px solid var(--mm-gold, #DBAD02);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 12px;
	padding: 10px 16px;
}
.cmp-bookings-header .cmp-btn-secondary .dashicons {
	color: var(--mm-gold, #DBAD02);
}
.cmp-bookings-header .cmp-btn-secondary:hover,
.cmp-bookings-header .cmp-btn-secondary:focus {
	background: var(--mm-gold, #DBAD02);
	color: var(--mm-ink, #0F172A);
	border-color: var(--mm-gold, #DBAD02);
}
.cmp-bookings-header .cmp-btn-secondary:hover .dashicons,
.cmp-bookings-header .cmp-btn-secondary:focus .dashicons {
	color: var(--mm-ink, #0F172A);
}

/* The plugin's booking row uses display:flex + justify-content:space-between.
 * Past rows have only 2 children (date + details), so the details column
 * gets shoved to the right. Force the details column to grow and fill the
 * gap so the layout stays consistent across upcoming + recent rows. */
.cmp-booking-item .cmp-booking-details {
	flex: 1 1 auto !important;
	min-width: 0;
}
/* Hide any empty .cmp-booking-meta paragraph the plugin emits when our
 * attendee filter strips the only span inside it. */
.cmp-booking-meta:empty,
.cmp-booking-attendee:empty { display: none !important; }

/* =======================================================================
 * /pricing/ — responsive overrides.
 * The full-layout tier grid + credit-packs strip are inline-styled at
 * fixed 3-col / 1fr+2fr. Stack them on smaller screens.
 * ======================================================================= */

@media (max-width: 900px) {
	.mm-pricing-teaser--full { grid-template-columns: 1fr !important; gap: 16px !important; margin-top: 0 !important; }
	.mm-credit-packs { grid-template-columns: 1fr !important; gap: 28px !important; padding: 36px 28px !important; }
	.mm-credit-packs > div:last-child { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 560px) {
	.mm-credit-packs > div:last-child { grid-template-columns: 1fr !important; }
	.mm-credit-packs { padding: 28px 22px !important; }
	.mm-credit-packs h3 { font-size: 28px !important; }
}

/* =======================================================================
 * /register/ — promote tiers with _cmp_tier_badge.
 * The plugin renders 3 identical cards. JS adds .mm-tier-card--promoted
 * to badged tiers; these rules lift them visually: order to first, gold
 * border on the inner, shadow lift, and a top-anchored badge ribbon.
 * ======================================================================= */

.cmp-tier-card.mm-tier-card--promoted {
	order: -1;                  /* float to the top of the grid */
	overflow: visible !important; /* so the badge can sit above the card */
	position: relative;
}
.cmp-tier-card.mm-tier-card--promoted .cmp-tier-card__inner {
	border-color: #DBAD02 !important;
	border-width: 2px !important;
	box-shadow: 0 12px 32px rgba(219, 173, 2, 0.18);
	padding-top: 34px !important;  /* room for the ribbon */
}
.mm-tier-card__badge {
	position: absolute;
	top: -12px;
	left: 24px;
	background: #DBAD02;
	color: #0A0A0A;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 2px;
	z-index: 2;
}

/* =======================================================================
 * /register-simple/ — the plugin's `.cmp-simple-header` heading + subtitle
 * sit between the hero and the white form card, on the dark page
 * background. The plugin styles them dark slate (#0F172A) assuming a
 * light backdrop; override to gold + muted-white so they're legible.
 * ======================================================================= */

.cmp-simple-header { text-align: center; padding: 24px 16px 0; }
.cmp-simple-header h2 {
	color: #FFFFFF !important;
	font-weight: 900 !important;
	letter-spacing: -0.02em;
	font-size: clamp(28px, 4vw, 36px);
	margin: 0;
}
.cmp-simple-header > p,
.cmp-simple-header > .cmp-simple-subtitle,
.cmp-simple-header > div { color: rgba(255, 255, 255, 0.7) !important; font-size: 16px; margin-top: 8px; }

/* The plugin's tier picker on /register-simple/ is flex row-nowrap with
 * 180px min-width children, so 3 cards exceed the 480px form column and
 * the third is hidden behind an overflow-x: auto scroller. Let them wrap
 * so all three are visible. */
.cmp-simple-tiers { flex-wrap: wrap !important; overflow-x: visible !important; }
.cmp-simple-tiers > * { min-width: 0 !important; flex: 1 1 140px !important; }

/* /register-simple/ — the plugin's "I agree to the Club Rules & Privacy Policy"
 * checkbox sits inside a `.cmp-simple-card--submit` wrapper that the plugin
 * deliberately styles as `background: transparent` (so the submit button
 * floats on whatever surface the page provides). On our dark `is-style-dark`
 * main wrapper that leaves the surrounding "I agree to the" / "&" text
 * black-on-dark and effectively invisible. Lift the colour when we're on
 * the dark surface. The Club Rules / Privacy Policy links already get the
 * brand gold from the plugin's own CSS, so we only touch the wrapping copy. */
.is-style-dark .cmp-simple-card--submit .cmp-simple-agree,
.is-style-dark .cmp-simple-card--submit .cmp-simple-agree span {
	color: rgba(255, 255, 255, 0.85);
}
.is-style-dark .cmp-simple-card--submit .cmp-simple-agree a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}


/* =====================================================================
 *  WooCommerce Checkout (/checkout/) — block theme overrides
 *  ---------------------------------------------------------------------
 *  All rules are scoped under .mm-checkout-main (the wrapping <main>
 *  added by templates/page-checkout.html) so other Woo surfaces
 *  (cart, my-account) are left untouched until they get their own pass.
 * ===================================================================== */

.mm-checkout-main {
	font-family: var(--wp--preset--font-family--inter), system-ui, sans-serif;
}

/* Two-column shell — force fluid distribution so the columns don't wrap
 * at viewports under ~1100px. Woo's default flex bases let the sidebar
 * push past the container and drop below; pin sizes via flex instead. */
.mm-checkout-main .wc-block-components-sidebar-layout {
	gap: 28px;
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
	flex-wrap: nowrap;
	align-items: flex-start;
}
.mm-checkout-main .wc-block-checkout__main {
	flex: 1 1 0;
	min-width: 0;
}
.mm-checkout-main .wc-block-checkout__sidebar {
	flex: 0 0 340px;
	min-width: 0;
}

/* --- LEFT COLUMN: each section becomes a white card with gold accent --- */
.mm-checkout-main .wc-block-components-checkout-step {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 3px solid var(--wp--preset--color--primary);
	padding: 28px 32px;
	margin-bottom: 16px;
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.mm-checkout-main .wc-block-components-checkout-step__heading {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
}
.mm-checkout-main .wc-block-components-checkout-step__title {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--black);
	margin: 0;
	text-transform: none;
}

/* --- Form inputs: match the brand input language used on signup --- */
.mm-checkout-main .wc-block-components-text-input,
.mm-checkout-main .wc-blocks-components-select {
	margin-top: 12px;
}
.mm-checkout-main .wc-block-components-text-input input.input-text,
.mm-checkout-main .wc-blocks-components-select .wc-blocks-components-select__select {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	background: var(--wp--preset--color--white);
	padding: 14px 16px;
	font-size: 15px;
	min-height: 50px;
	color: var(--wp--preset--color--black);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mm-checkout-main .wc-block-components-text-input input.input-text:focus,
.mm-checkout-main .wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(219, 173, 2, 0.22);
	outline: none;
}
.mm-checkout-main .wc-block-components-text-input label,
.mm-checkout-main .wc-blocks-components-select__label {
	color: rgba(15, 23, 42, 0.65);
	font-size: 13px;
	font-weight: 500;
}
.mm-checkout-main .wc-block-components-text-input.is-active label,
.mm-checkout-main .wc-blocks-components-select.is-active .wc-blocks-components-select__label {
	color: var(--wp--preset--color--primary);
}
.mm-checkout-main .wc-block-components-address-form__address_2-toggle {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	font-size: 13.5px;
}

/* Checkbox + radio accents */
.mm-checkout-main .wc-block-components-checkbox__input,
.mm-checkout-main .wc-block-components-radio-control__input {
	accent-color: var(--wp--preset--color--primary);
}

/* --- Payment method block: tighter card, gold-when-checked.
 * Woo positions the radio dot absolutely on the left edge of the option,
 * so the label needs left padding to clear it. Use 44px so the radio +
 * its hit-target sit cleanly to the left of "Credit / Debit Card". */
.mm-checkout-main .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	padding: 16px 18px 16px 44px;
	background: #FAFBFC;
}
.mm-checkout-main .wc-block-components-radio-control__option-checked {
	border-color: var(--wp--preset--color--primary) !important;
	background: rgba(219, 173, 2, 0.06) !important;
	box-shadow: inset 3px 0 0 var(--wp--preset--color--primary);
}
.mm-checkout-main .wc-block-components-radio-control__input {
	left: 14px;
}

/* Stripe "Test Mode" pill — calmer */
.mm-checkout-main .woocommerce-test-mode-badge,
.mm-checkout-main .wc-stripe-test-mode-badge {
	background: rgba(219, 173, 2, 0.15);
	color: #B6900E;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 2px 10px;
	text-transform: uppercase;
}

/* --- Order-note toggle + terms text --- */
.mm-checkout-main .wc-block-checkout__add-note .wc-block-components-checkbox__label {
	font-weight: 600;
	color: var(--wp--preset--color--black);
}
.mm-checkout-main .wc-block-checkout__terms {
	font-size: 13px;
	color: rgba(15, 23, 42, 0.6);
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 16px;
	margin-top: 8px;
}
.mm-checkout-main .wc-block-checkout__terms a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

/* --- Actions row: solid gold PLACE ORDER + ghost return-to-cart --- */
.mm-checkout-main .wc-block-checkout__actions_row {
	margin-top: 24px;
	gap: 16px;
}
.mm-checkout-main .wc-block-components-checkout-place-order-button {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--black);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 0;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	min-height: 52px;
	padding: 0 28px;
	transition: filter 0.15s ease;
}
.mm-checkout-main .wc-block-components-checkout-place-order-button:hover {
	filter: brightness(0.94);
}
.mm-checkout-main .wc-block-components-checkout-return-to-cart-button {
	color: rgba(15, 23, 42, 0.7);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}
.mm-checkout-main .wc-block-components-checkout-return-to-cart-button:hover {
	color: var(--wp--preset--color--primary);
}

/* --- RIGHT COLUMN: dark sticky order-summary aside --- */
.mm-checkout-main .wc-block-checkout__sidebar {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	padding: 28px;
	border: 1px solid rgba(219, 173, 2, 0.45);
	box-shadow: 0 12px 32px rgba(10, 10, 10, 0.18);
	position: sticky;
	top: 24px;
}
.mm-checkout-main .wc-block-components-checkout-order-summary__title {
	color: var(--wp--preset--color--primary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: 12px;
	margin-bottom: 14px;
}
.mm-checkout-main .wc-block-components-checkout-order-summary__title-text {
	color: var(--wp--preset--color--primary);
}

/* Items — names, descriptions, prices */
.mm-checkout-main .wc-block-components-order-summary-item__image { display: none; }
.mm-checkout-main .wc-block-components-product-name {
	color: var(--wp--preset--color--white);
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-decoration: none;
}
.mm-checkout-main .wc-block-components-product-metadata__description {
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	margin-top: 4px;
}
.mm-checkout-main .wc-block-components-product-details__name {
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.mm-checkout-main .wc-block-components-product-details__value {
	color: var(--wp--preset--color--white);
}
.mm-checkout-main .wc-block-components-product-price__value,
.mm-checkout-main .wc-block-components-formatted-money-amount,
.mm-checkout-main .wc-block-formatted-money-amount {
	color: var(--wp--preset--color--white);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.mm-checkout-main .wc-block-components-order-summary-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding: 18px 0 22px;
	margin-bottom: 6px;
}
.mm-checkout-main .wc-block-components-order-summary-item:last-child {
	margin-bottom: 0;
}
/* Stack the price-and-name rows with proper rhythm, keep description below */
.mm-checkout-main .wc-block-components-order-summary-item__quantity { display: none; }
.mm-checkout-main .wc-block-components-product-name + .wc-block-components-product-price {
	margin-top: 4px;
}

/* Coupon expander */
.mm-checkout-main .wc-block-components-totals-coupon {
	padding: 10px 0;
}
.mm-checkout-main .wc-block-components-totals-coupon .wc-block-components-panel__button {
	color: var(--wp--preset--color--primary);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 0;
}
.mm-checkout-main .wc-block-components-totals-coupon input.input-text {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--wp--preset--color--white);
}
.mm-checkout-main .wc-block-components-totals-coupon button {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--black);
	font-weight: 700;
}

/* Subtotal / discount / fees / tax / total rows */
.mm-checkout-main .wc-block-components-totals-wrapper {
	padding: 6px 0;
}
.mm-checkout-main .wc-block-components-totals-item {
	color: rgba(255, 255, 255, 0.78);
	font-size: 14px;
	padding: 12px 0;
	border: 0;
	line-height: 1.4;
}
.mm-checkout-main .wc-block-components-totals-item__label { color: rgba(255, 255, 255, 0.7); }
.mm-checkout-main .wc-block-components-totals-footer-item {
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	padding-top: 22px;
	padding-bottom: 6px;
	margin-top: 12px;
	font-size: 16px;
}
.mm-checkout-main .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.mm-checkout-main .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.mm-checkout-main .wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
	color: var(--wp--preset--color--primary);
	font-size: 28px;
	font-weight: 900;
	letter-spacing: -0.02em;
}

/* Tiny "secured by Stripe" reassurance under the totals — uses a generated
 * ::after on the sidebar to avoid needing a template change. */
.mm-checkout-main .wc-block-checkout__sidebar::after {
	content: "Stripe-secured. Cancel anytime — 30-day notice after the first month.";
	display: block;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 12px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.55);
}

/* Responsive: stack on small screens, sidebar non-sticky */
@media (max-width: 900px) {
	.mm-checkout-main .wc-block-components-sidebar-layout {
		flex-direction: column;
	}
	.mm-checkout-main .wc-block-checkout__sidebar {
		position: static;
		margin-top: 24px;
	}
}

/* Mobile checkout — Woo collapses the sidebar into an "ORDER SUMMARY £xx.xx"
 * expandable accordion at the top of the form, and rerenders the totals/coupon
 * section as a separate block above the PLACE ORDER button. Adjust:
 *  - hide our ::after Stripe-secured disclaimer on mobile (it has nothing to
 *    anchor it to next to a collapsed accordion and looks orphaned), AND
 *  - dress the separate totals block to look like the dark branded sidebar so
 *    the bottom of the checkout stays on-brand instead of dropping back to a
 *    plain light card. The repeated "Order summary" heading + ADD COUPONS +
 *    totals get the same gold-on-black treatment.
 */
@media (max-width: 781px) {
	/* Woo renders the WC checkout block twice on mobile: a collapsed
	 * "ORDER SUMMARY £xx.xx" accordion in the desktop sidebar slot (sized
	 * around its hidden teleport-target content, so ~340px tall even though
	 * the visible label is one line), AND the real totals card inside the
	 * actions block below the form. Drop the duplicated top sidebar so the
	 * mobile checkout flows linearly: hero → form → order summary → place. */
	.mm-checkout-main .wc-block-checkout__sidebar {
		display: none;
	}

	/* Restyle the bottom Order Summary card as the dark/gold branded version
	 * — matches the desktop sidebar look, just stacked under the form on
	 * mobile. The element itself is .wp-block-woocommerce-checkout-order-summary-block
	 * (with secondary class .checkout-order-summary-block-fill-wrapper for the
	 * mobile "fill" placement). No outer .wc-block-components-checkout-step
	 * wraps it on mobile, so paint the block element directly. */
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block {
		background: var(--wp--preset--color--black);
		color: var(--wp--preset--color--white);
		border: 1px solid rgba(219, 173, 2, 0.45);
		border-left: 3px solid var(--wp--preset--color--primary);
		padding: 24px 22px;
		margin-top: 18px;
		box-shadow: 0 8px 24px rgba(10, 10, 10, 0.16);
	}
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wc-block-components-checkout-step__title {
		color: var(--wp--preset--color--primary);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		padding-bottom: 12px;
		margin: 0 0 14px;
	}
	/* Subtotal / Total rows inside the bottom card */
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wc-block-components-totals-item__label {
		color: rgba(255, 255, 255, 0.7);
	}
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wc-block-components-totals-footer-item {
		border-top: 1px solid rgba(255, 255, 255, 0.18);
	}
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
		color: rgba(255, 255, 255, 0.7);
	}
	/* Product line item: name/description on dark */
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wc-block-components-product-name {
		color: var(--wp--preset--color--white);
	}
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wc-block-components-product-metadata__description {
		color: rgba(255, 255, 255, 0.6);
	}
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wc-block-components-product-details__name {
		color: rgba(255, 255, 255, 0.55);
	}
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wc-block-components-product-details__value {
		color: var(--wp--preset--color--white);
	}
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wc-block-components-order-summary-item {
		border-bottom-color: rgba(255, 255, 255, 0.1);
	}
	/* Coupon expander input on dark */
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wc-block-components-totals-coupon input.input-text {
		background: rgba(255, 255, 255, 0.06);
		border-color: rgba(255, 255, 255, 0.2);
		color: var(--wp--preset--color--white);
	}

	/* Strip the per-row nested boxes Woo emits inside the order-summary block.
	 * Each sub-block (cart-items, coupon, subtotal, fee, discount, shipping,
	 * tax, totals) ships with its own border + padding that looks like a
	 * second layer of cards inside our dark wrapper. Flatten them so the
	 * dark card reads as one continuous surface, just with hairline dividers
	 * between groups. */
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block > div {
		background: transparent;
		border: 0;
		box-shadow: none;
	}
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wp-block-woocommerce-checkout-order-summary-cart-items-block,
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wp-block-woocommerce-checkout-order-summary-coupon-form-block,
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wp-block-woocommerce-checkout-order-summary-subtotal-block,
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wp-block-woocommerce-checkout-order-summary-fee-block,
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wp-block-woocommerce-checkout-order-summary-discount-block,
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wp-block-woocommerce-checkout-order-summary-shipping-block,
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wp-block-woocommerce-checkout-order-summary-taxes-block,
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wp-block-woocommerce-checkout-order-summary-totals-block {
		padding: 0;
		margin: 0;
	}
}


/* =====================================================================
 *  WooCommerce Order Confirmation (/checkout/order-received/{id}/)
 *  ---------------------------------------------------------------------
 *  Scoped to .mm-order-confirmation-main, the <main> wrapper added by
 *  templates/order-confirmation.html. Each WC sub-block becomes a
 *  white card with the brand's gold-left accent stripe, matching the
 *  signup + checkout language.
 * ===================================================================== */

.mm-order-confirmation-main {
	font-family: var(--wp--preset--font-family--inter), system-ui, sans-serif;
}

.mm-order-confirmation-main > .wc-block-order-confirmation-status,
.mm-order-confirmation-main > .wp-block-woocommerce-order-confirmation-status,
.mm-order-confirmation-main > .wp-block-woocommerce-order-confirmation-summary,
.mm-order-confirmation-main > .wp-block-woocommerce-order-confirmation-totals-wrapper,
.mm-order-confirmation-main > .wc-block-order-confirmation-address-wrapper {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 3px solid var(--wp--preset--color--primary);
	padding: 28px 32px;
	margin-bottom: 18px;
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

/* --- Status: "Order completed / Thank you" --- */
.mm-order-confirmation-main .wc-block-order-confirmation-status {
	padding: 32px;
}
.mm-order-confirmation-main .wc-block-order-confirmation-status h1 {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--black);
	margin: 0 0 8px;
}
.mm-order-confirmation-main .wc-block-order-confirmation-status h1::before {
	content: "✓";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--black);
	font-weight: 900;
	border-radius: 50%;
	margin-right: 12px;
	font-size: 16px;
	vertical-align: -6px;
}
.mm-order-confirmation-main .wc-block-order-confirmation-status p {
	font-size: 15px;
	color: rgba(15, 23, 42, 0.7);
	margin: 0;
}

/* --- Summary: key/value list (Order#, Date, Total, Email, Payment) --- */
.mm-order-confirmation-main .wc-block-order-confirmation-summary {
	padding-top: 24px;
	padding-bottom: 24px;
}
.mm-order-confirmation-main .wc-block-order-confirmation-summary-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 20px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mm-order-confirmation-main .wc-block-order-confirmation-summary-list-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	border: 0;
	padding: 0;
	margin: 0;
}
.mm-order-confirmation-main .wc-block-order-confirmation-summary-list-item__key {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(15, 23, 42, 0.55);
}
.mm-order-confirmation-main .wc-block-order-confirmation-summary-list-item__value {
	font-size: 16px;
	font-weight: 700;
	color: var(--wp--preset--color--black);
	font-variant-numeric: tabular-nums;
	word-break: break-word;
}

/* --- Totals wrapper: "Order details" + the table --- */
.mm-order-confirmation-main .wc-block-order-confirmation-totals-wrapper h2,
.mm-order-confirmation-main .wc-block-order-confirmation-address-wrapper h2,
.mm-order-confirmation-main .wc-block-order-confirmation-billing-wrapper h2 {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--black);
	margin: 0 0 18px;
}
.mm-order-confirmation-main .wc-block-order-confirmation-totals__table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}
.mm-order-confirmation-main .wc-block-order-confirmation-totals__table th {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(15, 23, 42, 0.55);
	text-align: left;
	padding: 10px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.mm-order-confirmation-main .wc-block-order-confirmation-totals__table thead th:last-child,
.mm-order-confirmation-main .wc-block-order-confirmation-totals__table td:last-child {
	text-align: right;
}
.mm-order-confirmation-main .wc-block-order-confirmation-totals__table td {
	padding: 16px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-size: 15px;
	color: var(--wp--preset--color--black);
}
.mm-order-confirmation-main .wc-block-order-confirmation-totals__product a {
	color: var(--wp--preset--color--black);
	font-weight: 700;
	text-decoration: none;
}
.mm-order-confirmation-main .wc-block-order-confirmation-totals__product a:hover {
	color: var(--wp--preset--color--primary);
}
.mm-order-confirmation-main .wc-block-order-confirmation-totals__table tfoot th {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(15, 23, 42, 0.6);
	padding-top: 16px;
}
.mm-order-confirmation-main .wc-block-order-confirmation-totals__table tfoot td {
	padding-top: 16px;
	font-size: 22px;
	font-weight: 900;
	color: var(--wp--preset--color--primary);
	border-bottom: 0;
}

/* --- Address wrapper: only Billing renders for digital memberships --- */
.mm-order-confirmation-main .wc-block-order-confirmation-address-wrapper {
	/* The wrapper IS the card; remove inner column borders */
	padding: 28px 32px;
}
.mm-order-confirmation-main .wc-block-order-confirmation-billing-wrapper {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	box-shadow: none;
}
.mm-order-confirmation-main .wc-block-order-confirmation-billing-address address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.7;
	color: rgba(15, 23, 42, 0.85);
}
.mm-order-confirmation-main .woocommerce-customer-details--phone {
	margin-top: 10px;
	font-size: 14px;
	color: rgba(15, 23, 42, 0.65);
}
.mm-order-confirmation-main .woocommerce-customer-details--phone::before {
	content: "Phone: ";
	font-weight: 700;
	color: rgba(15, 23, 42, 0.55);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-right: 6px;
}
/* Hide the shipping column entirely on digital memberships — no shipping
 * info ever exists, but Woo still emits the wrapper structure. */
.mm-order-confirmation-main .wc-block-order-confirmation-address-wrapper > .wp-block-column:first-child:not(:has(.wc-block-order-confirmation-shipping-address)) {
	display: none;
}

/* --- "Next steps" CTA row (theme-specific, defined in the template) --- */
.mm-order-confirmation-main .mm-next-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
	margin-top: 8px;
}
.mm-order-confirmation-main .mm-next-step {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 16px;
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	padding: 22px 24px;
	border: 1px solid rgba(219, 173, 2, 0.45);
	box-shadow: 0 8px 24px rgba(10, 10, 10, 0.16);
	align-items: start;
}
.mm-order-confirmation-main .mm-next-step__num {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--black);
	font-size: 18px;
	font-weight: 900;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mm-order-confirmation-main .mm-next-step__title {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--white);
}
.mm-order-confirmation-main .mm-next-step__desc {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.65);
	margin-top: 4px;
	line-height: 1.5;
}
.mm-order-confirmation-main .mm-next-step__cta {
	display: inline-block;
	margin-top: 10px;
	color: var(--wp--preset--color--primary);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}
.mm-order-confirmation-main .mm-next-step__cta:hover {
	color: var(--wp--preset--color--white);
}

/* =======================================================================
 * /login/ — Magic Login form theming.
 * The shortcode [magic_login_form] (HandyPlugins Magic Login Pro) emits a
 * minimal form inside #magic-login-shortcode. Style the input + button to
 * match brand language (gold focus, gold CTA, dark text) without touching
 * the plugin. Scoped to the .mm-login-card wrapper so we never re-style
 * the same elements if the shortcode shows up elsewhere.
 * ======================================================================= */

.mm-login-card #magic-login-shortcode,
.mm-login-card .magic-login-form {
	margin: 0;
}
.mm-login-card #magic-login-shortcode form,
.mm-login-card .magic-login-form form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.mm-login-card #magic-login-shortcode label,
.mm-login-card .magic-login-form label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mm-ink, #0F172A);
}
.mm-login-card #magic-login-shortcode input[type="text"],
.mm-login-card #magic-login-shortcode input[type="email"],
.mm-login-card .magic-login-form input[type="text"],
.mm-login-card .magic-login-form input[type="email"] {
	width: 100%;
	padding: 14px 16px;
	font-size: 16px;
	color: var(--mm-ink, #0F172A);
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 0;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mm-login-card #magic-login-shortcode input[type="text"]:focus,
.mm-login-card #magic-login-shortcode input[type="email"]:focus,
.mm-login-card .magic-login-form input[type="text"]:focus,
.mm-login-card .magic-login-form input[type="email"]:focus {
	outline: none;
	border-color: var(--mm-gold, #DBAD02);
	box-shadow: 0 0 0 2px rgba(219, 173, 2, 0.2);
}
.mm-login-card #magic-login-shortcode .magic-login-submit,
.mm-login-card .magic-login-form .magic-login-submit,
.mm-login-card #magic-login-shortcode input[type="submit"],
.mm-login-card .magic-login-form input[type="submit"],
.mm-login-card #magic-login-shortcode button[type="submit"],
.mm-login-card .magic-login-form button[type="submit"] {
	display: inline-block;
	width: 100%;
	padding: 14px 22px;
	background: var(--mm-gold, #DBAD02);
	color: var(--mm-ink, #0F172A);
	border: 1px solid var(--mm-gold, #DBAD02);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 13px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.mm-login-card #magic-login-shortcode .magic-login-submit:hover,
.mm-login-card .magic-login-form .magic-login-submit:hover,
.mm-login-card #magic-login-shortcode input[type="submit"]:hover,
.mm-login-card .magic-login-form input[type="submit"]:hover,
.mm-login-card #magic-login-shortcode button[type="submit"]:hover,
.mm-login-card .magic-login-form button[type="submit"]:hover {
	background: var(--mm-ink, #0F172A);
	color: var(--mm-gold, #DBAD02);
}
.mm-login-card .info,
.mm-login-card .magic-login-form .info {
	margin: 0 0 14px;
	padding: 12px 14px;
	background: #FEFCE8;
	border-left: 4px solid var(--mm-gold, #DBAD02);
	color: #92400E;
	font-size: 14px;
	line-height: 1.5;
}
.mm-login-card .success,
.mm-login-card .magic-login-form .success {
	margin: 0 0 14px;
	padding: 12px 14px;
	background: #F0FDF4;
	border-left: 4px solid #16A34A;
	color: #166534;
	font-size: 14px;
	line-height: 1.5;
}
.mm-login-card .error,
.mm-login-card .magic-login-form .error,
.mm-login-card #login_error {
	margin: 0 0 14px;
	padding: 12px 14px;
	background: #FEF2F2;
	border-left: 4px solid #B91C1C;
	color: #991B1B;
	font-size: 14px;
	line-height: 1.5;
}

@media (max-width: 600px) {
	.mm-login-card {
		padding: 28px 22px !important;
	}
}

/* =======================================================================
 * /my-membership/ + /instructor-hub/ — Rank request UI (v1.20.0).
 * Member's request modal + instructor's pending-inbox list + the direct
 * Promote-a-member screen all share these tokens.
 * ======================================================================= */

/* Member "Wrong or no rank?" card (sits in the /my-membership/ grid). */
.mm-rank-card .cmp-btn-secondary {
	background: transparent;
	color: var(--mm-ink, #0F172A);
	border: 1px solid var(--mm-gold, #DBAD02);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 12.5px;
	padding: 12px 18px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.mm-rank-card .cmp-btn-secondary:hover,
.mm-rank-card .cmp-btn-secondary:focus {
	background: var(--mm-gold, #DBAD02);
	color: var(--mm-ink, #0F172A);
}

/* Rank-request modal — branded form fields inside the existing cmp-booking-modal shell. */
.cmp-rank-modal .cmp-rank-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px;
}
.cmp-rank-modal .cmp-rank-field label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mm-ink, #0F172A);
}
.cmp-rank-modal .cmp-rank-field input[type="text"],
.cmp-rank-modal .cmp-rank-field input[type="number"],
.cmp-rank-modal .cmp-rank-field select,
.cmp-rank-modal .cmp-rank-field textarea {
	width: 100%;
	padding: 11px 14px;
	font-size: 15px;
	color: var(--mm-ink, #0F172A);
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 0;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	font-family: inherit;
}
.cmp-rank-modal .cmp-rank-field textarea {
	resize: vertical;
	min-height: 60px;
}
.cmp-rank-modal .cmp-rank-field input:focus,
.cmp-rank-modal .cmp-rank-field select:focus,
.cmp-rank-modal .cmp-rank-field textarea:focus {
	outline: none;
	border-color: var(--mm-gold, #DBAD02);
	box-shadow: 0 0 0 2px rgba(219, 173, 2, 0.2);
}

/* Instructor inbox of pending requests. */
.cmp-rank-inbox-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.cmp-rank-request-item {
	border: 1px solid #E2E8F0;
	border-left: 4px solid var(--mm-gold, #DBAD02);
	background: #FAFAFA;
	padding: 14px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.cmp-rank-request-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}
.cmp-rank-request-meta strong {
	font-size: 15px;
	color: var(--mm-ink, #0F172A);
}
.cmp-rank-request-discipline {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #64748B;
}
.cmp-rank-request-ask {
	font-size: 16px;
	color: var(--mm-ink, #0F172A);
	display: flex;
	gap: 8px;
	align-items: center;
}
.cmp-rank-request-arrow {
	color: var(--mm-gold, #DBAD02);
	font-weight: 800;
}
.cmp-rank-request-note {
	margin: 0;
	font-size: 13.5px;
	font-style: italic;
	color: #475569;
	padding-left: 12px;
	border-left: 2px solid #E2E8F0;
}
.cmp-rank-request-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 4px;
}
.cmp-rank-request-when {
	font-size: 12px;
	color: #64748B;
}
.cmp-rank-request-actions {
	display: flex;
	gap: 8px;
}
.cmp-rank-request-actions .cmp-btn {
	padding: 7px 14px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 0;
}
.cmp-rank-request-actions .cmp-btn-primary {
	background: var(--mm-gold, #DBAD02);
	color: var(--mm-ink, #0F172A);
	border: 1px solid var(--mm-gold, #DBAD02);
}
.cmp-rank-request-actions .cmp-btn-secondary {
	background: transparent;
	color: var(--mm-ink, #0F172A);
	border: 1px solid #E2E8F0;
}

/* Direct Promote-a-member screen. */
.cmp-rank-promote-search input[type="search"] {
	border-radius: 0;
}
.cmp-rank-promote-results {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.cmp-rank-promote-result {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	text-decoration: none;
	color: var(--mm-ink, #0F172A);
	font-size: 14px;
	transition: border-color 0.15s ease;
}
.cmp-rank-promote-result:hover,
.cmp-rank-promote-result:focus {
	border-color: var(--mm-gold, #DBAD02);
}
.cmp-rank-promote-result span {
	color: #64748B;
	font-size: 13px;
}