/* Estados del widget (abierto/cerrado) */
.tuko-status-closed {
	opacity: 1;
}

/* Eliminado: fondo rojo cuando el grupo está cerrado - solo mostrar etiqueta "Cerrado" */
.tuko-status-closed .tuko-widget-inner {
	/* Mantener el fondo normal, sin cambios */
}

/* Excluir CTA "Consíguelo" en ficha: el cierre se ve con badge + texto; el botón sigue con colores normales (inline / tema). */
.tuko-status-closed .tuko-btn-primary:not(.tuko-product-page-cta) {
	background: var(--tuko-neutral-medium);
	border-color: var(--tuko-neutral-medium);
	box-shadow: none;
	cursor: default;
}

.tuko-btn-primary:disabled {
	cursor: default !important;
}

.tuko-btn-primary:disabled:hover,
.tuko-status-closed .tuko-btn-primary:not(.tuko-product-page-cta):hover,
.tuko-btn-primary[disabled]:hover {
	background: var(--tuko-neutral-medium) !important;
	border-color: var(--tuko-neutral-medium) !important;
	transform: none !important;
	box-shadow: none !important;
	cursor: default !important;
}

/* Quitar hover también para botones con clase tuko-join-btn o tuko-leave-btn cuando están deshabilitados */
#tuko-join-btn:disabled:hover,
#tuko-join-btn[disabled]:hover {
	background: var(--tuko-neutral-medium) !important;
	border-color: var(--tuko-neutral-medium) !important;
	transform: none !important;
	box-shadow: none !important;
	cursor: default !important;
}

/* Botón "Salir del grupo" deshabilitado cuando el grupo está cerrado */
.tuko-leave-btn:disabled,
.tuko-leave-btn[disabled],
.tuko-status-closed .tuko-leave-btn {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
	background-color: #9CA3AF !important; /* Color gris suave */
	border-color: #9CA3AF !important;
}

/* Etiqueta "Cerrado" en el botón del plugin Tuko (¡Consíguelo por X€! / Unirme) */
.tuko-btn-closed-badge {
	position: absolute;
	top: -8px;
	right: -8px;
	background-color: #ef4444;
	color: #ffffff;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.4;
	white-space: nowrap;
	z-index: 100;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	pointer-events: none;
}

.tuko-btn-has-closed-badge {
	position: relative !important;
	overflow: visible !important;
}

/* Ficha producto: barra tipo píldora + badge (JS al vencer temporizador) */
.tuko-product-page-cta-stack {
	width: 100%;
	max-width: 100%;
	position: relative;
	box-sizing: border-box;
	margin-top: 0;
}

/* Texto “Grupo cerrado…” bajo el CTA de ficha: línea informativa, no segunda píldora */
.tuko-widget-wrapper--product-cta-only .tuko-product-page-cta-closed-note {
	margin-top: 0.75rem;
	text-align: center;
}

.tuko-widget-wrapper--product-cta-only .tuko-product-page-cta.tuko-product-page-cta--pill {
	border-radius: 9999px !important;
}

.tuko-btn-closed-badge--product-cta.tuko-is-hidden {
	display: none !important;
}

/* Barra de aviso "Grupo cerrado" (misma línea visual que el CTA; colores vía variables en .tuko-product-page-cta-stack) */
.tuko-product-page-cta-closed-note--banner .tuko-product-page-cta-closed-note-bold {
	color: var(--tuko-pp-closed-accent, #ea580c);
}

.tuko-product-page-cta-closed-note--banner .tuko-product-page-cta-closed-note-text {
	color: inherit;
	opacity: 0.92;
}

/* Asegurar que el contenedor del botón no corte la etiqueta */
.tuko-widget-join-section,
.tuko-product-page-cta-wrapper,
.tuko-widget-wrapper {
	overflow: visible !important;
}

/* Etiqueta "Cerrado" en el botón de WooCommerce */
.tuko-closed-badge {
	position: absolute;
	top: -8px;
	right: -8px;
	background-color: #ef4444;
	color: #ffffff;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.4;
	white-space: nowrap;
	z-index: 10;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	pointer-events: none;
}

/* Asegurar que el botón tenga posición relativa para posicionar la etiqueta */
button.single_add_to_cart_button.tuko-group-closed,
.single_add_to_cart_button.tuko-group-closed,
form.cart button[type="submit"].tuko-group-closed,
.woocommerce form.cart button[type="submit"].tuko-group-closed {
	position: relative !important;
	overflow: visible;
}

/* Asegurar que el contenedor del formulario tenga posición relativa */
form.cart,
.woocommerce div.product form.cart {
	position: relative;
}
	transform: none !important;
	box-shadow: none !important;
}

