/**
 * STAGGS "1 - MEDIDAS" step UX — Estor enrollable Screen pilot
 * (project-docs/10-estores-enrollables-screen-pilot.md). Presentation for
 * the real nodes assets/js/staggs-medidas-bridge.js moves/injects around
 * STAGGS' own #option-group-2830 (Ancho) / #option-group-2831 (Alto), plus
 * the local two-column `.ed-medidas-layout` (fields | explanatory image)
 * that script builds — see that script's own docblock for why this lives
 * inside MEDIDAS' own markup rather than STAGGS' shared native gallery
 * pane.
 */

.ed-medidas-helper {
	display: flex;
	align-items: flex-start;
	gap: var(--ed-space-2xs);
	margin-bottom: var(--ed-space-sm);
	padding: var(--ed-space-xs) var(--ed-space-sm);
	background-color: var(--ed-color-surface-alt);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-md);
}

.ed-medidas-helper__icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--ed-color-muted);
}

.ed-medidas-helper__text {
	margin: 0;
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	color: var(--ed-color-text);
}

/*
 * Two-class selector on purpose: STAGGS' own
 * `.staggs-configurator-main a { text-decoration: none; }` (no !important)
 * has the SAME specificity as a bare `.ed-medidas-helper__text a` and wins
 * ties by load order — scoping through the ancestor `.ed-medidas-helper`
 * too raises specificity above that reset without needing !important.
 */
.ed-medidas-helper .ed-medidas-helper__text a {
	color: var(--ed-color-link);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ed-medidas-helper .ed-medidas-helper__text a:hover {
	color: var(--ed-color-link-hover);
}


/* ------------------------------------------------------------------ *
 * Contextual hint — one per field, directly under ITS OWN input (inside the
 * field's <label>, after its "Min … max …" line and any error), see
 * assets/js/staggs-medidas-bridge.js. Hidden it takes NO space (the form is
 * compact at rest); opened on focus it is an ordinary block, so the fields
 * below move down while it is open — intended. The close is held during a
 * pointer press in JS, so Continuar never moves out from under a click. A hidden
 * hint is still a valid aria-describedby target of its own input.
 * ------------------------------------------------------------------ */

.ed-medidas-hint {
	display: none;
	margin: var(--ed-space-2xs) 0 0;
	padding: 0 0 0 var(--ed-space-xs);
	border-left: 3px solid var(--ed-color-primary);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-xs);
	font-weight: 400;
	line-height: 1.5;
	color: var(--ed-color-text);
}

.ed-medidas-hint.is-open {
	display: block;
}

.ed-medidas-hint strong {
	font-weight: 600;
	color: var(--ed-color-heading);
}

/* ------------------------------------------------------------------ *
 * Inline validation — shown by Continuar's own JS validation, never a
 * native alert().
 * ------------------------------------------------------------------ */

.ed-medidas-error {
	margin: var(--ed-space-3xs) 0 0;
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-xs);
	font-weight: 600;
	color: var(--ed-color-error);
}

.ed-medidas-error[hidden] {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Continuar — primary CTA, own row below Ancho.
 * ------------------------------------------------------------------ */

.ed-medidas-continuar {
	display: flex;
	width: 100%;
	margin-top: var(--ed-space-xs);
	margin-bottom: var(--ed-space-sm);
}

.ed-medidas-continuar .wp-block-button__link {
	width: 100%;
	min-height: 44px;
	padding: var(--ed-space-2xs) var(--ed-space-lg);
}

/*
 * "Precio según medidas" — STAGGS' own live price display natively
 * renders INSIDE Ancho's own group (`data-formula` lives there), between
 * Ancho and Alto. The price belongs to the whole Ancho+Alto pair, so it
 * needs to read AFTER Alto instead — the real node stays exactly where
 * STAGGS put it (still fully live: STAGGS' own JS keeps finding and
 * updating it via `.option-group`, unaffected by `display:none`) and is
 * only hidden in place; assets/js/staggs-medidas-bridge.js mirrors its
 * value live into `.ed-medidas-price-mirror` below instead. See that
 * script's own docblock for why the real node can never be physically
 * moved there.
 */
#option-group-2830 .option-group-price-details {
	display: none;
}

/*
 * Same label-left/value-right row STAGGS' own (now-hidden)
 * `.option-group-price-details` used — a visual mirror, not a redesign.
 */
.ed-medidas-price-mirror {
	display: flex;
	justify-content: space-between;
	margin: var(--ed-space-xs) 0 var(--ed-space-sm);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-base);
	color: var(--ed-color-text);
}

.ed-medidas-price-mirror__label,
.ed-medidas-price-mirror__value {
	margin: 0;
}

/*
 * Inline "medidas changed, please re-confirm" notice — shown instead of a
 * browser alert() when Ancho/Alto change again after an earlier
 * successful Continuar (assets/js/staggs-medidas-bridge.js).
 */
.ed-medidas-reconfirm {
	margin: 0 0 var(--ed-space-sm);
	padding: var(--ed-space-xs) var(--ed-space-sm);
	background-color: var(--ed-color-surface-alt);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-md);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	color: var(--ed-color-text);
}

.ed-medidas-reconfirm[hidden] {
	display: none;
}

/*
 * Divider between MEDIDAS and the rest of the configurator — only ever
 * visible once Continuar has revealed the downstream steps (toggled
 * alongside them in staggs-medidas-bridge.js), so it never appears as a
 * lone line before the gate opens. Content-width, not full-browser-width.
 */
.ed-medidas-divider {
	margin: var(--ed-space-lg) 0;
	border: 0;
	border-top: 1px solid var(--ed-color-border);
}

.ed-medidas-divider[hidden] {
	display: none;
}

/*
 * Header/total price "0,00 €" before real dimensions exist reads as a
 * broken/free price rather than "not calculated yet" — swap in a neutral
 * label instead. A sibling of `.price`, never a child of it (STAGGS
 * periodically replaces `.price`'s own innerHTML wholesale, which wiped
 * out an earlier version of this label when it lived inside `.price`);
 * assets/js/staggs-medidas-bridge.js toggles each one's `hidden`
 * attribute directly — the real STAGGS price markup is never edited.
 */
.ed-price-pending-label {
	margin: 0;
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-base);
	color: var(--ed-color-muted);
}

.ed-price-pending-label[hidden] {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Local two-column layout for MEDIDAS — left: fields; right: the
 * explanatory image. LOCAL to this step (a plain child of MEDIDAS' own
 * `.option-group-step-inner`), not STAGGS' shared native gallery pane —
 * see assets/js/staggs-medidas-bridge.js docblock for why that pane
 * caused the image to visibly jump once Tejido y color's own content
 * changed the page's layout. Mobile-first: single column by default, two
 * columns from 900px up (that pane is disabled and the options column
 * widened to fill the freed space — staggs-bridge.css, scoped to this
 * product — giving this local split real room to work with).
 * ------------------------------------------------------------------ */

.ed-medidas-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ed-space-lg);
	align-items: start;
}

@media (min-width: 900px) {
	.ed-medidas-layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.ed-medidas-fields {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ed-medidas-visual {
	display: flex;
	flex-direction: column;
	gap: var(--ed-space-sm);
	padding: var(--ed-space-md);
	min-width: 0;
	background-color: var(--ed-color-surface-alt);
	border-radius: var(--ed-radius-md);
}

.ed-medidas-visual__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	border-radius: var(--ed-radius-md);
	background-color: var(--ed-color-surface);
}

.ed-medidas-visual__caption {
	margin: 0;
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	line-height: 1.5;
	color: var(--ed-color-muted);
	text-align: center;
}