/**
 * GDPR Cookie Consent Notice - Frontend Styles
 *
 * Provides responsive styles for the GDPR cookie consent notice.
 * Follows a mobile-first approach with breakpoints for tablet and desktop.
 *
 * @package    Spk_Course
 * @subpackage Spk_Course/public/css
 * @since      1.0.5
 */

/* ==========================================================================
   Base Styles - Mobile First
   ========================================================================== */

.spk-gdpr-notice {
	position: fixed;
	bottom: 0;
	left: 0;
	width: calc(100% - 16px);
	margin: 8px;
	padding: 12px;
	background: #ffffff;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 9999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	opacity: 0;
	transform: translateY(20px);
	animation: spkGdprSlideIn 0.4s ease-out forwards;
}

/* Hide state for when consent is accepted */
.spk-gdpr-notice.spk-gdpr-notice--hidden {
	animation: spkGdprSlideOut 0.3s ease-in forwards;
}

/* Content wrapper */
.spk-gdpr-notice__content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Notice text */
.spk-gdpr-notice__text {
	margin: 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.4;
	color: #333333;
}

/* Links container */
.spk-gdpr-notice__links {
	font-size: 12px;
	line-height: 1.4;
}

.spk-gdpr-notice__links a {
	color: var(--spk-primary-color, #0073aa);
	text-decoration: underline;
	transition: color 0.2s ease;
}

.spk-gdpr-notice__links a:hover,
.spk-gdpr-notice__links a:focus {
	color: var(--spk-primary-hover-color, #005177);
}

/* Accept button */
.spk-gdpr-notice__button {
	display: inline-block;
	min-height: 40px;
	padding: 10px 20px;
	background: var(--spk-primary-color, #0073aa);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
	-webkit-appearance: none;
	appearance: none;
	align-self: flex-start;
}

.spk-gdpr-notice__button:hover {
	background: var(--spk-primary-hover-color, #005177);
}

.spk-gdpr-notice__button:active {
	transform: scale(0.98);
}

.spk-gdpr-notice__button:focus {
	outline: 2px solid var(--spk-primary-color, #0073aa);
	outline-offset: 2px;
}

.spk-gdpr-notice__button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes spkGdprSlideIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes spkGdprSlideOut {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(20px);
	}
}

/* ==========================================================================
   Tablet Styles (768px and up)
   ========================================================================== */

@media screen and (min-width: 768px) {
	.spk-gdpr-notice {
		max-width: 400px;
		margin: 20px;
		padding: 20px;
	}

	.spk-gdpr-notice__content {
		gap: 14px;
	}
}

/* ==========================================================================
   Desktop Styles (1024px and up)
   ========================================================================== */

@media screen and (min-width: 1024px) {
	.spk-gdpr-notice {
		max-width: 400px;
	}

	.spk-gdpr-notice__button {
		align-self: auto;
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.spk-gdpr-notice {
		display: none !important;
	}
}

/* ==========================================================================
   Accessibility Improvements
   ========================================================================== */

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
	.spk-gdpr-notice {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.spk-gdpr-notice.spk-gdpr-notice--hidden {
		animation: none;
		display: none;
	}

	.spk-gdpr-notice__button {
		transition: none;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.spk-gdpr-notice {
		border: 2px solid currentColor;
	}

	.spk-gdpr-notice__button {
		border: 2px solid currentColor;
	}
}