/* ==========================================================================
   WA Order Button Pro — Blocksy (free) Compatibility Layer
   --------------------------------------------------------------------------
   Blocksy ships its own WooCommerce skin (theme.woo.css) with aggressive
   card/button rules. These overrides keep the WhatsApp button aligned,
   full-width and correctly coloured inside Blocksy product entries, the
   Blocksy cart drawer/page, and Blocksy's dark-mode palette — without
   touching anything when Blocksy is not active.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Blocksy product entries
   Blocksy renders shop cards as <li class="product"> inside .products, and
   its "Product Entry" block as .ct-woo-product-archive / .product-grid-item.
   The card is a flex column, so a bare <div> wrap collapses to 0 height.
   -------------------------------------------------------------------------- */

.products .product .wa-order-btn-loop-wrap,
.products .product .wa-order-btn-loop-wrap--before,
.product-grid-item .wa-order-btn-loop-wrap,
.ct-woo-product-archive .wa-order-btn-loop-wrap,
li.product .wa-order-btn-loop-wrap {
	display: block !important;
	width: 100% !important;
	flex: 0 0 auto !important;
	margin: 12px 0 0 !important;
	padding: 12px 0 0 !important;
	clear: both !important;
}

/* Blocksy puts its own add-to-cart inside .entry-actions — sit beside it. */
.products .product .wa-order-btn-loop-wrap .wa-order-btn--context-loop,
.product-grid-item .wa-order-btn-loop-wrap .wa-order-btn--context-loop,
.ct-woo-product-archive .wa-order-btn-loop-wrap .wa-order-btn--context-loop {
	display: flex !important;
	width: 100% !important;
	min-height: 42px !important;
	padding: 10px 16px !important;
	font-size: 0.88em !important;
	margin: 0 !important;
	line-height: 1.2 !important;
}

/* Blocksy's .button / .added_to_cart rules must never repaint our pill. */
.products .product .wa-order-btn--context-loop.button,
.products .product a.wa-order-btn--context-loop:hover,
.product-grid-item a.wa-order-btn--context-loop.button,
.ct-woo-product-archive a.wa-order-btn--context-loop.button {
	background: var(--wa-green) !important;
	color: #FFFFFF !important;
	border-color: transparent !important;
	text-decoration: none !important;
	box-shadow: var(--wa-shadow-btn) !important;
}

.products .product a.wa-order-btn--context-loop.button:hover,
.product-grid-item a.wa-order-btn--context-loop.button:hover,
.ct-woo-product-archive a.wa-order-btn--context-loop.button:hover {
	background: var(--wa-green-dark) !important;
	color: #FFFFFF !important;
}

