/*!
 * Gather Grove — Frontend Styles
 * Version: 0.1.0
 *
 * All classes use the .gg- prefix. Colors are exposed as CSS custom
 * properties so themes and Elementor's color system can override them.
 */

:root {

	/* ── Gather Grove → Elementor Global
	      Color Mapping
	   ────────────────────────────────────
	   Each --gg-* variable inherits from
	   the closest Elementor global color.
	   The fallback value is used when
	   Elementor globals are not available
	   (e.g. non-Elementor themes).
	   ──────────────────────────────────── */

	/* ── Brand color cascade (canonical, rule 150 / tokens.css)
	   ────────────────────────────────────────────────────────
	   Each flat --gg-* color resolves:
	     studio override (Frontend::inject_style_defaults, rule 132)
	       → --gg-brand-* Elementor 4 Variable (rule 150)
	         → Elementor classic global (--e-global-color-*)
	           → hardcoded .io fallback (matches BrandSettings::FIELDS)
	   v0.7.161: the prior definitions fell back to the categorized
	   aliases (--gg-color-primary, etc.) which alias straight BACK to
	   these flat names — a circular reference. When a chain link was
	   missing (untouched Elementor kit, editor canvas), the cycle
	   computed to the guaranteed-invalid value and the property
	   collapsed to transparent — e.g. an "invisible" Book/Enroll
	   button (transparent bg + white text). Real hardcoded fallbacks
	   end every chain so a --gg-* can never resolve to nothing. */
	--gg-primary:      var(--gg-brand-primary,    var(--e-global-color-primary,   #254032));
	--gg-primary-dark: var(--gg-brand-secondary,  var(--e-global-color-secondary, #8eb18c));
	--gg-accent:       var(--gg-brand-accent,     var(--e-global-color-accent,    #c4a484));
	--gg-text:         var(--gg-brand-text,       var(--e-global-color-text,      #2c2a26));

	/* Muted text — no brand Variable in the 7-Variable set; keeps its
	   Elementor custom-color id with a hardcoded fallback. */
	--gg-text-light:   var(--e-global-color-5fd1781, #6b675f);

	/* Widget / card background (Elementor custom-color id 9fd23bd). */
	--gg-background:   var(--gg-brand-background, var(--e-global-color-9fd23bd,   #fefaf7));

	/* Functional colors — no Elementor global equivalent; hardcoded
	   .io palette, still overridable via the Brand tab (advanced group). */
	--gg-border:       #e8e3d8;
	--gg-success:      #4a7c4a;
	--gg-error:        #b04646;
	--gg-warning:      #c98828;

	/* ── Typography Mapping
	   ────────────────────────────────────
	   Base font inherits from Elementor
	   global typography text setting.
	   ──────────────────────────────────── */

	/* Base font family — brand Variable → Elementor text typography
	   → system stack. The system stack lives OUTSIDE the brand/Elementor
	   var() so an unloaded brand family can never drop to serif. */
	--gg-font-base: var(--gg-brand-font-body, var(--e-global-typography-text-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif));

	/* Heading font family — brand Variable → Elementor primary typography
	   → inherit. */
	--gg-font-heading: var(--gg-brand-font-heading, var(--e-global-typography-primary-font-family, inherit));

	/* ── Ecosystem-conventions §7 categorized aliases
	   ─────────────────────────────────────────────────
	   Categorized 3-segment names per the canonical
	   `gather-grove-core/tokens/tokens.css` vocabulary
	   (--gg-color-*, --gg-type-*, --gg-space-*, etc.).

	   Color + typography aliases route through Booking's
	   existing flat names so Studio Style overrides
	   (rule 132) and the Elementor global cascade
	   continue working unchanged — new widget styles
	   author against the categorized vars for forward
	   compatibility with siblings (Forms, Chat,
	   Notion Sync) that ship with the categorized
	   vocabulary natively.

	   Spacing / radius / shadow / motion are net-new
	   primitives that Booking didn't expose before;
	   values mirror the canonical core defaults.
	   ───────────────────────────────────────────────── */

	/* Color — aliases of the flat names (Studio Style + Elementor cascade preserved) */
	--gg-color-primary:        var(--gg-primary);
	--gg-color-primary-strong: var(--gg-primary-dark);
	--gg-color-accent:         var(--gg-accent);
	--gg-color-text:           var(--gg-text);
	--gg-color-text-muted:     var(--gg-text-light);
	--gg-color-background:     var(--gg-background);
	/* Surface intentionally NOT aliased to --gg-background — cards
	   on the page need visual contrast against the page background.
	   Defaults to white per the canonical core tokens.css. Studios
	   can override via theme CSS or a future Studio Style surface
	   setting. */
	/* stylelint-disable-next-line color-no-hex */
	--gg-color-surface:        #ffffff;
	--gg-color-border:         var(--gg-border);
	--gg-color-success:        var(--gg-success);
	--gg-color-warning:        var(--gg-warning);
	--gg-color-error:          var(--gg-error);

	/* Semantic soft tints + info/muted — fixed functional colours (no brand
	   cascade), mirrored from the canonical tokens.css. Previously undefined in
	   this inline :root, so .gg-badge--success/error/warning/neutral/membership
	   rendered with no background; defining them here makes every badge variant
	   resolve (v0.7.164). */
	/* stylelint-disable color-no-hex */
	--gg-color-success-soft:   #e8efe5;
	--gg-color-warning-soft:   #fbf0d9;
	--gg-color-error-soft:     #f7e0e0;
	--gg-color-info:           #527591;
	--gg-color-info-soft:      #e2eaf1;
	--gg-color-muted:          #8a857a;
	--gg-color-muted-soft:     #ebe8e0;
	/* stylelint-enable color-no-hex */

	/* Typography families — aliases of the flat names */
	--gg-type-body:    var(--gg-font-base);
	--gg-type-heading: var(--gg-font-heading);

	/* Typography sizes (new primitives) */
	--gg-type-size-xs:    0.75rem;     /* 12px */
	--gg-type-size-sm:    0.875rem;    /* 14px */
	--gg-type-size-md:    1rem;        /* 16px (base) */
	--gg-type-size-lg:    1.125rem;    /* 18px */
	--gg-type-size-xl:    1.25rem;     /* 20px */
	--gg-type-size-2xl:   1.5rem;      /* 24px */
	--gg-type-size-3xl:   2rem;        /* 32px */
	--gg-type-size-4xl:   2.5rem;      /* 40px */

	/* Typography weights */
	--gg-type-weight-regular: 400;
	--gg-type-weight-medium:  500;
	--gg-type-weight-bold:    600;

	/* Typography line heights */
	--gg-type-leading-tight:    1.2;
	--gg-type-leading-snug:     1.4;
	--gg-type-leading-normal:   1.55;
	--gg-type-leading-relaxed:  1.75;

	/* Spacing — 4px scale */
	--gg-space-1:   0.25rem;   /*   4px */
	--gg-space-2:   0.5rem;    /*   8px */
	--gg-space-3:   0.75rem;   /*  12px */
	--gg-space-4:   1rem;      /*  16px */
	--gg-space-5:   1.5rem;    /*  24px */
	--gg-space-6:   2rem;      /*  32px */
	--gg-space-7:   3rem;      /*  48px */
	--gg-space-8:   4rem;      /*  64px */

	/* Radius */
	--gg-radius-sm:    4px;
	--gg-radius-md:    8px;
	--gg-radius-lg:   16px;
	--gg-radius-xl:   24px;
	--gg-radius-pill: 999px;

	/* Shadow */
	--gg-shadow-sm:   0 1px 2px  rgba(28, 26, 22, 0.05);
	--gg-shadow-md:   0 4px 12px rgba(28, 26, 22, 0.08);
	--gg-shadow-lg:   0 8px 32px rgba(28, 26, 22, 0.12);

	/* Motion */
	--gg-duration-fast:   150ms;
	--gg-duration-base:   250ms;
	--gg-duration-slow:   400ms;
	--gg-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
	--gg-ease-in:         cubic-bezier(0.7, 0, 0.84, 0);
	--gg-ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);

	/* ── PR 4 foundation primitives ─────────────────────────────────────
	   Container styling pass (v0.7.95). Net-new tokens; existing widgets
	   don't consume them yet — per-widget walkthrough rolls each widget
	   onto these tokens as part of the visual QC pass. */

	/* Fluid type — clamp(min, ideal, max). Scales smoothly across
	   viewports without breakpoint jumps. Min anchors mobile, max
	   anchors desktop. Use these in place of static rem values for
	   headings + body to get modern responsive typography. */
	--gg-fluid-h1:   clamp(2rem,    1.4rem  + 3vw,    3.5rem);
	--gg-fluid-h2:   clamp(1.5rem,  1.1rem  + 2vw,    2.5rem);
	--gg-fluid-h3:   clamp(1.25rem, 1rem    + 1.25vw, 1.75rem);
	--gg-fluid-h4:   clamp(1.125rem, 1rem   + 0.625vw, 1.375rem);
	--gg-fluid-body: clamp(1rem,    0.95rem + 0.25vw, 1.0625rem);

	/* Section padding — responsive padding-block for `.gg-page-section`
	   wrappers and any container that needs to breathe with the
	   viewport. Min (mobile) is generous-but-tight, max (desktop) opens
	   up for the modern airy feel. */
	--gg-section-padding-block:  clamp(3rem, 6vw, 6rem);
	--gg-section-padding-inline: clamp(1rem, 4vw, 2.5rem);

	/* Text measure — caps prose containers at a comfortable reading
	   width. 65ch is the sweet spot; widen for media-heavy widgets,
	   tighten for headlines. */
	--gg-text-measure: 65ch;

	/* Touch target — WCAG 2.5.5 minimum for primary interactive
	   elements. Apply via min-height to buttons, large select boxes,
	   and clickable cards. */
	--gg-touch-target: 44px;

	/* Hover lift — magnitude of the card-elevation transform. Wrapped
	   in a var so reduced-motion users get a zero-distance lift
	   (`@media` block below sets it to 0). */
	--gg-hover-lift: -2px;

	/* Widget content cap — applied to .gg-booking-widget-inner so
	   widgets self-cap + center inside whatever container Elementor
	   gives them. 64rem (1024px) is the modern SaaS-standard content
	   width; comfortable for forms + content widgets, leaves margin on
	   wider screens. Override per-widget by setting --gg-widget-max-width
	   on the parent Elementor column (e.g. `none` for grid-heavy
	   widgets that need to fill, or 80rem for dashboard layouts). */
	--gg-widget-max-width: 64rem;
}

/* Honor user reduced-motion preference per the canonical core tokens.
   Also zeroes the card hover-lift distance — translateY animations
   are exactly the motion these users want suppressed. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--gg-duration-fast:   0ms;
		--gg-duration-base:   0ms;
		--gg-duration-slow:   0ms;
		--gg-hover-lift:      0;
	}
}

/* ----------------------------------------------------------------------- */
/* Base reset                                                              */
/* ----------------------------------------------------------------------- */

.gg-booking-schedule,
.gg-booking-booking-form-wrapper,
.gg-booking-dashboard,
.gg-booking-package-shop {
	box-sizing: border-box;
	color: var(--gg-text);
	font-family: inherit;
}

/* border-box so a full-width child (e.g. the package buy button at width:100%)
   sits inside its container's padding instead of overflowing — its own padding
   + border are included in the width. PackageShop was missing from this reset,
   so its buy buttons bled past the card edges on the default (stretched)
   alignment (v0.7.166). */
.gg-booking-schedule *,
.gg-booking-booking-form-wrapper *,
.gg-booking-dashboard *,
.gg-booking-package-shop * {
	box-sizing: border-box;
}

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

.gg-booking-btn {
	/* inline-flex + center on both axes so the label stays centered no matter
	   how tall the button gets — flex parents (popover footer flex:1, list
	   action column, card actions) can stretch an inline-block button and pin
	   its text to the top. Centering here at the shared base class fixes every
	   GG widget's buttons (live AND editor preview) in one place. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Double-class selectors (.gg-booking-btn.gg-booking-btn--primary) rather than a
   single class, to raise specificity to (0,2,0). The Elementor editor canvas
   injects a low-specificity baseline style on native <a>/<button> elements (the
   e_atomic_elements experiment) that resolves to the studio's *accent* global —
   which beat our old single-class (0,1,0) rule and painted Book buttons with the
   accent colour in the editor preview only (live was always correct). The bump
   makes our brand colours win in the canvas too, without !important and without
   scoping to .gg-booking-widget-inner (that would miss the body-mounted popover
   button). Studio Kit overrides still win — their selectors are {{WRAPPER}}-scoped
   and higher still. Shared base class → fixes every widget's buttons at once. */
.gg-booking-btn.gg-booking-btn--primary {
	background-color: var(--gg-primary);
	color: var(--gg-color-surface);
}

.gg-booking-btn.gg-booking-btn--primary:hover,
.gg-booking-btn.gg-booking-btn--primary:focus {
	background-color: var(--gg-primary-dark);
	color: var(--gg-color-surface);
}

.gg-booking-btn.gg-booking-btn--secondary {
	background-color: transparent;
	color: var(--gg-primary);
	border-color: var(--gg-primary);
}

.gg-booking-btn.gg-booking-btn--secondary:hover,
.gg-booking-btn.gg-booking-btn--secondary:focus {
	background-color: var(--gg-primary);
	color: var(--gg-color-surface);
}

.gg-booking-btn--full {
	display: flex;
	width: 100%;
}

.gg-booking-btn[disabled],
.gg-booking-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ----------------------------------------------------------------------- */
/* Schedule                                                                */
/* ----------------------------------------------------------------------- */

.gg-booking-schedule {
	background-color: transparent;
}

.gg-booking-schedule__empty {
	padding: 24px;
	text-align: center;
	color: var(--gg-text-light);
}

.gg-booking-schedule-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	margin-bottom: 20px;
}

.gg-booking-schedule-filters__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
}

.gg-booking-schedule-filters__field span {
	color: var(--gg-text-light);
}

.gg-booking-schedule-filters__field select {
	padding: 8px 10px;
	border: 1px solid var(--gg-border);
	border-radius: 4px;
	background-color: var(--gg-background);
	min-width: 160px;
}

.gg-booking-schedule-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gg-booking-schedule-card {
	position: relative;
	display: flex;
	background-color: var(--gg-background);
	border: 1px solid var(--gg-border);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.gg-booking-schedule-card__color-strip {
	width: var( --gg-color-strip-width, 6px );
	flex-shrink: 0;
	background-color: var(--gg-primary);
	display: var( --gg-color-strip-display, block );
}

/* List view's left-edge color strip is implemented as a border-left on
   the row. Width + visibility vars below let the studio control both
   from the Class Color Strip Style section. The inline style attribute
   in render_list_item is now `border-left-color: <class color>` only
   (not the full `border-left:` shorthand) so these vars don't get
   overridden — matches the cards strip pattern. */
.gg-booking-sessions-list__item {
	border-left-style: var( --gg-color-strip-display, solid );
	border-left-width: var( --gg-color-strip-width, 4px );
}

.gg-booking-schedule-card__body {
	flex: 1;
	padding: 16px 18px;
}

.gg-booking-schedule-card__title {
	margin: 0 0 6px;
	font-size: 18px;
	line-height: 1.3;
}

.gg-booking-schedule-card__title a {
	color: inherit;
	text-decoration: none;
}

.gg-booking-schedule-card__title a:hover {
	text-decoration: underline;
}

.gg-booking-schedule-card__meta {
	margin-bottom: 10px;
	font-size: 14px;
	color: var(--gg-text-light);
	line-height: 1.5;
}

.gg-booking-schedule-card__instructor {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}

.gg-booking-schedule-card__instructor-photo {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
}

.gg-booking-schedule-card__instructor a,
.gg-booking-schedule-card__location a,
.gg-booking-class-card__instructor a {
	color: inherit;
	text-decoration: none;
}

.gg-booking-schedule-card__instructor a:hover,
.gg-booking-schedule-card__location a:hover,
.gg-booking-class-card__instructor a:hover {
	text-decoration: underline;
	color: var(--gg-primary);
}

.gg-booking-schedule-card__capacity {
	display: inline-block;
	margin-bottom: 10px;
	padding: 3px 10px;
	border-radius: 12px;
	background-color: var(--gg-color-success-soft);
	color: var(--gg-success);
	font-size: 12px;
	font-weight: 600;
}

.gg-booking-schedule-card__capacity--full {
	background-color: var(--gg-color-error-soft);
	color: var(--gg-error);
}

.gg-booking-schedule-card__price {
	margin-bottom: 12px;
	font-size: 16px;
	font-weight: 600;
	color: var(--gg-text);
}

.gg-booking-schedule-card__actions {
	margin-top: 12px;
}

.gg-booking-schedule-pagination {
	margin-top: 24px;
	display: flex;
	gap: 6px;
	justify-content: center;
}

.gg-booking-schedule-pagination__page {
	display: inline-block;
	min-width: 32px;
	padding: 6px 10px;
	border: 1px solid var(--gg-border);
	border-radius: 4px;
	color: var(--gg-text);
	text-decoration: none;
	text-align: center;
}

.gg-booking-schedule-pagination__page.is-active {
	background-color: var(--gg-primary);
	border-color: var(--gg-primary);
	color: var(--gg-color-surface);
}

/* ----------------------------------------------------------------------- */
/* Booking form                                                            */
/* ----------------------------------------------------------------------- */

/* Honeypot — off-screen rather than display:none so unsophisticated bots
 * still fill it. Paired with server-side rejection in
 * BookingsController::create_booking() on a non-empty gg_check param. */
.gg-booking-hp {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.gg-booking-booking-form-wrapper {
	max-width: 560px;
}

.gg-booking-booking-form {
	display: flex;
	flex-direction: column;
	padding: 24px;
	background-color: var(--gg-background);
	border: 1px solid var(--gg-border);
	border-radius: 8px;
}

.gg-booking-booking-form__title {
	margin: 0 0 16px;
	font-size: 22px;
}

.gg-booking-booking-form__summary {
	padding: 14px 16px;
	margin-bottom: 18px;
	background-color: var(--gg-color-success-soft);
	border-left: 3px solid var(--gg-primary);
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.5;
}

.gg-booking-booking-form__field {
	margin-bottom: 14px;
}

.gg-booking-booking-form__row--names {
	display: flex;
	gap: 12px;
}

.gg-booking-booking-form__row--names .gg-booking-booking-form__field {
	flex: 1;
}

.gg-booking-booking-form__field--checkbox label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.gg-booking-booking-form__label {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--gg-text);
}

.gg-booking-booking-form__input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--gg-border);
	border-radius: 4px;
	background-color: var(--gg-background);
	font-size: 14px;
	color: var(--gg-text);
}

.gg-booking-booking-form__input:focus {
	outline: none;
	border-color: var(--gg-primary);
	box-shadow: 0 0 0 3px rgba(92, 122, 92, 0.15);
}

.gg-booking-booking-form__input--card {
	padding: 12px;
}

.gg-booking-booking-form__errors {
	margin-top: 6px;
	font-size: 13px;
	color: var(--gg-error);
}

.gg-booking-booking-form__submit {
	/* Base cross-axis position so an auto-width button doesn't stretch to
	   fill the flex column; the Element Alignment > Submit Button control
	   overrides align-self. A full-width button (width:100%) fills
	   regardless, so alignment gracefully no-ops there. */
	align-self: flex-start;
	margin-top: 8px;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	background-color: var(--gg-primary);
	color: var(--gg-color-surface);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.gg-booking-booking-form__submit:hover {
	background-color: var(--gg-primary-dark);
}

.gg-booking-booking-form__feedback {
	margin-top: 14px;
	font-size: 14px;
}

/* ----------------------------------------------------------------------- */
/* Dashboard                                                               */
/* ----------------------------------------------------------------------- */

.gg-booking-dashboard {
	max-width: 760px;
}

.gg-booking-dashboard__section + .gg-booking-dashboard__section {
	margin-top: 32px;
}

.gg-booking-dashboard__section-title {
	margin: 0 0 14px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--gg-border);
	font-size: 18px;
	color: var(--gg-text);
}

.gg-booking-dashboard__empty {
	color: var(--gg-text-light);
	font-style: italic;
}

.gg-booking-dashboard__booking-card {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	margin-bottom: 10px;
	background-color: var(--gg-background);
	border: 1px solid var(--gg-border);
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.5;
}

.gg-booking-dashboard__booking-meta {
	flex: 1 1 60%;
	min-width: 180px;
}

.gg-booking-dashboard__booking-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.gg-booking-dashboard__booking-actions .gg-booking-btn {
	padding: 6px 12px;
	font-size: 13px;
}

.gg-booking-dashboard--login {
	padding: 28px;
	text-align: center;
	background-color: var(--gg-color-success-soft);
	border-radius: 8px;
}

.gg-booking-dashboard__greeting {
	margin-bottom: 24px;
}

.gg-booking-dashboard__client-name {
	font-size: 22px;
	font-weight: 700;
	color: var(--gg-text);
	margin: 0;
}

/* ----------------------------------------------------------------------- */
/* Badges                                                                  */
/* ----------------------------------------------------------------------- */

.gg-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	background-color: var(--gg-color-muted-soft);
	color: var(--gg-text-light);
}

.gg-badge--success {
	background-color: var(--gg-color-success-soft);
	color: var(--gg-success);
}

.gg-badge--error {
	background-color: var(--gg-color-error-soft);
	color: var(--gg-error);
}

.gg-badge--warning {
	background-color: var(--gg-color-warning-soft);
	color: var(--gg-warning);
}

.gg-badge--neutral {
	background-color: var(--gg-color-muted-soft);
	color: var(--gg-text-light);
}

.gg-badge--membership {
	background: var(--gg-color-info-soft);
	color: var(--gg-color-info);
	display: inline-block;
	padding: 3px 12px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
}

/* ----------------------------------------------------------------------- */
/* Notices & spinner                                                       */
/* ----------------------------------------------------------------------- */

.gg-booking-notice {
	padding: 12px 16px;
	margin-bottom: 14px;
	border-left: 4px solid var(--gg-text-light);
	background-color: var(--gg-color-muted-soft);
	font-size: 14px;
}

.gg-booking-notice--success {
	border-color: var(--gg-success);
	background-color: var(--gg-color-success-soft);
	color: var(--gg-success);
}

.gg-booking-notice--error {
	border-color: var(--gg-error);
	background-color: var(--gg-color-error-soft);
	color: var(--gg-error);
}

.gg-booking-notice--warning {
	border-color: var(--gg-warning);
	background-color: var(--gg-color-warning-soft);
	color: var(--gg-warning);
}

.gg-booking-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: gg-booking-spin 0.7s linear infinite;
}

@keyframes gg-booking-spin {
	to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------- */
/* Editor placeholder                                                      */
/* ----------------------------------------------------------------------- */

.gg-booking-editor-placeholder,
.gg-booking-editor-placeholder__header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	padding: 12px 16px;
	background-color: var(--gg-color-success-soft);
	border-radius: 6px;
	font-weight: 600;
	color: var(--gg-text);
}

.gg-booking-editor-placeholder__icon {
	font-size: 18px;
	color: var(--gg-primary);
}

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

@media (max-width: 600px) {
	.gg-booking-schedule-grid {
		grid-template-columns: 1fr;
	}

	.gg-booking-schedule-filters {
		flex-direction: column;
		align-items: stretch;
	}

	.gg-booking-schedule-filters__field select {
		min-width: 0;
	}

	.gg-booking-dashboard__booking-card {
		flex-direction: column;
		align-items: flex-start;
	}

	.gg-booking-class-card__body {
		padding: 18px;
	}

	.gg-booking-instructor-profile {
		padding: 20px;
	}
}

/* ----------------------------------------------------------------------- */
/* Class Card widget                                                       */
/* ----------------------------------------------------------------------- */

.gg-booking-class-card {
	background-color: var(--gg-background);
	border: 1px solid var(--gg-border);
	border-left: 4px solid var(--gg-primary);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
	box-sizing: border-box;
	color: var(--gg-text);
	font-family: inherit;
}

.gg-booking-class-card *,
.gg-booking-class-card *::before,
.gg-booking-class-card *::after {
	box-sizing: border-box;
}

.gg-booking-class-card--empty {
	border-left-color: var(--gg-border);
}

.gg-booking-class-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
}

.gg-booking-class-card__title {
	margin: 0;
	font-size: 22px;
	line-height: 1.25;
	color: var(--gg-text);
}

.gg-booking-class-card__description {
	color: var(--gg-text-light);
	font-size: 14px;
	line-height: 1.55;
}

.gg-booking-class-card__description p {
	margin: 0 0 8px;
}

.gg-booking-class-card__description p:last-child {
	margin-bottom: 0;
}

.gg-booking-class-card__meta {
	color: var(--gg-text-light);
	font-size: 14px;
}

.gg-booking-class-card__instructor {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--gg-text);
}

.gg-booking-class-card__instructor-photo {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.gg-booking-class-card__capacity {
	font-size: 13px;
	color: var(--gg-success);
	font-weight: 600;
}

.gg-booking-class-card__capacity--full {
	color: var(--gg-error);
}

.gg-booking-class-card__price {
	font-size: 18px;
	font-weight: 700;
	color: var(--gg-primary-dark);
}

.gg-booking-class-card .gg-booking-btn {
	align-self: flex-start;
	margin-top: 6px;
}

/* ----------------------------------------------------------------------- */
/* Instructor Profile widget                                               */
/* ----------------------------------------------------------------------- */

.gg-booking-instructor-profile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 28px;
	background-color: var(--gg-background);
	border: 1px solid var(--gg-border);
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
	box-sizing: border-box;
	color: var(--gg-text);
	font-family: inherit;
	text-align: left;
}

.gg-booking-instructor-profile *,
.gg-booking-instructor-profile *::before,
.gg-booking-instructor-profile *::after {
	box-sizing: border-box;
}

.gg-booking-instructor-profile--empty {
	color: var(--gg-text-light);
}

.gg-booking-instructor-profile__photo {
	width: 120px;
	height: 120px;
	overflow: hidden;
	border-radius: 50%;
	flex-shrink: 0;
}

.gg-booking-instructor-profile__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

.gg-booking-instructor-profile__photo-placeholder {
	width: 120px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--gg-color-success-soft);
	color: var(--gg-text-light);
	border-radius: 50%;
	flex-shrink: 0;
}

.gg-booking-instructor-profile__name {
	margin: 0;
	font-size: 22px;
	line-height: 1.25;
	color: var(--gg-text);
}

.gg-booking-instructor-profile__bio {
	color: var(--gg-text-light);
	font-size: 14px;
	line-height: 1.6;
	max-width: 60ch;
}

.gg-booking-instructor-profile__bio p {
	margin: 0 0 8px;
}

.gg-booking-instructor-profile__bio p:last-child {
	margin-bottom: 0;
}

.gg-booking-instructor-profile__specialties {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: var( --gg-specialties-align, flex-start );
}

.gg-booking-tag {
	display: inline-block;
	padding: 4px 10px;
	background-color: var(--gg-color-success-soft);
	color: var(--gg-primary-dark);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
}

.gg-booking-instructor-profile__schedule {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: var( --gg-upcoming-align, flex-start );
	gap: 8px;
	margin-top: 6px;
}

.gg-booking-instructor-profile__schedule-title {
	margin: 0 0 4px;
	font-size: 16px;
	color: var(--gg-text);
}

.gg-booking-instructor-profile__no-classes {
	margin: 0;
	font-size: 13px;
	color: var(--gg-text-light);
}

.gg-booking-instructor-profile__class-item {
	display: flex;
	flex-direction: column;
	align-self: var( --gg-upcoming-align, flex-start );
	gap: 2px;
	padding: 10px 14px;
	background-color: var(--gg-color-success-soft);
	border: 1px solid transparent;
	border-radius: 6px;
	text-align: var( --gg-upcoming-align-text, left );
	width: 100%;
}

.gg-booking-instructor-profile__class-name {
	font-weight: 600;
	color: var(--gg-text);
	font-size: 14px;
}

.gg-booking-instructor-profile__class-meta {
	color: var(--gg-text-light);
	font-size: 13px;
}

/* Widget Kit image model (rule 117): wrapper is a non-clipping flex container
   (no overflow:hidden — it would slice the Box Shadow control's output); the
   Alignment control sets justify-content here. The img's own border-radius
   renders cleanly without the wrapper clipping. */
.gg-booking-class-card__image {
	display: flex;
	justify-content: var( --gg-card-image-align, center );
}

/* Beautiful-by-default state matching the Kit's control defaults (16/9 cover at
   full width). img.X specificity (0,1,1) + max-width:none defend against theme
   `img { max-width: 100% }` / `height: auto` resets per the ImageControls
   docblock. The --placeholder pairing lets the editor preview <img> respond to
   the same controls. */
img.gg-booking-class-card__img,
.gg-booking-class-card__img--placeholder {
	display: block;
	max-width: none;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Featured image (Cards / List / Popover) — driven by --gg-{card,list,
   cal-popover}-image-* CSS vars. Model:
     1. Wrapper (.*__image) is a flex container; alignment var = where the
        image sits when size is < 100%.
     2. Image element width = size var.
     3. Aspect ratio var derives the height (default behavior).
     4. Custom height var only applies when aspect-ratio var resolves to
        `auto` (selectors_dictionary maps "custom" → "auto"); otherwise
        aspect-ratio dominates and height var is ignored.
     5. img.gg-*__img selector boost (0,1,1) defends against theme rules
        like `.elementor img { height: auto; }` which were silently
        winning over class-only (0,1,0) rules pre-0.7.10.
   max-width: none keeps a px-based size var working against `img {
   max-width: 100% }` theme resets.
*/

.gg-booking-schedule-card__image {
	display: flex;
	justify-content: var( --gg-card-image-align, center );
	overflow: hidden;
}

img.gg-booking-schedule-card__img {
	display: block;
	width: var( --gg-card-image-size, 100% );
	max-width: none;
	aspect-ratio: var( --gg-card-image-ratio, 16 / 9 );
	height: var( --gg-card-image-height, auto );
	object-fit: var( --gg-card-image-fit, cover );
	object-position: var( --gg-card-image-position, center center );
	border-radius: var( --gg-card-image-radius, 0 );
}

/* List view image — sits at the start of the list row. */
.gg-booking-sessions-list__image {
	display: flex;
	justify-content: var( --gg-list-image-align, center );
	flex-shrink: 0;
	overflow: hidden;
}

img.gg-booking-sessions-list__img {
	display: block;
	width: var( --gg-list-image-size, 80px );
	max-width: none;
	aspect-ratio: var( --gg-list-image-ratio, 1 / 1 );
	height: var( --gg-list-image-height, auto );
	object-fit: var( --gg-list-image-fit, cover );
	object-position: var( --gg-list-image-position, center center );
	border-radius: var( --gg-list-image-radius, 4px );
}

/* Class Sessions widget */
.gg-booking-class-sessions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.gg-booking-class-sessions__item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px;
	border: 1px solid var(--gg-border, var(--gg-color-border));
	border-radius: 6px;
	flex-wrap: wrap;
}

.gg-booking-class-sessions__date {
	font-weight: 600;
	min-width: 180px;
}

.gg-booking-class-sessions__meta {
	color: var(--gg-text-light, var(--gg-color-text-muted));
}

.gg-booking-class-sessions__capacity {
	margin-left: auto;
}

/* ----------------------------------------------------------------------- */
/* Sessions List widget                                                    */
/* ----------------------------------------------------------------------- */

.gg-booking-sessions-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.gg-booking-sessions-list__item {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--gg-border);
	background: var(--gg-background);
	transition: background 0.15s ease;
}

.gg-booking-sessions-list__item:first-child {
	border-radius: 6px 6px 0 0;
}

.gg-booking-sessions-list__item:last-child {
	border-bottom: none;
	border-radius: 0 0 6px 6px;
}

.gg-booking-sessions-list__item:hover {
	background: var(--gg-surface, var(--gg-color-background));
}

.gg-booking-sessions-list__date-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 80px;
	text-align: center;
}

.gg-booking-sessions-list__day {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--gg-text-light);
}

