/*
 * All rules are scoped under #cpo-purchase-box-wrapper (an ID, not a class)
 * and use !important on visual properties. This is deliberate: Elementor
 * and most themes style things with class selectors, which an ID always
 * beats in specificity, and !important closes the rest of the gap against
 * page builder "global styles" / theme resets that also use !important.
 * Do not rename the wrapper ID without updating this file.
 */

#cpo-purchase-box-wrapper,
#cpo-purchase-box-wrapper * {
	box-sizing: border-box !important;
	font-family: inherit !important;
	line-height: normal !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

#cpo-purchase-box-wrapper { margin: 20px 0 !important; display: flex !important; flex-direction: column !important; }
#cpo-purchase-box-wrapper .cpo-section { margin: 20px 0 18px 0 !important; padding: 0 !important; }
#cpo-purchase-box-wrapper .cpo-label {
	font-size: 12px !important; letter-spacing: 1px !important; text-transform: uppercase !important;
	color: var(--cpo-primary,#0058FA) !important; margin: 0 0 10px 0 !important; font-weight: 600 !important;
}

/*
 * Display order on the product page. Change the numbers here to reorder
 * sections — lower number = higher up the page. The plugin renders the real
 * WooCommerce Add to Cart form for the CURRENT product itself (see
 * CPO_Frontend::render() in PHP) directly inside this wrapper, then uses
 * display:contents so its own inner parts (variation dropdowns vs. the
 * actual button/quantity) can be individually ordered here too, right
 * alongside our sections — all without ever detaching any input from the
 * form, so variation selection keeps working.
 */
#cpo-purchase-box-wrapper form.cart { display: contents !important; }
/* Some variation-swatch plugins (e.g. "Variation Swatches for WooCommerce",
 * which adds the wvs-loaded class) wrap BOTH the variations table AND the
 * add-to-cart/quantity block together inside one extra <div> that has no
 * class, only a data-product_id attribute. We make that wrapper transparent
 * too, so its contents can be ordered individually just like the form's own
 * direct children. */
#cpo-purchase-box-wrapper form.cart > div[data-product_id] { display: contents !important; }
/* Every direct child of the form defaults to order 4 (this is where Add to
 * Cart / quantity / any theme wrapper around them lands), except the
 * variations dropdown table which is pinned to order 1. This is deliberately
 * broad (not tied to exact class names) because themes often wrap the
 * quantity+button pair in their own extra <div>, and targeting only the
 * inner classes would miss that wrapper and leave it at its default order. */
#cpo-purchase-box-wrapper form.cart > *,
#cpo-purchase-box-wrapper form.cart > div[data-product_id] > * { order: 40 !important; }
#cpo-purchase-box-wrapper form.cart > .variations,
#cpo-purchase-box-wrapper form.cart table.variations { order: 10 !important; }
#cpo-purchase-box-wrapper .cpo-quantity { order: 20 !important; }
#cpo-purchase-box-wrapper .cpo-bundle { order: 30 !important; }
#cpo-purchase-box-wrapper .cpo-cart-bar,
#cpo-purchase-box-wrapper .cpo-cart-summary { order: 35 !important; }
#cpo-purchase-box-wrapper .cpo-actions-row { order: 50 !important; }
#cpo-purchase-box-wrapper .cpo-subscribe { order: 60 !important; }
#cpo-purchase-box-wrapper .cpo-countdown { order: 70 !important; }
#cpo-purchase-box-wrapper .cpo-badges { order: 80 !important; }

/* Quantity stepper */
#cpo-purchase-box-wrapper .cpo-stepper {
	display: inline-flex !important; align-items: center !important;
	border: 1px solid #ddd !important; border-radius: 8px !important; overflow: hidden !important;
}
#cpo-purchase-box-wrapper .cpo-stepper button {
	width: 38px !important; height: 38px !important; border: 0 !important; background: #eef5ff !important;
	color: var(--cpo-primary,#0058FA) !important; font-size: 18px !important; cursor: pointer !important; line-height: 1 !important;
	padding: 0 !important; margin: 0 !important; box-shadow: none !important;
}
#cpo-purchase-box-wrapper .cpo-stepper button:hover { background: #dceaff !important; }
#cpo-purchase-box-wrapper .cpo-step-value { width: 44px !important; text-align: center !important; font-weight: 600 !important; display: inline-block !important; }

