/**
 * WMB GCS Downloads - Button Styles
 *
 * @package WMB_GCS_Downloads
 * @since 1.0.0
 */

/* Base button styles */
.wmb-gcs-download-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border: 2px solid transparent;
	border-radius: 8px;
	font-family: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
	overflow: hidden;
}

.wmb-gcs-download-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.wmb-gcs-download-btn:active {
	transform: translateY(0);
}

.wmb-gcs-download-btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Button content */
.wmb-gcs-btn-content {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.wmb-gcs-btn-loading {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.wmb-gcs-icon {
	font-size: 1.2em;
	line-height: 1;
}

/* Spinner */
.wmb-gcs-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-radius: 50%;
	border-top-color: transparent;
	animation: wmb-gcs-spin 0.8s linear infinite;
}

@keyframes wmb-gcs-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Style: Primary */
.wmb-gcs-style-primary {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #ffffff;
	border-color: transparent;
}

.wmb-gcs-style-primary:hover {
	background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* Style: Secondary */
.wmb-gcs-style-secondary {
	background: #f0f0f0;
	color: #333333;
	border-color: #e0e0e0;
}

.wmb-gcs-style-secondary:hover {
	background: #e8e8e8;
	border-color: #d0d0d0;
}

/* Style: Outline */
.wmb-gcs-style-outline {
	background: transparent;
	color: #667eea;
	border-color: #667eea;
}

.wmb-gcs-style-outline:hover {
	background: #667eea;
	color: #ffffff;
}

/* Style: Minimal */
.wmb-gcs-style-minimal {
	background: transparent;
	color: #667eea;
	border-color: transparent;
	padding: 8px 16px;
}

.wmb-gcs-style-minimal:hover {
	background: rgba(102, 126, 234, 0.1);
	box-shadow: none;
}

/* Style: Dark - Para temas oscuros */
.wmb-gcs-style-dark {
	background: #1a1a2e;
	color: #ffffff;
	border-color: #16213e;
}

.wmb-gcs-style-dark:hover {
	background: #16213e;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Style: Light - Para temas claros */
.wmb-gcs-style-light {
	background: #ffffff;
	color: #333333;
	border-color: #e0e0e0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.wmb-gcs-style-light:hover {
	background: #fafafa;
	border-color: #d0d0d0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Style: Success - Verde */
.wmb-gcs-style-success {
	background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
	color: #ffffff;
	border-color: transparent;
}

.wmb-gcs-style-success:hover {
	background: linear-gradient(135deg, #218838 0%, #1aa179 100%);
	box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

/* Style: Danger - Rojo */
.wmb-gcs-style-danger {
	background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
	color: #ffffff;
	border-color: transparent;
}

.wmb-gcs-style-danger:hover {
	background: linear-gradient(135deg, #c82333 0%, #a71d2a 100%);
	box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
}

/* Style: Warning - Naranja */
.wmb-gcs-style-warning {
	background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
	color: #1a1a1a;
	border-color: transparent;
}

.wmb-gcs-style-warning:hover {
	background: linear-gradient(135deg, #e0a800 0%, #e68900 100%);
	box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);
}

/* Style: Info - Azul claro */
.wmb-gcs-style-info {
	background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
	color: #ffffff;
	border-color: transparent;
}

.wmb-gcs-style-info:hover {
	background: linear-gradient(135deg, #138496 0%, #117a8b 100%);
	box-shadow: 0 6px 20px rgba(23, 162, 184, 0.4);
}

/* Style: Glass - Efecto cristal */
.wmb-gcs-style-glass {
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #333333;
	border-color: rgba(255, 255, 255, 0.3);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.wmb-gcs-style-glass:hover {
	background: rgba(255, 255, 255, 0.25);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Style: Gradient Rainbow */
.wmb-gcs-style-gradient {
	background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff);
	background-size: 300% 300%;
	animation: wmb-gcs-gradient 3s ease infinite;
	color: #ffffff;
	border-color: transparent;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.wmb-gcs-style-gradient:hover {
	box-shadow: 0 6px 25px rgba(255, 107, 107, 0.4);
}

@keyframes wmb-gcs-gradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Style: Aurora - Aurora boreal */
.wmb-gcs-style-aurora {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #c471ed 75%, #667eea 100%);
	background-size: 400% 400%;
	animation: wmb-gcs-aurora 8s ease infinite;
	color: #ffffff;
	border-color: transparent;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.wmb-gcs-style-aurora:hover {
	animation-duration: 3s;
	box-shadow: 0 0 30px rgba(102, 126, 234, 0.5);
}

@keyframes wmb-gcs-aurora {
	0% { background-position: 0% 50%; }
	25% { background-position: 50% 100%; }
	50% { background-position: 100% 50%; }
	75% { background-position: 50% 0%; }
	100% { background-position: 0% 50%; }
}

/* Style: Pulse - Efecto latido */
.wmb-gcs-style-pulse {
	background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
	color: #ffffff;
	border-color: transparent;
	animation: wmb-gcs-pulse 2s ease-in-out infinite;
}

.wmb-gcs-style-pulse:hover {
	animation: wmb-gcs-pulse 0.8s ease-in-out infinite;
}

@keyframes wmb-gcs-pulse {
	0%, 100% { 
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
	}
	50% { 
		transform: scale(1.02);
		box-shadow: 0 0 0 12px rgba(231, 76, 60, 0);
	}
}

/* Style: Wave - Efecto onda */
.wmb-gcs-style-wave {
	background: linear-gradient(90deg, #00d2ff 0%, #3a7bd5 50%, #00d2ff 100%);
	background-size: 200% 100%;
	animation: wmb-gcs-wave 2s linear infinite;
	color: #ffffff;
	border-color: transparent;
	position: relative;
	overflow: hidden;
}

.wmb-gcs-style-wave:hover {
	animation-duration: 0.8s;
}

@keyframes wmb-gcs-wave {
	0% { background-position: 0% 0%; }
	100% { background-position: 200% 0%; }
}

/* Style: Shimmer - Efecto brillo */
.wmb-gcs-style-shimmer {
	background: #1a1a2e;
	color: #ffffff;
	border-color: transparent;
	position: relative;
	overflow: hidden;
}

.wmb-gcs-style-shimmer::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	animation: wmb-gcs-shimmer 2s infinite;
}

.wmb-gcs-style-shimmer:hover::before {
	animation-duration: 0.8s;
}

@keyframes wmb-gcs-shimmer {
	0% { left: -100%; }
	100% { left: 100%; }
}

/* Style: Fire - Efecto fuego/lava */
.wmb-gcs-style-fire {
	background: linear-gradient(135deg, #f12711 0%, #f5af19 50%, #f12711 100%);
	background-size: 200% 200%;
	animation: wmb-gcs-fire 1.5s ease infinite;
	color: #ffffff;
	border-color: transparent;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.wmb-gcs-style-fire:hover {
	animation-duration: 0.5s;
	box-shadow: 0 0 30px rgba(241, 39, 17, 0.6);
}

@keyframes wmb-gcs-fire {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

/* Style: Ocean - Efecto océano profundo */
.wmb-gcs-style-ocean {
	background: linear-gradient(135deg, #0f2027 0%, #203a43 25%, #2c5364 50%, #203a43 75%, #0f2027 100%);
	background-size: 400% 400%;
	animation: wmb-gcs-ocean 6s ease infinite;
	color: #ffffff;
	border-color: transparent;
	box-shadow: 0 4px 15px rgba(32, 58, 67, 0.4);
}

.wmb-gcs-style-ocean:hover {
	animation-duration: 2s;
	box-shadow: 0 6px 25px rgba(44, 83, 100, 0.6);
}

@keyframes wmb-gcs-ocean {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

/* Style: Cyber - Efecto cyberpunk */
.wmb-gcs-style-cyber {
	background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
	color: #00ff88;
	border: 2px solid #00ff88;
	text-shadow: 0 0 10px #00ff88;
	animation: wmb-gcs-cyber 2s ease-in-out infinite;
	position: relative;
}

.wmb-gcs-style-cyber:hover {
	background: #00ff88;
	color: #0a0a0a;
	text-shadow: none;
	box-shadow: 0 0 30px #00ff88, inset 0 0 20px rgba(0, 255, 136, 0.2);
}

@keyframes wmb-gcs-cyber {
	0%, 100% { 
		box-shadow: 0 0 5px #00ff88, 0 0 10px rgba(0, 255, 136, 0.3);
	}
	50% { 
		box-shadow: 0 0 20px #00ff88, 0 0 40px rgba(0, 255, 136, 0.5);
	}
}

/* Style: Holographic - Efecto holográfico */
.wmb-gcs-style-holographic {
	background: linear-gradient(135deg, 
		#ff0080 0%, 
		#ff8c00 14%, 
		#40e0d0 28%, 
		#ff0080 42%, 
		#ff8c00 56%, 
		#40e0d0 70%, 
		#ff0080 84%, 
		#ff8c00 100%);
	background-size: 400% 400%;
	animation: wmb-gcs-holographic 4s linear infinite;
	color: #ffffff;
	border-color: transparent;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	position: relative;
}

.wmb-gcs-style-holographic::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.3) 50%, transparent 60%);
	background-size: 300% 300%;
	animation: wmb-gcs-holographic-shine 2s linear infinite;
	border-radius: inherit;
	pointer-events: none;
}

@keyframes wmb-gcs-holographic {
	0% { background-position: 0% 50%; }
	100% { background-position: 400% 50%; }
}

@keyframes wmb-gcs-holographic-shine {
	0% { background-position: 200% 0%; }
	100% { background-position: -100% 0%; }
}

/* Style: Electric - Efecto eléctrico/rayos */
.wmb-gcs-style-electric {
	background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 100%);
	color: #00d4ff;
	border: 2px solid #00d4ff;
	animation: wmb-gcs-electric 0.1s steps(2) infinite;
	text-shadow: 0 0 8px #00d4ff;
	position: relative;
}

.wmb-gcs-style-electric:hover {
	animation: wmb-gcs-electric-hover 0.5s ease infinite;
	box-shadow: 0 0 30px rgba(0, 212, 255, 0.8);
}

@keyframes wmb-gcs-electric {
	0% { opacity: 1; }
	50% { opacity: 0.95; }
	100% { opacity: 1; }
}

@keyframes wmb-gcs-electric-hover {
	0%, 100% { 
		box-shadow: 0 0 10px #00d4ff, 0 0 20px rgba(0, 212, 255, 0.5);
		text-shadow: 0 0 8px #00d4ff;
	}
	50% { 
		box-shadow: 0 0 25px #00d4ff, 0 0 50px rgba(0, 212, 255, 0.8);
		text-shadow: 0 0 15px #00d4ff, 0 0 25px rgba(0, 212, 255, 0.5);
	}
}

/* Style: Sunset - Atardecer cálido */
.wmb-gcs-style-sunset {
	background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #f093fb 100%);
	background-size: 200% 200%;
	animation: wmb-gcs-sunset 4s ease infinite;
	color: #ffffff;
	border-color: transparent;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.wmb-gcs-style-sunset:hover {
	animation-duration: 1.5s;
	box-shadow: 0 6px 25px rgba(245, 87, 108, 0.5);
}

@keyframes wmb-gcs-sunset {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

/* Style: Matrix - Efecto matrix/código */
.wmb-gcs-style-matrix {
	background: #0d0d0d;
	color: #00ff41;
	border: 2px solid #00ff41;
	font-family: 'Courier New', monospace;
	text-shadow: 0 0 10px #00ff41, 0 0 20px rgba(0, 255, 65, 0.5);
	animation: wmb-gcs-matrix 3s linear infinite;
	position: relative;
	overflow: hidden;
}

.wmb-gcs-style-matrix::before {
	content: '';
	position: absolute;
	top: -50%;
	left: 0;
	width: 100%;
	height: 200%;
	background: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 2px,
		rgba(0, 255, 65, 0.03) 2px,
		rgba(0, 255, 65, 0.03) 4px
	);
	animation: wmb-gcs-matrix-scan 4s linear infinite;
	pointer-events: none;
}

.wmb-gcs-style-matrix:hover {
	background: #00ff41;
	color: #0d0d0d;
	text-shadow: none;
}

@keyframes wmb-gcs-matrix {
	0%, 100% { box-shadow: 0 0 5px #00ff41; }
	50% { box-shadow: 0 0 20px #00ff41, 0 0 30px rgba(0, 255, 65, 0.3); }
}

@keyframes wmb-gcs-matrix-scan {
	0% { transform: translateY(0); }
	100% { transform: translateY(50%); }
}

/* Style: Candy - Dulce y colorido */
.wmb-gcs-style-candy {
	background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff, #5f27cd);
	background-size: 600% 100%;
	animation: wmb-gcs-candy 5s linear infinite;
	color: #ffffff;
	border-color: transparent;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	border-radius: 50px;
}

.wmb-gcs-style-candy:hover {
	animation-duration: 1s;
	transform: scale(1.02);
}

@keyframes wmb-gcs-candy {
	0% { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}

/* Style: Neon - Efecto neón */
.wmb-gcs-style-neon {
	background: transparent;
	color: #0ff;
	border-color: #0ff;
	box-shadow: 0 0 5px #0ff, 0 0 10px #0ff, inset 0 0 5px rgba(0, 255, 255, 0.1);
	text-shadow: 0 0 5px #0ff;
}

.wmb-gcs-style-neon:hover {
	background: rgba(0, 255, 255, 0.1);
	box-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff, inset 0 0 10px rgba(0, 255, 255, 0.2);
}

/* Style: Rounded - Bordes muy redondeados */
.wmb-gcs-style-rounded {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #ffffff;
	border-color: transparent;
	border-radius: 50px;
}

.wmb-gcs-style-rounded:hover {
	background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* Style: Flat - Sin sombras ni efectos */
.wmb-gcs-style-flat {
	background: #667eea;
	color: #ffffff;
	border-color: transparent;
	border-radius: 4px;
}

.wmb-gcs-style-flat:hover {
	background: #5a6fd6;
	transform: none;
	box-shadow: none;
}

/* Style: 3D - Efecto tridimensional */
.wmb-gcs-style-3d {
	background: linear-gradient(180deg, #667eea 0%, #5a6fd6 100%);
	color: #ffffff;
	border-color: transparent;
	box-shadow: 0 6px 0 #4a5fc6, 0 8px 10px rgba(0, 0, 0, 0.2);
	transform: translateY(0);
}

.wmb-gcs-style-3d:hover {
	transform: translateY(2px);
	box-shadow: 0 4px 0 #4a5fc6, 0 6px 8px rgba(0, 0, 0, 0.2);
}

.wmb-gcs-style-3d:active {
	transform: translateY(6px);
	box-shadow: 0 0 0 #4a5fc6, 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Size: Small */
.wmb-gcs-size-small {
	padding: 8px 16px;
	font-size: 0.875rem;
}

.wmb-gcs-size-small .wmb-gcs-icon {
	font-size: 1em;
}

.wmb-gcs-size-small .wmb-gcs-spinner {
	width: 12px;
	height: 12px;
}

/* Size: Medium (default) */
.wmb-gcs-size-medium {
	padding: 12px 24px;
	font-size: 1rem;
}

/* Size: Large */
.wmb-gcs-size-large {
	padding: 16px 32px;
	font-size: 1.125rem;
}

.wmb-gcs-size-large .wmb-gcs-icon {
	font-size: 1.4em;
}

.wmb-gcs-size-large .wmb-gcs-spinner {
	width: 20px;
	height: 20px;
}

/* Login required */
.wmb-gcs-login-required {
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	padding: 20px;
	text-align: center;
}

.wmb-gcs-login-required p {
	margin: 0 0 15px;
	color: #666;
}

.wmb-gcs-login-btn {
	display: inline-block;
	padding: 10px 20px;
	background: #667eea;
	color: #ffffff;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 500;
	transition: background 0.2s;
}

.wmb-gcs-login-btn:hover {
	background: #5a6fd6;
	color: #ffffff;
	text-decoration: none;
}

/* Error message */
.wmb-gcs-error {
	background: #f8d7da;
	border: 1px solid #f5c6cb;
	color: #721c24;
	padding: 12px 16px;
	border-radius: 6px;
	font-size: 0.9rem;
}

/* Download limit reached */
.wmb-gcs-limit-reached {
	background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
	border: 1px solid #ffc107;
	border-radius: 8px;
	padding: 16px 20px;
	text-align: center;
}

.wmb-gcs-limit-reached p {
	margin: 0 0 8px;
	color: #856404;
	font-weight: 600;
	font-size: 0.95rem;
}

.wmb-gcs-limit-reached small {
	color: #856404;
	opacity: 0.8;
}

/* Toast notification */
.wmb-gcs-toast {
	position: fixed;
	bottom: 20px;
	right: 20px;
	padding: 14px 20px;
	border-radius: 10px;
	color: #ffffff;
	font-size: 0.9rem;
	font-weight: 500;
	z-index: 2147483647; /* Maximum z-index to always be on top */
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.3s ease;
	max-width: 320px;
	white-space: pre-line;
	line-height: 1.5;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.wmb-gcs-toast.show {
	opacity: 1;
	transform: translateY(0);
}

.wmb-gcs-toast.success {
	background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.wmb-gcs-toast.error {
	background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%);
}

.wmb-gcs-toast.info {
	background: linear-gradient(135deg, #17a2b8 0%, #3498db 100%);
}

.wmb-gcs-toast-link {
	display: inline-block;
	margin-top: 6px;
	padding: 6px 12px;
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	text-decoration: none;
	border-radius: 4px;
	font-size: 0.85em;
	transition: background 0.2s;
}

.wmb-gcs-toast-link:hover {
	background: rgba(255, 255, 255, 0.35);
	color: #ffffff;
	text-decoration: none;
}

/* Responsive */
@media (max-width: 480px) {
	.wmb-gcs-download-btn {
		width: 100%;
		justify-content: center;
	}

	.wmb-gcs-toast {
		left: 20px;
		right: 20px;
		max-width: none;
	}
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
	.wmb-gcs-style-secondary {
		background: #2d2d2d;
		color: #e0e0e0;
		border-color: #404040;
	}

	.wmb-gcs-style-secondary:hover {
		background: #3d3d3d;
		border-color: #505050;
	}

	.wmb-gcs-login-required {
		background: #2d2d2d;
		border-color: #404040;
	}

	.wmb-gcs-login-required p {
		color: #b0b0b0;
	}
}