.gg-booking-sessions-list__date {
	font-size: 18px;
	font-weight: 700;
	color: var(--gg-text);
	line-height: 1.2;
}

.gg-booking-sessions-list__time {
	font-size: 13px;
	color: var(--gg-primary);
	font-weight: 600;
	margin-top: 2px;
}

.gg-booking-sessions-list__duration {
	font-size: 11px;
	color: var(--gg-text-light);
}

.gg-booking-sessions-list__info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.gg-booking-sessions-list__class-name a {
	font-weight: 600;
	font-size: 15px;
	color: var(--gg-text);
	text-decoration: none;
}

.gg-booking-sessions-list__class-name a:hover {
	color: var(--gg-primary);
}

.gg-booking-sessions-list__instructor {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--gg-text-light);
}

.gg-booking-sessions-list__instructor-photo {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
}

.gg-booking-sessions-list__instructor a,
.gg-booking-sessions-list__location a {
	color: var(--gg-text-light);
	text-decoration: none;
}

.gg-booking-sessions-list__instructor a:hover,
.gg-booking-sessions-list__location a:hover {
	color: var(--gg-primary);
}

.gg-booking-sessions-list__location {
	font-size: 13px;
	color: var(--gg-text-light);
}

.gg-booking-sessions-list__badges {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 2px;
	justify-content: var( --gg-badges-align, flex-start );
}

