@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, #f08a12 0%, #e07c0c 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 4px 20px rgba(240, 138, 18, 0.3);
}

.password-modal-title[b-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: #f08a12;
  background: white;
  box-shadow: 0 0 0 3px rgba(240, 138, 18, 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: #f08a12;
  background: rgba(240, 138, 18, 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: #f08a12;
  border: none;
  border-radius: 10px;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  white-space: nowrap;
}

.btn-primary:hover[b-xsy14pxieg] {
  background: #d67a0d;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(240, 138, 18, 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 #f08a12;
  border-radius: 10px;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #f08a12;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  white-space: nowrap;
}

.btn-secondary:hover[b-xsy14pxieg] {
  background: rgba(240, 138, 18, 0.05);
  border-color: #d67a0d;
  color: #d67a0d;
}

.btn-secondary:active[b-xsy14pxieg] {
  background: rgba(240, 138, 18, 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 #f08a12;
  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, #fff7ed, #fff3e0);
  border-left: 4px solid #f08a12;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  color: #5a3e1b;
  line-height: 1.5;
  animation: welcome-fade-in-b-c2kj072vd3 0.6s ease-out both;
}

.welcome-back-icon[b-c2kj072vd3] {
  color: #f08a12;
  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: #f08a12;
  border-color: #f08a12;
  background-color: transparent;
  transition: all 0.3s ease;
}

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

/* Button selection bounce animation on click */
.btn-outline-primary:active:not(:disabled)[b-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: #f08a12;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(240, 138, 18, 0.2);
}

.card-select-option:focus[b-c2kj072vd3] {
  outline: none;
  border-color: #f08a12;
  box-shadow: 0 0 0 3px rgba(240, 138, 18, 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(240, 138, 18, 0.3) 0%,
    transparent 70%
  );
  opacity: 0;
  transform: scale(0);
  transition:
    transform 0.4s ease-out,
    opacity 0.4s ease-out;
  pointer-events: none;
}

.card-select-option:active:not(:disabled)[b-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: #f08a12;
  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, #fafaf9, #fff);
  padding: 1rem 0;
  border-radius: 12px;
  width: 100%;
  max-width: 700px; /* Slightly wider than question content to fit 4 stages */
  min-width: 320px;
  margin: 0 auto;
}

/* Stage indicators container */
.progress-stages[b-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: #f08a12;
  color: #fff;
  box-shadow: 0 4px 12px rgba(240, 138, 18, 0.4);
  animation: pulse-glow-b-c2kj072vd3 2s infinite;
}

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

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

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

/* 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: #059669;
}

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

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

/* 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: #f08a12;
}

.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(240, 138, 18, 0.4);
  }
  50% {
    box-shadow: 0 4px 20px rgba(240, 138, 18, 0.6);
  }
}

/* Progress header responsive */
@media (max-width: 576px) {
  .progress-stages[b-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: #f08a12;
  color: #f08a12;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(240, 138, 18, 0.15);
}

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

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

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

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

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

.image-card-option:disabled[b-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: #f08a12;
}

/* 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-accent, #f08a12);
  box-shadow: 0 4px 12px rgba(240, 138, 18, 0.1);
}

/* Open state - light orange tint */
.guidance-item[open][b-in49bsqqzq] {
  background: #fff8f0;
  border-color: rgba(240, 138, 18, 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(240, 138, 18, 0.2);
  color: var(--fs-accent, #f08a12);
}

.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-accent, #f08a12);
}

.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-accent, #f08a12);
  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-accent, #f08a12);
  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(240, 138, 18, 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, #f08a12 0%, #e67e00 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: #059669;
  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: #f08a12;
}

.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: #f08a12;
  background: linear-gradient(to bottom, #fff9f0, #fff);
  box-shadow: 0 4px 16px rgba(240, 138, 18, 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: #059669;
  color: #fff;
}

.stage-card.active .history-stage-icon[b-88bfruyhv4] {
  background: #f08a12;
  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(240, 138, 18, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(240, 138, 18, 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: #f08a12;
}

/* 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: #f08a12;
  color: #f08a12;
  background: rgba(240, 138, 18, 0.05);
}

.edit-btn:focus[b-88bfruyhv4] {
  outline: none;
  box-shadow: 0 0 0 2px rgba(240, 138, 18, 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: #f08a12;
  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: #059669;
}

.timeline-connector.active[b-88bfruyhv4] {
  background: linear-gradient(to bottom, #059669, #f08a12);
}

/* ============================================
   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: #059669;
  }

  .stage-card.active[b-88bfruyhv4] {
    border-color: #f08a12;
  }

  .answer-count[b-88bfruyhv4] {
    background: #059669;
    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: #e91e63; /* Pink for protein */
}

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

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

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

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

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

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .nutrition-preview[b-mbtvd0eb7u] {
    transition: none;
  }
}
/* /Components/FixedServing/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;
}

/* 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: #f08a12;
  color: white;
  box-shadow: 0 2px 4px rgba(240, 138, 18, 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: #f08a12;
}

/* 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: #f08a12;
  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: #f08a12;
}

[b-cfxh71ealx]
  .custom-input
  .mud-input-root.mud-input-root-outlined.Mui-focused
  .mud-input-outlined-border {
  border-color: #f08a12;
  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: #f08a12;
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(240, 138, 18, 0.2);
}

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

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

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

.auth-actions .mud-button-outlined:hover[b-cfxh71ealx] {
  background-color: rgba(240, 138, 18, 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;
}

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

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

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

/* 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);
  }
}
/* /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: #fff3e6;
  border: 1px solid #ffe0b2;
  border-radius: 2rem;
  color: #f08a12;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

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

.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: #f08a12;
  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: #f08a12;
  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: #f08a12;
  background-color: #fff3e6;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .custom-foods-grid[b-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;
  }
}
/* /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);
}

/* 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: #3b4cca;
}
[b-3soal3mqbs] .fixed-row-macros .frm-dot.c {
  background: #0e9f6e;
}
[b-3soal3mqbs] .fixed-row-macros .frm-dot.f {
  background: #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: #ffffff;
  font-weight: 600;
  font-size: 1.125rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  margin-right: auto;
}

.enhanced-brand-link:hover[b-no0s44qxgm] {
  color: #ffffff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.enhanced-brand-link:focus[b-no0s44qxgm] {
  outline: 2px solid rgba(255, 255, 255, 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(255, 255, 255, 0.3);
}

.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%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  width: 1.5em;
  height: 1.5em;
}

.custom-toggler:hover[b-no0s44qxgm] {
  background-color: rgba(255, 255, 255, 0.1);
}

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

  .navbar-collapse.show[b-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: #ffffff !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
    text-decoration: none;
    display: block;
  }

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

  .mobile-nav-item:hover[b-no0s44qxgm] {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff !important;
    text-decoration: none;
    padding-left: 2rem !important;
  }

  .mobile-nav-item:active[b-no0s44qxgm] {
    background-color: rgba(255, 255, 255, 0.2);
  }

  /* 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: #ffffff !important;
    margin-right: 10px;
    transition: color 0.3s ease;
  }

  .nav-link:hover[b-no0s44qxgm] {
    color: rgba(255, 255, 255, 0.8) !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);
}
.afs-badge-p[b-fdeiy384be] {
  background: var(--fs-primary);
}
.afs-badge-c[b-fdeiy384be] {
  background: var(--fs-accent);
}
.afs-badge-f[b-fdeiy384be] {
  background: var(--fs-success);
}

/* --- 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/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/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);
}

/* 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);
}
/* /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 */
/* Meal item card styles */
.meal-item-card[b-c6ozzwyl1l] {
  border: 1px solid #e0e0e0 !important;
  border-radius: 16px !important;
  padding: 2rem !important;
  margin-bottom: 1.5rem !important;
  transition: all 0.2s ease;
}

.meal-item-card:hover[b-c6ozzwyl1l] {
  border-color: #4a90e2 !important;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.1) !important;
}

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

.meal-option-list li[b-c6ozzwyl1l] {
  background: transparent !important;
  border: none !important;
  padding: 1rem 0 !important;
}
/* /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/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/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/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/NutritionFactsResult.razor.rz.scp.css */
.nutrition-facts-display .nutrition-facts-table[b-6c2afw3m2b] {
  font-family: Arial, sans-serif;
}

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

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

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

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

.nutrient-label[b-6c2afw3m2b] {
  font-weight: 500;
}

.nutrient-value[b-6c2afw3m2b] {
  font-weight: 400;
}

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

.serving-info[b-6c2afw3m2b] {
  font-size: 0.95rem;
}

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

.metadata-section[b-6c2afw3m2b] {
  margin-top: 10px;
}
/* /Components/NutritionFacts/ProductDataValidator.razor.rz.scp.css */
.product-data-validator[b-bh3itt9ov5] {
  max-height: 90vh;
  overflow-y: auto;
}

/* Nutrition Summary Panel */
.nutrition-summary-panel[b-bh3itt9ov5] {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 2px solid;
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 10;
  margin: -1rem -1rem 1rem -1rem;
}

.nutrition-summary-panel.border-warning[b-bh3itt9ov5] {
  border-color: #ffc107;
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
}

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

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

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

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

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

.nutrient-item.has-value[b-bh3itt9ov5] {
  border-color: #28a745;
  background: #f0fff4;
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.15);
}

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

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

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

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

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

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

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

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

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

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

/* Responsive adjustments */
@media (max-width: 768px) {
  .summary-grid[b-bh3itt9ov5] {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }

  .nutrient-item[b-bh3itt9ov5] {
    padding: 0.5rem;
  }

  .nutrient-value[b-bh3itt9ov5] {
    font-size: 1.1rem;
  }

  .nutrition-summary-panel[b-bh3itt9ov5] {
    position: relative;
    margin: 0 0 1rem 0;
  }
}

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

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

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

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

.extracted-value[b-bh3itt9ov5] {
  animation: highlight-pulse-b-bh3itt9ov5 2s ease-in-out;
}
/* /Components/NutritionFacts/ProductImageScanner.razor.rz.scp.css */
/* Upload Area Styles */
.upload-area[b-rydmx4jesk] {
  border: 2px dashed #ccc;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-area:hover[b-rydmx4jesk] {
  border-color: #007bff;
  background-color: #f8f9fa;
}

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

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

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

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

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

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

/* Action Buttons Container */
.mt-3.mb-4.d-flex.gap-2[b-rydmx4jesk] {
  background-color: #f8f9fa;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-top: 15px !important;
  margin-bottom: 25px !important;
}

/* Modern minimal design for extraction results */
.extraction-results-overlay[b-rydmx4jesk] {
  position: relative;
  margin-top: 1rem;
  animation: slideInUp-b-rydmx4jesk 0.3s ease-out;
}

.extraction-results-card[b-rydmx4jesk] {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}

.extraction-results-card:hover[b-rydmx4jesk] {
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.results-header[b-rydmx4jesk] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e9ecef;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.serving-info[b-rydmx4jesk] {
  text-align: center;
  font-size: 0.875rem;
  color: #6c757d;
  background: rgba(13, 110, 253, 0.1);
  padding: 0.5rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.action-buttons[b-rydmx4jesk] {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

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

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

.btn-apply:hover[b-rydmx4jesk] {
  background: linear-gradient(135deg, #157347, #1a9b72);
  border-color: #157347;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(25, 135, 84, 0.3);
}

.btn-details[b-rydmx4jesk] {
  border-color: #6c757d;
  color: #6c757d;
  background: white;
}

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

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

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

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

/* Responsive design */
@media (max-width: 768px) {
  .extraction-results-card[b-rydmx4jesk] {
    padding: 1rem;
  }

  .macro-grid[b-rydmx4jesk] {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .action-buttons[b-rydmx4jesk] {
    flex-direction: column;
  }

  .action-buttons .btn[b-rydmx4jesk] {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .results-header[b-rydmx4jesk] {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }

  .macro-grid[b-rydmx4jesk] {
    grid-template-columns: 1fr 1fr;
  }

  .macro-value[b-rydmx4jesk] {
    font-size: 1.25rem;
  }
}

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

.results-header-clean[b-rydmx4jesk] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid #dee2e6;
}

.status-section[b-rydmx4jesk] {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.status-icon[b-rydmx4jesk] {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #198754, #20c997);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
}

.status-text h5[b-rydmx4jesk] {
  margin: 0;
  color: #212529;
  font-weight: 600;
}

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

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

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

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

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

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

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

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

.nutrition-item[b-rydmx4jesk] {
  text-align: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 16px;
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.nutrition-item[b-rydmx4jesk]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  transition: all 0.3s ease;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.btn-primary-action[b-rydmx4jesk] {
  font-size: 1.1rem;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  margin-bottom: 1rem;
  min-width: 200px;
  border: none;
  background: linear-gradient(135deg, #198754, #20c997);
  transition: all 0.3s ease;
}

.btn-primary-action:hover[b-rydmx4jesk] {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(25, 135, 84, 0.4);
  background: linear-gradient(135deg, #157347, #1a9b72);
}

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

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

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

/* Animation for fade in */
@keyframes fadeInUp-b-rydmx4jesk {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments for clean results */
@media (max-width: 768px) {
  .results-header-clean[b-rydmx4jesk] {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    padding: 1rem;
  }

  .product-card[b-rydmx4jesk] {
    padding: 1.5rem;
  }

  .nutrition-grid[b-rydmx4jesk] {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .nutrition-item[b-rydmx4jesk] {
    padding: 1rem;
  }

  .nutrition-value[b-rydmx4jesk] {
    font-size: 2rem;
  }

  .product-name[b-rydmx4jesk] {
    font-size: 1.5rem;
  }

  .action-section[b-rydmx4jesk] {
    padding: 1.5rem;
  }

  .secondary-actions[b-rydmx4jesk] {
    flex-direction: column;
  }

  .secondary-actions .btn[b-rydmx4jesk] {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .nutrition-grid[b-rydmx4jesk] {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .nutrition-value[b-rydmx4jesk] {
    font-size: 1.75rem;
  }

  .product-name[b-rydmx4jesk] {
    font-size: 1.25rem;
  }
}

/* Debug information styling */
.debug-info[b-rydmx4jesk] {
  font-family: "Courier New", monospace;
  font-size: 0.75rem;
  background: #f8f9fa !important;
  border: 1px dashed #dee2e6 !important;
  border-radius: 4px;
  opacity: 0.8;
}

/* Compact Extraction Results Styles */
.extraction-results-compact[b-rydmx4jesk] {
  animation: fadeInUp-b-rydmx4jesk 0.3s ease-out;
}

.results-header-compact[b-rydmx4jesk] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 6px;
  margin-bottom: 0.5rem;
  border: 1px solid #dee2e6;
}

.results-header-compact .status-section[b-rydmx4jesk] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.results-header-compact .status-icon[b-rydmx4jesk] {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #198754, #20c997);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1rem;
}

.results-header-compact .status-text h6[b-rydmx4jesk] {
  margin: 0;
  color: #212529;
  font-weight: 600;
  font-size: 1rem;
}

.results-header-compact .status-text small[b-rydmx4jesk] {
  color: #6c757d;
  font-size: 0.8rem;
}

.confidence-badge-compact[b-rydmx4jesk] {
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.8rem;
  color: white;
  text-align: center;
}

.action-section-compact[b-rydmx4jesk] {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

/* Responsive adjustments for compact results */
@media (max-width: 768px) {
  .results-header-compact[b-rydmx4jesk] {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
    padding: 0.75rem;
  }

  .action-section-compact[b-rydmx4jesk] {
    flex-direction: column;
    padding: 0.75rem;
  }

  .action-section-compact .btn[b-rydmx4jesk] {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .results-header-compact .status-icon[b-rydmx4jesk] {
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
  }

  .confidence-badge-compact[b-rydmx4jesk] {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }
}
/* /Components/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(--bs-primary, #27ae60);
  box-shadow: 0 0 0 3px rgba(39, 174, 96, 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(--bs-primary, #27ae60);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

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

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

.submit-btn:hover:not(:disabled)[b-aeuxvvh4ia] {
  background-color: var(--bs-primary-hover, #219150);
  border-color: var(--bs-primary-hover, #219150);
  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, #fff8f0 0%, #fff0e0 100%);
  border: 2px solid rgba(240, 138, 18, 0.2);
  border-radius: 16px;
  min-width: 160px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.calculator-box.processing[b-lmkkoyxiae] {
  border-color: rgba(240, 138, 18, 0.5);
  box-shadow: 0 0 20px rgba(240, 138, 18, 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(240, 138, 18, 0.2);
  border-top-color: #f08a12;
  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: #f08a12;
  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(240, 138, 18, 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: #f08a12;
}

/* ==========================================================================
   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: #f08a12;
  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: #f08a12;
  }

  .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: #f08a12;
  transform: scale(1.2);
}

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

/* Tooltip on hover */
.snap-dot[b-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(240, 138, 18, 0.3);
}

.snap-dot:focus-visible[b-tkasyd4w7l] {
  outline: 2px solid #f08a12;
  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, #fff8f0 0%, #ffffff 100%);
}

.snap-faq[b-tkasyd4w7l] {
  background: #f8fafc;
}

.snap-cta[b-tkasyd4w7l] {
  background: linear-gradient(135deg, #fff8f0 0%, #fff0e0 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-accent);
  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-accent);
  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(240, 138, 18, 0.1) 0%,
    rgba(245, 167, 66, 0.05) 100%
  );
  border-radius: 1rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.video-container:hover[b-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(240, 138, 18, 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, #f08a12, #f5a742);
  color: white;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 1.2rem 2.5rem; /* Increased height by ~20% */
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 8px 20px rgba(240, 138, 18, 0.3); /* Enhanced subtle shadow */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cta-button:hover[b-tkasyd4w7l],
.cta-button:focus[b-tkasyd4w7l] {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(240, 138, 18, 0.35);
}

.cta-button:active[b-tkasyd4w7l] {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(240, 138, 18, 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, #fff8f0 0%, #fff0e0 100%);
  color: #2d3748;
  padding: 4rem 2rem;
  border-radius: 20px;
  margin-top: 3rem;
  border: 1px solid rgba(240, 138, 18, 0.15);
}

.cta-container h2[b-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-button[b-tkasyd4w7l] {
  background: linear-gradient(135deg, #f08a12 0%, #e67300 100%);
  color: white;
  border: none;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  font-weight: 600;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 5px 20px rgba(240, 138, 18, 0.35);
}

.cta-button:hover[b-tkasyd4w7l] {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(240, 138, 18, 0.45);
  background: linear-gradient(135deg, #e67300 0%, #d56a00 100%);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .feature-list[b-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(240, 138, 18, 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, #f08a12 0%, #e67300 100%);
  color: white;
  border: none;
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(240, 138, 18, 0.35);
  white-space: nowrap;
  flex-shrink: 0;
}

.sticky-cta-button:hover[b-tkasyd4w7l] {
  transform: scale(1.02);
  box-shadow: 0 6px 16px rgba(240, 138, 18, 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, #f08a12 0%, #e67300 100%);
  color: white;
  border: none;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 24px rgba(240, 138, 18, 0.4);
}

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

.faq-item[open][b-tkasyd4w7l] {
  background: #fff8f0;
  border-color: rgba(240, 138, 18, 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 #f08a12;
  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 #f08a12;
  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: #f08a12;
}

.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: #f08a12;
  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 - subtle red tint */
.tracker-panel[b-cebaoif3wa] {
  border-color: rgba(229, 62, 62, 0.2);
  background: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%);
}

/* Portion Pilot panel - subtle green tint */
.portion-pilot-panel[b-cebaoif3wa] {
  border-color: rgba(72, 187, 120, 0.3);
  background: linear-gradient(135deg, #ffffff 0%, #f0fff4 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(229, 62, 62, 0.2);
}

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

.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 Step Styles
   ========================================================================== */

.step-guess[b-cebaoif3wa] {
  background: rgba(237, 137, 54, 0.1);
}

.step-guess .step-text[b-cebaoif3wa] {
  color: #c05621;
}

.step-log[b-cebaoif3wa] {
  background: rgba(160, 174, 192, 0.15);
}

.step-log .step-text[b-cebaoif3wa] {
  color: #718096;
}

.step-error[b-cebaoif3wa] {
  background: rgba(229, 62, 62, 0.1);
}

.step-error .step-text[b-cebaoif3wa] {
  color: #c53030;
  font-weight: 500;
}

.step-repeat[b-cebaoif3wa] {
  background: rgba(160, 174, 192, 0.1);
}

.step-repeat .step-text[b-cebaoif3wa] {
  color: #718096;
  font-style: italic;
}

/* ==========================================================================
   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(72, 187, 120, 0.15);
  border-left: 3px solid #48bb78;
}

.step-result .step-text[b-cebaoif3wa] {
  color: #276749;
  font-weight: 600;
}

.step-done[b-cebaoif3wa] {
  background: linear-gradient(
    135deg,
    rgba(72, 187, 120, 0.2) 0%,
    rgba(56, 178, 172, 0.2) 100%
  );
  border: 2px solid rgba(72, 187, 120, 0.4);
}

.step-done .step-icon[b-cebaoif3wa] {
  font-size: 1.25rem;
}

.step-done .step-text[b-cebaoif3wa] {
  color: #276749;
  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: #c53030;
}

.pilot-footer .footer-text[b-cebaoif3wa] {
  color: #276749;
}

.footer-time[b-cebaoif3wa] {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.tracker-footer .footer-time[b-cebaoif3wa] {
  color: #9b2c2c;
}

.pilot-footer .footer-time[b-cebaoif3wa] {
  color: #22543d;
}

/* ==========================================================================
   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(229, 62, 62, 0.1);
  }

  .pilot-footer .footer-time[b-cebaoif3wa] {
    background: rgba(72, 187, 120, 0.15);
  }

  /* 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, #f08a12 0%, #e67300 100%);
  color: white;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(240, 138, 18, 0.3);
}

.phase-info[b-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: #f08a12;
  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: #f08a12;
}

.form-control.custom-input[b-bmszhao9x2] {
  width: 100%;
  padding: 0.375rem 0.75rem;
  border-color: #e0e0e0;
}

.form-control.custom-input:focus[b-bmszhao9x2] {
  box-shadow: none;
  border-color: #f08a12;
}

.btn-primary[b-bmszhao9x2] {
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover[b-bmszhao9x2] {
  background-color: #0056b3;
  border-color: #0056b3;
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* Modern Minimalist Login Design */
.login-container[b-pwyxsh4my2] {
  min-height: calc(100vh - 60px); /* Adjust for existing header */
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
  padding-top: 2rem;
}

/* Main Content */
.auth-main[b-pwyxsh4my2] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
  padding: 2rem 1rem;
}

.auth-card[b-pwyxsh4my2] {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.08);
  padding: 3rem;
  width: 100%;
  max-width: 420px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.auth-card-header[b-pwyxsh4my2] {
  text-align: center;
  margin-bottom: 2.5rem;
}

.auth-title[b-pwyxsh4my2] {
  font-size: 1.875rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.02em;
}

.auth-subtitle[b-pwyxsh4my2] {
  font-size: 1rem;
  color: #6b7280;
  margin: 0;
  font-weight: 400;
}

/* Modern Alert Styles */
.alert-modern[b-pwyxsh4my2] {
  padding: 1rem 1.25rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  border: none;
  font-weight: 500;
}

.alert-modern.alert-success[b-pwyxsh4my2] {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #166534;
  border-left: 4px solid #22c55e;
}

.alert-modern.alert-danger[b-pwyxsh4my2] {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  color: #dc2626;
  border-left: 4px solid #ef4444;
}

.alert-modern.alert-info[b-pwyxsh4my2] {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #2563eb;
  border-left: 4px solid #3b82f6;
}

/* Form Styles */
.auth-form[b-pwyxsh4my2] {
  margin-bottom: 2rem;
}

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

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

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

.form-input[b-pwyxsh4my2] {
  width: 100%;
  padding: 0.875rem 1rem;
  padding-left: 3rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  font-size: 1rem;
  background: #fafafa;
  transition: all 0.2s ease;
  color: #1a1a1a;
}

.form-input[b-pwyxsh4my2]::placeholder {
  color: #9ca3af;
}

.form-input:focus[b-pwyxsh4my2] {
  outline: none;
  border-color: #f08a12;
  background: white;
  box-shadow: 0 0 0 3px rgba(240, 138, 18, 0.08);
}

.input-icon[b-pwyxsh4my2] {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
  z-index: 2;
}

.form-input:focus + .input-icon[b-pwyxsh4my2] {
  color: #f08a12;
}

.password-toggle[b-pwyxsh4my2] {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  z-index: 2;
}

.password-toggle:hover[b-pwyxsh4my2] {
  color: #6b7280;
}

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

.checkbox-wrapper[b-pwyxsh4my2] {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 0.5rem;
}

.checkbox-input[b-pwyxsh4my2] {
  display: none;
}

.checkbox-custom[b-pwyxsh4my2] {
  width: 18px;
  height: 18px;
  border: 1.5px solid #d1d5db;
  border-radius: 4px;
  background: white;
  position: relative;
  transition: all 0.2s ease;
}

.checkbox-input:checked + .checkbox-custom[b-pwyxsh4my2] {
  background: #f08a12;
  border-color: #f08a12;
}

.checkbox-input:checked + .checkbox-custom[b-pwyxsh4my2]::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.checkbox-label[b-pwyxsh4my2] {
  font-size: 0.875rem;
  color: #6b7280;
  user-select: none;
}

.forgot-link[b-pwyxsh4my2] {
  font-size: 0.875rem;
  color: #f08a12;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.forgot-link:hover[b-pwyxsh4my2] {
  color: #d67a0d;
  text-decoration: none;
}

/* Primary Button */
.btn-primary[b-pwyxsh4my2] {
  width: 100%;
  background: #f08a12;
  border: none;
  border-radius: 12px;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
}

.btn-primary:hover:not(:disabled)[b-pwyxsh4my2] {
  background: #d67a0d;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(240, 138, 18, 0.3);
}

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

.btn-primary:disabled[b-pwyxsh4my2] {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.btn-loading[b-pwyxsh4my2] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.spinner[b-pwyxsh4my2] {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin-b-pwyxsh4my2 1s linear infinite;
}

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

/* Auth Divider */
.auth-divider[b-pwyxsh4my2] {
  display: flex;
  align-items: center;
  margin: 2rem 0 1.5rem;
  text-align: center;
  color: #9ca3af;
  font-size: 0.875rem;
  font-weight: 500;
}

.auth-divider[b-pwyxsh4my2]::before,
.auth-divider[b-pwyxsh4my2]::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #e5e7eb 50%,
    transparent 100%
  );
}

.auth-divider span[b-pwyxsh4my2] {
  padding: 0 1rem;
  background: white;
  position: relative;
  z-index: 1;
}

/* Ghost Button */
.btn-ghost[b-pwyxsh4my2] {
  width: 100%;
  background: transparent;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  margin-bottom: 1rem;
}

.btn-ghost:hover[b-pwyxsh4my2] {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #374151;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.btn-ghost:active[b-pwyxsh4my2] {
  transform: translateY(0);
  background: #f3f4f6;
}

.btn-ghost svg[b-pwyxsh4my2] {
  transition: all 0.2s ease;
}

.btn-ghost:hover svg[b-pwyxsh4my2] {
  transform: scale(1.05);
  stroke: #374151;
}

/* Footer */
.auth-footer[b-pwyxsh4my2] {
  text-align: center;
  margin-top: 2rem;
}

.signup-prompt[b-pwyxsh4my2] {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

.signup-link[b-pwyxsh4my2] {
  color: #f08a12;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.signup-link:hover[b-pwyxsh4my2] {
  color: #d67a0d;
  text-decoration: none;
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
  .auth-card[b-pwyxsh4my2] {
    padding: 2rem 1.5rem;
    margin: 1rem;
    border-radius: 12px;
  }

  .auth-title[b-pwyxsh4my2] {
    font-size: 1.5rem;
  }

  .auth-nav[b-pwyxsh4my2] {
    gap: 1rem;
  }

  .auth-link[b-pwyxsh4my2] {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
  }

  .form-options[b-pwyxsh4my2] {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
}

@media (max-width: 320px) {
  .auth-card[b-pwyxsh4my2] {
    padding: 1.5rem 1rem;
  }

  .brand-text[b-pwyxsh4my2] {
    font-size: 1.25rem;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  *[b-pwyxsh4my2] {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible for better keyboard navigation */
.btn-primary:focus-visible[b-pwyxsh4my2],
.btn-ghost:focus-visible[b-pwyxsh4my2],
.forgot-link:focus-visible[b-pwyxsh4my2],
.signup-link:focus-visible[b-pwyxsh4my2],
.auth-link:focus-visible[b-pwyxsh4my2] {
  outline: 2px solid #f08a12;
  outline-offset: 2px;
}
/* /Components/Pages/ResetPassword.razor.rz.scp.css */
.input-group-text[b-tc4spw4f0n] {
  background-color: transparent;
  border-right: none;
}
.input-group .form-control[b-tc4spw4f0n] {
  border-left: none;
}
.input-group .btn[b-tc4spw4f0n] {
  border-left: none;
}
.card[b-tc4spw4f0n] {
  border: none;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.card-title[b-tc4spw4f0n] {
  color: #f08a12;
}
.btn-primary[b-tc4spw4f0n] {
  background-color: #007bff;
  border-color: #007bff;
}
.btn-primary:hover[b-tc4spw4f0n] {
  background-color: #0056b3;
  border-color: #0056b3;
}
/* /Components/Pages/SignUp.razor.rz.scp.css */
/* Modern Minimalist SignUp Design */
.signup-container[b-wjadusrl0v] {
  min-height: calc(100vh - 60px); /* Adjust for existing header */
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
  padding-top: 2rem;
}

/* Main Content */
.auth-main[b-wjadusrl0v] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
  padding: 2rem 1rem;
}

.auth-card[b-wjadusrl0v] {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.08);
  padding: 3rem;
  width: 100%;
  max-width: 420px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.auth-card-header[b-wjadusrl0v] {
  text-align: center;
  margin-bottom: 2.5rem;
}

.auth-title[b-wjadusrl0v] {
  font-size: 1.875rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.02em;
}

.auth-subtitle[b-wjadusrl0v] {
  font-size: 1rem;
  color: #6b7280;
  margin: 0;
  font-weight: 400;
}

/* Modern Alert Styles */
.alert-modern[b-wjadusrl0v] {
  padding: 1rem 1.25rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  border: none;
  font-weight: 500;
}

.alert-modern.alert-success[b-wjadusrl0v] {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #166534;
  border-left: 4px solid #22c55e;
}

.alert-modern.alert-danger[b-wjadusrl0v] {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  color: #dc2626;
  border-left: 4px solid #ef4444;
}

.alert-modern.alert-warning[b-wjadusrl0v] {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color: #d97706;
  border-left: 4px solid #f59e0b;
}

.alert-modern.alert-info[b-wjadusrl0v] {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #2563eb;
  border-left: 4px solid #3b82f6;
}

/* Form Styles */
.auth-form[b-wjadusrl0v] {
  margin-bottom: 2rem;
}

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

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

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

.form-input[b-wjadusrl0v] {
  width: 100%;
  padding: 0.875rem 1rem;
  padding-left: 3rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  font-size: 1rem;
  background: #fafafa;
  transition: all 0.2s ease;
  color: #1a1a1a;
}

.form-input.password-with-generator[b-wjadusrl0v] {
  padding-right: 5.5rem; /* Extra space for both generator and toggle buttons */
}

.form-input[b-wjadusrl0v]::placeholder {
  color: #9ca3af;
}

.form-input:focus[b-wjadusrl0v] {
  outline: none;
  border-color: #f08a12;
  background: white;
  box-shadow: 0 0 0 3px rgba(240, 138, 18, 0.08);
}

.input-icon[b-wjadusrl0v] {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-input:focus + .input-icon[b-wjadusrl0v] {
  color: #f08a12;
}

/* Password Generator Button */
.password-generator[b-wjadusrl0v] {
  position: absolute;
  right: 3rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 0.375rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 2;
}

.password-generator:hover[b-wjadusrl0v] {
  color: #f08a12;
  background: rgba(240, 138, 18, 0.1);
}

.password-generator:active[b-wjadusrl0v] {
  transform: translateY(-50%) scale(0.95);
}

/* Password Toggle Button */
.password-toggle[b-wjadusrl0v] {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  z-index: 2;
}

.password-toggle:hover[b-wjadusrl0v] {
  color: #6b7280;
}

/* Form Options */
.form-options[b-wjadusrl0v] {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.checkbox-wrapper[b-wjadusrl0v] {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  gap: 0.5rem;
  line-height: 1.5;
}

.checkbox-input[b-wjadusrl0v] {
  display: none;
}

.checkbox-custom[b-wjadusrl0v] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border: 1.5px solid #d1d5db;
  border-radius: 4px;
  background: white;
  position: relative;
  transition: all 0.2s ease;
  margin-top: 2px;
}

.checkbox-input:checked + .checkbox-custom[b-wjadusrl0v] {
  background: #f08a12;
  border-color: #f08a12;
}

.checkbox-input:checked + .checkbox-custom[b-wjadusrl0v]::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.checkbox-label[b-wjadusrl0v] {
  font-size: 0.875rem;
  color: #6b7280;
  user-select: none;
  line-height: 1.5;
}

.checkbox-label .signup-link[b-wjadusrl0v] {
  font-size: 0.875rem;
}

/* Primary Button */
.btn-primary[b-wjadusrl0v] {
  width: 100%;
  background: #f08a12;
  border: none;
  border-radius: 12px;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
}

.btn-primary:hover:not(:disabled)[b-wjadusrl0v] {
  background: #d67a0d;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(240, 138, 18, 0.3);
}

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

.btn-primary:disabled[b-wjadusrl0v] {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.btn-loading[b-wjadusrl0v] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.spinner[b-wjadusrl0v] {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin-b-wjadusrl0v 1s linear infinite;
}

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

/* Validation Summary */
.validation-summary[b-wjadusrl0v] {
  text-align: center;
  margin-top: 1rem;
}

/* Footer */
.auth-footer[b-wjadusrl0v] {
  text-align: center;
  margin-top: 2rem;
}

.signup-prompt[b-wjadusrl0v] {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

.signup-link[b-wjadusrl0v] {
  color: #f08a12;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.signup-link:hover[b-wjadusrl0v] {
  color: #d67a0d;
  text-decoration: none;
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
  .auth-card[b-wjadusrl0v] {
    padding: 2rem 1.5rem;
    margin: 1rem;
    border-radius: 12px;
  }

  .auth-title[b-wjadusrl0v] {
    font-size: 1.5rem;
  }

  .auth-subtitle[b-wjadusrl0v] {
    font-size: 0.875rem;
  }

  .form-input.password-with-generator[b-wjadusrl0v] {
    padding-right: 4.5rem; /* Reduced space for mobile */
  }

  .password-generator[b-wjadusrl0v] {
    right: 2.5rem;
    padding: 0.25rem;
  }

  .password-toggle[b-wjadusrl0v] {
    padding: 0.125rem;
  }
}

@media (max-width: 320px) {
  .auth-card[b-wjadusrl0v] {
    padding: 1.5rem 1rem;
  }

  .auth-title[b-wjadusrl0v] {
    font-size: 1.375rem;
  }

  .form-input[b-wjadusrl0v] {
    font-size: 0.9375rem;
  }

  .form-input.password-with-generator[b-wjadusrl0v] {
    padding-right: 4rem;
  }

  .password-generator[b-wjadusrl0v] {
    right: 2.25rem;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  *[b-wjadusrl0v] {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible for better keyboard navigation */
.btn-primary:focus-visible[b-wjadusrl0v],
.password-generator:focus-visible[b-wjadusrl0v],
.password-toggle:focus-visible[b-wjadusrl0v],
.signup-link:focus-visible[b-wjadusrl0v] {
  outline: 2px solid #f08a12;
  outline-offset: 2px;
}

.form-input:focus-visible[b-wjadusrl0v] {
  outline: none; /* We use box-shadow instead for inputs */
}
/* /Components/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;
  background: #10b981;
  color: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Add expand hint arrow after the count */
.keyboard-visible[b-m1nztuzuee]  .mobile-selected-chips .chips-label::after {
  content: "selected • tap to edit";
  font-weight: 400;
  opacity: 0.9;
  margin-left: 4px;
}

/* ========================================
   Accessibility
   ======================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mobile-bottom-sheet[b-m1nztuzuee] {
    --sheet-border: currentColor;
  }

  .sheet-container[b-m1nztuzuee] {
    border: 2px solid currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-sheet[b-m1nztuzuee],
  .sheet-backdrop[b-m1nztuzuee],
  .sheet-container[b-m1nztuzuee],
  .drag-indicator[b-m1nztuzuee],
  .sheet-close-btn[b-m1nztuzuee] {
    animation: none !important;
    transition: none !important;
  }

  /* Instant show/hide without animation */
  .mobile-bottom-sheet.open .sheet-container[b-m1nztuzuee] {
    transform: translateY(0);
  }

  .mobile-bottom-sheet.closing .sheet-container[b-m1nztuzuee] {
    transform: translateY(100%);
  }
}

/* Focus visible styles for keyboard navigation */
.sheet-drag-handle:focus-visible[b-m1nztuzuee],
.sheet-body:focus-visible[b-m1nztuzuee] {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
  .mobile-bottom-sheet[b-m1nztuzuee] {
    display: none !important;
  }
}
/* /Components/Shared/MobileBottomSheetList.razor.rz.scp.css */
/* ==========================================================================
   Mobile Bottom Sheet List Component Styles
   Material Design 3 with Dark Mode Support
   ========================================================================== */

.mobile-bottom-sheet-list[b-874xsn7eru] {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--surface, #ffffff);
  color: var(--on-surface, #1c1b1f);
}

/* ==========================================================================
   Search Container
   ========================================================================== */

.search-container[b-874xsn7eru] {
  flex-shrink: 0;
  padding: 16px;
  background-color: var(--surface, #ffffff);
  border-bottom: 1px solid var(--outline-variant, #c4c6d0);
  position: sticky;
  top: 0;
  z-index: 10;
}

.search-input-wrapper[b-874xsn7eru] {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--surface-container-high, #ece6f0);
  border-radius: 28px;
  transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}

.search-input-wrapper:focus-within[b-874xsn7eru] {
  background-color: var(--surface-container-highest, #e6e0e9);
}

.search-icon[b-874xsn7eru] {
  position: absolute;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-surface-variant, #46464f);
  pointer-events: none;
}

.search-input[b-874xsn7eru] {
  flex: 1;
  width: 100%;
  height: 56px;
  padding: 16px 48px 16px 52px;
  border: none;
  background: transparent;
  font-size: 16px;
  font-family: inherit;
  color: var(--on-surface, #1c1b1f);
  outline: none;
}

.search-input[b-874xsn7eru]::placeholder {
  color: var(--on-surface-variant, #46464f);
  opacity: 1;
}

.search-input[b-874xsn7eru]::-webkit-search-cancel-button {
  display: none;
}

.clear-search-btn[b-874xsn7eru] {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--on-surface-variant, #46464f);
  cursor: pointer;
  transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}

.clear-search-btn:hover[b-874xsn7eru] {
  background-color: var(--surface-container-highest, #e6e0e9);
}

.clear-search-btn:active[b-874xsn7eru] {
  background-color: var(--surface-container, #f3edf7);
}

/* ==========================================================================
   Results Count
   ========================================================================== */

.results-count[b-874xsn7eru] {
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--on-surface-variant, #46464f);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   List Container
   ========================================================================== */

.list-container[b-874xsn7eru] {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ==========================================================================
   List Items
   ========================================================================== */

.list-item[b-874xsn7eru] {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 8px 16px;
  gap: 16px;
  background-color: var(--surface, #ffffff);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}

.list-item:hover[b-874xsn7eru] {
  background-color: var(--surface-container-high, #ece6f0);
}

.list-item:active[b-874xsn7eru] {
  background-color: var(--surface-container-highest, #e6e0e9);
}

.list-item:focus[b-874xsn7eru] {
  outline: 2px solid var(--primary, #6750a4);
  outline-offset: -2px;
}

.list-item.selected[b-874xsn7eru] {
  background-color: var(--secondary-container, #e8def8);
}

.list-item.selected:hover[b-874xsn7eru] {
  background-color: var(--secondary-container, #e8def8);
  opacity: 0.9;
}

/* Touch-friendly minimum target size */
@media (pointer: coarse) {
  .list-item[b-874xsn7eru] {
    min-height: 60px;
  }
}

/* ==========================================================================
   Checkbox
   ========================================================================== */

.checkbox-wrapper[b-874xsn7eru] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.list-item-checkbox[b-874xsn7eru] {
  position: absolute;
  width: 24px;
  height: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.checkbox-checkmark[b-874xsn7eru] {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid var(--on-surface-variant, #46464f);
  border-radius: 4px;
  background-color: transparent;
  transition: all 200ms cubic-bezier(0.2, 0, 0, 1);
  pointer-events: none;
}

.list-item-checkbox:checked + .checkbox-checkmark[b-874xsn7eru] {
  background-color: var(--primary, #6750a4);
  border-color: var(--primary, #6750a4);
}

.list-item-checkbox:checked + .checkbox-checkmark[b-874xsn7eru]::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 10px;
  border: solid var(--on-primary, #ffffff);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.list-item-checkbox:focus + .checkbox-checkmark[b-874xsn7eru] {
  outline: 2px solid var(--primary, #6750a4);
  outline-offset: 2px;
}

/* ==========================================================================
   List Item Content
   ========================================================================== */

.list-item-content[b-874xsn7eru] {
  flex: 1;
  min-width: 0;
}

.list-item-text[b-874xsn7eru] {
  display: block;
  font-size: 16px;
  line-height: 24px;
  color: var(--on-surface, #1c1b1f);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-item-text[b-874xsn7eru]  mark.search-highlight {
  background-color: var(--tertiary-container, #ffd8e4);
  color: var(--on-tertiary-container, #31111d);
  font-weight: 600;
  border-radius: 2px;
  padding: 0 2px;
}

/* ==========================================================================
   Selected Indicator
   ========================================================================== */

.selected-indicator[b-874xsn7eru] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--primary, #6750a4);
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.loading-state[b-874xsn7eru] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 16px;
}

.loading-spinner[b-874xsn7eru] {
  width: 40px;
  height: 40px;
  border: 4px solid var(--surface-container-highest, #e6e0e9);
  border-top-color: var(--primary, #6750a4);
  border-radius: 50%;
  animation: spin-b-874xsn7eru 1s linear infinite;
}

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

.loading-text[b-874xsn7eru] {
  font-size: 14px;
  color: var(--on-surface-variant, #46464f);
}

/* ==========================================================================
   No Results State
   ========================================================================== */

.no-results-state[b-874xsn7eru] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.no-results-icon[b-874xsn7eru] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
  border-radius: 50%;
  background-color: var(--surface-container-high, #ece6f0);
  color: var(--on-surface-variant, #46464f);
}

.no-results-title[b-874xsn7eru] {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 500;
  color: var(--on-surface, #1c1b1f);
}

.no-results-message[b-874xsn7eru] {
  margin: 0 0 24px 0;
  font-size: 14px;
  color: var(--on-surface-variant, #46464f);
}

.no-results-action[b-874xsn7eru] {
  padding: 10px 24px;
  border: none;
  border-radius: 20px;
  background-color: var(--primary-container, #eaddff);
  color: var(--on-primary-container, #21005e);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}

.no-results-action:hover[b-874xsn7eru] {
  background-color: var(--primary-container, #eaddff);
  opacity: 0.9;
}

.no-results-action:active[b-874xsn7eru] {
  background-color: var(--primary-container, #eaddff);
  opacity: 0.8;
}

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

.list-item-placeholder[b-874xsn7eru] {
  height: 56px;
  margin: 0 16px;
  background-color: var(--surface-container-high, #ece6f0);
  border-radius: 8px;
  overflow: hidden;
}

.placeholder-shimmer[b-874xsn7eru] {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--surface-container-highest, #e6e0e9) 50%,
    transparent 100%
  );
  animation: shimmer-b-874xsn7eru 1.5s infinite;
}

@keyframes shimmer-b-874xsn7eru {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ==========================================================================
   Selection Summary
   ========================================================================== */

.selection-summary[b-874xsn7eru] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: var(--surface-container-low, #f7f2fa);
  border-top: 1px solid var(--outline-variant, #c4c6d0);
}

.selection-count[b-874xsn7eru] {
  font-size: 14px;
  font-weight: 500;
  color: var(--on-surface, #1c1b1f);
}

.clear-selection-btn[b-874xsn7eru] {
  padding: 8px 16px;
  border: none;
  border-radius: 16px;
  background-color: transparent;
  color: var(--primary, #6750a4);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}

.clear-selection-btn:hover[b-874xsn7eru] {
  background-color: var(--surface-container-high, #ece6f0);
}

.clear-selection-btn:active[b-874xsn7eru] {
  background-color: var(--surface-container-highest, #e6e0e9);
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  .mobile-bottom-sheet-list[b-874xsn7eru] {
    --surface: #1c1b1f;
    --on-surface: #e6e1e5;
    --surface-container-high: #2b2930;
    --surface-container-highest: #36343b;
    --surface-container: #211f26;
    --surface-container-low: #1c1b1f;
    --on-surface-variant: #cac4d0;
    --outline-variant: #49454f;
    --primary: #d0bcff;
    --on-primary: #381e72;
    --primary-container: #4f378b;
    --on-primary-container: #eaddff;
    --secondary-container: #4a4458;
    --tertiary-container: #633b48;
    --on-tertiary-container: #ffd8e4;
  }

  .list-item-text[b-874xsn7eru]  mark.search-highlight {
    background-color: var(--tertiary-container, #633b48);
    color: var(--on-tertiary-container, #ffd8e4);
  }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *[b-874xsn7eru] {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .list-item:focus[b-874xsn7eru] {
    outline-width: 3px;
  }

  .checkbox-checkmark[b-874xsn7eru] {
    border-width: 3px;
  }
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 480px) {
  .search-container[b-874xsn7eru] {
    padding: 12px;
  }

  .list-item[b-874xsn7eru] {
    padding: 12px 16px;
  }

  .list-item-text[b-874xsn7eru] {
    font-size: 15px;
  }

  .no-results-state[b-874xsn7eru] {
    padding: 32px 16px;
  }
}

/* Safe area insets for notched devices */
@supports (padding: env(safe-area-inset-bottom)) {
  .selection-summary[b-874xsn7eru] {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}
/* /Components/Shared/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: #4f46e5;
  --ts-primary-hover: #4338ca;
  --ts-primary-light: #eef2ff;
  --ts-background: #f8fafc;
  --ts-surface: #ffffff;
  --ts-text-primary: #1e293b;
  --ts-text-secondary: #64748b;
  --ts-text-placeholder: #94a3b8;
  --ts-border: #e2e8f0;
  --ts-hover: #f1f5f9;
  --ts-focus: #eef2ff;
  --ts-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ts-shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --ts-shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --ts-radius: 10px;
  --ts-radius-sm: 6px;
  --ts-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tom-select-container[b-pomttcjnb0] {
  width: 100%;
  position: relative;
  z-index: 100; /* Ensure container can stack dropdown above other elements */
}

.tom-select-wrapper[b-pomttcjnb0] {
  width: 100%;
}

/* Loading State */
.tom-select-loading[b-pomttcjnb0] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius);
  min-height: 48px;
}

.loading-spinner[b-pomttcjnb0] {
  width: 20px;
  height: 20px;
  border: 2px solid var(--ts-border);
  border-top-color: var(--ts-primary);
  border-radius: 50%;
  animation: spin-b-pomttcjnb0 600ms linear infinite;
}

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

/* Error State */
.tom-select-error[b-pomttcjnb0] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #fef2f2;
  border: 1px solid #fee2e2;
  border-radius: var(--ts-radius);
  color: #991b1b;
  font-size: 14px;
}

.error-icon[b-pomttcjnb0] {
  font-size: 18px;
  color: #dc2626;
}

.retry-button[b-pomttcjnb0] {
  margin-left: auto;
  padding: 6px 12px;
  background: #dc2626;
  color: white;
  border: none;
  border-radius: var(--ts-radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--ts-transition);
}

.retry-button:hover[b-pomttcjnb0] {
  background: #b91c1c;
}

/* Label Styling */
.tom-select-label[b-pomttcjnb0] {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ts-text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.tom-select-label.required[b-pomttcjnb0] {
  display: flex;
  align-items: center;
  gap: 4px;
}

.required-indicator[b-pomttcjnb0] {
  color: #ef4444;
  font-size: 14px;
}

/* Base TomSelect Styling */
.tom-select[b-pomttcjnb0] {
  width: 100%;
}

/* Control (Search Input) */
.tom-select .ts-control[b-pomttcjnb0] {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius);
  padding: 10px 16px;
  min-height: 48px;
  font-size: 16px;
  color: var(--ts-text-primary);
  transition: var(--ts-transition);
  box-shadow: var(--ts-shadow-sm);
  cursor: text;
}

.tom-select .ts-control:hover[b-pomttcjnb0] {
  border-color: var(--ts-text-secondary);
  box-shadow: var(--ts-shadow-md);
}

.tom-select.focus .ts-control[b-pomttcjnb0],
.tom-select .ts-control:focus[b-pomttcjnb0] {
  border-color: var(--ts-primary);
  outline: none;
  box-shadow:
    0 0 0 3px var(--ts-primary-light),
    var(--ts-shadow-md);
  background: var(--ts-surface);
}

/* Input inside control */
.tom-select .ts-control input[b-pomttcjnb0] {
  font-size: 16px !important;
  color: var(--ts-text-primary);
  font-family: inherit;
}

.tom-select .ts-control input[b-pomttcjnb0]::placeholder {
  color: var(--ts-text-placeholder);
  opacity: 1;
}

/* Items (selected values) */
.tom-select .ts-control .item[b-pomttcjnb0] {
  background: var(--ts-primary);
  color: white;
  border: none;
  border-radius: var(--ts-radius-sm);
  padding: 4px 10px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 4px 2px 0;
  transition: var(--ts-transition);
}

.tom-select .ts-control .item:hover[b-pomttcjnb0] {
  background: var(--ts-primary-hover);
}

/* Dropdown Container */
.tom-select .ts-dropdown[b-pomttcjnb0] {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius);
  box-shadow: var(--ts-shadow-lg);
  margin-top: 4px;
  padding: 8px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 9999 !important; /* CRITICAL FIX: Increase z-index to overlay properly */
  position: absolute !important; /* Ensure dropdown overlays content */
  animation: fadeInSlide-b-pomttcjnb0 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Dropdown scrollbar styling */
.tom-select .ts-dropdown[b-pomttcjnb0]::-webkit-scrollbar {
  width: 8px;
}

.tom-select .ts-dropdown[b-pomttcjnb0]::-webkit-scrollbar-track {
  background: transparent;
}

.tom-select .ts-dropdown[b-pomttcjnb0]::-webkit-scrollbar-thumb {
  background: var(--ts-border);
  border-radius: 4px;
}

.tom-select .ts-dropdown[b-pomttcjnb0]::-webkit-scrollbar-thumb:hover {
  background: var(--ts-text-secondary);
}

/* Options */
.tom-select .ts-dropdown .option[b-pomttcjnb0] {
  padding: 12px 16px;
  border-radius: var(--ts-radius-sm);
  cursor: pointer;
  color: var(--ts-text-primary);
  font-size: 15px;
  transition: var(--ts-transition);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

.tom-select .ts-dropdown .option:hover[b-pomttcjnb0] {
  background: var(--ts-hover);
  color: var(--ts-text-primary);
}

.tom-select .ts-dropdown .option.active[b-pomttcjnb0] {
  background: var(--ts-focus);
  color: var(--ts-primary);
  font-weight: 500;
}

.tom-select .ts-dropdown .option.selected[b-pomttcjnb0] {
  background: var(--ts-primary-light);
  color: var(--ts-primary);
  font-weight: 500;
}

.tom-select .ts-dropdown .option.selected[b-pomttcjnb0]::after {
  content: "✓";
  margin-left: auto;
  font-weight: 600;
  color: var(--ts-primary);
}

/* Option groups */
.tom-select .ts-dropdown .optgroup-header[b-pomttcjnb0] {
  padding: 8px 16px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ts-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 8px;
}

.tom-select .ts-dropdown .optgroup-header:first-child[b-pomttcjnb0] {
  margin-top: 0;
}

.tom-select .ts-dropdown .optgroup .option[b-pomttcjnb0] {
  padding-left: 28px;
}

/* Create option */
.tom-select .ts-dropdown .create[b-pomttcjnb0] {
  padding: 12px 16px;
  border-radius: var(--ts-radius-sm);
  color: var(--ts-primary);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--ts-transition);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tom-select .ts-dropdown .create[b-pomttcjnb0]::before {
  content: "+";
  font-size: 18px;
  font-weight: 600;
}

.tom-select .ts-dropdown .create:hover[b-pomttcjnb0] {
  background: var(--ts-focus);
}

/* No results */
.tom-select .ts-dropdown .no-results[b-pomttcjnb0] {
  padding: 12px 16px;
  color: var(--ts-text-secondary);
  font-size: 15px;
  text-align: center;
}

/* Plugin: Remove Button */
.tom-select .ts-control .item .remove[b-pomttcjnb0] {
  border: none;
  background: transparent;
  color: white;
  font-size: 18px;
  padding: 0;
  margin-left: 4px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 150ms;
  line-height: 1;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tom-select .ts-control .item .remove:hover[b-pomttcjnb0] {
  opacity: 1;
}

/* Plugin: Clear Button */
.tom-select .ts-control .clear-button[b-pomttcjnb0] {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--ts-text-secondary);
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  opacity: 0.6;
  transition: var(--ts-transition);
}

.tom-select .ts-control .clear-button:hover[b-pomttcjnb0] {
  opacity: 1;
  background: var(--ts-text-primary);
}

/* Plugin: Dropdown Header */
.tom-select .ts-dropdown .dropdown-header[b-pomttcjnb0] {
  padding: 8px 16px;
  border-bottom: 1px solid var(--ts-border);
  margin: -8px -8px 8px;
  background: var(--ts-background);
  border-radius: var(--ts-radius) var(--ts-radius) 0 0;
  font-size: 13px;
  color: var(--ts-text-secondary);
  font-weight: 500;
}

/* Disabled State */
.tom-select.disabled .ts-control[b-pomttcjnb0],
.tom-select .ts-control[disabled][b-pomttcjnb0] {
  background: var(--ts-background);
  color: var(--ts-text-secondary);
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}

.tom-select.disabled .ts-control:hover[b-pomttcjnb0] {
  border-color: var(--ts-border);
  box-shadow: none;
}

/* Helper Text */
.tom-select-helper-text[b-pomttcjnb0] {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ts-text-secondary);
  line-height: 1.4;
}

/* Validation Message */
.tom-select-validation-message[b-pomttcjnb0] {
  margin-top: 6px;
  font-size: 13px;
  color: #dc2626;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tom-select-validation-message[b-pomttcjnb0]::before {
  content: "⚠";
  font-size: 14px;
}

/* Screen reader only */
.sr-only[b-pomttcjnb0] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ===== MOBILE MODE STYLES ===== */

/* Pulse animation for search chip - triggered by JS after scroll completes */
@keyframes search-pulse-b-pomttcjnb0 {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.5);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 0 12px rgba(79, 70, 229, 0.25);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
  }
}

/* Class added by JS after scroll completes to trigger pulse */
.search-chip-trigger.search-chip-pulse[b-pomttcjnb0] {
  animation: search-pulse-b-pomttcjnb0 800ms ease-out;
}

/* Search Chip Trigger - Mobile food search with clear affordance */
.search-chip-trigger[b-pomttcjnb0] {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  /* 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: #4f46e5; /* Primary brand color */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.search-chip-trigger .chip-text[b-pomttcjnb0] {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #3730a3; /* Dark indigo for readability */
  font-weight: 500;
}

/* Legacy support - keep old class for backwards compatibility */
.mobile-trigger-button[b-pomttcjnb0] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius);
  padding: 12px 16px;
  min-height: 44px;
  font-size: 16px;
  color: var(--ts-text-primary);
  cursor: pointer;
  transition: var(--ts-transition);
  box-shadow: var(--ts-shadow-sm);
  text-align: left;
  font-family: inherit;
}

.mobile-trigger-button:hover:not(:disabled)[b-pomttcjnb0] {
  border-color: var(--ts-text-secondary);
  box-shadow: var(--ts-shadow-md);
  background: var(--ts-hover);
}

.mobile-trigger-button:focus[b-pomttcjnb0] {
  outline: none;
  border-color: var(--ts-primary);
  box-shadow:
    0 0 0 3px var(--ts-primary-light),
    var(--ts-shadow-md);
}

.mobile-trigger-button:active:not(:disabled)[b-pomttcjnb0] {
  transform: scale(0.98);
}

.mobile-trigger-button:disabled[b-pomttcjnb0] {
  background: var(--ts-background);
  color: var(--ts-text-secondary);
  cursor: not-allowed;
  opacity: 0.6;
}

.mobile-trigger-button .trigger-text[b-pomttcjnb0] {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ts-text-primary);
}

.mobile-trigger-button .trigger-icon[b-pomttcjnb0] {
  flex-shrink: 0;
  margin-left: 8px;
  color: var(--ts-text-secondary);
  transition: transform 150ms;
}

.mobile-trigger-button[aria-expanded="true"] .trigger-icon[b-pomttcjnb0] {
  transform: rotate(180deg);
}

/* Mobile Selection List Container */
/* CRITICAL FIX: Container should NOT scroll - only the options list inside scrolls.
   This ensures search input and action buttons are always visible. */
.mobile-selection-list[b-pomttcjnb0] {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden; /* Container doesn't scroll - options list does */
  min-height: 200px;
  /* CRITICAL: Prevent iOS auto-zoom on interactions */
  touch-action: pan-y;
  -webkit-text-size-adjust: 100%; /* Prevent text resizing */
  /* 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(79, 70, 229, 0.1);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.mobile-option-item:hover[b-pomttcjnb0] {
  background: var(--ts-hover);
}

.mobile-option-item:active[b-pomttcjnb0] {
  transform: scale(0.98);
  background: var(--ts-focus);
}

.mobile-option-item.selected[b-pomttcjnb0] {
  background: var(--ts-primary-light);
  border-color: var(--ts-primary);
  color: var(--ts-primary);
  font-weight: 500;
}

.mobile-option-item .option-text[b-pomttcjnb0] {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit; /* CRITICAL FIX: Inherit text color from parent button */
}

/* Checkbox Indicator (for multiple selection) */
.checkbox-indicator[b-pomttcjnb0] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 12px;
  border: 2px solid var(--ts-border);
  border-radius: 4px;
  background: var(--ts-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--ts-transition);
}

.checkbox-indicator.checked[b-pomttcjnb0] {
  background: var(--ts-primary);
  border-color: var(--ts-primary);
}

.mobile-option-item:hover .checkbox-indicator[b-pomttcjnb0] {
  border-color: var(--ts-text-secondary);
}

.mobile-option-item.selected .checkbox-indicator[b-pomttcjnb0] {
  border-color: var(--ts-primary);
}

/* Selected Icon (for single selection) */
.selected-icon[b-pomttcjnb0] {
  flex-shrink: 0;
  margin-left: 12px;
  color: var(--ts-primary);
}

/* ===== SELECTED CHIPS SECTION - HORIZONTAL SCROLL ===== */
/* Inspired by Gmail recipients, SAP Fiori Filter Feedback Bar, Wise Design Chips */

/* Selected Chips Container - Compact horizontal row */
/* Collapses to compact badge when keyboard opens (see MobileBottomSheet.razor.css) */
.mobile-selected-chips[b-pomttcjnb0] {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(to right, #f0fdf4, #ecfdf5);
  border-bottom: 1px solid #d1fae5;
  flex-shrink: 0;
  min-height: 44px;
  max-height: 44px;
  /* Smooth collapse/expand transition */
  transition: all 200ms ease-out;
  /* Prevent iOS auto-zoom */
  touch-action: pan-x pan-y;
}

.mobile-selected-chips .chips-label[b-pomttcjnb0] {
  font-size: 13px; /* Keep small for visual hierarchy */
  font-weight: 600;
  color: #059669;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  padding-right: 4px;
  /* Smooth transition for keyboard collapse state */
  transition: all 200ms ease-out;
}

/* Horizontal scrolling chips container */
.mobile-selected-chips .chips-container[b-pomttcjnb0] {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  min-width: 0; /* Allow shrinking */
  padding: 2px 0;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  -webkit-overflow-scrolling: touch; /* Smooth iOS scroll */
}

.mobile-selected-chips .chips-container[b-pomttcjnb0]::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Individual Chip - Compact version */
.selected-chip[b-pomttcjnb0] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #ffffff;
  border: 1px solid #6ee7b7;
  border-radius: 14px;
  font-size: 14px; /* Increased slightly - visual only, not focusable input */
  font-weight: 500;
  color: #047857;
  cursor: pointer;
  transition: all 120ms ease;
  box-shadow: 0 1px 2px rgba(5, 150, 105, 0.1);
  flex-shrink: 0; /* Don't shrink chips */
  height: 28px; /* Slightly taller to accommodate font */
  line-height: 1;
  /* CRITICAL: Prevent iOS auto-zoom on tap */
  touch-action: pan-x pan-y;
  -webkit-tap-highlight-color: transparent;
}

.selected-chip:hover[b-pomttcjnb0] {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}

.selected-chip:hover .chip-remove-icon[b-pomttcjnb0] {
  color: #dc2626;
}

.selected-chip:active[b-pomttcjnb0] {
  transform: scale(0.95);
}

.selected-chip .chip-text[b-pomttcjnb0] {
  max-width: 100px; /* Slightly shorter for horizontal layout */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-chip .chip-remove-icon[b-pomttcjnb0] {
  flex-shrink: 0;
  color: #10b981;
  transition: color 120ms ease;
  width: 12px;
  height: 12px;
}

/* Chip Appearance Animation - Faster for horizontal flow */
@keyframes chip-pop-in-b-pomttcjnb0 {
  0% {
    opacity: 0;
    transform: scale(0.7) translateX(-10px);
  }
  60% {
    transform: scale(1.05) translateX(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}

.selected-chip.chip-animate-in[b-pomttcjnb0] {
  animation: chip-pop-in-b-pomttcjnb0 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== SELECTION FLASH ANIMATION ===== */

/* Success flash animation for selected items */
@keyframes selection-flash-b-pomttcjnb0 {
  0% {
    background: var(--ts-primary-light);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  25% {
    background: #dcfce7;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.3);
  }
  50% {
    background: #bbf7d0;
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.15);
  }
  100% {
    background: var(--ts-primary-light);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.mobile-option-item.selection-flash[b-pomttcjnb0] {
  animation: selection-flash-b-pomttcjnb0 500ms ease-out;
}

/* Checkbox checkmark animation */
@keyframes checkmark-pop-b-pomttcjnb0 {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.mobile-option-item.selection-flash .checkbox-indicator.checked[b-pomttcjnb0] {
  animation: checkmark-pop-b-pomttcjnb0 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Mobile Actions (footer buttons) - Fixed at bottom, doesn't shrink */
.mobile-actions[b-pomttcjnb0] {
  display: flex;
  flex-shrink: 0;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid var(--ts-border);
  background: var(--ts-surface);
}

.action-button[b-pomttcjnb0] {
  flex: 1;
  padding: 12px 24px;
  border: none;
  border-radius: var(--ts-radius-sm);
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: var(--ts-transition);
  min-height: 44px; /* Touch target minimum */
}

.action-button.primary[b-pomttcjnb0] {
  background: var(--ts-primary);
  color: white;
}

.action-button.primary:hover[b-pomttcjnb0] {
  background: var(--ts-primary-hover);
}

.action-button.primary:active[b-pomttcjnb0] {
  transform: scale(0.98);
}

.action-button.secondary[b-pomttcjnb0] {
  background: transparent;
  color: var(--ts-text-secondary);
  border: 1px solid var(--ts-border);
}

.action-button.secondary:hover[b-pomttcjnb0] {
  background: var(--ts-hover);
  border-color: var(--ts-text-secondary);
}

.action-button.secondary:active[b-pomttcjnb0] {
  transform: scale(0.98);
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
  .tom-select .ts-control[b-pomttcjnb0] {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom */
  }

  .tom-select .ts-dropdown[b-pomttcjnb0] {
    max-height: 240px;
  }

  .tom-select .ts-dropdown .option[b-pomttcjnb0] {
    padding: 14px 16px;
    font-size: 16px;
  }

  .tom-select-label[b-pomttcjnb0] {
    font-size: 15px;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  :root[b-pomttcjnb0] {
    --ts-primary: #6366f1;
    --ts-primary-hover: #818cf8;
    --ts-primary-light: #3730a3; /* FIX: Lighter indigo for better contrast on dark backgrounds */
    --ts-background: #0f172a;
    --ts-surface: #1e293b;
    --ts-text-primary: #f1f5f9;
    --ts-text-secondary: #94a3b8;
    --ts-text-placeholder: #64748b;
    --ts-border: #334155;
    --ts-hover: #334155;
    --ts-focus: #1e3a8a;
  }

  .tom-select-error[b-pomttcjnb0] {
    background: #7f1d1d;
    border-color: #991b1b;
    color: #fca5a5;
  }

  .error-icon[b-pomttcjnb0] {
    color: #f87171;
  }

  .retry-button[b-pomttcjnb0] {
    background: #dc2626;
  }

  .retry-button:hover[b-pomttcjnb0] {
    background: #ef4444;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .tom-select .ts-control[b-pomttcjnb0] {
    border-width: 2px;
  }

  .tom-select .ts-dropdown .option.active[b-pomttcjnb0],
  .tom-select .ts-dropdown .option.selected[b-pomttcjnb0] {
    outline: 2px solid var(--ts-primary);
    outline-offset: -2px;
  }

  .mobile-option-item.selected[b-pomttcjnb0] {
    outline: 2px solid var(--ts-primary);
    outline-offset: -2px;
  }

  .mobile-trigger-button:focus[b-pomttcjnb0] {
    outline: 2px solid var(--ts-primary);
    outline-offset: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .tom-select .ts-control[b-pomttcjnb0],
  .tom-select .ts-dropdown .option[b-pomttcjnb0],
  .loading-spinner[b-pomttcjnb0],
  .mobile-trigger-button[b-pomttcjnb0],
  .search-chip-trigger[b-pomttcjnb0],
  .mobile-option-item[b-pomttcjnb0],
  .action-button[b-pomttcjnb0] {
    animation: none;
    transition: none;
  }

  .tom-select .ts-dropdown[b-pomttcjnb0] {
    animation: none;
  }

  .mobile-trigger-button[aria-expanded="true"] .trigger-icon[b-pomttcjnb0] {
    transform: none;
  }
}

/* Focus visible (keyboard navigation) */
.tom-select .ts-dropdown .option:focus-visible[b-pomttcjnb0] {
  outline: 2px solid var(--ts-primary);
  outline-offset: -2px;
}

.mobile-option-item:focus-visible[b-pomttcjnb0] {
  outline: 2px solid var(--ts-primary);
  outline-offset: -2px;
}

.mobile-trigger-button:focus-visible[b-pomttcjnb0] {
  outline: 2px solid var(--ts-primary);
  outline-offset: 2px;
}

.action-button:focus-visible[b-pomttcjnb0] {
  outline: 2px solid var(--ts-primary);
  outline-offset: 2px;
}

/* ===== Parsed Result Styles ===== */

.parsed-result-loading[b-pomttcjnb0] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f0f4ff 0%, #e8ecf8 100%);
  border-bottom: 1px solid #e2e8f0;
  color: #6366f1;
  font-size: 14px;
}

.loading-spinner-small[b-pomttcjnb0] {
  width: 16px;
  height: 16px;
  border: 2px solid #e2e8f0;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin-b-pomttcjnb0 0.8s linear infinite;
}

/* 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: light blue tint, blue icon */
  background: var(--fs-primary-light, #e0f2fe);
  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;
}