/* Bristle Up Product Page Tools
 * Styling is intentionally restrained: it inherits Flatsome's button styles for
 * the cart buttons and reproduces the screenshot's card layout for SUMO. It does
 * NOT impose its own brand aesthetic — it blends into the host theme.
 */

/* ---------------- Feature A: top buttons ---------------- */

.buppt-top-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
}

.buppt-top-actions .buppt-btn {
	/* native classes are cloned on via JS; these are gentle fallbacks only */
	cursor: pointer;
}

.buppt-btn-buynow {
	/* let Buy Now read as secondary unless the theme button styling overrides */
	opacity: 0.97;
}

.buppt-hide-mobile { display: none; }
@media (min-width: 850px) {
	.buppt-hide-mobile { display: flex; }
	.buppt-hide-desktop { display: none; }
}

/* ---------------- Sticky bar ---------------- */

.buppt-sticky-bar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 9990;
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: flex-end;
	padding: 10px 16px;
	background: #fff;
	border-top: 1px solid #e4e4e4;
	box-shadow: 0 -2px 12px rgba(0,0,0,.08);
	transform: translateY(110%);
	transition: transform .25s ease;
}
.buppt-sticky-bar.is-visible { transform: translateY(0); }

/* ---------------- Feature B: payment icons ---------------- */

.buppt-payment-icons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
}
.buppt-payment-icons .buppt-pi img {
	height: 24px;
	width: auto;
	display: block;
}
.buppt-payment-icons .buppt-pi-text {
	font-size: 12px;
	line-height: 1;
	padding: 5px 8px;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	color: #555;
	background: #fafafa;
}

/* ---------------- Feature C: SUMO selector cards ---------------- */

/* Wrapper is transparent until JS confirms SUMO actually rendered fields.
 * This preserves the "no plan = no box" guarantee. */
.buppt-sumo-wrap { display: contents; }
.buppt-sumo-wrap.buppt-sumo-empty { display: none; }

.buppt-sumo-wrap.buppt-sumo-active {
	display: block;
	margin: 18px 0;
}

.buppt-sumo-heading {
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .01em;
	margin: 0 0 10px;
}

/* SUMO's #_sumo_pp_payment_type_fields holds the radios as <label>s; we turn
 * each label into a card. */
.buppt-sumo-active #_sumo_pp_payment_type_fields > p {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

