/* Coaches Manager — front-end + admin styles */

:root {
	--cm-accent: #ae8b5c;
	--cm-accent-dark: #0f2e3c;
	--cm-radius: 16px;
	--cm-gap: 40px;
}

/* ---------- Photo loading placeholder ---------- */
/* Lightweight (zero extra HTTP request) gray placeholder + person icon,
   shown as a CSS background behind every coach photo. The <img> itself
   starts transparent and fades in once it has actually finished
   loading (see assets/js/cm-image-loader.js) so a slow-loading photo
   never shows a blank box — the placeholder is visible in the meantime. */
.cm-photo-wrap {
	position: relative;
	overflow: hidden;
	background-color: #eef0f2;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='24' r='12' fill='none' stroke='%239aa5b1' stroke-width='3'/%3E%3Cpath d='M12 54c0-12 9-20 20-20s20 8 20 20' fill='none' stroke='%239aa5b1' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 30%;
}

.cm-photo-wrap img {
	opacity: 0;
	transition: opacity 0.35s ease;
}

.cm-photo-wrap img.cm-img-loaded {
	opacity: 1;
}

/* ---------- Small inline icons (mail, experience, languages) ---------- */

.cm-icon {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	vertical-align: -3px;
}

.cm-icon-mail {
	width: 18px;
	height: 18px;
	color: #64748b;
	vertical-align: -4px;
	margin-right: 2px;
}

/* ---------- Grid (About Us / Our Team) ---------- */

.cm-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cm-gap);
	margin: 0;
	padding: 0;
}

/* Card widths computed as (100% - gaps-between-columns) / columns, NOT
   "each column's own share minus one gap" — the latter subtracts one
   gap too many per row (3 cards = 3 gaps subtracted instead of the 2
   gaps that actually sit between them), which is what was leaving a
   stray empty strip on the right of the last column. This formula is
   exact regardless of how large --cm-gap is, at every breakpoint. */
.cm-card {
	flex: 1 1 calc((100% - (2 * var(--cm-gap))) / 3);
	max-width: calc((100% - (2 * var(--cm-gap))) / 3);
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: var(--cm-radius);
	overflow: hidden;
	/* "Option B" from the original comparison — a touch more visible
	   than the tightened version, confirmed against the live site where
	   the tighter shadow wasn't reading against a white background. */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.2s ease;
}

/* Shadow deepens a bit further on hover. */
.cm-card:hover {
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* Photos are square natively — an aspect-ratio box (rather than a fixed
   height) guarantees the frame is always exactly square regardless of
   the card's actual rendered width, so a square source photo is shown
   in full with no cropping. */
.cm-card-img {
	aspect-ratio: 1 / 1;
}

.cm-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

/* Hover zooms the photo only — the card itself stays put (no lift). */
.cm-card:hover .cm-card-img img {
	transform: scale(1.06);
}

.cm-card-body {
	padding: 18px 20px 10px;
}

.cm-card-name {
	margin: 0 0 6px;
	font-size: clamp(22px, 4vw, 28px);
	line-height: 1.15;
	font-weight: 500;
}

.cm-card-name a {
	color: var(--cm-accent-dark);
	text-decoration: none;
}

.cm-card-designation {
	color: var(--cm-accent);
	font-weight: 600;
	font-size: clamp(16px, 3vw, 20px);
	margin: 0 0 8px;
}

.cm-card-detail {
	font-size: 15px;
	line-height: 1.5;
	margin: 0 0 8px;
	color: #333;
}

.cm-card-email a,
.cm-single-email a {
	color: inherit;
	text-decoration: none;
}

.cm-card-email,
.cm-single-email {
	display: flex;
	align-items: center;
	gap: 6px;
}

.cm-card-cta {
	margin-top: 22px;
}

/* "View Profile" button on grid cards — more compact than the default
   .cm-btn size (which is tuned for standalone CTAs like the single
   profile page). */
.cm-card-cta .cm-btn {
	padding: 8px 20px;
	font-size: 14px;
}

/* ---------- Teaser grid (limited, e.g. About Us) — centered layout ---------- */

.cm-grid-teaser .cm-card-body {
	text-align: center;
}

.cm-grid-teaser .cm-card-email {
	justify-content: center;
}

/* ---------- Full grid (Our Team, no limit) — left-aligned layout ---------- */

.cm-grid-all .cm-card-body {
	text-align: left;
}

/* ---------- Full grid only: inline Specialties bullets ---------- */
/* Same font treatment as the Short Detail line, per request, rather
   than a separate smaller/muted style. */

.cm-card-specialties {
	font-size: 15px;
	line-height: 1.5;
	color: #333;
	margin: 0 0 8px;
}

/* ---------- Full grid only: Speaks / Experience info pills ---------- */

.cm-info-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0;
}