/* Quitar hover del botón "Salir del grupo" cuando está deshabilitado */
.tuko-leave-btn:disabled:hover,
.tuko-leave-btn[disabled]:hover,
.tuko-status-closed .tuko-leave-btn:hover {
	opacity: 0.5 !important;
	background-color: #9CA3AF !important;
	border-color: #9CA3AF !important;
	transform: none !important;
	box-shadow: none !important;
	cursor: not-allowed !important;
}

/* Botón de compartir deshabilitado */
.tuko-share-btn-disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
	pointer-events: none;
	position: relative;
}

.tuko-share-btn-disabled::after {
	content: 'Grupo completo';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.8);
	color: #ffffff;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 11px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	z-index: 10;
}

.tuko-share-btn-disabled:hover::after {
	opacity: 1;
}

/* Botones de acción */
.tuko-widget-actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 0;
	width: 100%;
	align-items: stretch;
}

/* Cuando el usuario está unido, cambiar el orden: compartir arriba, salirse abajo */
.tuko-widget-actions:has(.tuko-leave-btn) {
	flex-direction: column;
}

.tuko-widget-actions:has(.tuko-leave-btn) .tuko-share-btn {
	order: -1;
	/* CRÍTICO: Desactivar cualquier animación antigua cuando tiene shimmer */
	animation: none !important;
}

.tuko-widget-actions:has(.tuko-leave-btn) .tuko-widget-join-section {
	order: 1;
}

.tuko-widget-join-section {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
	width: 100%;
}

/* Cuando el usuario está unido (botón abandonar), ocupa todo el ancho en desktop */
.tuko-widget-join-section .tuko-leave-btn {
	width: 100% !important;
	flex: 1 1 100% !important;
	min-width: 100% !important;
	max-width: 100% !important;
}

/* Cuando hay botón "Salir del grupo", el contenedor no debe tener gap */
.tuko-widget-join-section:has(.tuko-leave-btn) {
	gap: 0 !important;
}

