/* OSHIFIED Mobile Optimizations */

/* Fullscreen Modal on Mobile */
@media (max-width: 768px) {
    .modal-content {
        max-width: 100%;
        width: 100%;
        height: 100%;
        border-radius: 0;
        padding: 3rem 2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* Touch-Optimized Buttons */
@media (max-width: 768px) {
    /* Minimum 44px tap targets */
    .preset-item {
        min-height: 44px;
    }

    .toggle-button {
        min-height: 44px;
        font-size: 1rem;
    }

    .step-button {
        min-height: 44px;
        padding: 1rem 1.25rem;
    }

    /* Larger upload areas for easier tapping */
    .upload-area {
        padding: 2.5rem 1.5rem;
        min-height: 200px;
    }

    .upload-icon {
        width: 60px;
        height: 60px;
    }

    /* Bigger generate button */
    .generate-button {
        padding: 1.75rem;
        font-size: 1.75rem;
        min-height: 70px;
    }
}

/* Mobile Navigation Adjustments */
@media (max-width: 768px) {
    .step-navigation {
        padding: 1.25rem 1rem;
        gap: 0.75rem;
        width: 100%;
        left: 0;
        transform: none;
        max-width: none;
    }

    .step-button {
        flex: 1;
        justify-content: center;
    }

    .step-button span {
        font-size: 0.9rem;
    }

    .step-button svg {
        width: 16px;
        height: 16px;
    }
}

/* Mobile Preset Gallery */
@media (max-width: 768px) {
    .preset-gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .preset-placeholder {
        font-size: 0.65rem;
        padding: 0.25rem;
    }

    .preset-name {
        font-size: 0.55rem;
        padding: 0.35rem 0.2rem;
    }

    .gallery-attribution {
        font-size: 0.7rem;
        margin-top: 0.75rem;
    }

    .presets-divider {
        font-size: 0.85rem;
        margin: 1.25rem 0 0.75rem 0;
    }
}

/* Mobile Header Adjustments */
@media (max-width: 768px) {
    .app-header {
        padding: 1rem;
    }

    .back-button {
        font-size: 0.9rem;
    }

    .back-button svg {
        width: 18px;
        height: 18px;
    }
}

/* Mobile Section Spacing */
@media (max-width: 768px) {
    .app-container {
        padding-bottom: 100px; /* Extra space for fixed navigation */
    }

    .section-header {
        margin-bottom: 1rem;
    }

    .section-icon {
        font-size: 1.75rem;
    }

    /* Adjust section heights for mobile screens */
    .input-section {
        min-height: 65vh;
    }

    .progress-section {
        min-height: 60vh;
    }
}

/* Mobile Input Improvements */
@media (max-width: 768px) {
    .youtube-input {
        font-size: 16px; /* Prevents zoom on focus in iOS */
        padding: 1.25rem 1rem;
    }

    .section-description {
        font-size: 0.9rem;
        line-height: 1.4;
    }
}

/* Mobile Results */
@media (max-width: 768px) {
    .results-section {
        min-height: auto;
        padding: 2rem 0 4rem 0;
    }

    .results-images {
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .result-label {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }

    .result-video {
        margin: 0.75rem auto;
    }

    .result-actions {
        gap: 0.75rem;
        margin-top: 1rem;
    }

    .download-button,
    .share-button,
    .restart-button {
        padding: 1.25rem 1.5rem;
        font-size: 1rem;
    }
}