/* Red Glass Gold Buttons */
:root {
	--rggb-red: rgba(150, 0, 0, 0.72);
	--rggb-red-dark: rgba(95, 0, 0, 0.82);
	--rggb-gold: #f5c542;
	--rggb-gold-light: #ffe58a;
}

/*
 * Targets common WordPress buttons, links styled as buttons,
 * WooCommerce buttons and Storefront buttons.
 */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a.button,
.wp-block-button__link,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	position: relative !important;
	isolation: isolate;
	overflow: visible !important;

	color: #fff !important;
	background:
		linear-gradient(135deg,
			rgba(255,255,255,.20) 0%,
			rgba(255,255,255,.05) 28%,
			rgba(120,0,0,.12) 55%,
			rgba(60,0,0,.24) 100%),
		var(--rggb-red) !important;

	border: 1px solid rgba(255,255,255,.35) !important;
	border-radius: 12px !important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.28),
		inset 0 -8px 18px rgba(55,0,0,.18),
		0 7px 18px rgba(65,0,0,.18) !important;

	backdrop-filter: blur(9px);
	-webkit-backdrop-filter: blur(9px);

	transition:
		background .28s ease,
		color .28s ease,
		box-shadow .28s ease,
		transform .28s ease,
		border-color .28s ease !important;
}

/* Rotating golden line around the OUTER EDGE of the button */
button::after,
input[type="button"]::after,
input[type="submit"]::after,
input[type="reset"]::after,
a.button::after,
.wp-block-button__link::after,
.wp-element-button::after,
.woocommerce a.button::after,
.woocommerce button.button::after,
.woocommerce input.button::after,
.woocommerce #respond input#submit::after,
.woocommerce a.button.alt::after,
.woocommerce button.button.alt::after,
.woocommerce input.button.alt::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset: -3px;
	padding: 2px;
	border-radius: 14px;
	background: conic-gradient(
		from 0deg,
		transparent 0deg 315deg,
		var(--rggb-gold-light) 326deg,
		var(--rggb-gold) 337deg,
		transparent 349deg 360deg
	);

	/* Only the border ring remains visible */
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;

	opacity: 0;
	transform: rotate(0deg);
	transition: opacity .25s ease;
	pointer-events: none;
}

/* Hover / focus / selected */
button:hover,
button:focus-visible,
input[type="button"]:hover,
input[type="button"]:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible,
input[type="reset"]:hover,
input[type="reset"]:focus-visible,
a.button:hover,
a.button:focus-visible,
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.wp-element-button:hover,
.wp-element-button:focus-visible,
.woocommerce a.button:hover,
.woocommerce a.button:focus-visible,
.woocommerce button.button:hover,
.woocommerce button.button:focus-visible,
.woocommerce input.button:hover,
.woocommerce input.button:focus-visible,
.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit:focus-visible,
.woocommerce a.button.alt:hover,
.woocommerce a.button.alt:focus-visible,
.woocommerce button.button.alt:hover,
.woocommerce button.button.alt:focus-visible,
.woocommerce input.button.alt:hover,
.woocommerce input.button.alt:focus-visible {
	color: #fff !important;
	background:
		linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,.05)),
		linear-gradient(135deg, #9b6900, #f5c542 48%, #b77a00) !important;

	border-color: var(--rggb-gold-light) !important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.38),
		0 0 0 1px rgba(245,197,66,.22),
		0 0 18px rgba(245,197,66,.45),
		0 8px 24px rgba(120,75,0,.28) !important;

	transform: translateY(-1px);
}

button:hover::after,
button:focus-visible::after,
input[type="button"]:hover::after,
input[type="button"]:focus-visible::after,
input[type="submit"]:hover::after,
input[type="submit"]:focus-visible::after,
input[type="reset"]:hover::after,
input[type="reset"]:focus-visible::after,
a.button:hover::after,
a.button:focus-visible::after,
.wp-block-button__link:hover::after,
.wp-block-button__link:focus-visible::after,
.wp-element-button:hover::after,
.wp-element-button:focus-visible::after,
.woocommerce a.button:hover::after,
.woocommerce a.button:focus-visible::after,
.woocommerce button.button:hover::after,
.woocommerce button.button:focus-visible::after,
.woocommerce input.button:hover::after,
.woocommerce input.button:focus-visible::after,
.woocommerce #respond input#submit:hover::after,
.woocommerce #respond input#submit:focus-visible::after,
.woocommerce a.button.alt:hover::after,
.woocommerce a.button.alt:focus-visible::after,
.woocommerce button.button.alt:hover::after,
.woocommerce button.button.alt:focus-visible::after,
.woocommerce input.button.alt:hover::after,
.woocommerce input.button.alt:focus-visible::after {
	opacity: 1;
	animation: rggb-orbit 1.45s linear infinite;
}

@keyframes rggb-orbit {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* Keep keyboard focus accessible */
button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible,
a.button:focus-visible,
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--rggb-gold-light) !important;
	outline-offset: 3px;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	button::after,
	input[type="button"]::after,
	input[type="submit"]::after,
	input[type="reset"]::after,
	a.button::after,
	.wp-block-button__link::after,
	.wp-element-button::after,
	.woocommerce a.button::after,
	.woocommerce button.button::after,
	.woocommerce input.button::after,
	.woocommerce #respond input#submit::after,
	.woocommerce a.button.alt::after,
	.woocommerce button.button.alt::after,
	.woocommerce input.button.alt::after {
		animation: none !important;
	}
}