/* En móvil (480px o menos), ajustar el botón "Salir del grupo" */
@media (max-width: 480px) {
	/* Asegurar que el contenedor padre ocupe todo el ancho */
	.tuko-widget-actions {
		width: 100% !important;
		align-items: stretch !important;
	}
	
	/* Cuando el selector de cantidad está oculto, no debe ocupar espacio */
	.tuko-widget-join-section .tuko-widget-quantity-input[style*="display: none"],
	.tuko-widget-join-section .tuko-widget-quantity-input[style*="display:none"] {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		flex: 0 0 0 !important;
		min-width: 0 !important;
		max-width: 0 !important;
		overflow: hidden !important;
	}
	
	/* Cuando hay botón "Salir del grupo", centrar el contenedor - mayor especificidad */
	.tuko-widget-actions .tuko-widget-join-section:has(.tuko-leave-btn),
	.tuko-group-buying-widget .tuko-widget-join-section:has(.tuko-leave-btn),
	#tuko-group-buying-widget .tuko-widget-join-section:has(.tuko-leave-btn),
	.tuko-widget-join-section:has(.tuko-leave-btn) {
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		flex-direction: row !important;
	}
	
	/* Cuando el selector de cantidad está oculto Y hay botón leave, centrar */
	.tuko-widget-join-section:has(.tuko-widget-quantity-input[style*="display: none"]):has(.tuko-leave-btn),
	.tuko-widget-join-section:has(.tuko-widget-quantity-input[style*="display:none"]):has(.tuko-leave-btn) {
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	
	/* Botón leave con mayor especificidad para móvil */
	.tuko-widget-actions .tuko-widget-join-section .tuko-leave-btn,
	.tuko-group-buying-widget .tuko-widget-join-section .tuko-leave-btn,
	#tuko-group-buying-widget .tuko-widget-join-section .tuko-leave-btn,
	.tuko-widget-join-section .tuko-leave-btn {
		width: 100% !important;
		flex: 0 0 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 1.5rem !important;
		box-sizing: border-box !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	
	/* Forzar que el contenedor solo tenga el botón leave visible */
	.tuko-widget-join-section:has(.tuko-leave-btn) > *:not(.tuko-leave-btn) {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		flex: 0 0 0 !important;
		min-width: 0 !important;
		max-width: 0 !important;
		overflow: hidden !important;
		opacity: 0 !important;
		visibility: hidden !important;
		position: absolute !important;
		left: -9999px !important;
	}
	
	/* Asegurar que el contenedor actions no tenga padding que desplace */
	.tuko-widget-actions:has(.tuko-leave-btn) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Cuando el selector de cantidad está oculto (usuario unido), el botón ocupa todo el ancho */
.tuko-widget-quantity-input[style*="display: none"] ~ .tuko-btn,
.tuko-widget-quantity-input[style*="display: none"] + .tuko-btn {
	width: 100% !important;
	flex: 1;
}

.tuko-share-btn {
	width: 100%;
	height: 52px !important; /* Misma altura que botón unirme y cantidad */
	padding: 0 1.5rem;
	justify-content: center;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	line-height: 1;
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease; /* Transición suave para hover */
}

/* Animación antigua eliminada - ahora se usa tuko-shimmer en widget-styles.php */

/* Efecto antiguo eliminado - ahora se usa el efecto shimmer de Shopify */
/* El efecto shimmer se aplica mediante la clase .tuko-share-btn-joined en widget-styles.php */

/* Efecto antiguo eliminado - ahora se usa el efecto shimmer de Shopify */
/* El efecto shimmer se aplica mediante la clase .tuko-share-btn-joined en widget-styles.php */

/* Efecto hover chulo para botón compartir */
.tuko-share-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(61, 80, 242, 0.3);
	transition: all 0.3s ease;
}

.tuko-share-btn:hover::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(61, 80, 242, 0.1) 0%, rgba(61, 80, 242, 0.2) 100%);
	border-radius: inherit;
	opacity: 1;
	z-index: -1;
	pointer-events: none;
}

.tuko-share-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(61, 80, 242, 0.2);
}

/* Efecto hover chulo para botón unirme */
.tuko-join-btn,
.tuko-widget-join-section .tuko-join-btn,
#tuko-join-btn,
.tuko-btn-primary.tuko-join-btn {
	transition: all 0.3s ease !important; /* Transición suave para hover */
	position: relative !important;
	overflow: hidden !important;
}

/* Badge "Cerrado" sobresale del botón: el overflow:hidden anterior lo recortaba (no es z-index) */
.tuko-join-btn.tuko-btn-has-closed-badge,
.tuko-widget-join-section .tuko-join-btn.tuko-btn-has-closed-badge,
#tuko-join-btn.tuko-btn-has-closed-badge,
.tuko-btn-primary.tuko-join-btn.tuko-btn-has-closed-badge,
.tuko-product-page-cta.tuko-btn-has-closed-badge,
.tuko-btn-primary.tuko-btn-has-closed-badge {
	overflow: visible !important;
}

.tuko-widget-join-section:has(.tuko-btn-has-closed-badge) {
	overflow: visible !important;
	padding-top: 10px;
}

/* Modo solo botón: espacio para el badge que sobresale arriba */
.tuko-widget-wrapper:has(.tuko-product-page-cta.tuko-btn-has-closed-badge) {
	overflow: visible !important;
	padding-top: 10px;
}

/* CTA ficha: clicable con grupo cerrado (no usar reglas de .tuko-join-btn deshabilitado) */
.tuko-widget-wrapper--product-cta-only.tuko-status-closed .tuko-product-page-cta,
.tuko-widget-wrapper--product-cta-only.tuko-status-closed .tuko-product-page-cta:disabled,
.tuko-widget-wrapper--product-cta-only.tuko-status-closed .tuko-product-page-cta[disabled] {
	pointer-events: auto !important;
	cursor: pointer !important;
}

.tuko-product-page-cta-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.tuko-product-page-cta-icon {
	flex-shrink: 0;
	color: inherit;
	vertical-align: middle;
}

