* {
            font-family: 'Inter', sans-serif;
        }
       
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Poppins', sans-serif;
        }
       
        :root {
            --primary: #cf3f3f;
            --primary-dark: #b92525;
            --primary-light: #e85555;
        }
       
        .bg-primary {
            background-color: var(--primary);
        }
       
        .text-primary {
            color: var(--primary);
        }
       
        .border-primary {
            border-color: var(--primary);
        }
       
        .hover\:bg-primary:hover {
            background-color: var(--primary-dark);
        }
       
        .transition-all {
            transition: all 0.3s ease;
        }
       
        html {
            scroll-behavior: smooth;
        }
       
        .hero-circle {
            width: 320px;
            height: 320px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            border-radius: 50%;
            box-shadow: 0 20px 60px rgba(207, 63, 63, 0.3);
            animation: float 3s ease-in-out infinite;
        }
       
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
       
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
       
        .fade-in-up {
            animation: fadeInUp 0.6s ease-out forwards;
        }
       
        .accordion-item {
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            overflow: hidden;
            margin-bottom: 1rem;
        }
        .dark .accordion-item {
            border-color: #404040;
        }
       
        .accordion-header {
            cursor: pointer;
            padding: 1.5rem;
            background-color: #f9fafb;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
        }
        .dark .accordion-header {
            background-color: #2d2d2d;
            color: #f5f5f5;
        }
       
        .accordion-header:hover {
            background-color: #f3f4f6;
            border-left: 4px solid var(--primary);
        }
        .dark .accordion-header:hover {
            background-color: #3d3d3d;
        }
       
        .accordion-header.active {
            background-color: var(--primary);
            color: white;
        }
       
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            background-color: #ffffff;
            padding: 0 1.5rem;
        }
        .dark .accordion-content {
            background-color: #1e1e1e;
            color: #e0e0e0;
        }
       
        .accordion-content.active {
            max-height: 500px;
            padding: 1.5rem;
        }
       
        .accordion-icon {
            transition: transform 0.3s ease;
        }
       
        .accordion-icon.active {
            transform: rotate(180deg);
        }
       
        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(4px);
        }
       
        .modal.active {
            display: flex;
            align-items: center;
            justify-content: center;
        }
       
        .modal-content {
            background-color: white;
            border-radius: 1rem;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            max-width: 450px;
            width: 90%;
            margin: 0 auto;
            animation: slideUp 0.3s ease;
            position: relative;
        }
        @media (max-width: 640px) {
            .modal-content {
                width: 92%;
                max-width: 92%;
                border-radius: 1.25rem;
                margin: 1rem;
            }
        }
        .dark .modal-content {
            background-color: #1e1e1e;
            color: #f5f5f5;
            border: 1px solid #333333;
        }
       
        @keyframes slideUp {
            from { transform: translateY(30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
       
        .mobile-menu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
       
        .mobile-menu.active {
            max-height: 500px;
        }
       
        .star {
            color: #fbbf24;
        }
        
        /* === إصلاح الخلفية والخط الأبيض === */
        body {
            background-color: #ffffff;
        }
        
        body.dark {
            background-color: #121212;
            color: #f5f5f5;
        }
        
        /* التأكد من التصاق الهيدر بالمحتوى دون فراغات */
        header {
            margin-bottom: 0;
        }
        
        main {
            padding-top: 5rem; /* تعويض عن الهيدر الثابت */
            margin-top: 0;
            position: relative;
            z-index: 1;
        }
        
        /* معالجة أي عنصر أول داخل المين قد يسبب فراغ */
        main > *:first-child {
            margin-top: 0;
        }

        .dark .bg-white {
            background-color: #121212;
        }
       
        .dark .bg-gray-50 {
            background-color: #1a1a1a;
        }
       
        .dark .bg-gray-100 {
            background-color: #2d2d2d;
        }
       
        .dark .border-gray-200 {
            border-color: #333333;
        }
       
        .dark .border-gray-300 {
            border-color: #404040;
        }
       
        .dark .text-gray-600 {
            color: #b0b0b0;
        }
       
        .dark .text-gray-500 {
            color: #9ca3af;
        }
       
        .dark .text-gray-700 {
            color: #e0e0e0;
        }
       
        .dark .text-gray-900 {
            color: #ffffff;
        }
       
        .dark .shadow-sm {
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        }
       
        .dark .hover\:shadow-md:hover {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
        }
       
        .dark .bg-red-50 {
            background-color: rgba(207, 63, 63, 0.15);
        }
       
        .dark .border-red-200 {
            border-color: rgba(207, 63, 63, 0.3);
        }
       
        /* إصلاح مشكلة الـ Input في الوضع الفاتح */
        .modal-content input,
        .modal-content textarea,
        .modal-content select {
            background-color: #ffffff;
            color: #111827;
            border: 1px solid #d1d5db;
        }
        
        /* الوضع الداكن للـ Modal */
        .dark .modal-content input,
        .dark .modal-content textarea,
        .dark .modal-content select {
            background-color: #2d2d2d;
            color: #f5f5f5;
            border-color: #404040;
        }
        
        /* مكان النص المؤقت (Placeholder) */
        .modal-content input::placeholder,
        .modal-content textarea::placeholder {
            color: #6b7280;
        }
        
        .dark .modal-content input::placeholder,
        .dark .modal-content textarea::placeholder {
            color: #9ca3af;
        }
        
        /* تحسين ظهور أيقونة إظهار كلمة المرور */
        .toggle-password {
            color: #6b7280;
            cursor: pointer;
            user-select: none;
        }
        
        .dark .toggle-password {
            color: #9ca3af;
        }
        
        /* تنسيقات الـ OTP */
        .otp-input {
            background-color: #ffffff;
            color: #111827;
            border: 2px solid #e5e7eb;
        }
        
        .dark .otp-input {
            background-color: #2d2d2d;
            color: #ffffff;
            border-color: #404040;
        }

        .dark input:focus,
        .dark textarea:focus,
        .dark select:focus {
            border-color: var(--primary);
            outline: none;
        }
       
        .dark .bg-dark-card {
            background-color: #2d2d2d;
        }
       
        .dark .bg-dark-surface {
            background-color: #1e1e1e;
        }
        .language-modal {
            animation: slideIn 0.3s ease-out;
            z-index: 9999 !important;
        }
       
        .modal-backdrop-lang {
            z-index: 9998 !important;
        }
       
        @keyframes slideIn {
            from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
            to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }
       
        .language-option img {
            width: 24px;
            height: 18px;
            border-radius: 2px;
        }
       
        .password-wrapper {
            position: relative;
        }
       
        .toggle-password {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #9ca3af;
            z-index: 10;
        }
       
        .otp-inputs {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
        }
       
        .otp-input {
            width: 50px;
            height: 55px;
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            border-radius: 12px;
        }
       
        .otp-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(207, 63, 63, 0.3);
        }
       
        .terms-checkbox {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }
       
        .terms-checkbox input {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
       
        .terms-link {
            color: var(--primary);
            text-decoration: underline;
            cursor: pointer;
        }
       
        .terms-link:hover {
            color: var(--primary-dark);
        }
       
        button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        .iphone {
            width: 320px;
            height: 260px;
            border-radius: 45px 45px 25px 25px;
            background: #000;
            border: 1px solid #333;
            box-shadow: 0 20px 60px rgba(0,0,0,0.6);
            overflow: hidden;
        }
        .island {
            width: 120px;
            height: 28px;
            background: #000;
            border-radius: 20px;
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
        }
        /* Boxicon adjustments */
        .bx {
            vertical-align: middle;
        }
        button i.bx, a i.bx {
            pointer-events: none;
        }
/* FAQ Accordion Styles */
.accordion-header.active .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content.active {
    max-height: 500px !important; /* أو أي قيمة تناسب المحتوى */
}