.cm-info-pill {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	background: #f3f4f6;
	border-radius: 8px;
	padding: 8px 10px;
	flex: 1 1 auto;
	min-width: 120px;
	font-size: 14px;
	line-height: 1.35;
	color: #333;
}

.cm-info-pill .cm-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: #64748b;
	margin-top: 1px;
}

.cm-info-pill strong {
	display: block;
	color: #8a95a3;
	font-weight: 500;
	font-size: 12px;
	margin-bottom: 3px;
}

.cm-btn {
	display: inline-block;
	background: var(--cm-accent);
	border: 2px solid var(--cm-accent);
	color: #fff !important;
	border-radius: 100px;
	padding: 10px 26px;
	font-size: 16px;
	text-decoration: none !important;
	transition: all 0.3s ease;
}

.cm-btn:hover {
	background: transparent;
	color: var(--cm-accent) !important;
}

.cm-btn-outline {
	background: transparent;
	color: var(--cm-accent) !important;
	padding: 8px 18px;
	font-size: 14px;
	margin: 0 8px 14px 0;
}

.cm-btn-outline:hover {
	background: var(--cm-accent);
	color: #fff !important;
}

.cm-btn-compact {
	padding: 8px 20px;
	font-size: 14px;
}

.cm-view-all-wrap {
	text-align: center;
	margin-top: 28px;
}

.cm-empty {
	width: 100%;
	text-align: center;
	color: #666;
	padding: 30px 0;
}

/* ---------- Appointment page ---------- */

.cm-appointments {
	width: 100%;
}

.cm-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 26px;
}

.cm-tab-btn {
	background: transparent;
	border: 2px solid var(--cm-accent);
	border-color: var(--cm-accent) !important;
	color: var(--cm-accent);
	border-radius: 100px;
	padding: 12px 25px;
	font-size: 17px;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
	/* !important on all of these: the active theme (Astra) applies its
	   own global button styling — including border-color on :hover and
	   :focus via its own !important rules (confirmed via devtools: Astra
	   was setting border-color to its own theme color, which is what
	   actually looked like a stray "blue border" — outline/box-shadow
	   alone weren't the real cause). Locking border-color here too,
	   at every state, is what actually stops it from being overridden. */
	outline: none !important;
	box-shadow: none !important;
}

.cm-tab-btn:hover,
.cm-tab-btn:focus,
.cm-tab-btn.is-active {
	border-color: var(--cm-accent) !important;
}

.cm-tab-btn:hover,
.cm-tab-btn.is-active {
	background: var(--cm-accent);
	color: #fff;
}

.cm-tab-btn:focus-visible {
	outline: 2px solid var(--cm-accent-dark) !important;
	outline-offset: 2px;
}

.cm-tab-panel {
	display: none;
}

.cm-tab-panel.is-active {
	display: block;
}

.cm-gender-filter {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 40px;
}

.cm-gender-filter .cm-icon {
	color: #8a95a3;
	margin-right: 4px;
}

/* Pill-styled radios, matching the category tab buttons but a step
   lighter/smaller — the radio input itself is visually hidden (kept
   accessible, not display:none) and the surrounding <label> is the
   visible, clickable pill. */
.cm-gender-pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 8px 18px;
	border-radius: 100px;
	background: #f3f4f6;
	color: #555;
	font-weight: 500;
	font-size: 14px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.cm-gender-pill input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cm-gender-pill:hover {
	background: #e5e7eb;
}

.cm-gender-pill.is-active {
	background: var(--cm-accent-dark);
	color: #fff;
}

.cm-gender-pill:has(input:focus-visible) {
	outline: 2px solid var(--cm-accent-dark);
	outline-offset: 2px;
}

/* ---------- Appointment cards: shared across all 3 style options ---------- */

/* "list" — the original single-column row layout (photo left, full
   info right). Kept as an explicit 3rd choice. */
.cm-appt-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* "grid" and "compact" — multi-column card grid matching the visual
   language of [coaches_grid_all]. Same gap-math fix as .cm-card:
   (100% - gaps-between-columns) / columns, not "each card's own share
   minus one gap" (which leaves a stray strip on the right of the last
   column — see .cm-card for the fuller explanation). */
