@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.ewdlgswx1m.bundle.scp.css';

/* /Components/App.razor.rz.scp.css */
/**
 * App Root - Scoped Styles
 * HTML root component - minimal global overrides
 */

/* Dark mode enforced */
[b-qc2gsf68n6] html {
    background: var(--fishart-bg-dark);
    color: var(--fishart-text-primary-dark);
}

/* Smooth scrolling */
[b-qc2gsf68n6] html {
    scroll-behavior: smooth;
}

/* Font smoothing */
[b-qc2gsf68n6] body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/**
 * MainLayout Component - Scoped CSS
 * Main application layout structure
 */

/* Page wrapper - scoped to MainLayout */
.page-wrapper[b-lvxubfpaps] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Page header */
.page-header[b-lvxubfpaps] {
    background: var(--fishart-bg-dark);
    border-bottom: 1px solid var(--fishart-surface-dark-alt);
    padding: var(--fishart-space-4);
    position: sticky;
    top: 0;
    z-index: var(--fishart-z-sticky);
}

/* Page content area */
.page-content[b-lvxubfpaps] {
    flex: 1;
    padding: var(--fishart-space-4);
    padding-top: var(--fishart-space-2);
}

/* Page footer */
.page-footer[b-lvxubfpaps] {
    background: var(--fishart-bg-dark);
    border-top: 1px solid var(--fishart-surface-dark-alt);
    padding: var(--fishart-space-5);
    padding-bottom: max(var(--fishart-space-5), env(safe-area-inset-bottom, 20px));
    position: sticky;
    bottom: 0;
}

/* Footer gradient variant */
.page-footer-gradient[b-lvxubfpaps] {
    background: linear-gradient(180deg,
        var(--fishart-bg-dark) 0%,
        var(--fishart-forest-dark) 100%
    );
    border-top: 1px solid rgba(230, 81, 0, 0.1);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/**
 * ReconnectModal Component - Scoped CSS
 * Blazor reconnection UI overlay
 */

/* Reconnect overlay */
.reconnect-overlay[b-lu6k8ctohy] {
    position: fixed;
    inset: 0;
    z-index: var(--fishart-z-overlay);
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--fishart-space-4);
}

/* Reconnect modal container */
.reconnect-modal[b-lu6k8ctohy] {
    background: var(--fishart-surface-dark);
    border: 1px solid var(--fishart-surface-dark-alt);
    border-radius: var(--fishart-radius-xl);
    padding: var(--fishart-space-6);
    max-width: 400px;
    text-align: center;
    box-shadow: var(--fishart-shadow-2xl);
}

/* Reconnect spinner */
.reconnect-spinner[b-lu6k8ctohy] {
    margin: 0 auto var(--fishart-space-4);
    width: 48px;
    height: 48px;
    border: 4px solid var(--fishart-surface-dark-alt);
    border-top-color: var(--fishart-primary);
    border-radius: 50%;
    animation: spin-b-lu6k8ctohy 1s linear infinite;
}

@keyframes spin-b-lu6k8ctohy {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* /Components/Pages/Checkout.razor.rz.scp.css */
/**
 * Checkout Page - Scoped CSS
 * Payment options, PIX modal, and checkout flow styles
 */

/* Payment options container */
.payment-options[b-g82uz80htg] {
    display: flex;
    flex-direction: column;
    gap: var(--fishart-space-3);
    margin-bottom: var(--fishart-space-4);
}

/* Payment option cards - scoped to Checkout */
.payment-option[b-g82uz80htg] {
    /* Inherits from global but scoped to this page */
    cursor: pointer;
    transition: all var(--fishart-transition-fast);
}

.payment-option:hover[b-g82uz80htg] {
    transform: translateY(-2px);
}

/* Checkout specific layout */
.checkout-container[b-g82uz80htg] {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--fishart-space-4);
}
/* /Components/Pages/Email.razor.rz.scp.css */
/**
 * Email Page - Scoped CSS
 * Email collection page for art delivery
 */

/* Email container */
.email-container[b-c8l7cqk6if] {
    max-width: 500px;
    margin: 0 auto;
    padding: var(--fishart-space-6);
}

