/**
 * Cleanora shared design system.
 *
 * Brand design tokens plus components shared between the admin screens and the
 * frontend booking form (price breakdown, buttons, cards, pills). Loaded in
 * both contexts so the look never drifts.
 */

:root {
	/* Brand palette. */
	--cleanora-green: #173f35;
	--cleanora-green-700: #0f2c25;
	--cleanora-ivory: #f5f3ec;
	--cleanora-lime: #c8f169;
	--cleanora-lime-600: #b4e24f;
	--cleanora-white: #ffffff;
	--cleanora-charcoal: #202622;
	--cleanora-muted: #68716a;
	--cleanora-border: #e2e5dd;

	/* Semantic. */
	--cleanora-primary: var(--cleanora-green);
	--cleanora-accent: var(--cleanora-lime);
	--cleanora-text: var(--cleanora-charcoal);
	--cleanora-text-muted: var(--cleanora-muted);
	--cleanora-surface: var(--cleanora-white);
	--cleanora-surface-alt: var(--cleanora-ivory);

	/* Accent/primary tints - derived from the brand tokens so they follow the
	   admin's Appearance colours (with a neutral fallback for old browsers). */
	--cleanora-accent-soft: rgba(32, 38, 34, 0.06);
	--cleanora-accent-soft: color-mix(in srgb, var(--cleanora-accent) 18%, transparent);
	--cleanora-accent-hover: rgba(32, 38, 34, 0.08);
	--cleanora-accent-hover: color-mix(in srgb, var(--cleanora-accent) 28%, transparent);
	--cleanora-primary-soft: rgba(32, 38, 34, 0.08);
	--cleanora-primary-soft: color-mix(in srgb, var(--cleanora-primary) 12%, transparent);

	/* Universal status colours (not brand - safe to stay fixed). */
	--cleanora-danger: #b32d2e;
	--cleanora-danger-050: #fdecea;
	--cleanora-danger-200: #f5c6c2;
	--cleanora-danger-700: #8a1f1b;

	/* Shape & depth. */
	--cleanora-radius-sm: 8px;
	--cleanora-radius: 12px;
	--cleanora-radius-lg: 18px;
	--cleanora-shadow-sm: 0 1px 2px rgba(32, 38, 34, 0.06);
	--cleanora-shadow: 0 6px 20px rgba(23, 63, 53, 0.08);
	--cleanora-ring: 0 0 0 3px rgba(32, 38, 34, 0.18);
	--cleanora-ring: 0 0 0 3px color-mix(in srgb, var(--cleanora-accent) 55%, transparent);

	/* Spacing scale. */
	--cleanora-gap-xs: 6px;
	--cleanora-gap-sm: 10px;
	--cleanora-gap: 16px;
	--cleanora-gap-lg: 24px;
}

/* ---------------------------------------------------------------------------
 * Buttons (shared)
 * ------------------------------------------------------------------------- */
.cleanora-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: var(--cleanora-radius);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.06s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.cleanora-btn:focus-visible {
	outline: none;
	box-shadow: var(--cleanora-ring);
}

.cleanora-btn:active {
	transform: translateY(1px);
}

.cleanora-btn--primary {
	background: var(--cleanora-green);
	color: var(--cleanora-white);
}

.cleanora-btn--primary:hover {
	background: var(--cleanora-green-700);
	color: var(--cleanora-white);
	box-shadow: var(--cleanora-ring);
}

.cleanora-btn--accent {
	background: var(--cleanora-lime);
	color: var(--cleanora-green);
}

.cleanora-btn--accent:hover {
	background: var(--cleanora-lime-600);
}

.cleanora-btn--ghost {
	background: transparent;
	border-color: var(--cleanora-border);
	color: var(--cleanora-text);
}

.cleanora-btn--ghost:hover {
	background: var(--cleanora-accent-soft);
	border-color: var(--cleanora-accent);
	color: var(--cleanora-text);
}

.cleanora-btn[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
 * Pills / badges
 * ------------------------------------------------------------------------- */
.cleanora-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
}

.cleanora-pill--active {
	background: rgba(200, 241, 105, 0.35);
	color: var(--cleanora-green);
}

.cleanora-pill--inactive {
	background: var(--cleanora-surface-alt);
	color: var(--cleanora-muted);
}

/* ---------------------------------------------------------------------------
 * Price breakdown (shared admin + frontend)
 * ------------------------------------------------------------------------- */
.cleanora-breakdown {
	background: var(--cleanora-surface);
	border: 1px solid var(--cleanora-border);
	border-radius: var(--cleanora-radius);
	padding: var(--cleanora-gap);
	box-shadow: var(--cleanora-shadow-sm);
	max-width: 420px;
	color: var(--cleanora-text);
}

.cleanora-breakdown__lines {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cleanora-breakdown__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cleanora-gap);
	padding: 9px 0;
	border-bottom: 1px dashed var(--cleanora-border);
}

.cleanora-breakdown__line:first-child {
	padding-top: 0;
}

.cleanora-breakdown__line.is-adjustment .cleanora-breakdown__label,
.cleanora-breakdown__line.is-adjustment .cleanora-breakdown__amount {
	color: var(--cleanora-muted);
	font-style: italic;
}

.cleanora-breakdown__label {
	font-size: 14px;
}

.cleanora-breakdown__amount {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

.cleanora-breakdown__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cleanora-gap);
	margin-top: 12px;
	padding-top: 12px;
	border-top: 2px solid var(--cleanora-green);
}

.cleanora-breakdown__total .cleanora-breakdown__label {
	font-size: 15px;
	font-weight: 700;
	color: var(--cleanora-green);
}

.cleanora-breakdown__total .cleanora-breakdown__amount {
	font-size: 20px;
	font-weight: 800;
	color: var(--cleanora-green);
}

.cleanora-breakdown__meta {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--cleanora-muted);
}

.cleanora-breakdown.is-loading {
	opacity: 0.5;
}

/* ---------------------------------------------------------------------------
 * Card (shared)
 * ------------------------------------------------------------------------- */
.cleanora-card {
	background: var(--cleanora-surface);
	border: 1px solid var(--cleanora-border);
	border-radius: var(--cleanora-radius-lg);
	box-shadow: var(--cleanora-shadow-sm);
	padding: var(--cleanora-gap-lg);
}