/* Aviso bajo el CTA en ficha (visible solo si no lleva .tuko-is-hidden; grupo cerrado) */
.tuko-product-page-cta-closed-note {
	margin: 0.5rem 0 0;
	padding: 0;
	width: 100%;
	max-width: 100%;
	font-size: 0.875rem;
	line-height: 1.45;
	text-align: center;
	font-family: inherit;
	box-sizing: border-box;
}

.tuko-product-page-cta-closed-note.tuko-is-hidden {
	display: none !important;
}

.tuko-product-page-cta-closed-note-bold {
	font-weight: 700;
	color: #dc2626;
	margin-right: 0.25rem;
}

.tuko-product-page-cta-closed-note-text {
	font-weight: 400;
	color: #6b7280;
}

.tuko-join-btn:hover,
.tuko-widget-join-section .tuko-join-btn:hover,
#tuko-join-btn:hover,
.tuko-btn-primary.tuko-join-btn:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(61, 80, 242, 0.3) !important;
	transition: all 0.3s ease !important;
}

.tuko-join-btn:hover::after,
.tuko-widget-join-section .tuko-join-btn:hover::after,
#tuko-join-btn:hover::after,
.tuko-btn-primary.tuko-join-btn:hover::after {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(135deg, rgba(61, 80, 242, 0.1) 0%, rgba(61, 80, 242, 0.2) 100%) !important;
	border-radius: inherit !important;
	opacity: 1 !important;
	z-index: -1 !important;
	pointer-events: none !important;
}

.tuko-join-btn:active,
.tuko-widget-join-section .tuko-join-btn:active,
#tuko-join-btn:active,
.tuko-btn-primary.tuko-join-btn:active {
	transform: translateY(0) !important;
	box-shadow: 0 2px 6px rgba(61, 80, 242, 0.2) !important;
}

