/*
 * Compatibility styles for WooCommerce TM Extra Product Options v7.x
 * The v7 update renamed several plugin classes and restructured field markup:
 *   - .tm-left        -> .tc-left
 *   - .tc-width100    -> .tcwidth-100
 *   - inputs are now wrapped in .tc-input-wrap inside .tc-label-wrap
 *   - list items gained .tmcp-field-wrap-inner / .tc-field-label-wrap wrappers
 * These rules restore the pre-update configurator layout on top of the
 * existing rules in custom.css.
 */

/* ---------- restore the v6 grid gutters ---------- */
/* v6 gave every .tc-container/.tc-cell 15px side padding with matching
   negative margins on .tc-row; v7 removed all of it, leaving content flush
   against the section borders. */

.configurator-wrap .tm-extra-product-options .tc-container {
	padding-left: 15px;
	padding-right: 15px;
}

.configurator-wrap .tm-extra-product-options .tc-row {
	margin-left: -15px;
	margin-right: -15px;
}

.configurator-wrap .tm-extra-product-options .tc-cell {
	padding-left: 15px;
	padding-right: 15px;
	margin-bottom: 15px;
}

/* v7 stacks roles on single elements: the outer wrapper is both
   .tc-container and .tc-row, and each field wrapper is both .tc-row and
   .tc-cell. Make each element act only as its v6 counterpart: the
   container keeps its padding (no negative row margin), and row+cell
   field wrappers behave as rows (negative margins, no side padding). */
.configurator-wrap .tm-extra-product-options .tc-row.tc-container {
	margin-left: 0;
	margin-right: 0;
}

.configurator-wrap .tm-extra-product-options .tc-cell.tc-row {
	padding-left: 0;
	padding-right: 0;
	margin-left: -15px !important;
	margin-right: -15px !important;
	/* flex items don't grow from negative margins the way v6's block
	   rows did, so widen the basis to span the parent's padding */
	flex-basis: calc(100% + 30px);
	max-width: calc(100% + 30px);
}

.configurator-wrap .tm-extra-product-options .cpf-section .tc-section-inner-wrap > .tc-row > .tc-cell {
	margin-bottom: 0;
}

.configurator-wrap .tm-extra-product-options .cpf-section.tc-cell {
	margin: 25px 0;
}

.configurator-wrap .tm-extra-product-options .tc-row .cpf-section.tc-row {
	margin: 0;
}

/* v7 also introduced flex "gap" spacing on rows, containers and option
   lists; v6 spaced things with cell margins (restored above), so the gaps
   double everything up. Remove them. */
.configurator-wrap .tm-extra-product-options .tc-row,
.configurator-wrap .tm-extra-product-options .tc-element-container,
.configurator-wrap .tm-extra-product-options ul.tmcp-ul-wrap {
	gap: 0 !important;
}

/* v7 sizes per-row swatch items as calc(X% - gap-share); with the gaps
   removed, drop the gap share from the basis too so tiles match v6 */
.configurator-wrap .tm-extra-product-options ul.tc-images-container:not(.learn-more-link-ul) {
	--tcgapcolumn: 0px;
	--tcgaprow: 0px;
}

/* keep list items and label internals free of the fake gutter */
.configurator-wrap .tm-extra-product-options li.tmcp-field-wrap .tc-cell,
.configurator-wrap .tm-extra-product-options li.tmcp-field-wrap label.tc-cell {
	padding-left: 0;
	padding-right: 0;
	margin-bottom: 0;
}

/* ---------- renamed class equivalents ---------- */

/* the second selector outranks the gutter rule on .tc-cell above, which
   has higher specificity than the v6 plugin gutter this file recreates;
   margin needs !important because v7 zeroes cell margins with !important */
.tc-cell.tc-left,
.configurator-wrap .tm-extra-product-options .tc-cell.tc-left {
	padding-right: 0;
	margin-right: -15px !important;
}

.cpf-type-select .tc-cell.tc-left {
	padding-right: 0;
	margin-right: -15px !important;
	line-height: 32px;
}

.tc-cell.tcwidth-100.tm-element-description.tm-description {
	margin-bottom: 2px;
}

.mb-1-div .tc-cell.tcwidth-100.tm-element-description.tm-description {
	margin-bottom: 10px;
}

.alpine-conditional-check-div .tc-cell.tc-epo-label.tm-epo-element-label.tcwidth-100,
.alpine-conditional-check-div .tc-cell.tc-element-container {
	display: none;
}

/* ---------- section header bars with "Learn More ..." toggle ---------- */

.configurator-wrap .learn-more-link-div > .tc-element-inner-wrap > .tc-row {
	position: relative;
}

.configurator-wrap .learn-more-link-div > .tc-element-inner-wrap > .tc-row > .tc-cell.tc-element-container {
	position: absolute;
	left: auto;
	right: 0;
	top: 0;
	width: auto;
	height: 50px;
	display: flex;
	align-items: center;
	padding: 0 15px;
}

.configurator-wrap .learn-more-link-div h2.tc-epo-label {
	width: 100%;
}

/* v7 dropped cell padding, so pad the dark header bars themselves */
.learn-more-link-div h2,
.config-heading h2,
.config-section .tc-row > h2.tcwidth-100,
.configurator-wrap .cpf-type-header h3.tc-epo-label {
	padding-left: 15px;
	padding-right: 15px;
}

/* render the info icon at its natural size inside the 50px bar */
.configurator-wrap .tm-extra-product-options .learn-more-link-ul li .tc-label-wrap img.tc-image {
	width: 18px !important;
	min-width: 18px !important;
	height: 18px !important;
	-o-object-fit: contain;
	object-fit: contain;
	flex: 0 0 18px;
	margin: 0;
}

