/* BD Guarantee Box — .espt-block-bd-guarantee (.bdg17)
 * vars: --gap --icon-size --glyph-size --img-radius --anim-dur --icon-bg --icon-color
 *       --title-size --text-size --title-color --text-color
 * classes: is-design-{soft|card|outline|ribbon|solid|dark|stamp} is-layout-{side|stack}
 *          is-text-align-{left|center|right} is-media-type-{icon|image|none}
 *          is-bubble-{circle|rounded|none} is-icon-anim-{pulse|beat|bounce|float|spin|swing}
 */

/* ---------------------------------------------------------------- card */
.espt-block-bd-guarantee .bdg17 {
	align-items: flex-start;
	color: var(--bd-ink);
	display: flex;
	gap: var(--gap, 15px);
	min-width: 0;
	overflow: hidden;
	position: relative;
	text-align: left;
}

.espt-block-bd-guarantee .bdg17-body {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-bd-guarantee .bdg17-badge {
	background: color-mix(in srgb, var(--bd-primary) 14%, transparent);
	border-radius: 999px;
	color: var(--bd-primary-dark);
	display: inline-block;
	font-size: calc(var(--text-size, 14px) * 0.82);
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.3;
	margin: 0 0 8px;
	padding: 3px 10px;
}

.espt-block-bd-guarantee .bdg17-title {
	color: var(--title-color, var(--bd-ink));
	font-size: var(--title-size, 17px);
	font-weight: 800;
	line-height: 1.3;
	margin: 0 0 5px;
	padding: 0;
}

.espt-block-bd-guarantee .bdg17-text {
	color: var(--text-color, var(--bd-body));
	font-size: var(--text-size, 14px);
	line-height: 1.7;
	margin: 0;
	padding: 0;
}

.espt-block-bd-guarantee .bdg17-text strong,
.espt-block-bd-guarantee .bdg17-title strong {
	color: inherit;
	font-weight: 800;
}

/* --------------------------------------------------------------- media */
.espt-block-bd-guarantee .bdg17-ic {
	align-items: center;
	background: var(--icon-bg, var(--bd-primary));
	border-radius: 50%;
	color: var(--icon-color, #fff);
	display: flex;
	flex: 0 0 auto;
	height: var(--icon-size, 44px);
	justify-content: center;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	width: var(--icon-size, 44px);
}

.espt-block-bd-guarantee .bdg17-ic .espt-ic {
	font-size: var(--glyph-size, 22px);
	line-height: 0;
}

.espt-block-bd-guarantee .bdg17-ic .espt-ic svg {
	height: 1em;
	width: 1em;
}

/* The image fills the bubble and takes its shape (inherit), so a rounded-square
 * bubble never shows coloured corners behind a circular image. */
.espt-block-bd-guarantee .bdg17-ic .bdg17-img {
	border-radius: inherit;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.espt-block-bd-guarantee.is-bubble-rounded .bdg17-ic { border-radius: 14px; }

/* Image radius shapes the bubble too — otherwise the circular bubble clip
 * hides the img's own radius and the control looks dead. */
.espt-block-bd-guarantee.is-media-type-image.is-bubble-circle .bdg17-ic,
.espt-block-bd-guarantee.is-media-type-image.is-bubble-none .bdg17-ic { border-radius: var(--img-radius, 50%); }

/* hover polish — only when no looping media animation owns the transform */
.espt-block-bd-guarantee:not([class*="is-icon-anim-"]) .bdg17:hover .bdg17-ic { transform: scale(1.08); }

/* ------------------------------------------------------ media animations
 * spin turns just the glyph; the rest move the whole bubble (as in the plugin) */
.espt-block-bd-guarantee.is-icon-anim-pulse .bdg17-ic { animation: bdg17-pulse var(--anim-dur, 2s) ease-in-out infinite; }
.espt-block-bd-guarantee.is-icon-anim-beat .bdg17-ic { animation: bdg17-beat var(--anim-dur, 1.4s) ease-in-out infinite; }
.espt-block-bd-guarantee.is-icon-anim-bounce .bdg17-ic { animation: bdg17-bounce var(--anim-dur, 2s) ease infinite; }
.espt-block-bd-guarantee.is-icon-anim-float .bdg17-ic { animation: bdg17-float var(--anim-dur, 2.4s) ease-in-out infinite; }
.espt-block-bd-guarantee.is-icon-anim-swing .bdg17-ic { animation: bdg17-swing var(--anim-dur, 2s) ease-in-out infinite; transform-origin: top center; }
.espt-block-bd-guarantee.is-icon-anim-spin .bdg17-ic .espt-ic,
.espt-block-bd-guarantee.is-icon-anim-spin .bdg17-ic .bdg17-img { animation: bdg17-spin var(--anim-dur, 3s) linear infinite; }

@keyframes bdg17-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes bdg17-beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.16); } 28% { transform: scale(1); } 42% { transform: scale(1.1); } 70% { transform: scale(1); } }
@keyframes bdg17-bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } 60% { transform: translateY(-4px); } }
@keyframes bdg17-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes bdg17-swing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(9deg); } 75% { transform: rotate(-9deg); } }
@keyframes bdg17-spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------- layout */
.espt-block-bd-guarantee.is-layout-stack .bdg17 {
	align-items: flex-start;
	flex-direction: column;
}

