/**
 * WooInfinity Bundle — Frontend CSS v1.1
 * Estilos del widget: Lista, Grid y Carrusel.
 * Las variables CSS son sobreescritas por los controles de Elementor.
 *
 * @package WooInfinity_Bundle
 */

/* ─── Variables CSS (tokens de diseño) ──────────────────────────────────────── */
.wib-widget {
	--wib-accent:          #6366f1;
	--wib-accent-light:    #eef2ff;
	--wib-accent-hover:    #4f46e5;
	--wib-success:         #059669;
	--wib-success-light:   #d1fae5;
	--wib-danger:          #dc2626;
	--wib-warning:         #d97706;

	--wib-text-primary:    #0f172a;
	--wib-text-secondary:  #475569;
	--wib-text-muted:      #94a3b8;

	--wib-surface:         #ffffff;
	--wib-surface-alt:     #f8fafc;
	--wib-border:          #e2e8f0;
	--wib-border-hover:    #c7d2fe;

	--wib-radius-sm:       0.375rem;
	--wib-radius-md:       0.75rem;
	--wib-radius-lg:       1rem;
	--wib-radius-xl:       1.25rem;

	--wib-shadow-sm:       0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
	--wib-shadow-md:       0 4px 16px rgba(99,102,241,.12), 0 2px 4px rgba(0,0,0,.06);
	--wib-shadow-lg:       0 8px 32px rgba(99,102,241,.18), 0 4px 8px rgba(0,0,0,.08);

	--wib-transition:      150ms cubic-bezier(0.4, 0, 0.2, 1);

	/* Columnas — siempre controladas desde Elementor / PHP, nunca reseteadas por media queries */
	--wib-cols:            3;

	box-sizing: border-box;
	font-family: inherit;
}

.wib-widget *,
.wib-widget *::before,
.wib-widget *::after {
	box-sizing: inherit;
}

/* ─── Header del bundle ──────────────────────────────────────────────────────── */
.wib-header {
	margin-bottom: 1.25rem;
}

.wib-bundle-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--wib-text-primary);
	margin: 0 0 0.375rem;
	line-height: 1.2;
}

.wib-bundle-desc {
	font-size: 0.875rem;
	color: var(--wib-text-secondary);
	line-height: 1.5;
}

/* ─── Formulario ─────────────────────────────────────────────────────────────── */
.wib-form {
	margin: 0;
	padding: 0;
}

/* ─── LAYOUT: Lista ──────────────────────────────────────────────────────────── */
.wib-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

/* ─── LAYOUT: Grid ───────────────────────────────────────────────────────────── */
/*
 * IMPORTANTE: NO usar media queries que sobreescriban --wib-cols.
 * El valor de columnas siempre viene del control de Elementor o del inline style del template.
 * Los breakpoints responsive se manejan desde los controles responsive de Elementor.
 */
.wib-grid {
	display: grid;
	grid-template-columns: repeat(var(--wib-cols, 3), minmax(0, 1fr));
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

/* Cuando hay muchas columnas (4-6), la imagen se adapta */
.wib-grid[style*="--wib-cols: 4"] .wib-card-image img,
.wib-grid[style*="--wib-cols: 5"] .wib-card-image img,
.wib-grid[style*="--wib-cols: 6"] .wib-card-image img,
.wib-widget[style*="--wib-cols: 4"] .wib-card-image img,
.wib-widget[style*="--wib-cols: 5"] .wib-card-image img,
.wib-widget[style*="--wib-cols: 6"] .wib-card-image img,
.wib-grid.wib-cols-4 .wib-card-image img,
.wib-grid.wib-cols-5 .wib-card-image img,
.wib-grid.wib-cols-6 .wib-card-image img {
	width: 80px;
	height: 80px;
}

/* ─── ÍTEM: Fila (layout lista) ──────────────────────────────────────────────── */
.wib-item {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	padding: 1rem;
	background: var(--wib-surface);
	border: 2px solid var(--wib-border);
	border-radius: var(--wib-radius-lg);
	transition:
		border-color var(--wib-transition),
		box-shadow var(--wib-transition),
		transform var(--wib-transition),
		opacity var(--wib-transition);
	position: relative;
}

.wib-item:hover {
	border-color: var(--wib-border-hover);
	box-shadow: var(--wib-shadow-sm);
}

.wib-item.wib-selected {
	border-color: var(--wib-accent);
	box-shadow: var(--wib-shadow-md);
}

.wib-item.wib-out-of-stock {
	opacity: 0.55;
}

/* ─── ÍTEM: Tarjeta (layout grid / carousel) ─────────────────────────────────── */
.wib-grid-card {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
	overflow: hidden;
}

.wib-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 0.875rem 0.5rem;
}

