/* Custom CSS for RTL and Arabic typography with Blotato-inspired dark theme */

body {
    direction: rtl;
    text-align: right;
    background-color: #000000;
    color: #ffffff;
    font-family: 'Cairo', 'Tajawal', sans-serif;
}

/* Ensure forms align correctly */
input, textarea, select {
    text-align: right;
    direction: rtl;
}

/* Button styling */
.btn-primary {
    @apply bg-gradient-to-l from-purple-600 to-pink-600 text-white px-8 py-4 rounded-full hover:scale-105 transition-transform font-bold shadow-2xl shadow-purple-500/30;
}

.btn-secondary {
    @apply bg-gray-800 text-gray-200 px-6 py-3 rounded-lg hover:bg-gray-700 transition font-semibold border border-gray-700;
}

/* Form input styling */
.form-input {
    @apply w-full px-5 py-4 bg-black/40 border border-purple-500/30 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition;
}

.form-label {
    @apply block text-gray-300 font-semibold mb-2 text-right;
}

/* Error message styling */
.error-message {
    @apply text-red-400 text-sm mt-2 text-right;
}

/* Success message styling */
.success-message {
    @apply bg-green-500/10 border border-green-500/30 text-green-300 px-5 py-4 rounded-xl mb-4 backdrop-blur-sm;
}

/* Card styling */
.card {
    @apply bg-gradient-to-br from-purple-900/20 to-pink-900/20 border border-purple-500/30 rounded-2xl p-6 backdrop-blur-sm hover:border-purple-500/50 hover:scale-105 transition-all duration-300;
}

/* Progress bar */
.progress-bar {
    @apply w-full bg-gray-200 rounded-full h-2.5;
}

.progress-bar-fill {
    @apply bg-blue-600 h-2.5 rounded-full transition-all duration-300;
}

/* Video grid */
.video-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

/* Template card */
.template-card {
    @apply bg-gradient-to-br from-purple-900/20 to-pink-900/20 border border-purple-500/30 rounded-2xl overflow-hidden hover:border-purple-500/60 hover:scale-105 transition-all duration-300 cursor-pointer backdrop-blur-sm;
}

.template-card img {
    @apply w-full h-48 object-cover;
}

.template-card-content {
    @apply p-5;
}

/* Toggle switch */
.toggle-switch {
    @apply relative inline-block w-12 h-6;
}

.toggle-switch input {
    @apply opacity-0 w-0 h-0;
}

.toggle-slider {
    @apply absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-gray-700 rounded-full transition-all duration-300;
}

.toggle-slider:before {
    @apply absolute content-[''] h-5 w-5 left-0.5 bottom-0.5 bg-gray-300 rounded-full transition-all duration-300;
}

input:checked + .toggle-slider {
    @apply bg-gradient-to-l from-purple-600 to-pink-600;
}

input:checked + .toggle-slider:before {
    @apply transform translate-x-6 bg-white;
}

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

.animate-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 3s ease infinite;
}

/* Text gradient utility */
.text-gradient {
    @apply bg-gradient-to-l from-purple-400 to-pink-600 bg-clip-text text-transparent;
}

/* Glass effect */
.glass {
    @apply bg-black/40 backdrop-blur-md border border-purple-500/20;
}

/* Glow effect */
.glow {
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
    transition: box-shadow 0.3s ease;
}

.glow:hover {
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.6);
}