.cm-appt-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cm-gap);
}

.cm-appt-card {
	padding: 18px 20px;
	border: 1px solid #ececec;
	border-radius: var(--cm-radius);
	background: #fff;
}

.cm-appt-grid .cm-appt-card {
	flex: 1 1 calc((100% - (2 * var(--cm-gap))) / 3);
	max-width: calc((100% - (2 * var(--cm-gap))) / 3);
	box-sizing: border-box;
	padding: 0 0 22px;
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.2s ease;
}

.cm-appt-grid .cm-appt-card:hover {
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.cm-appt-grid .cm-appt-info {
	padding: 16px 18px 0;
}

.cm-appt-card.cm-hidden {
	display: none;
}

.cm-appt-avail {
	font-weight: 600;
	margin: 10px 0 8px;
}

.cm-appt-buttons {
	display: flex;
	flex-wrap: wrap;
	margin-top: 10px;
}

.cm-popup-trigger,
.cm-appt-toprow.cm-popup-trigger {
	cursor: pointer;
}

.cm-popup-trigger-link {
	font-weight: 600;
}

/* ---------- "list" style: photo left, full info right, single column ---------- */

.cm-appt-card-list {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.cm-appt-card-list .cm-appt-photo {
	flex: 0 0 180px;
	width: 180px;
	height: 180px;
	border-radius: var(--cm-radius);
}

.cm-appt-card-list .cm-appt-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cm-appt-card-list .cm-appt-info {
	flex: 1 1 300px;
	min-width: 260px;
}

/* ---------- "grid" style: photo on top (shorter than a square, so the
   photo area doesn't dominate the card and booking stays quick), full
   card width. ---------- */

.cm-appt-photo-grid {
	width: 100%;
	aspect-ratio: 4 / 3;
}

.cm-appt-photo-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cm-appt-card-grid .cm-card-name {
	margin-bottom: 12px;
}

/* Booking buttons for the grid/compact appointment styles: 75% width
   (not full-width — a full bar looked oversized/blocky for short
   labels) within the card, stacked one per row on desktop/tablet — NOT
   packed side-by-side (an earlier design), reversed per explicit
   request. Filled by default with an outline-only hover state, the
   reverse of the plain .cm-btn-outline base style used elsewhere
   (e.g. [coach_booking_buttons] and the "list" style, both
   deliberately untouched — this override is scoped to
   .cm-appt-grid specifically). Mobile gets its own layout below. */
.cm-appt-grid .cm-appt-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cm-appt-grid .cm-appt-buttons .cm-btn-outline {
	width: 75%;
	box-sizing: border-box;
	text-align: center;
	padding: 6px 20px;
	font-size: 16px;
	font-weight: 500;
	margin: 0;
	background: var(--cm-accent);
	color: #fff !important;
}

.cm-appt-grid .cm-appt-buttons .cm-btn-outline:hover,
.cm-appt-grid .cm-appt-buttons .cm-btn-outline:focus,
.cm-appt-grid .cm-appt-buttons .cm-btn-outline:active {
	background: transparent;
	color: var(--cm-accent) !important;
}

/* ---------- "compact" style: photo + name in one row, still inside a
   grid card. Short Detail shown under the name instead of Designation. ---------- */

.cm-appt-card-compact .cm-appt-toprow {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px 0;
}

.cm-appt-card-compact .cm-appt-info {
	padding-top: 12px;
}

.cm-appt-avatar {
	flex: 0 0 84px;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	overflow: hidden;
}

.cm-appt-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cm-appt-avatar-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1e6d8;
	color: var(--cm-accent);
	font-weight: 600;
	font-size: 26px;
}

.cm-appt-toprow-info .cm-card-name {
	margin: 0 0 2px;
	font-size: 22px;
}

.cm-appt-toprow-info .cm-card-detail {
	margin: 0;
	font-size: 13px;
}

/* ---------- [coaches_appointments_popup] card style — deliberately
   different from the regular grid card, built for a tight fit inside an
   Elementor Popup. See render_appointment_card_popup_style() in
   class-cm-shortcodes.php for why each choice was made. ---------- */

.cm-appointments-popupstyle .cm-appt-grid-popupstyle {
	/* Redefining the --cm-gap custom property (rather than setting
	   `gap` directly) is deliberate: .cm-appt-grid .cm-appt-card's width
	   is computed as calc((100% - 2 * var(--cm-gap)) / 3) — if only
	   `gap` were overridden here without also updating that variable,
	   the cards would be SIZED assuming the global 40px gap while the
	   actual gap between them was only 20px, leaving a stray strip of
	   unused space on the right of each row. Overriding the variable
	   keeps the actual gap and the width math in sync automatically. */
	--cm-gap: 26px;
	gap: var(--cm-gap);
}

/* Overrides the base .cm-appt-grid .cm-appt-card bottom padding (22px)
   down to 10px for this style specifically — kept separate from the
   base rule since the main [coaches_appointments] grid/compact styles
   want the larger value. */
.cm-appt-grid-popupstyle .cm-appt-card-popupstyle {
	padding-bottom: 10px;
}

/* Plain CSS background — deliberately NOT the .cm-photo-wrap fade-in
   treatment used elsewhere, which depends on JS timing that can't be
   fully controlled from outside Elementor's own popup-loading
   behavior. This has no JS dependency at all: the background simply
   shows until the <img> itself paints on top of it once loaded,
   guaranteed to work regardless of when/how the popup's markup enters
   the page. */
.cm-appt-photo-grid-popupstyle {
	width: 100%;
	aspect-ratio: 4 / 3;
	background-color: #e5e0d8;
}

.cm-appt-photo-grid-popupstyle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cm-popupstyle-name {
	font-size: 24px;
	font-weight: 500;
	margin: 0 0 6px;
	color: var(--cm-accent-dark);
}

.cm-popupstyle-speaks {
	margin: 10px 0;
}

.cm-appt-buttons.cm-popupstyle-buttons {
	margin-top: 15px;
	/* Overrides the shared .cm-appt-grid .cm-appt-buttons gap (12px 6px,
	   deliberately larger for the main [coaches_appointments] shortcode)
	   back down to 5px/6px for this popup-specific style only. Combined
	   selector (not a descendant one) so its specificity actually ties
	   with — and, being later in the file, wins over — the shared rule;
	   a plain single-class .cm-popupstyle-buttons selector would have
	   LOST to the more specific two-class base rule regardless of
	   source order. */
	gap: 5px 6px;
}

/* Buttons here use the plain .cm-btn class (filled by default, outline
   on hover) rather than .cm-btn-outline — the reverse styling asked
   for, and .cm-btn already behaves exactly this way, so no new button
   variant was needed. */
.cm-popupstyle-buttons .cm-btn {
	margin: 0 6px 6px 0;
	padding: 8px 18px;
	font-size: 14px;
}

/* ---------- Popup ---------- */

.cm-popup-overlay {
	/* Default state is hidden. Do NOT rely on the [hidden] attribute
	   here — an unconditional `display: flex` on this same class (needed
	   for the open state) has equal-or-higher specificity than the
	   browser's default `[hidden] { display: none }` rule and silently
	   wins, which is exactly what caused the overlay to show permanently
	   regardless of the hidden attribute. An explicit .is-open class,
	   toggled by JS, avoids that trap entirely. */
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.62);
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 100000;
}