.espt-block-bd-guarantee.is-layout-stack .bdg17-body { width: 100%; }

.espt-block-bd-guarantee.is-text-align-center .bdg17 { text-align: center; }
.espt-block-bd-guarantee.is-text-align-right .bdg17 { text-align: right; }
.espt-block-bd-guarantee.is-layout-stack.is-text-align-center .bdg17 { align-items: center; }
.espt-block-bd-guarantee.is-layout-stack.is-text-align-right .bdg17 { align-items: flex-end; }
.espt-block-bd-guarantee.is-layout-side.is-text-align-right .bdg17 { flex-direction: row-reverse; }

/* ------------------------------------------------------------- designs */
/* soft — the plugin's original tinted card */
.espt-block-bd-guarantee.is-design-soft .bdg17 {
	background: var(--bd-soft);
	border: 1.5px solid var(--bd-soft-line);
}

/* card — plain white box: everything comes from .espt-bd-box */

/* outline — no box-shadow reset here: it would out-specify the shared
 * .bd-shadow-* / .bd-hover-glow rules and silently kill the user's choice. */
.espt-block-bd-guarantee.is-design-outline .bdg17 {
	background: transparent;
	border: 2px solid var(--bd-primary);
}

.espt-block-bd-guarantee.is-design-outline .bdg17-ic {
	background: var(--icon-bg, var(--bd-soft));
	color: var(--icon-color, var(--bd-primary));
}

/* ribbon — white card with a thick accent bar on the leading edge */
.espt-block-bd-guarantee.is-design-ribbon .bdg17 {
	border-left: 6px solid var(--bd-primary);
	padding-left: calc(var(--bd-pad) + 4px);
}

.espt-block-bd-guarantee.is-design-ribbon.is-layout-side.is-text-align-right .bdg17 {
	border-left: 1px solid var(--bd-box-line);
	border-right: 6px solid var(--bd-primary);
	padding-left: var(--bd-pad);
	padding-right: calc(var(--bd-pad) + 4px);
}

.espt-block-bd-guarantee.is-design-ribbon .bdg17-ic {
	background: var(--icon-bg, var(--bd-soft));
	color: var(--icon-color, var(--bd-primary));
}

/* solid — primary background, white text */
.espt-block-bd-guarantee.is-design-solid .bdg17 {
	background: linear-gradient(135deg, var(--bd-primary), var(--bd-primary-dark));
	border-color: transparent;
	color: #fff;
}