.gg-badge--type {
	background: var(--gg-primary-light, var(--gg-color-success-soft));
	color: var(--gg-primary);
}

.gg-badge--level {
	background: var(--gg-surface, var(--gg-color-background));
	color: var(--gg-text-light);
	border: 1px solid var(--gg-border);
}

.gg-badge--full {
	background: var(--gg-color-error-soft);
	color: var(--gg-color-error);
}

.gg-badge--cancelled {
	background: var(--gg-color-background);
	color: var(--gg-color-text-muted);
	border: 1px solid var(--gg-color-border);
}

/* Cancelled session visual state */
.gg-booking-session--cancelled {
	opacity: 0.6;
	position: relative;
}

.gg-booking-session--cancelled::after {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 8px,
		rgba( 0, 0, 0, 0.02 ) 8px,
		rgba( 0, 0, 0, 0.02 ) 9px
	);
	pointer-events: none;
	border-radius: inherit;
}

.gg-booking-session--cancelled .gg-booking-schedule-card__color-strip,
.gg-booking-session--cancelled.gg-booking-sessions-list__item {
	border-color: var(--gg-color-text-muted) !important;
}

.gg-booking-session--cancelled .gg-booking-schedule-card__title,
.gg-booking-session--cancelled .gg-booking-sessions-list__class-name,
.gg-booking-session--cancelled .gg-booking-sessions-card__title {
	text-decoration: line-through;
	color: var( --gg-text-light );
}

.gg-booking-session--cancelled-badge {
	margin-left: 6px;
}

.gg-booking-sessions-list__action {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	min-width: 140px;
}

.gg-booking-sessions-list__price {
	font-size: 16px;
	font-weight: 700;
	color: var(--gg-text);
}

.gg-booking-sessions-list__capacity {
	font-size: 12px;
	color: var(--gg-text-light);
}

.gg-booking-sessions-list__empty {
	padding: 24px;
	text-align: center;
	color: var(--gg-text-light);
}

/* Sessions List — vertical stack on PHONES ONLY (≤767px, Elementor's mobile/
   tablet boundary). Tablet (768px+) keeps the horizontal row — it has room to
   breathe. Declared AFTER the base list rules above so these overrides win on
   source order (media queries add no specificity). On phones the row crams the
   class name + room into thin columns, so switch to a clean CENTERED stack:
   thumbnail centered, details + badges centered, full-width action + Book button. */
@media (max-width: 767px) {
	.gg-booking-sessions-list__item {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		text-align: center;
	}

	.gg-booking-sessions-list__image {
		justify-content: center;
	}

	.gg-booking-sessions-list__date-block,
	.gg-booking-sessions-list__info,
	.gg-booking-sessions-list__action {
		align-items: center;
	}

	.gg-booking-sessions-list__badges {
		justify-content: center;
	}

	.gg-booking-sessions-list__action {
		width: 100%;
		flex-direction: column;
		gap: 8px;
		min-width: 0;
	}

	.gg-booking-sessions-list__action .gg-booking-btn {
		width: 100%;
	}
}

/* Sessions grid (card view) */

.gg-booking-sessions-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

/* Sessions card view */

.gg-booking-sessions-card {
	padding-left: 12px;
}

.gg-booking-sessions-card__body {
	padding: 4px 0 4px 4px;
}

.gg-booking-sessions-card__footer {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--gg-border);
}

.gg-booking-sessions-card__price {
	font-size: 18px;
	font-weight: 700;
	color: var(--gg-text);
}

.gg-booking-sessions-card__capacity {
	font-size: 12px;
	color: var(--gg-text-light);
}

.gg-booking-sessions-card__footer .gg-booking-btn {
	width: 100%;
	text-align: center;
}

/* Class Card badges (used by ClassCardWidget). */
.gg-booking-class-card__badges {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 8px;
	justify-content: var( --gg-badges-align, flex-start );
}

/* Schedule widget — Cards view badges row.
   Sits between the title and the meta block. Alignment / gap / radius
   driven by --gg-card-badges-* vars (Badges Style section). */
.gg-booking-schedule-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var( --gg-card-badges-gap, 6px );
	justify-content: var( --gg-card-badges-align, flex-start );
	margin: 6px 0 8px;
}

/* List + popover badge containers — alignment vars shared with above
   pattern; existing .gg-booking-sessions-list__badges / .gg-booking-cal-popover__badges
   declarations stay (gap default + display:flex), this adds the var
   plumbing on top. */
.gg-booking-sessions-list__badges {
	gap: var( --gg-list-badges-gap, 6px );
	justify-content: var( --gg-list-badges-align, var( --gg-badges-align, flex-start ) );
}

.gg-booking-cal-popover__badges {
	gap: var( --gg-cal-popover-badges-gap, 6px );
	justify-content: var( --gg-cal-popover-badges-align, flex-start );
}

.gg-badge--category {
	background: var(--gg-surface, var(--gg-color-background));
	color: var(--gg-text-light);
	border: 1px solid var(--gg-border);
}

/* ----------------------------------------------------------------------- */
/* Schedule date filter                                                    */
/* ----------------------------------------------------------------------- */

.gg-booking-schedule-date-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-bottom: 20px;
}

.gg-booking-schedule-date-filter__buttons {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.gg-booking-date-btn {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 20px;
	border: 1px solid var(--gg-border);
	color: var(--gg-text);
	text-decoration: none;
	font-size: 13px;
	transition: all 0.2s ease;
	background: var(--gg-background);
}

.gg-booking-date-btn:hover {
	border-color: var(--gg-primary);
	color: var(--gg-primary);
}

.gg-booking-date-btn--active {
	background: var(--gg-primary);
	border-color: var(--gg-primary);
	color: var(--gg-color-surface);
}

.gg-booking-date-btn--active:hover {
	color: var(--gg-color-surface);
}

.gg-booking-schedule-date-filter__picker {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.gg-booking-schedule-date-filter__picker label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
}

.gg-booking-schedule-date-filter__picker input[type="date"] {
	padding: 4px 8px;
	border: 1px solid var(--gg-border);
	border-radius: 4px;
	font-size: 13px;
}

.gg-booking-date-filter__clear {
	color: var(--gg-text-light);
	font-size: 12px;
	text-decoration: none;
}

.gg-booking-date-filter__clear:hover {
	color: var(--gg-error);
}

.gg-booking-schedule-result-count {
	font-size: 13px;
	color: var(--gg-text-light);
	margin-bottom: 12px;
}

/* ----------------------------------------------------------------------- */
/* Package Shop                                                            */
/* ----------------------------------------------------------------------- */

.gg-booking-package-shop {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
}

.gg-booking-package-shop__empty {
	text-align: center;
	color: var(--gg-text-light);
}

.gg-booking-package-card {
	background: var(--gg-background);
	border: 1px solid var(--gg-border);
	border-radius: 8px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
	transition: box-shadow 0.2s ease;
}

.gg-booking-package-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.gg-booking-package-card--owned {
	border-color: var(--gg-primary);
}

.gg-booking-package-card__owned-badge {
	position: absolute;
	top: -10px;
	right: 16px;
	background: var(--gg-primary);
	color: var(--gg-color-surface);
	font-size: 11px;
	font-weight: 600;
	padding: 2px 10px;
	border-radius: 12px;
}

/* Featured image — PackageShop pt.4 (rule 117 seven-control image model).
 * The wrapper is a flex container so the Alignment control's justify-content
 * reaches the <img> at any Size value < 100%. img.gg-... raises the selector
 * specificity to 0,1,1 so a theme's `img { max-width: 100% }` reset can't
 * override the Size control — paired with `max-width: none` as the inline
 * defence. No `overflow: hidden` here: the Size slider caps at 100% so the
 * image can't overflow horizontally, and clipping the wrap would chop any
 * box-shadow set via the Image controls. The image's own `border-radius`
 * renders naturally without needing the wrap to clip it. */
.gg-booking-package-card__img-wrap {
	display: flex;
	justify-content: var( --gg-package-image-align, center );
	width: 100%;
}

img.gg-booking-package-card__img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center center;
}

.gg-booking-package-card__img--placeholder {
	width: 100%;
	aspect-ratio: 16 / 9;
	background:
		linear-gradient(135deg, transparent 45%, rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0.05) 55%, transparent 55%),
		var(--gg-color-muted-soft, rgba(0, 0, 0, 0.06));
}

.gg-booking-package-card__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--gg-text);
	margin: 0;
}

.gg-booking-package-card__price {
	font-size: 28px;
	font-weight: 800;
	color: var(--gg-primary);
	line-height: 1;
}

.gg-booking-package-card__interval {
	font-size: 14px;
	font-weight: 400;
	color: var(--gg-text-light);
	margin-left: 2px;
}

.gg-booking-package-card__sessions,
.gg-booking-package-card__validity {
	font-size: 14px;
	color: var(--gg-text-light);
}

.gg-booking-package-card__description {
	font-size: 13px;
	color: var(--gg-text-light);
	line-height: 1.6;
}
.gg-booking-package-card__description p {
	margin: 0;
}

.gg-booking-package-card__classes {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	font-size: 12px;
	color: var(--gg-text-light);
	align-items: center;
}

/* Buy button base. Intentionally does NOT set `width` — the Button Width
   control (LayoutControls widths) is the sole authority, defaulting to 100%.
   Previously this rule set `width: 100%` at specificity 0,2,0, the SAME as
   the control's `{{WRAPPER}} .gg-booking-package-buy-btn`, so on environments
   where the plugin's static CSS loaded after Elementor's inline post-CSS the
   base won — locking the buy button at 100% even when the control said Auto.
   With width removed here, Auto actually shrinks the button (and Button
   alignment then has somewhere to position it). */
.gg-booking-package-card .gg-booking-package-buy-btn {
	margin-top: auto;
	text-align: center;
}

/* `align-self: flex-start` on BOTH buy buttons (not-owned BUY NOW + owned
   BUY FOR SOMEONE ELSE) — fully decouples the buy button from its parent's
   `align-items`. Owned State alignment (which sets `--gg-owned-align` →
   `.gg-booking-owned-actions { align-items }`) thus only moves the badge +
   Manage (its intended scope); the buy button is positioned exclusively by
   the Button alignment control. Also lets `width: auto` actually take
   effect (the card's default `align-items: stretch` was overriding it). */
.gg-booking-package-card .gg-booking-package-buy-btn {
	align-self: flex-start;
}

/* ----------------------------------------------------------------------- */
/* Booking Form — Payment Options                                          */
/* ----------------------------------------------------------------------- */

.gg-booking-booking-payment-options {
	margin-bottom: 24px;
}

.gg-booking-booking-payment-options h3 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 12px;
	color: var(--gg-text);
}

.gg-booking-payment-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--gg-border);
	border-radius: 6px;
	margin-bottom: 8px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.gg-booking-payment-option:has(input:checked) {
	border-color: var(--gg-primary);
	background: var(--gg-surface, var(--gg-color-background));
}

.gg-booking-payment-option--disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.gg-booking-payment-option input[type="radio"] {
	margin-top: 3px;
	flex-shrink: 0;
	accent-color: var(--gg-primary);
}

.gg-booking-payment-option__info {
	flex: 1;
}

.gg-booking-payment-option__name {
	font-weight: 600;
	font-size: 14px;
	display: block;
	color: var(--gg-text);
}

.gg-booking-payment-option__meta {
	font-size: 13px;
	color: var(--gg-text-light);
	display: block;
	margin-top: 2px;
}

.gg-booking-payment-option__invalid {
	font-size: 12px;
	color: var(--gg-color-error);
	display: block;
	margin-top: 2px;
}

/* ----------------------------------------------------------------------- */
/* Modal overlay                                                           */
/* ----------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * GGModal — generic modal host (Modal Arc, Phase 3a). Distinct namespace from
 * the legacy .gg-booking-modal (the package purchase modal) below. 720px
 * centered on desktop; slide-up bottom-sheet at <=768px (Decision 4.B).
 * ------------------------------------------------------------------------- */
html.gg-modal-lock,
body.gg-modal-lock {
	overflow: hidden;
}

.gg-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity var(--gg-duration-base) var(--gg-ease-out);
}

.gg-modal-overlay[hidden] {
	display: none;
}

.gg-modal-overlay.is-open {
	opacity: 1;
}

.gg-modal {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 720px;
	max-height: 90vh;
	background: var(--gg-background);
	border-radius: 14px;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.22);
	overflow: hidden;
	transform: translateY(12px) scale(0.98);
	transition: transform var(--gg-duration-base) var(--gg-ease-out);
}

.gg-modal-overlay.is-open .gg-modal {
	transform: none;
}

.gg-modal--narrow { max-width: 480px; }
.gg-modal--wide   { max-width: 920px; }

.gg-modal__handle {
	display: none; /* shown only as the bottom-sheet grab bar on mobile */
}

.gg-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 24px 12px;
}

.gg-modal__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
	color: var(--gg-text);
	font-family: var(--gg-font-heading);
}

.gg-modal__close {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: var(--gg-text-light);
	padding: 0 4px;
}

.gg-modal__close:hover {
	color: var(--gg-text);
}