.cm-popup-overlay.is-open {
	display: flex;
}

body.cm-popup-open {
	overflow: hidden;
}

.cm-popup-box {
	position: relative;
	background: #fff;
	border-radius: var(--cm-radius);
	max-width: 960px;
	width: 100%;
	max-height: 92vh;
	overflow-y: auto;
	overflow-x: hidden;
}

/* Solid, high-contrast, clearly clickable close button — sits above
   everything in the popup (including the photo) regardless of the
   layout below it. Flex-centered rather than relying on font
   line-height, which rendered the × slightly off-center. */
.cm-popup-close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: none;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	padding: 0;
	font-size: 22px;
	line-height: 1;
	color: var(--cm-accent-dark);
	cursor: pointer;
	z-index: 10;
	outline: none !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.cm-popup-close:hover {
	background: var(--cm-accent-dark);
	color: #fff;
}

.cm-popup-close:focus-visible {
	outline: 2px solid var(--cm-accent-dark);
	outline-offset: 2px;
}

/* Side-by-side: photo on the left, stretched to match the height of the
   info column beside it (matches the existing appointment-page row
   layout, per feedback) — stacks to photo-on-top below the "sm"
   breakpoint so it stays usable on phones. */
.cm-popup-body {
	display: flex;
	align-items: stretch;
}

