/* =============================================================
   WDM Custom Measurements for WooCommerce V3
   Version 3.6.0
   ============================================================= */

/* ── Layout ──────────────────────────────────────────────────────────────────
 *
 *  form.variations_form  (flex-column)
 *    #wdm-v3-tabs                          ← unit tabs (moved here by JS)
 *    table.variations                      ← Thickness + Size dropdowns
 *    div.single_variation_wrap
 *      div.woocommerce-variation-price     ← hidden when Custom selected
 *      div.woocommerce-variation-add-to-cart  (flex-wrap)
 *        #wdm-v3-fields        100% wide   ← L×W inputs
 *        #wdm-v3-price-summary 100% wide   ← calculated price (own line)
 *        div.quantity          auto        ← ] side by side on own line
 *        button.add-to-cart    auto        ← ]
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── form: stacked column ────────────────────────────────────── */
form.variations_form {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

form.variations_form > #wdm-v3-tabs           { order: 1; }
form.variations_form > table.variations       { order: 2; }
form.variations_form > .single_variation_wrap { order: 3; }

/* ── single_variation_wrap: stacked column ───────────────────── */
.single_variation_wrap {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}

/* ── add-to-cart container: wrapping flex ────────────────────── */
/* flex-wrap lets 100%-wide items force a line break, while       */
/* auto-width qty + button sit side by side on the next line.     */
.woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	gap: 0;
}

/* display:contents lets #wdm-v3-outer children join flex directly */
.wdm-v3-outer {
	display: contents;
}

/* ── Order and sizing inside add-to-cart container ───────────── */

/* L×W fields — full width, own line */
.woocommerce-variation-add-to-cart #wdm-v3-fields {
	order: 1;
	flex: 0 0 100%;
	width: 100%;
}

/* Calculated price — full width, own line below fields */
.woocommerce-variation-add-to-cart #wdm-v3-price-summary {
	order: 2;
	flex: 0 0 100%;
	width: 100%;
}

/* Qty input — auto width, starts new line after price summary */
.woocommerce-variation-add-to-cart .quantity {
	order: 3;
	flex: 0 0 auto;
	margin-top: 16px;
	margin-right: 10px;
	margin-bottom: 0;
}

/* Add to Cart button — auto width, same line as qty */
.woocommerce-variation-add-to-cart .single_add_to_cart_button {
	order: 4;
	flex: 0 0 auto;
	margin-top: 16px;
}

/* ── Hide WC variation price when Custom is selected ─────────── */
form.variations_form.wdm-custom-selected .woocommerce-variation-price,
form.variations_form.wdm-custom-selected .woocommerce-variation .price {
	display: none !important;
}

/* ── Unit tab switcher ───────────────────────────────────────── */
#wdm-v3-tabs.wdm-v3-tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 0 16px 0;
	padding: 0;
	width: 100%;
	gap: 4px;
}

.wdm-v3-tab {
	background: transparent;
	border: none;
	font-size: 15px;
	font-weight: 600;
	color: #0d3b6e;
	padding: 6px 4px;
	margin-right: 16px;
	cursor: pointer;
	line-height: 1.4;
	transition: opacity 0.15s ease;
	outline: none;
	box-shadow: none;
}

.wdm-v3-tab.active {
	border: 2px solid #0d3b6e;
	border-radius: 30px;
	padding: 5px 18px;
}

.wdm-v3-tab:hover:not(.active) {
	opacity: 0.6;
}

/* ── Variations table ────────────────────────────────────────── */
form.variations_form table.variations {
	width: 100%;
	margin-bottom: 8px;
}

/* ── L×W fields ──────────────────────────────────────────────── */
.wdm-v3-fields {
	width: 100%;
	margin: 12px 0 8px;
	box-sizing: border-box;
}

.wdm-v3-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 6px;
}

.wdm-v3-field {
	display: flex;
	flex-direction: column;
}

.wdm-v3-field > label {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
	color: #333;
}

.wdm-v3-field > label .required {
	color: #e2401c;
}

/* ── Number input with suffix ────────────────────────────────── */
.wdm-v3-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.wdm-v3-input-wrap .input-text {
	width: 100% !important;
	padding: 11px 56px 11px 14px !important;
	border: 1.5px solid #d0d5dd !important;
	border-radius: 6px !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	background: #fff !important;
	color: #111 !important;
	box-shadow: none !important;
	-moz-appearance: textfield;
	appearance: textfield;
}

.wdm-v3-input-wrap .input-text::-webkit-inner-spin-button,
.wdm-v3-input-wrap .input-text::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.wdm-v3-input-wrap .input-text:focus {
	border-color: #0d3b6e !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(13, 59, 110, 0.12) !important;
}

.wdm-v3-input-wrap .input-text.wdm-v3-error {
	border-color: #cc1818 !important;
	box-shadow: 0 0 0 3px rgba(204, 24, 24, 0.10) !important;
}

.wdm-v3-suffix {
	position: absolute;
	right: 14px;
	font-size: 14px;
	font-weight: 500;
	color: #555;
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
}

/* ── Hint text ───────────────────────────────────────────────── */
.wdm-v3-hint {
	font-size: 13px;
	color: #555;
	margin: 6px 0 0;
	line-height: 1.5;
}

/* ── Calculated price summary — full-width own line ──────────── */
.wdm-v3-price-summary {
	width: 100%;
	margin: 8px 0 0;
	padding: 14px 18px;
	background: #f0f4f9;
	border: 1.5px solid #c2d3e8;
	border-radius: 8px;
	box-sizing: border-box;
}

.wdm-v3-price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.wdm-v3-price-left {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wdm-v3-price-label {
	font-size: 13px;
	font-weight: 600;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.wdm-v3-price-tier {
	font-size: 12px;
	color: #888;
	font-style: italic;
}

.wdm-v3-price-amount {
	font-size: 28px;
	font-weight: 700;
	color: #0d3b6e;
	letter-spacing: -0.5px;
}

/* ── Add to Cart button — disabled state when Custom + no valid L/W ─ */
.single_add_to_cart_button.wdm-btn-disabled,
.single_add_to_cart_button[disabled] {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

/* ── Admin order meta ────────────────────────────────────────── */
.wdm-v3-order-meta p {
	margin: 2px 0;
	font-size: 13px;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
	.wdm-v3-row {
		grid-template-columns: 1fr;
	}

	.wdm-v3-tab {
		font-size: 13px;
		margin-right: 10px;
		margin-bottom: 4px;
	}

	.wdm-v3-tab.active {
		padding: 4px 14px;
	}

	.wdm-v3-price-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.wdm-v3-price-amount {
		font-size: 22px;
	}

	.woocommerce-variation-add-to-cart .quantity,
	.woocommerce-variation-add-to-cart .single_add_to_cart_button {
		width: 100%;
		margin-right: 0;
	}
}