/**
 * Brainatica Cookie Consent Component Styles
 * 
 * Supplementary styles for the cookie consent banner.
 * Most styling is handled via Tailwind CSS utility classes.
 * 
 * @version 1.0.0
 */

/* ============================================
   COOKIE CONSENT BANNER
   ============================================ */

#cookie-consent-banner {
	/* Ensure banner stays above other UI elements */
	isolation: isolate;
	
	/* Glass-morphism styling to match site design */
	backdrop-filter: blur(16px) saturate(180%);
	background: rgba(8, 8, 8, 0.72);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	
	/* Smooth shadow for depth */
	box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4), 
	            0 -2px 8px rgba(0, 0, 0, 0.2);
}

/* Animation transitions */
#cookie-consent-banner {
	transition-property: transform, opacity;
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

/* Mobile optimizations */
@media (max-width: 767px) {
	#cookie-consent-banner {
		padding: 1rem;
		font-size: 0.875rem;
	}
	
	/* Ensure touch targets meet WCAG guidelines (min 44x44px) */
	#cookie-consent-banner button {
		min-height: 44px;
		min-width: 44px;
	}
	
	/* Stack buttons on very small screens */
	@media (max-width: 380px) {
		#cookie-consent-banner .flex-wrap {
			flex-direction: column;
			width: 100%;
		}
		
		#cookie-consent-banner button {
			width: 100%;
			justify-content: center;
		}
	}
}

/* ============================================
   CHECKBOX STYLES
   ============================================ */

#cookie-consent-banner input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.3);
	transition: all 0.2s ease;
}

#cookie-consent-banner input[type="checkbox"]:checked {
	background-color: #ffffff;
	border-color: #ffffff;
}

#cookie-consent-banner input[type="checkbox"]:checked::after {
	content: '';
	display: block;
	width: 4px;
	height: 8px;
	border: solid #000000;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	position: relative;
	top: 2px;
	left: 5px;
}

#cookie-consent-banner input[type="checkbox"]:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.5);
	outline-offset: 2px;
}

#cookie-consent-banner input[type="checkbox"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ============================================
   SETTINGS PANEL
   ============================================ */

#cookie-settings-panel {
	animation: slideDown 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Category item hover effect */
#cookie-consent-banner [id^="cookie-cat-"]:not(:disabled) + div:hover {
	background-color: rgba(255, 255, 255, 0.08);
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	#cookie-consent-banner,
	#cookie-consent-banner *,
	#cookie-settings-panel {
		animation: none !important;
		transition: none !important;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	#cookie-consent-banner {
		border-top: 2px solid #ffffff;
		background-color: #000000;
	}
	
	#cookie-consent-banner button {
		border: 2px solid #ffffff;
	}
}

/* Focus visible styles for keyboard navigation */
#cookie-consent-banner button:focus-visible,
#cookie-consent-banner a:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.9);
	outline-offset: 2px;
}

/* Skip link integration - ensure banner doesn't interfere */
.skip-link:focus + #cookie-consent-banner {
	transform: translateY(100%);
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
	#cookie-consent-banner {
		display: none !important;
	}
}