/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* =============================================
   VARIACIONES — variable.php
   ============================================= */

/* Label del atributo (ej. "COLOR") — solo estructura */
.variations .variation-row th.label label {
	display: block;
	margin-bottom: 12px; /* gap entre label y swatches */
	text-transform: uppercase;
}

.variations_form .variations label {
	margin-right: 5px;
	margin-bottom: 6px;
	white-space: nowrap;
}

/* Valor seleccionado junto al label: "COLOR — VERDE" */
.variation-selected-value {
	font-weight: 500;
	color: #1a1a1a;
	text-transform: uppercase;
	letter-spacing: 0;
}

.variation-selected-value:not(:empty)::before {
	content: ' — ';
	font-weight: 400;
	color: #999;
}

/* Divider entre cada grupo de atributo */
hr.variation-divider {
	border: none;
	border-top: 1px solid #e0dbd4;
	margin: 20px 0;
}

/* Primer divider — sin margin-top */
.variations_form > hr.variation-divider:first-of-type,
form.cart > hr.variation-divider:first-of-type {
	margin-top: 0;
}

/* =============================================
   PRECIO + BADGE DISPONIBLE — lado a lado
   El JS de WooCommerce rellena .woocommerce-variation
   con el precio y la disponibilidad al elegir variación
   ============================================= */

.woocommerce-variation {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
}

/* Ocultar descripción y precio de variación si están vacíos */
.woocommerce-variation-description:empty,
.woocommerce-variation-price:empty {
	display: none;
}


/* Badge disponibilidad — base (productos sin gestión de stock) */
.woocommerce-variation-availability .stock,
.stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 20px;
	border: none;
	margin: 0;
}

/* In stock — verde suave (fallback sin gestión de stock) */
.woocommerce-variation-availability .in-stock,
.in-stock {
	background-color: #e8f5e9;
	color: #2e7d32;
	font-size: 0.75em;
}

@keyframes stockPulse {
	0%   { box-shadow: 0 0 0 0 rgba(67, 160, 71, 0.5); }
	70%  { box-shadow: 0 0 0 6px rgba(67, 160, 71, 0); }
	100% { box-shadow: 0 0 0 0 rgba(67, 160, 71, 0); }
}

.woocommerce-variation-availability .in-stock::before,
.in-stock::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #43a047;
	flex-shrink: 0;
	animation: stockPulse 2s ease-out infinite;
}

/* =============================================
   STOCK INDICATOR — Shopify-style inventory bar
   (productos con gestión de stock activa)
   ============================================= */

/* Spacing — reemplaza p.stock margin */
.main_product_inventory_wrapper {
	margin-bottom: 14px;
}

/* Variable products — el precio y el bar van en columna */
.woocommerce-variation:has(.main_product_inventory_wrapper) {
	flex-direction: column;
	align-items: stretch;
}

/* Fila principal: dot · texto · barra · badge */
.threshold {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--color, #d18d00);
}

/* Contenedor del punto pulsante */
.inventory_dot {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}

.inventory_dot > span {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--color, #2e7d32);
	animation: inventoryPulseGreen 2s ease-out infinite;
}

.threshold[style*="#d18d00"] .inventory_dot > span {
	animation: inventoryPulseAmber 2s ease-out infinite;
}

.threshold[style*="#d18d00"] .inventory_progress {
	background-color: #f5e6c0;
}

.threshold[style*="#d18d00"] .inventory_count {
	background-color: #fef3dc;
}

@keyframes inventoryPulseGreen {
	0%   { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.5); }
	70%  { box-shadow: 0 0 0 5px rgba(46, 125, 50, 0); }
	100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); }
}