/* Bundle cards */
#cpo-purchase-box-wrapper .cpo-bundle-cards { display: flex !important; gap: 10px !important; flex-wrap: wrap !important; list-style: none !important; }
#cpo-purchase-box-wrapper .cpo-bundle-card {
	position: relative !important; flex: 1 1 140px !important;
	border: 2px solid #e9e9ec !important; border-radius: 12px !important; background: #fff !important;
	padding: 16px 10px 14px !important; text-align: center !important; cursor: pointer !important;
	display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important;
	box-shadow: none !important; outline: none !important;
}
#cpo-purchase-box-wrapper .cpo-bundle-card.is-selected { border-color: var(--cpo-primary,#0058FA) !important; background: #fff !important; }
#cpo-purchase-box-wrapper .cpo-bundle-card.is-featured { border-color: var(--cpo-primary,#0058FA) !important; }
#cpo-purchase-box-wrapper .cpo-check {
	display: none !important; position: absolute !important; top: 10px !important; right: 10px !important;
	width: 20px !important; height: 20px !important; border-radius: 50% !important; background: var(--cpo-primary,#0058FA) !important;
	color: #fff !important; font-size: 12px !important; line-height: 20px !important; text-align: center !important;
}
#cpo-purchase-box-wrapper .cpo-bundle-card.is-selected .cpo-check { display: block !important; }
#cpo-purchase-box-wrapper .cpo-badge {
	position: absolute !important; top: -12px !important; left: 50% !important; transform: translateX(-50%) !important;
	background: var(--cpo-primary,#0058FA) !important; color: #fff !important; font-size: 10px !important; font-weight: 700 !important;
	padding: 4px 12px !important; border-radius: 20px !important; white-space: nowrap !important;
}
#cpo-purchase-box-wrapper .cpo-bottle-icon { display: flex !important; justify-content: center !important; flex-wrap: wrap !important; gap: 2px !important; min-height: 34px !important; align-items: flex-end !important; margin: 4px 0 !important; }
#cpo-purchase-box-wrapper .cpo-vial { width: 12px !important; height: 30px !important; max-width: none !important; }
#cpo-purchase-box-wrapper .cpo-bottle-icon img { max-height: 34px !important; width: auto !important; height: auto !important; }
#cpo-purchase-box-wrapper .cpo-qty-num { font-weight: 700 !important; font-size: 18px !important; text-transform: none !important; color: #111 !important; }
#cpo-purchase-box-wrapper .cpo-unit-price { font-weight: 700 !important; font-size: 16px !important; color: var(--cpo-primary,#0058FA) !important; }
#cpo-purchase-box-wrapper .cpo-total-price { font-size: 12px !important; color: #666 !important; margin-bottom: 6px !important; }
#cpo-purchase-box-wrapper .cpo-save-pill {
	display: inline-block !important; background: var(--cpo-primary,#0058FA) !important; color: #fff !important;
	font-size: 11px !important; font-weight: 700 !important; padding: 5px 14px !important; border-radius: 20px !important; margin-top: 2px !important;
}

/* Cart bar: price on the left, Add to Cart button on the right, wrapped
 * together by JS (frontend.js) once the page loads. */
#cpo-purchase-box-wrapper .cpo-cart-bar {
	display: flex !important; align-items: center !important; justify-content: space-between !important;
	flex-direction:row-reverse;
	gap: 14px !important; background: #f6f7fb !important; border: 1px solid #ececf1 !important;
	border-radius: 14px !important; padding: 10px 10px 10px 18px !important; flex-wrap: nowrap !important;
}
#cpo-purchase-box-wrapper .cpo-cart-summary { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
#cpo-purchase-box-wrapper .cpo-cart-summary-price { display: flex !important; flex-direction: column !important; }
#cpo-purchase-box-wrapper .cpo-cart-total { font-size: 24px !important; font-weight: 800 !important; color: var(--cpo-secondary,#0e143d) !important; line-height: 1.2 !important; }
#cpo-purchase-box-wrapper .cpo-cart-total-label { font-size: 12px !important; color: #888 !important; white-space: nowrap !important; }

/* Actions row: COA button */
#cpo-purchase-box-wrapper .cpo-actions-row { display: flex !important; flex-direction:row-reverse;gap: 10px !important; align-items: stretch !important; margin-top: 18px !important; }
#cpo-purchase-box-wrapper .cpo-coa-btn {
	width:100px !important;
	display: inline-flex !important; align-items: center !important; gap: 6px !important; white-space: nowrap !important;
	border: 1px solid #ddd !important; border-radius: 30px !important; padding: 0 18px !important; font-size: 14px !important;
	color: #333 !important; text-decoration: none !important; background: #fff !important;
}
#cpo-purchase-box-wrapper .cpo-coa-btn:hover { background: #eef5ff !important; color: #333 !important; }

