/**
 * EmeFa - Mobile Optimizations
 * Complément au design mobile-first principal
 * 
 * @package EmeFa
 * @since 1.0.0
 */

/* ============================================
   MOBILE ENHANCEMENTS - TOUCH OPTIMIZED
   ============================================ */
@media (max-width: 767px) {
    /* Base optimizations */
    html {
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
    }
    
    body {
        font-size: 1rem;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
    }
    
    /* Prevent horizontal scroll */
    * {
        max-width: 100%;
    }
    
    img, video, iframe {
        max-width: 100%;
        height: auto;
    }
    
    /* Typography - Mobile optimized */
    h1 {
        font-size: 2rem !important;
        line-height: 1.3;
        margin-bottom: var(--spacing-md);
    }
    
    h2 {
        font-size: 1.75rem !important;
        line-height: 1.3;
        margin-bottom: var(--spacing-md);
    }
    
    h3 {
        font-size: 1.5rem !important;
        line-height: 1.4;
        margin-bottom: var(--spacing-sm);
    }
    
    h4 {
        font-size: 1.25rem !important;
        line-height: 1.4;
    }
    
    /* ============================================
       SINGLE LISTING PAGE - MOBILE
       ============================================ */
    .single-listing-header {
        padding-bottom: var(--spacing-lg);
        margin-bottom: var(--spacing-xl);
    }
    
    .listing-title {
        font-size: 1.75rem !important;
        line-height: 1.3;
        margin-bottom: var(--spacing-md);
    }
    
    .listing-price-header {
        text-align: left;
        margin-top: var(--spacing-lg);
    }
    
    .listing-price-header > div {
        font-size: 2rem !important;
    }
    
    .listing-meta {
        gap: var(--spacing-sm);
        font-size: 0.95rem;
        flex-wrap: wrap;
    }
    
    .listing-type-badge,
    .availability-badge {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
    
    .listing-content-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-xl);
    }
    
    .listing-description-section h2,
    .listing-details-section h2,
    .listing-map-section h2,
    .reviews-section h2,
    .review-form-section h2,
    .listing-videos-section h2 {
        font-size: 1.5rem !important;
        margin-bottom: var(--spacing-lg);
        padding-bottom: var(--spacing-sm);
    }
    
    .listing-content {
        font-size: 1rem;
        line-height: 1.7;
    }
    
    .details-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-md);
    }
    
    .detail-item {
        padding: var(--spacing-md) 0;
    }
    
    .detail-item > div:first-child {
        font-size: 0.95rem;
    }
    
    .detail-item > div:last-child {
        font-size: 1.125rem;
    }
    
    .listing-sidebar {
        order: -1;
        margin-bottom: var(--spacing-xl);
    }
    
    .listing-price-card {
        padding: var(--spacing-xl) !important;
        border-radius: var(--radius-2xl);
    }
    
    .listing-price-card > div {
        font-size: 2.5rem !important;
    }
    
    .listing-sidebar-actions .btn {
        font-size: 1rem;
        padding: var(--spacing-md) var(--spacing-lg);
        width: 100%;
    }
    
    .listing-author-card h3 {
        font-size: 1.25rem;
    }
    
    /* ============================================
       MAP - MOBILE FULL WIDTH
       ============================================ */
    .listing-map-section {
        margin-left: calc(-1 * var(--spacing-md));
        margin-right: calc(-1 * var(--spacing-md));
        padding: 0;
        width: calc(100% + 2 * var(--spacing-md));
        max-width: 100vw;
    }
    
    .listing-map-section .container {
        padding: 0;
        max-width: 100%;
        margin: 0;
    }
    
    .emefa-map-container,
    #listing-map,
    #listings-map {
        height: 400px !important;
        width: 100% !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
    
    .listing-map-section h2 {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
        font-size: 1.5rem;
        margin-bottom: var(--spacing-md);
    }
    
    #listings-map-container {
        margin-left: calc(-1 * var(--spacing-md));
        margin-right: calc(-1 * var(--spacing-md));
        padding: 0;
        width: calc(100% + 2 * var(--spacing-md));
    }
    
    /* ============================================
       LISTING CARDS - MOBILE OPTIMIZED
       ============================================ */
    .listing-card {
        margin-bottom: var(--spacing-lg);
    }
    
    .listing-card-image-wrapper {
        height: 240px !important;
    }
    
    .listing-card-title {
        font-size: 1.125rem !important;
        line-height: 1.4;
        margin-bottom: var(--spacing-sm);
    }
    
    .listing-card-price {
        font-size: 1.5rem !important;
        margin-bottom: var(--spacing-sm);
    }
    
    .listing-card-location {
        font-size: 0.9rem !important;
        margin-bottom: var(--spacing-xs);
    }
    
    .listing-card-meta {
        font-size: 0.875rem;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .listing-card-content {
        padding: var(--spacing-md);
    }
    
    .favorite-toggle {
        width: 44px !important;
        height: 44px !important;
        top: var(--spacing-md);
        left: var(--spacing-md);
    }
    
    /* ============================================
       FILTERS - MOBILE FRIENDLY
       ============================================ */
    .filters-section {
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-xl);
        background: var(--color-light);
        border-radius: var(--radius-xl);
    }
    
    .filters-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-md);
    }
    
    .form-group label {
        font-size: 1rem;
        margin-bottom: var(--spacing-sm);
    }
    
    .form-control {
        font-size: 1rem;
        padding: 0.875rem 1.25rem;
        min-height: 48px;
    }
    
    .filters-actions {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .filters-actions .btn {
        width: 100%;
        font-size: 1rem;
        min-height: 48px;
    }
    
    /* ============================================
       BUTTONS - TOUCH TARGETS
       ============================================ */
    .btn {
        font-size: 1rem;
        padding: 0.875rem 1.75rem;
        min-height: 48px;
        touch-action: manipulation;
    }
    
    .btn-primary,
    .btn-secondary {
        font-size: 1rem;
    }
    
    /* ============================================
       FORMS - MOBILE OPTIMIZED
       ============================================ */
    .form-group {
        margin-bottom: var(--spacing-lg);
    }
    
    .form-group label {
        font-size: 1rem;
        margin-bottom: var(--spacing-sm);
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    textarea,
    select {
        font-size: 1rem !important;
        padding: 0.875rem 1.25rem !important;
        min-height: 48px;
        -webkit-appearance: none;
        border-radius: var(--radius-lg);
    }
    
    /* Checkbox mobile */
    .price-negotiable-checkbox,
    input[type="checkbox"][name="price_negotiable"] {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
    
    .custom-checkbox {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
    
    .price-negotiable-label {
        font-size: 1.05rem;
        padding: var(--spacing-sm) 0;
    }
    
    /* ============================================
       DASHBOARD - MOBILE
       ============================================ */
    .emefa-user-dashboard h1 {
        font-size: 1.75rem !important;
        margin-bottom: var(--spacing-lg);
    }
    
    .dashboard-nav {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-lg);
    }
    
    .dashboard-nav a {
        font-size: 0.95rem;
        padding: var(--spacing-md) var(--spacing-lg);
        flex: 1;
        min-width: calc(50% - var(--spacing-sm));
        text-align: center;
        min-height: 48px;
    }
    
    /* ============================================
       MESSAGES - MOBILE
       ============================================ */
    .messages-container {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-lg);
    }
    
    .conversations-list {
        max-height: 300px;
        margin-bottom: var(--spacing-lg);
    }
    
    .conversation-item {
        padding: var(--spacing-md);
        font-size: 1rem;
    }
    
    .message-item {
        font-size: 1rem;
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    .delete-message-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.875rem;
        opacity: 0.8;
    }
    
    /* ============================================
       GALLERY - MOBILE GRID
       ============================================ */
    .listing-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-md);
    }
    
    .gallery-item img {
        height: 180px;
        border-radius: var(--radius-lg);
    }
    
    /* ============================================
       REVIEWS - MOBILE
       ============================================ */
    .review-item {
        padding: var(--spacing-lg);
        border-radius: var(--radius-xl);
    }
    
    .review-author {
        font-size: 1.05rem;
    }
    
    .review-comment {
        font-size: 1rem;
    }
    
    .rating-input label {
        font-size: 2.25rem;
    }
    
    /* ============================================
       BREADCRUMB - MOBILE
       ============================================ */
    .listing-breadcrumb {
        font-size: 0.9rem;
        margin-bottom: var(--spacing-lg);
        flex-wrap: wrap;
    }
    
    /* ============================================
       SPACING - MOBILE OPTIMIZED
       ============================================ */
    section {
        margin-bottom: var(--spacing-xl);
        padding: var(--spacing-lg) 0;
    }
    
    .listing-description-section,
    .listing-details-section,
    .listing-map-section,
    .reviews-section,
    .review-form-section {
        margin-bottom: var(--spacing-xl);
        padding: 0 var(--spacing-md);
    }
    
    /* ============================================
       PAGINATION - MOBILE
       ============================================ */
    .pagination {
        font-size: 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        justify-content: center;
    }
    
    .pagination a,
    .pagination span {
        padding: var(--spacing-md) var(--spacing-lg);
        min-height: 48px;
        min-width: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-lg);
    }
    
    /* ============================================
       ALERTS - MOBILE
       ============================================ */
    .alert {
        font-size: 1rem;
        padding: var(--spacing-lg);
        line-height: 1.6;
        border-radius: var(--radius-xl);
    }
    
    /* ============================================
       REMOVE HOVER EFFECTS ON TOUCH DEVICES
       ============================================ */
    @media (hover: none) {
        .listing-card:hover {
            transform: none !important;
        }
        
        .listing-card:hover .listing-card-image {
            transform: none !important;
        }
        
        .btn:hover {
            transform: none !important;
        }
    }
    
    /* ============================================
       UTILITY OVERRIDES - MOBILE
       ============================================ */
    .text-large {
        font-size: 1.125rem !important;
    }
    
    .text-xl {
        font-size: 1.375rem !important;
    }
    
    .text-2xl {
        font-size: 1.625rem !important;
    }
    
    .text-3xl {
        font-size: 1.875rem !important;
    }
}

