/**
 * Custom Styles for Template Store Theme
 * Modern Premium Design
 */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

/* Root Variables */
:root {
	--color-indigo: #6366f1;
	--color-purple: #9333ea;
	--color-pink: #ec4899;
	--color-slate: #64748b;
	--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Base Styles */
* {
	box-sizing: border-box;
}

html {
	direction: rtl;
}

body {
	font-family: 'Cairo', Arial, sans-serif;
	direction: rtl;
	text-align: right;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Smooth Animations */
@keyframes fade-in {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fade-in-up {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

@keyframes blob {
	0%, 100% {
		transform: translate(0, 0) scale(1);
	}
	33% {
		transform: translate(30px, -50px) scale(1.1);
	}
	66% {
		transform: translate(-20px, 20px) scale(0.9);
	}
}

@keyframes float {
	0%, 100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-20px);
	}
}

.animate-fade-in {
	animation: fade-in 0.8s ease-out;
}

.animate-fade-in-up {
	animation: fade-in-up 0.8s ease-out;
}

.animate-slide-down {
	animation: slide-down 0.5s ease-out;
}

.animate-blob {
	animation: blob 7s infinite;
}

.animation-delay-200 {
	animation-delay: 0.2s;
}

.animation-delay-400 {
	animation-delay: 0.4s;
}

.animation-delay-600 {
	animation-delay: 0.6s;
}

.animation-delay-800 {
	animation-delay: 0.8s;
}

.animation-delay-2000 {
	animation-delay: 2s;
}

.animation-delay-4000 {
	animation-delay: 4s;
}

/* Line Clamp Utility */
.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.line-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
	width: 12px;
}

::-webkit-scrollbar-track {
	background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(to bottom, #6366f1, #9333ea);
	border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(to bottom, #4f46e5, #7e22ce);
}

/* Focus Styles for Accessibility */
*:focus {
	outline: 2px solid #6366f1;
	outline-offset: 2px;
}

button:focus,
a:focus {
	outline: 2px solid #6366f1;
	outline-offset: 2px;
	border-radius: 4px;
}

/* Template Card Enhancements */
.template-card {
	transition: var(--transition-smooth);
}

.template-card:hover {
	transform: translateY(-8px);
}

.template-card:hover .template-features {
	display: block !important;
	animation: fade-in 0.3s ease-out;
}

/* RTL Support Enhancements */
html,
body,
[dir="rtl"],
[dir="rtl"] * {
	direction: rtl !important;
	text-align: right !important;
}

[dir="rtl"] .template-card {
	text-align: right;
}

[dir="rtl"] .space-x-reverse > * + *,
.space-x-2 > * + *,
.space-x-3 > * + *,
.space-x-4 > * + *,
.space-x-6 > * + *,
.space-x-8 > * + * {
	margin-right: var(--tw-space-x);
	margin-left: 0;
}

/* Loading State */
.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Scroll Animation Classes */
.animate-on-scroll {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.animated {
	opacity: 1;
	transform: translateY(0);
}

/* Feature Cards */
.feature-card {
	transition: var(--transition-smooth);
}

.feature-card:hover {
	transform: translateY(-8px) scale(1.02);
}

/* Testimonial Cards */
.testimonial-card {
	transition: var(--transition-smooth);
}

.testimonial-card:hover {
	transform: translateY(-8px);
}

/* Smooth Scrolling */
html {
	scroll-behavior: smooth;
}

/* Section Spacing */
section {
	scroll-margin-top: 100px;
}

/* Header Enhancements */
.site-header {
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

/* Button Enhancements */
a[href^="#"] {
	transition: var(--transition-smooth);
}

/* Gradient Text Animation */
@keyframes gradient-shift {
	0%, 100% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}

.bg-clip-text {
	background-size: 200% auto;
	animation: gradient-shift 3s ease infinite;
}

/* Pulse Animation */
@keyframes pulse {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.05);
		opacity: 0.9;
	}
}

.pulse-animation {
	animation: pulse 2s ease-in-out infinite;
}

/* Floating Animation */
.float-animation {
	animation: float 3s ease-in-out infinite;
}

/* Bounce Animation */
@keyframes bounce-in {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	50% {
		opacity: 1;
		transform: scale(1.05);
	}
	70% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
	}
}

.bounce-in {
	animation: bounce-in 0.8s ease-out;
}

/* Shimmer Effect */
@keyframes shimmer {
	0% {
		background-position: -1000px 0;
	}
	100% {
		background-position: 1000px 0;
	}
}

.shimmer {
	background: linear-gradient(to right, #f0f0f0 4%, #e0e0e0 25%, #f0f0f0 36%);
	background-size: 1000px 100%;
	animation: shimmer 2s infinite;
}

/* Rotate Animation */
@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.rotate-slow {
	animation: rotate 20s linear infinite;
}

/* Template Card Entrance Animation */
.template-card {
	opacity: 0;
	transform: translateY(30px) scale(0.95);
	animation: cardEntrance 0.6s ease-out forwards;
}

@keyframes cardEntrance {
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.template-card:nth-child(1) { animation-delay: 0.1s; }
.template-card:nth-child(2) { animation-delay: 0.2s; }
.template-card:nth-child(3) { animation-delay: 0.3s; }
.template-card:nth-child(4) { animation-delay: 0.4s; }
.template-card:nth-child(5) { animation-delay: 0.5s; }
.template-card:nth-child(6) { animation-delay: 0.6s; }
.template-card:nth-child(7) { animation-delay: 0.7s; }
.template-card:nth-child(8) { animation-delay: 0.8s; }

/* Feature Card Animation */
.feature-card {
	opacity: 0;
	transform: translateY(40px);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card.animated {
	opacity: 1;
	transform: translateY(0);
}

.feature-card:nth-child(1) { transition-delay: 0.1s; }
.feature-card:nth-child(2) { transition-delay: 0.2s; }
.feature-card:nth-child(3) { transition-delay: 0.3s; }
.feature-card:nth-child(4) { transition-delay: 0.4s; }

/* Testimonial Card Animation */
.testimonial-card {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.8s ease-out;
}

.testimonial-card.animated {
	opacity: 1;
	transform: translateY(0);
}

.testimonial-card:nth-child(1) { transition-delay: 0.1s; }
.testimonial-card:nth-child(2) { transition-delay: 0.3s; }
.testimonial-card:nth-child(3) { transition-delay: 0.5s; }

/* Number Counter Animation */
.count-up {
	transition: all 0.5s ease-out;
}

/* Button Ripple Effect */
@keyframes ripple {
	0% {
		transform: scale(0);
		opacity: 1;
	}
	100% {
		transform: scale(4);
		opacity: 0;
	}
}

.ripple-effect {
	position: relative;
	overflow: hidden;
}

.ripple-effect::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
}

.ripple-effect:active::after {
	width: 300px;
	height: 300px;
}

/* Hero Section Enhancements */
.hero-section {
	position: relative;
}

/* Stats Section Enhancements */
.stats-section .stat-item {
	position: relative;
}

.stats-section .stat-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: 60px;
	background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.3), transparent);
}

/* Mobile Responsive Enhancements */
@media (max-width: 768px) {
	.hero-section {
		min-height: 80vh;
	}
	
	.template-card {
		animation-delay: 0s !important;
	}
}

/* Print Styles */
@media print {
	.site-header,
	.site-footer,
	#back-to-top {
		display: none;
	}
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
	.template-card,
	.feature-card,
	.testimonial-card {
		border: 2px solid currentColor;
	}
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Dark Mode Support (if needed in future) */
@media (prefers-color-scheme: dark) {
	/* Dark mode styles can be added here if needed */
}