/**
 * BookWP — shared skin modifiers.
 *
 * Loaded once alongside the base widget CSS. Defines two orthogonal
 * modifier systems that every skin opts into automatically:
 *
 *   - data-size = "compact" | "standard" | "hero"
 *       Layout density / max-width / type-scale variants. Applied via
 *       the `bookwp-size-{slug}` class + `[data-size="..."]` attribute
 *       set by the shortcode renderer. Single source of truth — does
 *       NOT need to be redefined per skin.
 *
 *   - data-theme = "light" | "dark" | "auto"
 *       Auto = honour `prefers-color-scheme: dark`. Dark = forced dark.
 *       Light = forced light. The class `bookwp-theme-{slug}` is set
 *       when forced; `auto` adds no class so the @media query below
 *       takes over. Per-skin dark palettes live in the skin's own CSS
 *       file under `[data-theme="dark"]`.
 */

/* ===========================================================
   Sizes
   =========================================================== */

/* Compact: sidebar/embed widget. Single-column slots. */
.bookwp-widget.bookwp-size-compact,
.bookwp-widget[data-size="compact"] {
	font-size: 0.875rem;
	max-width: 360px;
}

@media (min-width: 640px) {
	.bookwp-widget.bookwp-size-compact,
	.bookwp-widget[data-size="compact"] {
		max-width: 360px; /* override base's 600px */
	}
}

.bookwp-widget.bookwp-size-compact,
.bookwp-widget[data-size="compact"] {
	gap: var(--bookwp-spacing-md);
	padding: var(--bookwp-spacing-md);
}

.bookwp-widget.bookwp-size-compact .bookwp-progress-bar,
.bookwp-widget[data-size="compact"] .bookwp-progress-bar {
	padding: var(--bookwp-spacing-sm) var(--bookwp-spacing-sm);
}
.bookwp-widget.bookwp-size-compact .bookwp-progress-indicator,
.bookwp-widget[data-size="compact"] .bookwp-progress-indicator {
	font-size: 0.75rem;
	height: 1.5rem;
	width: 1.5rem;
}
.bookwp-widget.bookwp-size-compact .bookwp-progress-label,
.bookwp-widget[data-size="compact"] .bookwp-progress-label {
	display: none; /* keep just the dots in compact */
}
.bookwp-widget.bookwp-size-compact .bookwp-step-title,
.bookwp-widget[data-size="compact"] .bookwp-step-title {
	font-size: 1.0625rem;
	margin-bottom: var(--bookwp-spacing-md);
}
.bookwp-widget.bookwp-size-compact .bookwp-calendar-section,
.bookwp-widget[data-size="compact"] .bookwp-calendar-section {
	padding: var(--bookwp-spacing-sm);
}
.bookwp-widget.bookwp-size-compact .bookwp-slots-grid,
.bookwp-widget[data-size="compact"] .bookwp-slots-grid {
	grid-template-columns: repeat(2, 1fr);
}
.bookwp-widget.bookwp-size-compact .bookwp-form-row,
.bookwp-widget[data-size="compact"] .bookwp-form-row {
	grid-template-columns: 1fr;
}
.bookwp-widget.bookwp-size-compact .bookwp-card,
.bookwp-widget[data-size="compact"] .bookwp-card {
	padding: var(--bookwp-spacing-sm) var(--bookwp-spacing-md);
}

/* Standard: current default — no overrides needed, just claim the class
   for selector specificity parity with the other sizes. */
.bookwp-widget.bookwp-size-standard,
.bookwp-widget[data-size="standard"] {
	/* defaults from base public.css apply */
}

/* Hero: full-bleed dedicated booking page. Bigger calendar, bigger slots,
   more breathing room. */
.bookwp-widget.bookwp-size-hero,
.bookwp-widget[data-size="hero"] {
	font-size: 1.0625rem;
	gap: var(--bookwp-spacing-xl);
	padding: var(--bookwp-spacing-xl);
}

@media (min-width: 1024px) {
	.bookwp-widget.bookwp-size-hero,
	.bookwp-widget[data-size="hero"] {
		max-width: 960px; /* override base's 700px */
		padding: var(--bookwp-spacing-2xl);
	}
}

.bookwp-widget.bookwp-size-hero .bookwp-progress-bar,
.bookwp-widget[data-size="hero"] .bookwp-progress-bar {
	padding: var(--bookwp-spacing-xl) var(--bookwp-spacing-lg);
}
.bookwp-widget.bookwp-size-hero .bookwp-progress-indicator,
.bookwp-widget[data-size="hero"] .bookwp-progress-indicator {
	font-size: 1rem;
	height: 2.5rem;
	width: 2.5rem;
}
.bookwp-widget.bookwp-size-hero .bookwp-progress-label,
.bookwp-widget[data-size="hero"] .bookwp-progress-label {
	font-size: var(--bookwp-font-size-sm);
}
.bookwp-widget.bookwp-size-hero .bookwp-step-title,
.bookwp-widget[data-size="hero"] .bookwp-step-title {
	font-size: 2.25rem;
	margin-bottom: var(--bookwp-spacing-xl);
}
.bookwp-widget.bookwp-size-hero .bookwp-calendar-section,
.bookwp-widget[data-size="hero"] .bookwp-calendar-section {
	padding: var(--bookwp-spacing-xl);
}
.bookwp-widget.bookwp-size-hero .bookwp-calendar-day,
.bookwp-widget[data-size="hero"] .bookwp-calendar-day {
	font-size: 1rem;
	min-height: 2.75rem;
}
.bookwp-widget.bookwp-size-hero .bookwp-slots-grid,
.bookwp-widget[data-size="hero"] .bookwp-slots-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: var(--bookwp-spacing-md);
}
@media (min-width: 1024px) {
	.bookwp-widget.bookwp-size-hero .bookwp-slots-grid,
	.bookwp-widget[data-size="hero"] .bookwp-slots-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}
.bookwp-widget.bookwp-size-hero .bookwp-slot,
.bookwp-widget[data-size="hero"] .bookwp-slot {
	min-height: 4.25rem;
}
.bookwp-widget.bookwp-size-hero .bookwp-card,
.bookwp-widget[data-size="hero"] .bookwp-card {
	padding: var(--bookwp-spacing-xl);
}
.bookwp-widget.bookwp-size-hero .bookwp-btn,
.bookwp-widget[data-size="hero"] .bookwp-btn {
	font-size: 1.0625rem;
	padding: var(--bookwp-spacing-lg) var(--bookwp-spacing-xl);
}

/* ===========================================================
   Auto theme — bridge `data-theme="auto"` to the system pref
   ===========================================================
   Each skin defines its own `[data-theme="dark"]` overrides. When the
   user selected `auto`, we replicate those overrides under the OS-level
   `prefers-color-scheme: dark` media query so the same rules apply.
   We do that here generically by re-targeting the same selectors. */

@media (prefers-color-scheme: dark) {
	.bookwp-widget[data-theme="auto"] {
		color-scheme: dark;
	}
}

/* Theme indicator for users with explicit choice */
.bookwp-widget[data-theme="dark"] {
	color-scheme: dark;
}
.bookwp-widget[data-theme="light"] {
	color-scheme: light;
}