/* Responsive styles for app */
/* Generated: 2025-10-13 16:45:24 */

/* NavBar - NavBar */
@media (max-width: 480px) {
    #NavBar {
        flex-direction: column;
        justify-content: center;
        padding: 16px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    #NavBar {
        flex-direction: row;
        justify-content: space-around;
        padding: 24px;
    }
}

@media (min-width: 769px) {
    #NavBar {
        flex-direction: row;
        justify-content: space-between;
        padding: 32px;
    }
}

/* HeroSection - HeroSection */
@media (max-width: 480px) {
    #HeroSection {
        justify-content: center;
        padding: 48px 16px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    #HeroSection {
        justify-content: center;
        padding: 64px 24px;
    }
}

@media (min-width: 769px) {
    #HeroSection {
        justify-content: flex-start;
        padding: 96px 64px;
    }
}

/* UploadControls - UploadControls */
@media (max-width: 480px) {
    #UploadControls {
        justify-content: center;
        padding: 16px;
        display: flex;
        gap: 12px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    #UploadControls {
        justify-content: center;
        padding: 24px;
        display: flex;
        gap: 16px;
    }
}

@media (min-width: 769px) {
    #UploadControls {
        justify-content: flex-start;
        padding: 32px 96px;
        display: flex;
        gap: 24px;
    }
}

/* CategoryFeatureGrid - CategoryFeatureGrid */
@media (max-width: 480px) {
    #CategoryFeatureGrid {
        padding: 24px;
        display: flex;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    #CategoryFeatureGrid {
        padding: 32px;
        display: flex;
    }
}

@media (min-width: 769px) {
    #CategoryFeatureGrid {
        padding: 48px 96px;
        display: flex;
    }
}

/* FeatureGrid - FeatureGrid */
@media (max-width: 480px) {
    #FeatureGrid {
        padding: 24px;
        gap: 16px;
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    #FeatureGrid {
        padding: 32px;
        gap: 24px;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 769px) {
    #FeatureGrid {
        padding: 64px 128px;
        gap: 32px;
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ProductsGrid - ProductsGrid */
@media (max-width: 480px) {
    #ProductsGrid {
        padding: 24px;
        display: flex;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    #ProductsGrid {
        padding: 32px;
        display: flex;
    }
}

@media (min-width: 769px) {
    #ProductsGrid {
        padding: 64px 128px;
        display: flex;
    }
}

/* CTASection - CTASection */
@media (max-width: 480px) {
    #CTASection {
        justify-content: center;
        padding: 32px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    #CTASection {
        justify-content: center;
        padding: 48px;
    }
}

@media (min-width: 769px) {
    #CTASection {
        justify-content: flex-start;
        padding: 64px 128px;
    }
}

/* PricingSection - PricingSection */
@media (max-width: 480px) {
    #PricingSection {
        padding: 24px;
        gap: 16px;
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    #PricingSection {
        padding: 32px;
        gap: 24px;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 769px) {
    #PricingSection {
        padding: 64px 128px;
        gap: 32px;
        grid-template-columns: repeat(3, 1fr);
    }
}

/* TestimonialSection - TestimonialSection */
@media (max-width: 480px) {
    #TestimonialSection {
        padding: 24px;
        display: flex;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    #TestimonialSection {
        padding: 32px;
        display: flex;
    }
}

@media (min-width: 769px) {
    #TestimonialSection {
        padding: 64px 128px;
        display: flex;
    }
}

/* FAQSection - FAQSection */
@media (max-width: 480px) {
    #FAQSection {
        padding: 24px;
        flex: 1;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    #FAQSection {
        padding: 32px;
        flex: 1 1 auto;
    }
}

@media (min-width: 769px) {
    #FAQSection {
        padding: 64px 128px;
        flex: 1 1 auto;
    }
}

/* Form - ContactForm */
@media (max-width: 480px) {
    #ContactForm {
        padding: 24px;
        display: flex;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    #ContactForm {
        padding: 32px;
        display: flex;
    }
}

@media (min-width: 769px) {
    #ContactForm {
        padding: 64px 128px;
        display: flex;
    }
}

/* FooterSection - FooterSection */
@media (max-width: 480px) {
    #FooterSection {
        flex-direction: column;
        justify-content: center;
        padding: 24px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    #FooterSection {
        flex-direction: row;
        justify-content: space-around;
        padding: 32px;
    }
}

@media (min-width: 769px) {
    #FooterSection {
        flex-direction: row;
        justify-content: space-between;
        padding: 48px 128px;
    }
}

/* processing */

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@keyframes brickFill { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

.brick-container {
    display: flex; gap: 2px; height: 20px;
    border-radius: 4px; overflow: hidden;
    background-color: #f3f4f6;
}
.brick {
    flex: 1; background-color: #e5e7eb;
    position: relative; overflow: hidden;
    transition: background-color 0.3s ease;
}
.brick.active { background-color: #3b82f6; }
.brick.active .brick-fill {
    position: absolute; top: 0; left: 0;
    height: 100%; width: 100%;
    background-color: #1d4ed8;
    transform-origin: left;
    animation: brickFill 0.5s ease-out forwards;
}
.brick.pulse { animation: pulse 1.5s infinite; }
.status-dot {
    display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; margin-right: 8px;
}
.status-processing { background-color: #3b82f6; animation: pulse 1.5s infinite; }
.status-complete { background-color: #10b981; }
.status-error { background-color: #ef4444; }