/**
 * تحسينات مقترحة للموقع - ملف CSS
 * أضف هذا إلى end من main.css أو أنشئ ملف جديد
 */

/* =========================================
   IMPROVEMENTS FOR MOBILE (Screen < 360px)
   ========================================= */

@media (max-width: 360px) {
    /* يجب حد أدنى من حجم النص */
    html {
        font-size: 14px; /* بدلاً من 16px الافتراضي */
    }
    
    /* العناوين الرئيسية */
    .md411-hero-title {
        font-size: 1.3rem;
        line-height: 1.2;
    }
    
    .md411-section-title {
        font-size: 1.2rem;
        margin-bottom: 8px;
    }
    
    .md411-section-subtitle {
        font-size: 0.9rem;
        margin-bottom: 24px;
    }
    
    /* الأزرار - تقليل الـ padding */
    .md411-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    /* المسافات بين الأزرار */
    .md411-hero-actions {
        gap: 12px;
    }
    
    /* البطاقات */
    .md411-package-card {
        padding: 16px 12px;
    }
    
    .md411-package-qty {
        font-size: 1.2rem;
    }
    
    .md411-package-name {
        font-size: 0.85rem;
    }
    
    /* المدخلات والفورمات */
    input,
    select,
    textarea {
        min-height: 44px; /* حد أدنى للتفاعل */
        font-size: 16px; /* يمنع zoom على iOS */
        padding: 10px 12px;
    }
    
    /* الجداول */
    table {
        font-size: 0.85rem;
    }
    
    /* الفوتر */
    .md411-footer-heading {
        font-size: 0.95rem;
    }
}

/* =========================================
   IMPROVED FOCUS STATES
   ========================================= */

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
    border-color: var(--md411-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
    transition: box-shadow var(--md411-transition);
}

/* =========================================
   LAZY LOADING ANIMATION
   ========================================= */

img[loading="lazy"] {
    opacity: 0;
    animation: fadeInImage 0.3s ease-in forwards;
}

@keyframes fadeInImage {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* =========================================
   IMPROVED MODAL FOR MOBILE
   ========================================= */

@media (max-width: 480px) {
    .md411-modal {
        max-height: 85vh; /* بدلاً من 90vh */
        border-radius: 16px 16px 0 0; /* أسفل الشاشة فقط */
    }
}

/* =========================================
   DROPDOWN FILTER FOR MOBILE
   ========================================= */

@media (max-width: 480px) {
    .md411-filter-mobile {
        display: block;
        width: 100%;
        padding: 12px 16px;
        margin-bottom: 20px;
        background: var(--md411-bg-card);
        color: var(--md411-text-primary);
        border: 1px solid var(--md411-border-gold);
        border-radius: var(--md411-radius-sm);
        font-family: var(--md411-font);
        font-size: 1rem;
        cursor: pointer;
    }
    
    .md411-filter-mobile:focus {
        border-color: var(--md411-gold);
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
    }
    
    /* إخفاء التبويبات الأفقية على الموبايل */
    .md411-tabs-wrapper {
        display: none;
    }
}

/* =========================================
   IMPROVED SOCIAL MEDIA ICONS
   ========================================= */

.md411-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid var(--md411-border-gold);
    color: var(--md411-gold);
    transition: all var(--md411-transition);
    margin-right: 8px;
}

.md411-social-icon:hover {
    background: rgba(212, 175, 55, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.15);
}

/* =========================================
   PERFORMANCE: REMOVE BLUR ON OLD DEVICES
   ========================================= */

@supports not (backdrop-filter: blur(20px)) {
    .md411-header {
        background: rgba(12, 12, 13, 0.98);
    }
}

/* =========================================
   IMPROVED FORM VALIDATION
   ========================================= */

input:invalid:not(:placeholder-shown) {
    border-color: #f87171;
}

input:valid:not(:placeholder-shown) {
    border-color: #10b981;
}

/* =========================================
   SMOOTH SCROLLING
   ========================================= */

html {
    scroll-behavior: smooth;
}

/* =========================================
   LOADING SKELETON
   ========================================= */

.md411-skeleton {
    background: linear-gradient(
        90deg,
        var(--md411-bg-card) 0%,
        rgba(212, 175, 55, 0.1) 50%,
        var(--md411-bg-card) 100%
    );
    background-size: 200% 100%;
    animation: loading 2s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =========================================
   ACCESSIBILITY IMPROVEMENTS
   ========================================= */

/* Skip to main content link */
.skip-to-main {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--md411-gold);
    color: var(--md411-bg-primary);
    padding: 8px 16px;
    z-index: 100;
}

.skip-to-main:focus {
    top: 0;
}

/* Visible focus indicators */
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--md411-gold);
    outline-offset: 2px;
}

/* =========================================
   DARK MODE SUPPORT (عند الحاجة)
   ========================================= */

@media (prefers-color-scheme: dark) {
    /* الموقع بالفعل مظلم، لا حاجة لتغيير */
}

/* =========================================
   HIGH CONTRAST MODE
   ========================================= */

@media (prefers-contrast: more) {
    .md411-border-gold {
        opacity: 0.5; /* أفتح قليلاً */
    }
    
    .md411-text-secondary {
        color: #d0c8b8; /* أفتح قليلاً */
    }
}

/* =========================================
   REDUCED MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================
   BETTER LINK UNDERLINES
   ========================================= */

/* (link underline-on-hover removed: it also hit the store pages' own links) */

a.md411-btn,
.md411-desktop-nav-list a,
.md411-nav-list a,
.md411-footer-links a,
.md411-quick-item,
.md411-logo,
.md411-social-icon {
    border-bottom: none !important;
}