@keyframes inventoryPulseAmber {
	0%   { box-shadow: 0 0 0 0 rgba(209, 141, 0, 0.5); }
	70%  { box-shadow: 0 0 0 5px rgba(209, 141, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(209, 141, 0, 0); }
}

/* Texto "En stock" */
.inventory_text {
	font-weight: 600;
	font-size: 0.82em;
	color: var(--color, #d18d00);
	white-space: nowrap;
}

/* Barra de progreso */
.inventory_progress {
	flex: 1;
	height: 4px;
	background-color: #c8e6c9;
	border-radius: 2px;
	overflow: hidden;
	min-width: 40px;
}

.inventory_progress_inner {
	display: block;
	height: 100%;
	background-color: var(--color, #d18d00);
	border-radius: 2px;
}

/* Badge "Solo quedan X" */
.inventory_count {
	background-color: #e8f5e9;
	border-radius: 6px;
	padding: 3px 10px;
	flex-shrink: 0;
}

.inventory_count > span {
	font-size: 0.78em;
	font-weight: 600;
	color: var(--color, #d18d00);
	white-space: nowrap;
}

/* Out of stock — notice box (el texto es largo, no cabe en pill) */
.woocommerce-variation-availability .out-of-stock,
.out-of-stock {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 12px;
	background-color: #fdecea;
	color: #c62828;
	font-size: 0.85em;
	font-weight: 500;
	line-height: 1.45;
	border-radius: 12px;
	border: none;
}

.woocommerce-variation-availability .out-of-stock::before,
.out-of-stock::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 3px;
	background: #ef4444
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E")
		center / 10px no-repeat;
}

/* =============================================
   SWATCHES — círculos en flex
   Bricks controla tamaño y border-radius.
   Aquí solo layout + interacciones.
   ============================================= */

/* Fila flexible — gap editable desde Bricks si hace falta */
.bricks-variation-swatches.bricks-swatch-color {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Cada círculo */
.bricks-variation-swatches.bricks-swatch-color li {
	position: relative;
	cursor: pointer;
	transition:
		box-shadow 0.2s ease,
		filter 0.2s ease,
		transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hover — brillo sutil + sube + escala levemente */
.bricks-variation-swatches.bricks-swatch-color li:hover {
	filter: brightness(1.06);
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Estado seleccionado — reset hover */
.bricks-variation-swatches.bricks-swatch-color li.bricks-swatch-selected {
	box-shadow: none;
	transform: translateY(0) scale(1);
	filter: none;
}

/* Checkmark centrado — aparece con spin + spring */
.bricks-variation-swatches.bricks-swatch-color li::before {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
		center / 10px no-repeat;
	z-index: 1;
	opacity: 0;
	transform: scale(0.5) rotate(-45deg);
	transition:
		opacity 0.2s ease,
		transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bricks-variation-swatches.bricks-swatch-color li.bricks-swatch-selected::before {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

/* Ocultar el input hidden que Bricks usa internamente */
.bricks-variation-swatches input[type="hidden"] {
	display: none;
}

/* =============================================
   SWATCHES — pills de texto (label)
   Mismo estilo que los botones de Custom Spaces
   ============================================= */

.bricks-variation-swatches.bricks-swatch-label {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.bricks-variation-swatches.bricks-swatch-label li {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 14px;
	border-radius: 2px;
	border: 0.5px solid #c8c3bb;
	background: #ffffff;
	color: #555555;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bricks-variation-swatches.bricks-swatch-label li:hover {
	background: #f5f3ef;
	border-color: #8b6a4a;
	color: #1c1c1a;
}

.bricks-variation-swatches.bricks-swatch-label li.bricks-swatch-selected {
	background: #1c1c1a;
	border-color: #1c1c1a;
	color: #f5f3ef;
}

/* =============================================
   ANIMACIÓN — variation wrap aparece con fade + slide
   WooCommerce añade .woocommerce-variation-add-to-cart-enabled
   cuando hay una variación válida seleccionada
   ============================================= */

@keyframes variationFadeIn {
	from {
		transform: translateY(6px);
	}
	to {
		transform: translateY(0);
	}
}

.woocommerce-variation-add-to-cart-enabled {
	animation: variationFadeIn 0.3s ease forwards;
}

/* =============================================
   CB PRODUCT GALLERY — grid layout
   .brxe-cb-product-gallery
   ============================================= */

.cbpg-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr ); /* default, overridable desde Bricks */
	gap: 6px;
}

.cbpg-item {
	overflow: hidden;
	aspect-ratio: 1 / 1; /* default, overridable desde Bricks */
}

.cbpg-item a {
	display: block;
	width: 100%;
	height: 100%;
}

.cbpg-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier( 0.25, 0.46, 0.45, 0.94 );
}

.cbpg-item:hover img {
	transform: scale( 1.04 );
}

/* =============================================
   CB TOAST NOTICES — esquina inferior derecha
   ============================================= */

#cb-toast-container {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	pointer-events: none;
}

@keyframes cbToastIn {
	from {
		opacity: 0;
		transform: translateX( 20px ) scale( 0.94 );
	}
	to {
		opacity: 1;
		transform: translateX( 0 ) scale( 1 );
	}
}

@keyframes cbToastOut {
	from {
		opacity: 1;
		transform: translateX( 0 ) scale( 1 );
	}
	to {
		opacity: 0;
		transform: translateX( 12px ) scale( 0.95 );
	}
}

.cb-toast {
	display: inline-flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 18px;
	border-radius: 14px;
	width: fit-content;
	max-width: 360px;
	pointer-events: auto;
	background: #fff;
	color: #1a1a1a;
	border: 1px solid #e8e8e8;
	box-shadow:
		0 2px 8px rgba( 0, 0, 0, 0.08 ),
		0 8px 24px rgba( 0, 0, 0, 0.10 );
	animation: cbToastIn 0.36s cubic-bezier( 0.34, 1.46, 0.64, 1 ) both;
}

/* Icono SVG embebido — círculo con check */
.cb-toast::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 2px;
}

/* Texto del toast */
.cb-toast-content {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0.01em;
	text-wrap: balance;
}

.cb-toast.cb-toast--success::before {
	background: #22c55e
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
		center / 12px no-repeat;
}

.cb-toast.cb-toast--error::before {
	background: #ef4444
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E")
		center / 12px no-repeat;
}

.cb-toast.cb-toast--info::before {
	background: #3b82f6
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E")
		center / 12px no-repeat;
}

.cb-toast.cb-toast--warning::before {
	background: #f97316
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 1 5 11.9V17H7v-3.1A7 7 0 0 1 12 2z'/%3E%3C/svg%3E")
		center / 12px no-repeat;
}

.cb-toast.cb-toast--dismissing {
	animation: cbToastOut 0.28s ease forwards;
}

.cb-sale-price-stack {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
}