/* ───────────────────────────────────────────
   Gaming Event Buttons — Frontend Widget CSS
   ─────────────────────────────────────────── */

/*
 * Prevent the Elementor widget wrapper from clipping button shadows.
 * overflow:visible is set on both the widget wrapper and the bar itself.
 */
.elementor-widget-gaming_event_buttons,
.elementor-widget-gaming_event_buttons .elementor-widget-container {
	overflow: visible !important;
}

/* ── Bar ── */
.geb-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	/* Default padding gives room for shadows on all four sides */
	padding: 14px 10px;
	box-sizing: border-box;
	list-style: none;
	margin: 0;
	justify-content: center; /* overridden per-widget by Elementor selector */
	overflow: visible;
}

/* ── Button ── */
.geb-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	border-radius: 999px;
	text-decoration: none !important;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1;
	white-space: nowrap;
	border: none;
	cursor: pointer;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.20);
	transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
	-webkit-font-smoothing: antialiased;
	/* Prevents the button itself from clipping its own shadow */
	overflow: visible;
	position: relative;
}

.geb-btn:hover,
.geb-btn:focus-visible {
	opacity: 0.88;
	transform: translateY(-2px);
	box-shadow: 0 7px 22px rgba(0, 0, 0, 0.26);
	text-decoration: none !important;
	outline-offset: 3px;
}

.geb-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* ── Icon ── */
.geb-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1em;
	line-height: 1;
	flex-shrink: 0;
}

.geb-btn__icon i,
.geb-btn__icon svg {
	display: block;
}

/* ── Label ── */
.geb-btn__label {
	white-space: nowrap;
}

/* ── RTL ── */
[dir="rtl"] .geb-btn {
	flex-direction: row-reverse;
}

/* ── Mobile ── */
@media (max-width: 600px) {
	.geb-btn {
		padding: 8px 16px;
		font-size: 0.875rem;
	}

	.geb-bar {
		gap: 8px;
		padding: 10px 8px;
	}
}