/**
 * Product Add-ons "configurator" styling.
 * Only active on product pages that have WooCommerce Product Add-ons
 * (body.has-wc-pao-configurator, set in functions.php).
 *
 * Layout:
 * 1. Product pages on this site are built with Elementor (Woodmart's
 *    "wd_single_product_*" widgets, in the shared Elementor template
 *    post ID 1055). The hero row (gallery + title/price beside it) and
 *    the "Add to cart" widget (which contains form.cart and our
 *    configurator) used to be nested together in that same hero row's
 *    info column. The "Add to cart" widget's position in that template's
 *    _elementor_data was moved (one-time, via WP-CLI/DB, not CSS) to sit
 *    as its own full-width row directly below the hero, so the photo and
 *    title/price now stay beside each other like before, and only the
 *    configurator is full-width underneath — matching the reference
 *    design without any layout hacks.
 * 2. Within that full-width configurator, form.cart becomes a 2-column
 *    grid on desktop so the options (left) and a sticky price/summary
 *    sidebar (right) sit side by side, without moving any form fields
 *    out of form.cart in the DOM (a small JS helper groups the sidebar
 *    pieces into one wrapper — see wc-pao-configurator.js).
 */

/* ---------- Configurator section spacing ---------- */

body.has-wc-pao-configurator .elementor-widget-wd_single_product_add_to_cart:has(.wc-pao-addons-container) {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid #e2e2e2;
}

/* ---------- Accordion sections ---------- */

body.has-wc-pao-configurator .wc-pao-section {
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	margin-bottom: 12px;
	background: #fff;
	overflow: hidden;
}

body.has-wc-pao-configurator .wc-pao-section:not(details) {
	background: #f7f6f3;
	padding: 14px 20px;
	font-weight: 600;
}

body.has-wc-pao-configurator .wc-pao-section-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	font-size: 1.05em;
}

body.has-wc-pao-configurator .wc-pao-section-summary::-webkit-details-marker {
	display: none;
}

body.has-wc-pao-configurator .wc-pao-section-title .required {
	color: #c0392b;
}

body.has-wc-pao-configurator .wc-pao-section-toggle-icon {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid #666;
	border-bottom: 2px solid #666;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

body.has-wc-pao-configurator details.wc-pao-section[open] > .wc-pao-section-summary .wc-pao-section-toggle-icon {
	transform: rotate(-135deg);
}

body.has-wc-pao-configurator .wc-pao-section-body {
	padding: 4px 20px 20px;
}

body.has-wc-pao-configurator .wc-pao-addon-description {
	color: #666;
	font-size: 0.92em;
	margin-bottom: 12px;
}

/* ---------- Image swatch cards ---------- */

body.has-wc-pao-configurator .wc-pao-swatch-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 12px;
	width: 100%;
}

body.has-wc-pao-configurator .wc-pao-addon-image-swatch {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	border: 2px solid #e2e2e2;
	border-radius: 8px;
	padding: 10px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	position: relative;
}

body.has-wc-pao-configurator .wc-pao-addon-image-swatch:hover {
	border-color: #b7c9b0;
}

body.has-wc-pao-configurator .wc-pao-addon-image-swatch.selected {
	border-color: #4b7a3f;
	box-shadow: 0 0 0 1px #4b7a3f;
	background: #f5f9f3;
}

body.has-wc-pao-configurator .wc-pao-addon-image-swatch::before {
	content: '';
	position: absolute;
	top: 10px;
	left: 10px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid #b9b9b9;
	background: #fff;
	z-index: 1;
}

body.has-wc-pao-configurator .wc-pao-addon-image-swatch.selected::before {
	border-color: #4b7a3f;
	background: #4b7a3f;
	box-shadow: inset 0 0 0 2px #fff;
}

body.has-wc-pao-configurator .wc-pao-swatch-image {
	display: block;
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 100%;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 8px;
	background: #f2f2f2;
	flex: 0 0 auto;
}

