/* ============================================================
   Solucionadoras Upsell Widget  v1.3
   Layout (matches wanted-design):
     LINE 1 — headline (full width, bold)
     LINE 2 — [img] [name] [price right-aligned]
     LINE 3 — [button right-aligned]
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@100..900&display=swap');

/* ── Widget container ─────────────────────────────────────── */
.soluc-upsell-widget {
	background: #faf6ed;
	border-radius: 14px;
	padding: 16px 18px 18px;
	box-sizing: border-box;
	width: 100%;
	/* Reset any inherited flex/grid behaviour from the parent */
	display: block !important;
}

/* ── LINE 1: Headline — full width ────────────────────────── */
.soluc-upsell-headline {
	display: block;
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1.45;
	color: #584435;
	margin: 0 0 28px;
	padding: 0;
	width: 100%;
}

/* ── LINE 2: Product row — img · name · price ─────────────── */
.soluc-upsell-product {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 12px;
	margin-bottom: 14px;
	width: 100%;
}

.soluc-upsell-img {
	flex: 0 0 68px !important;   /* never shrink or grow */
	width: 68px !important;
	height: 68px !important;
	border-radius: 8px;
	overflow: hidden;
	background: #ddd8cc;
}

.soluc-upsell-img img,
.soluc-upsell-img .soluc-upsell-thumb {
	width: 68px !important;
	height: 68px !important;
	max-width: 68px !important;
	max-height: 68px !important;
	min-width: 0 !important;
	object-fit: cover !important;
	display: block !important;
	border-radius: 8px;
}

.soluc-upsell-name {
	flex: 1 1 auto !important;
	font-size: 0.9rem;
	font-weight: 600;
	color: #1a1208;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.soluc-upsell-price {
	flex: 0 0 auto !important;
	font-size: 0.9rem;
	font-weight: 400;
	color: #1a1208;
	white-space: nowrap;
	margin-left: auto;
}

.soluc-upsell-price .woocommerce-Price-amount {
	font-size: inherit;
	color: inherit;
}

/* ── LINE 3: Button — right-aligned ──────────────────────── */
.soluc-upsell-footer {
	display: flex !important;
	flex-direction: row !important;
	justify-content: flex-end !important;
}

.soluc-upsell-btn {
	background: #584435 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 12px 26px !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	cursor: pointer;
	white-space: nowrap;
	line-height: 1.2;
	transition: background 0.18s ease, transform 0.1s ease;
	outline: none !important;
	box-shadow: none !important;
	display: inline-block;
}

.soluc-upsell-btn:hover {
	background: #6e5545 !important;
}

.soluc-upsell-btn:active {
	transform: scale(0.97);
}

.soluc-upsell-btn:disabled,
.soluc-upsell-btn.is-loading {
	opacity: 0.65;
	cursor: not-allowed;
}

/* ── Mini-cart spacing (BuddyBoss + Elementor Pro) ──────────── */
/* Elementor Pro template: widget is placed just before
   .elementor-menu-cart__subtotal (no float context) */
.header-mini-cart .soluc-upsell-widget,
.widget_shopping_cart_content .soluc-upsell-widget {
	margin: 10px 15px 12px;  /* all-around gap matching BB 15px side padding */
	width: auto;
}

/* ── Checkout spacing ─────────────────────────────────────── */
.woocommerce-checkout .soluc-upsell-widget {
	margin: 0 0 28px;
}

/* Checkout-specific overrides — the checkout uses a different HTML structure
   (large image left, text right, button far right) rendered by widget_html_checkout() */
.soluc-upsell-checkout {
	padding: 20px 24px;
}

.soluc-upsell-checkout .soluc-upsell-btn {
	white-space: nowrap;
}

/* ── Checkout headline: padding-right nudges the line-break after "especial" ── */
.soluc-checkout-headline {
	padding-right: 5em;
}

/* ── Dismiss animation ────────────────────────────────────── */
.soluc-upsell-widget.is-hiding {
	animation: solucFadeOut 0.3s ease forwards;
	pointer-events: none;
}

@keyframes solucFadeOut {
	from { opacity: 1; transform: translateY(0); }
	to   { opacity: 0; transform: translateY(-6px); }
}

/* ── Mobile overrides (≤ 600 px) ─────────────────────────── */
@media (max-width: 600px) {

	/* ── Mini-cart: force everything visible ─────────────────── */
	.soluc-upsell-widget {
		display: block !important;
		visibility: visible !important;
		overflow: visible !important;
		max-width: 100% !important;
	}

	.header-mini-cart .soluc-upsell-widget,
	.elementor-menu-cart__container .soluc-upsell-widget,
	.widget_shopping_cart_content .soluc-upsell-widget {
		margin: 8px 10px 10px !important;
		padding: 12px 14px 14px !important;
		width: auto !important;
	}

	/* ── Mini-cart image: slightly smaller ───────────────────── */
	.soluc-upsell-img {
		flex: 0 0 54px !important;
		width: 54px !important;
		height: 54px !important;
	}
	.soluc-upsell-img img,
	.soluc-upsell-img .soluc-upsell-thumb {
		width: 54px !important;
		height: 54px !important;
		max-width: 54px !important;
		max-height: 54px !important;
	}

	/* ── Checkout: row layout preserved, button wraps to own line ─ */
	.soluc-checkout-headline {
		padding-right: 0 !important;   /* no padding — full width on mobile */
		font-size: 16px !important;
	}

	.soluc-upsell-checkout .soluc-checkout-wrap {
		flex-direction: row !important;   /* keep image LEFT, body RIGHT */
		flex-wrap: wrap !important;       /* button drops to its own line */
		gap: 12px !important;
	}

	.soluc-upsell-checkout .soluc-checkout-img {
		flex: 0 0 70px !important;
		width: 70px !important;
		height: 70px !important;
		align-self: flex-start !important;
	}
	.soluc-upsell-checkout .soluc-checkout-img img {
		width: 70px !important;
		height: 70px !important;
		max-width: 70px !important;
		max-height: 70px !important;
	}

	.soluc-upsell-checkout .soluc-checkout-body {
		flex: 1 1 0 !important;
		min-width: 0 !important;
	}

	.soluc-upsell-checkout .soluc-checkout-name {
		font-size: 16px !important;
	}

	.soluc-upsell-checkout .soluc-checkout-price {
		font-size: 14px !important;
		font-weight: 400 !important;
	}

	/* Button spans the full width below image+text */
	.soluc-upsell-checkout .soluc-checkout-btn {
		flex: 0 0 100% !important;
		width: 100% !important;
		align-self: stretch !important;
		margin-bottom: 0 !important;
		text-align: center !important;
	}
}