/* Mobile Visual Fixes for codpostal.info */

/* Fix 1: Ultra-compact header for mobile */
@media only screen and (max-width: 767px) {
    /* Minimal header wrapper */
    #top-wrapper {
        padding: 0.3rem 0.5rem !important;
    }
    
    /* Keep logo and search in column for better mobile layout */
    .header-flex-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important; /* Remove gap to control spacing with margins */
        padding: 0 !important;
    }
    
    /* Compact logo centered */
    .header-title {
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        line-height: 1 !important;
    }
    
    #logo {
        font-size: 0.9rem !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        display: inline-block !important;
    }
    
    /* Remove padding from logo link */
    .header-title a {
        padding: 0 !important;
        margin: 0 !important;
        display: inline-block !important;
        line-height: 1 !important;
        min-height: 0 !important;
        height: auto !important;
    }
    
    /* Full width search container */
    .header-search-container {
        width: 100% !important;
        margin: 0 !important;
        margin-top: 5px !important; /* Same spacing as between fields */
        padding: 0 !important;
    }
    
    .search-boxes-inline {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        gap: 0 !important; /* No gap between inputs */
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .search-box-header {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
    }
    
    /* Remove ALL spacing from autoc-container */
    .search-box-header .autoc-container {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
    }
    
    /* Make inputs close together with slightly larger gap */
    .search-box-header + .search-box-header {
        margin-top: 8px !important; /* Reasonable gap between fields */
    }
    
    .search-input-header {
        border-radius: 4px !important; /* All inputs have rounded corners */
    }
    
    /* Override ALL spacing from cls-fixes.css and mobile-optimization.css */
    .autoc-container,
    .search-box-header .autoc-container,
    .search-boxes-inline .autoc-container,
    #top-wrapper .autoc-container {
        margin: 0 !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: 26px !important; /* Force container to match input height */
        line-height: 0 !important;
        overflow: visible !important;
    }
    
    .search-input-header {
        font-size: 13px !important; /* Very small font */
        height: 26px !important; /* Ultra compact */
        padding: 0.1rem 0.3rem !important; /* Minimal padding */
        width: 100% !important;
        box-sizing: border-box;
        margin: 0 !important; /* Remove all margins */
        border-width: 1px !important;
        line-height: 1 !important;
    }
    
    /* Better contrast for placeholders on mobile */
    .search-input-header::placeholder {
        color: rgba(255, 255, 255, 0.85);
        font-size: 11px !important;
    }
    
    /* Reduce overall header search container padding */
    .header-search-container {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Reduce gap after header */
    .darkblue {
        margin-bottom: 0 !important;
    }
    
    /* Override tap target minimum heights for header only */
    #top-wrapper a {
        min-height: 0 !important;
    }
}

/* Fix 2: Improve footer link spacing for easier tapping */
@media only screen and (max-width: 767px) {
    .footer-links {
        gap: 8px;
        padding: 10px 0;
    }
    
    .footer-links a {
        padding: 8px 12px !important;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px !important;
        margin: 4px 2px;
    }
}

/* Fix 3: Better sponsored link layout on mobile */
@media only screen and (max-width: 767px) {
    .sponsored-link {
        margin: 0.5rem 0;
        font-size: 12px;
    }
    
    .sponsored-text-full {
        display: none;
    }
    
    .sponsored-text-short {
        display: inline;
    }
}

@media only screen and (min-width: 768px) {
    .sponsored-text-full {
        display: inline;
    }
    
    .sponsored-text-short {
        display: none;
    }
}

/* Fix 4: Optimize map controls for mobile */
@media only screen and (max-width: 767px) {
    /* Make map zoom controls larger */
    .gm-control-active {
        min-width: 44px !important;
        min-height: 44px !important;
    }
    
    /* Ensure map is properly sized on mobile */
    .iframe-rwd {
        padding-bottom: 66.66%; /* 3:2 aspect ratio for mobile */
        margin: 15px 0;
    }
}

/* Fix 5: Even more compact on very small screens */
@media only screen and (max-width: 480px) {
    /* Ultra minimal padding */
    #top-wrapper {
        padding: 0.2rem 0.3rem !important;
    }
    
    #logo {
        font-size: 0.85rem !important;
    }
    
    .search-input-header {
        height: 24px !important;
        font-size: 12px !important;
        padding: 0.1rem 0.25rem !important;
    }
    
    .search-input-header::placeholder {
        font-size: 10px !important;
    }
}

/* Fix 6: Ensure postal code and copy button stay inline on mobile */
@media only screen and (max-width: 767px) {
    .street-info {
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .postal-code {
        display: inline !important;
        white-space: nowrap !important;
        margin: 0 4px;
        padding: 2px 6px !important;
        background-color: rgba(52, 152, 219, 0.1);
        border-radius: 3px;
        font-weight: 600;
        font-family: "Courier New", monospace;
    }
    
    .copy-btn {
        display: inline-flex !important;
        vertical-align: middle !important;
        margin-left: 6px !important;
        width: auto !important;
        height: auto !important;
        padding: 2px !important;
    }
    
    /* Force inline display for postal code container if it exists */
    .postal-code-container {
        display: inline !important;
        white-space: nowrap !important;
    }
}

/* Fix 7: Improve overall spacing and padding on mobile */
@media only screen and (max-width: 767px) {
    .grid-container {
        padding: 0 10px;
    }
    
    section {
        padding: 15px 10px;
    }
    
    h1 {
        font-size: 1.5rem;
        line-height: 1.3;
        margin-bottom: 1rem;
    }
    
    .paragraph-content {
        padding: 10px 0;
    }
}

/* Fix 8: Better autocomplete dropdown on mobile */
@media only screen and (max-width: 767px) {
    .ui-autocomplete {
        max-height: 60vh !important;
        width: calc(100% - 20px) !important;
        left: 10px !important;
        right: 10px !important;
    }
    
    .ui-menu-item {
        padding: 12px 15px !important;
        font-size: 16px !important;
        border-bottom: 1px solid #eee;
    }
    
    .ui-menu-item:last-child {
        border-bottom: none;
    }
}

/* Fix 9: Improve back button visibility */
@media only screen and (max-width: 767px) {
    .back-link a {
        padding: 10px 20px;
        font-size: 14px;
        display: inline-block;
        margin-bottom: 15px;
    }
}

/* Fix 10: Better street list layout on mobile */
@media only screen and (max-width: 767px) {
    .street-list li {
        border-bottom: 1px solid #e5e5e5;
        margin: 0;
    }
    
    .street-list li:last-child {
        border-bottom: none;
    }
    
    .street-link {
        padding: 12px 10px;
        display: block;
        font-size: 16px;
    }
}