/* =========================================================
   Drezin — Role Discount Savings Badge
   Override the single CSS custom property from a child theme
   or wp-admin custom CSS to match your brand colour.
   ========================================================= */

:root {
	--drz-green:        #2a8c4a;
	--drz-green-light:  #e8f5ec;
	--drz-green-mid:    #c2e0cc;
	--drz-text:         #1a1a1a;
	--drz-text-muted:   #555;
	--drz-border:       #d4e8d9;
	--drz-radius:       8px;
	--drz-icon-size:    44px;
}

/* ── Wrapper ─────────────────────────────────────────────── */
.drz-savings-badge {
	display:         inline-flex;
	align-items:     center;
	gap:             14px;
	background:      #fff;
	border:          1.5px solid var(--drz-border);
	border-radius:   var(--drz-radius);
	padding:         10px 16px 10px 10px;
	margin:          10px 0 6px;
	max-width:       100%;
	box-shadow:      0 1px 4px rgba(42, 140, 74, 0.08);
	box-sizing:      border-box;
}

/* Guest variant — same solid appearance as the active variant */
.drz-savings-badge--guest {
	background: #fafffe;
}

/* ── Icon container ──────────────────────────────────────── */
.drz-savings-badge__icon {
	flex-shrink:    0;
	width:          var(--drz-icon-size);
	height:         var(--drz-icon-size);
	background:     var(--drz-green-light);
	border-radius:  6px;
	display:        flex;
	align-items:    center;
	justify-content: center;
}

.drz-savings-badge__icon svg {
	width:  24px;
	height: 24px;
	fill:   none;
	stroke: var(--drz-green);
}

/* ── Text body ───────────────────────────────────────────── */
.drz-savings-badge__body {
	display:        flex;
	flex-direction: column;
	gap:            2px;
	min-width:      0;
}

.drz-savings-badge__amount {
	display:     block;
	font-size:   1rem;
	font-weight: 700;
	color:       var(--drz-green);
	line-height: 1.2;
	white-space: nowrap;
}

.drz-savings-badge__sub {
	display:     block;
	font-size:   0.8rem;
	color:       var(--drz-text-muted);
	line-height: 1.3;
}

.drz-savings-badge__sub a {
	color:           var(--drz-green);
	font-weight:     600;
	text-decoration: none;
}

.drz-savings-badge__sub a:hover {
	text-decoration: underline;
}

/* ── Tooltip ─────────────────────────────────────────────── */
.drz-savings-badge__tooltip {
	position:      relative;
	display:       inline-block;
	cursor:        default;
	color:         var(--drz-text-muted);
	font-size:     0.85em;
	vertical-align: middle;
	margin-left:   3px;
}

.drz-savings-badge__tooltip-text {
	visibility:      hidden;
	opacity:         0;
	width:           220px;
	background:      #fff;
	color:           var(--drz-text);
	font-size:       0.78rem;
	line-height:     1.4;
	border:          1px solid var(--drz-border);
	border-radius:   6px;
	padding:         8px 10px;
	box-shadow:      0 4px 12px rgba(0, 0, 0, 0.12);
	position:        absolute;
	bottom:          calc(100% + 6px);
	left:            50%;
	transform:       translateX(-50%);
	transition:      opacity 0.18s ease;
	pointer-events:  none;
	z-index:         99;
	white-space:     normal;
}

/* small arrow */
.drz-savings-badge__tooltip-text::after {
	content:      '';
	position:     absolute;
	top:          100%;
	left:         50%;
	transform:    translateX(-50%);
	border:       5px solid transparent;
	border-top-color: var(--drz-border);
}

.drz-savings-badge__tooltip:hover .drz-savings-badge__tooltip-text,
.drz-savings-badge__tooltip:focus-within .drz-savings-badge__tooltip-text {
	visibility: visible;
	opacity:    1;
}

/* ── Amount update animation (triggered via JS class toggle) */
@keyframes drz-savings-pulse {
	0%   { opacity: 1; transform: translateY(0); }
	35%  { opacity: 0; transform: translateY(-4px); }
	65%  { opacity: 0; transform: translateY(4px); }
	100% { opacity: 1; transform: translateY(0); }
}

.drz-savings-badge__amount--updating {
	animation: drz-savings-pulse 0.35s ease both;
}

/* ── Price row — badge sits beside the price on desktop ──── */
/* Pure CSS approach — no DOM manipulation, badge stays in its original DOM   */
/* position as a sibling of the price container. CSS :has() makes the price   */
/* container inline so the badge naturally flows on the same line.            */
/* :has() is supported in Chrome 105+, Firefox 121+, Safari 15.4+.            */
@media (min-width: 768px) {
	/* Make the Woodmart price wrapper inline when our badge follows it */
	.wd-single-price:has(+ .drz-savings-badge) {
		display:        inline-flex !important;
		align-items:    center;
		vertical-align: middle;
	}

	/* Standard WooCommerce p.price (no Woodmart wrapper) */
	p.price:has(+ .drz-savings-badge) {
		display:        inline-flex !important;
		align-items:    center;
		vertical-align: middle;
	}

	/* Badge alignment when beside the price */
	.wd-single-price + .drz-savings-badge,
	p.price + .drz-savings-badge {
		display:        inline-flex;
		vertical-align: middle;
		margin-top:     0;
	}
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 480px) {
	.drz-savings-badge {
		gap:     10px;
		padding: 8px 12px 8px 8px;
	}

	:root {
		--drz-icon-size: 38px;
	}

	.drz-savings-badge__amount {
		font-size: 0.92rem;
	}
}