/**
 * OREM USA Gate block — frontend styles.
 *
 * DOM model
 * ---------
 * El servidor emite el placeholder:
 *   <div data-block-name="orem/usa-gate" class="wp-block-orem-usa-gate"></div>
 * El hidratador de inner-blocks de WC Blocks CONSUME ese placeholder al
 * montar nuestro componente React. Después de hidratar, el DOM solo tiene
 * la salida del componente:
 *   <div class="orem-usa-gate orem-usa-gate--error|orem-usa-gate--info">…</div>
 * Los selectores apuntan a `.orem-usa-gate`, NO a `.wp-block-orem-usa-gate`
 * (mismo patrón que referencias-domicilio: ese wrapper desaparece tras la
 * hidratación).
 *
 * Colores: no se reserva un color de marca nuevo para "error" — el
 * docblock de `class-wc-digital-badge.php` ya reparte los roles (Champagne
 * = informativo, Nude = oferta/nuevo, Burgundy = best-seller) y ninguno es
 * "alerta". La alarma real la da el notice nativo de WC Blocks
 * (`.wc-block-components-notice-banner.is-error`, ya estilizado en
 * checkout.css); esta tarjeta es la superficie ACCIONABLE justo debajo —
 * calmada, no un segundo susto rojo.
 */

.orem-usa-gate {
	margin: 12px 0;
	padding: 14px 16px;
	border-radius: var( --orem-radius, 10px );
	font-size: 13.5px;
	line-height: 1.5;
}

.orem-usa-gate--error {
	background: #fff;
	border: 1.5px solid #e3b8b8;
}

.orem-usa-gate--info {
	background: var( --orem-champagne, #e8d8c5 );
	border: 1.5px solid var( --orem-silk, #f3e3d8 );
}

.orem-usa-gate__titulo {
	margin: 0 0 4px;
	font-weight: 700;
	color: #a33a3a;
}

.orem-usa-gate__texto {
	margin: 0 0 8px;
	color: #4a4a4a;
}

.orem-usa-gate__texto:last-child {
	margin-bottom: 0;
}

.orem-usa-gate__texto--aviso {
	font-style: italic;
}

.orem-usa-gate__lista {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.orem-usa-gate__lista li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid #f1e5e5;
	color: #333;
}

.orem-usa-gate__lista li:last-child {
	border-bottom: none;
}

.orem-usa-gate__quitar {
	flex-shrink: 0;
	padding: 5px 12px;
	border: 1.5px solid #a33a3a;
	border-radius: 999px;
	background: #fff;
	color: #a33a3a;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.orem-usa-gate__quitar:hover:not(:disabled) {
	background: #a33a3a;
	color: #fff;
}

.orem-usa-gate__quitar:disabled {
	opacity: 0.55;
	cursor: default;
}

.orem-usa-gate__acciones {
	margin: 0;
}

.orem-usa-gate__link {
	color: var( --orem-burgundy, #6b1d33 );
	font-weight: 600;
	text-decoration: underline;
}

.orem-usa-gate__link--primario {
	display: inline-block;
	text-decoration: none;
	padding: 8px 16px;
	border-radius: 999px;
	background: var( --orem-burgundy, #6b1d33 );
	color: #fff;
}