/* Mobile-specific styles for Background Remover Tool */

@media screen and (max-width: 768px) {
    body, html {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }
    
    .container {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }
    
    /* Fix for the tool interface on mobile */
    .tool-container {
        width: 100%;
        padding: 10px;
        margin: 0;
    }
    
    .upload-container {
        max-width: 100%;
    }
    
    .preview-container {
        flex-direction: column;
    }
    
    .original-image, .result-image {
        width: 100%;
        margin: 10px 0;
    }
    
    /* Button sizing fixes */
    .action-button {
        width: 100%;
        margin: 5px 0;
    }
    
    /* Header adjustments */
    .logo h1 {
        font-size: 1.5rem;
    }
    
    .app-title {
        font-size: 1.8rem;
        word-wrap: break-word;
    }
    
    /* Navigation adjustments */
    nav {
        flex-wrap: wrap;
    }
    
    .search-container {
        width: 100%;
        margin: 10px 0;
    }
    
    /* Icon sizing */
    .background-remover-icon {
        max-width: 100%;
        height: auto;
    }
    
    .background-remover-icon img {
        max-width: 80%;
        height: auto;
        margin: 0 auto;
        display: block;
    }
    
    /* Premium button sizing */
    .premium {
        font-size: 0.7rem;
        padding: 4px 8px;
    }
    
    /* AI Powered button sizing */
    .ai-powered {
        font-size: 0.7rem;
        padding: 4px 8px;
    }
}

/* For very small devices */
@media screen and (max-width: 375px) {
    .app-title {
        font-size: 1.5rem;
    }
    
    .action-button {
        font-size: 0.9rem;
        padding: 8px 10px;
    }
}