.tuko-widget-quantity-input {
	/* Valores por defecto - el width se maneja con media queries responsive */
	width: 100px !important; /* Modo separado: más estrecho (desktop) */
	height: 52px !important; /* Modo separado: más alto */
	padding: 0 0.5rem;
	border: 1px solid var(--tuko-neutral-medium-light);
	border-radius: var(--tuko-border-radius, var(--radius-md));
	font-size: var(--font-size-base);
	font-weight: 500;
	text-align: center;
	background-color: var(--tuko-neutral-white);
	color: var(--tuko-neutral-black);
	box-sizing: border-box;
	-moz-appearance: textfield;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* El botón "Unirme" debe tener la misma altura que el botón "Compartir" y ocupar el espacio restante */
.tuko-widget-join-section .tuko-join-btn {
	flex: 1;
	height: 52px !important; /* Modo separado: más alto */
	min-width: 100px !important; /* Modo separado: más estrecho */
	padding: 0 1.5rem;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* El botón "Abandonar" también debe tener la misma altura que el botón "Compartir" */
.tuko-widget-join-section .tuko-leave-btn {
	height: 52px !important; /* Misma altura que botón compartir en desktop */
	padding: 0 1.5rem;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.tuko-widget-quantity-input::-webkit-inner-spin-button,
.tuko-widget-quantity-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.tuko-widget-quantity-input:focus {
	outline: none;
	border-color: var(--tuko-primary);
	box-shadow: 0 0 0 3px rgba(61, 80, 242, 0.1);
}

/* Eliminar outline y efectos de focus en botones de cantidad (modo separado) */
.tuko-quantity-decrement,
.tuko-quantity-increment {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
}

.tuko-quantity-decrement:focus,
.tuko-quantity-increment:focus,
.tuko-quantity-decrement:active,
.tuko-quantity-increment:active {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
	background-color: transparent !important;
}

/* Ajustes para botón de cantidad en modo separado */
/* Acercar más los signos + y - dentro del botón - SOBRESCRIBIR estilos inline */
.tuko-widget-wrapper .tuko-widget-quantity-input .tuko-quantity-decrement,
#tuko-group-buying-widget .tuko-widget-quantity-input .tuko-quantity-decrement,
.tuko-widget-quantity-input .tuko-quantity-decrement {
	justify-content: center !important; /* Centrar el signo - */
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 14px !important; /* Reducir ancho para acercar más el signo */
}

.tuko-widget-wrapper .tuko-widget-quantity-input .tuko-quantity-increment,
#tuko-group-buying-widget .tuko-widget-quantity-input .tuko-quantity-increment,
.tuko-widget-quantity-input .tuko-quantity-increment {
	justify-content: center !important; /* Centrar el signo + */
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 14px !important; /* Reducir ancho para acercar más el signo */
}

/* Reducir font-size y font-weight del número en el input - SOBRESCRIBIR estilos inline */
.tuko-widget-wrapper .tuko-widget-quantity-input input[type="text"],
#tuko-group-buying-widget .tuko-widget-quantity-input input[type="text"],
.tuko-widget-quantity-input input[type="text"] {
	font-size: 1.1rem !important; /* Reducido de 1.25rem a 1.1rem */
	font-weight: 500 !important; /* Reducido de 700 */
}

.tuko-widget-quantity-input:disabled {
	background-color: var(--tuko-neutral-light);
	cursor: not-allowed;
	opacity: 0.6;
}

.tuko-btn {
	padding: 0.875rem 1.5rem;
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--font-size-base); /* Text regular */
	font-weight: 600; /* Semi Bold */
	cursor: pointer;
	transition: all 0.3s ease;
	text-align: center;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-sm);
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
}

.tuko-btn-primary {
	background: #222222; /* Color específico solicitado */
	color: var(--tuko-neutral-white);
	box-shadow: none;
	border: 1px solid #222222;
	transition: all 0.3s ease; /* Transición suave para hover */
	position: relative;
	overflow: hidden;
}

.tuko-btn-primary:hover:not(.tuko-join-btn) {
	background: #4D4D4D; /* Color específico solicitado para hover */
	border-color: #4D4D4D;
	transform: none;
}

/* Asegurar que el hover del botón unirme tenga prioridad */
.tuko-btn-primary.tuko-join-btn:hover {
	background: var(--tuko-join-button-color, #222222) !important; /* Mantener color original */
	border-color: var(--tuko-join-button-color, #222222) !important;
}

.tuko-btn-primary:active {
	transform: none;
	background: #222222;
}

.tuko-btn-secondary {
	background: var(--tuko-primary);
	color: var(--tuko-neutral-white);
	border: 1px solid var(--tuko-primary);
}

.tuko-btn-secondary:hover {
	background: var(--tuko-primary-light);
	border-color: var(--tuko-primary-light);
	color: var(--tuko-neutral-white);
}

.tuko-share-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 18px; /* Aumentado para evitar que se corte el SVG en la parte superior */
	flex-shrink: 0; /* Espacio reducido entre el icono y el texto en modo separado */
	overflow: visible; /* Permitir que el SVG se muestre completamente sin cortes */
}

.tuko-share-icon svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible; /* Asegurar que el SVG no se corte */
}

.tuko-share-icon svg path {
	stroke: currentColor;
	stroke-width: 0.8;
	fill: currentColor;
	stroke-linejoin: round;
	stroke-linecap: round;
}

/* Mensaje de compartir */
.tuko-share-message {
	margin: 0.75rem 0 0;
	font-size: 0.95rem !important; /* Tamaño optimizado para legibilidad */
	font-weight: 400; /* Normal */
	color: var(--tuko-neutral-dark); /* Más oscuro para mejor legibilidad */
	text-align: center;
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
}

/* Mensaje "Te has unido exitosamente" debajo del botón (estilo Shopify) */
.tuko-joined-success-message {
	display: none;
	margin: 0.5rem 0 0 !important;
	font-size: 0.875rem !important;
	line-height: 1.4;
	text-align: center;
	font-family: var(--tuko-font-family, inherit) !important;
}
.tuko-joined-success-message-highlight {
	color: #13A279 !important;
	font-weight: 700 !important;
}
.tuko-joined-success-message-hint {
	color: var(--tuko-neutral-dark, #6b7280) !important;
	font-weight: 400 !important;
}

/* Responsive - Botones siempre verticales para mejor UX */

/* Animaciones */
@keyframes tuko-pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
}

.tuko-timer.tuko-warning {
	animation: tuko-pulse 2s infinite;
}