/*
 * woocommerce-fallback.css — Red de seguridad visual para WooCommerce
 *
 * Casi toda la tienda usa plantillas propias con clases .rda-* (checkout,
 * cuenta, carrito, etc.) — pero WooCommerce tiene pantallas que NO pasan
 * por ningún archivo de plantilla, las genera directo en PHP (ej. la
 * verificación de correo al pagar un pedido de invitado en
 * /finalizar-compra/order-pay/, o un aviso de "guía inválida"). Esas
 * pantallas solo tienen las clases genéricas de WooCommerce
 * (.woocommerce-error, .woocommerce-form-row, button.button, etc.) y
 * antes se veían con el estilo por defecto de WordPress — planas, sin
 * la marca del sitio.
 *
 * Este archivo da un estilo base premium a esas clases genéricas, para
 * que CUALQUIER pantalla que WooCommerce dibuje —la hayamos previsto o
 * no— se vea acorde al resto del sitio. Especificidad baja a propósito
 * (selectores simples, un solo nivel) y se carga temprano: cualquier
 * plantilla específica (.rda-auth-form, .rda-checkout, etc.) sigue
 * ganando la cascada sin problema.
 *
 * @package RosariosDelAlma
 */

/* ── Contenedor genérico ──────────────────────────────────────────────── */

.woocommerce:not([class*="rda-"]) {
	max-width: 640px;
	margin: var(--space-2xl) auto;
	padding: 0 var(--space-md);
	font-family: var(--font-body);
	color: var(--color-ink-primary);
}

/* ── Avisos (error / info / mensaje) ──────────────────────────────────── */

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
	display: block;
	list-style: none;
	margin: 0 0 var(--space-lg);
	padding: var(--space-md) var(--space-lg);
	font-family: var(--font-body);
	font-size: var(--text-body-small);
	line-height: 1.6;
	background: var(--color-cream-light);
	border: 1px solid var(--color-border-medium);
	border-left: 3px solid var(--color-gold-base);
	border-radius: var(--radius-md);
}

.woocommerce-error { border-left-color: var(--color-error); color: var(--color-error); }
.woocommerce-info   { border-left-color: var(--color-navy-base); }
.woocommerce-message { border-left-color: var(--color-success, var(--color-gold-base)); }

.woocommerce-error li,
.woocommerce-info li,
.woocommerce-message li {
	margin: 0;
	padding: 0;
}

.woocommerce-error a,
.woocommerce-info a,
.woocommerce-message a {
	color: var(--color-gold-deep);
	text-decoration: underline;
}

/* ── Formularios genéricos ────────────────────────────────────────────── */

.woocommerce-form-row {
	margin: 0 0 var(--space-md);
}

.woocommerce-form-row label {
	display: block;
	margin-bottom: var(--space-2xs);
	font-family: var(--font-body);
	font-size: var(--text-caption);
	font-weight: var(--weight-medium);
	color: var(--color-text-secondary);
}

.woocommerce form .input-text,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="password"],
.woocommerce form input[type="tel"],
.woocommerce form input[type="number"],
.woocommerce form select,
.woocommerce form textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: var(--text-body-small);
	color: var(--color-ink-primary);
	background: var(--color-cream-light);
	border: var(--border-thin) solid var(--color-border-medium);
	border-radius: var(--radius-md);
	padding: var(--space-sm) var(--space-md);
	outline: none;
	transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.woocommerce form .input-text:focus,
.woocommerce form input:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus {
	border-color: var(--color-gold-base);
	box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}

/* ── Botones ───────────────────────────────────────────────────────────── */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	width: auto;
	padding: 14px 32px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: var(--weight-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-navy-base);
	background: var(--color-gold-base);
	border: 1px solid var(--color-gold-base);
	border-radius: var(--radius-sm);
	cursor: pointer;
	text-decoration: none;
	transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce form button[type="submit"]:hover {
	background: var(--color-gold-deep);
	border-color: var(--color-gold-deep);
	transform: translateY(-1px);
}