.wib-card-image {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: var(--wib-surface-alt);
}

.wib-card-image img {
	width: 120px;
	height: 120px;
	object-fit: contain;
	display: block;
	transition: width var(--wib-transition), height var(--wib-transition);
}

.wib-card-body {
	padding: 0.875rem 0.875rem 0.5rem;
	flex: 1;
}

.wib-card-footer {
	padding: 0.5rem 0.875rem 0.875rem;
	display: flex;
	justify-content: center;
}

/* ─── Checkbox / Required ────────────────────────────────────────────────────── */
.wib-check-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	flex-shrink: 0;
}

.wib-checkbox-label {
	display: block;
	cursor: pointer;
	line-height: 0;
}

.wib-checkbox {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px !important;
	height: 18px !important;
	border-radius: 4px !important;
	border: 1.5px solid var(--wib-border) !important;
	background: var(--wib-surface) !important;
	color: transparent !important;
	transition:
		background var(--wib-transition),
		border-color var(--wib-transition),
		color var(--wib-transition);
}

.wib-checkbox svg {
	width: 10px !important;
	height: 8px !important;
	display: block;
}

.wib-checkbox.wib-checked {
	background: var(--wib-accent-light) !important;
	border-color: var(--wib-accent) !important;
	color: var(--wib-accent) !important;
}

.wib-checkbox:hover:not(.wib-checked):not(.wib-checkbox-required) {
	border-color: var(--wib-accent) !important;
}

/* Checkbox Obligatorio (Req.) */
.wib-checkbox-required {
	border-radius: 50% !important; /* Circular para obligatorios */
	background: var(--wib-accent-light) !important;
	border-color: var(--wib-accent) !important;
	color: var(--wib-accent) !important;
	cursor: default;
}

/* Ocultar el input nativo del checkbox */
.wib-optional-checkbox {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.wib-required-badge {
	font-size: 0.55rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wib-accent);
}

/* ─── Imagen del ítem (lista) ────────────────────────────────────────────────── */
.wib-item-image {
	flex-shrink: 0;
	position: relative;
}

.wib-item-image img {
	width: 72px;
	height: 72px;
	object-fit: contain;
	border-radius: var(--wib-radius-md);
	background: var(--wib-surface-alt);
	display: block;
}

.wib-stock-badge {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(220, 38, 38, 0.8);
	color: #fff;
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	border-radius: var(--wib-radius-md);
}

.wib-stock-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(220, 38, 38, 0.75);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ─── Información del ítem ───────────────────────────────────────────────────── */
.wib-item-info {
	flex: 1;
	min-width: 0;
}

.wib-item-meta-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.25rem;
	flex-wrap: wrap;
}

.wib-item-sku {
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wib-text-muted);
}

.wib-item-name {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wib-text-primary);
	margin: 0 0 0.5rem;
	line-height: 1.3;
}

.wib-item-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* ─── Precios ────────────────────────────────────────────────────────────────── */
.wib-item-prices {
	display: flex;
	flex-direction: column;
}

.wib-list .wib-item-prices {
	text-align: right;
	align-self: center;
	flex-shrink: 0;
}

.wib-price-original {
	font-size: 0.75rem;
	color: var(--wib-text-muted);
	text-decoration: line-through;
	line-height: 1.2;
}

.wib-price-discounted {
	font-size: 1rem;
	font-weight: 700;
	color: var(--wib-text-primary);
	line-height: 1.2;
}

.wib-per-unit {
	font-size: 0.6875rem;
	font-weight: 400;
	color: var(--wib-text-muted);
}

/* ─── Badge de descuento ─────────────────────────────────────────────────────── */
.wib-discount-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	padding: 0.2rem 0.5rem;
	background: #fef3c7;
	color: #92400e;
	border-radius: 99px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.025em;
	white-space: nowrap;
}

