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

/* _content/Nutrition.Web.External.UI.Interactive/Components/Authentication/Login.razor.rz.scp.css */
/* Login Component - Minimalist Modern Design */

/* CSS Variables for consistency */
:root[b-w93cbe8xk0] {
    --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-w93cbe8xk0] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
}

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

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

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

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

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

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

.header-link[b-w93cbe8xk0] {
    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-w93cbe8xk0] {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

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

.header-link.active[b-w93cbe8xk0]::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-w93cbe8xk0] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

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

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

/* Login Title */
.login-title[b-w93cbe8xk0] {
    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-w93cbe8xk0] {
    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-w93cbe8xk0 300ms ease-out;
}

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

.alert-close[b-w93cbe8xk0] {
    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-w93cbe8xk0] {
    opacity: 0.7;
}

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

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

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

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

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

.form-input[b-w93cbe8xk0] {
    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-w93cbe8xk0]::placeholder {
    color: var(--text-muted);
}

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

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

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

/* Password Toggle */
.password-toggle[b-w93cbe8xk0] {
    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-w93cbe8xk0] {
    color: var(--brand-orange);
}

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

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

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

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

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

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

.checkbox-input[b-w93cbe8xk0] {
    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-w93cbe8xk0] {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
}

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

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

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

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

/* Login Button */
.btn-login[b-w93cbe8xk0] {
    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-w93cbe8xk0] {
    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-w93cbe8xk0] {
    transform: translateY(0);
}

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

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

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

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

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

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

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

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

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-w93cbe8xk0],
    *[b-w93cbe8xk0]::before,
    *[b-w93cbe8xk0]::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-w93cbe8xk0] {
        --background-primary: #1a1a1a;
        --background-secondary: #2a2a2a;
        --text-primary: #f9fafb;
        --text-secondary: #d1d5db;
        --border-color: #374151;
    }
    
    .login-wrapper[b-w93cbe8xk0] {
        background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    }
    
    .login-card[b-w93cbe8xk0] {
        background: #2a2a2a;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    }
    
    .form-input[b-w93cbe8xk0] {
        background: #1a1a1a;
        color: var(--text-primary);
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/CustomFoodCreationModal.razor.rz.scp.css */
/* CustomFoodCreationModal.razor.css */
.modal-overlay[b-mej1412mg4] {
    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-mej1412mg4 0.2s ease-out;
}

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

.modal-container[b-mej1412mg4] {
    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-mej1412mg4 0.3s ease-out;
}

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

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

.modal-header[b-mej1412mg4] {
    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-mej1412mg4] {
    margin: 0;
    color: #2d3748;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.step-number[b-mej1412mg4] {
    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-mej1412mg4] {
    background: #f08a12;
    color: white;
    box-shadow: 0 2px 4px rgba(240, 138, 18, 0.3);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Action Buttons */
.modal-actions[b-mej1412mg4] {
    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-mej1412mg4] {
    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-mej1412mg4] {
    color: #2d3748;
}

.btn-continue[b-mej1412mg4] {
    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-mej1412mg4] {
    background: #d97910;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(240, 138, 18, 0.3);
}

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

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

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

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

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

/* Authentication Modal Styles */
.auth-modal-container[b-mej1412mg4] {
    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-mej1412mg4 0.3s ease-out;
}

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

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

.auth-modal-header h2[b-mej1412mg4] {
    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-mej1412mg4] {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Modal Structure */
.modal-overlay[b-0eyw5x0s68] {
    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-0eyw5x0s68] {
    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-0eyw5x0s68] {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow-y: auto;
}

/* Header */
.modal-header[b-0eyw5x0s68] {
    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-0eyw5x0s68] {
    font-size: 1.125rem;
    font-weight: 500;
    color: #1f2937;
    margin: 0;
}

.close-button[b-0eyw5x0s68] {
    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-0eyw5x0s68] {
    background-color: #f3f4f6;
    color: #1f2937;
}

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

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

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

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

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

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

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

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

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

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

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

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

.nutrient-row[b-0eyw5x0s68] {
    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-0eyw5x0s68] {
    border-bottom: none;
}

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

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

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

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

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

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

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

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

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

/* Footer */
.modal-footer[b-0eyw5x0s68] {
    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-0eyw5x0s68] {
    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-0eyw5x0s68] {
    background-color: #f3f4f6;
    color: #1f2937;
}

.btn-add[b-0eyw5x0s68] {
    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-0eyw5x0s68] {
    background: #2563eb;
    transform: translateY(-1px);
}

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

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

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

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

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

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

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

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

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

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

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

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

.modal-content[b-0eyw5x0s68]::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 3px;
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/CustomFoodList.razor.rz.scp.css */
/* CustomFoodsList.razor.css */
.custom-foods-container[b-9qgdfse3xn] {
    margin-bottom: 1.5rem;
}

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

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

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

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

.quick-access-item[b-9qgdfse3xn] {
    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-9qgdfse3xn] {
    background-color: #ffe0b2;
}

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

.quick-access-more[b-9qgdfse3xn] {
    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-9qgdfse3xn] {
    background-color: #e9ecef;
}

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

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

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

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

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

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

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

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

/* Custom Foods Badge */
.custom-foods-badge[b-9qgdfse3xn] {
    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-9qgdfse3xn] {
        grid-template-columns: 1fr;
    }

    .food-card[b-9qgdfse3xn] {
        padding: 0.75rem;
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/CustomFoodNutritionForm.razor.rz.scp.css */
/* CustomFoodNutritionForm.razor.css */

h3[b-kjh1jqy6a6], h4[b-kjh1jqy6a6] {
    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-kjh1jqy6a6] .mud-input {
    margin-bottom: 0.5rem;
}

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

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

    [b-kjh1jqy6a6] .mud-grid-item {
        padding: 0.5rem;
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/DietQuestionnaire.razor.rz.scp.css */
/* ============================================
   Form Input Sizing - Match width to expected input
   ============================================ */

/* Numeric input groups should be compact but readable */
.input-group[b-squ1sqnr7s] {
    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-squ1sqnr7s] {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
}

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

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

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

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

.btn-outline-primary:hover[b-squ1sqnr7s], .btn-outline-primary:focus[b-squ1sqnr7s] {
    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-squ1sqnr7s] {
    animation: btn-select-bounce-b-squ1sqnr7s 0.12s ease-out;
    transform: scale(0.95);
}

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

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

/* CardSelect - Visual card grid for answer selection */
.card-select-container[b-squ1sqnr7s] {
    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-squ1sqnr7s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    min-height: 120px;
    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;
}

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

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

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

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

/* Ripple effect pseudo-element */
.card-select-option[b-squ1sqnr7s]::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-squ1sqnr7s]::after {
    transform: scale(2.5);
    opacity: 1;
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}

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

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

.card-select-label[b-squ1sqnr7s] {
    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-squ1sqnr7s] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .card-select-option[b-squ1sqnr7s] {
        padding: 1rem 0.75rem;
        min-height: 100px;
    }

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

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

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

.progress-header[b-squ1sqnr7s] {
    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-squ1sqnr7s] {
    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-squ1sqnr7s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.75rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.stage-icon[b-squ1sqnr7s] {
    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-squ1sqnr7s] {
    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-squ1sqnr7s] {
    background: #e9ecef;
    color: #adb5bd;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Pulse animation for active stage */
@keyframes pulse-glow-b-squ1sqnr7s {
    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-squ1sqnr7s] {
        gap: 0;
    }

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

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

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

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

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

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

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

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

/* Button selection bounce keyframe */
@keyframes btn-select-bounce-b-squ1sqnr7s {
    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-squ1sqnr7s] {
    width: 100%;
    max-width: 600px; /* Optimal form width per UX best practices */
    margin: 0 auto;
}

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

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

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

.question-content.exiting[b-squ1sqnr7s] {
    animation: question-exit-b-squ1sqnr7s 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-squ1sqnr7s] {
        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-squ1sqnr7s] {
        margin: 0 auto;
        display: block;
    }

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

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

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

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

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

.preset-btn[b-squ1sqnr7s] {
    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-squ1sqnr7s] {
    border-color: #f08a12;
    color: #f08a12;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(240, 138, 18, 0.15);
}

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

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

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

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

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

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

.skip-option-link[b-squ1sqnr7s] {
    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-squ1sqnr7s] {
    color: #f08a12;
    text-decoration: underline;
}

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

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

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

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

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

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

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

.image-card-option[b-squ1sqnr7s] {
    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-squ1sqnr7s] {
    border-color: #f08a12;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(240, 138, 18, 0.2);
}

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

.image-card-option.selected[b-squ1sqnr7s] {
    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-squ1sqnr7s]::before {
    content: '✓';
    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-squ1sqnr7s] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

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

.image-card-visual[b-squ1sqnr7s] {
    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-squ1sqnr7s] {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    text-align: center;
}

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

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

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

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

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

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

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

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

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

    .image-card-option.selected[b-squ1sqnr7s]::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-squ1sqnr7s],
    .btn-outline-primary[b-squ1sqnr7s],
    .question-content[b-squ1sqnr7s],
    .stage-icon[b-squ1sqnr7s],
    .progress-bar-animated[b-squ1sqnr7s],
    .preset-btn[b-squ1sqnr7s],
    .image-card-option[b-squ1sqnr7s] {
        animation: none !important;
        transition: opacity 0.1s ease !important;
    }

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

    .question-content.entering[b-squ1sqnr7s],
    .question-content.exiting[b-squ1sqnr7s] {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/EmailCaptureModal.razor.rz.scp.css */
/* EmailCaptureModal Component Styles */

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

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

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

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

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

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

.input-wrapper .form-control[b-zcuzoxt273] {
    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-zcuzoxt273] {
    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-zcuzoxt273] {
    border-color: var(--bs-danger, #dc3545);
}

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

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

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

/* Typo Suggestion */
.typo-suggestion[b-zcuzoxt273] {
    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-zcuzoxt273] {
    background: none;
    border: none;
    color: var(--bs-primary, #27AE60);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

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

/* Submit Button */
.submit-btn[b-zcuzoxt273] {
    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-zcuzoxt273] {
    background-color: var(--bs-primary-hover, #219150);
    border-color: var(--bs-primary-hover, #219150);
    transform: translateY(-1px);
}

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

/* Trust Signal */
.trust-signal[b-zcuzoxt273] {
    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-zcuzoxt273] {
    color: var(--bs-success, #27AE60);
}

/* Dismiss Link */
.dismiss-link[b-zcuzoxt273] {
    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-zcuzoxt273] {
    color: var(--bs-body-color, #212529);
}

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

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

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

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

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

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

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

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

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

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

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

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

    .submit-btn[b-zcuzoxt273],
    .input-wrapper .form-control[b-zcuzoxt273] {
        transition: none;
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/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 HERO ZONE
   Primary entry point for meal planning
   Visual hierarchy: 80% weight (dominant)
   ============================================ */

[b-vvgjwt9bzs] .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-vvgjwt9bzs] .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-vvgjwt9bzs] .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-vvgjwt9bzs] .search-microcopy i {
    color: var(--fs-accent);
    margin-right: var(--fs-spacing-xs);
}

/* Enhance TomSelect inside hero zone */
[b-vvgjwt9bzs] .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-vvgjwt9bzs] .search-hero-zone .ts-control:focus,
[b-vvgjwt9bzs] .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-vvgjwt9bzs] .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-vvgjwt9bzs] .search-hero-zone {
        padding: var(--fs-spacing-lg);
        margin-bottom: var(--fs-spacing-md);
        border-width: 2px;
    }

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

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

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

[b-vvgjwt9bzs] .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-vvgjwt9bzs] .page-title strong {
    color: var(--fs-primary);
    font-weight: var(--fs-font-weight-bold);
}

/* Card container polish */
[b-vvgjwt9bzs] .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-vvgjwt9bzs] .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-vvgjwt9bzs] .tomselect-wrapper {
    position: relative;
    width: 100%;
    /* TomSelect wrapper styling handled by tomselect-custom.css */
}

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

/* TomSelect focus state enhancement */
[b-vvgjwt9bzs] .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-vvgjwt9bzs] .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-vvgjwt9bzs] .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-vvgjwt9bzs] .custom-food-section {
    margin-top: 1rem;
    text-align: center;
}

/* Custom Food Button - Using accent color */
[b-vvgjwt9bzs] .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-vvgjwt9bzs] .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-vvgjwt9bzs] .custom-food-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(240, 138, 18, 0.2);
}

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

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

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

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

[b-vvgjwt9bzs] .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-vvgjwt9bzs] .custom-food-btn + .tooltip .tooltip-arrow::before {
    border-top-color: #495057;
}


/* Calculate Button Row - Stack button and helper text vertically */
[b-vvgjwt9bzs] .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-vvgjwt9bzs] .btn-calculate,
[b-vvgjwt9bzs] .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-vvgjwt9bzs] .btn-calculate::before,
[b-vvgjwt9bzs] .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-vvgjwt9bzs] .btn-calculate:hover,
[b-vvgjwt9bzs] .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-vvgjwt9bzs] .btn-calculate:hover::before,
[b-vvgjwt9bzs] .calculate-btn:hover::before {
    transform: translateX(100%);
}

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

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

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

/* Excitement Text - subtle call-to-action hint */
[b-vvgjwt9bzs] .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-vvgjwt9bzs] .calculate-button-row p {
    transition: all 0.2s ease;
}

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

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

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

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


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

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

[b-vvgjwt9bzs] .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-vvgjwt9bzs] .quick-add-btn::before {
    content: '+';
    position: absolute;
    left: 0.75rem;
    font-size: 1rem;
    font-weight: bold;
    color: #6c757d;
    transition: color 0.2s ease;
}

[b-vvgjwt9bzs] .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-vvgjwt9bzs] .quick-add-btn:hover::before {
    color: var(--fs-primary);
}

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

/* Serving Grid Styling */
[b-vvgjwt9bzs] .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-vvgjwt9bzs] .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-vvgjwt9bzs] .serving-row:hover {
    background-color: var(--fs-bg-hover);
}

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

[b-vvgjwt9bzs] .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-vvgjwt9bzs] .selected-food-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 4px;
    margin: 0;
    box-shadow: none;
    transition: all 0.15s ease;
    min-height: 34px;
}

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

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

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

/* Food name - compact, left-aligned */
[b-vvgjwt9bzs] .selected-food-item .food-name {
    font-weight: 500;
    color: #374151;
    font-size: 13px;
    flex: 0 1 auto;
    min-width: 80px;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    order: 1;
    padding: 0;
    line-height: 1.3;
}

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

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

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

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

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

/* Serving controls - grouped tightly */
[b-vvgjwt9bzs] .selected-food-item .serving-controls-compact {
    display: flex;
    gap: 4px;
    order: 2;
    flex: 1;
    justify-content: flex-start;
}

/* Select dropdowns - wider for readability */
[b-vvgjwt9bzs] .serving-controls-compact .form-select-sm {
    width: auto;
    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-vvgjwt9bzs] .serving-controls-compact .form-select-sm:hover {
    border-color: #D1D5DB;
    background-color: #F3F4F6;
}

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

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

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

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

/* Loading State - Polished overlay with backdrop blur */
[b-vvgjwt9bzs] .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-vvgjwt9bzs 0.2s ease-out;
}

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

[b-vvgjwt9bzs] .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-vvgjwt9bzs 0.25s ease-out;
}

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

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

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

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

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

/* Mobile Fix for TomSelect Dropdown Visibility */
@media (max-width: 768px) {
    /* CRITICAL: Make TomSelect dropdown visible on mobile */
    [b-vvgjwt9bzs] .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-vvgjwt9bzs] .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-vvgjwt9bzs] .ts-control {
        min-height: 44px !important;
        font-size: 16px !important;
        padding: 8px 12px !important;
    }

    /* Better contrast for selected items */
    [b-vvgjwt9bzs] .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-vvgjwt9bzs] .split-food-selection {
        display: flex !important;
        flex-direction: column !important;
    }

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

    /* Order 2: Calculate button comes immediately after search */
    [b-vvgjwt9bzs] .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-vvgjwt9bzs] .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-vvgjwt9bzs] .selected-foods-display {
        order: 3;
        margin-top: 0;
    }

    /* Ensure button is always visible and prominent on mobile */
    [b-vvgjwt9bzs] .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-vvgjwt9bzs] .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-vvgjwt9bzs] .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-vvgjwt9bzs] .serving-row {
        grid-template-columns: 1fr;
        padding: var(--fs-spacing-md);
    }

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

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

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

    /* Mobile: Selected food item - Compact inline with wrapping */
    [b-vvgjwt9bzs] .selected-food-item {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        padding: 8px 10px;
        background: transparent;
        border: none;
        border-radius: 4px;
        max-width: none;
        min-height: 40px;
    }

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

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

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

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

    /* Mobile: Delete button - always visible, touch-friendly */
    [b-vvgjwt9bzs] .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-vvgjwt9bzs] .btn-remove-food i {
        font-size: 11px;
    }

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

    /* Hide desktop helper text on mobile */
    [b-vvgjwt9bzs] .helper-text-desktop {
        display: none !important;
    }
    
    /* Show and style mobile helper text */
    [b-vvgjwt9bzs] .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-vvgjwt9bzs] .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-vvgjwt9bzs] .btn-calculate:focus-visible,
[b-vvgjwt9bzs] .calculate-btn:focus-visible {
    outline: 3px solid var(--fs-primary);
    outline-offset: 2px;
}

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

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

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

[b-vvgjwt9bzs] .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-vvgjwt9bzs] *,
    [b-vvgjwt9bzs] *::before,
    [b-vvgjwt9bzs] *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

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

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

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

    /* Hide shimmer effect */
    [b-vvgjwt9bzs] .btn-calculate::before,
    [b-vvgjwt9bzs] .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-vvgjwt9bzs] .custom-food-btn:hover {
        transform: none;
    }

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

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

    [b-vvgjwt9bzs] .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-vvgjwt9bzs] .quick-add-btn:hover::before {
        color: #6c757d;
    }

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

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

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

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

    [b-vvgjwt9bzs] .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-vvgjwt9bzs] .minimal-mode-container {
    padding: 0 !important;
}

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

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

