@import '_content/Blazored.Modal/Blazored.Modal.bundle.scp.css';
@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Components/Authentication/Login.razor.rz.scp.css */
/* Login Component - Minimalist Modern Design */

/* CSS Variables for consistency */
:root[b-fnn58uk2qf] {
    --brand-orange: #f08a12;
    --brand-orange-hover: #d67a0d;
    --brand-orange-light: rgba(240, 138, 18, 0.1);
    --text-primary: #1a1a1a;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --border-color: #e5e7eb;
    --background-primary: #ffffff;
    --background-secondary: #f9fafb;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Main Wrapper */
.login-wrapper[b-fnn58uk2qf] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
}

/* Header Bar */
.header-bar[b-fnn58uk2qf] {
    background: var(--brand-orange);
    padding: 1rem 0;
    box-shadow: var(--shadow-sm);
}

.header-content[b-fnn58uk2qf] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-link[b-fnn58uk2qf] {
    text-decoration: none;
    transition: opacity var(--transition-base);
}

.brand-link:hover[b-fnn58uk2qf] {
    opacity: 0.9;
}

.brand-text[b-fnn58uk2qf] {
    color: white;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.header-actions[b-fnn58uk2qf] {
    display: flex;
    gap: 1.5rem;
}

.header-link[b-fnn58uk2qf] {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: all var(--transition-base);
    position: relative;
}

.header-link:hover[b-fnn58uk2qf] {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.header-link.active[b-fnn58uk2qf] {
    color: white;
    background: rgba(255, 255, 255, 0.15);
}

.header-link.active[b-fnn58uk2qf]::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2rem;
    height: 2px;
    background: white;
    border-radius: 1px;
}

/* Login Container */
.login-container[b-fnn58uk2qf] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

/* Login Card */
.login-card[b-fnn58uk2qf] {
    background: white;
    border-radius: 1rem;
    box-shadow: var(--shadow-lg);
    padding: 2.5rem;
    width: 100%;
    max-width: 440px;
    animation: slideUp-b-fnn58uk2qf 400ms ease-out;
}

@keyframes slideUp-b-fnn58uk2qf {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Login Title */
.login-title[b-fnn58uk2qf] {
    color: var(--brand-orange);
    font-size: 1.75rem;
    font-weight: 600;
    text-align: center;
    margin: 0 0 2rem;
    letter-spacing: -0.025em;
}

/* Alert Minimal */
.alert-minimal[b-fnn58uk2qf] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    animation: slideDown-b-fnn58uk2qf 300ms ease-out;
}

@keyframes slideDown-b-fnn58uk2qf {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-close[b-fnn58uk2qf] {
    background: none;
    border: none;
    color: #dc2626;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-base);
}

.alert-close:hover[b-fnn58uk2qf] {
    opacity: 0.7;
}

/* Form Styles */
.login-form[b-fnn58uk2qf] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group[b-fnn58uk2qf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label[b-fnn58uk2qf] {
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
}

/* Input Wrapper */
.input-wrapper[b-fnn58uk2qf] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon[b-fnn58uk2qf] {
    position: absolute;
    left: 1rem;
    pointer-events: none;
    transition: all var(--transition-base);
}

.form-input[b-fnn58uk2qf] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 3rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    color: var(--text-primary);
    background: white;
    transition: all var(--transition-base);
    outline: none;
}

.form-input[b-fnn58uk2qf]::placeholder {
    color: var(--text-muted);
}

.form-input:focus[b-fnn58uk2qf] {
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 3px var(--brand-orange-light);
}

.form-input:focus ~ .input-icon path[b-fnn58uk2qf] {
    stroke: var(--brand-orange);
}

.form-input:disabled[b-fnn58uk2qf] {
    background: var(--background-secondary);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Password Toggle */
.password-toggle[b-fnn58uk2qf] {
    position: absolute;
    right: 1rem;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.password-toggle:hover:not(:disabled)[b-fnn58uk2qf] {
    color: var(--brand-orange);
}

.password-toggle:hover:not(:disabled) path[b-fnn58uk2qf] {
    stroke: var(--brand-orange);
}

.password-toggle:disabled[b-fnn58uk2qf] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Validation Message */
.validation-message[b-fnn58uk2qf] {
    color: #dc2626;
    font-size: 0.75rem;
    margin: 0;
    animation: slideIn-b-fnn58uk2qf 200ms ease-out;
}

@keyframes slideIn-b-fnn58uk2qf {
    from {
        opacity: 0;
        transform: translateX(-0.5rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Form Options */
.form-options[b-fnn58uk2qf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.5rem 0;
}

.checkbox-label[b-fnn58uk2qf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.checkbox-input[b-fnn58uk2qf] {
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all var(--transition-base);
}

.checkbox-input:checked[b-fnn58uk2qf] {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
}

.checkbox-input:focus[b-fnn58uk2qf] {
    outline: 2px solid var(--brand-orange);
    outline-offset: 2px;
}

.checkbox-text[b-fnn58uk2qf] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.forgot-link[b-fnn58uk2qf] {
    color: var(--brand-orange);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--transition-base);
}

.forgot-link:hover[b-fnn58uk2qf] {
    color: var(--brand-orange-hover);
    text-decoration: underline;
}

/* Login Button */
.btn-login[b-fnn58uk2qf] {
    background: var(--brand-orange);
    color: white;
    border: none;
    padding: 0.875rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.btn-login:hover:not(:disabled)[b-fnn58uk2qf] {
    background: var(--brand-orange-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(240, 138, 18, 0.3);
}

.btn-login:active:not(:disabled)[b-fnn58uk2qf] {
    transform: translateY(0);
}

.btn-login:disabled[b-fnn58uk2qf] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Spinner */
.spinner[b-fnn58uk2qf] {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-fnn58uk2qf 700ms linear infinite;
}

@keyframes spin-b-fnn58uk2qf {
    to {
        transform: rotate(360deg);
    }
}

/* Footer */
.login-footer[b-fnn58uk2qf] {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.login-footer p[b-fnn58uk2qf] {
    margin: 0;
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .header-content[b-fnn58uk2qf] {
        padding: 0 1rem;
    }
    
    .brand-text[b-fnn58uk2qf] {
        font-size: 1.125rem;
    }
    
    .header-actions[b-fnn58uk2qf] {
        gap: 1rem;
    }
    
    .header-link[b-fnn58uk2qf] {
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
    }
    
    .login-container[b-fnn58uk2qf] {
        padding: 2rem 1rem;
    }
    
    .login-card[b-fnn58uk2qf] {
        padding: 2rem 1.5rem;
        border-radius: 0.75rem;
    }
    
    .login-title[b-fnn58uk2qf] {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .form-input[b-fnn58uk2qf] {
        padding: 0.625rem 1rem 0.625rem 2.75rem;
        font-size: 0.875rem;
    }
    
    .btn-login[b-fnn58uk2qf] {
        padding: 0.75rem 1.25rem;
        font-size: 0.9375rem;
    }
}

/* Tablet and up */
@media (min-width: 768px) {
    .login-card[b-fnn58uk2qf] {
        padding: 3rem;
    }
    
    .login-title[b-fnn58uk2qf] {
        font-size: 2rem;
    }
}

/* Focus Visible for Accessibility */
*:focus-visible[b-fnn58uk2qf] {
    outline: 2px solid var(--brand-orange);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-fnn58uk2qf],
    *[b-fnn58uk2qf]::before,
    *[b-fnn58uk2qf]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark Mode Support (optional) */
@media (prefers-color-scheme: dark) {
    :root[b-fnn58uk2qf] {
        --background-primary: #1a1a1a;
        --background-secondary: #2a2a2a;
        --text-primary: #f9fafb;
        --text-secondary: #d1d5db;
        --border-color: #374151;
    }
    
    .login-wrapper[b-fnn58uk2qf] {
        background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    }
    
    .login-card[b-fnn58uk2qf] {
        background: #2a2a2a;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    }
    
    .form-input[b-fnn58uk2qf] {
        background: #1a1a1a;
        color: var(--text-primary);
    }
}
/* /Components/CustomFoodCreationModal.razor.rz.scp.css */
/* CustomFoodCreationModal.razor.css */
.modal-overlay[b-1yyfdrftno] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    animation: fadeIn-b-1yyfdrftno 0.2s ease-out;
}

@keyframes fadeIn-b-1yyfdrftno {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-container[b-1yyfdrftno] {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: slideUp-b-1yyfdrftno 0.3s ease-out;
}

@keyframes slideUp-b-1yyfdrftno {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-content[b-1yyfdrftno] {
    padding: 1.5rem;
}

.modal-header[b-1yyfdrftno] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #fff5e6 0%, #fff 100%);
    border-bottom: 1px solid #f0f0f0;
    border-radius: 12px 12px 0 0;
}

.modal-header h2[b-1yyfdrftno] {
    margin: 0;
    color: #2d3748;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-subtitle[b-1yyfdrftno] {
    margin: 0.25rem 0 0 0;
    color: #718096;
    font-size: 0.875rem;
    font-weight: 400;
}

.close-button[b-1yyfdrftno] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #4a5568;
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.2s;
}

.close-button:hover[b-1yyfdrftno] {
    color: #2d3748;
}

.search-results-container[b-1yyfdrftno] {
    margin-top: 0.75rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8fafb;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    animation: fadeIn-b-1yyfdrftno 0.2s ease-out;
}

.search-results-grid[b-1yyfdrftno] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.5rem;
}

.search-result-card[b-1yyfdrftno] {
    padding: 0.75rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.search-result-card:hover[b-1yyfdrftno] {
    border-color: #4299e1;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.similar-foods-grid[b-1yyfdrftno] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.similar-food-card[b-1yyfdrftno] {
    padding: 1rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.similar-food-card:hover[b-1yyfdrftno] {
    border-color: #4299e1;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.macro-info[b-1yyfdrftno] {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #4a5568;
}

/* Progress Steps */
.progress-steps[b-1yyfdrftno] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 1.5rem 2rem;
    padding: 1rem 0;
}

.step[b-1yyfdrftno] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.step.active[b-1yyfdrftno] {
    opacity: 1;
}

.step-number[b-1yyfdrftno] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #e2e8f0;
    color: #718096;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.step.active .step-number[b-1yyfdrftno] {
    background: #f08a12;
    color: white;
    box-shadow: 0 2px 4px rgba(240, 138, 18, 0.3);
}

.step-label[b-1yyfdrftno] {
    font-size: 0.75rem;
    color: #718096;
    font-weight: 500;
}

.step-connector[b-1yyfdrftno] {
    width: 4rem;
    height: 2px;
    background: #e2e8f0;
    margin: 0 0.5rem;
    margin-bottom: 1.5rem;
    transition: background 0.3s ease;
}

.step-connector.active[b-1yyfdrftno] {
    background: #f08a12;
}

/* Form Styles */
.form-section[b-1yyfdrftno] {
    padding: 0 1.5rem;
}

.form-group[b-1yyfdrftno] {
    margin-bottom: 1.5rem;
}

.form-label[b-1yyfdrftno] {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.form-label i[b-1yyfdrftno] {
    color: #f08a12;
    font-size: 1rem;
}

.required[b-1yyfdrftno] {
    color: #e53e3e;
    margin-left: 0.25rem;
}

.input-wrapper[b-1yyfdrftno] {
    position: relative;
}

/* Custom input styling for MudTextField */
[b-1yyfdrftno] .custom-input .mud-input-root {
    border-radius: 8px;
    transition: all 0.2s ease;
}

[b-1yyfdrftno] .custom-input .mud-input-root:hover {
    border-color: #f08a12;
}

[b-1yyfdrftno] .custom-input .mud-input-root.mud-input-root-outlined.Mui-focused .mud-input-outlined-border {
    border-color: #f08a12;
    border-width: 2px;
}

[b-1yyfdrftno] .custom-input .mud-input-helper-text {
    font-size: 0.75rem;
    color: #718096;
    margin-top: 0.25rem;
}

/* Action Buttons */
.modal-actions[b-1yyfdrftno] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding: 1.5rem;
    background: #f7fafc;
    margin: 2rem -1.5rem -1.5rem;
    border-radius: 0 0 12px 12px;
    border-top: 1px solid #e2e8f0;
}

.btn-cancel[b-1yyfdrftno] {
    background: none;
    border: none;
    color: #718096;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.625rem 1.5rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.btn-cancel:hover[b-1yyfdrftno] {
    color: #2d3748;
}

.btn-continue[b-1yyfdrftno] {
    background: #f08a12;
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(240, 138, 18, 0.2);
}

.btn-continue:hover:not(.disabled)[b-1yyfdrftno] {
    background: #d97910;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(240, 138, 18, 0.3);
}

.btn-continue.disabled[b-1yyfdrftno] {
    background: #cbd5e0;
    cursor: not-allowed;
    box-shadow: none;
}

@media (max-width: 640px) {
    .modal-container[b-1yyfdrftno] {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .modal-header[b-1yyfdrftno] {
        border-radius: 0;
    }
    
    .progress-steps[b-1yyfdrftno] {
        margin: 0 1rem 1.5rem;
    }
    
    .step-label[b-1yyfdrftno] {
        font-size: 0.7rem;
    }
    
    .form-section[b-1yyfdrftno] {
        padding: 0 1rem;
    }
    
    .modal-actions[b-1yyfdrftno] {
        flex-direction: column-reverse;
        gap: 0.75rem;
        padding: 1rem;
    }
    
    .btn-cancel[b-1yyfdrftno],
    .btn-continue[b-1yyfdrftno] {
        width: 100%;
        justify-content: center;
    }

    .search-results-grid[b-1yyfdrftno],
    .similar-foods-grid[b-1yyfdrftno] {
        grid-template-columns: 1fr;
    }
}

/* Unauthenticated button styles */
.custom-food-btn.unauthenticated[b-1yyfdrftno] {
    background-color: #e2e8f0;
    color: #4a5568;
    border-color: #cbd5e0;
}

.custom-food-btn.unauthenticated:hover[b-1yyfdrftno] {
    background-color: #cbd5e0;
    border-color: #a0aec0;
    color: #2d3748;
}

/* Authentication Modal Styles */
.auth-modal-container[b-1yyfdrftno] {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18);
    animation: slideUp-b-1yyfdrftno 0.3s ease-out;
}

.auth-modal-content[b-1yyfdrftno] {
    padding: 0;
}

.auth-modal-header[b-1yyfdrftno] {
    text-align: center;
    padding: 2rem 2rem 1.5rem;
    position: relative;
}

.auth-modal-header h2[b-1yyfdrftno] {
    margin: 1rem 0 0.5rem;
    color: #1a202c;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
}

.auth-modal-header .modal-close-button[b-1yyfdrftno] {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.auth-icon[b-1yyfdrftno] {
    color: #f08a12;
    font-size: 3rem !important;
}

.auth-modal-body[b-1yyfdrftno] {
    padding: 0 2rem 2rem;
}

.value-props[b-1yyfdrftno] {
    background-color: #f7fafc;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.value-prop-item[b-1yyfdrftno] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: #4a5568;
    font-size: 0.95rem;
}

.value-prop-item:last-child[b-1yyfdrftno] {
    margin-bottom: 0;
}

.value-prop-item .mud-icon-root[b-1yyfdrftno] {
    font-size: 1.25rem !important;
}

.auth-actions[b-1yyfdrftno] {
    text-align: center;
}

.auth-actions .mud-button[b-1yyfdrftno] {
    text-transform: none;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
}

.auth-actions .mud-button-filled[b-1yyfdrftno] {
    background-color: #f08a12 !important;
    box-shadow: 0 2px 4px rgba(240, 138, 18, 0.3);
}

.auth-actions .mud-button-filled:hover[b-1yyfdrftno] {
    background-color: #d97910 !important;
    box-shadow: 0 4px 8px rgba(240, 138, 18, 0.4);
}

.auth-actions .mud-button-outlined[b-1yyfdrftno] {
    border-color: #f08a12 !important;
    color: #f08a12 !important;
}

.auth-actions .mud-button-outlined:hover[b-1yyfdrftno] {
    background-color: rgba(240, 138, 18, 0.08) !important;
}

@media (max-width: 640px) {
    .auth-modal-container[b-1yyfdrftno] {
        width: 95%;
        margin: 1rem;
    }
    
    .auth-modal-header[b-1yyfdrftno] {
        padding: 1.5rem 1.5rem 1rem;
    }
    
    .auth-modal-body[b-1yyfdrftno] {
        padding: 0 1.5rem 1.5rem;
    }
}

/* Tab styling */
.mud-tabs[b-1yyfdrftno] {
    margin-bottom: 1rem;
}

.mud-tab[b-1yyfdrftno] {
    font-weight: 500;
}

/* Scan tab content styling */
.scan-tab-content[b-1yyfdrftno] {
    min-height: 400px;
}

.scan-intro[b-1yyfdrftno] {
    padding: 2rem;
}

.scan-intro h4[b-1yyfdrftno] {
    color: var(--mud-palette-text-primary);
    margin-bottom: 1rem;
}

/* Modal improvements - Override existing modal-container styles for tabs */
.modal-container[b-1yyfdrftno] {
    max-width: 900px;
    width: 90%;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
}

.modal-content[b-1yyfdrftno] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Tab panel content scrolling */
.mud-tab-panels[b-1yyfdrftno] {
    flex: 1;
    overflow-y: auto;
    max-height: calc(90vh - 220px);
    padding-bottom: 20px;
}

/* Ensure CustomProductFromImages component fits well */
.custom-product-from-images[b-1yyfdrftno] {
    min-height: 300px;
    max-height: calc(90vh - 180px);
    overflow-y: auto;
    padding: 0.5rem;
}

.custom-product-from-images .card[b-1yyfdrftno] {
    border: none;
    box-shadow: none;
}

.custom-product-from-images .card-body[b-1yyfdrftno] {
    padding: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modal-container[b-1yyfdrftno] {
        width: 95%;
        max-height: 95vh;
    }
    
    .scan-tab-content[b-1yyfdrftno] {
        min-height: 300px;
    }
    
    .scan-intro[b-1yyfdrftno] {
        padding: 1rem;
    }
    
    .mud-tab-panels[b-1yyfdrftno] {
        max-height: calc(95vh - 180px);
    }
}
/* /Components/CustomFoodEditorModal.razor.rz.scp.css */
/* Base modal trigger button */
.custom-food-form .btn-outline-primary[b-mpln1n9q4s] {
    transition: all 0.2s ease;
    border-color: #3b82f6;
    color: #3b82f6;
}

.custom-food-form .btn-outline-primary:hover[b-mpln1n9q4s] {
    background-color: #3b82f6;
    color: white;
    transform: translateY(-1px);
}

/* Modal Structure */
.modal-overlay[b-mpln1n9q4s] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.modal-container[b-mpln1n9q4s] {
    width: 100%;
    max-width: 420px;
    margin: 1rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.modal-content[b-mpln1n9q4s] {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow-y: auto;
}

/* Header */
.modal-header[b-mpln1n9q4s] {
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
}

.modal-header h2[b-mpln1n9q4s] {
    font-size: 1.125rem;
    font-weight: 500;
    color: #1f2937;
    margin: 0;
}

.close-button[b-mpln1n9q4s] {
    padding: 0.25rem;
    font-size: 1.25rem;
    border: none;
    background: none;
    color: #6b7280;
    cursor: pointer;
    line-height: 1;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.close-button:hover[b-mpln1n9q4s] {
    background-color: #f3f4f6;
    color: #1f2937;
}

/* Form Groups */
.form-group[b-mpln1n9q4s] {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0;
    border-bottom: 1px solid #f3f4f6;
}

.form-group label[b-mpln1n9q4s] {
    color: #4b5563;
    font-size: 0.875rem;
}

/* Serving Section */
.serving-inputs[b-mpln1n9q4s] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.serving-amount[b-mpln1n9q4s] {
    width: 80px !important;
}

.serving-unit[b-mpln1n9q4s] {
    flex: 1 !important;
    min-width: 180px !important;
}

/* Added Serving in grams styles */
.serving-row[b-mpln1n9q4s] {
    display: flex;
    align-items: center;
    margin-top: 8px;
    gap: 8px;
}

.serving-label[b-mpln1n9q4s] {
    color: #666;
    font-size: 14px;
    min-width: 120px;
}

.serving-input[b-mpln1n9q4s] {
    width: 120px !important;
}

[b-mpln1n9q4s] .serving-input > .mud-input-text {
    margin: 0;
}

/* Nutrition Facts Section */
.nutrition-facts[b-mpln1n9q4s] {
    padding: 0.75rem 1rem;
}

.nutrition-facts h3[b-mpln1n9q4s] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: #1f2937;
}

.thick-line[b-mpln1n9q4s] {
    height: 6px;
    background-color: #000;
    margin: 0.5rem 0;
}

.nutrient-row[b-mpln1n9q4s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    min-height: 32px;
    border-bottom: 1px solid #f3f4f6;
}

.nutrient-row:last-child[b-mpln1n9q4s] {
    border-bottom: none;
}

.calories-row[b-mpln1n9q4s] {
    font-weight: 500;
}

.indented[b-mpln1n9q4s] {
    padding-left: 1.25rem;
    color: #6b7280;
    font-size: 0.875rem;
}

.numeric-input-container[b-mpln1n9q4s] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* MudBlazor Customization */
[b-mpln1n9q4s] .mud-input-control {
    margin: 0;
}

[b-mpln1n9q4s] .mud-input > input.mud-input-root {
    height: 32px;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

[b-mpln1n9q4s] .mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: 0;
}

[b-mpln1n9q4s] .nutrient-input {
    width: 80px !important;
}

[b-mpln1n9q4s] .mud-input-control-helper-text {
    min-height: 0;
    margin: 0;
}

/* Unit Labels */
.unit[b-mpln1n9q4s] {
    color: #6b7280;
    font-size: 0.75rem;
    width: 20px;
    text-align: right;
    flex-shrink: 0;
}

/* Footer */
.modal-footer[b-mpln1n9q4s] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid #e5e7eb;
    background: white;
    position: sticky;
    bottom: 0;
    z-index: 1;
}

.btn-cancel[b-mpln1n9q4s] {
    background: none;
    border: none;
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.btn-cancel:hover[b-mpln1n9q4s] {
    background-color: #f3f4f6;
    color: #1f2937;
}

.btn-add[b-mpln1n9q4s] {
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-add:hover[b-mpln1n9q4s] {
    background: #2563eb;
    transform: translateY(-1px);
}

.btn-add:active[b-mpln1n9q4s] {
    transform: translateY(0);
}

/* Mobile Optimizations */
@media (max-width: 640px) {
    .modal-container[b-mpln1n9q4s] {
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
    }

    .form-group[b-mpln1n9q4s] {
        flex-direction: column;
        align-items: flex-start;
    }

    .serving-inputs[b-mpln1n9q4s] {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }

    .serving-amount[b-mpln1n9q4s],
    .serving-unit[b-mpln1n9q4s] {
        width: 100% !important;
    }

    .serving-row[b-mpln1n9q4s] {
        width: 100%;
    }

    .serving-input[b-mpln1n9q4s] {
        flex: 1;
    }

    [b-mpln1n9q4s] .mud-input > input.mud-input-root {
        height: 40px;
    }

    .btn-cancel[b-mpln1n9q4s],
    .btn-add[b-mpln1n9q4s] {
        padding: 0.75rem 1rem;
    }
}

/* Scrollbar Styling */
.modal-content[b-mpln1n9q4s] {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

.modal-content[b-mpln1n9q4s]::-webkit-scrollbar {
    width: 6px;
}

.modal-content[b-mpln1n9q4s]::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.modal-content[b-mpln1n9q4s]::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 3px;
}
/* /Components/CustomFoodList.razor.rz.scp.css */
/* CustomFoodsList.razor.css */
.custom-foods-container[b-zjlv0m2h7g] {
    margin-bottom: 1.5rem;
}

/* Quick Access Section */
.quick-access-scroll[b-zjlv0m2h7g] {
    display: flex;
    overflow-x: auto;
    gap: 0.5rem;
    padding: 0.25rem 0;
    scrollbar-width: thin;
    -ms-overflow-style: none;
}

.quick-access-scroll[b-zjlv0m2h7g]::-webkit-scrollbar {
    height: 4px;
}

.quick-access-scroll[b-zjlv0m2h7g]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
}

.quick-access-scroll[b-zjlv0m2h7g]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 2px;
}

.quick-access-item[b-zjlv0m2h7g] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: #fff3e6;
    border: 1px solid #ffe0b2;
    border-radius: 2rem;
    color: #f08a12;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-access-item:hover[b-zjlv0m2h7g] {
    background-color: #ffe0b2;
}

.quick-access-item .brand-name[b-zjlv0m2h7g] {
    color: #666;
    margin-left: 0.5rem;
    font-size: 0.8em;
}

.quick-access-more[b-zjlv0m2h7g] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 50%;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-access-more:hover[b-zjlv0m2h7g] {
    background-color: #e9ecef;
}

/* Expanded Grid View */
.custom-foods-grid[b-zjlv0m2h7g] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.food-card[b-zjlv0m2h7g] {
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.food-card:hover[b-zjlv0m2h7g] {
    border-color: #f08a12;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.food-card-header[b-zjlv0m2h7g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.food-card-header i[b-zjlv0m2h7g] {
    color: #f08a12;
    font-size: 0.875rem;
}

.food-card .food-name[b-zjlv0m2h7g] {
    font-weight: 500;
    color: #212529;
}

.food-card .brand-name[b-zjlv0m2h7g] {
    color: #6c757d;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.food-card .nutrition-info[b-zjlv0m2h7g] {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: #495057;
    margin-bottom: 0.25rem;
}

/* Custom Foods Badge */
.custom-foods-badge[b-zjlv0m2h7g] {
    color: #f08a12;
    background-color: #fff3e6;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .custom-foods-grid[b-zjlv0m2h7g] {
        grid-template-columns: 1fr;
    }

    .food-card[b-zjlv0m2h7g] {
        padding: 0.75rem;
    }
}
/* /Components/CustomFoodNutritionForm.razor.rz.scp.css */
/* CustomFoodNutritionForm.razor.css */

h3[b-hp6yqmin7h], h4[b-hp6yqmin7h] {
    color: #1f2937;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[b-hp6yqmin7h] .mud-input {
    margin-bottom: 0.5rem;
}

[b-hp6yqmin7h] .validation-message {
    color: #F44336; /* MudBlazor default error color */
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

@media (max-width: 600px) {
    [b-hp6yqmin7h] .mud-grid {
        margin-top: 1rem;
    }

    [b-hp6yqmin7h] .mud-grid-item {
        padding: 0.5rem;
    }
}
/* /Components/DietQuestionnaire.razor.rz.scp.css */
/* ============================================
   Welcome-Back Banner (returning users)
   ============================================ */

.welcome-back-banner[b-7b5bkhre4b] {
    background: linear-gradient(135deg, #fff7ed, #fff3e0);
    border-left: 4px solid #f08a12;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    color: #5a3e1b;
    line-height: 1.5;
    animation: welcome-fade-in-b-7b5bkhre4b 0.6s ease-out both;
}

.welcome-back-icon[b-7b5bkhre4b] {
    color: #f08a12;
    font-size: 1.1rem;
    flex-shrink: 0;
}

@keyframes welcome-fade-in-b-7b5bkhre4b {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .welcome-back-banner[b-7b5bkhre4b] {
        animation: none;
    }
}

/* ============================================
   Form Input Sizing - Match width to expected input
   ============================================ */

/* Numeric input groups should be compact but readable */
.input-group[b-7b5bkhre4b] {
    width: 100%;
    max-width: 320px; /* Enough for number input + addon text like "hours per week" */
    margin: 0 auto; /* Center the input */
}

/* Select dropdowns can be slightly wider for longer option text */
.form-select[b-7b5bkhre4b] {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
}

/* Primary CTA button - not too wide */
.my-special-button[b-7b5bkhre4b] {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    display: block;
}

/* Navigation area (Previous Questions) - match question content width */
.questionnaire-nav[b-7b5bkhre4b] {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   Button Styles
   ============================================ */

/* Brand orange outline buttons for questionnaire */
.btn-outline-primary[b-7b5bkhre4b] {
    color: #f08a12;
    border-color: #f08a12;
    background-color: transparent;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover[b-7b5bkhre4b], .btn-outline-primary:focus[b-7b5bkhre4b] {
    color: #fff;
    background-color: #f08a12;
    border-color: #f08a12;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(240, 138, 18, 0.3);
}

/* Button selection bounce animation on click */
.btn-outline-primary:active:not(:disabled)[b-7b5bkhre4b] {
    animation: btn-select-bounce-b-7b5bkhre4b 0.12s ease-out;
    transform: scale(0.95);
}

.transition[b-7b5bkhre4b] {
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .btn-lg[b-7b5bkhre4b] {
        font-size: 1rem;
        padding: 0.5rem 1rem !important;
    }
}

/* CardSelect - Visual card grid for answer selection */
.card-select-container[b-7b5bkhre4b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 1rem;
}

.card-select-option[b-7b5bkhre4b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    min-height: 130px;
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    /* For ripple effect */
    position: relative;
    overflow: hidden;
}

/* Wider layout for cards with structured labels (research documents) */
.card-select-container:has(.card-label-title)[b-7b5bkhre4b] {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    max-width: 700px;
    align-items: stretch;
}

.card-select-option:has(.card-label-title)[b-7b5bkhre4b] {
    justify-content: flex-start;
    padding: 1.25rem 1rem;
    min-height: auto;
}

.card-select-option:hover:not(:disabled)[b-7b5bkhre4b] {
    border-color: #f08a12;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(240, 138, 18, 0.2);
}

.card-select-option:focus[b-7b5bkhre4b] {
    outline: none;
    border-color: #f08a12;
    box-shadow: 0 0 0 3px rgba(240, 138, 18, 0.25);
}

.card-select-option:disabled[b-7b5bkhre4b] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Card selection bounce animation on click */
.card-select-option:active:not(:disabled)[b-7b5bkhre4b] {
    animation: card-select-bounce-b-7b5bkhre4b 0.15s ease-out;
    transform: scale(0.97);
}

/* Ripple effect pseudo-element */
.card-select-option[b-7b5bkhre4b]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(240, 138, 18, 0.3) 0%, transparent 70%);
    opacity: 0;
    transform: scale(0);
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    pointer-events: none;
}

.card-select-option:active:not(:disabled)[b-7b5bkhre4b]::after {
    transform: scale(2.5);
    opacity: 1;
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}

.card-select-icon[b-7b5bkhre4b] {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    color: #f08a12;
    line-height: 1;
}

.card-select-icon i[b-7b5bkhre4b],
.card-select-icon svg[b-7b5bkhre4b] {
    font-size: inherit;
    width: 2rem;
    height: 2rem;
}

.card-select-label[b-7b5bkhre4b] {
    font-size: 0.95rem;
    font-weight: 500;
    color: #333;
    text-align: center;
    line-height: 1.3;
}

/* CardSelect responsive adjustments */
@media (max-width: 480px) {
    .card-select-container[b-7b5bkhre4b] {
        /* Auto-fit with larger minimum - naturally adapts to content */
        grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
        gap: 0.75rem;
    }

    .card-select-option[b-7b5bkhre4b] {
        padding: 1rem 0.75rem;
        min-height: auto; /* Let content determine height for long text */
    }

    .card-select-icon[b-7b5bkhre4b] {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .card-select-label[b-7b5bkhre4b] {
        font-size: 0.85rem;
    }
}

/* Narrow mobile: single column for better readability */
@media (max-width: 360px) {
    .card-select-container[b-7b5bkhre4b] {
        grid-template-columns: 1fr;
    }

    .card-select-option[b-7b5bkhre4b] {
        /* Horizontal layout for narrow screens with long text */
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        gap: 0.75rem;
    }

    .card-select-icon[b-7b5bkhre4b] {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .card-select-label[b-7b5bkhre4b] {
        text-align: left;
    }
}

/* CardSelect - Long text support
   Better text wrapping and flexible height for cards with longer labels */
.card-select-label[b-7b5bkhre4b] {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Structured card label - Title, Meta, Organizations */
.card-label-title[b-7b5bkhre4b] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #2d3748;
    line-height: 1.3;
}

.card-label-meta[b-7b5bkhre4b] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.card-label-orgs[b-7b5bkhre4b] {
    font-size: 0.8rem;
    font-weight: 400;
    color: #a0aec0;
    font-style: italic;
}

/* Mobile adjustments for structured labels */
@media (max-width: 480px) {
    .card-label-title[b-7b5bkhre4b] {
        font-size: 0.85rem;
    }

    .card-label-meta[b-7b5bkhre4b] {
        font-size: 0.7rem;
    }

    .card-label-orgs[b-7b5bkhre4b] {
        font-size: 0.75rem;
    }
}

/* Narrow mobile - align structured labels left */
@media (max-width: 360px) {
    .card-select-label[b-7b5bkhre4b] {
        align-items: flex-start;
    }
}

/* ============================================
   Progress Header - Segmented Stage Indicator
   ============================================ */

.progress-header[b-7b5bkhre4b] {
    background: linear-gradient(to bottom, #fafaf9, #fff);
    padding: 1rem 0;
    border-radius: 12px;
    width: 100%;
    max-width: 700px; /* Slightly wider than question content to fit 4 stages */
    min-width: 320px;
    margin: 0 auto;
}

/* Stage indicators container */
.progress-stages[b-7b5bkhre4b] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 0.5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 0.5rem;
}

/* Individual stage */
.stage[b-7b5bkhre4b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.75rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.stage-icon[b-7b5bkhre4b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.stage-label[b-7b5bkhre4b] {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

/* Stage states */
.stage.pending .stage-icon[b-7b5bkhre4b] {
    background: #e9ecef;
    color: #adb5bd;
}

.stage.pending .stage-label[b-7b5bkhre4b] {
    color: #adb5bd;
}

.stage.active .stage-icon[b-7b5bkhre4b] {
    background: #f08a12;
    color: #fff;
    box-shadow: 0 4px 12px rgba(240, 138, 18, 0.4);
    animation: pulse-glow-b-7b5bkhre4b 2s infinite;
}

.stage.active .stage-label[b-7b5bkhre4b] {
    color: #f08a12;
    font-weight: 600;
}

.stage.completed .stage-icon[b-7b5bkhre4b] {
    background: #059669;
    color: #fff;
}

.stage.completed .stage-label[b-7b5bkhre4b] {
    color: #059669;
}

/* Connector between stages */
.stage-connector[b-7b5bkhre4b] {
    width: 24px;
    height: 2px;
    background: #e9ecef;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.stage-connector.completed[b-7b5bkhre4b] {
    background: #059669;
}

.stage-connector.active[b-7b5bkhre4b] {
    background: linear-gradient(to right, #059669, #f08a12);
}

/* Progress bar animation */
.progress-bar-animated[b-7b5bkhre4b] {
    transition: width 0.5s ease;
}

/* Progress meta info */
.progress-meta[b-7b5bkhre4b] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #64748b;
}

.progress-meta .separator[b-7b5bkhre4b] {
    width: 4px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 50%;
}

.progress-meta .question-count[b-7b5bkhre4b] {
    font-weight: 500;
}

.progress-meta .current-stage-label[b-7b5bkhre4b] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: #f08a12;
}

.progress-meta .current-stage-label i[b-7b5bkhre4b] {
    font-size: 0.85rem;
}

.progress-meta .time-estimate[b-7b5bkhre4b] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.progress-meta .time-estimate i[b-7b5bkhre4b] {
    font-size: 0.8rem;
}

/* Pulse animation for active stage */
@keyframes pulse-glow-b-7b5bkhre4b {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(240, 138, 18, 0.4);
    }
    50% {
        box-shadow: 0 4px 20px rgba(240, 138, 18, 0.6);
    }
}

/* Progress header responsive */
@media (max-width: 576px) {
    .progress-stages[b-7b5bkhre4b] {
        gap: 0;
    }

    .stage[b-7b5bkhre4b] {
        padding: 0.5rem;
    }

    .stage-icon[b-7b5bkhre4b] {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .stage-label[b-7b5bkhre4b] {
        font-size: 0.65rem;
    }

    .stage-connector[b-7b5bkhre4b] {
        width: 16px;
    }

    .progress-meta[b-7b5bkhre4b] {
        flex-direction: column;
        gap: 0.25rem;
        font-size: 0.8rem;
    }

    .progress-meta .separator[b-7b5bkhre4b] {
        display: none;
    }
}

/* ============================================
   Selection Animations
   ============================================ */

/* Card selection bounce keyframe */
@keyframes card-select-bounce-b-7b5bkhre4b {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* Button selection bounce keyframe */
@keyframes btn-select-bounce-b-7b5bkhre4b {
    0% { transform: scale(1); }
    50% { transform: scale(0.93); }
    100% { transform: scale(1); }
}

/* ============================================
   Question Transitions
   ============================================ */

/* Question content container - constrained width for optimal UX */
.question-content[b-7b5bkhre4b] {
    width: 100%;
    max-width: 600px; /* Optimal form width per UX best practices */
    margin: 0 auto;
}

/* Slide in from right */
@keyframes question-enter-b-7b5bkhre4b {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide out to left */
@keyframes question-exit-b-7b5bkhre4b {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-30px);
    }
}

.question-content.entering[b-7b5bkhre4b] {
    animation: question-enter-b-7b5bkhre4b 0.3s ease-out forwards;
}

.question-content.exiting[b-7b5bkhre4b] {
    animation: question-exit-b-7b5bkhre4b 0.2s ease-in forwards;
}

/* ============================================
   Mobile Fixed CTA Bar
   ============================================ */

/* On mobile, keep the submit button fixed at bottom when scrolling */
@media (max-width: 768px) {
    .mobile-sticky-cta[b-7b5bkhre4b] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        padding: 0.75rem 1rem;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }

    /* Ensure button is centered and properly sized */
    .mobile-sticky-cta .my-special-button[b-7b5bkhre4b] {
        margin: 0 auto;
        display: block;
    }

    /* Add bottom padding to question-content so fixed bar doesn't cover content */
    .question-content[b-7b5bkhre4b] {
        padding-bottom: 80px;
    }
}

/* ============================================
   Preset Buttons (for Input type questions)
   ============================================ */

.preset-buttons-container[b-7b5bkhre4b] {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.preset-label[b-7b5bkhre4b] {
    font-size: 0.9rem;
    font-weight: 500;
}

.preset-buttons[b-7b5bkhre4b] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.preset-btn[b-7b5bkhre4b] {
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: #495057;
    background: #fff;
    border: 2px solid #dee2e6;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 70px;
}

.preset-btn:hover:not(:disabled)[b-7b5bkhre4b] {
    border-color: #f08a12;
    color: #f08a12;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(240, 138, 18, 0.15);
}

.preset-btn:focus[b-7b5bkhre4b] {
    outline: none;
    border-color: #f08a12;
    box-shadow: 0 0 0 3px rgba(240, 138, 18, 0.2);
}

.preset-btn.selected[b-7b5bkhre4b] {
    background: #f08a12;
    border-color: #f08a12;
    color: #fff;
    box-shadow: 0 4px 12px rgba(240, 138, 18, 0.3);
}

.preset-btn:disabled[b-7b5bkhre4b] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.manual-label[b-7b5bkhre4b] {
    font-size: 0.85rem;
}

/* ============================================
   Skip Option Link
   ============================================ */

.skip-option-container[b-7b5bkhre4b] {
    text-align: center;
}

.skip-option-link[b-7b5bkhre4b] {
    color: #6c757d;
    font-size: 0.9rem;
    text-decoration: none;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}

.skip-option-link:hover:not(:disabled)[b-7b5bkhre4b] {
    color: #f08a12;
    text-decoration: underline;
}

.skip-option-link:disabled[b-7b5bkhre4b] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Preset buttons responsive */
@media (max-width: 480px) {
    .preset-btn[b-7b5bkhre4b] {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
        min-width: 60px;
    }

    .preset-buttons[b-7b5bkhre4b] {
        gap: 0.4rem;
    }
}

/* ============================================
   Image Card Select (Body Fat Percentage, etc.)
   ============================================ */

.image-card-select-container[b-7b5bkhre4b] {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.image-card-instruction[b-7b5bkhre4b] {
    font-size: 0.95rem;
    text-align: center;
}

.image-card-grid[b-7b5bkhre4b] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin: 0 auto;
}

.image-card-option[b-7b5bkhre4b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.image-card-option:hover:not(:disabled)[b-7b5bkhre4b] {
    border-color: #f08a12;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(240, 138, 18, 0.2);
}

.image-card-option:focus[b-7b5bkhre4b] {
    outline: none;
    border-color: #f08a12;
    box-shadow: 0 0 0 3px rgba(240, 138, 18, 0.25);
}

.image-card-option.selected[b-7b5bkhre4b] {
    border-color: #f08a12;
    background: linear-gradient(to bottom, rgba(240, 138, 18, 0.08), rgba(240, 138, 18, 0.02));
    box-shadow: 0 4px 12px rgba(240, 138, 18, 0.3);
}

.image-card-option.selected[b-7b5bkhre4b]::before {
    content: '\2713';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 24px;
    height: 24px;
    background: #f08a12;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    z-index: 2;
}

.image-card-option:disabled[b-7b5bkhre4b] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.image-card-option:active:not(:disabled)[b-7b5bkhre4b] {
    transform: scale(0.97);
}

.image-card-visual[b-7b5bkhre4b] {
    width: 100%;
    aspect-ratio: 3 / 4;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.image-card-label[b-7b5bkhre4b] {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    text-align: center;
}

.image-card-option.selected .image-card-label[b-7b5bkhre4b] {
    color: #f08a12;
}

/* Manual input section for ImageCardSelect */
.image-card-manual-input[b-7b5bkhre4b] {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

.image-card-manual-input .input-group[b-7b5bkhre4b] {
    max-width: 200px;
    margin: 0 auto;
}

/* Submit button for ImageCardSelect */
.image-card-submit[b-7b5bkhre4b] {
    text-align: center;
}

.image-card-submit .my-special-button[b-7b5bkhre4b] {
    max-width: 300px;
}

/* ImageCardSelect responsive */
@media (max-width: 480px) {
    .image-card-grid[b-7b5bkhre4b] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .image-card-option[b-7b5bkhre4b] {
        padding: 0.375rem;
    }

    .image-card-visual[b-7b5bkhre4b] {
        aspect-ratio: 3 / 4;
    }

    .image-card-label[b-7b5bkhre4b] {
        font-size: 0.9rem;
    }

    .image-card-option.selected[b-7b5bkhre4b]::before {
        width: 20px;
        height: 20px;
        font-size: 0.65rem;
        top: 0.25rem;
        right: 0.25rem;
    }
}

/* ============================================
   Reduced Motion Support (Accessibility)
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .card-select-option[b-7b5bkhre4b],
    .btn-outline-primary[b-7b5bkhre4b],
    .question-content[b-7b5bkhre4b],
    .stage-icon[b-7b5bkhre4b],
    .progress-bar-animated[b-7b5bkhre4b],
    .preset-btn[b-7b5bkhre4b],
    .image-card-option[b-7b5bkhre4b] {
        animation: none !important;
        transition: opacity 0.1s ease !important;
    }

    .card-select-option[b-7b5bkhre4b]::after {
        display: none;
    }

    .question-content.entering[b-7b5bkhre4b],
    .question-content.exiting[b-7b5bkhre4b] {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}

/* Help icon cursor */
.help-icon[b-7b5bkhre4b] {
    cursor: help;
}
/* /Components/EmailCaptureModal.razor.rz.scp.css */
/* EmailCaptureModal Component Styles */

/* Content Container */
.email-capture-content[b-hxf3pj185q] {
    padding: 8px 0;
    text-align: center;
}

/* Header Section */
.email-capture-header[b-hxf3pj185q] {
    margin-bottom: 24px;
}

.header-icon[b-hxf3pj185q] {
    font-size: 48px;
    margin-bottom: 16px;
    line-height: 1;
}

.header-text[b-hxf3pj185q] {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

/* Form Styles */
.email-capture-form[b-hxf3pj185q] {
    margin-bottom: 16px;
}

.input-wrapper[b-hxf3pj185q] {
    position: relative;
}

.input-wrapper .form-control[b-hxf3pj185q] {
    padding-right: 48px;
    font-size: 16px; /* Prevents iOS zoom */
    border-radius: 8px;
    border: 2px solid var(--bs-border-color, #dee2e6);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-wrapper .form-control:focus[b-hxf3pj185q] {
    border-color: var(--bs-primary, #27AE60);
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.15);
}

.input-wrapper.has-error .form-control[b-hxf3pj185q] {
    border-color: var(--bs-danger, #dc3545);
}

.input-wrapper.has-error .form-control:focus[b-hxf3pj185q] {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.input-spinner[b-hxf3pj185q] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color, #6c757d);
}

/* Error Message */
.error-message[b-hxf3pj185q] {
    color: var(--bs-danger, #dc3545);
    font-size: 13px;
    margin-top: 8px;
    text-align: left;
}

/* Typo Suggestion */
.typo-suggestion[b-hxf3pj185q] {
    background-color: var(--bs-warning-bg-subtle, #fff3cd);
    border: 1px solid var(--bs-warning-border-subtle, #ffecb5);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--bs-warning-text-emphasis, #664d03);
}

.suggestion-link[b-hxf3pj185q] {
    background: none;
    border: none;
    color: var(--bs-primary, #27AE60);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

.suggestion-link:hover[b-hxf3pj185q] {
    color: var(--bs-primary-hover, #219150);
}

/* Submit Button */
.submit-btn[b-hxf3pj185q] {
    background-color: var(--bs-primary, #27AE60);
    border-color: var(--bs-primary, #27AE60);
    font-weight: 600;
    padding: 14px 24px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.submit-btn:hover:not(:disabled)[b-hxf3pj185q] {
    background-color: var(--bs-primary-hover, #219150);
    border-color: var(--bs-primary-hover, #219150);
    transform: translateY(-1px);
}

.submit-btn:disabled[b-hxf3pj185q] {
    opacity: 0.65;
}

/* Trust Signal */
.trust-signal[b-hxf3pj185q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 20px 0 12px;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 13px;
}

.trust-signal i[b-hxf3pj185q] {
    color: var(--bs-success, #27AE60);
}

/* Dismiss Link */
.dismiss-link[b-hxf3pj185q] {
    background: none;
    border: none;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 14px;
    cursor: pointer;
    padding: 8px 16px;
    transition: color 0.2s ease;
}

.dismiss-link:hover:not(:disabled)[b-hxf3pj185q] {
    color: var(--bs-body-color, #212529);
}

.dismiss-link:disabled[b-hxf3pj185q] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Success State */
.email-capture-success[b-hxf3pj185q] {
    padding: 24px 0;
}

.success-icon[b-hxf3pj185q] {
    font-size: 64px;
    color: var(--bs-success, #27AE60);
    margin-bottom: 16px;
    animation: success-pop-b-hxf3pj185q 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes success-pop-b-hxf3pj185q {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-title[b-hxf3pj185q] {
    font-size: 20px;
    font-weight: 600;
    color: var(--bs-body-color, #212529);
    margin: 0 0 8px;
}

.success-message[b-hxf3pj185q] {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 14px;
    margin: 0;
}

.success-message strong[b-hxf3pj185q] {
    color: var(--bs-body-color, #212529);
}

/* Mobile Optimizations */
@media (max-width: 576px) {
    .email-capture-content[b-hxf3pj185q] {
        padding: 4px 0;
    }

    .header-icon[b-hxf3pj185q] {
        font-size: 40px;
        margin-bottom: 12px;
    }

    .header-text[b-hxf3pj185q] {
        font-size: 14px;
    }

    .submit-btn[b-hxf3pj185q] {
        padding: 16px 24px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .success-icon[b-hxf3pj185q] {
        animation: none;
    }

    .submit-btn[b-hxf3pj185q],
    .input-wrapper .form-control[b-hxf3pj185q] {
        transition: none;
    }
}
/* /Components/FixedServing/FixedGramsInput.razor.rz.scp.css */
/* Fixed Grams Input Component Styles */

.fixed-grams-input[b-0zw4blqfmi] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 180px;
}

.grams-input-field[b-0zw4blqfmi] {
    width: 100%;
}

.oz-conversion[b-0zw4blqfmi] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    padding-left: 0.25rem;
}

/* Ensure the numeric field adornment looks good */
[b-0zw4blqfmi] .mud-input-adornment-end {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}
/* /Components/FixedServing/FixedServingNutritionPreview.razor.rz.scp.css */
/* FixedServingNutritionPreview Component Styles */

.nutrition-preview[b-mbtvd0eb7u] {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    min-height: 24px;
    transition: opacity 0.2s ease;
}

.nutrition-preview.loading[b-mbtvd0eb7u] {
    opacity: 0.7;
}

.nutrition-preview.error[b-mbtvd0eb7u] {
    opacity: 0.9;
}

/* Loading indicator */
.loading-indicator[b-mbtvd0eb7u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mud-palette-text-secondary);
}

.loading-text[b-mbtvd0eb7u] {
    font-size: 0.75rem;
    font-style: italic;
}

/* Error indicator */
.error-indicator[b-mbtvd0eb7u] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--mud-palette-error);
}

.error-text[b-mbtvd0eb7u] {
    font-size: 0.75rem;
}

/* Stale indicator */
.stale-indicator[b-mbtvd0eb7u] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--mud-palette-warning);
}

.stale-text[b-mbtvd0eb7u] {
    font-size: 0.75rem;
    font-style: italic;
}

/* Macro preview */
.macro-preview[b-mbtvd0eb7u] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--mud-palette-surface-variant, rgba(0, 0, 0, 0.03));
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.macro-item[b-mbtvd0eb7u] {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.macro-value[b-mbtvd0eb7u] {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.macro-label[b-mbtvd0eb7u] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    text-transform: lowercase;
}

.macro-divider[b-mbtvd0eb7u] {
    color: var(--mud-palette-divider);
    margin: 0 0.125rem;
}

/* Specific macro colors */
.macro-item.calories .macro-value[b-mbtvd0eb7u] {
    color: var(--mud-palette-primary);
}

.macro-item.protein .macro-value[b-mbtvd0eb7u] {
    color: #e91e63; /* Pink for protein */
}

.macro-item.carbs .macro-value[b-mbtvd0eb7u] {
    color: #ff9800; /* Orange for carbs */
}

.macro-item.fat .macro-value[b-mbtvd0eb7u] {
    color: #4caf50; /* Green for fat */
}

/* Responsive adjustments */
@media (max-width: 575.98px) {
    .nutrition-preview[b-mbtvd0eb7u] {
        font-size: 0.75rem;
    }

    .macro-preview[b-mbtvd0eb7u] {
        padding: 0.2rem 0.35rem;
    }

    .macro-label[b-mbtvd0eb7u] {
        font-size: 0.65rem;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .nutrition-preview[b-mbtvd0eb7u] {
        transition: none;
    }
}
/* /Components/FixedServing/FixedServingsSummary.razor.rz.scp.css */
/* FixedServingsSummary Component Styles */

.fixed-servings-summary[b-j3he5l2tpj] {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.fixed-servings-summary.empty[b-j3he5l2tpj] {
    background-color: var(--mud-palette-background-gray);
    border-style: dashed;
}

/* Header */
.summary-header[b-j3he5l2tpj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.header-title[b-j3he5l2tpj] {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.title-text[b-j3he5l2tpj] {
    font-size: 1rem;
}

.clear-all-btn[b-j3he5l2tpj] {
    min-width: auto;
    padding: 0.25rem 0.5rem;
}

/* Fixed Items List */
.fixed-items-list[b-j3he5l2tpj] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.fixed-item[b-j3he5l2tpj] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem;
    background-color: rgba(108, 117, 125, 0.05);
    border-radius: 6px;
    border-left: 3px solid var(--mud-palette-secondary);
    transition: all 0.2s ease;
    animation: slideIn-b-j3he5l2tpj 0.3s ease;
}

.fixed-item:hover[b-j3he5l2tpj] {
    background-color: rgba(108, 117, 125, 0.1);
    transform: translateX(2px);
}

.fixed-item.loading[b-j3he5l2tpj] {
    opacity: 0.7;
}

.fixed-item.stale[b-j3he5l2tpj] {
    border-left-color: var(--mud-palette-warning);
}

/* Item Info */
.item-info[b-j3he5l2tpj] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.item-name-row[b-j3he5l2tpj] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.lock-icon[b-j3he5l2tpj] {
    flex-shrink: 0;
}

.item-name[b-j3he5l2tpj] {
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-brand[b-j3he5l2tpj] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.item-grams[b-j3he5l2tpj] {
    margin-top: 0.25rem;
}

/* Item Macros */
.item-macros[b-j3he5l2tpj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.macro-chips[b-j3he5l2tpj] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.macro-chip[b-j3he5l2tpj] {
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    white-space: nowrap;
}

.macro-chip.calories[b-j3he5l2tpj] {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.macro-chip.protein[b-j3he5l2tpj] {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

.macro-chip.carbs[b-j3he5l2tpj] {
    background-color: rgba(255, 193, 7, 0.2);
    color: #b38600;
}

.macro-chip.fat[b-j3he5l2tpj] {
    background-color: rgba(25, 135, 84, 0.1);
    color: #198754;
}

.loading-text[b-j3he5l2tpj] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.stale-indicator[b-j3he5l2tpj] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--mud-palette-warning);
}

.compact-alert[b-j3he5l2tpj] {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem;
}

/* Item Actions */
.item-actions[b-j3he5l2tpj] {
    flex-shrink: 0;
}

/* Summary Totals */
.summary-totals[b-j3he5l2tpj] {
    padding-top: 0.75rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.totals-row[b-j3he5l2tpj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.totals-label[b-j3he5l2tpj] {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary);
}

.totals-values[b-j3he5l2tpj] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.total-chip[b-j3he5l2tpj] {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.total-chip.calories[b-j3he5l2tpj] {
    background-color: #dc3545;
    color: white;
}

.total-chip.protein[b-j3he5l2tpj] {
    background-color: #0d6efd;
    color: white;
}

.total-chip.carbs[b-j3he5l2tpj] {
    background-color: #ffc107;
    color: #212529;
}

.total-chip.fat[b-j3he5l2tpj] {
    background-color: #198754;
    color: white;
}

/* Remaining Targets */
.remaining-targets[b-j3he5l2tpj] {
    background-color: rgba(13, 202, 240, 0.05);
    padding: 0.5rem;
    border-radius: 4px;
    margin-top: 0.5rem;
}

.remaining-chip[b-j3he5l2tpj] {
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    background-color: rgba(13, 202, 240, 0.15);
    color: var(--mud-palette-info);
}

/* Empty State */
.empty-state[b-j3he5l2tpj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
}

.empty-text[b-j3he5l2tpj] {
    margin: 0;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.empty-hint[b-j3he5l2tpj] {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--mud-palette-text-disabled);
    max-width: 280px;
}

/* Animations */
@keyframes slideIn-b-j3he5l2tpj {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn-b-j3he5l2tpj {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fixed-servings-summary[b-j3he5l2tpj] {
    animation: fadeIn-b-j3he5l2tpj 0.3s ease;
}

/* Mobile Responsive */
@media (max-width: 767px) {
    .fixed-servings-summary[b-j3he5l2tpj] {
        padding: 0.75rem;
    }

    .summary-header[b-j3he5l2tpj] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .clear-all-btn[b-j3he5l2tpj] {
        align-self: flex-end;
    }

    .fixed-item[b-j3he5l2tpj] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .item-macros[b-j3he5l2tpj] {
        justify-content: flex-start;
    }

    .item-actions[b-j3he5l2tpj] {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
    }

    .fixed-item[b-j3he5l2tpj] {
        position: relative;
        padding-right: 2.5rem;
    }

    .totals-row[b-j3he5l2tpj] {
        flex-direction: column;
        align-items: flex-start;
    }

    .totals-values[b-j3he5l2tpj] {
        width: 100%;
        justify-content: flex-start;
    }

    .macro-chip[b-j3he5l2tpj],
    .total-chip[b-j3he5l2tpj],
    .remaining-chip[b-j3he5l2tpj] {
        font-size: 0.7rem;
        padding: 0.1rem 0.3rem;
    }
}

/* Touch targets for mobile */
@media (max-width: 767px) {
    .fixed-item[b-j3he5l2tpj] {
        min-height: 44px;
    }

    .item-actions button[b-j3he5l2tpj] {
        min-width: 44px;
        min-height: 44px;
    }

    .clear-all-btn[b-j3he5l2tpj] {
        min-height: 44px;
        padding: 0.5rem 1rem;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .fixed-servings-summary[b-j3he5l2tpj],
    .fixed-item[b-j3he5l2tpj] {
        animation: none;
        transition: none;
    }

    .fixed-item:hover[b-j3he5l2tpj] {
        transform: none;
    }
}
/* /Components/FixedServing/FixedServingToggle.razor.rz.scp.css */
/* Fixed Serving Toggle Component Styles */

.fixed-serving-toggle[b-zz29s3jzuo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.fixed-serving-toggle.fixed-mode[b-zz29s3jzuo] {
    background-color: rgba(156, 39, 176, 0.08);
    border-left: 3px solid var(--mud-palette-secondary);
}

.fixed-serving-toggle.flexible-mode[b-zz29s3jzuo] {
    background-color: transparent;
}

.mode-selector[b-zz29s3jzuo] {
    display: flex;
    align-items: center;
}

.mode-radio-group[b-zz29s3jzuo] {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.mode-label[b-zz29s3jzuo] {
    font-size: 0.875rem;
    white-space: nowrap;
}

.fixed-amount-input[b-zz29s3jzuo] {
    margin-top: 0.25rem;
    padding-left: 1.5rem;
    animation: slideIn-b-zz29s3jzuo 0.2s ease-out;
}

@keyframes slideIn-b-zz29s3jzuo {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .mode-radio-group[b-zz29s3jzuo] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .fixed-amount-input[b-zz29s3jzuo] {
        padding-left: 0;
    }
}
/* /Components/FixedServing/FixedServingUnitAmountInput.razor.rz.scp.css */
.fixed-serving-unit-amount[b-fotw3ckhpc] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.unit-select[b-fotw3ckhpc] {
    width: auto;
    min-width: 60px;
    max-width: 100px;
    font-size: 13px;
    padding: 5px 24px 5px 8px;
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    background-color: #FAFBFC;
    height: 30px;
    line-height: 1.2;
    transition: all 0.1s ease;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}

.unit-select:hover[b-fotw3ckhpc] {
    border-color: #D1D5DB;
    background-color: #F3F4F6;
}

.unit-select:focus[b-fotw3ckhpc] {
    border-color: #3B82F6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    outline: none;
}

.amount-input[b-fotw3ckhpc] {
    width: 55px;
    font-size: 13px;
    padding: 5px 6px;
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    background-color: #FAFBFC;
    height: 30px;
    text-align: center;
    transition: all 0.1s ease;
}

.amount-input:hover[b-fotw3ckhpc] {
    border-color: #D1D5DB;
    background-color: #F3F4F6;
}

.amount-input:focus[b-fotw3ckhpc] {
    border-color: #3B82F6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    outline: none;
}

/* Remove number input spinners */
.amount-input[b-fotw3ckhpc]::-webkit-outer-spin-button,
.amount-input[b-fotw3ckhpc]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.amount-input[type=number][b-fotw3ckhpc] {
    -moz-appearance: textfield;
}
/* /Components/FoodSelection/FoodSelection.razor.rz.scp.css */
/* FoodSelection.razor.css */
/* Note: Design tokens are imported globally in _Layout.cshtml */
/* This file uses CSS variables defined in design-tokens.css */

/* ============================================
   SEARCH BAR INNER (TomSelect + Voice mic)
   Flex layout to place mic icon beside search
   ============================================ */

[b-3soal3mqbs] .search-bar-inner {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

[b-3soal3mqbs] .search-bar-inner .tomselect-container-integrated {
    flex: 1;
    min-width: 0;
}

/* Mic button matches TomSelect height via align-items: stretch */
[b-3soal3mqbs] .search-bar-inner .voice-mic-btn {
    align-self: stretch;
}

/* ============================================
   SEARCH HERO ZONE
   Primary entry point for meal planning
   Visual hierarchy: 80% weight (dominant)
   ============================================ */

[b-3soal3mqbs] .search-hero-zone {
    background: rgba(240, 138, 18, 0.05);
    border: 3px solid var(--fs-accent);
    border-radius: var(--fs-radius-lg);
    padding: var(--fs-spacing-xl);
    margin-bottom: var(--fs-spacing-lg);
    box-shadow: 0 4px 12px rgba(240, 138, 18, 0.15);
    transition: var(--fs-transition-all);
}

[b-3soal3mqbs] .search-hero-zone:focus-within {
    box-shadow: 0 6px 20px rgba(240, 138, 18, 0.25);
    border-color: var(--fs-accent-hover);
}

/* Search microcopy - guides users to the primary action */
[b-3soal3mqbs] .search-microcopy {
    font-size: var(--fs-font-size-sm);
    color: var(--fs-text-secondary);
    text-align: center;
    margin-top: var(--fs-spacing-sm);
    margin-bottom: var(--fs-spacing-md);
}

[b-3soal3mqbs] .search-microcopy i {
    color: var(--fs-accent);
    margin-right: var(--fs-spacing-xs);
}

/* Enhance TomSelect inside hero zone */
[b-3soal3mqbs] .search-hero-zone .ts-control {
    min-height: 56px;
    font-size: var(--fs-font-size-lg);
    border: 2px solid var(--fs-border-default);
    background: var(--fs-bg-primary);
}

[b-3soal3mqbs] .search-hero-zone .ts-control:focus,
[b-3soal3mqbs] .search-hero-zone .ts-wrapper.focus .ts-control {
    border-color: var(--fs-accent) !important;
    box-shadow: 0 0 0 3px rgba(240, 138, 18, 0.15) !important;
}

[b-3soal3mqbs] .search-hero-zone .ts-control input::placeholder {
    color: var(--fs-text-secondary);
    font-weight: var(--fs-font-weight-medium);
}

/* Mobile adjustments for search hero */
@media (max-width: 768px) {
    [b-3soal3mqbs] .search-hero-zone {
        padding: var(--fs-spacing-lg);
        margin-bottom: var(--fs-spacing-md);
        border-width: 2px;
    }

    [b-3soal3mqbs] .search-hero-zone .ts-control {
        min-height: 48px;
        font-size: var(--fs-font-size-base);
    }

    [b-3soal3mqbs] .search-microcopy {
        font-size: var(--fs-font-size-xs);
    }
}

/* ============================================ */

[b-3soal3mqbs] .page-title {
    color: var(--fs-text-primary);
    font-weight: var(--fs-font-weight-semibold);
    text-align: center;
    margin: var(--fs-spacing-4xl) auto var(--fs-spacing-3xl);
    font-size: var(--fs-font-size-2xl);
    line-height: var(--fs-line-height-relaxed);
    max-width: 700px;
    letter-spacing: -0.02em;
}

/* Highlight key phrase in title */
[b-3soal3mqbs] .page-title strong {
    color: var(--fs-primary);
    font-weight: var(--fs-font-weight-bold);
}

/* Card container polish */
[b-3soal3mqbs] .card.border-0.shadow-sm {
    border-radius: var(--fs-radius-lg) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden;
}

[b-3soal3mqbs] .card-body.p-4 {
    padding: var(--fs-spacing-2xl) !important;
}


/* TomSelect Integration - Core styling is in tomselect-custom.css */
/* Component-specific overrides and integrations only */

[b-3soal3mqbs] .tomselect-wrapper {
    position: relative;
    width: 100%;
    /* TomSelect wrapper styling handled by tomselect-custom.css */
}

/* Ensure TomSelect inherits the design system properly */
[b-3soal3mqbs] .ts-wrapper {
    font-family: var(--fs-font-family);
    /* All other styling handled by tomselect-custom.css */
}

/* TomSelect focus state enhancement */
[b-3soal3mqbs] .ts-wrapper.focus .ts-control {
    border-color: var(--fs-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

/* TomSelect input placeholder styling */
[b-3soal3mqbs] .ts-control input::placeholder {
    color: var(--fs-text-muted);
    font-weight: var(--fs-font-weight-normal);
}

/* TomSelect animations are defined in tomselect-custom.css */

/* Custom Foods Badge */
[b-3soal3mqbs] .custom-foods-badge {
    color: var(--fs-accent);
    background-color: var(--fs-accent-light);
    padding: var(--fs-spacing-xs) var(--fs-spacing-md);
    border-radius: var(--fs-radius-pill);
    font-size: var(--fs-font-size-xs);
    display: inline-block;
}

/* Custom Food Section */
[b-3soal3mqbs] .custom-food-section {
    margin-top: 1rem;
    text-align: center;
}

/* Custom Food Button - Using accent color */
[b-3soal3mqbs] .custom-food-btn {
    background-color: var(--fs-accent);
    color: var(--fs-text-inverse);
    border: 2px solid var(--fs-accent);
    padding: var(--fs-button-padding-y) var(--fs-button-padding-x);
    border-radius: var(--fs-radius-pill);
    font-size: var(--fs-font-size-base);
    font-weight: var(--fs-font-weight-semibold);
    transition: var(--fs-transition-all);
    box-shadow: var(--fs-shadow-accent);
    display: inline-flex;
    align-items: center;
    gap: var(--fs-spacing-sm);
    touch-action: manipulation; /* Remove 300ms tap delay on mobile */
}

[b-3soal3mqbs] .custom-food-btn:hover {
    background-color: var(--fs-accent-hover);
    border-color: var(--fs-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(240, 138, 18, 0.3);
}

[b-3soal3mqbs] .custom-food-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(240, 138, 18, 0.2);
}

[b-3soal3mqbs] .custom-food-btn i {
    transition: transform 0.2s ease;
}

[b-3soal3mqbs] .custom-food-btn:hover .fa-plus {
    transform: rotate(90deg);
}

/* Bootstrap Tooltip Customization for Custom Food Button */
[b-3soal3mqbs] .tooltip {
    transition: opacity 0.15s ease-in-out !important;
}

[b-3soal3mqbs] .tooltip.show {
    opacity: 1;
}

[b-3soal3mqbs] .custom-food-btn + .tooltip .tooltip-inner {
    background-color: #495057;
    color: white;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    max-width: 250px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

[b-3soal3mqbs] .custom-food-btn + .tooltip .tooltip-arrow::before {
    border-top-color: #495057;
}


/* Calculate Button Row - Stack button and helper text vertically */
[b-3soal3mqbs] .calculate-button-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--fs-spacing-sm);
}

/* Calculate Button - Prominent CTA with gradient */
[b-3soal3mqbs] .btn-calculate,
[b-3soal3mqbs] .calculate-btn {
    background: linear-gradient(135deg, var(--fs-primary) 0%, var(--fs-primary-hover) 100%);
    border: none;
    font-weight: var(--fs-font-weight-semibold);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    position: relative;
    overflow: hidden;
    touch-action: manipulation; /* Remove 300ms tap delay on mobile */
}

[b-3soal3mqbs] .btn-calculate::before,
[b-3soal3mqbs] .calculate-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

[b-3soal3mqbs] .btn-calculate:hover,
[b-3soal3mqbs] .calculate-btn:hover {
    background: linear-gradient(135deg, var(--fs-primary-hover) 0%, var(--fs-primary-active) 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
}

[b-3soal3mqbs] .btn-calculate:hover::before,
[b-3soal3mqbs] .calculate-btn:hover::before {
    transform: translateX(100%);
}

[b-3soal3mqbs] .btn-calculate:active,
[b-3soal3mqbs] .calculate-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

/* Disabled state - subtle but clear */
[b-3soal3mqbs] .btn-calculate:disabled,
[b-3soal3mqbs] .calculate-btn:disabled {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

[b-3soal3mqbs] .btn-calculate:disabled::before,
[b-3soal3mqbs] .calculate-btn:disabled::before {
    display: none;
}

/* Excitement Text - subtle call-to-action hint */
[b-3soal3mqbs] .excitement-text {
    color: var(--fs-text-secondary);
    margin-top: var(--fs-spacing-sm) !important;
    font-style: normal;
    font-size: var(--fs-font-size-sm);
    opacity: 0.8;
}

/* Selection feedback text */
[b-3soal3mqbs] .calculate-button-row p {
    transition: all 0.2s ease;
}

[b-3soal3mqbs] .calculate-button-row .text-success {
    color: var(--fs-success) !important;
    font-weight: var(--fs-font-weight-medium);
}

[b-3soal3mqbs] .calculate-button-row .text-success i {
    animation: checkPop-b-3soal3mqbs 0.3s ease-out;
}

@keyframes checkPop-b-3soal3mqbs {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

[b-3soal3mqbs] .calculate-button-row .text-muted {
    color: var(--fs-text-muted) !important;
}


/* Quick Add Buttons */
[b-3soal3mqbs] .quick-add-section {
    padding-top: var(--fs-spacing-sm);
}

[b-3soal3mqbs] .quick-add-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fs-spacing-sm);
}

[b-3soal3mqbs] .quick-add-btn {
    background-color: var(--fs-bg-secondary);
    border: 1px solid var(--fs-border-default);
    color: var(--fs-text-primary);
    padding: var(--fs-spacing-sm) var(--fs-spacing-md);
    border-radius: var(--fs-radius-pill);
    font-size: var(--fs-font-size-sm);
    font-weight: var(--fs-font-weight-medium);
    transition: var(--fs-transition-all);
    cursor: pointer;
    position: relative;
    padding-left: var(--fs-spacing-2xl);
    touch-action: manipulation; /* Remove 300ms tap delay on mobile */
}

[b-3soal3mqbs] .quick-add-btn::before {
    content: '+';
    position: absolute;
    left: 0.75rem;
    font-size: 1rem;
    font-weight: bold;
    color: #6c757d;
    transition: color 0.2s ease;
}

[b-3soal3mqbs] .quick-add-btn:hover {
    background-color: var(--fs-primary-light);
    border-color: var(--fs-primary);
    color: var(--fs-primary);
    transform: translateY(-1px);
    box-shadow: var(--fs-shadow-sm);
}

[b-3soal3mqbs] .quick-add-btn:hover::before {
    color: var(--fs-primary);
}

[b-3soal3mqbs] .quick-add-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(240, 138, 18, 0.1);
}

/* Serving Grid Styling */
[b-3soal3mqbs] .serving-grid {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--fs-border-default);
    border-radius: var(--fs-radius-md);
    overflow: hidden;
    background-color: var(--fs-bg-secondary);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

[b-3soal3mqbs] .serving-row {
    display: grid;
    grid-template-columns: 200px auto;
    padding: var(--fs-spacing-lg);
    background-color: var(--fs-bg-primary);
    border-bottom: 1px solid var(--fs-border-default);
    transition: var(--fs-transition-colors);
}

[b-3soal3mqbs] .serving-row:hover {
    background-color: var(--fs-bg-hover);
}

[b-3soal3mqbs] .serving-row:last-child {
    border-bottom: none;
}

[b-3soal3mqbs] .food-name {
    font-weight: var(--fs-font-weight-medium);
    color: var(--fs-text-primary);
    padding: var(--fs-spacing-sm) 0;
    flex: 1;
}

/* ─────────────────────────────────────────────
   COMPACT ROW: Minimalist inline layout
   Inspired by Notion/Linear/Todoist
   ───────────────────────────────────────────── */
[b-3soal3mqbs] .selected-food-item {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #FAFBFC;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    margin: 0;
    box-shadow: none;
    transition: all 0.15s ease;
    min-height: 40px;
}

[b-3soal3mqbs] .selected-food-item:last-child {
    margin-bottom: 0;
}

[b-3soal3mqbs] .selected-food-item:hover {
    background: #F8FAFC;
    border-left: 3px solid #3B82F6;
    box-shadow: none;
    transform: none;
}

@keyframes slideInUp-b-3soal3mqbs {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Food name - fixed width column for alignment */
[b-3soal3mqbs] .selected-food-item .food-name {
    font-weight: 500;
    color: #374151;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
    line-height: 1.3;
    flex: 1 1 auto;
    min-width: 60px;
}

/* Delete button - subtle, appears on hover */
[b-3soal3mqbs] .btn-remove-food {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: #FEF2F2;
    color: #EF4444;
    cursor: pointer;
    transition: all 0.1s ease;
    flex-shrink: 0;
    margin-left: auto;
    opacity: 0;
    touch-action: manipulation;
}

[b-3soal3mqbs] .selected-food-item:hover .btn-remove-food {
    opacity: 1;
}

[b-3soal3mqbs] .btn-remove-food:hover {
    background: #FEE2E2;
    color: #DC2626;
}

[b-3soal3mqbs] .btn-remove-food:active {
    background: #FECACA;
    color: #B91C1C;
}

[b-3soal3mqbs] .btn-remove-food i {
    font-size: 9px;
}

/* Serving controls - grouped tightly */
[b-3soal3mqbs] .selected-food-item .serving-controls-compact {
    display: contents; /* Children flow into grid */
}

/* Fixed serving controls - consistent 30px height matching design system */
[b-3soal3mqbs] .selected-food-item .fixed-amount-input,
[b-3soal3mqbs] .selected-food-item .fixed-unit-select {
    height: 30px !important;
    font-size: 13px;
    line-height: 1.2;
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    background-color: #FAFBFC;
    transition: all 0.1s ease;
    box-sizing: border-box;
}

[b-3soal3mqbs] .selected-food-item .fixed-amount-input {
    width: 55px;
    padding: 5px 6px;
    text-align: center;
}

[b-3soal3mqbs] .selected-food-item .fixed-unit-select {
    width: auto;
    min-width: 60px;
    max-width: 100px;
    padding: 5px 24px 5px 8px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}

[b-3soal3mqbs] .selected-food-item .fixed-amount-input:hover,
[b-3soal3mqbs] .selected-food-item .fixed-unit-select:hover {
    border-color: #D1D5DB;
    background-color: #F3F4F6;
}

[b-3soal3mqbs] .selected-food-item .fixed-amount-input:focus,
[b-3soal3mqbs] .selected-food-item .fixed-unit-select:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    outline: none;
}

/* Remove number input spinners */
[b-3soal3mqbs] .selected-food-item .fixed-amount-input::-webkit-outer-spin-button,
[b-3soal3mqbs] .selected-food-item .fixed-amount-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
[b-3soal3mqbs] .selected-food-item .fixed-amount-input[type=number] {
    -moz-appearance: textfield;
}

[b-3soal3mqbs] .selected-food-item .fixed-calories {
    font-size: 12px;
    color: #6B7280;
    white-space: nowrap;
}

/* Select dropdowns - fixed width for alignment */
[b-3soal3mqbs] .serving-controls-compact .form-select-sm {
    width: 100%;
    min-width: 85px;
    max-width: 130px;
    font-size: 13px;
    padding: 5px 28px 5px 10px;
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    background-color: #FAFBFC;
    height: 30px;
    line-height: 1.2;
    transition: all 0.1s ease;
    cursor: pointer;
}

[b-3soal3mqbs] .serving-controls-compact .form-select-sm:hover {
    border-color: #D1D5DB;
    background-color: #F3F4F6;
}

[b-3soal3mqbs] .serving-controls-compact .form-select-sm:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    outline: none;
}

/* Fixed amount input - matches select styling */
[b-3soal3mqbs] .serving-controls-compact .fixed-amount-input {
    width: 60px;
    min-width: 60px;
    max-width: 70px;
    font-size: 13px;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    background-color: #FAFBFC;
    height: 30px;
    line-height: 1.2;
    text-align: center;
    transition: all 0.1s ease;
}

[b-3soal3mqbs] .serving-controls-compact .fixed-amount-input:hover {
    border-color: #D1D5DB;
    background-color: #F3F4F6;
}

[b-3soal3mqbs] .serving-controls-compact .fixed-amount-input:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    outline: none;
}

/* Remove number input spinners */
[b-3soal3mqbs] .serving-controls-compact .fixed-amount-input::-webkit-outer-spin-button,
[b-3soal3mqbs] .serving-controls-compact .fixed-amount-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
[b-3soal3mqbs] .serving-controls-compact .fixed-amount-input[type=number] {
    -moz-appearance: textfield;
}

/* Fixed serving inline controls - unit select + amount input */
[b-3soal3mqbs] .selected-food-item .fixed-serving-inline {
    grid-column: 2 / 4; /* Span both select columns */
    display: flex;
    align-items: center;
    gap: 4px;
}

[b-3soal3mqbs] .fixed-serving-inline .fixed-serving-unit-amount {
    display: flex;
    align-items: center;
    gap: 4px;
}

[b-3soal3mqbs] .fixed-serving-inline .unit-select {
    width: auto;
    min-width: 60px;
    max-width: 100px;
    font-size: 13px;
    padding: 5px 24px 5px 8px;
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    background-color: #FAFBFC;
    height: 30px;
    line-height: 1.2;
    transition: all 0.1s ease;
    cursor: pointer;
}

[b-3soal3mqbs] .fixed-serving-inline .unit-select:hover {
    border-color: #D1D5DB;
    background-color: #F3F4F6;
}

[b-3soal3mqbs] .fixed-serving-inline .unit-select:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    outline: none;
}

[b-3soal3mqbs] .fixed-serving-inline .amount-input {
    width: 55px;
    font-size: 13px;
    padding: 5px 6px;
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    background-color: #FAFBFC;
    height: 30px;
    text-align: center;
    transition: all 0.1s ease;
}

[b-3soal3mqbs] .fixed-serving-inline .amount-input:hover {
    border-color: #D1D5DB;
    background-color: #F3F4F6;
}

[b-3soal3mqbs] .fixed-serving-inline .amount-input:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    outline: none;
}

/* Remove number input spinners for fixed serving */
[b-3soal3mqbs] .fixed-serving-inline .amount-input::-webkit-outer-spin-button,
[b-3soal3mqbs] .fixed-serving-inline .amount-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
[b-3soal3mqbs] .fixed-serving-inline .amount-input[type=number] {
    -moz-appearance: textfield;
}

[b-3soal3mqbs] .fixed-serving-inline .fixed-serving-calories {
    font-size: 12px;
    color: #6B7280;
    white-space: nowrap;
    margin-left: 4px;
}

/* Fixed serving badge - displays gram amount for fixed servings */
[b-3soal3mqbs] .selected-food-item .fixed-serving-badge {
    grid-column: 2 / 4; /* Span both select columns */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 16px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

[b-3soal3mqbs] .selected-food-item .fixed-serving-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

[b-3soal3mqbs] .fixed-serving-badge .fixed-serving-calories {
    font-weight: 500;
    opacity: 0.9;
    font-size: 11px;
}

/* Selected foods label - hidden for minimalist design */
[b-3soal3mqbs] .selected-label {
    display: none !important;
}

/* 2-column grid for desktop */
[b-3soal3mqbs] .selected-foods-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

[b-3soal3mqbs] .serving-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--fs-spacing-md);
}

/* Loading State - Polished overlay with backdrop blur */
[b-3soal3mqbs] .loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--fs-z-modal);
    animation: fadeIn-b-3soal3mqbs 0.2s ease-out;
}

@keyframes fadeIn-b-3soal3mqbs {
    from { opacity: 0; }
    to { opacity: 1; }
}

[b-3soal3mqbs] .loading-content {
    background: var(--fs-bg-primary);
    padding: var(--fs-spacing-2xl) var(--fs-spacing-3xl);
    border-radius: var(--fs-radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    gap: var(--fs-spacing-lg);
    animation: scaleIn-b-3soal3mqbs 0.25s ease-out;
}

@keyframes scaleIn-b-3soal3mqbs {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

[b-3soal3mqbs] .loading-content .spinner-border {
    animation: spin-b-3soal3mqbs 0.8s linear infinite;
}

@keyframes spin-b-3soal3mqbs {
    to { transform: rotate(360deg); }
}

/* Helper text styling */
[b-3soal3mqbs] .helper-text-desktop {
    font-size: var(--fs-font-size-sm);
    font-style: italic;
    color: var(--fs-text-secondary);
}

[b-3soal3mqbs] .helper-text-mobile {
    display: none;
}

/* Mobile Fix for TomSelect Dropdown Visibility */
@media (max-width: 768px) {
    /* CRITICAL: Make TomSelect dropdown visible on mobile */
    [b-3soal3mqbs] .ts-dropdown {
        position: fixed !important;
        z-index: 9999 !important;
        left: 10px !important;
        right: 10px !important;
        top: auto !important;
        bottom: auto !important;
        max-height: 50vh !important;
        background: white !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Make dropdown options touch-friendly */
    [b-3soal3mqbs] .ts-dropdown .option {
        padding: 12px 16px !important;
        font-size: 16px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    /* Ensure input is properly sized for mobile */
    [b-3soal3mqbs] .ts-control {
        min-height: 44px !important;
        font-size: 16px !important;
        padding: 8px 12px !important;
    }

    /* Better contrast for selected items */
    [b-3soal3mqbs] .ts-dropdown .option.active {
        background-color: var(--fs-primary-light) !important;
        color: var(--fs-primary) !important;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Mobile Layout Reordering - Button comes before selected foods */
    [b-3soal3mqbs] .split-food-selection {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Order 1: Search bar stays at top */
    [b-3soal3mqbs] .search-bar-wrapper {
        order: 1;
        margin-bottom: var(--fs-spacing-lg);
    }

    /* Order 2: Calculate button comes immediately after search */
    [b-3soal3mqbs] .calculate-button-row {
        order: 2 !important;
        margin-top: 0;
        margin-bottom: var(--fs-spacing-xl);
        padding: var(--fs-spacing-md) 0;
        background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.95) 20%);
        position: relative;
    }

    /* Add subtle separator after button */
    [b-3soal3mqbs] .calculate-button-row::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 5%;
        right: 5%;
        height: 1px;
        background: var(--fs-border-default);
        opacity: 0.3;
    }

    /* Order 3: Selected foods display comes last */
    [b-3soal3mqbs] .selected-foods-display {
        order: 3;
        margin-top: 0;
    }

    /* Ensure button is always visible and prominent on mobile */
    [b-3soal3mqbs] .calculate-btn {
        width: 100%;
        padding: var(--fs-spacing-md) var(--fs-spacing-xl);
        font-size: var(--fs-font-size-lg);
        font-weight: var(--fs-font-weight-semibold);
        box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
        border-radius: var(--fs-radius-md);
    }

    /* Page title mobile */
    [b-3soal3mqbs] .page-title {
        font-size: var(--fs-font-size-xl);
        margin: var(--fs-spacing-2xl) auto var(--fs-spacing-3xl);
        padding: 0 var(--fs-spacing-lg);
    }

    /* Custom Food Button Mobile */
    [b-3soal3mqbs] .custom-food-btn {
        width: 100%;
        justify-content: center;
        padding: var(--fs-spacing-md) var(--fs-spacing-2xl);
        font-size: var(--fs-font-size-lg);
    }

    [b-3soal3mqbs] .serving-row {
        grid-template-columns: 1fr;
        padding: var(--fs-spacing-md);
    }

    [b-3soal3mqbs] .serving-controls {
        grid-template-columns: 1fr 1fr;
        gap: var(--fs-spacing-sm);
        padding-top: var(--fs-spacing-sm);
    }

    [b-3soal3mqbs] .food-name {
        margin-bottom: 0;
        padding: var(--fs-spacing-xs) 0;
    }

    [b-3soal3mqbs] .form-select {
        font-size: 14px;
        padding: 6px 8px;
    }

    /* Mobile: Selected food item - Single line, no wrapping */
    [b-3soal3mqbs] .selected-food-item {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        padding: 8px 10px;
        background: transparent;
        border: none;
        border-radius: 4px;
        max-width: 100%;
        overflow: hidden;
        min-height: 40px;
    }

    [b-3soal3mqbs] .selected-food-item:hover {
        background: #F8FAFC;
    }

    /* Mobile: Food name - flexible width, truncate if needed */
    [b-3soal3mqbs] .selected-food-item .food-name {
        font-size: 14px;
        font-weight: 500;
        color: #374151;
        flex: 1 1 auto;
        min-width: 40px;
        max-width: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        order: unset;
    }

    /* Mobile: Serving controls inline */
    [b-3soal3mqbs] .selected-food-item .serving-controls-compact {
        display: flex;
        gap: 4px;
        flex: 0 0 auto;
        order: 2;
    }

    [b-3soal3mqbs] .serving-controls-compact .form-select-sm {
        min-width: 80px;
        height: 32px;
        font-size: 13px;
        padding: 6px 28px 6px 10px;
    }

    /* Mobile: Fixed serving controls - touch-friendly, consistent 30px height */
    [b-3soal3mqbs] .selected-food-item .fixed-amount-input,
    [b-3soal3mqbs] .selected-food-item .fixed-unit-select {
        height: 30px !important;
        font-size: 13px;
    }

    [b-3soal3mqbs] .selected-food-item .fixed-amount-input {
        width: 55px;
    }

    [b-3soal3mqbs] .selected-food-item .fixed-unit-select {
        min-width: 60px;
        max-width: 90px;
    }

    [b-3soal3mqbs] .selected-food-item .fixed-calories {
        font-size: 11px;
    }

    /* Mobile: Fixed serving inline controls - touch-friendly */
    [b-3soal3mqbs] .selected-food-item .fixed-serving-inline {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        order: 2;
        flex: 1 1 auto;
    }

    [b-3soal3mqbs] .fixed-serving-inline .fixed-serving-unit-amount {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    [b-3soal3mqbs] .fixed-serving-inline .unit-select {
        min-width: 70px;
        max-width: 110px;
        font-size: 14px;
        padding: 8px 28px 8px 10px;
        height: 36px;
    }

    [b-3soal3mqbs] .fixed-serving-inline .amount-input {
        width: 60px;
        font-size: 14px;
        padding: 8px 8px;
        height: 36px;
    }

    [b-3soal3mqbs] .fixed-serving-inline .fixed-serving-calories {
        font-size: 12px;
    }

    /* Mobile: Fixed serving badge - touch-friendly */
    [b-3soal3mqbs] .selected-food-item .fixed-serving-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: linear-gradient(135deg, #10B981 0%, #059669 100%);
        color: white;
        font-size: 12px;
        font-weight: 600;
        padding: 6px 14px;
        border-radius: 16px;
        order: 2;
        flex: 0 0 auto;
    }

    [b-3soal3mqbs] .fixed-serving-badge .fixed-serving-calories {
        font-size: 11px;
    }

    /* Mobile: Delete button - always visible, touch-friendly */
    [b-3soal3mqbs] .selected-food-item .btn-remove-food {
        width: 28px;
        height: 28px;
        min-width: 28px;
        background: #FEF2F2;
        border-radius: 4px;
        color: #EF4444;
        order: 3;
        opacity: 1; /* Always visible on touch devices */
    }

    [b-3soal3mqbs] .btn-remove-food i {
        font-size: 11px;
    }

    /* Mobile: Selected foods grid - compact stack */
    [b-3soal3mqbs] .selected-foods-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px;
    }

    /* Hide desktop helper text on mobile */
    [b-3soal3mqbs] .helper-text-desktop {
        display: none !important;
    }

    /* Show and style mobile helper text */
    [b-3soal3mqbs] .helper-text-mobile {
        display: block !important;
        font-size: var(--fs-font-size-sm);
        color: var(--fs-text-primary);
        background-color: var(--fs-primary-light);
        border: 1px solid var(--fs-primary);
        padding: var(--fs-spacing-md);
        border-radius: var(--fs-radius-sm);
        margin: var(--fs-spacing-sm) 0 var(--fs-spacing-lg);
        text-align: center;
        font-weight: var(--fs-font-weight-medium);
    }

    [b-3soal3mqbs] .helper-text-mobile i {
        color: var(--fs-primary);
    }
}

/* ============================================
   ACCESSIBILITY: Focus States
   WCAG 2.4.7 Focus Visible (Level AA)
   Shows focus indicator only for keyboard navigation
   ============================================ */
[b-3soal3mqbs] .btn-calculate:focus-visible,
[b-3soal3mqbs] .calculate-btn:focus-visible {
    outline: 3px solid var(--fs-primary);
    outline-offset: 2px;
}

[b-3soal3mqbs] .custom-food-btn:focus-visible {
    outline: 3px solid var(--fs-accent);
    outline-offset: 2px;
}

[b-3soal3mqbs] .quick-add-btn:focus-visible {
    outline: 3px solid var(--fs-primary);
    outline-offset: 2px;
}

[b-3soal3mqbs] .btn-remove-food:focus-visible {
    outline: 3px solid #DC2626;
    outline-offset: 2px;
}

[b-3soal3mqbs] .serving-controls-compact .form-select-sm:focus-visible {
    outline: 3px solid var(--fs-primary);
    outline-offset: 2px;
}

/* ============================================
   ACCESSIBILITY: Reduced Motion Support
   WCAG 2.3.3 Animation from Interactions (Level AAA)
   Respects user preference for reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    [b-3soal3mqbs] *,
    [b-3soal3mqbs] *::before,
    [b-3soal3mqbs] *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Disable specific animations */
    [b-3soal3mqbs] .selected-food-item {
        animation: none;
    }

    [b-3soal3mqbs] .loading-content {
        animation: none;
    }

    [b-3soal3mqbs] .loading-overlay {
        animation: none;
    }

    /* Hide shimmer effect */
    [b-3soal3mqbs] .btn-calculate::before,
    [b-3soal3mqbs] .calculate-btn::before {
        display: none;
    }
}

/* ============================================
   MOBILE: Hover Effect Isolation
   Prevents "sticky hover" on touch devices
   Only applies hover effects on devices that support hover
   ============================================ */
@media (hover: none) {
    /* Cancel hover transforms on touch devices */
    [b-3soal3mqbs] .custom-food-btn:hover {
        transform: none;
    }

    [b-3soal3mqbs] .btn-calculate:hover,
    [b-3soal3mqbs] .calculate-btn:hover {
        transform: none;
    }

    [b-3soal3mqbs] .btn-calculate:hover::before,
    [b-3soal3mqbs] .calculate-btn:hover::before {
        transform: translateX(-100%);
    }

    [b-3soal3mqbs] .quick-add-btn:hover {
        transform: none;
        background-color: var(--fs-bg-secondary);
        border-color: var(--fs-border-default);
        color: var(--fs-text-primary);
        box-shadow: none;
    }

    [b-3soal3mqbs] .quick-add-btn:hover::before {
        color: #6c757d;
    }

    [b-3soal3mqbs] .selected-food-item:hover {
        transform: none;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    /* Touch devices: delete button always visible */
    [b-3soal3mqbs] .btn-remove-food {
        opacity: 1;
        background: #FEF2F2;
        color: #EF4444;
    }

    [b-3soal3mqbs] .btn-remove-food:hover {
        transform: none;
        background: #FEE2E2;
        color: #DC2626;
        box-shadow: none;
    }

    [b-3soal3mqbs] .btn-remove-food:hover i {
        transform: none;
    }

    [b-3soal3mqbs] .custom-food-btn:hover .fa-plus {
        transform: none;
    }
}

/* ============================================
   MINIMAL MODE STYLES
   When embedded in MealPlanner split layout
   Removes card wrapper to prevent nested island effect
   ============================================ */

/* Container adjustments for minimal mode */
[b-3soal3mqbs] .minimal-mode-container {
    padding: 0 !important;
}

[b-3soal3mqbs] .minimal-mode-container .row {
    margin: 0 !important;
}

[b-3soal3mqbs] .minimal-mode-container .col-12 {
    padding: 0 !important;
}

/* Card wrapper becomes transparent in minimal mode */
[b-3soal3mqbs] .minimal-card-wrapper {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Card body has no padding in minimal mode */
[b-3soal3mqbs] .minimal-card-body {
    padding: 0 !important;
    background: transparent !important;
}

/* ============================================
   UNIFIED SERVING INPUT GROUP
   Override global CSS for consistent height
   Fixes height mismatch between input and select
   ============================================ */

/* High-specificity rules to override global styles */
[b-3soal3mqbs] .serving-input-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* Input styling - override global input { font-size: 1.8rem } from style.css */
[b-3soal3mqbs] .serving-input-group input.unified-serving-input,
[b-3soal3mqbs] .selected-food-item .serving-input-group input.unified-serving-input,
[b-3soal3mqbs] input.unified-serving-input {
    all: unset !important;
    display: inline-block !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    font-size: 14px !important;
    line-height: 24px !important;
    text-align: center !important;
    border: 1px solid #d1d5db !important;
    border-radius: 5px 0 0 5px !important;
    background: #fff !important;
    padding: 0 4px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    color: #374151 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Select styling - override global select { min-height: 36px } from meal-planner-mobile.css */
[b-3soal3mqbs] .serving-input-group select.unified-serving-select,
[b-3soal3mqbs] .selected-food-item .serving-input-group select.unified-serving-select,
[b-3soal3mqbs] select.unified-serving-select {
    all: unset !important;
    display: inline-block !important;
    width: auto !important;
    min-width: 42px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    font-size: 14px !important;
    line-height: 24px !important;
    border: 1px solid #d1d5db !important;
    border-left: none !important;
    border-radius: 0 5px 5px 0 !important;
    background: #fff !important;
    padding: 0 20px 0 6px !important;
    margin: 0 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    color: #374151 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%236B7280' d='M2 3.5L5 6.5L8 3.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
}

/* Hover states */
[b-3soal3mqbs] .serving-input-group input.unified-serving-input:hover,
[b-3soal3mqbs] .serving-input-group select.unified-serving-select:hover {
    border-color: #9ca3af !important;
    background-color: #f9fafb !important;
}

/* Focus states */
[b-3soal3mqbs] .serving-input-group input.unified-serving-input:focus,
[b-3soal3mqbs] .serving-input-group select.unified-serving-select:focus {
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15) !important;
    outline: none !important;
    z-index: 1 !important;
    position: relative !important;
}

/* Mobile overrides - keep same height on mobile too */
@media (max-width: 768px) {
    [b-3soal3mqbs] .serving-input-group input.unified-serving-input,
    [b-3soal3mqbs] .selected-food-item .serving-input-group input.unified-serving-input,
    [b-3soal3mqbs] input.unified-serving-input {
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        font-size: 14px !important;
    }

    [b-3soal3mqbs] .serving-input-group select.unified-serving-select,
    [b-3soal3mqbs] .selected-food-item .serving-input-group select.unified-serving-select,
    [b-3soal3mqbs] select.unified-serving-select {
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        font-size: 14px !important;
    }
}

/* iOS Safari specific - prevent zoom on focus */
@supports (-webkit-touch-callout: none) {
    [b-3soal3mqbs] .serving-input-group input.unified-serving-input,
    [b-3soal3mqbs] .serving-input-group select.unified-serving-select {
        font-size: 16px !important;
    }
}
/* /Components/FoodServingAmountFilter.razor.rz.scp.css */
/* FoodServingAmountFilter — card pattern matching MealsMacrosFilter */

.amount-filter-card[b-89phr7e04h] {
    background-color: #ffffff;
    border-radius: 12px;
}

.amount-filter-header[b-89phr7e04h] {
    background-color: #f8f9fa;
    border-radius: 12px 12px 0 0;
    padding: 1.25rem;
}

/* Row layout: flexbox for label + select */
.amount-filter-row[b-89phr7e04h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--mud-palette-divider-light, rgba(0, 0, 0, 0.05));
    transition: background-color 0.2s ease;
}

.amount-filter-row:last-of-type[b-89phr7e04h] {
    border-bottom: none;
}

.amount-filter-row:hover[b-89phr7e04h] {
    background-color: var(--mud-palette-surface-variant, rgba(0, 0, 0, 0.02));
    border-radius: 6px;
}

/* Label area: food name + badges inline */
.amount-filter-label[b-89phr7e04h] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 0 0 auto;
    min-width: 0;
}

.amount-filter-food-name[b-89phr7e04h] {
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    text-transform: capitalize;
    white-space: nowrap;
}

.amount-filter-unit-badge[b-89phr7e04h] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mud-palette-primary, #1976d2);
    background-color: rgba(25, 118, 210, 0.08);
    border-radius: 10px;
    white-space: nowrap;
}

.amount-filter-brand-badge[b-89phr7e04h] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    white-space: nowrap;
}

/* Select area: fills remaining space */
.amount-filter-select[b-89phr7e04h] {
    flex: 1 1 0;
    min-width: 180px;
    max-width: 320px;
}

/* Responsive: stack on mobile */
@media (max-width: 575.98px) {
    .amount-filter-row[b-89phr7e04h] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.75rem 0.25rem;
    }

    .amount-filter-select[b-89phr7e04h] {
        max-width: none;
    }
}

/* Accessibility */
.amount-filter-row:focus-within[b-89phr7e04h] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 6px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .amount-filter-card[b-89phr7e04h] {
        border: 2px solid;
    }

    .amount-filter-row[b-89phr7e04h] {
        border-bottom-width: 2px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .amount-filter-row[b-89phr7e04h] {
        transition: none;
    }
}
/* /Components/FoodServingSelections.razor.rz.scp.css */
/* FoodServingSelections Component Styles */

/* Container styles */
.food-serving-container[b-iimfnyq15c] {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}

.food-serving-container:hover[b-iimfnyq15c] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.food-serving-content[b-iimfnyq15c] {
    padding: 1rem 1.5rem;
}

/* Typography */
.food-serving-title[b-iimfnyq15c] {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--mud-palette-text-primary);
}

.food-serving-section-title[b-iimfnyq15c] {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Serving panel styles */
.serving-panel[b-iimfnyq15c] {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--mud-palette-divider-light, rgba(0, 0, 0, 0.05));
    transition: background-color 0.2s ease;
}

.serving-panel:last-child[b-iimfnyq15c] {
    border-bottom: none;
}

.serving-panel:hover[b-iimfnyq15c] {
    background-color: var(--mud-palette-surface-variant, rgba(0, 0, 0, 0.02));
    border-radius: 6px;
    margin: 0.25rem -0.5rem;
    padding: 0.75rem 0.5rem;
}

/* Food name styles */
.food-name[b-iimfnyq15c] {
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    text-transform: capitalize;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.food-brand[b-iimfnyq15c] {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    margin-top: 0.25rem;
}

/* Select controls container */
.serving-controls[b-iimfnyq15c] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .serving-controls[b-iimfnyq15c] {
        flex-direction: row;
        gap: 1rem;
    }
}

/* Button styles */
.action-button[b-iimfnyq15c] {
    width: 100%;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
}

.action-button:hover:not(:disabled)[b-iimfnyq15c] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
}

/* Animation styles */
.fade-in-delay[b-iimfnyq15c] {
    animation: fadeInUp-b-iimfnyq15c 0.5s ease-in 0.6s both;
}

@keyframes fadeInUp-b-iimfnyq15c {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading state styles */
.loading-content[b-iimfnyq15c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Fixed serving row styles */
.fixed-serving-row[b-iimfnyq15c] {
    background-color: rgba(156, 39, 176, 0.06);
    border-left: 3px solid var(--mud-palette-secondary);
    border-radius: 0 6px 6px 0;
    margin-left: -0.5rem;
    padding-left: 0.5rem;
}

.fixed-serving-row:hover[b-iimfnyq15c] {
    background-color: rgba(156, 39, 176, 0.1);
}

.fixed-badge[b-iimfnyq15c] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background-color: var(--mud-palette-secondary);
    color: white;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Recalculation notice */
.recalculation-notice[b-iimfnyq15c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    background-color: rgba(25, 118, 210, 0.08);
    border-left: 3px solid var(--mud-palette-primary, #1976d2);
    border-radius: 0 6px 6px 0;
    color: var(--mud-palette-text-primary);
    font-size: 0.875rem;
    font-weight: 500;
}

.recalculation-notice i[b-iimfnyq15c] {
    color: var(--mud-palette-primary, #1976d2);
    font-size: 1rem;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .food-serving-content[b-iimfnyq15c] {
        padding: 0.75rem 1rem;
    }
    
    .food-serving-title[b-iimfnyq15c] {
        font-size: 1.125rem;
    }
    
    .food-serving-section-title[b-iimfnyq15c] {
        font-size: 0.9rem;
    }
    
    .serving-panel[b-iimfnyq15c] {
        margin-bottom: 0.75rem;
    }
    
    .food-name[b-iimfnyq15c] {
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 575.98px) {
    .food-serving-content[b-iimfnyq15c] {
        padding: 0.5rem 0.75rem;
    }
    
    .serving-panel[b-iimfnyq15c] {
        padding: 0.75rem 0;
    }
}

/* Accessibility improvements */
.serving-panel:focus-within[b-iimfnyq15c] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 6px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .food-serving-container[b-iimfnyq15c] {
        border-width: 2px;
    }
    
    .serving-panel[b-iimfnyq15c] {
        border-bottom-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .fade-in-delay[b-iimfnyq15c],
    .action-button[b-iimfnyq15c],
    .food-serving-container[b-iimfnyq15c],
    .serving-panel[b-iimfnyq15c] {
        animation: none;
        transition: none;
    }
}
/* /Components/HowItWorksAnimation.razor.rz.scp.css */
/* ==========================================================================
   HowItWorksAnimation - Animated Value Proposition Schema
   Shows: Your Foods → Portion Pilot → Your Portions
   ========================================================================== */

.how-it-works-animation[b-pthtua9xia] {
    padding: 2rem 1rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.how-it-works-animation.visible[b-pthtua9xia] {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Main Container - Horizontal Flow Layout
   ========================================================================== */

.animation-container[b-pthtua9xia] {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    max-width: 1000px;
    margin: 0 auto;
    min-height: 320px;
}

/* ==========================================================================
   Panel Styles (Foods & Portions)
   ========================================================================== */

.panel[b-pthtua9xia] {
    flex: 1;
    max-width: 280px;
    background: #ffffff;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel.active[b-pthtua9xia] {
    opacity: 1;
    transform: scale(1);
}

.panel-header[b-pthtua9xia] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f0f4f8;
}

.panel-icon[b-pthtua9xia] {
    font-size: 1.5rem;
}

.panel-header h3[b-pthtua9xia] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    margin: 0;
}

.panel-content[b-pthtua9xia] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.panel-footer[b-pthtua9xia] {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f0f4f8;
}

.panel-tagline[b-pthtua9xia] {
    font-size: 0.8rem;
    color: #718096;
    font-style: italic;
}

/* ==========================================================================
   Food Items (Left Panel)
   ========================================================================== */

.food-item[b-pthtua9xia] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border-radius: 10px;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.food-item.visible[b-pthtua9xia] {
    opacity: 1;
    transform: translateX(0);
}

.food-emoji[b-pthtua9xia] {
    font-size: 1.4rem;
}

.food-name[b-pthtua9xia] {
    font-size: 0.95rem;
    color: #4a5568;
    font-weight: 500;
}

/* ==========================================================================
   Flow Section (Arrows + Calculator)
   ========================================================================== */

.flow-section[b-pthtua9xia] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    flex-shrink: 0;
}

.flow-arrow[b-pthtua9xia] {
    width: 50px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.flow-arrow.active[b-pthtua9xia] {
    opacity: 1;
}

.arrow-svg[b-pthtua9xia] {
    width: 100%;
    height: 20px;
}

.arrow-line[b-pthtua9xia] {
    stroke-dashoffset: 60;
    animation: none;
}

.flow-arrow.active .arrow-line[b-pthtua9xia] {
    animation: drawLine-b-pthtua9xia 0.8s ease-out forwards;
}

@keyframes drawLine-b-pthtua9xia {
    to {
        stroke-dashoffset: 0;
    }
}

.arrow-head[b-pthtua9xia] {
    opacity: 0;
    transition: opacity 0.3s ease 0.5s;
}

.flow-arrow.active .arrow-head[b-pthtua9xia] {
    opacity: 1;
}

/* ==========================================================================
   Calculator Box (Center)
   ========================================================================== */

.calculator-box[b-pthtua9xia] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #fff8f0 0%, #fff0e0 100%);
    border: 2px solid rgba(240, 138, 18, 0.2);
    border-radius: 16px;
    min-width: 160px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.calculator-box.active[b-pthtua9xia] {
    opacity: 1;
    transform: scale(1);
}

.calculator-box.processing[b-pthtua9xia] {
    border-color: rgba(240, 138, 18, 0.5);
    box-shadow: 0 0 20px rgba(240, 138, 18, 0.2);
}

.calculator-box.complete[b-pthtua9xia] {
    border-color: rgba(72, 187, 120, 0.5);
    background: linear-gradient(135deg, #f0fff4 0%, #e6ffed 100%);
}

.calculator-icon[b-pthtua9xia] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.processing-spinner[b-pthtua9xia] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(240, 138, 18, 0.2);
    border-top-color: #f08a12;
    border-radius: 50%;
    animation: spin-b-pthtua9xia 0.8s linear infinite;
}

@keyframes spin-b-pthtua9xia {
    to {
        transform: rotate(360deg);
    }
}

.calculator-label[b-pthtua9xia] {
    font-size: 1rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 0.25rem;
}

.calculator-subtitle[b-pthtua9xia] {
    font-size: 0.75rem;
    color: #718096;
    text-align: center;
    max-width: 120px;
}

.calculating-text[b-pthtua9xia] {
    color: #f08a12;
    font-weight: 500;
}

.calculator-timer[b-pthtua9xia] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.75rem;
    padding: 0.375rem 0.75rem;
    background: rgba(240, 138, 18, 0.1);
    border-radius: 20px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease 0.3s;
}

.calculator-timer.visible[b-pthtua9xia] {
    opacity: 1;
    transform: translateY(0);
}

.timer-icon[b-pthtua9xia] {
    font-size: 0.875rem;
}

.timer-text[b-pthtua9xia] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #f08a12;
}

/* ==========================================================================
   Portion Items (Right Panel)
   ========================================================================== */

.portions-panel .panel-header[b-pthtua9xia] {
    border-bottom-color: rgba(72, 187, 120, 0.3);
}

.portions-panel .panel-icon[b-pthtua9xia] {
    color: #48bb78;
}

.portion-item[b-pthtua9xia] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, #f0fff4 0%, #e6ffed 100%);
    border-radius: 10px;
    border-left: 3px solid #48bb78;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.portion-item.visible[b-pthtua9xia] {
    opacity: 1;
    transform: translateX(0);
}

.portion-check[b-pthtua9xia] {
    color: #48bb78;
    font-weight: 700;
    font-size: 0.875rem;
}

.portion-unit[b-pthtua9xia] {
    font-size: 0.9rem;
    color: #2d3748;
    font-weight: 600;
}

.portion-grams[b-pthtua9xia] {
    font-size: 0.8rem;
    color: #718096;
    margin-left: auto;
}

/* ==========================================================================
   Cycle Indicator Dots
   ========================================================================== */

.cycle-indicators[b-pthtua9xia] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.cycle-dot[b-pthtua9xia] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: #e2e8f0;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.cycle-dot:hover[b-pthtua9xia] {
    background: #cbd5e0;
    transform: scale(1.2);
}

.cycle-dot.active[b-pthtua9xia] {
    background: #f08a12;
    transform: scale(1.2);
}

/* ==========================================================================
   Responsive: Tablet
   ========================================================================== */

@media (max-width: 900px) {
    .animation-container[b-pthtua9xia] {
        gap: 0;
    }

    .panel[b-pthtua9xia] {
        max-width: 220px;
        padding: 1.25rem;
    }

    .flow-arrow[b-pthtua9xia] {
        width: 40px;
    }

    .calculator-box[b-pthtua9xia] {
        min-width: 140px;
        padding: 1rem 1.25rem;
    }

    .calculator-icon[b-pthtua9xia] {
        font-size: 1.75rem;
    }

    .calculator-label[b-pthtua9xia] {
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   Responsive: Mobile - Stack Vertically
   ========================================================================== */

@media (max-width: 700px) {
    .animation-container[b-pthtua9xia] {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .panel[b-pthtua9xia] {
        max-width: 100%;
        width: 100%;
    }

    .flow-section[b-pthtua9xia] {
        flex-direction: column;
        padding: 0.5rem 0;
    }

    .flow-arrow[b-pthtua9xia] {
        transform: rotate(90deg);
        width: 40px;
        margin: 0.5rem 0;
    }

    .left-arrow[b-pthtua9xia] {
        order: 1;
    }

    .calculator-box[b-pthtua9xia] {
        order: 2;
    }

    .right-arrow[b-pthtua9xia] {
        order: 3;
    }

    .foods-panel[b-pthtua9xia] {
        order: 0;
    }

    .portions-panel[b-pthtua9xia] {
        order: 4;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .how-it-works-animation[b-pthtua9xia],
    .panel[b-pthtua9xia],
    .food-item[b-pthtua9xia],
    .portion-item[b-pthtua9xia],
    .calculator-box[b-pthtua9xia],
    .flow-arrow[b-pthtua9xia],
    .calculator-timer[b-pthtua9xia],
    .cycle-dot[b-pthtua9xia] {
        transition: none;
        animation: none;
    }

    .panel.active[b-pthtua9xia],
    .food-item.visible[b-pthtua9xia],
    .portion-item.visible[b-pthtua9xia],
    .calculator-box.active[b-pthtua9xia],
    .flow-arrow.active[b-pthtua9xia],
    .calculator-timer.visible[b-pthtua9xia] {
        opacity: 1;
        transform: none;
    }

    .processing-spinner[b-pthtua9xia] {
        animation: none;
        border-color: #f08a12;
    }

    .arrow-line[b-pthtua9xia] {
        stroke-dashoffset: 0;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-53vfg3vg6c] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-53vfg3vg6c] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/MainPageIntro.razor.rz.scp.css */
/* ==========================================================================
   Scroll-Reveal Landing Page - Natural Flow with Reveal Animations
   Better UX than scroll-snap for content-light sections (avoids false bottom)
   ========================================================================== */

.snap-container[b-5wv6s6vylt] {
    /* Normal scrolling - no snap */
}

.snap-section[b-5wv6s6vylt] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem 1rem;
    position: relative;
    /* Scroll-reveal animation */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.snap-section.visible[b-5wv6s6vylt] {
    opacity: 1;
    transform: translateY(0);
}

/* Hero section - no animation, always visible */
.snap-hero[b-5wv6s6vylt] {
    padding: 0;
    opacity: 1;
    transform: none;
}

.snap-hero > :first-child[b-5wv6s6vylt] {
    width: 100%;
}

/* ==========================================================================
   Side Pagination Dots - Shows current section position
   Best practice for full-page scroll experiences (fullPage.js pattern)
   ========================================================================== */

.snap-pagination[b-5wv6s6vylt] {
    position: fixed;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 20px;
}

.snap-dot[b-5wv6s6vylt] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(100, 116, 139, 0.4);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    position: relative;
}

.snap-dot:hover[b-5wv6s6vylt] {
    border-color: #f08a12;
    transform: scale(1.2);
}

.snap-dot.active[b-5wv6s6vylt] {
    background: #f08a12;
    border-color: #f08a12;
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(240, 138, 18, 0.5);
}

/* Tooltip on hover */
.snap-dot[b-5wv6s6vylt]::before {
    content: attr(title);
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(45, 55, 72, 0.95);
    color: white;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
}

.snap-dot[b-5wv6s6vylt]::after {
    content: '';
    position: absolute;
    right: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: rgba(45, 55, 72, 0.95);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.snap-dot:hover[b-5wv6s6vylt]::before,
.snap-dot:hover[b-5wv6s6vylt]::after {
    opacity: 1;
    visibility: visible;
}

/* Focus styles for accessibility */
.snap-dot:focus[b-5wv6s6vylt] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(240, 138, 18, 0.3);
}

.snap-dot:focus-visible[b-5wv6s6vylt] {
    outline: 2px solid #f08a12;
    outline-offset: 2px;
}

/* Content wrapper for centering within sections */
.snap-content[b-5wv6s6vylt] {
    width: 100%;
    max-width: 1100px;
    padding: 0 1rem;
}

/* Alternating section backgrounds */
.snap-animation[b-5wv6s6vylt] {
    background: #ffffff;
}

.snap-journey[b-5wv6s6vylt] {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.snap-comparison[b-5wv6s6vylt] {
    background: #ffffff;
}

.snap-features[b-5wv6s6vylt] {
    background: linear-gradient(180deg, #fff8f0 0%, #ffffff 100%);
}

.snap-faq[b-5wv6s6vylt] {
    background: #f8fafc;
}

.snap-cta[b-5wv6s6vylt] {
    background: linear-gradient(135deg, #fff8f0 0%, #fff0e0 100%);
}

/* Features + Beta combined wrapper */
.features-beta-wrapper[b-5wv6s6vylt] {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-items: center;
}

/* FAQ wrapper for centering */
.faq-wrapper[b-5wv6s6vylt] {
    max-width: 700px;
    margin: 0 auto;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .snap-section[b-5wv6s6vylt] {
        padding: 2.5rem 0.75rem;
    }

    .snap-content[b-5wv6s6vylt] {
        padding: 0 0.5rem;
    }

    /* Smaller, more subtle pagination on mobile */
    .snap-pagination[b-5wv6s6vylt] {
        right: 0.75rem;
        gap: 0.5rem;
        padding: 0.5rem 0.35rem;
    }

    .snap-dot[b-5wv6s6vylt] {
        width: 8px;
        height: 8px;
        border-width: 1.5px;
    }

    /* Hide tooltips on mobile - just use dots */
    .snap-dot[b-5wv6s6vylt]::before,
    .snap-dot[b-5wv6s6vylt]::after {
        display: none;
    }
}

/* Small mobile */
@media (max-width: 576px) {
    .snap-section[b-5wv6s6vylt] {
        padding: 2rem 0.5rem;
    }
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .snap-section[b-5wv6s6vylt] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .snap-dot[b-5wv6s6vylt],
    .snap-dot[b-5wv6s6vylt]::before,
    .snap-dot[b-5wv6s6vylt]::after {
        transition: none;
    }
}

/* ==========================================================================
   Original Styles Below
   ========================================================================== */

.intro-card[b-5wv6s6vylt] {
    background-color: white;
    border-radius: 1rem;
    padding: 2rem 3rem;
    overflow: hidden;
    transition: all 0.3s ease;
}



/* Video Section Styles */
.video-section[b-5wv6s6vylt] {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    /*
     * REMOVED: animation: fadeInUp 0.8s ease-out;
     * This animation was causing a white flash during Blazor prerender-to-interactive transition
     * because it starts at opacity: 0 and the animation restarts during hydration.
     * The video section now appears instantly without animation to prevent the flash.
     */
}

/* Kept for reference but no longer used on .video-section */
@keyframes fadeInUp-b-5wv6s6vylt {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .video-section[b-5wv6s6vylt] {
        animation: none;
    }
    
    .video-container[b-5wv6s6vylt],
    .intro-video[b-5wv6s6vylt],
    .video-container[b-5wv6s6vylt]::before {
        transition: none;
    }
    
    .video-container:hover[b-5wv6s6vylt] {
        transform: none;
    }
    
    .intro-video:hover[b-5wv6s6vylt] {
        transform: none;
    }
}

.video-container[b-5wv6s6vylt] {
    position: relative;
    width: 90%;
    max-width: 1000px;
    margin: 1rem auto 2rem;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 0.5rem;
    transition: all 0.3s ease;
}

.video-container[b-5wv6s6vylt]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(240, 138, 18, 0.1) 0%, rgba(245, 167, 66, 0.05) 100%);
    border-radius: 1rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.video-container:hover[b-5wv6s6vylt]::before {
    opacity: 1;
}

.video-container:hover[b-5wv6s6vylt] {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.video-container .ratio[b-5wv6s6vylt] {
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: #000;
    position: relative;
    z-index: 2;
}

.video-wrapper[b-5wv6s6vylt] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.intro-video[b-5wv6s6vylt] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
    border-radius: 0.75rem;
    background-color: #000;
    z-index: 2;
    pointer-events: auto;
}

.video-poster-overlay[b-5wv6s6vylt] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 0.75rem;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.3s ease;
    opacity: 1;
}

.video-poster-overlay.hidden[b-5wv6s6vylt] {
    opacity: 0 !important;
    pointer-events: none;
}

.poster-image[b-5wv6s6vylt] {
    max-width: 50%;
    max-height: 50%;
    object-fit: contain;
    opacity: 0.8;
}



.intro-video:focus[b-5wv6s6vylt] {
    outline: 3px solid rgba(240, 138, 18, 0.5);
    outline-offset: 2px;
}

/* Enhanced Feature List Styles - Horizontal for scroll-snap */
.feature-list[b-5wv6s6vylt] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1.25rem;
    margin-bottom: 0;
}

.feature-item[b-5wv6s6vylt] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem 1.25rem;
    transition: transform 0.2s ease-in-out;
    flex: 0 0 280px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin-bottom: 0;
}

.feature-item:hover[b-5wv6s6vylt] {
    transform: translateY(-3px);
}

.feature-icon[b-5wv6s6vylt] {
    display: none;
}

.feature-content[b-5wv6s6vylt] {
    text-align: center;
}

.feature-content h2[b-5wv6s6vylt] {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.feature-content p[b-5wv6s6vylt] {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.4;
    margin-bottom: 0;
}

/* CTA Button */
.cta-container[b-5wv6s6vylt] {
    text-align: center;
}

.cta-button[b-5wv6s6vylt] {
    background: linear-gradient(to right, #f08a12, #f5a742);
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1.2rem 2.5rem; /* Increased height by ~20% */
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 8px 20px rgba(240, 138, 18, 0.3); /* Enhanced subtle shadow */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cta-button:hover[b-5wv6s6vylt], .cta-button:focus[b-5wv6s6vylt] {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(240, 138, 18, 0.35);
}

.cta-button:active[b-5wv6s6vylt] {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(240, 138, 18, 0.3);
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .intro-card[b-5wv6s6vylt] {
        padding: 2.5rem;
    }

    .video-container[b-5wv6s6vylt] {
        max-width: 100%;
        padding: 0.4rem;
    }

    .video-section[b-5wv6s6vylt] {
        margin-bottom: 2.5rem;
    }

    .feature-item[b-5wv6s6vylt] {
        gap: 1.25rem;
    }

}

@media (max-width: 768px) {
    .intro-card[b-5wv6s6vylt] {
        padding: 1rem 1.5rem;
    }

    .video-container[b-5wv6s6vylt] {
        width: 100%;
        margin: 1rem auto 2rem;
        padding: 0.3rem;
        border-radius: 0.75rem;
    }

    .video-container .ratio[b-5wv6s6vylt] {
        border-radius: 0.5rem;
    }

    .video-section[b-5wv6s6vylt] {
        margin-bottom: 1.5rem;
    }

    .feature-content h3[b-5wv6s6vylt] {
        font-size: 1.15rem;
    }

    .feature-content p[b-5wv6s6vylt] {
        font-size: 0.95rem;
    }

    .cta-button[b-5wv6s6vylt] {
        width: 100%;
        padding: 1.2rem 1.5rem; /* Increased height by ~20% */
    }
}

@media (max-width: 576px) {
    .intro-card[b-5wv6s6vylt] {
        padding: 0.75rem 1rem;
    }

    .video-container[b-5wv6s6vylt] {
        width: 100%;
        margin: 0.5rem auto 1.5rem;
        padding: 0.25rem;
        border-radius: 0.5rem;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    .video-container .ratio[b-5wv6s6vylt] {
        border-radius: 0.375rem;
    }

    .video-container:hover[b-5wv6s6vylt] {
        transform: none;
    }

    .intro-video:hover[b-5wv6s6vylt] {
        transform: none;
    }

    .video-section[b-5wv6s6vylt] {
        margin-bottom: 1rem;
    }

    .feature-item[b-5wv6s6vylt] {
        padding: 1rem 1.5rem;
        max-width: 100%;
    }
    
    .feature-content h2[b-5wv6s6vylt] {
        font-size: 1.1rem;
    }
    
    .feature-content p[b-5wv6s6vylt] {
        font-size: 0.9rem;
    }

}

/* Benefits Section */
.benefits-section[b-5wv6s6vylt] {
    background: #f8f9fa;
    padding: 4rem 0;
}

.benefit-card[b-5wv6s6vylt] {
    background: white;
    border-radius: 15px;
    padding: 3rem 2rem;
    min-height: 250px;
    height: 100%;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.benefit-card:hover[b-5wv6s6vylt] {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.benefit-card i[b-5wv6s6vylt] {
    margin-bottom: 1rem;
}

.benefit-card h3[b-5wv6s6vylt] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1.4rem;
    line-height: 1.5;
}

.benefit-card p[b-5wv6s6vylt] {
    color: #6c757d;
    line-height: 1.6;
}

/* Video section styling */
.video-section[b-5wv6s6vylt] {
    margin-bottom: 3rem;
}

.video-container[b-5wv6s6vylt] {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}


/* CTA section - Soft warm background, orange button pops */
.cta-container[b-5wv6s6vylt] {
    background: linear-gradient(135deg, #fff8f0 0%, #fff0e0 100%);
    color: #2d3748;
    padding: 4rem 2rem;
    border-radius: 20px;
    margin-top: 3rem;
    border: 1px solid rgba(240, 138, 18, 0.15);
}

.cta-container h2[b-5wv6s6vylt] {
    color: #2d3748;
    font-weight: 700;
}

/* CTA subtext styling for better readability */
.cta-subtext[b-5wv6s6vylt] {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 500;
    letter-spacing: 0.025em;
}

.cta-button[b-5wv6s6vylt] {
    background: linear-gradient(135deg, #f08a12 0%, #e67300 100%);
    color: white;
    border: none;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(240, 138, 18, 0.35);
}

.cta-button:hover[b-5wv6s6vylt] {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(240, 138, 18, 0.45);
    background: linear-gradient(135deg, #e67300 0%, #d56a00 100%);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .feature-list[b-5wv6s6vylt] {
        flex-direction: column;
        align-items: center;
    }

    .feature-item[b-5wv6s6vylt] {
        flex-direction: column;
        text-align: center;
        min-width: unset;
        max-width: 100%;
        width: 100%;
    }


    .cta-container[b-5wv6s6vylt] {
        padding: 2rem 1rem;
    }

    .cta-button[b-5wv6s6vylt] {
        font-size: 1rem;
        padding: 0.875rem 1.5rem;
    }
}

/* ==========================================================================
   Why Choose Us & Beta Sections - Mobile Alignment Fix (Gestalt Proximity)
   Fixes checkmark/text grouping on mobile for better visual association
   ========================================================================== */

.why-choose-section h3[b-5wv6s6vylt],
.beta-section h3[b-5wv6s6vylt] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a202c;
}

/* Mobile: Card-style layout with left-aligned content */
@media (max-width: 768px) {
    .why-choose-section .d-flex[b-5wv6s6vylt],
    .beta-section .d-flex[b-5wv6s6vylt] {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        background: #f8fafc;
        padding: 1rem 1.25rem;
        border-radius: 12px;
        margin-bottom: 0.75rem;
        text-align: left;
        border: 1px solid #e2e8f0;
    }

    .why-choose-section .d-flex:last-child[b-5wv6s6vylt],
    .beta-section .d-flex:last-child[b-5wv6s6vylt] {
        margin-bottom: 0;
    }

    .why-choose-section .fa-check[b-5wv6s6vylt],
    .why-choose-section .fa-check-circle[b-5wv6s6vylt],
    .beta-section .fa-check[b-5wv6s6vylt],
    .beta-section .fa-check-circle[b-5wv6s6vylt] {
        flex-shrink: 0;
        margin-top: 2px;
        font-size: 0.875rem;
    }

    .why-choose-section span[b-5wv6s6vylt],
    .beta-section span[b-5wv6s6vylt] {
        font-size: 0.95rem;
        line-height: 1.5;
        color: #374151;
    }
}

/* Tablet: Slightly smaller cards */
@media (min-width: 769px) and (max-width: 992px) {
    .why-choose-section .d-flex[b-5wv6s6vylt],
    .beta-section .d-flex[b-5wv6s6vylt] {
        padding: 0.75rem 1rem;
    }
}

/* ==========================================================================
   Sticky CTA Bar (Mobile) - Hidden during scroll-snap experience
   ========================================================================== */

.sticky-cta-bar[b-5wv6s6vylt] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
    padding: 0.875rem 1rem;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 1px solid rgba(240, 138, 18, 0.2);
    display: none; /* Hidden by default when using scroll-snap */
}

.sticky-cta-bar.visible[b-5wv6s6vylt] {
    transform: translateY(0);
}

.sticky-cta-bar.hidden-by-user[b-5wv6s6vylt] {
    display: none;
}

.sticky-cta-content[b-5wv6s6vylt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 600px;
    margin: 0 auto;
    gap: 1rem;
}

.sticky-cta-text[b-5wv6s6vylt] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.sticky-cta-headline[b-5wv6s6vylt] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #2d3748;
}

.sticky-cta-subtext[b-5wv6s6vylt] {
    font-size: 0.75rem;
    color: #6c757d;
}

.sticky-cta-button[b-5wv6s6vylt] {
    background: linear-gradient(135deg, #f08a12 0%, #e67300 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(240, 138, 18, 0.35);
    white-space: nowrap;
    flex-shrink: 0;
}

.sticky-cta-button:hover[b-5wv6s6vylt] {
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(240, 138, 18, 0.45);
}

.sticky-cta-button:active[b-5wv6s6vylt] {
    transform: scale(0.98);
}

.sticky-cta-close[b-5wv6s6vylt] {
    position: absolute;
    top: -10px;
    right: 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: #f8f9fa;
    color: #6c757d;
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.sticky-cta-close:hover[b-5wv6s6vylt] {
    background: #e9ecef;
    color: #2d3748;
}

/* ==========================================================================
   Floating CTA Button (Desktop) - Bottom right corner
   ========================================================================== */

.floating-cta[b-5wv6s6vylt] {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.9);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-cta.visible[b-5wv6s6vylt] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.floating-cta-button[b-5wv6s6vylt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #f08a12 0%, #e67300 100%);
    color: white;
    border: none;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(240, 138, 18, 0.4);
}

.floating-cta-button:hover[b-5wv6s6vylt] {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(240, 138, 18, 0.5);
}

.floating-cta-button:active[b-5wv6s6vylt] {
    transform: translateY(-1px);
}

.floating-cta-icon[b-5wv6s6vylt] {
    font-size: 1.25rem;
}

.floating-cta-text[b-5wv6s6vylt] {
    font-size: 0.95rem;
}

/* ==========================================================================
   Responsive Behavior: Mobile vs Desktop
   ========================================================================== */

/* Mobile: Show sticky bar, hide floating button */
@media (max-width: 991px) {
    .sticky-cta-bar[b-5wv6s6vylt] {
        /* Shown on mobile */
    }

    .floating-cta[b-5wv6s6vylt] {
        display: none !important;
    }
}

/* Desktop: Hide sticky bar, show floating button */
@media (min-width: 992px) {
    .sticky-cta-bar[b-5wv6s6vylt] {
        display: none !important;
    }

    .floating-cta[b-5wv6s6vylt] {
        /* Shown on desktop */
    }
}

/* Extra small screens - more compact sticky bar */
@media (max-width: 400px) {
    .sticky-cta-content[b-5wv6s6vylt] {
        gap: 0.5rem;
    }

    .sticky-cta-headline[b-5wv6s6vylt] {
        font-size: 0.85rem;
    }

    .sticky-cta-subtext[b-5wv6s6vylt] {
        display: none;
    }

    .sticky-cta-button[b-5wv6s6vylt] {
        padding: 0.625rem 1rem;
        font-size: 0.85rem;
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .sticky-cta-bar[b-5wv6s6vylt],
    .floating-cta[b-5wv6s6vylt],
    .sticky-cta-button[b-5wv6s6vylt],
    .floating-cta-button[b-5wv6s6vylt] {
        transition: none;
    }
}

/* ==========================================================================
   FAQ Section - Expandable Q&A

   SEO Note: FAQPage schema is included for AI search optimization (3.2x more
   likely to appear in AI Overviews). Traditional FAQ rich snippets in Google
   SERPs are restricted to government/health authorities since 2023.
   ========================================================================== */

.faq-section[b-5wv6s6vylt] {
    background: #ffffff;
    padding: 3rem 0;
}

.faq-section h2[b-5wv6s6vylt] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 2rem;
}

.faq-list[b-5wv6s6vylt] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item[b-5wv6s6vylt] {
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: all 0.2s ease;
}

.faq-item:hover[b-5wv6s6vylt] {
    border-color: #f08a12;
    box-shadow: 0 4px 12px rgba(240, 138, 18, 0.1);
}

.faq-item[open][b-5wv6s6vylt] {
    background: #fff8f0;
    border-color: rgba(240, 138, 18, 0.3);
}

.faq-question[b-5wv6s6vylt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.faq-question[b-5wv6s6vylt]::-webkit-details-marker {
    display: none;
}

/* WCAG 2.4.7 Focus Visible - Clear focus indicator for keyboard users */
.faq-question:focus[b-5wv6s6vylt] {
    outline: 2px solid #f08a12;
    outline-offset: 2px;
    border-radius: 8px;
}

.faq-question:focus:not(:focus-visible)[b-5wv6s6vylt] {
    outline: none;
}

.faq-question:focus-visible[b-5wv6s6vylt] {
    outline: 2px solid #f08a12;
    outline-offset: 2px;
    border-radius: 8px;
}

.faq-question span[b-5wv6s6vylt] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #2d3748;
    flex: 1;
    padding-right: 1rem;
}

.faq-icon[b-5wv6s6vylt] {
    color: #6c757d;
    font-size: 0.875rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-item[open] .faq-icon[b-5wv6s6vylt] {
    transform: rotate(180deg);
    color: #f08a12;
}

.faq-answer[b-5wv6s6vylt] {
    padding: 0 1.5rem 1.25rem;
}

.faq-answer p[b-5wv6s6vylt] {
    color: #4a5568;
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .faq-section[b-5wv6s6vylt] {
        padding: 2rem 0;
    }

    .faq-section h2[b-5wv6s6vylt] {
        font-size: 1.5rem;
    }

    .faq-question[b-5wv6s6vylt] {
        padding: 1rem 1.25rem;
    }

    .faq-question span[b-5wv6s6vylt] {
        font-size: 0.95rem;
    }

    .faq-answer[b-5wv6s6vylt] {
        padding: 0 1.25rem 1rem;
    }

    .faq-answer p[b-5wv6s6vylt] {
        font-size: 0.9rem;
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .faq-item[b-5wv6s6vylt],
    .faq-icon[b-5wv6s6vylt] {
        transition: none;
    }
}

/* ==========================================================================
   Social Proof Section - Stats Display
   ========================================================================== */

.social-proof-section[b-5wv6s6vylt] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    border: 1px solid #e2e8f0;
}

.social-proof-stats[b-5wv6s6vylt] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.stat-item[b-5wv6s6vylt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.stat-number[b-5wv6s6vylt] {
    font-size: 2rem;
    font-weight: 700;
    color: #f08a12;
    line-height: 1.2;
}

.stat-label[b-5wv6s6vylt] {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .social-proof-section[b-5wv6s6vylt] {
        padding: 1.5rem 1rem;
    }

    .social-proof-stats[b-5wv6s6vylt] {
        gap: 1.5rem;
    }

    .stat-number[b-5wv6s6vylt] {
        font-size: 1.5rem;
    }

    .stat-label[b-5wv6s6vylt] {
        font-size: 0.75rem;
    }
}

@media (max-width: 576px) {
    .social-proof-stats[b-5wv6s6vylt] {
        gap: 1rem;
    }

    .stat-item[b-5wv6s6vylt] {
        min-width: 100px;
    }

    .stat-number[b-5wv6s6vylt] {
        font-size: 1.35rem;
    }
}
/* /Components/MealCalculationLoader.razor.rz.scp.css */
/* Meal Calculation Loader - Component Styles */

.meal-calculation-loader[b-b4ck39enmv] {
    position: relative;
    padding: 3rem 1rem;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-container[b-b4ck39enmv] {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

/* Food Combination Visual */
.food-combination-visual[b-b4ck39enmv] {
    position: relative;
    height: 180px;
    margin-bottom: 2rem;
}

.food-item[b-b4ck39enmv] {
    position: absolute;
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: foodFloat-b-b4ck39enmv 3s ease-in-out infinite;
}

.food-item-1[b-b4ck39enmv] {
    top: 20px;
    left: 10%;
    animation-delay: 0s;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
}

.food-item-2[b-b4ck39enmv] {
    top: 20px;
    right: 10%;
    animation-delay: 1s;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

.food-item-3[b-b4ck39enmv] {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 2s;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.food-icon[b-b4ck39enmv] {
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
}

.food-icon svg[b-b4ck39enmv] {
    width: 100%;
    height: 100%;
}

.food-item-1 .food-icon[b-b4ck39enmv] {
    color: #dc2626;
}

.food-item-2 .food-icon[b-b4ck39enmv] {
    color: #2563eb;
}

.food-item-3 .food-icon[b-b4ck39enmv] {
    color: #f59e0b;
}

.macro-label[b-b4ck39enmv] {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.food-item-1 .macro-label[b-b4ck39enmv] {
    color: #991b1b;
}

.food-item-2 .macro-label[b-b4ck39enmv] {
    color: #1e40af;
}

.food-item-3 .macro-label[b-b4ck39enmv] {
    color: #d97706;
}

/* Center Calculation Symbol */
.calculation-center[b-b4ck39enmv] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calculation-ring[b-b4ck39enmv] {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #2563eb;
    border-right-color: #f59e0b;
    border-bottom-color: #10b981;
    border-left-color: #ef4444;
    animation: ringRotate-b-b4ck39enmv 2s linear infinite;
}

.calculation-icon[b-b4ck39enmv] {
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.calculation-icon svg[b-b4ck39enmv] {
    width: 28px;
    height: 28px;
    color: #6b7280;
    animation: iconPulse-b-b4ck39enmv 2s ease-in-out infinite;
}

.pulse-effect[b-b4ck39enmv] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.2) 0%, transparent 70%);
    animation: pulseExpand-b-b4ck39enmv 2s ease-out infinite;
}

/* Progress Indicators */
.progress-indicators[b-b4ck39enmv] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.progress-dot[b-b4ck39enmv] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5e7eb;
    transition: all 0.3s ease;
}

.progress-dot.active[b-b4ck39enmv] {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.4);
}

/* Message Container */
.loading-message-container[b-b4ck39enmv] {
    text-align: center;
    position: relative;
    min-height: 60px;
}

.loading-message[b-b4ck39enmv] {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.loading-message.fade-in[b-b4ck39enmv] {
    opacity: 1;
    transform: translateY(0);
}

.loading-message.fade-out[b-b4ck39enmv] {
    opacity: 0;
    transform: translateY(-4px);
}

.message-text[b-b4ck39enmv] {
    color: #1f2937;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.01em;
}

.sub-message[b-b4ck39enmv] {
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 400;
}

/* Background Elements */
.background-elements[b-b4ck39enmv] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.floating-element[b-b4ck39enmv] {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
}

.element-1[b-b4ck39enmv] {
    width: 40px;
    height: 40px;
    background: #ef4444;
    top: 10%;
    left: 5%;
    animation: float1-b-b4ck39enmv 8s ease-in-out infinite;
}

.element-2[b-b4ck39enmv] {
    width: 30px;
    height: 30px;
    background: #2563eb;
    top: 70%;
    right: 8%;
    animation: float2-b-b4ck39enmv 10s ease-in-out infinite;
}

.element-3[b-b4ck39enmv] {
    width: 25px;
    height: 25px;
    background: #10b981;
    bottom: 15%;
    left: 12%;
    animation: float3-b-b4ck39enmv 12s ease-in-out infinite;
}

.element-4[b-b4ck39enmv] {
    width: 35px;
    height: 35px;
    background: #f59e0b;
    top: 40%;
    right: 15%;
    animation: float4-b-b4ck39enmv 9s ease-in-out infinite;
}

/* Animations - Optimized for GPU acceleration */
@keyframes foodFloat-b-b4ck39enmv {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    25% {
        transform: translate3d(0, -8px, 0) scale(1.05);
    }
    75% {
        transform: translate3d(0, 4px, 0) scale(0.98);
    }
}

@keyframes ringRotate-b-b4ck39enmv {
    from {
        transform: rotate3d(0, 0, 1, 0deg);
    }
    to {
        transform: rotate3d(0, 0, 1, 360deg);
    }
}

@keyframes iconPulse-b-b4ck39enmv {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

@keyframes pulseExpand-b-b4ck39enmv {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.2;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0;
    }
}

@keyframes float1-b-b4ck39enmv {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(30px, -20px) rotate(120deg);
    }
    66% {
        transform: translate(-20px, 15px) rotate(240deg);
    }
}

@keyframes float2-b-b4ck39enmv {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-25px, -15px) scale(1.2);
    }
}

@keyframes float3-b-b4ck39enmv {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(15px, -10px);
    }
    75% {
        transform: translate(-10px, 20px);
    }
}

@keyframes float4-b-b4ck39enmv {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(20px, 10px) rotate(180deg);
    }
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .meal-calculation-loader[b-b4ck39enmv] {
        padding: 2rem 0.5rem;
        min-height: 280px;
    }

    .food-combination-visual[b-b4ck39enmv] {
        height: 140px;
        margin-bottom: 1.5rem;
    }

    .food-item[b-b4ck39enmv] {
        width: 60px;
        height: 60px;
        border-radius: 12px;
    }

    .food-icon[b-b4ck39enmv] {
        width: 28px;
        height: 28px;
    }

    .macro-label[b-b4ck39enmv] {
        font-size: 0.5625rem;
    }

    .calculation-center[b-b4ck39enmv] {
        width: 64px;
        height: 64px;
    }

    .calculation-icon[b-b4ck39enmv] {
        width: 40px;
        height: 40px;
    }

    .calculation-icon svg[b-b4ck39enmv] {
        width: 24px;
        height: 24px;
    }

    .message-text[b-b4ck39enmv] {
        font-size: 1rem;
    }

    .sub-message[b-b4ck39enmv] {
        font-size: 0.8125rem;
    }

    .floating-element[b-b4ck39enmv] {
        display: none; /* Hide on mobile for performance */
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .food-item[b-b4ck39enmv],
    .calculation-ring[b-b4ck39enmv],
    .calculation-icon svg[b-b4ck39enmv],
    .pulse-effect[b-b4ck39enmv],
    .floating-element[b-b4ck39enmv] {
        animation: none;
    }

    .loading-message[b-b4ck39enmv] {
        transition: opacity 0.5s ease;
    }

    .progress-dot[b-b4ck39enmv] {
        transition: background-color 0.5s ease;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .meal-calculation-loader[b-b4ck39enmv] {
        background: #1f2937;
    }

    .food-item[b-b4ck39enmv] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .calculation-icon[b-b4ck39enmv] {
        background: #374151;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .calculation-icon svg[b-b4ck39enmv] {
        color: #d1d5db;
    }

    .message-text[b-b4ck39enmv] {
        color: #f3f4f6;
    }

    .sub-message[b-b4ck39enmv] {
        color: #9ca3af;
    }

    .progress-dot[b-b4ck39enmv] {
        background: #4b5563;
    }

    .progress-dot.active[b-b4ck39enmv] {
        background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    }
}
/* /Components/MealCombinations.razor.rz.scp.css */
/* MealCombinations Component Styles */

/* Meal Sorting Select Styles */
.meal-sorting-select[b-clzx3ens5m] {
    min-width: 150px;
}

/* Override MudSelect styles for meal sorting */
.meal-sorting-select .mud-input-control[b-clzx3ens5m] {
    border: 2px solid var(--mud-palette-error) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    font-size: 1.25rem !important;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.meal-sorting-select .mud-input-control:hover[b-clzx3ens5m] {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1) !important;
    border-color: var(--mud-palette-error-darken) !important;
}

.meal-sorting-select .mud-input-control:focus-within[b-clzx3ens5m] {
    box-shadow: 0 0 0 0.2rem rgba(var(--mud-palette-error-rgb), 0.25) !important;
    border-color: var(--mud-palette-error-darken) !important;
}

/* Ensure proper alignment with Bootstrap grid */
.meal-sorting-select .mud-input[b-clzx3ens5m] {
    width: 100%;
}

/* Style the dropdown items */
.meal-sorting-select .mud-list-item[b-clzx3ens5m] {
    font-size: 1.1rem;
    padding: 0.75rem 1rem;
}

.meal-sorting-select .mud-list-item:hover[b-clzx3ens5m] {
    background-color: var(--mud-palette-error-hover);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .meal-sorting-select .mud-input-control[b-clzx3ens5m] {
        font-size: 1.1rem !important;
    }

    .meal-sorting-select .mud-list-item[b-clzx3ens5m] {
        font-size: 1rem;
        padding: 0.625rem 0.875rem;
    }
}

/* Accessibility - High contrast mode */
@media (prefers-contrast: high) {
    .meal-sorting-select .mud-input-control[b-clzx3ens5m] {
        border-width: 3px !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .meal-sorting-select .mud-input-control[b-clzx3ens5m] {
        transition: none;
    }
}

/* ==========================================================================
   Perfect Match Celebration Animations
   ========================================================================== */

/* Animated Checkmark SVG */
.animated-checkmark[b-clzx3ens5m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.checkmark-svg[b-clzx3ens5m] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: block;
    stroke-width: 3;
    stroke: #fff;
    stroke-miterlimit: 10;
    animation: checkmark-fill-b-clzx3ens5m 0.4s ease-in-out 0.4s forwards,
               checkmark-scale-b-clzx3ens5m 0.3s ease-in-out 0.9s both;
}

.checkmark-circle[b-clzx3ens5m] {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 3;
    stroke-miterlimit: 10;
    stroke: rgba(255, 255, 255, 0.8);
    fill: none;
    animation: checkmark-stroke-b-clzx3ens5m 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check[b-clzx3ens5m] {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke: #fff;
    stroke-width: 4;
    animation: checkmark-stroke-b-clzx3ens5m 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes checkmark-stroke-b-clzx3ens5m {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes checkmark-fill-b-clzx3ens5m {
    100% {
        box-shadow: inset 0px 0px 0px 30px rgba(255, 255, 255, 0.15);
    }
}

@keyframes checkmark-scale-b-clzx3ens5m {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

/* Celebration text animation */
.celebration-text[b-clzx3ens5m] {
    animation: celebration-text-pop-b-clzx3ens5m 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.6s both;
}

@keyframes celebration-text-pop-b-clzx3ens5m {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Perfect match alert animation */
.perfect-match-alert[b-clzx3ens5m] {
    position: relative;
    overflow: hidden;
    animation: perfect-match-entrance-b-clzx3ens5m 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes perfect-match-entrance-b-clzx3ens5m {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Success celebration pulse effect */
.perfect-match-alert.success-celebration[b-clzx3ens5m]::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: linear-gradient(135deg,
        rgba(39, 174, 96, 0.4) 0%,
        rgba(129, 199, 132, 0.2) 50%,
        rgba(39, 174, 96, 0.4) 100%);
    opacity: 0;
    animation: success-pulse-glow-b-clzx3ens5m 2s ease-in-out 0.5s;
    pointer-events: none;
    z-index: -1;
}

@keyframes success-pulse-glow-b-clzx3ens5m {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .checkmark-svg[b-clzx3ens5m],
    .checkmark-circle[b-clzx3ens5m],
    .checkmark-check[b-clzx3ens5m],
    .celebration-text[b-clzx3ens5m],
    .perfect-match-alert[b-clzx3ens5m],
    .perfect-match-alert[b-clzx3ens5m]::before {
        animation: none !important;
    }

    .checkmark-circle[b-clzx3ens5m] {
        stroke-dashoffset: 0;
    }

    .checkmark-check[b-clzx3ens5m] {
        stroke-dashoffset: 0;
    }

    .celebration-text[b-clzx3ens5m],
    .perfect-match-alert[b-clzx3ens5m] {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   No Match Alert - Compact Design (~200px total)
   Uses design tokens from design-tokens.css for consistency
   ========================================================================== */

/* No Match Alert - Refined Compact Header */
.no-match-alert[b-clzx3ens5m] {
    background: linear-gradient(135deg, #f8fafc 0%, var(--fs-bg-primary) 100%);
    border-left: var(--fs-spacing-xs) solid #64748b; /* Slate-500 - neutral, professional */
    border-radius: var(--fs-radius-lg);
    padding: var(--fs-spacing-xl);
    margin-bottom: var(--fs-spacing-2xl);
    box-shadow: var(--fs-shadow-sm);
}

.no-match-header[b-clzx3ens5m] {
    display: flex;
    align-items: center;
    gap: var(--fs-spacing-sm);
    color: #475569; /* Slate-600 - professional, not alarming */
    font-weight: var(--fs-font-weight-semibold);
    font-size: var(--fs-font-size-lg);
    margin-bottom: var(--fs-spacing-sm);
}

.no-match-header i[b-clzx3ens5m] {
    font-size: var(--fs-font-size-xl);
    color: #94a3b8; /* Slate-400 - subtle icon */
}

.no-match-explanation[b-clzx3ens5m] {
    margin: var(--fs-spacing-sm) 0 0 0;
    color: var(--fs-text-primary);
    font-size: var(--fs-font-size-base);
    line-height: var(--fs-line-height-normal);
}

/* Excluded Foods - Horizontal Pills */
.excluded-pills[b-clzx3ens5m] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fs-spacing-sm);
    margin: var(--fs-spacing-lg) 0;
}

.food-pill[b-clzx3ens5m] {
    /* Refined: Soft neutral with subtle warm tint */
    background: #fef7f0; /* Very light warm gray */
    border: 1px solid #e2d5ca; /* Warm gray border */
    border-radius: var(--fs-radius-pill);
    padding: var(--fs-spacing-xs) var(--fs-spacing-md);
    font-size: var(--fs-font-size-sm);
    color: #78716c; /* Stone-500 - warm neutral */
    display: inline-flex;
    align-items: center;
    gap: var(--fs-spacing-xs);
    font-weight: var(--fs-font-weight-medium);
    transition: var(--fs-transition-all);
}

.food-pill:hover[b-clzx3ens5m] {
    background: #f5ebe0; /* Slightly darker warm gray */
    border-color: #d6ccc2;
    color: #57534e; /* Stone-600 */
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(120, 113, 108, 0.15);
}

.excess-badge[b-clzx3ens5m] {
    background: #a8a29e; /* Stone-400 - neutral */
    color: var(--fs-text-inverse);
    border-radius: var(--fs-radius-sm);
    padding: 2px var(--fs-spacing-xs);
    font-size: var(--fs-font-size-xs);
    font-weight: var(--fs-font-weight-semibold);
    letter-spacing: 0.02em;
}

/* ==========================================================================
   Target Miss Callout - Prominent warning banner
   ========================================================================== */

.target-miss-callout[b-clzx3ens5m] {
    display: flex;
    align-items: flex-start;
    gap: var(--fs-spacing-md);
    padding: var(--fs-spacing-lg);
    background: #fef3c7; /* Amber-100 */
    border-left: 4px solid #f59e0b; /* Amber-500 */
    border-radius: var(--fs-radius-md);
    margin-top: var(--fs-spacing-lg);
    margin-bottom: var(--fs-spacing-md);
}

.target-miss-callout .callout-icon[b-clzx3ens5m] {
    font-size: var(--fs-font-size-xl);
    color: #d97706; /* Amber-600 */
    flex-shrink: 0;
    line-height: 1;
}

.target-miss-callout .callout-content[b-clzx3ens5m] {
    display: flex;
    flex-direction: column;
    gap: var(--fs-spacing-xs);
}

.target-miss-callout strong[b-clzx3ens5m] {
    color: #92400e; /* Amber-800 */
    font-weight: var(--fs-font-weight-semibold);
    font-size: var(--fs-font-size-base);
}

.target-miss-callout span[b-clzx3ens5m] {
    color: #78350f; /* Amber-900 */
    font-size: var(--fs-font-size-sm);
}

/* ==========================================================================
   Closest Match - Card with food item rows
   ========================================================================== */

.closest-match-card[b-clzx3ens5m] {
    background: var(--fs-bg-secondary);
    border-radius: var(--fs-radius-lg);
    padding: var(--fs-spacing-xl);
    border: 1px solid var(--fs-border-default);
}

.closest-match-header[b-clzx3ens5m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--fs-spacing-md);
    border-bottom: 1px solid var(--fs-border-default);
}

.closest-match-header .header-title[b-clzx3ens5m] {
    font-weight: var(--fs-font-weight-semibold);
    font-size: var(--fs-font-size-lg);
    color: var(--fs-text-primary);
}

.closest-match-header .header-calories[b-clzx3ens5m] {
    color: var(--fs-text-secondary);
    font-size: var(--fs-font-size-sm);
    font-weight: var(--fs-font-weight-medium);
}

/* Food items list - card rows */
.food-items-list[b-clzx3ens5m] {
    display: flex;
    flex-direction: column;
    gap: var(--fs-spacing-sm);
    margin: var(--fs-spacing-lg) 0;
}

.food-item-row[b-clzx3ens5m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--fs-spacing-md) var(--fs-spacing-lg);
    background: var(--fs-bg-primary);
    border: 1px solid var(--fs-border-default);
    border-radius: var(--fs-radius-md);
    transition: var(--fs-transition-fast);
}

.food-item-row:hover[b-clzx3ens5m] {
    border-color: var(--fs-border-hover);
    background: var(--fs-bg-hover);
}

.food-item-row.has-warning[b-clzx3ens5m] {
    border-left: 3px solid #f59e0b; /* Amber-500 */
}

.food-info[b-clzx3ens5m] {
    display: flex;
    align-items: baseline;
    gap: var(--fs-spacing-md);
    flex: 1;
    min-width: 0;
}

.food-name[b-clzx3ens5m] {
    font-weight: var(--fs-font-weight-medium);
    color: var(--fs-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.food-serving[b-clzx3ens5m] {
    color: var(--fs-text-secondary);
    font-size: var(--fs-font-size-sm);
    white-space: nowrap;
}

/* Portion warning badge - inline, visible */
.portion-badge[b-clzx3ens5m] {
    display: inline-flex;
    align-items: center;
    gap: var(--fs-spacing-xs);
    padding: var(--fs-spacing-xs) var(--fs-spacing-sm);
    background: #fef3c7; /* Amber-100 */
    color: #92400e; /* Amber-800 */
    border-radius: var(--fs-radius-pill);
    font-size: var(--fs-font-size-xs);
    font-weight: var(--fs-font-weight-medium);
    white-space: nowrap;
    flex-shrink: 0;
}

.portion-badge i[b-clzx3ens5m] {
    font-size: 0.75rem;
}

.portion-badge.very-large[b-clzx3ens5m] {
    background: #fde68a; /* Amber-200 */
    color: #78350f; /* Amber-900 */
}

.closest-match-actions[b-clzx3ens5m] {
    display: flex;
    gap: var(--fs-spacing-md);
    margin-top: var(--fs-spacing-lg);
}

/* ==========================================================================
   Macro Breakdown Section — all macros vs targets
   ========================================================================== */

.macro-breakdown[b-clzx3ens5m] {
    display: flex;
    flex-direction: column;
    gap: var(--fs-spacing-sm);
    padding: var(--fs-spacing-lg) 0;
    border-bottom: 1px solid var(--fs-border-default);
}

.macro-row[b-clzx3ens5m] {
    display: flex;
    flex-direction: column;
    gap: var(--fs-spacing-xs);
}

.macro-row-info[b-clzx3ens5m] {
    display: flex;
    align-items: center;
    gap: var(--fs-spacing-sm);
}

.macro-label[b-clzx3ens5m] {
    font-weight: var(--fs-font-weight-semibold);
    font-size: var(--fs-font-size-sm);
    color: var(--fs-text-primary);
    min-width: 60px;
}

.macro-actual[b-clzx3ens5m] {
    font-size: var(--fs-font-size-sm);
    font-weight: var(--fs-font-weight-medium);
    color: var(--fs-text-primary);
}

.macro-target-range[b-clzx3ens5m] {
    font-size: var(--fs-font-size-xs);
    color: var(--fs-text-secondary);
}

.macro-status-badge[b-clzx3ens5m] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px var(--fs-spacing-sm);
    border-radius: var(--fs-radius-pill);
    font-size: var(--fs-font-size-xs);
    font-weight: var(--fs-font-weight-semibold);
    white-space: nowrap;
    margin-left: auto;
}

.macro-status-badge i[b-clzx3ens5m] { font-size: 0.625rem; }

.macro-status-in-range[b-clzx3ens5m] {
    background: var(--fs-success-light);
    color: #065f46;
}

.macro-status-over[b-clzx3ens5m] {
    background: var(--fs-error-light);
    color: #991b1b;
}

.macro-status-under[b-clzx3ens5m] {
    background: var(--fs-warning-light);
    color: #92400e;
}

.macro-status-no-target[b-clzx3ens5m] {
    background: var(--fs-bg-tertiary);
    color: var(--fs-text-muted);
}

/* Progress bar */
.macro-progress-bar[b-clzx3ens5m] {
    position: relative;
    height: 6px;
    background: var(--fs-bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.progress-target-zone[b-clzx3ens5m] {
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    z-index: 1;
}

.progress-fill[b-clzx3ens5m] {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    border-radius: 3px;
    z-index: 2;
    transition: width 0.4s ease;
}

.progress-fill-in-range[b-clzx3ens5m] { background: var(--fs-success); }
.progress-fill-over[b-clzx3ens5m] { background: var(--fs-error); }
.progress-fill-under[b-clzx3ens5m] { background: var(--fs-primary); }
.progress-fill-no-target[b-clzx3ens5m] { background: var(--fs-text-muted); opacity: 0.4; }

/* ==========================================================================
   Mobile responsive - Closest Match section
   ========================================================================== */

@media (max-width: 576px) {
    .target-miss-callout[b-clzx3ens5m] {
        flex-direction: row;
        padding: var(--fs-spacing-md);
    }

    .food-item-row[b-clzx3ens5m] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--fs-spacing-sm);
        padding: var(--fs-spacing-md);
    }

    .food-info[b-clzx3ens5m] {
        flex-direction: column;
        gap: var(--fs-spacing-xs);
        width: 100%;
    }

    .food-name[b-clzx3ens5m] {
        white-space: normal;
    }

    .portion-badge[b-clzx3ens5m] {
        align-self: flex-start;
    }

    .closest-match-actions[b-clzx3ens5m] {
        flex-direction: column;
    }
}

/* Buttons with minimum 44px tap target for mobile accessibility */
.btn-try-different[b-clzx3ens5m] {
    flex: 1;
    min-height: var(--fs-mobile-tap-target-sm);
    padding: var(--fs-spacing-md) var(--fs-spacing-lg);
    border: 2px solid var(--fs-primary);
    background: var(--fs-bg-primary);
    color: var(--fs-primary);
    border-radius: var(--fs-radius-md);
    font-weight: var(--fs-font-weight-semibold);
    font-size: var(--fs-font-size-sm);
    cursor: pointer;
    transition: var(--fs-transition-all);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fs-spacing-xs);
}

.btn-try-different:hover[b-clzx3ens5m] {
    background: var(--fs-primary-light);
    transform: translateY(-1px);
    box-shadow: var(--fs-shadow-primary);
}

.btn-try-different:active[b-clzx3ens5m] {
    transform: translateY(0);
}

.btn-use-anyway[b-clzx3ens5m] {
    flex: 1;
    min-height: var(--fs-mobile-tap-target-sm);
    padding: var(--fs-spacing-md) var(--fs-spacing-lg);
    border: none;
    background: var(--fs-text-secondary);
    color: var(--fs-text-inverse);
    border-radius: var(--fs-radius-md);
    font-weight: var(--fs-font-weight-semibold);
    font-size: var(--fs-font-size-sm);
    cursor: pointer;
    transition: var(--fs-transition-all);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fs-spacing-xs);
}

.btn-use-anyway:hover[b-clzx3ens5m] {
    background: var(--fs-text-primary);
    transform: translateY(-1px);
    box-shadow: var(--fs-shadow-md);
}

.btn-use-anyway:active[b-clzx3ens5m] {
    transform: translateY(0);
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .no-match-alert[b-clzx3ens5m] {
        padding: var(--fs-spacing-lg);
        border-radius: var(--fs-radius-md);
    }

    .no-match-header[b-clzx3ens5m] {
        font-size: var(--fs-font-size-base);
    }

    .closest-match-actions[b-clzx3ens5m] {
        flex-direction: column;
    }

    .btn-try-different[b-clzx3ens5m],
    .btn-use-anyway[b-clzx3ens5m] {
        width: 100%;
        min-height: var(--fs-mobile-tap-target); /* Larger touch targets on mobile */
    }

    .excluded-pills[b-clzx3ens5m] {
        gap: var(--fs-spacing-xs);
    }

    .food-pill[b-clzx3ens5m] {
        font-size: var(--fs-font-size-xs);
        padding: var(--fs-spacing-xs) var(--fs-spacing-sm);
    }

    .portion-item[b-clzx3ens5m] {
        display: block;
        margin-right: 0;
        margin-bottom: var(--fs-spacing-xs);
    }

    .macro-row-info[b-clzx3ens5m] { gap: var(--fs-spacing-xs); flex-wrap: wrap; }
    .macro-label[b-clzx3ens5m] { min-width: 48px; font-size: var(--fs-font-size-xs); }
    .macro-actual[b-clzx3ens5m] { font-size: var(--fs-font-size-xs); }
    .macro-status-badge[b-clzx3ens5m] { font-size: 0.625rem; padding: 1px var(--fs-spacing-xs); }
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .food-pill[b-clzx3ens5m],
    .btn-try-different[b-clzx3ens5m],
    .btn-use-anyway[b-clzx3ens5m],
    .progress-fill[b-clzx3ens5m] {
        transition: none;
    }

    .food-pill:hover[b-clzx3ens5m],
    .btn-try-different:hover[b-clzx3ens5m],
    .btn-use-anyway:hover[b-clzx3ens5m] {
        transform: none;
    }
}

/* Accessibility: High contrast mode */
@media (prefers-contrast: high) {
    .no-match-alert[b-clzx3ens5m] {
        border-left-width: 6px;
        border: 2px solid var(--fs-accent);
    }

    .food-pill[b-clzx3ens5m] {
        border-width: 2px;
    }

    .btn-try-different[b-clzx3ens5m] {
        border-width: 3px;
    }

    .closest-match-card[b-clzx3ens5m] {
        border-width: 2px;
    }

    .macro-progress-bar[b-clzx3ens5m] { border: 1px solid var(--fs-text-secondary); }
    .progress-target-zone[b-clzx3ens5m] { background: rgba(0, 0, 0, 0.2); border: 1px dashed var(--fs-text-secondary); }
    .macro-status-badge[b-clzx3ens5m] { border: 1px solid currentColor; }
}
/* /Components/MealItem.razor.rz.scp.css */
/* Meal-specific styles - macro badge colors are in macro-badges.css */

/* Ensure badges have proper sizing in meal items */
.meal-macro-badges[b-pef9j3dq3y] {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: flex-end;
    margin-bottom: 1rem;
    width: 100%;
}

.meal-macro-badges .badge[b-pef9j3dq3y] {
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.meal-macro-badges .badge:hover[b-pef9j3dq3y] {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Button styles */
.meal-select-button[b-pef9j3dq3y] {
    font-weight: 500;
    letter-spacing: 0.3px;
}

.meal-details-toggle[b-pef9j3dq3y] {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

.meal-details-toggle:hover[b-pef9j3dq3y] {
    text-decoration: underline;
}

/* Responsive adjustments for meal badges container */
@media (max-width: 1400px) {
    .meal-macro-badges[b-pef9j3dq3y] {
        gap: 5px;
    }
}

@media (max-width: 1200px) {
    .meal-macro-badges[b-pef9j3dq3y] {
        gap: 4px;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .meal-macro-badges[b-pef9j3dq3y] {
        gap: 3px;
        margin-bottom: 0.75rem;
    }
}

@media (max-width: 576px) {
    .meal-macro-badges[b-pef9j3dq3y] {
        gap: 2px;
        margin-bottom: 0.5rem;
    }
}

/* Fix alignment issues on mobile */
@media (max-width: 767px) {
    .meal-item-mobile-align[b-pef9j3dq3y] {
        text-align: left !important;
    }
    
    .meal-macro-badges[b-pef9j3dq3y] {
        justify-content: flex-start !important;
        margin-top: 0.5rem;
    }
}

/* Food name styling in nutrition facts view */
.meal-food-name[b-pef9j3dq3y] {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    display: inline-block;
    margin-bottom: 0.25rem;
}

/* Larger screens - make food names bigger */
@media (min-width: 992px) {
    .meal-food-name[b-pef9j3dq3y] {
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
}

@media (min-width: 1200px) {
    .meal-food-name[b-pef9j3dq3y] {
        font-size: 1.35rem;
    }
}

@media (min-width: 1400px) {
    .meal-food-name[b-pef9j3dq3y] {
        font-size: 1.5rem;
    }
}

/* Fixed Portion Styling */
.fixed-portion-item[b-pef9j3dq3y] {
    background-color: rgba(108, 117, 125, 0.06);
    border-left: 3px solid #6c757d;
    padding-left: 0.75rem;
    margin-left: -0.5rem;
    border-radius: 0 4px 4px 0;
}

.fixed-portion-item .meal-food-name[b-pef9j3dq3y] {
    color: #495057;
}

/* Fixed portion lock icon sizing */
.fixed-lock-icon[b-pef9j3dq3y] {
    font-size: 0.75rem;
}

/* Lock icon animation on hover */
.fixed-portion-item .fa-lock[b-pef9j3dq3y] {
    transition: transform 0.2s ease;
}

.fixed-portion-item:hover .fa-lock[b-pef9j3dq3y] {
    transform: scale(1.1);
}
/* /Components/MealPlanner.razor.rz.scp.css */
/* ============================================
   Quick Add Section - Minimalist Design
   ============================================ */
/* Note: Design tokens are imported globally in _Layout.cshtml */
/* This file uses CSS variables defined in design-tokens.css */

.quick-add-container[b-qlqkzvt2mv] {
    margin: 0 0 var(--fs-spacing-2xl) 0;
    padding: 0;
}

/* Primary Input Row */
.quick-add-primary[b-qlqkzvt2mv] {
    display: flex;
    flex-direction: column;
    gap: var(--fs-spacing-md);
}

.quick-add-input-group[b-qlqkzvt2mv] {
    display: flex;
    gap: var(--fs-spacing-md);
    align-items: center;
    background: var(--fs-bg-primary) !important;
    border: 2px solid var(--fs-border-default);
    border-radius: var(--fs-radius-lg);
    padding: var(--fs-spacing-xs);
    transition: var(--fs-transition-all);
    position: relative;
}

.quick-add-input-group:focus-within[b-qlqkzvt2mv] {
    border-color: var(--fs-border-focus);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Main Input Field */
.quick-add-input[b-qlqkzvt2mv] {
    flex: 1;
    border: none;
    outline: none;
    padding: var(--fs-spacing-md) var(--fs-spacing-lg);
    font-size: var(--fs-font-size-base);
    font-weight: var(--fs-font-weight-normal);
    font-family: var(--fs-font-family);
    background: transparent !important;
    color: var(--fs-text-primary) !important;
}

.quick-add-input[b-qlqkzvt2mv]::placeholder {
    color: var(--fs-text-secondary) !important;
    font-weight: var(--fs-font-weight-normal);
}

/* Meal Selector Wrapper */
.meal-selector-wrapper[b-qlqkzvt2mv] {
    display: flex;
    align-items: center;
    gap: var(--fs-spacing-xs);
    position: relative;
}

/* Meal Selector Label */
.meal-selector-label[b-qlqkzvt2mv] {
    font-size: var(--fs-font-size-sm);
    font-weight: var(--fs-font-weight-bold);
    color: var(--fs-primary-active) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    white-space: nowrap;
}

/* Meal Selector - HIGHLY VISIBLE */
.quick-add-meal-select[b-qlqkzvt2mv] {
    /* Strong visible border */
    border: 2px solid var(--fs-primary) !important;
    border-radius: var(--fs-radius-md);
    outline: none;
    
    /* Distinct background color */
    background: linear-gradient(to bottom, var(--fs-primary-light), var(--fs-primary-bg)) !important;
    
    /* Clear text and spacing */
    padding: var(--fs-spacing-sm) 36px var(--fs-spacing-sm) var(--fs-spacing-md);
    font-size: var(--fs-font-size-base);
    color: var(--fs-primary-active) !important;
    cursor: pointer;
    font-weight: var(--fs-font-weight-semibold);
    min-width: 120px;
    
    /* Remove native dropdown arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* Custom dropdown arrow - more visible */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    
    /* Add shadow for depth */
    box-shadow: var(--fs-shadow-sm);
    
    /* Smooth transitions */
    transition: var(--fs-transition-all);
}

.quick-add-meal-select option[b-qlqkzvt2mv] {
    background: white !important;
    color: #1e40af !important;
    font-weight: 500;
    padding: 8px;
}

.quick-add-meal-select:hover[b-qlqkzvt2mv] {
    background: linear-gradient(to bottom, var(--fs-primary-bg), #bfdbfe) !important;
    border-color: var(--fs-primary-hover) !important;
    box-shadow: var(--fs-shadow-primary);
    transform: translateY(-1px);
}

.quick-add-meal-select:focus[b-qlqkzvt2mv] {
    background: linear-gradient(to bottom, var(--fs-primary-bg), #bfdbfe) !important;
    border-color: var(--fs-primary-hover) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2), var(--fs-shadow-primary);
}

/* Add Button - Prominent but Clean */
.quick-add-button[b-qlqkzvt2mv] {
    display: flex;
    align-items: center;
    gap: var(--fs-spacing-xs);
    padding: var(--fs-spacing-md) var(--fs-spacing-xl);
    background: var(--fs-primary) !important;
    color: var(--fs-text-inverse) !important;
    border: none;
    border-radius: var(--fs-radius-md);
    font-size: var(--fs-font-size-sm);
    font-weight: var(--fs-font-weight-semibold);
    cursor: pointer;
    transition: var(--fs-transition-all);
    white-space: nowrap;
}

.quick-add-button:disabled[b-qlqkzvt2mv] {
    background: var(--fs-bg-tertiary) !important;
    color: var(--fs-text-muted) !important;
    cursor: not-allowed;
}

.quick-add-button:not(:disabled):hover[b-qlqkzvt2mv] {
    background: var(--fs-primary-hover) !important;
    transform: translateY(-1px);
}

.quick-add-button:not(:disabled):active[b-qlqkzvt2mv] {
    transform: translateY(0);
}

.quick-add-button.active[b-qlqkzvt2mv] {
    background: var(--fs-primary) !important;
}

.button-icon[b-qlqkzvt2mv] {
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
}

.button-text[b-qlqkzvt2mv] {
    display: none;
}

/* Options - Subtle */
.quick-add-options[b-qlqkzvt2mv] {
    display: flex;
    padding: 0 var(--fs-spacing-xs);
}

.bypass-option[b-qlqkzvt2mv] {
    display: flex;
    align-items: center;
    gap: var(--fs-spacing-xs);
    cursor: pointer;
    font-size: var(--fs-font-size-sm);
    color: var(--fs-text-secondary);
    user-select: none;
}

.bypass-option input[type="checkbox"][b-qlqkzvt2mv] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: #000;
}

.bypass-option:hover[b-qlqkzvt2mv] {
    color: var(--fs-text-primary);
}

/* Parsed Preview - Inline and Subtle */
.parsed-preview[b-qlqkzvt2mv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--fs-spacing-sm) var(--fs-spacing-md);
    margin-top: var(--fs-spacing-sm);
    background: var(--fs-bg-secondary);
    border-radius: var(--fs-radius-sm);
    font-size: var(--fs-font-size-sm);
    color: var(--fs-text-secondary);
    animation: slideDown-b-qlqkzvt2mv var(--fs-transition-base);
}

.preview-text[b-qlqkzvt2mv] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-clear[b-qlqkzvt2mv] {
    background: none;
    border: none;
    color: var(--fs-text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--fs-spacing-xs);
    transition: var(--fs-transition-colors);
}

.preview-clear:hover[b-qlqkzvt2mv] {
    color: var(--fs-text-primary);
}

/* Recent Foods - Minimal Pills */
.recent-foods[b-qlqkzvt2mv] {
    display: flex;
    gap: var(--fs-spacing-xs);
    margin-top: var(--fs-spacing-lg);
    padding: 0 2px;
    flex-wrap: wrap;
}

.recent-pill[b-qlqkzvt2mv] {
    padding: var(--fs-spacing-xs) var(--fs-spacing-md);
    background: transparent;
    border: 1px solid var(--fs-border-default);
    border-radius: var(--fs-radius-pill);
    font-size: var(--fs-font-size-sm);
    color: var(--fs-text-secondary);
    cursor: pointer;
    transition: var(--fs-transition-all);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-pill:hover[b-qlqkzvt2mv] {
    background: var(--fs-bg-secondary);
    border-color: var(--fs-border-hover);
    color: var(--fs-text-primary);
    transform: translateY(-1px);
}

.recent-pill:active[b-qlqkzvt2mv] {
    transform: translateY(0);
}

/* Animation */
@keyframes slideDown-b-qlqkzvt2mv {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .quick-add-container[b-qlqkzvt2mv] {
        margin-bottom: 20px;
    }
    
    .quick-add-input-group[b-qlqkzvt2mv] {
        flex-wrap: wrap;
        padding: var(--fs-spacing-sm);
        gap: var(--fs-spacing-sm);
    }
    
    .quick-add-input[b-qlqkzvt2mv] {
        width: 100%;
        padding: var(--fs-spacing-md);
        font-size: 16px; /* Prevents zoom on iOS */
        border-bottom: 1px solid var(--fs-border-default);
    }
    
    /* Meal selector wrapper on mobile - full width second row */
    .meal-selector-wrapper[b-qlqkzvt2mv] {
        width: 100%;
        order: 2;
        background: linear-gradient(135deg, var(--fs-primary-light), var(--fs-primary-bg));
        padding: var(--fs-spacing-sm) var(--fs-spacing-md);
        border-radius: var(--fs-radius-md);
        border: 2px solid var(--fs-primary);
        box-shadow: var(--fs-shadow-sm);
    }
    
    .meal-selector-label[b-qlqkzvt2mv] {
        font-size: var(--fs-font-size-sm);
        margin-right: var(--fs-spacing-sm);
    }
    
    .quick-add-meal-select[b-qlqkzvt2mv] {
        flex: 1;
        border: 2px solid var(--fs-primary) !important;
        padding: var(--fs-spacing-md) 36px var(--fs-spacing-md) var(--fs-spacing-md);
        font-size: 16px; /* Prevents zoom on iOS */
        min-width: auto;
        background: var(--fs-bg-primary) !important;
    }
    
    .quick-add-button[b-qlqkzvt2mv] {
        flex: 0 0 auto;
        order: 3;
        padding: var(--fs-spacing-md) var(--fs-spacing-2xl);
        width: 100%;
    }
    
    .button-text[b-qlqkzvt2mv] {
        display: inline;
    }
    
    .quick-add-options[b-qlqkzvt2mv] {
        padding: var(--fs-spacing-sm) var(--fs-spacing-md) 0;
    }
    
    .recent-foods[b-qlqkzvt2mv] {
        gap: var(--fs-spacing-sm);
        margin-top: var(--fs-spacing-md);
    }
    
    .recent-pill[b-qlqkzvt2mv] {
        padding: var(--fs-spacing-sm) var(--fs-spacing-md);
        font-size: var(--fs-font-size-sm);
    }
}

@media (min-width: 769px) {
    .button-text[b-qlqkzvt2mv] {
        display: inline;
    }
    
    .quick-add-meal-select[b-qlqkzvt2mv] {
        min-width: 140px;
        max-width: 180px;
    }
    
    /* Ensure meal selector is prominent on desktop too */
    .meal-selector-wrapper[b-qlqkzvt2mv] {
        flex-shrink: 0;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .quick-add-button[b-qlqkzvt2mv] {
        padding: var(--fs-spacing-md) var(--fs-spacing-2xl);
        font-size: var(--fs-font-size-base);
    }
    
    .recent-pill[b-qlqkzvt2mv] {
        padding: var(--fs-spacing-sm) var(--fs-spacing-lg);
        font-size: var(--fs-font-size-sm);
    }
}

/* Dark Mode Support - Disabled for now to ensure readability */
/* Uncomment and adjust if dark mode is explicitly needed
@media (prefers-color-scheme: dark) {
    // Dark mode styles here
}
*/

/* ============================================
   Existing Styles - Meal Planner
   ============================================ */

.meal-planner[b-qlqkzvt2mv] {
    padding-bottom: var(--fs-spacing-3xl);
}

.section-title[b-qlqkzvt2mv] {
    font-size: var(--fs-font-size-xl);
    font-weight: var(--fs-font-weight-semibold);
    color: var(--fs-text-primary);
}

.meals-container[b-qlqkzvt2mv] {
    margin-top: var(--fs-spacing-lg);
}

.snacks-section[b-qlqkzvt2mv] {
    margin-top: var(--fs-spacing-3xl);
}
/* /Components/MealScoreCard.razor.rz.scp.css */
/* ==========================================================================
   Meal Score Card - Modern Minimalist Design
   Uses design tokens from design-tokens.css for consistency
   ========================================================================== */

.meal-score-card[b-nsxs1b6z8d] {
    background: var(--fs-bg-primary);
    border: 1px solid var(--fs-border-default);
    border-radius: var(--fs-radius-xl);
    padding: var(--fs-spacing-xl);
    margin-bottom: var(--fs-spacing-2xl);
    box-shadow: var(--fs-shadow-sm);
    transition: var(--fs-transition-all);
}

.meal-score-card:hover[b-nsxs1b6z8d] {
    box-shadow: var(--fs-shadow-md);
}

/* Score Header - Left-aligned icon with grade */
.score-header[b-nsxs1b6z8d] {
    display: flex;
    align-items: center;
    gap: var(--fs-spacing-lg);
    margin-bottom: var(--fs-spacing-lg);
}

/* Circular Progress Ring */
.score-visual[b-nsxs1b6z8d] {
    flex-shrink: 0;
}

.score-ring[b-nsxs1b6z8d] {
    position: relative;
    width: 56px;
    height: 56px;
}

.circular-progress[b-nsxs1b6z8d] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circle-bg[b-nsxs1b6z8d] {
    fill: none;
    stroke: var(--fs-border-default);
    stroke-width: 3;
}

.circle-progress[b-nsxs1b6z8d] {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.6s ease-out;
}

/* Progress Colors - Semantic meaning */
.progress-excellent[b-nsxs1b6z8d] { stroke: #10b981; }
.progress-very-good[b-nsxs1b6z8d] { stroke: #3b82f6; }
.progress-good[b-nsxs1b6z8d] { stroke: #8b5cf6; }
.progress-all-right[b-nsxs1b6z8d] { stroke: #f59e0b; }
.progress-needs-improvement[b-nsxs1b6z8d] { stroke: #ef4444; }
.progress-no-match[b-nsxs1b6z8d] { stroke: #6b7280; }

/* Icon inside ring */
.score-icon[b-nsxs1b6z8d] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
}

.icon-excellent[b-nsxs1b6z8d] { color: #10b981; }
.icon-very-good[b-nsxs1b6z8d] { color: #3b82f6; }
.icon-good[b-nsxs1b6z8d] { color: #8b5cf6; }
.icon-all-right[b-nsxs1b6z8d] { color: #f59e0b; }
.icon-needs-improvement[b-nsxs1b6z8d] { color: #ef4444; }
.icon-no-match[b-nsxs1b6z8d] { color: #6b7280; }

/* Score Content */
.score-content[b-nsxs1b6z8d] {
    display: flex;
    flex-direction: column;
    gap: var(--fs-spacing-xs);
}

.score-label[b-nsxs1b6z8d] {
    font-size: var(--fs-font-size-sm);
    color: var(--fs-text-secondary);
    font-weight: var(--fs-font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.score-grade[b-nsxs1b6z8d] {
    font-size: var(--fs-font-size-xl);
    font-weight: var(--fs-font-weight-bold);
    line-height: 1.2;
}

/* Grade Colors - Match icon colors */
.grade-excellent[b-nsxs1b6z8d] { color: #10b981; }
.grade-very-good[b-nsxs1b6z8d] { color: #3b82f6; }
.grade-good[b-nsxs1b6z8d] { color: #8b5cf6; }
.grade-all-right[b-nsxs1b6z8d] { color: #f59e0b; }
.grade-needs-improvement[b-nsxs1b6z8d] { color: #ef4444; }
.grade-no-match[b-nsxs1b6z8d] { color: #6b7280; }

/* Card Accent Border - Subtle left border */
.score-very-good[b-nsxs1b6z8d] { border-left: 4px solid #3b82f6; }
.score-good[b-nsxs1b6z8d] { border-left: 4px solid #8b5cf6; }
.score-all-right[b-nsxs1b6z8d] { border-left: 4px solid #f59e0b; }
.score-needs-improvement[b-nsxs1b6z8d] { border-left: 4px solid #ef4444; }
.score-no-match[b-nsxs1b6z8d] { border-left: 4px solid #6b7280; }

/* Perfect Match - Celebratory styling */
.score-excellent[b-nsxs1b6z8d] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #a7f3d0;
    border-left: 4px solid #10b981;
}

/* Ensure actions border matches celebratory theme */
.score-excellent .score-actions[b-nsxs1b6z8d] {
    border-top-color: #a7f3d0;
}

/* Celebration Section - Perfect Match */
.score-celebration[b-nsxs1b6z8d] {
    margin-top: var(--fs-spacing-md);
    padding-top: var(--fs-spacing-md);
    border-top: 1px solid #a7f3d0;
}

.score-celebration p[b-nsxs1b6z8d] {
    margin: 0;
    color: #065f46;
    font-size: var(--fs-font-size-base);
    line-height: var(--fs-line-height-relaxed);
    font-weight: var(--fs-font-weight-medium);
}

/* Guidance Section */
.score-guidance[b-nsxs1b6z8d] {
    margin-top: var(--fs-spacing-md);
    padding-top: var(--fs-spacing-md);
    border-top: 1px solid var(--fs-border-default);
}

/* Aggregate Insight - guidance based on ALL combinations */
.aggregate-insight[b-nsxs1b6z8d] {
    display: flex;
    flex-direction: column;
    gap: var(--fs-spacing-sm);
}

.aggregate-insight .guidance-problem[b-nsxs1b6z8d] {
    margin: 0;
    color: var(--fs-text-primary);
    font-size: var(--fs-font-size-base);
    font-weight: var(--fs-font-weight-medium);
    line-height: var(--fs-line-height-relaxed);
}

.aggregate-insight .guidance-action[b-nsxs1b6z8d] {
    margin: 0;
    color: var(--fs-text-secondary);
    font-size: var(--fs-font-size-sm);
    line-height: var(--fs-line-height-relaxed);
    padding-left: var(--fs-spacing-md);
    border-left: 2px solid var(--fs-primary);
}

/* Remove nested card styling from ShortfallGuidanceCard */
.score-guidance :deep(.shortfall-guidance-card)[b-nsxs1b6z8d] {
    background: transparent;
    border-left: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
    box-shadow: none;
}

/* Description Section */
.score-description[b-nsxs1b6z8d] {
    margin-top: var(--fs-spacing-md);
    padding-top: var(--fs-spacing-md);
    border-top: 1px solid var(--fs-border-default);
}

.score-description p[b-nsxs1b6z8d] {
    margin: 0;
    color: var(--fs-text-secondary);
    font-size: var(--fs-font-size-base);
    line-height: var(--fs-line-height-relaxed);
}

.suggestion-text[b-nsxs1b6z8d] {
    margin-top: var(--fs-spacing-sm) !important;
    padding-left: var(--fs-spacing-md);
    border-left: 2px solid var(--fs-border-default);
}

/* Actions Section */
.score-actions[b-nsxs1b6z8d] {
    margin-top: var(--fs-spacing-lg);
    padding-top: var(--fs-spacing-lg);
    border-top: 1px solid var(--fs-border-default);
}

.btn-change-foods[b-nsxs1b6z8d] {
    display: inline-flex;
    align-items: center;
    gap: var(--fs-spacing-sm);
    padding: var(--fs-spacing-md) var(--fs-spacing-xl);
    background: var(--fs-bg-primary);
    border: 2px solid var(--fs-primary);
    color: var(--fs-primary);
    border-radius: var(--fs-radius-md);
    font-size: var(--fs-font-size-base);
    font-weight: var(--fs-font-weight-semibold);
    cursor: pointer;
    transition: var(--fs-transition-all);
    min-height: var(--fs-mobile-tap-target-sm);
}

.btn-change-foods:hover[b-nsxs1b6z8d] {
    background: var(--fs-primary);
    color: var(--fs-text-inverse);
    transform: translateY(-1px);
    box-shadow: var(--fs-shadow-primary);
}

.btn-change-foods:active[b-nsxs1b6z8d] {
    transform: translateY(0);
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .meal-score-card[b-nsxs1b6z8d] {
        padding: var(--fs-spacing-lg);
        border-radius: var(--fs-radius-lg);
    }

    .score-header[b-nsxs1b6z8d] {
        gap: var(--fs-spacing-md);
    }

    .score-ring[b-nsxs1b6z8d] {
        width: 48px;
        height: 48px;
    }

    .score-icon[b-nsxs1b6z8d] {
        font-size: 1.25rem;
    }

    .score-grade[b-nsxs1b6z8d] {
        font-size: var(--fs-font-size-lg);
    }

    .btn-change-foods[b-nsxs1b6z8d] {
        width: 100%;
        justify-content: center;
        min-height: var(--fs-mobile-tap-target);
    }
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .meal-score-card[b-nsxs1b6z8d],
    .circle-progress[b-nsxs1b6z8d],
    .btn-change-foods[b-nsxs1b6z8d] {
        transition: none;
    }

    .btn-change-foods:hover[b-nsxs1b6z8d] {
        transform: none;
    }
}

/* Accessibility: High contrast mode */
@media (prefers-contrast: high) {
    .meal-score-card[b-nsxs1b6z8d] {
        border-width: 2px;
    }

    .btn-change-foods[b-nsxs1b6z8d] {
        border-width: 3px;
    }

    .circle-progress[b-nsxs1b6z8d] {
        stroke-width: 4;
    }
}
/* /Components/MealsList.razor.rz.scp.css */
/* Meal item card styles */
.meal-item-card[b-2n95aogu62] {
    border: 1px solid #e0e0e0 !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    margin-bottom: 1.5rem !important;
    transition: all 0.2s ease;
}

.meal-item-card:hover[b-2n95aogu62] {
    border-color: #4A90E2 !important;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.1) !important;
}

.meal-option-list[b-2n95aogu62] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.meal-option-list li[b-2n95aogu62] {
    background: transparent !important;
    border: none !important;
    padding: 1rem 0 !important;
}
/* /Components/MealsMacrosFilter.razor.rz.scp.css */
.macros-filter-card[b-r1lby73dko] {
    background-color: #ffffff;
    border-radius: 12px;
}

.macros-filter-header[b-r1lby73dko] {
    background-color: #f8f9fa;
    border-radius: 12px 12px 0 0;
    padding: 1.25rem;
}
/* /Components/ModalComponent.razor.rz.scp.css */
.modal-dialog-centered[b-3o3ibx7axm] {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}
/* /Components/NutrientTotal.razor.rz.scp.css */
/* Nutrient Total Styles */
.nutrient-total[b-fortqbhgh1] {
    font-size: 1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.nutrient-total .nutrient-value[b-fortqbhgh1] {
    font-weight: bold;
    margin-right: 4px;
}

.nutrient-total i[b-fortqbhgh1],
.nutrient-total-compact i[b-fortqbhgh1] {
    cursor: help;
    margin-left: 4px;
}

/* Compact Icon Styles */
.nutrient-total-compact[b-fortqbhgh1] {
    font-size: 0.9rem;
    font-weight: bold;
}

.nutrient-total-compact .compact-icon[b-fortqbhgh1] {
    font-size: 0.7rem;
    vertical-align: super;
    margin-left: 2px;
}
/* /Components/NutritionFacts/NutritionFactsResult.razor.rz.scp.css */
.nutrition-facts-display .nutrition-facts-table[b-6c2afw3m2b] {
    font-family: Arial, sans-serif;
}

.nutrient-row[b-6c2afw3m2b] {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    border-bottom: 1px solid #f0f0f0;
}

.nutrient-row.small[b-6c2afw3m2b] {
    font-size: 0.875rem;
}

.nutrient-row.indent-1[b-6c2afw3m2b] {
    padding-left: 20px;
}

.nutrient-row.indent-2[b-6c2afw3m2b] {
    padding-left: 40px;
}

.nutrient-label[b-6c2afw3m2b] {
    font-weight: 500;
}

.nutrient-value[b-6c2afw3m2b] {
    font-weight: 400;
}

.calories-section h5[b-6c2afw3m2b] {
    font-weight: 700;
    margin: 0;
}

.serving-info[b-6c2afw3m2b] {
    font-size: 0.95rem;
}

.vitamins-minerals-section[b-6c2afw3m2b],
.additional-nutrients-section[b-6c2afw3m2b] {
    margin-top: 10px;
}

.metadata-section[b-6c2afw3m2b] {
    margin-top: 10px;
}
/* /Components/NutritionFacts/ProductDataValidator.razor.rz.scp.css */
.product-data-validator[b-bh3itt9ov5] {
    max-height: 90vh;
    overflow-y: auto;
}

/* Nutrition Summary Panel */
.nutrition-summary-panel[b-bh3itt9ov5] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 10;
    margin: -1rem -1rem 1rem -1rem;
}

.nutrition-summary-panel.border-warning[b-bh3itt9ov5] {
    border-color: #ffc107;
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
}

.nutrition-summary-panel.border-success[b-bh3itt9ov5] {
    border-color: #28a745;
}

.summary-header[b-bh3itt9ov5] {
    margin-bottom: 1rem;
    text-align: center;
}

.summary-header h6[b-bh3itt9ov5] {
    color: #212529;
    font-weight: 600;
}

/* Nutrition Grid */
.summary-grid[b-bh3itt9ov5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.nutrient-item[b-bh3itt9ov5] {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    text-align: center;
    border: 1px solid #dee2e6;
    transition: all 0.2s ease;
}

.nutrient-item.has-value[b-bh3itt9ov5] {
    border-color: #28a745;
    background: #f0fff4;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.15);
}

.nutrient-label[b-bh3itt9ov5] {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.nutrient-value[b-bh3itt9ov5] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #212529;
}

.nutrient-item.has-value .nutrient-value[b-bh3itt9ov5] {
    color: #28a745;
}

/* Compact view for nutrition fields */
.compact-nutrition-view .mb-2:not(.has-user-input)[b-bh3itt9ov5] {
    display: none;
}

.compact-nutrition-view .mb-2 input:not(:placeholder-shown)[b-bh3itt9ov5] {
    border-color: #28a745;
    background-color: #f0fff4;
}

/* Enhanced form inputs */
.form-control:focus[b-bh3itt9ov5] {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-control:not(:placeholder-shown)[b-bh3itt9ov5] {
    border-color: #28a745;
    background-color: #f8fff9;
}

/* Modal adjustments */
[b-bh3itt9ov5] .modal-body {
    padding: 0;
}

[b-bh3itt9ov5] .modal-body > .product-data-validator {
    padding: 1rem;
}

/* Extraction info alert improvements */
.alert[b-bh3itt9ov5] {
    border-radius: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .summary-grid[b-bh3itt9ov5] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
    
    .nutrient-item[b-bh3itt9ov5] {
        padding: 0.5rem;
    }
    
    .nutrient-value[b-bh3itt9ov5] {
        font-size: 1.1rem;
    }
    
    .nutrition-summary-panel[b-bh3itt9ov5] {
        position: relative;
        margin: 0 0 1rem 0;
    }
}

/* Action buttons improvements */
.btn-group-custom[b-bh3itt9ov5] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Loading animation for auto-calculate */
.btn-outline-info:active[b-bh3itt9ov5] {
    transform: scale(0.95);
}

/* Visual feedback for low confidence fields */
.low-confidence-field[b-bh3itt9ov5] {
    border-color: #ffc107 !important;
    background-color: #fff8e1 !important;
}

/* Highlight extracted values */
@keyframes highlight-pulse-b-bh3itt9ov5 {
    0% {
        background-color: #fff3cd;
    }
    50% {
        background-color: #ffeaa7;
    }
    100% {
        background-color: #fff3cd;
    }
}

.extracted-value[b-bh3itt9ov5] {
    animation: highlight-pulse-b-bh3itt9ov5 2s ease-in-out;
}
/* /Components/NutritionFacts/ProductImageScanner.razor.rz.scp.css */
/* Upload Area Styles */
.upload-area[b-rydmx4jesk] {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-area:hover[b-rydmx4jesk] {
    border-color: #007bff;
    background-color: #f8f9fa;
}

.upload-area.drag-over[b-rydmx4jesk] {
    border-color: #28a745;
    background-color: #e8f5e9;
}

.upload-label[b-rydmx4jesk] {
    cursor: pointer;
    color: #495057;
    width: 100%;
    margin: 0;
}

/* Image Preview Styles */
.image-preview img[b-rydmx4jesk] {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

.image-info[b-rydmx4jesk] {
    padding: 5px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

/* Card Body Adjustments */
.card-body[b-rydmx4jesk] {
    padding-bottom: 2rem;
}

/* Ensure buttons are always visible */
.product-image-scanner .btn[b-rydmx4jesk] {
    z-index: 10;
    position: relative;
}

/* Action Buttons Container */
.mt-3.mb-4.d-flex.gap-2[b-rydmx4jesk] {
    background-color: #f8f9fa;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-top: 15px !important;
    margin-bottom: 25px !important;
}

/* Modern minimal design for extraction results */
.extraction-results-overlay[b-rydmx4jesk] {
    position: relative;
    margin-top: 1rem;
    animation: slideInUp-b-rydmx4jesk 0.3s ease-out;
}

.extraction-results-card[b-rydmx4jesk] {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
}

.extraction-results-card:hover[b-rydmx4jesk] {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.results-header[b-rydmx4jesk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e9ecef;
}

.status-indicator[b-rydmx4jesk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #198754;
    font-weight: 600;
}

.status-indicator i[b-rydmx4jesk] {
    font-size: 1.2rem;
}

.confidence-badge[b-rydmx4jesk] {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
}

.confidence-excellent[b-rydmx4jesk] {
    background: linear-gradient(135deg, #198754, #20c997);
}

.confidence-good[b-rydmx4jesk] {
    background: linear-gradient(135deg, #0d6efd, #6610f2);
}

.confidence-fair[b-rydmx4jesk] {
    background: linear-gradient(135deg, #fd7e14, #ffc107);
}

.confidence-low[b-rydmx4jesk] {
    background: linear-gradient(135deg, #dc3545, #fd7e14);
}

.confidence-unknown[b-rydmx4jesk] {
    background: linear-gradient(135deg, #6c757d, #adb5bd);
}

.nutrition-summary[b-rydmx4jesk] {
    margin-bottom: 1.5rem;
}

.product-info[b-rydmx4jesk] {
    margin-bottom: 1rem;
}

.product-info h6[b-rydmx4jesk] {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #212529;
}

.product-info .brand[b-rydmx4jesk] {
    color: #6c757d;
    font-size: 0.9rem;
    font-style: italic;
}

.macro-grid[b-rydmx4jesk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.macro-item[b-rydmx4jesk] {
    text-align: center;
    padding: 0.75rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.macro-item:hover[b-rydmx4jesk] {
    border-color: #0d6efd;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.macro-value[b-rydmx4jesk] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0d6efd;
    margin-bottom: 0.25rem;
}

.macro-label[b-rydmx4jesk] {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.serving-info[b-rydmx4jesk] {
    text-align: center;
    font-size: 0.875rem;
    color: #6c757d;
    background: rgba(13, 110, 253, 0.1);
    padding: 0.5rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.action-buttons[b-rydmx4jesk] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.action-buttons .btn[b-rydmx4jesk] {
    border-radius: 8px;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
    border: 2px solid;
}

.btn-apply[b-rydmx4jesk] {
    background: linear-gradient(135deg, #198754, #20c997);
    border-color: #198754;
    flex: 1;
    min-width: 140px;
}

.btn-apply:hover[b-rydmx4jesk] {
    background: linear-gradient(135deg, #157347, #1a9b72);
    border-color: #157347;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(25, 135, 84, 0.3);
}

.btn-details[b-rydmx4jesk] {
    border-color: #6c757d;
    color: #6c757d;
    background: white;
}

.btn-details:hover[b-rydmx4jesk] {
    background: #6c757d;
    color: white;
    transform: translateY(-1px);
}

.btn-retry[b-rydmx4jesk] {
    border-color: #fd7e14;
    color: #fd7e14;
    background: white;
}

.btn-retry:hover[b-rydmx4jesk] {
    background: #fd7e14;
    color: white;
    border-color: #fd7e14;
    transform: translateY(-1px);
}

/* Animation for slide-in effect */
@keyframes slideInUp-b-rydmx4jesk {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .extraction-results-card[b-rydmx4jesk] {
        padding: 1rem;
    }
    
    .macro-grid[b-rydmx4jesk] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .action-buttons[b-rydmx4jesk] {
        flex-direction: column;
    }
    
    .action-buttons .btn[b-rydmx4jesk] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .results-header[b-rydmx4jesk] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    
    .macro-grid[b-rydmx4jesk] {
        grid-template-columns: 1fr 1fr;
    }
    
    .macro-value[b-rydmx4jesk] {
        font-size: 1.25rem;
    }
}

/* Clean Extraction Results Styles */
.extraction-results-clean[b-rydmx4jesk] {
    animation: fadeInUp-b-rydmx4jesk 0.5s ease-out;
    padding: 0;
}

.results-header-clean[b-rydmx4jesk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid #dee2e6;
}

.status-section[b-rydmx4jesk] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.status-icon[b-rydmx4jesk] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #198754, #20c997);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.status-text h5[b-rydmx4jesk] {
    margin: 0;
    color: #212529;
    font-weight: 600;
}

.status-text small[b-rydmx4jesk] {
    color: #6c757d;
}

.confidence-badge-clean[b-rydmx4jesk] {
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    color: white;
    text-align: center;
}

.product-card[b-rydmx4jesk] {
    background: white;
    padding: 2rem;
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
}

.product-header[b-rydmx4jesk] {
    text-align: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid #f1f3f4;
    padding-bottom: 1.5rem;
}

.product-name[b-rydmx4jesk] {
    margin: 0 0 0.5rem 0;
    color: #212529;
    font-weight: 700;
    font-size: 1.75rem;
}

.product-brand[b-rydmx4jesk] {
    display: block;
    color: #6c757d;
    font-size: 1.1rem;
    font-style: italic;
    margin-bottom: 0.75rem;
}

.serving-size[b-rydmx4jesk] {
    color: #495057;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    background: #f8f9fa;
    border-radius: 20px;
    display: inline-block;
}

.nutrition-grid[b-rydmx4jesk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.nutrition-item[b-rydmx4jesk] {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 16px;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.nutrition-item[b-rydmx4jesk]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    transition: all 0.3s ease;
}

.nutrition-item.calories[b-rydmx4jesk]::before {
    background: linear-gradient(90deg, #fd7e14, #ffc107);
}

.nutrition-item.fat[b-rydmx4jesk]::before {
    background: linear-gradient(90deg, #dc3545, #fd7e14);
}

.nutrition-item.carbs[b-rydmx4jesk]::before {
    background: linear-gradient(90deg, #0d6efd, #6610f2);
}

.nutrition-item.protein[b-rydmx4jesk]::before {
    background: linear-gradient(90deg, #198754, #20c997);
}

.nutrition-item:hover[b-rydmx4jesk] {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: transparent;
}

.nutrition-item:hover[b-rydmx4jesk]::before {
    height: 6px;
}

.nutrition-value[b-rydmx4jesk] {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.nutrition-item.calories .nutrition-value[b-rydmx4jesk] {
    color: #fd7e14;
}

.nutrition-item.fat .nutrition-value[b-rydmx4jesk] {
    color: #dc3545;
}

.nutrition-item.carbs .nutrition-value[b-rydmx4jesk] {
    color: #0d6efd;
}

.nutrition-item.protein .nutrition-value[b-rydmx4jesk] {
    color: #198754;
}

.nutrition-value .unit[b-rydmx4jesk] {
    font-size: 1.25rem;
    font-weight: 500;
    color: #6c757d;
    margin-left: 0.25rem;
}

.nutrition-label[b-rydmx4jesk] {
    font-size: 1rem;
    color: #495057;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.action-section[b-rydmx4jesk] {
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 0 0 12px 12px;
    border: 1px solid #dee2e6;
    border-top: none;
    text-align: center;
}

.btn-primary-action[b-rydmx4jesk] {
    font-size: 1.1rem;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    margin-bottom: 1rem;
    min-width: 200px;
    border: none;
    background: linear-gradient(135deg, #198754, #20c997);
    transition: all 0.3s ease;
}

.btn-primary-action:hover[b-rydmx4jesk] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(25, 135, 84, 0.4);
    background: linear-gradient(135deg, #157347, #1a9b72);
}

.secondary-actions[b-rydmx4jesk] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.secondary-actions .btn[b-rydmx4jesk] {
    padding: 0.5rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.secondary-actions .btn:hover[b-rydmx4jesk] {
    transform: translateY(-1px);
}

/* Animation for fade in */
@keyframes fadeInUp-b-rydmx4jesk {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments for clean results */
@media (max-width: 768px) {
    .results-header-clean[b-rydmx4jesk] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        padding: 1rem;
    }
    
    .product-card[b-rydmx4jesk] {
        padding: 1.5rem;
    }
    
    .nutrition-grid[b-rydmx4jesk] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .nutrition-item[b-rydmx4jesk] {
        padding: 1rem;
    }
    
    .nutrition-value[b-rydmx4jesk] {
        font-size: 2rem;
    }
    
    .product-name[b-rydmx4jesk] {
        font-size: 1.5rem;
    }
    
    .action-section[b-rydmx4jesk] {
        padding: 1.5rem;
    }
    
    .secondary-actions[b-rydmx4jesk] {
        flex-direction: column;
    }
    
    .secondary-actions .btn[b-rydmx4jesk] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .nutrition-grid[b-rydmx4jesk] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .nutrition-value[b-rydmx4jesk] {
        font-size: 1.75rem;
    }
    
    .product-name[b-rydmx4jesk] {
        font-size: 1.25rem;
    }
}

/* Debug information styling */
.debug-info[b-rydmx4jesk] {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    background: #f8f9fa !important;
    border: 1px dashed #dee2e6 !important;
    border-radius: 4px;
    opacity: 0.8;
}

/* Compact Extraction Results Styles */
.extraction-results-compact[b-rydmx4jesk] {
    animation: fadeInUp-b-rydmx4jesk 0.3s ease-out;
}

.results-header-compact[b-rydmx4jesk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    border: 1px solid #dee2e6;
}

.results-header-compact .status-section[b-rydmx4jesk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.results-header-compact .status-icon[b-rydmx4jesk] {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #198754, #20c997);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

.results-header-compact .status-text h6[b-rydmx4jesk] {
    margin: 0;
    color: #212529;
    font-weight: 600;
    font-size: 1rem;
}

.results-header-compact .status-text small[b-rydmx4jesk] {
    color: #6c757d;
    font-size: 0.8rem;
}

.confidence-badge-compact[b-rydmx4jesk] {
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.8rem;
    color: white;
    text-align: center;
}

.action-section-compact[b-rydmx4jesk] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

/* Responsive adjustments for compact results */
@media (max-width: 768px) {
    .results-header-compact[b-rydmx4jesk] {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
        padding: 0.75rem;
    }
    
    .action-section-compact[b-rydmx4jesk] {
        flex-direction: column;
        padding: 0.75rem;
    }
    
    .action-section-compact .btn[b-rydmx4jesk] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .results-header-compact .status-icon[b-rydmx4jesk] {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }
    
    .confidence-badge-compact[b-rydmx4jesk] {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }
}
/* /Components/Pages/Demo/MobileComponentsDemo.razor.rz.scp.css */
/* Mobile Components Demo Page Styles */

.mobile-demo-page[b-y1qk5thrc6] {
    padding-bottom: 80px; /* Space for bottom nav */
    min-height: 100vh;
}

.page-header[b-y1qk5thrc6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--md-sys-color-surface, #fff);
    border-bottom: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
    position: sticky;
    top: 0;
    z-index: 100;
}

.page-header h1[b-y1qk5thrc6] {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--md-sys-color-on-surface, #000);
}

.filter-btn[b-y1qk5thrc6] {
    position: relative;
    padding: 8px 16px;
    border: 1px solid var(--md-sys-color-primary, #4caf50);
    border-radius: 20px;
    background: transparent;
    color: var(--md-sys-color-primary, #4caf50);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-btn:hover[b-y1qk5thrc6] {
    background: var(--md-sys-color-primary-container, #e8f5e9);
}

.filter-btn:active[b-y1qk5thrc6] {
    transform: scale(0.95);
}

.filter-btn .badge[b-y1qk5thrc6] {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--md-sys-color-error, #f44336);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
}

.demo-section[b-y1qk5thrc6] {
    padding: 16px;
    background: var(--md-sys-color-surface, #fff);
}

.demo-section h2[b-y1qk5thrc6] {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--md-sys-color-on-surface, #000);
}

.demo-section p[b-y1qk5thrc6] {
    margin: 0;
    font-size: 14px;
}

/* Product Card Styles */
.product-card[b-y1qk5thrc6] {
    display: flex;
    gap: 12px;
    padding: 12px;
}

.product-image-placeholder[b-y1qk5thrc6] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.product-info[b-y1qk5thrc6] {
    flex: 1;
    min-width: 0; /* For text truncation */
}

.product-name[b-y1qk5thrc6] {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface, #000);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-category[b-y1qk5thrc6] {
    margin: 0 0 4px 0;
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant, #666);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-description[b-y1qk5thrc6] {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: var(--md-sys-color-on-surface-variant, #666);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-footer[b-y1qk5thrc6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.product-price[b-y1qk5thrc6] {
    font-size: 18px;
    font-weight: 700;
    color: var(--md-sys-color-primary, #4caf50);
}

.product-rating[b-y1qk5thrc6] {
    font-size: 14px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant, #666);
}

/* Filter Styles */
.filter-group[b-y1qk5thrc6] {
    margin-bottom: 24px;
}

.filter-group h3[b-y1qk5thrc6] {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface, #000);
}

.filter-checkbox[b-y1qk5thrc6] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s;
}

.filter-checkbox:hover[b-y1qk5thrc6] {
    background: var(--md-sys-color-surface-variant, #f5f5f5);
}

.filter-checkbox input[type="checkbox"][b-y1qk5thrc6] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.filter-checkbox span[b-y1qk5thrc6] {
    font-size: 14px;
    color: var(--md-sys-color-on-surface, #000);
}

.price-slider[b-y1qk5thrc6] {
    width: 100%;
    margin: 8px 0;
    accent-color: var(--md-sys-color-primary, #4caf50);
}

.filter-group p[b-y1qk5thrc6] {
    margin: 8px 0 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--md-sys-color-primary, #4caf50);
}

.rating-filters[b-y1qk5thrc6] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rating-btn[b-y1qk5thrc6] {
    padding: 8px 12px;
    border: 1px solid var(--md-sys-color-outline, #d0d0d0);
    border-radius: 20px;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.rating-btn:hover[b-y1qk5thrc6] {
    background: var(--md-sys-color-surface-variant, #f5f5f5);
}

.rating-btn.active[b-y1qk5thrc6] {
    background: var(--md-sys-color-primary, #4caf50);
    color: white;
    border-color: var(--md-sys-color-primary, #4caf50);
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .page-header[b-y1qk5thrc6] {
        background: var(--md-sys-color-surface, #1e1e1e);
        border-bottom-color: var(--md-sys-color-outline-variant, #3a3a3a);
    }

    .page-header h1[b-y1qk5thrc6] {
        color: var(--md-sys-color-on-surface, #fff);
    }

    .filter-btn:hover[b-y1qk5thrc6] {
        background: var(--md-sys-color-primary-container, #2d4a2f);
    }

    .demo-section[b-y1qk5thrc6] {
        background: var(--md-sys-color-surface, #1e1e1e);
    }

    .demo-section h2[b-y1qk5thrc6] {
        color: var(--md-sys-color-on-surface, #fff);
    }

    .product-name[b-y1qk5thrc6] {
        color: var(--md-sys-color-on-surface, #fff);
    }

    .product-category[b-y1qk5thrc6],
    .product-description[b-y1qk5thrc6],
    .product-rating[b-y1qk5thrc6] {
        color: var(--md-sys-color-on-surface-variant, #b0b0b0);
    }

    .filter-checkbox:hover[b-y1qk5thrc6] {
        background: var(--md-sys-color-surface-variant, #2a2a2a);
    }

    .filter-checkbox span[b-y1qk5thrc6],
    .filter-group h3[b-y1qk5thrc6] {
        color: var(--md-sys-color-on-surface, #fff);
    }

    .rating-btn:hover[b-y1qk5thrc6] {
        background: var(--md-sys-color-surface-variant, #2a2a2a);
    }

    .rating-btn.active[b-y1qk5thrc6] {
        background: var(--md-sys-color-primary, #66bb6a);
        color: var(--md-sys-color-on-primary, #000);
    }
}

/* Mobile optimizations */
@media (max-width: 360px) {
    .page-header[b-y1qk5thrc6] {
        padding: 12px;
    }

    .page-header h1[b-y1qk5thrc6] {
        font-size: 18px;
    }

    .filter-btn[b-y1qk5thrc6] {
        padding: 6px 12px;
        font-size: 13px;
    }

    .product-card[b-y1qk5thrc6] {
        padding: 10px;
    }

    .product-image-placeholder[b-y1qk5thrc6] {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .product-name[b-y1qk5thrc6] {
        font-size: 15px;
    }

    .product-price[b-y1qk5thrc6] {
        font-size: 16px;
    }
}
/* /Components/Pages/ForgotPassword.razor.rz.scp.css */
.card[b-bmszhao9x2] {
    border-color: #e0e0e0;
    border-radius: 4px;
}

.card-title[b-bmszhao9x2] {
    color: #f08a12;
}

.form-control.custom-input[b-bmszhao9x2] {
    width: 100%;
    padding: 0.375rem 0.75rem;
    border-color: #e0e0e0;
}

.form-control.custom-input:focus[b-bmszhao9x2] {
    box-shadow: none;
    border-color: #f08a12;
}

.btn-primary[b-bmszhao9x2] {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover[b-bmszhao9x2] {
    background-color: #0056b3;
    border-color: #0056b3;
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* Modern Minimalist Login Design */
.login-container[b-pwyxsh4my2] {
    min-height: calc(100vh - 60px); /* Adjust for existing header */
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    padding-top: 2rem;
}

/* Main Content */
.auth-main[b-pwyxsh4my2] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 120px);
    padding: 2rem 1rem;
}

.auth-card[b-pwyxsh4my2] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.08);
    padding: 3rem;
    width: 100%;
    max-width: 420px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.auth-card-header[b-pwyxsh4my2] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.auth-title[b-pwyxsh4my2] {
    font-size: 1.875rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.02em;
}

.auth-subtitle[b-pwyxsh4my2] {
    font-size: 1rem;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Modern Alert Styles */
.alert-modern[b-pwyxsh4my2] {
    padding: 1rem 1.25rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    border: none;
    font-weight: 500;
}

.alert-modern.alert-success[b-pwyxsh4my2] {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border-left: 4px solid #22c55e;
}

.alert-modern.alert-danger[b-pwyxsh4my2] {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #dc2626;
    border-left: 4px solid #ef4444;
}

.alert-modern.alert-info[b-pwyxsh4my2] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #2563eb;
    border-left: 4px solid #3b82f6;
}

/* Form Styles */
.auth-form[b-pwyxsh4my2] {
    margin-bottom: 2rem;
}

.form-group[b-pwyxsh4my2] {
    margin-bottom: 1.5rem;
}

.form-label[b-pwyxsh4my2] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}

.input-wrapper[b-pwyxsh4my2] {
    position: relative;
}

.form-input[b-pwyxsh4my2] {
    width: 100%;
    padding: 0.875rem 1rem;
    padding-left: 3rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    background: #fafafa;
    transition: all 0.2s ease;
    color: #1a1a1a;
}

.form-input[b-pwyxsh4my2]::placeholder {
    color: #9ca3af;
}

.form-input:focus[b-pwyxsh4my2] {
    outline: none;
    border-color: #f08a12;
    background: white;
    box-shadow: 0 0 0 3px rgba(240, 138, 18, 0.08);
}

.input-icon[b-pwyxsh4my2] {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    z-index: 2;
}

.form-input:focus + .input-icon[b-pwyxsh4my2] {
    color: #f08a12;
}

.password-toggle[b-pwyxsh4my2] {
    position: absolute;
    right: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    z-index: 2;
}

.password-toggle:hover[b-pwyxsh4my2] {
    color: #6b7280;
}

/* Form Options */
.form-options[b-pwyxsh4my2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.checkbox-wrapper[b-pwyxsh4my2] {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 0.5rem;
}

.checkbox-input[b-pwyxsh4my2] {
    display: none;
}

.checkbox-custom[b-pwyxsh4my2] {
    width: 18px;
    height: 18px;
    border: 1.5px solid #d1d5db;
    border-radius: 4px;
    background: white;
    position: relative;
    transition: all 0.2s ease;
}

.checkbox-input:checked + .checkbox-custom[b-pwyxsh4my2] {
    background: #f08a12;
    border-color: #f08a12;
}

.checkbox-input:checked + .checkbox-custom[b-pwyxsh4my2]::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: 2px solid white;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.checkbox-label[b-pwyxsh4my2] {
    font-size: 0.875rem;
    color: #6b7280;
    user-select: none;
}

.forgot-link[b-pwyxsh4my2] {
    font-size: 0.875rem;
    color: #f08a12;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.forgot-link:hover[b-pwyxsh4my2] {
    color: #d67a0d;
    text-decoration: none;
}

/* Primary Button */
.btn-primary[b-pwyxsh4my2] {
    width: 100%;
    background: #f08a12;
    border: none;
    border-radius: 12px;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 52px;
}

.btn-primary:hover:not(:disabled)[b-pwyxsh4my2] {
    background: #d67a0d;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(240, 138, 18, 0.3);
}

.btn-primary:active:not(:disabled)[b-pwyxsh4my2] {
    transform: translateY(0);
}

.btn-primary:disabled[b-pwyxsh4my2] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-loading[b-pwyxsh4my2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.spinner[b-pwyxsh4my2] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin-b-pwyxsh4my2 1s linear infinite;
}

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

/* Auth Divider */
.auth-divider[b-pwyxsh4my2] {
    display: flex;
    align-items: center;
    margin: 2rem 0 1.5rem;
    text-align: center;
    color: #9ca3af;
    font-size: 0.875rem;
    font-weight: 500;
}

.auth-divider[b-pwyxsh4my2]::before,
.auth-divider[b-pwyxsh4my2]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #e5e7eb 50%, transparent 100%);
}

.auth-divider span[b-pwyxsh4my2] {
    padding: 0 1rem;
    background: white;
    position: relative;
    z-index: 1;
}

/* Ghost Button */
.btn-ghost[b-pwyxsh4my2] {
    width: 100%;
    background: transparent;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 52px;
    margin-bottom: 1rem;
}

.btn-ghost:hover[b-pwyxsh4my2] {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #374151;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.btn-ghost:active[b-pwyxsh4my2] {
    transform: translateY(0);
    background: #f3f4f6;
}

.btn-ghost svg[b-pwyxsh4my2] {
    transition: all 0.2s ease;
}

.btn-ghost:hover svg[b-pwyxsh4my2] {
    transform: scale(1.05);
    stroke: #374151;
}

/* Footer */
.auth-footer[b-pwyxsh4my2] {
    text-align: center;
    margin-top: 2rem;
}

.signup-prompt[b-pwyxsh4my2] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

.signup-link[b-pwyxsh4my2] {
    color: #f08a12;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.signup-link:hover[b-pwyxsh4my2] {
    color: #d67a0d;
    text-decoration: none;
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
    .auth-card[b-pwyxsh4my2] {
        padding: 2rem 1.5rem;
        margin: 1rem;
        border-radius: 12px;
    }
    
    .auth-title[b-pwyxsh4my2] {
        font-size: 1.5rem;
    }
    
    .auth-nav[b-pwyxsh4my2] {
        gap: 1rem;
    }
    
    .auth-link[b-pwyxsh4my2] {
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
    }
    
    .form-options[b-pwyxsh4my2] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
}

@media (max-width: 320px) {
    .auth-card[b-pwyxsh4my2] {
        padding: 1.5rem 1rem;
    }
    
    .brand-text[b-pwyxsh4my2] {
        font-size: 1.25rem;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    *[b-pwyxsh4my2] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus visible for better keyboard navigation */
.btn-primary:focus-visible[b-pwyxsh4my2],
.btn-ghost:focus-visible[b-pwyxsh4my2],
.forgot-link:focus-visible[b-pwyxsh4my2],
.signup-link:focus-visible[b-pwyxsh4my2],
.auth-link:focus-visible[b-pwyxsh4my2] {
    outline: 2px solid #f08a12;
    outline-offset: 2px;
}
/* /Components/Pages/ResetPassword.razor.rz.scp.css */
.input-group-text[b-tc4spw4f0n] {
    background-color: transparent;
    border-right: none;
}
.input-group .form-control[b-tc4spw4f0n] {
    border-left: none;
}
.input-group .btn[b-tc4spw4f0n] {
    border-left: none;
}
.card[b-tc4spw4f0n] {
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.card-title[b-tc4spw4f0n] {
    color: #f08a12;
}
.btn-primary[b-tc4spw4f0n] {
    background-color: #007bff;
    border-color: #007bff;
}
.btn-primary:hover[b-tc4spw4f0n] {
    background-color: #0056b3;
    border-color: #0056b3;
}
/* /Components/Pages/SignUp.razor.rz.scp.css */
/* Modern Minimalist SignUp Design */
.signup-container[b-wjadusrl0v] {
    min-height: calc(100vh - 60px); /* Adjust for existing header */
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    padding-top: 2rem;
}

/* Main Content */
.auth-main[b-wjadusrl0v] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 120px);
    padding: 2rem 1rem;
}

.auth-card[b-wjadusrl0v] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.08);
    padding: 3rem;
    width: 100%;
    max-width: 420px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.auth-card-header[b-wjadusrl0v] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.auth-title[b-wjadusrl0v] {
    font-size: 1.875rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.02em;
}

.auth-subtitle[b-wjadusrl0v] {
    font-size: 1rem;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Modern Alert Styles */
.alert-modern[b-wjadusrl0v] {
    padding: 1rem 1.25rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    border: none;
    font-weight: 500;
}

.alert-modern.alert-success[b-wjadusrl0v] {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border-left: 4px solid #22c55e;
}

.alert-modern.alert-danger[b-wjadusrl0v] {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #dc2626;
    border-left: 4px solid #ef4444;
}

.alert-modern.alert-warning[b-wjadusrl0v] {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    color: #d97706;
    border-left: 4px solid #f59e0b;
}

.alert-modern.alert-info[b-wjadusrl0v] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #2563eb;
    border-left: 4px solid #3b82f6;
}

/* Form Styles */
.auth-form[b-wjadusrl0v] {
    margin-bottom: 2rem;
}

.form-group[b-wjadusrl0v] {
    margin-bottom: 1.5rem;
}

.form-label[b-wjadusrl0v] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}

.input-wrapper[b-wjadusrl0v] {
    position: relative;
}

.form-input[b-wjadusrl0v] {
    width: 100%;
    padding: 0.875rem 1rem;
    padding-left: 3rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    background: #fafafa;
    transition: all 0.2s ease;
    color: #1a1a1a;
}

.form-input.password-with-generator[b-wjadusrl0v] {
    padding-right: 5.5rem; /* Extra space for both generator and toggle buttons */
}

.form-input[b-wjadusrl0v]::placeholder {
    color: #9ca3af;
}

.form-input:focus[b-wjadusrl0v] {
    outline: none;
    border-color: #f08a12;
    background: white;
    box-shadow: 0 0 0 3px rgba(240, 138, 18, 0.08);
}

.input-icon[b-wjadusrl0v] {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-input:focus + .input-icon[b-wjadusrl0v] {
    color: #f08a12;
}

/* Password Generator Button */
.password-generator[b-wjadusrl0v] {
    position: absolute;
    right: 3rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.375rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 2;
}

.password-generator:hover[b-wjadusrl0v] {
    color: #f08a12;
    background: rgba(240, 138, 18, 0.1);
}

.password-generator:active[b-wjadusrl0v] {
    transform: translateY(-50%) scale(0.95);
}

/* Password Toggle Button */
.password-toggle[b-wjadusrl0v] {
    position: absolute;
    right: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    z-index: 2;
}

.password-toggle:hover[b-wjadusrl0v] {
    color: #6b7280;
}

/* Form Options */
.form-options[b-wjadusrl0v] {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.checkbox-wrapper[b-wjadusrl0v] {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    gap: 0.5rem;
    line-height: 1.5;
}

.checkbox-input[b-wjadusrl0v] {
    display: none;
}

.checkbox-custom[b-wjadusrl0v] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border: 1.5px solid #d1d5db;
    border-radius: 4px;
    background: white;
    position: relative;
    transition: all 0.2s ease;
    margin-top: 2px;
}

.checkbox-input:checked + .checkbox-custom[b-wjadusrl0v] {
    background: #f08a12;
    border-color: #f08a12;
}

.checkbox-input:checked + .checkbox-custom[b-wjadusrl0v]::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: 2px solid white;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.checkbox-label[b-wjadusrl0v] {
    font-size: 0.875rem;
    color: #6b7280;
    user-select: none;
    line-height: 1.5;
}

.checkbox-label .signup-link[b-wjadusrl0v] {
    font-size: 0.875rem;
}

/* Primary Button */
.btn-primary[b-wjadusrl0v] {
    width: 100%;
    background: #f08a12;
    border: none;
    border-radius: 12px;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 52px;
}

.btn-primary:hover:not(:disabled)[b-wjadusrl0v] {
    background: #d67a0d;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(240, 138, 18, 0.3);
}

.btn-primary:active:not(:disabled)[b-wjadusrl0v] {
    transform: translateY(0);
}

.btn-primary:disabled[b-wjadusrl0v] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-loading[b-wjadusrl0v] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.spinner[b-wjadusrl0v] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin-b-wjadusrl0v 1s linear infinite;
}

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

/* Validation Summary */
.validation-summary[b-wjadusrl0v] {
    text-align: center;
    margin-top: 1rem;
}

/* Footer */
.auth-footer[b-wjadusrl0v] {
    text-align: center;
    margin-top: 2rem;
}

.signup-prompt[b-wjadusrl0v] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

.signup-link[b-wjadusrl0v] {
    color: #f08a12;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.signup-link:hover[b-wjadusrl0v] {
    color: #d67a0d;
    text-decoration: none;
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
    .auth-card[b-wjadusrl0v] {
        padding: 2rem 1.5rem;
        margin: 1rem;
        border-radius: 12px;
    }
    
    .auth-title[b-wjadusrl0v] {
        font-size: 1.5rem;
    }
    
    .auth-subtitle[b-wjadusrl0v] {
        font-size: 0.875rem;
    }
    
    .form-input.password-with-generator[b-wjadusrl0v] {
        padding-right: 4.5rem; /* Reduced space for mobile */
    }
    
    .password-generator[b-wjadusrl0v] {
        right: 2.5rem;
        padding: 0.25rem;
    }
    
    .password-toggle[b-wjadusrl0v] {
        padding: 0.125rem;
    }
}

@media (max-width: 320px) {
    .auth-card[b-wjadusrl0v] {
        padding: 1.5rem 1rem;
    }
    
    .auth-title[b-wjadusrl0v] {
        font-size: 1.375rem;
    }
    
    .form-input[b-wjadusrl0v] {
        font-size: 0.9375rem;
    }
    
    .form-input.password-with-generator[b-wjadusrl0v] {
        padding-right: 4rem;
    }
    
    .password-generator[b-wjadusrl0v] {
        right: 2.25rem;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    *[b-wjadusrl0v] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus visible for better keyboard navigation */
.btn-primary:focus-visible[b-wjadusrl0v],
.password-generator:focus-visible[b-wjadusrl0v],
.password-toggle:focus-visible[b-wjadusrl0v],
.signup-link:focus-visible[b-wjadusrl0v] {
    outline: 2px solid #f08a12;
    outline-offset: 2px;
}

.form-input:focus-visible[b-wjadusrl0v] {
    outline: none; /* We use box-shadow instead for inputs */
}
/* /Components/PasswordGenerationModal.razor.rz.scp.css */
/* Password Generation Modal - Modern Minimalist Design */

/* Backdrop */
.password-modal-backdrop[b-wjeun1fayy] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
    animation: fade-in-b-wjeun1fayy 0.2s ease-out;
}

@keyframes fade-in-b-wjeun1fayy {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Dialog */
.password-modal-dialog[b-wjeun1fayy] {
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    animation: scale-in-b-wjeun1fayy 0.2s ease-out;
}

@keyframes scale-in-b-wjeun1fayy {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Modal Content */
.password-modal-content[b-wjeun1fayy] {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Header */
.password-modal-header[b-wjeun1fayy] {
    text-align: center;
    padding: 2.5rem 2rem 1.5rem;
    background: linear-gradient(135deg, #fafafa 0%, #f8f9fa 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.password-modal-icon[b-wjeun1fayy] {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, #f08a12 0%, #e07c0c 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 20px rgba(240, 138, 18, 0.3);
}

.password-modal-title[b-wjeun1fayy] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.02em;
}

.password-modal-subtitle[b-wjeun1fayy] {
    font-size: 0.9375rem;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Body */
.password-modal-body[b-wjeun1fayy] {
    padding: 2rem;
}

/* Password Display */
.password-display[b-wjeun1fayy] {
    margin-bottom: 2rem;
}

.password-label[b-wjeun1fayy] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.75rem;
    letter-spacing: 0.01em;
}

.password-input-wrapper[b-wjeun1fayy] {
    position: relative;
    display: flex;
}

.password-input[b-wjeun1fayy] {
    flex: 1;
    padding: 1rem 3.5rem 1rem 1rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.9375rem;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    background: #f8f9fa;
    color: #1a1a1a;
    transition: all 0.2s ease;
    letter-spacing: 0.025em;
    font-weight: 500;
}

.password-input:focus[b-wjeun1fayy] {
    outline: none;
    border-color: #f08a12;
    background: white;
    box-shadow: 0 0 0 3px rgba(240, 138, 18, 0.08);
}

.password-input:hover[b-wjeun1fayy] {
    border-color: #d1d5db;
    background: white;
}

.password-copy-btn[b-wjeun1fayy] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.password-copy-btn:hover[b-wjeun1fayy] {
    color: #f08a12;
    background: rgba(240, 138, 18, 0.1);
}

.password-copy-btn:active[b-wjeun1fayy] {
    transform: translateY(-50%) scale(0.95);
}

/* Warning Section */
.password-warning[b-wjeun1fayy] {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fed7aa;
    border-radius: 12px;
    align-items: flex-start;
}

.warning-icon[b-wjeun1fayy] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #d97706;
    margin-top: 0.125rem;
}

.warning-content[b-wjeun1fayy] {
    flex: 1;
}

.warning-title[b-wjeun1fayy] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #92400e;
    margin: 0 0 0.25rem 0;
}

.warning-text[b-wjeun1fayy] {
    font-size: 0.8125rem;
    color: #a16207;
    margin: 0;
    line-height: 1.4;
}

/* Footer */
.password-modal-footer[b-wjeun1fayy] {
    padding: 1.5rem 2rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.modal-primary-actions[b-wjeun1fayy] {
    display: flex;
    gap: 0.75rem;
}

/* Buttons */
.btn-primary[b-wjeun1fayy] {
    background: #f08a12;
    border: none;
    border-radius: 10px;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    white-space: nowrap;
}

.btn-primary:hover[b-wjeun1fayy] {
    background: #d67a0d;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(240, 138, 18, 0.3);
}

.btn-primary:active[b-wjeun1fayy] {
    transform: translateY(0);
}

.btn-outline[b-wjeun1fayy] {
    background: transparent;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    white-space: nowrap;
}

.btn-outline:hover[b-wjeun1fayy] {
    border-color: #d1d5db;
    background: #f9fafb;
    color: #374151;
}

.btn-outline:active[b-wjeun1fayy] {
    background: #f3f4f6;
}

.btn-secondary[b-wjeun1fayy] {
    background: transparent;
    border: 1.5px solid #f08a12;
    border-radius: 10px;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f08a12;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    white-space: nowrap;
}

.btn-secondary:hover[b-wjeun1fayy] {
    background: rgba(240, 138, 18, 0.05);
    border-color: #d67a0d;
    color: #d67a0d;
}

.btn-secondary:active[b-wjeun1fayy] {
    background: rgba(240, 138, 18, 0.1);
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
    .password-modal-backdrop[b-wjeun1fayy] {
        padding: 0.5rem;
    }

    .password-modal-header[b-wjeun1fayy] {
        padding: 2rem 1.5rem 1.25rem;
    }

    .password-modal-icon[b-wjeun1fayy] {
        width: 56px;
        height: 56px;
        margin-bottom: 1.25rem;
    }

    .password-modal-title[b-wjeun1fayy] {
        font-size: 1.375rem;
    }

    .password-modal-body[b-wjeun1fayy] {
        padding: 1.5rem;
    }

    .password-modal-footer[b-wjeun1fayy] {
        padding: 1.25rem 1.5rem 1.75rem;
        flex-direction: column;
        gap: 1rem;
    }

    .modal-primary-actions[b-wjeun1fayy] {
        width: 100%;
        justify-content: stretch;
    }

    .btn-primary[b-wjeun1fayy],
    .btn-outline[b-wjeun1fayy] {
        flex: 1;
        justify-content: center;
    }

    .btn-secondary[b-wjeun1fayy] {
        width: 100%;
        justify-content: center;
    }

    .password-warning[b-wjeun1fayy] {
        padding: 1rem;
        gap: 0.75rem;
    }

    .warning-title[b-wjeun1fayy] {
        font-size: 0.8125rem;
    }

    .warning-text[b-wjeun1fayy] {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .password-modal-header[b-wjeun1fayy] {
        padding: 1.5rem 1rem 1rem;
    }

    .password-modal-body[b-wjeun1fayy] {
        padding: 1.25rem;
    }

    .password-modal-footer[b-wjeun1fayy] {
        padding: 1rem 1.25rem 1.5rem;
    }

    .password-input[b-wjeun1fayy] {
        font-size: 0.875rem;
        padding: 0.875rem 3rem 0.875rem 0.875rem;
    }

    .password-copy-btn[b-wjeun1fayy] {
        padding: 0.375rem;
        right: 0.625rem;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .password-modal-backdrop[b-wjeun1fayy],
    .password-modal-dialog[b-wjeun1fayy],
    *[b-wjeun1fayy] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus states for keyboard navigation */
.password-copy-btn:focus-visible[b-wjeun1fayy],
.btn-primary:focus-visible[b-wjeun1fayy],
.btn-outline:focus-visible[b-wjeun1fayy],
.btn-secondary:focus-visible[b-wjeun1fayy] {
    outline: 2px solid #f08a12;
    outline-offset: 2px;
}

.password-input:focus-visible[b-wjeun1fayy] {
    outline: none; /* We use box-shadow instead */
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .password-modal-content[b-wjeun1fayy] {
        border-width: 2px;
    }
    
    .password-input[b-wjeun1fayy],
    .btn-outline[b-wjeun1fayy] {
        border-width: 2px;
    }
    
    .password-warning[b-wjeun1fayy] {
        border-width: 2px;
    }
}

/* Dark mode support (if needed in the future) */
@media (prefers-color-scheme: dark) {
    .password-modal-content[b-wjeun1fayy] {
        background: #1f2937;
        border-color: rgba(255, 255, 255, 0.1);
    }
    
    .password-modal-header[b-wjeun1fayy] {
        background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
        border-color: rgba(255, 255, 255, 0.1);
    }
    
    .password-modal-title[b-wjeun1fayy] {
        color: #f9fafb;
    }
    
    .password-modal-subtitle[b-wjeun1fayy] {
        color: #d1d5db;
    }
    
    .password-label[b-wjeun1fayy] {
        color: #f3f4f6;
    }
    
    .password-input[b-wjeun1fayy] {
        background: #374151;
        border-color: #4b5563;
        color: #f9fafb;
    }
    
    .password-input:focus[b-wjeun1fayy] {
        background: #4b5563;
    }
    
    .btn-outline[b-wjeun1fayy] {
        border-color: #4b5563;
        color: #d1d5db;
    }
    
    .btn-outline:hover[b-wjeun1fayy] {
        background: #374151;
        border-color: #6b7280;
        color: #f3f4f6;
    }
}
/* /Components/PortionRevealMoment/PortionRevealMoment.razor.rz.scp.css */
/* PortionRevealMoment - The "Aha Moment" Component */

.portion-reveal-container[b-722e3d2588] {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafe 100%);
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.portion-reveal-container.revealed[b-722e3d2588] {
    opacity: 1;
    transform: translateY(0);
}

/* FALLBACK: If animation doesn't trigger after 2s, show content anyway */
/* This prevents blank page if JS fails or animation sequence has issues */
@keyframes fallback-reveal-b-722e3d2588 {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.portion-reveal-container:not(.loading):not(.revealed)[b-722e3d2588] {
    animation: fallback-reveal-b-722e3d2588 0.4s ease 2s forwards;
}

/* Header */
.reveal-header[b-722e3d2588] {
    text-align: center;
    margin-bottom: 2rem;
}

.reveal-title[b-722e3d2588] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #27AE60 0%, #2ECC71 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.perfect-match-badge[b-722e3d2588] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #27AE60 0%, #81C784 100%);
    border-radius: 50px;
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

.badge-text[b-722e3d2588] {
    font-size: 0.9rem;
}

/* Animated Checkmark */
.animated-checkmark[b-722e3d2588] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkmark-svg[b-722e3d2588] {
    width: 100%;
    height: 100%;
}

.checkmark-circle[b-722e3d2588] {
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 2;
    animation: circle-fill-b-722e3d2588 0.6s ease-out forwards;
}

.checkmark-check[b-722e3d2588] {
    stroke: white;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: check-draw-b-722e3d2588 0.4s ease-out 0.4s forwards;
}

@keyframes circle-fill-b-722e3d2588 {
    0% { stroke-dasharray: 0, 157; }
    100% { stroke-dasharray: 157, 157; }
}

@keyframes check-draw-b-722e3d2588 {
    100% { stroke-dashoffset: 0; }
}

/* Portions List */
.portions-list[b-722e3d2588] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.portion-item[b-722e3d2588] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
    opacity: 0;
    transform: translateX(-20px);
    animation: slide-in-b-722e3d2588 0.4s ease forwards;
}

.stagger-item[b-722e3d2588] {
    animation-fill-mode: both;
}

@keyframes slide-in-b-722e3d2588 {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Food Icons */
.portion-icon[b-722e3d2588] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.portion-icon.icon-poultry[b-722e3d2588] { background: linear-gradient(135deg, #FFE0B2 0%, #FFCC80 100%); }
.portion-icon.icon-poultry[b-722e3d2588]::before { content: '\1F357'; }

.portion-icon.icon-meat[b-722e3d2588] { background: linear-gradient(135deg, #FFCDD2 0%, #EF9A9A 100%); }
.portion-icon.icon-meat[b-722e3d2588]::before { content: '\1F969'; }

.portion-icon.icon-fish[b-722e3d2588] { background: linear-gradient(135deg, #B3E5FC 0%, #81D4FA 100%); }
.portion-icon.icon-fish[b-722e3d2588]::before { content: '\1F41F'; }

.portion-icon.icon-grain[b-722e3d2588] { background: linear-gradient(135deg, #FFF9C4 0%, #FFF59D 100%); }
.portion-icon.icon-grain[b-722e3d2588]::before { content: '\1F35A'; }

.portion-icon.icon-egg[b-722e3d2588] { background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%); }
.portion-icon.icon-egg[b-722e3d2588]::before { content: '\1F95A'; }

.portion-icon.icon-dairy[b-722e3d2588] { background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%); }
.portion-icon.icon-dairy[b-722e3d2588]::before { content: '\1F95B'; }

.portion-icon.icon-vegetable[b-722e3d2588] { background: linear-gradient(135deg, #C8E6C9 0%, #A5D6A7 100%); }
.portion-icon.icon-vegetable[b-722e3d2588]::before { content: '\1F966'; }

.portion-icon.icon-fruit[b-722e3d2588] { background: linear-gradient(135deg, #FFCCBC 0%, #FFAB91 100%); }
.portion-icon.icon-fruit[b-722e3d2588]::before { content: '\1F34E'; }

.portion-icon.icon-nut[b-722e3d2588] { background: linear-gradient(135deg, #D7CCC8 0%, #BCAAA4 100%); }
.portion-icon.icon-nut[b-722e3d2588]::before { content: '\1F95C'; }

.portion-icon.icon-default[b-722e3d2588] { background: linear-gradient(135deg, #E0E0E0 0%, #BDBDBD 100%); }
.portion-icon.icon-default[b-722e3d2588]::before { content: '\1F37D\FE0F'; }

/* Portion Details */
.portion-details[b-722e3d2588] {
    flex: 1;
    min-width: 0;
}

.portion-name[b-722e3d2588] {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a2e;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Portion Amount */
.portion-amount[b-722e3d2588] {
    text-align: right;
}

.amount-value[b-722e3d2588] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #27AE60;
    background: rgba(39, 174, 96, 0.1);
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
}

/* Summary Section */
.reveal-summary[b-722e3d2588] {
    text-align: center;
    padding: 1.5rem;
    background: rgba(39, 174, 96, 0.05);
    border-radius: 16px;
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.reveal-summary.visible[b-722e3d2588] {
    opacity: 1;
    transform: translateY(0);
}

.macro-summary[b-722e3d2588] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.macro-item[b-722e3d2588] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.macro-value[b-722e3d2588] {
    font-size: 1.1rem;
    font-weight: 700;
}

.macro-label[b-722e3d2588] {
    font-size: 0.8rem;
    color: #666;
}

.macro-item.calories .macro-value[b-722e3d2588] { color: #E53935; }
.macro-item.protein .macro-value[b-722e3d2588] { color: #1E88E5; }
.macro-item.carbs .macro-value[b-722e3d2588] { color: #8E24AA; }
.macro-item.fat .macro-value[b-722e3d2588] { color: #43A047; }

.macro-divider[b-722e3d2588] {
    color: #ccc;
    font-weight: 300;
}

.summary-message[b-722e3d2588] {
    font-size: 0.95rem;
    color: #27AE60;
    font-weight: 500;
    margin: 0;
}

/* Action Buttons */
.reveal-actions[b-722e3d2588] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.reveal-actions.visible[b-722e3d2588] {
    opacity: 1;
    transform: translateY(0);
}

.btn-see-options[b-722e3d2588] {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 12px;
    border: 2px solid #dee2e6;
    background: white;
    color: #495057;
    transition: all 0.2s ease;
}

.btn-see-options:hover[b-722e3d2588] {
    border-color: #27AE60;
    color: #27AE60;
    background: rgba(39, 174, 96, 0.05);
}

.btn-done[b-722e3d2588] {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 12px;
    background: linear-gradient(135deg, #27AE60 0%, #2ECC71 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
    transition: all 0.2s ease;
}

.btn-done:hover[b-722e3d2588] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(39, 174, 96, 0.4);
}

/* Error/No Meal State */
.no-meal-state[b-722e3d2588] {
    text-align: center;
    padding: 3rem 2rem;
    color: #666;
}

.no-meal-state .error-icon[b-722e3d2588] {
    font-size: 3rem;
    color: #f0ad4e;
    margin-bottom: 1rem;
}

.no-meal-state .error-title[b-722e3d2588] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.75rem;
}

.no-meal-state .error-message[b-722e3d2588] {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.no-meal-state .btn-primary[b-722e3d2588] {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 12px;
    background: linear-gradient(135deg, #27AE60 0%, #2ECC71 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
    transition: all 0.2s ease;
}

.no-meal-state .btn-primary:hover[b-722e3d2588] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(39, 174, 96, 0.4);
}

/* Loading State */
.portion-reveal-container.loading[b-722e3d2588] {
    opacity: 1;
    transform: translateY(0);
}

.loading-state[b-722e3d2588] {
    text-align: center;
    padding: 3rem 2rem;
}

.loading-animation[b-722e3d2588] {
    margin-bottom: 1.5rem;
}

.food-icons-spinner[b-722e3d2588] {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.spinner-icon[b-722e3d2588] {
    font-size: 2.5rem;
    animation: bounce-rotate-b-722e3d2588 1.5s ease-in-out infinite;
}

.spinner-icon:nth-child(1)[b-722e3d2588] { animation-delay: 0s; }
.spinner-icon:nth-child(2)[b-722e3d2588] { animation-delay: 0.2s; }
.spinner-icon:nth-child(3)[b-722e3d2588] { animation-delay: 0.4s; }

@keyframes bounce-rotate-b-722e3d2588 {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-15px) rotate(-10deg);
    }
    50% {
        transform: translateY(0) rotate(0deg);
    }
    75% {
        transform: translateY(-8px) rotate(10deg);
    }
}

.loading-title[b-722e3d2588] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 0.5rem;
}

.loading-subtitle[b-722e3d2588] {
    font-size: 0.95rem;
    color: #666;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 576px) {
    .portion-reveal-container[b-722e3d2588] {
        margin: 1rem;
        padding: 1.5rem;
        border-radius: 20px;
    }

    .reveal-title[b-722e3d2588] {
        font-size: 1.5rem;
    }

    .portion-item[b-722e3d2588] {
        padding: 0.875rem 1rem;
    }

    .portion-icon[b-722e3d2588] {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .portion-name[b-722e3d2588] {
        font-size: 0.9rem;
    }

    .amount-value[b-722e3d2588] {
        font-size: 1rem;
        padding: 0.3rem 0.6rem;
    }

    .reveal-actions[b-722e3d2588] {
        flex-direction: column;
    }

    .btn-see-options[b-722e3d2588],
    .btn-done[b-722e3d2588] {
        width: 100%;
    }

    .macro-summary[b-722e3d2588] {
        gap: 0.25rem;
    }

    .macro-value[b-722e3d2588] {
        font-size: 1rem;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .portion-reveal-container[b-722e3d2588],
    .portion-item[b-722e3d2588],
    .reveal-summary[b-722e3d2588],
    .reveal-actions[b-722e3d2588] {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .checkmark-circle[b-722e3d2588],
    .checkmark-check[b-722e3d2588] {
        animation: none;
        stroke-dashoffset: 0;
        stroke-dasharray: 157, 157;
    }
}
/* /Components/ProcessSteps.razor.rz.scp.css */
.step-container[b-kv6gzdh8ex] {
    width: 6rem !important;
}

.step-circle[b-kv6gzdh8ex]::before {
    width: calc(6rem + 1rem - 1.5rem) !important;
}


/* /Components/QuestionGuidance.razor.rz.scp.css */
/* QuestionGuidance.razor.css - Scoped styles for guidance section */

/* Base container */
.guidance-section[b-obhcqoiz41] {
    display: flex;
    flex-direction: column;
    gap: var(--fs-spacing-md, 12px);
    max-width: 600px;
    margin: var(--fs-spacing-xl, 20px) auto 0;
    text-align: left; /* Override inherited centering */
}

/* Individual guidance item */
.guidance-item[b-obhcqoiz41] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s ease;
    overflow: hidden;
}

.guidance-item:hover[b-obhcqoiz41] {
    border-color: var(--fs-accent, #f08a12);
    box-shadow: 0 4px 12px rgba(240, 138, 18, 0.1);
}

/* Open state - light orange tint */
.guidance-item[open][b-obhcqoiz41] {
    background: #fff8f0;
    border-color: rgba(240, 138, 18, 0.3);
}

/* Research quote variant */
.guidance-item--research[b-obhcqoiz41] {
    background: #f8fafc;
}

.guidance-item--research[open][b-obhcqoiz41] {
    background: #fefce8;
    border-color: rgba(234, 179, 8, 0.3);
}

/* Summary (clickable header) */
.guidance-header[b-obhcqoiz41] {
    display: flex;
    align-items: center;
    gap: var(--fs-spacing-sm, 8px);
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

/* Hide default marker in all browsers */
.guidance-header[b-obhcqoiz41]::-webkit-details-marker {
    display: none;
}

.guidance-header[b-obhcqoiz41]::marker {
    display: none;
    content: "";
}

/* Icon container */
.guidance-icon[b-obhcqoiz41] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

/* Icon colors when open */
.guidance-item[open] .guidance-icon[b-obhcqoiz41] {
    background: rgba(240, 138, 18, 0.2);
    color: var(--fs-accent, #f08a12);
}

.guidance-item--research[open] .guidance-icon[b-obhcqoiz41] {
    background: rgba(234, 179, 8, 0.15);
    color: #ca8a04;
}

/* Title text */
.guidance-title[b-obhcqoiz41] {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 600;
    color: #2d3748;
    text-align: left;
}

/* Chevron indicator */
.guidance-chevron[b-obhcqoiz41] {
    color: #9ca3af;
    font-size: 0.75rem;
    transition: transform 0.3s ease, color 0.2s ease;
    flex-shrink: 0;
}

.guidance-item[open] .guidance-chevron[b-obhcqoiz41] {
    transform: rotate(180deg);
    color: var(--fs-accent, #f08a12);
}

.guidance-item--research[open] .guidance-chevron[b-obhcqoiz41] {
    color: #ca8a04;
}

/* Content area */
.guidance-content[b-obhcqoiz41] {
    padding: 0 1.25rem 1rem 3.5rem; /* Left indent aligns with title */
    text-align: left;
}

.guidance-content p[b-obhcqoiz41] {
    color: #4a5568;
    font-size: 0.9rem;
    line-height: 1.65;
    margin: 0 0 0.5rem 0;
    text-align: left;
}

.guidance-content p:last-child[b-obhcqoiz41] {
    margin-bottom: 0;
}

/* Blockquote for research quotes */
.guidance-blockquote[b-obhcqoiz41] {
    margin: 0;
    padding: 0;
    border: none;
    font-style: normal;
}

.guidance-content--quote[b-obhcqoiz41] {
    padding-left: 3.5rem;
}

.guidance-content--quote .guidance-blockquote[b-obhcqoiz41] {
    border-left: 3px solid rgba(234, 179, 8, 0.5);
    padding-left: 1rem;
}

.guidance-content--quote .guidance-blockquote p[b-obhcqoiz41] {
    color: #525252;
    font-style: italic;
}

/* Plain text remarks (no collapsible) */
.guidance-plain[b-obhcqoiz41] {
    background: #fefce8;
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    text-align: left;
}

.guidance-plain--research[b-obhcqoiz41] {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.guidance-plain-label[b-obhcqoiz41] {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    text-align: left;
}

.guidance-plain p[b-obhcqoiz41] {
    color: #4a5568;
    font-size: 0.9rem;
    line-height: 1.65;
    margin: 0 0 0.5rem 0;
    text-align: left;
}

.guidance-plain p:last-child[b-obhcqoiz41] {
    margin-bottom: 0;
}

.guidance-plain .guidance-blockquote[b-obhcqoiz41] {
    margin: 0;
    padding: 0;
    border: none;
}

/* Guidance image */
.guidance-image[b-obhcqoiz41] {
    margin-top: var(--fs-spacing-md, 12px);
    text-align: center;
}

.guidance-image img[b-obhcqoiz41] {
    border-radius: 8px;
    max-width: 100%;
    height: auto;
}

/* Accessibility - focus states */
.guidance-header:focus[b-obhcqoiz41] {
    outline: 2px solid var(--fs-accent, #f08a12);
    outline-offset: 2px;
    border-radius: 8px;
}

.guidance-header:focus:not(:focus-visible)[b-obhcqoiz41] {
    outline: none;
}

.guidance-header:focus-visible[b-obhcqoiz41] {
    outline: 2px solid var(--fs-accent, #f08a12);
    outline-offset: 2px;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .guidance-item[b-obhcqoiz41],
    .guidance-icon[b-obhcqoiz41],
    .guidance-chevron[b-obhcqoiz41] {
        transition: none;
    }
}

/* Mobile responsiveness */
@media (max-width: 576px) {
    .guidance-section[b-obhcqoiz41] {
        margin-top: var(--fs-spacing-lg, 16px);
    }

    .guidance-header[b-obhcqoiz41] {
        padding: 0.875rem 1rem;
    }

    .guidance-content[b-obhcqoiz41] {
        padding: 0 1rem 0.875rem 2.75rem;
    }

    .guidance-content--quote[b-obhcqoiz41] {
        padding-left: 2.75rem;
    }

    .guidance-icon[b-obhcqoiz41] {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .guidance-title[b-obhcqoiz41] {
        font-size: 0.9rem;
    }

    .guidance-plain[b-obhcqoiz41] {
        padding: 0.875rem 1rem;
    }
}

/* Extra small devices */
@media (max-width: 400px) {
    .guidance-header[b-obhcqoiz41] {
        padding: 0.75rem 0.875rem;
        gap: 6px;
    }

    .guidance-content[b-obhcqoiz41] {
        padding: 0 0.875rem 0.75rem 2.5rem;
    }

    .guidance-icon[b-obhcqoiz41] {
        width: 26px;
        height: 26px;
        font-size: 0.75rem;
    }

    .guidance-title[b-obhcqoiz41] {
        font-size: 0.85rem;
    }
}
/* /Components/QuestionnaireHistoryComponent.razor.rz.scp.css */
/* ============================================
   Answer History - Vertical Timeline Component
   ============================================ */

.answer-history[b-m598z9q65w] {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 1.5rem;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

/* ============================================
   Toggle Header
   ============================================ */

.answer-history-toggle[b-m598z9q65w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #fafafa 0%, #fff 100%);
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.answer-history-toggle:hover[b-m598z9q65w] {
    background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
}

.answer-history-toggle:focus[b-m598z9q65w] {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(240, 138, 18, 0.3);
}

.toggle-content[b-m598z9q65w] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.history-toggle-icon[b-m598z9q65w] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #f08a12 0%, #e67e00 100%);
    border-radius: 10px;
    color: #fff;
    font-size: 1rem;
}

.toggle-text[b-m598z9q65w] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
}

.answer-count[b-m598z9q65w] {
    padding: 0.25rem 0.75rem;
    background: #e8f5e9;
    color: #059669;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 50px;
}

.toggle-actions[b-m598z9q65w] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.toggle-chevron[b-m598z9q65w] {
    color: #adb5bd;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.answer-history.expanded .toggle-chevron[b-m598z9q65w] {
    color: #f08a12;
}

.close-btn[b-m598z9q65w] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #f1f3f5;
    border: none;
    border-radius: 50%;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
}

.close-btn:hover[b-m598z9q65w] {
    background: #e9ecef;
    color: #333;
}

/* ============================================
   Timeline Content
   ============================================ */

.answer-timeline[b-m598z9q65w] {
    padding: 0 1.25rem 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.3s ease, visibility 0s 0.35s;
}

.answer-history.expanded .answer-timeline[b-m598z9q65w] {
    max-height: 600px;
    overflow-y: auto;
    padding-top: 0.5rem;
    padding-bottom: 1.25rem;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.35s ease, opacity 0.25s ease 0.1s, padding 0.3s ease, visibility 0s 0s;
}

/* ============================================
   Stage Cards
   ============================================ */

.stage-card[b-m598z9q65w] {
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.25s ease;
    position: relative;
}

.stage-card.completed[b-m598z9q65w] {
    border-color: #d1fae5;
    background: linear-gradient(to bottom, #f0fdf4, #fff);
}

.stage-card.active[b-m598z9q65w] {
    border-color: #f08a12;
    background: linear-gradient(to bottom, #fff9f0, #fff);
    box-shadow: 0 4px 16px rgba(240, 138, 18, 0.15);
}

.stage-card.pending[b-m598z9q65w] {
    border-color: #e9ecef;
    background: #fafafa;
    opacity: 0.7;
}

/* Stage Header */
.stage-header[b-m598z9q65w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.stage-info[b-m598z9q65w] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.stage-card .history-stage-icon[b-m598z9q65w] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 0.85rem;
    transition: all 0.25s ease;
}

.stage-card.completed .history-stage-icon[b-m598z9q65w] {
    background: #059669;
    color: #fff;
}

.stage-card.active .history-stage-icon[b-m598z9q65w] {
    background: #f08a12;
    color: #fff;
    animation: pulse-soft-b-m598z9q65w 2s infinite;
}

.stage-card.pending .history-stage-icon[b-m598z9q65w] {
    background: #e9ecef;
    color: #adb5bd;
}

@keyframes pulse-soft-b-m598z9q65w {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(240, 138, 18, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(240, 138, 18, 0);
    }
}

.stage-details[b-m598z9q65w] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.history-stage-name[b-m598z9q65w] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
}

.stage-status[b-m598z9q65w] {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stage-card.active .stage-status[b-m598z9q65w] {
    color: #f08a12;
}

/* Edit Button */
.edit-btn[b-m598z9q65w] {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    color: #6c757d;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.edit-btn:hover[b-m598z9q65w] {
    border-color: #f08a12;
    color: #f08a12;
    background: rgba(240, 138, 18, 0.05);
}

.edit-btn:focus[b-m598z9q65w] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(240, 138, 18, 0.2);
}

/* ============================================
   Answer List
   ============================================ */

.answer-list[b-m598z9q65w] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.answer-row[b-m598z9q65w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    gap: 1rem;
}

.answer-label[b-m598z9q65w] {
    font-size: 0.85rem;
    color: #6c757d;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50%;
}

.answer-value[b-m598z9q65w] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    text-align: right;
    flex-shrink: 0;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.answer-unit[b-m598z9q65w] {
    font-size: 0.8rem;
    font-weight: 400;
    color: #6c757d;
    margin-left: 0.25rem;
}

/* ============================================
   Answer Placeholder
   ============================================ */

.answer-placeholder[b-m598z9q65w] {
    padding: 0.75rem;
    text-align: center;
}

.answer-placeholder span[b-m598z9q65w] {
    font-size: 0.85rem;
    color: #adb5bd;
    font-style: italic;
}

.stage-card.active .answer-placeholder span[b-m598z9q65w] {
    color: #f08a12;
    font-style: normal;
}

/* ============================================
   Timeline Connector
   ============================================ */

.timeline-connector[b-m598z9q65w] {
    width: 2px;
    height: 24px;
    margin: 0 auto;
    background: #e9ecef;
    transition: all 0.25s ease;
}

.timeline-connector.completed[b-m598z9q65w] {
    background: #059669;
}

.timeline-connector.active[b-m598z9q65w] {
    background: linear-gradient(to bottom, #059669, #f08a12);
}

/* ============================================
   Mobile Responsive - Inline Collapsible
   (Avoids conflict with mobile sticky CTA)
   ============================================ */

@media (max-width: 768px) {
    .answer-history[b-m598z9q65w] {
        /* Stay inline, not fixed - avoids conflict with mobile sticky CTA */
        position: relative;
        margin: 0 0.5rem 1rem;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .answer-history-toggle[b-m598z9q65w] {
        padding: 0.75rem 1rem;
    }

    .answer-history.expanded .answer-timeline[b-m598z9q65w] {
        max-height: 40vh;
    }

    .history-toggle-icon[b-m598z9q65w] {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .toggle-text[b-m598z9q65w] {
        font-size: 0.9rem;
    }

    .answer-count[b-m598z9q65w] {
        font-size: 0.75rem;
        padding: 0.2rem 0.6rem;
    }

    .stage-card[b-m598z9q65w] {
        padding: 0.875rem;
    }

    .stage-card .history-stage-icon[b-m598z9q65w] {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .history-stage-name[b-m598z9q65w] {
        font-size: 0.9rem;
    }

    .answer-row[b-m598z9q65w] {
        padding: 0.375rem 0.5rem;
    }

    .answer-label[b-m598z9q65w] {
        font-size: 0.8rem;
    }

    .answer-value[b-m598z9q65w] {
        font-size: 0.85rem;
    }
}

/* ============================================
   Large Desktop - Wider layout
   ============================================ */

@media (min-width: 1200px) {
    .answer-history[b-m598z9q65w] {
        max-width: 700px;
    }
}

/* ============================================
   Accessibility - Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .answer-history[b-m598z9q65w],
    .answer-timeline[b-m598z9q65w],
    .stage-card[b-m598z9q65w],
    .toggle-chevron[b-m598z9q65w],
    .stage-card .history-stage-icon[b-m598z9q65w],
    .timeline-connector[b-m598z9q65w],
    .edit-btn[b-m598z9q65w],
    .close-btn[b-m598z9q65w],
    .answer-history-toggle[b-m598z9q65w] {
        animation: none !important;
        transition: none !important;
    }

    /* Ensure timeline is visible/hidden instantly */
    .answer-timeline[b-m598z9q65w] {
        opacity: 0;
        visibility: hidden;
        max-height: 0;
    }

    .answer-history.expanded .answer-timeline[b-m598z9q65w] {
        opacity: 1;
        visibility: visible;
        max-height: 600px;
    }
}

/* ============================================
   High Contrast Mode Support
   ============================================ */

@media (prefers-contrast: high) {
    .answer-history[b-m598z9q65w] {
        border: 2px solid #000;
    }

    .stage-card[b-m598z9q65w] {
        border-width: 2px;
    }

    .stage-card.completed[b-m598z9q65w] {
        border-color: #059669;
    }

    .stage-card.active[b-m598z9q65w] {
        border-color: #f08a12;
    }

    .answer-count[b-m598z9q65w] {
        background: #059669;
        color: #fff;
    }
}
/* /Components/ReconnectionModal.razor.rz.scp.css */
/* ============================================
   Reconnection Modal - Delightful UX Design
   Transform connection issues into positive experiences
   ============================================ */

/* Container and Overlay */
.reconnection-modal-container[b-y8au8nk2k5] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    animation: fadeIn-b-y8au8nk2k5 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.reconnection-modal-container.active[b-y8au8nk2k5] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.reconnection-overlay[b-y8au8nk2k5] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(37, 99, 235, 0.05) 0%,
        rgba(245, 158, 11, 0.05) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Main Content Container */
.reconnection-content[b-y8au8nk2k5] {
    position: relative;
    background: white;
    border-radius: 24px;
    padding: 3rem 2.5rem;
    max-width: 480px;
    width: 90%;
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04),
        0 0 0 1px rgba(37, 99, 235, 0.1);
    transform: translateY(0);
    animation: slideUp-b-y8au8nk2k5 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

/* Connection Visual Animation */
.connection-visual[b-y8au8nk2k5] {
    position: relative;
    height: 160px;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.connection-hub[b-y8au8nk2k5] {
    position: relative;
    width: 80px;
    height: 80px;
}

.hub-core[b-y8au8nk2k5] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: hubPulse-b-y8au8nk2k5 2s ease-in-out infinite;
    z-index: 3;
}

.hub-core svg[b-y8au8nk2k5] {
    width: 36px;
    height: 36px;
    color: white;
    animation: iconFloat-b-y8au8nk2k5 3s ease-in-out infinite;
}

/* Pulse Rings */
.pulse-ring[b-y8au8nk2k5] {
    position: absolute;
    inset: -20px;
    border: 2px solid;
    border-radius: 50%;
    opacity: 0;
    animation: pulseRing-b-y8au8nk2k5 3s ease-out infinite;
}

.pulse-ring-1[b-y8au8nk2k5] {
    border-color: rgba(37, 99, 235, 0.3);
    animation-delay: 0s;
}

.pulse-ring-2[b-y8au8nk2k5] {
    border-color: rgba(59, 130, 246, 0.2);
    animation-delay: 1s;
}

.pulse-ring-3[b-y8au8nk2k5] {
    border-color: rgba(96, 165, 250, 0.1);
    animation-delay: 2s;
}

/* Orbiting Connection Points */
.connection-point[b-y8au8nk2k5] {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: orbitFloat-b-y8au8nk2k5 8s ease-in-out infinite;
}

.point-1[b-y8au8nk2k5] {
    top: 10px;
    left: -60px;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    animation-delay: 0s;
}

.point-2[b-y8au8nk2k5] {
    top: 10px;
    right: -60px;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    animation-delay: 2.67s;
}

.point-3[b-y8au8nk2k5] {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    animation-delay: 5.33s;
}

.point-icon svg[b-y8au8nk2k5] {
    width: 24px;
    height: 24px;
    opacity: 0.7;
}

.point-1 .point-icon svg[b-y8au8nk2k5] { color: #dc2626; }
.point-2 .point-icon svg[b-y8au8nk2k5] { color: #2563eb; }
.point-3 .point-icon svg[b-y8au8nk2k5] { color: #10b981; }

/* Progress Indicator */
.reconnection-progress[b-y8au8nk2k5] {
    margin-bottom: 2rem;
}

.progress-track[b-y8au8nk2k5] {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.progress-fill[b-y8au8nk2k5] {
    height: 100%;
    background: linear-gradient(90deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
    border-radius: 2px;
    width: 0%;
    animation: progressFill-b-y8au8nk2k5 3s ease-in-out infinite;
}

.progress-dots[b-y8au8nk2k5] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.progress-dot[b-y8au8nk2k5] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5e7eb;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-dot.active[b-y8au8nk2k5] {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    transform: scale(1.4);
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.5);
}

/* Messaging Section */
.reconnection-messaging[b-y8au8nk2k5] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.reconnection-title[b-y8au8nk2k5] {
    font-size: 1.375rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.title-icon[b-y8au8nk2k5] {
    font-size: 1.25rem;
    animation: sparkle-b-y8au8nk2k5 2s ease-in-out infinite;
}

.reconnection-subtitle[b-y8au8nk2k5] {
    font-size: 0.9375rem;
    color: #6b7280;
    margin: 0 0 1rem;
    font-weight: 400;
}

/* Message Carousel */
.message-carousel[b-y8au8nk2k5] {
    position: relative;
    height: 32px;
    overflow: hidden;
}

.carousel-message[b-y8au8nk2k5] {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 0.875rem;
    color: #059669;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    padding: 0.375rem 1rem;
    border-radius: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-message.active[b-y8au8nk2k5] {
    opacity: 1;
    transform: translateY(0);
}

/* Status Information */
.reconnection-status[b-y8au8nk2k5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.status-item[b-y8au8nk2k5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-label[b-y8au8nk2k5] {
    font-size: 0.8125rem;
    color: #9ca3af;
    font-weight: 500;
}

.status-value[b-y8au8nk2k5] {
    font-size: 0.875rem;
    color: #1f2937;
    font-weight: 600;
}

.status-timer[b-y8au8nk2k5] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #2563eb;
}

.timer-icon[b-y8au8nk2k5] {
    animation: tick-b-y8au8nk2k5 1s steps(1) infinite;
}

/* Action Buttons */
.reconnection-actions[b-y8au8nk2k5] {
    display: flex;
    gap: 0.75rem;
}

.btn-reconnect-primary[b-y8au8nk2k5] {
    flex: 1;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-reconnect-primary:hover[b-y8au8nk2k5] {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.25);
}

.btn-reconnect-primary:active[b-y8au8nk2k5] {
    transform: translateY(0);
}

.btn-icon[b-y8au8nk2k5] {
    animation: rotate-b-y8au8nk2k5 2s linear infinite;
    font-size: 1.125rem;
}

.btn-reconnect-secondary[b-y8au8nk2k5] {
    padding: 0.75rem 1.25rem;
    background: white;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-reconnect-secondary:hover[b-y8au8nk2k5] {
    background: #f9fafb;
    border-color: #d1d5db;
}

/* Decorative Elements */
.decorative-elements[b-y8au8nk2k5] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 24px;
}

.floating-orb[b-y8au8nk2k5] {
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
}

.orb-1[b-y8au8nk2k5] {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, #2563eb 0%, transparent 70%);
    top: -40px;
    right: -40px;
    animation: floatOrb1-b-y8au8nk2k5 15s ease-in-out infinite;
}

.orb-2[b-y8au8nk2k5] {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, #f59e0b 0%, transparent 70%);
    bottom: -20px;
    left: -20px;
    animation: floatOrb2-b-y8au8nk2k5 20s ease-in-out infinite;
}

.orb-3[b-y8au8nk2k5] {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, #10b981 0%, transparent 70%);
    top: 50%;
    right: -30px;
    animation: floatOrb3-b-y8au8nk2k5 18s ease-in-out infinite;
}

.floating-line[b-y8au8nk2k5] {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.1), transparent);
    height: 1px;
}

.line-1[b-y8au8nk2k5] {
    width: 200px;
    top: 30%;
    left: -50px;
    animation: slideLine1-b-y8au8nk2k5 10s ease-in-out infinite;
}

.line-2[b-y8au8nk2k5] {
    width: 150px;
    bottom: 25%;
    right: -50px;
    animation: slideLine2-b-y8au8nk2k5 12s ease-in-out infinite;
}

/* Animations */
@keyframes fadeIn-b-y8au8nk2k5 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp-b-y8au8nk2k5 {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes hubPulse-b-y8au8nk2k5 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes iconFloat-b-y8au8nk2k5 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes pulseRing-b-y8au8nk2k5 {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes orbitFloat-b-y8au8nk2k5 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(10px, -10px) rotate(90deg);
    }
    50% {
        transform: translate(0, -20px) rotate(180deg);
    }
    75% {
        transform: translate(-10px, -10px) rotate(270deg);
    }
}

@keyframes progressFill-b-y8au8nk2k5 {
    0% { width: 0%; }
    50% { width: 65%; }
    100% { width: 30%; }
}

@keyframes sparkle-b-y8au8nk2k5 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

@keyframes rotate-b-y8au8nk2k5 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes tick-b-y8au8nk2k5 {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.5; }
}

@keyframes floatOrb1-b-y8au8nk2k5 {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(-30px, 20px); }
    66% { transform: translate(20px, -10px); }
}

@keyframes floatOrb2-b-y8au8nk2k5 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(40px, -30px); }
}

@keyframes floatOrb3-b-y8au8nk2k5 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-20px, 15px); }
    75% { transform: translate(15px, -25px); }
}

@keyframes slideLine1-b-y8au8nk2k5 {
    0%, 100% { transform: translateX(0); opacity: 0; }
    50% { transform: translateX(100px); opacity: 1; }
}

@keyframes slideLine2-b-y8au8nk2k5 {
    0%, 100% { transform: translateX(0); opacity: 0; }
    50% { transform: translateX(-80px); opacity: 1; }
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .reconnection-content[b-y8au8nk2k5] {
        padding: 2rem 1.5rem;
        width: 95%;
        border-radius: 20px;
    }

    .connection-visual[b-y8au8nk2k5] {
        height: 120px;
        margin-bottom: 1.5rem;
    }

    .connection-hub[b-y8au8nk2k5] {
        width: 64px;
        height: 64px;
    }

    .hub-core svg[b-y8au8nk2k5] {
        width: 28px;
        height: 28px;
    }

    .connection-point[b-y8au8nk2k5] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .point-1[b-y8au8nk2k5] { left: -40px; }
    .point-2[b-y8au8nk2k5] { right: -40px; }

    .point-icon svg[b-y8au8nk2k5] {
        width: 20px;
        height: 20px;
    }

    .reconnection-title[b-y8au8nk2k5] {
        font-size: 1.125rem;
    }

    .reconnection-subtitle[b-y8au8nk2k5] {
        font-size: 0.875rem;
    }

    .reconnection-actions[b-y8au8nk2k5] {
        flex-direction: column;
    }

    .floating-orb[b-y8au8nk2k5],
    .floating-line[b-y8au8nk2k5] {
        display: none; /* Hide decorative elements on mobile for performance */
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .reconnection-content[b-y8au8nk2k5] {
        background: #1f2937;
        box-shadow:
            0 20px 25px -5px rgba(0, 0, 0, 0.3),
            0 10px 10px -5px rgba(0, 0, 0, 0.2),
            0 0 0 1px rgba(59, 130, 246, 0.2);
    }

    .reconnection-title[b-y8au8nk2k5] {
        color: #f3f4f6;
    }

    .reconnection-subtitle[b-y8au8nk2k5] {
        color: #9ca3af;
    }

    .connection-point[b-y8au8nk2k5] {
        background: #374151;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .status-item[b-y8au8nk2k5] {
        background: #374151;
    }

    .status-label[b-y8au8nk2k5] {
        color: #9ca3af;
    }

    .status-value[b-y8au8nk2k5] {
        color: #f3f4f6;
    }

    .btn-reconnect-secondary[b-y8au8nk2k5] {
        background: #374151;
        color: #d1d5db;
        border-color: #4b5563;
    }

    .btn-reconnect-secondary:hover[b-y8au8nk2k5] {
        background: #4b5563;
        border-color: #6b7280;
    }

    .progress-track[b-y8au8nk2k5] {
        background: #374151;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-y8au8nk2k5] {
        animation: none !important;
        transition: opacity 0.3s ease !important;
    }
}
/* /Components/Shared/Comparison/ComparisonPageLayout.razor.rz.scp.css */
/* Comparison Page Layout Styles */

.comparison-page[b-p0dii8uo09] {
    --section-padding: 4rem 0;
    --container-max-width: 1200px;
    min-height: 100vh;
}

/* Section base styles */
[b-p0dii8uo09] section {
    padding: var(--section-padding);
}

[b-p0dii8uo09] .container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .comparison-page[b-p0dii8uo09] {
        --section-padding: 2.5rem 0;
    }

    [b-p0dii8uo09] .container {
        padding: 0 1rem;
    }
}

/* Utility classes for comparison pages */
[b-p0dii8uo09] .text-center {
    text-align: center;
}

[b-p0dii8uo09] .text-primary {
    color: var(--primary-color, #4F46E5);
}

[b-p0dii8uo09] .bg-light {
    background-color: var(--bg-light, #F9FAFB);
}

[b-p0dii8uo09] .bg-primary {
    background-color: var(--primary-color, #4F46E5);
}

[b-p0dii8uo09] .text-white {
    color: #ffffff;
}

/* Animations */
[b-p0dii8uo09] .fade-in {
    animation: fadeIn-b-p0dii8uo09 0.5s ease-out;
}

@keyframes fadeIn-b-p0dii8uo09 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Shared/Mobile/AdaptiveForm.razor.rz.scp.css */
/* AdaptiveForm - Responsive Form Styles */

/* Base Form Styles */
.adaptive-form[b-67nd5xiqhu] {
    width: 100%;
}

.form-content[b-67nd5xiqhu] {
    margin-bottom: 1.5rem;
}

.form-actions[b-67nd5xiqhu] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    align-items: center;
}

/* Desktop Mode - Multi-column Grid */
@media (min-width: 769px) {
    .adaptive-form.desktop-mode .form-content[b-67nd5xiqhu] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    /* Support 1-4 columns via CSS custom properties */
    .adaptive-form.desktop-mode[data-columns="1"] .form-content[b-67nd5xiqhu] {
        grid-template-columns: 1fr;
    }

    .adaptive-form.desktop-mode[data-columns="3"] .form-content[b-67nd5xiqhu] {
        grid-template-columns: repeat(3, 1fr);
    }

    .adaptive-form.desktop-mode[data-columns="4"] .form-content[b-67nd5xiqhu] {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Full-width form groups (for textareas, etc.) */
    .adaptive-form.desktop-mode[b-67nd5xiqhu] (.form-group-full) {
        grid-column: 1 / -1;
    }

    .adaptive-form.desktop-mode .form-actions[b-67nd5xiqhu] {
        justify-content: flex-end;
        padding-top: 1rem;
        border-top: 1px solid #e0e0e0;
    }

    .adaptive-form.desktop-mode .form-actions button[b-67nd5xiqhu] {
        min-width: 120px;
    }
}

/* Mobile Mode - Single Column */
@media (max-width: 768px) {
    .adaptive-form.mobile-mode .form-content[b-67nd5xiqhu] {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .adaptive-form.mobile-mode .form-actions[b-67nd5xiqhu] {
        flex-direction: column-reverse;
        gap: 0.75rem;
        margin-top: 1.5rem;
    }

    .adaptive-form.mobile-mode .form-actions button[b-67nd5xiqhu] {
        width: 100%;
        min-height: 48px;
        font-size: 16px;
        padding: 12px 24px;
    }

    /* iOS Zoom Prevention - All form inputs get 16px minimum */
    .adaptive-form.mobile-mode[b-67nd5xiqhu] (.form-control),
    .adaptive-form.mobile-mode[b-67nd5xiqhu] (.form-select),
    .adaptive-form.mobile-mode[b-67nd5xiqhu] (input),
    .adaptive-form.mobile-mode[b-67nd5xiqhu] (select),
    .adaptive-form.mobile-mode[b-67nd5xiqhu] (textarea) {
        font-size: 16px !important;
        min-height: 48px;
        padding: 12px 16px;
    }

    .adaptive-form.mobile-mode[b-67nd5xiqhu] (.form-label),
    .adaptive-form.mobile-mode[b-67nd5xiqhu] (label) {
        font-size: 14px;
        font-weight: 600;
        color: #424242;
        margin-bottom: 8px;
    }

    /* Larger checkboxes and radios for touch */
    .adaptive-form.mobile-mode[b-67nd5xiqhu] (.form-check-input) {
        width: 24px;
        height: 24px;
        margin-top: 0;
    }

    .adaptive-form.mobile-mode[b-67nd5xiqhu] (.form-check-label) {
        font-size: 16px;
        padding-left: 12px;
    }

    /* Input groups */
    .adaptive-form.mobile-mode[b-67nd5xiqhu] (.input-group) {
        flex-wrap: nowrap;
    }

    .adaptive-form.mobile-mode[b-67nd5xiqhu] (.input-group-text) {
        font-size: 16px;
        padding: 12px 16px;
        min-width: 60px;
    }
}

/* Form Group Styles (both modes) */
[b-67nd5xiqhu](.form-group) {
    display: flex;
    flex-direction: column;
}

[b-67nd5xiqhu](.form-label) {
    margin-bottom: 0.5rem;
}

[b-67nd5xiqhu](.form-control:focus),
[b-67nd5xiqhu](.form-select:focus) {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
    border-color: #1976d2;
}

/* Validation Styles */
[b-67nd5xiqhu](.invalid-feedback) {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #d32f2f;
}

[b-67nd5xiqhu](.form-control.is-invalid),
[b-67nd5xiqhu](.form-select.is-invalid) {
    border-color: #d32f2f;
}

[b-67nd5xiqhu](.form-control.is-valid),
[b-67nd5xiqhu](.form-select.is-valid) {
    border-color: #388e3c;
}

/* Loading State */
.adaptive-form[b-67nd5xiqhu] (.spinner-border-sm) {
    width: 1rem;
    height: 1rem;
    border-width: 0.15rem;
}

/* Button States */
.form-actions button:disabled[b-67nd5xiqhu] {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-actions button:not(:disabled):hover[b-67nd5xiqhu] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.form-actions button:not(:disabled):active[b-67nd5xiqhu] {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Accessibility: Focus Visible */
.form-actions button:focus-visible[b-67nd5xiqhu] {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
    .adaptive-form.desktop-mode .form-actions[b-67nd5xiqhu] {
        border-color: #424242;
    }

    [b-67nd5xiqhu](.form-label),
    [b-67nd5xiqhu](label) {
        color: #e0e0e0;
    }

    [b-67nd5xiqhu](.form-control),
    [b-67nd5xiqhu](.form-select) {
        background-color: #2a2a2a;
        color: #ffffff;
        border-color: #424242;
    }

    [b-67nd5xiqhu](.form-control:focus),
    [b-67nd5xiqhu](.form-select:focus) {
        background-color: #2a2a2a;
        border-color: #1976d2;
    }

    [b-67nd5xiqhu](.invalid-feedback) {
        color: #ef5350;
    }
}

/* Responsive Breakpoints */
@media (max-width: 576px) {
    .form-content[b-67nd5xiqhu] {
        gap: 1rem !important;
    }

    .form-actions[b-67nd5xiqhu] {
        margin-top: 1rem;
    }
}

@media (min-width: 1200px) {
    .adaptive-form.desktop-mode .form-content[b-67nd5xiqhu] {
        gap: 2rem;
    }
}
/* /Components/Shared/Mobile/AdaptiveModal.razor.rz.scp.css */
/* AdaptiveModal - Responsive Modal Styles */

/* Desktop Modal Enhancements */
@media (min-width: 769px) {
    .modal-dialog[b-f08dit0uy3] {
        max-width: 600px;
        margin: 1.75rem auto;
    }

    .modal-content[b-f08dit0uy3] {
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    .modal-header[b-f08dit0uy3] {
        padding: 1.5rem;
        border-bottom: 1px solid #e0e0e0;
    }

    .modal-title[b-f08dit0uy3] {
        font-size: 1.25rem;
        font-weight: 600;
        color: #212121;
    }

    .btn-close[b-f08dit0uy3] {
        width: 32px;
        height: 32px;
        padding: 0;
    }

    .modal-body[b-f08dit0uy3] {
        padding: 1.5rem;
        max-height: 70vh;
        overflow-y: auto;
    }

    .modal-footer[b-f08dit0uy3] {
        padding: 1rem 1.5rem;
        border-top: 1px solid #e0e0e0;
        gap: 0.5rem;
    }
}

/* Mobile Optimizations (Modal transforms to Bottom Sheet) */
@media (max-width: 768px) {
    /* Mobile uses MobileBottomSheet component - no additional styles needed */
    /* Bottom sheet styles are defined in MobileBottomSheet.razor.css */
}

/* Modal Backdrop */
.modal-backdrop[b-f08dit0uy3] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
}

.modal-backdrop.fade[b-f08dit0uy3] {
    opacity: 0;
}

.modal-backdrop.show[b-f08dit0uy3] {
    opacity: 1;
}

/* Modal Container */
.modal[b-f08dit0uy3] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    z-index: 1050;
}

.modal.fade .modal-dialog[b-f08dit0uy3] {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px);
}

.modal.show .modal-dialog[b-f08dit0uy3] {
    transform: none;
}

/* Scrollable Modal Body */
.modal-body[b-f08dit0uy3] {
    position: relative;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
}

.modal-body[b-f08dit0uy3]::-webkit-scrollbar {
    width: 6px;
}

.modal-body[b-f08dit0uy3]::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 3px;
}

.modal-body[b-f08dit0uy3]::-webkit-scrollbar-thumb {
    background: #bdbdbd;
    border-radius: 3px;
}

.modal-body[b-f08dit0uy3]::-webkit-scrollbar-thumb:hover {
    background: #9e9e9e;
}

/* Accessibility: Focus Styles */
.btn-close:focus[b-f08dit0uy3] {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

.modal-footer .btn:focus[b-f08dit0uy3] {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

/* Force Light Mode - App uses light theme consistently */
.modal-content[b-f08dit0uy3] {
    background-color: #ffffff !important;
    color: #212121 !important;
}

.modal-header[b-f08dit0uy3] {
    background-color: #ffffff !important;
}

.modal-title[b-f08dit0uy3] {
    color: #212121 !important;
}

.modal-body[b-f08dit0uy3] {
    background-color: #ffffff !important;
}

.modal-footer[b-f08dit0uy3] {
    background-color: #f8f9fa !important;
}

/* Close Button - Ensure visible on light background */
.btn-close[b-f08dit0uy3] {
    background-color: transparent !important;
    opacity: 0.5;
    filter: none;
}

.btn-close:hover[b-f08dit0uy3] {
    opacity: 0.8;
}
/* /Components/Shared/Mobile/AdaptiveTable.razor.rz.scp.css */
/* AdaptiveTable - Responsive Table/Card View Styles */

/* Base Container */
.adaptive-table[b-pj8aogpng8] {
    width: 100%;
}

/* Desktop Mode - Table View */
@media (min-width: 769px) {
    .adaptive-table.desktop-mode .desktop-table-wrapper[b-pj8aogpng8] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    }

    .adaptive-table.desktop-mode .table[b-pj8aogpng8] {
        margin-bottom: 0;
        background-color: white;
    }

    .adaptive-table.desktop-mode .table thead[b-pj8aogpng8] {
        background-color: #f5f5f5;
    }

    .adaptive-table.desktop-mode .table thead th[b-pj8aogpng8] {
        font-weight: 600;
        color: #424242;
        border-bottom: 2px solid #e0e0e0;
        padding: 1rem;
        text-transform: uppercase;
        font-size: 0.875rem;
        letter-spacing: 0.5px;
    }

    .adaptive-table.desktop-mode .table tbody tr[b-pj8aogpng8] {
        transition: background-color 0.2s;
    }

    .adaptive-table.desktop-mode .table tbody tr:hover[b-pj8aogpng8] {
        background-color: #fafafa;
    }

    .adaptive-table.desktop-mode .table tbody td[b-pj8aogpng8] {
        padding: 1rem;
        vertical-align: middle;
        border-bottom: 1px solid #e0e0e0;
    }

    /* Scrollbar Styling */
    .desktop-table-wrapper[b-pj8aogpng8]::-webkit-scrollbar {
        height: 8px;
    }

    .desktop-table-wrapper[b-pj8aogpng8]::-webkit-scrollbar-track {
        background: #f5f5f5;
        border-radius: 4px;
    }

    .desktop-table-wrapper[b-pj8aogpng8]::-webkit-scrollbar-thumb {
        background: #bdbdbd;
        border-radius: 4px;
    }

    .desktop-table-wrapper[b-pj8aogpng8]::-webkit-scrollbar-thumb:hover {
        background: #9e9e9e;
    }
}

/* Mobile Mode - Card View */
@media (max-width: 768px) {
    .adaptive-table.mobile-mode .mobile-card-list[b-pj8aogpng8] {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0;
    }

    .mobile-table-card[b-pj8aogpng8] {
        background: white;
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: all 0.2s;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
        min-height: 72px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mobile-table-card:active[b-pj8aogpng8] {
        transform: scale(0.98);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    }

    .mobile-table-card:focus[b-pj8aogpng8] {
        outline: 2px solid #1976d2;
        outline-offset: 2px;
    }

    /* Card Content Rows */
    .mobile-table-card .card-row[b-pj8aogpng8] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        font-size: 16px;
        border-bottom: 1px solid #f0f0f0;
    }

    .mobile-table-card .card-row:last-child[b-pj8aogpng8] {
        border-bottom: none;
        padding-bottom: 0;
    }

    .mobile-table-card .card-row strong[b-pj8aogpng8] {
        color: #616161;
        font-weight: 600;
        min-width: 100px;
        flex-shrink: 0;
    }

    /* Default Card Content (fallback) */
    .default-card-content[b-pj8aogpng8] {
        font-size: 16px;
        color: #212121;
        line-height: 1.5;
    }

    .default-card-content tr[b-pj8aogpng8],
    .default-card-content tbody[b-pj8aogpng8],
    .default-card-content table[b-pj8aogpng8] {
        display: block;
    }

    .default-card-content td[b-pj8aogpng8] {
        display: block;
        padding: 6px 0;
        border: none;
    }

    .default-card-content td[b-pj8aogpng8]::before {
        content: attr(data-label);
        font-weight: 600;
        color: #616161;
        margin-right: 8px;
    }

    /* Empty State */
    .empty-state[b-pj8aogpng8] {
        text-align: center;
        padding: 48px 16px;
        color: #757575;
    }

    .empty-state p[b-pj8aogpng8] {
        margin: 0;
        font-size: 16px;
    }
}

/* Accessibility Improvements */
.mobile-table-card[role="button"][b-pj8aogpng8] {
    user-select: none;
}

/* Loading State (Optional) */
.adaptive-table.loading[b-pj8aogpng8] {
    opacity: 0.6;
    pointer-events: none;
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
    @media (min-width: 769px) {
        .adaptive-table.desktop-mode .table[b-pj8aogpng8] {
            background-color: #1e1e1e;
            color: #ffffff;
        }

        .adaptive-table.desktop-mode .table thead[b-pj8aogpng8] {
            background-color: #2a2a2a;
        }

        .adaptive-table.desktop-mode .table thead th[b-pj8aogpng8] {
            color: #e0e0e0;
            border-color: #424242;
        }

        .adaptive-table.desktop-mode .table tbody td[b-pj8aogpng8] {
            border-color: #424242;
        }

        .adaptive-table.desktop-mode .table tbody tr:hover[b-pj8aogpng8] {
            background-color: #2a2a2a;
        }
    }

    @media (max-width: 768px) {
        .mobile-table-card[b-pj8aogpng8] {
            background: #1e1e1e;
            color: #ffffff;
        }

        .mobile-table-card .card-row[b-pj8aogpng8] {
            border-color: #424242;
        }

        .mobile-table-card .card-row strong[b-pj8aogpng8] {
            color: #b0b0b0;
        }

        .default-card-content[b-pj8aogpng8] {
            color: #ffffff;
        }

        .empty-state[b-pj8aogpng8] {
            color: #b0b0b0;
        }
    }
}

/* Responsive Enhancements */
@media (max-width: 576px) {
    .mobile-table-card[b-pj8aogpng8] {
        padding: 12px;
        gap: 6px;
    }

    .mobile-table-card .card-row[b-pj8aogpng8] {
        font-size: 14px;
        padding: 6px 0;
    }

    .mobile-table-card .card-row strong[b-pj8aogpng8] {
        min-width: 80px;
        font-size: 14px;
    }
}
/* /Components/Shared/Mobile/MobileBottomNavigation.razor.rz.scp.css */
/* Mobile Bottom Navigation - Material Design 3 */
/* Safe area aware, 60fps animations, haptic feedback */

.mobile-bottom-nav[b-2ftv56q4kq] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--md-sys-color-surface-container, #fff);
    border-top: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);

    /* Safe area insets for iOS notch/Dynamic Island */
    padding-bottom: env(safe-area-inset-bottom, 0);

    /* GPU acceleration for smooth animations */
    transform: translateZ(0);
    will-change: transform;
}

.nav-container[b-2ftv56q4kq] {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    height: 64px;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

/* Navigation Item */
.nav-item[b-2ftv56q4kq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 12px 12px;
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    outline: none;

    /* Touch target size (minimum 48x48) */
    min-width: 48px;
    min-height: 48px;

    /* Smooth transitions */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Prevent text selection on tap */
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.nav-item-content[b-2ftv56q4kq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: 1;
}

/* Icon Container */
.icon-container[b-2ftv56q4kq] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-container i[b-2ftv56q4kq],
.icon-container svg[b-2ftv56q4kq] {
    width: 24px;
    height: 24px;
    color: var(--md-sys-color-on-surface-variant, #666);
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-container svg[b-2ftv56q4kq] {
    fill: currentColor;
}

/* Label */
.label[b-2ftv56q4kq] {
    font-size: 12px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant, #666);
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Badge */
.badge[b-2ftv56q4kq] {
    position: absolute;
    top: -4px;
    right: -8px;
    background: var(--md-sys-color-error, #f44336);
    color: var(--md-sys-color-on-error, #fff);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    animation: badgePulse-b-2ftv56q4kq 2s ease-in-out infinite;
    z-index: 2;
}

/* Active State */
.nav-item.active .icon-container[b-2ftv56q4kq] {
    background: var(--md-sys-color-secondary-container, #e8f5e9);
}

.nav-item.active .icon-container i[b-2ftv56q4kq],
.nav-item.active .icon-container svg[b-2ftv56q4kq] {
    color: var(--md-sys-color-on-secondary-container, #1b5e20);
    transform: scale(1.1);
}

.nav-item.active .label[b-2ftv56q4kq] {
    color: var(--md-sys-color-on-surface, #000);
    font-weight: 600;
}

/* Active Indicator */
.active-indicator[b-2ftv56q4kq] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 3px;
    background: var(--md-sys-color-primary, #4caf50);
    border-radius: 0 0 3px 3px;
    animation: slideDown-b-2ftv56q4kq 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Touch/Hover States */
.nav-item:hover:not(.active) .icon-container[b-2ftv56q4kq] {
    background: var(--md-sys-color-surface-variant, #f5f5f5);
}

.nav-item:active[b-2ftv56q4kq] {
    transform: scale(0.95);
}

.nav-item:active .icon-container[b-2ftv56q4kq] {
    transform: scale(0.9);
}

/* Focus State (keyboard navigation) */
.nav-item:focus-visible[b-2ftv56q4kq] {
    outline: 2px solid var(--md-sys-color-primary, #4caf50);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Animations */
@keyframes slideDown-b-2ftv56q4kq {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes badgePulse-b-2ftv56q4kq {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Ripple Effect (Material Design) */
.nav-item[b-2ftv56q4kq]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
    pointer-events: none;
}

.nav-item:active[b-2ftv56q4kq]::before {
    width: 100px;
    height: 100px;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .mobile-bottom-nav[b-2ftv56q4kq] {
        background: var(--md-sys-color-surface-container, #1e1e1e);
        border-top-color: var(--md-sys-color-outline-variant, #3a3a3a);
    }

    .icon-container i[b-2ftv56q4kq],
    .icon-container svg[b-2ftv56q4kq] {
        color: var(--md-sys-color-on-surface-variant, #b0b0b0);
    }

    .label[b-2ftv56q4kq] {
        color: var(--md-sys-color-on-surface-variant, #b0b0b0);
    }

    .nav-item.active .icon-container[b-2ftv56q4kq] {
        background: var(--md-sys-color-secondary-container, #2d4a2f);
    }

    .nav-item.active .icon-container i[b-2ftv56q4kq],
    .nav-item.active .icon-container svg[b-2ftv56q4kq] {
        color: var(--md-sys-color-on-secondary-container, #a8d5aa);
    }

    .nav-item.active .label[b-2ftv56q4kq] {
        color: var(--md-sys-color-on-surface, #fff);
    }

    .nav-item:hover:not(.active) .icon-container[b-2ftv56q4kq] {
        background: var(--md-sys-color-surface-variant, #2a2a2a);
    }

    .nav-item[b-2ftv56q4kq]::before {
        background: rgba(255, 255, 255, 0.1);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .mobile-bottom-nav[b-2ftv56q4kq],
    .nav-item[b-2ftv56q4kq],
    .icon-container[b-2ftv56q4kq],
    .icon-container i[b-2ftv56q4kq],
    .icon-container svg[b-2ftv56q4kq],
    .label[b-2ftv56q4kq],
    .active-indicator[b-2ftv56q4kq] {
        animation: none;
        transition: none;
    }

    .badge[b-2ftv56q4kq] {
        animation: none;
    }
}

/* Landscape Orientation (Smaller height) */
@media (orientation: landscape) {
    .nav-container[b-2ftv56q4kq] {
        height: 56px;
    }

    .nav-item[b-2ftv56q4kq] {
        padding: 6px 12px 8px;
    }

    .label[b-2ftv56q4kq] {
        font-size: 11px;
    }
}

/* Small devices (< 360px) */
@media (max-width: 360px) {
    .label[b-2ftv56q4kq] {
        font-size: 11px;
    }

    .icon-container[b-2ftv56q4kq] {
        width: 28px;
        height: 28px;
    }

    .icon-container i[b-2ftv56q4kq],
    .icon-container svg[b-2ftv56q4kq] {
        width: 20px;
        height: 20px;
    }
}
/* /Components/Shared/Mobile/MobileCardView.razor.rz.scp.css */
/* Mobile Card View - Material Design 3 */
/* Generic card component with swipe gestures and virtual scrolling */

.mobile-card-view[b-r3yb2w62y3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Card Item Wrapper */
.card-item-wrapper[b-r3yb2w62y3] {
    position: relative;
    background: var(--md-sys-color-surface, #fff);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;

    /* GPU acceleration */
    transform: translateZ(0);
    will-change: transform;

    /* Touch optimization */
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.card-item-wrapper:active[b-r3yb2w62y3] {
    transform: scale(0.98);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Swipe indicator (shown during swipe) */
.card-item-wrapper.swiping[b-r3yb2w62y3] {
    transition: transform 0.1s linear;
}

.card-item-wrapper.swipe-action[b-r3yb2w62y3] {
    animation: swipeOut-b-r3yb2w62y3 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Default Card (when no template provided) */
.card-default[b-r3yb2w62y3] {
    padding: 16px;
    min-height: 80px;
    display: flex;
    align-items: center;
    color: var(--md-sys-color-on-surface, #000);
}

/* Loading Skeleton State */
.card-loading-state[b-r3yb2w62y3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-skeleton[b-r3yb2w62y3] {
    background: var(--md-sys-color-surface, #fff);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    padding: 16px;
    gap: 12px;
}

.skeleton-image[b-r3yb2w62y3] {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        var(--md-sys-color-surface-variant, #f0f0f0) 25%,
        var(--md-sys-color-surface-container, #e8e8e8) 50%,
        var(--md-sys-color-surface-variant, #f0f0f0) 75%
    );
    background-size: 200% 100%;
    animation: shimmer-b-r3yb2w62y3 1.5s infinite;
}

.skeleton-content[b-r3yb2w62y3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton-line[b-r3yb2w62y3] {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        var(--md-sys-color-surface-variant, #f0f0f0) 25%,
        var(--md-sys-color-surface-container, #e8e8e8) 50%,
        var(--md-sys-color-surface-variant, #f0f0f0) 75%
    );
    background-size: 200% 100%;
    animation: shimmer-b-r3yb2w62y3 1.5s infinite;
}

.skeleton-line-1[b-r3yb2w62y3] {
    width: 70%;
}

.skeleton-line-2[b-r3yb2w62y3] {
    width: 90%;
}

.skeleton-line-3[b-r3yb2w62y3] {
    width: 60%;
}

/* Empty State */
.card-empty-state[b-r3yb2w62y3] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: 32px;
}

.empty-state-default[b-r3yb2w62y3] {
    text-align: center;
    color: var(--md-sys-color-on-surface-variant, #666);
}

.empty-icon[b-r3yb2w62y3] {
    font-size: 64px;
    margin-bottom: 16px;
}

.empty-state-default h3[b-r3yb2w62y3] {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--md-sys-color-on-surface, #000);
}

.empty-state-default p[b-r3yb2w62y3] {
    font-size: 14px;
    margin: 0;
    color: var(--md-sys-color-on-surface-variant, #666);
}

/* Animations */
@keyframes shimmer-b-r3yb2w62y3 {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes swipeOut-b-r3yb2w62y3 {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes slideInUp-b-r3yb2w62y3 {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.card-item-wrapper[b-r3yb2w62y3] {
    animation: slideInUp-b-r3yb2w62y3 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stagger animation for list items */
.card-item-wrapper:nth-child(1)[b-r3yb2w62y3] { animation-delay: 0ms; }
.card-item-wrapper:nth-child(2)[b-r3yb2w62y3] { animation-delay: 50ms; }
.card-item-wrapper:nth-child(3)[b-r3yb2w62y3] { animation-delay: 100ms; }
.card-item-wrapper:nth-child(4)[b-r3yb2w62y3] { animation-delay: 150ms; }
.card-item-wrapper:nth-child(5)[b-r3yb2w62y3] { animation-delay: 200ms; }

/* Virtual Scrolling Container */
[b-r3yb2w62y3] .mobile-card-view > div[role="list"] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .card-item-wrapper[b-r3yb2w62y3] {
        background: var(--md-sys-color-surface, #1e1e1e);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .card-item-wrapper:active[b-r3yb2w62y3] {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    }

    .card-default[b-r3yb2w62y3] {
        color: var(--md-sys-color-on-surface, #fff);
    }

    .card-skeleton[b-r3yb2w62y3] {
        background: var(--md-sys-color-surface, #1e1e1e);
    }

    .skeleton-image[b-r3yb2w62y3],
    .skeleton-line[b-r3yb2w62y3] {
        background: linear-gradient(
            90deg,
            var(--md-sys-color-surface-variant, #2a2a2a) 25%,
            var(--md-sys-color-surface-container, #333) 50%,
            var(--md-sys-color-surface-variant, #2a2a2a) 75%
        );
        background-size: 200% 100%;
    }

    .empty-state-default[b-r3yb2w62y3] {
        color: var(--md-sys-color-on-surface-variant, #b0b0b0);
    }

    .empty-state-default h3[b-r3yb2w62y3] {
        color: var(--md-sys-color-on-surface, #fff);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .card-item-wrapper[b-r3yb2w62y3],
    .skeleton-image[b-r3yb2w62y3],
    .skeleton-line[b-r3yb2w62y3] {
        animation: none;
        transition: none;
    }

    .card-item-wrapper:active[b-r3yb2w62y3] {
        transform: none;
    }
}

/* Small devices (< 360px) */
@media (max-width: 360px) {
    .mobile-card-view[b-r3yb2w62y3] {
        padding: 12px;
        gap: 10px;
    }

    .card-skeleton[b-r3yb2w62y3] {
        padding: 12px;
    }

    .skeleton-image[b-r3yb2w62y3] {
        width: 60px;
        height: 60px;
    }

    .empty-state-default[b-r3yb2w62y3] {
        padding: 24px;
    }

    .empty-icon[b-r3yb2w62y3] {
        font-size: 48px;
    }
}

/* Landscape Orientation */
@media (orientation: landscape) and (max-height: 500px) {
    .card-empty-state[b-r3yb2w62y3] {
        min-height: 200px;
        padding: 24px;
    }

    .empty-icon[b-r3yb2w62y3] {
        font-size: 48px;
        margin-bottom: 12px;
    }
}

/* Pull-to-refresh indicator */
.mobile-card-view.refreshing[b-r3yb2w62y3]::before {
    content: '';
    display: block;
    width: 100%;
    height: 40px;
    background: var(--md-sys-color-primary, #4caf50);
    opacity: 0.1;
    border-radius: 0 0 20px 20px;
    animation: pullDown-b-r3yb2w62y3 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pullDown-b-r3yb2w62y3 {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        height: 40px;
        opacity: 0.1;
    }
}
/* /Components/Shared/Mobile/MobileFilterSheet.razor.rz.scp.css */
/* Mobile Filter Sheet - Material Design 3 */
/* Specialized bottom sheet for filtering with sticky footer */

.filter-sheet-container[b-pzgmqzes4c] {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: calc(100vh - 120px);
}

.filter-content[b-pzgmqzes4c] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    overscroll-behavior: contain;

    /* Smooth scrolling on iOS */
    -webkit-overflow-scrolling: touch;
}

/* Filter Footer (Sticky) */
.filter-footer[b-pzgmqzes4c] {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--md-sys-color-surface-container, #fff);
    border-top: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    z-index: 10;
}

.filter-footer-content[b-pzgmqzes4c] {
    display: flex;
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
}

/* Buttons */
.btn-clear[b-pzgmqzes4c],
.btn-apply[b-pzgmqzes4c] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    outline: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Touch target size */
    min-height: 48px;

    /* Prevent text selection */
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.btn-clear[b-pzgmqzes4c] {
    background: var(--md-sys-color-surface-variant, #f5f5f5);
    color: var(--md-sys-color-on-surface-variant, #666);
    border: 1px solid var(--md-sys-color-outline, #d0d0d0);
}

.btn-clear:hover[b-pzgmqzes4c] {
    background: var(--md-sys-color-surface-variant-hover, #ebebeb);
}

.btn-clear:active[b-pzgmqzes4c] {
    transform: scale(0.98);
    background: var(--md-sys-color-surface-variant-pressed, #e0e0e0);
}

.btn-apply[b-pzgmqzes4c] {
    background: var(--md-sys-color-primary, #4caf50);
    color: var(--md-sys-color-on-primary, #fff);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-apply:hover[b-pzgmqzes4c] {
    background: var(--md-sys-color-primary-hover, #45a049);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-apply:active[b-pzgmqzes4c] {
    transform: scale(0.98);
    background: var(--md-sys-color-primary-pressed, #3d8b40);
}

.btn-apply:disabled[b-pzgmqzes4c] {
    background: var(--md-sys-color-surface-variant, #e0e0e0);
    color: var(--md-sys-color-on-surface-variant, #999);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Button Icons & Text */
.btn-icon[b-pzgmqzes4c] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}

.btn-text[b-pzgmqzes4c] {
    font-size: 14px;
    font-weight: 600;
}

/* Filter Count Badge */
.filter-count-badge[b-pzgmqzes4c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: rgba(255, 255, 255, 0.3);
    color: var(--md-sys-color-on-primary, #fff);
    font-size: 12px;
    font-weight: 700;
    border-radius: 10px;
}

/* Spacer when no clear button */
.btn-spacer[b-pzgmqzes4c] {
    flex: 1;
}

/* Focus States (Keyboard Navigation) */
.btn-clear:focus-visible[b-pzgmqzes4c],
.btn-apply:focus-visible[b-pzgmqzes4c] {
    outline: 2px solid var(--md-sys-color-primary, #4caf50);
    outline-offset: 2px;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .filter-footer[b-pzgmqzes4c] {
        background: var(--md-sys-color-surface-container, #1e1e1e);
        border-top-color: var(--md-sys-color-outline-variant, #3a3a3a);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
    }

    .btn-clear[b-pzgmqzes4c] {
        background: var(--md-sys-color-surface-variant, #2a2a2a);
        color: var(--md-sys-color-on-surface-variant, #b0b0b0);
        border-color: var(--md-sys-color-outline, #505050);
    }

    .btn-clear:hover[b-pzgmqzes4c] {
        background: var(--md-sys-color-surface-variant-hover, #333);
    }

    .btn-clear:active[b-pzgmqzes4c] {
        background: var(--md-sys-color-surface-variant-pressed, #383838);
    }

    .btn-apply[b-pzgmqzes4c] {
        background: var(--md-sys-color-primary, #66bb6a);
        color: var(--md-sys-color-on-primary, #000);
    }

    .btn-apply:hover[b-pzgmqzes4c] {
        background: var(--md-sys-color-primary-hover, #5bb65f);
    }

    .btn-apply:active[b-pzgmqzes4c] {
        background: var(--md-sys-color-primary-pressed, #4fa454);
    }

    .btn-apply:disabled[b-pzgmqzes4c] {
        background: var(--md-sys-color-surface-variant, #2a2a2a);
        color: var(--md-sys-color-on-surface-variant, #666);
    }

    .filter-count-badge[b-pzgmqzes4c] {
        background: rgba(0, 0, 0, 0.3);
        color: var(--md-sys-color-on-primary, #fff);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .btn-clear[b-pzgmqzes4c],
    .btn-apply[b-pzgmqzes4c] {
        transition: none;
    }
}

/* Small devices (< 360px) */
@media (max-width: 360px) {
    .filter-footer-content[b-pzgmqzes4c] {
        gap: 8px;
    }

    .btn-clear[b-pzgmqzes4c],
    .btn-apply[b-pzgmqzes4c] {
        padding: 12px 16px;
        font-size: 13px;
    }

    .btn-text[b-pzgmqzes4c] {
        font-size: 13px;
    }
}

/* Keyboard Visible State */
[b-pzgmqzes4c] .filter-sheet.keyboard-visible .filter-footer {
    /* Adjust footer position when keyboard is open */
    padding-bottom: calc(16px + var(--keyboard-height, 0px));
}

/* Loading State */
.filter-content.loading[b-pzgmqzes4c] {
    opacity: 0.6;
    pointer-events: none;
}

/* Empty State */
.filter-content:empty[b-pzgmqzes4c]::before {
    content: 'No filters available';
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--md-sys-color-on-surface-variant, #999);
    font-size: 14px;
}
/* /Components/Shared/MobileBottomSheet.razor.rz.scp.css */
/*
    Mobile Bottom Sheet Component - Scoped Styles
    Material Design 3 compliant styling with animations
    Features: GPU acceleration, dark mode, safe area insets, responsive design
*/

/* ========================================
   CSS Custom Properties (Theme Variables)
   ======================================== */

.mobile-bottom-sheet[b-m1nztuzuee] {
    /* Light mode colors */
    --sheet-bg: #FFFFFF;
    --sheet-text: #1F2937;
    --sheet-border: #E5E7EB;
    --backdrop-bg: rgba(0, 0, 0, 0.5);
    --handle-color: #D1D5DB;
    --close-btn-hover: #F3F4F6;
    --shadow-color: rgba(0, 0, 0, 0.15);

    /* Animation timings */
    --open-duration: 350ms;
    --close-duration: 250ms;
    --open-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --close-easing: cubic-bezier(0.4, 0, 1, 1);

    /* Dimensions */
    --sheet-radius: 16px;
    --handle-width: 32px;
    --handle-height: 4px;
    --header-height: 56px;
    --footer-height: 72px;
    --min-touch-target: 44px;

    /* Safe area insets for iOS notch/Dynamic Island */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* Dark mode support - OVERRIDE: Force light theme for mobile sheets */
/* CRITICAL FIX: Mobile bottom sheets should ALWAYS use light backgrounds */
/* This prevents invisible text and ensures consistent UX on mobile devices */
@media (prefers-color-scheme: dark) {
    .mobile-bottom-sheet[b-m1nztuzuee] {
        --sheet-bg: #FFFFFF !important;        /* Force white background */
        --sheet-text: #1F2937 !important;      /* Force dark gray text */
        --sheet-border: #E5E7EB !important;    /* Force light gray border */
        --backdrop-bg: rgba(0, 0, 0, 0.5);     /* Keep backdrop semi-transparent */
        --handle-color: #D1D5DB !important;    /* Force light gray handle */
        --close-btn-hover: #F3F4F6 !important; /* Force very light gray hover */
        --shadow-color: rgba(0, 0, 0, 0.15);   /* Lighter shadow for light background */
    }
}

/* ========================================
   Container & Layout
   ======================================== */

.mobile-bottom-sheet[b-m1nztuzuee] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    pointer-events: none;
}

/* Show only when open or closing */
.mobile-bottom-sheet.open[b-m1nztuzuee],
.mobile-bottom-sheet.closing[b-m1nztuzuee] {
    display: block;
    pointer-events: auto;
}

/* CRITICAL: Parent container uses dvh so it shrinks when keyboard opens.
   This means bottom: 0 on child = top of keyboard automatically! */
@supports (height: 100dvh) {
    .mobile-bottom-sheet.open[b-m1nztuzuee],
    .mobile-bottom-sheet.closing[b-m1nztuzuee] {
        height: 100dvh;
    }
}

/* Hide on desktop - mobile only (≤768px) */
@media (min-width: 769px) {
    .mobile-bottom-sheet[b-m1nztuzuee] {
        display: none !important;
    }
}

/* ========================================
   Backdrop
   ======================================== */

.sheet-backdrop[b-m1nztuzuee] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--backdrop-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity var(--open-duration) var(--open-easing);
}

.mobile-bottom-sheet.open .sheet-backdrop[b-m1nztuzuee] {
    opacity: 1;
}

.mobile-bottom-sheet.closing .sheet-backdrop[b-m1nztuzuee] {
    opacity: 0;
    transition: opacity var(--close-duration) var(--close-easing);
}

/* ========================================
   Sheet Container
   ======================================== */

.sheet-container[b-m1nztuzuee] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 768px;
    margin: 0 auto;
    background: var(--sheet-bg);
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    box-shadow: 0 -4px 24px var(--shadow-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* Default height - portrait orientation */
    /* FIXED: vh fallback FIRST, then dvh override (CSS takes last valid value) */
    height: 85vh; /* Fallback for older browsers */
    max-height: calc(100vh - var(--safe-top, 0px) - 16px); /* Fallback */

    /* GPU acceleration for smooth animations */
    transform: translateY(100%);
    will-change: transform;
    transition: transform var(--open-duration) var(--open-easing);

    /* CRITICAL: Prevent iOS double-tap zoom inside sheet */
    touch-action: pan-x pan-y;
    -webkit-text-size-adjust: 100%;
}

/* Modern browsers that support dvh - this OVERRIDES the vh values */
@supports (height: 100dvh) {
    .sheet-container[b-m1nztuzuee] {
        /* Simple positioning - parent container already uses dvh,
           so bottom: 0 = top of keyboard automatically */
        bottom: 0;

        /* Use min() to handle both keyboard-open and keyboard-closed states:
           - 85dvh: Good height when keyboard is closed (leaves 15% gap)
           - 100dvh - 140px: Ensures header visible when keyboard open (140px = safe-area + app-header + margin) */
        height: min(85dvh, calc(100dvh - 140px));
        max-height: none;

        /* Smooth animation as keyboard opens/closes */
        transition: height 250ms ease-out;
    }
}

/* Landscape orientation - taller sheet */
@media (orientation: landscape) {
    .sheet-container[b-m1nztuzuee] {
        height: 90vh; /* Fallback first */
        max-height: calc(100vh - var(--safe-top, 0px) - 8px); /* Fallback */
    }
}

/* Landscape with dvh support */
@supports (height: 100dvh) {
    @media (orientation: landscape) {
        .sheet-container[b-m1nztuzuee] {
            bottom: 0;
            height: min(90dvh, calc(100dvh - 80px));
            max-height: none;
        }
    }
}

/* Opening animation - slide up with subtle bounce */
@keyframes slideUp-b-m1nztuzuee {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.mobile-bottom-sheet.open .sheet-container[b-m1nztuzuee] {
    transform: translateY(0);
    animation: slideUp-b-m1nztuzuee var(--open-duration) var(--open-easing);
}

/* Closing animation - slide down (faster, no bounce) */
@keyframes slideDown-b-m1nztuzuee {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

.mobile-bottom-sheet.closing .sheet-container[b-m1nztuzuee] {
    animation: slideDown-b-m1nztuzuee var(--close-duration) var(--close-easing);
}

/* Dragging state - disable transition for smooth tracking */
.mobile-bottom-sheet.dragging .sheet-container[b-m1nztuzuee] {
    transition: none;
}

/* ========================================
   Drag Handle
   ======================================== */

.sheet-drag-handle[b-m1nztuzuee] {
    width: 100%;
    padding: 14px 0 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.sheet-drag-handle:active[b-m1nztuzuee] {
    cursor: grabbing;
}

.drag-indicator[b-m1nztuzuee] {
    width: 40px;
    height: 5px;
    background: #CBD5E1;
    border-radius: 3px;
    transition: background-color 200ms ease;
}

.sheet-drag-handle:hover .drag-indicator[b-m1nztuzuee],
.sheet-drag-handle:active .drag-indicator[b-m1nztuzuee] {
    background: var(--sheet-text);
    opacity: 0.4;
}

/* ========================================
   Loading State (Improvement #2)
   ======================================== */

.sheet-loading-state[b-m1nztuzuee] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    gap: 16px;
}

.spinner[b-m1nztuzuee] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--sheet-border);
    border-top-color: var(--sheet-text);
    border-radius: 50%;
    animation: spinner-rotate-b-m1nztuzuee 0.8s linear infinite;
}

@keyframes spinner-rotate-b-m1nztuzuee {
    to { transform: rotate(360deg); }
}

.loading-text[b-m1nztuzuee] {
    margin: 0;
    color: var(--sheet-text);
    opacity: 0.6;
    font-size: 14px;
}

.visually-hidden[b-m1nztuzuee] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   Header
   ======================================== */

.sheet-header[b-m1nztuzuee] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 16px 12px 20px;
    min-height: 48px;
    border-bottom: 1px solid var(--sheet-border);
    flex-shrink: 0;
}

.sheet-title[b-m1nztuzuee] {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--sheet-text);
    line-height: 1.3;
}

.sheet-close-btn[b-m1nztuzuee] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    background: #F1F5F9;
    border: none;
    border-radius: 50%;
    color: #64748B;
    cursor: pointer;
    transition: all 200ms ease;
    -webkit-tap-highlight-color: transparent;
}

.sheet-close-btn:hover[b-m1nztuzuee] {
    background: #E2E8F0;
    color: #475569;
}

.sheet-close-btn:active[b-m1nztuzuee] {
    background: #CBD5E1;
    transform: scale(0.95);
}

.sheet-close-btn:focus-visible[b-m1nztuzuee] {
    outline: 2px solid #6366F1;
    outline-offset: 2px;
}

.sheet-close-btn svg[b-m1nztuzuee] {
    width: 18px;
    height: 18px;
}

/* ========================================
   Body (Scrollable Content)
   ======================================== */

.sheet-body[b-m1nztuzuee] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
    padding-bottom: calc(20px + var(--safe-bottom));
}

/* Custom scrollbar for webkit browsers */
.sheet-body[b-m1nztuzuee]::-webkit-scrollbar {
    width: 6px;
}

.sheet-body[b-m1nztuzuee]::-webkit-scrollbar-track {
    background: transparent;
}

.sheet-body[b-m1nztuzuee]::-webkit-scrollbar-thumb {
    background: var(--handle-color);
    border-radius: 3px;
}

.sheet-body[b-m1nztuzuee]::-webkit-scrollbar-thumb:hover {
    background: var(--sheet-text);
    opacity: 0.4;
}

/* ========================================
   Footer (Optional)
   ======================================== */

.sheet-footer[b-m1nztuzuee] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    padding-bottom: calc(16px + var(--safe-bottom));
    border-top: 1px solid var(--sheet-border);
    flex-shrink: 0;
    min-height: var(--footer-height);
}

/* ========================================
   Child Content Overrides (::deep)
   ======================================== */

/* Ensure child inputs and selects are touch-friendly */
.mobile-bottom-sheet[b-m1nztuzuee]  input,
.mobile-bottom-sheet[b-m1nztuzuee]  select,
.mobile-bottom-sheet[b-m1nztuzuee]  textarea,
.mobile-bottom-sheet[b-m1nztuzuee]  button {
    min-height: var(--min-touch-target);
    font-size: 16px; /* Prevents iOS zoom on focus */
}

/* CRITICAL FIX: Ensure text visibility in mobile option buttons */
.mobile-bottom-sheet[b-m1nztuzuee]  .mobile-option-item {
    color: var(--sheet-text) !important;
}

.mobile-bottom-sheet[b-m1nztuzuee]  .mobile-option-item .option-text {
    color: inherit !important;
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.mobile-bottom-sheet[b-m1nztuzuee]  .mobile-option-item.selected {
    color: #4F46E5 !important;
}

/* Ensure TomSelect dropdown doesn't overflow */
.mobile-bottom-sheet[b-m1nztuzuee]  .ts-dropdown {
    max-height: 50vh;
    overflow-y: auto;
}

/* ========================================
   Keyboard Adjustments - Full Screen Takeover
   ======================================== */

/* When keyboard is open (detected via JS VisualViewport API),
   expand sheet to cover app header for MAXIMUM space.
   This is critical for showing enough options when typing. */
.sheet-container.keyboard-visible[b-m1nztuzuee] {
    /* Full-screen takeover - cover app header to maximize option space */
    height: calc(100dvh - 20px) !important;

    /* Smoother transition when keyboard opens */
    transition: height 200ms ease-out !important;
}

/* Fallback for browsers without dvh */
@supports not (height: 100dvh) {
    .sheet-container.keyboard-visible[b-m1nztuzuee] {
        height: calc(100vh - 20px) !important;
    }
}

/* Also hide drag handle when keyboard is open to save space */
.keyboard-visible .sheet-drag-handle[b-m1nztuzuee] {
    padding: 8px 0 4px 0;
}

.keyboard-visible .drag-indicator[b-m1nztuzuee] {
    width: 32px;
    height: 4px;
}

/* Compact header when keyboard is open */
.keyboard-visible .sheet-header[b-m1nztuzuee] {
    padding: 2px 16px 8px 16px;
    min-height: 40px;
}

.keyboard-visible .sheet-title[b-m1nztuzuee] {
    font-size: 15px;
}

.keyboard-visible .sheet-close-btn[b-m1nztuzuee] {
    width: 32px;
    height: 32px;
}

.keyboard-visible .sheet-close-btn svg[b-m1nztuzuee] {
    width: 16px;
    height: 16px;
}

/* Compact TomSelect mobile content when keyboard is open */
/* These styles maximize space for options when typing on mobile */
.keyboard-visible[b-m1nztuzuee]  .mobile-search-container {
    padding: 8px 12px;
}

.keyboard-visible[b-m1nztuzuee]  .mobile-search-input {
    padding: 8px 12px 8px 36px;
    font-size: 15px;
}

.keyboard-visible[b-m1nztuzuee]  .mobile-search-container .search-icon {
    left: 22px;
    width: 16px;
    height: 16px;
}

.keyboard-visible[b-m1nztuzuee]  .mobile-options-list {
    padding: 4px 8px;
    /* Extra bottom padding so last item isn't cut off by action buttons */
    padding-bottom: 8px;
}

.keyboard-visible[b-m1nztuzuee]  .mobile-option-item {
    padding: 8px 12px;
    font-size: 15px;
    min-height: 38px;
    margin-bottom: 1px;
}

.keyboard-visible[b-m1nztuzuee]  .mobile-actions {
    padding: 8px 12px;
    gap: 8px;
}

.keyboard-visible[b-m1nztuzuee]  .action-button {
    padding: 10px 16px;
    font-size: 14px;
    min-height: 40px;
}

/* ===== COLLAPSIBLE CHIPS SECTION ===== */
/* When keyboard opens, collapse chips to save vertical space for options */

.keyboard-visible[b-m1nztuzuee]  .mobile-selected-chips {
    min-height: 28px;
    max-height: 28px;
    padding: 4px 12px;
    gap: 6px;
    transition: all 200ms ease-out;
    overflow: hidden;
}

/* Hide individual chips when keyboard is open - show only count */
.keyboard-visible[b-m1nztuzuee]  .mobile-selected-chips .chips-container {
    display: none;
}

/* Transform label to be the main indicator */
.keyboard-visible[b-m1nztuzuee]  .mobile-selected-chips .chips-label {
    font-size: 13px;
    padding: 2px 10px;
    background: #10B981;
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Add expand hint arrow after the count */
.keyboard-visible[b-m1nztuzuee]  .mobile-selected-chips .chips-label::after {
    content: "selected • tap to edit";
    font-weight: 400;
    opacity: 0.9;
    margin-left: 4px;
}

/* ========================================
   Accessibility
   ======================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .mobile-bottom-sheet[b-m1nztuzuee] {
        --sheet-border: currentColor;
    }

    .sheet-container[b-m1nztuzuee] {
        border: 2px solid currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .mobile-bottom-sheet[b-m1nztuzuee],
    .sheet-backdrop[b-m1nztuzuee],
    .sheet-container[b-m1nztuzuee],
    .drag-indicator[b-m1nztuzuee],
    .sheet-close-btn[b-m1nztuzuee] {
        animation: none !important;
        transition: none !important;
    }

    /* Instant show/hide without animation */
    .mobile-bottom-sheet.open .sheet-container[b-m1nztuzuee] {
        transform: translateY(0);
    }

    .mobile-bottom-sheet.closing .sheet-container[b-m1nztuzuee] {
        transform: translateY(100%);
    }
}

/* Focus visible styles for keyboard navigation */
.sheet-drag-handle:focus-visible[b-m1nztuzuee],
.sheet-body:focus-visible[b-m1nztuzuee] {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
    .mobile-bottom-sheet[b-m1nztuzuee] {
        display: none !important;
    }
}
/* /Components/Shared/MobileBottomSheetList.razor.rz.scp.css */
/* ==========================================================================
   Mobile Bottom Sheet List Component Styles
   Material Design 3 with Dark Mode Support
   ========================================================================== */

.mobile-bottom-sheet-list[b-874xsn7eru] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--surface, #ffffff);
    color: var(--on-surface, #1c1b1f);
}

/* ==========================================================================
   Search Container
   ========================================================================== */

.search-container[b-874xsn7eru] {
    flex-shrink: 0;
    padding: 16px;
    background-color: var(--surface, #ffffff);
    border-bottom: 1px solid var(--outline-variant, #c4c6d0);
    position: sticky;
    top: 0;
    z-index: 10;
}

.search-input-wrapper[b-874xsn7eru] {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--surface-container-high, #ece6f0);
    border-radius: 28px;
    transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}

.search-input-wrapper:focus-within[b-874xsn7eru] {
    background-color: var(--surface-container-highest, #e6e0e9);
}

.search-icon[b-874xsn7eru] {
    position: absolute;
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-surface-variant, #46464f);
    pointer-events: none;
}

.search-input[b-874xsn7eru] {
    flex: 1;
    width: 100%;
    height: 56px;
    padding: 16px 48px 16px 52px;
    border: none;
    background: transparent;
    font-size: 16px;
    font-family: inherit;
    color: var(--on-surface, #1c1b1f);
    outline: none;
}

.search-input[b-874xsn7eru]::placeholder {
    color: var(--on-surface-variant, #46464f);
    opacity: 1;
}

.search-input[b-874xsn7eru]::-webkit-search-cancel-button {
    display: none;
}

.clear-search-btn[b-874xsn7eru] {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--on-surface-variant, #46464f);
    cursor: pointer;
    transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}

.clear-search-btn:hover[b-874xsn7eru] {
    background-color: var(--surface-container-highest, #e6e0e9);
}

.clear-search-btn:active[b-874xsn7eru] {
    background-color: var(--surface-container, #f3edf7);
}

/* ==========================================================================
   Results Count
   ========================================================================== */

.results-count[b-874xsn7eru] {
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--on-surface-variant, #46464f);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   List Container
   ========================================================================== */

.list-container[b-874xsn7eru] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ==========================================================================
   List Items
   ========================================================================== */

.list-item[b-874xsn7eru] {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 8px 16px;
    gap: 16px;
    background-color: var(--surface, #ffffff);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}

.list-item:hover[b-874xsn7eru] {
    background-color: var(--surface-container-high, #ece6f0);
}

.list-item:active[b-874xsn7eru] {
    background-color: var(--surface-container-highest, #e6e0e9);
}

.list-item:focus[b-874xsn7eru] {
    outline: 2px solid var(--primary, #6750a4);
    outline-offset: -2px;
}

.list-item.selected[b-874xsn7eru] {
    background-color: var(--secondary-container, #e8def8);
}

.list-item.selected:hover[b-874xsn7eru] {
    background-color: var(--secondary-container, #e8def8);
    opacity: 0.9;
}

/* Touch-friendly minimum target size */
@media (pointer: coarse) {
    .list-item[b-874xsn7eru] {
        min-height: 60px;
    }
}

/* ==========================================================================
   Checkbox
   ========================================================================== */

.checkbox-wrapper[b-874xsn7eru] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.list-item-checkbox[b-874xsn7eru] {
    position: absolute;
    width: 24px;
    height: 24px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.checkbox-checkmark[b-874xsn7eru] {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 2px solid var(--on-surface-variant, #46464f);
    border-radius: 4px;
    background-color: transparent;
    transition: all 200ms cubic-bezier(0.2, 0, 0, 1);
    pointer-events: none;
}

.list-item-checkbox:checked + .checkbox-checkmark[b-874xsn7eru] {
    background-color: var(--primary, #6750a4);
    border-color: var(--primary, #6750a4);
}

.list-item-checkbox:checked + .checkbox-checkmark[b-874xsn7eru]::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 10px;
    border: solid var(--on-primary, #ffffff);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.list-item-checkbox:focus + .checkbox-checkmark[b-874xsn7eru] {
    outline: 2px solid var(--primary, #6750a4);
    outline-offset: 2px;
}

/* ==========================================================================
   List Item Content
   ========================================================================== */

.list-item-content[b-874xsn7eru] {
    flex: 1;
    min-width: 0;
}

.list-item-text[b-874xsn7eru] {
    display: block;
    font-size: 16px;
    line-height: 24px;
    color: var(--on-surface, #1c1b1f);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-item-text[b-874xsn7eru]  mark.search-highlight {
    background-color: var(--tertiary-container, #ffd8e4);
    color: var(--on-tertiary-container, #31111d);
    font-weight: 600;
    border-radius: 2px;
    padding: 0 2px;
}

/* ==========================================================================
   Selected Indicator
   ========================================================================== */

.selected-indicator[b-874xsn7eru] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--primary, #6750a4);
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.loading-state[b-874xsn7eru] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 16px;
}

.loading-spinner[b-874xsn7eru] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--surface-container-highest, #e6e0e9);
    border-top-color: var(--primary, #6750a4);
    border-radius: 50%;
    animation: spin-b-874xsn7eru 1s linear infinite;
}

@keyframes spin-b-874xsn7eru {
    to {
        transform: rotate(360deg);
    }
}

.loading-text[b-874xsn7eru] {
    font-size: 14px;
    color: var(--on-surface-variant, #46464f);
}

/* ==========================================================================
   No Results State
   ========================================================================== */

.no-results-state[b-874xsn7eru] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.no-results-icon[b-874xsn7eru] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
    border-radius: 50%;
    background-color: var(--surface-container-high, #ece6f0);
    color: var(--on-surface-variant, #46464f);
}

.no-results-title[b-874xsn7eru] {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 500;
    color: var(--on-surface, #1c1b1f);
}

.no-results-message[b-874xsn7eru] {
    margin: 0 0 24px 0;
    font-size: 14px;
    color: var(--on-surface-variant, #46464f);
}

.no-results-action[b-874xsn7eru] {
    padding: 10px 24px;
    border: none;
    border-radius: 20px;
    background-color: var(--primary-container, #eaddff);
    color: var(--on-primary-container, #21005e);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}

.no-results-action:hover[b-874xsn7eru] {
    background-color: var(--primary-container, #eaddff);
    opacity: 0.9;
}

.no-results-action:active[b-874xsn7eru] {
    background-color: var(--primary-container, #eaddff);
    opacity: 0.8;
}

/* ==========================================================================
   Placeholder
   ========================================================================== */

.list-item-placeholder[b-874xsn7eru] {
    height: 56px;
    margin: 0 16px;
    background-color: var(--surface-container-high, #ece6f0);
    border-radius: 8px;
    overflow: hidden;
}

.placeholder-shimmer[b-874xsn7eru] {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--surface-container-highest, #e6e0e9) 50%,
        transparent 100%
    );
    animation: shimmer-b-874xsn7eru 1.5s infinite;
}

@keyframes shimmer-b-874xsn7eru {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* ==========================================================================
   Selection Summary
   ========================================================================== */

.selection-summary[b-874xsn7eru] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background-color: var(--surface-container-low, #f7f2fa);
    border-top: 1px solid var(--outline-variant, #c4c6d0);
}

.selection-count[b-874xsn7eru] {
    font-size: 14px;
    font-weight: 500;
    color: var(--on-surface, #1c1b1f);
}

.clear-selection-btn[b-874xsn7eru] {
    padding: 8px 16px;
    border: none;
    border-radius: 16px;
    background-color: transparent;
    color: var(--primary, #6750a4);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}

.clear-selection-btn:hover[b-874xsn7eru] {
    background-color: var(--surface-container-high, #ece6f0);
}

.clear-selection-btn:active[b-874xsn7eru] {
    background-color: var(--surface-container-highest, #e6e0e9);
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .mobile-bottom-sheet-list[b-874xsn7eru] {
        --surface: #1c1b1f;
        --on-surface: #e6e1e5;
        --surface-container-high: #2b2930;
        --surface-container-highest: #36343b;
        --surface-container: #211f26;
        --surface-container-low: #1c1b1f;
        --on-surface-variant: #cac4d0;
        --outline-variant: #49454f;
        --primary: #d0bcff;
        --on-primary: #381e72;
        --primary-container: #4f378b;
        --on-primary-container: #eaddff;
        --secondary-container: #4a4458;
        --tertiary-container: #633b48;
        --on-tertiary-container: #ffd8e4;
    }

    .list-item-text[b-874xsn7eru]  mark.search-highlight {
        background-color: var(--tertiary-container, #633b48);
        color: var(--on-tertiary-container, #ffd8e4);
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *[b-874xsn7eru] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .list-item:focus[b-874xsn7eru] {
        outline-width: 3px;
    }

    .checkbox-checkmark[b-874xsn7eru] {
        border-width: 3px;
    }
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 480px) {
    .search-container[b-874xsn7eru] {
        padding: 12px;
    }

    .list-item[b-874xsn7eru] {
        padding: 12px 16px;
    }

    .list-item-text[b-874xsn7eru] {
        font-size: 15px;
    }

    .no-results-state[b-874xsn7eru] {
        padding: 32px 16px;
    }
}

/* Safe area insets for notched devices */
@supports (padding: env(safe-area-inset-bottom)) {
    .selection-summary[b-874xsn7eru] {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}
/* /Components/Shared/ServingAmountInput.razor.rz.scp.css */
.serving-amount-input[b-pts3w9b1wt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.amount-input[b-pts3w9b1wt] {
    max-width: 100px;
}

.grams-display[b-pts3w9b1wt] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}
/* /Components/Shared/TomSelectDropdown.razor.rz.scp.css */
/* TomSelect Modern Minimalist Design */
/* Matches the polished design of the application with clean, professional styling */

:root[b-pomttcjnb0] {
    --ts-primary: #4F46E5;
    --ts-primary-hover: #4338CA;
    --ts-primary-light: #EEF2FF;
    --ts-background: #F8FAFC;
    --ts-surface: #FFFFFF;
    --ts-text-primary: #1E293B;
    --ts-text-secondary: #64748B;
    --ts-text-placeholder: #94A3B8;
    --ts-border: #E2E8F0;
    --ts-hover: #F1F5F9;
    --ts-focus: #EEF2FF;
    --ts-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --ts-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --ts-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --ts-radius: 10px;
    --ts-radius-sm: 6px;
    --ts-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tom-select-container[b-pomttcjnb0] {
    width: 100%;
    position: relative;
    z-index: 100; /* Ensure container can stack dropdown above other elements */
}

.tom-select-wrapper[b-pomttcjnb0] {
    width: 100%;
}

/* Loading State */
.tom-select-loading[b-pomttcjnb0] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--ts-surface);
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius);
    min-height: 48px;
}

.loading-spinner[b-pomttcjnb0] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--ts-border);
    border-top-color: var(--ts-primary);
    border-radius: 50%;
    animation: spin-b-pomttcjnb0 600ms linear infinite;
}

@keyframes spin-b-pomttcjnb0 {
    to { transform: rotate(360deg); }
}

/* Error State */
.tom-select-error[b-pomttcjnb0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #FEF2F2;
    border: 1px solid #FEE2E2;
    border-radius: var(--ts-radius);
    color: #991B1B;
    font-size: 14px;
}

.error-icon[b-pomttcjnb0] {
    font-size: 18px;
    color: #DC2626;
}

.retry-button[b-pomttcjnb0] {
    margin-left: auto;
    padding: 6px 12px;
    background: #DC2626;
    color: white;
    border: none;
    border-radius: var(--ts-radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--ts-transition);
}

.retry-button:hover[b-pomttcjnb0] {
    background: #B91C1C;
}

/* Label Styling */
.tom-select-label[b-pomttcjnb0] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--ts-text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.tom-select-label.required[b-pomttcjnb0] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.required-indicator[b-pomttcjnb0] {
    color: #EF4444;
    font-size: 14px;
}

/* Base TomSelect Styling */
.tom-select[b-pomttcjnb0] {
    width: 100%;
}

/* Control (Search Input) */
.tom-select .ts-control[b-pomttcjnb0] {
    background: var(--ts-surface);
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius);
    padding: 10px 16px;
    min-height: 48px;
    font-size: 16px;
    color: var(--ts-text-primary);
    transition: var(--ts-transition);
    box-shadow: var(--ts-shadow-sm);
    cursor: text;
}

.tom-select .ts-control:hover[b-pomttcjnb0] {
    border-color: var(--ts-text-secondary);
    box-shadow: var(--ts-shadow-md);
}

.tom-select.focus .ts-control[b-pomttcjnb0],
.tom-select .ts-control:focus[b-pomttcjnb0] {
    border-color: var(--ts-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--ts-primary-light), var(--ts-shadow-md);
    background: var(--ts-surface);
}

/* Input inside control */
.tom-select .ts-control input[b-pomttcjnb0] {
    font-size: 16px !important;
    color: var(--ts-text-primary);
    font-family: inherit;
}

.tom-select .ts-control input[b-pomttcjnb0]::placeholder {
    color: var(--ts-text-placeholder);
    opacity: 1;
}

/* Items (selected values) */
.tom-select .ts-control .item[b-pomttcjnb0] {
    background: var(--ts-primary);
    color: white;
    border: none;
    border-radius: var(--ts-radius-sm);
    padding: 4px 10px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 2px 4px 2px 0;
    transition: var(--ts-transition);
}

.tom-select .ts-control .item:hover[b-pomttcjnb0] {
    background: var(--ts-primary-hover);
}

/* Dropdown Container */
.tom-select .ts-dropdown[b-pomttcjnb0] {
    background: var(--ts-surface);
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius);
    box-shadow: var(--ts-shadow-lg);
    margin-top: 4px;
    padding: 8px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 9999 !important; /* CRITICAL FIX: Increase z-index to overlay properly */
    position: absolute !important; /* Ensure dropdown overlays content */
    animation: fadeInSlide-b-pomttcjnb0 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInSlide-b-pomttcjnb0 {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown scrollbar styling */
.tom-select .ts-dropdown[b-pomttcjnb0]::-webkit-scrollbar {
    width: 8px;
}

.tom-select .ts-dropdown[b-pomttcjnb0]::-webkit-scrollbar-track {
    background: transparent;
}

.tom-select .ts-dropdown[b-pomttcjnb0]::-webkit-scrollbar-thumb {
    background: var(--ts-border);
    border-radius: 4px;
}

.tom-select .ts-dropdown[b-pomttcjnb0]::-webkit-scrollbar-thumb:hover {
    background: var(--ts-text-secondary);
}

/* Options */
.tom-select .ts-dropdown .option[b-pomttcjnb0] {
    padding: 12px 16px;
    border-radius: var(--ts-radius-sm);
    cursor: pointer;
    color: var(--ts-text-primary);
    font-size: 15px;
    transition: var(--ts-transition);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
}

.tom-select .ts-dropdown .option:hover[b-pomttcjnb0] {
    background: var(--ts-hover);
    color: var(--ts-text-primary);
}

.tom-select .ts-dropdown .option.active[b-pomttcjnb0] {
    background: var(--ts-focus);
    color: var(--ts-primary);
    font-weight: 500;
}

.tom-select .ts-dropdown .option.selected[b-pomttcjnb0] {
    background: var(--ts-primary-light);
    color: var(--ts-primary);
    font-weight: 500;
}

.tom-select .ts-dropdown .option.selected[b-pomttcjnb0]::after {
    content: '✓';
    margin-left: auto;
    font-weight: 600;
    color: var(--ts-primary);
}

/* Option groups */
.tom-select .ts-dropdown .optgroup-header[b-pomttcjnb0] {
    padding: 8px 16px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ts-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 8px;
}

.tom-select .ts-dropdown .optgroup-header:first-child[b-pomttcjnb0] {
    margin-top: 0;
}

.tom-select .ts-dropdown .optgroup .option[b-pomttcjnb0] {
    padding-left: 28px;
}

/* Create option */
.tom-select .ts-dropdown .create[b-pomttcjnb0] {
    padding: 12px 16px;
    border-radius: var(--ts-radius-sm);
    color: var(--ts-primary);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--ts-transition);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tom-select .ts-dropdown .create[b-pomttcjnb0]::before {
    content: '+';
    font-size: 18px;
    font-weight: 600;
}

.tom-select .ts-dropdown .create:hover[b-pomttcjnb0] {
    background: var(--ts-focus);
}

/* No results */
.tom-select .ts-dropdown .no-results[b-pomttcjnb0] {
    padding: 12px 16px;
    color: var(--ts-text-secondary);
    font-size: 15px;
    text-align: center;
}

/* Plugin: Remove Button */
.tom-select .ts-control .item .remove[b-pomttcjnb0] {
    border: none;
    background: transparent;
    color: white;
    font-size: 18px;
    padding: 0;
    margin-left: 4px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 150ms;
    line-height: 1;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tom-select .ts-control .item .remove:hover[b-pomttcjnb0] {
    opacity: 1;
}

/* Plugin: Clear Button */
.tom-select .ts-control .clear-button[b-pomttcjnb0] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--ts-text-secondary);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    opacity: 0.6;
    transition: var(--ts-transition);
}

.tom-select .ts-control .clear-button:hover[b-pomttcjnb0] {
    opacity: 1;
    background: var(--ts-text-primary);
}

/* Plugin: Dropdown Header */
.tom-select .ts-dropdown .dropdown-header[b-pomttcjnb0] {
    padding: 8px 16px;
    border-bottom: 1px solid var(--ts-border);
    margin: -8px -8px 8px;
    background: var(--ts-background);
    border-radius: var(--ts-radius) var(--ts-radius) 0 0;
    font-size: 13px;
    color: var(--ts-text-secondary);
    font-weight: 500;
}

/* Disabled State */
.tom-select.disabled .ts-control[b-pomttcjnb0],
.tom-select .ts-control[disabled][b-pomttcjnb0] {
    background: var(--ts-background);
    color: var(--ts-text-secondary);
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: none;
}

.tom-select.disabled .ts-control:hover[b-pomttcjnb0] {
    border-color: var(--ts-border);
    box-shadow: none;
}

/* Helper Text */
.tom-select-helper-text[b-pomttcjnb0] {
    margin-top: 6px;
    font-size: 13px;
    color: var(--ts-text-secondary);
    line-height: 1.4;
}

/* Validation Message */
.tom-select-validation-message[b-pomttcjnb0] {
    margin-top: 6px;
    font-size: 13px;
    color: #DC2626;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tom-select-validation-message[b-pomttcjnb0]::before {
    content: '⚠';
    font-size: 14px;
}

/* Screen reader only */
.sr-only[b-pomttcjnb0] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ===== MOBILE MODE STYLES ===== */

/* Pulse animation for search chip - triggered by JS after scroll completes */
@keyframes search-pulse-b-pomttcjnb0 {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.5);
    }
    50% {
        transform: scale(1.04);
        box-shadow: 0 0 0 12px rgba(79, 70, 229, 0.25);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
    }
}

/* Class added by JS after scroll completes to trigger pulse */
.search-chip-trigger.search-chip-pulse[b-pomttcjnb0] {
    animation: search-pulse-b-pomttcjnb0 800ms ease-out;
}

/* Search Chip Trigger - Mobile food search with clear affordance */
.search-chip-trigger[b-pomttcjnb0] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    border: 2px solid #C7D2FE;
    border-radius: 14px;
    padding: 14px 18px;
    min-height: 52px; /* Touch target - exceeds 44px minimum */
    font-size: 16px; /* Prevents iOS zoom */
    cursor: pointer;
    transition: all 200ms ease;
    /* Animation triggered by JS after scroll completes - see .search-chip-pulse class */
    text-align: left;
    font-family: inherit;
}

.search-chip-trigger:hover:not(:disabled)[b-pomttcjnb0] {
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    border-color: #A5B4FC;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

.search-chip-trigger:focus[b-pomttcjnb0] {
    outline: none;
    border-color: var(--ts-primary);
    box-shadow: 0 0 0 3px var(--ts-primary-light), 0 4px 12px rgba(79, 70, 229, 0.15);
}

.search-chip-trigger:active:not(:disabled)[b-pomttcjnb0] {
    transform: scale(0.98);
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.15);
}

.search-chip-trigger:disabled[b-pomttcjnb0] {
    background: var(--ts-background);
    border-color: var(--ts-border);
    cursor: not-allowed;
    opacity: 0.6;
    animation: none;
}

/* Search icon in white badge */
.search-chip-trigger .chip-icon-wrapper[b-pomttcjnb0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #FFFFFF;
    border-radius: 8px;
    color: #4F46E5; /* Primary brand color */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.search-chip-trigger .chip-text[b-pomttcjnb0] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #3730A3; /* Dark indigo for readability */
    font-weight: 500;
}

/* Legacy support - keep old class for backwards compatibility */
.mobile-trigger-button[b-pomttcjnb0] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ts-surface);
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius);
    padding: 12px 16px;
    min-height: 44px;
    font-size: 16px;
    color: var(--ts-text-primary);
    cursor: pointer;
    transition: var(--ts-transition);
    box-shadow: var(--ts-shadow-sm);
    text-align: left;
    font-family: inherit;
}

.mobile-trigger-button:hover:not(:disabled)[b-pomttcjnb0] {
    border-color: var(--ts-text-secondary);
    box-shadow: var(--ts-shadow-md);
    background: var(--ts-hover);
}

.mobile-trigger-button:focus[b-pomttcjnb0] {
    outline: none;
    border-color: var(--ts-primary);
    box-shadow: 0 0 0 3px var(--ts-primary-light), var(--ts-shadow-md);
}

.mobile-trigger-button:active:not(:disabled)[b-pomttcjnb0] {
    transform: scale(0.98);
}

.mobile-trigger-button:disabled[b-pomttcjnb0] {
    background: var(--ts-background);
    color: var(--ts-text-secondary);
    cursor: not-allowed;
    opacity: 0.6;
}

.mobile-trigger-button .trigger-text[b-pomttcjnb0] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ts-text-primary);
}

.mobile-trigger-button .trigger-icon[b-pomttcjnb0] {
    flex-shrink: 0;
    margin-left: 8px;
    color: var(--ts-text-secondary);
    transition: transform 150ms;
}

.mobile-trigger-button[aria-expanded="true"] .trigger-icon[b-pomttcjnb0] {
    transform: rotate(180deg);
}

/* Mobile Selection List Container */
/* CRITICAL FIX: Container should NOT scroll - only the options list inside scrolls.
   This ensures search input and action buttons are always visible. */
.mobile-selection-list[b-pomttcjnb0] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden; /* Container doesn't scroll - options list does */
    min-height: 200px;
    /* CRITICAL: Prevent iOS auto-zoom on interactions */
    touch-action: pan-y;
    -webkit-text-size-adjust: 100%; /* Prevent text resizing */
}

/* Mobile Search Container - Fixed at top, doesn't shrink */
.mobile-search-container[b-pomttcjnb0] {
    position: relative;
    flex-shrink: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ts-border);
    background: var(--ts-surface);
}

.mobile-search-input[b-pomttcjnb0] {
    width: 100%;
    padding: 10px 16px 10px 52px;
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius-sm);
    font-size: 16px; /* Prevents iOS zoom */
    color: var(--ts-text-primary);
    background: var(--ts-background);
    transition: var(--ts-transition);
}

.mobile-search-input:focus[b-pomttcjnb0] {
    outline: none;
    border-color: var(--ts-primary);
    box-shadow: 0 0 0 2px var(--ts-primary-light);
    background: var(--ts-surface);
}

.mobile-search-input[b-pomttcjnb0]::placeholder {
    color: var(--ts-text-placeholder);
}

.mobile-search-container .search-icon[b-pomttcjnb0] {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ts-text-secondary);
    pointer-events: none;
}

/* Mobile Options List - This is the ONLY scrollable element */
/* The options list fills remaining space and scrolls independently */
.mobile-options-list[b-pomttcjnb0] {
    flex: 1;
    min-height: 0; /* CRITICAL for flex item scrolling */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    -webkit-overflow-scrolling: touch;
    /* Prevent iOS zoom on double-tap */
    touch-action: pan-y;
}

.mobile-options-list[b-pomttcjnb0]::-webkit-scrollbar {
    width: 6px;
}

.mobile-options-list[b-pomttcjnb0]::-webkit-scrollbar-track {
    background: transparent;
}

.mobile-options-list[b-pomttcjnb0]::-webkit-scrollbar-thumb {
    background: var(--ts-border);
    border-radius: 3px;
}

/* Mobile Option Item */
.mobile-option-item[b-pomttcjnb0] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: var(--ts-radius-sm);
    background: transparent;
    color: var(--ts-text-primary);
    font-size: 16px; /* Prevents iOS zoom */
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: var(--ts-transition);
    margin-bottom: 4px;
    min-height: 44px; /* Touch target minimum */
    /* FIX: Prevent iOS auto-zoom on tap */
    touch-action: pan-x pan-y;
    -webkit-tap-highlight-color: rgba(79, 70, 229, 0.1);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.mobile-option-item:hover[b-pomttcjnb0] {
    background: var(--ts-hover);
}

.mobile-option-item:active[b-pomttcjnb0] {
    transform: scale(0.98);
    background: var(--ts-focus);
}

.mobile-option-item.selected[b-pomttcjnb0] {
    background: var(--ts-primary-light);
    border-color: var(--ts-primary);
    color: var(--ts-primary);
    font-weight: 500;
}

.mobile-option-item .option-text[b-pomttcjnb0] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit; /* CRITICAL FIX: Inherit text color from parent button */
}

/* Checkbox Indicator (for multiple selection) */
.checkbox-indicator[b-pomttcjnb0] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-right: 12px;
    border: 2px solid var(--ts-border);
    border-radius: 4px;
    background: var(--ts-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--ts-transition);
}

.checkbox-indicator.checked[b-pomttcjnb0] {
    background: var(--ts-primary);
    border-color: var(--ts-primary);
}

.mobile-option-item:hover .checkbox-indicator[b-pomttcjnb0] {
    border-color: var(--ts-text-secondary);
}

.mobile-option-item.selected .checkbox-indicator[b-pomttcjnb0] {
    border-color: var(--ts-primary);
}

/* Selected Icon (for single selection) */
.selected-icon[b-pomttcjnb0] {
    flex-shrink: 0;
    margin-left: 12px;
    color: var(--ts-primary);
}

/* ===== SELECTED CHIPS SECTION - HORIZONTAL SCROLL ===== */
/* Inspired by Gmail recipients, SAP Fiori Filter Feedback Bar, Wise Design Chips */

/* Selected Chips Container - Compact horizontal row */
/* Collapses to compact badge when keyboard opens (see MobileBottomSheet.razor.css) */
.mobile-selected-chips[b-pomttcjnb0] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(to right, #F0FDF4, #ECFDF5);
    border-bottom: 1px solid #D1FAE5;
    flex-shrink: 0;
    min-height: 44px;
    max-height: 44px;
    /* Smooth collapse/expand transition */
    transition: all 200ms ease-out;
    /* Prevent iOS auto-zoom */
    touch-action: pan-x pan-y;
}

.mobile-selected-chips .chips-label[b-pomttcjnb0] {
    font-size: 13px; /* Keep small for visual hierarchy */
    font-weight: 600;
    color: #059669;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    padding-right: 4px;
    /* Smooth transition for keyboard collapse state */
    transition: all 200ms ease-out;
}

/* Horizontal scrolling chips container */
.mobile-selected-chips .chips-container[b-pomttcjnb0] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    min-width: 0; /* Allow shrinking */
    padding: 2px 0;
    /* Hide scrollbar but keep functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    -webkit-overflow-scrolling: touch; /* Smooth iOS scroll */
}

.mobile-selected-chips .chips-container[b-pomttcjnb0]::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Individual Chip - Compact version */
.selected-chip[b-pomttcjnb0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #FFFFFF;
    border: 1px solid #6EE7B7;
    border-radius: 14px;
    font-size: 14px; /* Increased slightly - visual only, not focusable input */
    font-weight: 500;
    color: #047857;
    cursor: pointer;
    transition: all 120ms ease;
    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.1);
    flex-shrink: 0; /* Don't shrink chips */
    height: 28px; /* Slightly taller to accommodate font */
    line-height: 1;
    /* CRITICAL: Prevent iOS auto-zoom on tap */
    touch-action: pan-x pan-y;
    -webkit-tap-highlight-color: transparent;
}

.selected-chip:hover[b-pomttcjnb0] {
    background: #FEE2E2;
    border-color: #FCA5A5;
    color: #B91C1C;
}

.selected-chip:hover .chip-remove-icon[b-pomttcjnb0] {
    color: #DC2626;
}

.selected-chip:active[b-pomttcjnb0] {
    transform: scale(0.95);
}

.selected-chip .chip-text[b-pomttcjnb0] {
    max-width: 100px; /* Slightly shorter for horizontal layout */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selected-chip .chip-remove-icon[b-pomttcjnb0] {
    flex-shrink: 0;
    color: #10B981;
    transition: color 120ms ease;
    width: 12px;
    height: 12px;
}

/* Chip Appearance Animation - Faster for horizontal flow */
@keyframes chip-pop-in-b-pomttcjnb0 {
    0% {
        opacity: 0;
        transform: scale(0.7) translateX(-10px);
    }
    60% {
        transform: scale(1.05) translateX(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}

.selected-chip.chip-animate-in[b-pomttcjnb0] {
    animation: chip-pop-in-b-pomttcjnb0 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== SELECTION FLASH ANIMATION ===== */

/* Success flash animation for selected items */
@keyframes selection-flash-b-pomttcjnb0 {
    0% {
        background: var(--ts-primary-light);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    25% {
        background: #DCFCE7;
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.3);
    }
    50% {
        background: #BBF7D0;
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.15);
    }
    100% {
        background: var(--ts-primary-light);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.mobile-option-item.selection-flash[b-pomttcjnb0] {
    animation: selection-flash-b-pomttcjnb0 500ms ease-out;
}

/* Checkbox checkmark animation */
@keyframes checkmark-pop-b-pomttcjnb0 {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.mobile-option-item.selection-flash .checkbox-indicator.checked[b-pomttcjnb0] {
    animation: checkmark-pop-b-pomttcjnb0 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Mobile Actions (footer buttons) - Fixed at bottom, doesn't shrink */
.mobile-actions[b-pomttcjnb0] {
    display: flex;
    flex-shrink: 0;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid var(--ts-border);
    background: var(--ts-surface);
}

.action-button[b-pomttcjnb0] {
    flex: 1;
    padding: 12px 24px;
    border: none;
    border-radius: var(--ts-radius-sm);
    font-size: 16px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: var(--ts-transition);
    min-height: 44px; /* Touch target minimum */
}

.action-button.primary[b-pomttcjnb0] {
    background: var(--ts-primary);
    color: white;
}

.action-button.primary:hover[b-pomttcjnb0] {
    background: var(--ts-primary-hover);
}

.action-button.primary:active[b-pomttcjnb0] {
    transform: scale(0.98);
}

.action-button.secondary[b-pomttcjnb0] {
    background: transparent;
    color: var(--ts-text-secondary);
    border: 1px solid var(--ts-border);
}

.action-button.secondary:hover[b-pomttcjnb0] {
    background: var(--ts-hover);
    border-color: var(--ts-text-secondary);
}

.action-button.secondary:active[b-pomttcjnb0] {
    transform: scale(0.98);
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
    .tom-select .ts-control[b-pomttcjnb0] {
        min-height: 44px;
        font-size: 16px; /* Prevents iOS zoom */
    }

    .tom-select .ts-dropdown[b-pomttcjnb0] {
        max-height: 240px;
    }

    .tom-select .ts-dropdown .option[b-pomttcjnb0] {
        padding: 14px 16px;
        font-size: 16px;
    }

    .tom-select-label[b-pomttcjnb0] {
        font-size: 15px;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root[b-pomttcjnb0] {
        --ts-primary: #6366F1;
        --ts-primary-hover: #818CF8;
        --ts-primary-light: #3730A3;  /* FIX: Lighter indigo for better contrast on dark backgrounds */
        --ts-background: #0F172A;
        --ts-surface: #1E293B;
        --ts-text-primary: #F1F5F9;
        --ts-text-secondary: #94A3B8;
        --ts-text-placeholder: #64748B;
        --ts-border: #334155;
        --ts-hover: #334155;
        --ts-focus: #1E3A8A;
    }

    .tom-select-error[b-pomttcjnb0] {
        background: #7F1D1D;
        border-color: #991B1B;
        color: #FCA5A5;
    }

    .error-icon[b-pomttcjnb0] {
        color: #F87171;
    }

    .retry-button[b-pomttcjnb0] {
        background: #DC2626;
    }

    .retry-button:hover[b-pomttcjnb0] {
        background: #EF4444;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .tom-select .ts-control[b-pomttcjnb0] {
        border-width: 2px;
    }

    .tom-select .ts-dropdown .option.active[b-pomttcjnb0],
    .tom-select .ts-dropdown .option.selected[b-pomttcjnb0] {
        outline: 2px solid var(--ts-primary);
        outline-offset: -2px;
    }

    .mobile-option-item.selected[b-pomttcjnb0] {
        outline: 2px solid var(--ts-primary);
        outline-offset: -2px;
    }

    .mobile-trigger-button:focus[b-pomttcjnb0] {
        outline: 2px solid var(--ts-primary);
        outline-offset: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .tom-select .ts-control[b-pomttcjnb0],
    .tom-select .ts-dropdown .option[b-pomttcjnb0],
    .loading-spinner[b-pomttcjnb0],
    .mobile-trigger-button[b-pomttcjnb0],
    .search-chip-trigger[b-pomttcjnb0],
    .mobile-option-item[b-pomttcjnb0],
    .action-button[b-pomttcjnb0] {
        animation: none;
        transition: none;
    }

    .tom-select .ts-dropdown[b-pomttcjnb0] {
        animation: none;
    }

    .mobile-trigger-button[aria-expanded="true"] .trigger-icon[b-pomttcjnb0] {
        transform: none;
    }
}

/* Focus visible (keyboard navigation) */
.tom-select .ts-dropdown .option:focus-visible[b-pomttcjnb0] {
    outline: 2px solid var(--ts-primary);
    outline-offset: -2px;
}

.mobile-option-item:focus-visible[b-pomttcjnb0] {
    outline: 2px solid var(--ts-primary);
    outline-offset: -2px;
}

.mobile-trigger-button:focus-visible[b-pomttcjnb0] {
    outline: 2px solid var(--ts-primary);
    outline-offset: 2px;
}

.action-button:focus-visible[b-pomttcjnb0] {
    outline: 2px solid var(--ts-primary);
    outline-offset: 2px;
}

/* ===== Parsed Result Styles ===== */

.parsed-result-loading[b-pomttcjnb0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8ecf8 100%);
    border-bottom: 1px solid #e2e8f0;
    color: #6366f1;
    font-size: 14px;
}

.loading-spinner-small[b-pomttcjnb0] {
    width: 16px;
    height: 16px;
    border: 2px solid #e2e8f0;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin-b-pomttcjnb0 0.8s linear infinite;
}

.parsed-result-item[b-pomttcjnb0] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-bottom: 2px solid #10b981;
    cursor: pointer;
    transition: all 0.2s ease;
}

.parsed-result-item:hover[b-pomttcjnb0],
.parsed-result-item:focus[b-pomttcjnb0] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    outline: none;
}

.parsed-result-item:active[b-pomttcjnb0] {
    transform: scale(0.98);
}

.parsed-result-icon[b-pomttcjnb0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #10b981;
    border-radius: 8px;
    color: white;
    flex-shrink: 0;
}

.parsed-result-content[b-pomttcjnb0] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.parsed-result-name[b-pomttcjnb0] {
    font-weight: 600;
    font-size: 15px;
    color: #064e3b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.parsed-result-grams[b-pomttcjnb0] {
    font-size: 14px;
    font-weight: 500;
    color: #047857;
}

.parsed-result-calories[b-pomttcjnb0] {
    font-size: 13px;
    color: #6b7280;
    margin-left: 4px;
}

.parsed-result-badge[b-pomttcjnb0] {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background: #10b981;
    border-radius: 20px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ===== Desktop TomSelect Parsed Result Option ===== */
/* Styles for the special parsed result option in TomSelect dropdown */
/* Note: Option ordering is done via DOM manipulation in JS, not CSS order property */

.ts-dropdown .ts-parsed-result-option[b-pomttcjnb0],
.ts-dropdown-content .ts-parsed-result-option[b-pomttcjnb0] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
    border-left: 4px solid #10b981 !important;
    font-weight: 600 !important;
    color: #064e3b !important;
    padding-left: 12px !important;
    position: relative !important;
    /* Separator line below parsed option */
    border-bottom: 2px solid #10b981 !important;
    margin-bottom: 4px !important;
}

.ts-dropdown .ts-parsed-result-option:hover[b-pomttcjnb0],
.ts-dropdown-content .ts-parsed-result-option:hover[b-pomttcjnb0],
.ts-dropdown .ts-parsed-result-option.active[b-pomttcjnb0],
.ts-dropdown-content .ts-parsed-result-option.active[b-pomttcjnb0] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
    color: #064e3b !important;
}
/* /Components/Shared/VoiceRecorderButton.razor.rz.scp.css */
/* VoiceRecorderButton.razor.css */

.voice-mic-btn[b-f8jo2vb6k6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--fs-text-secondary, #555);
    background: var(--fs-bg-secondary, #f0f0f0);
    touch-action: manipulation;
}

.voice-mic-btn:hover:not(:disabled)[b-f8jo2vb6k6] {
    background: var(--fs-bg-hover, #e0e0e0);
    color: var(--fs-text-primary, #333);
}

.voice-mic-btn:disabled[b-f8jo2vb6k6] {
    cursor: not-allowed;
    opacity: 0.7;
}

/* Compact mode (search bar icon) — self-stretches to match sibling height */
.voice-mic-compact[b-f8jo2vb6k6] {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    align-self: stretch;
    font-size: 1rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
}

/* Full mode (QuickAddFood tab) */
.voice-mic-large[b-f8jo2vb6k6] {
    width: 80px;
    height: 80px;
    font-size: 1.5rem;
}

/* Recording state */
.voice-mic-btn.recording[b-f8jo2vb6k6] {
    background: #dc3545;
    color: #fff;
    animation: voice-pulse-b-f8jo2vb6k6 1.5s ease-in-out infinite;
}

.voice-mic-btn.recording:hover:not(:disabled)[b-f8jo2vb6k6] {
    background: #c82333;
    color: #fff;
}

/* Processing state */
.voice-mic-btn.processing[b-f8jo2vb6k6] {
    background: var(--fs-bg-secondary, #f0f0f0);
    color: var(--fs-text-muted, #888);
}

/* Success state */
.voice-mic-btn.success[b-f8jo2vb6k6] {
    background: #28a745;
    color: #fff;
}

.voice-mic-btn.success:hover:not(:disabled)[b-f8jo2vb6k6] {
    background: #218838;
    color: #fff;
}

/* Pulse animation */
@keyframes voice-pulse-b-f8jo2vb6k6 {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.5);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

/* Keyboard focus indicator (WCAG 2.4.7) */
.voice-mic-btn:focus-visible[b-f8jo2vb6k6] {
    outline: 3px solid var(--fs-primary, #3B82F6);
    outline-offset: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .voice-mic-btn.recording[b-f8jo2vb6k6] {
        animation: none;
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.5);
    }
}

/* Touch devices: prevent sticky hover */
@media (hover: none) {
    .voice-mic-btn:hover:not(:disabled)[b-f8jo2vb6k6] {
        background: var(--fs-bg-secondary, #f0f0f0);
        color: var(--fs-text-secondary, #555);
    }

    .voice-mic-btn.recording:hover:not(:disabled)[b-f8jo2vb6k6] {
        background: #dc3545;
        color: #fff;
    }

    .voice-mic-btn.success:hover:not(:disabled)[b-f8jo2vb6k6] {
        background: #28a745;
        color: #fff;
    }
}

/* Full mode layout */
.voice-recorder-full[b-f8jo2vb6k6] {
    text-align: center;
    padding: 2rem 1rem;
}

.voice-recorder-center[b-f8jo2vb6k6] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.voice-state-text[b-f8jo2vb6k6] {
    font-size: 0.9rem;
    color: var(--fs-text-secondary, #666);
}

.voice-success-text[b-f8jo2vb6k6] {
    color: #28a745;
    font-weight: 500;
}
/* /Components/TopNavBar.razor.rz.scp.css */
/* Enhanced Brand Navigation */
.enhanced-brand-link[b-yiesko53ih] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: #ffffff;
    font-weight: 600;
    font-size: 1.125rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    margin-right: auto;
}

.enhanced-brand-link:hover[b-yiesko53ih] {
    color: #ffffff;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.enhanced-brand-link:focus[b-yiesko53ih] {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

.brand-home-icon[b-yiesko53ih] {
    opacity: 0;
    transform: translateX(-4px);
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    stroke: currentColor;
    flex-shrink: 0;
}

.enhanced-brand-link:hover .brand-home-icon[b-yiesko53ih] {
    opacity: 1;
    transform: translateX(0);
}

.brand-text[b-yiesko53ih] {
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.enhanced-brand-link:hover .brand-text[b-yiesko53ih] {
    transform: translateX(2px);
}

/* Mobile adjustments for brand link */
@media (max-width: 575.98px) {
    .enhanced-brand-link[b-yiesko53ih] {
        font-size: 1rem;
        padding: 0.375rem 0.5rem;
    }
    
    .brand-home-icon[b-yiesko53ih] {
        width: 16px;
        height: 16px;
    }
}

/* Mobile Navigation Fixes */
.fixed-top-nav[b-yiesko53ih] {
    position: relative;
    z-index: 1050;
}

/* Custom hamburger button styling */
.custom-toggler[b-yiesko53ih] {
    border: none;
    padding: 4px 8px;
    background: transparent;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.custom-toggler:focus[b-yiesko53ih] {
    box-shadow: none;
    outline: 2px solid rgba(255, 255, 255, 0.3);
}

.custom-toggler .navbar-toggler-icon[b-yiesko53ih] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    width: 1.5em;
    height: 1.5em;
}

.custom-toggler:hover[b-yiesko53ih] {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Mobile navigation menu styling */
@media (max-width: 991.98px) {
    .navbar-collapse[b-yiesko53ih] {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #f08a12;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 1040;
        margin: 0;
        padding: 0;
        transition: all 0.3s ease;
        transform: translateY(-10px);
        opacity: 0;
        visibility: hidden;
    }

    .navbar-collapse.show[b-yiesko53ih] {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .mobile-nav-menu[b-yiesko53ih] {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 1rem 0;
    }

    .mobile-nav-item[b-yiesko53ih] {
        color: #ffffff !important;
        padding: 0.75rem 1.5rem !important;
        font-weight: 500;
        font-size: 0.9rem;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.2s ease;
        text-decoration: none;
        display: block;
    }

    .mobile-nav-item:last-child[b-yiesko53ih] {
        border-bottom: none;
    }

    .mobile-nav-item:hover[b-yiesko53ih] {
        background-color: rgba(255, 255, 255, 0.1);
        color: #ffffff !important;
        text-decoration: none;
        padding-left: 2rem !important;
    }

    .mobile-nav-item:active[b-yiesko53ih] {
        background-color: rgba(255, 255, 255, 0.2);
    }

    /* Mobile navigation overlay */
    .mobile-nav-overlay[b-yiesko53ih] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1030;
        backdrop-filter: blur(2px);
    }
}

/* Desktop styling remains unchanged */
@media (min-width: 992px) {
    .navbar-collapse[b-yiesko53ih] {
        display: flex !important;
    }

    .mobile-nav-overlay[b-yiesko53ih] {
        display: none;
    }

    .nav-link[b-yiesko53ih] {
        color: #ffffff !important;
        margin-right: 10px;
        transition: color 0.3s ease;
    }

    .nav-link:hover[b-yiesko53ih] {
        color: rgba(255, 255, 255, 0.8) !important;
    }
}

/* Fix for mobile layout issues */
@media (max-width: 575.98px) {
    .container-fluid[b-yiesko53ih] {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .mobile-nav-item[b-yiesko53ih] {
        font-size: 1rem;
        padding: 1rem 1.5rem !important;
    }
}

/* Animation improvements */
.navbar-collapse[b-yiesko53ih] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav-item[b-yiesko53ih] {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure proper z-index stacking */
.navbar[b-yiesko53ih] {
    z-index: 1050;
}

.navbar-collapse[b-yiesko53ih] {
    z-index: 1040;
}

/* Fix for profile button positioning */
.d-flex.align-items-center[b-yiesko53ih] {
    z-index: 1051;
    position: relative;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .navbar-collapse[b-yiesko53ih],
    .mobile-nav-item[b-yiesko53ih],
    .custom-toggler[b-yiesko53ih] {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .mobile-nav-item[b-yiesko53ih] {
        border-bottom: 2px solid #ffffff;
    }

    .custom-toggler:focus[b-yiesko53ih] {
        outline: 3px solid #ffffff;
    }
}

/* Prevent body scroll when mobile menu is open */
:global(body.mobile-nav-open)[b-yiesko53ih] {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* Focus management for accessibility */
.mobile-nav-item:focus[b-yiesko53ih] {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    background-color: rgba(255, 255, 255, 0.2);
}

/* Smooth transitions for better UX */
.navbar-collapse[b-yiesko53ih] {
    will-change: transform, opacity;
}

.mobile-nav-item[b-yiesko53ih] {
    will-change: background-color, padding-left;
}

/* Fix for iOS Safari viewport issues */
@supports (-webkit-touch-callout: none) {
    .mobile-nav-overlay[b-yiesko53ih] {
        height: -webkit-fill-available;
    }
}
/* /Components/TrackerComparisonAnimation.razor.rz.scp.css */
/* ==========================================================================
   TrackerComparisonAnimation - Comparison between Trackers and Portion Pilot
   Shows: Tedious guess/log/adjust loop vs Quick pick/answer/done
   ========================================================================== */

.tracker-comparison[b-p54jp3f6ii] {
    padding: 2rem 1rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.tracker-comparison.visible[b-p54jp3f6ii] {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Title Section
   ========================================================================== */

.comparison-title[b-p54jp3f6ii] {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.comparison-subtitle[b-p54jp3f6ii] {
    text-align: center;
    font-size: 1rem;
    color: #718096;
    font-style: italic;
    margin-bottom: 2rem;
}

/* ==========================================================================
   Main Container - Side by Side Layout
   ========================================================================== */

.comparison-container[b-p54jp3f6ii] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

/* ==========================================================================
   Panel Styles
   ========================================================================== */

.comparison-panel[b-p54jp3f6ii] {
    flex: 1;
    max-width: 380px;
    background: #ffffff;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid #e2e8f0;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.comparison-panel.active[b-p54jp3f6ii] {
    opacity: 1;
    transform: scale(1);
}

/* Tracker panel - subtle red tint */
.tracker-panel[b-p54jp3f6ii] {
    border-color: rgba(229, 62, 62, 0.2);
    background: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%);
}

/* Portion Pilot panel - subtle green tint */
.portion-pilot-panel[b-p54jp3f6ii] {
    border-color: rgba(72, 187, 120, 0.3);
    background: linear-gradient(135deg, #ffffff 0%, #f0fff4 100%);
}

/* ==========================================================================
   Panel Headers
   ========================================================================== */

.panel-header[b-p54jp3f6ii] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f0f4f8;
}

.tracker-header[b-p54jp3f6ii] {
    border-bottom-color: rgba(229, 62, 62, 0.2);
}

.pilot-header[b-p54jp3f6ii] {
    border-bottom-color: rgba(72, 187, 120, 0.3);
}

.header-icon[b-p54jp3f6ii] {
    font-size: 1.25rem;
}

.panel-header h4[b-p54jp3f6ii] {
    font-size: 1rem;
    font-weight: 600;
    color: #2d3748;
    margin: 0;
}

/* ==========================================================================
   Steps Container
   ========================================================================== */

.steps-container[b-p54jp3f6ii] {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.step-item[b-p54jp3f6ii] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease-out;
}

.step-item.visible[b-p54jp3f6ii] {
    opacity: 1;
    transform: translateY(0);
}

.step-icon[b-p54jp3f6ii] {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.step-text[b-p54jp3f6ii] {
    font-size: 0.875rem;
    color: #4a5568;
}

.step-arrow[b-p54jp3f6ii] {
    text-align: center;
    color: #a0aec0;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    line-height: 1;
    padding: 0.125rem 0;
}

.step-arrow.visible[b-p54jp3f6ii] {
    opacity: 1;
}

/* ==========================================================================
   Tracker Step Styles
   ========================================================================== */

.step-guess[b-p54jp3f6ii] {
    background: rgba(237, 137, 54, 0.1);
}

.step-guess .step-text[b-p54jp3f6ii] {
    color: #c05621;
}

.step-log[b-p54jp3f6ii] {
    background: rgba(160, 174, 192, 0.15);
}

.step-log .step-text[b-p54jp3f6ii] {
    color: #718096;
}

.step-error[b-p54jp3f6ii] {
    background: rgba(229, 62, 62, 0.1);
}

.step-error .step-text[b-p54jp3f6ii] {
    color: #c53030;
    font-weight: 500;
}

.step-repeat[b-p54jp3f6ii] {
    background: rgba(160, 174, 192, 0.1);
}

.step-repeat .step-text[b-p54jp3f6ii] {
    color: #718096;
    font-style: italic;
}

/* ==========================================================================
   Portion Pilot Step Styles
   ========================================================================== */

.step-pick[b-p54jp3f6ii] {
    background: rgba(66, 153, 225, 0.1);
}

.step-pick .step-text[b-p54jp3f6ii] {
    color: #2b6cb0;
}

.step-calculating[b-p54jp3f6ii] {
    background: linear-gradient(135deg, rgba(240, 138, 18, 0.15) 0%, rgba(237, 137, 54, 0.1) 100%);
    border: 1px dashed rgba(240, 138, 18, 0.4);
    margin: 0.5rem 0;
}

.step-calculating .step-icon[b-p54jp3f6ii] {
    animation: pulse-b-p54jp3f6ii 0.8s ease-in-out infinite;
}

.step-calculating .step-text[b-p54jp3f6ii] {
    color: #c05621;
    font-weight: 500;
    font-style: italic;
}

@keyframes pulse-b-p54jp3f6ii {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.step-result[b-p54jp3f6ii] {
    background: rgba(72, 187, 120, 0.15);
    border-left: 3px solid #48bb78;
}

.step-result .step-text[b-p54jp3f6ii] {
    color: #276749;
    font-weight: 600;
}

.step-done[b-p54jp3f6ii] {
    background: linear-gradient(135deg, rgba(72, 187, 120, 0.2) 0%, rgba(56, 178, 172, 0.2) 100%);
    border: 2px solid rgba(72, 187, 120, 0.4);
}

.step-done .step-icon[b-p54jp3f6ii] {
    font-size: 1.25rem;
}

.step-done .step-text[b-p54jp3f6ii] {
    color: #276749;
    font-weight: 700;
    font-size: 0.95rem;
}

/* ==========================================================================
   Panel Footers
   ========================================================================== */

.panel-footer[b-p54jp3f6ii] {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f0f4f8;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease-out;
}

.panel-footer.visible[b-p54jp3f6ii] {
    opacity: 1;
    transform: translateY(0);
}

.footer-text[b-p54jp3f6ii] {
    font-size: 0.85rem;
    font-weight: 600;
}

.tracker-footer .footer-text[b-p54jp3f6ii] {
    color: #c53030;
}

.pilot-footer .footer-text[b-p54jp3f6ii] {
    color: #276749;
}

.footer-time[b-p54jp3f6ii] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.tracker-footer .footer-time[b-p54jp3f6ii] {
    color: #9b2c2c;
}

.pilot-footer .footer-time[b-p54jp3f6ii] {
    color: #22543d;
}

/* ==========================================================================
   Divider
   ========================================================================== */

.comparison-divider[b-p54jp3f6ii] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    align-self: center;
}

.divider-text[b-p54jp3f6ii] {
    font-size: 1rem;
    font-weight: 700;
    color: #a0aec0;
    padding: 0.5rem;
}

/* ==========================================================================
   Responsive: Tablet
   ========================================================================== */

@media (max-width: 800px) {
    .comparison-container[b-p54jp3f6ii] {
        gap: 0.75rem;
    }

    .comparison-panel[b-p54jp3f6ii] {
        padding: 1.25rem;
    }

    .steps-container[b-p54jp3f6ii] {
        min-height: 180px;
    }

    .step-text[b-p54jp3f6ii] {
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   Responsive: Mobile - Stack Vertically
   ========================================================================== */

@media (max-width: 650px) {
    .comparison-container[b-p54jp3f6ii] {
        flex-direction: column;
        align-items: center;
    }

    .comparison-panel[b-p54jp3f6ii] {
        max-width: 100%;
        width: 100%;
    }

    .comparison-divider[b-p54jp3f6ii] {
        padding: 0.5rem 0;
    }

    .divider-text[b-p54jp3f6ii] {
        font-size: 0.875rem;
    }

    .steps-container[b-p54jp3f6ii] {
        min-height: auto;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .tracker-comparison[b-p54jp3f6ii],
    .comparison-panel[b-p54jp3f6ii],
    .step-item[b-p54jp3f6ii],
    .step-arrow[b-p54jp3f6ii],
    .panel-footer[b-p54jp3f6ii] {
        transition: none;
    }

    .comparison-panel.active[b-p54jp3f6ii],
    .step-item.visible[b-p54jp3f6ii],
    .step-arrow.visible[b-p54jp3f6ii],
    .panel-footer.visible[b-p54jp3f6ii] {
        opacity: 1;
        transform: none;
    }

    .step-calculating .step-icon[b-p54jp3f6ii] {
        animation: none;
    }
}
/* /Components/UserJourney.razor.rz.scp.css */
/* ==========================================================================
   User Journey Section - Clean Phase Cards Design
   Based on SaaS best practices: simple cards, no connecting lines, clear hierarchy
   ========================================================================== */

.journey-section[b-lb4u3pie9i] {
    padding: 2rem 1rem;
    text-align: center;
}

.journey-title[b-lb4u3pie9i] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

.journey-subtitle[b-lb4u3pie9i] {
    font-size: 1rem;
    color: #64748b;
    margin-bottom: 2rem;
}

/* Phase cards container - horizontal on desktop, stack on mobile */
.journey-phases[b-lb4u3pie9i] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0 auto;
}

/* Individual phase card */
.phase-card[b-lb4u3pie9i] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
    flex: 1;
    min-width: 240px;
    max-width: 280px;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.phase-card:hover[b-lb4u3pie9i] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Phase header with number and info */
.phase-header[b-lb4u3pie9i] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.phase-number[b-lb4u3pie9i] {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #f08a12 0%, #e67300 100%);
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(240, 138, 18, 0.3);
}

.phase-info[b-lb4u3pie9i] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.phase-name[b-lb4u3pie9i] {
    font-size: 1rem;
    font-weight: 600;
    color: #1a202c;
}

.phase-time[b-lb4u3pie9i] {
    font-size: 0.75rem;
    color: #64748b;
}

/* Steps within each phase */
.phase-steps[b-lb4u3pie9i] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.step-item[b-lb4u3pie9i] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #4a5568;
    line-height: 1.4;
}

.step-bullet[b-lb4u3pie9i] {
    color: #f08a12;
    font-weight: 600;
    flex-shrink: 0;
}

.step-item strong[b-lb4u3pie9i] {
    color: #2d3748;
}

/* ==========================================================================
   Tablet Responsive
   ========================================================================== */
@media (max-width: 768px) {
    .journey-section[b-lb4u3pie9i] {
        padding: 1.5rem 1rem;
    }

    .journey-title[b-lb4u3pie9i] {
        font-size: 1.5rem;
    }

    .journey-subtitle[b-lb4u3pie9i] {
        margin-bottom: 1.5rem;
    }

    .journey-phases[b-lb4u3pie9i] {
        gap: 0.75rem;
    }

    .phase-card[b-lb4u3pie9i] {
        min-width: 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */
@media (max-width: 576px) {
    .journey-section[b-lb4u3pie9i] {
        padding: 1.25rem 0.75rem;
    }

    .journey-title[b-lb4u3pie9i] {
        font-size: 1.35rem;
    }

    .journey-subtitle[b-lb4u3pie9i] {
        font-size: 0.9rem;
    }

    .phase-card[b-lb4u3pie9i] {
        padding: 1rem;
    }

    .phase-number[b-lb4u3pie9i] {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .phase-name[b-lb4u3pie9i] {
        font-size: 0.95rem;
    }

    .step-item[b-lb4u3pie9i] {
        font-size: 0.825rem;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .phase-card[b-lb4u3pie9i] {
        transition: none;
    }

    .phase-card:hover[b-lb4u3pie9i] {
        transform: none;
    }
}
/* /Components/WeightCheckIn.razor.rz.scp.css */
.form-control[b-x7wq8sg17x] {
    background-color: #fff;
    border-color: #dee2e6;
}

.form-control[b-x7wq8sg17x]::placeholder {
    color: #6c757d;
    opacity: 0.8;
}

.form-control:focus[b-x7wq8sg17x] {
    box-shadow: none;
    border-color: #0d6efd;
}

.btn-outline-secondary[b-x7wq8sg17x] {
    background-color: #fff;
    border-color: #dee2e6;
}

.btn-outline-secondary:hover[b-x7wq8sg17x] {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #6c757d;
}
/* /Components/WeightProgressVisualization.razor.rz.scp.css */
.weight-progress-container[b-qfh4d43oxm] {
    max-width: 900px;
    margin: 0 auto;
}

[b-qfh4d43oxm] .card {
    transition: all 0.3s ease;
    border-width: 2px;
}

[b-qfh4d43oxm] .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.timeline-container[b-qfh4d43oxm] {
    position: relative;
    padding: 20px 0;
    margin: 20px 0;
}

.timeline-track[b-qfh4d43oxm] {
    height: 4px;
    background-color: #e9ecef;
    border-radius: 2px;
    position: relative;
}

.timeline-progress[b-qfh4d43oxm] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: #198754;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.timeline-markers[b-qfh4d43oxm] {
    position: relative;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

.marker[b-qfh4d43oxm] {
    font-size: 0.75rem;
    color: #6c757d;
}

.checkin-points[b-qfh4d43oxm] {
    position: absolute;
    top: -4px; /* Align with the timeline track */
    left: 0;
    right: 0;
    height: 12px; /* Match dot height */
}



.checkin-dot[b-qfh4d43oxm]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px); /* Increased spacing from dot */
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 0.75rem;
    background: rgba(33, 37, 41, 0.95); /* Slightly more opaque */
    color: white;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 1070;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}


.checkin-dot:hover[b-qfh4d43oxm]::before {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
}

.checkin-dot[b-qfh4d43oxm] {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #198754;
    border-radius: 50%;
    /* Remove top property since we positioned the parent correctly */
    transform: translateX(-50%); /* Center the dot on its position */
    transition: transform 0.2s ease;
    cursor: help;
}

.checkin-dot[b-qfh4d43oxm]::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px); /* Positioned closer to dot */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px; /* Slightly smaller arrow */
    border-style: solid;
    border-color: rgba(33, 37, 41, 0.95) transparent transparent transparent;
    opacity: 0;
    transition: all 0.2s ease;
    pointer-events: none;
}

.checkin-dot:hover[b-qfh4d43oxm]::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
}


.frequency-stats .h5[b-qfh4d43oxm] {
    color: #198754;
}

.checkin-dot-sample[b-qfh4d43oxm] {
    width: 12px;
    height: 12px;
    background-color: #198754;
    border-radius: 50%;
    display: inline-block;
}


.progress-message-container[b-qfh4d43oxm] {
    margin: 2rem 0 0; 
}



.progress-message-container .alert[b-qfh4d43oxm] {
    margin-bottom: 0;
    border-left-width: 4px;
    padding: 1rem 1.25rem;
    font-size: 1rem;
}


.progress-message-container .alert-info[b-qfh4d43oxm] {
    background-color: rgba(13, 202, 240, 0.15);
    color: #055160;
}

.progress-message-container .alert-success[b-qfh4d43oxm] {
    background-color: rgba(25, 135, 84, 0.15);
    color: #0a3622;
}

.progress-message-content[b-qfh4d43oxm] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 0.5rem;
}


.progress-message-content i[b-qfh4d43oxm] {
    flex-shrink: 0;
    font-size: 1.1rem;
    margin-right: 0.75rem;  /* Add consistent spacing after icon */
}

/* Ensure responsive behavior */
@media (max-width: 768px) {
    .progress-message-container .alert[b-qfh4d43oxm] {
        padding: 0.875rem 1rem;
    }
}

[b-qfh4d43oxm] .card {
    transition: all 0.3s ease;
    border-width: 2px;
}

[b-qfh4d43oxm] .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* /Components/WeightTrendChart.razor.rz.scp.css */
.chart-container[b-biskvy8043] {
    width: 100%;
    min-height: 400px;
}