/*
 * Estados comerciales en el catálogo público.
 *
 * VENDIDA conserva la franja visual del plugin.
 * RESERVADA recupera el formato utilizado anteriormente por WPCode.
 * Estas reglas se aplican solamente a motocicletas y automóviles Luxus.
 */

/* =========================================================
 * UNIDADES VENDIDAS
 * ========================================================= */

.luxus-vehicle-is-sold .box-image {
	position: relative;
	isolation: isolate;
}

/* Una unidad vendida o reservada no muestra la insignia "Nuevo". */
.luxus-vehicle-is-sold .badge-container,
.luxus-vehicle-is-reserved .badge-container {
	display: none !important;
}

/* Franja Vendida centrada sobre la fotografía. */
.luxus-vehicle-is-sold .box-image::after {
	display: flex;
	position: absolute;
	z-index: 8;
	top: 50%;
	right: 0;
	left: 0;
	align-items: center;
	justify-content: center;
	min-height: 25%;
	padding: 10px 14px;
	transform: translateY(-50%);
	border-top: 1px solid rgba(255, 255, 255, 0.24);
	border-bottom: 1px solid rgba(255, 255, 255, 0.24);
	background:
		repeating-linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.035) 0,
			rgba(255, 255, 255, 0.035) 2px,
			rgba(0, 0, 0, 0.035) 2px,
			rgba(0, 0, 0, 0.035) 6px
		),
		linear-gradient(
			90deg,
			rgba(12, 12, 12, 0.55),
			rgba(30, 30, 30, 0.48),
			rgba(12, 12, 12, 0.55)
		);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
	color: rgba(255, 255, 255, 0.82);
	content: "VENDIDO";
	font-size: clamp(17px, 2vw, 26px);
	font-weight: 800;
	letter-spacing: 0.09em;
	line-height: 0.95;
	text-align: center;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
	text-transform: uppercase;
	pointer-events: none;
	backdrop-filter: blur(1.5px) saturate(0.85);
}

/* Texto femenino para motocicletas vendidas. */
.luxus-motorcycle-is-sold .box-image::after {
	content: "VENDIDA";
}

/* Texto masculino para automóviles vendidos. */
.luxus-automobile-is-sold .box-image::after {
	content: "VENDIDO";
}


/* =========================================================
 * UNIDADES RESERVADAS — FORMATO ORIGINAL DE WPCODE
 * ========================================================= */

.luxus-vehicle-is-reserved .box-image {
	position: relative;
	isolation: isolate;
}

/*
 * Esta etiqueta es generada por:
 * class-luxus-vehiculos-sold-badges.php
 */
.reserved-status {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 50%;
	box-sizing: border-box;
	width: 100%;
	padding: 10px;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.25;
	text-align: center;
}

/*
 * Desactiva completamente la franja nueva creada con CSS.
 * La reserva se muestra únicamente mediante .reserved-status.
 */
.luxus-vehicle-is-reserved .box-image::after {
	display: none !important;
	content: none !important;
}


/* =========================================================
 * ETIQUETA AUXILIAR DE VENDIDA
 * ========================================================= */

/*
 * El PHP imprime una etiqueta auxiliar para accesibilidad.
 * Se oculta porque la franja Vendida ya aparece sobre la fotografía.
 */
.luxus-catalog-status-badge {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}


/* =========================================================
 * PRECIO DE UNIDADES VENDIDAS
 * ========================================================= */

/*
 * Respaldo visual si alguna plantilla imprime directamente
 * el precio sin utilizar el filtro de WooCommerce.
 */
.luxus-vehicle-is-sold .price-wrapper,
.luxus-vehicle-is-sold .price,
.luxus-vehicle-is-sold .woocommerce-Price-amount {
	display: none !important;
}


/* =========================================================
 * VERSIÓN MÓVIL
 * ========================================================= */

@media (max-width: 549px) {
	.luxus-vehicle-is-sold .box-image::after {
		top: 50%;
		right: 0;
		left: 0;
		min-height: 28%;
		padding: 8px 10px;
		font-size: clamp(15px, 5vw, 21px);
		letter-spacing: 0.07em;
	}

	/*
	 * Mantiene el formato original de la reserva,
	 * adaptando solamente el tamaño para pantallas pequeñas.
	 */
	.reserved-status {
		padding: 8px;
		font-size: 1.05em;
		line-height: 1.2;
	}
}