.espt-block-bd-guarantee.is-design-solid .bdg17::before {
	background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.espt-block-bd-guarantee.is-design-solid .bdg17-ic {
	background: var(--icon-bg, rgba(255, 255, 255, 0.95));
	color: var(--icon-color, var(--bd-primary));
	position: relative;
}

.espt-block-bd-guarantee.is-design-solid .bdg17-body { position: relative; }
.espt-block-bd-guarantee.is-design-solid .bdg17-title { color: var(--title-color, #fff); }
.espt-block-bd-guarantee.is-design-solid .bdg17-text { color: var(--text-color, rgba(255, 255, 255, 0.88)); }
.espt-block-bd-guarantee.is-design-solid .bdg17-badge { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* dark */
.espt-block-bd-guarantee.is-design-dark .bdg17 {
	background: var(--bd-deep);
	border-color: color-mix(in srgb, var(--bd-deep) 70%, #fff);
	color: #fff;
}

.espt-block-bd-guarantee.is-design-dark .bdg17-ic {
	background: var(--icon-bg, var(--bd-primary));
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--bd-primary) 25%, transparent);
	color: var(--icon-color, #fff);
}

.espt-block-bd-guarantee.is-design-dark .bdg17-title { color: var(--title-color, #fff); }
.espt-block-bd-guarantee.is-design-dark .bdg17-text { color: var(--text-color, rgba(255, 255, 255, 0.78)); }
.espt-block-bd-guarantee.is-design-dark .bdg17-badge { background: color-mix(in srgb, var(--bd-accent) 22%, transparent); color: var(--bd-accent); }

/* stamp — dashed guarantee seal look. The inner ring is a pseudo-element, not
 * an inset box-shadow, so the user's outer shadow / hover glow still show. */
.espt-block-bd-guarantee.is-design-stamp .bdg17 {
	background: var(--bd-soft);
	border: 2px dashed var(--bd-primary);
	padding: calc(var(--bd-pad) + 4px);
}

.espt-block-bd-guarantee.is-design-stamp .bdg17::after {
	border: 1px dashed color-mix(in srgb, var(--bd-primary) 45%, transparent);
	border-radius: max(0px, calc(var(--bd-radius) - 6px));
	content: "";
	inset: 5px;
	pointer-events: none;
	position: absolute;
}

.espt-block-bd-guarantee.is-design-stamp .bdg17-ic {
	background: var(--icon-bg, transparent);
	border: 2px solid var(--bd-primary);
	color: var(--icon-color, var(--bd-primary));
	position: relative;
}

.espt-block-bd-guarantee.is-design-stamp .bdg17-body { position: relative; }

/* the no-bubble option wins over every design-specific bubble treatment */
.espt-block-bd-guarantee.is-bubble-none .bdg17-ic {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--icon-color, var(--bd-primary));
	overflow: visible;
}

.espt-block-bd-guarantee.is-design-solid.is-bubble-none .bdg17-ic,
.espt-block-bd-guarantee.is-design-dark.is-bubble-none .bdg17-ic { color: var(--icon-color, #fff); }

/* ---------------------------------------------------------- responsive */
@media (min-width: 768px) {
	.espt-block-bd-guarantee .bdg17-badge { margin-bottom: 10px; }
	.espt-block-bd-guarantee .bdg17-title { margin-bottom: 6px; }
}

/* Reduced motion. The selectors carry the extra .espt-block class on purpose:
 * the animation / hover rules above are 3–5 classes deep, so a plain
 * ".espt-block-bd-guarantee .bdg17-ic" reset would lose and the loops would
 * keep running. Specificity instead of !important. */
@media (prefers-reduced-motion: reduce) {
	.espt-block.espt-block-bd-guarantee .bdg17-ic,
	.espt-block.espt-block-bd-guarantee[class*="is-icon-anim-"] .bdg17-ic,
	.espt-block.espt-block-bd-guarantee[class*="is-icon-anim-"] .bdg17-ic .espt-ic,
	.espt-block.espt-block-bd-guarantee[class*="is-icon-anim-"] .bdg17-ic .bdg17-img {
		animation: none;
		transition: none;
	}

	.espt-block.espt-block-bd-guarantee:not([class*="is-icon-anim-"]) .bdg17:hover .bdg17-ic { transform: none; }
}