.gg-modal__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 4px 24px 24px;
}

.gg-modal__error {
	color: var(--gg-error);
	text-align: center;
	padding: 24px 0;
}

.gg-modal__veil {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.6);
}

.gg-modal__veil::after {
	content: "";
	width: 28px;
	height: 28px;
	border: 3px solid var(--gg-border);
	border-top-color: var(--gg-primary);
	border-radius: 50%;
	animation: gg-modal-spin 0.7s linear infinite;
}

.gg-modal__veil[hidden] { display: none; }

@keyframes gg-modal-spin {
	to { transform: rotate(360deg); }
}

.gg-modal__live {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Bottom-sheet on tablet/mobile (Decision 4.B — ~25-30% higher engagement). */
@media (max-width: 768px) {
	.gg-modal-overlay {
		align-items: flex-end;
		padding: 0;
	}

	.gg-modal {
		max-width: none;
		max-height: 88vh;
		border-radius: 16px 16px 0 0;
		transform: translateY(100%);
	}

	.gg-modal-overlay.is-open .gg-modal {
		transform: none;
	}

	.gg-modal__handle {
		display: block;
		width: 40px;
		height: 5px;
		margin: 10px auto 0;
		padding: 0;
		border: 0;
		border-radius: 3px;
		background: var(--gg-border);
		cursor: pointer;
	}

	.gg-modal__header {
		padding-top: 8px;
	}
}

.gg-booking-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
}

.gg-booking-modal {
	background: var(--gg-background);
	border-radius: 12px;
	padding: 28px;
	max-width: 420px;
	width: 90%;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.gg-booking-modal h3 {
	margin: 0 0 8px;
	font-size: 20px;
	color: var(--gg-text);
}

.gg-booking-modal p {
	margin: 0 0 16px;
	font-size: 16px;
	color: var(--gg-text-light);
}

.gg-booking-modal__actions {
	display: flex;
	gap: 8px;
	margin-top: 20px;
}

.gg-booking-modal__actions .gg-booking-btn {
	flex: 1;
}

#gg-booking-package-card-element {
	padding: 12px;
	border: 1px solid var(--gg-border);
	border-radius: 4px;
	background: var(--gg-background);
}

/* ----------------------------------------------------------------------- */
/* Calendar placeholder                                                    */
/* ----------------------------------------------------------------------- */

/* ----------------------------------------------------------------------- */
/* Membership cards                                                        */
/* ----------------------------------------------------------------------- */

.gg-booking-membership-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px;
	border: 1px solid var(--gg-border);
	border-radius: 6px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.gg-booking-membership-card__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.gg-booking-membership-card__info strong {
	font-size: 15px;
	color: var(--gg-text);
}

.gg-booking-membership-card__info span {
	font-size: 13px;
	color: var(--gg-text-light);
}

.gg-badge--warning {
	background: var(--gg-color-warning-soft);
	color: var(--gg-color-warning);
	border: 1px solid var(--gg-color-warning);
	display: inline-block;
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 500;
}

/* ----------------------------------------------------------------------- */
/* Calendar placeholder                                                    */
/* ----------------------------------------------------------------------- */

.gg-booking-calendar-placeholder {
	padding: 40px 20px;
	text-align: center;
	background: var(--gg-surface, var(--gg-color-background));
	border: 2px dashed var(--gg-border);
	border-radius: 6px;
	color: var(--gg-text-light);
}

/* ----------------------------------------------------------------------- */
/* Payment select dropdown                                                 */
/* ----------------------------------------------------------------------- */

.gg-booking-booking-payment-options {
	margin-bottom: 20px;
}

.gg-booking-booking-payment-options label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
	color: var(--gg-text);
}

.gg-booking-select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--gg-border);
	border-radius: 6px;
	font-size: 14px;
	color: var(--gg-text);
	background: var(--gg-background);
	appearance: auto;
	cursor: pointer;
}

.gg-booking-select:focus {
	outline: none;
	border-color: var(--gg-primary);
	box-shadow: 0 0 0 3px rgba(92, 122, 92, 0.1);
}

/* ----------------------------------------------------------------------- */
/* Package Shop — ownership states                                         */
/* ----------------------------------------------------------------------- */

.gg-booking-package-owned-msg {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.gg-booking-package-owned-msg > span {
	font-size: 13px;
	color: var(--gg-text-light);
	font-weight: 500;
}

.gg-booking-btn--disabled {
	background: var(--gg-border);
	color: var(--gg-text-light);
	border: none;
	border-radius: 6px;
	padding: 10px 20px;
	font-size: 14px;
	cursor: not-allowed;
	width: 100%;
}

.gg-booking-btn--outline {
	background: transparent;
	color: var(--gg-primary);
	border: 1px solid var(--gg-primary);
	border-radius: 6px;
	padding: 10px 20px;
	font-size: 14px;
	cursor: pointer;
	width: 100%;
	transition: background 0.15s, color 0.15s;
}

.gg-booking-btn--outline:hover {
	background: var(--gg-primary);
	color: var(--gg-color-surface);
}

/* ----------------------------------------------------------------------- */
/* Modal — recipient form fields                                           */
/* ----------------------------------------------------------------------- */

.gg-booking-form-row {
	margin-bottom: 12px;
}

.gg-booking-form-row label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 4px;
	color: var(--gg-text);
}

.gg-booking-modal__input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--gg-border);
	border-radius: 6px;
	font-size: 14px;
	color: var(--gg-text);
	background: var(--gg-background);
	box-sizing: border-box;
}

.gg-booking-modal__input:focus {
	outline: none;
	border-color: var(--gg-primary);
	box-shadow: 0 0 0 3px rgba(92, 122, 92, 0.1);
}

/* ----------------------------------------------------------------------- */
/* Purchase modal redesign                                                 */
/* ----------------------------------------------------------------------- */

.gg-booking-purchase-modal {
	width: 100%;
	max-width: 480px;
}

.gg-booking-modal__header {
	position: relative;
	margin-bottom: 16px;
}

.gg-booking-modal__price {
	font-size: 22px;
	font-weight: 700;
	color: var(--gg-primary);
}

.gg-booking-modal__close {
	position: absolute;
	top: 0;
	right: 0;
	background: none;
	border: none;
	font-size: 24px;
	color: var(--gg-text-light);
	cursor: pointer;
	padding: 0;
	line-height: 1;
}

.gg-booking-modal__close:hover {
	color: var(--gg-text);
}

.gg-booking-modal__body {
	margin-bottom: 16px;
}

.gg-booking-modal__footer {
	display: flex;
	gap: 8px;
}

.gg-booking-modal__footer .gg-booking-btn {
	flex: 1;
}

.gg-booking-form-section {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--gg-border);
}

.gg-booking-form-section:last-of-type {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.gg-booking-form-section h4 {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--gg-text-light);
	margin: 0 0 12px;
}

.gg-booking-input {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--gg-border);
	border-radius: 6px;
	font-size: 14px;
	color: var(--gg-text);
	background: var(--gg-background);
	box-sizing: border-box;
}

.gg-booking-input:focus {
	outline: none;
	border-color: var(--gg-primary);
}

.gg-booking-toggle-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--gg-text);
	cursor: pointer;
	font-weight: 500;
}

.gg-booking-toggle-label input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--gg-primary);
	cursor: pointer;
}

.gg-booking-owned-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

.gg-booking-owned-label {
	font-size: 13px;
	color: var(--gg-text-light);
	font-style: italic;
}

.gg-booking-btn--sm {
	padding: 4px 12px;
	font-size: 12px;
}

.gg-booking-for-someone-wrapper {
	margin: 16px 0;
}

/* Booking form for-someone section */
#gg-booking-recipient {
	background: var(--gg-surface, var(--gg-color-background));
	border: 1px solid var(--gg-border);
	border-radius: 6px;
	padding: 16px;
}

/* ----------------------------------------------------------------------- */
/* Cancellation Policy                                                     */
/* ----------------------------------------------------------------------- */

.gg-booking-cancellation-policy {
	margin-top: 16px;
	padding: 12px;
	background: var(--gg-surface, var(--gg-color-background));
	border-left: 3px solid var(--gg-border);
	border-radius: 0 4px 4px 0;
	font-size: 13px;
	color: var(--gg-text-light);
	line-height: 1.6;
}

.gg-booking-cancellation-policy p {
	margin: 0 0 8px;
}

.gg-booking-cancellation-policy p:last-child {
	margin: 0;
}

/* ----------------------------------------------------------------------- */
/* Terms & Conditions                                                      */
/* ----------------------------------------------------------------------- */

.gg-booking-tnc-wrapper {
	margin-top: 16px;
}

.gg-booking-tnc-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: var(--gg-text);
	cursor: pointer;
	line-height: 1.5;
}

.gg-booking-tnc-label input[type="checkbox"] {
	margin-top: 2px;
	flex-shrink: 0;
	accent-color: var(--gg-primary);
	width: 16px;
	height: 16px;
}

.gg-booking-tnc-label a {
	color: var(--gg-primary);
	text-decoration: underline;
}

.gg-booking-tnc-body {
	max-height: 400px;
	overflow-y: auto;
	font-size: 14px;
	line-height: 1.7;
	color: var(--gg-text);
	padding: 0 4px;
}

/* ----------------------------------------------------------------------- */
/* Widget inner wrapper                                                    */
/* ----------------------------------------------------------------------- */

.gg-booking-widget-inner {
	width: 100%;
	max-width: var(--gg-widget-max-width, 64rem);
	margin-inline: auto;
	font-family: var( --gg-font-base );
	color: var( --gg-text );
}

.gg-booking-class-card__title,
.gg-booking-sessions-card__title,
.gg-booking-sessions-list__class-name,
.gg-booking-schedule-card__title,
.gg-booking-instructor-profile__name,
.gg-booking-package-card__title,
.gg-booking-dashboard__section-title,
.gg-booking-dashboard__client-name {
	font-family: var( --gg-font-heading );
}

/* ----------------------------------------------------------------------- */
/* Elementor alignment CSS variables                                       */
/* ----------------------------------------------------------------------- */
/* Elementor Pro 4.x writes the alignment control value as a CSS variable  */
/* on the {{WRAPPER}} element via selectors_dictionary. These rules        */
/* consume those variables to drive flex alignment on containers that      */
/* don't respect text-align (flex parents laying out children with         */
/* align-items, justify-content, or align-self).                           */

.gg-booking-instructor-profile {
	align-items: var( --gg-instructor-align, flex-start );
}

.gg-booking-instructor-profile__photo,
.gg-booking-instructor-profile__photo-placeholder {
	align-self: var( --gg-photo-align, auto );
}

.gg-booking-instructor-profile__name {
	align-self: var( --gg-name-align, auto );
}

.gg-booking-instructor-profile__actions {
	align-self: var( --gg-btn-align, auto );
}

.gg-booking-owned-actions {
	align-items: var( --gg-owned-align, flex-start );
}

.gg-booking-sessions-list__instructor {
	justify-content: var( --gg-list-instructor-align, flex-start );
}

.gg-booking-class-card__instructor {
	justify-content: var( --gg-card-instructor-align, flex-start );
}

/* ----------------------------------------------------------------------- */
/* Dashboard tabs                                                          */
/* ----------------------------------------------------------------------- */

.gg-booking-dashboard__tabs {
	display: flex;
	gap: 8px;
	border-bottom: 2px solid var( --gg-border );
	margin-bottom: 24px;
	justify-content: var( --gg-tabs-justify, flex-start );
}

.gg-booking-dashboard__tab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: 6px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 500;
	color: var( --gg-text-light );
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.gg-booking-dashboard__tab:hover {
	color: var( --gg-text );
}

.gg-booking-dashboard__tab--active {
	color: var( --gg-primary );
	border-bottom-color: var( --gg-primary );
}

.gg-booking-dashboard__panel--hidden {
	display: none;
}

/* ----------------------------------------------------------------------- */
/* Instructor Dashboard tabs + profile                                     */
/* ----------------------------------------------------------------------- */

.gg-booking-instructor-dashboard__tabs {
	display: flex;
	gap: 8px;
	border-bottom: 2px solid var( --gg-border );
	margin-bottom: 24px;
}

.gg-booking-instructor-dashboard__tab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: 6px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 500;
	color: var( --gg-text-light );
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.gg-booking-instructor-dashboard__tab:hover {
	color: var( --gg-text );
}

.gg-booking-instructor-dashboard__tab--active {
	color: var( --gg-primary );
	border-bottom-color: var( --gg-primary );
}

.gg-booking-instructor-dashboard__panel--hidden {
	display: none;
}

.gg-booking-instructor-profile-form {
	max-width: 560px;
}

.gg-booking-instructor-profile-form .gg-booking-profile-section + .gg-booking-profile-section {
	margin-top: 24px;
}

.gg-booking-instructor-profile-form .gg-booking-profile-field {
	margin-bottom: 16px;
}

.gg-booking-instructor-profile-form .gg-booking-profile-field label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var( --gg-text );
	margin-bottom: 6px;
}

.gg-booking-instructor-profile-form input[type="text"],
.gg-booking-instructor-profile-form textarea,
.gg-booking-instructor-profile-form select {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var( --gg-border );
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
	background: var( --gg-background );
	color: var( --gg-text );
}

.gg-booking-instructor-profile-form .gg-booking-instructor-specialty {
	margin-bottom: 6px;
}

