/*
 * Utilities + baseline looks for contract atoms the theme itself uses
 * (.cm-btn, .cm-pill/.cm-pills, .cm-status, .cm-empty).
 * Written with :where() → zero specificity, so the plugin's components.css and
 * Elementor widget settings always win where they define the same thing.
 * (base.css keeps its element resets at zero specificity too, and loads earlier.)
 */

/* ---------------------------------------------------------------- Buttons */
:where(.cm-btn) {
	--cm-btn-bg: var(--color-white);
	--cm-btn-fg: var(--color-text);
	--cm-btn-bd: var(--color-line);
	--cm-btn-h: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-block-size: var(--cm-btn-h);
	padding: 0 22px;
	border: 1px solid var(--cm-btn-bd);
	border-radius: 12px;
	background-color: var(--cm-btn-bg);
	color: var(--cm-btn-fg);
	font-family: inherit;
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

:where(.cm-btn):hover {
	color: var(--cm-btn-fg);
	transform: translateY(-1px);
}

:where(.cm-btn):active {
	transform: none;
}

:where(.cm-btn) .cm-icon {
	inline-size: 20px;
	block-size: 20px;
}

:where(.cm-btn--primary) {
	--cm-btn-bg: var(--color-accent);
	--cm-btn-fg: var(--color-white);
	--cm-btn-bd: var(--color-accent);
}

:where(.cm-btn--primary):hover {
	--cm-btn-bg: var(--color-accent-hover);
	--cm-btn-bd: var(--color-accent-hover);
	box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--color-accent) 70%, transparent);
}

:where(.cm-btn--dark) {
	--cm-btn-bg: var(--color-ink);
	--cm-btn-fg: var(--color-white);
	--cm-btn-bd: var(--color-ink);
}

:where(.cm-btn--dark):hover {
	--cm-btn-bg: var(--color-ink-2);
}

:where(.cm-btn--ghost) {
	--cm-btn-bg: transparent;
	--cm-btn-fg: currentColor;
	--cm-btn-bd: color-mix(in srgb, currentColor 24%, transparent);
	color: inherit;
}

:where(.cm-btn--ghost):hover {
	--cm-btn-bd: currentColor;
	color: inherit;
}

:where(.cm-btn--sm) {
	--cm-btn-h: 40px;
	padding: 0 16px;
	font-size: var(--fs-small);
	border-radius: 10px;
}

:where(.cm-btn--lg) {
	--cm-btn-h: 56px;
	padding: 0 30px;
	font-size: 1.0625rem;
	border-radius: var(--radius);
}

:where(.cm-btn--block) {
	display: flex;
	inline-size: 100%;
}

:where(.cm-btn)[disabled],
:where(.cm-btn)[aria-disabled="true"] {
	opacity: .5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Header CTA is a pill (reference). */
:where(.cm-header__cta) {
	border-radius: var(--radius-pill);
}

/* ---------------------------------------------------------------- Pills */
:where(.cm-pills) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

:where(.cm-pill) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-block-size: 40px;
	padding: 0 18px;
	border: 1px solid var(--cm-surface-line, var(--color-line));
	border-radius: var(--radius-pill);
	background-color: var(--cm-surface-card, var(--color-white));
	color: inherit;
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

:where(.cm-pill):hover {
	border-color: currentColor;
	color: inherit;
}

:where(.cm-pill.is-active, .cm-pill[aria-pressed="true"], .cm-pill[aria-current]) {
	border-color: var(--color-accent);
	background-color: var(--color-accent);
	color: var(--color-white);
}

/* ---------------------------------------------------------------- Status */
:where(.cm-status) {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border-radius: var(--radius-pill);
	background-color: var(--color-paper-2);
	color: var(--color-muted);
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: 1.7;
}

:where(.cm-status)::before {
	content: "";
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background-color: currentColor;
}

:where(.cm-status--on_sale) { background-color: var(--color-success-soft); color: var(--color-success); }
:where(.cm-status--sold_out, .cm-status--cancelled) { background-color: var(--color-danger-soft); color: var(--color-danger); }
:where(.cm-status--not_started) { background-color: var(--color-gold-soft); color: color-mix(in srgb, var(--color-gold) 70%, var(--color-ink)); }
:where(.cm-status--past, .cm-status--ended) { background-color: var(--color-paper-2); color: var(--color-muted); }

/* ---------------------------------------------------------------- Empty state */
:where(.cm-empty) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	padding: clamp(32px, 6vw, 64px) var(--space-5);
	border: 1px dashed var(--cm-surface-line, var(--color-line));
	border-radius: var(--radius-lg);
	text-align: center;
}

:where(.cm-empty__icon) {
	display: inline-grid;
	place-items: center;
	inline-size: 64px;
	block-size: 64px;
	border-radius: 50%;
	background-color: var(--color-accent-soft);
	color: var(--color-accent);
}

:where(.cm-empty__icon) .cm-icon {
	inline-size: 28px;
	block-size: 28px;
}

:where(.cm-empty__title) {
	margin: 0;
	font-size: var(--fs-h4);
}

:where(.cm-empty__text) {
	margin: 0 0 var(--space-3);
	color: var(--cm-surface-muted, var(--color-muted));
}

/* ---------------------------------------------------------------- Helpers */
.cm-ltr {
	direction: ltr;
	unicode-bidi: isolate;
}

.cm-num {
	font-variant-numeric: tabular-nums;
}

.cm-muted {
	color: var(--cm-surface-muted, var(--color-muted));
}

.cm-accent {
	color: var(--color-accent);
}

.cm-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cm-clamp-2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.cm-visually-hidden {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	block-size: 1px;
	inline-size: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.cm-hide-mobile {
		display: none !important;
	}
}

@media (min-width: 768px) {
	.cm-hide-desktop {
		display: none !important;
	}
}