/*
 * Wall Panelling Creator — visualiser + configurator form styles
 * -----------------------------------------------------------------------------
 * Ported from the legacy (Elementor) build. Loaded only on configurator
 * products (see inc/configurator.php). Two background textures are referenced
 * relative to this file and live in /images/:
 *   • wood-texture.webp   (panel faces)
 *   • floor-texture.webp  (floor planks)
 * The scene degrades gracefully to flat colour if either texture is missing.
 *
 * @package Panelling_Direct
 * @since   1.17.0
 */

/* ── Layout containment ──────────────────────────────────────────────
   The product layout is a 1fr 1fr grid. Grid items default to
   min-width:auto, so the JS-sized scene (deliberately wider than its
   container, to read as a 3D room) would otherwise force the gallery
   track wider and squash the info column. min-width:0 lets the track
   hold its share; .ts-container's overflow:hidden clips the scene. */
.pd-single-product--configurator .gallery-col,
.pd-single-product--configurator .info-col {
	min-width: 0;
}
.pd-single-product--configurator .gallery-col {
	overflow: hidden;
}

/* ── Scene container ─────────────────────────────────────────────────── */
.ts-container {
	width: 100%;
	max-width: 100%;
	height: 500px;
	display: flex;
	align-content: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
	border-radius: var(--radius-btn, 12px);
	background: linear-gradient( 180deg, rgba( 216, 209, 192, 1 ) 0%, rgba( 182, 177, 162, 1 ) 100% );
}

.thescene {
	width: 300px;
	height: 200px;
	margin-bottom: 50px;
	overflow: visible;
	perspective: 20px;
	background-color: transparent;
}

.scenebox {
	width: 300px;
	height: 200px;
	position: relative;
	transform-style: preserve-3d;
	transform: translateZ( -50px );
}

.box__face {
	position: absolute;
	border: none;
}

.box__face--front,
.box__face--back  { width: 300px; height: 200px; }
.box__face--right,
.box__face--left  { width: 100px; height: 200px; left: 100px; }
.box__face--top,
.box__face--bottom{ width: 300px; height: 100px; top: 75px; }

.box__face--front  { transform: rotateY(   0deg ) translateZ(  50px ); }
.box__face--back   { transform: rotateY( 180deg ) translateZ(  50px ); }
.box__face--right  { transform: rotateY(  90deg ) translateZ( 150px ); }
.box__face--left   { transform: rotateY( -90deg ) translateZ( 150px ); }
.box__face--top    { transform: rotateX(  90deg ) translateZ( 100px ); }
.box__face--bottom { transform: rotateX( -90deg ) translateZ( 100px ); }

.box__face.box__face--top {
	background: linear-gradient( 180deg, rgba( 174, 168, 158, 1 ) 0%, rgba( 171, 165, 155, 1 ) 100% );
}
.box__face.box__face--bottom {
	background-image:
		linear-gradient( to right, rgba( 216, 213, 203, .8 ), rgba( 216, 213, 203, .8 ) ),
		url( ../images/floor-texture.webp );
	background-size: cover;
}

.left-wall,
.right-wall { display: none; }