.gg-booking-instructor-profile-form .gg-booking-profile-actions {
	margin-top: 20px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.gg-booking-instructor-profile-form .gg-booking-profile-feedback {
	font-size: 13px;
}

/* ----------------------------------------------------------------------- */
/* Instructor Dashboard — roster + check-in                                */
/* ----------------------------------------------------------------------- */

.gg-booking-instructor-dashboard__roster {
	margin-top: 12px;
	border-top: 1px solid var( --gg-border );
	padding-top: 12px;
}

.gg-booking-instructor-dashboard__roster-heading {
	font-size: 14px;
	font-weight: 600;
	color: var( --gg-text );
	cursor: pointer;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.gg-booking-instructor-dashboard__roster-heading::-webkit-details-marker {
	display: none;
}

.gg-booking-instructor-dashboard__roster-heading::before {
	content: "▸";
	font-size: 11px;
	color: var( --gg-text-light );
	transition: transform 0.15s ease;
	display: inline-block;
}

.gg-booking-instructor-dashboard__roster[open] .gg-booking-instructor-dashboard__roster-heading::before {
	transform: rotate(90deg);
}

.gg-booking-instructor-dashboard__roster-count {
	color: var( --gg-text-light );
	font-weight: 400;
}

.gg-booking-instructor-dashboard__roster-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gg-booking-roster-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	column-gap: 12px;
	row-gap: 6px;
	align-items: center;
	padding: 8px 10px;
	background: var( --gg-background );
	border: 1px solid var( --gg-border );
	border-radius: 4px;
	font-size: 14px;
}

.gg-booking-roster-row__name {
	grid-column: 1;
	grid-row: 1;
	font-weight: 500;
	color: var( --gg-text );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gg-booking-roster-row__status {
	grid-column: 2;
	grid-row: 1;
	font-size: 12px;
	font-weight: 500;
	padding: 3px 8px;
	border-radius: 999px;
	white-space: nowrap;
}

.gg-booking-roster-row__status--pending {
	background: color-mix( in srgb, var( --gg-text-light ) 15%, transparent );
	color: var( --gg-text-light );
}

.gg-booking-roster-row__status--attended {
	background: color-mix( in srgb, var( --gg-success ) 18%, transparent );
	color: var( --gg-success );
}

.gg-booking-roster-row__status--no_show {
	background: color-mix( in srgb, var( --gg-error ) 18%, transparent );
	color: var( --gg-error );
}

.gg-booking-roster-row__status--late_cancel {
	background: color-mix( in srgb, var( --gg-accent ) 20%, transparent );
	color: var( --gg-accent );
}

.gg-booking-roster-row__actions {
	grid-column: 1 / -1;
	grid-row: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

/* Roster action buttons are deliberately more compact than the global
   .gg-booking-btn — they're inline row actions, not primary CTAs, so keep them
   from dominating the client-name column. Studios can still override via
   the Elementor "Row Action Buttons" style controls. */
.gg-booking-roster-row__action.gg-booking-btn {
	padding: 4px 8px;
	font-size: 11px;
	line-height: 1.2;
	min-height: 0;
	white-space: nowrap;
}

@media (min-width: 640px) {
	.gg-booking-roster-row {
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-rows: auto;
	}

	.gg-booking-roster-row__actions {
		grid-column: 3;
		grid-row: 1;
		flex-wrap: nowrap;
	}
}

.gg-booking-instructor-dashboard__roster-empty {
	font-size: 13px;
	color: var( --gg-text-light );
	margin: 8px 0 0;
	font-style: italic;
}

/* ----------------------------------------------------------------------- */
/* Walk-in form                                                            */
/* ----------------------------------------------------------------------- */

.gg-booking-walkin {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var( --gg-border );
}

.gg-booking-walkin__toggle {
	font-size: 13px;
}

.gg-booking-walkin__form {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* HTML5 `hidden` defaults to display:none, but the rule above sets
   display:flex which silently overrides it. Restore the collapse. */
.gg-booking-walkin__form[hidden] {
	display: none;
}

.gg-booking-walkin__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

@media (min-width: 560px) {
	.gg-booking-walkin__row {
		grid-template-columns: 1fr 1fr;
	}
}

.gg-booking-walkin__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	color: var( --gg-text );
}

.gg-booking-walkin__field span {
	font-weight: 500;
}

.gg-booking-walkin__field input {
	padding: 8px 10px;
	border: 1px solid var( --gg-border );
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
	background: var( --gg-background );
	color: var( --gg-text );
}

.gg-booking-walkin__field input:focus {
	outline: none;
	border-color: var( --gg-primary );
	box-shadow: 0 0 0 2px color-mix( in srgb, var( --gg-primary ) 25%, transparent );
}

.gg-booking-walkin__override {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var( --gg-error );
	padding: 8px 10px;
	border: 1px solid color-mix( in srgb, var( --gg-error ) 30%, transparent );
	border-radius: 4px;
	background: color-mix( in srgb, var( --gg-error ) 8%, transparent );
}

.gg-booking-walkin__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.gg-booking-walkin__feedback {
	font-size: 13px;
	display: none;
}

/* ----------------------------------------------------------------------- */
/* Dashboard logout                                                        */
/* ----------------------------------------------------------------------- */

.gg-booking-dashboard__logout,
.gg-booking-instructor-dashboard__logout {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var( --gg-border );
	display: flex;
	justify-content: flex-end;
}

/* ----------------------------------------------------------------------- */
/* Profile form                                                            */
/* ----------------------------------------------------------------------- */

.gg-booking-profile-form {
	max-width: 560px;
}

.gg-booking-profile-section {
	margin-bottom: 28px;
	padding-bottom: 28px;
	border-bottom: 1px solid var( --gg-border );
}

.gg-booking-profile-section:last-of-type {
	border-bottom: none;
}

.gg-booking-profile-section h4 {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --gg-text-light );
	margin: 0 0 16px;
}

.gg-booking-profile-photo {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 28px;
	padding-bottom: 28px;
	border-bottom: 1px solid var( --gg-border );
}

.gg-booking-profile-photo__preview {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
	background: var( --gg-surface );
	border: 2px solid var( --gg-border );
	flex-shrink: 0;
}

.gg-booking-profile-photo__preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gg-booking-profile-photo__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --gg-text-light );
	font-size: 32px;
}

.gg-booking-profile-photo__hint {
	font-size: 12px;
	color: var( --gg-text-light );
	margin: 4px 0 0;
}

.gg-booking-profile-actions {
	display: flex;
	align-items: center;
	margin-top: 24px;
}

.gg-booking-field-hint {
	font-size: 12px;
	color: var( --gg-text-light );
	margin: 4px 0 0;
}

/* ==========================================================================
   Calendar Widget — FullCalendar host
   ========================================================================== */

.gg-booking-calendar {
    --gg-cal-font: inherit;
    font-family: var( --gg-cal-font );
}

.gg-booking-calendar .fc-button,
.gg-booking-calendar .fc-button-primary {
    background-color: var( --gg-primary, var(--gg-color-primary) );
    border-color:     var( --gg-primary, var(--gg-color-primary) );
    color: var(--gg-color-surface);
    font-size: 0.85rem;
    padding: 0.35em 0.75em;
    border-radius: 4px;
    transition: background 0.2s;
}

.gg-booking-calendar .fc-button-primary:hover,
.gg-booking-calendar .fc-button-primary:focus {
    background-color: var( --gg-primary-dark, var(--gg-color-primary) );
    border-color:     var( --gg-primary-dark, var(--gg-color-primary) );
}

.gg-booking-calendar .fc-button-primary:not(:disabled).fc-button-active {
    background-color: var( --gg-primary-dark, var(--gg-color-primary) );
    border-color:     var( --gg-primary-dark, var(--gg-color-primary) );
}

/* Month view events — rendered as colored rectangles (one per class).
   Background-color + border-color are applied inline per-event by
   gg-booking-schedule-calendar.js in eventDidMount so the class color shows
   reliably across all views. This rule only handles typography + spacing. */
.gg-booking-calendar .fc-daygrid-event {
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 1px 5px;
    margin: 1px 2px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var( --gg-class-event-text, var(--gg-color-surface) );
}

.gg-booking-calendar .fc-daygrid-event .fc-event-main,
.gg-booking-calendar .fc-daygrid-event .fc-event-title {
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hide the internal FullCalendar dot + time in Month view so the full block
   acts as the class-color rectangle (defensive against cached JS). */
.gg-booking-calendar .fc-daygrid-event .fc-daygrid-event-dot {
    display: none;
}

.gg-booking-calendar .fc-daygrid-event .fc-event-time {
    display: none;
}

/* Week view blocks — keep FullCalendar's block layout, inherit event text color. */
.gg-booking-calendar .fc-timegrid-event,
.gg-booking-calendar .fc-timegrid-event .fc-event-main {
    color: var( --gg-class-event-text, var(--gg-color-surface) );
}

.gg-booking-cal-event--full {
    opacity: 0.65;
}

.gg-booking-calendar .fc-today-button {
    text-transform: capitalize;
}

/* ==========================================================================
   Calendar Popover — desktop anchored
   ========================================================================== */

.gg-booking-cal-popover {
    position: absolute;
    z-index: 99999;
    width: 300px;
    background: var(--gg-color-surface);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba( 0,0,0,0.18 ), 0 2px 8px rgba( 0,0,0,0.10 );
    overflow: hidden;
    font-size: 0.9rem;
    /* Enter/exit handled via .gg-booking-cal-popover--open toggled by JS so the
       same transition plays on the way out. */
    opacity: 0;
    transform: translateY( 8px );
    transition: opacity 0.32s ease, transform 0.32s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.gg-booking-cal-popover.gg-booking-cal-popover--open {
    opacity: 1;
    transform: translateY( 0 );
}

/* Class color strip — top edge of the popover. Always rendered (split
   out of the header to live above the optional featured image). */
.gg-booking-cal-popover__color-strip {
    height: 4px;
    width: 100%;
}

/* Featured image banner — only rendered when Show Featured Image is on
   and the class has a thumbnail. Defaults are tuned for a 300px-wide
   popover; studios override via Calendar Popover Style controls. */
.gg-booking-cal-popover__image {
    display: flex;
    justify-content: var( --gg-cal-popover-image-align, center );
    overflow: hidden;
}

.gg-booking-cal-popover__image img {
    display: block;
    width: var( --gg-cal-popover-image-size, 100% );
    max-width: none;
    aspect-ratio: var( --gg-cal-popover-image-ratio, 16 / 9 );
    height: var( --gg-cal-popover-image-height, auto );
    object-fit: var( --gg-cal-popover-image-fit, cover );
    object-position: var( --gg-cal-popover-image-position, center center );
}

.gg-booking-cal-popover__header {
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--gg-color-background);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.gg-booking-cal-popover__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var( --gg-color-heading, var(--gg-color-text) );
    flex: 1;
}

.gg-booking-cal-popover__close {
    background: var( --gg-popover-close-bg, none );
    border: none;
    cursor: pointer;
    font-size: var( --gg-popover-close-size, 1.2rem );
    line-height: 1;
    color: var( --gg-popover-close-color, var(--gg-color-text-muted) );
    padding: 0 2px;
    flex-shrink: 0;
    transition: color 0.15s, background-color 0.15s;
}

.gg-booking-cal-popover__close:hover,
.gg-booking-cal-popover__close:focus {
    color: var( --gg-popover-close-hover-color, var(--gg-color-text-muted) );
    background: var( --gg-popover-close-hover-bg, none );
}

.gg-booking-cal-popover__body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gg-booking-cal-popover__badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.gg-booking-cal-popover__when {
    font-weight: 500;
    color: var( --gg-color-text, var(--gg-color-text-muted) );
    display: flex;
    align-items: center;
    gap: 8px;
}

.gg-booking-cal-popover__duration {
    font-size: 0.78rem;
    color: var(--gg-color-text-muted);
    font-weight: 400;
}

.gg-booking-cal-popover__instructor {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gg-color-text-muted);
}

.gg-booking-cal-popover__photo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.gg-booking-cal-popover__location {
    color: var(--gg-color-text-muted);
    font-size: 0.85rem;
}

.gg-booking-cal-popover__desc {
    margin: 0;
    color: var(--gg-color-text-muted);
    font-size: 0.83rem;
    line-height: 1.5;
}

.gg-booking-cal-popover__capacity {
    margin-top: 2px;
}

.gg-booking-cal-popover__waitlist {
    font-size: 0.78rem;
    color: var(--gg-color-text-muted);
    margin-left: 6px;
}

.gg-booking-cal-popover__footer {
    padding: 10px 14px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--gg-color-background);
}

.gg-booking-cal-popover__book {
    flex: 1;
    text-align: center;
}

.gg-booking-cal-popover__view-link {
    font-size: 0.83rem;
    color: var( --gg-primary, var(--gg-color-primary) );
    text-decoration: none;
    white-space: nowrap;
}

.gg-booking-cal-popover__view-link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Calendar Popover — mobile bottom drawer
   ========================================================================== */

.gg-booking-cal-popover-backdrop {
    position: fixed;
    inset: 0;
    background: rgba( 0,0,0,0.45 );
    z-index: 99998;
    opacity: 0;
    transition: opacity 0.32s ease;
}

.gg-booking-cal-popover-backdrop.gg-booking-cal-popover-backdrop--open {
    opacity: 1;
}

.gg-booking-cal-popover--drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    /* Drawer slides only — opacity stays at 1 to keep the surface opaque
       while it travels. The shared --open class still drives the toggle. */
    opacity: 1;
    transform: translateY( 100% );
    transition: transform 0.42s cubic-bezier( 0.32, 0.72, 0, 1 );
    z-index: 99999;
}

.gg-booking-cal-popover--drawer.gg-booking-cal-popover--open {
    transform: translateY( 0 );
}

.gg-booking-cal-popover--drawer::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--gg-color-border);
    border-radius: 2px;
    margin: 10px auto 0;
}

/* ==========================================================================
   Calendar Toolbar — mobile stacking
   The default FullCalendar toolbar (prev/next + title + view-switcher) is
   too wide for phones; the title's date-range string overflows and folds
   awkwardly. Stacking puts the title on its own row above the controls.
   Paired with pickTitleFormat() in gg-booking-schedule-calendar.js which switches
   to a short "Apr 28 – May 4" format at the same 767px breakpoint.
   ========================================================================== */

@media (max-width: 767px) and (orientation: portrait) {
    /* Portrait-only stacking: landscape phones (iPhone SE 667px, etc.)
       fall through to FC's default row layout because their landscape
       width is enough to fit prev/title/view-switcher in one row.
       FullCalendar v6 mounts directly onto our `.gg-booking-calendar` wrapper and
       adds its `.fc` class to the SAME element rather than creating a child
       `.fc` div. Selectors of the form `.gg-booking-calendar .fc .fc-...` (descendant
       chain) therefore never match. Use `.gg-booking-calendar .fc-...` or
       `.gg-booking-calendar.fc .fc-...` instead. !important defends against FC's
       runtime-injected styles + theme h2 typography rules. */
    .gg-booking-calendar .fc-toolbar.fc-header-toolbar {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px;
    }

    .gg-booking-calendar .fc-toolbar-chunk {
        display: flex !important;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 6px;
        width: 100% !important;
    }

    .gg-booking-calendar .fc-toolbar-title,
    .gg-booking-calendar h2.fc-toolbar-title {
        font-size: 1.05rem !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .gg-booking-calendar .fc-button {
        padding: 6px 10px;
        font-size: 0.85rem;
    }
}

/* Schedule date-filter row stays compact on any small viewport — phones
   in landscape benefit from the same tightening even though the calendar
   toolbar above doesn't need to stack. Hence width-only, no orientation. */
@media (max-width: 767px) {
    .gg-booking-schedule-date-filter {
        gap: 8px;
    }

    .gg-booking-schedule-date-filter__buttons {
        width: 100%;
        justify-content: flex-start;
    }

    .gg-booking-date-btn {
        padding: 6px 12px;
        font-size: 12px;
    }

    .gg-booking-schedule-date-filter__picker {
        width: 100%;
    }
}

/* ==========================================================================
   Calendar Editor Placeholder (Elementor edit mode)
   --------------------------------------------------------------------------
   Static mockup that uses FullCalendar's actual class names (.fc-toolbar,
   .fc-button-primary, .fc-daygrid-day, .fc-daygrid-event) so the existing
   Calendar Toolbar Style controls and Featured Image controls apply
   visually without booting FC. Pairs with an always-visible popover
   preview so popover styling is also editable in real time.
   ========================================================================== */

.gg-booking-calendar-editor-placeholder {
    border: 2px dashed var(--gg-color-success-soft);
    border-radius: 8px;
    padding: 16px;
    background: var(--gg-color-success-soft);
}

.gg-booking-calendar-editor-placeholder .gg-booking-editor-placeholder__header {
    margin-bottom: 12px;
}

.gg-booking-calendar-editor-placeholder__layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
    align-items: start;
}

@media ( max-width: 900px ) {
    .gg-booking-calendar-editor-placeholder__layout {
        grid-template-columns: 1fr;
    }
}

.gg-booking-calendar-editor-placeholder__cal {
    min-width: 0;
}

/* Toolbar — exactly mirrors FC's runtime markup so toolbar Style controls
   work the same in editor and frontend. */
.gg-booking-calendar-editor-placeholder .fc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

.gg-booking-calendar-editor-placeholder .fc-toolbar-chunk {
    display: flex;
    gap: 4px;
    align-items: center;
}

.gg-booking-calendar-editor-placeholder .fc-toolbar-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.gg-booking-cal-mock__day-headers {
    display: grid;
    grid-template-columns: repeat( 7, 1fr );
    gap: 2px;
    margin-bottom: 2px;
}