/* Email input container */
.email-input-container[b-c8l7cqk6if] {
    position: relative;
    margin-bottom: var(--fishart-space-4);
}

/* Email form */
.email-form[b-c8l7cqk6if] {
    display: flex;
    flex-direction: column;
    gap: var(--fishart-space-4);
}

/* Email instructions */
.email-instructions[b-c8l7cqk6if] {
    text-align: center;
    margin-bottom: var(--fishart-space-6);
}

.email-instructions h2[b-c8l7cqk6if] {
    color: var(--fishart-text-primary-dark);
    margin-bottom: var(--fishart-space-3);
}

.email-instructions p[b-c8l7cqk6if] {
    color: var(--fishart-text-secondary-dark);
    font-size: 14px;
}
/* /Components/Pages/Error.razor.rz.scp.css */
/**
 * Error Page - Scoped Styles
 * Error page with icon and suggestions
 */

.error-page[b-kytcg4qrwa] {
    min-height: 100vh;
}

/* Error Icon */
.error-icon[b-kytcg4qrwa] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.1);
    border: 2px solid var(--fishart-error);
    margin-bottom: var(--fishart-space-4);
}

.error-icon::deep svg[b-kytcg4qrwa] {
    width: 48px;
    height: 48px;
}

@media (min-width: 640px) {
    .error-icon[b-kytcg4qrwa] {
        width: 100px;
        height: 100px;
    }

    .error-icon::deep svg[b-kytcg4qrwa] {
        width: 64px;
        height: 64px;
    }
}
/* /Components/Pages/Generating.razor.rz.scp.css */
/**
 * Generating/Results Page - Scoped CSS
 * Art generation progress, preview card, and results grid
 */

/* Preview section - specific to Generating page */
.generating-preview-section[b-uz6uya3px7] {
    margin-bottom: var(--fishart-space-5);
}

.generating-preview-card[b-uz6uya3px7] {
    background: var(--fishart-surface-dark);
    border: 1px solid var(--fishart-surface-dark-alt);
    border-radius: var(--fishart-radius-xl);
    overflow: hidden;
    box-shadow: var(--fishart-shadow-card);
}

/* Gallery section */
.generating-gallery-section[b-uz6uya3px7] {
    margin-bottom: var(--fishart-space-4);
}

.generating-gallery-header[b-uz6uya3px7] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--fishart-space-3);
    padding-bottom: var(--fishart-space-3);
    border-bottom: 1px dashed var(--fishart-surface-dark-alt);
}

/* Arts grid - scoped to Generating page */
.generating-arts-grid[b-uz6uya3px7] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--fishart-space-3);
}

@media (min-width: 640px) {
    .generating-arts-grid[b-uz6uya3px7] {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--fishart-space-4);
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/**
 * Home Page - Scoped CSS
 * Upload area and tip box styles specific to Home page
 */

/* Upload Area - Home specific overrides */
.upload-area-proto[b-fulk94glhs] {
    /* Inherits from global design-system.css */
    /* Page-specific adjustments can be added here */
}

/* Tip Box - Home specific styling */
.tip-box[b-fulk94glhs] {
    /* Inherits from components/cards.css */
    /* Home page specific tip box styling */
    margin-bottom: var(--fishart-space-4);
}

/* Home page specific layout adjustments */
.home-container[b-fulk94glhs] {
    max-width: 100%;
    padding: var(--fishart-space-4);
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
/**
 * NotFound Page - Scoped Styles
 * 404 error page with fish illustration
 */

.not-found-page[b-9q6s5mrowu] {
    min-height: 100vh;
}

/* 404 Illustration */
.not-found-illustration[b-9q6s5mrowu] {
    margin-bottom: var(--fishart-space-6);
}

.not-found-number[b-9q6s5mrowu] {
    font-size: 120px;
    font-weight: 900;
    color: var(--fishart-text-muted-dark);
    opacity: 0.2;
    line-height: 1;
    display: block;
}

.not-found-fish[b-9q6s5mrowu] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    animation: fishJump 3s ease-in-out infinite;
}

@media (min-width: 640px) {
    .not-found-number[b-9q6s5mrowu] {
        font-size: 160px;
    }

    .not-found-fish[b-9q6s5mrowu] {
        font-size: 64px;
    }
}
/* /Components/Pages/Success.razor.rz.scp.css */
/**
 * Success Page - Scoped CSS
 * Success confirmation page after art generation
 */

/* Success container */
.success-container[b-sthn3jee6i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: var(--fishart-space-6);
}

/* Success circle icon */
.success-circle[b-sthn3jee6i] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--fishart-gradient-success);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--fishart-space-6);
    box-shadow: var(--fishart-shadow-glow-green);
    animation: celebrate-b-sthn3jee6i var(--fishart-transition-bounce);
}

