/**
 * Pantalla 4 del handoff: "Revisión antes de comprar" (Fase 8 del plan).
 * README § "4 · Revisión antes de comprar": header con pasos mono,
 * izquierda mockup 270×540 + 3 miniaturas 76×76, derecha resumen +
 * cantidad + bloque rosa de totales + CTA.
 */

#wccd-review-screen[hidden] { display: none; }

/* Tarjeta centrada, igual que .wccd-gallery-screen (gallery.css) — a
   diferencia de .wccd-shell (el editor), que sí es fullscreen a propósito
   (ver el comentario largo en editor-shell.css sobre por qué), galería y
   revisión son "contenido que puede ser más bajo que el viewport", una
   tarjeta con aire alrededor dentro del overlay del modal — mismo
   criterio que Editor 2026.dc.html línea 413. Bug real reportado por el
   usuario: esta pantalla nunca tuvo el tratamiento de tarjeta, quedaba
   pegada a los 4 bordes del modal en vez de centrada como el handoff. */
#wccd-review-screen {
	max-width: 1240px;
	margin: 34px auto; /* aire vertical dentro de .wccd-modal__dialog — sin esto la tarjeta queda centrada horizontal pero pegada arriba, sin margen. */
	background: var(--wccd-panel);
	border: 1px solid var(--wccd-line);
	border-radius: var(--wccd-radius-shell);
	box-shadow: var(--wccd-shadow-shell);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	font-family: var(--wccd-font-ui);
	color: var(--wccd-ink);
}

/* ---- Header ---- */
#wccd-review-screen .wccd-review__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 24px;
	padding-right: 68px; /* espacio para #wccd-modal-close, mismo criterio que .wccd-header. */
	border-bottom: 1px solid var(--wccd-line-soft);
	flex-wrap: wrap;
}
/* Sin esto, el <svg> de wccd_get_icon_svg('arrow-left') no tiene ancho/
   alto propios y cae al tamaño intrínseco por defecto de un SVG sin
   viewBox resuelto por CSS (bug real: el botón se veía como un círculo
   dominado por el ícono, con "Volver al editor" invisible/aplastado). */
#wccd-review-back {
	display: flex;
	align-items: center;
	gap: 6px;
}
#wccd-review-back svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

#wccd-review-screen .wccd-review__steps {
	display: flex;
	gap: 8px;
	align-items: center;
	font-family: var(--wccd-font-mono);
	font-size: var(--wccd-fs-mono-lg);
	color: var(--wccd-label);
	text-transform: uppercase;
	letter-spacing: var(--wccd-label-letter-spacing);
}
#wccd-review-screen .wccd-review__steps-current { color: var(--wccd-violeta); font-weight: 600; }

/* ---- Body: dos columnas ---- */
#wccd-review-screen .wccd-review__body {
	display: flex;
	flex: 1;
	min-height: 0;
}

#wccd-review-screen .wccd-review__preview {
	flex: 0 0 380px;
	display: flex;
	flex-direction: row; /* mockup + columna de miniaturas lado a lado — README § "4 · Revisión": "case... y tres miniaturas" a la izquierda, no apiladas verticalmente. */
	align-items: center;
	justify-content: center;
	gap: 26px;
	padding: var(--wccd-space-9);
	background: var(--wccd-canvas-bg);
}
#wccd-review-screen .wccd-review__mockup {
	position: relative;
	width: 270px;
	height: 540px;
	/* Sin border-radius a propósito — mismo criterio que .wccd-case en
	   editor-canvas.css: el lienzo es el archivo de impresión real (un
	   rectángulo), el recorte físico con esquinas redondeadas lo hace la
	   fábrica del case después. */
	background: var(--wccd-ink);
	padding: 6px;
	box-shadow: var(--wccd-shadow-case);
}
/* Con una imagen real de case cargada (screen-review.php — clase
   condicional a $model['mask_url'], mismo criterio que
   wccd-case--has-mask del editor) — sin esto, el padding de 6px del
   mockup MÁS el inset:6px propio de __design/__mask de abajo dejaban un
   marco negro doble (12px en total) que ninguna imagen real llegaba a
   cubrir. */
