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

/* /Components/Account/PasswordGenerationModal.razor.rz.scp.css */
/* Password Generation Modal - Modern Minimalist Design */

/* Backdrop */
.password-modal-backdrop[b-xsy14pxieg] {
  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-xsy14pxieg 0.2s ease-out;
}

@keyframes fade-in-b-xsy14pxieg {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal Dialog */
.password-modal-dialog[b-xsy14pxieg] {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  animation: scale-in-b-xsy14pxieg 0.2s ease-out;
}

@keyframes scale-in-b-xsy14pxieg {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Modal Content */
.password-modal-content[b-xsy14pxieg] {
  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-xsy14pxieg] {
  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-xsy14pxieg] {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(
    135deg,
    var(--fs-primary) 0%,
    var(--fs-primary-hover) 100%
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
}

.password-modal-title[b-xsy14pxieg] {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.02em;
}

.password-modal-subtitle[b-xsy14pxieg] {
  font-size: 0.9375rem;
  color: #6b7280;
  margin: 0;
  font-weight: 400;
}

/* Body */
.password-modal-body[b-xsy14pxieg] {
  padding: 2rem;
}

/* Password Display */
.password-display[b-xsy14pxieg] {
  margin-bottom: 2rem;
}

.password-label[b-xsy14pxieg] {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.75rem;
  letter-spacing: 0.01em;
}

.password-input-wrapper[b-xsy14pxieg] {
  position: relative;
  display: flex;
}

.password-input[b-xsy14pxieg] {
  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-xsy14pxieg] {
  outline: none;
  border-color: var(--fs-primary);
  background: white;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.password-input:hover[b-xsy14pxieg] {
  border-color: #d1d5db;
  background: white;
}

.password-copy-btn[b-xsy14pxieg] {
  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-xsy14pxieg] {
  color: var(--fs-primary);
  background: rgba(37, 99, 235, 0.1);
}

.password-copy-btn:active[b-xsy14pxieg] {
  transform: translateY(-50%) scale(0.95);
}

/* Warning Section */
.password-warning[b-xsy14pxieg] {
  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-xsy14pxieg] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #d97706;
  margin-top: 0.125rem;
}

.warning-content[b-xsy14pxieg] {
  flex: 1;
}

.warning-title[b-xsy14pxieg] {
  font-size: 0.875rem;
  font-weight: 600;
  color: #92400e;
  margin: 0 0 0.25rem 0;
}

.warning-text[b-xsy14pxieg] {
  font-size: 0.8125rem;
  color: #a16207;
  margin: 0;
  line-height: 1.4;
}

/* Footer */
.password-modal-footer[b-xsy14pxieg] {
  padding: 1.5rem 2rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.modal-primary-actions[b-xsy14pxieg] {
  display: flex;
  gap: 0.75rem;
}

/* Buttons */
.btn-primary[b-xsy14pxieg] {
  background: var(--fs-primary);
  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-xsy14pxieg] {
  background: var(--fs-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
}

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

.btn-outline[b-xsy14pxieg] {
  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-xsy14pxieg] {
  border-color: #d1d5db;
  background: #f9fafb;
  color: #374151;
}

.btn-outline:active[b-xsy14pxieg] {
  background: #f3f4f6;
}

.btn-secondary[b-xsy14pxieg] {
  background: transparent;
  border: 1.5px solid var(--fs-primary);
  border-radius: 10px;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fs-primary);
  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-xsy14pxieg] {
  background: rgba(37, 99, 235, 0.05);
  border-color: var(--fs-primary-hover);
  color: var(--fs-primary-hover);
}

.btn-secondary:active[b-xsy14pxieg] {
  background: rgba(37, 99, 235, 0.1);
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
  .password-modal-backdrop[b-xsy14pxieg] {
    padding: 0.5rem;
  }

  .password-modal-header[b-xsy14pxieg] {
    padding: 2rem 1.5rem 1.25rem;
  }

  .password-modal-icon[b-xsy14pxieg] {
    width: 56px;
    height: 56px;
    margin-bottom: 1.25rem;
  }

  .password-modal-title[b-xsy14pxieg] {
    font-size: 1.375rem;
  }

  .password-modal-body[b-xsy14pxieg] {
    padding: 1.5rem;
  }

  .password-modal-footer[b-xsy14pxieg] {
    padding: 1.25rem 1.5rem 1.75rem;
    flex-direction: column;
    gap: 1rem;
  }

  .modal-primary-actions[b-xsy14pxieg] {
    width: 100%;
    justify-content: stretch;
  }

  .btn-primary[b-xsy14pxieg],
  .btn-outline[b-xsy14pxieg] {
    flex: 1;
    justify-content: center;
  }

  .btn-secondary[b-xsy14pxieg] {
    width: 100%;
    justify-content: center;
  }

  .password-warning[b-xsy14pxieg] {
    padding: 1rem;
    gap: 0.75rem;
  }

  .warning-title[b-xsy14pxieg] {
    font-size: 0.8125rem;
  }

  .warning-text[b-xsy14pxieg] {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .password-modal-header[b-xsy14pxieg] {
    padding: 1.5rem 1rem 1rem;
  }

  .password-modal-body[b-xsy14pxieg] {
    padding: 1.25rem;
  }

  .password-modal-footer[b-xsy14pxieg] {
    padding: 1rem 1.25rem 1.5rem;
  }

  .password-input[b-xsy14pxieg] {
    font-size: 0.875rem;
    padding: 0.875rem 3rem 0.875rem 0.875rem;
  }

  .password-copy-btn[b-xsy14pxieg] {
    padding: 0.375rem;
    right: 0.625rem;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .password-modal-backdrop[b-xsy14pxieg],
  .password-modal-dialog[b-xsy14pxieg],
  *[b-xsy14pxieg] {
    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-xsy14pxieg],
.btn-primary:focus-visible[b-xsy14pxieg],
.btn-outline:focus-visible[b-xsy14pxieg],
.btn-secondary:focus-visible[b-xsy14pxieg] {
  outline: 2px solid var(--fs-primary);
  outline-offset: 2px;
}

.password-input:focus-visible[b-xsy14pxieg] {
  outline: none; /* We use box-shadow instead */
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .password-modal-content[b-xsy14pxieg] {
    border-width: 2px;
  }

  .password-input[b-xsy14pxieg],
  .btn-outline[b-xsy14pxieg] {
    border-width: 2px;
  }

  .password-warning[b-xsy14pxieg] {
    border-width: 2px;
  }
}

/* Dark mode support (if needed in the future) */
@media (prefers-color-scheme: dark) {
  .password-modal-content[b-xsy14pxieg] {
    background: #1f2937;
    border-color: rgba(255, 255, 255, 0.1);
  }

  .password-modal-header[b-xsy14pxieg] {
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .password-modal-title[b-xsy14pxieg] {
    color: #f9fafb;
  }

  .password-modal-subtitle[b-xsy14pxieg] {
    color: #d1d5db;
  }

  .password-label[b-xsy14pxieg] {
    color: #f3f4f6;
  }

  .password-input[b-xsy14pxieg] {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
  }

  .password-input:focus[b-xsy14pxieg] {
    background: #4b5563;
  }

  .btn-outline[b-xsy14pxieg] {
    border-color: #4b5563;
    color: #d1d5db;
  }

  .btn-outline:hover[b-xsy14pxieg] {
    background: #374151;
    border-color: #6b7280;
    color: #f3f4f6;
  }
}
/* /Components/Diet/DietQuestionnaire.razor.rz.scp.css */
/* ============================================
   Welcome-Back Banner (returning users)
   ============================================ */

.welcome-back-banner[b-c2kj072vd3] {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-left: 4px solid var(--fs-primary);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  color: #1e3a8a;
  line-height: 1.5;
  animation: welcome-fade-in-b-c2kj072vd3 0.6s ease-out both;
}

.welcome-back-icon[b-c2kj072vd3] {
  color: var(--fs-primary);
  font-size: 1.1rem;
  flex-shrink: 0;
}

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

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

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

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

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

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

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

/* Brand orange outline buttons for questionnaire */
.btn-outline-primary[b-c2kj072vd3] {
  color: var(--fs-primary);
  border-color: var(--fs-primary);
  background-color: transparent;
  transition: all 0.3s ease;
}

.btn-outline-primary:hover[b-c2kj072vd3],
.btn-outline-primary:focus[b-c2kj072vd3] {
  color: #fff;
  background-color: var(--fs-primary);
  border-color: var(--fs-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

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

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

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

/* CardSelect - Visual card grid for answer selection */
.card-select-container[b-c2kj072vd3] {
  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-c2kj072vd3] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  min-height: 130px;
  background: #fff;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  /* For ripple effect */
  position: relative;
  overflow: hidden;
}

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

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

.card-select-option:hover:not(:disabled)[b-c2kj072vd3] {
  border-color: var(--fs-primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.2);
}

.card-select-option:focus[b-c2kj072vd3] {
  outline: none;
  border-color: var(--fs-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

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

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

/* Ripple effect pseudo-element */
.card-select-option[b-c2kj072vd3]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(37, 99, 235, 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-c2kj072vd3]::after {
  transform: scale(2.5);
  opacity: 1;
  transition:
    transform 0.1s ease-out,
    opacity 0.1s ease-out;
}

.card-select-icon[b-c2kj072vd3] {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  color: var(--fs-primary);
  line-height: 1;
}

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

.card-select-label[b-c2kj072vd3] {
  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-c2kj072vd3] {
    /* Auto-fit with larger minimum - naturally adapts to content */
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 0.75rem;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.progress-header[b-c2kj072vd3] {
  background: linear-gradient(to bottom, #f8fafc, #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-c2kj072vd3] {
  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-c2kj072vd3] {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.75rem;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

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

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

.stage.active .stage-icon[b-c2kj072vd3] {
  background: var(--fs-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
  animation: pulse-glow-b-c2kj072vd3 2s infinite;
}

.stage.active .stage-label[b-c2kj072vd3] {
  color: var(--fs-primary);
  font-weight: 600;
}

.stage.completed .stage-icon[b-c2kj072vd3] {
  background: var(--fs-success);
  color: #fff;
}

.stage.completed .stage-label[b-c2kj072vd3] {
  color: var(--fs-success);
}

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

.stage-connector.completed[b-c2kj072vd3] {
  background: var(--fs-success);
}

.stage-connector.active[b-c2kj072vd3] {
  background: linear-gradient(to right, var(--fs-success), var(--fs-primary));
}

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

/* Pin the MudProgressLinear fill to the brand blue. MudBlazor has no custom theme,
   so Color="Primary" would render Mud's default indigo — ::deep reaches the child
   component's bar to force --fs-primary instead. */
.progress-header[b-c2kj072vd3]  .mud-progress-linear-bar {
  background-color: var(--fs-primary) !important;
}

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

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

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

.progress-meta .current-stage-label[b-c2kj072vd3] {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  color: var(--fs-primary);
}

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

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

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

/* Pulse animation for active stage */
@keyframes pulse-glow-b-c2kj072vd3 {
  0%,
  100% {
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
  }
  50% {
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.6);
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.preset-btn[b-c2kj072vd3] {
  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-c2kj072vd3] {
  border-color: var(--fs-primary);
  color: var(--fs-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.preset-btn:focus[b-c2kj072vd3] {
  outline: none;
  border-color: var(--fs-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.preset-btn.selected[b-c2kj072vd3] {
  background: var(--fs-primary);
  border-color: var(--fs-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

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

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

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

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

.skip-option-link[b-c2kj072vd3] {
  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-c2kj072vd3] {
  color: var(--fs-primary);
  text-decoration: underline;
}

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

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

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

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

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

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

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

.image-card-option[b-c2kj072vd3] {
  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-c2kj072vd3] {
  border-color: var(--fs-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.2);
}

.image-card-option:focus[b-c2kj072vd3] {
  outline: none;
  border-color: var(--fs-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

.image-card-option.selected[b-c2kj072vd3] {
  border-color: var(--fs-primary);
  background: linear-gradient(
    to bottom,
    rgba(37, 99, 235, 0.08),
    rgba(37, 99, 235, 0.02)
  );
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.image-card-option.selected[b-c2kj072vd3]::before {
  content: "\2713";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 24px;
  height: 24px;
  background: var(--fs-primary);
  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-c2kj072vd3] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

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

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

.image-card-option.selected .image-card-label[b-c2kj072vd3] {
  color: var(--fs-primary);
}

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

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

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

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

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

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

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

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

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

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

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

/* Help icon cursor */
.help-icon[b-c2kj072vd3] {
  cursor: help;
}
/* /Components/Diet/QuestionGuidance.razor.rz.scp.css */
/* QuestionGuidance.razor.css - Scoped styles for guidance section */

/* Base container */
.guidance-section[b-in49bsqqzq] {
  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-in49bsqqzq] {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  transition: all 0.2s ease;
  overflow: hidden;
}

.guidance-item:hover[b-in49bsqqzq] {
  border-color: var(--fs-primary, #2563eb);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

/* Open state - light orange tint */
.guidance-item[open][b-in49bsqqzq] {
  background: #eff6ff;
  border-color: rgba(37, 99, 235, 0.3);
}

/* Research quote variant */
.guidance-item--research[b-in49bsqqzq] {
  background: #f8fafc;
}

.guidance-item--research[open][b-in49bsqqzq] {
  background: #fefce8;
  border-color: rgba(234, 179, 8, 0.3);
}

/* Summary (clickable header) */
.guidance-header[b-in49bsqqzq] {
  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-in49bsqqzq]::-webkit-details-marker {
  display: none;
}

.guidance-header[b-in49bsqqzq]::marker {
  display: none;
  content: "";
}

/* Icon container */
.guidance-icon[b-in49bsqqzq] {
  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-in49bsqqzq] {
  background: rgba(37, 99, 235, 0.2);
  color: var(--fs-primary, #2563eb);
}

.guidance-item--research[open] .guidance-icon[b-in49bsqqzq] {
  background: rgba(234, 179, 8, 0.15);
  color: #ca8a04;
}

/* Title text */
.guidance-title[b-in49bsqqzq] {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2d3748;
  text-align: left;
}

/* Chevron indicator */
.guidance-chevron[b-in49bsqqzq] {
  color: #9ca3af;
  font-size: 0.75rem;
  transition:
    transform 0.3s ease,
    color 0.2s ease;
  flex-shrink: 0;
}

.guidance-item[open] .guidance-chevron[b-in49bsqqzq] {
  transform: rotate(180deg);
  color: var(--fs-primary, #2563eb);
}

.guidance-item--research[open] .guidance-chevron[b-in49bsqqzq] {
  color: #ca8a04;
}

/* Content area */
.guidance-content[b-in49bsqqzq] {
  padding: 0 1.25rem 1rem 3.5rem; /* Left indent aligns with title */
  text-align: left;
}

.guidance-content p[b-in49bsqqzq] {
  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-in49bsqqzq] {
  margin-bottom: 0;
}

/* Blockquote for research quotes */
.guidance-blockquote[b-in49bsqqzq] {
  margin: 0;
  padding: 0;
  border: none;
  font-style: normal;
}

.guidance-content--quote[b-in49bsqqzq] {
  padding-left: 3.5rem;
}

.guidance-content--quote .guidance-blockquote[b-in49bsqqzq] {
  border-left: 3px solid rgba(234, 179, 8, 0.5);
  padding-left: 1rem;
}

.guidance-content--quote .guidance-blockquote p[b-in49bsqqzq] {
  color: #525252;
  font-style: italic;
}

/* Plain text remarks (no collapsible) */
.guidance-plain[b-in49bsqqzq] {
  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-in49bsqqzq] {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.guidance-plain-label[b-in49bsqqzq] {
  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-in49bsqqzq] {
  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-in49bsqqzq] {
  margin-bottom: 0;
}

.guidance-plain .guidance-blockquote[b-in49bsqqzq] {
  margin: 0;
  padding: 0;
  border: none;
}

/* Guidance image */
.guidance-image[b-in49bsqqzq] {
  margin-top: var(--fs-spacing-md, 12px);
  text-align: center;
}

.guidance-image img[b-in49bsqqzq] {
  border-radius: 8px;
  max-width: 100%;
  height: auto;
}

/* Accessibility - focus states */
.guidance-header:focus[b-in49bsqqzq] {
  outline: 2px solid var(--fs-primary, #2563eb);
  outline-offset: 2px;
  border-radius: 8px;
}

.guidance-header:focus:not(:focus-visible)[b-in49bsqqzq] {
  outline: none;
}

.guidance-header:focus-visible[b-in49bsqqzq] {
  outline: 2px solid var(--fs-primary, #2563eb);
  outline-offset: 2px;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .guidance-item[b-in49bsqqzq],
  .guidance-icon[b-in49bsqqzq],
  .guidance-chevron[b-in49bsqqzq] {
    transition: none;
  }
}

/* Mobile responsiveness */
@media (max-width: 576px) {
  .guidance-section[b-in49bsqqzq] {
    margin-top: var(--fs-spacing-lg, 16px);
  }

  .guidance-header[b-in49bsqqzq] {
    padding: 0.875rem 1rem;
  }

  .guidance-content[b-in49bsqqzq] {
    padding: 0 1rem 0.875rem 2.75rem;
  }

  .guidance-content--quote[b-in49bsqqzq] {
    padding-left: 2.75rem;
  }

  .guidance-icon[b-in49bsqqzq] {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }

  .guidance-title[b-in49bsqqzq] {
    font-size: 0.9rem;
  }

  .guidance-plain[b-in49bsqqzq] {
    padding: 0.875rem 1rem;
  }
}

/* Extra small devices */
@media (max-width: 400px) {
  .guidance-header[b-in49bsqqzq] {
    padding: 0.75rem 0.875rem;
    gap: 6px;
  }

  .guidance-content[b-in49bsqqzq] {
    padding: 0 0.875rem 0.75rem 2.5rem;
  }

  .guidance-icon[b-in49bsqqzq] {
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
  }

  .guidance-title[b-in49bsqqzq] {
    font-size: 0.85rem;
  }
}
/* /Components/Diet/QuestionnaireHistoryComponent.razor.rz.scp.css */
/* ============================================
   Answer History - Vertical Timeline Component
   ============================================ */

.answer-history[b-88bfruyhv4] {
  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-88bfruyhv4] {
  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-88bfruyhv4] {
  background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
}

.answer-history-toggle:focus[b-88bfruyhv4] {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.3);
}

.toggle-content[b-88bfruyhv4] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.history-toggle-icon[b-88bfruyhv4] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(
    135deg,
    var(--fs-primary) 0%,
    var(--fs-primary-hover) 100%
  );
  border-radius: 10px;
  color: #fff;
  font-size: 1rem;
}

.toggle-text[b-88bfruyhv4] {
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
}

.answer-count[b-88bfruyhv4] {
  padding: 0.25rem 0.75rem;
  background: #e8f5e9;
  color: var(--fs-success);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 50px;
}

.toggle-actions[b-88bfruyhv4] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.toggle-chevron[b-88bfruyhv4] {
  color: #adb5bd;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.answer-history.expanded .toggle-chevron[b-88bfruyhv4] {
  color: var(--fs-primary);
}

.close-btn[b-88bfruyhv4] {
  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-88bfruyhv4] {
  background: #e9ecef;
  color: #333;
}

/* ============================================
   Timeline Content
   ============================================ */

.answer-timeline[b-88bfruyhv4] {
  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-88bfruyhv4] {
  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-88bfruyhv4] {
  background: #fff;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  padding: 1rem;
  transition: all 0.25s ease;
  position: relative;
}

.stage-card.completed[b-88bfruyhv4] {
  border-color: #d1fae5;
  background: linear-gradient(to bottom, #f0fdf4, #fff);
}

.stage-card.active[b-88bfruyhv4] {
  border-color: var(--fs-primary);
  background: linear-gradient(to bottom, #eff6ff, #fff);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.15);
}

.stage-card.pending[b-88bfruyhv4] {
  border-color: #e9ecef;
  background: #fafafa;
  opacity: 0.7;
}

/* Stage Header */
.stage-header[b-88bfruyhv4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.stage-info[b-88bfruyhv4] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.stage-card .history-stage-icon[b-88bfruyhv4] {
  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-88bfruyhv4] {
  background: var(--fs-success);
  color: #fff;
}

.stage-card.active .history-stage-icon[b-88bfruyhv4] {
  background: var(--fs-primary);
  color: #fff;
  animation: pulse-soft-b-88bfruyhv4 2s infinite;
}

.stage-card.pending .history-stage-icon[b-88bfruyhv4] {
  background: #e9ecef;
  color: #adb5bd;
}

@keyframes pulse-soft-b-88bfruyhv4 {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(37, 99, 235, 0);
  }
}

.stage-details[b-88bfruyhv4] {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.history-stage-name[b-88bfruyhv4] {
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
}

.stage-status[b-88bfruyhv4] {
  font-size: 0.75rem;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stage-card.active .stage-status[b-88bfruyhv4] {
  color: var(--fs-primary);
}

/* Edit Button */
.edit-btn[b-88bfruyhv4] {
  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-88bfruyhv4] {
  border-color: var(--fs-primary);
  color: var(--fs-primary);
  background: rgba(37, 99, 235, 0.05);
}

.edit-btn:focus[b-88bfruyhv4] {
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

/* ============================================
   Answer List
   ============================================ */

.answer-list[b-88bfruyhv4] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.answer-row[b-88bfruyhv4] {
  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-88bfruyhv4] {
  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-88bfruyhv4] {
  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-88bfruyhv4] {
  font-size: 0.8rem;
  font-weight: 400;
  color: #6c757d;
  margin-left: 0.25rem;
}

/* ============================================
   Answer Placeholder
   ============================================ */

.answer-placeholder[b-88bfruyhv4] {
  padding: 0.75rem;
  text-align: center;
}

.answer-placeholder span[b-88bfruyhv4] {
  font-size: 0.85rem;
  color: #adb5bd;
  font-style: italic;
}

.stage-card.active .answer-placeholder span[b-88bfruyhv4] {
  color: var(--fs-primary);
  font-style: normal;
}

/* ============================================
   Timeline Connector
   ============================================ */

.timeline-connector[b-88bfruyhv4] {
  width: 2px;
  height: 24px;
  margin: 0 auto;
  background: #e9ecef;
  transition: all 0.25s ease;
}

.timeline-connector.completed[b-88bfruyhv4] {
  background: var(--fs-success);
}

.timeline-connector.active[b-88bfruyhv4] {
  background: linear-gradient(to bottom, var(--fs-success), var(--fs-primary));
}

/* ============================================
   Mobile Responsive - Inline Collapsible
   (Avoids conflict with mobile sticky CTA)
   ============================================ */

@media (max-width: 768px) {
  .answer-history[b-88bfruyhv4] {
    /* 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-88bfruyhv4] {
    padding: 0.75rem 1rem;
  }

  .answer-history.expanded .answer-timeline[b-88bfruyhv4] {
    max-height: 40vh;
  }

  .history-toggle-icon[b-88bfruyhv4] {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }

  .toggle-text[b-88bfruyhv4] {
    font-size: 0.9rem;
  }

  .answer-count[b-88bfruyhv4] {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
  }

  .stage-card[b-88bfruyhv4] {
    padding: 0.875rem;
  }

  .stage-card .history-stage-icon[b-88bfruyhv4] {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }

  .history-stage-name[b-88bfruyhv4] {
    font-size: 0.9rem;
  }

  .answer-row[b-88bfruyhv4] {
    padding: 0.375rem 0.5rem;
  }

  .answer-label[b-88bfruyhv4] {
    font-size: 0.8rem;
  }

  .answer-value[b-88bfruyhv4] {
    font-size: 0.85rem;
  }
}

/* ============================================
   Large Desktop - Wider layout
   ============================================ */

@media (min-width: 1200px) {
  .answer-history[b-88bfruyhv4] {
    max-width: 700px;
  }
}

/* ============================================
   Accessibility - Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .answer-history[b-88bfruyhv4],
  .answer-timeline[b-88bfruyhv4],
  .stage-card[b-88bfruyhv4],
  .toggle-chevron[b-88bfruyhv4],
  .stage-card .history-stage-icon[b-88bfruyhv4],
  .timeline-connector[b-88bfruyhv4],
  .edit-btn[b-88bfruyhv4],
  .close-btn[b-88bfruyhv4],
  .answer-history-toggle[b-88bfruyhv4] {
    animation: none !important;
    transition: none !important;
  }

  /* Ensure timeline is visible/hidden instantly */
  .answer-timeline[b-88bfruyhv4] {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
  }

  .answer-history.expanded .answer-timeline[b-88bfruyhv4] {
    opacity: 1;
    visibility: visible;
    max-height: 600px;
  }
}

/* ============================================
   High Contrast Mode Support
   ============================================ */

@media (prefers-contrast: high) {
  .answer-history[b-88bfruyhv4] {
    border: 2px solid #000;
  }

  .stage-card[b-88bfruyhv4] {
    border-width: 2px;
  }

  .stage-card.completed[b-88bfruyhv4] {
    border-color: var(--fs-success);
  }

  .stage-card.active[b-88bfruyhv4] {
    border-color: var(--fs-primary);
  }

  .answer-count[b-88bfruyhv4] {
    background: var(--fs-success);
    color: #fff;
  }
}
/* /Components/FixedServing/FixedGramsInput.razor.rz.scp.css */
/* Fixed Grams Input Component Styles */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.macro-item.protein .macro-value[b-mbtvd0eb7u] {
  color: var(--fs-macro-protein); /* blue for protein */
}

.macro-item.carbs .macro-value[b-mbtvd0eb7u] {
  color: var(--fs-macro-carbs-text); /* green for carbs */
}

.macro-item.fat .macro-value[b-mbtvd0eb7u] {
  color: var(--fs-macro-fat-text); /* amber for fat */
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Remove number input spinners */
.amount-input[b-fotw3ckhpc]::-webkit-outer-spin-button,
.amount-input[b-fotw3ckhpc]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.amount-input[type="number"][b-fotw3ckhpc] {
  -moz-appearance: textfield;
}
/* /Components/FoodEntry/CustomFoodCreationModal.razor.rz.scp.css */
/* CustomFoodCreationModal.razor.css */
.modal-overlay[b-cfxh71ealx] {
  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-cfxh71ealx 0.2s ease-out;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* "Similar foods" reuse hint + card affordance */
.similar-foods-hint[b-cfxh71ealx] {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  color: #718096;
}

.similar-food-card-head[b-cfxh71ealx] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.use-chip[b-cfxh71ealx] {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fs-primary);
  border: 1px solid #cdddfb;
  border-radius: 8px;
  padding: 4px 10px;
}

.similar-food-card:hover .use-chip[b-cfxh71ealx] {
  background: var(--fs-primary);
  color: #fff;
  border-color: var(--fs-primary);
}

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

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

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

.step-number[b-cfxh71ealx] {
  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-cfxh71ealx] {
  background: var(--fs-primary);
  color: white;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
}

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

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

.step-connector.active[b-cfxh71ealx] {
  background: var(--fs-primary);
}

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

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

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

.form-label i[b-cfxh71ealx] {
  color: var(--fs-primary);
  font-size: 1rem;
}

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

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

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

[b-cfxh71ealx] .custom-input .mud-input-root:hover {
  border-color: var(--fs-primary);
}

[b-cfxh71ealx]
  .custom-input
  .mud-input-root.mud-input-root-outlined.Mui-focused
  .mud-input-outlined-border {
  border-color: var(--fs-primary);
  border-width: 2px;
}

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

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

.btn-continue[b-cfxh71ealx] {
  background: var(--fs-primary);
  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(37, 99, 235, 0.2);
}

.btn-continue:hover:not(.disabled)[b-cfxh71ealx] {
  background: var(--fs-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
}

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

@media (max-width: 640px) {
  .modal-container[b-cfxh71ealx] {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .modal-header[b-cfxh71ealx] {
    border-radius: 0;
  }

  .progress-steps[b-cfxh71ealx] {
    margin: 0 1rem 1.5rem;
  }

  .step-label[b-cfxh71ealx] {
    font-size: 0.7rem;
  }

  .form-section[b-cfxh71ealx] {
    padding: 0 1rem;
  }

  .modal-actions[b-cfxh71ealx] {
    flex-direction: column-reverse;
    gap: 0.75rem;
    padding: 1rem;
  }

  .btn-cancel[b-cfxh71ealx],
  .btn-continue[b-cfxh71ealx] {
    width: 100%;
    justify-content: center;
  }

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

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

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

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

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

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

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

.auth-icon[b-cfxh71ealx] {
  color: var(--fs-primary);
  font-size: 3rem !important;
}

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

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

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

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

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

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

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

.auth-actions .mud-button-filled[b-cfxh71ealx] {
  background-color: var(--fs-primary) !important;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
}

.auth-actions .mud-button-filled:hover[b-cfxh71ealx] {
  background-color: var(--fs-primary-hover) !important;
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
}

.auth-actions .mud-button-outlined[b-cfxh71ealx] {
  border-color: var(--fs-primary) !important;
  color: var(--fs-primary) !important;
}

.auth-actions .mud-button-outlined:hover[b-cfxh71ealx] {
  background-color: rgba(37, 99, 235, 0.08) !important;
}

@media (max-width: 640px) {
  .auth-modal-container[b-cfxh71ealx] {
    width: 95%;
    margin: 1rem;
  }

  .auth-modal-header[b-cfxh71ealx] {
    padding: 1.5rem 1.5rem 1rem;
  }

  .auth-modal-body[b-cfxh71ealx] {
    padding: 0 1.5rem 1.5rem;
  }
}

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

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

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

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

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

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

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

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

/* Responsive adjustments */
@media (max-width: 768px) {
  .modal-container[b-cfxh71ealx] {
    width: 95%;
    max-height: 95vh;
  }

  .scan-tab-content[b-cfxh71ealx] {
    min-height: 300px;
  }

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

  .mud-tab-panels[b-cfxh71ealx] {
    max-height: calc(95vh - 180px);
  }
}

/* Scan-first hero — the primary path into the modal (design decision: never bury scan) */
.scan-hero[b-cfxh71ealx] {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--fs-primary);
  border: none;
  border-radius: 4px;
  padding: 1rem 1.25rem;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
  font-family: inherit;
  transition: background 0.2s ease;
}

.scan-hero:hover[b-cfxh71ealx] {
  background: var(--fs-primary-hover);
}

.scan-hero[b-cfxh71ealx]  .scan-hero-icon {
  color: #fff;
  font-size: 2rem;
}

.scan-hero-text[b-cfxh71ealx] {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.scan-hero-title[b-cfxh71ealx] {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.scan-hero-subtitle[b-cfxh71ealx] {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 2px;
}

.scan-hero[b-cfxh71ealx]  .scan-hero-arrow {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.375rem;
}

/* "or enter manually" divider between the scan hero and the manual fields */
.manual-divider[b-cfxh71ealx] {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1.25rem 0;
}

.manual-divider[b-cfxh71ealx]::before,
.manual-divider[b-cfxh71ealx]::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

.manual-divider span[b-cfxh71ealx] {
  font-size: 0.72rem;
  font-weight: 600;
  color: #9ca3af;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* /Components/FoodEntry/CustomFoodEditorModal.razor.rz.scp.css */
/* Base modal trigger button */
.custom-food-form .btn-outline-primary[b-2crx021ne8] {
  transition: all 0.2s ease;
  border-color: #3b82f6;
  color: #3b82f6;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.quick-access-item[b-dhnh9zxiw0] {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background-color: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 2rem;
  color: var(--fs-primary);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

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

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

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

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

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

.food-card:hover[b-dhnh9zxiw0] {
  border-color: var(--fs-primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

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

.food-card-header i[b-dhnh9zxiw0] {
  color: var(--fs-primary);
  font-size: 0.875rem;
}

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

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

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

/* Custom Foods Badge */
.custom-foods-badge[b-dhnh9zxiw0] {
  color: var(--fs-primary);
  background-color: #eff6ff;
  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-dhnh9zxiw0] {
    grid-template-columns: 1fr;
  }

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

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

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

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

  [b-ljrioza629] .mud-grid-item {
    padding: 0.5rem;
  }
}

/* Section hint under a heading */
.section-hint[b-ljrioza629] {
  margin: -0.5rem 0 1rem;
  font-size: 0.82rem;
  color: #718096;
}

/* Live macro-split bar */
.macro-split[b-ljrioza629] {
  margin-bottom: 0.5rem;
}

.macro-split-bar[b-ljrioza629] {
  display: flex;
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
  background: #f1f5f9;
}

.macro-seg[b-ljrioza629] {
  transition: width 0.25s ease;
}

.macro-seg-carbs[b-ljrioza629] {
  background: var(--fs-macro-carbs-text, #047857);
}

.macro-seg-protein[b-ljrioza629] {
  background: var(--fs-macro-protein, #2563eb);
}

.macro-seg-fat[b-ljrioza629] {
  background: var(--fs-macro-fat-text, #b45309);
}

.macro-split-legend[b-ljrioza629] {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.76rem;
  color: #6b7280;
}

.macro-split-legend .macro-carbs[b-ljrioza629] {
  color: var(--fs-macro-carbs-text, #047857);
}

.macro-split-legend .macro-protein[b-ljrioza629] {
  color: var(--fs-macro-protein, #2563eb);
}

.macro-split-legend .macro-fat[b-ljrioza629] {
  color: var(--fs-macro-fat-text, #b45309);
}

.macro-split-legend .macro-kcal[b-ljrioza629] {
  margin-left: auto;
  color: #9ca3af;
}

/* Collapsible detailed-nutrition toggle (::deep — the class lands on MudButton's rendered button) */
[b-ljrioza629] .detailed-nutrition-toggle {
  text-transform: none;
}

.detailed-nutrition-hint[b-ljrioza629] {
  margin-left: 0.4rem;
  font-weight: 500;
  color: #9ca3af;
  text-transform: none;
}

/* Error summary banner shown above the form after a blocked save */
.validation-banner[b-ljrioza629] {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}

[b-ljrioza629] .validation-banner-icon {
  color: #dc2626;
  font-size: 1.25rem;
}

.validation-banner-title[b-ljrioza629] {
  font-size: 0.9rem;
  font-weight: 600;
  color: #991b1b;
}

.validation-banner-items[b-ljrioza629] {
  font-size: 0.8rem;
  color: #b91c1c;
  margin-top: 2px;
}

/* Live calories-vs-macros mismatch strip under the macro bar */
.macro-mismatch[b-ljrioza629] {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.6rem;
  background: #fef2f2;
  border-radius: 4px;
  padding: 0.6rem 0.75rem;
  font-size: 0.78rem;
  color: #991b1b;
  line-height: 1.4;
}

[b-ljrioza629] .macro-mismatch-icon {
  color: #dc2626;
  font-size: 1rem;
}

/* "N issues above" note next to the disabled save button */
.issues-count[b-ljrioza629] {
  font-size: 0.8rem;
  font-weight: 600;
  color: #dc2626;
  margin-right: 0.75rem;
  white-space: nowrap;
}
/* /Components/FoodSelection/FoodSelection.razor.rz.scp.css */
/* FoodSelection.razor.css */
/* Note: Design tokens are imported globally in _Layout.cshtml */
/* This file uses CSS variables defined in design-tokens.css */

/* ============================================
   SEARCH BAR INNER (TomSelect + Voice mic)
   Input-group pattern: flush edges, shared border.
   The parent .search-hero-zone provides the single
   visible border; children are borderless inside.
   ============================================ */

[b-3soal3mqbs] .search-bar-inner {
  display: flex;
  align-items: stretch;
  gap: 0; /* No gap — shared-border illusion */
}

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

/* Mic button: flush suffix with vertical separator */
[b-3soal3mqbs] .search-bar-inner .voice-mic-btn {
  align-self: stretch;
  position: relative;
}

/* Vertical separator between search input and mic button */
[b-3soal3mqbs] .search-bar-inner .voice-mic-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--fs-border-default, #e5e7eb);
  opacity: 0.6;
}

/* Skeleton placeholder also gets the separator */
[b-3soal3mqbs] .search-bar-inner .voice-mic-skeleton {
  position: relative;
}

[b-3soal3mqbs] .search-bar-inner .voice-mic-skeleton::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--fs-border-default, #e5e7eb);
  opacity: 0.6;
}

/* ============================================
   SEARCH HERO ZONE
   Primary entry point for meal planning.
   Single shared border around TomSelect + mic.
   overflow: hidden clips children to border-radius.
   ============================================ */

[b-3soal3mqbs] .search-hero-zone {
  background: transparent;
  border: 1.5px solid var(--fs-border-default);
  border-radius: var(--fs-radius-md);
  padding: 0; /* Children fill edge-to-edge */
  margin-bottom: var(--fs-spacing-lg);
  box-shadow: none;
  transition: var(--fs-transition-all);
  overflow: clip; /* Clip children to border-radius without new BFC (avoids iOS Safari reflow issues) */
}

[b-3soal3mqbs] .search-hero-zone:focus-within {
  border-color: var(--fs-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Search microcopy — hidden in V3, placeholder text is sufficient */
[b-3soal3mqbs] .search-microcopy {
  display: none;
}

/* TomSelect inside hero zone — borderless, parent provides border */
[b-3soal3mqbs] .search-hero-zone .ts-control {
  min-height: 44px;
  font-size: var(--fs-font-size-base);
  border: none !important;
  box-shadow: none !important;
  background: var(--fs-bg-primary);
  border-radius: 0; /* Parent clips corners */
}

[b-3soal3mqbs] .search-hero-zone .ts-control:hover {
  border: none !important;
  box-shadow: none !important;
}

[b-3soal3mqbs] .search-hero-zone .ts-control:focus,
[b-3soal3mqbs] .search-hero-zone .ts-wrapper.focus .ts-control {
  border: none !important;
  box-shadow: none !important;
  outline: none;
}

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

/* Mobile: TomSelect renders a self-contained .search-chip-trigger (its OWN 1.5px border + radius +
   focus ring), NOT the inline .ts-control — so the .ts-control reset above never reached it and the
   hero zone double-bordered the field (the box-in-a-box). Flatten the chip so the hero zone owns the
   single border + :focus-within ring, and de-box the magnifier badge (drop its raised white square). */
[b-3soal3mqbs] .search-hero-zone .search-chip-trigger {
  border: none !important;
  border-radius: 0 !important;
  background: var(
    --fs-bg-primary
  ) !important; /* white fill, parity with desktop .ts-control */
  /* NOTE: no `box-shadow:none` here — the chip has no resting shadow, and overriding it with
     !important would kill the search-pulse glow animation (keyframes animate box-shadow). The
     :hover/:focus rule below suppresses the chip's own focus ring; the hero owns :focus-within. */
}
[b-3soal3mqbs] .search-hero-zone .search-chip-trigger:hover:not(:disabled),
[b-3soal3mqbs] .search-hero-zone .search-chip-trigger:focus {
  border: none !important;
  box-shadow: none !important;
}
[b-3soal3mqbs] .search-hero-zone .chip-icon-wrapper {
  background: transparent !important;
  box-shadow: none !important;
}

/* Mic button + skeleton: right-side radius matches hero zone inner edge */
[b-3soal3mqbs] .search-hero-zone .voice-mic-btn,
[b-3soal3mqbs] .search-hero-zone .voice-mic-skeleton {
  border-top-right-radius: calc(var(--fs-radius-md) - 1.5px);
  border-bottom-right-radius: calc(var(--fs-radius-md) - 1.5px);
}

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

  [b-3soal3mqbs] .search-hero-zone .ts-control {
    min-height: 44px;
    font-size: 16px; /* Prevent iOS zoom */
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ─────────────────────────────────────────────
   COMPACT ROW: Minimalist inline layout
   Inspired by Notion/Linear/Todoist
   ───────────────────────────────────────────── */
/* V5 redesign: row is a divider-separated list item, not a card.
   Per-row border/background/border-radius were removed so long lists read
   as a continuous scan rather than a stack of chrome. The divider lives on
   the row itself (adjacent-sibling) so the first row has no top rule. */
[b-3soal3mqbs] .selected-food-item {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  margin: 0;
  min-height: 44px;
  transition: background-color 0.15s ease;
  /* Entrance animation for newly-added rows (moved from split-layout.css so
     all .selected-food-item rules live in one place). */
  animation: slideIn-b-3soal3mqbs var(--fs-transition-slow);
}

[b-3soal3mqbs] .selected-food-item + .selected-food-item {
  border-top: 1px solid #e5e7eb;
}

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

/* Hover is subtle now — a gentle tint, no border-left shift (which caused
   a 3px horizontal jump on every hover in the card design). */
[b-3soal3mqbs] .selected-food-item:hover {
  background: #f9fafb;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ==========================================================================
   SELECTED-FOOD ROW — V5 layout
   --------------------------------------------------------------------------
   Each row renders: food-title, amount-input[.filled], unit-pill, delete.
   Domain model:
     - .amount-input          Single control; empty value = auto portion,
                              filled value = manual override (user typed in).
     - .amount-input.filled   Manual-mode chrome (amber). The razor toggles
                              this from SelectedAmountValue.HasValue, so the
                              nullable-float IS the auto/manual discriminator
                              — no separate viewmodel state.
     - .unit-pill             <select> restyled as a rounded chip with a
                              self-chevron (SVG background-image) — applied
                              directly to the select, no wrapper element.
     - .btn-delete-quiet      Ambient grey, warms to red on hover.
     - .food-title            Title column with ellipsis so long names don't
                              push the controls off-screen.
     - .food-title .sub       Optional second line (brand or category).
   Container rules for .selected-food-item live higher up in this file (see
   "COMPACT ROW" section) — they strip the per-row card and add dividers.
   ========================================================================== */

[b-3soal3mqbs] .amount-input {
  width: 4.5rem;
  min-width: 4.5rem;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--fs-border-default, #d1d5db);
  border-radius: 999px;
  background: #ffffff;
  color: #111827;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
  transition:
    border-color 120ms ease,
    background-color 120ms ease,
    box-shadow 120ms ease;
}

[b-3soal3mqbs] .amount-input::placeholder {
  color: #6b7280;
}

[b-3soal3mqbs] .amount-input:focus-visible {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Manual-mode: amber chrome signals user override of the default portion. */
[b-3soal3mqbs] .amount-input.filled {
  border-color: #f59e0b;
  background: #fffbeb;
  color: #92400e;
  font-weight: 600;
}

[b-3soal3mqbs] .amount-input.filled:focus-visible {
  border-color: #d97706;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
}

/* Unit pill — <select> styled as a chip. SVG chevron is a background-image
   so we don't need a sibling element (and therefore can't render a duplicate
   native chevron next to ours). */
[b-3soal3mqbs] .unit-pill {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 36px;
  padding: 0 28px 0 12px;
  border: 1px solid var(--fs-border-default, #d1d5db);
  border-radius: 999px;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath d='M5.25 7.5 10 12.25 14.75 7.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px 14px;
  color: #111827;
  font-size: 1rem;
  /* `normal`, not 1 — line-height:1 clips glyph descenders so the gram unit "g"
     rendered with its tail cut off ("half g"). */
  line-height: normal;
  cursor: pointer;
  outline: none;
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
}

[b-3soal3mqbs] .unit-pill:focus-visible {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Quiet delete — ambient grey, warms to red on hover so the destructive
   action stays discoverable without shouting. */
[b-3soal3mqbs] .btn-delete-quiet {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: #9ca3af;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 120ms ease,
    color 120ms ease;
}

/* Expand the tap target to ~44×44pt per Apple HIG without enlarging the
   visible glyph — invisible ::before absorbs fat-finger taps around the icon. */
[b-3soal3mqbs] .btn-delete-quiet::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}

[b-3soal3mqbs] .btn-delete-quiet:hover {
  background: #fee2e2;
  color: #dc2626;
}

[b-3soal3mqbs] .btn-delete-quiet:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Food title — same ellipsis contract as the old .food-name so long names
   never push the controls off-screen. */
[b-3soal3mqbs] .food-title {
  flex: 1 1 auto;
  min-width: 60px;
  font-size: 1rem;
  font-weight: 500;
  color: #111827;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[b-3soal3mqbs] .food-title .sub {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #6b7280;
}

/* Mobile: match the tighter-row convention already used for the unified
   serving controls, but stay above the 28px legacy size for touch comfort. */
@media (max-width: 768px) {
  [b-3soal3mqbs] .amount-input,
  [b-3soal3mqbs] .unit-pill {
    height: 32px;
    font-size: 0.9375rem;
  }
}

/* iOS Safari: force 16px+ font-size on focusable inputs to prevent the
   autozoom-on-focus behavior. Mirrors the rule above for unified-serving-*. */
@supports (-webkit-touch-callout: none) {
  [b-3soal3mqbs] .amount-input,
  [b-3soal3mqbs] .unit-pill {
    font-size: 16px;
  }
}

/* ==========================================================================
   Serving stepper — amount + unit unified into ONE segmented control so a
   selected food reads as a single "120 g" value instead of two mismatched
   pills. The wrapper owns the border / height / focus-ring; the amount input
   and the unit <select> sit inside it borderless, split by a hairline divider.
   A manual/fixed override tints the whole control with a calm amber accent
   instead of rendering a lone shouting amber capsule.
   ========================================================================== */
[b-3soal3mqbs] .serving-stepper {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: stretch;
  height: 40px;
  border: 1px solid var(--fs-border-hover, #d1d5db);
  border-radius: var(--fs-radius-pill, 999px);
  background: #ffffff;
  overflow: hidden;
  transition:
    border-color 120ms ease,
    background-color 120ms ease,
    box-shadow 120ms ease;
}

[b-3soal3mqbs] .serving-stepper:focus-within {
  border-color: var(--fs-primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

/* Clinic direction: a fixed serving reads with the single calm accent (indigo/primary),
   not amber — keeps one accent on the screen and a premium, data-forward feel. */
[b-3soal3mqbs] .serving-stepper.is-set {
  border-color: var(--fs-primary, #2563eb);
  background: var(--fs-primary-light, #eef2ff);
}

/* Amount input — borderless, right-aligned, fills the wrapper height.
   Fixed 3.9rem, sized to comfortably fit "1000" / "12.5" right-aligned with
   tabular-nums (the old 3.1rem clipped both). A fixed width is intentional:
   iOS WebKit — the primary target — ignores field-sizing:content, and
   width:auto on a text input there expands to the default ~20ch size. */
[b-3soal3mqbs] .serving-stepper .amount-input {
  width: 3.9rem;
  height: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0 6px 0 14px;
  text-align: right;
  font-weight: 600;
  color: var(--fs-text-primary, #111827);
  box-shadow: none;
}

[b-3soal3mqbs] .serving-stepper .amount-input:focus-visible {
  border: none;
  box-shadow: none; /* the wrapper shows the focus ring via :focus-within */
}

[b-3soal3mqbs] .serving-stepper.is-set .amount-input {
  color: var(--fs-primary, #2563eb);
}

/* Unit <select> — borderless, divided from the amount by a hairline; keeps the
   chevron background-image from the base .unit-pill rule. */
[b-3soal3mqbs] .serving-stepper .unit-pill {
  height: 100%;
  min-width: 2.5rem;
  /* Bound long unit labels so they can't widen the stepper and shove the
     delete button off-row (native <select> auto-sizes to its widest option). */
  max-width: 7rem;
  text-overflow: ellipsis;
  border: none;
  border-left: 1px solid var(--fs-border-default, #e5e7eb);
  border-radius: 0;
  margin-left: 8px;
  padding: 0 28px 0 11px;
  background-color: transparent;
  background-position: right 9px center;
  color: var(--fs-text-secondary, #6b7280);
  box-shadow: none;
}

[b-3soal3mqbs] .serving-stepper .unit-pill:focus-visible {
  border: none;
  border-left: 1px solid var(--fs-border-default, #e5e7eb);
  box-shadow: none;
}

[b-3soal3mqbs] .serving-stepper.is-set .unit-pill {
  border-left-color: rgba(37, 99, 235, 0.3);
  color: var(--fs-primary, #2563eb);
}

@media (max-width: 768px) {
  [b-3soal3mqbs] .serving-stepper {
    height: 40px;
  }
}

/* Per-row macros for a locked (fixed) food: a muted line under the row content.
   :has() scopes the wrap to ONLY rows that carry a macro line, so category/custom
   rows (which must stay single-line) are unaffected. */
[b-3soal3mqbs] .selected-food-item:has(.fixed-row-macros) {
  flex-wrap: wrap;
}
[b-3soal3mqbs] .fixed-row-macros {
  flex-basis: 100%;
  width: 100%;
  display: flex;
  gap: 13px;
  align-items: center;
  margin-top: 4px;
  padding-left: 1px;
  font-size: 13px;
  line-height: 1.2;
  /* secondary, not muted — #9ca3af failed WCAG AA on white */
  color: var(--fs-text-secondary, #6b7280);
  font-variant-numeric: tabular-nums;
}
[b-3soal3mqbs] .fixed-row-macros .frm-cal {
  font-weight: 700;
  color: var(--fs-text-primary, #1a1a1a);
}
/* Clinic: each macro gets a small colour dot (protein/carb/fat) for fast scanning. */
[b-3soal3mqbs] .fixed-row-macros .frm-macro {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}
[b-3soal3mqbs] .fixed-row-macros .frm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
[b-3soal3mqbs] .fixed-row-macros .frm-dot.p {
  background: var(--fs-macro-protein, #2563eb);
}
[b-3soal3mqbs] .fixed-row-macros .frm-dot.c {
  background: var(--fs-macro-carbs, #0e9f6e);
}
[b-3soal3mqbs] .fixed-row-macros .frm-dot.f {
  background: var(--fs-macro-fat, #d97706);
}
[b-3soal3mqbs] .fixed-row-macros .frm-sep {
  display: none;
}
[b-3soal3mqbs] .fixed-row-macros.loading {
  font-style: italic;
  opacity: 0.7;
}

[b-3soal3mqbs] .fixed-row-macros.error {
  color: #b45309;
  font-style: italic;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-53vfg3vg6c] {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss[b-53vfg3vg6c] {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}
/* /Components/Layout/TopNavBar.razor.rz.scp.css */
/* Enhanced Brand Navigation */
.enhanced-brand-link[b-no0s44qxgm] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--fs-primary, #2563eb);
  font-weight: 700;
  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-no0s44qxgm] {
  color: var(--fs-primary-hover, #1d4ed8);
  text-decoration: none;
  background: rgba(37, 99, 235, 0.08);
  transform: translateY(-1px);
}

.enhanced-brand-link:focus[b-no0s44qxgm] {
  outline: 2px solid rgba(37, 99, 235, 0.5);
  outline-offset: 2px;
}

.brand-home-icon[b-no0s44qxgm] {
  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-no0s44qxgm] {
  opacity: 1;
  transform: translateX(0);
}

.brand-text[b-no0s44qxgm] {
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.enhanced-brand-link:hover .brand-text[b-no0s44qxgm] {
  transform: translateX(2px);
}

/* Mobile adjustments for brand link */
@media (max-width: 575.98px) {
  .enhanced-brand-link[b-no0s44qxgm] {
    font-size: 1rem;
    padding: 0.375rem 0.5rem;
  }

  .brand-home-icon[b-no0s44qxgm] {
    width: 16px;
    height: 16px;
  }
}

/* Mobile Navigation Fixes */
.fixed-top-nav[b-no0s44qxgm] {
  position: relative;
  z-index: 1050;
}

/* Custom hamburger button styling */
.custom-toggler[b-no0s44qxgm] {
  border: none;
  padding: 4px 8px;
  background: transparent;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.custom-toggler:focus[b-no0s44qxgm] {
  box-shadow: none;
  outline: 2px solid rgba(37, 99, 235, 0.4);
}

.custom-toggler .navbar-toggler-icon[b-no0s44qxgm] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2855, 65, 81, 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-no0s44qxgm] {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Mobile navigation menu styling */
@media (max-width: 991.98px) {
  .navbar-collapse[b-no0s44qxgm] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #ffffff;
    border-top: 1px solid var(--fs-border-default, #e5e7eb);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 1040;
    margin: 0;
    padding: 0;
    transition: all 0.3s ease;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
  }

  .navbar-collapse.show[b-no0s44qxgm] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .mobile-nav-menu[b-no0s44qxgm] {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1rem 0;
  }

  .mobile-nav-item[b-no0s44qxgm] {
    color: var(--fs-text-primary, #1a1a1a) !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 var(--fs-border-default, #e5e7eb);
    transition: all 0.2s ease;
    text-decoration: none;
    display: block;
  }

  .mobile-nav-item:last-child[b-no0s44qxgm] {
    border-bottom: none;
  }

  .mobile-nav-item:hover[b-no0s44qxgm] {
    background-color: var(--fs-bg-secondary, #f8f9fa);
    color: var(--fs-primary, #2563eb) !important;
    text-decoration: none;
    padding-left: 2rem !important;
  }

  .mobile-nav-item:active[b-no0s44qxgm] {
    background-color: var(--fs-primary-light, #e0f2fe);
  }

  /* Mobile navigation overlay */
  .mobile-nav-overlay[b-no0s44qxgm] {
    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-no0s44qxgm] {
    display: flex !important;
  }

  .mobile-nav-overlay[b-no0s44qxgm] {
    display: none;
  }

  .nav-link[b-no0s44qxgm] {
    color: var(--fs-text-primary, #1a1a1a) !important;
    margin-right: 10px;
    transition: color 0.3s ease;
  }

  .nav-link:hover[b-no0s44qxgm] {
    color: var(--fs-primary, #2563eb) !important;
  }
}

/* Fix for mobile layout issues */
@media (max-width: 575.98px) {
  .container-fluid[b-no0s44qxgm] {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .mobile-nav-item[b-no0s44qxgm] {
    font-size: 1rem;
    padding: 1rem 1.5rem !important;
  }
}

/* Animation improvements */
.navbar-collapse[b-no0s44qxgm] {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav-item[b-no0s44qxgm] {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure proper z-index stacking */
.navbar[b-no0s44qxgm] {
  z-index: 1050;
}

.navbar-collapse[b-no0s44qxgm] {
  z-index: 1040;
}

/* Fix for profile button positioning */
.d-flex.align-items-center[b-no0s44qxgm] {
  z-index: 1051;
  position: relative;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .navbar-collapse[b-no0s44qxgm],
  .mobile-nav-item[b-no0s44qxgm],
  .custom-toggler[b-no0s44qxgm] {
    transition: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mobile-nav-item[b-no0s44qxgm] {
    border-bottom: 2px solid #ffffff;
  }

  .custom-toggler:focus[b-no0s44qxgm] {
    outline: 3px solid #ffffff;
  }
}

/* Prevent body scroll when mobile menu is open */
:global(body.mobile-nav-open)[b-no0s44qxgm] {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* Focus management for accessibility */
.mobile-nav-item:focus[b-no0s44qxgm] {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  background-color: rgba(255, 255, 255, 0.2);
}

/* Smooth transitions for better UX */
.navbar-collapse[b-no0s44qxgm] {
  will-change: transform, opacity;
}

.mobile-nav-item[b-no0s44qxgm] {
  will-change: background-color, padding-left;
}

/* Fix for iOS Safari viewport issues */
@supports (-webkit-touch-callout: none) {
  .mobile-nav-overlay[b-no0s44qxgm] {
    height: -webkit-fill-available;
  }
}
/* /Components/Meals/AllFixedMealSummary.razor.rz.scp.css */
/* ==========================================================================
   All-Fixed Meal Summary — a first-class result card (matches MealScoreCard)
   Uses the shared --fs-* design tokens for cohesion with sibling result cards.
   ========================================================================== */

.all-fixed-summary[b-fdeiy384be] {
  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);
  /* one tasteful page-load reveal */
  animation: afs-rise-b-fdeiy384be var(--fs-transition-slow) ease-out both;
}

.all-fixed-summary:hover[b-fdeiy384be] {
  box-shadow: var(--fs-shadow-md);
}

@keyframes afs-rise-b-fdeiy384be {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Header ------------------------------------------------------------- */
.afs-header[b-fdeiy384be] {
  display: flex;
  align-items: flex-start;
  gap: var(--fs-spacing-md);
  margin-bottom: var(--fs-spacing-lg);
}

.afs-lock[b-fdeiy384be] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--fs-radius-lg);
  background: var(--fs-accent-light);
  color: var(--fs-accent);
  font-size: 1rem;
}

.afs-title[b-fdeiy384be] {
  margin: 0;
  font-size: var(--fs-font-size-xl);
  font-weight: var(--fs-font-weight-bold);
  color: var(--fs-text-primary);
  line-height: 1.2;
}

.afs-subtitle[b-fdeiy384be] {
  margin: 2px 0 0;
  font-size: var(--fs-font-size-sm);
  color: var(--fs-text-secondary);
}

/* --- Gauge (hero) ------------------------------------------------------- */
.afs-gauge[b-fdeiy384be] {
  margin-bottom: var(--fs-spacing-lg);
  padding: var(--fs-spacing-md) var(--fs-spacing-lg);
  background: var(--fs-bg-secondary);
  border-radius: var(--fs-radius-lg);
}

.afs-gauge-top[b-fdeiy384be] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fs-spacing-sm);
  margin-bottom: var(--fs-spacing-sm);
  flex-wrap: wrap;
}

.afs-figures[b-fdeiy384be] {
  display: flex;
  align-items: baseline;
  gap: var(--fs-spacing-xs);
}

.afs-current[b-fdeiy384be] {
  font-size: var(--fs-font-size-3xl);
  font-weight: var(--fs-font-weight-bold);
  line-height: 1;
  color: var(--fs-text-primary);
  font-variant-numeric: tabular-nums;
}

.afs-target[b-fdeiy384be] {
  font-size: var(--fs-font-size-sm);
  color: var(--fs-text-secondary);
  font-variant-numeric: tabular-nums;
}

.afs-gap-pill[b-fdeiy384be] {
  font-size: var(--fs-font-size-xs);
  font-weight: var(--fs-font-weight-semibold);
  padding: 2px var(--fs-spacing-sm);
  border-radius: var(--fs-radius-pill);
  white-space: nowrap;
}

.afs-gap-pill.afs-short[b-fdeiy384be] {
  background: var(--fs-bg-tertiary);
  color: var(--fs-text-secondary);
}
.afs-gap-pill.afs-over[b-fdeiy384be] {
  background: var(--fs-warning-light);
  color: #92560a;
}
.afs-gap-pill.afs-ontarget[b-fdeiy384be] {
  background: var(--fs-success-light);
  color: #0f7a52;
}

/* track + fill + target zone */
.afs-track[b-fdeiy384be] {
  position: relative;
  height: 10px;
  border-radius: var(--fs-radius-pill);
  background: var(--fs-border-default);
  overflow: hidden;
}

.afs-zone[b-fdeiy384be] {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(16, 185, 129, 0.22),
    rgba(16, 185, 129, 0.22) 4px,
    rgba(16, 185, 129, 0.1) 4px,
    rgba(16, 185, 129, 0.1) 8px
  );
  border-left: 1px solid var(--fs-success);
  border-right: 1px solid var(--fs-success);
}

.afs-fill[b-fdeiy384be] {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--fs-radius-pill);
  transition: width var(--fs-transition-slower);
}

.afs-fill.afs-short[b-fdeiy384be] {
  background: var(--fs-primary);
}
.afs-fill.afs-over[b-fdeiy384be] {
  background: var(--fs-warning);
}
.afs-fill.afs-ontarget[b-fdeiy384be] {
  background: var(--fs-success);
}

/* --- Locked foods ------------------------------------------------------- */
.afs-foods[b-fdeiy384be] {
  list-style: none;
  margin: 0 0 var(--fs-spacing-lg);
  padding: 0;
}

.afs-food[b-fdeiy384be] {
  display: flex;
  align-items: center;
  gap: var(--fs-spacing-sm);
  padding: var(--fs-spacing-sm) 0;
  border-bottom: 1px solid var(--fs-border-default);
  flex-wrap: wrap;
}

.afs-food:last-child[b-fdeiy384be] {
  border-bottom: none;
}

.afs-food-name[b-fdeiy384be] {
  font-weight: var(--fs-font-weight-medium);
  color: var(--fs-text-primary);
}

.afs-grams[b-fdeiy384be] {
  font-size: var(--fs-font-size-xs);
  font-weight: var(--fs-font-weight-semibold);
  color: var(--fs-text-secondary);
  background: var(--fs-bg-tertiary);
  padding: 1px var(--fs-spacing-sm);
  border-radius: var(--fs-radius-pill);
  font-variant-numeric: tabular-nums;
}

.afs-food-macros[b-fdeiy384be] {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: var(--fs-spacing-sm);
  font-size: var(--fs-font-size-xs);
  font-variant-numeric: tabular-nums;
}

.afs-cal[b-fdeiy384be] {
  color: var(--fs-text-primary);
  font-weight: var(--fs-font-weight-medium);
}
.afs-macro-rest[b-fdeiy384be] {
  color: var(--fs-text-muted);
}

/* --- Fixed total -------------------------------------------------------- */
.afs-total[b-fdeiy384be] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-spacing-sm);
  padding-top: var(--fs-spacing-md);
  border-top: 1px solid var(--fs-border-default);
  margin-bottom: var(--fs-spacing-lg);
  flex-wrap: wrap;
}

.afs-total-label[b-fdeiy384be] {
  font-size: var(--fs-font-size-sm);
  font-weight: var(--fs-font-weight-semibold);
  color: var(--fs-text-secondary);
}

.afs-total-badges[b-fdeiy384be] {
  display: flex;
  gap: var(--fs-spacing-xs);
  flex-wrap: wrap;
}

.afs-badge[b-fdeiy384be] {
  font-size: var(--fs-font-size-xs);
  font-weight: var(--fs-font-weight-semibold);
  padding: 2px var(--fs-spacing-sm);
  border-radius: var(--fs-radius-pill);
  font-variant-numeric: tabular-nums;
  color: var(--fs-text-inverse);
}

.afs-badge-cal[b-fdeiy384be] {
  background: var(--fs-text-primary);
}
/* Clinic: canonical macro fills. carbs/fat were swapped (c=accent orange, f=success green). */
.afs-badge-p[b-fdeiy384be] {
  background: var(--fs-macro-protein);
}
/* darker -text tokens as fills: these badges carry white text, so the bright
   carbs/fat fills would miss WCAG AA (3.2-3.4:1); the -text variants give ~5:1. */
.afs-badge-c[b-fdeiy384be] {
  background: var(--fs-macro-carbs-text);
}
.afs-badge-f[b-fdeiy384be] {
  background: var(--fs-macro-fat-text);
}

/* --- Actions ------------------------------------------------------------ */
.afs-actions[b-fdeiy384be] {
  display: grid;
  gap: var(--fs-spacing-sm);
  margin-bottom: var(--fs-spacing-sm);
}

@media (min-width: 576px) {
  .afs-actions[b-fdeiy384be] {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

.afs-btn[b-fdeiy384be] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-spacing-sm);
  padding: var(--fs-spacing-md) var(--fs-spacing-lg);
  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);
  border: 1px solid transparent;
}

.afs-btn-primary[b-fdeiy384be] {
  background: var(--fs-primary);
  color: var(--fs-text-inverse);
  box-shadow: var(--fs-shadow-primary-subtle);
}

.afs-btn-primary:hover[b-fdeiy384be] {
  background: var(--fs-primary-hover);
  box-shadow: var(--fs-shadow-primary);
  transform: translateY(-1px);
}

.afs-btn-ghost[b-fdeiy384be] {
  background: var(--fs-bg-primary);
  color: var(--fs-text-secondary);
  border-color: var(--fs-border-hover);
}

.afs-btn-ghost:hover[b-fdeiy384be] {
  background: var(--fs-bg-hover);
  color: var(--fs-text-primary);
  border-color: var(--fs-text-secondary);
}

.afs-btn:focus-visible[b-fdeiy384be] {
  outline: none;
  box-shadow: var(--fs-focus-ring-primary);
}

/* --- Back link ---------------------------------------------------------- */
.afs-back[b-fdeiy384be] {
  text-align: center;
}

.afs-link[b-fdeiy384be] {
  background: none;
  border: none;
  padding: var(--fs-spacing-xs);
  font-size: var(--fs-font-size-sm);
  color: var(--fs-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--fs-spacing-xs);
  transition: color var(--fs-transition-fast);
}

.afs-link:hover[b-fdeiy384be] {
  color: var(--fs-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .all-fixed-summary[b-fdeiy384be] {
    animation: none;
  }
  .afs-fill[b-fdeiy384be] {
    transition: none;
  }
  .afs-btn-primary:hover[b-fdeiy384be] {
    transform: none;
  }
}
/* /Components/Meals/ClosestMealHeader.razor.rz.scp.css */
/* ClosestMealHeader — diagnostic header for the closest-match panel.
   Leads with the actual gap and emphasizes only the deficient macro;
   other macros collapse into a compact summary line.
   Reuses design tokens from design-tokens.css. */

.closest-match-header[b-jiuaaezst9] {
  display: flex;
  flex-direction: column;
  gap: var(--fs-spacing-md);
  padding-bottom: var(--fs-spacing-lg);
  border-bottom: 1px solid var(--fs-border-default);
}

.closest-match-eyebrow[b-jiuaaezst9] {
  margin: 0;
  font-size: var(--fs-font-size-xs);
  color: var(--fs-text-secondary);
  letter-spacing: 0.04em;
}

.closest-match-headline[b-jiuaaezst9] {
  margin: 0;
  font-size: var(--fs-font-size-lg);
  font-weight: var(--fs-font-weight-semibold);
  color: var(--fs-text-primary);
  line-height: var(--fs-line-height-tight, 1.3);
}

/* Primary gauge — emphasized progress display for the deficient macro. */

.primary-gauge[b-jiuaaezst9] {
  display: flex;
  flex-direction: column;
  gap: var(--fs-spacing-xs);
}

.primary-gauge-row[b-jiuaaezst9] {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.primary-gauge-label[b-jiuaaezst9] {
  font-weight: var(--fs-font-weight-semibold);
  font-size: var(--fs-font-size-base);
  color: var(--fs-text-primary);
}

.primary-gauge-status[b-jiuaaezst9] {
  font-size: var(--fs-font-size-sm);
  font-weight: var(--fs-font-weight-semibold);
  padding: 2px var(--fs-spacing-sm);
  border-radius: var(--fs-radius-pill);
  white-space: nowrap;
}

.primary-gauge-status.macro-status-in-range[b-jiuaaezst9] {
  background: var(--fs-success-light);
  color: #065f46;
}
.primary-gauge-status.macro-status-over[b-jiuaaezst9] {
  background: var(--fs-error-light);
  color: #991b1b;
}
.primary-gauge-status.macro-status-under[b-jiuaaezst9] {
  background: var(--fs-warning-light);
  color: #92400e;
}
.primary-gauge-status.macro-status-no-target[b-jiuaaezst9] {
  background: var(--fs-bg-tertiary);
  color: var(--fs-text-muted);
}

.primary-gauge-bar[b-jiuaaezst9] {
  position: relative;
  height: 10px;
  background: var(--fs-bg-tertiary);
  border-radius: 5px;
  overflow: hidden;
}

.primary-gauge-bar .progress-target-zone[b-jiuaaezst9] {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 5px;
  z-index: 1;
}

.primary-gauge-bar .progress-fill[b-jiuaaezst9] {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 5px;
  z-index: 2;
  transition: width 0.4s ease;
}

.primary-gauge-bar .progress-fill-in-range[b-jiuaaezst9] {
  background: var(--fs-success);
}
.primary-gauge-bar .progress-fill-over[b-jiuaaezst9] {
  background: var(--fs-error);
}
.primary-gauge-bar .progress-fill-under[b-jiuaaezst9] {
  background: var(--fs-primary);
}
.primary-gauge-bar .progress-fill-no-target[b-jiuaaezst9] {
  background: var(--fs-text-muted);
  opacity: 0.4;
}

.primary-gauge-meta[b-jiuaaezst9] {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-font-size-xs);
  color: var(--fs-text-secondary);
}

/* Compact macro summary — every targeted macro that isn't the headline gauge,
   inline so the user can scan all four at a glance. */

.compact-macro-summary[b-jiuaaezst9] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-spacing-md) var(--fs-spacing-lg);
  font-size: var(--fs-font-size-sm);
}

.compact-macro[b-jiuaaezst9] {
  display: inline-flex;
  align-items: baseline;
  gap: var(--fs-spacing-xs);
}

.compact-macro-label[b-jiuaaezst9] {
  color: var(--fs-text-secondary);
  font-weight: var(--fs-font-weight-medium);
}

.compact-macro-status[b-jiuaaezst9] {
  color: var(--fs-text-primary);
}

.compact-macro-status.macro-status-in-range[b-jiuaaezst9] {
  color: #065f46;
  font-weight: var(--fs-font-weight-medium);
}
.compact-macro-status.macro-status-over[b-jiuaaezst9] {
  color: #991b1b;
  font-weight: var(--fs-font-weight-medium);
}
.compact-macro-status.macro-status-under[b-jiuaaezst9] {
  color: #92400e;
  font-weight: var(--fs-font-weight-medium);
}
.compact-macro-status.macro-status-no-target[b-jiuaaezst9] {
  color: var(--fs-text-muted);
}

/* Tighten layout on narrow viewports — phone-screen first. */

@media (max-width: 576px) {
  .closest-match-headline[b-jiuaaezst9] {
    font-size: var(--fs-font-size-base);
  }

  .compact-macro-summary[b-jiuaaezst9] {
    gap: var(--fs-spacing-sm) var(--fs-spacing-md);
  }
}
/* /Components/Meals/CombinationRow.razor.rz.scp.css */
/* Dense combination row — canvas 2a collapsed rows / 4a show-all rows. */

.combo-row[b-x1s0pymzta] {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 4px 12px 4px 4px;
  margin-bottom: 8px;
}

.combo-row-main[b-x1s0pymzta] {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  min-height: 44px; /* whole row is the tap target */
  border: none;
  background: none;
  padding: 0 8px;
  text-align: left;
  cursor: pointer;
}

div.combo-row-main[b-x1s0pymzta] {
  cursor: default;
}

/* Expand affordance — the chevron plus hover/focus tint are scoped to the BUTTON variant
   only; show-all's static div rows must not advertise a gesture they don't have. */
.combo-row-chevron[b-x1s0pymzta] {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 12px;
  color: #9ca3af;
  transition:
    transform 0.15s ease,
    color 0.15s ease;
}

button.combo-row-main:hover[b-x1s0pymzta],
button.combo-row-main:focus-visible[b-x1s0pymzta] {
  background: #f3f4f6;
  border-radius: 8px;
}

button.combo-row-main:focus-visible[b-x1s0pymzta] {
  outline: 2px solid var(--fs-primary, #2563eb);
  outline-offset: -2px;
}

button.combo-row-main:hover .combo-row-chevron[b-x1s0pymzta],
button.combo-row-main:focus-visible .combo-row-chevron[b-x1s0pymzta] {
  color: #4b5563;
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .combo-row-chevron[b-x1s0pymzta] {
    transition: none;
  }

  button.combo-row-main:hover .combo-row-chevron[b-x1s0pymzta],
  button.combo-row-main:focus-visible .combo-row-chevron[b-x1s0pymzta] {
    transform: none;
  }
}

.combo-row-summary[b-x1s0pymzta] {
  font-size: 13.5px;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combo-row-excluded[b-x1s0pymzta] {
  font-size: 11.5px;
  font-weight: 600;
  color: #9ca3af;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Dim only non-interactive content: at 0.55 container opacity the Add button's primary-blue
   border fell below the WCAG 3:1 UI-component minimum. The button stays full-contrast and
   its label switches to "Add anyway". */
.combo-row-dimmed[b-x1s0pymzta] {
  background: #fafafa;
}

.combo-row-dimmed > .combo-row-main[b-x1s0pymzta],
.combo-row-dimmed > .combo-row-macros[b-x1s0pymzta] {
  opacity: 0.55;
}

.combo-row-macros[b-x1s0pymzta] {
  display: flex;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

.crm-kcal[b-x1s0pymzta] {
  color: var(--fs-macro-kcal, #374151);
  font-weight: 700;
}

.crm-p[b-x1s0pymzta] {
  color: var(--fs-primary-hover, #1d4ed8);
}

.crm-c[b-x1s0pymzta] {
  color: var(--fs-macro-carbs-text, #047857);
}

.crm-f[b-x1s0pymzta] {
  color: var(--fs-macro-fat-text, #b45309);
}

.combo-row-add[b-x1s0pymzta] {
  border: 1px solid var(--fs-primary, #2563eb);
  color: var(--fs-primary, #2563eb);
  background: #fff;
  border-radius: 8px;
  padding: 8px 16px; /* ≥44px with line-height */
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.combo-row-add:hover[b-x1s0pymzta] {
  background: var(--fs-primary, #2563eb);
  color: #fff;
}

@media (max-width: 575.98px) {
  /* canvas 3a: summary wraps, macros drop to a second line under it */
  .combo-row[b-x1s0pymzta] {
    flex-wrap: wrap;
    padding: 8px 12px;
  }

  .combo-row-main[b-x1s0pymzta] {
    flex-basis: 100%;
  }

  .combo-row-summary[b-x1s0pymzta] {
    white-space: normal;
  }
}
/* /Components/Meals/CompareMatrix.razor.rz.scp.css */
/* Compare view host (canvas 2b/3b) — header chrome plus the bar/verdict visuals shared
   by the desktop grid and the mobile tabs (::deep reaches both child components). */

.compare-matrix[b-pdgq4wn2z8] {
  margin-top: 1rem;
}

.cm-header[b-pdgq4wn2z8] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px 20px;
  box-shadow: 0 1px 2px rgba(13, 19, 33, 0.04);
  margin-bottom: 16px;
}

.cm-heading[b-pdgq4wn2z8] {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cm-title[b-pdgq4wn2z8] {
  font:
    700 16px Raleway,
    sans-serif;
  color: var(--fs-text-primary, #1a1a1a);
}

.cm-context[b-pdgq4wn2z8] {
  font-size: 12.5px;
  color: #6b7280;
}

.cm-actions[b-pdgq4wn2z8] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.cm-btn[b-pdgq4wn2z8] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d1d5db;
  color: #374151;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  background: #fff;
  cursor: pointer;
}

.cm-btn-refine[b-pdgq4wn2z8] {
  border-color: var(--fs-primary, #2563eb);
  color: var(--fs-primary, #2563eb);
}

.cm-clear-link[b-pdgq4wn2z8],
.cm-view-as-list[b-pdgq4wn2z8] {
  border: none;
  background: none;
  font-size: 12.5px;
  color: #6b7280;
  text-decoration: underline;
  padding: 10px 6px;
  cursor: pointer;
}

.cm-coaching[b-pdgq4wn2z8] {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border-left: 3px solid var(--fs-primary, #2563eb);
  border-radius: 0 8px 8px 0;
  padding: 9px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #374151;
}

.cm-coaching .fa-lightbulb[b-pdgq4wn2z8] {
  color: var(--fs-primary, #2563eb);
  font-size: 12px;
  flex-shrink: 0;
}

/* ---- Shared bar / verdict / value visuals (grid + tabs) ---- */

.compare-matrix[b-pdgq4wn2z8]  .cmg-bar {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 4px;
  background: #f3f4f6;
  overflow: hidden;
  margin-top: 5px;
}

.compare-matrix[b-pdgq4wn2z8]  .cmg-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(37, 99, 235, 0.12);
  border-left: 1px dashed #93c5fd;
  border-right: 1px dashed #93c5fd;
}

.compare-matrix[b-pdgq4wn2z8]  .cmg-fill {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  border-radius: 3px;
}

/* Fill = macro IDENTITY color; status is glyph + text, never a recolor (finding 4/10). */
.compare-matrix[b-pdgq4wn2z8]  .cmg-fill-calories {
  background: var(--fs-macro-kcal, #374151);
}

.compare-matrix[b-pdgq4wn2z8]  .cmg-fill-protein {
  background: var(--fs-macro-protein, #2563eb);
}

.compare-matrix[b-pdgq4wn2z8]  .cmg-fill-carbs {
  background: var(--fs-macro-carbs, #0e9f6e);
}

.compare-matrix[b-pdgq4wn2z8]  .cmg-fill-fat {
  background: var(--fs-macro-fat, #d97706);
}

.compare-matrix[b-pdgq4wn2z8]  .cmg-value-calories {
  color: var(--fs-macro-kcal, #374151);
}

.compare-matrix[b-pdgq4wn2z8]  .cmg-value-protein {
  color: var(--fs-primary-hover, #1d4ed8);
}

.compare-matrix[b-pdgq4wn2z8]  .cmg-value-carbs {
  color: var(--fs-macro-carbs-text, #047857);
}

.compare-matrix[b-pdgq4wn2z8]  .cmg-value-fat {
  color: var(--fs-macro-fat-text, #b45309);
}

.compare-matrix[b-pdgq4wn2z8]  .cmg-verdict-inrange {
  color: var(--fs-success-text, #047857);
}

.compare-matrix[b-pdgq4wn2z8]  .cmg-verdict-over,
.compare-matrix[b-pdgq4wn2z8]  .cmg-verdict-under {
  color: var(--fs-error-text, #b91c1c);
}

.compare-matrix[b-pdgq4wn2z8]  .cmg-lock {
  font-size: 11px;
  color: #9ca3af;
  margin-right: 6px;
}
/* /Components/Meals/CompareMatrixGrid.razor.rz.scp.css */
/* Desktop compare grid (canvas 2b) — semantic table restyled to the bordered matrix.
   Hidden below 768px; CompareOptionTabs takes over. */

.cm-grid[b-1o1lrpdnu8] {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  font-size: 13.5px;
}

.cm-grid th[b-1o1lrpdnu8],
.cm-grid td[b-1o1lrpdnu8] {
  padding: 10px 14px;
  border-bottom: 1px solid #f3f4f6;
  text-align: left;
  vertical-align: top;
}

.cmg-corner[b-1o1lrpdnu8] {
  font-size: 12.5px;
  font-weight: 600;
  color: #6b7280;
}

.cmg-option[b-1o1lrpdnu8] {
  font:
    700 13px system-ui,
    sans-serif;
  color: var(--fs-primary, #2563eb);
  background: #eff6ff;
  white-space: nowrap;
}

.cmg-food[b-1o1lrpdnu8] {
  font-weight: 500;
  color: var(--fs-text-primary, #1a1a1a);
}

.cmg-locked-row .cmg-food[b-1o1lrpdnu8],
.cmg-locked-row .cmg-portion[b-1o1lrpdnu8] {
  color: #9ca3af;
}

.cmg-locked-pill[b-1o1lrpdnu8] {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  background: #f3f4f6;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.cmg-portion .cmg-serving[b-1o1lrpdnu8] {
  display: block;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cmg-portion .cmg-grams[b-1o1lrpdnu8] {
  display: block;
  font-size: 12px;
  color: #9ca3af;
}

.cmg-macro-label[b-1o1lrpdnu8] {
  font-weight: 600;
}

.cmg-target-range[b-1o1lrpdnu8] {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: #9ca3af;
}

.cmg-macro-cell[b-1o1lrpdnu8] {
  min-width: 110px;
}

.cmg-value[b-1o1lrpdnu8] {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cmg-verdict[b-1o1lrpdnu8] {
  font-size: 12.5px;
  font-weight: 600;
}

.cmg-verdict .fa-check-circle[b-1o1lrpdnu8] {
  margin-right: 4px;
}

.cmg-add[b-1o1lrpdnu8] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fs-primary, #2563eb);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.cmg-add:hover[b-1o1lrpdnu8] {
  background: var(--fs-primary-hover, #1d4ed8);
}

@media (max-width: 767.98px) {
  .cm-grid[b-1o1lrpdnu8] {
    display: none;
  }
}
/* /Components/Meals/CompareOptionTabs.razor.rz.scp.css */
/* Mobile compare tabs (canvas 3b) — food names stay put, tabs swap only amounts and
   bars. Shown only below 768px. */

.compare-tabs[b-0cggxmhrxn] {
  display: none;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px;
}

@media (max-width: 767.98px) {
  .compare-tabs[b-0cggxmhrxn] {
    display: block;
  }
}

.ct-tablist[b-0cggxmhrxn] {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.ct-tab[b-0cggxmhrxn] {
  flex: 1;
  min-height: 44px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.ct-tab-active[b-0cggxmhrxn] {
  border-color: var(--fs-primary, #2563eb);
  background: #eff6ff;
  color: var(--fs-primary-hover, #1d4ed8);
}

.ct-food-row[b-0cggxmhrxn] {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 13.5px;
}

.ct-locked[b-0cggxmhrxn] {
  color: #9ca3af;
}

.ct-portion[b-0cggxmhrxn] {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ct-grams[b-0cggxmhrxn] {
  margin-left: 6px;
  font-size: 12px;
  color: #9ca3af;
}

.ct-macro-row[b-0cggxmhrxn] {
  padding: 8px 0;
  font-size: 13px;
}

.ct-macro-label[b-0cggxmhrxn] {
  font-weight: 600;
}

.ct-target[b-0cggxmhrxn] {
  margin-left: 6px;
  font-weight: 400;
  font-size: 11.5px;
  color: #9ca3af;
}

.ct-value[b-0cggxmhrxn] {
  float: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ct-verdict[b-0cggxmhrxn] {
  padding: 10px 0 6px;
  font-size: 12.5px;
  font-weight: 600;
}

.ct-add[b-0cggxmhrxn] {
  display: block;
  width: 100%;
  background: var(--fs-primary, #2563eb);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
/* /Components/Meals/FixedTotalStrip.razor.rz.scp.css */
/* "Fixed total" — light summary card with a blue left-accent, coherent with the rest of the
   (light) site rather than a lone dark surface. The status PILL carries the semantic colour
   (neutral / on-target green / over-cap red); the card itself stays calm and neutral. */
.fixed-total-strip[b-gjo2wuqs7m] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 15px;
  margin: 10px 0;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--fs-border-default, #e5e7eb);
  border-left: 3px solid var(--fs-primary, #2563eb);
  color: var(--fs-text-primary, #1a1a1a);
  box-shadow: 0 1px 2px rgba(13, 19, 33, 0.04);
}

.fts-row[b-gjo2wuqs7m] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.fts-label[b-gjo2wuqs7m] {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fs-text-secondary, #6b7280);
}

.fts-cal[b-gjo2wuqs7m] {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--fs-text-primary, #1a1a1a);
}

.fts-cal.calculating[b-gjo2wuqs7m] {
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
  color: var(--fs-text-secondary, #6b7280);
}

.fts-detail[b-gjo2wuqs7m] {
  align-items: center;
}

.fts-macros[b-gjo2wuqs7m] {
  font-size: 13px;
  color: var(--fs-text-secondary, #6b7280);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Status pill — neutral by default; colour only signals real status. */
.fts-status[b-gjo2wuqs7m] {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: #eef2f7;
  color: #334155;
  border-radius: 99px;
  padding: 4px 10px;
}

.fixed-total-strip.ok .fts-status[b-gjo2wuqs7m] {
  background: #d6f5e3;
  color: #08603a;
}

.fixed-total-strip.warn .fts-status[b-gjo2wuqs7m] {
  background: #fdded9;
  color: #8a1c10;
}
/* /Components/Meals/FoodPortionRow.razor.rz.scp.css */
/* FoodPortionRow — single-line tappable row in the unified portion filter */

.food-portion-row[b-4ze1vn7bd6] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-bottom: 0.5px solid
    var(--mud-palette-divider-light, rgba(0, 0, 0, 0.06));
  text-align: left;
  cursor: pointer;
  color: var(--mud-palette-text-primary);
  font-size: 14px;
  transition: background-color 0.15s ease;
  min-height: 48px;
}

.food-portion-row:hover[b-4ze1vn7bd6] {
  background-color: var(--mud-palette-surface-variant, rgba(0, 0, 0, 0.02));
}

.food-portion-row:focus-visible[b-4ze1vn7bd6] {
  outline: 2px solid var(--mud-palette-primary, #1976d2);
  outline-offset: -2px;
}

.food-portion-row-dot[b-4ze1vn7bd6] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--mud-palette-divider-light, rgba(0, 0, 0, 0.2));
  background: transparent;
  flex-shrink: 0;
}

.food-portion-row.is-set .food-portion-row-dot[b-4ze1vn7bd6] {
  background: var(--mud-palette-primary, #1976d2);
  border-color: var(--mud-palette-primary, #1976d2);
}

.food-portion-row-name[b-4ze1vn7bd6] {
  color: var(--mud-palette-text-primary);
  text-transform: capitalize;
  flex-shrink: 0;
}

.food-portion-row.is-set .food-portion-row-name[b-4ze1vn7bd6] {
  font-weight: 500;
}

.food-portion-row-unit[b-4ze1vn7bd6] {
  color: var(--mud-palette-text-secondary, #6c757d);
  font-size: 12px;
  flex-shrink: 0;
}

.food-portion-row-value[b-4ze1vn7bd6] {
  margin-left: auto;
  color: var(--mud-palette-text-secondary, #6c757d);
  font-size: 13px;
  text-align: right;
  flex-shrink: 0;
}

.food-portion-row.is-set .food-portion-row-value[b-4ze1vn7bd6] {
  color: var(--mud-palette-text-primary);
  font-weight: 500;
}

.food-portion-row-value[b-4ze1vn7bd6] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.food-portion-row-lock-icon[b-4ze1vn7bd6] {
  color: var(--mud-palette-primary, #1976d2);
  flex-shrink: 0;
}
/* /Components/Meals/FoodPortionSheet.razor.rz.scp.css */
/* FoodPortionSheet — body + segmented unit control + footer */

.portion-sheet-body[b-df3hiliwvq] {
  padding: 4px 0 8px;
}

.portion-sheet-subtitle-row[b-df3hiliwvq] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px 12px;
  gap: 8px;
}

.portion-sheet-subtitle[b-df3hiliwvq] {
  color: var(--mud-palette-text-secondary, #6c757d);
  font-size: 13px;
  flex: 1 1 auto;
  min-width: 0;
}

.portion-sheet-lock-toggle[b-df3hiliwvq] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 0.5px solid var(--mud-palette-divider-light, rgba(0, 0, 0, 0.15));
  background: transparent;
  color: var(--mud-palette-text-secondary, #6c757d);
  font-size: 11px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: all 0.15s ease;
}

.portion-sheet-lock-toggle:hover[b-df3hiliwvq] {
  border-color: var(--mud-palette-primary, #1976d2);
  color: var(--mud-palette-primary, #1976d2);
}

.portion-sheet-lock-toggle.is-active[b-df3hiliwvq] {
  background: rgba(25, 118, 210, 0.08);
  border-color: var(--mud-palette-primary, #1976d2);
  color: var(--mud-palette-primary, #1976d2);
  font-weight: 500;
}

.portion-sheet-locked-input[b-df3hiliwvq] {
  padding: 12px 16px;
}

.portion-sheet-locked-hint[b-df3hiliwvq] {
  padding-top: 10px;
  font-size: 11px;
  color: var(--mud-palette-text-secondary, #6c757d);
  line-height: 1.5;
}

.portion-sheet-locked-nutrition[b-df3hiliwvq] {
  padding-top: 10px;
}

.portion-sheet-units[b-df3hiliwvq] {
  display: flex;
  gap: 6px;
  padding: 0 16px 12px;
}

.portion-sheet-unit[b-df3hiliwvq] {
  flex: 1 1 0;
  padding: 7px 0;
  background: transparent;
  color: var(--mud-palette-text-secondary, #6c757d);
  border: 0.5px solid var(--mud-palette-divider-light, rgba(0, 0, 0, 0.12));
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.portion-sheet-unit:hover[b-df3hiliwvq] {
  border-color: var(--mud-palette-primary, #1976d2);
  color: var(--mud-palette-primary, #1976d2);
}

.portion-sheet-unit.is-selected[b-df3hiliwvq] {
  background: rgba(25, 118, 210, 0.08);
  color: var(--mud-palette-primary, #1976d2);
  border-color: var(--mud-palette-primary, #1976d2);
  font-weight: 500;
}

.portion-sheet-section-header[b-df3hiliwvq] {
  padding: 6px 16px 4px;
  font-size: 11px;
  color: var(--mud-palette-text-secondary, #6c757d);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-top: 0.5px solid var(--mud-palette-divider-light, rgba(0, 0, 0, 0.06));
  padding-top: 10px;
}

.portion-sheet-footer[b-df3hiliwvq] {
  display: flex;
  gap: 8px;
  padding: 8px 16px;
  width: 100%;
}

.portion-sheet-btn[b-df3hiliwvq] {
  flex: 1 1 0;
  padding: 11px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 0.5px solid var(--mud-palette-divider-light, rgba(0, 0, 0, 0.12));
  transition: all 0.15s ease;
}

.portion-sheet-btn-secondary[b-df3hiliwvq] {
  background: transparent;
  color: var(--mud-palette-text-secondary, #6c757d);
}

.portion-sheet-btn-secondary:hover[b-df3hiliwvq] {
  background: var(--mud-palette-surface-variant, rgba(0, 0, 0, 0.04));
}

.portion-sheet-btn-primary[b-df3hiliwvq] {
  background: var(--mud-palette-text-primary, #212529);
  color: var(--mud-palette-background, #ffffff);
  border-color: var(--mud-palette-text-primary, #212529);
}

.portion-sheet-btn-primary:hover[b-df3hiliwvq] {
  opacity: 0.9;
}
/* /Components/Meals/MacroDonutLegend.razor.rz.scp.css */
/* First-visit donut legend — canvas 4d. */

.macro-donut-legend[b-ux5wqma17v] {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #374151;
}

.macro-donut-legend:focus-visible[b-ux5wqma17v] {
  outline: 2px solid var(--fs-primary, #2563eb);
  outline-offset: 2px;
}

.mdl-text[b-ux5wqma17v] {
  flex: 1;
  min-width: 0;
}

.mdl-protein[b-ux5wqma17v] {
  color: var(--fs-macro-protein, #2563eb);
}

.mdl-carbs[b-ux5wqma17v] {
  color: var(--fs-macro-carbs-text, #047857);
}

.mdl-fat[b-ux5wqma17v] {
  color: var(--fs-macro-fat-text, #b45309);
}

.mdl-dismiss[b-ux5wqma17v] {
  position: relative;
  border: none;
  background: none;
  font-size: 16px;
  line-height: 1;
  color: #9ca3af;
  padding: 4px 6px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ≥44px hit area without visual bloat. */
.mdl-dismiss[b-ux5wqma17v]::after {
  content: "";
  position: absolute;
  inset: -10px;
}

.mdl-dismiss:hover[b-ux5wqma17v],
.mdl-dismiss:focus-visible[b-ux5wqma17v] {
  color: #374151;
}
/* /Components/Meals/MacroFitGauges.razor.rz.scp.css */
/* "Fit vs your targets" gauges — canvas 2c right column. */

.macro-fit-gauges[b-al03gyzx7f] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mfg-row[b-al03gyzx7f] {
  font-size: 13px;
}

.mfg-label[b-al03gyzx7f] {
  font-weight: 600;
  color: #374151;
}

.mfg-value[b-al03gyzx7f] {
  float: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mfg-range[b-al03gyzx7f] {
  font-weight: 400;
  font-size: 11.5px;
  color: #9ca3af;
}

.mfg-value-calories[b-al03gyzx7f] {
  color: var(--fs-macro-kcal, #374151);
}

.mfg-value-protein[b-al03gyzx7f] {
  color: var(--fs-primary-hover, #1d4ed8);
}

.mfg-value-carbs[b-al03gyzx7f] {
  color: var(--fs-macro-carbs-text, #047857);
}

.mfg-value-fat[b-al03gyzx7f] {
  color: var(--fs-macro-fat-text, #b45309);
}

.mfg-bar[b-al03gyzx7f] {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 4px;
  background: #f3f4f6;
  overflow: hidden;
  margin-top: 5px;
  clear: both;
}

.mfg-zone[b-al03gyzx7f] {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(37, 99, 235, 0.12);
  border-left: 1px dashed #93c5fd;
  border-right: 1px dashed #93c5fd;
}

.mfg-fill[b-al03gyzx7f] {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  border-radius: 3px;
}

.mfg-fill-calories[b-al03gyzx7f] {
  background: var(--fs-macro-kcal, #374151);
}

.mfg-fill-protein[b-al03gyzx7f] {
  background: var(--fs-macro-protein, #2563eb);
}

.mfg-fill-carbs[b-al03gyzx7f] {
  background: var(--fs-macro-carbs, #0e9f6e);
}

.mfg-fill-fat[b-al03gyzx7f] {
  background: var(--fs-macro-fat, #d97706);
}
/* /Components/Meals/MacroPreferenceDial.razor.rz.scp.css */
/* Per-macro dial. Tokens: --fs-*. Funnel/count mirror the portion wizard's pattern so the funnel
   narrative reads consistently across the refine hub's two routes. */

.mpd-hint[b-965a3kbygz] {
  margin: 0 0 1rem;
  font-size: 13px;
  color: var(--fs-text-secondary, #6b7280);
  line-height: 1.4;
}

.mpd-empty[b-965a3kbygz] {
  padding: 1rem 0;
  text-align: center;
  color: var(--fs-text-secondary, #6b7280);
}

.mpd-rows[b-965a3kbygz] {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mpd-row-head[b-965a3kbygz] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.mpd-label[b-965a3kbygz] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fs-text-primary, #1a1a1a);
}

.mpd-dot[b-965a3kbygz] {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.mpd-thresh[b-965a3kbygz] {
  font-size: 11px;
  color: var(--fs-text-muted, #9ca3af);
}

.mpd-segments[b-965a3kbygz] {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--fs-bg-tertiary, #f3f4f6);
  border-radius: var(--fs-radius-md, 8px);
}

.mpd-seg[b-965a3kbygz] {
  flex: 1;
  min-height: 44px;
  /* 2px transparent border reserved so the active state's coloured border doesn't shift layout. */
  border: 2px solid transparent;
  background: transparent;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fs-text-muted, #9ca3af);
  border-radius: var(--fs-radius-sm, 4px);
  cursor: pointer;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}

/* Clearly distinct selected state: white pill + a 2px macro-coloured border (set inline) + bold colour
   + a stronger shadow, so which of Less/Any/More is active reads at a glance. */
.mpd-seg.is-active[b-965a3kbygz] {
  background: var(--fs-bg-primary, #ffffff);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
  /* active text + border colour are set inline per-macro (AA-text token) */
}

.mpd-seg:focus-visible[b-965a3kbygz] {
  outline: 2px solid var(--fs-primary, #2563eb);
  outline-offset: 1px;
}

/* Distribution strip — where the matched meals fall for this macro. Non-interactive (the chips drive the
   lean); bars on the kept side take the macro fill (set inline), the cut side stays grey, and a thin
   marker sits at the exact lean threshold. */
.mpd-histo[b-965a3kbygz] {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 30px;
  margin-top: 9px;
  cursor: default;
}

.mpd-histo-bar[b-965a3kbygz] {
  flex: 1;
  min-height: 2px;
  border-radius: 1.5px 1.5px 0 0;
  background: var(--fs-border-hover, #d1d5db);
}

.mpd-histo-marker[b-965a3kbygz] {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.5px;
  border-radius: 1px;
  opacity: 0.85;
}

.mpd-recovery[b-965a3kbygz] {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: #b91c1c;
  background: var(--fs-error-light, #fee2e2);
  border: 1px solid #fecaca;
  border-radius: var(--fs-radius-md, 8px);
}

.mpd-recovery-link[b-965a3kbygz] {
  background: none;
  border: none;
  padding: 0;
  color: #dc2626;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* ---- count + funnel (mirrors the portion wizard) ---- */
.mpd-count-row[b-965a3kbygz] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 1.4rem;
  margin-top: 16px;
}

.mpd-count[b-965a3kbygz] {
  font-size: 13px;
  font-weight: 600;
}

.mpd-count.is-ok[b-965a3kbygz] {
  color: #15803d; /* AA on white for 13px text */
}
.mpd-count.is-low[b-965a3kbygz] {
  color: #b45309; /* AA on white for 13px text */
}
.mpd-count.is-empty[b-965a3kbygz] {
  color: #c0392b;
}

.mpd-reset[b-965a3kbygz] {
  background: none;
  border: none;
  padding: 0;
  font-size: 12.5px;
  color: var(--fs-text-secondary, #6b7280);
  text-decoration: underline;
  cursor: pointer;
}

.mpd-funnel[b-965a3kbygz] {
  margin: 8px 0 4px;
  height: 6px;
  border-radius: var(--fs-radius-pill, 9999px);
  background: var(--fs-border-default, #e5e7eb);
  overflow: hidden;
}

.mpd-funnel-fill[b-965a3kbygz] {
  height: 100%;
  border-radius: var(--fs-radius-pill, 9999px);
  transition: width 0.25s ease;
}

.mpd-funnel-fill.is-ok[b-965a3kbygz] {
  background: #1f8a5b;
}
.mpd-funnel-fill.is-low[b-965a3kbygz] {
  background: #d97706;
}
.mpd-funnel-fill.is-empty[b-965a3kbygz] {
  background: #c0392b;
}
/* /Components/Meals/MacroRangeFilter.razor.rz.scp.css */
/* Unified macro range filter (design frame F). Chips = presets of a min–max range; histogram = distribution;
   dual-thumb slider = fine-tune. Macro colours come in inline via --fs-macro-* tokens. */

.mrf-hint[b-714k6rzacl] {
  margin: 0 0 1rem;
  font-size: 13px;
  color: var(--fs-text-secondary, #6b7280);
  line-height: 1.4;
}

.mrf-rows[b-714k6rzacl] {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mrf-row-head[b-714k6rzacl] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.mrf-label[b-714k6rzacl] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fs-text-primary, #1a1a1a);
}

.mrf-dot[b-714k6rzacl] {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.mrf-summary[b-714k6rzacl] {
  font-size: 12px;
  font-weight: 600;
  color: var(--fs-text-muted, #9ca3af);
}

/* ---- chips (presets) ---- */
.mrf-chips[b-714k6rzacl] {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.mrf-chip[b-714k6rzacl] {
  flex: 1;
  min-height: 38px;
  border: 1.5px solid var(--fs-border-default, #e5e7eb);
  background: var(--fs-bg-primary, #fff);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fs-text-muted, #6b7280);
  border-radius: var(--fs-radius-sm, 6px);
  cursor: pointer;
  transition:
    color 0.12s ease,
    border-color 0.12s ease,
    background-color 0.12s ease;
}

.mrf-chip.is-active[b-714k6rzacl] {
  background: var(--fs-bg-primary, #fff);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.mrf-chip:focus-visible[b-714k6rzacl] {
  outline: 2px solid var(--fs-primary, #2563eb);
  outline-offset: 1px;
}

/* ---- distribution histogram ---- */
.mrf-histo[b-714k6rzacl] {
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 28px;
  margin-bottom: 2px;
}

.mrf-histo-bar[b-714k6rzacl] {
  flex: 1;
  min-height: 2px;
  border-radius: 1.5px 1.5px 0 0;
  background: var(--fs-border-hover, #d1d5db);
}

/* ---- dual-thumb range ---- */
.mrf-range[b-714k6rzacl] {
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
}

.mrf-range-track[b-714k6rzacl] {
  position: absolute;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: 9999px;
  background: var(--fs-border-default, #e5e7eb);
}

.mrf-range-fill[b-714k6rzacl] {
  position: absolute;
  height: 5px;
  border-radius: 9999px;
}

/* two range inputs share the track; only their thumbs are interactive */
.mrf-thumb[b-714k6rzacl] {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  height: 24px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}

.mrf-thumb[b-714k6rzacl]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--fs-text-secondary, #6b7280);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 3;
}

.mrf-thumb[b-714k6rzacl]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--fs-text-secondary, #6b7280);
  cursor: pointer;
  pointer-events: auto;
}

.mrf-thumb:focus-visible[b-714k6rzacl]::-webkit-slider-thumb {
  border-color: var(--fs-primary, #2563eb);
}

.mrf-range-labels[b-714k6rzacl] {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--fs-text-muted, #9ca3af);
  margin-top: 2px;
}

/* ---- count + funnel (shared vocabulary with the wizard) ---- */
.mrf-count-row[b-714k6rzacl] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 1.4rem;
  margin-top: 16px;
}

.mrf-count[b-714k6rzacl] {
  font-size: 13px;
  font-weight: 600;
}

.mrf-count.is-ok[b-714k6rzacl] {
  color: #15803d;
}
.mrf-count.is-low[b-714k6rzacl] {
  color: #b45309;
}
.mrf-count.is-empty[b-714k6rzacl] {
  color: #c0392b;
}

.mrf-reset[b-714k6rzacl] {
  background: none;
  border: none;
  padding: 0;
  font-size: 12.5px;
  color: var(--fs-text-secondary, #6b7280);
  text-decoration: underline;
  cursor: pointer;
}

.mrf-funnel[b-714k6rzacl] {
  margin: 8px 0 4px;
  height: 6px;
  border-radius: 9999px;
  background: var(--fs-border-default, #e5e7eb);
  overflow: hidden;
}

.mrf-funnel-fill[b-714k6rzacl] {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.25s ease;
}

.mrf-funnel-fill.is-ok[b-714k6rzacl] {
  background: #15803d;
}
.mrf-funnel-fill.is-low[b-714k6rzacl] {
  background: #b45309;
}
.mrf-funnel-fill.is-empty[b-714k6rzacl] {
  background: #c0392b;
}
/* /Components/Meals/MacroSplitDonut.razor.rz.scp.css */
/* Food-row macro-split donut — canvas 2c. Butt caps so segments abut and tile the
   ring exactly (shares always sum to 100); only the status band's ring is round-capped. */

.macro-split-donut[b-s8miqj8urt] {
  display: inline-block;
  width: var(--msd-size, 26px);
  height: var(--msd-size, 26px);
  flex-shrink: 0;
  vertical-align: middle;
}

.macro-split-donut svg[b-s8miqj8urt] {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.msd-track[b-s8miqj8urt] {
  fill: none;
  stroke: #f3f4f6;
  stroke-width: 7;
}

.msd-arc[b-s8miqj8urt] {
  fill: none;
  stroke-width: 7;
}

.msd-protein[b-s8miqj8urt] {
  stroke: var(--fs-macro-protein, #2563eb);
}

.msd-carbs[b-s8miqj8urt] {
  stroke: var(--fs-macro-carbs, #0e9f6e);
}

.msd-fat[b-s8miqj8urt] {
  stroke: var(--fs-macro-fat, #d97706);
}

.msd-info[b-s8miqj8urt] {
  border: none;
  background: none;
  padding: 2px 4px;
  font-size: 11px;
  color: #9ca3af;
  cursor: pointer;
  vertical-align: middle;
}

.msd-info:hover[b-s8miqj8urt],
.msd-info:focus-visible[b-s8miqj8urt] {
  color: var(--fs-primary, #2563eb);
}
/* /Components/Meals/MealCalculationLoader.razor.rz.scp.css */
/* Meal Calculation Loader - Component Styles */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .progress-dot.active[b-kst5fz5a4p] {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  }
}
/* /Components/Meals/MealCombinations.razor.rz.scp.css */
/* MealCombinations Component Styles */

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

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

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

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

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

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

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

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

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

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

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

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

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

@keyframes checkmark-stroke-b-006q9xvo64 {
  100% {
    stroke-dashoffset: 0;
  }
}

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

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

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

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

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

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

  .checkmark-circle[b-006q9xvo64] {
    stroke-dashoffset: 0;
  }

  .checkmark-check[b-006q9xvo64] {
    stroke-dashoffset: 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ==========================================================================
   Macro Breakdown Section — all macros vs targets
   ========================================================================== */

.macro-breakdown[b-006q9xvo64] {
  display: flex;
  flex-direction: column;
  gap: var(--fs-spacing-sm);
  padding: var(--fs-spacing-lg) 0;
  border-bottom: 1px solid var(--fs-border-default);
}

.macro-row[b-006q9xvo64] {
  display: flex;
  flex-direction: column;
  gap: var(--fs-spacing-xs);
}

.macro-row-info[b-006q9xvo64] {
  display: flex;
  align-items: center;
  gap: var(--fs-spacing-sm);
}

.macro-label[b-006q9xvo64] {
  font-weight: var(--fs-font-weight-semibold);
  font-size: var(--fs-font-size-sm);
  color: var(--fs-text-primary);
  min-width: 60px;
}

.macro-actual[b-006q9xvo64] {
  font-size: var(--fs-font-size-sm);
  font-weight: var(--fs-font-weight-medium);
  color: var(--fs-text-primary);
}

.macro-target-range[b-006q9xvo64] {
  font-size: var(--fs-font-size-xs);
  color: var(--fs-text-secondary);
}

.macro-status-badge[b-006q9xvo64] {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px var(--fs-spacing-sm);
  border-radius: var(--fs-radius-pill);
  font-size: var(--fs-font-size-xs);
  font-weight: var(--fs-font-weight-semibold);
  white-space: nowrap;
  margin-left: auto;
}

.macro-status-badge i[b-006q9xvo64] {
  font-size: 0.625rem;
}

.macro-status-in-range[b-006q9xvo64] {
  background: var(--fs-success-light);
  color: #065f46;
}

.macro-status-over[b-006q9xvo64] {
  background: var(--fs-error-light);
  color: #991b1b;
}

.macro-status-under[b-006q9xvo64] {
  background: var(--fs-warning-light);
  color: #92400e;
}

.macro-status-no-target[b-006q9xvo64] {
  background: var(--fs-bg-tertiary);
  color: var(--fs-text-muted);
}

/* ==========================================================================
   Fixed Portions summary — Clinic light card (coherent with FixedTotalStrip).
   Neutral white surface + blue left-accent; kcal neutral, P/C/F in the
   canonical macro palette. Replaces the old grey box with swapped badges.
   ========================================================================== */
.fixed-portions-section[b-006q9xvo64] {
  background: #fff;
  border: 1px solid var(--fs-border-default);
  border-left: 3px solid var(--fs-primary);
  border-radius: 14px;
  padding: var(--fs-spacing-md);
  box-shadow: 0 1px 2px rgba(13, 19, 33, 0.04);
}

.fps-section-title[b-006q9xvo64] {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fs-text-secondary);
}

.fps-section-title .fa-lock[b-006q9xvo64] {
  color: var(--fs-text-muted);
}

.fps-count[b-006q9xvo64] {
  font-size: 11px;
  font-weight: 700;
  color: var(--fs-text-secondary);
  background: var(--fs-bg-tertiary);
  border-radius: var(--fs-radius-pill);
  padding: 1px 8px;
}

.fixed-serving-item:last-child[b-006q9xvo64] {
  border-bottom: 0 !important;
}

.fps-lock[b-006q9xvo64] {
  font-size: 0.75rem;
  color: var(--fs-text-muted);
}

.fps-macros[b-006q9xvo64] {
  color: var(--fs-text-secondary);
  font-variant-numeric: tabular-nums;
}

.fps-sep[b-006q9xvo64] {
  margin: 0 0.35rem;
  color: var(--fs-text-muted);
}

.fps-kcal[b-006q9xvo64] {
  color: var(--fs-text-primary);
  font-weight: 600;
}

.fps-p[b-006q9xvo64] {
  color: var(--fs-macro-protein);
  font-weight: 600;
}

.fps-c[b-006q9xvo64] {
  color: var(--fs-macro-carbs-text);
  font-weight: 600;
}

.fps-f[b-006q9xvo64] {
  color: var(--fs-macro-fat-text);
  font-weight: 600;
}

.fps-total[b-006q9xvo64] {
  border-top: 1px solid var(--fs-border-default);
}

.fps-total-label[b-006q9xvo64] {
  font-weight: 600;
  color: var(--fs-text-secondary);
}

.fps-total-macros .fps-kcal[b-006q9xvo64],
.fps-total-macros .fps-p[b-006q9xvo64],
.fps-total-macros .fps-c[b-006q9xvo64],
.fps-total-macros .fps-f[b-006q9xvo64] {
  font-weight: 700;
}

/* Progress bar */
.macro-progress-bar[b-006q9xvo64] {
  position: relative;
  height: 6px;
  background: var(--fs-bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}

.progress-target-zone[b-006q9xvo64] {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  z-index: 1;
}

.progress-fill[b-006q9xvo64] {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 3px;
  z-index: 2;
  transition: width 0.4s ease;
}

.progress-fill-in-range[b-006q9xvo64] {
  background: var(--fs-success);
}
.progress-fill-over[b-006q9xvo64] {
  background: var(--fs-error);
}
.progress-fill-under[b-006q9xvo64] {
  background: var(--fs-primary);
}
.progress-fill-no-target[b-006q9xvo64] {
  background: var(--fs-text-muted);
  opacity: 0.4;
}

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

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

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

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

  .food-name[b-006q9xvo64] {
    white-space: normal;
  }

  .portion-badge[b-006q9xvo64] {
    align-self: flex-start;
  }

  .closest-match-actions[b-006q9xvo64] {
    flex-direction: column;
  }
}

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

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

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

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

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

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

  .closest-match-actions[b-006q9xvo64] {
    flex-direction: column;
  }

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

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

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

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

  .macro-row-info[b-006q9xvo64] {
    gap: var(--fs-spacing-xs);
    flex-wrap: wrap;
  }
  .macro-label[b-006q9xvo64] {
    min-width: 48px;
    font-size: var(--fs-font-size-xs);
  }
  .macro-actual[b-006q9xvo64] {
    font-size: var(--fs-font-size-xs);
  }
  .macro-status-badge[b-006q9xvo64] {
    font-size: 0.625rem;
    padding: 1px var(--fs-spacing-xs);
  }
}

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

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

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

  .food-pill[b-006q9xvo64] {
    border-width: 2px;
  }

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

  .closest-match-card[b-006q9xvo64] {
    border-width: 2px;
  }

  .macro-progress-bar[b-006q9xvo64] {
    border: 1px solid var(--fs-text-secondary);
  }
  .progress-target-zone[b-006q9xvo64] {
    background: rgba(0, 0, 0, 0.2);
    border: 1px dashed var(--fs-text-secondary);
  }
  .macro-status-badge[b-006q9xvo64] {
    border: 1px solid currentColor;
  }
}
/* /Components/Meals/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-89pbbw0w70] {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-end;
  margin-bottom: 1rem;
  width: 100%;
}

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

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

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

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

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

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

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

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

/* Fix alignment issues on mobile */
@media (max-width: 767px) {
  .meal-item-mobile-align[b-89pbbw0w70] {
    text-align: left !important;
  }

  .meal-macro-badges[b-89pbbw0w70] {
    justify-content: flex-start !important;
    margin-top: 0.5rem;
  }
}

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

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

@media (min-width: 1400px) {
  .meal-food-name[b-89pbbw0w70] {
    font-size: 1.5rem;
  }
}

/* Fixed Portion Styling */
.fixed-portion-item[b-89pbbw0w70] {
  background-color: rgba(108, 117, 125, 0.06);
  border-left: 3px solid #6c757d;
  padding-left: 0.75rem;
  margin-left: -0.5rem;
  border-radius: 0 4px 4px 0;
}

.fixed-portion-item .meal-food-name[b-89pbbw0w70] {
  color: #495057;
}

/* Fixed portion lock icon sizing */
.fixed-lock-icon[b-89pbbw0w70] {
  font-size: 0.75rem;
}

/* Lock icon animation on hover */
.fixed-portion-item .fa-lock[b-89pbbw0w70] {
  transition: transform 0.2s ease;
}

.fixed-portion-item:hover .fa-lock[b-89pbbw0w70] {
  transform: scale(1.1);
}

/* "Mostly protein" dominance sublabel next to the food-row donut (canvas 2c). */
.course-macro-sublabel[b-89pbbw0w70] {
  margin-left: 8px;
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
}
/* /Components/Meals/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-o3gi61li3j] {
  margin: 0 0 var(--fs-spacing-2xl) 0;
  padding: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Mobile Optimizations */
@media (max-width: 768px) {
  .quick-add-container[b-o3gi61li3j] {
    margin-bottom: 20px;
  }

  .quick-add-input-group[b-o3gi61li3j] {
    flex-wrap: wrap;
    padding: var(--fs-spacing-sm);
    gap: var(--fs-spacing-sm);
  }

  .quick-add-input[b-o3gi61li3j] {
    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-o3gi61li3j] {
    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-o3gi61li3j] {
    font-size: var(--fs-font-size-sm);
    margin-right: var(--fs-spacing-sm);
  }

  .quick-add-meal-select[b-o3gi61li3j] {
    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-o3gi61li3j] {
    flex: 0 0 auto;
    order: 3;
    padding: var(--fs-spacing-md) var(--fs-spacing-2xl);
    width: 100%;
  }

  .button-text[b-o3gi61li3j] {
    display: inline;
  }

  .quick-add-options[b-o3gi61li3j] {
    padding: var(--fs-spacing-sm) var(--fs-spacing-md) 0;
  }

  .recent-foods[b-o3gi61li3j] {
    gap: var(--fs-spacing-sm);
    margin-top: var(--fs-spacing-md);
  }

  .recent-pill[b-o3gi61li3j] {
    padding: var(--fs-spacing-sm) var(--fs-spacing-md);
    font-size: var(--fs-font-size-sm);
  }
}

@media (min-width: 769px) {
  .button-text[b-o3gi61li3j] {
    display: inline;
  }

  .quick-add-meal-select[b-o3gi61li3j] {
    min-width: 140px;
    max-width: 180px;
  }

  /* Ensure meal selector is prominent on desktop too */
  .meal-selector-wrapper[b-o3gi61li3j] {
    flex-shrink: 0;
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  .quick-add-button[b-o3gi61li3j] {
    padding: var(--fs-spacing-md) var(--fs-spacing-2xl);
    font-size: var(--fs-font-size-base);
  }

  .recent-pill[b-o3gi61li3j] {
    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-o3gi61li3j] {
  padding-bottom: var(--fs-spacing-3xl);
}

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

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

.snacks-section[b-o3gi61li3j] {
  margin-top: var(--fs-spacing-3xl);
}

/* ============================================
   Empty State Onboarding Guide
   ============================================ */

.empty-state-hint[b-o3gi61li3j] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-spacing-sm);
  padding: var(--fs-spacing-sm) 0;
  margin-bottom: var(--fs-spacing-sm);
  font-size: var(--fs-font-size-sm);
  color: var(--fs-text-muted);
  letter-spacing: 0.01em;
}

.hint-dot[b-o3gi61li3j] {
  color: var(--fs-text-muted);
  opacity: 0.5;
  flex-shrink: 0;
  line-height: 1;
  font-size: 1em;
  user-select: none;
}
/* /Components/Meals/MealPortionFilter.razor.rz.scp.css */
/* MealPortionFilter — container card matching the existing amount-filter card */

.meal-portion-filter[b-w8cmp80gl9] {
  background: var(--mud-palette-background, #ffffff);
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.meal-portion-filter-header[b-w8cmp80gl9] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background-color: #f8f9fa;
  border-bottom: 0.5px solid
    var(--mud-palette-divider-light, rgba(0, 0, 0, 0.08));
}

.meal-portion-filter-title[b-w8cmp80gl9] {
  font-size: 16px;
  font-weight: 500;
  color: var(--mud-palette-text-primary);
  display: flex;
  align-items: center;
}

.meal-portion-filter-summary[b-w8cmp80gl9] {
  display: flex;
  align-items: center;
  gap: 12px;
}

.meal-portion-filter-count[b-w8cmp80gl9] {
  color: var(--mud-palette-text-secondary, #6c757d);
  font-size: 12px;
}

.meal-portion-filter-reset[b-w8cmp80gl9] {
  background: transparent;
  border: none;
  color: var(--mud-palette-primary, #1976d2);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}

.meal-portion-filter-reset:hover[b-w8cmp80gl9] {
  background: var(--mud-palette-surface-variant, rgba(0, 0, 0, 0.04));
}

.meal-portion-filter-rows[b-w8cmp80gl9] {
  display: flex;
  flex-direction: column;
}
/* /Components/Meals/MealScoreCard.razor.rz.scp.css */
/* ==========================================================================
   Meal Score Card - Modern Minimalist Design
   Uses design tokens from design-tokens.css for consistency
   ========================================================================== */

.meal-score-card[b-9ctzo6x3e7] {
  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-9ctzo6x3e7] {
  box-shadow: var(--fs-shadow-md);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .circle-progress[b-9ctzo6x3e7] {
    stroke-width: 4;
  }
}
/* /Components/Meals/MealsList.razor.rz.scp.css */
/* Stack layout — div-based (the old ul inherited style.css's leaky
   `.meal-option-list li` padding; finding 9). */

.meal-option-list[b-c6ozzwyl1l] {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}

.meal-item-card[b-c6ozzwyl1l] {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 1px 2px rgba(13, 19, 33, 0.04);
  margin-bottom: 12px;
  transition: all 0.2s ease;
}

.meal-item-card:hover[b-c6ozzwyl1l] {
  border-color: var(--fs-primary-border, #60a5fa);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.stack-more-caption[b-c6ozzwyl1l] {
  font-size: 12.5px;
  font-weight: 600;
  color: #6b7280;
  margin: 4px 2px 10px;
}

.stack-show-more[b-c6ozzwyl1l],
.stack-show-all[b-c6ozzwyl1l] {
  display: block;
  width: 100%;
  border: 1px dashed #d1d5db;
  background: none;
  border-radius: 10px;
  padding: 12px;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fs-primary, #2563eb);
  cursor: pointer;
}

.stack-show-more:hover[b-c6ozzwyl1l],
.stack-show-all:hover[b-c6ozzwyl1l] {
  border-color: var(--fs-primary, #2563eb);
  background: #f8fafc;
}

@media (prefers-reduced-motion: reduce) {
  .meal-item-card[b-c6ozzwyl1l] {
    transition: none;
  }
}
/* /Components/Meals/MealsMacrosFilter.razor.rz.scp.css */
.macros-filter-card[b-lhd5oguxah] {
  background-color: #ffffff;
  border-radius: 12px;
}

.macros-filter-header[b-lhd5oguxah] {
  background-color: #f8f9fa;
  border-radius: 12px 12px 0 0;
  padding: 1.25rem;
}
/* /Components/Meals/NearMissRow.razor.rz.scp.css */
/* "Just outside your filters" mini-card — canvas 2c near-miss strip. */

.near-miss-row[b-8gm3j0zt6s] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
  font-size: 12.5px;
}

.nmr-summary[b-8gm3j0zt6s] {
  color: #374151;
  font-weight: 500;
}

.nmr-macros[b-8gm3j0zt6s] {
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}

.nmr-verdict[b-8gm3j0zt6s] {
  font-weight: 600;
}

.nmr-verdict .fa-check-circle[b-8gm3j0zt6s] {
  margin-right: 4px;
}

.nmr-verdict-inrange[b-8gm3j0zt6s] {
  color: var(--fs-success-text, #047857);
}

.nmr-verdict-over[b-8gm3j0zt6s],
.nmr-verdict-under[b-8gm3j0zt6s] {
  color: var(--fs-error-text, #b91c1c);
}

.nmr-add[b-8gm3j0zt6s] {
  align-self: flex-start;
  border: 1px solid var(--fs-primary, #2563eb);
  color: var(--fs-primary, #2563eb);
  background: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.nmr-add:hover[b-8gm3j0zt6s] {
  background: var(--fs-primary, #2563eb);
  color: #fff;
}
/* /Components/Meals/PortionRangePicker.razor.rz.scp.css */
/* PortionRangePicker — two-thumb range slider over a discrete set of amounts */

.portion-range-picker[b-x43j04w9fa] {
  padding: 16px 20px 12px;
}

.portion-range-empty[b-x43j04w9fa] {
  color: var(--mud-palette-text-secondary, #6c757d);
  font-size: 13px;
  text-align: center;
  padding: 24px 0;
}

.portion-range-track-wrap[b-x43j04w9fa] {
  position: relative;
  height: 28px;
}

.portion-range-track[b-x43j04w9fa] {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--mud-palette-surface-variant, rgba(0, 0, 0, 0.08));
  border-radius: 2px;
}

.portion-range-track-fill[b-x43j04w9fa] {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--mud-palette-primary, #1976d2);
  border-radius: 2px;
  transition:
    left 0.05s linear,
    right 0.05s linear;
}

/* Both thumbs are stacked over the track. We strip the default <input range>
   chrome and re-style. The two thumbs are pointer-events:none on the track but
   pointer-events:auto on the actual thumb (handled per-browser below). */
.portion-range-thumb[b-x43j04w9fa] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.portion-range-thumb[b-x43j04w9fa]::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}

.portion-range-thumb[b-x43j04w9fa]::-moz-range-track {
  height: 4px;
  background: transparent;
}

.portion-range-thumb[b-x43j04w9fa]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mud-palette-background, #ffffff);
  border: 2px solid var(--mud-palette-primary, #1976d2);
  cursor: grab;
  margin-top: -8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.portion-range-thumb[b-x43j04w9fa]::-webkit-slider-thumb:active {
  cursor: grabbing;
}

.portion-range-thumb[b-x43j04w9fa]::-moz-range-thumb {
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mud-palette-background, #ffffff);
  border: 2px solid var(--mud-palette-primary, #1976d2);
  cursor: grab;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.portion-range-thumb:focus-visible[b-x43j04w9fa]::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.2);
}

.portion-range-thumb:focus-visible[b-x43j04w9fa]::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.2);
}

.portion-range-bounds[b-x43j04w9fa] {
  display: flex;
  justify-content: space-between;
  padding-top: 4px;
  font-size: 11px;
  color: var(--mud-palette-text-secondary, #6c757d);
}

.portion-range-readout[b-x43j04w9fa] {
  text-align: center;
  padding-top: 12px;
}

.portion-range-readout-value[b-x43j04w9fa] {
  font-size: 14px;
  font-weight: 500;
  color: var(--mud-palette-text-primary);
}

.portion-range-readout-meta[b-x43j04w9fa] {
  font-size: 11px;
  color: var(--mud-palette-text-secondary, #6c757d);
  padding-top: 2px;
}
/* /Components/Meals/PortionValuePicker.razor.rz.scp.css */
/* PortionValuePicker — radio list inside the portion sheet */

.portion-value-picker[b-u0baunuuf9] {
  display: flex;
  flex-direction: column;
}

.portion-option[b-u0baunuuf9] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  width: 100%;
  background: transparent;
  border: none;
  border-top: 0.5px solid var(--mud-palette-divider-light, rgba(0, 0, 0, 0.06));
  text-align: left;
  cursor: pointer;
  color: var(--mud-palette-text-primary);
  font-size: 14px;
  transition: background-color 0.15s ease;
}

.portion-option:first-child[b-u0baunuuf9] {
  border-top: none;
}

.portion-option:hover[b-u0baunuuf9] {
  background-color: var(--mud-palette-surface-variant, rgba(0, 0, 0, 0.03));
}

.portion-option:focus-visible[b-u0baunuuf9] {
  outline: 2px solid var(--mud-palette-primary, #1976d2);
  outline-offset: -2px;
}

.portion-option-indicator[b-u0baunuuf9] {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--mud-palette-text-secondary, #6c757d);
  flex-shrink: 0;
  position: relative;
}

.portion-option.is-selected .portion-option-indicator[b-u0baunuuf9] {
  border-color: var(--mud-palette-primary, #1976d2);
}

.portion-option.is-selected .portion-option-indicator[b-u0baunuuf9]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mud-palette-primary, #1976d2);
}

.portion-option.is-selected .portion-option-label[b-u0baunuuf9] {
  font-weight: 500;
}

.portion-option-label[b-u0baunuuf9] {
  flex: 1 1 auto;
}

.portion-option-aux[b-u0baunuuf9] {
  color: var(--mud-palette-text-secondary, #6c757d);
  font-size: 12px;
  flex-shrink: 0;
}
/* /Components/Meals/PortionWizard.razor.rz.scp.css */
/* Portion wizard — chip-based, funnel-narrated. Desktop = centered modal; mobile content renders
   inside MobileBottomSheet. All values map to the --fs-* design tokens (hex fallbacks for safety). */

/* ---------- Desktop modal container (rendered only ≥769px) ---------- */
.pw-modal-overlay[b-l9rxh2xu7v] {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(30, 27, 22, 0.34);
}

@media (max-width: 768px) {
  .pw-modal-overlay[b-l9rxh2xu7v] {
    display: none;
  }
}

.pw-modal-card[b-l9rxh2xu7v] {
  width: 440px;
  max-width: 100%;
  max-height: 88%;
  display: flex;
  flex-direction: column;
  background: var(--fs-bg-primary, #ffffff);
  border-radius: var(--fs-radius-xl, 16px);
  box-shadow: var(--fs-shadow-lg, 0 8px 16px rgba(0, 0, 0, 0.15));
  overflow: hidden;
  font-family: var(
    --fs-font-family,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif
  );
}

.pw-modal-header[b-l9rxh2xu7v] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--fs-border-default, #e5e7eb);
}

.pw-modal-title[b-l9rxh2xu7v] {
  font-size: 18px;
  font-weight: 700;
  color: var(--fs-text-primary, #1a1a1a);
}

.pw-modal-close[b-l9rxh2xu7v] {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--fs-text-muted, #9ca3af);
  cursor: pointer;
  padding: 0 4px;
}

.pw-modal-body[b-l9rxh2xu7v] {
  padding: 16px 18px;
  overflow-y: auto;
}

.pw-modal-footer[b-l9rxh2xu7v] {
  padding: 12px 18px 16px;
  border-top: 1px solid var(--fs-border-default, #e5e7eb);
}

/* Embedded inside the RefineHub (no own modal/sheet wrapper) — mirror the prototype's panel chrome so
   the "Pick your portions" body + footer keep their padding and the footer's top divider. */
.pw-embedded[b-l9rxh2xu7v] {
  display: flex;
  flex-direction: column;
}

.pw-embedded-body[b-l9rxh2xu7v] {
  padding: 4px 2px 6px;
}

.pw-embedded-footer[b-l9rxh2xu7v] {
  padding: 14px 2px 4px;
  margin-top: 6px;
  border-top: 1px solid var(--fs-border-default, #e5e7eb);
}

/* ---------- Shared content (renders in both modal body and bottom-sheet body) ---------- */
.pw-empty[b-l9rxh2xu7v] {
  padding: 1.5rem 0;
  color: var(--fs-text-secondary, #6b7280);
  text-align: center;
}

.pw-intro[b-l9rxh2xu7v] {
  margin: 0 0 1rem;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: #1e40af;
  background: var(--fs-primary-light, #e0f2fe);
  border: 1px solid #bae6fd;
  border-radius: var(--fs-radius-md, 8px);
}

.pw-step-label[b-l9rxh2xu7v] {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fs-text-muted, #9ca3af);
}

.pw-food[b-l9rxh2xu7v] {
  margin: 0.25rem 0 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--fs-text-primary, #1a1a1a);
  font-family: var(
    --fs-font-family,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif
  );
}

.pw-food:focus-visible[b-l9rxh2xu7v] {
  outline: none;
}

.pw-hint[b-l9rxh2xu7v] {
  margin: 0.15rem 0 0.85rem;
  font-size: 13px;
  color: var(--fs-text-secondary, #6b7280);
}

.pw-chips[b-l9rxh2xu7v] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pw-note[b-l9rxh2xu7v] {
  margin: -2px 0 12px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--fs-text-secondary, #6b7280);
}

.pw-chip-controls[b-l9rxh2xu7v] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}

.pw-selected-summary[b-l9rxh2xu7v] {
  font-size: 11.5px;
  color: var(--fs-text-muted, #9ca3af);
}

.pw-quick[b-l9rxh2xu7v] {
  display: flex;
  gap: 6px;
}

.pw-quick-btn[b-l9rxh2xu7v] {
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 11px;
  min-height: 32px;
  border-radius: var(--fs-radius-sm, 7px);
  border: 1px solid var(--fs-border-default, #e5e7eb);
  background: var(--fs-bg-primary, #fff);
  color: var(--fs-text-secondary, #6b7280);
  cursor: pointer;
}

.pw-quick-btn:disabled[b-l9rxh2xu7v] {
  opacity: 0.4;
  cursor: default;
}

.pw-tip[b-l9rxh2xu7v] {
  margin: 8px 0 14px;
  font-size: 11px;
  color: var(--fs-text-muted, #b9b3a8);
}

.pw-chip[b-l9rxh2xu7v] {
  min-height: 44px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fs-text-primary, #374151);
  background: var(--fs-bg-primary, #ffffff);
  border: 1px solid var(--fs-border-hover, #d1d5db);
  border-radius: var(--fs-radius-pill, 9999px);
  cursor: pointer;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}

.pw-chip.is-selected[b-l9rxh2xu7v] {
  color: #ffffff;
  background: var(--fs-primary, #2563eb);
  border-color: var(--fs-primary, #2563eb);
}

.pw-chip.is-disabled[b-l9rxh2xu7v] {
  color: var(--fs-text-muted, #9ca3af);
  background: var(--fs-bg-tertiary, #f3f4f6);
  border-color: var(--fs-border-default, #e5e7eb);
  text-decoration: line-through;
  cursor: not-allowed;
}

.pw-chip:focus-visible[b-l9rxh2xu7v] {
  outline: 2px solid var(--fs-primary, #2563eb);
  outline-offset: 1px;
}

.pw-whole[b-l9rxh2xu7v] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin-top: 0.85rem;
  font-size: 14px;
  cursor: pointer;
}

.pw-whole input[b-l9rxh2xu7v] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--fs-primary, #2563eb);
}

.pw-recovery[b-l9rxh2xu7v] {
  margin-top: 0.85rem;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: #b91c1c;
  background: var(--fs-error-light, #fee2e2);
  border: 1px solid #fecaca;
  border-radius: var(--fs-radius-md, 8px);
}

.pw-recovery-link[b-l9rxh2xu7v] {
  background: none;
  border: none;
  padding: 0;
  min-height: 0;
  color: #dc2626;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Footer (count + funnel + nav) ---------- */
.pw-count-row[b-l9rxh2xu7v] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 1.4rem;
}

.pw-count[b-l9rxh2xu7v] {
  font-size: 13px;
  font-weight: 600;
}

.pw-count.is-ok[b-l9rxh2xu7v] {
  color: #15803d; /* AA on white for 13px text */
}
.pw-count.is-low[b-l9rxh2xu7v] {
  color: #b45309; /* AA on white for 13px text */
}
.pw-count.is-empty[b-l9rxh2xu7v] {
  color: #c0392b;
}

.pw-reset-all[b-l9rxh2xu7v] {
  background: none;
  border: none;
  padding: 0;
  min-height: 0;
  font-size: 12.5px;
  color: var(--fs-text-secondary, #6b7280);
  text-decoration: underline;
  cursor: pointer;
}

.pw-funnel[b-l9rxh2xu7v] {
  margin: 8px 0 12px;
  height: 6px;
  border-radius: var(--fs-radius-pill, 9999px);
  background: var(--fs-border-default, #e5e7eb);
  overflow: hidden;
}

.pw-funnel-fill[b-l9rxh2xu7v] {
  height: 100%;
  border-radius: var(--fs-radius-pill, 9999px);
  transition: width 0.25s ease;
}

.pw-funnel-fill.is-ok[b-l9rxh2xu7v] {
  background: #1f8a5b;
}
.pw-funnel-fill.is-low[b-l9rxh2xu7v] {
  background: #d97706;
}
.pw-funnel-fill.is-empty[b-l9rxh2xu7v] {
  background: #c0392b;
}

.pw-nav[b-l9rxh2xu7v] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pw-back[b-l9rxh2xu7v] {
  background: none;
  border: none;
  padding: 8px 4px;
  font-size: 13.5px;
  color: var(--fs-text-primary, #374151);
  cursor: pointer;
  min-height: 44px;
}

.pw-back:disabled[b-l9rxh2xu7v] {
  color: var(--fs-border-hover, #d1d5db);
  cursor: default;
}

.pw-skip[b-l9rxh2xu7v] {
  background: none;
  border: none;
  padding: 8px 4px;
  font-size: 13px;
  color: var(--fs-text-secondary, #6b7280);
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
}

.pw-next[b-l9rxh2xu7v] {
  margin-left: auto;
  padding: 10px 22px;
  font-size: 13.5px;
  font-weight: 600;
  color: #ffffff;
  background: var(--fs-primary, #2563eb);
  border: 1px solid var(--fs-primary, #2563eb);
  border-radius: var(--fs-radius-pill, 9999px);
  box-shadow: var(--fs-shadow-primary-subtle, 0 2px 4px rgba(37, 99, 235, 0.2));
  cursor: pointer;
  min-height: 44px;
}
/* /Components/Meals/ProcessSteps.razor.rz.scp.css */
.step-container[b-ql1i95zvez] {
  width: 6rem !important;
}

.step-circle[b-ql1i95zvez]::before {
  width: calc(6rem + 1rem - 1.5rem) !important;
}
/* /Components/Meals/RefineHub.razor.rz.scp.css */
/* RefineHub container + chooser. Desktop modal mirrors the portion wizard's modal; mobile uses the
   shared MobileBottomSheet, so only the desktop overlay + the chooser tiles are styled here. */

.rh-overlay[b-fxofuhycs7] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: 1rem;
}

.rh-card[b-fxofuhycs7] {
  background: var(--fs-bg-primary, #fff);
  border-radius: var(--fs-radius-lg, 14px);
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.rh-header[b-fxofuhycs7] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--fs-border-default, #e5e7eb);
}

.rh-title[b-fxofuhycs7] {
  font-size: 16px;
  font-weight: 700;
  color: var(--fs-text-primary, #1a1a1a);
}

.rh-close[b-fxofuhycs7] {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--fs-text-muted, #9ca3af);
  cursor: pointer;
}

.rh-body[b-fxofuhycs7] {
  padding: 1.25rem;
}

/* ---- chooser ---- */
.rh-chooser-head[b-fxofuhycs7] {
  margin: 0 0 1rem;
  font-size: 14px;
  color: var(--fs-text-secondary, #6b7280);
  line-height: 1.4;
}

.rh-tiles[b-fxofuhycs7] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rh-tile[b-fxofuhycs7] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 16px;
  min-height: 44px;
  border: 1px solid var(--fs-border-default, #e5e7eb);
  border-radius: var(--fs-radius-md, 8px);
  background: var(--fs-bg-primary, #fff);
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    background-color 0.12s ease;
}

.rh-tile:hover[b-fxofuhycs7] {
  border-color: var(--fs-primary, #2563eb);
  background: var(--fs-bg-tertiary, #f3f4f6);
}

.rh-tile-primary[b-fxofuhycs7] {
  border-color: var(--fs-primary, #2563eb);
  border-width: 2px;
}

.rh-tile-title[b-fxofuhycs7] {
  font-size: 15px;
  font-weight: 700;
  color: var(--fs-text-primary, #1a1a1a);
}

.rh-tile-sub[b-fxofuhycs7] {
  font-size: 12.5px;
  color: var(--fs-text-secondary, #6b7280);
}

.rh-back[b-fxofuhycs7] {
  background: none;
  border: none;
  padding: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fs-primary, #2563eb);
  cursor: pointer;
}
/* /Components/Meals/ResultsStatusBand.razor.rz.scp.css */
/* One persistent status band — canvas 2a. Identity colors come from the
   design tokens; the ring arc / thumbs-up use the lighter blue-500 the canvas
   specifies (no --fs- token exists for it). */

.results-status-band[b-g2y1qiooxh] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 20px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px 20px;
  box-shadow: 0 1px 2px rgba(13, 19, 33, 0.04);
  margin-bottom: 20px;
}

.rsb-fit[b-g2y1qiooxh] {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.rsb-ring[b-g2y1qiooxh] {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.rsb-ring svg[b-g2y1qiooxh] {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.rsb-ring-track[b-g2y1qiooxh] {
  fill: none;
  stroke: #e5e7eb;
  stroke-width: 3;
}

.rsb-ring-arc[b-g2y1qiooxh] {
  fill: none;
  stroke: #3b82f6;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 0.4s ease;
}

.rsb-ring-icon[b-g2y1qiooxh] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: #3b82f6;
}

/* Grade-aware ring tiers. Amber/green are deliberately NOT used here — they are the fat and
   carbs identity colors on this very band, and reusing them for status would reintroduce the
   WCAG 1.4.1 ambiguity the redesign fixed. */
.rsb-tier-mixed .rsb-ring-arc[b-g2y1qiooxh] {
  stroke: var(--fs-text-secondary, #6b7280);
}

.rsb-tier-mixed .rsb-ring-icon[b-g2y1qiooxh] {
  color: var(--fs-text-secondary, #6b7280);
}

.rsb-tier-off .rsb-ring-arc[b-g2y1qiooxh] {
  stroke: var(--fs-error, #ef4444);
}

.rsb-tier-off .rsb-ring-icon[b-g2y1qiooxh] {
  color: var(--fs-error, #ef4444);
}

/* Visible grade label — poorly-graded tiers only (solid grades keep it aria-only). */
.rsb-grade-text[b-g2y1qiooxh] {
  margin-left: 8px;
  font:
    600 11.5px system-ui,
    sans-serif;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}

.rsb-grade-text.rsb-tier-mixed[b-g2y1qiooxh] {
  color: var(--fs-text-secondary, #6b7280);
  background: #f3f4f6;
}

.rsb-grade-text.rsb-tier-off[b-g2y1qiooxh] {
  color: var(--fs-error-text, #b91c1c);
  background: var(--fs-error-light, #fee2e2);
}

.rsb-headline[b-g2y1qiooxh] {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rsb-count[b-g2y1qiooxh] {
  font:
    700 16px Raleway,
    sans-serif;
  color: var(--fs-text-primary, #1a1a1a);
}

.rsb-context[b-g2y1qiooxh] {
  font-size: 12.5px;
  color: #6b7280;
}

.rsb-chips[b-g2y1qiooxh] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.rsb-chip[b-g2y1qiooxh] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.rsb-chip-dot[b-g2y1qiooxh] {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.rsb-chip-kcal[b-g2y1qiooxh] {
  background: #f3f4f6;
  color: var(--fs-macro-kcal, #374151);
}

.rsb-chip-protein[b-g2y1qiooxh] {
  background: #eff6ff;
  color: var(--fs-primary-hover, #1d4ed8);
}

.rsb-chip-protein .rsb-chip-dot[b-g2y1qiooxh] {
  background: var(--fs-macro-protein, #2563eb);
}

.rsb-chip-carbs[b-g2y1qiooxh] {
  background: #ecfdf5;
  color: var(--fs-macro-carbs-text, #047857);
}

.rsb-chip-carbs .rsb-chip-dot[b-g2y1qiooxh] {
  background: var(--fs-macro-carbs, #0e9f6e);
}

.rsb-chip-fat[b-g2y1qiooxh] {
  background: #fffbeb;
  color: var(--fs-macro-fat-text, #b45309);
}

.rsb-chip-fat .rsb-chip-dot[b-g2y1qiooxh] {
  background: var(--fs-macro-fat, #d97706);
}

.rsb-controls[b-g2y1qiooxh] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 16px;
  border-left: 1px solid #e5e7eb;
}

.rsb-btn[b-g2y1qiooxh] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 10px 16px; /* ≥44px tap target with line-height */
  font-size: 13.5px;
  font-weight: 600;
  background: #fff;
  cursor: pointer;
}

.rsb-btn-refine[b-g2y1qiooxh] {
  border: 1px solid var(--fs-primary, #2563eb);
  color: var(--fs-primary, #2563eb);
}

/* Filter-active state uses the brand accent, NOT #d97706 — that amber is the fat macro's
   identity color on this same band. The accent alone is ~2.5:1 on white, so the background
   tint carries the state alongside the label text (which shows the filter summary). */
.rsb-btn-refine.rsb-filter-active[b-g2y1qiooxh] {
  border-color: var(--fs-accent, #f08a12);
  background: #fff3e6;
}

.rsb-btn-sort[b-g2y1qiooxh] {
  border: 1px solid #d1d5db;
  color: #374151;
}

.rsb-clear-link[b-g2y1qiooxh] {
  position: relative;
  border: none;
  background: none;
  padding: 6px 4px;
  font-size: 12.5px;
  color: #b45309;
  cursor: pointer;
}

/* ≥44px hit area; -6px horizontal stays inside the 8px control gap (no overlap). */
.rsb-clear-link[b-g2y1qiooxh]::after {
  content: "";
  position: absolute;
  inset: -9px -6px;
}

.rsb-coaching[b-g2y1qiooxh] {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border-left: 3px solid var(--fs-primary, #2563eb);
  border-radius: 0 8px 8px 0;
  padding: 9px 14px;
  margin: -8px 0 20px 0;
  font-size: 13px;
  color: #374151;
}

.rsb-coaching .fa-lightbulb[b-g2y1qiooxh] {
  color: var(--fs-primary, #2563eb);
  font-size: 12px;
  flex-shrink: 0;
}

@media (max-width: 767.98px) {
  .rsb-chips[b-g2y1qiooxh] {
    margin-left: 0;
    width: 100%;
    order: 3;
  }

  .rsb-controls[b-g2y1qiooxh] {
    border-left: none;
    padding-left: 0;
    margin-left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rsb-ring-arc[b-g2y1qiooxh] {
    transition: none;
  }
}
/* /Components/Meals/ShowAllCombinations.razor.rz.scp.css */
/* Show-all view — canvas 4a. */

.showall[b-247iphtxfy] {
  margin-top: 1rem;
}

.showall-header[b-247iphtxfy] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px 20px;
  box-shadow: 0 1px 2px rgba(13, 19, 33, 0.04);
  margin-bottom: 16px;
}

.showall-heading[b-247iphtxfy] {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.showall-title[b-247iphtxfy] {
  font:
    700 16px Raleway,
    sans-serif;
  color: var(--fs-text-primary, #1a1a1a);
}

.showall-context[b-247iphtxfy] {
  font-size: 12.5px;
  color: #6b7280;
}

.showall-actions[b-247iphtxfy] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.showall-back[b-247iphtxfy],
.showall-refine[b-247iphtxfy] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  background: #fff;
  cursor: pointer;
}

.showall-back[b-247iphtxfy] {
  border: 1px solid var(--fs-primary, #2563eb);
  color: var(--fs-primary, #2563eb);
}

.showall-refine[b-247iphtxfy] {
  border: 1px solid #d1d5db;
  color: #374151;
}

.showall-more[b-247iphtxfy] {
  display: block;
  width: 100%;
  border: 1px dashed #d1d5db;
  background: none;
  border-radius: 10px;
  padding: 12px;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fs-primary, #2563eb);
  cursor: pointer;
}

.showall-more:hover[b-247iphtxfy] {
  border-color: var(--fs-primary, #2563eb);
  background: #f8fafc;
}
/* /Components/Meals/SingleResultHero.razor.rz.scp.css */
/* Single-result hero — canvas 2c. Two-column desktop; stacks on mobile (3a language). */

.single-result-hero[b-ub34ihemat] {
  margin-top: 1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(13, 19, 33, 0.04);
}

.srh-eyebrow[b-ub34ihemat] {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #6b7280;
}

.srh-headline[b-ub34ihemat] {
  margin: 4px 0 2px;
  font:
    700 22px Raleway,
    sans-serif;
  color: var(--fs-text-primary, #1a1a1a);
}

.srh-subcopy[b-ub34ihemat] {
  margin: 0 0 6px;
  font-size: 13.5px;
  color: #6b7280;
}

.srh-body[b-ub34ihemat] {
  display: flex;
  gap: 28px;
  margin-top: 14px;
}

.srh-foods[b-ub34ihemat] {
  flex: 1;
  min-width: 0;
}

.srh-food-row[b-ub34ihemat] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #f3f4f6;
}

.srh-food-main[b-ub34ihemat] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.srh-food-name[b-ub34ihemat] {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--fs-text-primary, #1a1a1a);
}

.srh-food-sub[b-ub34ihemat] {
  font-size: 12px;
  color: #6b7280;
}

.srh-locked .srh-food-name[b-ub34ihemat],
.srh-locked .srh-portion[b-ub34ihemat] {
  color: #9ca3af;
}

.srh-lock[b-ub34ihemat] {
  font-size: 11px;
  color: #9ca3af;
  margin-right: 6px;
}

.srh-portion[b-ub34ihemat] {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: #6b7280;
}

.srh-portion b[b-ub34ihemat] {
  color: var(--fs-text-primary, #1a1a1a);
}

.srh-grams[b-ub34ihemat] {
  margin-left: 6px;
  font-size: 12px;
  color: #9ca3af;
}

.srh-fit[b-ub34ihemat] {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 24px;
  border-left: 1px solid #f3f4f6;
}

.srh-fit-title[b-ub34ihemat] {
  font-size: 12.5px;
  font-weight: 700;
  color: #374151;
}

.srh-fit-line[b-ub34ihemat] {
  font-size: 12.5px;
  font-weight: 600;
}

.srh-fit-line .fa-check-circle[b-ub34ihemat] {
  margin-right: 4px;
}

.srh-fit-inrange[b-ub34ihemat] {
  color: var(--fs-success-text, #047857);
}

.srh-fit-over[b-ub34ihemat],
.srh-fit-under[b-ub34ihemat] {
  color: var(--fs-error-text, #b91c1c);
}

.srh-add[b-ub34ihemat] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fs-primary, #2563eb);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px 16px;
  font-size: 15.5px;
  font-weight: 600;
  margin-top: auto;
  cursor: pointer;
}

.srh-add:hover[b-ub34ihemat] {
  background: var(--fs-primary-hover, #1d4ed8);
}

.srh-secondary[b-ub34ihemat] {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.srh-link[b-ub34ihemat] {
  border: none;
  background: none;
  font-size: 12.5px;
  color: #6b7280;
  text-decoration: underline;
  padding: 8px 4px;
  cursor: pointer;
}

.srh-near-misses[b-ub34ihemat] {
  margin-top: 20px;
  border-top: 1px solid #f3f4f6;
  padding-top: 14px;
}

.srh-nm-title[b-ub34ihemat] {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 10px;
}

.srh-nm-grid[b-ub34ihemat] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.srh-browse-all[b-ub34ihemat] {
  display: block;
  width: 100%;
  border: 1px dashed #d1d5db;
  background: none;
  border-radius: 10px;
  padding: 12px;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fs-primary, #2563eb);
  cursor: pointer;
}

.srh-browse-all:hover[b-ub34ihemat] {
  border-color: var(--fs-primary, #2563eb);
  background: #f8fafc;
}

@media (max-width: 767.98px) {
  .srh-body[b-ub34ihemat] {
    flex-direction: column;
    gap: 16px;
  }

  .srh-fit[b-ub34ihemat] {
    width: auto;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid #f3f4f6;
    padding-top: 14px;
  }
}
/* /Components/Meals/UndoNotice.razor.rz.scp.css */
/* Shared undo notice — identical chrome in every host (band/compare/hero). */

.undo-notice[b-llt0jwlj7t] {
  font-size: 12.5px;
  color: #6b7280;
}

.undo-link[b-llt0jwlj7t] {
  position: relative;
  border: none;
  background: none;
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fs-primary, #2563eb);
  text-decoration: underline;
  cursor: pointer;
}

/* ≥44px hit area without visual bloat. */
.undo-link[b-llt0jwlj7t]::after {
  content: "";
  position: absolute;
  inset: -15px -10px;
}
/* /Components/Nutrition/NutrientTotal.razor.rz.scp.css */
/* Nutrient Total Styles */
.nutrient-total[b-sqn43byqmu] {
  font-size: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

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

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

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

.nutrient-total-compact .compact-icon[b-sqn43byqmu] {
  font-size: 0.7rem;
  vertical-align: super;
  margin-left: 2px;
}
/* /Components/NutritionFacts/MobileScanCamera.razor.rz.scp.css */
/* Full-screen dark camera viewfinder (canvas: mobscan). Its own visual world — the strict-fit
   in-modal skin governs the light confirm/upload UI, not this. Sits above the mobile sheet. */
.mobcam[b-j8o635qe2h] {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: #10141c;
  display: flex;
  flex-direction: column;
  color: #fff;
  /* Respect notches: top bar clears the status bar, controls clear the home indicator. */
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobcam-topbar[b-j8o635qe2h] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  flex-shrink: 0;
}

.mobcam-title[b-j8o635qe2h] {
  font-size: 0.95rem;
  font-weight: 700;
}

.mobcam-round[b-j8o635qe2h] {
  background: rgba(255, 255, 255, 0.14);
  border: none;
  cursor: pointer;
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobcam-round:disabled[b-j8o635qe2h] {
  opacity: 0.4;
  cursor: default;
}

.mobcam-round-active[b-j8o635qe2h] {
  background: #fff;
  color: #10141c;
}

.mobcam-round-lg[b-j8o635qe2h] {
  width: 44px;
  height: 44px;
}

/* ---- viewfinder stage ---- */
.mobcam-stage[b-j8o635qe2h] {
  position: relative;
  flex: 1;
  margin: 6px 22px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, #232a38 0%, #161b26 100%);
}

.mobcam-video[b-j8o635qe2h] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobcam-frame[b-j8o635qe2h] {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mobcam-bracket[b-j8o635qe2h] {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 3px solid #fff;
}

.mobcam-bracket-tl[b-j8o635qe2h] {
  top: 18%;
  left: 8%;
  border-right: 0;
  border-bottom: 0;
  border-radius: 8px 0 0 0;
}
.mobcam-bracket-tr[b-j8o635qe2h] {
  top: 18%;
  right: 8%;
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 8px 0 0;
}
.mobcam-bracket-bl[b-j8o635qe2h] {
  bottom: 18%;
  left: 8%;
  border-right: 0;
  border-top: 0;
  border-radius: 0 0 0 8px;
}
.mobcam-bracket-br[b-j8o635qe2h] {
  bottom: 18%;
  right: 8%;
  border-left: 0;
  border-top: 0;
  border-radius: 0 0 8px 0;
}

.mobcam-hint[b-j8o635qe2h] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.82rem;
  line-height: 1.45;
  max-width: 220px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.mobcam-hint-icon[b-j8o635qe2h] {
  display: block;
  margin: 0 auto 8px;
  font-size: 34px !important;
  color: rgba(255, 255, 255, 0.6);
}

.mobcam-rail[b-j8o635qe2h] {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
}

.mobcam-thumb[b-j8o635qe2h] {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 2px dashed rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.mobcam-thumb-filled[b-j8o635qe2h] {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.6);
}

.mobcam-thumb img[b-j8o635qe2h] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobcam-thumb-label[b-j8o635qe2h] {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.62rem;
  font-weight: 700;
}

.mobcam-thumb-check[b-j8o635qe2h] {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 18px !important;
  color: #34d399;
  background: #10141c;
  border-radius: 50%;
}

/* ---- starting spinner ---- */
.mobcam-starting[b-j8o635qe2h] {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
}

.mobcam-spinner[b-j8o635qe2h] {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.15);
  border-top-color: #2563eb;
  animation: mobcam-spin-b-j8o635qe2h 0.9s linear infinite;
}

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

/* ---- error card ---- */
.mobcam-error[b-j8o635qe2h] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
  background: rgba(16, 20, 28, 0.85);
}

.mobcam-error-card[b-j8o635qe2h] {
  background: #fff;
  color: #111827;
  border-radius: 16px;
  padding: 24px 22px;
  text-align: center;
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobcam-error-icon[b-j8o635qe2h] {
  font-size: 40px !important;
  color: #dc2626;
  margin: 0 auto;
}

.mobcam-error-text[b-j8o635qe2h] {
  font-size: 0.86rem;
  line-height: 1.5;
  color: #4b5563;
}

/* ---- bottom controls ---- */
.mobcam-controls[b-j8o635qe2h] {
  flex-shrink: 0;
  padding: 8px 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.mobcam-chips[b-j8o635qe2h] {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.mobcam-chip[b-j8o635qe2h] {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.12);
  border: none;
  border-radius: 100px;
  padding: 7px 14px;
  cursor: pointer;
  font-family: inherit;
}

.mobcam-chip-active[b-j8o635qe2h] {
  color: #10141c;
  background: #fff;
  font-weight: 700;
}

.mobcam-chip-dot[b-j8o635qe2h] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2563eb;
}

.mobcam-chip-done[b-j8o635qe2h] {
  font-size: 15px !important;
  color: #34d399;
}

.mobcam-caption[b-j8o635qe2h] {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
  text-align: center;
}

.mobcam-slot-error[b-j8o635qe2h] {
  color: #fecaca;
  background: rgba(220, 38, 38, 0.18);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.76rem;
  text-align: center;
}

.mobcam-shutter-row[b-j8o635qe2h] {
  display: flex;
  align-items: center;
  gap: 38px;
}

.mobcam-shutter[b-j8o635qe2h] {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.mobcam-shutter:disabled[b-j8o635qe2h] {
  cursor: default;
  opacity: 0.7;
}

.mobcam-shutter-core[b-j8o635qe2h] {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.1s ease;
}

.mobcam-shutter-busy .mobcam-shutter-core[b-j8o635qe2h] {
  transform: scale(0.85);
  background: rgba(255, 255, 255, 0.7);
}

/* ---- buttons (shared with error card + extract) ---- */
.mobcam-btn[b-j8o635qe2h] {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: none;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
}

.mobcam-btn-primary[b-j8o635qe2h] {
  background: #2563eb;
  color: #fff;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.28);
}

.mobcam-btn-ghost[b-j8o635qe2h] {
  background: #f1f5f9;
  color: #374151;
  height: 42px;
}

.mobcam-btn-icon[b-j8o635qe2h] {
  font-size: 19px !important;
}

.mobcam-extract[b-j8o635qe2h] {
  max-width: 320px;
}
/* /Components/NutritionFacts/ProductImageScanner.razor.rz.scp.css */
/* ProductImageScanner.razor.css — strict-fit skin (app tokens, 4px radii) */

.product-image-scanner[b-rydmx4jesk] {
  padding: 1rem 1.5rem;
}

/* ===== Shared buttons ===== */

.scan-btn[b-rydmx4jesk] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.5rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

[b-rydmx4jesk] .scan-btn-icon {
  font-size: 1.125rem;
}

.scan-btn-primary[b-rydmx4jesk] {
  background: var(--fs-primary, #2563eb);
  color: #fff;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
}

.scan-btn-primary:hover:not(:disabled)[b-rydmx4jesk] {
  background: var(--fs-primary-hover, #1d4ed8);
}

.scan-btn-primary:disabled[b-rydmx4jesk],
.scan-btn-disabled[b-rydmx4jesk] {
  background: #93b4f5;
  cursor: not-allowed;
  box-shadow: none;
}

.scan-btn-outline[b-rydmx4jesk] {
  background: #fff;
  border: 1px solid var(--fs-primary, #2563eb);
  color: var(--fs-primary, #2563eb);
}

.scan-btn-outline:hover[b-rydmx4jesk] {
  background: rgba(37, 99, 235, 0.08);
}

.scan-btn-muted[b-rydmx4jesk] {
  background: none;
  color: #718096;
}

.scan-btn-muted:hover[b-rydmx4jesk] {
  background: rgba(0, 0, 0, 0.04);
}

/* ===== Footer row ===== */

.scan-footer[b-rydmx4jesk] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}

/* ===== Upload: typed slots ===== */

.scan-upload-intro[b-rydmx4jesk] {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  color: #4a5568;
}

.scan-slots[b-rydmx4jesk] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.scan-slot[b-rydmx4jesk] {
  position: relative;
  border: 2px dashed #cbd5e0;
  border-radius: 4px;
  padding: 1rem;
  text-align: center;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.scan-slot:hover[b-rydmx4jesk] {
  border-color: var(--fs-primary, #2563eb);
  background: rgba(37, 99, 235, 0.03);
}

.scan-slot-filled[b-rydmx4jesk],
.scan-slot-filled:hover[b-rydmx4jesk] {
  border: 1px solid #86efac;
  background: #f0fdf4;
}

/* The file input covers the whole card so both click-to-browse and drag-drop work natively. */
[b-rydmx4jesk] .scan-slot-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

[b-rydmx4jesk] .scan-slot-icon {
  font-size: 2.125rem;
  color: #9ca3af;
}

[b-rydmx4jesk] .scan-slot-icon-filled {
  color: #16a34a;
}

[b-rydmx4jesk] .scan-slot-check {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 1.25rem;
  color: #16a34a;
}

.scan-slot-title[b-rydmx4jesk] {
  font-size: 0.9rem;
  font-weight: 600;
  color: #4a5568;
  margin-top: 0.5rem;
}

.scan-slot-filled .scan-slot-title[b-rydmx4jesk] {
  color: #1a1a1a;
}

.scan-slot-required[b-rydmx4jesk] {
  color: #e53e3e;
}

.scan-slot-hint[b-rydmx4jesk] {
  font-size: 0.76rem;
  color: #9ca3af;
  margin-top: 0.25rem;
}

.scan-slot-file[b-rydmx4jesk] {
  font-size: 0.76rem;
  color: #16a34a;
  margin-top: 0.25rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scan-slot-thumb[b-rydmx4jesk] {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #86efac;
}

/* Raised above the invisible full-card file input so Remove receives its own clicks;
   Replace is a label targeting the input, so it opens the picker from up here too.
   The whole strip (including the gap between the words) blocks the input beneath: a
   stray click in the gap must NOT open the picker, because cancelling that picker
   destroys the kept photo (the browser clears the input's file table). Drops anywhere
   on the strip are preventDefault-ed in the markup so they can't navigate the tab away —
   the small silent-swallow zone is the accepted price of never navigating. */
.scan-slot-actions[b-rydmx4jesk] {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.6rem;
}

.scan-slot-action[b-rydmx4jesk] {
  color: #6b7280;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

.scan-slot-action:hover[b-rydmx4jesk] {
  color: #374151;
}

.scan-slots-caption[b-rydmx4jesk] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.78rem;
  color: #718096;
}

[b-rydmx4jesk] .scan-caption-icon {
  font-size: 1rem;
  color: #9ca3af;
}

.scan-error[b-rydmx4jesk] {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  padding: 0.6rem 0.75rem;
  font-size: 0.82rem;
  color: #991b1b;
}

/* ===== Processing ===== */

.scan-processing[b-rydmx4jesk] {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.scan-spinner[b-rydmx4jesk] {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid #e2e8f0;
  border-top-color: var(--fs-primary, #2563eb);
  animation: scanSpin-b-rydmx4jesk 1s linear infinite;
  margin-bottom: 1.25rem;
}

@keyframes scanSpin-b-rydmx4jesk {
  to {
    transform: rotate(360deg);
  }
}

.scan-processing h4[b-rydmx4jesk],
.scan-failed h4[b-rydmx4jesk] {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  color: #1a1a1a;
  font-weight: 600;
}

.scan-processing p[b-rydmx4jesk],
.scan-failed p[b-rydmx4jesk] {
  margin: 0 0 1.5rem;
  color: #6b7280;
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 420px;
}

/* ===== Failed ===== */

.scan-failed[b-rydmx4jesk] {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.scan-failed-icon[b-rydmx4jesk] {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fee2e2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

[b-rydmx4jesk] .scan-failed-icon .mud-icon-root {
  font-size: 1.75rem;
  color: #dc2626;
}

.scan-failed-actions[b-rydmx4jesk] {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== Result confirmation ===== */

.scan-result-header[b-rydmx4jesk] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.scan-result-check[b-rydmx4jesk] {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #d1fae5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

[b-rydmx4jesk] .scan-result-check .mud-icon-root {
  font-size: 1.3rem;
  color: var(--fs-macro-carbs-text, #047857);
}

.scan-result-title[b-rydmx4jesk] {
  font-size: 1.05rem;
  font-weight: 600;
  color: #1a1a1a;
}

.scan-result-subtitle[b-rydmx4jesk] {
  font-size: 0.8rem;
  color: #718096;
}

.scan-result-grid[b-rydmx4jesk] {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 1rem;
}

.scan-card[b-rydmx4jesk] {
  background: #fff;
  border-radius: 4px;
  padding: 1rem;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.08);
}

.scan-identity-row[b-rydmx4jesk] {
  margin-bottom: 0.9rem;
}

.scan-identity-row:last-child[b-rydmx4jesk] {
  margin-bottom: 0;
}

.scan-identity-serving[b-rydmx4jesk] {
  padding-top: 0.9rem;
  border-top: 1px solid #f1f5f9;
}

.scan-identity-label[b-rydmx4jesk] {
  font-size: 0.72rem;
  font-weight: 600;
  color: #9ca3af;
}

.scan-identity-value-row[b-rydmx4jesk] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.scan-identity-value[b-rydmx4jesk] {
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a1a;
}

.scan-chip[b-rydmx4jesk] {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--fs-macro-carbs-text, #047857);
  background: #d1fae5;
  border-radius: 100px;
  padding: 3px 9px;
  white-space: nowrap;
}

.scan-nutrition-head[b-rydmx4jesk] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a1a1a;
}

.scan-tiles[b-rydmx4jesk] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}

.scan-tile[b-rydmx4jesk] {
  background: #f7fafc;
  border-radius: 4px;
  padding: 0.7rem 0.5rem;
  text-align: center;
}

.scan-tile-value[b-rydmx4jesk] {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a1a1a;
}

.scan-tile-carbs[b-rydmx4jesk] {
  color: var(--fs-macro-carbs-text, #047857);
}

.scan-tile-protein[b-rydmx4jesk] {
  color: var(--fs-macro-protein, #2563eb);
}

.scan-tile-fat[b-rydmx4jesk] {
  color: var(--fs-macro-fat-text, #b45309);
}

.scan-tile-label[b-rydmx4jesk] {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
}

.scan-caution[b-rydmx4jesk] {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.75rem;
  background: #fffaf1;
  border-radius: 4px;
  padding: 0.6rem 0.75rem;
  font-size: 0.78rem;
  color: #8a5a12;
  line-height: 1.4;
}

[b-rydmx4jesk] .scan-caution-icon {
  font-size: 1rem;
  color: var(--fs-accent, #f08a12);
}

.scan-also-read[b-rydmx4jesk] {
  font-size: 0.78rem;
  color: #9ca3af;
  margin-top: 0.6rem;
}

/* ===== Responsive ===== */

@media (max-width: 640px) {
  .product-image-scanner[b-rydmx4jesk] {
    padding: 0.75rem 0.5rem;
  }

  .scan-slots[b-rydmx4jesk] {
    grid-template-columns: 1fr;
  }

  .scan-result-grid[b-rydmx4jesk] {
    grid-template-columns: 1fr;
  }

  .scan-footer[b-rydmx4jesk] {
    flex-direction: column-reverse;
    gap: 0.5rem;
    align-items: stretch;
  }
}

/* Mobile camera call-to-action: the primary scan action on phones opens the live viewfinder;
   the file-picker slots below stay as the "or upload photos" fallback. */
.scan-camera-cta[b-rydmx4jesk] {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border: none;
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  text-align: left;
  color: #fff;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
  font-family: inherit;
}

.scan-camera-cta-icon[b-rydmx4jesk] {
  font-size: 30px !important;
}

.scan-camera-cta-text[b-rydmx4jesk] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.scan-camera-cta-title[b-rydmx4jesk] {
  font-size: 0.98rem;
  font-weight: 700;
}

.scan-camera-cta-sub[b-rydmx4jesk] {
  font-size: 0.78rem;
  opacity: 0.85;
}

.scan-upload-or[b-rydmx4jesk] {
  text-align: center;
  color: var(--mud-palette-text-secondary, #6b7280);
  font-size: 0.8rem;
  font-weight: 600;
  margin: 14px 0 6px;
}
/* /Components/Onboarding/EmailCaptureModal.razor.rz.scp.css */
/* EmailCaptureModal Component Styles */

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

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

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

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

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

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

.input-wrapper .form-control[b-aeuxvvh4ia] {
  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-aeuxvvh4ia] {
  border-color: var(--fs-primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

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

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

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

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

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

.suggestion-link:hover[b-aeuxvvh4ia] {
  color: var(--fs-primary-hover, #1d4ed8);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .submit-btn[b-aeuxvvh4ia],
  .input-wrapper .form-control[b-aeuxvvh4ia] {
    transition: none;
  }
}
/* /Components/Onboarding/HowItWorksAnimation.razor.rz.scp.css */
/* ==========================================================================
   HowItWorksAnimation - Animated Value Proposition Schema
   Shows: Your Foods → Portion Pilot → Your Portions
   ========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.calculator-box.processing[b-lmkkoyxiae] {
  border-color: rgba(37, 99, 235, 0.5);
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.2);
}

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

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

.processing-spinner[b-lmkkoyxiae] {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(37, 99, 235, 0.2);
  border-top-color: var(--fs-primary);
  border-radius: 50%;
  animation: spin-b-lmkkoyxiae 0.8s linear infinite;
}

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

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

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

.calculating-text[b-lmkkoyxiae] {
  color: var(--fs-primary);
  font-weight: 500;
}

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

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

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

.timer-text[b-lmkkoyxiae] {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--fs-primary);
}

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

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

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

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

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

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

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

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

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

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

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

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

.cycle-dot.active[b-lmkkoyxiae] {
  background: var(--fs-primary);
  transform: scale(1.2);
}

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

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

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

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

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

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

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

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

@media (max-width: 700px) {
  /* --- Outer wrapper: minimal vertical padding --- */
  .how-it-works-animation[b-lmkkoyxiae] {
    padding: 0.25rem 0.75rem;
  }

  /* --- Main container: tight vertical stack --- */
  .animation-container[b-lmkkoyxiae] {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: auto;
  }

  /* --- Panels: subtle card chrome for visual grouping --- */
  .panel[b-lmkkoyxiae] {
    max-width: 100%;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 0.75rem;
  }

  /* --- Panel headers: compact single line --- */
  .panel-header[b-lmkkoyxiae] {
    margin-bottom: 0.375rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #edf2f7;
  }

  .panel-icon[b-lmkkoyxiae] {
    font-size: 1.1rem;
  }

  .panel-header h3[b-lmkkoyxiae] {
    font-size: 1rem;
  }

  /* --- Food & portion items: inline chips that wrap horizontally --- */
  .panel-content[b-lmkkoyxiae] {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  .food-item[b-lmkkoyxiae] {
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    flex: 0 0 auto;
    transform: translateX(0);
    background: #f8fafc;
  }

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

  .food-emoji[b-lmkkoyxiae] {
    font-size: 1rem;
  }

  .food-name[b-lmkkoyxiae] {
    font-size: 0.9rem;
  }

  .portion-item[b-lmkkoyxiae] {
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    border-left: 2px solid #48bb78;
    flex: 0 0 auto;
    transform: translateX(0);
  }

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

  .portion-check[b-lmkkoyxiae] {
    font-size: 0.75rem;
  }

  .portion-unit[b-lmkkoyxiae] {
    font-size: 0.9rem;
  }

  .portion-grams[b-lmkkoyxiae] {
    font-size: 0.8rem;
  }

  /* --- Panel footers: visible on mobile for context --- */
  .panel-footer[b-lmkkoyxiae] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
  }

  /* --- Flow section: tight vertical connector --- */
  .flow-section[b-lmkkoyxiae] {
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 0;
  }

  /* --- Arrows: tiny downward chevrons --- */
  .flow-arrow[b-lmkkoyxiae] {
    width: 24px;
    height: 16px;
    margin: 0.125rem 0;
    transform: rotate(90deg);
  }

  .arrow-svg[b-lmkkoyxiae] {
    height: 14px;
  }

  /* --- Calculator box: compact horizontal layout --- */
  .calculator-box[b-lmkkoyxiae] {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    min-width: auto;
    width: 100%;
  }

  .calculator-icon[b-lmkkoyxiae] {
    font-size: 1.25rem;
    margin-bottom: 0;
    height: auto;
    flex-shrink: 0;
  }

  .processing-spinner[b-lmkkoyxiae] {
    width: 20px;
    height: 20px;
    border-width: 2px;
  }

  .calculator-label[b-lmkkoyxiae] {
    font-size: 1rem;
    margin-bottom: 0;
  }

  .calculator-subtitle[b-lmkkoyxiae] {
    font-size: 0.8rem;
    max-width: none;
    text-align: left;
  }

  .calculator-timer[b-lmkkoyxiae] {
    margin-top: 0;
    margin-left: auto;
    padding: 0.25rem 0.5rem;
    transform: translateY(0);
    flex-shrink: 0;
  }

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

  .timer-icon[b-lmkkoyxiae] {
    font-size: 0.75rem;
  }

  .timer-text[b-lmkkoyxiae] {
    font-size: 0.75rem;
  }

  /* --- Ordering: preserved vertical sequence --- */
  .foods-panel[b-lmkkoyxiae] {
    order: 0;
  }

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

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

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

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

  /* --- Cycle indicators: tighter spacing --- */
  .cycle-indicators[b-lmkkoyxiae] {
    margin-top: 0.75rem;
  }

  .cycle-dot[b-lmkkoyxiae] {
    width: 8px;
    height: 8px;
  }
}

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

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

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

  .processing-spinner[b-lmkkoyxiae] {
    animation: none;
    border-color: var(--fs-primary);
  }

  .arrow-line[b-lmkkoyxiae] {
    stroke-dashoffset: 0;
  }
}
/* /Components/Onboarding/MainPageIntro.razor.rz.scp.css */
/* ==========================================================================
   Scroll-Reveal Landing Page - Natural Flow with Reveal Animations
   Better UX than scroll-snap for content-light sections (avoids false bottom)
   ========================================================================== */

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

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

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

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

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

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

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

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

.snap-dot:hover[b-tkasyd4w7l] {
  border-color: var(--fs-primary);
  transform: scale(1.2);
}

.snap-dot.active[b-tkasyd4w7l] {
  background: var(--fs-primary);
  border-color: var(--fs-primary);
  transform: scale(1.1);
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.5);
}

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

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

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

/* Focus styles for accessibility */
.snap-dot:focus[b-tkasyd4w7l] {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

.snap-dot:focus-visible[b-tkasyd4w7l] {
  outline: 2px solid var(--fs-primary);
  outline-offset: 2px;
}

/* Section title — reusable heading for snap sections */
.snap-section-title[b-tkasyd4w7l] {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a202c;
}

/* Content wrapper for centering within sections */
.snap-content[b-tkasyd4w7l] {
  width: 100%;
  max-width: 1100px;
  padding: 0 1rem;
}

/* Alternating section backgrounds */
.snap-animation[b-tkasyd4w7l] {
  background: #ffffff;
}

.snap-journey[b-tkasyd4w7l] {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.snap-comparison[b-tkasyd4w7l] {
  background: linear-gradient(180deg, #fafbfc 0%, #f5f6f8 50%, #fafbfc 100%);
}

.snap-features[b-tkasyd4w7l] {
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
}

.snap-faq[b-tkasyd4w7l] {
  background: #f8fafc;
}

.snap-cta[b-tkasyd4w7l] {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

/* Features + Beta combined wrapper */
.features-beta-wrapper[b-tkasyd4w7l] {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
}

/* FAQ wrapper for centering */
.faq-wrapper[b-tkasyd4w7l] {
  max-width: 700px;
  margin: 0 auto;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .snap-section[b-tkasyd4w7l] {
    padding: 2.5rem 0.75rem;
    transform: translateY(15px); /* Shorter reveal distance on mobile */
  }

  /* Full-viewport sections on mobile (slide-deck feel) */
  .snap-section:not(.snap-hero)[b-tkasyd4w7l] {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .snap-animation[b-tkasyd4w7l] {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    justify-content: center;
  }

  .snap-content[b-tkasyd4w7l] {
    padding: 0 0.5rem;
  }

  /* Pagination dots - visible enough for wayfinding */
  .snap-pagination[b-tkasyd4w7l] {
    right: 0.75rem;
    gap: 0.5rem;
    padding: 0.5rem 0.35rem;
    background: rgba(255, 255, 255, 0.25);
  }

  .snap-dot[b-tkasyd4w7l] {
    width: 10px;
    height: 10px;
    border-width: 1.5px;
  }

  /* Hide tooltips on mobile - just use dots */
  .snap-dot[b-tkasyd4w7l]::before,
  .snap-dot[b-tkasyd4w7l]::after {
    display: none;
  }
}

/* Small mobile */
@media (max-width: 576px) {
  .snap-section[b-tkasyd4w7l] {
    padding: 2rem 0.5rem;
  }

  .snap-animation[b-tkasyd4w7l] {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    justify-content: center;
  }
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .snap-section[b-tkasyd4w7l] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .snap-dot[b-tkasyd4w7l],
  .snap-dot[b-tkasyd4w7l]::before,
  .snap-dot[b-tkasyd4w7l]::after {
    transition: none;
  }
}

/* ==========================================================================
   Scroll Hint — Mobile scroll affordance for hero section
   ========================================================================== */

.scroll-hint[b-tkasyd4w7l] {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 1.5rem auto;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  width: 52px;
  height: 52px;
  cursor: pointer;
  color: var(--fs-primary);
  font-size: 1.4rem;
  z-index: 10;
  transition: opacity 0.4s ease;
  animation: gentleBounce 2s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.scroll-hint:focus-visible[b-tkasyd4w7l] {
  outline: 2px solid var(--fs-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.scroll-hint.hidden[b-tkasyd4w7l] {
  opacity: 0;
  pointer-events: none;
}

/* Mobile: fixed bottom chevron for slide-deck navigation */
@media (max-width: 991px) {
  .scroll-hint[b-tkasyd4w7l] {
    position: fixed;
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 99;
  }
}

@media (min-width: 992px) {
  .scroll-hint[b-tkasyd4w7l] {
    display: none;
  }
}

@media (max-height: 600px) {
  .scroll-hint[b-tkasyd4w7l] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint[b-tkasyd4w7l] {
    animation: none;
  }
}

/* ==========================================================================
   Original Styles Below
   ========================================================================== */

.intro-card[b-tkasyd4w7l] {
  background-color: white;
  border-radius: 1rem;
  padding: 2rem 3rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Video Section Styles */
.video-section[b-tkasyd4w7l] {
  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-tkasyd4w7l {
  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-tkasyd4w7l] {
    animation: none;
  }

  .video-container[b-tkasyd4w7l],
  .intro-video[b-tkasyd4w7l],
  .video-container[b-tkasyd4w7l]::before {
    transition: none;
  }

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

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

.video-container[b-tkasyd4w7l] {
  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-tkasyd4w7l]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(37, 99, 235, 0.1) 0%,
    rgba(96, 165, 250, 0.05) 100%
  );
  border-radius: 1rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.video-container:hover[b-tkasyd4w7l]::before {
  opacity: 1;
}

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

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

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

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

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

.intro-video:focus[b-tkasyd4w7l] {
  outline: 3px solid rgba(37, 99, 235, 0.5);
  outline-offset: 2px;
}

/* Enhanced Feature List Styles - Horizontal for scroll-snap */
.feature-list[b-tkasyd4w7l] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1.25rem;
  margin-bottom: 0;
}

.feature-item[b-tkasyd4w7l] {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.5rem 1.25rem;
  transition: transform 0.2s ease-in-out;
  flex: 0 0 280px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 0;
}

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

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

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

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

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

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

.cta-button[b-tkasyd4w7l] {
  background: linear-gradient(to right, var(--fs-primary), #60a5fa);
  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(37, 99, 235, 0.3); /* Enhanced subtle shadow */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cta-button:hover[b-tkasyd4w7l],
.cta-button:focus[b-tkasyd4w7l] {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}

.cta-button:active[b-tkasyd4w7l] {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(37, 99, 235, 0.3);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .feature-list[b-tkasyd4w7l] {
    gap: 0.5rem;
  }

  .feature-item[b-tkasyd4w7l] {
    padding: 0.625rem 0.875rem;
    max-width: 100%;
    border-radius: 8px;
  }

  .feature-content h2[b-tkasyd4w7l] {
    font-size: 0.95rem;
  }

  .feature-content p[b-tkasyd4w7l] {
    font-size: 0.825rem;
  }
}

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

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

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

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

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

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

.video-container[b-tkasyd4w7l] {
  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-tkasyd4w7l] {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #2d3748;
  padding: 4rem 2rem;
  border-radius: 20px;
  margin-top: 3rem;
  border: 1px solid rgba(37, 99, 235, 0.15);
}

.cta-container h2[b-tkasyd4w7l] {
  color: #2d3748;
  font-weight: 700;
}

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

.cta-disclaimer[b-tkasyd4w7l] {
  max-width: 520px;
  margin: 0.75rem auto 0;
  padding-top: 0.75rem;
  border-top: 1px dashed #e2e8f0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #94a3b8;
}

.cta-button[b-tkasyd4w7l] {
  background: linear-gradient(
    135deg,
    var(--fs-primary) 0%,
    var(--fs-primary-hover) 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(37, 99, 235, 0.35);
}

.cta-button:hover[b-tkasyd4w7l] {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.45);
  background: linear-gradient(
    135deg,
    var(--fs-primary) 0%,
    var(--fs-primary-hover) 100%
  );
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .feature-list[b-tkasyd4w7l] {
    flex-direction: column;
    align-items: stretch;
    gap: 0.625rem;
  }

  .feature-item[b-tkasyd4w7l] {
    flex: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    min-width: unset;
    max-width: 100%;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.06);
  }

  .feature-item:hover[b-tkasyd4w7l] {
    transform: none;
  }

  .feature-content[b-tkasyd4w7l] {
    text-align: left;
  }

  .feature-content h2[b-tkasyd4w7l] {
    font-size: 1.05rem;
    margin-bottom: 0.15rem;
  }

  .feature-content p[b-tkasyd4w7l] {
    font-size: 0.875rem;
    line-height: 1.3;
  }

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

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

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

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

/* ==========================================================================
   Sticky CTA Bar (Mobile) - Hidden during scroll-snap experience
   ========================================================================== */

.sticky-cta-bar[b-tkasyd4w7l] {
  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(37, 99, 235, 0.2);
  display: none; /* Hidden by default when using scroll-snap */
}

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

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

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

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

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

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

.sticky-cta-button[b-tkasyd4w7l] {
  background: linear-gradient(
    135deg,
    var(--fs-primary) 0%,
    var(--fs-primary-hover) 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(37, 99, 235, 0.35);
  white-space: nowrap;
  flex-shrink: 0;
}

.sticky-cta-button:hover[b-tkasyd4w7l] {
  transform: scale(1.02);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.45);
}

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

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

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

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

.floating-cta-button[b-tkasyd4w7l] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(
    135deg,
    var(--fs-primary) 0%,
    var(--fs-primary-hover) 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(37, 99, 235, 0.4);
}

.floating-cta-button:hover[b-tkasyd4w7l] {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.5);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.faq-item:hover[b-tkasyd4w7l] {
  border-color: var(--fs-primary);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.faq-item[open][b-tkasyd4w7l] {
  background: #eff6ff;
  border-color: rgba(37, 99, 235, 0.3);
}

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

/* WCAG 2.4.7 Focus Visible - Clear focus indicator for keyboard users */
.faq-question:focus[b-tkasyd4w7l] {
  outline: 2px solid var(--fs-primary);
  outline-offset: 2px;
  border-radius: 8px;
}

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

.faq-question:focus-visible[b-tkasyd4w7l] {
  outline: 2px solid var(--fs-primary);
  outline-offset: 2px;
  border-radius: 8px;
}

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

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

.faq-item[open] .faq-icon[b-tkasyd4w7l] {
  transform: rotate(180deg);
  color: var(--fs-primary);
}

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

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

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

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

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

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

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

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

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .faq-item[b-tkasyd4w7l],
  .faq-icon[b-tkasyd4w7l] {
    transition: none;
  }
}

/* ==========================================================================
   Social Proof Section - Stats Display
   ========================================================================== */

.social-proof-section[b-tkasyd4w7l] {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  border: 1px solid #e2e8f0;
}

.social-proof-stats[b-tkasyd4w7l] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.stat-item[b-tkasyd4w7l] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.stat-number[b-tkasyd4w7l] {
  font-size: 2rem;
  font-weight: 700;
  color: var(--fs-primary);
  line-height: 1.2;
}

.stat-label[b-tkasyd4w7l] {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .social-proof-section[b-tkasyd4w7l] {
    padding: 1.5rem 1rem;
  }

  .social-proof-stats[b-tkasyd4w7l] {
    gap: 1.5rem;
  }

  .stat-number[b-tkasyd4w7l] {
    font-size: 1.5rem;
  }

  .stat-label[b-tkasyd4w7l] {
    font-size: 0.75rem;
  }
}

@media (max-width: 576px) {
  .social-proof-stats[b-tkasyd4w7l] {
    gap: 1rem;
  }

  .stat-item[b-tkasyd4w7l] {
    min-width: 100px;
  }

  .stat-number[b-tkasyd4w7l] {
    font-size: 1.35rem;
  }
}
/* /Components/Onboarding/TrackerComparisonAnimation.razor.rz.scp.css */
/* ==========================================================================
   TrackerComparisonAnimation - Comparison between Trackers and Portion Pilot
   Shows: Tedious guess/log/adjust loop vs Quick pick/answer/done
   ========================================================================== */

.tracker-comparison[b-cebaoif3wa] {
  padding: 2rem 1rem;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.tracker-comparison.visible[b-cebaoif3wa] {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Title Section
   ========================================================================== */

.comparison-title[b-cebaoif3wa] {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 0.5rem;
}

.comparison-subtitle[b-cebaoif3wa] {
  text-align: center;
  font-size: 1rem;
  color: #718096;
  font-style: italic;
  margin-bottom: 2rem;
}

/* ==========================================================================
   Main Container - Side by Side Layout
   ========================================================================== */

.comparison-container[b-cebaoif3wa] {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto;
}

/* ==========================================================================
   Panel Styles
   ========================================================================== */

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

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

/* Tracker panel - neutral slate (no good/bad colour coding — ED-sensitive brand fix) */
.tracker-panel[b-cebaoif3wa] {
  border-color: rgba(100, 116, 139, 0.25);
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

/* Portion Pilot panel - the signature orange accent */
.portion-pilot-panel[b-cebaoif3wa] {
  border-color: rgba(240, 138, 18, 0.35);
  background: linear-gradient(135deg, #ffffff 0%, #fff8f0 100%);
}

/* ==========================================================================
   Panel Headers
   ========================================================================== */

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

.tracker-header[b-cebaoif3wa] {
  border-bottom-color: rgba(100, 116, 139, 0.25);
}

.pilot-header[b-cebaoif3wa] {
  border-bottom-color: rgba(240, 138, 18, 0.35);
}

.header-icon[b-cebaoif3wa] {
  font-size: 1.25rem;
}

.panel-header h4[b-cebaoif3wa] {
  font-size: 1rem;
  font-weight: 600;
  color: #2d3748;
  margin: 0;
}

/* ==========================================================================
   Steps Container
   ========================================================================== */

.steps-container[b-cebaoif3wa] {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.step-item[b-cebaoif3wa] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease-out;
}

.step-item.visible[b-cebaoif3wa] {
  opacity: 1;
  transform: translateY(0);
}

.step-icon[b-cebaoif3wa] {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.step-text[b-cebaoif3wa] {
  font-size: 0.875rem;
  color: #4a5568;
}

.step-arrow[b-cebaoif3wa] {
  text-align: center;
  color: #a0aec0;
  font-size: 0.75rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  line-height: 1;
  padding: 0.125rem 0;
}

.step-arrow.visible[b-cebaoif3wa] {
  opacity: 1;
}

/* Tracker steps are uniform neutral now (no good/bad tinting) — the old step-guess/log/error/repeat
   classes were removed with the ED-safety rework. */

/* ==========================================================================
   Portion Pilot Step Styles
   ========================================================================== */

.step-pick[b-cebaoif3wa] {
  background: rgba(66, 153, 225, 0.1);
}

.step-pick .step-text[b-cebaoif3wa] {
  color: #2b6cb0;
}

.step-calculating[b-cebaoif3wa] {
  background: linear-gradient(
    135deg,
    rgba(240, 138, 18, 0.15) 0%,
    rgba(237, 137, 54, 0.1) 100%
  );
  border: 1px dashed rgba(240, 138, 18, 0.4);
  margin: 0.5rem 0;
}

.step-calculating .step-icon[b-cebaoif3wa] {
  animation: pulse-b-cebaoif3wa 0.8s ease-in-out infinite;
}

.step-calculating .step-text[b-cebaoif3wa] {
  color: #c05621;
  font-weight: 500;
  font-style: italic;
}

@keyframes pulse-b-cebaoif3wa {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.step-result[b-cebaoif3wa] {
  background: rgba(240, 138, 18, 0.14);
  border-left: 3px solid #f08a12;
}

.step-result .step-text[b-cebaoif3wa] {
  color: #b5650b;
  font-weight: 600;
}

.step-done[b-cebaoif3wa] {
  background: rgba(240, 138, 18, 0.2);
  border: 2px solid rgba(240, 138, 18, 0.4);
}

.step-done .step-icon[b-cebaoif3wa] {
  font-size: 1.25rem;
}

.step-done .step-text[b-cebaoif3wa] {
  color: #b5650b;
  font-weight: 700;
  font-size: 0.95rem;
}

/* ==========================================================================
   Panel Footers
   ========================================================================== */

.panel-footer[b-cebaoif3wa] {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f0f4f8;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease-out;
}

.panel-footer.visible[b-cebaoif3wa] {
  opacity: 1;
  transform: translateY(0);
}

.footer-text[b-cebaoif3wa] {
  font-size: 0.85rem;
  font-weight: 600;
}

.tracker-footer .footer-text[b-cebaoif3wa] {
  color: #4a5568;
}

.pilot-footer .footer-text[b-cebaoif3wa] {
  color: #b5650b;
}

.footer-time[b-cebaoif3wa] {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.tracker-footer .footer-time[b-cebaoif3wa] {
  color: #4a5568;
}

.pilot-footer .footer-time[b-cebaoif3wa] {
  color: #b5650b;
}

/* ==========================================================================
   Divider
   ========================================================================== */

.comparison-divider[b-cebaoif3wa] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  align-self: center;
}

.divider-text[b-cebaoif3wa] {
  font-size: 1rem;
  font-weight: 700;
  color: #a0aec0;
  padding: 0.5rem;
}

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

@media (max-width: 800px) {
  .comparison-container[b-cebaoif3wa] {
    gap: 0.75rem;
  }

  .comparison-panel[b-cebaoif3wa] {
    padding: 1.25rem;
  }

  .steps-container[b-cebaoif3wa] {
    min-height: 180px;
  }

  .step-text[b-cebaoif3wa] {
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   Responsive: Mobile - Stack Vertically, Tighter Spacing
   ========================================================================== */

@media (max-width: 650px) {
  /* Tighten outer wrapper */
  .tracker-comparison[b-cebaoif3wa] {
    padding: 1rem 0.75rem;
  }

  .comparison-title[b-cebaoif3wa] {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
  }

  .comparison-subtitle[b-cebaoif3wa] {
    font-size: 0.875rem;
    margin-bottom: 1rem;
  }

  /* Stack panels */
  .comparison-container[b-cebaoif3wa] {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  /* Compact panels — lighter borders at tight spacing */
  .comparison-panel[b-cebaoif3wa] {
    max-width: 100%;
    width: 100%;
    padding: 1rem;
    border-radius: 12px;
    border-width: 1px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  }

  .step-text[b-cebaoif3wa] {
    font-size: 0.8rem;
  }

  .panel-header[b-cebaoif3wa] {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom-width: 1px;
  }

  .panel-header h4[b-cebaoif3wa] {
    font-size: 0.9rem;
  }

  /* Compact steps */
  .steps-container[b-cebaoif3wa] {
    min-height: auto;
    gap: 0.125rem;
  }

  .step-item[b-cebaoif3wa] {
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
  }

  .step-result[b-cebaoif3wa] {
    border-left-width: 2px;
  }

  .step-calculating[b-cebaoif3wa] {
    margin: 0.25rem 0;
  }

  /* Hide arrows on mobile — vertical order is self-evident */
  .step-arrow[b-cebaoif3wa] {
    display: none;
  }

  /* Give the celebration step (Eat. Done!) room to breathe */
  .step-done[b-cebaoif3wa] {
    padding: 0.5rem 0.625rem;
    margin-top: 0.25rem;
  }

  /* Compact footers — time is the star, text is supporting */
  .panel-footer[b-cebaoif3wa] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
  }

  .footer-text[b-cebaoif3wa] {
    font-size: 0.75rem;
  }

  /* Make the time callout visually dominant — this is the punchline */
  .footer-time[b-cebaoif3wa] {
    font-size: 1rem;
    display: inline-block;
    margin-top: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
  }

  .tracker-footer .footer-time[b-cebaoif3wa] {
    background: rgba(100, 116, 139, 0.1);
  }

  .pilot-footer .footer-time[b-cebaoif3wa] {
    background: rgba(240, 138, 18, 0.14);
  }

  /* Push Portion Pilot panel to "screen 2" — creates a problem→solution reveal
     Screen 1: title + tracker panel + VS (the pain)
     Screen 2: Portion Pilot panel (the relief) */
  .portion-pilot-panel[b-cebaoif3wa] {
    margin-top: 6rem;
    padding-bottom: 2rem;
  }

  /* Divider — horizontal rule with centered VS text (ends screen 1, teases what's next) */
  .comparison-divider[b-cebaoif3wa] {
    padding: 1rem 0 0;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .comparison-divider[b-cebaoif3wa]::before,
  .comparison-divider[b-cebaoif3wa]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #cbd5e0, transparent);
  }

  .divider-text[b-cebaoif3wa] {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #718096;
    padding: 0.25rem 0.5rem;
    background: rgba(113, 128, 150, 0.08);
    border-radius: 4px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .tracker-comparison[b-cebaoif3wa],
  .comparison-panel[b-cebaoif3wa],
  .step-item[b-cebaoif3wa],
  .step-arrow[b-cebaoif3wa],
  .panel-footer[b-cebaoif3wa] {
    transition: none;
  }

  .comparison-panel.active[b-cebaoif3wa],
  .step-item.visible[b-cebaoif3wa],
  .step-arrow.visible[b-cebaoif3wa],
  .panel-footer.visible[b-cebaoif3wa] {
    opacity: 1;
    transform: none;
  }

  .step-calculating .step-icon[b-cebaoif3wa] {
    animation: none;
  }
}
/* /Components/Onboarding/UserJourney.razor.rz.scp.css */
/* ==========================================================================
   User Journey Section - Clean Phase Cards Design
   Based on SaaS best practices: simple cards, no connecting lines, clear hierarchy
   ========================================================================== */

.journey-section[b-jv06fmk409] {
  padding: 2rem 1rem;
  text-align: center;
}

.journey-title[b-jv06fmk409] {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 0.5rem;
}

.journey-subtitle[b-jv06fmk409] {
  font-size: 1rem;
  color: #64748b;
  margin-bottom: 2rem;
}

/* Phase cards container - horizontal on desktop, stack on mobile */
.journey-phases[b-jv06fmk409] {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
}

/* Individual phase card */
.phase-card[b-jv06fmk409] {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.25rem;
  flex: 1;
  min-width: 240px;
  max-width: 280px;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.phase-card:hover[b-jv06fmk409] {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* Phase header with number and info */
.phase-header[b-jv06fmk409] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f1f5f9;
}

.phase-number[b-jv06fmk409] {
  width: 36px;
  height: 36px;
  background: linear-gradient(
    135deg,
    var(--fs-primary) 0%,
    var(--fs-primary-hover) 100%
  );
  color: white;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

.phase-info[b-jv06fmk409] {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.phase-name[b-jv06fmk409] {
  font-size: 1rem;
  font-weight: 600;
  color: #1a202c;
}

.phase-time[b-jv06fmk409] {
  font-size: 0.75rem;
  color: #64748b;
}

/* Steps within each phase */
.phase-steps[b-jv06fmk409] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.step-item[b-jv06fmk409] {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #4a5568;
  line-height: 1.4;
}

.step-bullet[b-jv06fmk409] {
  color: var(--fs-primary);
  font-weight: 600;
  flex-shrink: 0;
}

.step-item strong[b-jv06fmk409] {
  color: #2d3748;
}

/* ==========================================================================
   Tablet Responsive
   ========================================================================== */
@media (max-width: 768px) {
  .journey-section[b-jv06fmk409] {
    padding: 1.5rem 1rem;
  }

  .journey-title[b-jv06fmk409] {
    font-size: 1.5rem;
  }

  .journey-subtitle[b-jv06fmk409] {
    margin-bottom: 1.5rem;
  }

  .journey-phases[b-jv06fmk409] {
    gap: 0.75rem;
  }

  .phase-card[b-jv06fmk409] {
    min-width: 100%;
    max-width: 100%;
  }
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */
@media (max-width: 576px) {
  .journey-section[b-jv06fmk409] {
    padding: 1.25rem 0.75rem;
  }

  .journey-title[b-jv06fmk409] {
    font-size: 1.5rem;
  }

  .journey-subtitle[b-jv06fmk409] {
    font-size: 1rem;
  }

  .phase-card[b-jv06fmk409] {
    padding: 1rem;
  }

  .phase-number[b-jv06fmk409] {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  .phase-name[b-jv06fmk409] {
    font-size: 0.95rem;
  }

  .step-item[b-jv06fmk409] {
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .phase-card[b-jv06fmk409] {
    transition: none;
  }

  .phase-card:hover[b-jv06fmk409] {
    transform: none;
  }
}
/* /Components/Pages/Demo/MobileComponentsDemo.razor.rz.scp.css */
/* Mobile Components Demo Page Styles */

.mobile-demo-page[b-y1qk5thrc6] {
  padding-bottom: 80px; /* Space for bottom nav */
  min-height: 100vh;
}

.page-header[b-y1qk5thrc6] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--md-sys-color-surface, #fff);
  border-bottom: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
  position: sticky;
  top: 0;
  z-index: 100;
}

.page-header h1[b-y1qk5thrc6] {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: var(--md-sys-color-on-surface, #000);
}

.filter-btn[b-y1qk5thrc6] {
  position: relative;
  padding: 8px 16px;
  border: 1px solid var(--md-sys-color-primary, #4caf50);
  border-radius: 20px;
  background: transparent;
  color: var(--md-sys-color-primary, #4caf50);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-btn:hover[b-y1qk5thrc6] {
  background: var(--md-sys-color-primary-container, #e8f5e9);
}

.filter-btn:active[b-y1qk5thrc6] {
  transform: scale(0.95);
}

.filter-btn .badge[b-y1qk5thrc6] {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--md-sys-color-error, #f44336);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
}

.demo-section[b-y1qk5thrc6] {
  padding: 16px;
  background: var(--md-sys-color-surface, #fff);
}

.demo-section h2[b-y1qk5thrc6] {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: var(--md-sys-color-on-surface, #000);
}

.demo-section p[b-y1qk5thrc6] {
  margin: 0;
  font-size: 14px;
}

/* Product Card Styles */
.product-card[b-y1qk5thrc6] {
  display: flex;
  gap: 12px;
  padding: 12px;
}

.product-image-placeholder[b-y1qk5thrc6] {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.product-info[b-y1qk5thrc6] {
  flex: 1;
  min-width: 0; /* For text truncation */
}

.product-name[b-y1qk5thrc6] {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--md-sys-color-on-surface, #000);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-category[b-y1qk5thrc6] {
  margin: 0 0 4px 0;
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant, #666);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.product-description[b-y1qk5thrc6] {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--md-sys-color-on-surface-variant, #666);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-footer[b-y1qk5thrc6] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.product-price[b-y1qk5thrc6] {
  font-size: 18px;
  font-weight: 700;
  color: var(--md-sys-color-primary, #4caf50);
}

.product-rating[b-y1qk5thrc6] {
  font-size: 14px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant, #666);
}

/* Filter Styles */
.filter-group[b-y1qk5thrc6] {
  margin-bottom: 24px;
}

.filter-group h3[b-y1qk5thrc6] {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--md-sys-color-on-surface, #000);
}

.filter-checkbox[b-y1qk5thrc6] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s;
}

.filter-checkbox:hover[b-y1qk5thrc6] {
  background: var(--md-sys-color-surface-variant, #f5f5f5);
}

.filter-checkbox input[type="checkbox"][b-y1qk5thrc6] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.filter-checkbox span[b-y1qk5thrc6] {
  font-size: 14px;
  color: var(--md-sys-color-on-surface, #000);
}

.price-slider[b-y1qk5thrc6] {
  width: 100%;
  margin: 8px 0;
  accent-color: var(--md-sys-color-primary, #4caf50);
}

.filter-group p[b-y1qk5thrc6] {
  margin: 8px 0 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--md-sys-color-primary, #4caf50);
}

.rating-filters[b-y1qk5thrc6] {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rating-btn[b-y1qk5thrc6] {
  padding: 8px 12px;
  border: 1px solid var(--md-sys-color-outline, #d0d0d0);
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.rating-btn:hover[b-y1qk5thrc6] {
  background: var(--md-sys-color-surface-variant, #f5f5f5);
}

.rating-btn.active[b-y1qk5thrc6] {
  background: var(--md-sys-color-primary, #4caf50);
  color: white;
  border-color: var(--md-sys-color-primary, #4caf50);
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .page-header[b-y1qk5thrc6] {
    background: var(--md-sys-color-surface, #1e1e1e);
    border-bottom-color: var(--md-sys-color-outline-variant, #3a3a3a);
  }

  .page-header h1[b-y1qk5thrc6] {
    color: var(--md-sys-color-on-surface, #fff);
  }

  .filter-btn:hover[b-y1qk5thrc6] {
    background: var(--md-sys-color-primary-container, #2d4a2f);
  }

  .demo-section[b-y1qk5thrc6] {
    background: var(--md-sys-color-surface, #1e1e1e);
  }

  .demo-section h2[b-y1qk5thrc6] {
    color: var(--md-sys-color-on-surface, #fff);
  }

  .product-name[b-y1qk5thrc6] {
    color: var(--md-sys-color-on-surface, #fff);
  }

  .product-category[b-y1qk5thrc6],
  .product-description[b-y1qk5thrc6],
  .product-rating[b-y1qk5thrc6] {
    color: var(--md-sys-color-on-surface-variant, #b0b0b0);
  }

  .filter-checkbox:hover[b-y1qk5thrc6] {
    background: var(--md-sys-color-surface-variant, #2a2a2a);
  }

  .filter-checkbox span[b-y1qk5thrc6],
  .filter-group h3[b-y1qk5thrc6] {
    color: var(--md-sys-color-on-surface, #fff);
  }

  .rating-btn:hover[b-y1qk5thrc6] {
    background: var(--md-sys-color-surface-variant, #2a2a2a);
  }

  .rating-btn.active[b-y1qk5thrc6] {
    background: var(--md-sys-color-primary, #66bb6a);
    color: var(--md-sys-color-on-primary, #000);
  }
}

/* Mobile optimizations */
@media (max-width: 360px) {
  .page-header[b-y1qk5thrc6] {
    padding: 12px;
  }

  .page-header h1[b-y1qk5thrc6] {
    font-size: 18px;
  }

  .filter-btn[b-y1qk5thrc6] {
    padding: 6px 12px;
    font-size: 13px;
  }

  .product-card[b-y1qk5thrc6] {
    padding: 10px;
  }

  .product-image-placeholder[b-y1qk5thrc6] {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }

  .product-name[b-y1qk5thrc6] {
    font-size: 15px;
  }

  .product-price[b-y1qk5thrc6] {
    font-size: 16px;
  }
}
/* /Components/Pages/ForgotPassword.razor.rz.scp.css */
.card[b-bmszhao9x2] {
  border-color: #e0e0e0;
  border-radius: 4px;
}

.card-title[b-bmszhao9x2] {
  color: var(--fs-primary);
}

.form-control.custom-input[b-bmszhao9x2] {
  width: 100%;
  padding: 0.375rem 0.75rem;
  border-color: #e0e0e0;
}

.form-control.custom-input:focus[b-bmszhao9x2] {
  box-shadow: none;
  border-color: var(--fs-primary);
}

.btn-primary[b-bmszhao9x2] {
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover[b-bmszhao9x2] {
  background-color: #0056b3;
  border-color: #0056b3;
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* Modern Minimalist Login Design */
.login-container[b-pwyxsh4my2] {
  min-height: calc(100vh - 60px); /* Adjust for existing header */
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
  padding-top: 2rem;
}

/* Main Content */
.auth-main[b-pwyxsh4my2] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
  padding: 2rem 1rem;
}

.auth-card[b-pwyxsh4my2] {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.08);
  padding: 3rem;
  width: 100%;
  max-width: 420px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.auth-card-header[b-pwyxsh4my2] {
  text-align: center;
  margin-bottom: 2.5rem;
}

.auth-title[b-pwyxsh4my2] {
  font-size: 1.875rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.02em;
}

.auth-subtitle[b-pwyxsh4my2] {
  font-size: 1rem;
  color: #6b7280;
  margin: 0;
  font-weight: 400;
}

/* Modern Alert Styles */
.alert-modern[b-pwyxsh4my2] {
  padding: 1rem 1.25rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  border: none;
  font-weight: 500;
}

.alert-modern.alert-success[b-pwyxsh4my2] {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #166534;
  border-left: 4px solid #22c55e;
}

.alert-modern.alert-danger[b-pwyxsh4my2] {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  color: #dc2626;
  border-left: 4px solid #ef4444;
}

.alert-modern.alert-info[b-pwyxsh4my2] {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #2563eb;
  border-left: 4px solid #3b82f6;
}

/* Form Styles */
.auth-form[b-pwyxsh4my2] {
  margin-bottom: 2rem;
}

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

.form-label[b-pwyxsh4my2] {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
}

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

.form-input[b-pwyxsh4my2] {
  width: 100%;
  padding: 0.875rem 1rem;
  padding-left: 3rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  font-size: 1rem;
  background: #fafafa;
  transition: all 0.2s ease;
  color: #1a1a1a;
}

.form-input[b-pwyxsh4my2]::placeholder {
  color: #9ca3af;
}

.form-input:focus[b-pwyxsh4my2] {
  outline: none;
  border-color: var(--fs-primary);
  background: white;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.input-icon[b-pwyxsh4my2] {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
  z-index: 2;
}

.form-input:focus + .input-icon[b-pwyxsh4my2] {
  color: var(--fs-primary);
}

.password-toggle[b-pwyxsh4my2] {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  z-index: 2;
}

.password-toggle:hover[b-pwyxsh4my2] {
  color: #6b7280;
}

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

.checkbox-wrapper[b-pwyxsh4my2] {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 0.5rem;
}

.checkbox-input[b-pwyxsh4my2] {
  display: none;
}

.checkbox-custom[b-pwyxsh4my2] {
  width: 18px;
  height: 18px;
  border: 1.5px solid #d1d5db;
  border-radius: 4px;
  background: white;
  position: relative;
  transition: all 0.2s ease;
}

.checkbox-input:checked + .checkbox-custom[b-pwyxsh4my2] {
  background: var(--fs-primary);
  border-color: var(--fs-primary);
}

.checkbox-input:checked + .checkbox-custom[b-pwyxsh4my2]::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.checkbox-label[b-pwyxsh4my2] {
  font-size: 0.875rem;
  color: #6b7280;
  user-select: none;
}

.forgot-link[b-pwyxsh4my2] {
  font-size: 0.875rem;
  color: var(--fs-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.forgot-link:hover[b-pwyxsh4my2] {
  color: var(--fs-primary-hover);
  text-decoration: none;
}

/* Primary Button */
.btn-primary[b-pwyxsh4my2] {
  width: 100%;
  background: var(--fs-primary);
  border: none;
  border-radius: 12px;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
}

.btn-primary:hover:not(:disabled)[b-pwyxsh4my2] {
  background: var(--fs-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
}

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

.btn-primary:disabled[b-pwyxsh4my2] {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.btn-loading[b-pwyxsh4my2] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.spinner[b-pwyxsh4my2] {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin-b-pwyxsh4my2 1s linear infinite;
}

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

/* Auth Divider */
.auth-divider[b-pwyxsh4my2] {
  display: flex;
  align-items: center;
  margin: 2rem 0 1.5rem;
  text-align: center;
  color: #9ca3af;
  font-size: 0.875rem;
  font-weight: 500;
}

.auth-divider[b-pwyxsh4my2]::before,
.auth-divider[b-pwyxsh4my2]::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #e5e7eb 50%,
    transparent 100%
  );
}

.auth-divider span[b-pwyxsh4my2] {
  padding: 0 1rem;
  background: white;
  position: relative;
  z-index: 1;
}

/* Ghost Button */
.btn-ghost[b-pwyxsh4my2] {
  width: 100%;
  background: transparent;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  margin-bottom: 1rem;
}

.btn-ghost:hover[b-pwyxsh4my2] {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #374151;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.btn-ghost:active[b-pwyxsh4my2] {
  transform: translateY(0);
  background: #f3f4f6;
}

.btn-ghost svg[b-pwyxsh4my2] {
  transition: all 0.2s ease;
}

.btn-ghost:hover svg[b-pwyxsh4my2] {
  transform: scale(1.05);
  stroke: #374151;
}

/* Footer */
.auth-footer[b-pwyxsh4my2] {
  text-align: center;
  margin-top: 2rem;
}

.signup-prompt[b-pwyxsh4my2] {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

.signup-link[b-pwyxsh4my2] {
  color: var(--fs-primary);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.signup-link:hover[b-pwyxsh4my2] {
  color: var(--fs-primary-hover);
  text-decoration: none;
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
  .auth-card[b-pwyxsh4my2] {
    padding: 2rem 1.5rem;
    margin: 1rem;
    border-radius: 12px;
  }

  .auth-title[b-pwyxsh4my2] {
    font-size: 1.5rem;
  }

  .auth-nav[b-pwyxsh4my2] {
    gap: 1rem;
  }

  .auth-link[b-pwyxsh4my2] {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
  }

  .form-options[b-pwyxsh4my2] {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
}

@media (max-width: 320px) {
  .auth-card[b-pwyxsh4my2] {
    padding: 1.5rem 1rem;
  }

  .brand-text[b-pwyxsh4my2] {
    font-size: 1.25rem;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  *[b-pwyxsh4my2] {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible for better keyboard navigation */
.btn-primary:focus-visible[b-pwyxsh4my2],
.btn-ghost:focus-visible[b-pwyxsh4my2],
.forgot-link:focus-visible[b-pwyxsh4my2],
.signup-link:focus-visible[b-pwyxsh4my2],
.auth-link:focus-visible[b-pwyxsh4my2] {
  outline: 2px solid var(--fs-primary);
  outline-offset: 2px;
}
/* /Components/Pages/ResetPassword.razor.rz.scp.css */
.input-group-text[b-tc4spw4f0n] {
  background-color: transparent;
  border-right: none;
}
.input-group .form-control[b-tc4spw4f0n] {
  border-left: none;
}
.input-group .btn[b-tc4spw4f0n] {
  border-left: none;
}
.card[b-tc4spw4f0n] {
  border: none;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.card-title[b-tc4spw4f0n] {
  color: var(--fs-primary);
}
.btn-primary[b-tc4spw4f0n] {
  background-color: #007bff;
  border-color: #007bff;
}
.btn-primary:hover[b-tc4spw4f0n] {
  background-color: #0056b3;
  border-color: #0056b3;
}
/* /Components/Pages/SignUp.razor.rz.scp.css */
/* Modern Minimalist SignUp Design */
.signup-container[b-wjadusrl0v] {
  min-height: calc(100vh - 60px); /* Adjust for existing header */
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
  padding-top: 2rem;
}

/* Main Content */
.auth-main[b-wjadusrl0v] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
  padding: 2rem 1rem;
}

.auth-card[b-wjadusrl0v] {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.08);
  padding: 3rem;
  width: 100%;
  max-width: 420px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.auth-card-header[b-wjadusrl0v] {
  text-align: center;
  margin-bottom: 2.5rem;
}

.auth-title[b-wjadusrl0v] {
  font-size: 1.875rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.02em;
}

.auth-subtitle[b-wjadusrl0v] {
  font-size: 1rem;
  color: #6b7280;
  margin: 0;
  font-weight: 400;
}

/* Modern Alert Styles */
.alert-modern[b-wjadusrl0v] {
  padding: 1rem 1.25rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  border: none;
  font-weight: 500;
}

.alert-modern.alert-success[b-wjadusrl0v] {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #166534;
  border-left: 4px solid #22c55e;
}

.alert-modern.alert-danger[b-wjadusrl0v] {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  color: #dc2626;
  border-left: 4px solid #ef4444;
}

.alert-modern.alert-warning[b-wjadusrl0v] {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color: #d97706;
  border-left: 4px solid #f59e0b;
}

.alert-modern.alert-info[b-wjadusrl0v] {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #2563eb;
  border-left: 4px solid #3b82f6;
}

/* Form Styles */
.auth-form[b-wjadusrl0v] {
  margin-bottom: 2rem;
}

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

.form-label[b-wjadusrl0v] {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
}

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

.form-input[b-wjadusrl0v] {
  width: 100%;
  padding: 0.875rem 1rem;
  padding-left: 3rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  font-size: 1rem;
  background: #fafafa;
  transition: all 0.2s ease;
  color: #1a1a1a;
}

.form-input.password-with-generator[b-wjadusrl0v] {
  padding-right: 5.5rem; /* Extra space for both generator and toggle buttons */
}

.form-input[b-wjadusrl0v]::placeholder {
  color: #9ca3af;
}

.form-input:focus[b-wjadusrl0v] {
  outline: none;
  border-color: var(--fs-primary);
  background: white;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.input-icon[b-wjadusrl0v] {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-input:focus + .input-icon[b-wjadusrl0v] {
  color: var(--fs-primary);
}

/* Password Generator Button */
.password-generator[b-wjadusrl0v] {
  position: absolute;
  right: 3rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 0.375rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 2;
}

.password-generator:hover[b-wjadusrl0v] {
  color: var(--fs-primary);
  background: rgba(37, 99, 235, 0.1);
}

.password-generator:active[b-wjadusrl0v] {
  transform: translateY(-50%) scale(0.95);
}

/* Password Toggle Button */
.password-toggle[b-wjadusrl0v] {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  z-index: 2;
}

.password-toggle:hover[b-wjadusrl0v] {
  color: #6b7280;
}

/* Form Options */
.form-options[b-wjadusrl0v] {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.checkbox-wrapper[b-wjadusrl0v] {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  gap: 0.5rem;
  line-height: 1.5;
}

.checkbox-input[b-wjadusrl0v] {
  display: none;
}

.checkbox-custom[b-wjadusrl0v] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border: 1.5px solid #d1d5db;
  border-radius: 4px;
  background: white;
  position: relative;
  transition: all 0.2s ease;
  margin-top: 2px;
}

.checkbox-input:checked + .checkbox-custom[b-wjadusrl0v] {
  background: var(--fs-primary);
  border-color: var(--fs-primary);
}

.checkbox-input:checked + .checkbox-custom[b-wjadusrl0v]::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.checkbox-label[b-wjadusrl0v] {
  font-size: 0.875rem;
  color: #6b7280;
  user-select: none;
  line-height: 1.5;
}

.checkbox-label .signup-link[b-wjadusrl0v] {
  font-size: 0.875rem;
}

/* Primary Button */
.btn-primary[b-wjadusrl0v] {
  width: 100%;
  background: var(--fs-primary);
  border: none;
  border-radius: 12px;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
}

.btn-primary:hover:not(:disabled)[b-wjadusrl0v] {
  background: var(--fs-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
}

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

.btn-primary:disabled[b-wjadusrl0v] {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.btn-loading[b-wjadusrl0v] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.spinner[b-wjadusrl0v] {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin-b-wjadusrl0v 1s linear infinite;
}

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

/* Validation Summary */
.validation-summary[b-wjadusrl0v] {
  text-align: center;
  margin-top: 1rem;
}

/* Footer */
.auth-footer[b-wjadusrl0v] {
  text-align: center;
  margin-top: 2rem;
}

.signup-prompt[b-wjadusrl0v] {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

.signup-link[b-wjadusrl0v] {
  color: var(--fs-primary);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.signup-link:hover[b-wjadusrl0v] {
  color: var(--fs-primary-hover);
  text-decoration: none;
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
  .auth-card[b-wjadusrl0v] {
    padding: 2rem 1.5rem;
    margin: 1rem;
    border-radius: 12px;
  }

  .auth-title[b-wjadusrl0v] {
    font-size: 1.5rem;
  }

  .auth-subtitle[b-wjadusrl0v] {
    font-size: 0.875rem;
  }

  .form-input.password-with-generator[b-wjadusrl0v] {
    padding-right: 4.5rem; /* Reduced space for mobile */
  }

  .password-generator[b-wjadusrl0v] {
    right: 2.5rem;
    padding: 0.25rem;
  }

  .password-toggle[b-wjadusrl0v] {
    padding: 0.125rem;
  }
}

@media (max-width: 320px) {
  .auth-card[b-wjadusrl0v] {
    padding: 1.5rem 1rem;
  }

  .auth-title[b-wjadusrl0v] {
    font-size: 1.375rem;
  }

  .form-input[b-wjadusrl0v] {
    font-size: 0.9375rem;
  }

  .form-input.password-with-generator[b-wjadusrl0v] {
    padding-right: 4rem;
  }

  .password-generator[b-wjadusrl0v] {
    right: 2.25rem;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  *[b-wjadusrl0v] {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible for better keyboard navigation */
.btn-primary:focus-visible[b-wjadusrl0v],
.password-generator:focus-visible[b-wjadusrl0v],
.password-toggle:focus-visible[b-wjadusrl0v],
.signup-link:focus-visible[b-wjadusrl0v] {
  outline: 2px solid var(--fs-primary);
  outline-offset: 2px;
}

.form-input:focus-visible[b-wjadusrl0v] {
  outline: none; /* We use box-shadow instead for inputs */
}
/* /Components/PortionRevealMoment/PortionRevealMoment.razor.rz.scp.css */
/* PortionRevealMoment - The "Aha Moment" Component */

.portion-reveal-container[b-722e3d2588] {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafe 100%);
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.portion-reveal-container.revealed[b-722e3d2588] {
  opacity: 1;
  transform: translateY(0);
}

/* FALLBACK: If animation doesn't trigger after 2s, show content anyway */
/* This prevents blank page if JS fails or animation sequence has issues */
@keyframes fallback-reveal-b-722e3d2588 {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.portion-reveal-container:not(.loading):not(.revealed)[b-722e3d2588] {
  animation: fallback-reveal-b-722e3d2588 0.4s ease 2s forwards;
}

/* Header */
.reveal-header[b-722e3d2588] {
  text-align: center;
  margin-bottom: 2rem;
}

.reveal-title[b-722e3d2588] {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.perfect-match-badge[b-722e3d2588] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #27ae60 0%, #81c784 100%);
  border-radius: 50px;
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

.badge-text[b-722e3d2588] {
  font-size: 0.9rem;
}

/* Animated Checkmark */
.animated-checkmark[b-722e3d2588] {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkmark-svg[b-722e3d2588] {
  width: 100%;
  height: 100%;
}

.checkmark-circle[b-722e3d2588] {
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 2;
  animation: circle-fill-b-722e3d2588 0.6s ease-out forwards;
}

.checkmark-check[b-722e3d2588] {
  stroke: white;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: check-draw-b-722e3d2588 0.4s ease-out 0.4s forwards;
}

@keyframes circle-fill-b-722e3d2588 {
  0% {
    stroke-dasharray: 0, 157;
  }
  100% {
    stroke-dasharray: 157, 157;
  }
}

@keyframes check-draw-b-722e3d2588 {
  100% {
    stroke-dashoffset: 0;
  }
}

/* Portions List */
.portions-list[b-722e3d2588] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.portion-item[b-722e3d2588] {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
  opacity: 0;
  transform: translateX(-20px);
  animation: slide-in-b-722e3d2588 0.4s ease forwards;
}

.stagger-item[b-722e3d2588] {
  animation-fill-mode: both;
}

@keyframes slide-in-b-722e3d2588 {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Food Icons */
.portion-icon[b-722e3d2588] {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.portion-icon.icon-poultry[b-722e3d2588] {
  background: linear-gradient(135deg, #ffe0b2 0%, #ffcc80 100%);
}
.portion-icon.icon-poultry[b-722e3d2588]::before {
  content: "\1F357";
}

.portion-icon.icon-meat[b-722e3d2588] {
  background: linear-gradient(135deg, #ffcdd2 0%, #ef9a9a 100%);
}
.portion-icon.icon-meat[b-722e3d2588]::before {
  content: "\1F969";
}

.portion-icon.icon-fish[b-722e3d2588] {
  background: linear-gradient(135deg, #b3e5fc 0%, #81d4fa 100%);
}
.portion-icon.icon-fish[b-722e3d2588]::before {
  content: "\1F41F";
}

.portion-icon.icon-grain[b-722e3d2588] {
  background: linear-gradient(135deg, #fff9c4 0%, #fff59d 100%);
}
.portion-icon.icon-grain[b-722e3d2588]::before {
  content: "\1F35A";
}

.portion-icon.icon-egg[b-722e3d2588] {
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
}
.portion-icon.icon-egg[b-722e3d2588]::before {
  content: "\1F95A";
}

.portion-icon.icon-dairy[b-722e3d2588] {
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
}
.portion-icon.icon-dairy[b-722e3d2588]::before {
  content: "\1F95B";
}

.portion-icon.icon-vegetable[b-722e3d2588] {
  background: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 100%);
}
.portion-icon.icon-vegetable[b-722e3d2588]::before {
  content: "\1F966";
}

.portion-icon.icon-fruit[b-722e3d2588] {
  background: linear-gradient(135deg, #ffccbc 0%, #ffab91 100%);
}
.portion-icon.icon-fruit[b-722e3d2588]::before {
  content: "\1F34E";
}

.portion-icon.icon-nut[b-722e3d2588] {
  background: linear-gradient(135deg, #d7ccc8 0%, #bcaaa4 100%);
}
.portion-icon.icon-nut[b-722e3d2588]::before {
  content: "\1F95C";
}

.portion-icon.icon-default[b-722e3d2588] {
  background: linear-gradient(135deg, #e0e0e0 0%, #bdbdbd 100%);
}
.portion-icon.icon-default[b-722e3d2588]::before {
  content: "\1F37D\FE0F";
}

/* Portion Details */
.portion-details[b-722e3d2588] {
  flex: 1;
  min-width: 0;
}

.portion-name[b-722e3d2588] {
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a2e;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Portion Amount */
.portion-amount[b-722e3d2588] {
  text-align: right;
}

.amount-value[b-722e3d2588] {
  font-size: 1.1rem;
  font-weight: 700;
  color: #27ae60;
  background: rgba(39, 174, 96, 0.1);
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
}

/* Summary Section */
.reveal-summary[b-722e3d2588] {
  text-align: center;
  padding: 1.5rem;
  background: rgba(39, 174, 96, 0.05);
  border-radius: 16px;
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.reveal-summary.visible[b-722e3d2588] {
  opacity: 1;
  transform: translateY(0);
}

.macro-summary[b-722e3d2588] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.macro-item[b-722e3d2588] {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.macro-value[b-722e3d2588] {
  font-size: 1.1rem;
  font-weight: 700;
}

.macro-label[b-722e3d2588] {
  font-size: 0.8rem;
  color: #666;
}

.macro-item.calories .macro-value[b-722e3d2588] {
  color: #e53935;
}
.macro-item.protein .macro-value[b-722e3d2588] {
  color: #1e88e5;
}
.macro-item.carbs .macro-value[b-722e3d2588] {
  color: #8e24aa;
}
.macro-item.fat .macro-value[b-722e3d2588] {
  color: #43a047;
}

.macro-divider[b-722e3d2588] {
  color: #ccc;
  font-weight: 300;
}

.summary-message[b-722e3d2588] {
  font-size: 0.95rem;
  color: #27ae60;
  font-weight: 500;
  margin: 0;
}

/* Action Buttons */
.reveal-actions[b-722e3d2588] {
  display: flex;
  gap: 1rem;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.reveal-actions.visible[b-722e3d2588] {
  opacity: 1;
  transform: translateY(0);
}

.btn-see-options[b-722e3d2588] {
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border-radius: 12px;
  border: 2px solid #dee2e6;
  background: white;
  color: #495057;
  transition: all 0.2s ease;
}

.btn-see-options:hover[b-722e3d2588] {
  border-color: #27ae60;
  color: #27ae60;
  background: rgba(39, 174, 96, 0.05);
}

.btn-done[b-722e3d2588] {
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border-radius: 12px;
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  border: none;
  color: white;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
  transition: all 0.2s ease;
}

.btn-done:hover[b-722e3d2588] {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(39, 174, 96, 0.4);
}

/* Error/No Meal State */
.no-meal-state[b-722e3d2588] {
  text-align: center;
  padding: 3rem 2rem;
  color: #666;
}

.no-meal-state .error-icon[b-722e3d2588] {
  font-size: 3rem;
  color: #f0ad4e;
  margin-bottom: 1rem;
}

.no-meal-state .error-title[b-722e3d2588] {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.75rem;
}

.no-meal-state .error-message[b-722e3d2588] {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.no-meal-state .btn-primary[b-722e3d2588] {
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border-radius: 12px;
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  border: none;
  color: white;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
  transition: all 0.2s ease;
}

.no-meal-state .btn-primary:hover[b-722e3d2588] {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(39, 174, 96, 0.4);
}

/* Loading State */
.portion-reveal-container.loading[b-722e3d2588] {
  opacity: 1;
  transform: translateY(0);
}

.loading-state[b-722e3d2588] {
  text-align: center;
  padding: 3rem 2rem;
}

.loading-animation[b-722e3d2588] {
  margin-bottom: 1.5rem;
}

.food-icons-spinner[b-722e3d2588] {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.spinner-icon[b-722e3d2588] {
  font-size: 2.5rem;
  animation: bounce-rotate-b-722e3d2588 1.5s ease-in-out infinite;
}

.spinner-icon:nth-child(1)[b-722e3d2588] {
  animation-delay: 0s;
}
.spinner-icon:nth-child(2)[b-722e3d2588] {
  animation-delay: 0.2s;
}
.spinner-icon:nth-child(3)[b-722e3d2588] {
  animation-delay: 0.4s;
}

@keyframes bounce-rotate-b-722e3d2588 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) rotate(-10deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(-8px) rotate(10deg);
  }
}

.loading-title[b-722e3d2588] {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 0.5rem;
}

.loading-subtitle[b-722e3d2588] {
  font-size: 0.95rem;
  color: #666;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 576px) {
  .portion-reveal-container[b-722e3d2588] {
    margin: 1rem;
    padding: 1.5rem;
    border-radius: 20px;
  }

  .reveal-title[b-722e3d2588] {
    font-size: 1.5rem;
  }

  .portion-item[b-722e3d2588] {
    padding: 0.875rem 1rem;
  }

  .portion-icon[b-722e3d2588] {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }

  .portion-name[b-722e3d2588] {
    font-size: 0.9rem;
  }

  .amount-value[b-722e3d2588] {
    font-size: 1rem;
    padding: 0.3rem 0.6rem;
  }

  .reveal-actions[b-722e3d2588] {
    flex-direction: column;
  }

  .btn-see-options[b-722e3d2588],
  .btn-done[b-722e3d2588] {
    width: 100%;
  }

  .macro-summary[b-722e3d2588] {
    gap: 0.25rem;
  }

  .macro-value[b-722e3d2588] {
    font-size: 1rem;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .portion-reveal-container[b-722e3d2588],
  .portion-item[b-722e3d2588],
  .reveal-summary[b-722e3d2588],
  .reveal-actions[b-722e3d2588] {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .checkmark-circle[b-722e3d2588],
  .checkmark-check[b-722e3d2588] {
    animation: none;
    stroke-dashoffset: 0;
    stroke-dasharray: 157, 157;
  }
}
/* /Components/Shared/Comparison/ComparisonPageLayout.razor.rz.scp.css */
/* Comparison Page Layout Styles */

.comparison-page[b-p0dii8uo09] {
  --section-padding: 4rem 0;
  --container-max-width: 1200px;
  min-height: 100vh;
}

/* Section base styles */
[b-p0dii8uo09] section {
  padding: var(--section-padding);
}

[b-p0dii8uo09] .container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .comparison-page[b-p0dii8uo09] {
    --section-padding: 2.5rem 0;
  }

  [b-p0dii8uo09] .container {
    padding: 0 1rem;
  }
}

/* Utility classes for comparison pages */
[b-p0dii8uo09] .text-center {
  text-align: center;
}

[b-p0dii8uo09] .text-primary {
  color: var(--primary-color, #4f46e5);
}

[b-p0dii8uo09] .bg-light {
  background-color: var(--bg-light, #f9fafb);
}

[b-p0dii8uo09] .bg-primary {
  background-color: var(--primary-color, #4f46e5);
}

[b-p0dii8uo09] .text-white {
  color: #ffffff;
}

/* Animations */
[b-p0dii8uo09] .fade-in {
  animation: fadeIn-b-p0dii8uo09 0.5s ease-out;
}

@keyframes fadeIn-b-p0dii8uo09 {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* /Components/Shared/Mobile/AdaptiveForm.razor.rz.scp.css */
/* AdaptiveForm - Responsive Form Styles */

/* Base Form Styles */
.adaptive-form[b-67nd5xiqhu] {
  width: 100%;
}

.form-content[b-67nd5xiqhu] {
  margin-bottom: 1.5rem;
}

.form-actions[b-67nd5xiqhu] {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  align-items: center;
}

/* Desktop Mode - Multi-column Grid */
@media (min-width: 769px) {
  .adaptive-form.desktop-mode .form-content[b-67nd5xiqhu] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  /* Support 1-4 columns via CSS custom properties */
  .adaptive-form.desktop-mode[data-columns="1"] .form-content[b-67nd5xiqhu] {
    grid-template-columns: 1fr;
  }

  .adaptive-form.desktop-mode[data-columns="3"] .form-content[b-67nd5xiqhu] {
    grid-template-columns: repeat(3, 1fr);
  }

  .adaptive-form.desktop-mode[data-columns="4"] .form-content[b-67nd5xiqhu] {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Full-width form groups (for textareas, etc.) */
  .adaptive-form.desktop-mode[b-67nd5xiqhu] (.form-group-full) {
    grid-column: 1 / -1;
  }

  .adaptive-form.desktop-mode .form-actions[b-67nd5xiqhu] {
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
  }

  .adaptive-form.desktop-mode .form-actions button[b-67nd5xiqhu] {
    min-width: 120px;
  }
}

/* Mobile Mode - Single Column */
@media (max-width: 768px) {
  .adaptive-form.mobile-mode .form-content[b-67nd5xiqhu] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .adaptive-form.mobile-mode .form-actions[b-67nd5xiqhu] {
    flex-direction: column-reverse;
    gap: 0.75rem;
    margin-top: 1.5rem;
  }

  .adaptive-form.mobile-mode .form-actions button[b-67nd5xiqhu] {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    padding: 12px 24px;
  }

  /* iOS Zoom Prevention - All form inputs get 16px minimum */
  .adaptive-form.mobile-mode[b-67nd5xiqhu] (.form-control),
  .adaptive-form.mobile-mode[b-67nd5xiqhu] (.form-select),
  .adaptive-form.mobile-mode[b-67nd5xiqhu] (input),
  .adaptive-form.mobile-mode[b-67nd5xiqhu] (select),
  .adaptive-form.mobile-mode[b-67nd5xiqhu] (textarea) {
    font-size: 16px !important;
    min-height: 48px;
    padding: 12px 16px;
  }

  .adaptive-form.mobile-mode[b-67nd5xiqhu] (.form-label),
  .adaptive-form.mobile-mode[b-67nd5xiqhu] (label) {
    font-size: 14px;
    font-weight: 600;
    color: #424242;
    margin-bottom: 8px;
  }

  /* Larger checkboxes and radios for touch */
  .adaptive-form.mobile-mode[b-67nd5xiqhu] (.form-check-input) {
    width: 24px;
    height: 24px;
    margin-top: 0;
  }

  .adaptive-form.mobile-mode[b-67nd5xiqhu] (.form-check-label) {
    font-size: 16px;
    padding-left: 12px;
  }

  /* Input groups */
  .adaptive-form.mobile-mode[b-67nd5xiqhu] (.input-group) {
    flex-wrap: nowrap;
  }

  .adaptive-form.mobile-mode[b-67nd5xiqhu] (.input-group-text) {
    font-size: 16px;
    padding: 12px 16px;
    min-width: 60px;
  }
}

/* Form Group Styles (both modes) */
[b-67nd5xiqhu](.form-group) {
  display: flex;
  flex-direction: column;
}

[b-67nd5xiqhu](.form-label) {
  margin-bottom: 0.5rem;
}

[b-67nd5xiqhu](.form-control:focus),
[b-67nd5xiqhu](.form-select:focus) {
  outline: 2px solid #1976d2;
  outline-offset: 2px;
  border-color: #1976d2;
}

/* Validation Styles */
[b-67nd5xiqhu](.invalid-feedback) {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #d32f2f;
}

[b-67nd5xiqhu](.form-control.is-invalid),
[b-67nd5xiqhu](.form-select.is-invalid) {
  border-color: #d32f2f;
}

[b-67nd5xiqhu](.form-control.is-valid),
[b-67nd5xiqhu](.form-select.is-valid) {
  border-color: #388e3c;
}

/* Loading State */
.adaptive-form[b-67nd5xiqhu] (.spinner-border-sm) {
  width: 1rem;
  height: 1rem;
  border-width: 0.15rem;
}

/* Button States */
.form-actions button:disabled[b-67nd5xiqhu] {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-actions button:not(:disabled):hover[b-67nd5xiqhu] {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.form-actions button:not(:disabled):active[b-67nd5xiqhu] {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Accessibility: Focus Visible */
.form-actions button:focus-visible[b-67nd5xiqhu] {
  outline: 2px solid #1976d2;
  outline-offset: 2px;
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
  .adaptive-form.desktop-mode .form-actions[b-67nd5xiqhu] {
    border-color: #424242;
  }

  [b-67nd5xiqhu](.form-label),
  [b-67nd5xiqhu](label) {
    color: #e0e0e0;
  }

  [b-67nd5xiqhu](.form-control),
  [b-67nd5xiqhu](.form-select) {
    background-color: #2a2a2a;
    color: #ffffff;
    border-color: #424242;
  }

  [b-67nd5xiqhu](.form-control:focus),
  [b-67nd5xiqhu](.form-select:focus) {
    background-color: #2a2a2a;
    border-color: #1976d2;
  }

  [b-67nd5xiqhu](.invalid-feedback) {
    color: #ef5350;
  }
}

/* Responsive Breakpoints */
@media (max-width: 576px) {
  .form-content[b-67nd5xiqhu] {
    gap: 1rem !important;
  }

  .form-actions[b-67nd5xiqhu] {
    margin-top: 1rem;
  }
}

@media (min-width: 1200px) {
  .adaptive-form.desktop-mode .form-content[b-67nd5xiqhu] {
    gap: 2rem;
  }
}
/* /Components/Shared/Mobile/AdaptiveModal.razor.rz.scp.css */
/* AdaptiveModal - Responsive Modal Styles */

/* Desktop Modal Enhancements */
@media (min-width: 769px) {
  .modal-dialog[b-f08dit0uy3] {
    max-width: 600px;
    margin: 1.75rem auto;
  }

  .modal-content[b-f08dit0uy3] {
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }

  .modal-header[b-f08dit0uy3] {
    padding: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
  }

  .modal-title[b-f08dit0uy3] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #212121;
  }

  .btn-close[b-f08dit0uy3] {
    width: 32px;
    height: 32px;
    padding: 0;
  }

  .modal-body[b-f08dit0uy3] {
    padding: 1.5rem;
    max-height: 70vh;
    overflow-y: auto;
  }

  .modal-footer[b-f08dit0uy3] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e0e0e0;
    gap: 0.5rem;
  }
}

/* Mobile Optimizations (Modal transforms to Bottom Sheet) */
@media (max-width: 768px) {
  /* Mobile uses MobileBottomSheet component - no additional styles needed */
  /* Bottom sheet styles are defined in MobileBottomSheet.razor.css */
}

/* Modal Backdrop */
.modal-backdrop[b-f08dit0uy3] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1040;
}

.modal-backdrop.fade[b-f08dit0uy3] {
  opacity: 0;
}

.modal-backdrop.show[b-f08dit0uy3] {
  opacity: 1;
}

/* Modal Container */
.modal[b-f08dit0uy3] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  z-index: 1050;
}

.modal.fade .modal-dialog[b-f08dit0uy3] {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}

.modal.show .modal-dialog[b-f08dit0uy3] {
  transform: none;
}

/* Scrollable Modal Body */
.modal-body[b-f08dit0uy3] {
  position: relative;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}

.modal-body[b-f08dit0uy3]::-webkit-scrollbar {
  width: 6px;
}

.modal-body[b-f08dit0uy3]::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 3px;
}

.modal-body[b-f08dit0uy3]::-webkit-scrollbar-thumb {
  background: #bdbdbd;
  border-radius: 3px;
}

.modal-body[b-f08dit0uy3]::-webkit-scrollbar-thumb:hover {
  background: #9e9e9e;
}

/* Accessibility: Focus Styles */
.btn-close:focus[b-f08dit0uy3] {
  outline: 2px solid #1976d2;
  outline-offset: 2px;
}

.modal-footer .btn:focus[b-f08dit0uy3] {
  outline: 2px solid #1976d2;
  outline-offset: 2px;
}

/* Force Light Mode - App uses light theme consistently */
.modal-content[b-f08dit0uy3] {
  background-color: #ffffff !important;
  color: #212121 !important;
}

.modal-header[b-f08dit0uy3] {
  background-color: #ffffff !important;
}

.modal-title[b-f08dit0uy3] {
  color: #212121 !important;
}

.modal-body[b-f08dit0uy3] {
  background-color: #ffffff !important;
}

.modal-footer[b-f08dit0uy3] {
  background-color: #f8f9fa !important;
}

/* Close Button - Ensure visible on light background */
.btn-close[b-f08dit0uy3] {
  background-color: transparent !important;
  opacity: 0.5;
  filter: none;
}

.btn-close:hover[b-f08dit0uy3] {
  opacity: 0.8;
}
/* /Components/Shared/Mobile/AdaptiveTable.razor.rz.scp.css */
/* AdaptiveTable - Responsive Table/Card View Styles */

/* Base Container */
.adaptive-table[b-pj8aogpng8] {
  width: 100%;
}

/* Desktop Mode - Table View */
@media (min-width: 769px) {
  .adaptive-table.desktop-mode .desktop-table-wrapper[b-pj8aogpng8] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  }

  .adaptive-table.desktop-mode .table[b-pj8aogpng8] {
    margin-bottom: 0;
    background-color: white;
  }

  .adaptive-table.desktop-mode .table thead[b-pj8aogpng8] {
    background-color: #f5f5f5;
  }

  .adaptive-table.desktop-mode .table thead th[b-pj8aogpng8] {
    font-weight: 600;
    color: #424242;
    border-bottom: 2px solid #e0e0e0;
    padding: 1rem;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
  }

  .adaptive-table.desktop-mode .table tbody tr[b-pj8aogpng8] {
    transition: background-color 0.2s;
  }

  .adaptive-table.desktop-mode .table tbody tr:hover[b-pj8aogpng8] {
    background-color: #fafafa;
  }

  .adaptive-table.desktop-mode .table tbody td[b-pj8aogpng8] {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #e0e0e0;
  }

  /* Scrollbar Styling */
  .desktop-table-wrapper[b-pj8aogpng8]::-webkit-scrollbar {
    height: 8px;
  }

  .desktop-table-wrapper[b-pj8aogpng8]::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 4px;
  }

  .desktop-table-wrapper[b-pj8aogpng8]::-webkit-scrollbar-thumb {
    background: #bdbdbd;
    border-radius: 4px;
  }

  .desktop-table-wrapper[b-pj8aogpng8]::-webkit-scrollbar-thumb:hover {
    background: #9e9e9e;
  }
}

/* Mobile Mode - Card View */
@media (max-width: 768px) {
  .adaptive-table.mobile-mode .mobile-card-list[b-pj8aogpng8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
  }

  .mobile-table-card[b-pj8aogpng8] {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
    min-height: 72px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mobile-table-card:active[b-pj8aogpng8] {
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  }

  .mobile-table-card:focus[b-pj8aogpng8] {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
  }

  /* Card Content Rows */
  .mobile-table-card .card-row[b-pj8aogpng8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 16px;
    border-bottom: 1px solid #f0f0f0;
  }

  .mobile-table-card .card-row:last-child[b-pj8aogpng8] {
    border-bottom: none;
    padding-bottom: 0;
  }

  .mobile-table-card .card-row strong[b-pj8aogpng8] {
    color: #616161;
    font-weight: 600;
    min-width: 100px;
    flex-shrink: 0;
  }

  /* Default Card Content (fallback) */
  .default-card-content[b-pj8aogpng8] {
    font-size: 16px;
    color: #212121;
    line-height: 1.5;
  }

  .default-card-content tr[b-pj8aogpng8],
  .default-card-content tbody[b-pj8aogpng8],
  .default-card-content table[b-pj8aogpng8] {
    display: block;
  }

  .default-card-content td[b-pj8aogpng8] {
    display: block;
    padding: 6px 0;
    border: none;
  }

  .default-card-content td[b-pj8aogpng8]::before {
    content: attr(data-label);
    font-weight: 600;
    color: #616161;
    margin-right: 8px;
  }

  /* Empty State */
  .empty-state[b-pj8aogpng8] {
    text-align: center;
    padding: 48px 16px;
    color: #757575;
  }

  .empty-state p[b-pj8aogpng8] {
    margin: 0;
    font-size: 16px;
  }
}

/* Accessibility Improvements */
.mobile-table-card[role="button"][b-pj8aogpng8] {
  user-select: none;
}

/* Loading State (Optional) */
.adaptive-table.loading[b-pj8aogpng8] {
  opacity: 0.6;
  pointer-events: none;
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
  @media (min-width: 769px) {
    .adaptive-table.desktop-mode .table[b-pj8aogpng8] {
      background-color: #1e1e1e;
      color: #ffffff;
    }

    .adaptive-table.desktop-mode .table thead[b-pj8aogpng8] {
      background-color: #2a2a2a;
    }

    .adaptive-table.desktop-mode .table thead th[b-pj8aogpng8] {
      color: #e0e0e0;
      border-color: #424242;
    }

    .adaptive-table.desktop-mode .table tbody td[b-pj8aogpng8] {
      border-color: #424242;
    }

    .adaptive-table.desktop-mode .table tbody tr:hover[b-pj8aogpng8] {
      background-color: #2a2a2a;
    }
  }

  @media (max-width: 768px) {
    .mobile-table-card[b-pj8aogpng8] {
      background: #1e1e1e;
      color: #ffffff;
    }

    .mobile-table-card .card-row[b-pj8aogpng8] {
      border-color: #424242;
    }

    .mobile-table-card .card-row strong[b-pj8aogpng8] {
      color: #b0b0b0;
    }

    .default-card-content[b-pj8aogpng8] {
      color: #ffffff;
    }

    .empty-state[b-pj8aogpng8] {
      color: #b0b0b0;
    }
  }
}

/* Responsive Enhancements */
@media (max-width: 576px) {
  .mobile-table-card[b-pj8aogpng8] {
    padding: 12px;
    gap: 6px;
  }

  .mobile-table-card .card-row[b-pj8aogpng8] {
    font-size: 14px;
    padding: 6px 0;
  }

  .mobile-table-card .card-row strong[b-pj8aogpng8] {
    min-width: 80px;
    font-size: 14px;
  }
}
/* /Components/Shared/Mobile/MobileBottomNavigation.razor.rz.scp.css */
/* Mobile Bottom Navigation - Material Design 3 */
/* Safe area aware, 60fps animations, haptic feedback */

.mobile-bottom-nav[b-2ftv56q4kq] {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--md-sys-color-surface-container, #fff);
  border-top: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);

  /* Safe area insets for iOS notch/Dynamic Island */
  padding-bottom: env(safe-area-inset-bottom, 0);

  /* GPU acceleration for smooth animations */
  transform: translateZ(0);
  will-change: transform;
}

.nav-container[b-2ftv56q4kq] {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  height: 64px;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

/* Navigation Item */
.nav-item[b-2ftv56q4kq] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 12px 12px;
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;

  /* Touch target size (minimum 48x48) */
  min-width: 48px;
  min-height: 48px;

  /* Smooth transitions */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Prevent text selection on tap */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.nav-item-content[b-2ftv56q4kq] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 1;
}

/* Icon Container */
.icon-container[b-2ftv56q4kq] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-container i[b-2ftv56q4kq],
.icon-container svg[b-2ftv56q4kq] {
  width: 24px;
  height: 24px;
  color: var(--md-sys-color-on-surface-variant, #666);
  transition:
    color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-container svg[b-2ftv56q4kq] {
  fill: currentColor;
}

/* Label */
.label[b-2ftv56q4kq] {
  font-size: 12px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant, #666);
  transition:
    color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Badge */
.badge[b-2ftv56q4kq] {
  position: absolute;
  top: -4px;
  right: -8px;
  background: var(--md-sys-color-error, #f44336);
  color: var(--md-sys-color-on-error, #fff);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 10px;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  animation: badgePulse-b-2ftv56q4kq 2s ease-in-out infinite;
  z-index: 2;
}

/* Active State */
.nav-item.active .icon-container[b-2ftv56q4kq] {
  background: var(--md-sys-color-secondary-container, #e8f5e9);
}

.nav-item.active .icon-container i[b-2ftv56q4kq],
.nav-item.active .icon-container svg[b-2ftv56q4kq] {
  color: var(--md-sys-color-on-secondary-container, #1b5e20);
  transform: scale(1.1);
}

.nav-item.active .label[b-2ftv56q4kq] {
  color: var(--md-sys-color-on-surface, #000);
  font-weight: 600;
}

/* Active Indicator */
.active-indicator[b-2ftv56q4kq] {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  background: var(--md-sys-color-primary, #4caf50);
  border-radius: 0 0 3px 3px;
  animation: slideDown-b-2ftv56q4kq 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Touch/Hover States */
.nav-item:hover:not(.active) .icon-container[b-2ftv56q4kq] {
  background: var(--md-sys-color-surface-variant, #f5f5f5);
}

.nav-item:active[b-2ftv56q4kq] {
  transform: scale(0.95);
}

.nav-item:active .icon-container[b-2ftv56q4kq] {
  transform: scale(0.9);
}

/* Focus State (keyboard navigation) */
.nav-item:focus-visible[b-2ftv56q4kq] {
  outline: 2px solid var(--md-sys-color-primary, #4caf50);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Animations */
@keyframes slideDown-b-2ftv56q4kq {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes badgePulse-b-2ftv56q4kq {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Ripple Effect (Material Design) */
.nav-item[b-2ftv56q4kq]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  transform: translate(-50%, -50%);
  transition:
    width 0.3s,
    height 0.3s;
  pointer-events: none;
}

.nav-item:active[b-2ftv56q4kq]::before {
  width: 100px;
  height: 100px;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .mobile-bottom-nav[b-2ftv56q4kq] {
    background: var(--md-sys-color-surface-container, #1e1e1e);
    border-top-color: var(--md-sys-color-outline-variant, #3a3a3a);
  }

  .icon-container i[b-2ftv56q4kq],
  .icon-container svg[b-2ftv56q4kq] {
    color: var(--md-sys-color-on-surface-variant, #b0b0b0);
  }

  .label[b-2ftv56q4kq] {
    color: var(--md-sys-color-on-surface-variant, #b0b0b0);
  }

  .nav-item.active .icon-container[b-2ftv56q4kq] {
    background: var(--md-sys-color-secondary-container, #2d4a2f);
  }

  .nav-item.active .icon-container i[b-2ftv56q4kq],
  .nav-item.active .icon-container svg[b-2ftv56q4kq] {
    color: var(--md-sys-color-on-secondary-container, #a8d5aa);
  }

  .nav-item.active .label[b-2ftv56q4kq] {
    color: var(--md-sys-color-on-surface, #fff);
  }

  .nav-item:hover:not(.active) .icon-container[b-2ftv56q4kq] {
    background: var(--md-sys-color-surface-variant, #2a2a2a);
  }

  .nav-item[b-2ftv56q4kq]::before {
    background: rgba(255, 255, 255, 0.1);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-nav[b-2ftv56q4kq],
  .nav-item[b-2ftv56q4kq],
  .icon-container[b-2ftv56q4kq],
  .icon-container i[b-2ftv56q4kq],
  .icon-container svg[b-2ftv56q4kq],
  .label[b-2ftv56q4kq],
  .active-indicator[b-2ftv56q4kq] {
    animation: none;
    transition: none;
  }

  .badge[b-2ftv56q4kq] {
    animation: none;
  }
}

/* Landscape Orientation (Smaller height) */
@media (orientation: landscape) {
  .nav-container[b-2ftv56q4kq] {
    height: 56px;
  }

  .nav-item[b-2ftv56q4kq] {
    padding: 6px 12px 8px;
  }

  .label[b-2ftv56q4kq] {
    font-size: 11px;
  }
}

/* Small devices (< 360px) */
@media (max-width: 360px) {
  .label[b-2ftv56q4kq] {
    font-size: 11px;
  }

  .icon-container[b-2ftv56q4kq] {
    width: 28px;
    height: 28px;
  }

  .icon-container i[b-2ftv56q4kq],
  .icon-container svg[b-2ftv56q4kq] {
    width: 20px;
    height: 20px;
  }
}
/* /Components/Shared/Mobile/MobileCardView.razor.rz.scp.css */
/* Mobile Card View - Material Design 3 */
/* Generic card component with swipe gestures and virtual scrolling */

.mobile-card-view[b-r3yb2w62y3] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Card Item Wrapper */
.card-item-wrapper[b-r3yb2w62y3] {
  position: relative;
  background: var(--md-sys-color-surface, #fff);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;

  /* GPU acceleration */
  transform: translateZ(0);
  will-change: transform;

  /* Touch optimization */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.card-item-wrapper:active[b-r3yb2w62y3] {
  transform: scale(0.98);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Swipe indicator (shown during swipe) */
.card-item-wrapper.swiping[b-r3yb2w62y3] {
  transition: transform 0.1s linear;
}

.card-item-wrapper.swipe-action[b-r3yb2w62y3] {
  animation: swipeOut-b-r3yb2w62y3 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Default Card (when no template provided) */
.card-default[b-r3yb2w62y3] {
  padding: 16px;
  min-height: 80px;
  display: flex;
  align-items: center;
  color: var(--md-sys-color-on-surface, #000);
}

/* Loading Skeleton State */
.card-loading-state[b-r3yb2w62y3] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-skeleton[b-r3yb2w62y3] {
  background: var(--md-sys-color-surface, #fff);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  padding: 16px;
  gap: 12px;
}

.skeleton-image[b-r3yb2w62y3] {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    var(--md-sys-color-surface-variant, #f0f0f0) 25%,
    var(--md-sys-color-surface-container, #e8e8e8) 50%,
    var(--md-sys-color-surface-variant, #f0f0f0) 75%
  );
  background-size: 200% 100%;
  animation: shimmer-b-r3yb2w62y3 1.5s infinite;
}

.skeleton-content[b-r3yb2w62y3] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-line[b-r3yb2w62y3] {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--md-sys-color-surface-variant, #f0f0f0) 25%,
    var(--md-sys-color-surface-container, #e8e8e8) 50%,
    var(--md-sys-color-surface-variant, #f0f0f0) 75%
  );
  background-size: 200% 100%;
  animation: shimmer-b-r3yb2w62y3 1.5s infinite;
}

.skeleton-line-1[b-r3yb2w62y3] {
  width: 70%;
}

.skeleton-line-2[b-r3yb2w62y3] {
  width: 90%;
}

.skeleton-line-3[b-r3yb2w62y3] {
  width: 60%;
}

/* Empty State */
.card-empty-state[b-r3yb2w62y3] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 32px;
}

.empty-state-default[b-r3yb2w62y3] {
  text-align: center;
  color: var(--md-sys-color-on-surface-variant, #666);
}

.empty-icon[b-r3yb2w62y3] {
  font-size: 64px;
  margin-bottom: 16px;
}

.empty-state-default h3[b-r3yb2w62y3] {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--md-sys-color-on-surface, #000);
}

.empty-state-default p[b-r3yb2w62y3] {
  font-size: 14px;
  margin: 0;
  color: var(--md-sys-color-on-surface-variant, #666);
}

/* Animations */
@keyframes shimmer-b-r3yb2w62y3 {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes swipeOut-b-r3yb2w62y3 {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

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

.card-item-wrapper[b-r3yb2w62y3] {
  animation: slideInUp-b-r3yb2w62y3 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stagger animation for list items */
.card-item-wrapper:nth-child(1)[b-r3yb2w62y3] {
  animation-delay: 0ms;
}
.card-item-wrapper:nth-child(2)[b-r3yb2w62y3] {
  animation-delay: 50ms;
}
.card-item-wrapper:nth-child(3)[b-r3yb2w62y3] {
  animation-delay: 100ms;
}
.card-item-wrapper:nth-child(4)[b-r3yb2w62y3] {
  animation-delay: 150ms;
}
.card-item-wrapper:nth-child(5)[b-r3yb2w62y3] {
  animation-delay: 200ms;
}

/* Virtual Scrolling Container */
[b-r3yb2w62y3] .mobile-card-view > div[role="list"] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .card-item-wrapper[b-r3yb2w62y3] {
    background: var(--md-sys-color-surface, #1e1e1e);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  .card-item-wrapper:active[b-r3yb2w62y3] {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  }

  .card-default[b-r3yb2w62y3] {
    color: var(--md-sys-color-on-surface, #fff);
  }

  .card-skeleton[b-r3yb2w62y3] {
    background: var(--md-sys-color-surface, #1e1e1e);
  }

  .skeleton-image[b-r3yb2w62y3],
  .skeleton-line[b-r3yb2w62y3] {
    background: linear-gradient(
      90deg,
      var(--md-sys-color-surface-variant, #2a2a2a) 25%,
      var(--md-sys-color-surface-container, #333) 50%,
      var(--md-sys-color-surface-variant, #2a2a2a) 75%
    );
    background-size: 200% 100%;
  }

  .empty-state-default[b-r3yb2w62y3] {
    color: var(--md-sys-color-on-surface-variant, #b0b0b0);
  }

  .empty-state-default h3[b-r3yb2w62y3] {
    color: var(--md-sys-color-on-surface, #fff);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .card-item-wrapper[b-r3yb2w62y3],
  .skeleton-image[b-r3yb2w62y3],
  .skeleton-line[b-r3yb2w62y3] {
    animation: none;
    transition: none;
  }

  .card-item-wrapper:active[b-r3yb2w62y3] {
    transform: none;
  }
}

/* Small devices (< 360px) */
@media (max-width: 360px) {
  .mobile-card-view[b-r3yb2w62y3] {
    padding: 12px;
    gap: 10px;
  }

  .card-skeleton[b-r3yb2w62y3] {
    padding: 12px;
  }

  .skeleton-image[b-r3yb2w62y3] {
    width: 60px;
    height: 60px;
  }

  .empty-state-default[b-r3yb2w62y3] {
    padding: 24px;
  }

  .empty-icon[b-r3yb2w62y3] {
    font-size: 48px;
  }
}

/* Landscape Orientation */
@media (orientation: landscape) and (max-height: 500px) {
  .card-empty-state[b-r3yb2w62y3] {
    min-height: 200px;
    padding: 24px;
  }

  .empty-icon[b-r3yb2w62y3] {
    font-size: 48px;
    margin-bottom: 12px;
  }
}

/* Pull-to-refresh indicator */
.mobile-card-view.refreshing[b-r3yb2w62y3]::before {
  content: "";
  display: block;
  width: 100%;
  height: 40px;
  background: var(--md-sys-color-primary, #4caf50);
  opacity: 0.1;
  border-radius: 0 0 20px 20px;
  animation: pullDown-b-r3yb2w62y3 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pullDown-b-r3yb2w62y3 {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: 40px;
    opacity: 0.1;
  }
}
/* /Components/Shared/Mobile/MobileFilterSheet.razor.rz.scp.css */
/* Mobile Filter Sheet - Material Design 3 */
/* Specialized bottom sheet for filtering with sticky footer */

.filter-sheet-container[b-pzgmqzes4c] {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: calc(100vh - 120px);
}

.filter-content[b-pzgmqzes4c] {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  overscroll-behavior: contain;

  /* Smooth scrolling on iOS */
  -webkit-overflow-scrolling: touch;
}

/* Filter Footer (Sticky) */
.filter-footer[b-pzgmqzes4c] {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--md-sys-color-surface-container, #fff);
  border-top: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  z-index: 10;
}

.filter-footer-content[b-pzgmqzes4c] {
  display: flex;
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
}

/* Buttons */
.btn-clear[b-pzgmqzes4c],
.btn-apply[b-pzgmqzes4c] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  outline: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Touch target size */
  min-height: 48px;

  /* Prevent text selection */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-clear[b-pzgmqzes4c] {
  background: var(--md-sys-color-surface-variant, #f5f5f5);
  color: var(--md-sys-color-on-surface-variant, #666);
  border: 1px solid var(--md-sys-color-outline, #d0d0d0);
}

.btn-clear:hover[b-pzgmqzes4c] {
  background: var(--md-sys-color-surface-variant-hover, #ebebeb);
}

.btn-clear:active[b-pzgmqzes4c] {
  transform: scale(0.98);
  background: var(--md-sys-color-surface-variant-pressed, #e0e0e0);
}

.btn-apply[b-pzgmqzes4c] {
  background: var(--md-sys-color-primary, #4caf50);
  color: var(--md-sys-color-on-primary, #fff);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-apply:hover[b-pzgmqzes4c] {
  background: var(--md-sys-color-primary-hover, #45a049);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-apply:active[b-pzgmqzes4c] {
  transform: scale(0.98);
  background: var(--md-sys-color-primary-pressed, #3d8b40);
}

.btn-apply:disabled[b-pzgmqzes4c] {
  background: var(--md-sys-color-surface-variant, #e0e0e0);
  color: var(--md-sys-color-on-surface-variant, #999);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Button Icons & Text */
.btn-icon[b-pzgmqzes4c] {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.btn-text[b-pzgmqzes4c] {
  font-size: 14px;
  font-weight: 600;
}

/* Filter Count Badge */
.filter-count-badge[b-pzgmqzes4c] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.3);
  color: var(--md-sys-color-on-primary, #fff);
  font-size: 12px;
  font-weight: 700;
  border-radius: 10px;
}

/* Spacer when no clear button */
.btn-spacer[b-pzgmqzes4c] {
  flex: 1;
}

/* Focus States (Keyboard Navigation) */
.btn-clear:focus-visible[b-pzgmqzes4c],
.btn-apply:focus-visible[b-pzgmqzes4c] {
  outline: 2px solid var(--md-sys-color-primary, #4caf50);
  outline-offset: 2px;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .filter-footer[b-pzgmqzes4c] {
    background: var(--md-sys-color-surface-container, #1e1e1e);
    border-top-color: var(--md-sys-color-outline-variant, #3a3a3a);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
  }

  .btn-clear[b-pzgmqzes4c] {
    background: var(--md-sys-color-surface-variant, #2a2a2a);
    color: var(--md-sys-color-on-surface-variant, #b0b0b0);
    border-color: var(--md-sys-color-outline, #505050);
  }

  .btn-clear:hover[b-pzgmqzes4c] {
    background: var(--md-sys-color-surface-variant-hover, #333);
  }

  .btn-clear:active[b-pzgmqzes4c] {
    background: var(--md-sys-color-surface-variant-pressed, #383838);
  }

  .btn-apply[b-pzgmqzes4c] {
    background: var(--md-sys-color-primary, #66bb6a);
    color: var(--md-sys-color-on-primary, #000);
  }

  .btn-apply:hover[b-pzgmqzes4c] {
    background: var(--md-sys-color-primary-hover, #5bb65f);
  }

  .btn-apply:active[b-pzgmqzes4c] {
    background: var(--md-sys-color-primary-pressed, #4fa454);
  }

  .btn-apply:disabled[b-pzgmqzes4c] {
    background: var(--md-sys-color-surface-variant, #2a2a2a);
    color: var(--md-sys-color-on-surface-variant, #666);
  }

  .filter-count-badge[b-pzgmqzes4c] {
    background: rgba(0, 0, 0, 0.3);
    color: var(--md-sys-color-on-primary, #fff);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .btn-clear[b-pzgmqzes4c],
  .btn-apply[b-pzgmqzes4c] {
    transition: none;
  }
}

/* Small devices (< 360px) */
@media (max-width: 360px) {
  .filter-footer-content[b-pzgmqzes4c] {
    gap: 8px;
  }

  .btn-clear[b-pzgmqzes4c],
  .btn-apply[b-pzgmqzes4c] {
    padding: 12px 16px;
    font-size: 13px;
  }

  .btn-text[b-pzgmqzes4c] {
    font-size: 13px;
  }
}

/* Keyboard Visible State */
[b-pzgmqzes4c] .filter-sheet.keyboard-visible .filter-footer {
  /* Adjust footer position when keyboard is open */
  padding-bottom: calc(16px + var(--keyboard-height, 0px));
}

/* Loading State */
.filter-content.loading[b-pzgmqzes4c] {
  opacity: 0.6;
  pointer-events: none;
}

/* Empty State */
.filter-content:empty[b-pzgmqzes4c]::before {
  content: "No filters available";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--md-sys-color-on-surface-variant, #999);
  font-size: 14px;
}
/* /Components/Shared/MobileBottomSheet.razor.rz.scp.css */
/*
    Mobile Bottom Sheet Component - Scoped Styles
    Material Design 3 compliant styling with animations
    Features: GPU acceleration, dark mode, safe area insets, responsive design
*/

/* ========================================
   CSS Custom Properties (Theme Variables)
   ======================================== */

.mobile-bottom-sheet[b-m1nztuzuee] {
  /* Light mode colors */
  --sheet-bg: #ffffff;
  --sheet-text: #1f2937;
  --sheet-border: #e5e7eb;
  --backdrop-bg: rgba(0, 0, 0, 0.5);
  --handle-color: #d1d5db;
  --close-btn-hover: #f3f4f6;
  --shadow-color: rgba(0, 0, 0, 0.15);

  /* Animation timings */
  --open-duration: 350ms;
  --close-duration: 250ms;
  --open-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --close-easing: cubic-bezier(0.4, 0, 1, 1);

  /* Dimensions */
  --sheet-radius: 16px;
  --handle-width: 32px;
  --handle-height: 4px;
  --header-height: 56px;
  --footer-height: 72px;
  --min-touch-target: 44px;

  /* Safe area insets for iOS notch/Dynamic Island */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* Dark mode support - OVERRIDE: Force light theme for mobile sheets */
/* CRITICAL FIX: Mobile bottom sheets should ALWAYS use light backgrounds */
/* This prevents invisible text and ensures consistent UX on mobile devices */
@media (prefers-color-scheme: dark) {
  .mobile-bottom-sheet[b-m1nztuzuee] {
    --sheet-bg: #ffffff !important; /* Force white background */
    --sheet-text: #1f2937 !important; /* Force dark gray text */
    --sheet-border: #e5e7eb !important; /* Force light gray border */
    --backdrop-bg: rgba(0, 0, 0, 0.5); /* Keep backdrop semi-transparent */
    --handle-color: #d1d5db !important; /* Force light gray handle */
    --close-btn-hover: #f3f4f6 !important; /* Force very light gray hover */
    --shadow-color: rgba(
      0,
      0,
      0,
      0.15
    ); /* Lighter shadow for light background */
  }
}

/* ========================================
   Container & Layout
   ======================================== */

.mobile-bottom-sheet[b-m1nztuzuee] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
  pointer-events: none;
}

/* Show only when open or closing */
.mobile-bottom-sheet.open[b-m1nztuzuee],
.mobile-bottom-sheet.closing[b-m1nztuzuee] {
  display: block;
  pointer-events: auto;
}

/* CRITICAL: Parent container uses dvh so it shrinks when keyboard opens.
   This means bottom: 0 on child = top of keyboard automatically! */
@supports (height: 100dvh) {
  .mobile-bottom-sheet.open[b-m1nztuzuee],
  .mobile-bottom-sheet.closing[b-m1nztuzuee] {
    height: 100dvh;
  }
}

/* Hide on desktop - mobile only (≤768px) */
@media (min-width: 769px) {
  .mobile-bottom-sheet[b-m1nztuzuee] {
    display: none !important;
  }
}

/* ========================================
   Backdrop
   ======================================== */

.sheet-backdrop[b-m1nztuzuee] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--backdrop-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--open-duration) var(--open-easing);
}

.mobile-bottom-sheet.open .sheet-backdrop[b-m1nztuzuee] {
  opacity: 1;
}

.mobile-bottom-sheet.closing .sheet-backdrop[b-m1nztuzuee] {
  opacity: 0;
  transition: opacity var(--close-duration) var(--close-easing);
}

/* ========================================
   Sheet Container
   ======================================== */

.sheet-container[b-m1nztuzuee] {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 768px;
  margin: 0 auto;
  background: var(--sheet-bg);
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  box-shadow: 0 -4px 24px var(--shadow-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Default height - portrait orientation */
  /* FIXED: vh fallback FIRST, then dvh override (CSS takes last valid value) */
  height: 85vh; /* Fallback for older browsers */
  max-height: calc(100vh - var(--safe-top, 0px) - 16px); /* Fallback */

  /* GPU acceleration for smooth animations */
  transform: translateY(100%);
  will-change: transform;
  transition: transform var(--open-duration) var(--open-easing);

  /* CRITICAL: Prevent iOS double-tap zoom inside sheet */
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
}

/* Modern browsers that support dvh - this OVERRIDES the vh values */
@supports (height: 100dvh) {
  .sheet-container[b-m1nztuzuee] {
    /* Simple positioning - parent container already uses dvh,
           so bottom: 0 = top of keyboard automatically */
    bottom: 0;

    /* Use min() to handle both keyboard-open and keyboard-closed states:
           - 85dvh: Good height when keyboard is closed (leaves 15% gap)
           - 100dvh - 140px: Ensures header visible when keyboard open (140px = safe-area + app-header + margin) */
    height: min(85dvh, calc(100dvh - 140px));
    max-height: none;

    /* Smooth animation as keyboard opens/closes */
    transition: height 250ms ease-out;
  }
}

/* Landscape orientation - taller sheet */
@media (orientation: landscape) {
  .sheet-container[b-m1nztuzuee] {
    height: 90vh; /* Fallback first */
    max-height: calc(100vh - var(--safe-top, 0px) - 8px); /* Fallback */
  }
}

/* Landscape with dvh support */
@supports (height: 100dvh) {
  @media (orientation: landscape) {
    .sheet-container[b-m1nztuzuee] {
      bottom: 0;
      height: min(90dvh, calc(100dvh - 80px));
      max-height: none;
    }
  }
}

/* Opening animation - slide up with subtle bounce */
@keyframes slideUp-b-m1nztuzuee {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.mobile-bottom-sheet.open .sheet-container[b-m1nztuzuee] {
  transform: translateY(0);
  animation: slideUp-b-m1nztuzuee var(--open-duration) var(--open-easing);
}

/* Closing animation - slide down (faster, no bounce) */
@keyframes slideDown-b-m1nztuzuee {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

.mobile-bottom-sheet.closing .sheet-container[b-m1nztuzuee] {
  animation: slideDown-b-m1nztuzuee var(--close-duration) var(--close-easing);
}

/* Dragging state - disable transition for smooth tracking */
.mobile-bottom-sheet.dragging .sheet-container[b-m1nztuzuee] {
  transition: none;
}

/* ========================================
   Drag Handle
   ======================================== */

.sheet-drag-handle[b-m1nztuzuee] {
  width: 100%;
  padding: 14px 0 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.sheet-drag-handle:active[b-m1nztuzuee] {
  cursor: grabbing;
}

.drag-indicator[b-m1nztuzuee] {
  width: 40px;
  height: 5px;
  background: #cbd5e1;
  border-radius: 3px;
  transition: background-color 200ms ease;
}

.sheet-drag-handle:hover .drag-indicator[b-m1nztuzuee],
.sheet-drag-handle:active .drag-indicator[b-m1nztuzuee] {
  background: var(--sheet-text);
  opacity: 0.4;
}

/* ========================================
   Loading State (Improvement #2)
   ======================================== */

.sheet-loading-state[b-m1nztuzuee] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  gap: 16px;
}

.spinner[b-m1nztuzuee] {
  width: 40px;
  height: 40px;
  border: 3px solid var(--sheet-border);
  border-top-color: var(--sheet-text);
  border-radius: 50%;
  animation: spinner-rotate-b-m1nztuzuee 0.8s linear infinite;
}

@keyframes spinner-rotate-b-m1nztuzuee {
  to {
    transform: rotate(360deg);
  }
}

.loading-text[b-m1nztuzuee] {
  margin: 0;
  color: var(--sheet-text);
  opacity: 0.6;
  font-size: 14px;
}

.visually-hidden[b-m1nztuzuee] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   Header
   ======================================== */

.sheet-header[b-m1nztuzuee] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px 12px 20px;
  min-height: 48px;
  border-bottom: 1px solid var(--sheet-border);
  flex-shrink: 0;
}

.sheet-title[b-m1nztuzuee] {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--sheet-text);
  line-height: 1.3;
}

.sheet-close-btn[b-m1nztuzuee] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  background: #f1f5f9;
  border: none;
  border-radius: 50%;
  color: #64748b;
  cursor: pointer;
  transition: all 200ms ease;
  -webkit-tap-highlight-color: transparent;
}

.sheet-close-btn:hover[b-m1nztuzuee] {
  background: #e2e8f0;
  color: #475569;
}

.sheet-close-btn:active[b-m1nztuzuee] {
  background: #cbd5e1;
  transform: scale(0.95);
}

.sheet-close-btn:focus-visible[b-m1nztuzuee] {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

.sheet-close-btn svg[b-m1nztuzuee] {
  width: 18px;
  height: 18px;
}

/* ========================================
   Body (Scrollable Content)
   ======================================== */

.sheet-body[b-m1nztuzuee] {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
  padding-bottom: calc(20px + var(--safe-bottom));
}

/* Custom scrollbar for webkit browsers */
.sheet-body[b-m1nztuzuee]::-webkit-scrollbar {
  width: 6px;
}

.sheet-body[b-m1nztuzuee]::-webkit-scrollbar-track {
  background: transparent;
}

.sheet-body[b-m1nztuzuee]::-webkit-scrollbar-thumb {
  background: var(--handle-color);
  border-radius: 3px;
}

.sheet-body[b-m1nztuzuee]::-webkit-scrollbar-thumb:hover {
  background: var(--sheet-text);
  opacity: 0.4;
}

/* ========================================
   Footer (Optional)
   ======================================== */

.sheet-footer[b-m1nztuzuee] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  padding-bottom: calc(16px + var(--safe-bottom));
  border-top: 1px solid var(--sheet-border);
  flex-shrink: 0;
  min-height: var(--footer-height);
}

/* ========================================
   Child Content Overrides (::deep)
   ======================================== */

/* Ensure child inputs and selects are touch-friendly */
.mobile-bottom-sheet[b-m1nztuzuee]  input,
.mobile-bottom-sheet[b-m1nztuzuee]  select,
.mobile-bottom-sheet[b-m1nztuzuee]  textarea,
.mobile-bottom-sheet[b-m1nztuzuee]  button {
  min-height: var(--min-touch-target);
  font-size: 16px; /* Prevents iOS zoom on focus */
}

/* CRITICAL FIX: Ensure text visibility in mobile option buttons */
.mobile-bottom-sheet[b-m1nztuzuee]  .mobile-option-item {
  color: var(--sheet-text) !important;
}

.mobile-bottom-sheet[b-m1nztuzuee]  .mobile-option-item .option-text {
  color: inherit !important;
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.mobile-bottom-sheet[b-m1nztuzuee]  .mobile-option-item.selected {
  color: #4f46e5 !important;
}

/* Ensure TomSelect dropdown doesn't overflow */
.mobile-bottom-sheet[b-m1nztuzuee]  .ts-dropdown {
  max-height: 50vh;
  overflow-y: auto;
}

/* ========================================
   Keyboard Adjustments - Full Screen Takeover
   ======================================== */

/* When keyboard is open (detected via JS VisualViewport API),
   expand sheet to cover app header for MAXIMUM space.
   This is critical for showing enough options when typing. */
.sheet-container.keyboard-visible[b-m1nztuzuee] {
  /* Full-screen takeover - cover app header to maximize option space */
  height: calc(100dvh - 20px) !important;

  /* Smoother transition when keyboard opens */
  transition: height 200ms ease-out !important;
}

/* Fallback for browsers without dvh */
@supports not (height: 100dvh) {
  .sheet-container.keyboard-visible[b-m1nztuzuee] {
    height: calc(100vh - 20px) !important;
  }
}

/* Also hide drag handle when keyboard is open to save space */
.keyboard-visible .sheet-drag-handle[b-m1nztuzuee] {
  padding: 8px 0 4px 0;
}

.keyboard-visible .drag-indicator[b-m1nztuzuee] {
  width: 32px;
  height: 4px;
}

/* Compact header when keyboard is open */
.keyboard-visible .sheet-header[b-m1nztuzuee] {
  padding: 2px 16px 8px 16px;
  min-height: 40px;
}

.keyboard-visible .sheet-title[b-m1nztuzuee] {
  font-size: 15px;
}

.keyboard-visible .sheet-close-btn[b-m1nztuzuee] {
  width: 32px;
  height: 32px;
}

.keyboard-visible .sheet-close-btn svg[b-m1nztuzuee] {
  width: 16px;
  height: 16px;
}

/* Compact TomSelect mobile content when keyboard is open */
/* These styles maximize space for options when typing on mobile */
.keyboard-visible[b-m1nztuzuee]  .mobile-search-container {
  padding: 8px 12px;
}

.keyboard-visible[b-m1nztuzuee]  .mobile-search-input {
  padding: 8px 12px 8px 36px;
  font-size: 15px;
}

.keyboard-visible[b-m1nztuzuee]  .mobile-search-container .search-icon {
  left: 22px;
  width: 16px;
  height: 16px;
}

.keyboard-visible[b-m1nztuzuee]  .mobile-options-list {
  padding: 4px 8px;
  /* Extra bottom padding so last item isn't cut off by action buttons */
  padding-bottom: 8px;
}

.keyboard-visible[b-m1nztuzuee]  .mobile-option-item {
  padding: 8px 12px;
  font-size: 15px;
  min-height: 38px;
  margin-bottom: 1px;
}

.keyboard-visible[b-m1nztuzuee]  .mobile-actions {
  padding: 8px 12px;
  gap: 8px;
}

.keyboard-visible[b-m1nztuzuee]  .action-button {
  padding: 10px 16px;
  font-size: 14px;
  min-height: 40px;
}

/* ===== COLLAPSIBLE CHIPS SECTION ===== */
/* When keyboard opens, collapse chips to save vertical space for options */

.keyboard-visible[b-m1nztuzuee]  .mobile-selected-chips {
  min-height: 28px;
  max-height: 28px;
  padding: 4px 12px;
  gap: 6px;
  transition: all 200ms ease-out;
  overflow: hidden;
}

/* Hide individual chips when keyboard is open - show only count */
.keyboard-visible[b-m1nztuzuee]  .mobile-selected-chips .chips-container {
  display: none;
}

/* Transform label to be the main indicator */
.keyboard-visible[b-m1nztuzuee]  .mobile-selected-chips .chips-label {
  font-size: 13px;
  padding: 2px 10px;
  /* darker green so white label text clears AA (#10b981 was ~2.8:1; #047857 ≈5.5:1) */
  background: var(--fs-success-text);
  color: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Add expand hint arrow after the count */
.keyboard-visible[b-m1nztuzuee]  .mobile-selected-chips .chips-label::after {
  content: "selected • tap to edit";
  font-weight: 400;
  opacity: 0.9;
  margin-left: 4px;
}

/* ========================================
   Accessibility
   ======================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mobile-bottom-sheet[b-m1nztuzuee] {
    --sheet-border: currentColor;
  }

  .sheet-container[b-m1nztuzuee] {
    border: 2px solid currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-sheet[b-m1nztuzuee],
  .sheet-backdrop[b-m1nztuzuee],
  .sheet-container[b-m1nztuzuee],
  .drag-indicator[b-m1nztuzuee],
  .sheet-close-btn[b-m1nztuzuee] {
    animation: none !important;
    transition: none !important;
  }

  /* Instant show/hide without animation */
  .mobile-bottom-sheet.open .sheet-container[b-m1nztuzuee] {
    transform: translateY(0);
  }

  .mobile-bottom-sheet.closing .sheet-container[b-m1nztuzuee] {
    transform: translateY(100%);
  }
}

/* Focus visible styles for keyboard navigation */
.sheet-drag-handle:focus-visible[b-m1nztuzuee],
.sheet-body:focus-visible[b-m1nztuzuee] {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
  .mobile-bottom-sheet[b-m1nztuzuee] {
    display: none !important;
  }
}
/* /Components/Shared/MobileBottomSheetList.razor.rz.scp.css */
/* ==========================================================================
   Mobile Bottom Sheet List Component Styles
   Material Design 3 with Dark Mode Support
   ========================================================================== */

.mobile-bottom-sheet-list[b-874xsn7eru] {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--surface, #ffffff);
  color: var(--on-surface, #1c1b1f);
}

/* ==========================================================================
   Search Container
   ========================================================================== */

.search-container[b-874xsn7eru] {
  flex-shrink: 0;
  padding: 16px;
  background-color: var(--surface, #ffffff);
  border-bottom: 1px solid var(--outline-variant, #c4c6d0);
  position: sticky;
  top: 0;
  z-index: 10;
}

.search-input-wrapper[b-874xsn7eru] {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--surface-container-high, #ece6f0);
  border-radius: 28px;
  transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}

.search-input-wrapper:focus-within[b-874xsn7eru] {
  background-color: var(--surface-container-highest, #e6e0e9);
}

.search-icon[b-874xsn7eru] {
  position: absolute;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-surface-variant, #46464f);
  pointer-events: none;
}

.search-input[b-874xsn7eru] {
  flex: 1;
  width: 100%;
  height: 56px;
  padding: 16px 48px 16px 52px;
  border: none;
  background: transparent;
  font-size: 16px;
  font-family: inherit;
  color: var(--on-surface, #1c1b1f);
  outline: none;
}

.search-input[b-874xsn7eru]::placeholder {
  color: var(--on-surface-variant, #46464f);
  opacity: 1;
}

.search-input[b-874xsn7eru]::-webkit-search-cancel-button {
  display: none;
}

.clear-search-btn[b-874xsn7eru] {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--on-surface-variant, #46464f);
  cursor: pointer;
  transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}

.clear-search-btn:hover[b-874xsn7eru] {
  background-color: var(--surface-container-highest, #e6e0e9);
}

.clear-search-btn:active[b-874xsn7eru] {
  background-color: var(--surface-container, #f3edf7);
}

/* ==========================================================================
   Results Count
   ========================================================================== */

.results-count[b-874xsn7eru] {
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--on-surface-variant, #46464f);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   List Container
   ========================================================================== */

.list-container[b-874xsn7eru] {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ==========================================================================
   List Items
   ========================================================================== */

.list-item[b-874xsn7eru] {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 8px 16px;
  gap: 16px;
  background-color: var(--surface, #ffffff);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}

.list-item:hover[b-874xsn7eru] {
  background-color: var(--surface-container-high, #ece6f0);
}

.list-item:active[b-874xsn7eru] {
  background-color: var(--surface-container-highest, #e6e0e9);
}

.list-item:focus[b-874xsn7eru] {
  outline: 2px solid var(--primary, #6750a4);
  outline-offset: -2px;
}

.list-item.selected[b-874xsn7eru] {
  background-color: var(--secondary-container, #e8def8);
}

.list-item.selected:hover[b-874xsn7eru] {
  background-color: var(--secondary-container, #e8def8);
  opacity: 0.9;
}

/* Touch-friendly minimum target size */
@media (pointer: coarse) {
  .list-item[b-874xsn7eru] {
    min-height: 60px;
  }
}

/* ==========================================================================
   Checkbox
   ========================================================================== */

.checkbox-wrapper[b-874xsn7eru] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.list-item-checkbox[b-874xsn7eru] {
  position: absolute;
  width: 24px;
  height: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.checkbox-checkmark[b-874xsn7eru] {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid var(--on-surface-variant, #46464f);
  border-radius: 4px;
  background-color: transparent;
  transition: all 200ms cubic-bezier(0.2, 0, 0, 1);
  pointer-events: none;
}

.list-item-checkbox:checked + .checkbox-checkmark[b-874xsn7eru] {
  background-color: var(--primary, #6750a4);
  border-color: var(--primary, #6750a4);
}

.list-item-checkbox:checked + .checkbox-checkmark[b-874xsn7eru]::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 10px;
  border: solid var(--on-primary, #ffffff);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.list-item-checkbox:focus + .checkbox-checkmark[b-874xsn7eru] {
  outline: 2px solid var(--primary, #6750a4);
  outline-offset: 2px;
}

/* ==========================================================================
   List Item Content
   ========================================================================== */

.list-item-content[b-874xsn7eru] {
  flex: 1;
  min-width: 0;
}

.list-item-text[b-874xsn7eru] {
  display: block;
  font-size: 16px;
  line-height: 24px;
  color: var(--on-surface, #1c1b1f);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-item-text[b-874xsn7eru]  mark.search-highlight {
  background-color: var(--tertiary-container, #ffd8e4);
  color: var(--on-tertiary-container, #31111d);
  font-weight: 600;
  border-radius: 2px;
  padding: 0 2px;
}

/* ==========================================================================
   Selected Indicator
   ========================================================================== */

.selected-indicator[b-874xsn7eru] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--primary, #6750a4);
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.loading-state[b-874xsn7eru] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 16px;
}

.loading-spinner[b-874xsn7eru] {
  width: 40px;
  height: 40px;
  border: 4px solid var(--surface-container-highest, #e6e0e9);
  border-top-color: var(--primary, #6750a4);
  border-radius: 50%;
  animation: spin-b-874xsn7eru 1s linear infinite;
}

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

.loading-text[b-874xsn7eru] {
  font-size: 14px;
  color: var(--on-surface-variant, #46464f);
}

/* ==========================================================================
   No Results State
   ========================================================================== */

.no-results-state[b-874xsn7eru] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.no-results-icon[b-874xsn7eru] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
  border-radius: 50%;
  background-color: var(--surface-container-high, #ece6f0);
  color: var(--on-surface-variant, #46464f);
}

.no-results-title[b-874xsn7eru] {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 500;
  color: var(--on-surface, #1c1b1f);
}

.no-results-message[b-874xsn7eru] {
  margin: 0 0 24px 0;
  font-size: 14px;
  color: var(--on-surface-variant, #46464f);
}

.no-results-action[b-874xsn7eru] {
  padding: 10px 24px;
  border: none;
  border-radius: 20px;
  background-color: var(--primary-container, #eaddff);
  color: var(--on-primary-container, #21005e);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}

.no-results-action:hover[b-874xsn7eru] {
  background-color: var(--primary-container, #eaddff);
  opacity: 0.9;
}

.no-results-action:active[b-874xsn7eru] {
  background-color: var(--primary-container, #eaddff);
  opacity: 0.8;
}

/* ==========================================================================
   Placeholder
   ========================================================================== */

.list-item-placeholder[b-874xsn7eru] {
  height: 56px;
  margin: 0 16px;
  background-color: var(--surface-container-high, #ece6f0);
  border-radius: 8px;
  overflow: hidden;
}

.placeholder-shimmer[b-874xsn7eru] {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--surface-container-highest, #e6e0e9) 50%,
    transparent 100%
  );
  animation: shimmer-b-874xsn7eru 1.5s infinite;
}

@keyframes shimmer-b-874xsn7eru {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ==========================================================================
   Selection Summary
   ========================================================================== */

.selection-summary[b-874xsn7eru] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: var(--surface-container-low, #f7f2fa);
  border-top: 1px solid var(--outline-variant, #c4c6d0);
}

.selection-count[b-874xsn7eru] {
  font-size: 14px;
  font-weight: 500;
  color: var(--on-surface, #1c1b1f);
}

.clear-selection-btn[b-874xsn7eru] {
  padding: 8px 16px;
  border: none;
  border-radius: 16px;
  background-color: transparent;
  color: var(--primary, #6750a4);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}

.clear-selection-btn:hover[b-874xsn7eru] {
  background-color: var(--surface-container-high, #ece6f0);
}

.clear-selection-btn:active[b-874xsn7eru] {
  background-color: var(--surface-container-highest, #e6e0e9);
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  .mobile-bottom-sheet-list[b-874xsn7eru] {
    --surface: #1c1b1f;
    --on-surface: #e6e1e5;
    --surface-container-high: #2b2930;
    --surface-container-highest: #36343b;
    --surface-container: #211f26;
    --surface-container-low: #1c1b1f;
    --on-surface-variant: #cac4d0;
    --outline-variant: #49454f;
    --primary: #d0bcff;
    --on-primary: #381e72;
    --primary-container: #4f378b;
    --on-primary-container: #eaddff;
    --secondary-container: #4a4458;
    --tertiary-container: #633b48;
    --on-tertiary-container: #ffd8e4;
  }

  .list-item-text[b-874xsn7eru]  mark.search-highlight {
    background-color: var(--tertiary-container, #633b48);
    color: var(--on-tertiary-container, #ffd8e4);
  }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *[b-874xsn7eru] {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .list-item:focus[b-874xsn7eru] {
    outline-width: 3px;
  }

  .checkbox-checkmark[b-874xsn7eru] {
    border-width: 3px;
  }
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 480px) {
  .search-container[b-874xsn7eru] {
    padding: 12px;
  }

  .list-item[b-874xsn7eru] {
    padding: 12px 16px;
  }

  .list-item-text[b-874xsn7eru] {
    font-size: 15px;
  }

  .no-results-state[b-874xsn7eru] {
    padding: 32px 16px;
  }
}

/* Safe area insets for notched devices */
@supports (padding: env(safe-area-inset-bottom)) {
  .selection-summary[b-874xsn7eru] {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}
/* /Components/Shared/ModalComponent.razor.rz.scp.css */
.modal-dialog-centered[b-kbd0ofdeoa] {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}
/* /Components/Shared/ReconnectionModal.razor.rz.scp.css */
/* ============================================
   Reconnection Modal - Delightful UX Design
   Transform connection issues into positive experiences
   ============================================ */

/* Container and Overlay */
.reconnection-modal-container[b-0gqya0cj8t] {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  animation: fadeIn-b-0gqya0cj8t 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.reconnection-modal-container.active[b-0gqya0cj8t] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.reconnection-overlay[b-0gqya0cj8t] {
  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-0gqya0cj8t] {
  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-0gqya0cj8t 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

/* Connection Visual Animation */
.connection-visual[b-0gqya0cj8t] {
  position: relative;
  height: 160px;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.connection-hub[b-0gqya0cj8t] {
  position: relative;
  width: 80px;
  height: 80px;
}

.hub-core[b-0gqya0cj8t] {
  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-0gqya0cj8t 2s ease-in-out infinite;
  z-index: 3;
}

.hub-core svg[b-0gqya0cj8t] {
  width: 36px;
  height: 36px;
  color: white;
  animation: iconFloat-b-0gqya0cj8t 3s ease-in-out infinite;
}

/* Pulse Rings */
.pulse-ring[b-0gqya0cj8t] {
  position: absolute;
  inset: -20px;
  border: 2px solid;
  border-radius: 50%;
  opacity: 0;
  animation: pulseRing-b-0gqya0cj8t 3s ease-out infinite;
}

.pulse-ring-1[b-0gqya0cj8t] {
  border-color: rgba(37, 99, 235, 0.3);
  animation-delay: 0s;
}

.pulse-ring-2[b-0gqya0cj8t] {
  border-color: rgba(59, 130, 246, 0.2);
  animation-delay: 1s;
}

.pulse-ring-3[b-0gqya0cj8t] {
  border-color: rgba(96, 165, 250, 0.1);
  animation-delay: 2s;
}

/* Orbiting Connection Points */
.connection-point[b-0gqya0cj8t] {
  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-0gqya0cj8t 8s ease-in-out infinite;
}

.point-1[b-0gqya0cj8t] {
  top: 10px;
  left: -60px;
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  animation-delay: 0s;
}

.point-2[b-0gqya0cj8t] {
  top: 10px;
  right: -60px;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  animation-delay: 2.67s;
}

.point-3[b-0gqya0cj8t] {
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  animation-delay: 5.33s;
}

.point-icon svg[b-0gqya0cj8t] {
  width: 24px;
  height: 24px;
  opacity: 0.7;
}

.point-1 .point-icon svg[b-0gqya0cj8t] {
  color: #dc2626;
}
.point-2 .point-icon svg[b-0gqya0cj8t] {
  color: #2563eb;
}
.point-3 .point-icon svg[b-0gqya0cj8t] {
  color: #10b981;
}

/* Progress Indicator */
.reconnection-progress[b-0gqya0cj8t] {
  margin-bottom: 2rem;
}

.progress-track[b-0gqya0cj8t] {
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.progress-fill[b-0gqya0cj8t] {
  height: 100%;
  background: linear-gradient(90deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
  border-radius: 2px;
  width: 0%;
  animation: progressFill-b-0gqya0cj8t 3s ease-in-out infinite;
}

.progress-dots[b-0gqya0cj8t] {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.progress-dot[b-0gqya0cj8t] {
  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-0gqya0cj8t] {
  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-0gqya0cj8t] {
  text-align: center;
  margin-bottom: 1.5rem;
}

.reconnection-title[b-0gqya0cj8t] {
  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-0gqya0cj8t] {
  font-size: 1.25rem;
  animation: sparkle-b-0gqya0cj8t 2s ease-in-out infinite;
}

.reconnection-subtitle[b-0gqya0cj8t] {
  font-size: 0.9375rem;
  color: #6b7280;
  margin: 0 0 1rem;
  font-weight: 400;
}

/* Message Carousel */
.message-carousel[b-0gqya0cj8t] {
  position: relative;
  height: 32px;
  overflow: hidden;
}

.carousel-message[b-0gqya0cj8t] {
  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-0gqya0cj8t] {
  opacity: 1;
  transform: translateY(0);
}

/* Status Information */
.reconnection-status[b-0gqya0cj8t] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.status-item[b-0gqya0cj8t] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.status-label[b-0gqya0cj8t] {
  font-size: 0.8125rem;
  color: #9ca3af;
  font-weight: 500;
}

.status-value[b-0gqya0cj8t] {
  font-size: 0.875rem;
  color: #1f2937;
  font-weight: 600;
}

.status-timer[b-0gqya0cj8t] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #2563eb;
}

.timer-icon[b-0gqya0cj8t] {
  animation: tick-b-0gqya0cj8t 1s steps(1) infinite;
}

/* Action Buttons */
.reconnection-actions[b-0gqya0cj8t] {
  display: flex;
  gap: 0.75rem;
}

.btn-reconnect-primary[b-0gqya0cj8t] {
  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-0gqya0cj8t] {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.25);
}

.btn-reconnect-primary:active[b-0gqya0cj8t] {
  transform: translateY(0);
}

.btn-icon[b-0gqya0cj8t] {
  animation: rotate-b-0gqya0cj8t 2s linear infinite;
  font-size: 1.125rem;
}

.btn-reconnect-secondary[b-0gqya0cj8t] {
  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-0gqya0cj8t] {
  background: #f9fafb;
  border-color: #d1d5db;
}

/* Decorative Elements */
.decorative-elements[b-0gqya0cj8t] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 24px;
}

.floating-orb[b-0gqya0cj8t] {
  position: absolute;
  border-radius: 50%;
  opacity: 0.08;
}

.orb-1[b-0gqya0cj8t] {
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, #2563eb 0%, transparent 70%);
  top: -40px;
  right: -40px;
  animation: floatOrb1-b-0gqya0cj8t 15s ease-in-out infinite;
}

.orb-2[b-0gqya0cj8t] {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #f59e0b 0%, transparent 70%);
  bottom: -20px;
  left: -20px;
  animation: floatOrb2-b-0gqya0cj8t 20s ease-in-out infinite;
}

.orb-3[b-0gqya0cj8t] {
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, #10b981 0%, transparent 70%);
  top: 50%;
  right: -30px;
  animation: floatOrb3-b-0gqya0cj8t 18s ease-in-out infinite;
}

.floating-line[b-0gqya0cj8t] {
  position: absolute;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(37, 99, 235, 0.1),
    transparent
  );
  height: 1px;
}

.line-1[b-0gqya0cj8t] {
  width: 200px;
  top: 30%;
  left: -50px;
  animation: slideLine1-b-0gqya0cj8t 10s ease-in-out infinite;
}

.line-2[b-0gqya0cj8t] {
  width: 150px;
  bottom: 25%;
  right: -50px;
  animation: slideLine2-b-0gqya0cj8t 12s ease-in-out infinite;
}

/* Animations */
@keyframes fadeIn-b-0gqya0cj8t {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@keyframes hubPulse-b-0gqya0cj8t {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes iconFloat-b-0gqya0cj8t {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes pulseRing-b-0gqya0cj8t {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes orbitFloat-b-0gqya0cj8t {
  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-0gqya0cj8t {
  0% {
    width: 0%;
  }
  50% {
    width: 65%;
  }
  100% {
    width: 30%;
  }
}

@keyframes sparkle-b-0gqya0cj8t {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

@keyframes rotate-b-0gqya0cj8t {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes tick-b-0gqya0cj8t {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0.5;
  }
}

@keyframes floatOrb1-b-0gqya0cj8t {
  0%,
  100% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(-30px, 20px);
  }
  66% {
    transform: translate(20px, -10px);
  }
}

@keyframes floatOrb2-b-0gqya0cj8t {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(40px, -30px);
  }
}

@keyframes floatOrb3-b-0gqya0cj8t {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-20px, 15px);
  }
  75% {
    transform: translate(15px, -25px);
  }
}

@keyframes slideLine1-b-0gqya0cj8t {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0;
  }
  50% {
    transform: translateX(100px);
    opacity: 1;
  }
}

@keyframes slideLine2-b-0gqya0cj8t {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0;
  }
  50% {
    transform: translateX(-80px);
    opacity: 1;
  }
}

/* Mobile Responsive */
@media (max-width: 576px) {
  .reconnection-content[b-0gqya0cj8t] {
    padding: 2rem 1.5rem;
    width: 95%;
    border-radius: 20px;
  }

  .connection-visual[b-0gqya0cj8t] {
    height: 120px;
    margin-bottom: 1.5rem;
  }

  .connection-hub[b-0gqya0cj8t] {
    width: 64px;
    height: 64px;
  }

  .hub-core svg[b-0gqya0cj8t] {
    width: 28px;
    height: 28px;
  }

  .connection-point[b-0gqya0cj8t] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .point-1[b-0gqya0cj8t] {
    left: -40px;
  }
  .point-2[b-0gqya0cj8t] {
    right: -40px;
  }

  .point-icon svg[b-0gqya0cj8t] {
    width: 20px;
    height: 20px;
  }

  .reconnection-title[b-0gqya0cj8t] {
    font-size: 1.125rem;
  }

  .reconnection-subtitle[b-0gqya0cj8t] {
    font-size: 0.875rem;
  }

  .reconnection-actions[b-0gqya0cj8t] {
    flex-direction: column;
  }

  .floating-orb[b-0gqya0cj8t],
  .floating-line[b-0gqya0cj8t] {
    display: none; /* Hide decorative elements on mobile for performance */
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .reconnection-content[b-0gqya0cj8t] {
    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-0gqya0cj8t] {
    color: #f3f4f6;
  }

  .reconnection-subtitle[b-0gqya0cj8t] {
    color: #9ca3af;
  }

  .connection-point[b-0gqya0cj8t] {
    background: #374151;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .status-item[b-0gqya0cj8t] {
    background: #374151;
  }

  .status-label[b-0gqya0cj8t] {
    color: #9ca3af;
  }

  .status-value[b-0gqya0cj8t] {
    color: #f3f4f6;
  }

  .btn-reconnect-secondary[b-0gqya0cj8t] {
    background: #374151;
    color: #d1d5db;
    border-color: #4b5563;
  }

  .btn-reconnect-secondary:hover[b-0gqya0cj8t] {
    background: #4b5563;
    border-color: #6b7280;
  }

  .progress-track[b-0gqya0cj8t] {
    background: #374151;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *[b-0gqya0cj8t] {
    animation: none !important;
    transition: opacity 0.3s ease !important;
  }
}
/* /Components/Shared/ServingAmountInput.razor.rz.scp.css */
.serving-amount-input[b-pts3w9b1wt] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.amount-input[b-pts3w9b1wt] {
  max-width: 100px;
}

.grams-display[b-pts3w9b1wt] {
  font-size: 0.85rem;
  color: var(--mud-palette-text-secondary);
  white-space: nowrap;
}
/* /Components/Shared/TomSelectDropdown.razor.rz.scp.css */
/* TomSelect Modern Minimalist Design */
/* Matches the polished design of the application with clean, professional styling */

:root[b-pomttcjnb0] {
  --ts-primary: #2563eb; /* brand blue (was indigo #4f46e5) */
  --ts-primary-hover: #1d4ed8;
  --ts-primary-light: #dbeafe;
  --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: #dbeafe;
  --ts-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ts-shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --ts-shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --ts-radius: 10px;
  --ts-radius-sm: 6px;
  --ts-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tom-select-container[b-pomttcjnb0] {
  width: 100%;
  position: relative;
  z-index: 100; /* Ensure container can stack dropdown above other elements */
}

.tom-select-wrapper[b-pomttcjnb0] {
  width: 100%;
}

/* Loading State */
.tom-select-loading[b-pomttcjnb0] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius);
  min-height: 48px;
}

.loading-spinner[b-pomttcjnb0] {
  width: 20px;
  height: 20px;
  border: 2px solid var(--ts-border);
  border-top-color: var(--ts-primary);
  border-radius: 50%;
  animation: spin-b-pomttcjnb0 600ms linear infinite;
}

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

/* Error State */
.tom-select-error[b-pomttcjnb0] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #fef2f2;
  border: 1px solid #fee2e2;
  border-radius: var(--ts-radius);
  color: #991b1b;
  font-size: 14px;
}

.error-icon[b-pomttcjnb0] {
  font-size: 18px;
  color: #dc2626;
}

.retry-button[b-pomttcjnb0] {
  margin-left: auto;
  padding: 6px 12px;
  background: #dc2626;
  color: white;
  border: none;
  border-radius: var(--ts-radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--ts-transition);
}

.retry-button:hover[b-pomttcjnb0] {
  background: #b91c1c;
}

/* Label Styling */
.tom-select-label[b-pomttcjnb0] {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ts-text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.tom-select-label.required[b-pomttcjnb0] {
  display: flex;
  align-items: center;
  gap: 4px;
}

.required-indicator[b-pomttcjnb0] {
  color: #ef4444;
  font-size: 14px;
}

/* Base TomSelect Styling */
.tom-select[b-pomttcjnb0] {
  width: 100%;
}

/* Control (Search Input) */
.tom-select .ts-control[b-pomttcjnb0] {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius);
  padding: 10px 16px;
  min-height: 48px;
  font-size: 16px;
  color: var(--ts-text-primary);
  transition: var(--ts-transition);
  box-shadow: var(--ts-shadow-sm);
  cursor: text;
}

.tom-select .ts-control:hover[b-pomttcjnb0] {
  border-color: var(--ts-text-secondary);
  box-shadow: var(--ts-shadow-md);
}

.tom-select.focus .ts-control[b-pomttcjnb0],
.tom-select .ts-control:focus[b-pomttcjnb0] {
  border-color: var(--ts-primary);
  outline: none;
  box-shadow:
    0 0 0 3px var(--ts-primary-light),
    var(--ts-shadow-md);
  background: var(--ts-surface);
}

/* Input inside control */
.tom-select .ts-control input[b-pomttcjnb0] {
  font-size: 16px !important;
  color: var(--ts-text-primary);
  font-family: inherit;
}

.tom-select .ts-control input[b-pomttcjnb0]::placeholder {
  color: var(--ts-text-placeholder);
  opacity: 1;
}

/* Items (selected values) */
.tom-select .ts-control .item[b-pomttcjnb0] {
  background: var(--ts-primary);
  color: white;
  border: none;
  border-radius: var(--ts-radius-sm);
  padding: 4px 10px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 4px 2px 0;
  transition: var(--ts-transition);
}

.tom-select .ts-control .item:hover[b-pomttcjnb0] {
  background: var(--ts-primary-hover);
}

/* Dropdown Container */
.tom-select .ts-dropdown[b-pomttcjnb0] {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius);
  box-shadow: var(--ts-shadow-lg);
  margin-top: 4px;
  padding: 8px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 9999 !important; /* CRITICAL FIX: Increase z-index to overlay properly */
  position: absolute !important; /* Ensure dropdown overlays content */
  animation: fadeInSlide-b-pomttcjnb0 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Dropdown scrollbar styling */
.tom-select .ts-dropdown[b-pomttcjnb0]::-webkit-scrollbar {
  width: 8px;
}

.tom-select .ts-dropdown[b-pomttcjnb0]::-webkit-scrollbar-track {
  background: transparent;
}

.tom-select .ts-dropdown[b-pomttcjnb0]::-webkit-scrollbar-thumb {
  background: var(--ts-border);
  border-radius: 4px;
}

.tom-select .ts-dropdown[b-pomttcjnb0]::-webkit-scrollbar-thumb:hover {
  background: var(--ts-text-secondary);
}

/* Options */
.tom-select .ts-dropdown .option[b-pomttcjnb0] {
  padding: 12px 16px;
  border-radius: var(--ts-radius-sm);
  cursor: pointer;
  color: var(--ts-text-primary);
  font-size: 15px;
  transition: var(--ts-transition);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

.tom-select .ts-dropdown .option:hover[b-pomttcjnb0] {
  background: var(--ts-hover);
  color: var(--ts-text-primary);
}

.tom-select .ts-dropdown .option.active[b-pomttcjnb0] {
  background: var(--ts-focus);
  color: var(--ts-primary);
  font-weight: 500;
}

.tom-select .ts-dropdown .option.selected[b-pomttcjnb0] {
  background: var(--ts-primary-light);
  color: var(--ts-primary);
  font-weight: 500;
}

.tom-select .ts-dropdown .option.selected[b-pomttcjnb0]::after {
  content: "✓";
  margin-left: auto;
  font-weight: 600;
  color: var(--ts-primary);
}

/* Option groups */
.tom-select .ts-dropdown .optgroup-header[b-pomttcjnb0] {
  padding: 8px 16px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ts-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 8px;
}

.tom-select .ts-dropdown .optgroup-header:first-child[b-pomttcjnb0] {
  margin-top: 0;
}

.tom-select .ts-dropdown .optgroup .option[b-pomttcjnb0] {
  padding-left: 28px;
}

/* Create option */
.tom-select .ts-dropdown .create[b-pomttcjnb0] {
  padding: 12px 16px;
  border-radius: var(--ts-radius-sm);
  color: var(--ts-primary);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--ts-transition);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tom-select .ts-dropdown .create[b-pomttcjnb0]::before {
  content: "+";
  font-size: 18px;
  font-weight: 600;
}

.tom-select .ts-dropdown .create:hover[b-pomttcjnb0] {
  background: var(--ts-focus);
}

/* No results */
.tom-select .ts-dropdown .no-results[b-pomttcjnb0] {
  padding: 12px 16px;
  color: var(--ts-text-secondary);
  font-size: 15px;
  text-align: center;
}

/* Plugin: Remove Button */
.tom-select .ts-control .item .remove[b-pomttcjnb0] {
  border: none;
  background: transparent;
  color: white;
  font-size: 18px;
  padding: 0;
  margin-left: 4px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 150ms;
  line-height: 1;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tom-select .ts-control .item .remove:hover[b-pomttcjnb0] {
  opacity: 1;
}

/* Plugin: Clear Button */
.tom-select .ts-control .clear-button[b-pomttcjnb0] {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--ts-text-secondary);
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  opacity: 0.6;
  transition: var(--ts-transition);
}

.tom-select .ts-control .clear-button:hover[b-pomttcjnb0] {
  opacity: 1;
  background: var(--ts-text-primary);
}

/* Plugin: Dropdown Header */
.tom-select .ts-dropdown .dropdown-header[b-pomttcjnb0] {
  padding: 8px 16px;
  border-bottom: 1px solid var(--ts-border);
  margin: -8px -8px 8px;
  background: var(--ts-background);
  border-radius: var(--ts-radius) var(--ts-radius) 0 0;
  font-size: 13px;
  color: var(--ts-text-secondary);
  font-weight: 500;
}

/* Disabled State */
.tom-select.disabled .ts-control[b-pomttcjnb0],
.tom-select .ts-control[disabled][b-pomttcjnb0] {
  background: var(--ts-background);
  color: var(--ts-text-secondary);
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}

.tom-select.disabled .ts-control:hover[b-pomttcjnb0] {
  border-color: var(--ts-border);
  box-shadow: none;
}

/* Helper Text */
.tom-select-helper-text[b-pomttcjnb0] {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ts-text-secondary);
  line-height: 1.4;
}

/* Validation Message */
.tom-select-validation-message[b-pomttcjnb0] {
  margin-top: 6px;
  font-size: 13px;
  color: #dc2626;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tom-select-validation-message[b-pomttcjnb0]::before {
  content: "⚠";
  font-size: 14px;
}

/* Screen reader only */
.sr-only[b-pomttcjnb0] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ===== MOBILE MODE STYLES ===== */

/* Pulse animation for search chip - triggered by JS after scroll completes */
@keyframes search-pulse-b-pomttcjnb0 {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 0 12px rgba(37, 99, 235, 0.25);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
}

/* Class added by JS after scroll completes to trigger pulse */
.search-chip-trigger.search-chip-pulse[b-pomttcjnb0] {
  animation: search-pulse-b-pomttcjnb0 800ms ease-out;
}

/* Search Chip Trigger - Mobile food search with clear affordance */
.search-chip-trigger[b-pomttcjnb0] {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Clinic: neutral search field (was a lavender gradient that clashed with the theme) —
     calm white with a neutral border; the blue focus ring is the only colour event. */
  background: #ffffff;
  border: 1.5px solid var(--fs-border-default, #e5e7eb);
  border-radius: 14px;
  padding: 14px 18px;
  min-height: 52px; /* Touch target - exceeds 44px minimum */
  font-size: 16px; /* Prevents iOS zoom */
  cursor: pointer;
  transition: all 200ms ease;
  /* Animation triggered by JS after scroll completes - see .search-chip-pulse class */
  text-align: left;
  font-family: inherit;
}

.search-chip-trigger:hover:not(:disabled)[b-pomttcjnb0] {
  border-color: var(--fs-border-hover, #d1d5db);
}

.search-chip-trigger:focus[b-pomttcjnb0] {
  outline: none;
  border-color: var(--fs-primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.search-chip-trigger:active:not(:disabled)[b-pomttcjnb0] {
  transform: scale(0.98);
}

.search-chip-trigger:disabled[b-pomttcjnb0] {
  background: var(--ts-background);
  border-color: var(--ts-border);
  cursor: not-allowed;
  opacity: 0.6;
  animation: none;
}

/* Search icon in white badge */
.search-chip-trigger .chip-icon-wrapper[b-pomttcjnb0] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #ffffff;
  border-radius: 8px;
  color: var(--ts-primary); /* brand blue (was hardcoded indigo #4f46e5) */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.search-chip-trigger .chip-text[b-pomttcjnb0] {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1e40af; /* Dark brand blue for readability (was indigo #3730a3) */
  font-weight: 500;
}

/* Legacy support - keep old class for backwards compatibility */
.mobile-trigger-button[b-pomttcjnb0] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius);
  padding: 12px 16px;
  min-height: 44px;
  font-size: 16px;
  color: var(--ts-text-primary);
  cursor: pointer;
  transition: var(--ts-transition);
  box-shadow: var(--ts-shadow-sm);
  text-align: left;
  font-family: inherit;
}

.mobile-trigger-button:hover:not(:disabled)[b-pomttcjnb0] {
  border-color: var(--ts-text-secondary);
  box-shadow: var(--ts-shadow-md);
  background: var(--ts-hover);
}

.mobile-trigger-button:focus[b-pomttcjnb0] {
  outline: none;
  border-color: var(--ts-primary);
  box-shadow:
    0 0 0 3px var(--ts-primary-light),
    var(--ts-shadow-md);
}

.mobile-trigger-button:active:not(:disabled)[b-pomttcjnb0] {
  transform: scale(0.98);
}

.mobile-trigger-button:disabled[b-pomttcjnb0] {
  background: var(--ts-background);
  color: var(--ts-text-secondary);
  cursor: not-allowed;
  opacity: 0.6;
}

.mobile-trigger-button .trigger-text[b-pomttcjnb0] {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ts-text-primary);
}

.mobile-trigger-button .trigger-icon[b-pomttcjnb0] {
  flex-shrink: 0;
  margin-left: 8px;
  color: var(--ts-text-secondary);
  transition: transform 150ms;
}

.mobile-trigger-button[aria-expanded="true"] .trigger-icon[b-pomttcjnb0] {
  transform: rotate(180deg);
}

/* Mobile Selection List Container */
/* CRITICAL FIX: Container should NOT scroll - only the options list inside scrolls.
   This ensures search input and action buttons are always visible. */
.mobile-selection-list[b-pomttcjnb0] {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden; /* Container doesn't scroll - options list does */
  min-height: 200px;
  /* CRITICAL: Prevent iOS auto-zoom on interactions */
  touch-action: pan-y;
  -webkit-text-size-adjust: 100%; /* Prevent text resizing */
  /* FIX: Counteract .sheet-body padding so the selection list goes edge-to-edge.
     The sheet-body has padding: 20px (bottom includes safe-area), but the food
     selection list needs full-width layout for proper centering and dimensions. */
  margin: -20px;
  margin-bottom: calc(-20px - env(safe-area-inset-bottom, 0px));
}

/* Mobile Search Container - Fixed at top, doesn't shrink */
.mobile-search-container[b-pomttcjnb0] {
  position: relative;
  flex-shrink: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ts-border);
  background: var(--ts-surface);
}

.mobile-search-input[b-pomttcjnb0] {
  width: 100%;
  padding: 10px 16px 10px 52px;
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius-sm);
  font-size: 16px; /* Prevents iOS zoom */
  color: var(--ts-text-primary);
  background: var(--ts-background);
  transition: var(--ts-transition);
}

.mobile-search-input:focus[b-pomttcjnb0] {
  outline: none;
  border-color: var(--ts-primary);
  box-shadow: 0 0 0 2px var(--ts-primary-light);
  background: var(--ts-surface);
}

.mobile-search-input[b-pomttcjnb0]::placeholder {
  color: var(--ts-text-placeholder);
}

.mobile-search-container .search-icon[b-pomttcjnb0] {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ts-text-secondary);
  pointer-events: none;
}

/* Mobile Options List - This is the ONLY scrollable element */
/* The options list fills remaining space and scrolls independently */
.mobile-options-list[b-pomttcjnb0] {
  flex: 1;
  min-height: 0; /* CRITICAL for flex item scrolling */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  -webkit-overflow-scrolling: touch;
  /* Prevent iOS zoom on double-tap */
  touch-action: pan-y;
}

.mobile-options-list[b-pomttcjnb0]::-webkit-scrollbar {
  width: 6px;
}

.mobile-options-list[b-pomttcjnb0]::-webkit-scrollbar-track {
  background: transparent;
}

.mobile-options-list[b-pomttcjnb0]::-webkit-scrollbar-thumb {
  background: var(--ts-border);
  border-radius: 3px;
}

/* Mobile Option Item */
.mobile-option-item[b-pomttcjnb0] {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: var(--ts-radius-sm);
  background: transparent;
  color: var(--ts-text-primary);
  font-size: 16px; /* Prevents iOS zoom */
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: var(--ts-transition);
  margin-bottom: 4px;
  min-height: 44px; /* Touch target minimum */
  /* FIX: Prevent iOS auto-zoom on tap */
  touch-action: pan-x pan-y;
  -webkit-tap-highlight-color: rgba(37, 99, 235, 0.1);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.mobile-option-item:hover[b-pomttcjnb0] {
  background: var(--ts-hover);
}

.mobile-option-item:active[b-pomttcjnb0] {
  transform: scale(0.98);
  background: var(--ts-focus);
}

.mobile-option-item.selected[b-pomttcjnb0] {
  background: var(--ts-primary-light);
  border-color: var(--ts-primary);
  color: var(--ts-primary);
  font-weight: 500;
}

.mobile-option-item .option-text[b-pomttcjnb0] {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit; /* CRITICAL FIX: Inherit text color from parent button */
}

/* Checkbox Indicator (for multiple selection) */
.checkbox-indicator[b-pomttcjnb0] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 12px;
  border: 2px solid var(--ts-border);
  border-radius: 4px;
  background: var(--ts-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--ts-transition);
}

.checkbox-indicator.checked[b-pomttcjnb0] {
  background: var(--ts-primary);
  border-color: var(--ts-primary);
}

.mobile-option-item:hover .checkbox-indicator[b-pomttcjnb0] {
  border-color: var(--ts-text-secondary);
}

.mobile-option-item.selected .checkbox-indicator[b-pomttcjnb0] {
  border-color: var(--ts-primary);
}

/* Selected Icon (for single selection) */
.selected-icon[b-pomttcjnb0] {
  flex-shrink: 0;
  margin-left: 12px;
  color: var(--ts-primary);
}

/* ===== SELECTED CHIPS SECTION - HORIZONTAL SCROLL ===== */
/* Inspired by Gmail recipients, SAP Fiori Filter Feedback Bar, Wise Design Chips */

/* Selected Chips Container - Compact horizontal row */
/* Collapses to compact badge when keyboard opens (see MobileBottomSheet.razor.css) */
.mobile-selected-chips[b-pomttcjnb0] {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: linear-gradient(to right, #f0fdf4, #ecfdf5);
  border-bottom: 1px solid var(--fs-success-light);
  flex-shrink: 0;
  /* min-height is a floor; no max-height so a taller (34px) chip can't re-clip. */
  min-height: 44px;
  /* Smooth collapse/expand transition */
  transition: all 200ms ease-out;
  /* Prevent iOS auto-zoom */
  touch-action: pan-x pan-y;
}

.mobile-selected-chips .chips-label[b-pomttcjnb0] {
  font-size: 13px; /* Keep small for visual hierarchy */
  font-weight: 600;
  /* AA-safe success-text green (~5:1 on the light-green bar; #059669 was ~3.6:1, failed). */
  color: var(--fs-success-text);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  padding-right: 4px;
  /* Smooth transition for keyboard collapse state */
  transition: all 200ms ease-out;
}

/* Horizontal scrolling chips container */
.mobile-selected-chips .chips-container[b-pomttcjnb0] {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  min-width: 0; /* Allow shrinking */
  padding: 2px 0;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  -webkit-overflow-scrolling: touch; /* Smooth iOS scroll */
  /* Right-edge fade hints that more chips exist when the row overflows.
     Horizontal gradient only — every column stays fully opaque top-to-bottom,
     so it never clips descenders or the × icon. */
  -webkit-mask-image: linear-gradient(
    to right,
    #000 calc(100% - 24px),
    transparent
  );
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}

.mobile-selected-chips .chips-container[b-pomttcjnb0]::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Individual Chip - Compact version. Native <button> (Enter/Space activation, tab
   order, no Space-scroll for free) — reset UA button chrome so it matches the design. */
.selected-chip[b-pomttcjnb0] {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit; /* buttons don't inherit font-family by default */
  margin: 0;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #ffffff;
  border: 1px solid #6ee7b7; /* one-off light mint border; no semantic token */
  border-radius: 14px;
  font-size: 14px; /* Increased slightly - visual only, not focusable input */
  font-weight: 500;
  color: var(--fs-success-text);
  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: 34px; /* Comfortable mobile tap target (whole chip removes on tap) */
  line-height: 1;
  /* CRITICAL: Prevent iOS auto-zoom on tap */
  touch-action: pan-x pan-y;
  -webkit-tap-highlight-color: transparent;
}

.selected-chip:hover[b-pomttcjnb0] {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}

.selected-chip:hover .chip-remove-icon[b-pomttcjnb0] {
  color: #dc2626;
  background: #fee2e2; /* puck tracks the destructive red hover (was a green puck in a red chip) */
}

.selected-chip:active[b-pomttcjnb0] {
  transform: scale(0.95);
}

/* Keyboard focus ring only (mouse focus stays clean) — the chip is now a real button. */
.selected-chip:focus[b-pomttcjnb0] {
  outline: none;
}

.selected-chip:focus-visible[b-pomttcjnb0] {
  outline: 2px solid var(--fs-success-text);
  outline-offset: 2px;
}

.selected-chip .chip-text[b-pomttcjnb0] {
  max-width: 100px; /* Slightly shorter for horizontal layout */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* The chip sets line-height:1; inherited here it makes the line box exactly 1em,
     so overflow:hidden (needed for the ellipsis) shears glyph descenders (g/y/p).
     line-height:normal grows the line box to the font's glyph extent (≈16.8px),
     well within the 34px chip's 22px content area — descenders no longer clip. */
  line-height: normal;
}

.selected-chip .chip-remove-icon[b-pomttcjnb0] {
  flex-shrink: 0;
  /* Standing "remove" affordance — a soft green puck so touch users (no hover) see
     the chip is removable. Darker glyph (var(--fs-success-text)) is AA-safe on the puck. */
  color: var(--fs-success-text);
  background: #ecfdf5; /* one-off light puck tint; no semantic token */
  padding: 2px;
  border-radius: 50%;
  box-sizing: content-box; /* keep the 16px glyph; padding grows the puck to ~20px */
  transition:
    color 120ms ease,
    background 120ms ease;
  width: 16px;
  height: 16px;
}

/* Chip Appearance Animation - Faster for horizontal flow */
@keyframes chip-pop-in-b-pomttcjnb0 {
  0% {
    opacity: 0;
    transform: scale(0.7) translateX(-10px);
  }
  60% {
    transform: scale(1.05) translateX(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}

.selected-chip.chip-animate-in[b-pomttcjnb0] {
  animation: chip-pop-in-b-pomttcjnb0 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== SELECTION FLASH ANIMATION ===== */

/* Success flash animation for selected items */
@keyframes selection-flash-b-pomttcjnb0 {
  0% {
    background: var(--ts-primary-light);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  25% {
    background: #dcfce7;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.3);
  }
  50% {
    background: #bbf7d0;
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.15);
  }
  100% {
    background: var(--ts-primary-light);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.mobile-option-item.selection-flash[b-pomttcjnb0] {
  animation: selection-flash-b-pomttcjnb0 500ms ease-out;
}

/* Checkbox checkmark animation */
@keyframes checkmark-pop-b-pomttcjnb0 {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.mobile-option-item.selection-flash .checkbox-indicator.checked[b-pomttcjnb0] {
  animation: checkmark-pop-b-pomttcjnb0 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Mobile Actions (footer buttons) - Fixed at bottom, doesn't shrink */
.mobile-actions[b-pomttcjnb0] {
  display: flex;
  flex-shrink: 0;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid var(--ts-border);
  background: var(--ts-surface);
}

.action-button[b-pomttcjnb0] {
  flex: 1;
  padding: 12px 24px;
  border: none;
  border-radius: var(--ts-radius-sm);
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: var(--ts-transition);
  min-height: 44px; /* Touch target minimum */
}

.action-button.primary[b-pomttcjnb0] {
  background: var(--ts-primary);
  color: white;
}

.action-button.primary:hover[b-pomttcjnb0] {
  background: var(--ts-primary-hover);
}

.action-button.primary:active[b-pomttcjnb0] {
  transform: scale(0.98);
}

.action-button.secondary[b-pomttcjnb0] {
  background: transparent;
  color: var(--ts-text-secondary);
  border: 1px solid var(--ts-border);
}

.action-button.secondary:hover[b-pomttcjnb0] {
  background: var(--ts-hover);
  border-color: var(--ts-text-secondary);
}

.action-button.secondary:active[b-pomttcjnb0] {
  transform: scale(0.98);
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
  .tom-select .ts-control[b-pomttcjnb0] {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom */
  }

  .tom-select .ts-dropdown[b-pomttcjnb0] {
    max-height: 240px;
  }

  .tom-select .ts-dropdown .option[b-pomttcjnb0] {
    padding: 14px 16px;
    font-size: 16px;
  }

  .tom-select-label[b-pomttcjnb0] {
    font-size: 15px;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  :root[b-pomttcjnb0] {
    --ts-primary: #3b82f6; /* brand blue (dark mode), was indigo #2563eb */
    --ts-primary-hover: #60a5fa;
    --ts-primary-light: #1e40af; /* deep blue for contrast on dark backgrounds (was indigo #3730a3) */
    --ts-background: #0f172a;
    --ts-surface: #1e293b;
    --ts-text-primary: #f1f5f9;
    --ts-text-secondary: #94a3b8;
    --ts-text-placeholder: #64748b;
    --ts-border: #334155;
    --ts-hover: #334155;
    --ts-focus: #1e3a8a;
  }

  .tom-select-error[b-pomttcjnb0] {
    background: #7f1d1d;
    border-color: #991b1b;
    color: #fca5a5;
  }

  .error-icon[b-pomttcjnb0] {
    color: #f87171;
  }

  .retry-button[b-pomttcjnb0] {
    background: #dc2626;
  }

  .retry-button:hover[b-pomttcjnb0] {
    background: #ef4444;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .tom-select .ts-control[b-pomttcjnb0] {
    border-width: 2px;
  }

  .tom-select .ts-dropdown .option.active[b-pomttcjnb0],
  .tom-select .ts-dropdown .option.selected[b-pomttcjnb0] {
    outline: 2px solid var(--ts-primary);
    outline-offset: -2px;
  }

  .mobile-option-item.selected[b-pomttcjnb0] {
    outline: 2px solid var(--ts-primary);
    outline-offset: -2px;
  }

  .mobile-trigger-button:focus[b-pomttcjnb0] {
    outline: 2px solid var(--ts-primary);
    outline-offset: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .tom-select .ts-control[b-pomttcjnb0],
  .tom-select .ts-dropdown .option[b-pomttcjnb0],
  .loading-spinner[b-pomttcjnb0],
  .mobile-trigger-button[b-pomttcjnb0],
  .search-chip-trigger[b-pomttcjnb0],
  .mobile-option-item[b-pomttcjnb0],
  .action-button[b-pomttcjnb0] {
    animation: none;
    transition: none;
  }

  .tom-select .ts-dropdown[b-pomttcjnb0] {
    animation: none;
  }

  .mobile-trigger-button[aria-expanded="true"] .trigger-icon[b-pomttcjnb0] {
    transform: none;
  }
}

/* Focus visible (keyboard navigation) */
.tom-select .ts-dropdown .option:focus-visible[b-pomttcjnb0] {
  outline: 2px solid var(--ts-primary);
  outline-offset: -2px;
}

.mobile-option-item:focus-visible[b-pomttcjnb0] {
  outline: 2px solid var(--ts-primary);
  outline-offset: -2px;
}

.mobile-trigger-button:focus-visible[b-pomttcjnb0] {
  outline: 2px solid var(--ts-primary);
  outline-offset: 2px;
}

.action-button:focus-visible[b-pomttcjnb0] {
  outline: 2px solid var(--ts-primary);
  outline-offset: 2px;
}

/* ===== Parsed Result Styles ===== */

.parsed-result-loading[b-pomttcjnb0] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-bottom: 1px solid #e2e8f0;
  color: #2563eb;
  font-size: 14px;
}

.loading-spinner-small[b-pomttcjnb0] {
  width: 16px;
  height: 16px;
  border: 2px solid #e2e8f0;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin-b-pomttcjnb0 0.8s linear infinite;
}

/* Uniform-grams mode banner ("Adding at: 100 g · tap any food"). Sticky so the quantity
   stays visible while the user scrolls the food list. Amber to match the fixed-serving pills. */
.uniform-grams-banner[b-pomttcjnb0] {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-bottom: 2px solid #f59e0b;
  font-size: 14px;
  color: #92400e;
}

.uniform-grams-label[b-pomttcjnb0] {
  font-weight: 500;
}

.uniform-grams-value[b-pomttcjnb0] {
  font-size: 15px;
  font-weight: 700;
  color: #b45309;
}

.uniform-grams-hint[b-pomttcjnb0] {
  color: #b6883e;
  font-size: 13px;
}

.parsed-result-item[b-pomttcjnb0] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-bottom: 2px solid #10b981;
  cursor: pointer;
  transition: all 0.2s ease;
}

.parsed-result-item:hover[b-pomttcjnb0],
.parsed-result-item:focus[b-pomttcjnb0] {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  outline: none;
}

.parsed-result-item:active[b-pomttcjnb0] {
  transform: scale(0.98);
}

.parsed-result-icon[b-pomttcjnb0] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #10b981;
  border-radius: 8px;
  color: white;
  flex-shrink: 0;
}

.parsed-result-content[b-pomttcjnb0] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.parsed-result-name[b-pomttcjnb0] {
  font-weight: 600;
  font-size: 15px;
  color: #064e3b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.parsed-result-grams[b-pomttcjnb0] {
  font-size: 14px;
  font-weight: 500;
  color: #047857;
}

.parsed-result-calories[b-pomttcjnb0] {
  font-size: 13px;
  color: #6b7280;
  margin-left: 4px;
}

.parsed-result-badge[b-pomttcjnb0] {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: #10b981;
  border-radius: 20px;
  color: white;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ===== Mid-word completion candidates ("Did you mean…") ===== */
/* Shown when the typed food name is still an unfinished word ("egg wh"):
   the single resolved card would name the wrong food, so we offer the longer
   completions ("egg white", "egg whites") as tappable "Add as Fixed" cards. */
.parsed-candidates[b-pomttcjnb0] {
  border-bottom: 1px solid #d1fae5;
}

.parsed-candidates-header[b-pomttcjnb0] {
  padding: 10px 16px 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}

.parsed-candidate-item[b-pomttcjnb0] {
  border-bottom-width: 1px;
}

.parsed-candidate-item:last-child[b-pomttcjnb0] {
  border-bottom-color: #10b981;
  border-bottom-width: 2px;
}

/* ===== Desktop TomSelect Parsed Result Option ===== */
/* Styles for the special parsed result option in TomSelect dropdown */
/* Note: Option ordering is done via DOM manipulation in JS, not CSS order property */

.ts-dropdown .ts-parsed-result-option[b-pomttcjnb0],
.ts-dropdown-content .ts-parsed-result-option[b-pomttcjnb0] {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
  border-left: 4px solid #10b981 !important;
  font-weight: 600 !important;
  color: #064e3b !important;
  padding-left: 12px !important;
  position: relative !important;
  /* Separator line below parsed option */
  border-bottom: 2px solid #10b981 !important;
  margin-bottom: 4px !important;
}

.ts-dropdown .ts-parsed-result-option:hover[b-pomttcjnb0],
.ts-dropdown-content .ts-parsed-result-option:hover[b-pomttcjnb0],
.ts-dropdown .ts-parsed-result-option.active[b-pomttcjnb0],
.ts-dropdown-content .ts-parsed-result-option.active[b-pomttcjnb0] {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
  color: #064e3b !important;
}
/* /Components/Shared/VoiceRecorderButton.razor.rz.scp.css */
/* VoiceRecorderButton.razor.css */

/* ============================================
   BASE BUTTON
   Shared styles for both compact and full modes
   ============================================ */

.voice-mic-btn[b-f8jo2vb6k6] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    box-shadow 200ms ease,
    transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
  touch-action: manipulation;
  will-change: transform;
}

.voice-mic-btn:disabled[b-f8jo2vb6k6] {
  cursor: not-allowed;
  opacity: 0.7;
}

/* Keyboard focus indicator (WCAG 2.4.7) */
.voice-mic-btn:focus-visible[b-f8jo2vb6k6] {
  outline: 3px solid var(--fs-primary, #2563eb);
  outline-offset: 2px;
}

/* ============================================
   COMPACT MODE (search bar suffix)
   Flush right-edge, no left radius.
   Parent container provides the shared border.
   ============================================ */

.voice-mic-compact[b-f8jo2vb6k6] {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  align-self: stretch;
  flex-shrink: 0;
  font-size: 1rem;

  /* No border-radius: parent container clips.
     FoodSelection scoped CSS sets right-side
     radius to match the hero zone. */
  border-radius: 0;

  /* Idle: plain — share the search field's background, just a blue glyph (no filled tile,
     which competed with the input). The active states (hover/recording/processing/success)
     fill themselves, so the colour now signals "something's happening" instead of decorating. */
  background: transparent;
  color: var(--fs-primary, #2563eb);
}

/* Desktop hover: solid blue, white icon, subtle lift */
.voice-mic-compact:hover:not(:disabled)[b-f8jo2vb6k6] {
  background: var(--fs-primary, #2563eb);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

/* Desktop active press: snappy feedback */
.voice-mic-compact:active:not(:disabled)[b-f8jo2vb6k6] {
  transform: scale(0.96);
  transition-duration: 80ms;
  box-shadow: none;
}

/* ============================================
   ONE-TIME INTRO ANIMATION
   Plays once on first render to draw attention.
   Spring-pop from 85% scale with blue glow.
   ============================================ */

.voice-mic-compact.voice-intro[b-f8jo2vb6k6] {
  animation: voice-entrance-b-f8jo2vb6k6 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s 1 both;
}

@keyframes voice-entrance-b-f8jo2vb6k6 {
  0% {
    opacity: 0.7;
    transform: scale(0.85);
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
}

/* ============================================
   FULL MODE (QuickAddFood tab)
   ============================================ */

.voice-mic-large[b-f8jo2vb6k6] {
  width: 80px;
  height: 80px;
  font-size: 1.5rem;
  border-radius: 50%;
  background: var(--fs-primary-light, #e0f2fe);
  color: var(--fs-primary, #2563eb);
}

.voice-mic-large:hover:not(:disabled)[b-f8jo2vb6k6] {
  background: var(--fs-primary, #2563eb);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.voice-mic-large:active:not(:disabled)[b-f8jo2vb6k6] {
  transform: scale(0.96);
  transition-duration: 80ms;
}

/* ============================================
   STATE: Recording
   Bounce on entry, then organic dual-ring pulse.
   ============================================ */

.voice-mic-btn.recording[b-f8jo2vb6k6] {
  background: #dc3545;
  color: #fff;
  animation:
    voice-mic-bounce-b-f8jo2vb6k6 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    voice-pulse-organic-b-f8jo2vb6k6 2s ease-in-out 0.35s infinite;
}

.voice-mic-btn.recording:hover:not(:disabled)[b-f8jo2vb6k6] {
  background: #c82333;
  color: #fff;
}

/* Subtle mic icon sway during recording */
.voice-mic-btn.recording .fas[b-f8jo2vb6k6] {
  animation: voice-icon-sway-b-f8jo2vb6k6 1.2s ease-in-out infinite;
}

/* ============================================
   STATE: Processing (thinking glow)
   ============================================ */

.voice-mic-btn.processing[b-f8jo2vb6k6] {
  background: var(--fs-bg-secondary, #f0f0f0);
  color: var(--fs-text-muted, #9ca3af);
  animation: voice-processing-think-b-f8jo2vb6k6 2s ease-in-out infinite;
}

/* ============================================
   STATE: Success (celebration pop)
   ============================================ */

.voice-mic-btn.success[b-f8jo2vb6k6] {
  background: var(--fs-success, #10b981);
  color: #fff;
  animation: voice-success-pop-b-f8jo2vb6k6 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.voice-mic-btn.success:hover:not(:disabled)[b-f8jo2vb6k6] {
  background: #059669;
  color: #fff;
}

/* Checkmark stamp animation */
.voice-mic-btn.success .fas[b-f8jo2vb6k6] {
  animation: voice-check-stamp-b-f8jo2vb6k6 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

/* ============================================
   KEYFRAMES
   ============================================ */

/* Anticipatory bounce on recording start */
@keyframes voice-mic-bounce-b-f8jo2vb6k6 {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(0.88);
  }
  70% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

/* Organic dual-ring pulse with breathing */
@keyframes voice-pulse-organic-b-f8jo2vb6k6 {
  0% {
    box-shadow:
      0 0 0 0 rgba(220, 53, 69, 0.4),
      0 0 0 0 rgba(220, 53, 69, 0.2);
    transform: scale(1);
  }
  25% {
    box-shadow:
      0 0 0 6px rgba(220, 53, 69, 0),
      0 0 0 3px rgba(220, 53, 69, 0.3);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(220, 53, 69, 0),
      0 0 0 8px rgba(220, 53, 69, 0);
    transform: scale(1.02);
  }
  75% {
    box-shadow:
      0 0 0 0 rgba(220, 53, 69, 0),
      0 0 0 0 rgba(220, 53, 69, 0);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(220, 53, 69, 0.4),
      0 0 0 0 rgba(220, 53, 69, 0.2);
    transform: scale(1);
  }
}

/* Subtle mic icon sway — feels alive */
@keyframes voice-icon-sway-b-f8jo2vb6k6 {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(2deg);
  }
  75% {
    transform: rotate(-2deg);
  }
}

/* Processing thinking glow */
@keyframes voice-processing-think-b-f8jo2vb6k6 {
  0%,
  100% {
    background: var(--fs-bg-secondary, #f0f0f0);
    box-shadow: none;
  }
  50% {
    background: var(--fs-primary-light, #e0f2fe);
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.1);
  }
}

/* Success celebration pop */
@keyframes voice-success-pop-b-f8jo2vb6k6 {
  0% {
    transform: scale(0.8);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  }
  50% {
    transform: scale(1.12);
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* Checkmark stamp-in */
@keyframes voice-check-stamp-b-f8jo2vb6k6 {
  0% {
    transform: scale(0) rotate(-45deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.2) rotate(5deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* ============================================
   ACCESSIBILITY: Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .voice-mic-btn[b-f8jo2vb6k6] {
    transition-duration: 0ms;
  }

  .voice-mic-btn.recording[b-f8jo2vb6k6] {
    animation: none;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.5);
  }

  .voice-mic-btn.recording .fas[b-f8jo2vb6k6] {
    animation: none;
  }

  .voice-mic-btn.processing[b-f8jo2vb6k6] {
    animation: none;
  }

  .voice-mic-btn.success[b-f8jo2vb6k6] {
    animation: none;
  }

  .voice-mic-btn.success .fas[b-f8jo2vb6k6] {
    animation: none;
  }

  .voice-mic-compact.voice-intro[b-f8jo2vb6k6] {
    animation: none;
  }

  .voice-mic-compact:hover:not(:disabled)[b-f8jo2vb6k6],
  .voice-mic-large:hover:not(:disabled)[b-f8jo2vb6k6] {
    transform: none;
  }

  .voice-mic-compact:active:not(:disabled)[b-f8jo2vb6k6],
  .voice-mic-large:active:not(:disabled)[b-f8jo2vb6k6] {
    transform: none;
  }
}

/* ============================================
   TOUCH DEVICES: Prevent sticky hover
   ============================================ */

@media (hover: none) {
  .voice-mic-compact:hover:not(:disabled)[b-f8jo2vb6k6] {
    /* Keep idle colors on touch — no sticky dark blue */
    background: var(--fs-primary-light, #e0f2fe);
    color: var(--fs-primary, #2563eb);
    transform: none;
    box-shadow: none;
  }

  .voice-mic-large:hover:not(:disabled)[b-f8jo2vb6k6] {
    background: var(--fs-primary-light, #e0f2fe);
    color: var(--fs-primary, #2563eb);
    transform: none;
    box-shadow: none;
  }

  .voice-mic-btn.recording:hover:not(:disabled)[b-f8jo2vb6k6] {
    background: #dc3545;
    color: #fff;
  }

  .voice-mic-btn.success:hover:not(:disabled)[b-f8jo2vb6k6] {
    background: var(--fs-success, #10b981);
    color: #fff;
  }

  .voice-mic-compact:active:not(:disabled)[b-f8jo2vb6k6],
  .voice-mic-large:active:not(:disabled)[b-f8jo2vb6k6] {
    transform: none;
  }
}

/* ============================================
   FULL MODE LAYOUT
   ============================================ */

.voice-recorder-full[b-f8jo2vb6k6] {
  text-align: center;
  padding: 2rem 1rem;
}

.voice-recorder-center[b-f8jo2vb6k6] {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.voice-state-text[b-f8jo2vb6k6] {
  font-size: 0.9rem;
  color: var(--fs-text-secondary, #6b7280);
}

.voice-success-text[b-f8jo2vb6k6] {
  color: var(--fs-success, #10b981);
  font-weight: 500;
}

/* ============================================
   SKELETON PLACEHOLDER
   Reserves space while browser support loads.
   Prevents Cumulative Layout Shift (CLS).
   ============================================ */

.voice-mic-skeleton[b-f8jo2vb6k6] {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  align-self: stretch;
  flex-shrink: 0;
  border-radius: 0;
  background: var(--fs-bg-tertiary, #f3f4f6);
  border: none;
}

/* Unsupported browser — grayed out, non-interactive */
.voice-mic-unsupported[b-f8jo2vb6k6] {
  background: var(--fs-bg-tertiary, #f3f4f6);
  color: var(--fs-text-muted, #9ca3af);
  cursor: not-allowed;
  opacity: 0.5;
}
/* /Components/WeightTracking/WeightCheckIn.razor.rz.scp.css */
.form-control[b-hld8kzolrf] {
  background-color: #fff;
  border-color: #dee2e6;
}

.form-control[b-hld8kzolrf]::placeholder {
  color: #6c757d;
  opacity: 0.8;
}

.form-control:focus[b-hld8kzolrf] {
  box-shadow: none;
  border-color: #0d6efd;
}

.btn-outline-secondary[b-hld8kzolrf] {
  background-color: #fff;
  border-color: #dee2e6;
}

.btn-outline-secondary:hover[b-hld8kzolrf] {
  background-color: #f8f9fa;
  border-color: #dee2e6;
  color: #6c757d;
}
/* /Components/WeightTracking/WeightProgressVisualization.razor.rz.scp.css */
.weight-progress-container[b-k6xrw8k2mp] {
  max-width: 900px;
  margin: 0 auto;
}

[b-k6xrw8k2mp] .card {
  transition: all 0.3s ease;
  border-width: 2px;
}

[b-k6xrw8k2mp] .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.timeline-container[b-k6xrw8k2mp] {
  position: relative;
  padding: 20px 0;
  margin: 20px 0;
}

.timeline-track[b-k6xrw8k2mp] {
  height: 4px;
  background-color: #e9ecef;
  border-radius: 2px;
  position: relative;
}

.timeline-progress[b-k6xrw8k2mp] {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #198754;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.timeline-markers[b-k6xrw8k2mp] {
  position: relative;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.marker[b-k6xrw8k2mp] {
  font-size: 0.75rem;
  color: #6c757d;
}

.checkin-points[b-k6xrw8k2mp] {
  position: absolute;
  top: -4px; /* Align with the timeline track */
  left: 0;
  right: 0;
  height: 12px; /* Match dot height */
}

.checkin-dot[b-k6xrw8k2mp]::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-k6xrw8k2mp]::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

.checkin-dot[b-k6xrw8k2mp] {
  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-k6xrw8k2mp]::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-k6xrw8k2mp]::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

.frequency-stats .h5[b-k6xrw8k2mp] {
  color: #198754;
}

.checkin-dot-sample[b-k6xrw8k2mp] {
  width: 12px;
  height: 12px;
  background-color: #198754;
  border-radius: 50%;
  display: inline-block;
}

.progress-message-container[b-k6xrw8k2mp] {
  margin: 2rem 0 0;
}

.progress-message-container .alert[b-k6xrw8k2mp] {
  margin-bottom: 0;
  border-left-width: 4px;
  padding: 1rem 1.25rem;
  font-size: 1rem;
}

.progress-message-container .alert-info[b-k6xrw8k2mp] {
  background-color: rgba(13, 202, 240, 0.15);
  color: #055160;
}

.progress-message-container .alert-success[b-k6xrw8k2mp] {
  background-color: rgba(25, 135, 84, 0.15);
  color: #0a3622;
}

.progress-message-content[b-k6xrw8k2mp] {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 0.5rem;
}

.progress-message-content i[b-k6xrw8k2mp] {
  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-k6xrw8k2mp] {
    padding: 0.875rem 1rem;
  }
}

[b-k6xrw8k2mp] .card {
  transition: all 0.3s ease;
  border-width: 2px;
}

[b-k6xrw8k2mp] .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* /Components/WeightTracking/WeightTrendChart.razor.rz.scp.css */
.chart-container[b-74dbr0ytk8] {
  width: 100%;
  min-height: 400px;
}