#cpo-purchase-box-wrapper form.cart .quantity { display: none !important; }
#cpo-purchase-box-wrapper form.cart .single_add_to_cart_button,
#cpo-purchase-box-wrapper form.cart button[type="submit"] {
	width: calc(100% - 100px)!important; border: 0 !important; border-radius: 30px !important; white-space: nowrap !important;
	background: linear-gradient(90deg,var(--cpo-secondary,#0e143d),var(--cpo-primary,#0058FA)) !important; color: #fff !important; font-weight: 600 !important;
	padding: 14px 26px !important; font-size: 15px !important; display: flex !important; align-items: center !important;
	justify-content: center !important; cursor: pointer !important; box-shadow: none !important; text-shadow: none !important; margin: 0 !important; flex: 0 0 auto !important;
}
#cpo-purchase-box-wrapper form.cart .single_add_to_cart_button::before,
#cpo-purchase-box-wrapper form.cart button[type="submit"]::before {
	content: "🛒" !important; margin-right: 8px !important;
}
#cpo-purchase-box-wrapper form.cart .single_variation_wrap { margin: 0 0 18px 0 !important; }
#cpo-purchase-box-wrapper form.cart .variations,
#cpo-purchase-box-wrapper form.cart table.variations { margin: 0 0 18px 0 !important; width: 100% !important; }

/* Subscribe */
#cpo-purchase-box-wrapper .cpo-subscribe { border: 1px solid #dceaff !important; background: #eef5ff !important; border-radius: 12px !important; padding: 18px !important; }
#cpo-purchase-box-wrapper .cpo-subscribe-row { display: flex !important; justify-content: space-between !important; align-items: baseline !important; margin: 0 0 6px 0 !important; gap: 10px !important; }
#cpo-purchase-box-wrapper .cpo-subscribe-title { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .5px !important; color: var(--cpo-primary,#0058FA) !important; text-transform: uppercase !important; }
#cpo-purchase-box-wrapper .cpo-subscribe-per-label { font-size: 10px !important; letter-spacing: .5px !important; color: #999 !important; text-transform: uppercase !important; white-space: nowrap !important; }
#cpo-purchase-box-wrapper .cpo-subscribe-sub { font-size: 13px !important; color: #555 !important; margin: 0 !important; }
#cpo-purchase-box-wrapper .cpo-subscribe-price-line { white-space: nowrap !important; }
#cpo-purchase-box-wrapper .cpo-price-original { color: #999 !important; margin-right: 6px !important; font-weight: 400 !important; }
#cpo-purchase-box-wrapper .cpo-price-discounted { color: #111 !important; font-size: 15px !important; }
#cpo-purchase-box-wrapper .cpo-subscribe-btn {
	width: 100% !important; background: linear-gradient(90deg,var(--cpo-secondary,#0e143d),var(--cpo-primary,#0058FA)) !important; color:#fff !important; border:0 !important;
	border-radius: 30px !important; padding: 14px !important; font-size: 15px !important; font-weight: 600 !important;
	cursor: pointer !important; margin: 12px 0 0 0 !important; box-shadow: none !important;
}
#cpo-purchase-box-wrapper .cpo-subscribe-btn:disabled { opacity: .6 !important; cursor: default !important; }
#cpo-purchase-box-wrapper .cpo-subscribe-footnote { text-align: center !important; font-size: 12px !important; color: #888 !important; margin: 10px 0 0 0 !important; }
#cpo-purchase-box-wrapper .cpo-card-errors { color:#c0392b !important; font-size:13px !important; margin-top:6px !important; }
#cpo-purchase-box-wrapper .cpo-subscribe-msg { margin: 10px 0 0 0 !important; font-size: 13px !important; text-align: center !important; }
#cpo-purchase-box-wrapper .cpo-subscribe-msg.success { color: #15803d !important; }
#cpo-purchase-box-wrapper .cpo-subscribe-msg.error { color: #c0392b !important; }

/* Countdown */
#cpo-purchase-box-wrapper .cpo-countdown { background:#f9f8fc !important; border:1px solid #dceaff !important; border-radius:10px !important; padding:12px 14px !important; font-size: 13px !important; }
#cpo-purchase-box-wrapper .cpo-timer { color:#c0392b !important; font-weight:700 !important; }

/* Badges */
#cpo-purchase-box-wrapper .cpo-badges { display:flex !important; gap:18px !important; flex-wrap:wrap !important; font-size: 12px !important; color:#555 !important; }

/* Checkout page card element (Subscribe & Save gateway) — outside the wrapper, own ID */
#cpo-checkout-card-element { background:#fff !important; border:1px solid #ddd !important; border-radius:8px !important; padding:12px !important; }