/**
 * VMBX Price & Discount Badge — premium, Apple-inspired styling.
 * All class names are prefixed `vmbx-` to avoid collisions with
 * WooCommerce, Elementor, Astra, and other theme/plugin CSS.
 */

.vmbx-price-badge-wrapper {
	--vmbx-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, sans-serif;
	--vmbx-sale-color: #111827;
	--vmbx-regular-color: #9CA3AF;
	--vmbx-badge-radius: 999px;

	display: block;
	position: relative;
	font-family: var(--vmbx-font);
	line-height: 1.2;
}

.vmbx-price-badge-wrapper.vmbx-has-overlay-badge {
	/* Allow overlay badge positioning to be relative to this wrapper
	   when it directly wraps or sits beside a product image. */
	position: relative;
}

.vmbx-price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	justify-content: flex-start;
}

/* ---------- Sale price (visually dominant) ---------- */

.vmbx-sale-price {
	font-family: var(--vmbx-font);
	font-weight: 700;
	font-size: 22px;
	color: var(--vmbx-sale-color);
	letter-spacing: -0.01em;
}

.vmbx-sale-price .woocommerce-Price-amount {
	font-weight: inherit;
	color: inherit;
}

/* ---------- Regular price / MRP (struck-through) ---------- */

.vmbx-regular-price {
	font-family: var(--vmbx-font);
	font-weight: 400;
	font-size: 15px;
	color: var(--vmbx-regular-color);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	opacity: 0.9;
}

.vmbx-regular-price .woocommerce-Price-amount {
	font-weight: inherit;
	color: inherit;
}

/* ---------- Discount badge ---------- */

.vmbx-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--vmbx-font);
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
	color: #FFFFFF;
	background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
	border-radius: var(--vmbx-badge-radius);
	padding: 4px 12px;
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.vmbx-badge[hidden] {
	display: none !important;
}

.vmbx-badge--inline {
	position: relative;
}

.vmbx-badge--overlay {
	position: absolute;
	z-index: 2;
}

.vmbx-badge--top-left     { top: 12px; left: 12px; }
.vmbx-badge--top-right    { top: 12px; right: 12px; }
.vmbx-badge--bottom-left  { bottom: 12px; left: 12px; }
.vmbx-badge--bottom-right { bottom: 12px; right: 12px; }

/* Subtle premium hover lift when the badge sits on a hoverable card */
a:hover > .vmbx-price-badge-wrapper .vmbx-badge,
.product:hover .vmbx-badge {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.32);
}

/* ---------- Accessibility ---------- */

.vmbx-price-badge-wrapper .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Editor placeholder ---------- */

.vmbx-editor-placeholder {
	padding: 16px;
	border: 1px dashed #D1D5DB;
	border-radius: 12px;
	color: #6B7280;
	font-family: var(--vmbx-font);
	font-size: 13px;
	background: #F9FAFB;
}

/* ---------- Responsive: tablet ---------- */

@media (max-width: 1024px) {
	.vmbx-sale-price {
		font-size: 20px;
	}
}

/* ---------- Responsive: mobile ---------- */

@media (max-width: 767px) {
	.vmbx-price-row {
		gap: 8px;
		row-gap: 6px;
	}

	.vmbx-sale-price {
		font-size: 17px;
	}

	.vmbx-regular-price {
		font-size: 13px;
	}

	.vmbx-badge {
		font-size: 11px;
		padding: 3px 10px;
	}

	/* Keep the badge readable and prevent the price row from wrapping
	   into a broken multi-line layout on narrow product cards. */
	.vmbx-price-row {
		flex-wrap: wrap;
	}

	.vmbx-badge--overlay {
		top: 8px;
		right: 8px;
		left: auto;
		bottom: auto;
	}

	.vmbx-badge--overlay.vmbx-badge--top-left,
	.vmbx-badge--overlay.vmbx-badge--bottom-left {
		left: 8px;
		right: auto;
	}

	.vmbx-badge--overlay.vmbx-badge--bottom-left,
	.vmbx-badge--overlay.vmbx-badge--bottom-right {
		bottom: 8px;
		top: auto;
	}
}

/* ---------- Product grid / loop context ---------- */

.products .vmbx-price-badge-wrapper,
.elementor-loop-container .vmbx-price-badge-wrapper {
	margin-top: 6px;
}