:root {
    --primary-color: #1F4E3D;
    --secondary-color: #D4AF37;
    --bg-color: #f4f6f8;
    --input-border: #ddd;
}

body {
    font-family: 'Cairo', sans-serif;
    background-color: var(--bg-color);
    margin: 0;
    padding: 40px 20px;
    color: #333;
}

.form-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-top: 5px solid var(--primary-color);
}

.form-header { text-align: center; margin-bottom: 30px; }
.form-header h2 { color: var(--primary-color); margin: 0 0 10px 0; font-weight: 800; }
.form-header p { color: #666; margin: 0; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.full-width { grid-column: 1 / -1; }

.form-group { margin-bottom: 15px; display: flex; flex-direction: column; }
.form-group label { font-weight: 600; margin-bottom: 8px; color: #444; font-size: 0.95rem; }

.form-control {
    padding: 12px 15px; border: 1px solid var(--input-border);
    border-radius: 8px; font-family: 'Cairo', sans-serif; font-size: 1rem;
    transition: 0.3s; background-color: #fafafa;
}

.form-control:focus {
    border-color: var(--primary-color); outline: none;
    background-color: #fff; box-shadow: 0 0 0 3px rgba(31, 78, 61, 0.1);
}

.iti { width: 100%; direction: ltr; }
.iti__input { width: 100% !important; text-align: right; }

.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--input-border); border-radius: 8px;
    min-height: 48px; background-color: #fafafa;
}
.select2-container[dir="rtl"] .select2-search--inline { float: right; }

.submit-btn {
    background-color: var(--primary-color); color: #fff; border: none;
    padding: 15px 30px; border-radius: 8px; font-size: 1.1rem;
    font-weight: bold; cursor: pointer; width: 100%; margin-top: 20px; transition: 0.3s;
}
.submit-btn:hover { background-color: #143629; transform: translateY(-2px); }

.alert-success {
    background-color: #d1e7dd; color: #0f5132; border: 1px solid #badbcc;
    padding: 20px; border-radius: 8px; text-align: center; margin-bottom: 20px; font-weight: bold;
}
.alert-danger {
    background-color: #f8d7da; color: #842029; border: 1px solid #f5c2c7;
    padding: 20px; border-radius: 8px; text-align: center; margin-bottom: 20px; font-weight: bold;
}

@media (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-wrapper { padding: 20px; }
}
/* =========================================
   إصلاح مشاكل الموبايل وقائمة أرقام الهواتف
   ========================================= */

/* 1. منع الشاشة تماماً من التحرك يميناً ويساراً في الموبايل */
html, body {
    overflow-x: hidden; 
}

/* 2. إجبار قائمة الدول على عدم تجاوز عرض الشاشة أبداً */
.iti__country-list {
    max-width: 95vw !important; /* 95% من عرض الشاشة فقط */
    white-space: normal !important; /* السماح لأسماء الدول الطويلة بالنزول لسطر جديد */
    box-sizing: border-box;
}

/* 3. ضبط تموضع القائمة للموبايل خصيصاً لتفتح في المنتصف */
@media (max-width: 768px) {
    .iti__country-list {
        width: 100% !important;
        left: 0 !important;
        right: auto !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
    }
    
    /* جعل مربع البحث عن الدولة يأخذ العرض الكامل بشكل مريح */
    .iti__search-input {
        width: 90% !important;
        margin: 10px auto !important;
        display: block;
    }
}
/* منع الزووم التلقائي في الموبايل بضبط حجم الخط */
.form-control, 
.iti__search-input, 
.select2-search__field,
input, select {
    font-size: 16px !important;
}
/* منع الآيفون والموبايلات من عمل زووم تلقائي بجعل الخط 16px إجبارياً */
input[type="text"],
input[type="tel"],
input[type="date"],
select,
textarea,
.iti__search-input,
.select2-search__field {
    font-size: 16px !important;
}