#wccd-review-screen .wccd-review__mockup--has-mask {
	background: transparent;
	padding: 0;
	box-shadow: none;
}
#wccd-review-screen .wccd-review__mockup--has-mask .wccd-review__design,
#wccd-review-screen .wccd-review__mockup--has-mask .wccd-review__mask {
	inset: 0;
	width: 100%;
	height: 100%;
}
#wccd-review-screen .wccd-review__design {
	position: absolute;
	inset: 6px;
	width: calc(100% - 12px);
	height: calc(100% - 12px);
	object-fit: cover;
	background: var(--wccd-panel);
}
#wccd-review-screen .wccd-review__mask {
	position: absolute;
	inset: 6px;
	width: calc(100% - 12px);
	height: calc(100% - 12px);
	/* Sin esto el navegador usa el object-fit inicial ('fill') y estira la
	   foto del case a la fuerza al ratio fijo 270×540 del mockup — se veía
	   deformada (bug real reportado por el usuario). El lienzo real
	   (core/stage.js::loadMask()) nunca la estira, siempre la ajusta tipo
	   'cover' — mismo criterio acá. */
	object-fit: cover;
	pointer-events: none;
}

/* Columna vertical de 3 miniaturas junto al mockup — README § "4 ·
   Revisión": "tres miniaturas 76×76 (en la mano, lateral, impresión)".
   Estilo "swatch" con la etiqueta centrada (no una mini-foto con overlay
   de texto): son placeholders declarados a propósito, no fotos 3D reales
   del producto (README § "Assets") — ver Editor 2026.dc.html línea 1107. */
#wccd-review-screen .wccd-review__thumbs { display: flex; flex-direction: column; gap: 10px; }
#wccd-review-screen .wccd-review__thumb {
	width: 76px;
	height: 76px;
	border-radius: 12px;
	border: 1px solid var(--wccd-line);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--wccd-shadow-float);
}
/* --wccd-ink-soft, no --wccd-label (auditoría /impeccable critique, P1) —
   --thumb--hand de abajo tiene fondo de degradado rosa (#F6DDEC→#EFCFE2);
   contra el extremo más oscuro de ese degradado, --wccd-label (aun ya
   oscurecido a #6B6588 en wccd-tokens.css) da ~3.8:1, todavía por debajo
   de 4.5:1 — --wccd-ink-soft (#5B5473) da ~5:1 en el mismo punto y sigue
   siendo un token de texto de apoyo válido para una etiqueta mono chica
   como esta. Se aplica a los TRES thumbs (no solo --hand, la única que en
   verdad lo necesita) para que las tres etiquetas del stack se lean del
   mismo color — --side/--print están sobre blanco puro, donde
   --wccd-label ya alcanzaba de sobra, así que esto es a propósito más
   oscuro de lo estrictamente necesario ahí, no un fix a medias. */
#wccd-review-screen .wccd-review__thumb span {
	font-family: var(--wccd-font-mono);
	font-size: 9px;
	color: var(--wccd-ink-soft);
	text-align: center;
	line-height: 1.2;
}
#wccd-review-screen .wccd-review__thumb--hand  { background: linear-gradient(150deg, #F6DDEC, #EFCFE2); }
#wccd-review-screen .wccd-review__thumb--side  { background: #fff; }
#wccd-review-screen .wccd-review__thumb--print { background: #fff; }

/* ---- Derecha: resumen, cantidad, total, CTA ---- */
#wccd-review-screen .wccd-review__details {
	flex: 1;
	min-width: 0;
	padding: var(--wccd-space-9) 48px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}
#wccd-review-screen .wccd-review__eyebrow {
	font-family: var(--wccd-font-mono);
	font-size: var(--wccd-fs-mono-lg);
	letter-spacing: var(--wccd-label-letter-spacing);
	text-transform: uppercase;
	color: var(--wccd-menta-dark);
}
/* #wccd-review-screen (el ID de la pantalla) ancla el selector a
   propósito, no alcanza con la clase sola: es un <h2> nativo y el Kit
   Global de Elementor del theme (.elementor-kit-XXX h2{...}, en
   <html class="elementor-kit-XXX">) le pega a CUALQUIER h2 del documento
   con más especificidad (clase+tag) que una clase sola — bug real
   verificado en vivo contra cellphonecase.co (Rey + Elementor):
   "Revisa tu case" salía con el tamaño/peso/color del H2 global del
   theme, no los del plugin. color explícito por el mismo motivo: la
   regla del theme también fija color en el propio h2, así que heredarlo
   del contenedor no alcanza — hay que pisarlo acá. */
#wccd-review-screen .wccd-review__title {
	font-family: var(--wccd-font-ui);
	font-size: var(--wccd-fs-screen-title);
	font-weight: 600;
	color: var(--wccd-ink);
	letter-spacing: -.025em;
	margin: 6px 0 24px;
	max-width: 420px;
}