/* ============================================
   VERY SMALL MOBILE (320px - 480px)
   ============================================ */
@media (max-width: 480px) {
    html {
        font-size: 15px;
    }
    
    body {
        font-size: 0.95rem;
    }
    
    .listing-title {
        font-size: 1.5rem !important;
    }
    
    .listing-price-header > div {
        font-size: 1.75rem !important;
    }
    
    .listing-price-card > div {
        font-size: 2rem !important;
    }
    
    .emefa-map-container,
    #listing-map,
    #listings-map {
        height: 350px !important;
    }
    
    .btn {
        font-size: 0.95rem;
        padding: 0.75rem 1.5rem;
    }
    
    h1 {
        font-size: 1.75rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    .hero-title {
        font-size: 1.75rem !important;
    }
    
    .hero-stat .stat-number {
        font-size: 1.75rem !important;
    }
    
    .section-title {
        font-size: 1.5rem !important;
    }
    
    .footer-links-row {
        gap: var(--spacing-md);
    }
}

/* ============================================
   CONTAINER OVERFLOW FIX
   ============================================ */
@media (max-width: 767px) {
    .container {
        overflow-x: hidden;
    }
    
    body {
        overflow-x: hidden;
        width: 100%;
    }
    
    .listing-map-section,
    #listings-map-container {
        width: calc(100% + 2 * var(--spacing-md));
        margin-left: calc(-1 * var(--spacing-md));
        margin-right: calc(-1 * var(--spacing-md));
    }
}