.cm-popup-photo {
	flex: 0 0 340px;
	width: 340px;
	align-self: stretch;
}

.cm-popup-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cm-popup-avatar-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1e6d8;
	color: var(--cm-accent);
	font-weight: 600;
	font-size: 56px;
}

.cm-popup-info {
	flex: 1 1 auto;
	min-width: 0;
	padding: 28px 26px 26px;
}

.cm-popup-name {
	margin: 0 0 6px;
	font-size: 28px;
	font-weight: 500;
	color: var(--cm-accent-dark);
	/* Leaves room so the long name never runs under the close button. */
	padding-right: 40px;
}

.cm-popup-excerpt {
	font-size: 14px;
	line-height: 1.5;
	color: #333;
	margin: 8px 0 16px;
}

.cm-popup-cta {
	margin-top: 20px;
}

.cm-popup-specialties {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0;
}

.cm-spec-badge {
	display: inline-block;
	background: #eef4f2;
	color: #1a6b57;
	border-radius: 100px;
	padding: 5px 14px;
	font-size: 13px;
	font-weight: 500;
}

@media (max-width: 640px) {
	.cm-popup-box {
		max-height: 95vh;
	}

	.cm-popup-body {
		flex-direction: column;
	}

	.cm-popup-photo {
		flex: 0 0 auto;
		width: 100%;
		height: 260px;
	}

	.cm-popup-info {
		padding: 20px 18px 22px;
	}

	.cm-popup-name {
		font-size: 24px;
	}
}

/* ---------- Single coach profile ---------- */

.cm-single-coach {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 20px;
}