#wccd-review-screen .wccd-review__summary { margin: 0 0 var(--wccd-space-7); }
#wccd-review-screen .wccd-review__summary-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: var(--wccd-space-4) 0;
	border-bottom: 1px solid var(--wccd-line-soft);
	max-width: 420px;
}
#wccd-review-screen .wccd-review__summary-row dt {
	font-family: var(--wccd-font-mono);
	font-size: var(--wccd-fs-mono-sm);
	text-transform: uppercase;
	letter-spacing: var(--wccd-label-letter-spacing);
	color: var(--wccd-label);
}
#wccd-review-screen .wccd-review__summary-row dd {
	margin: 0;
	font-size: var(--wccd-fs-control);
	font-weight: 500;
	text-align: right;
}
#wccd-review-screen .wccd-review__quality--ok   { color: var(--wccd-ok-ink); }
#wccd-review-screen .wccd-review__quality--warn { color: var(--wccd-warn-ink); }

#wccd-review-screen .wccd-review__qty-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 420px;
	margin-bottom: var(--wccd-space-2);
}
#wccd-review-screen .wccd-review__qty-stepper {
	display: flex;
	align-items: center;
	gap: var(--wccd-space-5);
}
#wccd-review-screen .wccd-review__qty-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--wccd-line);
	background: var(--wccd-panel);
	color: var(--wccd-ink);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
#wccd-review-screen .wccd-review__qty-btn svg { width: 14px; height: 14px; }
#wccd-review-qty-value {
	min-width: 20px;
	text-align: center;
	font-family: var(--wccd-font-mono);
	font-size: var(--wccd-fs-control);
}
#wccd-review-screen .wccd-review__discount-note {
	margin: 0 0 var(--wccd-space-7);
	font-size: var(--wccd-fs-secondary-sm);
	color: var(--wccd-menta-dark);
	max-width: 420px;
}
#wccd-review-screen .wccd-review__discount-note[hidden] { display: none; }

#wccd-review-screen .wccd-review__totals {
	background: var(--wccd-rosa-totales);
	border-radius: var(--wccd-radius-card);
	padding: var(--wccd-space-6) var(--wccd-space-7);
	max-width: 420px;
	margin-bottom: var(--wccd-space-6);
}
#wccd-review-screen .wccd-review__totals-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-size: var(--wccd-fs-secondary);
	color: var(--wccd-ink-soft);
	padding: var(--wccd-space-1) 0;
}
#wccd-review-screen .wccd-review__totals-row--total {
	margin-top: var(--wccd-space-2);
	padding-top: var(--wccd-space-4);
	border-top: 1px solid rgba(26, 24, 48, .1);
	font-size: var(--wccd-fs-panel-title-sm);
	color: var(--wccd-ink);
	font-weight: 600;
}

#wccd-review-screen .wccd-review__confirm {
	width: 100%;
	max-width: 420px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: var(--wccd-radius-row);
	margin-bottom: var(--wccd-space-3);
}
#wccd-review-screen .wccd-review__confirm svg { width: 17px; height: 17px; flex-shrink: 0; }
#wccd-review-screen .wccd-review__keep-editing {
	width: 100%;
	max-width: 420px;
	border: none;
	background: none;
	color: var(--wccd-ink-soft);
	text-align: center;
	justify-content: center;
	margin-bottom: var(--wccd-space-8);
}
#wccd-review-screen .wccd-review__keep-editing:hover { color: var(--wccd-ink); }

#wccd-review-screen .wccd-review__warranty {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 420px;
	display: flex;
	flex-direction: column;
	gap: var(--wccd-space-3);
}
#wccd-review-screen .wccd-review__warranty li {
	font-size: var(--wccd-fs-secondary-sm);
	color: var(--wccd-ink-soft);
	line-height: 1.5;
	display: flex;
	align-items: center;
	gap: 8px;
}
#wccd-review-screen .wccd-review__warranty li svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	color: var(--wccd-menta);
}

@media (max-width: 767px) {
	#wccd-review-screen .wccd-review__body { flex-direction: column; overflow-y: auto; }
	#wccd-review-screen .wccd-review__preview { flex: 0 0 auto; padding: var(--wccd-space-7); }
	#wccd-review-screen .wccd-review__mockup { width: 200px; height: 400px; }
	#wccd-review-screen .wccd-review__details { padding: var(--wccd-space-7) var(--wccd-space-6); }
	#wccd-review-screen .wccd-review__header { padding-right: 24px; }
}