#hma-square-card {
	padding: 1rem;
	border: 1px solid #d0d5dd;
	border-radius: 10px;
	background: #ffffff;
	min-height: 52px;
}

#hma-square-errors {
	margin-top: 8px;
	color: #b42318;
	font-size: 14px;
}

.hma-square-processing {
	opacity: 0.65;
	pointer-events: none;
}

/* =============================================================================
   Coupon feedback (#hma-coupon-feedback) — visibilidad on-demand.

   El div lo crea coupon-validator.js (ensureFeedbackContainer) con inline
   styles (min-height: 1.2em + margin-top: 6px) que reservan espacio aunque
   esté vacío. Este CSS lo oculta por default (sin reservar espacio en el
   layout) y solo lo muestra cuando el JS le pone contenido (estados
   PENDING / VALID / INVALID con mensaje).

   !important necesario para sobrescribir los inline styles del JS.

   flex-basis: 100% asegura que cuando el field wrapper es flex container
   (caso del theme chatflow360.com en desktop), el feedback ocupa toda la
   fila siguiente en lugar de aplastarse al lado del input. Si el padre no
   es flex, esta propiedad es ignorada (sin efecto adverso).
   ============================================================================= */
#hma-coupon-feedback {
	display: none !important;
	min-height: 0 !important;
	margin-top: 0 !important;
	text-align: right;
}

#hma-coupon-feedback:not(:empty) {
	display: block !important;
	min-height: 1.2em !important;
	margin-top: 6px !important;
	flex-basis: 100%;
}