/* Custom styles for the application */ * { margin: 0; padding: 0; box-sizing: border-box; } .grecaptcha-badge { visibility: visible !important; opacity: 1 !important; z-index: 999999 !important; } body { font-family: 'Tajawal', sans-serif; /* direction/text-align intentionally NOT hardcoded here — this is a global stylesheet shared by all 4 languages. The attribute (set per-request from the visitor's actual language in templates/header.php and dashboard/templates/header.php) already controls direction correctly; hardcoding rtl here overrode it on every single page for every non-Arabic visitor since launch, right-aligning English/French/Spanish text and reversing neutral punctuation like "?" via the browser's bidi algorithm. */ } /* Better text visibility on gradient backgrounds */ .bg-gradient-to-br h1, .bg-gradient-to-br h2, .bg-gradient-to-br h3, .bg-gradient-to-br p, .bg-gradient-to-br a { /* text-shadow removed for cleaner appearance */ } .text-white { /* drop-shadow removed for cleaner appearance */ } /* Smooth transitions */ a, button { transition: all 0.3s ease; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #ec4899; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: #db2777; } /* Loading animation */ @keyframes spin { to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } /* Fade in animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.6s ease-out; } /* Shake animation for errors */ @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } } .animate-shake { animation: shake 0.5s; } /* Card hover effects */ .card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card-hover:hover { transform: translateY(-5px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); } /* Button effects */ .btn-primary { background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%); color: white; padding: 12px 32px; border-radius: 50px; font-weight: bold; border: none; cursor: pointer; transition: all 0.3s ease; } .btn-primary:hover { transform: scale(1.05); box-shadow: 0 10px 30px rgba(236, 72, 153, 0.4); } .btn-primary:active { transform: scale(0.98); } /* Form inputs */ .form-input { width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 16px; transition: all 0.3s ease; } .form-input:focus { outline: none; border-color: #ec4899; box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1); } .form-input.error { border-color: #ef4444; } /* Alert messages */ .alert { padding: 16px; border-radius: 8px; margin-bottom: 16px; } .alert-success { background-color: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; } .alert-error { background-color: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; } .alert-info { background-color: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; } /* Gradient backgrounds */ .gradient-pink-purple { background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%); } .gradient-purple-indigo { background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%); } /* Profile cards */ .profile-card { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .profile-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); } .profile-card img { width: 100%; height: 300px; object-fit: cover; } /* Badge styles */ .badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 14px; font-weight: 600; } .badge-premium { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); color: white; } .badge-verified { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; } /* Responsive design helpers */ @media (max-width: 768px) { .hide-mobile { display: none !important; } } @media (min-width: 769px) { .hide-desktop { display: none !important; } } /* Loading spinner */ .spinner { border: 3px solid #f3f3f3; border-top: 3px solid #ec4899; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; } /* Chat message animations */ .message-enter { animation: slideIn 0.3s ease-out; } @keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* Skeleton loading */ .skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Modal overlay */ .modal-overlay { background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); } /* Tooltip */ .tooltip { position: relative; } .tooltip:hover::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding: 8px 12px; background: rgba(0, 0, 0, 0.9); color: white; border-radius: 6px; font-size: 14px; white-space: nowrap; z-index: 1000; }