/* =============================================================================
   W3 Sales Booster – Frontend / Checkout Styles
   ============================================================================= */

/* ── Container ─────────────────────────────────────────────────────────────── */
.w3-order-bump {
	--w3ob-bg: #faf7fe;
	--w3ob-border-color: #7f54b3;
	--w3ob-accent: #7f54b3;
	--w3ob-badge-text: #fff;
	--w3ob-title-color: #1d2327;
	--w3ob-body-color: #50575e;
	--w3ob-price-color: #7f54b3;
	--w3ob-footer-bg: #f2eafa;
	--w3ob-footer-border: #e8d8f8;

	--w3ob-margin-y: 20px;
	--w3ob-border-width: 2px;
	--w3ob-border-style: dashed;
	--w3ob-border-radius: 8px;

	--w3ob-body-padding-y: 16px;
	--w3ob-body-padding-x: 20px;
	--w3ob-body-gap: 16px;

	--w3ob-footer-padding-y: 12px;
	--w3ob-footer-padding-x: 20px;

	--w3ob-title-font-size: 16px;
	--w3ob-body-font-size: 14px;
	--w3ob-price-font-size: 20px;

	margin: var(--w3ob-margin-y) 0;
	border-radius: var(--w3ob-border-radius);
	border: var(--w3ob-border-width) var(--w3ob-border-style) var(--w3ob-border-color);
	background: var(--w3ob-bg);
	overflow: hidden;
	animation: wcob-slide-in .35s ease both;
	text-align: left;
	font-family: var(--w3ob-font-family, inherit);
}

/* Ensure the "below order review" position doesn't inherit table cell styling. */
.woocommerce-checkout-review-order-table .w3-order-bump-row td {
	padding: 0;
	border: 0;
	background: transparent;
}

@keyframes wcob-slide-in {
	from {
		opacity: 0;
		transform: translateY( -8px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

.w3-order-bump__inner {
	padding: 0;
}

/* ── Header ribbon ──────────────────────────────────────────────────────────── */
.w3-order-bump__header {
	background: var(--w3ob-accent);
	padding: 6px 20px;
	text-align: center;
}

.w3-order-bump__badge {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--w3ob-badge-text);
}

/* ── Body layout ────────────────────────────────────────────────────────────── */
.w3-order-bump__body {
	display: flex;
	gap: var(--w3ob-body-gap);
	padding: var(--w3ob-body-padding-y) var(--w3ob-body-padding-x);
	align-items: flex-start;
}

/* ── Product image ──────────────────────────────────────────────────────────── */
.w3-order-bump__image {
	flex: 0 0 80px;
}

.w3-order-bump__image img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid #e0e0e0;
	display: block;
}

/* ── Content ────────────────────────────────────────────────────────────────── */
.w3-order-bump__content {
	flex: 1;
	min-width: 0;
}

.w3-order-bump__title {
	margin: 0 0 6px;
	font-size: var(--w3ob-title-font-size);
	font-weight: 700;
	color: var(--w3ob-title-color);
	line-height: 1.3;
}

.w3-order-bump__description {
	margin: 0 0 10px;
	font-size: var(--w3ob-body-font-size);
	color: var(--w3ob-body-color);
	line-height: 1.5;
}

/* ── Pricing ────────────────────────────────────────────────────────────────── */
.w3-order-bump__price-wrap {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.w3-order-bump__price {
	font-size: var(--w3ob-price-font-size);
	font-weight: 700;
	color: var(--w3ob-price-color);
}

.w3-order-bump__original-price {
	font-size: 14px;
	color: #888;
}

.w3-order-bump__original-price del {
	color: #aaa;
}

.w3-order-bump__savings {
	display: inline-block;
	background: #d4edda;
	color: #155724;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 10px;
	letter-spacing: .04em;
}

/* ── Quantity selector ──────────────────────────────────────────────────────── */
.w3-order-bump__qty-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--w3ob-body-color);
}

.w3-order-bump__qty {
	width: 60px;
	padding: 4px 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	text-align: center;
}

/* ── Footer / Checkbox ──────────────────────────────────────────────────────── */
.w3-order-bump__footer {
	padding: var(--w3ob-footer-padding-y) var(--w3ob-footer-padding-x);
	border-top: 1px solid var(--w3ob-footer-border);
	background: var(--w3ob-footer-bg);
	display: flex;
	align-items: center;
	gap: 10px;
}

.w3-order-bump__checkbox-label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: #3c434a;
	user-select: none;
}

.w3-order-bump__checkbox {
	width: 18px;
	height: 18px;
	accent-color: var(--w3ob-accent);
	cursor: pointer;
	flex-shrink: 0;
}

/* ── Loading spinner ────────────────────────────────────────────────────────── */
.w3-order-bump__spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid var(--w3ob-border-color);
	border-top-color: var(--w3ob-accent);
	border-radius: 50%;
	animation: wcob-spin .7s linear infinite;
}

@keyframes wcob-spin {
	to { transform: rotate( 360deg ); }
}

/* ── Accepted state ─────────────────────────────────────────────────────────── */
.w3-order-bump--accepted {
	--w3ob-border-color: #28a745;
	--w3ob-bg: #f4fef6;
	--w3ob-accent: #28a745;
	--w3ob-price-color: #28a745;
	--w3ob-footer-bg: #e9f9ec;
	--w3ob-footer-border: #b3e6bc;
}

.w3-order-bump--accepted .w3-order-bump__header {
	background: var(--w3ob-accent);
}

.w3-order-bump--accepted .w3-order-bump__footer {
	background: var(--w3ob-footer-bg);
	border-top-color: var(--w3ob-footer-border);
}

/* ── Disabled / loading state ───────────────────────────────────────────────── */
.w3-order-bump--loading {
	pointer-events: none;
	opacity: .7;
}

/* ── Mobile tweaks ──────────────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
	.w3-order-bump__body {
		flex-direction: column;
		gap: 12px;
	}

	.w3-order-bump__image {
		flex: none;
	}

	.w3-order-bump__image img {
		width: 64px;
		height: 64px;
	}

	.w3-order-bump__price {
		font-size: var(--w3ob-price-font-size);
	}
}