/* ============================================================
   📱 PREMIUM RESPONSIVE OVERRIDES FOR SMALL MOBILE (Max 480px)
   Expanded to support iPhone SE, X, Pro, Pro Max, Plus, 
   and all compact-to-modern mobile viewports.
============================================================ */

@media screen and (max-width: 480px) {
    
    /* 🚨 FIX 1: ELIMINATE ARABIC LETTER-SPACING BUG 🚨 */
    /* Arabic cursive script must never have letter-spacing as it breaks character connections */
    html[lang="ar"] *, 
    [dir="rtl"] * {
        letter-spacing: normal !important;
    }
    
    /* Keep numbers/counters tracking cleanly as independent code entities */
    html[lang="ar"] .sleek-counter,
    html[lang="ar"] .modal-counter,
    html[lang="ar"] .gallery-counter-badge,
    html[lang="ar"] .price-badge-top {
        letter-spacing: 1px !important;
    }

    /* 1. Global Typography & Spacing Defaults */
    .section-padding { padding: 40px 15px !important; }
    .section-title { font-size: 1.4rem !important; margin-bottom: 25px !important; }
    
    header.glass { padding: 10px 15px !important; }
    .nav-logo { transform: scale(1.8) !important; } 

    /* 🚨 MAIN ELEMENT DEFENSE: Pushes content cleanly down below the thick mobile header 🚨 */
    body.properties-page main, 
    main:has(.grid-container), 
    main:has(#city-properties-container),
    main:has(#results-container) { 
        padding-top: 140px !important; 
        box-sizing: border-box !important;
    }

    /* ============================================================
       🚨 2. UNIVERSAL HERO FONT SCALING (English Default Viewports) 🚨
       ============================================================ */
    html body main section:first-of-type h1,
    html body main h1,
    .hero h1, .hero h2,
    .hero-search h1, .hero-search h2,
    .city-hero h1, .city-hero h2,
    .properties-hero h1, .properties-hero h2,
    .page-hero h1, .page-hero h2,
    .hero-title, .page-title, .city-title { 
        font-size: 1.45rem !important; 
        line-height: 1.35 !important;
        font-weight: 700 !important;
        margin-top: 0 !important;
        margin-bottom: 12px !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        white-space: normal !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .hero p { font-size: 0.95rem !important; line-height: 1.4 !important; }
    .hero-logo { max-width: 150px !important; }

    /* ============================================================
       🚨 3. UNIFIED ARABIC HERO FIX: BIGGER CAPACITY, CLEAN & LESS BOLD 🚨
       ============================================================ */
    /* Dynamically targets the index hero (h2) and all property heroes (h1) */
    html[lang="ar"] .hero h2,
    html[lang="ar"] .hero-content h2,
    html[lang="ar"] body main section:first-of-type h1,
    html[lang="ar"] body main h1,
    html[lang="ar"] .hero-search h1,
    html[lang="ar"] .city-hero h1,
    html[lang="ar"] .properties-hero h1,
    html[lang="ar"] .page-hero h1,
    html[lang="ar"] .city-title {
        font-size: 2.6rem !important;  /* Maximized layout size for ultimate visibility */
        font-weight: 600 !important;   /* Fixed: Semi-bold weight class for a clean, non-heavy texture */
        line-height: 1.3 !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* 4. PREMIUM LEGIBILITY BUTTONS */
    .cta-button, .social-btn, .search-bar button, .glass-btn, .star-btn, 
    .whatsapp-btn, .facebook-btn, .instagram-btn, .maps-btn, .city-btn,
    .social-glass-btn, .whatsapp-shine-btn, .return-btn {
        padding: 12px 18px !important; 
        font-size: 0.92rem !important; 
        border-radius: 6px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    .hero-buttons .cta-button { 
        width: 95% !important; 
        max-width: 240px !important; 
    }

    /* 5. OVERRIDE DESKTOP 16:9 FOR TEXT BOXES */
    .about-box, .description-box { 
        aspect-ratio: auto !important; 
        height: auto !important;
        width: 100% !important;
        margin: 0 auto 30px auto !important; 
        padding: 30px 15px !important; 
        box-sizing: border-box !important;
    }
    
    .about-box p { 
        font-size: 0.95rem !important; 
        line-height: 1.6 !important; 
        text-align: center !important;
    }

    /* ============================================================
       🚨 PRESERVED: ORIGINAL ABSOLUTE HOME SHOWCASE SPEC BUTTONS 🚨
       ============================================================ */
    .property-showcase-box { 
        aspect-ratio: auto !important;
        height: 220px !important; 
        width: 100% !important;
        padding: 20px !important;
        margin: 0 auto 140px auto !important; 
        box-sizing: border-box !important;
        overflow: visible !important;   
    }
    
    .showcase-buttons { 
        position: absolute !important; 
        bottom: -110px !important; 
        left: 0 !important;
        display: grid !important; 
        grid-template-columns: 1fr 1fr !important; 
        gap: 8px !important;
        width: 100% !important;
    }

    /* ============================================================
       🚨 PREMIUM READABILITY: ENHANCED GRID CARD VISIBILITY 🚨
       ============================================================ */
    .grid-container, #city-properties-container, #results-container {
        grid-template-columns: 1fr !important; 
        gap: 25px !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .property-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .card-title-text {
        font-size: 1.25rem !important; 
        line-height: 1.4 !important;
        font-weight: 700 !important;
        margin-bottom: 10px !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        white-space: normal !important;
    }

    .card-location-text {
        font-size: 1rem !important; 
        line-height: 1.4 !important;
        margin-bottom: 14px !important;
        word-wrap: break-word !important;
        white-space: normal !important;
    }

    .card-details-row {
        font-size: 1rem !important; 
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
        flex-wrap: wrap !important;
    }

    .price-badge-top {
        font-size: 0.95rem !important;
        padding: 6px 14px !important;
    }

    /* ============================================================
       🚨 PREMIUM READABILITY: SINGLE PROPERTY VIEWPORT 🚨
       ============================================================ */
    #detail-title {
        font-size: 1.65rem !important; 
        line-height: 1.4 !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        white-space: normal !important;
    }

    .property-gallery { height: 280px !important; }
    #detail-desc { font-size: 1rem !important; line-height: 1.6 !important; word-wrap: break-word !important; word-break: break-word !important; }
    .property-details-card div[style*="display: flex"] { gap: 15px 20px !important; }
    .property-details-card h3 { font-size: 1.25rem !important; }
    .property-details-card p { font-size: 0.88rem !important; }
    .location-container { font-size: 0.95rem !important; flex-wrap: wrap !important; }
}