/* Banoo Plate Showcase widget */
.bps {
	--bps-accent: #E8862E;
	--bps-btn-text: #9C5A17;
	--bps-btn-bg: rgba(255, 255, 255, 0.85);
	--bps-size: 520px;
	--bps-plate: 74%;
	--bps-fit: cover;
	--bps-radius: 50%;
	--bps-rot: 75deg;
	--bps-spin-dur: 70s;
	--bps-ring: var(--bps-accent);
	--bps-ring-w: 1.5px;
	--bps-dot: var(--bps-accent);
	--bps-dot-glow: rgba(232, 134, 46, 0.18);
	--bps-shadow-x: 0px;
	--bps-shadow-y: 34px;
	--bps-shadow-blur: 42px;
	--bps-shadow-color: rgba(60, 25, 0, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(24px, 5vw, 64px);
}

/* --- stage / orbit ------------------------------------------------ */
.bps-stage {
	position: relative;
	width: var(--bps-size);
	max-width: min(100%, 88vw);
	aspect-ratio: 1 / 1;
	flex: none;
}
.bps-orbit {
	position: absolute;
	inset: 0;
	border: var(--bps-ring-w) solid var(--bps-ring);
	border-radius: 50%;
	animation: bps-orbit 48s linear infinite;
}
.bps-orbit i {
	position: absolute;
	width: 13px;
	height: 13px;
	background: var(--bps-dot);
	border-radius: 50%;
	box-shadow: 0 0 0 4px var(--bps-dot-glow);
}
.bps-orbit i:nth-child(1) { top: -7px; left: calc(50% - 6.5px); }
.bps-orbit i:nth-child(2) { right: -7px; top: calc(50% - 6.5px); }
.bps-orbit i:nth-child(3) { bottom: -7px; left: calc(50% - 6.5px); }
.bps-orbit i:nth-child(4) { left: -7px; top: calc(50% - 6.5px); }
@keyframes bps-orbit {
	to { transform: rotate(360deg); }
}

/* --- plates ------------------------------------------------------- */
.bps-plates {
	position: absolute;
	inset: 0;
}
.bps-plate {
	position: absolute;
	inset: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: rotate(calc(-1 * var(--bps-rot))) scale(0.55);
	transition: opacity 0.55s ease, transform 0.75s cubic-bezier(0.3, 1.25, 0.4, 1);
	pointer-events: none;
	will-change: transform, opacity;
}
.bps-plate.is-active {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}
.bps-plate.is-leaving {
	opacity: 0;
	transform: rotate(var(--bps-rot)) scale(0.55);
	transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.55, 0, 0.8, 0.4);
}
.bps-plate .bps-img {
	width: var(--bps-plate);
	height: var(--bps-plate);
	max-width: none;
	object-fit: var(--bps-fit);
	border-radius: var(--bps-radius);
	filter: drop-shadow(var(--bps-shadow-x) var(--bps-shadow-y) var(--bps-shadow-blur) var(--bps-shadow-color));
}
.bps--spin .bps-plate.is-active .bps-img {
	animation: bps-spin var(--bps-spin-dur) linear infinite;
}
@keyframes bps-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.bps-orbit,
	.bps--spin .bps-plate.is-active .bps-img {
		animation: none;
	}
	.bps-plate,
	.bps-plate.is-leaving {
		transition-duration: 0.2s;
		transform: none;
	}
}

/* --- nav buttons --------------------------------------------------- */
.bps-nav {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	flex: none;
}
/* .bps prefix beats theme-kit `button` element styles on specificity */
.bps .bps-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 24px 9px 10px;
	border: 1px solid var(--bps-accent);
	border-radius: 999px;
	background: var(--bps-btn-bg);
	background-color: var(--bps-btn-bg);
	color: var(--bps-btn-text);
	font: inherit;
	font-size: 17px;
	line-height: 1.2;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
	transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.bps .bps-btn-ic {
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 50%;
	border: 1px solid var(--bps-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	color: var(--bps-accent);
	background: transparent;
	transition: inherit;
}
.bps .bps-btn:hover {
	background: var(--bps-btn-bg);
	background-color: var(--bps-btn-bg);
	color: var(--bps-btn-text);
	transform: translateX(-5px);
	box-shadow: 0 10px 22px rgba(232, 134, 46, 0.28);
}
.bps .bps-btn.is-active,
.bps .bps-btn.is-active:hover {
	background: var(--bps-accent);
	background-color: var(--bps-accent);
	color: #fff;
	box-shadow: 0 12px 26px rgba(232, 134, 46, 0.42);
	transform: translateX(-8px);
}
.bps .bps-btn.is-active .bps-btn-ic {
	background: #fff;
	border-color: #fff;
	color: var(--bps-accent);
}
.bps .bps-btn:focus-visible {
	outline: 2px solid var(--bps-accent);
	outline-offset: 2px;
}

/* --- responsive ----------------------------------------------------- */
@media (max-width: 767px) {
	.bps {
		flex-direction: column;
	}
	.bps-nav {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
	.bps .bps-btn:hover,
	.bps .bps-btn.is-active,
	.bps .bps-btn.is-active:hover {
		transform: translateY(-3px);
	}
}