.gg-booking-cal-mock__grid {
    display: grid;
    grid-template-columns: repeat( 7, 1fr );
    gap: 2px;
}

.gg-booking-cal-mock__day-header {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gg-color-text-muted);
    padding: 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.gg-booking-cal-mock__cell {
    min-height: 52px;
    background: var(--gg-color-surface);
    border-radius: 3px;
    padding: 3px 4px;
    border: 1px solid var(--gg-color-success-soft);
    position: relative;
}

.gg-booking-cal-mock__day-num {
    font-size: 0.7rem;
    color: var(--gg-color-text-muted);
    display: block;
}

.gg-booking-cal-mock__event {
    font-size: 0.65rem;
    color: var( --gg-class-event-text, var(--gg-color-surface) );
    padding: 1px 4px;
    border-radius: 2px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Popover preview — always-visible, statically positioned. The shared
   .gg-booking-cal-popover styles (color strip, image, header, badges, footer)
   apply automatically. The --preview modifier overrides the absolute
   positioning + transition state used on the live popover so the studio
   sees it laid out flat next to the calendar mock. */
.gg-booking-calendar-editor-placeholder__popover {
    min-width: 0;
}

.gg-booking-calendar-editor-placeholder__popover-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gg-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

.gg-booking-cal-popover.gg-booking-cal-popover--preview {
    position: relative;
    width: 100%;
    opacity: 1;
    transform: none;
    transition: none;
}

/* Generic preview-label used by editor placeholders (calendar popover
   preview, empty-state preview, etc.) — small caps muted header. */
.gg-booking-editor-placeholder__preview-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gg-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 16px 0 6px;
}

/* Empty-state preview wrapper — visually separates the always-rendered
   editor preview from the live mock above so studios know it's only
   shown on the frontend when a query returns 0 results. Same pattern
   used for any state-preview wrap in editor placeholders (disabled
   buttons, etc.). */
.gg-booking-editor-placeholder__empty-preview-wrap,
.gg-booking-book-now-button__disabled-preview-wrap {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed var(--gg-color-success-soft);
}

/* ==========================================================================
   Schedule results — loading state
   ========================================================================== */

.gg-booking-schedule-results {
    transition: opacity 0.15s ease;
    min-height: 60px;
}

.gg-booking-schedule-results[data-gg-booking-loading="true"] {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

.gg-booking-schedule-results[data-gg-booking-loading="true"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    cursor: wait;
}

/* ============================================================================
   Membership-restricted class gate (BookingFormWidget)
   ============================================================================ */

.gg-booking-membership-gate {
    border: 2px solid var(--gg-border);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    margin: 1rem 0;
    text-align: center;
    background-color: var(--gg-background);
    color: var(--gg-text);
    font-family: var(--gg-font-base, inherit);
}

.gg-booking-membership-gate--login {
    border-color: var(--gg-border);
    background-color: var(--gg-background);
}

.gg-booking-membership-gate--members {
    border-color: var(--gg-accent);
    background-color: color-mix(in srgb, var(--gg-accent) 8%, var(--gg-background));
}

.gg-booking-membership-gate__icon {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 0.75rem;
    display: block;
}

.gg-booking-membership-gate__title {
    color: var(--gg-text);
    margin: 0 0 0.5rem;
    font-size: 1.4rem;
    font-weight: 600;
    font-family: var(--gg-font-heading, inherit);
}

.gg-booking-membership-gate__message {
    color: var(--gg-text-light);
    margin: 0 auto 1.25rem;
    max-width: 40rem;
    font-size: 1rem;
    line-height: 1.5;
}

.gg-booking-membership-gate__message strong {
    color: var(--gg-text);
}

.gg-booking-membership-gate__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.gg-booking-membership-gate__actions .gg-booking-btn {
    display: inline-block;
    padding: 0.65rem 1.35rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    line-height: 1.2;
    border: 2px solid var(--gg-primary);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.gg-booking-membership-gate__actions .gg-booking-btn--primary {
    background-color: var(--gg-primary);
    color: var(--gg-color-surface);
}

.gg-booking-membership-gate__actions .gg-booking-btn--primary:hover,
.gg-booking-membership-gate__actions .gg-booking-btn--primary:focus {
    background-color: var(--gg-primary-dark);
    border-color: var(--gg-primary-dark);
    color: var(--gg-color-surface);
}

.gg-booking-membership-gate__actions .gg-booking-btn--secondary {
    background-color: transparent;
    color: var(--gg-primary);
}

.gg-booking-membership-gate__actions .gg-booking-btn--secondary:hover,
.gg-booking-membership-gate__actions .gg-booking-btn--secondary:focus {
    background-color: var(--gg-primary);
    color: var(--gg-color-surface);
}

/* Theme link-color defense. The gate CTAs are <a> elements, so a theme's
   global link color (`a { color: … }`) overrides our button text — the fill
   is unaffected because themes don't set link backgrounds, which is why the
   primary button showed a forest fill with dark text. Qualifying with the
   anchor element + link states raises specificity above typical theme link
   rules so our text color wins without !important. The <button>-based form
   submit (waitlist) never had this problem — themes don't style buttons. */
.gg-booking-membership-gate__actions a.gg-booking-btn--primary,
.gg-booking-membership-gate__actions a.gg-booking-btn--primary:link,
.gg-booking-membership-gate__actions a.gg-booking-btn--primary:visited,
.gg-booking-membership-gate__actions a.gg-booking-btn--primary:hover,
.gg-booking-membership-gate__actions a.gg-booking-btn--primary:focus {
    color: var(--gg-color-surface);
}

.gg-booking-membership-gate__actions a.gg-booking-btn--secondary,
.gg-booking-membership-gate__actions a.gg-booking-btn--secondary:link,
.gg-booking-membership-gate__actions a.gg-booking-btn--secondary:visited {
    color: var(--gg-primary);
}

/* Secondary on hover fills with --gg-primary, so its text flips to the
   surface color — same anchor + state qualification so the theme link
   color can't keep it dark on the fill. */
.gg-booking-membership-gate__actions a.gg-booking-btn--secondary:hover,
.gg-booking-membership-gate__actions a.gg-booking-btn--secondary:focus {
    color: var(--gg-color-surface);
}

@media (max-width: 540px) {
    .gg-booking-membership-gate {
        padding: 1.5rem 1rem;
    }

    .gg-booking-membership-gate__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .gg-booking-membership-gate__actions .gg-booking-btn {
        width: 100%;
        text-align: center;
    }
}

/* ----------------------------------------------------------------------- */
/* Book Now Button widget                                                  */
/* ----------------------------------------------------------------------- */

.gg-booking-book-now-wrapper {
	display: block;
}

.gg-booking-book-now-button {
	display: inline-block;
	padding: 14px 28px;
	border: 1px solid transparent;
	border-radius: 4px;
	background-color: var(--gg-primary);
	color: var(--gg-color-surface);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.gg-booking-book-now-button:hover,
.gg-booking-book-now-button:focus {
	background-color: var(--gg-primary-dark);
	color: var(--gg-color-surface);
	text-decoration: none;
}

.gg-booking-book-now-button:focus {
	outline: 2px solid var(--gg-primary);
	outline-offset: 2px;
}

.gg-booking-book-now-button--disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.gg-booking-book-now-button--disabled:hover,
.gg-booking-book-now-button--disabled:focus {
	background-color: var(--gg-primary);
	transform: none;
	box-shadow: none;
}

.gg-booking-book-now__class-name {
	display: block;
	font-weight: 600;
	color: var(--gg-text);
}

.gg-booking-book-now-button .gg-booking-book-now__class-name--inside {
	display: block;
	margin-bottom: 4px;
	font-size: 0.85em;
	font-weight: 400;
	opacity: 0.85;
	color: inherit;
}

.gg-booking-book-now-button .gg-booking-book-now__label {
	display: block;
}

@media (max-width: 768px) {
	.gg-booking-book-now-button {
		min-height: 44px;
		padding: 12px 24px;
	}
}

/* -----------------------------------------------------------------------
   Promo Code UI
   ----------------------------------------------------------------------- */
.gg-booking-promo-row { margin: 12px 0; }
.gg-booking-promo-input-wrap { display: flex; gap: 8px; align-items: center; }
.gg-booking-promo-input { flex: 1; }
.gg-booking-promo-apply-btn { white-space: nowrap; }
.gg-booking-promo-feedback { margin-top: 6px; font-size: 13px; min-height: 18px; }
.gg-booking-promo-summary {
	margin-top: 8px;
	padding: 8px 12px;
	background: var(--gg-color-success-soft);
	border: 1px solid var(--gg-color-success-soft);
	border-radius: 4px;
	font-size: 13px;
	color: var(--gg-color-success);
}
.gg-booking-promo-summary .gg-booking-promo-original {
	text-decoration: line-through;
	color: var(--gg-color-text-muted);
	margin-right: 6px;
}
.gg-booking-promo-summary .gg-booking-promo-final { font-weight: 600; }

.gg-booking-redirect-hint {
	display: block;
	margin-top: 6px;
	font-size: 0.875em;
	color: var(--gg-text-light);
	font-style: italic;
}

/* -----------------------------------------------------------------------
   Waiver signing flow
   ----------------------------------------------------------------------- */
#gg-booking-waiver-flow {
	padding: 0;
}

.gg-booking-waiver-title {
	font-size: 1.1em;
	font-weight: 600;
	margin: 0 0 12px;
	color: var(--gg-text, var(--gg-color-text));
}

.gg-booking-waiver-content {
	max-height: 280px;
	overflow-y: auto;
	border: 1px solid var(--gg-border, var(--gg-color-border));
	border-radius: 6px;
	padding: 16px;
	margin-bottom: 16px;
	font-size: 0.875em;
	line-height: 1.65;
	background: var(--gg-background, var(--gg-color-surface));
}

.gg-booking-waiver-agree-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 16px;
	font-size: 0.875em;
	cursor: pointer;
}

.gg-booking-waiver-agree-checkbox {
	margin-top: 2px;
	flex-shrink: 0;
}

.gg-booking-waiver-sign-btn {
	width: 100%;
}

.gg-booking-waiver-sign-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}


/* -----------------------------------------------------------------------
   Enrollment panel (BookingFormWidget enrollment-mode short-circuit)
   ----------------------------------------------------------------------- */
.gg-booking-enrollment-panel {
	background: var( --gg-card-bg, var(--gg-color-surface) );
	border: 1px solid var( --gg-border, var(--gg-color-border) );
	border-radius: 8px;
	padding: 24px;
	max-width: 520px;
}

.gg-booking-enrollment-panel__header {
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var( --gg-border, var(--gg-color-border) );
}

.gg-booking-enrollment-panel__title {
	margin: 0 0 4px;
	font-size: 1.4em;
	font-weight: 600;
}

.gg-booking-enrollment-panel__subtitle {
	margin: 0;
	color: var( --gg-text-muted, var(--gg-color-text-muted) );
	font-size: 0.95em;
}

.gg-booking-enrollment-panel__price {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 16px;
	padding: 12px 16px;
	background: var( --gg-bg-subtle, var(--gg-color-background) );
	border-radius: 6px;
}

.gg-booking-enrollment-panel__price-label {
	color: var( --gg-text-muted, var(--gg-color-text-muted) );
}

.gg-booking-enrollment-panel__price-value {
	font-size: 1.4em;
	font-weight: 600;
}

.gg-booking-enrollment-panel__note {
	margin: 0 0 16px;
	padding: 10px 12px;
	background: var( --gg-bg-info, var(--gg-color-info-soft) );
	border-left: 3px solid var( --gg-info, var(--gg-color-info) );
	font-size: 0.9em;
}

.gg-booking-enrollment-panel__signed-in {
	margin: 0 0 16px;
	font-size: 0.9em;
	color: var( --gg-text-muted, var(--gg-color-text-muted) );
}

.gg-booking-enrollment-form .gg-booking-form-row {
	margin-bottom: 14px;
}

.gg-booking-enrollment-form .gg-booking-form-row label {
	display: block;
	margin-bottom: 4px;
	font-weight: 500;
}

.gg-booking-enrollment-form .gg-booking-form-row input[type="text"],
.gg-booking-enrollment-form .gg-booking-form-row input[type="email"] {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var( --gg-border, var(--gg-color-border) );
	border-radius: 4px;
	font-size: 1em;
}

.gg-booking-enrollment-form .gg-booking-card-element {
	padding: 10px 12px;
	border: 1px solid var( --gg-border, var(--gg-color-border) );
	border-radius: 4px;
	background: var(--gg-color-surface);
}

.gg-booking-enrollment-form .gg-booking-card-errors {
	margin-top: 6px;
	min-height: 1.2em;
	color: var( --gg-error, var(--gg-color-error) );
	font-size: 0.9em;
}

.gg-booking-enrollment-form__actions {
	margin-top: 18px;
}

.gg-booking-enrollment-form__actions .gg-booking-button {
	width: 100%;
	padding: 12px 16px;
	font-size: 1em;
	font-weight: 600;
	border: none;
	border-radius: 6px;
	background: var( --gg-primary, var(--gg-color-primary) );
	color: var(--gg-color-surface);
	cursor: pointer;
}

.gg-booking-enrollment-form__actions .gg-booking-button:hover:not(:disabled) {
	background: var( --gg-primary-dark, var(--gg-color-primary-strong) );
}

.gg-booking-enrollment-form__actions .gg-booking-button:disabled,
.gg-booking-enrollment-form__actions .gg-booking-button.is-busy {
	opacity: 0.6;
	cursor: wait;
}

.gg-booking-enrollment-form__feedback {
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: 4px;
	min-height: 0;
}

.gg-booking-enrollment-form__feedback:empty {
	padding: 0;
}

.gg-booking-enrollment-form__feedback--error {
	background: var(--gg-color-error-soft);
	color: var( --gg-error, var(--gg-color-error) );
	border: 1px solid var( --gg-error, var(--gg-color-error) );
}

.gg-booking-enrollment-form__feedback--success {
	background: var(--gg-color-success-soft);
	color: var( --gg-success, var(--gg-color-primary) );
	border: 1px solid var( --gg-success, var(--gg-color-primary) );
}

/* -----------------------------------------------------------------------
   My Enrollments section (ClientDashboardWidget)
   ----------------------------------------------------------------------- */
.gg-booking-dashboard__enrollment-card {
	position: relative;
}

.gg-booking-dashboard__enrollment-actions {
	margin-top: 8px;
}

.gg-booking-cancel-my-enrollment-btn {
	background: none;
	border: none;
	padding: 0;
	color: var( --gg-error, var(--gg-color-error) );
	cursor: pointer;
	font-size: 0.9em;
	text-decoration: underline;
}

.gg-booking-cancel-my-enrollment-btn:hover:not(:disabled) {
	color: var(--gg-color-error);
}

.gg-booking-cancel-my-enrollment-btn:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* ==========================================================================
   Login Widget — form, button, logged-in panel, modal
   All --gg-login-* vars are exposed through LoginWidget Style controls per
   rule 117's canonical-pattern (Element Alignment top, per-element sections).
   ========================================================================== */

.gg-booking-login {
	display: block;
	width: 100%;
}

/* --- Logged-out form ---------------------------------------------------- */

.gg-booking-login-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	background-color: var( --gg-login-form-bg, transparent );
	padding: var( --gg-login-form-padding, 0 );
	border-radius: var( --gg-login-form-radius, 0 );
}

.gg-booking-login-form__heading {
	margin: 0;
	font-family: var( --gg-font-heading );
	font-size: 1.4rem;
	font-weight: 600;
	color: var( --gg-text );
	line-height: 1.2;
}

