/* إعدادات أساسية */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Tajawal', sans-serif;
    background: linear-gradient(135deg, #0a1929 0%, #1a237e 100%);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    direction: rtl;
}

/* خلفية رمضانية */
.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.moon {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, #ffd700 0%, #ffed4e 100%);
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.5);
    animation: glow 3s ease-in-out infinite alternate;
}

.stars {
    position: absolute;
    width: 100%;
    height: 100%;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        100px 200px white, 300px 100px white, 500px 300px white,
        700px 150px white, 900px 250px white, 200px 400px white,
        400px 350px white, 600px 450px white, 800px 500px white,
        150px 150px white, 350px 250px white, 550px 200px white,
        750px 350px white, 950px 400px white, 250px 500px white,
        450px 550px white, 650px 600px white, 850px 650px white;
    animation: twinkle 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from { box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }
    to { box-shadow: 0 0 40px rgba(255, 215, 0, 0.8); }
}

@keyframes twinkle {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

/* الحاوية الرئيسية */
.container {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    z-index: 1;
}

/* الهيدر */
.header {
    text-align: center;
    margin-bottom: 40px;
    color: #ffd700;
}

.header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.subtitle {
    font-size: 1.1rem;
    color: #fff;
    opacity: 0.9;
}

/* النموذج */
.form {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #1a237e;
    font-size: 1rem;
}

.form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Tajawal', sans-serif;
    transition: all 0.3s ease;
    background: white;
}

.form-group input:focus {
    outline: none;
    border-color: #ffd700;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.form-section {
    margin: 30px 0;
}

.form-section h3 {
    color: #1a237e;
    margin-bottom: 15px;
    font-size: 1.2rem;
    text-align: center;
}

.companions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.submit-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #1a237e;
    border: none;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.4);
}

.submit-btn:active {
    transform: translateY(0);
}

/* رسالة النجاح */
.success-message {
    background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%);
    color: white;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(76, 175, 80, 0.3);
    animation: slideIn 0.5s ease;
}

.success-message h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.success-message p {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.hidden {
    display: none;
}

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

/* الفوتر */
.footer {
    text-align: center;
    margin-top: 40px;
    color: #ffd700;
    font-size: 1.2rem;
    font-weight: 500;
}

/* تجاوب مع الجوال */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }
    
    .header h1 {
        font-size: 2rem;
    }
    
    .form {
        padding: 20px;
    }
    
    .companions-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .moon {
        width: 60px;
        height: 60px;
        top: 30px;
        left: 50px;
    }
}

@media (max-width: 480px) {
    .header h1 {
        font-size: 1.8rem;
    }
    
    .subtitle {
        font-size: 1rem;
    }
    
    .form {
        padding: 15px;
    }
    
    .form-group input {
        padding: 10px 12px;
    }
    
    .submit-btn {
        padding: 12px;
        font-size: 1.1rem;
    }
}