.cm-single-header {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

.cm-single-photo img {
	width: 220px;
	height: 220px;
	object-fit: cover;
	border-radius: var(--cm-radius);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.cm-single-name {
	color: var(--cm-accent-dark);
	margin: 0 0 6px;
	font-weight: 500;
}

.cm-single-designation {
	color: var(--cm-accent);
	font-weight: 600;
	font-size: 18px;
}

.cm-single-bio {
	line-height: 1.7;
	margin-bottom: 30px;
}

/* ---------- Coach video (optional) ---------- */
/* Handles three cases: a self-hosted <video> tag, an oEmbed provider's
   <iframe> (YouTube/Vimeo/etc — variable markup we don't control, so
   sized generically via the wrapper below), and the plain-link fallback
   when oEmbed can't resolve a URL. */

.cm-coach-video-wrap {
	margin-bottom: 30px;
}

.cm-coach-video-wrap .cm-coach-video,
.cm-coach-video-wrap .cm-coach-video-embed {
	max-width: 100%;
}

.cm-coach-video {
	width: 100%;
	border-radius: var(--cm-radius);
	display: block;
	background: #000;
}

/* The padding-bottom percentage technique (not the newer `aspect-ratio`
   property) is used deliberately here, as the ONLY sizing mechanism —
   it reserves the wrapper's height in the page's normal document flow
   purely through padding, which is far harder for a theme's own CSS to
   collide with than `aspect-ratio` or an explicit `height`. This
   specifically fixes a real bug: on mobile, Astra applies its own
   responsive-embed CSS to iframes, which was overriding the wrapper's
   sizing (using aspect-ratio previously) — the wrapper collapsed to
   near-zero height while the iframe itself still rendered at a fixed
   size, so only its top sliver showed before the next section
   overlapped it. `!important` on the iframe's own positioning is the
   same fix in the same spirit as the tab-button border-color issue
   fixed earlier — needed because Astra's rule also carries !important
   and would otherwise still win. */
.cm-coach-video-embed {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%; /* 16:9 */
	border-radius: var(--cm-radius);
	overflow: hidden;
}

.cm-coach-video-embed iframe {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	border: 0 !important;
}

.cm-coach-video-fallback-link {
	margin: 0;
}

.cm-single-booking-group {
	margin-bottom: 20px;
}

.cm-single-booking-group h3 {
	font-size: clamp(19px, 3.5vw, 24px);
	margin-bottom: 10px;
}

/* ---------- [coach_booking_links] — flat plain-text link list ---------- */

.cm-booking-links-list {
	margin: 0;
}

.cm-booking-link-item {
	margin: 0 0 10px;
}

.cm-booking-link-item a {
	font-size: 18px;
	color: var(--cm-accent-dark);
	text-decoration: none;
	transition: color 0.2s ease;
}

.cm-booking-link-item a:hover {
	color: #a98354;
	text-decoration: underline;
}

/* ---------- Responsive breakpoints ---------- */

@media (max-width: 900px) {
	.cm-card {
		/* 2 columns: only 1 gap sits between them, not a full gap "per card". */
		flex: 1 1 calc((100% - var(--cm-gap)) / 2);
		max-width: calc((100% - var(--cm-gap)) / 2);
	}

	.cm-appt-grid .cm-appt-card {
		flex: 1 1 calc((100% - var(--cm-gap)) / 2);
		max-width: calc((100% - var(--cm-gap)) / 2);
	}
}

@media (max-width: 600px) {
	.cm-card {
		flex: 1 1 100%;
		max-width: 100%;
	}

	.cm-appt-grid .cm-appt-card {
		flex: 1 1 100%;
		max-width: 100%;
	}

	.cm-appt-card-list {
		flex-direction: column;
	}

	.cm-appt-card-list .cm-appt-photo {
		width: 100%;
		height: 220px;
	}

	.cm-single-header {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	/* Category tabs: one full-width button per row instead of the
	   center-wrapped mix of widths, which looked ragged and inconsistent
	   at phone widths. */
	.cm-tabs-nav {
		flex-direction: column;
	}

	.cm-tab-btn {
		width: 100%;
		box-sizing: border-box;
		font-size: 18px;
		padding: 15px 25px;
	}

	/* Booking buttons on the grid/compact styles: mobile keeps the
	   original compact wrapped layout (multiple per row where labels
	   are short enough) rather than the full-width one-per-row stacking
	   now used on desktop/tablet — reverted specifically at this
	   breakpoint. The filled/outline-on-hover treatment itself is
	   already inherited correctly from the base rule above, so nothing
	   needs repeating here for that. */
	.cm-appt-grid .cm-appt-buttons {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 12px 6px;
	}

	.cm-appt-grid .cm-appt-buttons .cm-btn-outline {
		width: auto;
		padding: 6px 15px;
		font-size: 15px;
	}

	/* [coaches_appointments_popup] card name — smaller on mobile than
	   the 24px used everywhere else, to fit better inside a phone-width
	   Elementor Popup. */
	.cm-popupstyle-name {
		font-size: 22px;
	}
}

/* ---------- Admin: field groups (Coach Details / Display Settings) ---------- */

.cm-field-group {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	padding: 10px 12px;
	margin-bottom: 10px;
}

.cm-field-group:last-child {
	margin-bottom: 0;
}

.cm-field-group-toggle {
	padding: 10px 12px;
}

.cm-field-label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 13px;
}

.cm-hint {
	display: block;
	color: #666;
	font-size: 12px;
	margin-top: 5px;
}

.cm-optional {
	font-weight: 400;
	color: #888;
	font-size: 12px;
}

.cm-inline-radio {
	margin-right: 18px;
	display: inline-block;
}

.cm-inline-checkbox {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	color: #555;
}

.cm-inline-checkbox-tight {
	display: inline-block;
	margin-top: 0;
}

/* ---------- Admin: Coach Categories & Booking Links repeater ---------- */

.cm-repeater-row {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	padding: 10px 12px;
	margin-bottom: 8px;
}

.cm-repeater-row select {
	margin-bottom: 6px;
}

.cm-repeater-row-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 8px;
}

.cm-repeater-row .cm-remove-row {
	display: inline-block;
	font-size: 12px;
}

/* ---------- Admin: Settings page read/edit view ---------- */

#cm-tab-groups-readview table td,
#cm-tab-groups-readview table th {
	padding: 10px 12px;
}

/* ---------- Appointment card extras ---------- */

.cm-appt-languages {
	font-size: 14px;
	color: #444;
	margin: 0 0 8px;
}

/* ---------- Single coach: specialties ---------- */

.cm-single-specialties {
	margin-bottom: 30px;
}

.cm-single-specialties ul {
	margin: 10px 0 0;
	padding-left: 20px;
}

.cm-single-specialties li {
	margin-bottom: 6px;
}

.cm-remove-row {
	color: #b32d2e;
	font-size: 18px;
	text-decoration: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

/* ---------- Admin: Quick Edit order fields ---------- */

.cm-quick-edit-fieldset .input-text-wrap input[type="number"] {
	max-width: 100px;
}

.cm-qe-value {
	color: #666;
}