/* ===== UNIFIED MOBILE & TABLET STYLES ===== */

/* تحسينات للتابلت (768px - 1024px) */
@media (max-width: 1024px) {
    /* تحسين الحاويات */
    .container, 
    .nospercent-container,
    .wp-block-group,
    .entry-content {
        padding-left: 20px;
        padding-right: 20px;
        max-width: 100% !important;
    }
    
    /* تحسين النصوص */
    h1 { font-size: 32px !important; }
    h2 { font-size: 28px !important; }
    h3 { font-size: 24px !important; }
    
    /* تحسين الشبكات */
    .grid,
    .columns,
    [class*="col-"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* تحسينات للهواتف (أقل من 768px) */
@media (max-width: 768px) {
    /* إعادة ضبط أساسي */
    * {
        box-sizing: border-box;
    }
    
    /* تحسين الحاويات */
    .container, 
    .nospercent-container,
    .wp-block-group,
    .entry-content {
        padding-left: 15px;
        padding-right: 15px;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto;
    }
    
    /* تحسين العناوين */
    h1 { font-size: 28px !important; line-height: 1.3; }
    h2 { font-size: 24px !important; line-height: 1.3; }
    h3 { font-size: 20px !important; line-height: 1.3; }
    h4 { font-size: 18px !important; line-height: 1.4; }
    
    /* تحسين الأزرار بشكل موحد */
    .btn, 
    .button,
    .nospercent-btn,
    .wp-block-button__link,
    input[type="submit"],
    input[type="button"] {
        width: 100% !important;
        max-width: 300px !important;
        margin: 10px auto !important;
        display: block !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
        text-align: center;
        border-radius: 8px !important;
        min-height: 44px; /* لللمس */
    }
    
    /* تحسين النماذج */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select {
        width: 100% !important;
        font-size: 16px !important;
        padding: 12px 15px !important;
        margin: 8px 0 !important;
        min-height: 44px;
    }
    
    /* تحويل الشبكات إلى عمود واحد */
    .grid,
    .grid-container,
    .columns,
    .row,
    .nospercent-details-grid,
    .nospercent-features-list,
    .subtypes-grid {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
    }
    
    /* تحسين الكروت والعناصر */
    .card,
    .box,
    .service-item,
    .nospercent-service-details,
    .property-ratings-system,
    .property-inspection-section {
        margin: 15px 0 !important;
        padding: 20px !important;
        border-radius: 10px !important;
    }
    
    /* تحسين الصور */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* إخفاء العناصر غير الضرورية */
    .desktop-only {
        display: none !important;
    }
}

/* تحسينات للهواتف الصغيرة جداً */
@media (max-width: 480px) {
    .container, 
    .nospercent-container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    
    .btn, 
    .nospercent-btn {
        max-width: 100% !important;
        font-size: 14px !important;
        padding: 10px 15px !important;
    }
}

/* تحسينات خاصة لصفحة الخدمات */
@media (max-width: 768px) {
    .nospercent-single-service {
        padding: 15px 0;
    }
    
    .nospercent-service-title {
        font-size: 24px !important;
    }
    
    .inspection-login-required {
        text-align: center;
        padding: 20px;
    }
    
    .button-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
    
    .nospercent-btn {
        width: 80% !important;
        max-width: 280px !important;
        margin: 5px auto !important;
    }
    
    /* تغيير لون زر إنشاء حساب */
    .nospercent-btn-secondary {
        background: #008a5f !important;
        color: white !important;
        border: 1px solid #008a5f !important;
    }
    
    .nospercent-btn-secondary:hover {
        background: #007a52 !important;
        color: white !important;
    }
}