.gg-booking-login-form__intro {
	margin: 0;
	color: var( --gg-text-light );
	font-size: 0.95rem;
	line-height: 1.5;
}

.gg-booking-login-form__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.gg-booking-login-form__label {
	font-size: 13px;
	font-weight: 600;
	color: var( --gg-text );
}

.gg-booking-login-form__input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var( --gg-border );
	border-radius: 4px;
	background-color: var( --gg-background );
	font-size: 14px;
	color: var( --gg-text );
	font-family: inherit;
}

.gg-booking-login-form__input:focus {
	outline: none;
	border-color: var( --gg-primary );
	box-shadow: 0 0 0 3px rgba( 92, 122, 92, 0.15 );
}

.gg-booking-login-form__row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var( --gg-text-light );
}

.gg-booking-login-form__checkbox {
	width: 16px;
	height: 16px;
	accent-color: var( --gg-primary );
	cursor: pointer;
}

.gg-booking-login-form__submit {
	width: 100%;
	margin-top: 4px;
}

.gg-booking-login-form__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
}

.gg-booking-login-form__link {
	color: var( --gg-primary );
	text-decoration: none;
}

.gg-booking-login-form__link:hover,
.gg-booking-login-form__link:focus {
	text-decoration: underline;
}

/* Chained login modal (GGLogin, Modal Arc PR-B) — the form is built in JS and
   mounted in the generic GGModal body, so it inherits the base form styles
   above. Just align the remember-me row tidily. */
.gg-booking-login-form--modal .gg-booking-login-form__remember {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var( --gg-text, var(--gg-color-text) );
}

.gg-booking-login-form__error {
	display: none;
	padding: 10px 12px;
	background-color: var( --gg-bg-info, var(--gg-color-error-soft) );
	border: 1px solid var( --gg-error, var(--gg-color-error) );
	border-radius: 4px;
	color: var( --gg-error, var(--gg-color-error) );
	font-size: 13px;
	line-height: 1.4;
}

.gg-booking-login-form__error.is-visible {
	display: block;
}

.gg-booking-login-form__success {
	display: none;
	padding: 10px 12px;
	background-color: var(--gg-color-success-soft);
	border: 1px solid var( --gg-success, var(--gg-color-primary) );
	border-radius: 4px;
	color: var( --gg-success, var(--gg-color-primary) );
	font-size: 14px;
	line-height: 1.5;
}

.gg-booking-login-form__success.is-visible {
	display: block;
}

.gg-booking-login-form__submit.is-loading {
	opacity: 0.7;
	cursor: wait;
}

/* --- Button mode (Log In trigger) --------------------------------------- */

.gg-booking-login-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.gg-booking-login-button__avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
}

/* --- Logged-in panel ---------------------------------------------------- */

.gg-booking-login-panel {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background-color: var( --gg-login-panel-bg, var( --gg-bg-subtle, var(--gg-color-background) ) );
	padding: var( --gg-login-panel-padding, 16px );
	border-radius: var( --gg-login-panel-radius, 6px );
	border: 1px solid var( --gg-border );
}

.gg-booking-login-panel__header {
	display: flex;
	align-items: center;
	gap: 12px;
}

.gg-booking-login-panel__avatar {
	width: var( --gg-login-avatar-size, 48px );
	height: var( --gg-login-avatar-size, 48px );
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.gg-booking-login-panel__greeting {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var( --gg-text );
}

.gg-booking-login-panel__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gg-booking-login-panel__cta {
	display: inline-block;
}

.gg-booking-login-panel__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.gg-booking-login-panel__link {
	display: block;
	padding: 4px 0;
	color: var( --gg-primary );
	font-size: 0.9rem;
	text-decoration: none;
}

.gg-booking-login-panel__link:hover,
.gg-booking-login-panel__link:focus {
	text-decoration: underline;
}

.gg-booking-login-panel__logout {
	color: var( --gg-text-light );
	font-size: 0.85rem;
	text-decoration: none;
	align-self: flex-start;
}

.gg-booking-login-panel__logout:hover,
.gg-booking-login-panel__logout:focus {
	color: var( --gg-error );
	text-decoration: underline;
}

/* --- Modal (button-mode form host) -------------------------------------- */

.gg-booking-login-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.45 );
	z-index: 99998;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.gg-booking-login-modal-backdrop.is-open {
	opacity: 1;
}

.gg-booking-login-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -45% );
	width: 92%;
	max-width: var( --gg-login-modal-max-width, 420px );
	background-color: var( --gg-login-modal-bg, var( --gg-background, var(--gg-color-surface) ) );
	border-radius: var( --gg-login-modal-radius, 8px );
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.18 );
	z-index: 99999;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
	max-height: 90vh;
	overflow-y: auto;
}

.gg-booking-login-modal.is-open {
	opacity: 1;
	transform: translate( -50%, -50% );
}

.gg-booking-login-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px 0;
}

.gg-booking-login-modal__title {
	margin: 0;
	font-family: var( --gg-font-heading );
	font-size: 1.2rem;
	font-weight: 600;
	color: var( --gg-text );
}

.gg-booking-login-modal__close {
	background: var( --gg-login-close-bg, none );
	border: none;
	cursor: pointer;
	font-size: var( --gg-login-close-size, 1.4rem );
	line-height: 1;
	color: var( --gg-login-close-color, var(--gg-color-text-muted) );
	padding: 4px 8px;
	flex-shrink: 0;
	border-radius: 4px;
	transition: color 0.15s, background-color 0.15s;
}

.gg-booking-login-modal__close:hover,
.gg-booking-login-modal__close:focus {
	color: var( --gg-login-close-hover-color, var(--gg-color-text-muted) );
	background: var( --gg-login-close-hover-bg, none );
	outline: none;
}

.gg-booking-login-modal__body {
	padding: 16px 20px 20px;
}

/* Within the modal, the .gg-booking-login-form sits in a constrained-width
   container — remove its outer padding/background since the modal already
   provides chrome. */
.gg-booking-login-modal .gg-booking-login-form {
	background: none;
	padding: 0;
}

/* --- Editor placeholder preview switcher -------------------------------- */

.gg-booking-login-editor-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px 12px;
	background-color: var(--gg-color-background);
	border-bottom: 1px solid var( --gg-border );
	margin: 0 0 16px;
	font-size: 12px;
}

.gg-booking-login-editor-tabs__label {
	font-weight: 600;
	color: var( --gg-text-light );
	margin-right: 4px;
}

.gg-booking-login-editor-tabs__tab {
	padding: 4px 10px;
	background-color: var(--gg-color-surface);
	border: 1px solid var( --gg-border );
	border-radius: 4px;
	color: var( --gg-text );
	cursor: default;
}

.gg-booking-login-editor-tabs__tab--active {
	background-color: var( --gg-primary, var(--gg-color-primary) );
	border-color: var( --gg-primary, var(--gg-color-primary) );
	color: var(--gg-color-surface);
}

/* =============================================================================
 * Appointment Booking Widget (Appointments arc Stage 3.F).
 * Hooks into the shared --gg-* vars (rule 46/115). Scoped to .gg-appointment-*
 * so it can't bleed into other widgets.
 * ========================================================================== */

.gg-booking-appointment-widget {
	max-width: 720px;
	margin: 0 auto;
}

.gg-booking-appointment-title {
	font-family: var( --gg-font-heading, inherit );
	color: var( --gg-text, var(--gg-color-text) );
	margin: 0 0 8px;
	font-size: 1.6em;
	line-height: 1.25;
}

.gg-booking-appointment-description {
	color: var( --gg-text-light, var(--gg-color-text-muted) );
	margin: 0 0 16px;
	line-height: 1.55;
}

.gg-booking-appointment-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 18px;
	margin: 0 0 20px;
	font-size: 0.95em;
}

.gg-booking-appointment-price {
	color: var( --gg-text, var(--gg-color-text) );
	font-weight: 600;
}

.gg-booking-appointment-duration {
	color: var( --gg-text-light, var(--gg-color-text-muted) );
}

.gg-booking-appointment-date-strip {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding: 4px 0 8px;
	margin: 0 0 16px;
	border-bottom: 1px solid var( --gg-border, var(--gg-color-border) );
}

.gg-booking-appointment-day {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 70px;
	padding: 8px 10px;
	background: transparent;
	border: 1px solid var( --gg-border, var(--gg-color-border) );
	border-radius: 8px;
	color: var( --gg-text, var(--gg-color-text) );
	font-family: inherit;
	font-size: 0.95em;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.gg-booking-appointment-day:hover {
	background-color: var( --gg-surface-hover, var(--gg-color-background) );
	border-color: var( --gg-primary, var(--gg-color-primary) );
}

.gg-booking-appointment-day.is-active {
	background-color: var( --gg-primary, var(--gg-color-primary) );
	border-color: var( --gg-primary, var(--gg-color-primary) );
	color: var(--gg-color-surface);
}

.gg-booking-appointment-day-name {
	font-size: 0.75em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.85;
}

.gg-booking-appointment-day-date {
	font-weight: 600;
	margin-top: 2px;
}

.gg-booking-appointment-slot-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 140px, 1fr ) );
	gap: 8px;
	margin: 0 0 20px;
	min-height: 60px;
}

.gg-booking-appointment-slot {
	padding: 10px 12px;
	background: var( --gg-surface, var(--gg-color-surface) );
	border: 1px solid var( --gg-border, var(--gg-color-border) );
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.95em;
	color: var( --gg-text, var(--gg-color-text) );
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.gg-booking-appointment-slot:hover:not( :disabled ) {
	background-color: var( --gg-surface-hover, var(--gg-color-background) );
	border-color: var( --gg-primary, var(--gg-color-primary) );
}

.gg-booking-appointment-slot.is-selected {
	background-color: var( --gg-primary, var(--gg-color-primary) );
	border-color: var( --gg-primary, var(--gg-color-primary) );
	color: var(--gg-color-surface);
}

.gg-booking-appointment-slot-seats {
	font-size: 0.85em;
	opacity: 0.8;
	margin-left: 4px;
}

.gg-booking-appointment-slot-status {
	grid-column: 1 / -1;
	margin: 0;
	padding: 16px;
	text-align: center;
	color: var( --gg-text-light, var(--gg-color-text-muted) );
	font-style: italic;
}

.gg-booking-appointment-slot-status.is-error {
	color: var( --gg-error, var(--gg-color-error) );
	font-style: normal;
}

.gg-booking-appointment-book-panel {
	padding: 16px;
	background: var( --gg-surface-alt, var(--gg-color-background) );
	border: 1px solid var( --gg-border, var(--gg-color-border) );
	border-radius: 8px;
}

.gg-booking-appointment-selected-slot {
	font-weight: 600;
	color: var( --gg-text, var(--gg-color-text) );
	margin: 0 0 12px;
}

.gg-booking-appointment-payment {
	margin: 0 0 12px;
}

.gg-booking-appointment-payment label {
	display: block;
	margin: 0 0 4px;
	font-weight: 600;
	color: var( --gg-text, var(--gg-color-text) );
}

.gg-booking-appointment-payment .gg-booking-select {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var( --gg-border, var(--gg-color-border) );
	border-radius: 6px;
	background: var(--gg-color-surface);
	font-family: inherit;
	font-size: 0.95em;
}

.gg-booking-appointment-deposit-note {
	margin: 6px 0 0;
	padding: 8px 10px;
	background: var(--gg-color-warning-soft);
	border-left: 3px solid var(--gg-color-warning);
	border-radius: 0 4px 4px 0;
	font-size: 0.85em;
	color: var(--gg-color-warning);
}

.gg-booking-appointment-card-wrapper {
	margin: 0 0 12px;
}

.gg-booking-appointment-card-wrapper #gg-booking-appt-card-element {
	padding: 10px 12px;
	border: 1px solid var( --gg-border, var(--gg-color-border) );
	border-radius: 6px;
	background: var(--gg-color-surface);
}

.gg-booking-appointment-card-errors {
	margin-top: 6px;
	color: var( --gg-error, var(--gg-color-error) );
	font-size: 0.85em;
}

.gg-booking-appointment-notes-label {
	display: block;
	margin: 0 0 4px;
	font-weight: 600;
	color: var( --gg-text, var(--gg-color-text) );
}

.gg-booking-appointment-notes {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var( --gg-border, var(--gg-color-border) );
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.95em;
	margin: 0 0 12px;
	resize: vertical;
}