/* The plugin's own frontend.css sets ".wc-pao-addon-image-swatch img"
   (its unmodified small-swatch style) to max-width/max-height:65px, which
   otherwise clamps our full-size card image regardless of width/height
   set below — cancel it explicitly. */
body.has-wc-pao-configurator .wc-pao-swatch-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover;
}

body.has-wc-pao-configurator .wc-pao-swatch-label {
	font-weight: 600;
	font-size: 0.92em;
	line-height: 1.3;
}

body.has-wc-pao-configurator .wc-pao-swatch-price {
	font-size: 0.88em;
	color: #4b7a3f;
	margin-top: 2px;
}

/* Hide the accessible fallback <select> that mirrors the swatch selection. */
body.has-wc-pao-configurator .wc-pao-addon-image-swatch-select {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Lightweight card look for non-image fields (checkbox/select) ---------- */

/* Each checkbox/radio option renders as its own <p> with just an <input>
   and a <label> as siblings (see woocommerce-product-addons/templates/
   addons/checkbox.php) — lay them out side by side instead of stacked.
   Excludes wraps that contain the image-swatch grid (a *different* field
   type using the same .wc-pao-addon-wrap class one level up), which must
   stay a plain block so .wc-pao-swatch-grid can use the full width. */
body.has-wc-pao-configurator .wc-pao-addon-wrap:not(:has(.wc-pao-swatch-grid)) {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
}

body.has-wc-pao-configurator .wc-pao-addon-wrap:not(.wc-pao-swatch-grid) input[type='checkbox'],
body.has-wc-pao-configurator .wc-pao-addon-wrap:not(.wc-pao-swatch-grid) input[type='radio'] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
}

body.has-wc-pao-configurator .wc-pao-addon-wrap label {
	flex: 1 1 auto;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 10px 14px;
	margin: 0;
	cursor: pointer;
}

body.has-wc-pao-configurator .wc-pao-addon-wrap:has(input:checked) label {
	border-color: #4b7a3f;
	background: #f5f9f3;
}

/* ---------- Sidebar heading (product name + price, injected in functions.php) ---------- */

body.has-wc-pao-configurator .wc-pao-sidebar-heading {
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 16px 20px;
	background: #f7f6f3;
}

body.has-wc-pao-configurator .wc-pao-sidebar-heading .wc-pao-sidebar-product-name {
	font-weight: 700;
	margin-bottom: 4px;
	display: block;
}

/* ---------- Two-column configurator layout (desktop) ---------- */

/* .wc-pao-sidebar is built by wc-pao-configurator.js, which moves the
   heading/quantity/button/totals pieces into one real wrapper. Plain
   flexbox (not CSS Grid) on purpose: with Grid, a sticky sidebar spanning
   "grid-row: 1 / -1" shares row tracks with the independently auto-placed
   option sections in the other column, which caused row-height coupling
   bugs (a stretched button, then odd gaps). Flexbox has no such shared
   tracks — .wc-pao-addons-container and .wc-pao-sidebar are simply two
   flex items sized by their own content. */

body.has-wc-pao-configurator .quantity,
body.has-wc-pao-configurator .single_add_to_cart_button {
	margin: 0;
}

@media (min-width: 992px) {
	body.has-wc-pao-configurator form.cart {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		gap: 40px;
	}

	body.has-wc-pao-configurator .wc-pao-addons-container {
		flex: 1 1 0% !important;
		min-width: 0 !important;
		max-width: 100%;
	}

	body.has-wc-pao-configurator .wc-pao-sidebar {
		flex: 0 0 380px !important;
		width: 380px;
		display: flex;
		flex-direction: column;
		gap: 16px;
		position: sticky;
		top: 100px;
	}

	body.has-wc-pao-configurator #product-addons-total .product-addon-totals {
		border: 1px solid #e2e2e2;
		border-radius: 8px;
		padding: 16px 20px;
		margin-top: 4px;
	}
}