/**
 * Product "Key Benefits" circle widget.
 * Namespaced (ppbc-*) AND hardened against theme/Elementor styles: WoodMart styles the
 * <button>/<p>/<i> ELEMENTS aggressively (background, border-radius, padding, text-transform,
 * box-shadow, min-height...), which prefixed class names alone do not stop. So every rule is
 * scoped under `.ppbc-wrap` (raises specificity) and the theme-vulnerable visual properties
 * are forced with !important on a full <button> reset. Colors are CSS variables.
 */

.ppbc-wrap {
	--ppbc-c1: #7d4ac7;
	--ppbc-c2: #a733bb;
	--ppbc-tile-bg: #ffffff;
	--ppbc-tile-border: #e6e6e6;
	--ppbc-ink: #222222;
	--ppbc-note: #474d61;
	--ppbc-track: #ece8f6;
	--ppbc-size: 420px;
	--ppbc-dot: 60px;

	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
}
.ppbc-wrap, .ppbc-wrap *, .ppbc-wrap *::before, .ppbc-wrap *::after { box-sizing: border-box; }

.ppbc-wrap .ppbc-heading { text-align: center; color: var(--ppbc-c1); font-weight: 800; margin: 0 0 6px; }

.ppbc-wrap .ppbc-holder {
	width: var(--ppbc-size);
	height: var(--ppbc-size);
	max-width: 94vw;
	max-height: 94vw;
	position: relative;
	margin: 24px auto 0;
	border-radius: 50%;
}

/* decorative dotted ring, slow self-rotation */
.ppbc-wrap .ppbc-ring {
	position: absolute;
	left: 10%; top: 11%;
	width: 78%; height: 78%;
	border: 2px dotted var(--ppbc-c2);
	border-radius: 50%;
	opacity: .5;
	animation: ppbc-spin 100s infinite linear;
}
@keyframes ppbc-spin { from { transform: rotate(0deg); } to { transform: rotate(359deg); } }

/* orbit carrying the icon tiles - rotates on each step */
.ppbc-wrap .ppbc-orbit {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	z-index: 20;
	transition: transform 2s cubic-bezier(.45,.05,.35,1);
}

/* dots are <button> - hard-reset every theme button style, then paint our tile. JS sets
   left/top/transform inline (no !important here) so positioning/counter-rotation still win. */
.ppbc-wrap button.ppbc-dot {
	position: absolute !important;
	width: var(--ppbc-dot) !important;
	height: var(--ppbc-dot) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: var(--ppbc-tile-bg) !important;
	color: var(--ppbc-c1) !important;
	border: 2px solid var(--ppbc-tile-border) !important;
	border-radius: 20px !important;
	box-shadow: none;
	font-size: 25px !important;
	line-height: 1 !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	cursor: pointer;
	outline: none;
	z-index: 3;
	transition: transform 1s cubic-bezier(.45,.05,.35,1), background .5s, color .5s, border-color .5s, box-shadow .5s;
}
.ppbc-wrap button.ppbc-dot > i {
	pointer-events: none;
	background: none !important;
	color: inherit !important;
	line-height: 1 !important;
}

/* the little glow decorations shown only on the active tile */
.ppbc-wrap .ppbc-dot .ppbc-glow { position: absolute; inset: 0; display: none; pointer-events: none; }
.ppbc-wrap .ppbc-dot .ppbc-glow::after {
	content: ''; position: absolute; width: 5px; height: 5px;
	border: 3px solid var(--ppbc-c1); bottom: -31px; left: -14px; filter: blur(1px); border-radius: 50%;
}
.ppbc-wrap .ppbc-dot .ppbc-glow::before {
	content: ''; position: absolute; width: 6px; height: 6px;
	border: 6px solid var(--ppbc-c2); top: -15px; right: -39px; filter: blur(5px); transform: rotate(-45deg);
}
.ppbc-wrap .ppbc-dot.is-active .ppbc-glow { display: block; }

.ppbc-wrap button.ppbc-dot:hover,
.ppbc-wrap button.ppbc-dot.is-active {
	color: #ffffff !important;
	background: linear-gradient(to right, var(--ppbc-c1) 0%, var(--ppbc-c2) 100%) !important;
	border-color: #ffffff !important;
	box-shadow: 0 30px 30px 0 rgba(0, 0, 0, .13);
}

/* centre content: crossfade + scale between benefits */
.ppbc-wrap .ppbc-content { position: absolute; inset: 18%; border-radius: 50%; z-index: 10; }
.ppbc-wrap .ppbc-item {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 6%;
	opacity: 0;
	transform: scale(.55);
	transition: opacity .5s, transform .5s;
	pointer-events: none;
}
.ppbc-wrap .ppbc-item.is-active { opacity: 1; transform: scale(1); pointer-events: auto; z-index: 1; }

.ppbc-wrap .ppbc-title {
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: 1px;
	line-height: 1.15;
	color: var(--ppbc-ink);
	position: relative;
	margin: 0 !important;
	text-transform: none;
}
.ppbc-wrap .ppbc-title span { color: var(--ppbc-c1); text-shadow: 0 10px 10px rgba(0, 0, 0, .15); }
.ppbc-wrap .ppbc-item p {
	font-size: 13px !important;
	line-height: 1.55 !important;
	color: var(--ppbc-note) !important;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	text-transform: none !important;
	text-align: center !important;
}

/* big faint ghost icon behind the text */
.ppbc-wrap .ppbc-ghost {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	font-size: 120px;
	color: #000000 !important;
	opacity: .07;
	z-index: -1;
	pointer-events: none;
	background: none !important;
}

/* autoplay progress bar, just below the circle */
.ppbc-wrap .ppbc-progress {
	position: absolute;
	left: 50%;
	bottom: -18px;
	transform: translateX(-50%);
	width: 150px;
	height: 5px;
	background: var(--ppbc-track);
	border-radius: 6px;
	overflow: hidden;
}
.ppbc-wrap .ppbc-progress .ppbc-bar {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 6px;
	background: linear-gradient(to right, var(--ppbc-c1) 0%, var(--ppbc-c2) 100%);
}
.ppbc-wrap .ppbc-progress .ppbc-bar.is-run { animation: ppbc-fill var(--ppbc-interval, 5s) linear forwards; }
@keyframes ppbc-fill { from { width: 0; } to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
	.ppbc-wrap .ppbc-ring { animation: none; }
	.ppbc-wrap .ppbc-progress .ppbc-bar.is-run { animation: none; width: 100%; }
}

@media only screen and (max-width: 599px) {
	.ppbc-wrap { --ppbc-size: 330px; --ppbc-dot: 48px; }
	.ppbc-wrap button.ppbc-dot { font-size: 20px !important; border-radius: 16px !important; }
	.ppbc-wrap .ppbc-title { font-size: 1.05rem; }
	.ppbc-wrap .ppbc-item p { font-size: 11px !important; line-height: 1.45 !important; }
	.ppbc-wrap .ppbc-ghost { font-size: 90px; }
	.ppbc-wrap .ppbc-progress { width: 120px; bottom: -10px; }
}