.learn-more-link-ul li.tmcp-field-wrap {
	margin: 0;
}

/* center the toggle vertically in the 50px bar (custom.css forces the ul
   to 50px tall, which pinned the item to the top) */
.configurator-wrap .learn-more-link-div .tmcp-ul-wrap {
	height: 50px;
	display: flex;
	align-items: center !important;
}

.learn-more-link-div .tc-label-wrap {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px !important;
	white-space: nowrap;
}

.learn-more-link-div .tc-label-wrap .tc-label,
.learn-more-link-div .tc-label-wrap .tc-label-text {
	color: #fff;
	line-height: 18px;
}

/* hide the raw checkbox – the info icon image acts as the control */
.learn-more-link-div .tc-label-wrap .tc-input-wrap {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* ---------- image swatch fields (radio/checkbox with images) ---------- */

/* undo the old absolute-input hack from custom.css; lay out as
   image on top, input + label inline underneath */
.configurator-wrap .tm-extra-product-options .tc-mode-images .tm-epo-field.tmcp-radio,
.tm-extra-product-options .fabric-grid-ul > li input {
	position: static !important;
	bottom: auto;
	z-index: auto;
}

.configurator-wrap .tm-extra-product-options .tc-images-container:not(.learn-more-link-ul) li .tc-label-wrap {
	display: grid;
	grid-template-columns: 20px 1fr;
	justify-content: start;
	align-items: center;
	justify-items: start;
	column-gap: 4px;
}

.configurator-wrap .tm-extra-product-options .tc-images-container:not(.learn-more-link-ul) li .tc-label-wrap img.tc-image {
	grid-row: 1;
	grid-column: 1 / 3;
	margin: 0;
}

.configurator-wrap .tm-extra-product-options .tc-images-container:not(.learn-more-link-ul) li .tc-label-wrap .tc-input-wrap {
	grid-row: 2;
	grid-column: 1;
	position: static;
}

.configurator-wrap .tm-extra-product-options .tc-images-container:not(.learn-more-link-ul) li .tc-label-wrap .tc-label {
	grid-row: 2;
	grid-column: 2;
}

.configurator-wrap .tm-extra-product-options .tc-images-container:not(.learn-more-link-ul) li .tc-label-wrap .tc-label.radio-image-label {
	text-align: left;
	padding: 0;
	line-height: 15px;
}

/* v7 caps swatch lis at max-width: fit-content, so cells collapse to
   their content width and the grid columns go ragged. Pin every cell:
   134px content + 1px li padding each side = 136px pitch, matching
   v6/production (96px swatch + ~40px gap, 6 cells per row; the ul has
   no flex gap). No flex-shrink, so per-row counts stay deterministic. */
.configurator-wrap .tm-extra-product-options ul.tc-images-container:not(.learn-more-link-ul) > li.tmcp-field-wrap {
	flex: 0 0 134px !important;
	max-width: 134px !important;
	margin-bottom: 15px;
}

/* v7 hides the real input in image mode; the old design showed the
   radio next to the label under the image */
.configurator-wrap .tm-extra-product-options .tc-mode-images .tc-input-wrap,
.configurator-wrap .tm-extra-product-options .tc-mode-images input.use_images {
	display: flex !important;
}

.configurator-wrap .learn-more-link-ul .tc-mode-startimages .tc-input-wrap {
	display: none !important;
}

/* ---------- associated product tiles (e.g. Arm Style sets) ---------- */

/* custom.css targets li.tc-epo-element-product-thumbnail with a 110px
   flex basis; in v6 that class sat on the image wrapper (the rule never
   matched a li), but v7 moved it onto the li itself, shrinking the
   tiles. Restore the v6 size: a third of the row, image filling it. */
.configurator-wrap .max-product-swatch ul.tm-element-ul-product > li.tmcp-field-wrap.tc-epo-element-product-thumbnail {
	flex: 0 1 calc(33.333% - 15px) !important;
	width: auto !important;
	max-width: calc(33.333% - 15px) !important;
}

/* same class shift: draw the selection border around the image like v6,
   not around the whole tile */
.configurator-wrap .max-product-swatch ul.tm-element-ul-product > li.tmcp-field-wrap.tc-epo-element-product-thumbnail,
.configurator-wrap .max-product-swatch ul.tm-element-ul-product > li.tmcp-field-wrap.tc-epo-element-product-thumbnail.tc-active {
	border: none;
	margin-bottom: 0;
}

.configurator-wrap li.tc-epo-element-product-thumbnail .tc-product-image {
	border: 2px solid transparent;
	margin: 0;
}

.configurator-wrap li.tc-epo-element-product-thumbnail.tc-active .tc-product-image {
	border-color: #ddd;
}

.configurator-wrap .tm-extra-product-options li.tc-epo-element-product-thumbnail .tc-product-image {
	width: 100%;
}

.configurator-wrap .tm-extra-product-options li.tc-epo-element-product-thumbnail .tc-product-image img {
	width: 100%;
	height: auto;
}

/* ---------- plain checkbox / radio lists ---------- */

/* v7's .tc-label-wrap wraps, pushing the label text under the input;
   keep input and label on one line like v6 */
.configurator-wrap .tm-extra-product-options li.tmcp-field-wrap:not(.tc-mode-images):not(.tc-mode-color) .tc-label-wrap {
	flex-wrap: nowrap;
	align-items: center;
}

.configurator-wrap .tm-extra-product-options li.tmcp-field-wrap .tc-label .tc-label-inner.tcwidth-100 {
	width: auto;
}