/* Compare modal (BT-93) -- shell chrome + overrides for the WooCommerce
   Better Compare plugin's own generated table, scoped to our modal so
   nothing here leaks onto the plugin's other surfaces (compare bar,
   the standalone /compare-products/ page, etc). */

.bwo-compare-modal { position: fixed; inset: 0; z-index: 999999999999; } /* above the plugin's compare bar (99999999) */
.bwo-compare-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.bwo-compare-modal-dialog { position: relative; max-width: 1280px; width: 92%; max-height: calc(100vh - 48px); margin: 24px auto; background: #fff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }

.bwo-compare-modal-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    background: #D01010;
    color: #fff;
    padding: 14px 20px;
}
.bwo-compare-modal-title {
    font-size: 16px;
    font-weight: 500;
    margin-right: auto;
    font-family: 'Outfit';
}
.bwo-compare-modal-header-controls { display: flex; align-items: center; gap: 24px; }
.bwo-compare-modal-header-controls label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    white-space: nowrap;
    margin: 0;
    align-items: center;
    font-weight: 400;
    font-family: 'Outfit';
}
.bwo-compare-modal-header-controls input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    /* background: #fff; */
    border: 1px solid #ffffff;
    border-radius: 2px;
    cursor: pointer;
    margin: 0;
    position: relative;
}

/* Checked state */
.bwo-compare-modal-header-controls input[type="checkbox"]:checked {
    background: #fff;
    border-color: #fff;
}

/* Check mark */
.bwo-compare-modal-header-controls input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 10px;
    border: solid #d00;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    left: 4px;
    top: 0;
}
.bwo-compare-modal-close { flex: 0 0 auto; background: none; border: none; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; padding: 0; background: transparent !important; }

