/**
 * Estilos del asistente de pedido (pasos 1 a 4). Calco del popup del
 * prototipo aprobado en estructura y comportamiento: cabecera e indicador
 * de pasos fijos, cuerpo con scroll propio, barra de navegación fija al
 * pie, mismos íconos. El color NO se calca del prototipo: el tema todavía
 * está en su paleta neutra a propósito (ver REGISTRO-DE-AVANCE, etapa 08),
 * así que acá se usan esos mismos tokens neutros compartidos, no el rojo
 * de marca del prototipo.
 */

.ace-ckw {
	--ckw-primary: var( --wp--preset--color--accent, #3f4a5a );
	--ckw-primary-dark: var( --wp--preset--color--accent-strong, #2a323d );
	--ckw-black: var( --wp--preset--color--contrast, #1c1c1c );
	--ckw-dark-gray: var( --wp--preset--color--contrast-muted, #6b6b6b );
	--ckw-gray: var( --wp--preset--color--contrast-muted, #6b6b6b );
	--ckw-light-gray: var( --wp--preset--color--hairline, #e2e1de );
	--ckw-bg: var( --wp--preset--color--base, #fafaf9 );
	--ckw-success: var( --wp--preset--color--success, #1b7a38 );
	--ckw-success-bg: var( --wp--preset--color--success-surface, #e9f7ee );
	--ckw-danger: var( --wp--preset--color--danger, #b3261e );
	--ckw-danger-bg: var( --wp--preset--color--danger-surface, #fdecea );
	--ckw-radius-lg: 16px;
	--ckw-radius-md: 8px;

	/*
	 * La etiqueta flotante (`.ace-field`, `foundations.css`) toma estos
	 * mismos nombres de variable (`--pc-*`) por default (venían del
	 * prototipo). Este popup no los define porque vive en la paleta neutra
	 * a propósito (ver comentario de arriba del archivo) -sin este puente
	 * hubiera heredado el rojo de marca (`#ce2731`) del valor de reserva de
	 * foundations.css, pisando esa decisión. Se los apunta a los tokens
	 * propios del asistente para que la etiqueta quede del mismo color que
	 * el resto de este popup.
	 */
	--pc-primary: var( --ckw-primary );
	--pc-dark-gray: var( --ckw-gray );
	--pc-white: #fff;
}

/* Varias piezas de este asistente (el popup, la fila de envío, la de
   descuento) fijan su propio "display" en la regla de la clase, con la
   misma prioridad que la regla del navegador para el atributo "hidden" y
   cargada despues: sin esto, "hidden" (puesto por JS para ocultarlas)
   pierde esa pulseada y quedan visibles igual. Encontrado auditando la
   14.05: el popup de pedido se abria solo con el carrito vacio, y la fila
   de envio se veia en pasos donde no debia. */
.ace-ckw [hidden] {
	display: none !important;
}

.ace-ckw-icon-sm {
	width: 16px;
	height: 16px;
}

.ace-ckw-icon-lg {
	width: 48px;
	height: 48px;
	color: var( --ckw-gray );
	margin-bottom: 14px;
}

/* ---------- Estado vacío / cargando (sin popup, es la página misma) ---------- */
.ace-ckw-page-loading,
.ace-ckw-page-empty {
	text-align: center;
	padding: 4rem 1rem;
	max-width: 480px;
	margin-inline: auto;
}

.ace-ckw-page-empty p {
	margin-bottom: 18px;
	color: var( --ckw-dark-gray );
}

/* ---------- Popup ---------- */
.ace-ckw-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba( 0, 0, 0, 0.55 );
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.ace-ckw-modal {
	position: relative;
	background: #fff;
	width: 100%;
	max-width: 600px;
	height: min( 720px, 92vh );
	border-radius: var( --ckw-radius-lg );
	box-shadow: 0 24px 60px rgba( 0, 0, 0, 0.28 );
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

@media ( max-width: 640px ) {
	.ace-ckw-backdrop {
		padding: 0;
		align-items: stretch;
	}
	.ace-ckw-modal {
		max-width: none;
		height: 100%;
		border-radius: 0;
	}
}

/* Cuando hay sesion de administrador o personal, WordPress agrega su propia
   barra fija arriba de todo (mas prioridad que este popup) y tapaba el
   titulo y la X para cerrar. Un cliente comun nunca ve esta barra, pero el
   equipo si, y necesita poder salir del popup igual. */
body.admin-bar .ace-ckw-backdrop {
	top: 32px;
}

@media ( max-width: 782px ) {
	body.admin-bar .ace-ckw-backdrop {
		top: 46px;
	}
}

/* ---------- Cabecera fija (título + pasos) ---------- */
.ace-ckw-modal-header {
	flex-shrink: 0;
	padding: 14px 20px 0;
	border-bottom: 1px solid var( --ckw-light-gray );
}

.ace-ckw-top-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.ace-ckw-top-row h2 {
	font-size: 1.125rem;
	margin: 0;
}

.ace-ckw-close {
	flex-shrink: 0;
	background: var( --ckw-bg );
	border: none;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --ckw-dark-gray );
}

.ace-ckw-close:hover {
	background: var( --ckw-light-gray );
}

.ace-ckw-steps {
	display: flex;
	align-items: flex-start;
	padding-bottom: 12px;
}

.ace-ckw-step-dot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	width: 20%;
	text-align: center;
}

.ace-ckw-dot-circle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --ckw-bg );
	border: 1.5px solid var( --ckw-light-gray );
	color: var( --ckw-gray );
	transition: background 150ms, border-color 150ms, color 150ms;
}

.ace-ckw-dot-label {
	font-size: 11px;
	font-weight: 500;
	color: var( --ckw-gray );
	line-height: 1.2;
}

.ace-ckw-step-dot.is-active .ace-ckw-dot-circle {
	background: var( --ckw-primary );
	border-color: var( --ckw-primary );
	color: #fff;
}

.ace-ckw-step-dot.is-active .ace-ckw-dot-label {
	color: var( --ckw-black );
}

.ace-ckw-step-dot.is-done .ace-ckw-dot-circle {
	background: var( --ckw-black );
	border-color: var( --ckw-black );
	color: #fff;
}

.ace-ckw-step-dot.is-done .ace-ckw-dot-label {
	color: var( --ckw-dark-gray );
}

.ace-ckw-step-dot.is-upcoming .ace-ckw-dot-circle,
.ace-ckw-step-dot.is-upcoming .ace-ckw-dot-label {
	opacity: 0.5;
}

.ace-ckw-step-line {
	flex: 1 1 auto;
	height: 1.5px;
	background: var( --ckw-light-gray );
	margin-top: 18px;
}

@media ( max-width: 520px ) {
	.ace-ckw-dot-label {
		display: none;
	}
}

/* ---------- Cuerpo: la única parte que scrollea ---------- */
.ace-ckw-modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 0 20px 20px;
	min-height: 0;
}

.ace-ckw-upcoming-note {
	font-size: 12px;
	color: var( --ckw-dark-gray );
	background: var( --ckw-bg );
	border-radius: var( --ckw-radius-md );
	padding: 8px 12px;
	margin: 14px 0;
}

.ace-ckw-step h3 {
	font-size: 1.0625rem;
	margin: 14px 0 14px;
}

.ace-ckw-note {
	font-size: 0.875rem;
	color: var( --ckw-dark-gray );
	margin-bottom: 14px;
}

/* ---------- Lista de productos ---------- */
.ace-ckw-item {
	display: flex;
	gap: 12px;
	padding-block: 12px;
	border-bottom: 1px solid var( --ckw-light-gray );
}

.ace-ckw-item img,
.ace-ckw-noimg {
	width: 56px;
	height: 56px;
	border-radius: 8px;
	flex-shrink: 0;
	object-fit: cover;
	background: var( --ckw-bg );
}

.ace-ckw-noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --ckw-gray );
}

.ace-ckw-noimg svg {
	width: 22px;
	height: 22px;
}

.ace-ckw-item-info {
	flex: 1;
	min-width: 0;
}

.ace-ckw-item-name {
	font-weight: 600;
	font-size: 0.9375rem;
}

.ace-ckw-item-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 8px;
}

.ace-ckw-qty {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: 1px solid var( --ckw-light-gray );
	border-radius: 999px;
	padding: 2px;
}

.ace-ckw-qty button {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --ckw-black );
	cursor: pointer;
}

.ace-ckw-qty button svg {
	width: 14px;
	height: 14px;
}

.ace-ckw-qty span {
	min-width: 18px;
	text-align: center;
	font-weight: 600;
	font-size: 0.875rem;
}

.ace-ckw-item-price {
	font-weight: 600;
	color: var( --ckw-primary );
}

.ace-ckw-item-remove {
	flex-shrink: 0;
	align-self: flex-start;
	border: none;
	background: none;
	color: var( --ckw-gray );
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.ace-ckw-item-remove svg {
	width: 16px;
	height: 16px;
}

.ace-ckw-item-remove:hover {
	color: var( --ckw-primary );
}

/* ---------- Productos relacionados ---------- */
.ace-ckw-cross {
	margin-top: 8px;
}

.ace-ckw-cross h4 {
	font-size: 0.9375rem;
	margin-bottom: 10px;
}

.ace-ckw-cross-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 124px, 1fr ) );
	gap: 10px;
}

.ace-ckw-cross-item {
	border: 1px solid var( --ckw-light-gray );
	border-radius: 10px;
	padding: 10px;
	text-align: center;
}

.ace-ckw-cross-item img,
.ace-ckw-cross-item .ace-ckw-noimg {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 8px;
	margin-bottom: 6px;
}

.ace-ckw-cross-item .name {
	font-size: 12px;
	font-weight: 600;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.1em;
}

.ace-ckw-cross-item .price {
	font-size: 12px;
	font-weight: 600;
	color: var( --ckw-primary );
	margin: 4px 0 8px;
}

.ace-ckw-cross-add {
	width: 100%;
	height: 34px;
	border-radius: 999px;
	border: 1px solid var( --ckw-primary );
	color: var( --ckw-primary );
	background: none;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.ace-ckw-cross-add:disabled {
	opacity: 0.5;
	cursor: default;
}

.ace-ckw-cross-add.is-added {
	background: var( --ckw-success );
	border-color: var( --ckw-success );
	color: #fff;
}

/* ---------- Paso 2: cuenta / invitado ---------- */
.ace-ckw-account-badge {
	background: var( --ckw-success-bg );
	color: var( --ckw-success );
	padding: 10px 14px;
	border-radius: var( --ckw-radius-md );
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 14px;
}

/* Pie del formulario de "Tus datos" (C21): solo texto, sin botones grandes.
   El enlace usa el mismo color de acento del sitio y se subraya para que se
   reconozca como algo tocable. Es un enlace dentro de una frase, así que
   no lleva el área de toque de 44 px de los botones. */
.ace-ckw-guest-note {
	margin: 16px 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var( --ckw-dark-gray );
}

.ace-ckw-guest-note > span {
	display: block;
}

.ace-ckw-link {
	display: inline;
	min-block-size: 0;
	padding: 0;
	margin: 0;
	border: 0;
	line-height: inherit;
	background: none;
	font: inherit;
	font-weight: 600;
	color: var( --ckw-black );
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.ace-ckw-link:hover {
	color: var( --ckw-primary-dark );
}

.ace-ckw-link:focus-visible {
	outline: 2px solid var( --ckw-primary );
	outline-offset: 3px;
	border-radius: 2px;
}

.ace-ckw-login-form {
	margin-bottom: 14px;
	padding: 14px;
	border: 1px dashed var( --ckw-light-gray );
	border-radius: var( --ckw-radius-md );
}

.ace-ckw-login-form .ace-ckw-field {
	margin-bottom: 10px;
}

.ace-ckw-login-msg {
	font-size: 12px;
	font-weight: 600;
	color: var( --ckw-danger );
	margin: 6px 0;
}

.ace-ckw-row.two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 10px;
}

@media ( max-width: 480px ) {
	.ace-ckw-row.two-col {
		grid-template-columns: 1fr;
	}
}

/*
 * El color y la posición de la etiqueta ahora los define `.ace-field`
 * (foundations.css del tema: gris en reposo, `--ckw-primary` al enfocar vía
 * el puente `--pc-*` de arriba). Antes esta regla fijaba el mismo color
 * siempre (`--ckw-black`) con la misma especificidad que esa regla dinámica
 * -según el orden de carga, podía ganarle y dejar la etiqueta sin el cambio
 * de color al enfocar-.
 */
.ace-ckw-field label {
	font-size: 12px;
	font-weight: 600;
}

.ace-ckw-field input {
	width: 100%;
	height: 44px;
	padding: 0 12px;
	background: var( --pc-white );
	border: 1px solid var( --ckw-light-gray );
	border-radius: var( --ckw-radius-md );
	font-size: 0.9375rem;
	box-sizing: border-box;
}

.ace-ckw-field input.is-touched:invalid {
	border-color: var( --ckw-danger );
}

.ace-ckw-field-error {
	margin: 4px 0 0;
	font-size: 0.8125rem;
	color: var( --ckw-danger );
}

/* ---------- Paso 5: casilla "crear cuenta" ---------- */
.ace-ckw-signup {
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: var( --ckw-radius-md );
	background: var( --ckw-success-bg );
	border: 1px solid var( --ckw-success );
}

.ace-ckw-field-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var( --ckw-black );
}

.ace-ckw-field-check input {
	width: 18px;
	height: 18px;
	margin-top: 3px;
	flex-shrink: 0;
	accent-color: var( --ckw-primary );
}

.ace-ckw-field-check small {
	display: block;
	margin-top: 2px;
	font-weight: 400;
	font-size: 0.8125rem;
	color: var( --ckw-dark-gray );
}

.ace-ckw-signup .ace-ckw-field {
	margin-top: 12px;
}

/* ---------- Paso 3: entrega / Paso 4: pago ---------- */
.ace-ckw-option-card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border: 1.5px solid var( --ckw-light-gray );
	border-radius: var( --ckw-radius-md );
	padding: 14px 16px;
	margin-bottom: 10px;
	cursor: pointer;
	transition: border-color 150ms, background 150ms;
}