.buppt-sumo-card {
	position: relative;
	display: block;
	border: 1px solid var(--buppt-border, #ddd);
	border-radius: var(--buppt-radius, 6px);
	padding: 16px 52px 16px 18px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
	background: #fff;
}
.buppt-sumo-card:hover { border-color: var(--buppt-accent, #111); }

.buppt-sumo-card.is-selected {
	border-color: var(--buppt-accent, #111);
	background: var(--buppt-selbg, #f2f2f2);
	box-shadow: inset 0 0 0 1px var(--buppt-accent, #111);
}

/* Hide SUMO's native radio dot; we show a custom check on the right. */
.buppt-sumo-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.buppt-sumo-card::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid #c7c7c7;
	background: #fff;
	transition: background .15s ease, border-color .15s ease;
}
.buppt-sumo-card.is-selected::after {
	background: var(--buppt-accent, #111);
	border-color: var(--buppt-accent, #111);
}
.buppt-sumo-card.is-selected::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 23px;
	transform: translateY(-60%) rotate(45deg);
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	z-index: 1;
}

/* The breakdown table SUMO/our wrapper outputs inside the deposit card. */
.buppt-sumo-active .buppt-sumo-breakdown {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--buppt-border, #eee);
	font-size: 13px;
}
.buppt-sumo-active .buppt-sumo-breakdown .row {
	display: flex;
	justify-content: space-between;
	padding: 3px 0;
	color: #555;
}
.buppt-sumo-active .buppt-sumo-breakdown .row.total {
	font-weight: 600;
	color: #111;
}

.buppt-sumo-active .buppt-breakdown-hidden { display: none !important; }

/* ============================================================
 * Button style presets — apply to BOTH top and bottom.
 * Scope selectors:
 *   .buppt-top-actions          → our top container (.buppt-btn pair)
 *   body.buppt-bottom-style-X   → bottom preset, targets the native button
 *                                 (.single_add_to_cart_button / .bundle_add_to_cart_button)
 *                                 wherever the theme/bundles renders it, plus our
 *                                 .buppt-bottom-buynow.
 * Colours come from --buppt-* custom properties (top: .buppt-top-actions scope;
 * bottom: body.buppt-bottom scope). 'theme' preset has no rules (inherits Flatsome).
 * ============================================================ */

/* Bottom Buy Now base colour by preset (secondary action). */
body.buppt-bottom-style-solid_pair form.cart .buppt-bottom-buynow,
body.buppt-bottom-style-split_bar form.cart .buppt-bottom-buynow {
	background: var(--buppt-secondary-bg, #fff) !important;
	color: var(--buppt-secondary-text, #993C1D) !important;
	border: 1.5px solid var(--buppt-border, #993C1D) !important;
	border-radius: var(--buppt-radius, 8px) !important;
	font-weight: 500; cursor: pointer;
}
body.buppt-bottom-style-pill form.cart .buppt-bottom-buynow {
	background: var(--buppt-secondary-bg, #fff) !important;
	color: var(--buppt-secondary-text, #111) !important;
	border: 1px solid var(--buppt-border, #ccc) !important;
	border-radius: 999px !important; font-weight: 500; cursor: pointer;
}
body.buppt-bottom-style-tinted form.cart .buppt-bottom-buynow {
	background: var(--buppt-secondary-bg, #E1F5EE) !important;
	color: var(--buppt-secondary-text, #0F6E56) !important;
	border: none !important; border-radius: var(--buppt-radius, 8px) !important;
	font-weight: 500; cursor: pointer;
}
body.buppt-bottom-style-pill form.cart .buppt-bottom-buynow { border-radius: 999px !important; }
body.buppt-bottom-style-minimal form.cart .buppt-bottom-buynow {
	background: transparent !important; border: none !important;
	border-bottom: 2px solid var(--buppt-primary-bg, currentColor) !important;
	color: var(--buppt-secondary-text, inherit) !important;
	text-transform: uppercase; letter-spacing: .04em; font-weight: 500; cursor: pointer;
}

/* primary = top Add, or bottom native button */
.buppt-style-solid_pair .buppt-btn-add,
body.buppt-bottom-style-solid_pair form.cart .single_add_to_cart_button:not(.buppt-bottom-buynow), body.buppt-bottom-style-solid_pair form.cart .bundle_add_to_cart_button:not(.buppt-bottom-buynow),
.buppt-style-pill .buppt-btn-add,
body.buppt-bottom-style-pill form.cart .single_add_to_cart_button:not(.buppt-bottom-buynow), body.buppt-bottom-style-pill form.cart .bundle_add_to_cart_button:not(.buppt-bottom-buynow),
.buppt-style-tinted .buppt-btn-add,
body.buppt-bottom-style-tinted form.cart .single_add_to_cart_button:not(.buppt-bottom-buynow), body.buppt-bottom-style-tinted form.cart .bundle_add_to_cart_button:not(.buppt-bottom-buynow) {
	background: var(--buppt-primary-bg, #D85A30) !important;
	color: var(--buppt-primary-text, #fff) !important;
	border: none !important;
	border-radius: var(--buppt-radius, 8px) !important;
	font-weight: 500;
	cursor: pointer;
}

/* secondary = Buy Now (our button, both scopes) */
.buppt-style-solid_pair .buppt-btn-buynow {
	background: var(--buppt-secondary-bg, #fff) !important; color: var(--buppt-secondary-text, #993C1D) !important;
	border: 1.5px solid var(--buppt-border, #993C1D) !important; border-radius: var(--buppt-radius, 8px) !important;
	font-weight: 500; cursor: pointer;
}
.buppt-style-tinted .buppt-btn-buynow {
	background: var(--buppt-secondary-bg, #E1F5EE) !important; color: var(--buppt-secondary-text, #0F6E56) !important;
	border: none !important; border-radius: var(--buppt-radius, 8px) !important; font-weight: 500; cursor: pointer;
}

/* 2 · pill — round both primary and secondary in both scopes */
.buppt-style-pill .buppt-btn,
body.buppt-bottom-style-pill form.cart .single_add_to_cart_button:not(.buppt-bottom-buynow), body.buppt-bottom-style-pill form.cart .bundle_add_to_cart_button:not(.buppt-bottom-buynow) { border-radius: 999px !important; }
.buppt-style-pill .buppt-btn-buynow {
	background: var(--buppt-secondary-bg, #fff) !important; color: var(--buppt-secondary-text, #111) !important;
	border: 1px solid var(--buppt-border, #ccc) !important; font-weight: 500; cursor: pointer;
}

/* 3 · split bar — TOP renders as a joined bar; BOTTOM (native can't be split)
 *     falls back to the solid pair look so the choice still does something. */
.buppt-style-split_bar.buppt-top-actions {
	display: flex; gap: 0; border: 1px solid var(--buppt-border, #185FA5);
	border-radius: var(--buppt-radius, 8px); overflow: hidden;
}
.buppt-style-split_bar.buppt-top-actions .buppt-btn { border-radius: 0 !important; flex: 1; }
.buppt-style-split_bar.buppt-top-actions .buppt-btn-add {
	background: var(--buppt-primary-bg, #185FA5) !important; color: var(--buppt-primary-text, #fff) !important; border: none !important;
}
.buppt-style-split_bar.buppt-top-actions .buppt-btn-buynow {
	background: var(--buppt-secondary-bg, #fff) !important; color: var(--buppt-secondary-text, #185FA5) !important;
	border: none !important; border-left: 1px solid var(--buppt-border, #185FA5) !important;
}
body.buppt-bottom-style-split_bar form.cart .single_add_to_cart_button:not(.buppt-bottom-buynow), body.buppt-bottom-style-split_bar form.cart .bundle_add_to_cart_button:not(.buppt-bottom-buynow) {
	background: var(--buppt-primary-bg, #185FA5) !important; color: var(--buppt-primary-text, #fff) !important;
	border: none !important; border-radius: var(--buppt-radius, 8px) !important; font-weight: 500;
}
.buppt-style-split_bar .buppt-btn-buynow {
	background: var(--buppt-secondary-bg, #fff) !important; color: var(--buppt-secondary-text, #185FA5) !important;
	border: 1.5px solid var(--buppt-border, #185FA5) !important; border-radius: var(--buppt-radius, 8px) !important;
	font-weight: 500; cursor: pointer;
}

/* 5 · minimal — target our buttons AND the native bottom button */
.buppt-style-minimal .buppt-btn,
body.buppt-bottom-style-minimal form.cart .single_add_to_cart_button:not(.buppt-bottom-buynow), body.buppt-bottom-style-minimal form.cart .bundle_add_to_cart_button:not(.buppt-bottom-buynow) {
	background: transparent !important; border-radius: 0 !important;
	letter-spacing: .04em; text-transform: uppercase; font-size: 14px; font-weight: 500; cursor: pointer;
}
.buppt-style-minimal .buppt-btn-add,
body.buppt-bottom-style-minimal form.cart .single_add_to_cart_button:not(.buppt-bottom-buynow), body.buppt-bottom-style-minimal form.cart .bundle_add_to_cart_button:not(.buppt-bottom-buynow) {
	border: 1px solid var(--buppt-secondary-text, currentColor) !important;
	color: var(--buppt-secondary-text, inherit) !important;
}
.buppt-style-minimal .buppt-btn-buynow {
	border: none !important; border-bottom: 2px solid var(--buppt-primary-bg, currentColor) !important;
	color: var(--buppt-secondary-text, inherit) !important;
}

.buppt-sumo-active .buppt-breakdown-hidden { display: none !important; }

/* ============================================================
 * Bottom Buy Now side-by-side layout (v1.2.3 + v1.2.4).
 * For variable/bundle/composite, JS tags the native button's own wrapper
 * (.woocommerce-variation-add-to-cart / .bundle_button / .composite_button)
 * with .buppt-bottom-button-row. For SIMPLE products, JS builds a NEW inner
 * .buppt-bottom-button-row and moves only the quantity, native Add to Cart, and
 * our bottom Buy Now into it — it never tags or flexes the whole form, so
 * Product Add-Ons fields and other form content are never reflowed.
 * We flex ONLY .buppt-bottom-button-row.
 * ============================================================ */

.buppt-bottom-button-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.buppt-bottom-button-row .quantity {
	flex: 0 0 auto;
}

.buppt-bottom-button-row .single_add_to_cart_button,
.buppt-bottom-button-row .buppt-bottom-buynow {
	flex: 0 1 auto;
	margin: 0;
}

/* Keep the button labels on one line so "Add to cart" never wraps to two rows. */
.buppt-bottom-button-pair .single_add_to_cart_button,
.buppt-bottom-button-pair .buppt-bottom-buynow {
	white-space: nowrap;
}

@media (max-width: 600px) {
	/* On phones the quantity + fused bar can't both fit on one line without
	 * squashing the buttons (causing the label to wrap). Let the quantity sit on
	 * its own line and the fused pair span the full width, so each half has room
	 * and the labels stay on one line. */
	.buppt-bottom-button-row {
		gap: 8px;
	}
	.buppt-bottom-button-row .quantity {
		flex: 0 0 auto;
	}
	.buppt-bottom-button-pair {
		flex: 1 1 100%;
		width: 100%;
	}
	.buppt-bottom-button-pair .single_add_to_cart_button:not(.buppt-bottom-buynow),
	.buppt-bottom-button-pair .bundle_add_to_cart_button:not(.buppt-bottom-buynow),
	.buppt-bottom-button-pair .buppt-bottom-buynow {
		flex: 1 1 50%;
		min-width: 0;
		padding-left: 8px;
		padding-right: 8px;
	}
}

/* ============================================================
 * v1.3.3 — Bottom styling applied DIRECTLY to the native button.
 * The JS adds these classes to the actual elements (robust vs body-class /
 * cache timing / DOM distance):
 *   .buppt-bottom-native      → the native Add to Cart button
 *   .buppt-bn-buynow-styled   → our bottom Buy Now
 *   .buppt-bn-style-<preset>  → the chosen preset, on both
 * Vars come from :root (always present). These element-targeted rules are the
 * authoritative bottom path; the body.buppt-bottom-style-* rules above remain a
 * harmless fallback.
 * ============================================================ */

/* primary native button — solid_pair / pill / tinted / split_bar share a solid fill */
form.cart .buppt-bottom-native.buppt-bn-style-solid_pair,
form.cart .buppt-bottom-native.buppt-bn-style-pill,
form.cart .buppt-bottom-native.buppt-bn-style-tinted,
form.cart .buppt-bottom-native.buppt-bn-style-split_bar {
	background: var(--buppt-primary-bg, #D85A30) !important;
	color: var(--buppt-primary-text, #fff) !important;
	border: none !important;
	border-radius: var(--buppt-radius, 8px) !important;
	font-weight: 500; cursor: pointer;
}
form.cart .buppt-bottom-native.buppt-bn-style-pill { border-radius: 999px !important; }
form.cart .buppt-bottom-native.buppt-bn-style-minimal {
	background: transparent !important; border-radius: 0 !important;
	border: 1px solid var(--buppt-secondary-text, currentColor) !important;
	color: var(--buppt-secondary-text, inherit) !important;
	text-transform: uppercase; letter-spacing: .04em; font-weight: 500; cursor: pointer;
}

/* secondary Buy Now */
form.cart .buppt-bn-buynow-styled.buppt-bn-style-solid_pair,
form.cart .buppt-bn-buynow-styled.buppt-bn-style-split_bar {
	background: var(--buppt-secondary-bg, #fff) !important;
	color: var(--buppt-secondary-text, #993C1D) !important;
	border: 1.5px solid var(--buppt-border, #993C1D) !important;
	border-radius: var(--buppt-radius, 8px) !important;
	font-weight: 500; cursor: pointer;
}
form.cart .buppt-bn-buynow-styled.buppt-bn-style-pill {
	background: var(--buppt-secondary-bg, #fff) !important;
	color: var(--buppt-secondary-text, #111) !important;
	border: 1px solid var(--buppt-border, #ccc) !important;
	border-radius: 999px !important; font-weight: 500; cursor: pointer;
}
form.cart .buppt-bn-buynow-styled.buppt-bn-style-tinted {
	background: var(--buppt-secondary-bg, #E1F5EE) !important;
	color: var(--buppt-secondary-text, #0F6E56) !important;
	border: none !important; border-radius: var(--buppt-radius, 8px) !important;
	font-weight: 500; cursor: pointer;
}
form.cart .buppt-bn-buynow-styled.buppt-bn-style-minimal {
	background: transparent !important; border: none !important;
	border-bottom: 2px solid var(--buppt-primary-bg, currentColor) !important;
	color: var(--buppt-secondary-text, inherit) !important;
	text-transform: uppercase; letter-spacing: .04em; font-weight: 500; cursor: pointer;
}

/* ============================================================
 * v1.3.12 — Bottom split_bar: TRUE joined bar, scoped to the button PAIR.
 * .buppt-bottom-button-row = outer layout (quantity + pair, side by side).
 * .buppt-bottom-button-pair = ONLY the native Add to Cart + our Buy Now.
 * The split-bar border/rounding/overflow fuses the PAIR only — never the
 * quantity field, which sits in the row outside the pair.
 * ============================================================ */

/* Base pair layout (all presets): the two buttons sit together. */
.buppt-bottom-button-pair {
	display: inline-flex;
	align-items: stretch;
	gap: 12px;
}

/* split_bar: collapse the gap and fuse the two halves into one bar.
 * Targeted both via the body class AND the pair's own preset class, so the join
 * survives even if the body class is absent (e.g. RUCSS / cache timing). */
body.buppt-bottom-style-split_bar .buppt-bottom-button-pair,
.buppt-bottom-button-pair.buppt-bn-style-split_bar {
	gap: 0 !important;
	border: 1px solid var(--buppt-border, #185FA5);
	border-radius: var(--buppt-radius, 8px);
	overflow: hidden;
}
body.buppt-bottom-style-split_bar form.cart .buppt-bottom-button-pair .single_add_to_cart_button:not(.buppt-bottom-buynow),
body.buppt-bottom-style-split_bar form.cart .buppt-bottom-button-pair .bundle_add_to_cart_button:not(.buppt-bottom-buynow),
form.cart .buppt-bottom-button-pair.buppt-bn-style-split_bar .single_add_to_cart_button:not(.buppt-bottom-buynow),
form.cart .buppt-bottom-button-pair.buppt-bn-style-split_bar .bundle_add_to_cart_button:not(.buppt-bottom-buynow) {
	border-radius: 0 !important;
	border: none !important;
	margin: 0 !important;
}
body.buppt-bottom-style-split_bar form.cart .buppt-bottom-button-pair .buppt-bottom-buynow,
form.cart .buppt-bottom-button-pair.buppt-bn-style-split_bar .buppt-bottom-buynow {
	border-radius: 0 !important;
	border: none !important;
	border-left: 1px solid var(--buppt-border, #185FA5) !important;
	margin: 0 !important;
}