.bwo-compare-modal-content { flex: 1 1 auto; overflow-y: auto; padding: 20px; }
.bwo-compare-modal-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 80px 20px; text-align: center; font-size: 16px; font-weight: 500; color: #6b7280; }
.bwo-compare-modal-spinner { display: block; width: 40px; height: 40px; border: 4px solid #fde8e8; border-top-color: #D01010; border-radius: 50%; animation: bwo-compare-spin .8s linear infinite; }
@keyframes bwo-compare-spin { to { transform: rotate(360deg); } }

/* View Product / Add to Cart -- the plugin's own "rm"/"ca" fields carry
   generic classes (btn, button, theme-btn) the theme never styles, so
   "rm" inherited a plain unrelated .btn rule elsewhere on the site
   (solid background + white text) -- stripped back to plain red link
   text to match the design, rather than fighting that rule's specificity. */
.bwo-compare-modal-content .single-product-compare-value-rm,
.bwo-compare-modal-content .single-product-compare-value-ca { text-align: left; }
.bwo-compare-modal-content .single-product-compare-value-rm a {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: inline !important;
    color: #D01010 !important;
    font-weight: 500 !important;
    text-decoration: none;
    font-family: 'outfit';
    font-size: 14px;
}
.single-product-compare-keys b {
    font-weight: 500;
    font-family: 'Outfit';
    color: #364153;
    font-size: 15px;
}
.bwo-compare-modal-content .single-product-compare-value-rm a:hover 
{
	text-decoration: underline;
}
.bwo-compare-modal-content .single-product-compare-value-ca .single_add_to_cart_button {
    display: inline-block;
    background: #fff;
    color: #000;
    text-decoration: none;
    border-radius: 24px;
    padding: 9px 18px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #970210;
    font-size: 14px;
    font-family: 'outfit'; 
}
.bwo-compare-modal-content .single-product-compare-value-ca .single_add_to_cart_button:hover { background: #fff0f0; color: #000; }

/* Brand logo / Estimated Delivery are moved here, into the image row,
   by reorderCompareTable() in functions-compare.php (per Figma) -- the
   plugin's own admin-configured field order still renders them as
   separate rows first; JS moves the content, this just styles the
   result. */
.bwo-compare-modal-content .single-product-compare-value-im { text-align: center; }
.bwo-compare-modal-content .bwo-compare-header-block {
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    gap: 6px;
    background: #F4F4F4;
    border-radius: 10px 10px 0 0;
    padding: 12px 10px 10px;
    height: 100%;
}
.single-product-compare-value {
    font-size: 14px;
    place-content: center;
	color: #212529;
}
.single-product-compare-key-column {
    place-content: center;
    padding-left: 14px !important;
}
.bwo-compare-modal-content .bwo-compare-brand-logo {
    display: block;
    margin: 0;
    max-height: 32px !important;
    max-width: 120px !important;
    object-fit: contain;
}
.bwo-compare-modal-content .bwo-compare-header-delivery {
    font-size: 13px;
    color: #D01010;
    font-weight: 500;
    text-align: left;
    font-family: 'outfit';
	margin-top: 4px;
}
.bwo-compare-modal-content .bwo-compare-header-delivery-label { display: block; font-size: 13px; color: #212529; font-weight: 500; font-family: 'outfit'; }

/* Discount row -- moved directly under Price by reorderCompareTable().
   Pill colors match this site's existing badge convention (style.css
   .badge-sale/.badge-installer/.badge-membership/.badge-rebate) rather
   than inventing new ones, but namespaced so nothing here leaks onto
   the plugin's other surfaces. */ 
.bwo-compare-modal-content .bwo-compare-badges { display: flex; flex-wrap: wrap; justify-content: left; gap: 4px; }
.bwo-compare-modal-content .bwo-compare-badge { height: 24px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 4px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.bwo-compare-modal-content .bwo-compare-badge-sale { color: #D01010; background: #FFEDED; border: 1px solid #D010101A; }
.bwo-compare-modal-content .bwo-compare-badge-installer { color: #20317E; background: #EAF2FD; border: 1px solid #20317E1A; }
.bwo-compare-modal-content .bwo-compare-badge-member { color: #D94300; background: #FFEAE0; border: 1px solid #D943001A; }
.bwo-compare-modal-content .bwo-compare-badge-rebate { color: #212529; background: #EDEDED; border: 1px solid #E1E5E5; }
.bwo-compare-modal-content .bwo-compare-badge-total {
    width: 100%;
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    margin-top: 8px;
    color: #212529;
	flex-wrap: wrap;
    display: inline-flex;
    justify-content: space-between;
}
.bwo-compare-modal-content .bwo-compare-badge-total span {
    color: #D01010;
    font-weight: 500;
}

body .bwo-compare-modal-content .single-product-compare-value.single-product-compare-value-ti {
    background: #FFF4F4 !important;
	position: unset;
}
.single-product-compare-value.oddd.single-product-compare-value-ca {
    padding-top: 0;
}
.single-product-compare-column 
{
	position: relative;
}
body .single-product-compare-key-column.single-product-compare-value-ti.single-product-compare-value-th {
    background: #FFF4F4 !important;
}
body .bwo-compare-modal-content .single-product-compare-value.single-product-compare-value-rm , body .bwo-compare-modal-content .single-product-compare-key-column.single-product-compare-value-rm.single-product-compare-value-th{
    background: transparent !important;
    text-align: left;
    padding-top: 12px;
    padding-bottom: 12px;
    min-height: 45px !important;
	padding-bottom: 3px !important;
    height: auto !important; 
}
 
.single-product-compare-value.single-product-compare-value-im {
    padding-bottom: 0;
	padding-top: 0;
    padding-left: 2px;
    padding-right: 2px;
}
.single-product-compare-value span.rating 
{
	display: none; 
}
body .bwo-compare-modal-content .single-product-compare-value.single-product-compare-value-ca, body .bwo-compare-modal-content .single-product-compare-key-column.single-product-compare-value-ca.single-product-compare-value-th {
    background: transparent !important;
    text-align: left;
    padding: 0 4px 24px;
    height: auto !important;
    min-height: 46px!important;
}
.single-product-compare-value, .single-product-compare-key-column 
{
	padding: 10px 5px;
	
}
.bwo-compare-modal-dialog ul.slick-dots {
    display: none;
}
a.woocommerce-compare-single-item-remove {
    background: transparent;
    color: #d01010;
	top: 5px;
} 
a.woocommerce-compare-single-item-remove:hover 
{
	opacity: 0.6;
}
.bwo-compare-modal-dialog .slick-prev:before, .bwo-compare-modal-dialog .slick-next:before {
    color: #d01010;
} 
.woocommerce-single-compare-table-container .single-product-compare-value:nth-child(odd), .woocommerce-single-compare-table-container .single-product-compare-key-column:nth-child(odd) {
    background: white !important;
}
.woocommerce-single-compare-table-container .single-product-compare-value:nth-child(even), .woocommerce-single-compare-table-container .single-product-compare-key-column:nth-child(even)
{
	 background: #F4F4F4 !important;
}
body .woocommerce-single-compare-table-container .single-product-compare-value.compare-table-highlight, body .woocommerce-single-compare-table-container .single-product-compare-key-column.compare-table-highlight {
    background-color: rgb(208 16 16 / 15%) !important;
}
/* Top-left cell above the row labels (was empty): title + how many products are compared. */
.bwo-compare-corner { display: flex; flex-direction: column; justify-content: center; gap: 4px; height: 100%; padding: 12px 14px; text-align: left; }
.bwo-compare-corner strong { font-family: 'outfit'; font-size: 18px; line-height: 1.2; color: #212529; }
.bwo-compare-corner span { font-size: 13px; color: #6b7280; }

/* "Best" value per row (markBestValues in inc/functions-compare.php). */
body .woocommerce-single-compare-table-container .single-product-compare-value.bwo-compare-best { background: #eaf6ec !important; font-weight: 500; }
.bwo-compare-best-tag { display: inline-block; margin-left: 4px;   padding: 2px 8px; border-radius: 999px; background: #1c7a41; color: #fff; font-size: 11px; font-weight: 500; line-height: 1.4; vertical-align: middle; }
/* Beside the total savings amount, whose line colours every span red. */
.bwo-compare-badge-total .bwo-compare-best-tag { color: #fff !important; margin-left: 8px !important; flex: none; }
/* Spec (i) tooltips: icon spaced from its label; the bubble (spec-tooltips.js) above the popup. */
.bwo-spec-help { display: inline-flex; align-self: center; margin-left: 6px; vertical-align: -2px; line-height: 0; }
 
/* Row group headings (groupCompareRows): one dark band across the labels and every product column. */
/* Light grey, one step darker than the #F4F4F4 rows, dark text: structure without competing with the red header. */
.bwo-compare-group { box-sizing: border-box; height: 38px; display: flex; align-items: center; padding: 0 14px; background: #E9EAEC; color: #212529; border-top: 1px solid #D9DBE0; border-bottom: 1px solid #D9DBE0; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
/* 1. The compare bar and its "Compare Products" tab stayed drawn over the popup's bottom rows (the bar slides
   down on open, its tab doesn't): hidden while the popup is open, back as before on close. */
/* Every part of it: its items (product images, x buttons), tab and Compare Now are separate elements. */
.bwo-compare-modal-open [class*="woocommerce-compare-bar"] { visibility: hidden !important; }
/* 2. Phones: full-screen popup; the table keeps readable column widths and scrolls sideways. */
@media (max-width: 767px) {
    .bwo-compare-modal-dialog { width: 100%; max-height: 100vh; height: 100vh; margin: 0; border-radius: 0; }
    .bwo-compare-modal-content { padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } 
    .bwo-compare-modal-header-controls {
		gap: 12px;
		flex-wrap: wrap;
		width: 100%;
		padding: 8px 12px;
	}
	.bwo-compare-corner strong { 
		font-weight: 500;
	}
	.bwo-compare-modal-content .bwo-compare-brand-logo {
		max-height: 32px !important;
		max-width: 85px !important;
	}
	.bwo-compare-modal-content .bwo-compare-badge-total {
		flex-wrap: wrap;
		gap: 5px;
	}
	.bwo-compare-modal-header-controls label {
		color: #212529;
		font-size: 14px;
		gap: 5px;
	}
	.bwo-compare-corner
	{
		padding: 0;
	}
	.bwo-compare-modal-header-controls input[type="checkbox"] {
		border-color: #212529;
		width: 13px;
		height: 13px;
	}
	.bwo-compare-modal-close {
		position: absolute;
		top: 13px;
		right: 13px;
		background: transparent;
		color: #1F1F1F;
		box-shadow: none;
	}
	.bwo-compare-modal-header {
		flex-wrap: wrap;
		background: #fff;
		color: #111010;
		gap: 0;
		position: relative;
		padding: 0;
	}
	.bwo-compare-modal-title { 
		border-bottom: 1px solid #0000001A;
		width: 100%;
		padding: 15px;
	}
	.woocommerce-single-compare-table-container.has-keys-column .single-product-compare-keys, .single-product-compare.has-keys-column .single-product-compare-keys {
		width: 160px;
	}
	.woocommerce-single-compare-table-container.has-keys-column .woocommerce-single-compare-table, .single-product-compare.has-keys-column .single-product-compare-products-slick {
		width: calc(100% - 160px);
	}
	.single-product-compare-keys b { 
		font-size: 14px;
	}
	.bwo-compare-group
	{ 
		height: 45px;
	}
	.bwo-compare-modal-header-controls input[type="checkbox"]:checked {
		background: #d01010;
		border-color: #d01010;
	}
	.bwo-compare-modal-header-controls input[type="checkbox"]:checked::after {
 
		border-color: #fff;
		left: 2px;
		top: -1px;
	}
}
/* Checkbox focus visible for keyboard users. */
.bwo-compare-modal-header-controls input[type="checkbox"]:focus-visible,
.bwo-compare-modal-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Empty compare-bar slot: "+ Add another" on its inner grey box (click handler in inc/functions-compare.php). */
.woocommerce-compare-bar-item-placeholder { cursor: pointer; }
.woocommerce-compare-bar-item-placeholder .woocommerce-compare-bar-item { position: relative; }
.woocommerce-compare-bar-item-placeholder .woocommerce-compare-bar-item::before { content: '+'; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; box-sizing: border-box; border: 2px dashed #9ca3af; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #e5e7eb; font-size: 28px; line-height: 1; }
.woocommerce-compare-bar-item-placeholder .woocommerce-compare-bar-item::after { content: 'Add another'; position: absolute; top: 66%; left: 0; right: 0; text-align: center; color: #e5e7eb; font-size: 15px; }
.woocommerce-compare-bar-item-placeholder:hover .woocommerce-compare-bar-item::before { border-color: #fff; color: #fff; }

/* Phones/tablets: Add to cart + View product in the product header (phoneCompareHeader in inc/functions-compare.php). */
@media (max-width: 767px) {
    .bwo-compare-modal-content .bwo-compare-header-block { flex-wrap: wrap; }
    .bwo-compare-header-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; margin-top: 0px; }
	a.woocommerce-better-compare-read-more.btn.button.btn-default.theme-button.theme-btn {
		background: transparent;
		border: none;
		padding: 0 !important;
		box-shadow: none !important;
		color: #D01010;
		text-decoration: underline;
		font-weight: 500;
		font-family: 'Outfit';
		font-size: 13px;
	}
}