/* ── Back wall + panel grid ──────────────────────────────────────────── */
.back-wall {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 5px;
	background-color: #6a7267;
}
.back-skirt {
	position: absolute;
	left: 0;
	bottom: -15px;
	width: 100%;
	height: 15px;
	background-color: #b8b2a7;
}
.bottom-wall {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.floorbox {
	border: none;
	background: transparent;
	box-shadow: 0 0 1px #fff;
}
.box {
	margin: 0 !important;
	background-image:
		linear-gradient( to right, rgba( 106, 114, 103, .9 ), rgba( 106, 114, 103, .9 ) ),
		url( ../images/wood-texture.webp );
	background-size: cover;
}
.inner-box {
	width: 100%;
	height: 100%;
	background-image:
		linear-gradient( to right, rgba( 123, 133, 119, .9 ), rgba( 123, 133, 119, .9 ) ),
		url( ../images/wood-texture.webp );
	background-size: cover;
}

/* Thickness → inset shadow depth */
.back-wall.thickness-6mm  .inner-box { box-shadow: inset 2px 2px 5px rgba( 0, 0, 0, .4 ); }
.back-wall.thickness-9mm  .inner-box { box-shadow: inset 3.5px 3.5px 5px rgba( 0, 0, 0, .4 ); }
.back-wall.thickness-12mm .inner-box { box-shadow: inset 5px 5px 5px rgba( 0, 0, 0, .4 ); }

/* Width of panelling → gap (padding) + inner-box inset */
.back-wall.wop-50mm  { padding: 4.5px; }
.back-wall.wop-50mm  .inner-box { width: calc( 100% - 9px );  height: calc( 100% - 9px ); }
.back-wall.wop-60mm  { padding: 5.5px; }
.back-wall.wop-60mm  .inner-box { width: calc( 100% - 11px ); height: calc( 100% - 11px ); }
.back-wall.wop-70mm  { padding: 6.5px; }
.back-wall.wop-70mm  .inner-box { width: calc( 100% - 13px ); height: calc( 100% - 13px ); }
.back-wall.wop-80mm  { padding: 8px; }
.back-wall.wop-80mm  .inner-box { width: calc( 100% - 16px ); height: calc( 100% - 16px ); }
.back-wall.wop-90mm  { padding: 9.5px; }
.back-wall.wop-90mm  .inner-box { width: calc( 100% - 19px ); height: calc( 100% - 19px ); }
.back-wall.wop-100mm { padding: 11px; }
.back-wall.wop-100mm .inner-box { width: calc( 100% - 22px ); height: calc( 100% - 22px ); }
.back-wall.wop-120mm { padding: 12.5px; }
.back-wall.wop-120mm .inner-box { width: calc( 100% - 25px ); height: calc( 100% - 25px ); }

/* ── Perspective scenes (ratio-driven, set by JS) ────────────────────── */
.thescene-1  { perspective: 200px; }
.thescene-2  { perspective: 150px; }
.thescene-3  { perspective: 100px; }
.thescene-4  { perspective: 50px; }
.thescene-5  { perspective: 30px; }
.thescene-6  { perspective: 20px; }
.thescene-7  { perspective: 15px; }
.thescene-8  { perspective: 10px; }
.thescene-9  { perspective: 8px; }
.thescene-10 { perspective: 6px; }
.thescene-11 { perspective: 4px; }
.thescene-12 { perspective: 3px; }
.thescene-13 { perspective: 2px; }
.thescene-14 { perspective: 1px; }
.thescene-4  .scene-measurement { font-size: 2em !important; }
.thescene-5  .scene-measurement,
.thescene-6  .scene-measurement,
.thescene-7  .scene-measurement,
.thescene-8  .scene-measurement { font-size: 3em !important; }
.thescene-9  .scene-measurement,
.thescene-10 .scene-measurement { font-size: 4em !important; }
.thescene-11 .scene-measurement,
.thescene-12 .scene-measurement,
.thescene-13 .scene-measurement,
.thescene-14 .scene-measurement { font-size: 5em !important; }

/* "Half wall" custom view hides the right/left/top/bottom faces */
.thescene.thescene-custom .box__face--right,
.thescene.thescene-custom .box__face--left,
.thescene.thescene-custom .box__face--top,
.thescene.thescene-custom .box__face--bottom,
.thescene.thescene-custom .back-skirt { display: none; }

/* ── Technical-view measurement markers (hidden until toggled) ───────── */
.back-wall:not( .bw-tech ) .lefttop-point,
.back-wall:not( .bw-tech ) .righttop-point,
.back-wall:not( .bw-tech ) .leftbottom-point,
.back-wall:not( .bw-tech ) .rightbottom-point,
.back-wall:not( .bw-tech ) .middletbottom-point { display: none; }

.lefttop-point {
	width: 11px; height: 100%;
	position: absolute; top: 0; left: 0;
	background-color: #fff; opacity: 1;
	border-top: 10px solid red; border-bottom: 10px solid red;
}
.righttop-point {
	width: 11px; right: 0; bottom: 0;
	position: absolute; transform: rotate( 180deg );
	background-color: #fff; opacity: 1;
	border-top: 10px solid red; border-bottom: 10px solid red;
}
.leftbottom-point {
	width: 100%; height: 11px;
	position: absolute; top: 0; left: 0; transform: rotate( 180deg );
	background-color: #fff; opacity: 1;
	border-right: 10px solid red; border-left: 10px solid red;
}
.rightbottom-point {
	height: 11px; position: absolute; bottom: 0; right: 0;
	transform: rotate( 180deg );
	background-color: #fff; opacity: 1;
	border-right: 10px solid red; border-left: 10px solid red;
}
.middletbottom-point {
	width: 11px; height: calc( 100% - 32px );
	position: absolute; right: auto; bottom: auto;
	transform: rotate( 180deg );
	background-color: #fff; opacity: 1;
	border-top: 10px solid red; border-bottom: 10px solid red;
}
.scene-measurement {
	position: absolute; font-size: 20px !important; font-weight: bold;
	letter-spacing: 1px; color: #fff;
}
.scene-measurement.ltp-measurement { top: 80%; left: 12px; transform: rotate( 90deg ) scaleX( -1 ); }
.scene-measurement.rtp-measurement { top: calc( 50% - 12px ); right: 19px; transform: rotate( -90deg ) scaleX( -1 ); }
.scene-measurement.lbp-measurement { top: -40px; left: 3.5%; width: 100%; text-align: left; transform: rotate( -180deg ) scaleX( -1 ); }
.scene-measurement.rbp-measurement { top: 40px; width: 100%; text-align: center; transform: rotate( -180deg ) scaleX( -1 ); }
.scene-measurement.mbp-measurement { top: calc( 50% - 12px ); right: 12px; transform: rotate( -90deg ) scaleX( -1 ); }

/* marker thickness scales with width-of-panelling */
.back-wall.wop-50mm  .leftbottom-point,
.back-wall.wop-50mm  .rightbottom-point { height: 9px;  border-width: 9px; }
.back-wall.wop-50mm  .lefttop-point,
.back-wall.wop-50mm  .righttop-point    { width: 9px;   border-width: 9px; }
.back-wall.wop-50mm  .middletbottom-point { height: calc( 100% - 18px ); border-width: 9px; width: 9px; }
.back-wall.wop-70mm  .leftbottom-point,
.back-wall.wop-70mm  .rightbottom-point { height: 13px; border-width: 13px; }
.back-wall.wop-70mm  .lefttop-point,
.back-wall.wop-70mm  .righttop-point    { width: 13px;  border-width: 13px; }
.back-wall.wop-70mm  .middletbottom-point { height: calc( 100% - 26px ); border-width: 13px; width: 13px; }
.back-wall.wop-80mm  .leftbottom-point,
.back-wall.wop-80mm  .rightbottom-point { height: 16px; border-width: 16px; }
.back-wall.wop-80mm  .lefttop-point,
.back-wall.wop-80mm  .righttop-point    { width: 16px;  border-width: 16px; }
.back-wall.wop-80mm  .middletbottom-point { height: calc( 100% - 32px ); border-width: 16px; width: 16px; }
.back-wall.wop-90mm  .leftbottom-point,
.back-wall.wop-90mm  .rightbottom-point { height: 19px; border-width: 19px; }
.back-wall.wop-90mm  .lefttop-point,
.back-wall.wop-90mm  .righttop-point    { width: 19px;  border-width: 19px; }
.back-wall.wop-90mm  .middletbottom-point { height: calc( 100% - 38px ); border-width: 19px; width: 19px; }
.back-wall.wop-100mm .leftbottom-point,
.back-wall.wop-100mm .rightbottom-point { height: 22px; border-width: 22px; }
.back-wall.wop-100mm .lefttop-point,
.back-wall.wop-100mm .righttop-point    { width: 22px;  border-width: 22px; }
.back-wall.wop-100mm .middletbottom-point { height: calc( 100% - 44px ); border-width: 22px; width: 22px; }
.back-wall.wop-120mm .leftbottom-point,
.back-wall.wop-120mm .rightbottom-point { height: 25px; border-width: 25px; }
.back-wall.wop-120mm .lefttop-point,
.back-wall.wop-120mm .righttop-point    { width: 25px;  border-width: 25px; }
.back-wall.wop-120mm .middletbottom-point { height: calc( 100% - 50px ); border-width: 25px; width: 25px; }

/* ── Toggle pills ────────────────────────────────────────────────────── */
.technical-view-toggle {
	position: absolute; z-index: 5; top: 10px; left: 10px;
	background-color: #fff; padding: 4px 10px 5px;
	border-radius: 50px; font-size: 13px; line-height: 1; cursor: pointer;
	font-family: var(--font-head, 'Oswald'), sans-serif;
}
.custom-view-toggle {
	position: absolute; z-index: 5; top: 10px; right: 10px; display: flex;
}
.custom-view-toggle div {
	background-color: #fff; padding: 4px 10px 5px; margin-left: 10px;
	border-radius: 50px; font-size: 13px; line-height: 1; cursor: pointer;
	font-family: var(--font-head, 'Oswald'), sans-serif;
}
.custom-view-toggle .cv-active,
.technical-view-toggle.tv-active { background-color: var(--c-navy, #070054); color: #fff; }

.lighting {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	opacity: .8;
	pointer-events: none;
	background-image: url( ../images/lighting.webp );
	background-repeat: no-repeat;
	background-size: cover;
}

/* ── After-visualiser caption ────────────────────────────────────────── */
.after-vis-msg { margin-top: 22px; text-align: center; }
.after-vis-msg .avm-1 {
	font-family: var(--font-head, 'Oswald'), sans-serif;
	font-size: 20px; text-transform: uppercase; letter-spacing: .5px;
	color: var(--c-navy, #080153); margin: 0 0 8px;
}
.after-vis-msg .avm-2 {
	font-size: 14px; line-height: 1.5; color: var(--c-text-mid, #767676); margin: 0; /* v1.45.56: was 2.96:1 */
}

/* ── WAPF configurator form (sits in the info column) ────────────────── */
/* Field layout — the side-by-side gutter and wrapper margins are handled
   centrally by the shared `.pd-wapf` rules in style.css (so the configurator
   and standard products match). We only force the half-width fields to 50%
   here in case WAPF isn't set to half-width for them, plus the configurator's
   vertical padding tweaks. */
.pd-configurator-form .calc-width,
.pd-configurator-form .calc-height,
.pd-configurator-form .vpanels,
.pd-configurator-form .hpanels,
.pd-configurator-form .thickness,
.pd-configurator-form .wop { width: 50% !important; }
.pd-configurator-form .calc-width,
.pd-configurator-form .calc-height { padding-top: 15px; padding-bottom: 15px !important; }
.pd-configurator-form .thickness,
.pd-configurator-form .wop { padding-bottom: 10px !important; }

/* WAPF field + totals styling (labels, inputs, selects, focus, the
   grand-total row) is shared across ALL WAPF products and now lives in
   style.css under `.pd-wapf` (single source of truth). The configurator
   wrapper carries `.pd-wapf` too, so it inherits those styles. Only
   configurator-specific layout remains below. */
.pd-configurator-form .pd-vat-row { margin-top: 12px; }

/* Standard WC submit button → match the theme's primary button */
.pd-configurator-form .single_add_to_cart_button {
	display: inline-flex; align-items: center; justify-content: center;
	width: 100%; min-height: var(--btn-h, 55px);
	margin-top: 14px; padding: 0 24px;
	background: var(--c-navy, #080153); color: #fff;
	border: none; border-radius: var(--radius-btn, 12px);
	font-family: var(--font-head, 'Oswald'), sans-serif;
	font-size: 18px; text-transform: uppercase; letter-spacing: .5px;
	cursor: pointer; transition: filter .15s ease, transform .05s ease;
}
.pd-configurator-form .single_add_to_cart_button:hover { filter: brightness( 1.08 ); }
.pd-configurator-form .single_add_to_cart_button:active { transform: scale( .99 ); }
/* The made-to-measure configurator is always a single configured unit, so the
   standard WC quantity box is unwanted. Hidden (not removed) so the input still
   submits quantity=1 with the form. */
.pd-configurator-form .quantity { display: none; }
.pd-configurator-form .request-sample-link { margin-top: 12px; font-size: 14px; }

/* ── "What's In The Kit" — icon list (matches the live site) ─────────────
   The WAPF field renders 5 item rows; row 3 ("Free Picture Shelf") is hidden,
   leaving the four shown in the design. The live PNG icons aren't bundled with
   the theme (and can't be fetched here), so these are clean inline-SVG
   equivalents in the brand navy — swap the background-image URLs for the
   uploaded PNGs if you'd rather use the originals. */
.pd-configurator-form .field-647da7fa6f288 .wapf-field-input > div > div > div {
	position: relative;
	color: #000;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 500;
	padding: 9px 0 9px 30px;
	border-bottom: 1px solid rgba( 0, 0, 0, .08 );
}
.pd-configurator-form .field-647da7fa6f288 .wapf-field-input > div > div > div:nth-child(3) { display: none; }
.pd-configurator-form .field-647da7fa6f288 .wapf-field-input > div > div > div::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY( -50% );
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.pd-configurator-form .field-647da7fa6f288 .wapf-field-input > div > div > div:nth-child(1)::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23080153'%20stroke-width='1.7'><rect%20x='3.5'%20y='3'%20width='7'%20height='18'%20rx='1'/><rect%20x='13.5'%20y='3'%20width='7'%20height='18'%20rx='1'/></svg>"); }
.pd-configurator-form .field-647da7fa6f288 .wapf-field-input > div > div > div:nth-child(2)::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23080153'><rect%20x='2.5'%20y='2.5'%20width='6.5'%20height='6.5'%20rx='.6'%20fill='none'%20stroke='%23080153'%20stroke-width='1.5'/><rect%20x='4.75'%20y='4.75'%20width='2'%20height='2'/><rect%20x='15'%20y='2.5'%20width='6.5'%20height='6.5'%20rx='.6'%20fill='none'%20stroke='%23080153'%20stroke-width='1.5'/><rect%20x='17.25'%20y='4.75'%20width='2'%20height='2'/><rect%20x='2.5'%20y='15'%20width='6.5'%20height='6.5'%20rx='.6'%20fill='none'%20stroke='%23080153'%20stroke-width='1.5'/><rect%20x='4.75'%20y='17.25'%20width='2'%20height='2'/><rect%20x='11.4'%20y='2.8'%20width='1.8'%20height='1.8'/><rect%20x='11.4'%20y='6.3'%20width='1.8'%20height='1.8'/><rect%20x='11.4'%20y='11.4'%20width='1.8'%20height='1.8'/><rect%20x='11.4'%20y='14.9'%20width='1.8'%20height='1.8'/><rect%20x='11.4'%20y='18.4'%20width='1.8'%20height='1.8'/><rect%20x='14.9'%20y='6.3'%20width='1.8'%20height='1.8'/><rect%20x='14.9'%20y='11.4'%20width='1.8'%20height='1.8'/><rect%20x='14.9'%20y='18.4'%20width='1.8'%20height='1.8'/><rect%20x='18.4'%20y='2.8'%20width='1.8'%20height='1.8'/><rect%20x='18.4'%20y='11.4'%20width='1.8'%20height='1.8'/><rect%20x='18.4'%20y='14.9'%20width='1.8'%20height='1.8'/><rect%20x='18.4'%20y='18.4'%20width='1.8'%20height='1.8'/></svg>"); }
.pd-configurator-form .field-647da7fa6f288 .wapf-field-input > div > div > div:nth-child(4)::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23080153'%20stroke-width='1.7'><rect%20x='6'%20y='9'%20width='8'%20height='12'%20rx='1.5'/><path%20d='M10%209V6h3V4.2'/><circle%20cx='17'%20cy='4'%20r='.9'%20fill='%23080153'%20stroke='none'/><circle%20cx='19.6'%20cy='6.2'%20r='.9'%20fill='%23080153'%20stroke='none'/><circle%20cx='18.2'%20cy='8.8'%20r='.9'%20fill='%23080153'%20stroke='none'/></svg>"); }
.pd-configurator-form .field-647da7fa6f288 .wapf-field-input > div > div > div:nth-child(5)::before { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23080153'%20stroke-width='1.7'><rect%20x='2.5'%20y='8'%20width='19'%20height='8'%20rx='1'/><path%20d='M6.5%208v3.2M10.5%208v4M14.5%208v3.2M18.5%208v4'%20stroke-width='1.4'/></svg>"); }

/* "Add all essential tools" button + tools checklist styles moved to
   style.css (scoped .pd-wapf) in v1.22.0 so the derived-field WAPF products
   (which do not load this stylesheet) share them. */

/* ── Responsive ──────────────────────────────────────────────────────── */
@media screen and ( max-width: 1024px ) {
	.pd-single-product.pd-single-product--configurator .ts-container { height: 420px; }
}
@media screen and ( max-width: 768px ) {
	.pd-single-product.pd-single-product--configurator .ts-container { height: 360px; }
}
@media screen and ( max-width: 500px ) {
	.thescene-1 { perspective: 150px; }
	.thescene-2 { perspective: 100px; }
	.thescene-3 { perspective: 50px; }
	.thescene-4 { perspective: 30px; }
	.thescene-5 { perspective: 20px; }
	.thescene-6 { perspective: 15px; }
	.thescene-7 { perspective: 10px; }
	.thescene-8 { perspective: 8px; }
	.thescene-9 { perspective: 6px; }
	.thescene-10 { perspective: 4px; }
	.thescene-11 { perspective: 3px; }
	.thescene-12 { perspective: 2px; }
	.thescene-13 { perspective: 1px; }
}
@media screen and ( max-width: 320px ) {
	.technical-view-toggle,
	.custom-view-toggle div { font-size: 11px; }
}