/*
 * Embedding shell for the wardrobe configurator.
 *
 * Everything the app itself looks like lives in the React bundle's Tailwind CSS,
 * which is built with `@import "tailwindcss" important` so it survives the theme,
 * WooCommerce and Elementor stylesheets (those are unlayered, and unlayered CSS
 * outranks any cascade layer). Do NOT re-declare app styling here — a pixel value
 * written in this file is a value that no longer matches the standalone app.
 * The only jobs left for this file are giving the app a box to live in inside the
 * page, and styling the WooCommerce bits that sit outside the React root.
 *
 * The previous version of this file re-implemented the modals and grid with ~740
 * lines of !important; it is kept as frontend.css.pre-parity-backup for reference.
 */

/* --- The box the app lives in, between the site header and footer ----------- */

/* --- Preflight, re-asserted -------------------------------------------------
 *
 * Tailwind's reset lives in `@layer base`, and the `important` flag only marks
 * utilities — so the reset still loses to the unlayered theme, which sets
 * `body { font-size: 14px; line-height: 24px; color: #555 }` and Bootstrap's
 * `p { margin: 0 0 10px }`. Anything without an explicit utility inherited those.
 *
 * These rules restore what the standalone app gets from preflight. Specificity is
 * deliberately (0,1,1) with no !important: high enough to beat the theme's bare
 * element selectors, low enough that the app's own !important utilities still win.
 * Values are measured from the static app, not invented.
 */

.vmwc-react-root,
.vmwc-react-root *,
.vmwc-react-root *::before,
.vmwc-react-root *::after {
	box-sizing: border-box;
	border: 0 solid;
	margin: 0;
	padding: 0;
}

.vmwc-react-root {
	color: #000;
	/* Montserrat is the brand typeface stand-in for Gotham and is already
	   enqueued site-wide by the theme, so this costs no extra request. Swapping to
	   licensed Gotham later is a change to this one declaration. */
	font-family: Montserrat, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.5;
	text-align: left;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
}

.vmwc-react-root h1,
.vmwc-react-root h2,
.vmwc-react-root h3,
.vmwc-react-root h4,
.vmwc-react-root h5,
.vmwc-react-root h6,
.vmwc-react-root p {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-transform: none;
}

.vmwc-react-root button,
.vmwc-react-root input,
.vmwc-react-root select,
.vmwc-react-root textarea {
	background: transparent;
	background-image: none;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	min-height: 0;
	min-width: 0;
	text-transform: none;
	transition: none;
	width: auto;
}

/* Text controls take the surrounding alignment; buttons must not. Applying
   `text-align: inherit` to buttons as well left every button label ranged left,
   because the browser default for a button is `center` and the standalone app
   relies on it. */
.vmwc-react-root input,
.vmwc-react-root select,
.vmwc-react-root textarea {
	text-align: inherit;
}

.vmwc-react-root button {
	cursor: pointer;
	text-align: center;
}

.vmwc-react-root img,
.vmwc-react-root svg {
	display: block;
	max-width: 100%;
	vertical-align: middle;
}

.vmwc-react-root ul,
.vmwc-react-root ol {
	list-style: none;
}

.vmwc-react-root a {
	color: inherit;
	text-decoration: inherit;
}

/* --- The box the app lives in, between the site header and footer ----------- */

.vmwc-shell {
	--vmwc-ink: #171717;
	--vmwc-muted: #6b7280;
	--vmwc-line: #e5e7eb;
	/* White, like the standalone app — not a tinted page background. */
	background: #fff;
	color: var(--vmwc-ink);
	max-width: none;
	min-height: 684px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.vmwc-react-host {
	background: #fff;
	border-radius: 0;
	box-shadow: none;
	height: 684px;
	overflow: visible;
	width: 100%;
}

.vmwc-react-root {
	height: 100%;
	min-height: 100%;
	overflow: visible;
	width: 100%;
}

@media (min-width: 783px) {

	.vmwc-shell,
	.vmwc-react-host,
	.vmwc-react-root {
		max-width: 100%;
		min-width: 100%;
		width: 100%;
	}
}

@media (max-width: 782px) {
	.vmwc-shell {
		min-height: 684px;
	}

	.vmwc-react-host {
		border-radius: 0;
		box-shadow: none;
		height: 684px;
	}
}

/*
 * The app's own modals are `position: fixed`, so they escape the shell and cover
 * the whole viewport as they do standalone. The theme puts its sticky header at a
 * high z-index, so lift the modal above it. Layout, padding, radius and type all
 * stay with the app's Tailwind classes.
 */
.vmwc-react-root [class~="fixed"][class~="inset-0"] {
	/* Beats the app's own z-50, which is now !important, and the theme's sticky
	   header. This is the one place the shell must outrank the app. */
	z-index: 999999 !important;
}

/* --- WooCommerce surfaces outside the React root ---------------------------- */

.vmwc-wc-panel {
	background: #fff;
	border: 1px solid var(--vmwc-line);
	border-top: 0;
	padding: 14px 18px;
}

.vmwc-wc-panel:empty {
	display: none;
}

.vmwc-wc-panel button {
	background: #171717;
	border: 0;
	color: #fff;
	cursor: pointer;
	font-weight: 700;
	padding: 10px 16px;
}

.vmwc-wc-panel .vmwc-message {
	color: var(--vmwc-muted);
	margin: 0 0 10px;
}

/* The cart design gives the configured render a real product-image column, not a
   thumbnail. These were carried over from the pre-parity file unchanged and were
   far too small. */
.vmwc-cart-preview-image {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	display: block;
	height: auto;
	object-fit: contain;
	width: 100%;
	max-width: 150px;
}

.woocommerce-cart-form .product-thumbnail img.vmwc-cart-preview-image {
	height: auto;
	max-width: 150px;
	width: 150px;
}

/* --- Shell placeholder shown before the bundle boots ------------------------ */

.vmwc-loading {
	align-items: center;
	background: rgba(255, 255, 255, .94);
	display: grid;
	min-height: 684px;
	place-items: center;
	position: relative;
}

.vmwc-loading::before {
	animation: vmwc-shell-loader-spin .9s linear infinite;
	border: 2px solid #e5e7eb;
	border-radius: 999px;
	border-right-color: #232427;
	border-top-color: #232427;
	content: "";
	height: 64px;
	width: 64px;
}

.vmwc-loading::after {
	animation: vmwc-shell-loader-pulse 1.2s ease-in-out infinite;
	background: #232427;
	border-radius: 999px;
	content: "";
	height: 14px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 14px;
}

@keyframes vmwc-shell-loader-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes vmwc-shell-loader-pulse {

	0%,
	100% {
		opacity: .35;
		transform: translate(-50%, -50%) scale(.8);
	}

	50% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}