.ace-ckw-option-card:has( input:checked ) {
	border-color: var( --ckw-primary );
	background: var( --ckw-bg );
}

.ace-ckw-option-card input {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	accent-color: var( --ckw-primary );
	flex-shrink: 0;
}

.ace-ckw-option-card span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-weight: 500;
	font-size: 0.875rem;
}

.ace-ckw-option-card small {
	font-weight: 400;
	color: var( --ckw-dark-gray );
}

.ace-ckw-field textarea {
	width: 100%;
	padding: 10px 12px;
	background: var( --pc-white );
	border: 1px solid var( --ckw-light-gray );
	border-radius: var( --ckw-radius-md );
	font-size: 0.9375rem;
	font-family: inherit;
	box-sizing: border-box;
	resize: vertical;
}

/* ---------- Cupón (paso 4) ---------- */
.ace-ckw-coupon {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var( --ckw-light-gray );
}

.ace-ckw-coupon-row {
	display: flex;
	gap: 8px;
}

.ace-ckw-coupon-row input {
	flex: 1;
	min-width: 0;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var( --ckw-light-gray );
	border-radius: var( --ckw-radius-md );
	font-size: 0.9375rem;
	box-sizing: border-box;
}

.ace-ckw-coupon-row .ace-ckw-btn {
	height: 44px;
	white-space: nowrap;
}