.wib-item-image .wib-discount-badge,
.wib-card-image .wib-discount-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	margin: 0;
	z-index: 5;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ─── Qty Stepper ────────────────────────────────────────────────────────────── */
.wib-qty-wrap {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	background: var(--wib-surface-alt);
	border: 1px solid var(--wib-border);
	border-radius: var(--wib-radius-md);
	padding: 0.25rem;
}

/* Selector de cantidad reducido solo en modo lista */
.wib-list .wib-qty-wrap {
	padding: 0.125rem;
	gap: 0.125rem;
	border-radius: var(--wib-radius-sm);
	margin-top: 0.375rem;
	display: inline-flex;
}

.wib-list .wib-qty-btn {
	width: 22px;
	height: 22px;
	border-width: 1px;
}

.wib-list .wib-qty-btn svg {
	width: 10px;
	height: 10px;
}

.wib-list .wib-qty-input {
	width: 28px;
	font-size: 0.75rem;
}

.wib-qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--wib-radius-sm);
	border: 1.5px solid var(--wib-border);
	background: var(--wib-surface);
	color: var(--wib-accent);
	cursor: pointer;
	transition:
		background var(--wib-transition),
		color var(--wib-transition),
		border-color var(--wib-transition);
	padding: 0;
	line-height: 1;
}

.wib-qty-btn:hover:not(:disabled) {
	background: var(--wib-accent);
	color: #fff;
	border-color: var(--wib-accent);
}

.wib-qty-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.wib-qty-input {
	width: 40px;
	text-align: center;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--wib-text-primary);
	background: transparent;
	border: none;
	outline: none;
	-moz-appearance: textfield;
	appearance: textfield;
}

.wib-qty-input::-webkit-inner-spin-button,
.wib-qty-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

/* ─── Nota de impuestos — oculta por defecto, activable desde Elementor ──────── */
.wib-taxes-note {
	display: none;
	font-size: 0.6875rem;
	color: var(--wib-text-muted);
	margin-top: 0.25rem;
}

/* Cuando se activa desde Elementor, se muestra con: */
.wib-widget.wib-show-taxes .wib-taxes-note {
	display: block;
}

/* ─── Sección Total del Pack ─────────────────────────────────────────────────── */
.wib-total-section {
	margin-top: 1.25rem;
	padding: 1.25rem 1.5rem;
	background: linear-gradient(135deg, #eef2ff 0%, #faf5ff 100%);
	border: 1.5px solid var(--wib-border-hover);
	border-radius: var(--wib-radius-xl);
	transition: transform var(--wib-transition);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
}

.wib-total-left {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1;
	min-width: 0;
}

.wib-total-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.375rem;
	flex: 1;
}

.wib-total-right .wib-submit-btn {
	width: auto;
	min-width: 200px;
	margin-top: 0.25rem;
}

.wib-total-label {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wib-accent);
	margin-bottom: 0.25rem;
}

.wib-total-prices {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
}

.wib-total-amount {
	font-size: 2rem;
	font-weight: 800;
	color: var(--wib-accent);
	line-height: 1;
	background: none !important;
	-webkit-text-fill-color: initial !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
}

.wib-total-original {
	font-size: 1rem;
	color: var(--wib-text-muted);
	text-decoration: line-through;
}

.wib-total-original-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.wib-savings-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.4rem 0.875rem;
	background: var(--wib-success-light);
	color: var(--wib-success);
	border-radius: 99px;
	font-size: 0.8125rem;
	font-weight: 700;
}

.wib-items-count {
	font-size: 0.6875rem;
	color: var(--wib-text-muted);
}

/* ─── Notice / Feedback AJAX ─────────────────────────────────────────────────── */
.wib-notice {
	display: none;
	padding: 0.75rem 1rem;
	border-radius: var(--wib-radius-md);
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.75rem;
	line-height: 1.4;
}

.wib-notice-success {
	background: var(--wib-success-light);
	color: var(--wib-success);
	border: 1px solid #a7f3d0;
}

.wib-notice-error {
	background: #fef2f2;
	color: var(--wib-danger);
	border: 1px solid #fecaca;
}