/* Outline variant keeps its own look even under Blocksy's .button rules. */
.products .product a.wa-order-btn--context-loop.wa-order-btn--outline.button,
.product-grid-item a.wa-order-btn--context-loop.wa-order-btn--outline.button,
.ct-woo-product-archive a.wa-order-btn--context-loop.wa-order-btn--outline.button {
	background: transparent !important;
	color: var(--wa-green-dark) !important;
	border-color: var(--wa-green) !important;
	box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   2. Blocksy single product — the "Product Entry" summary column
   -------------------------------------------------------------------------- */

.ct-woo-summary .wa-order-btn-single-wrap,
.woocommerce div.product .wa-order-btn-single-wrap {
	display: block;
	width: 100%;
	margin: 14px 0 10px;
	clear: both;
}

.ct-woo-summary .wa-order-btn--context-single,
.woocommerce div.product .wa-order-btn--context-single {
	width: 100%;
	justify-content: center;
}

/* Blocksy's sticky mobile add-to-cart bar would otherwise cover the FAB. */
@media (max-width: 689px) {
	body.has-sticky-footer-bar .wa-floating-btn--bottom-right,
	body.ct-sticky-bar .wa-floating-btn--bottom-right {
		bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
	}
}

/* --------------------------------------------------------------------------
   3. Blocksy cart page + mini-cart drawer
   -------------------------------------------------------------------------- */

.woocommerce-cart .wa-order-btn-cart-wrap,
.ct-cart-page .wa-order-btn-cart-wrap,
.widget_shopping_cart .wa-order-btn-cart-wrap {
	display: block;
	width: 100%;
	margin-top: 14px;
	clear: both;
}

.woocommerce-cart a.wa-order-btn--context-cart.button,
.ct-cart-page a.wa-order-btn--context-cart.button,
.widget_shopping_cart a.wa-order-btn--context-cart.button {
	display: flex !important;
	width: 100% !important;
	justify-content: center;
	background: var(--wa-green) !important;
	color: #FFFFFF !important;
	border-color: transparent !important;
	box-shadow: var(--wa-shadow-btn) !important;
}

/* Blocksy mini-cart drawer is narrow — keep the pill readable. */
.widget_shopping_cart .wa-order-btn--context-cart {
	min-height: 46px !important;
	padding: 12px 16px !important;
	font-size: 0.95em !important;
}

/* --------------------------------------------------------------------------
   4. Blocksy dark mode
   Blocksy flips a [data-ct-color-mode="dark"] (and .dark-mode on html).
   The plugin is intentionally light-on-brand, so pin the modal/surface
   colours rather than letting the theme invert them mid-component.
   -------------------------------------------------------------------------- */

[data-ct-color-mode="dark"] .wa-lead-modal__panel,
html.dark-mode .wa-lead-modal__panel,
[data-ct-color-mode="dark"] .wa-lead-modal__product-card,
html.dark-mode .wa-lead-modal__product-card {
	background: #FFFFFF !important;
	border-color: #E2E8F0 !important;
}

[data-ct-color-mode="dark"] .wa-lead-modal__title,
html.dark-mode .wa-lead-modal__title,
[data-ct-color-mode="dark"] .wa-lead-form__field input,
html.dark-mode .wa-lead-form__field input,
[data-ct-color-mode="dark"] .wa-lead-form__field textarea,
html.dark-mode .wa-lead-form__field textarea,
[data-ct-color-mode="dark"] .wa-qty-stepper input[type="number"],
html.dark-mode .wa-qty-stepper input[type="number"] {
	color: #0F172A !important;
}

[data-ct-color-mode="dark"] .wa-lead-modal__subtitle,
html.dark-mode .wa-lead-modal__subtitle,
[data-ct-color-mode="dark"] .wa-lead-form__field label,
html.dark-mode .wa-lead-form__field label,
[data-ct-color-mode="dark"] .wa-lead-form__privacy,
html.dark-mode .wa-lead-form__privacy {
	color: #64748B !important;
}

/* The offline notice must stay readable on a dark card too. */
[data-ct-color-mode="dark"] .wa-order-btn-offline,
html.dark-mode .wa-order-btn-offline {
	background: rgba(255, 255, 255, 0.06) !important;
	border-color: rgba(255, 255, 255, 0.16) !important;
	color: #CBD5E1 !important;
}

/* --------------------------------------------------------------------------
   5. Blocksy quick-view / off-canvas panels
   The lead modal must render above Blocksy's off-canvas (z-index 99999+).
   -------------------------------------------------------------------------- */

.wa-lead-modal {
	z-index: 100020;
}

.wa-floating-btn {
	z-index: 99990;
}

/* --------------------------------------------------------------------------
   6. Blocksy's "WooCommerce Product Archive" grid gap — stop the button
   from creating a second row of dead space under short cards.
   -------------------------------------------------------------------------- */

@media (min-width: 690px) {
	.products .product .wa-order-btn-loop-wrap:has(+ .woocommerce-result-count) {
		margin-bottom: 4px;
	}
}

/* Blocksy hides the default loop add-to-cart in some archive presets.
   Our button must never inherit that hidden state. */
.products .product .wa-order-btn-loop-wrap .wa-order-btn,
.product-grid-item .wa-order-btn {
	visibility: visible !important;
	opacity: 1 !important;
}