.ace-ckw-coupon-msg {
	margin-top: 8px;
	font-size: 0.8125rem;
	font-weight: 500;
}

.ace-ckw-coupon-msg.is-success {
	color: var( --ckw-success );
}

.ace-ckw-coupon-msg.is-error {
	color: var( --ckw-danger );
}

.ace-ckw-coupon-applied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
	padding: 10px 14px;
	background: var( --ckw-success-bg );
	color: var( --ckw-success );
	border-radius: var( --ckw-radius-md );
	font-size: 0.8125rem;
	font-weight: 600;
}

.ace-ckw-coupon-remove {
	border: none;
	background: none;
	color: inherit;
	text-decoration: underline;
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
}

.ace-ckw-error {
	margin-top: 14px;
	padding: 10px 14px;
	border-radius: var( --ckw-radius-md );
	background: var( --ckw-danger-bg );
	color: var( --ckw-danger );
	font-size: 0.875rem;
	font-weight: 600;
}

/* ---------- Pie fijo: total + navegación ---------- */
.ace-ckw-modal-footer {
	flex-shrink: 0;
	border-top: 1px solid var( --ckw-light-gray );
	background: #fff;
	padding: 12px 20px calc( 12px + env( safe-area-inset-bottom, 0px ) );
}

.ace-ckw-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 0.875rem;
	color: var( --ckw-dark-gray );
	margin-bottom: 10px;
}

.ace-ckw-total strong {
	font-size: 1.375rem;
	font-weight: 600;
	color: var( --ckw-black );
}

.ace-ckw-total-shipping {
	margin-top: -6px;
}

.ace-ckw-total-discount {
	margin-top: -6px;
}

.ace-ckw-total-discount strong {
	font-size: 0.875rem;
	font-weight: 600;
	color: var( --ckw-success );
}

.ace-ckw-total-shipping strong {
	font-size: 0.875rem;
	font-weight: 600;
	color: var( --ckw-dark-gray );
}

.ace-ckw-actions {
	display: flex;
	gap: 10px;
}

.ace-ckw-back {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var( --ckw-bg );
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --ckw-black );
	cursor: pointer;
}

.ace-ckw-back:disabled {
	visibility: hidden;
}

.ace-ckw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 22px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.9375rem;
	border: none;
	cursor: pointer;
	text-decoration: none;
}

.ace-ckw-btn-primary {
	background: var( --ckw-primary );
	color: #fff;
}

.ace-ckw-btn-dark {
	background: var( --ckw-black );
	color: #fff;
}

.ace-ckw-primary {
	flex: 1;
}

.ace-ckw-primary[hidden] {
	display: none;
}