/* ─── Botón Añadir al carrito ────────────────────────────────────────────────── */
.wib-submit-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	width: 100%;
	padding: 0.875rem 1.5rem;
	background: var(--wib-text-primary);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	border: none;
	border-radius: var(--wib-radius-lg);
	cursor: pointer;
	transition:
		background var(--wib-transition),
		transform var(--wib-transition),
		box-shadow var(--wib-transition);
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
	letter-spacing: 0.01em;
}

.wib-submit-btn:hover:not(:disabled) {
	background: #1e293b;
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.35);
}

.wib-submit-btn:active:not(:disabled) {
	transform: translateY(0);
}

.wib-submit-btn:disabled,
.wib-submit-btn.wib-btn-disabled {
	background: var(--wib-border);
	color: var(--wib-text-muted);
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

.wib-submit-btn.wib-loading {
	opacity: 0.8;
	pointer-events: none;
}

.wib-btn-total {
	font-weight: 400;
	opacity: 0.8;
}

/* ─── LAYOUT: Carrusel ───────────────────────────────────────────────────────── */
.wib-carousel {
	position: relative;
	margin-bottom: 1.25rem;
}

.wib-carousel .swiper {
	overflow: hidden;
	border-radius: var(--wib-radius-lg);
}

.wib-carousel .swiper-slide {
	height: auto;
	display: flex;
}

.wib-carousel .swiper-slide .wib-item {
	width: 100%;
}

/* Flechas del carrusel */
.wib-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--wib-surface);
	border: 1.5px solid var(--wib-border);
	border-radius: 50%;
	cursor: pointer;
	transition:
		border-color var(--wib-transition),
		background var(--wib-transition),
		color var(--wib-transition),
		box-shadow var(--wib-transition);
	box-shadow: var(--wib-shadow-sm);
	color: var(--wib-text-secondary);
}

.wib-arrow-prev { left: -18px; }
.wib-arrow-next { right: -18px; }

.wib-arrow:hover {
	background: var(--wib-accent-light);
	border-color: var(--wib-accent);
	color: var(--wib-accent);
	box-shadow: var(--wib-shadow-md);
}

/* Paginación dots (Swiper) */
.wib-carousel .swiper-pagination {
	margin-top: 0.875rem;
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
}

.wib-carousel .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	border-radius: 99px;
	background: var(--wib-border);
	opacity: 1;
	transition:
		width var(--wib-transition),
		background var(--wib-transition);
}

.wib-carousel .swiper-pagination-bullet-active {
	width: 24px;
	background: var(--wib-accent);
}

/* ─── Animación de pulso (total) ─────────────────────────────────────────────── */
@keyframes wib-pulse-anim {
	0%, 100% { transform: scale(1); }
	50%       { transform: scale(1.015); }
}

.wib-total-section.wib-pulse {
	animation: wib-pulse-anim 300ms ease-in-out;
}

/* ─── Aviso en editor de Elementor ───────────────────────────────────────────── */
.wib-editor-notice {
	padding: 1.25rem 1.5rem;
	background: #fef9c3;
	border: 1.5px dashed #f59e0b;
	border-radius: var(--wib-radius-lg);
	color: #78350f;
	font-size: 0.875rem;
	line-height: 1.5;
}

.wib-editor-notice p {
	margin: 0;
}

/* ─── Responsive — Solo para móvil, SIN tocar --wib-cols ─────────────────────── */
@media (max-width: 768px) {
	.wib-total-amount {
		font-size: 1.5rem;
	}

	.wib-total-section {
		flex-direction: column;
		align-items: stretch;
		gap: 1.25rem;
	}

	.wib-total-left {
		align-items: center;
		text-align: center;
	}

	.wib-total-right {
		align-items: center;
		text-align: center;
	}

	.wib-total-right .wib-submit-btn {
		width: 100%;
	}

	.wib-arrow-prev { left: -12px; }
	.wib-arrow-next { right: -12px; }
}

@media (max-width: 480px) {
	.wib-item {
		flex-wrap: wrap;
	}

	.wib-item-image img {
		width: 56px;
		height: 56px;
	}
}

.wib-notice-success a.wib-cart-link {
	color: #047857 !important;
	text-decoration: underline !important;
	margin-left: 0.5rem !important;
	font-weight: 700 !important;
	transition: color var(--wib-transition) !important;
}

.wib-notice-success a.wib-cart-link:hover {
	color: var(--wib-accent-hover) !important;
}