/* أضف هذه الأنماط إلى ملف main.css أو ss.css الخاص بك */

/* -- Root Variables (إذا لم تكن موجودة بالفعل في ملفك) -- */
:root {
    --primary-color: #9b59b6; /* بنفسجي - لون أساسي */
    --secondary-color: #6c5ce7; /* بنفسجي داكن/أزرق - لون ثانوي */
    --accent-color: #0be881; /* أخضر - لون تمييز */
    --text-light: rgba(255, 255, 255, 0.9); /* نص فاتح */
    --text-dark: rgba(0, 0, 0, 0.8); /* نص داكن */
    --bg-dark: #1a1a2e; /* خلفية داكنة */
    --card-bg-light: rgba(255, 255, 255, 0.08); /* خلفية بطاقة شفافة (لتأثير الزجاج) */
    --card-border: rgba(255, 255, 255, 0.18); /* حدود بطاقة شفافة */
    --shadow-light: 0 5px 15px rgba(0, 0, 0, 0.2); /* ظل فاتح */
    --shadow-dark: 0 10px 30px rgba(0, 0, 0, 0.4); /* ظل داكن */
    --gradient-purple: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); /* تدرج لوني بنفسجي */

    /* متغيرات إضافية خاصة بالنموذج */
    --form-background: var(--card-bg-light); /* استخدم نفس خلفية البطاقات للنموذج */
    --input-background: rgba(255, 255, 255, 0.05); /* خلفية حقول الإدخال */
    --border-color: rgba(255, 255, 255, 0.15); /* لون حدود حقول الإدخال */
    --primary-hover-color: #7d3c96; /* لون هوفر للزر الأساسي */

    /* ألوان رسائل الحالة */
    --success-bg-color: #d4edda; /* خلفية خضراء فاتحة للنجاح */
    --success-text-color: #155724; /* نص أخضر داكن للنجاح */
    --error-bg-color: #f8d7da; /* خلفية حمراء فاتحة للخطأ */
    --error-text-color: #721c24; /* نص أحمر داكن للخطأ */
}

/* -- Body Styles (تأكد من وجود هذا، يحدد flexbox لتوسيط المحتوى) -- */
body {
    font-family: 'Cairo', 'Montserrat-Arabic', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-light);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
    direction: rtl;
    text-align: right;
    display: flex; /* لتمكين توسيط المحتوى */
    flex-direction: column; /* للسماح بتوسيط العناصر داخل body */
    justify-content: center; /* توسيط عمودي */
    align-items: center; /* توسيط أفقي */
    padding: 20px;
    position: relative;
}

/* -- Animated Background Blobs (كرات الخلفية المتحركة) -- */
/* تأكد من وجود هذا القسم بالكامل في ملفك main.css/ss.css */
.background-blob {
    position: fixed;
    border-radius: 50%;
    opacity: 0.3;
    filter: blur(100px);
    z-index: -1;
    animation: blob-animate 15s infinite alternate;
}

.background-blob.top-left {
    width: 300px;
    height: 300px;
    background-color: var(--primary-color);
    top: -50px;
    right: -50px; /* تم تعديله لـ RTL */
    left: auto;
    animation-delay: 0s;
}

.background-blob.bottom-right {
    width: 400px;
    height: 400px;
    background-color: var(--secondary-color);
    bottom: -100px;
    left: -100px; /* تم تعديله لـ RTL */
    right: auto;
    animation-delay: 2s;
}

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

/* -- Glassmorphism Effect (تأثير الزجاج الشفاف) -- */
/* تأكد من وجود هذا القسم بالكامل في ملفك main.css/ss.css */
.glassmorphism {
    background: var(--card-bg-light); /* خلفية شفافة قليلاً */
    border-radius: 16px; /* حواف مستديرة */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* ظل خفيف */
    backdrop-filter: blur(8px); /* التمويه لخلفية العنصر - أساس تأثير الزجاج */
    -webkit-backdrop-filter: blur(8px); /* دعم المتصفحات */
    border: 1px solid var(--card-border); /* حدود شفافة */
    transition: all 0.3s ease-in-out; /* انتقال سلس عند التفاعل */
}

.glassmorphism:hover {
    background: rgba(255, 255, 255, 0.15); /* يصبح أكثر إشراقاً عند التمرير */
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2); /* ظل أكبر عند التمرير */
}

/* -- Form specific styles (تنسيقات النموذج المضافة/المعدلة) -- */
.form-container {
    padding: 30px;
    width: 100%;
    max-width: 500px;
    text-align: center;
    /* تمت إزالة background-color و border-radius و box-shadow
       لأنها ستأتي من فئة .glassmorphism */
    margin: 20px; /* إضافة هامش للحاوية لتبدو أفضل على الشاشات الأصغر */
}
.form-container h1 {
    color: var(--primary-color);
    margin-bottom: 25px;
    font-size: 2em; /* استخدام حجم الخط من الثيم */
}
.form-group {
    margin-bottom: 20px;
    text-align: right;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-light); /* تأكيد استخدام لون النص الفاتح */
}
.form-group input[type="date"],
.form-group input[type="url"],
.form-group input[type="text"],
.form-group input[type="tel"] {
    width: calc(100% - 24px); /* تعديل بسيط لحساب البادنج والحدود */
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--input-background);
    color: var(--text-light);
    font-family: 'Cairo', sans-serif;
    font-size: 1em;
    outline: none; /* إزالة التركيز الافتراضي للمتصفح */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-group input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1); /* لجعل أيقونة التقويم مرئية في الوضع الداكن */
}
.form-group input[type="date"]:focus,
.form-group input[type="url"]:focus,
.form-group input[type="text"]:focus,
.form-group input[type="tel"]:focus {
    border-color: var(--accent-color); /* لون الحدود عند التركيز */
    box-shadow: 0 0 8px rgba(11, 232, 129, 0.5); /* ظل عند التركيز */
}

/* -- Buttons (استخدام أنماط الأزرار الموجودة في الثيم الرئيسي) -- */
.btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    margin: 5px; /* مسافة بين الأزرار */
}

.btn-primary {
    background: var(--gradient-purple);
    color: #fff;
    border: 1px solid var(--primary-color);
    box-shadow: 0 4px 10px rgba(155, 89, 182, 0.4);
}

.btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(155, 89, 182, 0.6);
}

.btn-secondary {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 10px rgba(155, 89, 182, 0.4);
    transform: translateY(-2px);
}

/* -- Message styles (تنسيقات رسائل النجاح/الخطأ) -- */
.message {
    margin-bottom: 20px; /* مسافة أعلى وأسفل الرسالة */
    padding: 15px;
    border-radius: 10px;
    font-weight: 600;
    text-align: center;
    animation: fadeInUp 0.5s ease-out forwards; /* إضافة تأثير ظهور */
}
.message.success {
    background-color: var(--success-bg-color);
    color: var(--success-text-color);
    border: 1px solid #28a745; /* حدود خضراء */
}
.message.error {
    background-color: var(--error-bg-color);
    color: var(--error-text-color);
    border: 1px solid #dc3545; /* حدود حمراء */
}

/* مفتاح الإطارات للحركة ظهور العنصر */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* استجابة للتصغير على الشاشات الصغيرة */
@media (max-width: 600px) {
    .form-container {
        padding: 20px;
        margin: 10px;
    }
    .form-container h1 {
        font-size: 1.8em;
    }
    .btn {
        width: calc(100% - 10px); /* اجعل الأزرار تملأ العرض تقريباً */
        margin: 5px 0;
    }
}