@keyframes celebrate-b-sthn3jee6i {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        transform: scale(1.15);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Success message */
.success-message[b-sthn3jee6i] {
    margin-bottom: var(--fishart-space-6);
}

.success-message h1[b-sthn3jee6i] {
    color: var(--fishart-text-primary-dark);
    margin-bottom: var(--fishart-space-3);
}

.success-message p[b-sthn3jee6i] {
    color: var(--fishart-text-secondary-dark);
    font-size: 16px;
}
/* /Components/Routes.razor.rz.scp.css */
/**
 * Routes Component - Scoped Styles
 * Router component - no visual styles needed
 */

/* No component-specific styles - Routes is a logical component only */
/* /Components/Shared/ArtCard.razor.rz.scp.css */
/**
 * ArtCard Component - Scoped CSS
 * Reusable art card component with locked state and badges
 */

/* Main art card container - scoped */
.art-card[b-ed50jfud78] {
    /* Inherits from components/cards.css but scoped to this component */
    /* Component-specific overrides can be added here */
}

/* Ensure card styles don't leak to other components */
.art-card-image-container[b-ed50jfud78] {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}

.art-card-lock-icon[b-ed50jfud78] {
    /* Scoped lock icon styling */
    z-index: 10;
}
/* /Components/Shared/ArtPreviewModal.razor.rz.scp.css */
/**
 * ArtPreviewModal Component - Scoped CSS
 * Modal for previewing generated art in fullscreen
 */

/* Modal overlay - scoped to prevent conflicts */
.art-preview-modal[b-m8ggu7zz5d] {
    position: fixed;
    inset: 0;
    z-index: var(--fishart-z-modal);
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--fishart-space-4);
}

/* Modal content container */
.art-preview-content[b-m8ggu7zz5d] {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    background: var(--fishart-surface-dark);
    border-radius: var(--fishart-radius-xl);
    overflow: hidden;
    box-shadow: var(--fishart-shadow-2xl);
}

/* Close button */
.art-preview-close[b-m8ggu7zz5d] {
    position: absolute;
    top: var(--fishart-space-4);
    right: var(--fishart-space-4);
    z-index: 10;
    cursor: pointer;
}
/* /Components/Shared/ProcessingModal.razor.rz.scp.css */
/**
 * ProcessingModal Component - Scoped CSS
 * Full-screen processing overlay with animations
 */

/* Processing overlay - scoped */
.processing-overlay[b-sie10ut4pt] {
    position: fixed;
    inset: 0;
    z-index: var(--fishart-z-overlay);
    background: var(--fishart-deep-pond);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Processing animation container */
.processing-animation[b-sie10ut4pt] {
    position: relative;
    width: 192px;
    height: 192px;
    margin-bottom: var(--fishart-space-8);
}

/* Reel circle animation */
.reel-circle[b-sie10ut4pt] {
    position: absolute;
    inset: 0;
    border: 4px dashed var(--fishart-surface-dark-alt);
    border-radius: 50%;
    animation: reelSpin-b-sie10ut4pt 3s linear infinite;
}

/* Fish container */
.fish-container[b-sie10ut4pt] {
    position: absolute;
    inset: 16px;
    background: var(--fishart-forest-dark);
    border: 1px solid var(--fishart-surface-dark-alt);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: var(--fishart-shadow-2xl);
}

@keyframes reelSpin-b-sie10ut4pt {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}