/* Age verification popup */

.scage {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	/* Renamed from the --scage-accent/--scage-yes-* set: Elementor bakes widget
	   colours into a cached CSS file that no PHP default or option migration can
	   reach, so an old purple palette kept winning here. New names ignore those
	   stale declarations and pick these up until the page is saved again. */
	--scage-brand: #0A6B82;
	--scage-dur: 420ms;
	--scage-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--scage-radius: 8px;
}
.scage[hidden] { display: none !important; }

.scage__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.scage__box {
	position: relative;
	z-index: 1;
	width: min(560px, 100%);
	background: #fff;
	border-radius: 20px;
	padding: 40px 36px 28px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
	text-align: center;
	font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

.scage__h {
	margin: 0 0 14px;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.35;
	color: #111;
}

.scage__p {
	margin: 0 0 28px;
	font-size: 15px;
	font-weight: 400;
	color: #222;
}

.scage__btns {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-bottom: 28px;
}

/* Buttons — left-to-right fill wipe, matching the product/brand card buttons. */
.scage__btn {
	position: relative;
	z-index: 0;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	max-width: 200px;
	/* min-height, not height: flex-basis wins over height on the main axis, so a
	   fixed height collapses once .scage__btns stacks into a column. */
	min-height: 48px;
	padding: 8px 16px;
	border-radius: var(--scage-radius, 8px);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.04em;
	cursor: pointer;
	font-family: inherit;
	box-shadow: none;
	transition: color var(--scage-dur, 420ms) var(--scage-ease),
		background-color var(--scage-dur, 420ms) var(--scage-ease),
		border-color var(--scage-dur, 420ms) var(--scage-ease);
}

.scage__btn-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: translateX(-101%);
	transition: transform var(--scage-dur, 420ms) var(--scage-ease);
	pointer-events: none;
	z-index: 1;
}

.scage__btn-label {
	position: relative;
	z-index: 2;
	display: inline-block;
}

.scage__btn:hover .scage__btn-fill,
.scage__btn:focus-visible .scage__btn-fill,
.scage__btn:active .scage__btn-fill {
	transform: translateX(0);
}

.scage__yes {
	border: 2px solid var(--scage-yes-surface, var(--scage-brand));
	background: var(--scage-yes-surface, var(--scage-brand));
	color: var(--scage-yes-text, #fff);
}

.scage__yes .scage__btn-label {
	color: var(--scage-yes-text, #fff);
}

.scage__yes .scage__btn-fill {
	background: var(--scage-yes-wipe, #fff);
}

.scage__yes:hover,
.scage__yes:focus-visible,
.scage__yes:active {
	/* Border follows the fill, otherwise the wipe leaves an accent ring the card
	   buttons don't have. */
	border-color: var(--scage-yes-wipe, #fff);
	color: var(--scage-yes-text-hover, #111) !important;
}

/* Label colour is set on the span so Elementor/theme button colour cannot
   leave white text sitting on the white wipe. */
.scage__yes:hover .scage__btn-label,
.scage__yes:focus-visible .scage__btn-label,
.scage__yes:active .scage__btn-label {
	color: var(--scage-yes-text-hover, #111) !important;
	-webkit-text-fill-color: var(--scage-yes-text-hover, #111);
}

.scage__no {
	background: var(--scage-no-surface, #fff);
	color: var(--scage-no-text, var(--scage-brand));
	border: 2px solid var(--scage-no-edge, var(--scage-brand));
}

.scage__no .scage__btn-label {
	color: var(--scage-no-text, var(--scage-brand));
}

.scage__no .scage__btn-fill {
	background: var(--scage-no-wipe, var(--scage-brand));
}

.scage__no:hover,
.scage__no:focus-visible,
.scage__no:active {
	color: var(--scage-no-text-hover, #fff) !important;
}

.scage__no:hover .scage__btn-label,
.scage__no:focus-visible .scage__btn-label,
.scage__no:active .scage__btn-label {
	color: var(--scage-no-text-hover, #fff) !important;
	-webkit-text-fill-color: var(--scage-no-text-hover, #fff);
}

/* Animation switched off in the widget: plain colour swap, no wipe. */
.scage.is-static .scage__btn-fill {
	display: none;
}

.scage.is-static .scage__yes:hover {
	background: var(--scage-yes-wipe, #fff);
	border-color: var(--scage-yes-wipe, #fff);
}

.scage.is-static .scage__no:hover {
	background: var(--scage-no-wipe, var(--scage-brand));
}

.scage__fine {
	margin: 0;
	font-size: 11px;
	color: #111;
	line-height: 1.4;
}

body.scage-lock {
	overflow: hidden !important;
}

@media (max-width: 600px) {
	.scage__box { padding: 28px 18px 20px; }
	.scage__h { font-size: 18px; }
	.scage__btns { flex-direction: column; }
	.scage__btn {
		/* Stacked buttons size to their own height instead of sharing the row. */
		flex: 0 0 auto;
		max-width: none;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.scage__btn,
	.scage__btn-fill {
		transition: none !important;
	}
}