/**
 * IKAROS Token Presale - Modal Mobile Optimization
 * 
 * هذا الملف يحتوي على تحسينات إضافية للنوافذ المنبثقة على الأجهزة المحمولة
 * يجب تضمينه بعد modal-styles.css وresponsive-modern.css
 * 
 * تم تحسينه للتجاوب مع جميع أحجام الشاشات وتناسق التصميم مع باقي مكونات الواجهة
 */

/* تحسينات للأجهزة المحمولة بناءً على الشكل الجديد للنافذة المنبثقة */

/* تصميم النافذة منبثقة وعرضها - تطبيق على جميع الأحجام */
.modal-dialog {
    max-width: 100%;
    width: auto;
    margin: 0.75rem auto;
    transition: transform 0.3s ease !important;
}

.modal-dialog.modal-lg {
    max-width: 900px !important;
    width: 95% !important;
}

/* تحسين تصميم أساسيات النافذة المنبثقة */
.modal-content {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    background-color: #12192e !important;
    overflow: hidden !important;
}

/* تحسين تأثير الظهور */
.modal.fade .modal-dialog {
    transform: scale(0.9) !important;
}

.modal.show .modal-dialog {
    transform: scale(1) !important;
}

/* تصميم الخلفية الخارجية - عام لجميع الأحجام */
.modal-backdrop {
    opacity: 0.75 !important;
    backdrop-filter: blur(3px) !important;
}

/* تصميم محسن للأجهزة المحمولة */
@media (max-width: 767px) {
    .modal-backdrop {
        opacity: 0.85 !important;
    }
    
    /* تصميم النافذة الرئيسية - خاص بالجوال */
    .modal-dialog {
        max-width: 92%;
        width: auto !important;
        margin: 1.25rem auto;
    }
    
    .modal-content {
        border-radius: 15px !important;
    }
    
    /* تصميم رأس النافذة */
    .modal .modal-header {
        background-color: #192642;
        border-bottom: 1px solid #243257;
        padding: 0.75rem 1rem;
    }
    
    /* زر الإغلاق */
    .modal .btn-close {
        font-size: 0.8rem;
        padding: 0.5rem;
    }
    
    /* محتوى النافذة */
    .modal .modal-body {
        padding: 1rem 0.75rem;
    }
    
    /* تصميم العنوان وشعار العملة */
    .modal .token-info-container {
        text-align: center;
        padding: 1rem 0;
    }
    
    .modal .token-img {
        max-width: 120px;
        margin: 0 auto 0.75rem;
    }
    
    /* تصميم النص والعناوين */
    .modal h3 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .modal p.text-muted {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }
    
    /* تصميم حقول معلومات العملة */
    .modal .detail-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .modal .detail-label {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.75);
    }
    
    .modal .detail-value {
        font-size: 0.9rem;
        font-weight: 600;
    }
    
    /* تصميم شبكة العمل */
    .modal .config-network {
        margin: 1rem 0;
        padding: 0.5rem 0;
    }
    
    .modal .badge {
        font-size: 0.8rem;
        padding: 0.35rem 0.6rem;
        border-radius: 20px;
    }
    
    /* تصميم العد التنازلي */
    .modal .countdown {
        margin: 1rem 0;
    }
    
    .modal .timer-label {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    
    .modal .countdown .countdown-item {
        padding: 0.5rem 0.25rem;
        background-color: rgba(25, 38, 66, 0.5);
        border-radius: 8px;
    }
    
    .modal .countdown-value {
        font-weight: 700;
    }
    
}

/* تصميم أدق للشاشات الصغيرة جداً */
@media (max-width: 375px) {
    .modal .modal-body {
        padding: 0.75rem 0.5rem;
    }
    
    .modal .detail-label,
    .modal .detail-value {
        font-size: 0.8rem;
    }
    
    .modal .token-img {
        max-width: 100px;
    }
    
    .modal .countdown-item {
        min-width: 40px;
    }
    
    .modal .countdown-value {
        font-size: 1rem;
    }
    
    .modal .countdown-label {
        font-size: 0.65rem;
    }
    
    /* تحسين التفاعل مع الأزرار على الشاشات الصغيرة جداً */
    .modal .btn {
        padding: 0.5rem 0.5rem;
        font-size: 0.85rem;
    }
}
    
    /* تحسينات لنافذة شراء العملة */
    .modal .buy-tokens {
        margin-top: 1rem;
    }
    
    .modal .buy-tokens .card-header {
        padding: 0.75rem;
    }
    
    .modal .buy-tokens .card-header h5 {
        font-size: 1.1rem;
        margin-bottom: 0;
    }
    
    .modal .buy-tokens .card-body {
        padding: 0.75rem;
    }
    
    /* تصميم حقول الإدخال */
    .modal .form-control,
    .modal .form-select {
        padding: 0.5rem 0.75rem;
        font-size: 0.95rem;
    }
    
    .modal .form-label {
        font-size: 0.9rem;
        margin-bottom: 0.3rem;
    }
    
    .modal .form-text {
        font-size: 0.75rem;
    }
    
/* تصميم عام للأزرار في النوافذ المنبثقة */
.modal .btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.modal .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

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

.modal .d-grid .btn {
    padding: 0.75rem;
}

/* شريط التقدم */
.modal .progress {
    height: 0.6rem;
    margin: 0.5rem 0;
    border-radius: 10px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.2);
}

.modal .progress-bar {
    transition: width 0.5s ease-in-out;
}

.modal .progress-label {
    font-size: 0.75rem;
    margin-bottom: 0.3rem;
}

.modal .progress-info {
    font-size: 0.8rem;
}

/* تحسين ظهور وإخفاء النافذة المنبثقة */
.modal.fade {
    transition: opacity 0.15s linear;
}

/* تحسين تجربة اللمس على الأجهزة المحمولة */
@media (max-width: 991.98px) {
    .modal .form-control,
    .modal .btn,
    .modal-header .btn-close {
        min-height: 44px; /* الحجم المناسب للنقر باللمس */
    }
    
    /* تحسين المساحة الداخلية للنموذج */
    .modal .form-group {
        margin-bottom: 1rem;
    }
    
    /* تحسين تباعد العناصر */
    .modal-body > *:not(:last-child) {
        margin-bottom: 0.75rem;
    }
}