/* BETMAGIC – shared tokens and small components used by every front-end block.
   Fonts (Manrope, Barlow Condensed) are loaded by the site / Elementor. */

:root {
	--bm-dark: #0b0f12;
	--bm-dark-2: #11181c;
	--bm-ink: #0b1d17;
	--bm-green: #34d399;
	--bm-green-strong: #10b981;
	--bm-green-ink: #047857;
	--bm-muted: #b6ceca;
	--bm-grey: #66756f;
	--bm-line: #e3e9e6;
	--bm-surface: #fff;
	--bm-surface-2: #f4f7f5;
	--bm-red: #ef4444;
	--bm-gold: #e3b341;
	--bm-silver: #c4ccd4;
	--bm-bronze: #d08a52;
	--bm-radius: 24px;
	--bm-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--bm-heading: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
}

/* An Elementor shortcode widget inside a row or grid container shrinks to one item;
   the BETMAGIC blocks always take the full row. */
.elementor-widget:has(.bm-cards, .bm-groups, .bm-tickets) { width: 100%; max-width: 100%; flex: 1 1 100%; grid-column: 1 / -1; }

/* Button */
.bm-button,
.bm-button:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 50px;
	padding: 12px 26px;
	border: 1px solid var(--bm-green);
	border-radius: 999px;
	background: var(--bm-green);
	color: var(--bm-dark);
	font: 600 16px/1.2 var(--bm-body);
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, color .18s ease, transform .1s ease;
}
.bm-button:hover { background: var(--bm-green-strong); border-color: var(--bm-green-strong); color: var(--bm-dark); }
.bm-button:active { transform: translateY(1px); }
.bm-button:focus-visible { outline: 3px solid var(--bm-green); outline-offset: 3px; }
.bm-button--ghost,
.bm-button--ghost:visited { background: transparent; color: inherit; border-color: currentColor; }
.bm-button--ghost:hover { background: var(--bm-dark); border-color: var(--bm-dark); color: #fff; }
.bm-button--block { width: 100%; }

/* OPEN / LOCKED */
.bm-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font: 700 12px/1 var(--bm-body);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.bm-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); }
.bm-status--open { color: var(--bm-green-strong); }
.bm-status--locked { color: var(--bm-red); }

.bm-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.bm-kicker { display: block; color: var(--bm-green-strong); font: 700 13px/1.3 var(--bm-body); letter-spacing: .1em; text-transform: uppercase; }
.bm-link { color: var(--bm-green-ink); font-weight: 600; text-decoration: none; }
.bm-link:hover { text-decoration: underline; }

/* Checkbox */
.bm-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; font: 400 14px/1.5 var(--bm-body); }
.bm-check input[type="checkbox"] {
	appearance: none;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	border: 1.5px solid #9fb0aa;
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.bm-check input[type="checkbox"]:checked {
	border-color: var(--bm-green-strong);
	background: var(--bm-green-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.bm-check input[type="checkbox"]:focus-visible { outline: 3px solid var(--bm-green); outline-offset: 2px; }
.bm-check a { color: var(--bm-green-ink); }

.bm-spinner {
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	border: 3px solid color-mix(in srgb, var(--bm-green) 25%, transparent);
	border-top-color: var(--bm-green-strong);
	border-radius: 50%;
	animation: bm-spin .8s linear infinite;
}
@keyframes bm-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.bm-button, .bm-check input { transition: none; }
	.bm-spinner { animation-duration: 2.4s; }
}