/* Card wrapper becomes transparent in minimal mode */
[b-vvgjwt9bzs] .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-vvgjwt9bzs] .minimal-card-body {
    padding: 0 !important;
    background: transparent !important;
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/FoodServingSelections.razor.rz.scp.css */
/* FoodServingSelections Component Styles */

/* Container styles */
.food-serving-container[b-ubpkvuaq0h] {
    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-ubpkvuaq0h] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

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

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

.food-serving-section-title[b-ubpkvuaq0h] {
    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-ubpkvuaq0h] {
    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-ubpkvuaq0h] {
    border-bottom: none;
}

.serving-panel:hover[b-ubpkvuaq0h] {
    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-ubpkvuaq0h] {
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    text-transform: capitalize;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

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

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

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

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

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

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

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

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

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

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

/* Accessibility improvements */
.serving-panel:focus-within[b-ubpkvuaq0h] {
    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-ubpkvuaq0h] {
        border-width: 2px;
    }
    
    .serving-panel[b-ubpkvuaq0h] {
        border-bottom-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .fade-in-delay[b-ubpkvuaq0h],
    .action-button[b-ubpkvuaq0h],
    .food-serving-container[b-ubpkvuaq0h],
    .serving-panel[b-ubpkvuaq0h] {
        animation: none;
        transition: none;
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-487hlzfy6k] {
    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-487hlzfy6k] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/MainPageIntro.razor.rz.scp.css */
.intro-card[b-7jnk2kmb7n] {
    background-color: white;
    border-radius: 1rem;
    padding: 2rem 3rem;
    overflow: hidden;
    transition: all 0.3s ease;
}



/* Video Section Styles */
.video-section[b-7jnk2kmb7n] {
    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-7jnk2kmb7n {
    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-7jnk2kmb7n] {
        animation: none;
    }
    
    .video-container[b-7jnk2kmb7n],
    .intro-video[b-7jnk2kmb7n],
    .video-container[b-7jnk2kmb7n]::before {
        transition: none;
    }
    
    .video-container:hover[b-7jnk2kmb7n] {
        transform: none;
    }
    
    .intro-video:hover[b-7jnk2kmb7n] {
        transform: none;
    }
}

.video-container[b-7jnk2kmb7n] {
    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-7jnk2kmb7n]::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-7jnk2kmb7n]::before {
    opacity: 1;
}

.video-container:hover[b-7jnk2kmb7n] {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.video-container .ratio[b-7jnk2kmb7n] {
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: #000;
    position: relative;
    z-index: 2;
}

.video-wrapper[b-7jnk2kmb7n] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.intro-video[b-7jnk2kmb7n] {
    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-7jnk2kmb7n] {
    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-7jnk2kmb7n] {
    opacity: 0 !important;
    pointer-events: none;
}

.poster-image[b-7jnk2kmb7n] {
    max-width: 50%;
    max-height: 50%;
    object-fit: contain;
    opacity: 0.8;
}



.intro-video:focus[b-7jnk2kmb7n] {
    outline: 3px solid rgba(240, 138, 18, 0.5);
    outline-offset: 2px;
}

/* Enhanced Feature List Styles */
.feature-list[b-7jnk2kmb7n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.feature-item[b-7jnk2kmb7n] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 2rem;
    transition: transform 0.2s ease-in-out;
    width: 100%;
    max-width: 600px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin-bottom: 1rem;
}

.feature-item:hover[b-7jnk2kmb7n] {
    transform: translateY(-3px);
}

.feature-icon[b-7jnk2kmb7n] {
    display: none;
}

.feature-content[b-7jnk2kmb7n] {
    text-align: center;
}

.feature-content h2[b-7jnk2kmb7n] {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.feature-content p[b-7jnk2kmb7n] {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.4;
    margin-bottom: 0;
}

/* CTA Button */
.cta-container[b-7jnk2kmb7n] {
    text-align: center;
}

.cta-button[b-7jnk2kmb7n] {
    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-7jnk2kmb7n], .cta-button:focus[b-7jnk2kmb7n] {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(240, 138, 18, 0.35);
}

.cta-button:active[b-7jnk2kmb7n] {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(240, 138, 18, 0.3);
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .intro-card[b-7jnk2kmb7n] {
        padding: 2.5rem;
    }

    .video-container[b-7jnk2kmb7n] {
        max-width: 100%;
        padding: 0.4rem;
    }

    .video-section[b-7jnk2kmb7n] {
        margin-bottom: 2.5rem;
    }

    .feature-item[b-7jnk2kmb7n] {
        gap: 1.25rem;
    }

}

@media (max-width: 768px) {
    .intro-card[b-7jnk2kmb7n] {
        padding: 1rem 1.5rem;
    }

    .video-container[b-7jnk2kmb7n] {
        width: 100%;
        margin: 1rem auto 2rem;
        padding: 0.3rem;
        border-radius: 0.75rem;
    }

    .video-container .ratio[b-7jnk2kmb7n] {
        border-radius: 0.5rem;
    }

    .video-section[b-7jnk2kmb7n] {
        margin-bottom: 1.5rem;
    }

    .feature-content h3[b-7jnk2kmb7n] {
        font-size: 1.15rem;
    }

    .feature-content p[b-7jnk2kmb7n] {
        font-size: 0.95rem;
    }

    .cta-button[b-7jnk2kmb7n] {
        width: 100%;
        padding: 1.2rem 1.5rem; /* Increased height by ~20% */
    }
}

@media (max-width: 576px) {
    .intro-card[b-7jnk2kmb7n] {
        padding: 0.75rem 1rem;
    }

    .video-container[b-7jnk2kmb7n] {
        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-7jnk2kmb7n] {
        border-radius: 0.375rem;
    }

    .video-container:hover[b-7jnk2kmb7n] {
        transform: none;
    }

    .intro-video:hover[b-7jnk2kmb7n] {
        transform: none;
    }

    .video-section[b-7jnk2kmb7n] {
        margin-bottom: 1rem;
    }

    .feature-item[b-7jnk2kmb7n] {
        padding: 1rem 1.5rem;
        max-width: 100%;
    }
    
    .feature-content h2[b-7jnk2kmb7n] {
        font-size: 1.1rem;
    }
    
    .feature-content p[b-7jnk2kmb7n] {
        font-size: 0.9rem;
    }

}

/* Benefits Section */
.benefits-section[b-7jnk2kmb7n] {
    background: #f8f9fa;
    padding: 4rem 0;
}

.benefit-card[b-7jnk2kmb7n] {
    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-7jnk2kmb7n] {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.benefit-card i[b-7jnk2kmb7n] {
    margin-bottom: 1rem;
}

.benefit-card h3[b-7jnk2kmb7n] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1.4rem;
    line-height: 1.5;
}

.benefit-card p[b-7jnk2kmb7n] {
    color: #6c757d;
    line-height: 1.6;
}

/* Video section styling */
.video-section[b-7jnk2kmb7n] {
    margin-bottom: 3rem;
}

.video-container[b-7jnk2kmb7n] {
    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-7jnk2kmb7n] {
    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-7jnk2kmb7n] {
    color: #2d3748;
    font-weight: 700;
}

/* CTA subtext styling for better readability */
.cta-subtext[b-7jnk2kmb7n] {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 500;
    letter-spacing: 0.025em;
}

.cta-button[b-7jnk2kmb7n] {
    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-7jnk2kmb7n] {
    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-item[b-7jnk2kmb7n] {
        flex-direction: column;
        text-align: center;
    }


    .cta-container[b-7jnk2kmb7n] {
        padding: 2rem 1rem;
    }

    .cta-button[b-7jnk2kmb7n] {
        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-7jnk2kmb7n],
.beta-section h3[b-7jnk2kmb7n] {
    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-7jnk2kmb7n],
    .beta-section .d-flex[b-7jnk2kmb7n] {
        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-7jnk2kmb7n],
    .beta-section .d-flex:last-child[b-7jnk2kmb7n] {
        margin-bottom: 0;
    }

    .why-choose-section .fa-check[b-7jnk2kmb7n],
    .why-choose-section .fa-check-circle[b-7jnk2kmb7n],
    .beta-section .fa-check[b-7jnk2kmb7n],
    .beta-section .fa-check-circle[b-7jnk2kmb7n] {
        flex-shrink: 0;
        margin-top: 2px;
        font-size: 0.875rem;
    }

    .why-choose-section span[b-7jnk2kmb7n],
    .beta-section span[b-7jnk2kmb7n] {
        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-7jnk2kmb7n],
    .beta-section .d-flex[b-7jnk2kmb7n] {
        padding: 0.75rem 1rem;
    }
}

/* ==========================================================================
   Sticky CTA Bar (Mobile) - Shows on scroll
   ========================================================================== */

.sticky-cta-bar[b-7jnk2kmb7n] {
    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);
}

.sticky-cta-bar.visible[b-7jnk2kmb7n] {
    transform: translateY(0);
}

.sticky-cta-bar.hidden-by-user[b-7jnk2kmb7n] {
    display: none;
}

.sticky-cta-content[b-7jnk2kmb7n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 600px;
    margin: 0 auto;
    gap: 1rem;
}

.sticky-cta-text[b-7jnk2kmb7n] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.sticky-cta-headline[b-7jnk2kmb7n] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #2d3748;
}

.sticky-cta-subtext[b-7jnk2kmb7n] {
    font-size: 0.75rem;
    color: #6c757d;
}

.sticky-cta-button[b-7jnk2kmb7n] {
    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-7jnk2kmb7n] {
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(240, 138, 18, 0.45);
}

.sticky-cta-button:active[b-7jnk2kmb7n] {
    transform: scale(0.98);
}

.sticky-cta-close[b-7jnk2kmb7n] {
    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-7jnk2kmb7n] {
    background: #e9ecef;
    color: #2d3748;
}

/* ==========================================================================
   Floating CTA Button (Desktop) - Bottom right corner
   ========================================================================== */

.floating-cta[b-7jnk2kmb7n] {
    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-7jnk2kmb7n] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.floating-cta-button[b-7jnk2kmb7n] {
    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-7jnk2kmb7n] {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(240, 138, 18, 0.5);
}

.floating-cta-button:active[b-7jnk2kmb7n] {
    transform: translateY(-1px);
}

.floating-cta-icon[b-7jnk2kmb7n] {
    font-size: 1.25rem;
}

.floating-cta-text[b-7jnk2kmb7n] {
    font-size: 0.95rem;
}

/* ==========================================================================
   Responsive Behavior: Mobile vs Desktop
   ========================================================================== */

/* Mobile: Show sticky bar, hide floating button */
@media (max-width: 991px) {
    .sticky-cta-bar[b-7jnk2kmb7n] {
        /* Shown on mobile */
    }

    .floating-cta[b-7jnk2kmb7n] {
        display: none !important;
    }
}

/* Desktop: Hide sticky bar, show floating button */
@media (min-width: 992px) {
    .sticky-cta-bar[b-7jnk2kmb7n] {
        display: none !important;
    }

    .floating-cta[b-7jnk2kmb7n] {
        /* Shown on desktop */
    }
}

/* Extra small screens - more compact sticky bar */
@media (max-width: 400px) {
    .sticky-cta-content[b-7jnk2kmb7n] {
        gap: 0.5rem;
    }

    .sticky-cta-headline[b-7jnk2kmb7n] {
        font-size: 0.85rem;
    }

    .sticky-cta-subtext[b-7jnk2kmb7n] {
        display: none;
    }

    .sticky-cta-button[b-7jnk2kmb7n] {
        padding: 0.625rem 1rem;
        font-size: 0.85rem;
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .sticky-cta-bar[b-7jnk2kmb7n],
    .floating-cta[b-7jnk2kmb7n],
    .sticky-cta-button[b-7jnk2kmb7n],
    .floating-cta-button[b-7jnk2kmb7n] {
        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-7jnk2kmb7n] {
    background: #ffffff;
    padding: 3rem 0;
}

.faq-section h2[b-7jnk2kmb7n] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 2rem;
}

.faq-list[b-7jnk2kmb7n] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item[b-7jnk2kmb7n] {
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: all 0.2s ease;
}

.faq-item:hover[b-7jnk2kmb7n] {
    border-color: #f08a12;
    box-shadow: 0 4px 12px rgba(240, 138, 18, 0.1);
}

.faq-item[open][b-7jnk2kmb7n] {
    background: #fff8f0;
    border-color: rgba(240, 138, 18, 0.3);
}

.faq-question[b-7jnk2kmb7n] {
    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-7jnk2kmb7n]::-webkit-details-marker {
    display: none;
}

/* WCAG 2.4.7 Focus Visible - Clear focus indicator for keyboard users */
.faq-question:focus[b-7jnk2kmb7n] {
    outline: 2px solid #f08a12;
    outline-offset: 2px;
    border-radius: 8px;
}

.faq-question:focus:not(:focus-visible)[b-7jnk2kmb7n] {
    outline: none;
}

.faq-question:focus-visible[b-7jnk2kmb7n] {
    outline: 2px solid #f08a12;
    outline-offset: 2px;
    border-radius: 8px;
}

.faq-question span[b-7jnk2kmb7n] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #2d3748;
    flex: 1;
    padding-right: 1rem;
}

.faq-icon[b-7jnk2kmb7n] {
    color: #6c757d;
    font-size: 0.875rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-item[open] .faq-icon[b-7jnk2kmb7n] {
    transform: rotate(180deg);
    color: #f08a12;
}

.faq-answer[b-7jnk2kmb7n] {
    padding: 0 1.5rem 1.25rem;
}

.faq-answer p[b-7jnk2kmb7n] {
    color: #4a5568;
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .faq-section[b-7jnk2kmb7n] {
        padding: 2rem 0;
    }

    .faq-section h2[b-7jnk2kmb7n] {
        font-size: 1.5rem;
    }

    .faq-question[b-7jnk2kmb7n] {
        padding: 1rem 1.25rem;
    }

    .faq-question span[b-7jnk2kmb7n] {
        font-size: 0.95rem;
    }

    .faq-answer[b-7jnk2kmb7n] {
        padding: 0 1.25rem 1rem;
    }

    .faq-answer p[b-7jnk2kmb7n] {
        font-size: 0.9rem;
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .faq-item[b-7jnk2kmb7n],
    .faq-icon[b-7jnk2kmb7n] {
        transition: none;
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/MealCalculationLoader.razor.rz.scp.css */
/* Meal Calculation Loader - Component Styles */

.meal-calculation-loader[b-6yl9eqzkwm] {
    position: relative;
    padding: 3rem 1rem;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-container[b-6yl9eqzkwm] {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

/* Food Combination Visual */
.food-combination-visual[b-6yl9eqzkwm] {
    position: relative;
    height: 180px;
    margin-bottom: 2rem;
}

.food-item[b-6yl9eqzkwm] {
    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-6yl9eqzkwm 3s ease-in-out infinite;
}

.food-item-1[b-6yl9eqzkwm] {
    top: 20px;
    left: 10%;
    animation-delay: 0s;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
}

.food-item-2[b-6yl9eqzkwm] {
    top: 20px;
    right: 10%;
    animation-delay: 1s;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

.food-item-3[b-6yl9eqzkwm] {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 2s;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.food-icon[b-6yl9eqzkwm] {
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
}

.food-icon svg[b-6yl9eqzkwm] {
    width: 100%;
    height: 100%;
}

.food-item-1 .food-icon[b-6yl9eqzkwm] {
    color: #dc2626;
}

.food-item-2 .food-icon[b-6yl9eqzkwm] {
    color: #2563eb;
}

.food-item-3 .food-icon[b-6yl9eqzkwm] {
    color: #f59e0b;
}

.macro-label[b-6yl9eqzkwm] {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.food-item-1 .macro-label[b-6yl9eqzkwm] {
    color: #991b1b;
}

.food-item-2 .macro-label[b-6yl9eqzkwm] {
    color: #1e40af;
}

.food-item-3 .macro-label[b-6yl9eqzkwm] {
    color: #d97706;
}

/* Center Calculation Symbol */
.calculation-center[b-6yl9eqzkwm] {
    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-6yl9eqzkwm] {
    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-6yl9eqzkwm 2s linear infinite;
}

.calculation-icon[b-6yl9eqzkwm] {
    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-6yl9eqzkwm] {
    width: 28px;
    height: 28px;
    color: #6b7280;
    animation: iconPulse-b-6yl9eqzkwm 2s ease-in-out infinite;
}

.pulse-effect[b-6yl9eqzkwm] {
    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-6yl9eqzkwm 2s ease-out infinite;
}

/* Progress Indicators */
.progress-indicators[b-6yl9eqzkwm] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.progress-dot[b-6yl9eqzkwm] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5e7eb;
    transition: all 0.3s ease;
}

.progress-dot.active[b-6yl9eqzkwm] {
    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-6yl9eqzkwm] {
    text-align: center;
    position: relative;
    min-height: 60px;
}

.loading-message[b-6yl9eqzkwm] {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.loading-message.fade-in[b-6yl9eqzkwm] {
    opacity: 1;
    transform: translateY(0);
}

.loading-message.fade-out[b-6yl9eqzkwm] {
    opacity: 0;
    transform: translateY(-4px);
}

.message-text[b-6yl9eqzkwm] {
    color: #1f2937;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.01em;
}

.sub-message[b-6yl9eqzkwm] {
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 400;
}

/* Background Elements */
.background-elements[b-6yl9eqzkwm] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.floating-element[b-6yl9eqzkwm] {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
}

.element-1[b-6yl9eqzkwm] {
    width: 40px;
    height: 40px;
    background: #ef4444;
    top: 10%;
    left: 5%;
    animation: float1-b-6yl9eqzkwm 8s ease-in-out infinite;
}

.element-2[b-6yl9eqzkwm] {
    width: 30px;
    height: 30px;
    background: #2563eb;
    top: 70%;
    right: 8%;
    animation: float2-b-6yl9eqzkwm 10s ease-in-out infinite;
}

.element-3[b-6yl9eqzkwm] {
    width: 25px;
    height: 25px;
    background: #10b981;
    bottom: 15%;
    left: 12%;
    animation: float3-b-6yl9eqzkwm 12s ease-in-out infinite;
}

.element-4[b-6yl9eqzkwm] {
    width: 35px;
    height: 35px;
    background: #f59e0b;
    top: 40%;
    right: 15%;
    animation: float4-b-6yl9eqzkwm 9s ease-in-out infinite;
}

/* Animations - Optimized for GPU acceleration */
@keyframes foodFloat-b-6yl9eqzkwm {
    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-6yl9eqzkwm {
    from {
        transform: rotate3d(0, 0, 1, 0deg);
    }
    to {
        transform: rotate3d(0, 0, 1, 360deg);
    }
}

@keyframes iconPulse-b-6yl9eqzkwm {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

@keyframes pulseExpand-b-6yl9eqzkwm {
    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-6yl9eqzkwm {
    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-6yl9eqzkwm {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-25px, -15px) scale(1.2);
    }
}

@keyframes float3-b-6yl9eqzkwm {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(15px, -10px);
    }
    75% {
        transform: translate(-10px, 20px);
    }
}

@keyframes float4-b-6yl9eqzkwm {
    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-6yl9eqzkwm] {
        padding: 2rem 0.5rem;
        min-height: 280px;
    }

    .food-combination-visual[b-6yl9eqzkwm] {
        height: 140px;
        margin-bottom: 1.5rem;
    }

    .food-item[b-6yl9eqzkwm] {
        width: 60px;
        height: 60px;
        border-radius: 12px;
    }

    .food-icon[b-6yl9eqzkwm] {
        width: 28px;
        height: 28px;
    }

    .macro-label[b-6yl9eqzkwm] {
        font-size: 0.5625rem;
    }

    .calculation-center[b-6yl9eqzkwm] {
        width: 64px;
        height: 64px;
    }

    .calculation-icon[b-6yl9eqzkwm] {
        width: 40px;
        height: 40px;
    }

    .calculation-icon svg[b-6yl9eqzkwm] {
        width: 24px;
        height: 24px;
    }

    .message-text[b-6yl9eqzkwm] {
        font-size: 1rem;
    }

    .sub-message[b-6yl9eqzkwm] {
        font-size: 0.8125rem;
    }

    .floating-element[b-6yl9eqzkwm] {
        display: none; /* Hide on mobile for performance */
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .food-item[b-6yl9eqzkwm],
    .calculation-ring[b-6yl9eqzkwm],
    .calculation-icon svg[b-6yl9eqzkwm],
    .pulse-effect[b-6yl9eqzkwm],
    .floating-element[b-6yl9eqzkwm] {
        animation: none;
    }

    .loading-message[b-6yl9eqzkwm] {
        transition: opacity 0.5s ease;
    }

    .progress-dot[b-6yl9eqzkwm] {
        transition: background-color 0.5s ease;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .meal-calculation-loader[b-6yl9eqzkwm] {
        background: #1f2937;
    }

    .food-item[b-6yl9eqzkwm] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .calculation-icon[b-6yl9eqzkwm] {
        background: #374151;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .calculation-icon svg[b-6yl9eqzkwm] {
        color: #d1d5db;
    }

    .message-text[b-6yl9eqzkwm] {
        color: #f3f4f6;
    }

    .sub-message[b-6yl9eqzkwm] {
        color: #9ca3af;
    }

    .progress-dot[b-6yl9eqzkwm] {
        background: #4b5563;
    }

    .progress-dot.active[b-6yl9eqzkwm] {
        background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/MealCombinations.razor.rz.scp.css */
/* MealCombinations Component Styles */

/* Meal Sorting Select Styles */
.meal-sorting-select[b-6dsqfa968g] {
    min-width: 150px;
}

/* Override MudSelect styles for meal sorting */
.meal-sorting-select .mud-input-control[b-6dsqfa968g] {
    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-6dsqfa968g] {
    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-6dsqfa968g] {
    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-6dsqfa968g] {
    width: 100%;
}

/* Style the dropdown items */
.meal-sorting-select .mud-list-item[b-6dsqfa968g] {
    font-size: 1.1rem;
    padding: 0.75rem 1rem;
}

.meal-sorting-select .mud-list-item:hover[b-6dsqfa968g] {
    background-color: var(--mud-palette-error-hover);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .meal-sorting-select .mud-input-control[b-6dsqfa968g] {
        font-size: 1.1rem !important;
    }

    .meal-sorting-select .mud-list-item[b-6dsqfa968g] {
        font-size: 1rem;
        padding: 0.625rem 0.875rem;
    }
}

/* Accessibility - High contrast mode */
@media (prefers-contrast: high) {
    .meal-sorting-select .mud-input-control[b-6dsqfa968g] {
        border-width: 3px !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .meal-sorting-select .mud-input-control[b-6dsqfa968g] {
        transition: none;
    }
}

/* ==========================================================================
   Perfect Match Celebration Animations
   ========================================================================== */

/* Animated Checkmark SVG */
.animated-checkmark[b-6dsqfa968g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.checkmark-svg[b-6dsqfa968g] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: block;
    stroke-width: 3;
    stroke: #fff;
    stroke-miterlimit: 10;
    animation: checkmark-fill-b-6dsqfa968g 0.4s ease-in-out 0.4s forwards,
               checkmark-scale-b-6dsqfa968g 0.3s ease-in-out 0.9s both;
}

.checkmark-circle[b-6dsqfa968g] {
    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-6dsqfa968g 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check[b-6dsqfa968g] {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke: #fff;
    stroke-width: 4;
    animation: checkmark-stroke-b-6dsqfa968g 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes checkmark-stroke-b-6dsqfa968g {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes checkmark-fill-b-6dsqfa968g {
    100% {
        box-shadow: inset 0px 0px 0px 30px rgba(255, 255, 255, 0.15);
    }
}

@keyframes checkmark-scale-b-6dsqfa968g {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

/* Celebration text animation */
.celebration-text[b-6dsqfa968g] {
    animation: celebration-text-pop-b-6dsqfa968g 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.6s both;
}

@keyframes celebration-text-pop-b-6dsqfa968g {
    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-6dsqfa968g] {
    position: relative;
    overflow: hidden;
    animation: perfect-match-entrance-b-6dsqfa968g 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes perfect-match-entrance-b-6dsqfa968g {
    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-6dsqfa968g]::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-6dsqfa968g 2s ease-in-out 0.5s;
    pointer-events: none;
    z-index: -1;
}

@keyframes success-pulse-glow-b-6dsqfa968g {
    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-6dsqfa968g],
    .checkmark-circle[b-6dsqfa968g],
    .checkmark-check[b-6dsqfa968g],
    .celebration-text[b-6dsqfa968g],
    .perfect-match-alert[b-6dsqfa968g],
    .perfect-match-alert[b-6dsqfa968g]::before {
        animation: none !important;
    }

    .checkmark-circle[b-6dsqfa968g] {
        stroke-dashoffset: 0;
    }

    .checkmark-check[b-6dsqfa968g] {
        stroke-dashoffset: 0;
    }

    .celebration-text[b-6dsqfa968g],
    .perfect-match-alert[b-6dsqfa968g] {
        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-6dsqfa968g] {
    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-6dsqfa968g] {
    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-6dsqfa968g] {
    font-size: var(--fs-font-size-xl);
    color: #94a3b8; /* Slate-400 - subtle icon */
}

.no-match-explanation[b-6dsqfa968g] {
    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-6dsqfa968g] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fs-spacing-sm);
    margin: var(--fs-spacing-lg) 0;
}

.food-pill[b-6dsqfa968g] {
    /* 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-6dsqfa968g] {
    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-6dsqfa968g] {
    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-6dsqfa968g] {
    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-6dsqfa968g] {
    font-size: var(--fs-font-size-xl);
    color: #d97706; /* Amber-600 */
    flex-shrink: 0;
    line-height: 1;
}

.target-miss-callout .callout-content[b-6dsqfa968g] {
    display: flex;
    flex-direction: column;
    gap: var(--fs-spacing-xs);
}

.target-miss-callout strong[b-6dsqfa968g] {
    color: #92400e; /* Amber-800 */
    font-weight: var(--fs-font-weight-semibold);
    font-size: var(--fs-font-size-base);
}

.target-miss-callout span[b-6dsqfa968g] {
    color: #78350f; /* Amber-900 */
    font-size: var(--fs-font-size-sm);
}

/* ==========================================================================
   Closest Match - Card with food item rows
   ========================================================================== */

.closest-match-card[b-6dsqfa968g] {
    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-6dsqfa968g] {
    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-6dsqfa968g] {
    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-6dsqfa968g] {
    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-6dsqfa968g] {
    display: flex;
    flex-direction: column;
    gap: var(--fs-spacing-sm);
    margin: var(--fs-spacing-lg) 0;
}

.food-item-row[b-6dsqfa968g] {
    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-6dsqfa968g] {
    border-color: var(--fs-border-hover);
    background: var(--fs-bg-hover);
}

.food-item-row.has-warning[b-6dsqfa968g] {
    border-left: 3px solid #f59e0b; /* Amber-500 */
}

.food-info[b-6dsqfa968g] {
    display: flex;
    align-items: baseline;
    gap: var(--fs-spacing-md);
    flex: 1;
    min-width: 0;
}

.food-name[b-6dsqfa968g] {
    font-weight: var(--fs-font-weight-medium);
    color: var(--fs-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.food-serving[b-6dsqfa968g] {
    color: var(--fs-text-secondary);
    font-size: var(--fs-font-size-sm);
    white-space: nowrap;
}

/* Portion warning badge - inline, visible */
.portion-badge[b-6dsqfa968g] {
    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-6dsqfa968g] {
    font-size: 0.75rem;
}

.portion-badge.very-large[b-6dsqfa968g] {
    background: #fde68a; /* Amber-200 */
    color: #78350f; /* Amber-900 */
}

.closest-match-actions[b-6dsqfa968g] {
    display: flex;
    gap: var(--fs-spacing-md);
    margin-top: var(--fs-spacing-lg);
}

/* ==========================================================================
   Mobile responsive - Closest Match section
   ========================================================================== */

@media (max-width: 576px) {
    .target-miss-callout[b-6dsqfa968g] {
        flex-direction: row;
        padding: var(--fs-spacing-md);
    }

    .food-item-row[b-6dsqfa968g] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--fs-spacing-sm);
        padding: var(--fs-spacing-md);
    }

    .food-info[b-6dsqfa968g] {
        flex-direction: column;
        gap: var(--fs-spacing-xs);
        width: 100%;
    }

    .food-name[b-6dsqfa968g] {
        white-space: normal;
    }

    .portion-badge[b-6dsqfa968g] {
        align-self: flex-start;
    }

    .closest-match-actions[b-6dsqfa968g] {
        flex-direction: column;
    }
}

/* Buttons with minimum 44px tap target for mobile accessibility */
.btn-try-different[b-6dsqfa968g] {
    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-6dsqfa968g] {
    background: var(--fs-primary-light);
    transform: translateY(-1px);
    box-shadow: var(--fs-shadow-primary);
}

.btn-try-different:active[b-6dsqfa968g] {
    transform: translateY(0);
}

.btn-use-anyway[b-6dsqfa968g] {
    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-6dsqfa968g] {
    background: var(--fs-text-primary);
    transform: translateY(-1px);
    box-shadow: var(--fs-shadow-md);
}

.btn-use-anyway:active[b-6dsqfa968g] {
    transform: translateY(0);
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .no-match-alert[b-6dsqfa968g] {
        padding: var(--fs-spacing-lg);
        border-radius: var(--fs-radius-md);
    }

    .no-match-header[b-6dsqfa968g] {
        font-size: var(--fs-font-size-base);
    }

    .closest-match-actions[b-6dsqfa968g] {
        flex-direction: column;
    }

    .btn-try-different[b-6dsqfa968g],
    .btn-use-anyway[b-6dsqfa968g] {
        width: 100%;
        min-height: var(--fs-mobile-tap-target); /* Larger touch targets on mobile */
    }

    .excluded-pills[b-6dsqfa968g] {
        gap: var(--fs-spacing-xs);
    }

    .food-pill[b-6dsqfa968g] {
        font-size: var(--fs-font-size-xs);
        padding: var(--fs-spacing-xs) var(--fs-spacing-sm);
    }

    .portion-item[b-6dsqfa968g] {
        display: block;
        margin-right: 0;
        margin-bottom: var(--fs-spacing-xs);
    }
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .food-pill[b-6dsqfa968g],
    .btn-try-different[b-6dsqfa968g],
    .btn-use-anyway[b-6dsqfa968g] {
        transition: none;
    }

    .food-pill:hover[b-6dsqfa968g],
    .btn-try-different:hover[b-6dsqfa968g],
    .btn-use-anyway:hover[b-6dsqfa968g] {
        transform: none;
    }
}

/* Accessibility: High contrast mode */
@media (prefers-contrast: high) {
    .no-match-alert[b-6dsqfa968g] {
        border-left-width: 6px;
        border: 2px solid var(--fs-accent);
    }

    .food-pill[b-6dsqfa968g] {
        border-width: 2px;
    }

    .btn-try-different[b-6dsqfa968g] {
        border-width: 3px;
    }

    .closest-match-card[b-6dsqfa968g] {
        border-width: 2px;
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/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-43ugh0r680] {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: flex-end;
    margin-bottom: 1rem;
    width: 100%;
}

.meal-macro-badges .badge[b-43ugh0r680] {
    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-43ugh0r680] {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Button styles */
.meal-select-button[b-43ugh0r680] {
    font-weight: 500;
    letter-spacing: 0.3px;
}

.meal-details-toggle[b-43ugh0r680] {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

.meal-details-toggle:hover[b-43ugh0r680] {
    text-decoration: underline;
}

/* Responsive adjustments for meal badges container */
@media (max-width: 1400px) {
    .meal-macro-badges[b-43ugh0r680] {
        gap: 5px;
    }
}

@media (max-width: 1200px) {
    .meal-macro-badges[b-43ugh0r680] {
        gap: 4px;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .meal-macro-badges[b-43ugh0r680] {
        gap: 3px;
        margin-bottom: 0.75rem;
    }
}

@media (max-width: 576px) {
    .meal-macro-badges[b-43ugh0r680] {
        gap: 2px;
        margin-bottom: 0.5rem;
    }
}

/* Fix alignment issues on mobile */
@media (max-width: 767px) {
    .meal-item-mobile-align[b-43ugh0r680] {
        text-align: left !important;
    }
    
    .meal-macro-badges[b-43ugh0r680] {
        justify-content: flex-start !important;
        margin-top: 0.5rem;
    }
}

/* Food name styling in nutrition facts view */
.meal-food-name[b-43ugh0r680] {
    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-43ugh0r680] {
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
}

@media (min-width: 1200px) {
    .meal-food-name[b-43ugh0r680] {
        font-size: 1.35rem;
    }
}

@media (min-width: 1400px) {
    .meal-food-name[b-43ugh0r680] {
        font-size: 1.5rem;
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/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-qehhtwri8x] {
    margin: 0 0 var(--fs-spacing-2xl) 0;
    padding: 0;
}

/* Primary Input Row */
.quick-add-primary[b-qehhtwri8x] {
    display: flex;
    flex-direction: column;
    gap: var(--fs-spacing-md);
}

.quick-add-input-group[b-qehhtwri8x] {
    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-qehhtwri8x] {
    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-qehhtwri8x] {
    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-qehhtwri8x]::placeholder {
    color: var(--fs-text-secondary) !important;
    font-weight: var(--fs-font-weight-normal);
}

/* Meal Selector Wrapper */
.meal-selector-wrapper[b-qehhtwri8x] {
    display: flex;
    align-items: center;
    gap: var(--fs-spacing-xs);
    position: relative;
}

/* Meal Selector Label */
.meal-selector-label[b-qehhtwri8x] {
    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-qehhtwri8x] {
    /* 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-qehhtwri8x] {
    background: white !important;
    color: #1e40af !important;
    font-weight: 500;
    padding: 8px;
}

.quick-add-meal-select:hover[b-qehhtwri8x] {
    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-qehhtwri8x] {
    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-qehhtwri8x] {
    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-qehhtwri8x] {
    background: var(--fs-bg-tertiary) !important;
    color: var(--fs-text-muted) !important;
    cursor: not-allowed;
}

.quick-add-button:not(:disabled):hover[b-qehhtwri8x] {
    background: var(--fs-primary-hover) !important;
    transform: translateY(-1px);
}

.quick-add-button:not(:disabled):active[b-qehhtwri8x] {
    transform: translateY(0);
}

.quick-add-button.active[b-qehhtwri8x] {
    background: var(--fs-primary) !important;
}

.button-icon[b-qehhtwri8x] {
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
}

.button-text[b-qehhtwri8x] {
    display: none;
}

/* Options - Subtle */
.quick-add-options[b-qehhtwri8x] {
    display: flex;
    padding: 0 var(--fs-spacing-xs);
}

.bypass-option[b-qehhtwri8x] {
    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-qehhtwri8x] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: #000;
}

.bypass-option:hover[b-qehhtwri8x] {
    color: var(--fs-text-primary);
}

/* Parsed Preview - Inline and Subtle */
.parsed-preview[b-qehhtwri8x] {
    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-qehhtwri8x var(--fs-transition-base);
}

.preview-text[b-qehhtwri8x] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-clear[b-qehhtwri8x] {
    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-qehhtwri8x] {
    color: var(--fs-text-primary);
}

/* Recent Foods - Minimal Pills */
.recent-foods[b-qehhtwri8x] {
    display: flex;
    gap: var(--fs-spacing-xs);
    margin-top: var(--fs-spacing-lg);
    padding: 0 2px;
    flex-wrap: wrap;
}

.recent-pill[b-qehhtwri8x] {
    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-qehhtwri8x] {
    background: var(--fs-bg-secondary);
    border-color: var(--fs-border-hover);
    color: var(--fs-text-primary);
    transform: translateY(-1px);
}

.recent-pill:active[b-qehhtwri8x] {
    transform: translateY(0);
}

/* Animation */
@keyframes slideDown-b-qehhtwri8x {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .quick-add-container[b-qehhtwri8x] {
        margin-bottom: 20px;
    }
    
    .quick-add-input-group[b-qehhtwri8x] {
        flex-wrap: wrap;
        padding: var(--fs-spacing-sm);
        gap: var(--fs-spacing-sm);
    }
    
    .quick-add-input[b-qehhtwri8x] {
        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-qehhtwri8x] {
        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-qehhtwri8x] {
        font-size: var(--fs-font-size-sm);
        margin-right: var(--fs-spacing-sm);
    }
    
    .quick-add-meal-select[b-qehhtwri8x] {
        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-qehhtwri8x] {
        flex: 0 0 auto;
        order: 3;
        padding: var(--fs-spacing-md) var(--fs-spacing-2xl);
        width: 100%;
    }
    
    .button-text[b-qehhtwri8x] {
        display: inline;
    }
    
    .quick-add-options[b-qehhtwri8x] {
        padding: var(--fs-spacing-sm) var(--fs-spacing-md) 0;
    }
    
    .recent-foods[b-qehhtwri8x] {
        gap: var(--fs-spacing-sm);
        margin-top: var(--fs-spacing-md);
    }
    
    .recent-pill[b-qehhtwri8x] {
        padding: var(--fs-spacing-sm) var(--fs-spacing-md);
        font-size: var(--fs-font-size-sm);
    }
}

@media (min-width: 769px) {
    .button-text[b-qehhtwri8x] {
        display: inline;
    }
    
    .quick-add-meal-select[b-qehhtwri8x] {
        min-width: 140px;
        max-width: 180px;
    }
    
    /* Ensure meal selector is prominent on desktop too */
    .meal-selector-wrapper[b-qehhtwri8x] {
        flex-shrink: 0;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .quick-add-button[b-qehhtwri8x] {
        padding: var(--fs-spacing-md) var(--fs-spacing-2xl);
        font-size: var(--fs-font-size-base);
    }
    
    .recent-pill[b-qehhtwri8x] {
        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-qehhtwri8x] {
    padding-bottom: var(--fs-spacing-3xl);
}

.section-title[b-qehhtwri8x] {
    font-size: var(--fs-font-size-xl);
    font-weight: var(--fs-font-weight-semibold);
    color: var(--fs-text-primary);
}

.meals-container[b-qehhtwri8x] {
    margin-top: var(--fs-spacing-lg);
}

.snacks-section[b-qehhtwri8x] {
    margin-top: var(--fs-spacing-3xl);
}
/* _content/Nutrition.Web.External.UI.Interactive/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-m8wtb241bz] {
    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-m8wtb241bz] {
    box-shadow: var(--fs-shadow-md);
}

/* Score Header - Left-aligned icon with grade */
.score-header[b-m8wtb241bz] {
    display: flex;
    align-items: center;
    gap: var(--fs-spacing-lg);
    margin-bottom: var(--fs-spacing-lg);
}

/* Circular Progress Ring */
.score-visual[b-m8wtb241bz] {
    flex-shrink: 0;
}

.score-ring[b-m8wtb241bz] {
    position: relative;
    width: 56px;
    height: 56px;
}

.circular-progress[b-m8wtb241bz] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circle-bg[b-m8wtb241bz] {
    fill: none;
    stroke: var(--fs-border-default);
    stroke-width: 3;
}

.circle-progress[b-m8wtb241bz] {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.6s ease-out;
}

/* Progress Colors - Semantic meaning */
.progress-excellent[b-m8wtb241bz] { stroke: #10b981; }
.progress-very-good[b-m8wtb241bz] { stroke: #3b82f6; }
.progress-good[b-m8wtb241bz] { stroke: #8b5cf6; }
.progress-all-right[b-m8wtb241bz] { stroke: #f59e0b; }
.progress-needs-improvement[b-m8wtb241bz] { stroke: #ef4444; }
.progress-no-match[b-m8wtb241bz] { stroke: #6b7280; }

/* Icon inside ring */
.score-icon[b-m8wtb241bz] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
}

.icon-excellent[b-m8wtb241bz] { color: #10b981; }
.icon-very-good[b-m8wtb241bz] { color: #3b82f6; }
.icon-good[b-m8wtb241bz] { color: #8b5cf6; }
.icon-all-right[b-m8wtb241bz] { color: #f59e0b; }
.icon-needs-improvement[b-m8wtb241bz] { color: #ef4444; }
.icon-no-match[b-m8wtb241bz] { color: #6b7280; }

/* Score Content */
.score-content[b-m8wtb241bz] {
    display: flex;
    flex-direction: column;
    gap: var(--fs-spacing-xs);
}

.score-label[b-m8wtb241bz] {
    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-m8wtb241bz] {
    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-m8wtb241bz] { color: #10b981; }
.grade-very-good[b-m8wtb241bz] { color: #3b82f6; }
.grade-good[b-m8wtb241bz] { color: #8b5cf6; }
.grade-all-right[b-m8wtb241bz] { color: #f59e0b; }
.grade-needs-improvement[b-m8wtb241bz] { color: #ef4444; }
.grade-no-match[b-m8wtb241bz] { color: #6b7280; }

/* Card Accent Border - Subtle left border */
.score-very-good[b-m8wtb241bz] { border-left: 4px solid #3b82f6; }
.score-good[b-m8wtb241bz] { border-left: 4px solid #8b5cf6; }
.score-all-right[b-m8wtb241bz] { border-left: 4px solid #f59e0b; }
.score-needs-improvement[b-m8wtb241bz] { border-left: 4px solid #ef4444; }
.score-no-match[b-m8wtb241bz] { border-left: 4px solid #6b7280; }

/* Perfect Match - Celebratory styling */
.score-excellent[b-m8wtb241bz] {
    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-m8wtb241bz] {
    border-top-color: #a7f3d0;
}

/* Celebration Section - Perfect Match */
.score-celebration[b-m8wtb241bz] {
    margin-top: var(--fs-spacing-md);
    padding-top: var(--fs-spacing-md);
    border-top: 1px solid #a7f3d0;
}

.score-celebration p[b-m8wtb241bz] {
    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-m8wtb241bz] {
    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-m8wtb241bz] {
    display: flex;
    flex-direction: column;
    gap: var(--fs-spacing-sm);
}

.aggregate-insight .guidance-problem[b-m8wtb241bz] {
    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-m8wtb241bz] {
    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-m8wtb241bz] {
    background: transparent;
    border-left: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
    box-shadow: none;
}

/* Description Section */
.score-description[b-m8wtb241bz] {
    margin-top: var(--fs-spacing-md);
    padding-top: var(--fs-spacing-md);
    border-top: 1px solid var(--fs-border-default);
}

.score-description p[b-m8wtb241bz] {
    margin: 0;
    color: var(--fs-text-secondary);
    font-size: var(--fs-font-size-base);
    line-height: var(--fs-line-height-relaxed);
}

.suggestion-text[b-m8wtb241bz] {
    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-m8wtb241bz] {
    margin-top: var(--fs-spacing-lg);
    padding-top: var(--fs-spacing-lg);
    border-top: 1px solid var(--fs-border-default);
}

.btn-change-foods[b-m8wtb241bz] {
    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-m8wtb241bz] {
    background: var(--fs-primary);
    color: var(--fs-text-inverse);
    transform: translateY(-1px);
    box-shadow: var(--fs-shadow-primary);
}

.btn-change-foods:active[b-m8wtb241bz] {
    transform: translateY(0);
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .meal-score-card[b-m8wtb241bz] {
        padding: var(--fs-spacing-lg);
        border-radius: var(--fs-radius-lg);
    }

    .score-header[b-m8wtb241bz] {
        gap: var(--fs-spacing-md);
    }

    .score-ring[b-m8wtb241bz] {
        width: 48px;
        height: 48px;
    }

    .score-icon[b-m8wtb241bz] {
        font-size: 1.25rem;
    }

    .score-grade[b-m8wtb241bz] {
        font-size: var(--fs-font-size-lg);
    }

    .btn-change-foods[b-m8wtb241bz] {
        width: 100%;
        justify-content: center;
        min-height: var(--fs-mobile-tap-target);
    }
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .meal-score-card[b-m8wtb241bz],
    .circle-progress[b-m8wtb241bz],
    .btn-change-foods[b-m8wtb241bz] {
        transition: none;
    }

    .btn-change-foods:hover[b-m8wtb241bz] {
        transform: none;
    }
}

/* Accessibility: High contrast mode */
@media (prefers-contrast: high) {
    .meal-score-card[b-m8wtb241bz] {
        border-width: 2px;
    }

    .btn-change-foods[b-m8wtb241bz] {
        border-width: 3px;
    }

    .circle-progress[b-m8wtb241bz] {
        stroke-width: 4;
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/MealsList.razor.rz.scp.css */
/* Meal item card styles */
.meal-item-card[b-txb2ju40kq] {
    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-txb2ju40kq] {
    border-color: #4A90E2 !important;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.1) !important;
}

.meal-option-list[b-txb2ju40kq] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.meal-option-list li[b-txb2ju40kq] {
    background: transparent !important;
    border: none !important;
    padding: 1rem 0 !important;
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/ModalComponent.razor.rz.scp.css */
.modal-dialog-centered[b-f3evy2cvw8] {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/NutrientTotal.razor.rz.scp.css */
/* Nutrient Total Styles */
.nutrient-total[b-hto15g2y51] {
    font-size: 1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.nutrient-total .nutrient-value[b-hto15g2y51] {
    font-weight: bold;
    margin-right: 4px;
}

.nutrient-total i[b-hto15g2y51],
.nutrient-total-compact i[b-hto15g2y51] {
    cursor: help;
    margin-left: 4px;
}

/* Compact Icon Styles */
.nutrient-total-compact[b-hto15g2y51] {
    font-size: 0.9rem;
    font-weight: bold;
}

.nutrient-total-compact .compact-icon[b-hto15g2y51] {
    font-size: 0.7rem;
    vertical-align: super;
    margin-left: 2px;
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/NutritionFacts/NutritionFactsResult.razor.rz.scp.css */
.nutrition-facts-display .nutrition-facts-table[b-76ypq84p0j] {
    font-family: Arial, sans-serif;
}

.nutrient-row[b-76ypq84p0j] {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    border-bottom: 1px solid #f0f0f0;
}

.nutrient-row.small[b-76ypq84p0j] {
    font-size: 0.875rem;
}

.nutrient-row.indent-1[b-76ypq84p0j] {
    padding-left: 20px;
}

.nutrient-row.indent-2[b-76ypq84p0j] {
    padding-left: 40px;
}

.nutrient-label[b-76ypq84p0j] {
    font-weight: 500;
}

.nutrient-value[b-76ypq84p0j] {
    font-weight: 400;
}

.calories-section h5[b-76ypq84p0j] {
    font-weight: 700;
    margin: 0;
}

.serving-info[b-76ypq84p0j] {
    font-size: 0.95rem;
}

.vitamins-minerals-section[b-76ypq84p0j],
.additional-nutrients-section[b-76ypq84p0j] {
    margin-top: 10px;
}

.metadata-section[b-76ypq84p0j] {
    margin-top: 10px;
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/NutritionFacts/ProductDataValidator.razor.rz.scp.css */
.product-data-validator[b-flbrca9khs] {
    max-height: 90vh;
    overflow-y: auto;
}

/* Nutrition Summary Panel */
.nutrition-summary-panel[b-flbrca9khs] {
    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-flbrca9khs] {
    border-color: #ffc107;
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
}

.nutrition-summary-panel.border-success[b-flbrca9khs] {
    border-color: #28a745;
}

.summary-header[b-flbrca9khs] {
    margin-bottom: 1rem;
    text-align: center;
}

.summary-header h6[b-flbrca9khs] {
    color: #212529;
    font-weight: 600;
}

/* Nutrition Grid */
.summary-grid[b-flbrca9khs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.nutrient-item[b-flbrca9khs] {
    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-flbrca9khs] {
    border-color: #28a745;
    background: #f0fff4;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.15);
}

.nutrient-label[b-flbrca9khs] {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.nutrient-value[b-flbrca9khs] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #212529;
}

.nutrient-item.has-value .nutrient-value[b-flbrca9khs] {
    color: #28a745;
}

/* Compact view for nutrition fields */
.compact-nutrition-view .mb-2:not(.has-user-input)[b-flbrca9khs] {
    display: none;
}

.compact-nutrition-view .mb-2 input:not(:placeholder-shown)[b-flbrca9khs] {
    border-color: #28a745;
    background-color: #f0fff4;
}

/* Enhanced form inputs */
.form-control:focus[b-flbrca9khs] {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-control:not(:placeholder-shown)[b-flbrca9khs] {
    border-color: #28a745;
    background-color: #f8fff9;
}

/* Modal adjustments */
[b-flbrca9khs] .modal-body {
    padding: 0;
}

[b-flbrca9khs] .modal-body > .product-data-validator {
    padding: 1rem;
}

/* Extraction info alert improvements */
.alert[b-flbrca9khs] {
    border-radius: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .summary-grid[b-flbrca9khs] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
    
    .nutrient-item[b-flbrca9khs] {
        padding: 0.5rem;
    }
    
    .nutrient-value[b-flbrca9khs] {
        font-size: 1.1rem;
    }
    
    .nutrition-summary-panel[b-flbrca9khs] {
        position: relative;
        margin: 0 0 1rem 0;
    }
}

/* Action buttons improvements */
.btn-group-custom[b-flbrca9khs] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Loading animation for auto-calculate */
.btn-outline-info:active[b-flbrca9khs] {
    transform: scale(0.95);
}

/* Visual feedback for low confidence fields */
.low-confidence-field[b-flbrca9khs] {
    border-color: #ffc107 !important;
    background-color: #fff8e1 !important;
}

/* Highlight extracted values */
@keyframes highlight-pulse-b-flbrca9khs {
    0% {
        background-color: #fff3cd;
    }
    50% {
        background-color: #ffeaa7;
    }
    100% {
        background-color: #fff3cd;
    }
}

.extracted-value[b-flbrca9khs] {
    animation: highlight-pulse-b-flbrca9khs 2s ease-in-out;
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/NutritionFacts/ProductImageScanner.razor.rz.scp.css */
/* Upload Area Styles */
.upload-area[b-qmyamh312l] {
    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-qmyamh312l] {
    border-color: #007bff;
    background-color: #f8f9fa;
}

.upload-area.drag-over[b-qmyamh312l] {
    border-color: #28a745;
    background-color: #e8f5e9;
}

.upload-label[b-qmyamh312l] {
    cursor: pointer;
    color: #495057;
    width: 100%;
    margin: 0;
}

/* Image Preview Styles */
.image-preview img[b-qmyamh312l] {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

.image-info[b-qmyamh312l] {
    padding: 5px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

/* Card Body Adjustments */
.card-body[b-qmyamh312l] {
    padding-bottom: 2rem;
}

/* Ensure buttons are always visible */
.product-image-scanner .btn[b-qmyamh312l] {
    z-index: 10;
    position: relative;
}

/* Action Buttons Container */
.mt-3.mb-4.d-flex.gap-2[b-qmyamh312l] {
    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-qmyamh312l] {
    position: relative;
    margin-top: 1rem;
    animation: slideInUp-b-qmyamh312l 0.3s ease-out;
}

.extraction-results-card[b-qmyamh312l] {
    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-qmyamh312l] {
    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-qmyamh312l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e9ecef;
}

.status-indicator[b-qmyamh312l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #198754;
    font-weight: 600;
}

.status-indicator i[b-qmyamh312l] {
    font-size: 1.2rem;
}

.confidence-badge[b-qmyamh312l] {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
}

.confidence-excellent[b-qmyamh312l] {
    background: linear-gradient(135deg, #198754, #20c997);
}

.confidence-good[b-qmyamh312l] {
    background: linear-gradient(135deg, #0d6efd, #6610f2);
}

.confidence-fair[b-qmyamh312l] {
    background: linear-gradient(135deg, #fd7e14, #ffc107);
}

.confidence-low[b-qmyamh312l] {
    background: linear-gradient(135deg, #dc3545, #fd7e14);
}

.confidence-unknown[b-qmyamh312l] {
    background: linear-gradient(135deg, #6c757d, #adb5bd);
}

.nutrition-summary[b-qmyamh312l] {
    margin-bottom: 1.5rem;
}

.product-info[b-qmyamh312l] {
    margin-bottom: 1rem;
}

.product-info h6[b-qmyamh312l] {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #212529;
}

.product-info .brand[b-qmyamh312l] {
    color: #6c757d;
    font-size: 0.9rem;
    font-style: italic;
}

.macro-grid[b-qmyamh312l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.macro-item[b-qmyamh312l] {
    text-align: center;
    padding: 0.75rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.macro-item:hover[b-qmyamh312l] {
    border-color: #0d6efd;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.macro-value[b-qmyamh312l] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0d6efd;
    margin-bottom: 0.25rem;
}

.macro-label[b-qmyamh312l] {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.serving-info[b-qmyamh312l] {
    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-qmyamh312l] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.action-buttons .btn[b-qmyamh312l] {
    border-radius: 8px;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
    border: 2px solid;
}

.btn-apply[b-qmyamh312l] {
    background: linear-gradient(135deg, #198754, #20c997);
    border-color: #198754;
    flex: 1;
    min-width: 140px;
}

.btn-apply:hover[b-qmyamh312l] {
    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-qmyamh312l] {
    border-color: #6c757d;
    color: #6c757d;
    background: white;
}

.btn-details:hover[b-qmyamh312l] {
    background: #6c757d;
    color: white;
    transform: translateY(-1px);
}

.btn-retry[b-qmyamh312l] {
    border-color: #fd7e14;
    color: #fd7e14;
    background: white;
}

.btn-retry:hover[b-qmyamh312l] {
    background: #fd7e14;
    color: white;
    border-color: #fd7e14;
    transform: translateY(-1px);
}

/* Animation for slide-in effect */
@keyframes slideInUp-b-qmyamh312l {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .extraction-results-card[b-qmyamh312l] {
        padding: 1rem;
    }
    
    .macro-grid[b-qmyamh312l] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .action-buttons[b-qmyamh312l] {
        flex-direction: column;
    }
    
    .action-buttons .btn[b-qmyamh312l] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .results-header[b-qmyamh312l] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    
    .macro-grid[b-qmyamh312l] {
        grid-template-columns: 1fr 1fr;
    }
    
    .macro-value[b-qmyamh312l] {
        font-size: 1.25rem;
    }
}

/* Clean Extraction Results Styles */
.extraction-results-clean[b-qmyamh312l] {
    animation: fadeInUp-b-qmyamh312l 0.5s ease-out;
    padding: 0;
}

.results-header-clean[b-qmyamh312l] {
    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-qmyamh312l] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.status-icon[b-qmyamh312l] {
    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-qmyamh312l] {
    margin: 0;
    color: #212529;
    font-weight: 600;
}

.status-text small[b-qmyamh312l] {
    color: #6c757d;
}

.confidence-badge-clean[b-qmyamh312l] {
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    color: white;
    text-align: center;
}

.product-card[b-qmyamh312l] {
    background: white;
    padding: 2rem;
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
}

.product-header[b-qmyamh312l] {
    text-align: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid #f1f3f4;
    padding-bottom: 1.5rem;
}

.product-name[b-qmyamh312l] {
    margin: 0 0 0.5rem 0;
    color: #212529;
    font-weight: 700;
    font-size: 1.75rem;
}

.product-brand[b-qmyamh312l] {
    display: block;
    color: #6c757d;
    font-size: 1.1rem;
    font-style: italic;
    margin-bottom: 0.75rem;
}

.serving-size[b-qmyamh312l] {
    color: #495057;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    background: #f8f9fa;
    border-radius: 20px;
    display: inline-block;
}

.nutrition-grid[b-qmyamh312l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.nutrition-item[b-qmyamh312l] {
    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-qmyamh312l]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    transition: all 0.3s ease;
}

.nutrition-item.calories[b-qmyamh312l]::before {
    background: linear-gradient(90deg, #fd7e14, #ffc107);
}

.nutrition-item.fat[b-qmyamh312l]::before {
    background: linear-gradient(90deg, #dc3545, #fd7e14);
}

.nutrition-item.carbs[b-qmyamh312l]::before {
    background: linear-gradient(90deg, #0d6efd, #6610f2);
}

.nutrition-item.protein[b-qmyamh312l]::before {
    background: linear-gradient(90deg, #198754, #20c997);
}

.nutrition-item:hover[b-qmyamh312l] {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: transparent;
}

.nutrition-item:hover[b-qmyamh312l]::before {
    height: 6px;
}

.nutrition-value[b-qmyamh312l] {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.nutrition-item.calories .nutrition-value[b-qmyamh312l] {
    color: #fd7e14;
}

.nutrition-item.fat .nutrition-value[b-qmyamh312l] {
    color: #dc3545;
}

.nutrition-item.carbs .nutrition-value[b-qmyamh312l] {
    color: #0d6efd;
}

.nutrition-item.protein .nutrition-value[b-qmyamh312l] {
    color: #198754;
}

.nutrition-value .unit[b-qmyamh312l] {
    font-size: 1.25rem;
    font-weight: 500;
    color: #6c757d;
    margin-left: 0.25rem;
}

.nutrition-label[b-qmyamh312l] {
    font-size: 1rem;
    color: #495057;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.action-section[b-qmyamh312l] {
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 0 0 12px 12px;
    border: 1px solid #dee2e6;
    border-top: none;
    text-align: center;
}

.btn-primary-action[b-qmyamh312l] {
    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-qmyamh312l] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(25, 135, 84, 0.4);
    background: linear-gradient(135deg, #157347, #1a9b72);
}

.secondary-actions[b-qmyamh312l] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.secondary-actions .btn[b-qmyamh312l] {
    padding: 0.5rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.secondary-actions .btn:hover[b-qmyamh312l] {
    transform: translateY(-1px);
}

/* Animation for fade in */
@keyframes fadeInUp-b-qmyamh312l {
    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-qmyamh312l] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        padding: 1rem;
    }
    
    .product-card[b-qmyamh312l] {
        padding: 1.5rem;
    }
    
    .nutrition-grid[b-qmyamh312l] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .nutrition-item[b-qmyamh312l] {
        padding: 1rem;
    }
    
    .nutrition-value[b-qmyamh312l] {
        font-size: 2rem;
    }
    
    .product-name[b-qmyamh312l] {
        font-size: 1.5rem;
    }
    
    .action-section[b-qmyamh312l] {
        padding: 1.5rem;
    }
    
    .secondary-actions[b-qmyamh312l] {
        flex-direction: column;
    }
    
    .secondary-actions .btn[b-qmyamh312l] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .nutrition-grid[b-qmyamh312l] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .nutrition-value[b-qmyamh312l] {
        font-size: 1.75rem;
    }
    
    .product-name[b-qmyamh312l] {
        font-size: 1.25rem;
    }
}

/* Debug information styling */
.debug-info[b-qmyamh312l] {
    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-qmyamh312l] {
    animation: fadeInUp-b-qmyamh312l 0.3s ease-out;
}

.results-header-compact[b-qmyamh312l] {
    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-qmyamh312l] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.results-header-compact .status-icon[b-qmyamh312l] {
    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-qmyamh312l] {
    margin: 0;
    color: #212529;
    font-weight: 600;
    font-size: 1rem;
}

.results-header-compact .status-text small[b-qmyamh312l] {
    color: #6c757d;
    font-size: 0.8rem;
}

.confidence-badge-compact[b-qmyamh312l] {
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.8rem;
    color: white;
    text-align: center;
}

.action-section-compact[b-qmyamh312l] {
    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-qmyamh312l] {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
        padding: 0.75rem;
    }
    
    .action-section-compact[b-qmyamh312l] {
        flex-direction: column;
        padding: 0.75rem;
    }
    
    .action-section-compact .btn[b-qmyamh312l] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .results-header-compact .status-icon[b-qmyamh312l] {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }
    
    .confidence-badge-compact[b-qmyamh312l] {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/Pages/Demo/MobileComponentsDemo.razor.rz.scp.css */
/* Mobile Components Demo Page Styles */

.mobile-demo-page[b-j4ifgrrbf2] {
    padding-bottom: 80px; /* Space for bottom nav */
    min-height: 100vh;
}

.page-header[b-j4ifgrrbf2] {
    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-j4ifgrrbf2] {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--md-sys-color-on-surface, #000);
}

.filter-btn[b-j4ifgrrbf2] {
    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-j4ifgrrbf2] {
    background: var(--md-sys-color-primary-container, #e8f5e9);
}

.filter-btn:active[b-j4ifgrrbf2] {
    transform: scale(0.95);
}

.filter-btn .badge[b-j4ifgrrbf2] {
    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-j4ifgrrbf2] {
    padding: 16px;
    background: var(--md-sys-color-surface, #fff);
}

.demo-section h2[b-j4ifgrrbf2] {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--md-sys-color-on-surface, #000);
}

.demo-section p[b-j4ifgrrbf2] {
    margin: 0;
    font-size: 14px;
}

/* Product Card Styles */
.product-card[b-j4ifgrrbf2] {
    display: flex;
    gap: 12px;
    padding: 12px;
}

.product-image-placeholder[b-j4ifgrrbf2] {
    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-j4ifgrrbf2] {
    flex: 1;
    min-width: 0; /* For text truncation */
}

.product-name[b-j4ifgrrbf2] {
    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-j4ifgrrbf2] {
    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-j4ifgrrbf2] {
    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-j4ifgrrbf2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.product-price[b-j4ifgrrbf2] {
    font-size: 18px;
    font-weight: 700;
    color: var(--md-sys-color-primary, #4caf50);
}

.product-rating[b-j4ifgrrbf2] {
    font-size: 14px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant, #666);
}

/* Filter Styles */
.filter-group[b-j4ifgrrbf2] {
    margin-bottom: 24px;
}

.filter-group h3[b-j4ifgrrbf2] {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface, #000);
}

.filter-checkbox[b-j4ifgrrbf2] {
    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-j4ifgrrbf2] {
    background: var(--md-sys-color-surface-variant, #f5f5f5);
}

.filter-checkbox input[type="checkbox"][b-j4ifgrrbf2] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.filter-checkbox span[b-j4ifgrrbf2] {
    font-size: 14px;
    color: var(--md-sys-color-on-surface, #000);
}

.price-slider[b-j4ifgrrbf2] {
    width: 100%;
    margin: 8px 0;
    accent-color: var(--md-sys-color-primary, #4caf50);
}

.filter-group p[b-j4ifgrrbf2] {
    margin: 8px 0 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--md-sys-color-primary, #4caf50);
}

.rating-filters[b-j4ifgrrbf2] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rating-btn[b-j4ifgrrbf2] {
    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-j4ifgrrbf2] {
    background: var(--md-sys-color-surface-variant, #f5f5f5);
}

.rating-btn.active[b-j4ifgrrbf2] {
    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-j4ifgrrbf2] {
        background: var(--md-sys-color-surface, #1e1e1e);
        border-bottom-color: var(--md-sys-color-outline-variant, #3a3a3a);
    }

    .page-header h1[b-j4ifgrrbf2] {
        color: var(--md-sys-color-on-surface, #fff);
    }

    .filter-btn:hover[b-j4ifgrrbf2] {
        background: var(--md-sys-color-primary-container, #2d4a2f);
    }

    .demo-section[b-j4ifgrrbf2] {
        background: var(--md-sys-color-surface, #1e1e1e);
    }

    .demo-section h2[b-j4ifgrrbf2] {
        color: var(--md-sys-color-on-surface, #fff);
    }

    .product-name[b-j4ifgrrbf2] {
        color: var(--md-sys-color-on-surface, #fff);
    }

    .product-category[b-j4ifgrrbf2],
    .product-description[b-j4ifgrrbf2],
    .product-rating[b-j4ifgrrbf2] {
        color: var(--md-sys-color-on-surface-variant, #b0b0b0);
    }

    .filter-checkbox:hover[b-j4ifgrrbf2] {
        background: var(--md-sys-color-surface-variant, #2a2a2a);
    }

    .filter-checkbox span[b-j4ifgrrbf2],
    .filter-group h3[b-j4ifgrrbf2] {
        color: var(--md-sys-color-on-surface, #fff);
    }

    .rating-btn:hover[b-j4ifgrrbf2] {
        background: var(--md-sys-color-surface-variant, #2a2a2a);
    }

    .rating-btn.active[b-j4ifgrrbf2] {
        background: var(--md-sys-color-primary, #66bb6a);
        color: var(--md-sys-color-on-primary, #000);
    }
}

/* Mobile optimizations */
@media (max-width: 360px) {
    .page-header[b-j4ifgrrbf2] {
        padding: 12px;
    }

    .page-header h1[b-j4ifgrrbf2] {
        font-size: 18px;
    }

    .filter-btn[b-j4ifgrrbf2] {
        padding: 6px 12px;
        font-size: 13px;
    }

    .product-card[b-j4ifgrrbf2] {
        padding: 10px;
    }

    .product-image-placeholder[b-j4ifgrrbf2] {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .product-name[b-j4ifgrrbf2] {
        font-size: 15px;
    }

    .product-price[b-j4ifgrrbf2] {
        font-size: 16px;
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/Pages/ForgotPassword.razor.rz.scp.css */
.card[b-5rrbwpkma7] {
    border-color: #e0e0e0;
    border-radius: 4px;
}

.card-title[b-5rrbwpkma7] {
    color: #f08a12;
}

.form-control.custom-input[b-5rrbwpkma7] {
    width: 100%;
    padding: 0.375rem 0.75rem;
    border-color: #e0e0e0;
}

.form-control.custom-input:focus[b-5rrbwpkma7] {
    box-shadow: none;
    border-color: #f08a12;
}

.btn-primary[b-5rrbwpkma7] {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover[b-5rrbwpkma7] {
    background-color: #0056b3;
    border-color: #0056b3;
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/Pages/Login.razor.rz.scp.css */
/* Modern Minimalist Login Design */
.login-container[b-w5fw11g297] {
    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-w5fw11g297] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 120px);
    padding: 2rem 1rem;
}

.auth-card[b-w5fw11g297] {
    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-w5fw11g297] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.auth-title[b-w5fw11g297] {
    font-size: 1.875rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.02em;
}

.auth-subtitle[b-w5fw11g297] {
    font-size: 1rem;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Modern Alert Styles */
.alert-modern[b-w5fw11g297] {
    padding: 1rem 1.25rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    border: none;
    font-weight: 500;
}

.alert-modern.alert-success[b-w5fw11g297] {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border-left: 4px solid #22c55e;
}

.alert-modern.alert-danger[b-w5fw11g297] {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #dc2626;
    border-left: 4px solid #ef4444;
}

.alert-modern.alert-info[b-w5fw11g297] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #2563eb;
    border-left: 4px solid #3b82f6;
}

/* Form Styles */
.auth-form[b-w5fw11g297] {
    margin-bottom: 2rem;
}

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

.form-label[b-w5fw11g297] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}

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

.form-input[b-w5fw11g297] {
    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-w5fw11g297]::placeholder {
    color: #9ca3af;
}

.form-input:focus[b-w5fw11g297] {
    outline: none;
    border-color: #f08a12;
    background: white;
    box-shadow: 0 0 0 3px rgba(240, 138, 18, 0.08);
}

.input-icon[b-w5fw11g297] {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    z-index: 2;
}

.form-input:focus + .input-icon[b-w5fw11g297] {
    color: #f08a12;
}

.password-toggle[b-w5fw11g297] {
    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-w5fw11g297] {
    color: #6b7280;
}

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

.checkbox-wrapper[b-w5fw11g297] {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 0.5rem;
}

.checkbox-input[b-w5fw11g297] {
    display: none;
}

.checkbox-custom[b-w5fw11g297] {
    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-w5fw11g297] {
    background: #f08a12;
    border-color: #f08a12;
}

.checkbox-input:checked + .checkbox-custom[b-w5fw11g297]::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-w5fw11g297] {
    font-size: 0.875rem;
    color: #6b7280;
    user-select: none;
}

.forgot-link[b-w5fw11g297] {
    font-size: 0.875rem;
    color: #f08a12;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.forgot-link:hover[b-w5fw11g297] {
    color: #d67a0d;
    text-decoration: none;
}

/* Primary Button */
.btn-primary[b-w5fw11g297] {
    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-w5fw11g297] {
    background: #d67a0d;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(240, 138, 18, 0.3);
}

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

.btn-primary:disabled[b-w5fw11g297] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-loading[b-w5fw11g297] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.spinner[b-w5fw11g297] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin-b-w5fw11g297 1s linear infinite;
}

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

/* Auth Divider */
.auth-divider[b-w5fw11g297] {
    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-w5fw11g297]::before,
.auth-divider[b-w5fw11g297]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #e5e7eb 50%, transparent 100%);
}

.auth-divider span[b-w5fw11g297] {
    padding: 0 1rem;
    background: white;
    position: relative;
    z-index: 1;
}

/* Ghost Button */
.btn-ghost[b-w5fw11g297] {
    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-w5fw11g297] {
    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-w5fw11g297] {
    transform: translateY(0);
    background: #f3f4f6;
}

.btn-ghost svg[b-w5fw11g297] {
    transition: all 0.2s ease;
}

.btn-ghost:hover svg[b-w5fw11g297] {
    transform: scale(1.05);
    stroke: #374151;
}

/* Footer */
.auth-footer[b-w5fw11g297] {
    text-align: center;
    margin-top: 2rem;
}

.signup-prompt[b-w5fw11g297] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

.signup-link[b-w5fw11g297] {
    color: #f08a12;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.signup-link:hover[b-w5fw11g297] {
    color: #d67a0d;
    text-decoration: none;
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
    .auth-card[b-w5fw11g297] {
        padding: 2rem 1.5rem;
        margin: 1rem;
        border-radius: 12px;
    }
    
    .auth-title[b-w5fw11g297] {
        font-size: 1.5rem;
    }
    
    .auth-nav[b-w5fw11g297] {
        gap: 1rem;
    }
    
    .auth-link[b-w5fw11g297] {
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
    }
    
    .form-options[b-w5fw11g297] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
}

@media (max-width: 320px) {
    .auth-card[b-w5fw11g297] {
        padding: 1.5rem 1rem;
    }
    
    .brand-text[b-w5fw11g297] {
        font-size: 1.25rem;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    *[b-w5fw11g297] {
        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-w5fw11g297],
.btn-ghost:focus-visible[b-w5fw11g297],
.forgot-link:focus-visible[b-w5fw11g297],
.signup-link:focus-visible[b-w5fw11g297],
.auth-link:focus-visible[b-w5fw11g297] {
    outline: 2px solid #f08a12;
    outline-offset: 2px;
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/Pages/ResetPassword.razor.rz.scp.css */
.input-group-text[b-r6v1ac9lqi] {
    background-color: transparent;
    border-right: none;
}
.input-group .form-control[b-r6v1ac9lqi] {
    border-left: none;
}
.input-group .btn[b-r6v1ac9lqi] {
    border-left: none;
}
.card[b-r6v1ac9lqi] {
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.card-title[b-r6v1ac9lqi] {
    color: #f08a12;
}
.btn-primary[b-r6v1ac9lqi] {
    background-color: #007bff;
    border-color: #007bff;
}
.btn-primary:hover[b-r6v1ac9lqi] {
    background-color: #0056b3;
    border-color: #0056b3;
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/Pages/SignUp.razor.rz.scp.css */
/* Modern Minimalist SignUp Design */
.signup-container[b-3kvw6qxr0g] {
    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-3kvw6qxr0g] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 120px);
    padding: 2rem 1rem;
}

.auth-card[b-3kvw6qxr0g] {
    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-3kvw6qxr0g] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.auth-title[b-3kvw6qxr0g] {
    font-size: 1.875rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.02em;
}

.auth-subtitle[b-3kvw6qxr0g] {
    font-size: 1rem;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Modern Alert Styles */
.alert-modern[b-3kvw6qxr0g] {
    padding: 1rem 1.25rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    border: none;
    font-weight: 500;
}

.alert-modern.alert-success[b-3kvw6qxr0g] {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border-left: 4px solid #22c55e;
}

.alert-modern.alert-danger[b-3kvw6qxr0g] {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #dc2626;
    border-left: 4px solid #ef4444;
}

.alert-modern.alert-warning[b-3kvw6qxr0g] {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    color: #d97706;
    border-left: 4px solid #f59e0b;
}

.alert-modern.alert-info[b-3kvw6qxr0g] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #2563eb;
    border-left: 4px solid #3b82f6;
}

/* Form Styles */
.auth-form[b-3kvw6qxr0g] {
    margin-bottom: 2rem;
}

.form-group[b-3kvw6qxr0g] {
    margin-bottom: 1.5rem;
}

.form-label[b-3kvw6qxr0g] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}

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

.form-input[b-3kvw6qxr0g] {
    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-3kvw6qxr0g] {
    padding-right: 5.5rem; /* Extra space for both generator and toggle buttons */
}

.form-input[b-3kvw6qxr0g]::placeholder {
    color: #9ca3af;
}

.form-input:focus[b-3kvw6qxr0g] {
    outline: none;
    border-color: #f08a12;
    background: white;
    box-shadow: 0 0 0 3px rgba(240, 138, 18, 0.08);
}

.input-icon[b-3kvw6qxr0g] {
    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-3kvw6qxr0g] {
    color: #f08a12;
}

/* Password Generator Button */
.password-generator[b-3kvw6qxr0g] {
    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-3kvw6qxr0g] {
    color: #f08a12;
    background: rgba(240, 138, 18, 0.1);
}

.password-generator:active[b-3kvw6qxr0g] {
    transform: translateY(-50%) scale(0.95);
}

/* Password Toggle Button */
.password-toggle[b-3kvw6qxr0g] {
    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-3kvw6qxr0g] {
    color: #6b7280;
}

/* Form Options */
.form-options[b-3kvw6qxr0g] {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.checkbox-wrapper[b-3kvw6qxr0g] {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    gap: 0.5rem;
    line-height: 1.5;
}

.checkbox-input[b-3kvw6qxr0g] {
    display: none;
}

.checkbox-custom[b-3kvw6qxr0g] {
    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-3kvw6qxr0g] {
    background: #f08a12;
    border-color: #f08a12;
}

.checkbox-input:checked + .checkbox-custom[b-3kvw6qxr0g]::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-3kvw6qxr0g] {
    font-size: 0.875rem;
    color: #6b7280;
    user-select: none;
    line-height: 1.5;
}

.checkbox-label .signup-link[b-3kvw6qxr0g] {
    font-size: 0.875rem;
}

/* Primary Button */
.btn-primary[b-3kvw6qxr0g] {
    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-3kvw6qxr0g] {
    background: #d67a0d;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(240, 138, 18, 0.3);
}

.btn-primary:active:not(:disabled)[b-3kvw6qxr0g] {
    transform: translateY(0);
}

.btn-primary:disabled[b-3kvw6qxr0g] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-loading[b-3kvw6qxr0g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.spinner[b-3kvw6qxr0g] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin-b-3kvw6qxr0g 1s linear infinite;
}

@keyframes spin-b-3kvw6qxr0g {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Validation Summary */
.validation-summary[b-3kvw6qxr0g] {
    text-align: center;
    margin-top: 1rem;
}

/* Footer */
.auth-footer[b-3kvw6qxr0g] {
    text-align: center;
    margin-top: 2rem;
}

.signup-prompt[b-3kvw6qxr0g] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

.signup-link[b-3kvw6qxr0g] {
    color: #f08a12;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.signup-link:hover[b-3kvw6qxr0g] {
    color: #d67a0d;
    text-decoration: none;
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
    .auth-card[b-3kvw6qxr0g] {
        padding: 2rem 1.5rem;
        margin: 1rem;
        border-radius: 12px;
    }
    
    .auth-title[b-3kvw6qxr0g] {
        font-size: 1.5rem;
    }
    
    .auth-subtitle[b-3kvw6qxr0g] {
        font-size: 0.875rem;
    }
    
    .form-input.password-with-generator[b-3kvw6qxr0g] {
        padding-right: 4.5rem; /* Reduced space for mobile */
    }
    
    .password-generator[b-3kvw6qxr0g] {
        right: 2.5rem;
        padding: 0.25rem;
    }
    
    .password-toggle[b-3kvw6qxr0g] {
        padding: 0.125rem;
    }
}

@media (max-width: 320px) {
    .auth-card[b-3kvw6qxr0g] {
        padding: 1.5rem 1rem;
    }
    
    .auth-title[b-3kvw6qxr0g] {
        font-size: 1.375rem;
    }
    
    .form-input[b-3kvw6qxr0g] {
        font-size: 0.9375rem;
    }
    
    .form-input.password-with-generator[b-3kvw6qxr0g] {
        padding-right: 4rem;
    }
    
    .password-generator[b-3kvw6qxr0g] {
        right: 2.25rem;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    *[b-3kvw6qxr0g] {
        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-3kvw6qxr0g],
.password-generator:focus-visible[b-3kvw6qxr0g],
.password-toggle:focus-visible[b-3kvw6qxr0g],
.signup-link:focus-visible[b-3kvw6qxr0g] {
    outline: 2px solid #f08a12;
    outline-offset: 2px;
}

.form-input:focus-visible[b-3kvw6qxr0g] {
    outline: none; /* We use box-shadow instead for inputs */
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/PasswordGenerationModal.razor.rz.scp.css */
/* Password Generation Modal - Modern Minimalist Design */

/* Backdrop */
.password-modal-backdrop[b-40x61fqkh3] {
    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-40x61fqkh3 0.2s ease-out;
}

@keyframes fade-in-b-40x61fqkh3 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Dialog */
.password-modal-dialog[b-40x61fqkh3] {
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    animation: scale-in-b-40x61fqkh3 0.2s ease-out;
}

@keyframes scale-in-b-40x61fqkh3 {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Modal Content */
.password-modal-content[b-40x61fqkh3] {
    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-40x61fqkh3] {
    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-40x61fqkh3] {
    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-40x61fqkh3] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.02em;
}

.password-modal-subtitle[b-40x61fqkh3] {
    font-size: 0.9375rem;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* Body */
.password-modal-body[b-40x61fqkh3] {
    padding: 2rem;
}

/* Password Display */
.password-display[b-40x61fqkh3] {
    margin-bottom: 2rem;
}

.password-label[b-40x61fqkh3] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.75rem;
    letter-spacing: 0.01em;
}

.password-input-wrapper[b-40x61fqkh3] {
    position: relative;
    display: flex;
}

.password-input[b-40x61fqkh3] {
    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-40x61fqkh3] {
    outline: none;
    border-color: #f08a12;
    background: white;
    box-shadow: 0 0 0 3px rgba(240, 138, 18, 0.08);
}

.password-input:hover[b-40x61fqkh3] {
    border-color: #d1d5db;
    background: white;
}

.password-copy-btn[b-40x61fqkh3] {
    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-40x61fqkh3] {
    color: #f08a12;
    background: rgba(240, 138, 18, 0.1);
}

.password-copy-btn:active[b-40x61fqkh3] {
    transform: translateY(-50%) scale(0.95);
}

/* Warning Section */
.password-warning[b-40x61fqkh3] {
    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-40x61fqkh3] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #d97706;
    margin-top: 0.125rem;
}

.warning-content[b-40x61fqkh3] {
    flex: 1;
}

.warning-title[b-40x61fqkh3] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #92400e;
    margin: 0 0 0.25rem 0;
}

.warning-text[b-40x61fqkh3] {
    font-size: 0.8125rem;
    color: #a16207;
    margin: 0;
    line-height: 1.4;
}

/* Footer */
.password-modal-footer[b-40x61fqkh3] {
    padding: 1.5rem 2rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.modal-primary-actions[b-40x61fqkh3] {
    display: flex;
    gap: 0.75rem;
}

/* Buttons */
.btn-primary[b-40x61fqkh3] {
    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-40x61fqkh3] {
    background: #d67a0d;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(240, 138, 18, 0.3);
}

.btn-primary:active[b-40x61fqkh3] {
    transform: translateY(0);
}

.btn-outline[b-40x61fqkh3] {
    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-40x61fqkh3] {
    border-color: #d1d5db;
    background: #f9fafb;
    color: #374151;
}

.btn-outline:active[b-40x61fqkh3] {
    background: #f3f4f6;
}

.btn-secondary[b-40x61fqkh3] {
    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-40x61fqkh3] {
    background: rgba(240, 138, 18, 0.05);
    border-color: #d67a0d;
    color: #d67a0d;
}

.btn-secondary:active[b-40x61fqkh3] {
    background: rgba(240, 138, 18, 0.1);
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
    .password-modal-backdrop[b-40x61fqkh3] {
        padding: 0.5rem;
    }

    .password-modal-header[b-40x61fqkh3] {
        padding: 2rem 1.5rem 1.25rem;
    }

    .password-modal-icon[b-40x61fqkh3] {
        width: 56px;
        height: 56px;
        margin-bottom: 1.25rem;
    }

    .password-modal-title[b-40x61fqkh3] {
        font-size: 1.375rem;
    }

    .password-modal-body[b-40x61fqkh3] {
        padding: 1.5rem;
    }

    .password-modal-footer[b-40x61fqkh3] {
        padding: 1.25rem 1.5rem 1.75rem;
        flex-direction: column;
        gap: 1rem;
    }

    .modal-primary-actions[b-40x61fqkh3] {
        width: 100%;
        justify-content: stretch;
    }

    .btn-primary[b-40x61fqkh3],
    .btn-outline[b-40x61fqkh3] {
        flex: 1;
        justify-content: center;
    }

    .btn-secondary[b-40x61fqkh3] {
        width: 100%;
        justify-content: center;
    }

    .password-warning[b-40x61fqkh3] {
        padding: 1rem;
        gap: 0.75rem;
    }

    .warning-title[b-40x61fqkh3] {
        font-size: 0.8125rem;
    }

    .warning-text[b-40x61fqkh3] {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .password-modal-header[b-40x61fqkh3] {
        padding: 1.5rem 1rem 1rem;
    }

    .password-modal-body[b-40x61fqkh3] {
        padding: 1.25rem;
    }

    .password-modal-footer[b-40x61fqkh3] {
        padding: 1rem 1.25rem 1.5rem;
    }

    .password-input[b-40x61fqkh3] {
        font-size: 0.875rem;
        padding: 0.875rem 3rem 0.875rem 0.875rem;
    }

    .password-copy-btn[b-40x61fqkh3] {
        padding: 0.375rem;
        right: 0.625rem;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .password-modal-backdrop[b-40x61fqkh3],
    .password-modal-dialog[b-40x61fqkh3],
    *[b-40x61fqkh3] {
        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-40x61fqkh3],
.btn-primary:focus-visible[b-40x61fqkh3],
.btn-outline:focus-visible[b-40x61fqkh3],
.btn-secondary:focus-visible[b-40x61fqkh3] {
    outline: 2px solid #f08a12;
    outline-offset: 2px;
}

.password-input:focus-visible[b-40x61fqkh3] {
    outline: none; /* We use box-shadow instead */
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .password-modal-content[b-40x61fqkh3] {
        border-width: 2px;
    }
    
    .password-input[b-40x61fqkh3],
    .btn-outline[b-40x61fqkh3] {
        border-width: 2px;
    }
    
    .password-warning[b-40x61fqkh3] {
        border-width: 2px;
    }
}

/* Dark mode support (if needed in the future) */
@media (prefers-color-scheme: dark) {
    .password-modal-content[b-40x61fqkh3] {
        background: #1f2937;
        border-color: rgba(255, 255, 255, 0.1);
    }
    
    .password-modal-header[b-40x61fqkh3] {
        background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
        border-color: rgba(255, 255, 255, 0.1);
    }
    
    .password-modal-title[b-40x61fqkh3] {
        color: #f9fafb;
    }
    
    .password-modal-subtitle[b-40x61fqkh3] {
        color: #d1d5db;
    }
    
    .password-label[b-40x61fqkh3] {
        color: #f3f4f6;
    }
    
    .password-input[b-40x61fqkh3] {
        background: #374151;
        border-color: #4b5563;
        color: #f9fafb;
    }
    
    .password-input:focus[b-40x61fqkh3] {
        background: #4b5563;
    }
    
    .btn-outline[b-40x61fqkh3] {
        border-color: #4b5563;
        color: #d1d5db;
    }
    
    .btn-outline:hover[b-40x61fqkh3] {
        background: #374151;
        border-color: #6b7280;
        color: #f3f4f6;
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/PortionRevealMoment/PortionRevealMoment.razor.rz.scp.css */
/* PortionRevealMoment - The "Aha Moment" Component */

.portion-reveal-container[b-1whaexaerd] {
    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-1whaexaerd] {
    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-1whaexaerd {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.portion-reveal-container:not(.loading):not(.revealed)[b-1whaexaerd] {
    animation: fallback-reveal-b-1whaexaerd 0.4s ease 2s forwards;
}

/* Header */
.reveal-header[b-1whaexaerd] {
    text-align: center;
    margin-bottom: 2rem;
}

.reveal-title[b-1whaexaerd] {
    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-1whaexaerd] {
    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-1whaexaerd] {
    font-size: 0.9rem;
}

/* Animated Checkmark */
.animated-checkmark[b-1whaexaerd] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkmark-svg[b-1whaexaerd] {
    width: 100%;
    height: 100%;
}

.checkmark-circle[b-1whaexaerd] {
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 2;
    animation: circle-fill-b-1whaexaerd 0.6s ease-out forwards;
}

.checkmark-check[b-1whaexaerd] {
    stroke: white;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: check-draw-b-1whaexaerd 0.4s ease-out 0.4s forwards;
}

@keyframes circle-fill-b-1whaexaerd {
    0% { stroke-dasharray: 0, 157; }
    100% { stroke-dasharray: 157, 157; }
}

@keyframes check-draw-b-1whaexaerd {
    100% { stroke-dashoffset: 0; }
}

/* Portions List */
.portions-list[b-1whaexaerd] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.portion-item[b-1whaexaerd] {
    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-1whaexaerd 0.4s ease forwards;
}

.stagger-item[b-1whaexaerd] {
    animation-fill-mode: both;
}

@keyframes slide-in-b-1whaexaerd {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Food Icons */
.portion-icon[b-1whaexaerd] {
    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-1whaexaerd] { background: linear-gradient(135deg, #FFE0B2 0%, #FFCC80 100%); }
.portion-icon.icon-poultry[b-1whaexaerd]::before { content: '\1F357'; }

.portion-icon.icon-meat[b-1whaexaerd] { background: linear-gradient(135deg, #FFCDD2 0%, #EF9A9A 100%); }
.portion-icon.icon-meat[b-1whaexaerd]::before { content: '\1F969'; }

.portion-icon.icon-fish[b-1whaexaerd] { background: linear-gradient(135deg, #B3E5FC 0%, #81D4FA 100%); }
.portion-icon.icon-fish[b-1whaexaerd]::before { content: '\1F41F'; }

.portion-icon.icon-grain[b-1whaexaerd] { background: linear-gradient(135deg, #FFF9C4 0%, #FFF59D 100%); }
.portion-icon.icon-grain[b-1whaexaerd]::before { content: '\1F35A'; }

.portion-icon.icon-egg[b-1whaexaerd] { background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%); }
.portion-icon.icon-egg[b-1whaexaerd]::before { content: '\1F95A'; }

.portion-icon.icon-dairy[b-1whaexaerd] { background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%); }
.portion-icon.icon-dairy[b-1whaexaerd]::before { content: '\1F95B'; }

.portion-icon.icon-vegetable[b-1whaexaerd] { background: linear-gradient(135deg, #C8E6C9 0%, #A5D6A7 100%); }
.portion-icon.icon-vegetable[b-1whaexaerd]::before { content: '\1F966'; }

.portion-icon.icon-fruit[b-1whaexaerd] { background: linear-gradient(135deg, #FFCCBC 0%, #FFAB91 100%); }
.portion-icon.icon-fruit[b-1whaexaerd]::before { content: '\1F34E'; }

.portion-icon.icon-nut[b-1whaexaerd] { background: linear-gradient(135deg, #D7CCC8 0%, #BCAAA4 100%); }
.portion-icon.icon-nut[b-1whaexaerd]::before { content: '\1F95C'; }

.portion-icon.icon-default[b-1whaexaerd] { background: linear-gradient(135deg, #E0E0E0 0%, #BDBDBD 100%); }
.portion-icon.icon-default[b-1whaexaerd]::before { content: '\1F37D\FE0F'; }

/* Portion Details */
.portion-details[b-1whaexaerd] {
    flex: 1;
    min-width: 0;
}

.portion-name[b-1whaexaerd] {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a2e;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Portion Amount */
.portion-amount[b-1whaexaerd] {
    text-align: right;
}

.amount-value[b-1whaexaerd] {
    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-1whaexaerd] {
    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-1whaexaerd] {
    opacity: 1;
    transform: translateY(0);
}

.macro-summary[b-1whaexaerd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.macro-item[b-1whaexaerd] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.macro-value[b-1whaexaerd] {
    font-size: 1.1rem;
    font-weight: 700;
}

.macro-label[b-1whaexaerd] {
    font-size: 0.8rem;
    color: #666;
}

.macro-item.calories .macro-value[b-1whaexaerd] { color: #E53935; }
.macro-item.protein .macro-value[b-1whaexaerd] { color: #1E88E5; }
.macro-item.carbs .macro-value[b-1whaexaerd] { color: #8E24AA; }
.macro-item.fat .macro-value[b-1whaexaerd] { color: #43A047; }

.macro-divider[b-1whaexaerd] {
    color: #ccc;
    font-weight: 300;
}

.summary-message[b-1whaexaerd] {
    font-size: 0.95rem;
    color: #27AE60;
    font-weight: 500;
    margin: 0;
}

/* Action Buttons */
.reveal-actions[b-1whaexaerd] {
    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-1whaexaerd] {
    opacity: 1;
    transform: translateY(0);
}

.btn-see-options[b-1whaexaerd] {
    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-1whaexaerd] {
    border-color: #27AE60;
    color: #27AE60;
    background: rgba(39, 174, 96, 0.05);
}

.btn-done[b-1whaexaerd] {
    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-1whaexaerd] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(39, 174, 96, 0.4);
}

/* Error/No Meal State */
.no-meal-state[b-1whaexaerd] {
    text-align: center;
    padding: 3rem 2rem;
    color: #666;
}

.no-meal-state .error-icon[b-1whaexaerd] {
    font-size: 3rem;
    color: #f0ad4e;
    margin-bottom: 1rem;
}

.no-meal-state .error-title[b-1whaexaerd] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.75rem;
}

.no-meal-state .error-message[b-1whaexaerd] {
    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-1whaexaerd] {
    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-1whaexaerd] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(39, 174, 96, 0.4);
}

/* Loading State */
.portion-reveal-container.loading[b-1whaexaerd] {
    opacity: 1;
    transform: translateY(0);
}

.loading-state[b-1whaexaerd] {
    text-align: center;
    padding: 3rem 2rem;
}

.loading-animation[b-1whaexaerd] {
    margin-bottom: 1.5rem;
}

.food-icons-spinner[b-1whaexaerd] {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.spinner-icon[b-1whaexaerd] {
    font-size: 2.5rem;
    animation: bounce-rotate-b-1whaexaerd 1.5s ease-in-out infinite;
}

.spinner-icon:nth-child(1)[b-1whaexaerd] { animation-delay: 0s; }
.spinner-icon:nth-child(2)[b-1whaexaerd] { animation-delay: 0.2s; }
.spinner-icon:nth-child(3)[b-1whaexaerd] { animation-delay: 0.4s; }

@keyframes bounce-rotate-b-1whaexaerd {
    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-1whaexaerd] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 0.5rem;
}

.loading-subtitle[b-1whaexaerd] {
    font-size: 0.95rem;
    color: #666;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 576px) {
    .portion-reveal-container[b-1whaexaerd] {
        margin: 1rem;
        padding: 1.5rem;
        border-radius: 20px;
    }

    .reveal-title[b-1whaexaerd] {
        font-size: 1.5rem;
    }

    .portion-item[b-1whaexaerd] {
        padding: 0.875rem 1rem;
    }

    .portion-icon[b-1whaexaerd] {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .portion-name[b-1whaexaerd] {
        font-size: 0.9rem;
    }

    .amount-value[b-1whaexaerd] {
        font-size: 1rem;
        padding: 0.3rem 0.6rem;
    }

    .reveal-actions[b-1whaexaerd] {
        flex-direction: column;
    }

    .btn-see-options[b-1whaexaerd],
    .btn-done[b-1whaexaerd] {
        width: 100%;
    }

    .macro-summary[b-1whaexaerd] {
        gap: 0.25rem;
    }

    .macro-value[b-1whaexaerd] {
        font-size: 1rem;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .portion-reveal-container[b-1whaexaerd],
    .portion-item[b-1whaexaerd],
    .reveal-summary[b-1whaexaerd],
    .reveal-actions[b-1whaexaerd] {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .checkmark-circle[b-1whaexaerd],
    .checkmark-check[b-1whaexaerd] {
        animation: none;
        stroke-dashoffset: 0;
        stroke-dasharray: 157, 157;
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/ProcessSteps.razor.rz.scp.css */
.step-container[b-0womma3c33] {
    width: 6rem !important;
}

.step-circle[b-0womma3c33]::before {
    width: calc(6rem + 1rem - 1.5rem) !important;
}


/* _content/Nutrition.Web.External.UI.Interactive/Components/QuestionGuidance.razor.rz.scp.css */
/* QuestionGuidance.razor.css - Scoped styles for guidance section */

/* Base container */
.guidance-section[b-6x4suq3qu5] {
    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-6x4suq3qu5] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s ease;
    overflow: hidden;
}

.guidance-item:hover[b-6x4suq3qu5] {
    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-6x4suq3qu5] {
    background: #fff8f0;
    border-color: rgba(240, 138, 18, 0.3);
}

/* Research quote variant */
.guidance-item--research[b-6x4suq3qu5] {
    background: #f8fafc;
}

.guidance-item--research[open][b-6x4suq3qu5] {
    background: #fefce8;
    border-color: rgba(234, 179, 8, 0.3);
}

/* Summary (clickable header) */
.guidance-header[b-6x4suq3qu5] {
    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-6x4suq3qu5]::-webkit-details-marker {
    display: none;
}

.guidance-header[b-6x4suq3qu5]::marker {
    display: none;
    content: "";
}

/* Icon container */
.guidance-icon[b-6x4suq3qu5] {
    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-6x4suq3qu5] {
    background: rgba(240, 138, 18, 0.2);
    color: var(--fs-accent, #f08a12);
}

.guidance-item--research[open] .guidance-icon[b-6x4suq3qu5] {
    background: rgba(234, 179, 8, 0.15);
    color: #ca8a04;
}

/* Title text */
.guidance-title[b-6x4suq3qu5] {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 600;
    color: #2d3748;
    text-align: left;
}

/* Chevron indicator */
.guidance-chevron[b-6x4suq3qu5] {
    color: #9ca3af;
    font-size: 0.75rem;
    transition: transform 0.3s ease, color 0.2s ease;
    flex-shrink: 0;
}

.guidance-item[open] .guidance-chevron[b-6x4suq3qu5] {
    transform: rotate(180deg);
    color: var(--fs-accent, #f08a12);
}

.guidance-item--research[open] .guidance-chevron[b-6x4suq3qu5] {
    color: #ca8a04;
}

/* Content area */
.guidance-content[b-6x4suq3qu5] {
    padding: 0 1.25rem 1rem 3.5rem; /* Left indent aligns with title */
    text-align: left;
}

.guidance-content p[b-6x4suq3qu5] {
    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-6x4suq3qu5] {
    margin-bottom: 0;
}

/* Blockquote for research quotes */
.guidance-blockquote[b-6x4suq3qu5] {
    margin: 0;
    padding: 0;
    border: none;
    font-style: normal;
}

.guidance-content--quote[b-6x4suq3qu5] {
    padding-left: 3.5rem;
}

.guidance-content--quote .guidance-blockquote[b-6x4suq3qu5] {
    border-left: 3px solid rgba(234, 179, 8, 0.5);
    padding-left: 1rem;
}

.guidance-content--quote .guidance-blockquote p[b-6x4suq3qu5] {
    color: #525252;
    font-style: italic;
}

/* Plain text remarks (no collapsible) */
.guidance-plain[b-6x4suq3qu5] {
    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-6x4suq3qu5] {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.guidance-plain-label[b-6x4suq3qu5] {
    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-6x4suq3qu5] {
    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-6x4suq3qu5] {
    margin-bottom: 0;
}

.guidance-plain .guidance-blockquote[b-6x4suq3qu5] {
    margin: 0;
    padding: 0;
    border: none;
}

/* Guidance image */
.guidance-image[b-6x4suq3qu5] {
    margin-top: var(--fs-spacing-md, 12px);
    text-align: center;
}

.guidance-image img[b-6x4suq3qu5] {
    border-radius: 8px;
    max-width: 100%;
    height: auto;
}

/* Accessibility - focus states */
.guidance-header:focus[b-6x4suq3qu5] {
    outline: 2px solid var(--fs-accent, #f08a12);
    outline-offset: 2px;
    border-radius: 8px;
}

.guidance-header:focus:not(:focus-visible)[b-6x4suq3qu5] {
    outline: none;
}

.guidance-header:focus-visible[b-6x4suq3qu5] {
    outline: 2px solid var(--fs-accent, #f08a12);
    outline-offset: 2px;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .guidance-item[b-6x4suq3qu5],
    .guidance-icon[b-6x4suq3qu5],
    .guidance-chevron[b-6x4suq3qu5] {
        transition: none;
    }
}

/* Mobile responsiveness */
@media (max-width: 576px) {
    .guidance-section[b-6x4suq3qu5] {
        margin-top: var(--fs-spacing-lg, 16px);
    }

    .guidance-header[b-6x4suq3qu5] {
        padding: 0.875rem 1rem;
    }

    .guidance-content[b-6x4suq3qu5] {
        padding: 0 1rem 0.875rem 2.75rem;
    }

    .guidance-content--quote[b-6x4suq3qu5] {
        padding-left: 2.75rem;
    }

    .guidance-icon[b-6x4suq3qu5] {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .guidance-title[b-6x4suq3qu5] {
        font-size: 0.9rem;
    }

    .guidance-plain[b-6x4suq3qu5] {
        padding: 0.875rem 1rem;
    }
}

/* Extra small devices */
@media (max-width: 400px) {
    .guidance-header[b-6x4suq3qu5] {
        padding: 0.75rem 0.875rem;
        gap: 6px;
    }

    .guidance-content[b-6x4suq3qu5] {
        padding: 0 0.875rem 0.75rem 2.5rem;
    }

    .guidance-icon[b-6x4suq3qu5] {
        width: 26px;
        height: 26px;
        font-size: 0.75rem;
    }

    .guidance-title[b-6x4suq3qu5] {
        font-size: 0.85rem;
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/QuestionnaireHistoryComponent.razor.rz.scp.css */
/* ============================================
   Answer History - Vertical Timeline Component
   ============================================ */

.answer-history[b-670o5je2tm] {
    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-670o5je2tm] {
    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-670o5je2tm] {
    background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
}

.answer-history-toggle:focus[b-670o5je2tm] {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(240, 138, 18, 0.3);
}

.toggle-content[b-670o5je2tm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.history-toggle-icon[b-670o5je2tm] {
    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-670o5je2tm] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
}

.answer-count[b-670o5je2tm] {
    padding: 0.25rem 0.75rem;
    background: #e8f5e9;
    color: #059669;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 50px;
}

.toggle-actions[b-670o5je2tm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.toggle-chevron[b-670o5je2tm] {
    color: #adb5bd;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.answer-history.expanded .toggle-chevron[b-670o5je2tm] {
    color: #f08a12;
}

.close-btn[b-670o5je2tm] {
    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-670o5je2tm] {
    background: #e9ecef;
    color: #333;
}

/* ============================================
   Timeline Content
   ============================================ */

.answer-timeline[b-670o5je2tm] {
    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-670o5je2tm] {
    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-670o5je2tm] {
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.25s ease;
    position: relative;
}

.stage-card.completed[b-670o5je2tm] {
    border-color: #d1fae5;
    background: linear-gradient(to bottom, #f0fdf4, #fff);
}

.stage-card.active[b-670o5je2tm] {
    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-670o5je2tm] {
    border-color: #e9ecef;
    background: #fafafa;
    opacity: 0.7;
}

/* Stage Header */
.stage-header[b-670o5je2tm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.stage-info[b-670o5je2tm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.stage-card .history-stage-icon[b-670o5je2tm] {
    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-670o5je2tm] {
    background: #059669;
    color: #fff;
}

.stage-card.active .history-stage-icon[b-670o5je2tm] {
    background: #f08a12;
    color: #fff;
    animation: pulse-soft-b-670o5je2tm 2s infinite;
}

.stage-card.pending .history-stage-icon[b-670o5je2tm] {
    background: #e9ecef;
    color: #adb5bd;
}

@keyframes pulse-soft-b-670o5je2tm {
    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-670o5je2tm] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.history-stage-name[b-670o5je2tm] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
}

.stage-status[b-670o5je2tm] {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stage-card.active .stage-status[b-670o5je2tm] {
    color: #f08a12;
}

/* Edit Button */
.edit-btn[b-670o5je2tm] {
    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-670o5je2tm] {
    border-color: #f08a12;
    color: #f08a12;
    background: rgba(240, 138, 18, 0.05);
}

.edit-btn:focus[b-670o5je2tm] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(240, 138, 18, 0.2);
}

/* ============================================
   Answer List
   ============================================ */

.answer-list[b-670o5je2tm] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.answer-row[b-670o5je2tm] {
    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-670o5je2tm] {
    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-670o5je2tm] {
    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-670o5je2tm] {
    font-size: 0.8rem;
    font-weight: 400;
    color: #6c757d;
    margin-left: 0.25rem;
}

/* ============================================
   Answer Placeholder
   ============================================ */

.answer-placeholder[b-670o5je2tm] {
    padding: 0.75rem;
    text-align: center;
}

.answer-placeholder span[b-670o5je2tm] {
    font-size: 0.85rem;
    color: #adb5bd;
    font-style: italic;
}

.stage-card.active .answer-placeholder span[b-670o5je2tm] {
    color: #f08a12;
    font-style: normal;
}

/* ============================================
   Timeline Connector
   ============================================ */

.timeline-connector[b-670o5je2tm] {
    width: 2px;
    height: 24px;
    margin: 0 auto;
    background: #e9ecef;
    transition: all 0.25s ease;
}

.timeline-connector.completed[b-670o5je2tm] {
    background: #059669;
}

.timeline-connector.active[b-670o5je2tm] {
    background: linear-gradient(to bottom, #059669, #f08a12);
}

/* ============================================
   Mobile Responsive - Inline Collapsible
   (Avoids conflict with mobile sticky CTA)
   ============================================ */

@media (max-width: 768px) {
    .answer-history[b-670o5je2tm] {
        /* 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-670o5je2tm] {
        padding: 0.75rem 1rem;
    }

    .answer-history.expanded .answer-timeline[b-670o5je2tm] {
        max-height: 40vh;
    }

    .history-toggle-icon[b-670o5je2tm] {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .toggle-text[b-670o5je2tm] {
        font-size: 0.9rem;
    }

    .answer-count[b-670o5je2tm] {
        font-size: 0.75rem;
        padding: 0.2rem 0.6rem;
    }

    .stage-card[b-670o5je2tm] {
        padding: 0.875rem;
    }

    .stage-card .history-stage-icon[b-670o5je2tm] {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .history-stage-name[b-670o5je2tm] {
        font-size: 0.9rem;
    }

    .answer-row[b-670o5je2tm] {
        padding: 0.375rem 0.5rem;
    }

    .answer-label[b-670o5je2tm] {
        font-size: 0.8rem;
    }

    .answer-value[b-670o5je2tm] {
        font-size: 0.85rem;
    }
}

/* ============================================
   Large Desktop - Wider layout
   ============================================ */

@media (min-width: 1200px) {
    .answer-history[b-670o5je2tm] {
        max-width: 700px;
    }
}

/* ============================================
   Accessibility - Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .answer-history[b-670o5je2tm],
    .answer-timeline[b-670o5je2tm],
    .stage-card[b-670o5je2tm],
    .toggle-chevron[b-670o5je2tm],
    .stage-card .history-stage-icon[b-670o5je2tm],
    .timeline-connector[b-670o5je2tm],
    .edit-btn[b-670o5je2tm],
    .close-btn[b-670o5je2tm],
    .answer-history-toggle[b-670o5je2tm] {
        animation: none !important;
        transition: none !important;
    }

    /* Ensure timeline is visible/hidden instantly */
    .answer-timeline[b-670o5je2tm] {
        opacity: 0;
        visibility: hidden;
        max-height: 0;
    }

    .answer-history.expanded .answer-timeline[b-670o5je2tm] {
        opacity: 1;
        visibility: visible;
        max-height: 600px;
    }
}

/* ============================================
   High Contrast Mode Support
   ============================================ */

@media (prefers-contrast: high) {
    .answer-history[b-670o5je2tm] {
        border: 2px solid #000;
    }

    .stage-card[b-670o5je2tm] {
        border-width: 2px;
    }

    .stage-card.completed[b-670o5je2tm] {
        border-color: #059669;
    }

    .stage-card.active[b-670o5je2tm] {
        border-color: #f08a12;
    }

    .answer-count[b-670o5je2tm] {
        background: #059669;
        color: #fff;
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/ReconnectionModal.razor.rz.scp.css */
/* ============================================
   Reconnection Modal - Delightful UX Design
   Transform connection issues into positive experiences
   ============================================ */

/* Container and Overlay */
.reconnection-modal-container[b-9oue2z0bs4] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    animation: fadeIn-b-9oue2z0bs4 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.reconnection-modal-container.active[b-9oue2z0bs4] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.reconnection-overlay[b-9oue2z0bs4] {
    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-9oue2z0bs4] {
    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-9oue2z0bs4 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

/* Connection Visual Animation */
.connection-visual[b-9oue2z0bs4] {
    position: relative;
    height: 160px;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.connection-hub[b-9oue2z0bs4] {
    position: relative;
    width: 80px;
    height: 80px;
}

.hub-core[b-9oue2z0bs4] {
    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-9oue2z0bs4 2s ease-in-out infinite;
    z-index: 3;
}

.hub-core svg[b-9oue2z0bs4] {
    width: 36px;
    height: 36px;
    color: white;
    animation: iconFloat-b-9oue2z0bs4 3s ease-in-out infinite;
}

/* Pulse Rings */
.pulse-ring[b-9oue2z0bs4] {
    position: absolute;
    inset: -20px;
    border: 2px solid;
    border-radius: 50%;
    opacity: 0;
    animation: pulseRing-b-9oue2z0bs4 3s ease-out infinite;
}

.pulse-ring-1[b-9oue2z0bs4] {
    border-color: rgba(37, 99, 235, 0.3);
    animation-delay: 0s;
}

.pulse-ring-2[b-9oue2z0bs4] {
    border-color: rgba(59, 130, 246, 0.2);
    animation-delay: 1s;
}

.pulse-ring-3[b-9oue2z0bs4] {
    border-color: rgba(96, 165, 250, 0.1);
    animation-delay: 2s;
}

/* Orbiting Connection Points */
.connection-point[b-9oue2z0bs4] {
    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-9oue2z0bs4 8s ease-in-out infinite;
}

.point-1[b-9oue2z0bs4] {
    top: 10px;
    left: -60px;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    animation-delay: 0s;
}

.point-2[b-9oue2z0bs4] {
    top: 10px;
    right: -60px;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    animation-delay: 2.67s;
}

.point-3[b-9oue2z0bs4] {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    animation-delay: 5.33s;
}

.point-icon svg[b-9oue2z0bs4] {
    width: 24px;
    height: 24px;
    opacity: 0.7;
}

.point-1 .point-icon svg[b-9oue2z0bs4] { color: #dc2626; }
.point-2 .point-icon svg[b-9oue2z0bs4] { color: #2563eb; }
.point-3 .point-icon svg[b-9oue2z0bs4] { color: #10b981; }

/* Progress Indicator */
.reconnection-progress[b-9oue2z0bs4] {
    margin-bottom: 2rem;
}

.progress-track[b-9oue2z0bs4] {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.progress-fill[b-9oue2z0bs4] {
    height: 100%;
    background: linear-gradient(90deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
    border-radius: 2px;
    width: 0%;
    animation: progressFill-b-9oue2z0bs4 3s ease-in-out infinite;
}

.progress-dots[b-9oue2z0bs4] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.progress-dot[b-9oue2z0bs4] {
    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-9oue2z0bs4] {
    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-9oue2z0bs4] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.reconnection-title[b-9oue2z0bs4] {
    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-9oue2z0bs4] {
    font-size: 1.25rem;
    animation: sparkle-b-9oue2z0bs4 2s ease-in-out infinite;
}

.reconnection-subtitle[b-9oue2z0bs4] {
    font-size: 0.9375rem;
    color: #6b7280;
    margin: 0 0 1rem;
    font-weight: 400;
}

/* Message Carousel */
.message-carousel[b-9oue2z0bs4] {
    position: relative;
    height: 32px;
    overflow: hidden;
}

.carousel-message[b-9oue2z0bs4] {
    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-9oue2z0bs4] {
    opacity: 1;
    transform: translateY(0);
}

/* Status Information */
.reconnection-status[b-9oue2z0bs4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.status-item[b-9oue2z0bs4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-label[b-9oue2z0bs4] {
    font-size: 0.8125rem;
    color: #9ca3af;
    font-weight: 500;
}

.status-value[b-9oue2z0bs4] {
    font-size: 0.875rem;
    color: #1f2937;
    font-weight: 600;
}

.status-timer[b-9oue2z0bs4] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #2563eb;
}

.timer-icon[b-9oue2z0bs4] {
    animation: tick-b-9oue2z0bs4 1s steps(1) infinite;
}

/* Action Buttons */
.reconnection-actions[b-9oue2z0bs4] {
    display: flex;
    gap: 0.75rem;
}

.btn-reconnect-primary[b-9oue2z0bs4] {
    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-9oue2z0bs4] {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.25);
}

.btn-reconnect-primary:active[b-9oue2z0bs4] {
    transform: translateY(0);
}

.btn-icon[b-9oue2z0bs4] {
    animation: rotate-b-9oue2z0bs4 2s linear infinite;
    font-size: 1.125rem;
}

.btn-reconnect-secondary[b-9oue2z0bs4] {
    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-9oue2z0bs4] {
    background: #f9fafb;
    border-color: #d1d5db;
}

/* Decorative Elements */
.decorative-elements[b-9oue2z0bs4] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 24px;
}

.floating-orb[b-9oue2z0bs4] {
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
}

.orb-1[b-9oue2z0bs4] {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, #2563eb 0%, transparent 70%);
    top: -40px;
    right: -40px;
    animation: floatOrb1-b-9oue2z0bs4 15s ease-in-out infinite;
}

.orb-2[b-9oue2z0bs4] {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, #f59e0b 0%, transparent 70%);
    bottom: -20px;
    left: -20px;
    animation: floatOrb2-b-9oue2z0bs4 20s ease-in-out infinite;
}

.orb-3[b-9oue2z0bs4] {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, #10b981 0%, transparent 70%);
    top: 50%;
    right: -30px;
    animation: floatOrb3-b-9oue2z0bs4 18s ease-in-out infinite;
}

.floating-line[b-9oue2z0bs4] {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.1), transparent);
    height: 1px;
}

.line-1[b-9oue2z0bs4] {
    width: 200px;
    top: 30%;
    left: -50px;
    animation: slideLine1-b-9oue2z0bs4 10s ease-in-out infinite;
}

.line-2[b-9oue2z0bs4] {
    width: 150px;
    bottom: 25%;
    right: -50px;
    animation: slideLine2-b-9oue2z0bs4 12s ease-in-out infinite;
}

/* Animations */
@keyframes fadeIn-b-9oue2z0bs4 {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes hubPulse-b-9oue2z0bs4 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes iconFloat-b-9oue2z0bs4 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes pulseRing-b-9oue2z0bs4 {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes orbitFloat-b-9oue2z0bs4 {
    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-9oue2z0bs4 {
    0% { width: 0%; }
    50% { width: 65%; }
    100% { width: 30%; }
}

@keyframes sparkle-b-9oue2z0bs4 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

@keyframes rotate-b-9oue2z0bs4 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes tick-b-9oue2z0bs4 {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.5; }
}

@keyframes floatOrb1-b-9oue2z0bs4 {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(-30px, 20px); }
    66% { transform: translate(20px, -10px); }
}

@keyframes floatOrb2-b-9oue2z0bs4 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(40px, -30px); }
}

@keyframes floatOrb3-b-9oue2z0bs4 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-20px, 15px); }
    75% { transform: translate(15px, -25px); }
}

@keyframes slideLine1-b-9oue2z0bs4 {
    0%, 100% { transform: translateX(0); opacity: 0; }
    50% { transform: translateX(100px); opacity: 1; }
}

@keyframes slideLine2-b-9oue2z0bs4 {
    0%, 100% { transform: translateX(0); opacity: 0; }
    50% { transform: translateX(-80px); opacity: 1; }
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .reconnection-content[b-9oue2z0bs4] {
        padding: 2rem 1.5rem;
        width: 95%;
        border-radius: 20px;
    }

    .connection-visual[b-9oue2z0bs4] {
        height: 120px;
        margin-bottom: 1.5rem;
    }

    .connection-hub[b-9oue2z0bs4] {
        width: 64px;
        height: 64px;
    }

    .hub-core svg[b-9oue2z0bs4] {
        width: 28px;
        height: 28px;
    }

    .connection-point[b-9oue2z0bs4] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .point-1[b-9oue2z0bs4] { left: -40px; }
    .point-2[b-9oue2z0bs4] { right: -40px; }

    .point-icon svg[b-9oue2z0bs4] {
        width: 20px;
        height: 20px;
    }

    .reconnection-title[b-9oue2z0bs4] {
        font-size: 1.125rem;
    }

    .reconnection-subtitle[b-9oue2z0bs4] {
        font-size: 0.875rem;
    }

    .reconnection-actions[b-9oue2z0bs4] {
        flex-direction: column;
    }

    .floating-orb[b-9oue2z0bs4],
    .floating-line[b-9oue2z0bs4] {
        display: none; /* Hide decorative elements on mobile for performance */
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .reconnection-content[b-9oue2z0bs4] {
        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-9oue2z0bs4] {
        color: #f3f4f6;
    }

    .reconnection-subtitle[b-9oue2z0bs4] {
        color: #9ca3af;
    }

    .connection-point[b-9oue2z0bs4] {
        background: #374151;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .status-item[b-9oue2z0bs4] {
        background: #374151;
    }

    .status-label[b-9oue2z0bs4] {
        color: #9ca3af;
    }

    .status-value[b-9oue2z0bs4] {
        color: #f3f4f6;
    }

    .btn-reconnect-secondary[b-9oue2z0bs4] {
        background: #374151;
        color: #d1d5db;
        border-color: #4b5563;
    }

    .btn-reconnect-secondary:hover[b-9oue2z0bs4] {
        background: #4b5563;
        border-color: #6b7280;
    }

    .progress-track[b-9oue2z0bs4] {
        background: #374151;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *[b-9oue2z0bs4] {
        animation: none !important;
        transition: opacity 0.3s ease !important;
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/Shared/Comparison/ComparisonPageLayout.razor.rz.scp.css */
/* Comparison Page Layout Styles */

.comparison-page[b-w1sb4t3lvq] {
    --section-padding: 4rem 0;
    --container-max-width: 1200px;
    min-height: 100vh;
}

/* Section base styles */
[b-w1sb4t3lvq] section {
    padding: var(--section-padding);
}

[b-w1sb4t3lvq] .container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .comparison-page[b-w1sb4t3lvq] {
        --section-padding: 2.5rem 0;
    }

    [b-w1sb4t3lvq] .container {
        padding: 0 1rem;
    }
}

/* Utility classes for comparison pages */
[b-w1sb4t3lvq] .text-center {
    text-align: center;
}

[b-w1sb4t3lvq] .text-primary {
    color: var(--primary-color, #4F46E5);
}

[b-w1sb4t3lvq] .bg-light {
    background-color: var(--bg-light, #F9FAFB);
}

[b-w1sb4t3lvq] .bg-primary {
    background-color: var(--primary-color, #4F46E5);
}

[b-w1sb4t3lvq] .text-white {
    color: #ffffff;
}

/* Animations */
[b-w1sb4t3lvq] .fade-in {
    animation: fadeIn-b-w1sb4t3lvq 0.5s ease-out;
}

@keyframes fadeIn-b-w1sb4t3lvq {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/Shared/Mobile/AdaptiveForm.razor.rz.scp.css */
/* AdaptiveForm - Responsive Form Styles */

/* Base Form Styles */
.adaptive-form[b-493elw76gr] {
    width: 100%;
}

.form-content[b-493elw76gr] {
    margin-bottom: 1.5rem;
}

.form-actions[b-493elw76gr] {
    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-493elw76gr] {
        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-493elw76gr] {
        grid-template-columns: 1fr;
    }

    .adaptive-form.desktop-mode[data-columns="3"] .form-content[b-493elw76gr] {
        grid-template-columns: repeat(3, 1fr);
    }

    .adaptive-form.desktop-mode[data-columns="4"] .form-content[b-493elw76gr] {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Full-width form groups (for textareas, etc.) */
    .adaptive-form.desktop-mode[b-493elw76gr] (.form-group-full) {
        grid-column: 1 / -1;
    }

    .adaptive-form.desktop-mode .form-actions[b-493elw76gr] {
        justify-content: flex-end;
        padding-top: 1rem;
        border-top: 1px solid #e0e0e0;
    }

    .adaptive-form.desktop-mode .form-actions button[b-493elw76gr] {
        min-width: 120px;
    }
}

/* Mobile Mode - Single Column */
@media (max-width: 768px) {
    .adaptive-form.mobile-mode .form-content[b-493elw76gr] {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .adaptive-form.mobile-mode .form-actions[b-493elw76gr] {
        flex-direction: column-reverse;
        gap: 0.75rem;
        margin-top: 1.5rem;
    }

    .adaptive-form.mobile-mode .form-actions button[b-493elw76gr] {
        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-493elw76gr] (.form-control),
    .adaptive-form.mobile-mode[b-493elw76gr] (.form-select),
    .adaptive-form.mobile-mode[b-493elw76gr] (input),
    .adaptive-form.mobile-mode[b-493elw76gr] (select),
    .adaptive-form.mobile-mode[b-493elw76gr] (textarea) {
        font-size: 16px !important;
        min-height: 48px;
        padding: 12px 16px;
    }

    .adaptive-form.mobile-mode[b-493elw76gr] (.form-label),
    .adaptive-form.mobile-mode[b-493elw76gr] (label) {
        font-size: 14px;
        font-weight: 600;
        color: #424242;
        margin-bottom: 8px;
    }

    /* Larger checkboxes and radios for touch */
    .adaptive-form.mobile-mode[b-493elw76gr] (.form-check-input) {
        width: 24px;
        height: 24px;
        margin-top: 0;
    }

    .adaptive-form.mobile-mode[b-493elw76gr] (.form-check-label) {
        font-size: 16px;
        padding-left: 12px;
    }

    /* Input groups */
    .adaptive-form.mobile-mode[b-493elw76gr] (.input-group) {
        flex-wrap: nowrap;
    }

    .adaptive-form.mobile-mode[b-493elw76gr] (.input-group-text) {
        font-size: 16px;
        padding: 12px 16px;
        min-width: 60px;
    }
}

/* Form Group Styles (both modes) */
[b-493elw76gr](.form-group) {
    display: flex;
    flex-direction: column;
}

[b-493elw76gr](.form-label) {
    margin-bottom: 0.5rem;
}

[b-493elw76gr](.form-control:focus),
[b-493elw76gr](.form-select:focus) {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
    border-color: #1976d2;
}

/* Validation Styles */
[b-493elw76gr](.invalid-feedback) {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #d32f2f;
}

[b-493elw76gr](.form-control.is-invalid),
[b-493elw76gr](.form-select.is-invalid) {
    border-color: #d32f2f;
}

[b-493elw76gr](.form-control.is-valid),
[b-493elw76gr](.form-select.is-valid) {
    border-color: #388e3c;
}

/* Loading State */
.adaptive-form[b-493elw76gr] (.spinner-border-sm) {
    width: 1rem;
    height: 1rem;
    border-width: 0.15rem;
}

/* Button States */
.form-actions button:disabled[b-493elw76gr] {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-actions button:not(:disabled):hover[b-493elw76gr] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.form-actions button:not(:disabled):active[b-493elw76gr] {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Accessibility: Focus Visible */
.form-actions button:focus-visible[b-493elw76gr] {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
    .adaptive-form.desktop-mode .form-actions[b-493elw76gr] {
        border-color: #424242;
    }

    [b-493elw76gr](.form-label),
    [b-493elw76gr](label) {
        color: #e0e0e0;
    }

    [b-493elw76gr](.form-control),
    [b-493elw76gr](.form-select) {
        background-color: #2a2a2a;
        color: #ffffff;
        border-color: #424242;
    }

    [b-493elw76gr](.form-control:focus),
    [b-493elw76gr](.form-select:focus) {
        background-color: #2a2a2a;
        border-color: #1976d2;
    }

    [b-493elw76gr](.invalid-feedback) {
        color: #ef5350;
    }
}

/* Responsive Breakpoints */
@media (max-width: 576px) {
    .form-content[b-493elw76gr] {
        gap: 1rem !important;
    }

    .form-actions[b-493elw76gr] {
        margin-top: 1rem;
    }
}

@media (min-width: 1200px) {
    .adaptive-form.desktop-mode .form-content[b-493elw76gr] {
        gap: 2rem;
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/Shared/Mobile/AdaptiveModal.razor.rz.scp.css */
/* AdaptiveModal - Responsive Modal Styles */

/* Desktop Modal Enhancements */
@media (min-width: 769px) {
    .modal-dialog[b-hnvzhgbcm5] {
        max-width: 600px;
        margin: 1.75rem auto;
    }

    .modal-content[b-hnvzhgbcm5] {
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    .modal-header[b-hnvzhgbcm5] {
        padding: 1.5rem;
        border-bottom: 1px solid #e0e0e0;
    }

    .modal-title[b-hnvzhgbcm5] {
        font-size: 1.25rem;
        font-weight: 600;
        color: #212121;
    }

    .btn-close[b-hnvzhgbcm5] {
        width: 32px;
        height: 32px;
        padding: 0;
    }

    .modal-body[b-hnvzhgbcm5] {
        padding: 1.5rem;
        max-height: 70vh;
        overflow-y: auto;
    }

    .modal-footer[b-hnvzhgbcm5] {
        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-hnvzhgbcm5] {
    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-hnvzhgbcm5] {
    opacity: 0;
}

.modal-backdrop.show[b-hnvzhgbcm5] {
    opacity: 1;
}

/* Modal Container */
.modal[b-hnvzhgbcm5] {
    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-hnvzhgbcm5] {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px);
}

.modal.show .modal-dialog[b-hnvzhgbcm5] {
    transform: none;
}

/* Scrollable Modal Body */
.modal-body[b-hnvzhgbcm5] {
    position: relative;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
}

.modal-body[b-hnvzhgbcm5]::-webkit-scrollbar {
    width: 6px;
}

.modal-body[b-hnvzhgbcm5]::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 3px;
}

.modal-body[b-hnvzhgbcm5]::-webkit-scrollbar-thumb {
    background: #bdbdbd;
    border-radius: 3px;
}

.modal-body[b-hnvzhgbcm5]::-webkit-scrollbar-thumb:hover {
    background: #9e9e9e;
}

/* Accessibility: Focus Styles */
.btn-close:focus[b-hnvzhgbcm5] {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

.modal-footer .btn:focus[b-hnvzhgbcm5] {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

/* Force Light Mode - App uses light theme consistently */
.modal-content[b-hnvzhgbcm5] {
    background-color: #ffffff !important;
    color: #212121 !important;
}

.modal-header[b-hnvzhgbcm5] {
    background-color: #ffffff !important;
}

.modal-title[b-hnvzhgbcm5] {
    color: #212121 !important;
}

.modal-body[b-hnvzhgbcm5] {
    background-color: #ffffff !important;
}

.modal-footer[b-hnvzhgbcm5] {
    background-color: #f8f9fa !important;
}

/* Close Button - Ensure visible on light background */
.btn-close[b-hnvzhgbcm5] {
    background-color: transparent !important;
    opacity: 0.5;
    filter: none;
}

.btn-close:hover[b-hnvzhgbcm5] {
    opacity: 0.8;
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/Shared/Mobile/AdaptiveTable.razor.rz.scp.css */
/* AdaptiveTable - Responsive Table/Card View Styles */

/* Base Container */
.adaptive-table[b-17bq0tq2a4] {
    width: 100%;
}

/* Desktop Mode - Table View */
@media (min-width: 769px) {
    .adaptive-table.desktop-mode .desktop-table-wrapper[b-17bq0tq2a4] {
        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-17bq0tq2a4] {
        margin-bottom: 0;
        background-color: white;
    }

    .adaptive-table.desktop-mode .table thead[b-17bq0tq2a4] {
        background-color: #f5f5f5;
    }

    .adaptive-table.desktop-mode .table thead th[b-17bq0tq2a4] {
        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-17bq0tq2a4] {
        transition: background-color 0.2s;
    }

    .adaptive-table.desktop-mode .table tbody tr:hover[b-17bq0tq2a4] {
        background-color: #fafafa;
    }

    .adaptive-table.desktop-mode .table tbody td[b-17bq0tq2a4] {
        padding: 1rem;
        vertical-align: middle;
        border-bottom: 1px solid #e0e0e0;
    }

    /* Scrollbar Styling */
    .desktop-table-wrapper[b-17bq0tq2a4]::-webkit-scrollbar {
        height: 8px;
    }

    .desktop-table-wrapper[b-17bq0tq2a4]::-webkit-scrollbar-track {
        background: #f5f5f5;
        border-radius: 4px;
    }

    .desktop-table-wrapper[b-17bq0tq2a4]::-webkit-scrollbar-thumb {
        background: #bdbdbd;
        border-radius: 4px;
    }

    .desktop-table-wrapper[b-17bq0tq2a4]::-webkit-scrollbar-thumb:hover {
        background: #9e9e9e;
    }
}

/* Mobile Mode - Card View */
@media (max-width: 768px) {
    .adaptive-table.mobile-mode .mobile-card-list[b-17bq0tq2a4] {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0;
    }

    .mobile-table-card[b-17bq0tq2a4] {
        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-17bq0tq2a4] {
        transform: scale(0.98);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    }

    .mobile-table-card:focus[b-17bq0tq2a4] {
        outline: 2px solid #1976d2;
        outline-offset: 2px;
    }

    /* Card Content Rows */
    .mobile-table-card .card-row[b-17bq0tq2a4] {
        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-17bq0tq2a4] {
        border-bottom: none;
        padding-bottom: 0;
    }

    .mobile-table-card .card-row strong[b-17bq0tq2a4] {
        color: #616161;
        font-weight: 600;
        min-width: 100px;
        flex-shrink: 0;
    }

    /* Default Card Content (fallback) */
    .default-card-content[b-17bq0tq2a4] {
        font-size: 16px;
        color: #212121;
        line-height: 1.5;
    }

    .default-card-content tr[b-17bq0tq2a4],
    .default-card-content tbody[b-17bq0tq2a4],
    .default-card-content table[b-17bq0tq2a4] {
        display: block;
    }

    .default-card-content td[b-17bq0tq2a4] {
        display: block;
        padding: 6px 0;
        border: none;
    }

    .default-card-content td[b-17bq0tq2a4]::before {
        content: attr(data-label);
        font-weight: 600;
        color: #616161;
        margin-right: 8px;
    }

    /* Empty State */
    .empty-state[b-17bq0tq2a4] {
        text-align: center;
        padding: 48px 16px;
        color: #757575;
    }

    .empty-state p[b-17bq0tq2a4] {
        margin: 0;
        font-size: 16px;
    }
}

/* Accessibility Improvements */
.mobile-table-card[role="button"][b-17bq0tq2a4] {
    user-select: none;
}

/* Loading State (Optional) */
.adaptive-table.loading[b-17bq0tq2a4] {
    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-17bq0tq2a4] {
            background-color: #1e1e1e;
            color: #ffffff;
        }

        .adaptive-table.desktop-mode .table thead[b-17bq0tq2a4] {
            background-color: #2a2a2a;
        }

        .adaptive-table.desktop-mode .table thead th[b-17bq0tq2a4] {
            color: #e0e0e0;
            border-color: #424242;
        }

        .adaptive-table.desktop-mode .table tbody td[b-17bq0tq2a4] {
            border-color: #424242;
        }

        .adaptive-table.desktop-mode .table tbody tr:hover[b-17bq0tq2a4] {
            background-color: #2a2a2a;
        }
    }

    @media (max-width: 768px) {
        .mobile-table-card[b-17bq0tq2a4] {
            background: #1e1e1e;
            color: #ffffff;
        }

        .mobile-table-card .card-row[b-17bq0tq2a4] {
            border-color: #424242;
        }

        .mobile-table-card .card-row strong[b-17bq0tq2a4] {
            color: #b0b0b0;
        }

        .default-card-content[b-17bq0tq2a4] {
            color: #ffffff;
        }

        .empty-state[b-17bq0tq2a4] {
            color: #b0b0b0;
        }
    }
}

/* Responsive Enhancements */
@media (max-width: 576px) {
    .mobile-table-card[b-17bq0tq2a4] {
        padding: 12px;
        gap: 6px;
    }

    .mobile-table-card .card-row[b-17bq0tq2a4] {
        font-size: 14px;
        padding: 6px 0;
    }

    .mobile-table-card .card-row strong[b-17bq0tq2a4] {
        min-width: 80px;
        font-size: 14px;
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/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-nufped5xr9] {
    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-nufped5xr9] {
    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-nufped5xr9] {
    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-nufped5xr9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: 1;
}

/* Icon Container */
.icon-container[b-nufped5xr9] {
    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-nufped5xr9],
.icon-container svg[b-nufped5xr9] {
    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-nufped5xr9] {
    fill: currentColor;
}

/* Label */
.label[b-nufped5xr9] {
    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-nufped5xr9] {
    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-nufped5xr9 2s ease-in-out infinite;
    z-index: 2;
}

/* Active State */
.nav-item.active .icon-container[b-nufped5xr9] {
    background: var(--md-sys-color-secondary-container, #e8f5e9);
}

.nav-item.active .icon-container i[b-nufped5xr9],
.nav-item.active .icon-container svg[b-nufped5xr9] {
    color: var(--md-sys-color-on-secondary-container, #1b5e20);
    transform: scale(1.1);
}

.nav-item.active .label[b-nufped5xr9] {
    color: var(--md-sys-color-on-surface, #000);
    font-weight: 600;
}

/* Active Indicator */
.active-indicator[b-nufped5xr9] {
    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-nufped5xr9 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Touch/Hover States */
.nav-item:hover:not(.active) .icon-container[b-nufped5xr9] {
    background: var(--md-sys-color-surface-variant, #f5f5f5);
}

.nav-item:active[b-nufped5xr9] {
    transform: scale(0.95);
}

.nav-item:active .icon-container[b-nufped5xr9] {
    transform: scale(0.9);
}

/* Focus State (keyboard navigation) */
.nav-item:focus-visible[b-nufped5xr9] {
    outline: 2px solid var(--md-sys-color-primary, #4caf50);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Animations */
@keyframes slideDown-b-nufped5xr9 {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes badgePulse-b-nufped5xr9 {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Ripple Effect (Material Design) */
.nav-item[b-nufped5xr9]::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-nufped5xr9]::before {
    width: 100px;
    height: 100px;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .mobile-bottom-nav[b-nufped5xr9] {
        background: var(--md-sys-color-surface-container, #1e1e1e);
        border-top-color: var(--md-sys-color-outline-variant, #3a3a3a);
    }

    .icon-container i[b-nufped5xr9],
    .icon-container svg[b-nufped5xr9] {
        color: var(--md-sys-color-on-surface-variant, #b0b0b0);
    }

    .label[b-nufped5xr9] {
        color: var(--md-sys-color-on-surface-variant, #b0b0b0);
    }

    .nav-item.active .icon-container[b-nufped5xr9] {
        background: var(--md-sys-color-secondary-container, #2d4a2f);
    }

    .nav-item.active .icon-container i[b-nufped5xr9],
    .nav-item.active .icon-container svg[b-nufped5xr9] {
        color: var(--md-sys-color-on-secondary-container, #a8d5aa);
    }

    .nav-item.active .label[b-nufped5xr9] {
        color: var(--md-sys-color-on-surface, #fff);
    }

    .nav-item:hover:not(.active) .icon-container[b-nufped5xr9] {
        background: var(--md-sys-color-surface-variant, #2a2a2a);
    }

    .nav-item[b-nufped5xr9]::before {
        background: rgba(255, 255, 255, 0.1);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .mobile-bottom-nav[b-nufped5xr9],
    .nav-item[b-nufped5xr9],
    .icon-container[b-nufped5xr9],
    .icon-container i[b-nufped5xr9],
    .icon-container svg[b-nufped5xr9],
    .label[b-nufped5xr9],
    .active-indicator[b-nufped5xr9] {
        animation: none;
        transition: none;
    }

    .badge[b-nufped5xr9] {
        animation: none;
    }
}

/* Landscape Orientation (Smaller height) */
@media (orientation: landscape) {
    .nav-container[b-nufped5xr9] {
        height: 56px;
    }

    .nav-item[b-nufped5xr9] {
        padding: 6px 12px 8px;
    }

    .label[b-nufped5xr9] {
        font-size: 11px;
    }
}

/* Small devices (< 360px) */
@media (max-width: 360px) {
    .label[b-nufped5xr9] {
        font-size: 11px;
    }

    .icon-container[b-nufped5xr9] {
        width: 28px;
        height: 28px;
    }

    .icon-container i[b-nufped5xr9],
    .icon-container svg[b-nufped5xr9] {
        width: 20px;
        height: 20px;
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/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-zdd802hv7k] {
    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-zdd802hv7k] {
    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-zdd802hv7k] {
    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-zdd802hv7k] {
    transition: transform 0.1s linear;
}

.card-item-wrapper.swipe-action[b-zdd802hv7k] {
    animation: swipeOut-b-zdd802hv7k 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Default Card (when no template provided) */
.card-default[b-zdd802hv7k] {
    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-zdd802hv7k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-skeleton[b-zdd802hv7k] {
    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-zdd802hv7k] {
    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-zdd802hv7k 1.5s infinite;
}

.skeleton-content[b-zdd802hv7k] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton-line[b-zdd802hv7k] {
    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-zdd802hv7k 1.5s infinite;
}

.skeleton-line-1[b-zdd802hv7k] {
    width: 70%;
}

.skeleton-line-2[b-zdd802hv7k] {
    width: 90%;
}

.skeleton-line-3[b-zdd802hv7k] {
    width: 60%;
}

/* Empty State */
.card-empty-state[b-zdd802hv7k] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: 32px;
}

.empty-state-default[b-zdd802hv7k] {
    text-align: center;
    color: var(--md-sys-color-on-surface-variant, #666);
}

.empty-icon[b-zdd802hv7k] {
    font-size: 64px;
    margin-bottom: 16px;
}

.empty-state-default h3[b-zdd802hv7k] {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--md-sys-color-on-surface, #000);
}

.empty-state-default p[b-zdd802hv7k] {
    font-size: 14px;
    margin: 0;
    color: var(--md-sys-color-on-surface-variant, #666);
}

/* Animations */
@keyframes shimmer-b-zdd802hv7k {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes swipeOut-b-zdd802hv7k {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

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

.card-item-wrapper[b-zdd802hv7k] {
    animation: slideInUp-b-zdd802hv7k 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stagger animation for list items */
.card-item-wrapper:nth-child(1)[b-zdd802hv7k] { animation-delay: 0ms; }
.card-item-wrapper:nth-child(2)[b-zdd802hv7k] { animation-delay: 50ms; }
.card-item-wrapper:nth-child(3)[b-zdd802hv7k] { animation-delay: 100ms; }
.card-item-wrapper:nth-child(4)[b-zdd802hv7k] { animation-delay: 150ms; }
.card-item-wrapper:nth-child(5)[b-zdd802hv7k] { animation-delay: 200ms; }

/* Virtual Scrolling Container */
[b-zdd802hv7k] .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-zdd802hv7k] {
        background: var(--md-sys-color-surface, #1e1e1e);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .card-item-wrapper:active[b-zdd802hv7k] {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    }

    .card-default[b-zdd802hv7k] {
        color: var(--md-sys-color-on-surface, #fff);
    }

    .card-skeleton[b-zdd802hv7k] {
        background: var(--md-sys-color-surface, #1e1e1e);
    }

    .skeleton-image[b-zdd802hv7k],
    .skeleton-line[b-zdd802hv7k] {
        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-zdd802hv7k] {
        color: var(--md-sys-color-on-surface-variant, #b0b0b0);
    }

    .empty-state-default h3[b-zdd802hv7k] {
        color: var(--md-sys-color-on-surface, #fff);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .card-item-wrapper[b-zdd802hv7k],
    .skeleton-image[b-zdd802hv7k],
    .skeleton-line[b-zdd802hv7k] {
        animation: none;
        transition: none;
    }

    .card-item-wrapper:active[b-zdd802hv7k] {
        transform: none;
    }
}

/* Small devices (< 360px) */
@media (max-width: 360px) {
    .mobile-card-view[b-zdd802hv7k] {
        padding: 12px;
        gap: 10px;
    }

    .card-skeleton[b-zdd802hv7k] {
        padding: 12px;
    }

    .skeleton-image[b-zdd802hv7k] {
        width: 60px;
        height: 60px;
    }

    .empty-state-default[b-zdd802hv7k] {
        padding: 24px;
    }

    .empty-icon[b-zdd802hv7k] {
        font-size: 48px;
    }
}

/* Landscape Orientation */
@media (orientation: landscape) and (max-height: 500px) {
    .card-empty-state[b-zdd802hv7k] {
        min-height: 200px;
        padding: 24px;
    }

    .empty-icon[b-zdd802hv7k] {
        font-size: 48px;
        margin-bottom: 12px;
    }
}

/* Pull-to-refresh indicator */
.mobile-card-view.refreshing[b-zdd802hv7k]::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-zdd802hv7k 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pullDown-b-zdd802hv7k {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        height: 40px;
        opacity: 0.1;
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/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-1g52xoavau] {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: calc(100vh - 120px);
}

.filter-content[b-1g52xoavau] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    overscroll-behavior: contain;

    /* Smooth scrolling on iOS */
    -webkit-overflow-scrolling: touch;
}

/* Filter Footer (Sticky) */
.filter-footer[b-1g52xoavau] {
    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-1g52xoavau] {
    display: flex;
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
}

/* Buttons */
.btn-clear[b-1g52xoavau],
.btn-apply[b-1g52xoavau] {
    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-1g52xoavau] {
    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-1g52xoavau] {
    background: var(--md-sys-color-surface-variant-hover, #ebebeb);
}

.btn-clear:active[b-1g52xoavau] {
    transform: scale(0.98);
    background: var(--md-sys-color-surface-variant-pressed, #e0e0e0);
}

.btn-apply[b-1g52xoavau] {
    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-1g52xoavau] {
    background: var(--md-sys-color-primary-hover, #45a049);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-apply:active[b-1g52xoavau] {
    transform: scale(0.98);
    background: var(--md-sys-color-primary-pressed, #3d8b40);
}

.btn-apply:disabled[b-1g52xoavau] {
    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-1g52xoavau] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}

.btn-text[b-1g52xoavau] {
    font-size: 14px;
    font-weight: 600;
}

/* Filter Count Badge */
.filter-count-badge[b-1g52xoavau] {
    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-1g52xoavau] {
    flex: 1;
}

/* Focus States (Keyboard Navigation) */
.btn-clear:focus-visible[b-1g52xoavau],
.btn-apply:focus-visible[b-1g52xoavau] {
    outline: 2px solid var(--md-sys-color-primary, #4caf50);
    outline-offset: 2px;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .filter-footer[b-1g52xoavau] {
        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-1g52xoavau] {
        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-1g52xoavau] {
        background: var(--md-sys-color-surface-variant-hover, #333);
    }

    .btn-clear:active[b-1g52xoavau] {
        background: var(--md-sys-color-surface-variant-pressed, #383838);
    }

    .btn-apply[b-1g52xoavau] {
        background: var(--md-sys-color-primary, #66bb6a);
        color: var(--md-sys-color-on-primary, #000);
    }

    .btn-apply:hover[b-1g52xoavau] {
        background: var(--md-sys-color-primary-hover, #5bb65f);
    }

    .btn-apply:active[b-1g52xoavau] {
        background: var(--md-sys-color-primary-pressed, #4fa454);
    }

    .btn-apply:disabled[b-1g52xoavau] {
        background: var(--md-sys-color-surface-variant, #2a2a2a);
        color: var(--md-sys-color-on-surface-variant, #666);
    }

    .filter-count-badge[b-1g52xoavau] {
        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-1g52xoavau],
    .btn-apply[b-1g52xoavau] {
        transition: none;
    }
}

/* Small devices (< 360px) */
@media (max-width: 360px) {
    .filter-footer-content[b-1g52xoavau] {
        gap: 8px;
    }

    .btn-clear[b-1g52xoavau],
    .btn-apply[b-1g52xoavau] {
        padding: 12px 16px;
        font-size: 13px;
    }

    .btn-text[b-1g52xoavau] {
        font-size: 13px;
    }
}

/* Keyboard Visible State */
[b-1g52xoavau] .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-1g52xoavau] {
    opacity: 0.6;
    pointer-events: none;
}

/* Empty State */
.filter-content:empty[b-1g52xoavau]::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;
}
/* _content/Nutrition.Web.External.UI.Interactive/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-5apar54wvy] {
    /* 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-5apar54wvy] {
        --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-5apar54wvy] {
    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-5apar54wvy],
.mobile-bottom-sheet.closing[b-5apar54wvy] {
    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-5apar54wvy],
    .mobile-bottom-sheet.closing[b-5apar54wvy] {
        height: 100dvh;
    }
}

/* Hide on desktop - mobile only (≤768px) */
@media (min-width: 769px) {
    .mobile-bottom-sheet[b-5apar54wvy] {
        display: none !important;
    }
}

/* ========================================
   Backdrop
   ======================================== */

.sheet-backdrop[b-5apar54wvy] {
    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-5apar54wvy] {
    opacity: 1;
}

.mobile-bottom-sheet.closing .sheet-backdrop[b-5apar54wvy] {
    opacity: 0;
    transition: opacity var(--close-duration) var(--close-easing);
}

/* ========================================
   Sheet Container
   ======================================== */

.sheet-container[b-5apar54wvy] {
    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-5apar54wvy] {
        /* 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-5apar54wvy] {
        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-5apar54wvy] {
            bottom: 0;
            height: min(90dvh, calc(100dvh - 80px));
            max-height: none;
        }
    }
}

/* Opening animation - slide up with subtle bounce */
@keyframes slideUp-b-5apar54wvy {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.mobile-bottom-sheet.open .sheet-container[b-5apar54wvy] {
    transform: translateY(0);
    animation: slideUp-b-5apar54wvy var(--open-duration) var(--open-easing);
}

/* Closing animation - slide down (faster, no bounce) */
@keyframes slideDown-b-5apar54wvy {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

.mobile-bottom-sheet.closing .sheet-container[b-5apar54wvy] {
    animation: slideDown-b-5apar54wvy var(--close-duration) var(--close-easing);
}

/* Dragging state - disable transition for smooth tracking */
.mobile-bottom-sheet.dragging .sheet-container[b-5apar54wvy] {
    transition: none;
}

/* ========================================
   Drag Handle
   ======================================== */

.sheet-drag-handle[b-5apar54wvy] {
    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-5apar54wvy] {
    cursor: grabbing;
}

.drag-indicator[b-5apar54wvy] {
    width: 40px;
    height: 5px;
    background: #CBD5E1;
    border-radius: 3px;
    transition: background-color 200ms ease;
}

.sheet-drag-handle:hover .drag-indicator[b-5apar54wvy],
.sheet-drag-handle:active .drag-indicator[b-5apar54wvy] {
    background: var(--sheet-text);
    opacity: 0.4;
}

/* ========================================
   Loading State (Improvement #2)
   ======================================== */

.sheet-loading-state[b-5apar54wvy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    gap: 16px;
}

.spinner[b-5apar54wvy] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--sheet-border);
    border-top-color: var(--sheet-text);
    border-radius: 50%;
    animation: spinner-rotate-b-5apar54wvy 0.8s linear infinite;
}

@keyframes spinner-rotate-b-5apar54wvy {
    to { transform: rotate(360deg); }
}

.loading-text[b-5apar54wvy] {
    margin: 0;
    color: var(--sheet-text);
    opacity: 0.6;
    font-size: 14px;
}

.visually-hidden[b-5apar54wvy] {
    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-5apar54wvy] {
    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-5apar54wvy] {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--sheet-text);
    line-height: 1.3;
}

.sheet-close-btn[b-5apar54wvy] {
    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-5apar54wvy] {
    background: #E2E8F0;
    color: #475569;
}

.sheet-close-btn:active[b-5apar54wvy] {
    background: #CBD5E1;
    transform: scale(0.95);
}

.sheet-close-btn:focus-visible[b-5apar54wvy] {
    outline: 2px solid #6366F1;
    outline-offset: 2px;
}

.sheet-close-btn svg[b-5apar54wvy] {
    width: 18px;
    height: 18px;
}

/* ========================================
   Body (Scrollable Content)
   ======================================== */

.sheet-body[b-5apar54wvy] {
    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-5apar54wvy]::-webkit-scrollbar {
    width: 6px;
}

.sheet-body[b-5apar54wvy]::-webkit-scrollbar-track {
    background: transparent;
}

.sheet-body[b-5apar54wvy]::-webkit-scrollbar-thumb {
    background: var(--handle-color);
    border-radius: 3px;
}

.sheet-body[b-5apar54wvy]::-webkit-scrollbar-thumb:hover {
    background: var(--sheet-text);
    opacity: 0.4;
}

/* ========================================
   Footer (Optional)
   ======================================== */

.sheet-footer[b-5apar54wvy] {
    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-5apar54wvy]  input,
.mobile-bottom-sheet[b-5apar54wvy]  select,
.mobile-bottom-sheet[b-5apar54wvy]  textarea,
.mobile-bottom-sheet[b-5apar54wvy]  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-5apar54wvy]  .mobile-option-item {
    color: var(--sheet-text) !important;
}

.mobile-bottom-sheet[b-5apar54wvy]  .mobile-option-item .option-text {
    color: inherit !important;
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.mobile-bottom-sheet[b-5apar54wvy]  .mobile-option-item.selected {
    color: #4F46E5 !important;
}

/* Ensure TomSelect dropdown doesn't overflow */
.mobile-bottom-sheet[b-5apar54wvy]  .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-5apar54wvy] {
    /* 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-5apar54wvy] {
        height: calc(100vh - 20px) !important;
    }
}

/* Also hide drag handle when keyboard is open to save space */
.keyboard-visible .sheet-drag-handle[b-5apar54wvy] {
    padding: 8px 0 4px 0;
}

.keyboard-visible .drag-indicator[b-5apar54wvy] {
    width: 32px;
    height: 4px;
}

/* Compact header when keyboard is open */
.keyboard-visible .sheet-header[b-5apar54wvy] {
    padding: 2px 16px 8px 16px;
    min-height: 40px;
}

.keyboard-visible .sheet-title[b-5apar54wvy] {
    font-size: 15px;
}

.keyboard-visible .sheet-close-btn[b-5apar54wvy] {
    width: 32px;
    height: 32px;
}

.keyboard-visible .sheet-close-btn svg[b-5apar54wvy] {
    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-5apar54wvy]  .mobile-search-container {
    padding: 8px 12px;
}

.keyboard-visible[b-5apar54wvy]  .mobile-search-input {
    padding: 8px 12px 8px 36px;
    font-size: 15px;
}

.keyboard-visible[b-5apar54wvy]  .mobile-search-container .search-icon {
    left: 22px;
    width: 16px;
    height: 16px;
}

.keyboard-visible[b-5apar54wvy]  .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-5apar54wvy]  .mobile-option-item {
    padding: 8px 12px;
    font-size: 15px;
    min-height: 38px;
    margin-bottom: 1px;
}

.keyboard-visible[b-5apar54wvy]  .mobile-actions {
    padding: 8px 12px;
    gap: 8px;
}

.keyboard-visible[b-5apar54wvy]  .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-5apar54wvy]  .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-5apar54wvy]  .mobile-selected-chips .chips-container {
    display: none;
}

/* Transform label to be the main indicator */
.keyboard-visible[b-5apar54wvy]  .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-5apar54wvy]  .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-5apar54wvy] {
        --sheet-border: currentColor;
    }

    .sheet-container[b-5apar54wvy] {
        border: 2px solid currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .mobile-bottom-sheet[b-5apar54wvy],
    .sheet-backdrop[b-5apar54wvy],
    .sheet-container[b-5apar54wvy],
    .drag-indicator[b-5apar54wvy],
    .sheet-close-btn[b-5apar54wvy] {
        animation: none !important;
        transition: none !important;
    }

    /* Instant show/hide without animation */
    .mobile-bottom-sheet.open .sheet-container[b-5apar54wvy] {
        transform: translateY(0);
    }

    .mobile-bottom-sheet.closing .sheet-container[b-5apar54wvy] {
        transform: translateY(100%);
    }
}

/* Focus visible styles for keyboard navigation */
.sheet-drag-handle:focus-visible[b-5apar54wvy],
.sheet-body:focus-visible[b-5apar54wvy] {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
    .mobile-bottom-sheet[b-5apar54wvy] {
        display: none !important;
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/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-kceisawo42] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--surface, #ffffff);
    color: var(--on-surface, #1c1b1f);
}

/* ==========================================================================
   Search Container
   ========================================================================== */

.search-container[b-kceisawo42] {
    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-kceisawo42] {
    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-kceisawo42] {
    background-color: var(--surface-container-highest, #e6e0e9);
}

.search-icon[b-kceisawo42] {
    position: absolute;
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-surface-variant, #46464f);
    pointer-events: none;
}

.search-input[b-kceisawo42] {
    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-kceisawo42]::placeholder {
    color: var(--on-surface-variant, #46464f);
    opacity: 1;
}

.search-input[b-kceisawo42]::-webkit-search-cancel-button {
    display: none;
}

.clear-search-btn[b-kceisawo42] {
    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-kceisawo42] {
    background-color: var(--surface-container-highest, #e6e0e9);
}

.clear-search-btn:active[b-kceisawo42] {
    background-color: var(--surface-container, #f3edf7);
}

/* ==========================================================================
   Results Count
   ========================================================================== */

.results-count[b-kceisawo42] {
    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-kceisawo42] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ==========================================================================
   List Items
   ========================================================================== */

.list-item[b-kceisawo42] {
    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-kceisawo42] {
    background-color: var(--surface-container-high, #ece6f0);
}

.list-item:active[b-kceisawo42] {
    background-color: var(--surface-container-highest, #e6e0e9);
}

.list-item:focus[b-kceisawo42] {
    outline: 2px solid var(--primary, #6750a4);
    outline-offset: -2px;
}

.list-item.selected[b-kceisawo42] {
    background-color: var(--secondary-container, #e8def8);
}

.list-item.selected:hover[b-kceisawo42] {
    background-color: var(--secondary-container, #e8def8);
    opacity: 0.9;
}

/* Touch-friendly minimum target size */
@media (pointer: coarse) {
    .list-item[b-kceisawo42] {
        min-height: 60px;
    }
}

/* ==========================================================================
   Checkbox
   ========================================================================== */

.checkbox-wrapper[b-kceisawo42] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.list-item-checkbox[b-kceisawo42] {
    position: absolute;
    width: 24px;
    height: 24px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.checkbox-checkmark[b-kceisawo42] {
    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-kceisawo42] {
    background-color: var(--primary, #6750a4);
    border-color: var(--primary, #6750a4);
}

.list-item-checkbox:checked + .checkbox-checkmark[b-kceisawo42]::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-kceisawo42] {
    outline: 2px solid var(--primary, #6750a4);
    outline-offset: 2px;
}

/* ==========================================================================
   List Item Content
   ========================================================================== */

.list-item-content[b-kceisawo42] {
    flex: 1;
    min-width: 0;
}

.list-item-text[b-kceisawo42] {
    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-kceisawo42]  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-kceisawo42] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--primary, #6750a4);
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.loading-state[b-kceisawo42] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 16px;
}

.loading-spinner[b-kceisawo42] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--surface-container-highest, #e6e0e9);
    border-top-color: var(--primary, #6750a4);
    border-radius: 50%;
    animation: spin-b-kceisawo42 1s linear infinite;
}

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

.loading-text[b-kceisawo42] {
    font-size: 14px;
    color: var(--on-surface-variant, #46464f);
}

/* ==========================================================================
   No Results State
   ========================================================================== */

.no-results-state[b-kceisawo42] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.no-results-icon[b-kceisawo42] {
    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-kceisawo42] {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 500;
    color: var(--on-surface, #1c1b1f);
}

.no-results-message[b-kceisawo42] {
    margin: 0 0 24px 0;
    font-size: 14px;
    color: var(--on-surface-variant, #46464f);
}

.no-results-action[b-kceisawo42] {
    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-kceisawo42] {
    background-color: var(--primary-container, #eaddff);
    opacity: 0.9;
}

.no-results-action:active[b-kceisawo42] {
    background-color: var(--primary-container, #eaddff);
    opacity: 0.8;
}

/* ==========================================================================
   Placeholder
   ========================================================================== */

.list-item-placeholder[b-kceisawo42] {
    height: 56px;
    margin: 0 16px;
    background-color: var(--surface-container-high, #ece6f0);
    border-radius: 8px;
    overflow: hidden;
}

.placeholder-shimmer[b-kceisawo42] {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--surface-container-highest, #e6e0e9) 50%,
        transparent 100%
    );
    animation: shimmer-b-kceisawo42 1.5s infinite;
}

@keyframes shimmer-b-kceisawo42 {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* ==========================================================================
   Selection Summary
   ========================================================================== */

.selection-summary[b-kceisawo42] {
    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-kceisawo42] {
    font-size: 14px;
    font-weight: 500;
    color: var(--on-surface, #1c1b1f);
}

.clear-selection-btn[b-kceisawo42] {
    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-kceisawo42] {
    background-color: var(--surface-container-high, #ece6f0);
}

.clear-selection-btn:active[b-kceisawo42] {
    background-color: var(--surface-container-highest, #e6e0e9);
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .mobile-bottom-sheet-list[b-kceisawo42] {
        --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-kceisawo42]  mark.search-highlight {
        background-color: var(--tertiary-container, #633b48);
        color: var(--on-tertiary-container, #ffd8e4);
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *[b-kceisawo42] {
        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-kceisawo42] {
        outline-width: 3px;
    }

    .checkbox-checkmark[b-kceisawo42] {
        border-width: 3px;
    }
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 480px) {
    .search-container[b-kceisawo42] {
        padding: 12px;
    }

    .list-item[b-kceisawo42] {
        padding: 12px 16px;
    }

    .list-item-text[b-kceisawo42] {
        font-size: 15px;
    }

    .no-results-state[b-kceisawo42] {
        padding: 32px 16px;
    }
}

/* Safe area insets for notched devices */
@supports (padding: env(safe-area-inset-bottom)) {
    .selection-summary[b-kceisawo42] {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/Shared/TomSelectDropdown.razor.rz.scp.css */
/* TomSelect Modern Minimalist Design */
/* Matches the polished design of the application with clean, professional styling */

:root[b-di3fpr4f00] {
    --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-di3fpr4f00] {
    width: 100%;
    position: relative;
    z-index: 100; /* Ensure container can stack dropdown above other elements */
}

.tom-select-wrapper[b-di3fpr4f00] {
    width: 100%;
}

/* Loading State */
.tom-select-loading[b-di3fpr4f00] {
    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-di3fpr4f00] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--ts-border);
    border-top-color: var(--ts-primary);
    border-radius: 50%;
    animation: spin-b-di3fpr4f00 600ms linear infinite;
}

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

/* Error State */
.tom-select-error[b-di3fpr4f00] {
    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-di3fpr4f00] {
    font-size: 18px;
    color: #DC2626;
}

.retry-button[b-di3fpr4f00] {
    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-di3fpr4f00] {
    background: #B91C1C;
}

/* Label Styling */
.tom-select-label[b-di3fpr4f00] {
    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-di3fpr4f00] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.required-indicator[b-di3fpr4f00] {
    color: #EF4444;
    font-size: 14px;
}

/* Base TomSelect Styling */
.tom-select[b-di3fpr4f00] {
    width: 100%;
}

/* Control (Search Input) */
.tom-select .ts-control[b-di3fpr4f00] {
    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-di3fpr4f00] {
    border-color: var(--ts-text-secondary);
    box-shadow: var(--ts-shadow-md);
}

.tom-select.focus .ts-control[b-di3fpr4f00],
.tom-select .ts-control:focus[b-di3fpr4f00] {
    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-di3fpr4f00] {
    font-size: 16px !important;
    color: var(--ts-text-primary);
    font-family: inherit;
}

.tom-select .ts-control input[b-di3fpr4f00]::placeholder {
    color: var(--ts-text-placeholder);
    opacity: 1;
}

/* Items (selected values) */
.tom-select .ts-control .item[b-di3fpr4f00] {
    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-di3fpr4f00] {
    background: var(--ts-primary-hover);
}

/* Dropdown Container */
.tom-select .ts-dropdown[b-di3fpr4f00] {
    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-di3fpr4f00 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Dropdown scrollbar styling */
.tom-select .ts-dropdown[b-di3fpr4f00]::-webkit-scrollbar {
    width: 8px;
}

.tom-select .ts-dropdown[b-di3fpr4f00]::-webkit-scrollbar-track {
    background: transparent;
}

.tom-select .ts-dropdown[b-di3fpr4f00]::-webkit-scrollbar-thumb {
    background: var(--ts-border);
    border-radius: 4px;
}

.tom-select .ts-dropdown[b-di3fpr4f00]::-webkit-scrollbar-thumb:hover {
    background: var(--ts-text-secondary);
}

/* Options */
.tom-select .ts-dropdown .option[b-di3fpr4f00] {
    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-di3fpr4f00] {
    background: var(--ts-hover);
    color: var(--ts-text-primary);
}

.tom-select .ts-dropdown .option.active[b-di3fpr4f00] {
    background: var(--ts-focus);
    color: var(--ts-primary);
    font-weight: 500;
}

.tom-select .ts-dropdown .option.selected[b-di3fpr4f00] {
    background: var(--ts-primary-light);
    color: var(--ts-primary);
    font-weight: 500;
}

.tom-select .ts-dropdown .option.selected[b-di3fpr4f00]::after {
    content: '✓';
    margin-left: auto;
    font-weight: 600;
    color: var(--ts-primary);
}

/* Option groups */
.tom-select .ts-dropdown .optgroup-header[b-di3fpr4f00] {
    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-di3fpr4f00] {
    margin-top: 0;
}

.tom-select .ts-dropdown .optgroup .option[b-di3fpr4f00] {
    padding-left: 28px;
}

/* Create option */
.tom-select .ts-dropdown .create[b-di3fpr4f00] {
    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-di3fpr4f00]::before {
    content: '+';
    font-size: 18px;
    font-weight: 600;
}

.tom-select .ts-dropdown .create:hover[b-di3fpr4f00] {
    background: var(--ts-focus);
}

/* No results */
.tom-select .ts-dropdown .no-results[b-di3fpr4f00] {
    padding: 12px 16px;
    color: var(--ts-text-secondary);
    font-size: 15px;
    text-align: center;
}

/* Plugin: Remove Button */
.tom-select .ts-control .item .remove[b-di3fpr4f00] {
    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-di3fpr4f00] {
    opacity: 1;
}

/* Plugin: Clear Button */
.tom-select .ts-control .clear-button[b-di3fpr4f00] {
    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-di3fpr4f00] {
    opacity: 1;
    background: var(--ts-text-primary);
}

/* Plugin: Dropdown Header */
.tom-select .ts-dropdown .dropdown-header[b-di3fpr4f00] {
    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-di3fpr4f00],
.tom-select .ts-control[disabled][b-di3fpr4f00] {
    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-di3fpr4f00] {
    border-color: var(--ts-border);
    box-shadow: none;
}

/* Helper Text */
.tom-select-helper-text[b-di3fpr4f00] {
    margin-top: 6px;
    font-size: 13px;
    color: var(--ts-text-secondary);
    line-height: 1.4;
}

/* Validation Message */
.tom-select-validation-message[b-di3fpr4f00] {
    margin-top: 6px;
    font-size: 13px;
    color: #DC2626;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tom-select-validation-message[b-di3fpr4f00]::before {
    content: '⚠';
    font-size: 14px;
}

/* Screen reader only */
.sr-only[b-di3fpr4f00] {
    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-di3fpr4f00 {
    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-di3fpr4f00] {
    animation: search-pulse-b-di3fpr4f00 800ms ease-out;
}

/* Search Chip Trigger - Mobile food search with clear affordance */
.search-chip-trigger[b-di3fpr4f00] {
    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-di3fpr4f00] {
    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-di3fpr4f00] {
    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-di3fpr4f00] {
    transform: scale(0.98);
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.15);
}

.search-chip-trigger:disabled[b-di3fpr4f00] {
    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-di3fpr4f00] {
    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-di3fpr4f00] {
    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-di3fpr4f00] {
    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-di3fpr4f00] {
    border-color: var(--ts-text-secondary);
    box-shadow: var(--ts-shadow-md);
    background: var(--ts-hover);
}

.mobile-trigger-button:focus[b-di3fpr4f00] {
    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-di3fpr4f00] {
    transform: scale(0.98);
}

.mobile-trigger-button:disabled[b-di3fpr4f00] {
    background: var(--ts-background);
    color: var(--ts-text-secondary);
    cursor: not-allowed;
    opacity: 0.6;
}

.mobile-trigger-button .trigger-text[b-di3fpr4f00] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ts-text-primary);
}

.mobile-trigger-button .trigger-icon[b-di3fpr4f00] {
    flex-shrink: 0;
    margin-left: 8px;
    color: var(--ts-text-secondary);
    transition: transform 150ms;
}

.mobile-trigger-button[aria-expanded="true"] .trigger-icon[b-di3fpr4f00] {
    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-di3fpr4f00] {
    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-di3fpr4f00] {
    position: relative;
    flex-shrink: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ts-border);
    background: var(--ts-surface);
}

.mobile-search-input[b-di3fpr4f00] {
    width: 100%;
    padding: 10px 16px 10px 42px;
    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-di3fpr4f00] {
    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-di3fpr4f00]::placeholder {
    color: var(--ts-text-placeholder);
}

.mobile-search-container .search-icon[b-di3fpr4f00] {
    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-di3fpr4f00] {
    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-di3fpr4f00]::-webkit-scrollbar {
    width: 6px;
}

.mobile-options-list[b-di3fpr4f00]::-webkit-scrollbar-track {
    background: transparent;
}

.mobile-options-list[b-di3fpr4f00]::-webkit-scrollbar-thumb {
    background: var(--ts-border);
    border-radius: 3px;
}

/* Mobile Option Item */
.mobile-option-item[b-di3fpr4f00] {
    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-di3fpr4f00] {
    background: var(--ts-hover);
}

.mobile-option-item:active[b-di3fpr4f00] {
    transform: scale(0.98);
    background: var(--ts-focus);
}

.mobile-option-item.selected[b-di3fpr4f00] {
    background: var(--ts-primary-light);
    border-color: var(--ts-primary);
    color: var(--ts-primary);
    font-weight: 500;
}

.mobile-option-item .option-text[b-di3fpr4f00] {
    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-di3fpr4f00] {
    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-di3fpr4f00] {
    background: var(--ts-primary);
    border-color: var(--ts-primary);
}

.mobile-option-item:hover .checkbox-indicator[b-di3fpr4f00] {
    border-color: var(--ts-text-secondary);
}

.mobile-option-item.selected .checkbox-indicator[b-di3fpr4f00] {
    border-color: var(--ts-primary);
}

/* Selected Icon (for single selection) */
.selected-icon[b-di3fpr4f00] {
    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-di3fpr4f00] {
    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-di3fpr4f00] {
    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-di3fpr4f00] {
    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-di3fpr4f00]::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Individual Chip - Compact version */
.selected-chip[b-di3fpr4f00] {
    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-di3fpr4f00] {
    background: #FEE2E2;
    border-color: #FCA5A5;
    color: #B91C1C;
}

.selected-chip:hover .chip-remove-icon[b-di3fpr4f00] {
    color: #DC2626;
}

.selected-chip:active[b-di3fpr4f00] {
    transform: scale(0.95);
}

.selected-chip .chip-text[b-di3fpr4f00] {
    max-width: 100px; /* Slightly shorter for horizontal layout */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selected-chip .chip-remove-icon[b-di3fpr4f00] {
    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-di3fpr4f00 {
    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-di3fpr4f00] {
    animation: chip-pop-in-b-di3fpr4f00 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== SELECTION FLASH ANIMATION ===== */

/* Success flash animation for selected items */
@keyframes selection-flash-b-di3fpr4f00 {
    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-di3fpr4f00] {
    animation: selection-flash-b-di3fpr4f00 500ms ease-out;
}

/* Checkbox checkmark animation */
@keyframes checkmark-pop-b-di3fpr4f00 {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.mobile-option-item.selection-flash .checkbox-indicator.checked[b-di3fpr4f00] {
    animation: checkmark-pop-b-di3fpr4f00 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Mobile Actions (footer buttons) - Fixed at bottom, doesn't shrink */
.mobile-actions[b-di3fpr4f00] {
    display: flex;
    flex-shrink: 0;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid var(--ts-border);
    background: var(--ts-surface);
}

.action-button[b-di3fpr4f00] {
    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-di3fpr4f00] {
    background: var(--ts-primary);
    color: white;
}

.action-button.primary:hover[b-di3fpr4f00] {
    background: var(--ts-primary-hover);
}

.action-button.primary:active[b-di3fpr4f00] {
    transform: scale(0.98);
}

.action-button.secondary[b-di3fpr4f00] {
    background: transparent;
    color: var(--ts-text-secondary);
    border: 1px solid var(--ts-border);
}

.action-button.secondary:hover[b-di3fpr4f00] {
    background: var(--ts-hover);
    border-color: var(--ts-text-secondary);
}

.action-button.secondary:active[b-di3fpr4f00] {
    transform: scale(0.98);
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
    .tom-select .ts-control[b-di3fpr4f00] {
        min-height: 44px;
        font-size: 16px; /* Prevents iOS zoom */
    }

    .tom-select .ts-dropdown[b-di3fpr4f00] {
        max-height: 240px;
    }

    .tom-select .ts-dropdown .option[b-di3fpr4f00] {
        padding: 14px 16px;
        font-size: 16px;
    }

    .tom-select-label[b-di3fpr4f00] {
        font-size: 15px;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root[b-di3fpr4f00] {
        --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-di3fpr4f00] {
        background: #7F1D1D;
        border-color: #991B1B;
        color: #FCA5A5;
    }

    .error-icon[b-di3fpr4f00] {
        color: #F87171;
    }

    .retry-button[b-di3fpr4f00] {
        background: #DC2626;
    }

    .retry-button:hover[b-di3fpr4f00] {
        background: #EF4444;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .tom-select .ts-control[b-di3fpr4f00] {
        border-width: 2px;
    }

    .tom-select .ts-dropdown .option.active[b-di3fpr4f00],
    .tom-select .ts-dropdown .option.selected[b-di3fpr4f00] {
        outline: 2px solid var(--ts-primary);
        outline-offset: -2px;
    }

    .mobile-option-item.selected[b-di3fpr4f00] {
        outline: 2px solid var(--ts-primary);
        outline-offset: -2px;
    }

    .mobile-trigger-button:focus[b-di3fpr4f00] {
        outline: 2px solid var(--ts-primary);
        outline-offset: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .tom-select .ts-control[b-di3fpr4f00],
    .tom-select .ts-dropdown .option[b-di3fpr4f00],
    .loading-spinner[b-di3fpr4f00],
    .mobile-trigger-button[b-di3fpr4f00],
    .search-chip-trigger[b-di3fpr4f00],
    .mobile-option-item[b-di3fpr4f00],
    .action-button[b-di3fpr4f00] {
        animation: none;
        transition: none;
    }

    .tom-select .ts-dropdown[b-di3fpr4f00] {
        animation: none;
    }

    .mobile-trigger-button[aria-expanded="true"] .trigger-icon[b-di3fpr4f00] {
        transform: none;
    }
}

/* Focus visible (keyboard navigation) */
.tom-select .ts-dropdown .option:focus-visible[b-di3fpr4f00] {
    outline: 2px solid var(--ts-primary);
    outline-offset: -2px;
}

.mobile-option-item:focus-visible[b-di3fpr4f00] {
    outline: 2px solid var(--ts-primary);
    outline-offset: -2px;
}

.mobile-trigger-button:focus-visible[b-di3fpr4f00] {
    outline: 2px solid var(--ts-primary);
    outline-offset: 2px;
}

.action-button:focus-visible[b-di3fpr4f00] {
    outline: 2px solid var(--ts-primary);
    outline-offset: 2px;
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/TopNavBar.razor.rz.scp.css */
/* Enhanced Brand Navigation */
.enhanced-brand-link[b-48do0h0lah] {
    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-48do0h0lah] {
    color: #ffffff;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.enhanced-brand-link:focus[b-48do0h0lah] {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

.brand-home-icon[b-48do0h0lah] {
    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-48do0h0lah] {
    opacity: 1;
    transform: translateX(0);
}

.brand-text[b-48do0h0lah] {
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.enhanced-brand-link:hover .brand-text[b-48do0h0lah] {
    transform: translateX(2px);
}

/* Mobile adjustments for brand link */
@media (max-width: 575.98px) {
    .enhanced-brand-link[b-48do0h0lah] {
        font-size: 1rem;
        padding: 0.375rem 0.5rem;
    }
    
    .brand-home-icon[b-48do0h0lah] {
        width: 16px;
        height: 16px;
    }
}

/* Mobile Navigation Fixes */
.fixed-top-nav[b-48do0h0lah] {
    position: relative;
    z-index: 1050;
}

/* Custom hamburger button styling */
.custom-toggler[b-48do0h0lah] {
    border: none;
    padding: 4px 8px;
    background: transparent;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.custom-toggler:focus[b-48do0h0lah] {
    box-shadow: none;
    outline: 2px solid rgba(255, 255, 255, 0.3);
}

.custom-toggler .navbar-toggler-icon[b-48do0h0lah] {
    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-48do0h0lah] {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Mobile navigation menu styling */
@media (max-width: 991.98px) {
    .navbar-collapse[b-48do0h0lah] {
        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-48do0h0lah] {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .mobile-nav-menu[b-48do0h0lah] {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 1rem 0;
    }

    .mobile-nav-item[b-48do0h0lah] {
        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-48do0h0lah] {
        border-bottom: none;
    }

    .mobile-nav-item:hover[b-48do0h0lah] {
        background-color: rgba(255, 255, 255, 0.1);
        color: #ffffff !important;
        text-decoration: none;
        padding-left: 2rem !important;
    }

    .mobile-nav-item:active[b-48do0h0lah] {
        background-color: rgba(255, 255, 255, 0.2);
    }

    /* Mobile navigation overlay */
    .mobile-nav-overlay[b-48do0h0lah] {
        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-48do0h0lah] {
        display: flex !important;
    }

    .mobile-nav-overlay[b-48do0h0lah] {
        display: none;
    }

    .nav-link[b-48do0h0lah] {
        color: #ffffff !important;
        margin-right: 10px;
        transition: color 0.3s ease;
    }

    .nav-link:hover[b-48do0h0lah] {
        color: rgba(255, 255, 255, 0.8) !important;
    }
}

/* Fix for mobile layout issues */
@media (max-width: 575.98px) {
    .container-fluid[b-48do0h0lah] {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .mobile-nav-item[b-48do0h0lah] {
        font-size: 1rem;
        padding: 1rem 1.5rem !important;
    }
}

/* Animation improvements */
.navbar-collapse[b-48do0h0lah] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav-item[b-48do0h0lah] {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure proper z-index stacking */
.navbar[b-48do0h0lah] {
    z-index: 1050;
}

.navbar-collapse[b-48do0h0lah] {
    z-index: 1040;
}

/* Fix for profile button positioning */
.d-flex.align-items-center[b-48do0h0lah] {
    z-index: 1051;
    position: relative;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .navbar-collapse[b-48do0h0lah],
    .mobile-nav-item[b-48do0h0lah],
    .custom-toggler[b-48do0h0lah] {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .mobile-nav-item[b-48do0h0lah] {
        border-bottom: 2px solid #ffffff;
    }

    .custom-toggler:focus[b-48do0h0lah] {
        outline: 3px solid #ffffff;
    }
}

/* Prevent body scroll when mobile menu is open */
:global(body.mobile-nav-open)[b-48do0h0lah] {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* Focus management for accessibility */
.mobile-nav-item:focus[b-48do0h0lah] {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    background-color: rgba(255, 255, 255, 0.2);
}

/* Smooth transitions for better UX */
.navbar-collapse[b-48do0h0lah] {
    will-change: transform, opacity;
}

.mobile-nav-item[b-48do0h0lah] {
    will-change: background-color, padding-left;
}

/* Fix for iOS Safari viewport issues */
@supports (-webkit-touch-callout: none) {
    .mobile-nav-overlay[b-48do0h0lah] {
        height: -webkit-fill-available;
    }
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/WeightCheckIn.razor.rz.scp.css */
.form-control[b-u7lp6bhr84] {
    background-color: #fff;
    border-color: #dee2e6;
}

.form-control[b-u7lp6bhr84]::placeholder {
    color: #6c757d;
    opacity: 0.8;
}

.form-control:focus[b-u7lp6bhr84] {
    box-shadow: none;
    border-color: #0d6efd;
}

.btn-outline-secondary[b-u7lp6bhr84] {
    background-color: #fff;
    border-color: #dee2e6;
}

.btn-outline-secondary:hover[b-u7lp6bhr84] {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #6c757d;
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/WeightProgressVisualization.razor.rz.scp.css */
.weight-progress-container[b-2334xaqzam] {
    max-width: 900px;
    margin: 0 auto;
}

[b-2334xaqzam] .card {
    transition: all 0.3s ease;
    border-width: 2px;
}

[b-2334xaqzam] .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.timeline-container[b-2334xaqzam] {
    position: relative;
    padding: 20px 0;
    margin: 20px 0;
}

.timeline-track[b-2334xaqzam] {
    height: 4px;
    background-color: #e9ecef;
    border-radius: 2px;
    position: relative;
}

.timeline-progress[b-2334xaqzam] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: #198754;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.timeline-markers[b-2334xaqzam] {
    position: relative;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

.marker[b-2334xaqzam] {
    font-size: 0.75rem;
    color: #6c757d;
}

.checkin-points[b-2334xaqzam] {
    position: absolute;
    top: -4px; /* Align with the timeline track */
    left: 0;
    right: 0;
    height: 12px; /* Match dot height */
}



.checkin-dot[b-2334xaqzam]::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-2334xaqzam]::before {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
}

.checkin-dot[b-2334xaqzam] {
    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-2334xaqzam]::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-2334xaqzam]::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
}


.frequency-stats .h5[b-2334xaqzam] {
    color: #198754;
}

.checkin-dot-sample[b-2334xaqzam] {
    width: 12px;
    height: 12px;
    background-color: #198754;
    border-radius: 50%;
    display: inline-block;
}


.progress-message-container[b-2334xaqzam] {
    margin: 2rem 0 0; 
}



.progress-message-container .alert[b-2334xaqzam] {
    margin-bottom: 0;
    border-left-width: 4px;
    padding: 1rem 1.25rem;
    font-size: 1rem;
}


.progress-message-container .alert-info[b-2334xaqzam] {
    background-color: rgba(13, 202, 240, 0.15);
    color: #055160;
}

.progress-message-container .alert-success[b-2334xaqzam] {
    background-color: rgba(25, 135, 84, 0.15);
    color: #0a3622;
}

.progress-message-content[b-2334xaqzam] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 0.5rem;
}


.progress-message-content i[b-2334xaqzam] {
    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-2334xaqzam] {
        padding: 0.875rem 1rem;
    }
}

[b-2334xaqzam] .card {
    transition: all 0.3s ease;
    border-width: 2px;
}

[b-2334xaqzam] .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* _content/Nutrition.Web.External.UI.Interactive/Components/WeightTrendChart.razor.rz.scp.css */
.chart-container[b-07n4jr6k1s] {
    width: 100%;
    min-height: 400px;
}