/**
 * OREM USA — barra superior + revelado de badge/PDP en modo US.
 *
 * Todo lo que depende de "¿modo US?" se resuelve por CSS contra
 * `body.orem-dest-us`, puesta por JS (`usa-barra.js`) — nunca por PHP.
 * Ver el docblock de `class-wc-orem-usa-barra.php` para el porqué.
 *
 * La barra es `position:fixed` para no empujar el layout al aparecer
 * (evita CLS) y cabe en una sola línea en móvil, ≤44px.
 */

.orem-usa-barra {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 8px 40px;
	min-height: 44px;
	background: var( --orem-burgundy, #6b1d33 );
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
}

.orem-usa-barra[hidden] {
	display: none;
}

.orem-usa-barra__texto strong {
	font-weight: 700;
}

.orem-usa-barra__acciones {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/**
 * Especificidad reforzada (`.orem-usa-barra .orem-usa-barra__boton`, no
 * solo la clase sola) + reset de apariencia nativa. Sin esto, el botón
 * "No, envío a México" (un <button>, no un <a>) heredaba el fondo oscuro
 * del reset de botones del tema -- su propia regla gana el empate de
 * especificidad si su hoja de estilos carga después de la nuestra, y el
 * resultado es texto claro sobre un fondo casi tan oscuro como la barra
 * misma: contraste roto. Fondo sólido claro + texto oscuro elimina el
 * problema de raíz en vez de depender de "transparente sobre el rojo de
 * la barra", que es justo lo frágil que se rompió.
 */
.orem-usa-barra .orem-usa-barra__boton {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 999px;
	border: 1.5px solid var( --orem-champagne, #e8d8c5 );
	background: var( --orem-champagne, #e8d8c5 );
	color: var( --orem-burgundy, #6b1d33 );
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}

.orem-usa-barra .orem-usa-barra__boton--primario {
	background: #fff;
	color: var( --orem-burgundy, #6b1d33 );
	border-color: #fff;
	font-weight: 700;
}

.orem-usa-barra .orem-usa-barra__cerrar {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	padding: 6px;
}

@media (max-width: 600px) {
	.orem-usa-barra {
		padding: 6px 32px;
		font-size: 12px;
		gap: 6px;
	}
	.orem-usa-barra__texto {
		flex-basis: 100%;
	}
}

/* Empuja el contenido de la página cuando la barra está visible, para
   que no quede tapado detrás de un elemento fixed. Se activa solo junto
   con la clase que pone el JS, no antes -- así que no hay salto en el
   primer paint (la barra arranca `hidden`, sin reservar espacio). */
body.orem-dest-us-barra-visible {
	padding-top: 44px;
}
@media (max-width: 600px) {
	body.orem-dest-us-barra-visible {
		padding-top: 60px;
	}
}

/* Control persistente para revertir el destino elegido. Discreto, fijo
   abajo -- solo aparece una vez que hay algo que revertir (JS lo decide). */
.orem-usa-revertir {
	position: fixed;
	bottom: 12px;
	left: 12px;
	z-index: 9998;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var( --orem-burgundy, #6b1d33 );
	background: #fff;
	color: var( --orem-burgundy, #6b1d33 );
	font-size: 11.5px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.orem-usa-revertir[hidden] {
	display: none;
}

/* --- Badge del loop (class-wc-orem-usa-badge.php) --- */
.ckit-badge-usa {
	display: none;
}
body.orem-dest-us .ckit-badge-usa[hidden],
body.orem-dest-us .ckit-badge-usa {
	display: inline-block;
	background-color: var( --orem-champagne, #e8d8c5 );
	color: #2b2b2b;
}

/* --- Aviso de la PDP (class-wc-orem-usa-pdp.php + usa-pdp-aviso.js) --- */
.orem-usa-pdp-aviso {
	margin: 10px 0;
	padding: 10px 14px;
	border-radius: var( --orem-radius, 8px );
	background: var( --orem-silk, #f3e3d8 );
	color: #4a4a4a;
	font-size: 13px;
	line-height: 1.5;
}

.orem-usa-pdp-aviso a {
	color: var( --orem-burgundy, #6b1d33 );
	font-weight: 600;
}