.gg-booking-appointment-book-btn {
	width: 100%;
	padding: 12px 16px;
	background: var( --gg-primary, var(--gg-color-primary) );
	color: var(--gg-color-surface);
	border: 0;
	border-radius: 6px;
	font-family: inherit;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.gg-booking-appointment-book-btn:hover:not( :disabled ) {
	background: var( --gg-primary-hover, var(--gg-color-primary) );
}

.gg-booking-appointment-book-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.gg-booking-appointment-feedback {
	margin-top: 8px;
	padding: 0;
	font-size: 0.9em;
	color: var( --gg-text, var(--gg-color-text) );
}

.gg-booking-appointment-feedback.is-error {
	color: var( --gg-error, var(--gg-color-error) );
}

.gg-booking-appointment-policy {
	margin: 12px 0 0;
	padding: 10px 12px;
	background: var(--gg-color-background);
	border-radius: 6px;
	font-size: 0.9em;
	color: var( --gg-text-light, var(--gg-color-text-muted) );
	line-height: 1.5;
}

.gg-booking-appointment-success {
	padding: 24px;
	background: var(--gg-color-success-soft);
	border: 1px solid var(--gg-color-success-soft);
	border-radius: 8px;
	text-align: center;
}

.gg-booking-appointment-success h3 {
	margin: 0 0 8px;
	color: var(--gg-color-success);
	font-size: 1.2em;
}

.gg-booking-appointment-success p {
	margin: 4px 0;
	color: var(--gg-color-text);
}

.gg-booking-appointment-success-id {
	font-size: 0.85em;
	color: var( --gg-text-light, var(--gg-color-text-muted) );
}

.gg-booking-appointment-gate {
	padding: 20px;
	background: var(--gg-color-background);
	border: 1px solid var( --gg-border, var(--gg-color-border) );
	border-radius: 8px;
	text-align: center;
}

.gg-booking-appointment-gate p {
	margin: 0 0 12px;
}

.gg-booking-appointment-gate ul {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.gg-booking-appointment-gate ul li {
	padding: 4px 0;
	color: var( --gg-text, var(--gg-color-text) );
}

.gg-booking-appointment-login-btn {
	display: inline-block;
	padding: 10px 18px;
	background: var( --gg-primary, var(--gg-color-primary) );
	color: var(--gg-color-surface);
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
}

.gg-booking-appointment-login-btn:hover {
	background: var( --gg-primary-hover, var(--gg-color-primary) );
	color: var(--gg-color-surface);
}

@media ( max-width: 600px ) {
	.gg-booking-appointment-slot-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
	.gg-booking-appointment-day {
		min-width: 60px;
	}
}

/* Appointment widget inside GGModal — the date strip scrolls horizontally
   in the narrower modal viewport rather than wrapping awkwardly. */
.gg-booking-appointment-widget--modal .gg-booking-appointment-date-strip {
	overflow-x: auto;
	flex-wrap: nowrap;
}

/* Modal-host editor preview (rule 9) — explains the headless role. */
.gg-booking-appointment-host-preview {
	padding: 20px;
	border: 1px dashed var( --gg-border, var(--gg-color-border) );
	border-radius: 8px;
	background: var(--gg-color-background);
}

/* =====================================================================
   Services Showcase widget (Modal Arc PR-A2).
   Card grid that opens the appointment modal via the event bus. Hooks the
   shared --gg-* tokens (rule 46/115); all visual surfaces are also
   Elementor-overridable via ServicesShowcaseWidget style controls.
   ===================================================================== */

.gg-services-showcase {
	display: grid;
	gap: 24px;
}

.gg-services-showcase--grid {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

.gg-services-showcase--list {
	grid-template-columns: 1fr;
}

.gg-services-showcase--list .gg-service-card {
	flex-direction: row;
}

.gg-services-showcase--list .gg-service-card__media {
	flex: 0 0 38%;
}

.gg-services-showcase--featured,
.gg-services-showcase--single {
	grid-template-columns: 1fr;
}

.gg-service-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--gg-color-surface);
	border: 1px solid var( --gg-border, var(--gg-color-border) );
	border-radius: 10px;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.gg-service-card__media {
	width: 100%;
}

.gg-service-card__img {
	display: block;
	width: 100%;
	height: 180px;
	max-width: none;
	object-fit: cover;
}

.gg-service-card__media--placeholder {
	height: 180px;
	background: linear-gradient(
		135deg,
		var( --gg-primary, var(--gg-color-primary) ) 0%,
		var( --gg-accent, var(--gg-color-primary) ) 100%
	);
	opacity: 0.18;
}

.gg-service-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 8px;
	padding: 18px;
}

.gg-service-card__name {
	margin: 0;
	font-family: var( --gg-font-heading, inherit );
	font-size: 1.15em;
	color: var( --gg-text, var(--gg-color-text) );
}

.gg-service-card__meta {
	font-size: 0.9em;
	font-weight: 600;
	color: var( --gg-text-light, var(--gg-color-text-muted) );
}

.gg-service-card__desc {
	margin: 0;
	font-size: 0.92em;
	line-height: 1.5;
	color: var( --gg-text-light, var(--gg-color-text-muted) );
}

.gg-service-card__cta {
	display: inline-block;
	margin-top: auto;
	padding: 10px 18px;
	background: var( --gg-primary, var(--gg-color-primary) );
	color: var(--gg-color-surface);
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.gg-service-card__cta:hover {
	background: var( --gg-primary-hover, var(--gg-color-primary) );
	color: var(--gg-color-surface);
}

.gg-service-card__cta--single {
	margin: 0 auto;
	padding: 14px 28px;
	font-size: 1.05em;
}

.gg-services-showcase__empty {
	padding: 28px;
	text-align: center;
	color: var( --gg-text-light, var(--gg-color-text-muted) );
	border: 1px dashed var( --gg-border, var(--gg-color-border) );
	border-radius: 8px;
}

@media ( max-width: 768px ) {
	.gg-services-showcase--grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
	.gg-services-showcase--list .gg-service-card {
		flex-direction: column;
	}
}

@media ( max-width: 480px ) {
	.gg-services-showcase--grid {
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
   Client Dashboard — Notifications panel grouping (v0.7.112)

   Indeterminate state + power-user disclosure for the group-rollup UX
   in `ClientDashboardWidget::render_notifications_panel()`. The bulk
   of the layout still rides on inline styles in PHP (matching the
   surrounding panels); only :indeterminate styling and the <details>
   marker rotation need real CSS hooks.
   ===================================================================== */

.gg-booking-notif-group-toggle:indeterminate {
	background-image: linear-gradient(
		to bottom,
		transparent 35%,
		var( --gg-primary, #4a7c4a ) 35%,
		var( --gg-primary, #4a7c4a ) 65%,
		transparent 65%
	);
	background-color: var( --gg-primary, #4a7c4a );
}

/* WebKit's UA stylesheet draws the indeterminate dash by default, but the
   color follows accent-color when set. Pin to the GG primary so the dash
   reads as on-brand in both states. */
.gg-booking-notif-groups input[type="checkbox"],
.gg-booking-notif-list input[type="checkbox"] {
	accent-color: var( --gg-primary, #4a7c4a );
}

.gg-booking-notif-details > summary {
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	user-select: none;
}

.gg-booking-notif-details > summary::-webkit-details-marker {
	display: none;
}

.gg-booking-notif-details > summary::before {
	content: "▸";
	display: inline-block;
	transition: transform 150ms ease;
	font-size: 11px;
}

.gg-booking-notif-details[open] > summary::before {
	transform: rotate( 90deg );
}

/* =====================================================================
   PR 4 — Container styling pass (v0.7.95)

   Foundation conventions any widget or starter page can opt into. Tokens
   defined in the :root block above. The per-widget walkthrough rolls
   each widget onto these incrementally — landing the foundations here
   means the per-widget passes are surgical (swap a value for a token,
   not invent a new convention).

   Layered top to bottom:
     1. Utility classes (.gg-page-section, .gg-prose, .gg-card-lift)
     2. Universal hover-lift sweep over the 5 frontend card classes
     3. Focus-visible accessibility outlines on interactive elements
     4. Touch-target floor on .gg-booking-btn
   ===================================================================== */

/* --- 1. Utilities -------------------------------------------------- */

/* Page-section wrapper for starter pages and any standalone widget
   container that needs to breathe with the viewport. Use as
   `<section class="gg-page-section">…</section>` around content blocks.
   The clamp() values scale smoothly from mobile (3rem block) to desktop
   (6rem block) with no breakpoint jumps. Inline padding lets content
   touch the edge on narrow screens and pull comfortably away on wide. */
.gg-page-section {
	padding-block:  var(--gg-section-padding-block);
	padding-inline: var(--gg-section-padding-inline);
	max-width:      72rem;       /* ~1152px content cap on wide displays */
	margin-inline:  auto;
	box-sizing:     border-box;
}

/* Variant: full-width section that still breathes vertically but lets
   inner content fill horizontally (for hero rows, dark bands, etc.). */
.gg-page-section--full {
	max-width: none;
	margin-inline: 0;
}

/* Prose container — caps text width at the comfortable reading measure.
   Drop inside .gg-page-section or any container for long-form copy. */
.gg-prose {
	max-width: var(--gg-text-measure);
	margin-inline: auto;
	font-size:   var(--gg-fluid-body);
	line-height: var(--gg-type-leading-normal, 1.55);
}

.gg-prose h1 { font-size: var(--gg-fluid-h1); line-height: var(--gg-type-leading-tight, 1.2);  margin-block-end: 0.4em; }
.gg-prose h2 { font-size: var(--gg-fluid-h2); line-height: var(--gg-type-leading-tight, 1.2);  margin-block-end: 0.45em; }
.gg-prose h3 { font-size: var(--gg-fluid-h3); line-height: var(--gg-type-leading-snug, 1.4);   margin-block-end: 0.5em; }
.gg-prose h4 { font-size: var(--gg-fluid-h4); line-height: var(--gg-type-leading-snug, 1.4);   margin-block-end: 0.6em; }
.gg-prose p  { margin-block: 0 1em; }
.gg-prose p:last-child { margin-block-end: 0; }

/* --- 2. Card hover-lift sweep ------------------------------------- */

/* Subtle elevation on hover for the 5 frontend content cards. Tokens
   keep direction (`--gg-hover-lift`) and timing (`--gg-duration-fast`,
   `--gg-ease-out`) consistent — and reduced-motion users get a 0px
   lift with 0ms duration automatically via the @media block above.
   Existing `:hover` rules on individual cards (e.g.
   .gg-booking-package-card at line 1531) are preserved; the
   transform layer composes additively. */
.gg-booking-schedule-card,
.gg-booking-class-card,
.gg-booking-sessions-card,
.gg-booking-package-card,
.gg-booking-membership-card {
	transition:
		transform   var(--gg-duration-fast) var(--gg-ease-out),
		box-shadow  var(--gg-duration-fast) var(--gg-ease-out),
		border-color var(--gg-duration-fast) var(--gg-ease-out);
	will-change: transform;
}

.gg-booking-schedule-card:hover,
.gg-booking-class-card:hover,
.gg-booking-sessions-card:hover,
.gg-booking-package-card:hover,
.gg-booking-membership-card:hover {
	transform:  translateY( var(--gg-hover-lift) );
	box-shadow: var(--gg-shadow-md);
}

/* Don't lift cards that are visually disabled or marked complete. */
.gg-booking-class-card--empty:hover,
.gg-booking-package-card--owned:hover {
	transform: none;
}

/* --- 3. Focus-visible accessibility outlines ---------------------- */

/* Every interactive element inside a GG widget wrapper gets a
   consistent focus ring on keyboard focus. Mouse-click focus stays
   suppressed (`:focus-visible` only), so the page doesn't look like
   it's screaming at studios who navigate with a cursor. Outline
   color routes through the token cascade — studios who customized
   their Studio Style primary color get a matching focus ring. */
.gg-booking-widget-inner :is(
	a,
	button,
	input,
	select,
	textarea,
	[tabindex]:not([tabindex="-1"])
):focus-visible {
	outline:        2px solid var(--gg-color-focus, var(--gg-primary));
	outline-offset: 2px;
	border-radius:  var(--gg-radius-sm);
	box-shadow:     var(--gg-shadow-focus, 0 0 0 3px var(--gg-color-focus-ring));
}

/* --- 4. Touch-target floor ---------------------------------------- */

/* WCAG 2.5.5 — primary interactive elements should be at least 44×44.
   Applied to the canonical button class. Padding stays unchanged
   (existing buttons read clean); min-height kicks in only when
   intrinsic content height is below the floor. */
.gg-booking-btn {
	min-height: var(--gg-touch-target);
}

/* --- 5. Starter page card --------------------------------------- */

/* Styled card wrapper applied to the 7 one-click `StarterPageImporter`
   pages (Schedule, Book a Class, My Account, Instructor Dashboard,
   Packages & Memberships, Login, Password Reset).

   ──────────────────────────────────────────────────────────────────
   The cascade in three layers:

   1. Body class detection — `Frontend::add_starter_page_body_class`
      reads the `_gg_starter_page_key` postmeta the importer stamps
      on each page, and appends `gg-starter-page` plus
      `gg-starter-page--{slug}` to <body>. Every rule below is
      scoped under those classes so non-starter pages stay untouched.
      NOTE: the DOM-structural selectors (`.e-parent > .e-con-inner`
      and `.e-con-inner > .e-con.e-child`) are ALSO anchored under
      `[data-elementor-type="wp-page"]` — the Theme Builder header and
      footer are Elementor containers too, so without that anchor these
      rules painted the header/footer sub-containers with the card's
      bg/border/shadow/padding + `align-items:center` on every starter
      page. The anchor confines them to the page-content tree.

   2. Two parallel target selectors for the card itself:
        a. `.gg-starter-page-card` — set by
           `StarterPageImporter::card_container()` via Elementor's
           container `css_classes` setting.
        b. `.e-con-inner > .e-con.e-child` — DOM-structural fallback
           that matches the inner nested container by position alone,
           in case the class route is stripped by a future Elementor
           renderer change.
      Either selector reaches the same rule body.

   3. Three centering mechanisms, one for each layout layer:
        a. PARENT — `body.gg-starter-page .e-parent > .e-con-inner`
           gets `align-items: center` so the card centres on the
           cross-axis of the outer container's flex column. The
           direct-child `>` is critical — without it the card's own
           inner wrapper would also inherit align-items: center,
           which shrinks the widget inside.
        b. CARD — `.gg-starter-page-card` itself gets `max-width` (per
           tier below) + `margin-inline: auto` as belt-and-suspenders
           in case any future structure breaks the parent path.
        c. WIDGET — `.gg-booking-widget-inner > [class^="gg-booking-"]`
           gets `margin-inline: auto` so the widget's outermost class
           centres inside the card. The direct-child `>` confines
           the rule to the top-level widget class only — nested
           element classes (.gg-booking-dashboard__tab etc.) keep
           the widget's own internal alignment.

   ── Per-page width tiers (via the body class modifier):
        wide    min(80rem, 98%) — Schedule
        medium  min(72rem, 95%) — My Account, Instructor Dashboard, Memberships
        narrow  min(60rem, 92%) — Booking, Login, Password Reset
   Fluid via `min()` so cards scale with viewport — the rem term caps
   on very-wide monitors, the percentage makes cards fill nearly the
   full container on typical 1200-1440px desktops.

   ── Widgets' own max-widths inside the card stand untouched
   (.gg-booking-dashboard: 760px, .gg-booking-instructor-dashboard:
   680px, .gg-booking-booking-form-wrapper: 560px, etc.). The widget
   keeps its content-appropriate width; the card centres it. */

body.gg-starter-page [data-elementor-type="wp-page"] .e-parent > .e-con-inner {
	/* !important breaks the cascade tie with Elementor's
	   `align-items: var(--align-items)` rule which has equal
	   property-level specificity but loads later.
	   The `[data-elementor-type="wp-page"]` anchor confines this to the
	   page-content tree — without it, this matched the Theme Builder
	   header/footer containers too (they're Elementor containers as
	   well), distorting them on every starter page. */
	align-items: center !important;
}

body.gg-starter-page .gg-starter-page-card .gg-booking-widget-inner > [class^="gg-booking-"]:not(.gg-booking-modal):not(.gg-booking-login-modal):not(.gg-booking-purchase-modal),
body.gg-starter-page .e-con-inner > .e-con.e-child .gg-booking-widget-inner > [class^="gg-booking-"]:not(.gg-booking-modal):not(.gg-booking-login-modal):not(.gg-booking-purchase-modal) {
	margin-inline: auto !important;
}

body.gg-starter-page .gg-starter-page-card,
body.gg-starter-page [data-elementor-type="wp-page"] .e-con-inner > .e-con.e-child {
	/* All carded pages (Booking, Login, Password Reset) use the
	   narrow tier — they're forms with a focused, focal feel. Self-
	   contained content widgets (Schedule, My Account, Instructor
	   Dashboard, Memberships) render directly on the page background
	   without a card, so their old wide/medium variants were
	   retired in v0.7.111. */
	--gg-starter-card-max-width: min(60rem, 92%);

	/* Element-level !important breaks the cascade tie with
	   Elementor's `.e-con { width: var(--width); margin-inline:
	   var(--margin-*); }` rules — same specificity, later load
	   order. */
	max-width:        var(--gg-starter-card-max-width) !important;
	width:            100% !important;
	margin-inline:    auto !important;

	/* Translucent white so the cream page background bleeds through
	   subtly. Softer than a hard panel — more "layered glass" feel.
	   The cascade fallback (--gg-color-surface defaults to pure
	   white) preserves the original treatment if a studio
	   overrides the surface token. */
	/* stylelint-disable-next-line declaration-property-value-disallowed-list */
	background-color: rgba(255, 255, 255, 0.6);
	/* Subtle hairline reinforces card edge against the page bg even
	   when the studio has matched their page background to white via
	   Studio Style — shadow alone gets washed out on white-on-white. */
	border:           1px solid var(--gg-color-border);
	border-radius:    var(--gg-radius-lg, 16px);
	/* Stronger shadow now that only the 3 form pages (Booking, Login,
	   Password Reset) keep the card — they're focal points that
	   benefit from a slightly more prominent panel. */
	box-shadow:       var(--gg-shadow-lg, 0 8px 32px rgba(28, 26, 22, 0.12));
	padding:          var(--gg-space-7, 2.5rem);
	box-sizing:       border-box;
}

/* Mobile: tighten card padding so the layout doesn't feel cramped
   on phones. */
@media ( max-width: 600px ) {
	body.gg-starter-page .gg-starter-page-card,
	body.gg-starter-page [data-elementor-type="wp-page"] .e-con-inner > .e-con.e-child {
		padding: var(--gg-space-5, 1.5rem);
	}
}