/* =============================================
   UPGRADED MEAL CALCULATOR BAR & BOTTOM SHEET - NO PEEK FIXED
   ============================================= */

/* Floating bar style */
.tff-meal-calc-bar {
  display: none;
  position: fixed;
  bottom: calc(var(--bottom-nav-h, 64px) + var(--space-2, 8px));
  left: var(--space-4, 16px);
  right: var(--space-4, 16px);
  z-index: 300;
  background: var(--brand-color, var(--color-primary, #1A7F4B)) !important;
  color: #ffffff !important;
  border-radius: var(--radius-xl, 24px);
  padding: 12px 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  transition: transform var(--transition-base, 250ms ease), opacity var(--transition-base, 250ms ease) !important;
}

.tff-meal-calc-bar.visible {
  display: flex !important;
}

/* Desktop float positioning */
@media (min-width: 768px) {
  .tff-meal-calc-bar {
    bottom: 20px !important;
    max-width: 420px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
  }
}

.tff-calc-bar-total {
  font-weight: 800 !important;
  font-size: 16px !important;
  display: block !important;
}

.tff-calc-bar-count {
  font-size: 12px !important;
  opacity: 0.85 !important;
  display: block !important;
}

.tff-calc-bar-btn {
  background: #ffffff !important;
  color: var(--brand-color, var(--color-primary, #1A7F4B)) !important;
  padding: 8px 16px !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  border: none !important;
  min-height: 36px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Floating bounce/pulse animation */
.pulse-bar {
  animation: barBounce 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@keyframes barBounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@media (min-width: 768px) {
  .pulse-bar {
    animation: barBounceDesktop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  }
}

@keyframes barBounceDesktop {
  0%   { transform: translateX(-50%) scale(1); }
  50%  { transform: translateX(-50%) scale(1.08); }
  100% { transform: translateX(-50%) scale(1); }
}

/* =============================================
   BACKDROP BLUR MODAL SHEET OVERLAY
   ============================================= */

.tff-sheet-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(4px) !important; /* Modern glass blur overlay */
  z-index: 500 !important;
  display: none !important;
}

.tff-sheet-overlay.open {
  display: block !important;
}

/* Bottom Sheet Container */
.tff-bottom-sheet {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 501 !important;
  background: var(--color-surface, #ffffff) !important;
  border-radius: 20px 20px 0 0 !important;
  max-height: 85vh !important;
  overflow-y: auto !important;
  
  /* CRITICAL FIX: Completely hidden physically and visually by default */
  visibility: hidden !important; 
  opacity: 0 !important;
  transform: translateY(110%) !important; /* Pushed far below on mobile */
  
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s, visibility 0.3s !important;
  padding: 16px 20px 40px !important;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.15) !important;
}

/* Align modal on center on Desktop */
@media (min-width: 768px) {
  .tff-bottom-sheet {
    max-width: 480px !important;
    left: 50% !important;
    right: auto !important;
    
    /* CRITICAL FIX: Pushed 120% down on desktop to clear the bottom 20px gap */
    transform: translate(-50%, 120%) !important; 
    border-radius: 20px 20px 20px 20px !important;
    bottom: 20px !important;
    max-height: 75vh !important;
  }
}

/* Active State - Smoothly reveal on action */
.tff-bottom-sheet.open {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

@media (min-width: 768px) {
  .tff-bottom-sheet.open {
    transform: translate(-50%, 0) !important;
  }
}

.tff-sheet-handle {
  width: 40px !important;
  height: 4px !important;
  background: var(--color-border, #E2EBE4) !important;
  border-radius: 10px !important;
  margin: 0 auto 16px !important;
}

.tff-sheet-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  border-bottom: 1.5px solid var(--color-border, #E2EBE4) !important;
  padding-bottom: 12px !important;
}

.tff-sheet-header h3 {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--color-text, #1a1a1a) !important;
  margin: 0 !important;
}

.tff-sheet-clear {
  color: #DC2626 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: none !important;
  background: none !important;
  cursor: pointer !important;
}

.tff-empty-bill {
  padding: 30px 0 !important;
  color: var(--color-text-3, #7A917E) !important;
  text-align: center !important;
  font-size: 14px !important;
}

/* =============================================
   IN-SHEET QUANTITY ROW CONTROLS
   ============================================= */

.tff-bill-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--color-border, #E2EBE4) !important;
}

.tff-bill-row-details {
  display: flex !important;
  flex-direction: column !important;
}

.tff-bill-item-name {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--color-text, #1a1a1a) !important;
}

.tff-bill-item-meta {
  font-size: 12px !important;
  color: var(--color-text-3, #7A917E) !important;
  margin-top: 2px !important;
}

/* Circular App-Style Qty Selectors */
.tff-bill-row-controls {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.tff-qty-ctrl {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--color-border, #E2EBE4) !important;
  background: var(--color-bg-2, #F7F9F7) !important;
  color: var(--color-text, #1a1a1a) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.tff-qty-ctrl:hover {
  background: var(--color-bg-3, #EEF3EE) !important;
  border-color: var(--color-text-3, #7A917E) !important;
}

.tff-qty-val {
  font-size: 14px !important;
  font-weight: 800 !important;
  min-width: 16px !important;
  text-align: center !important;
}

/* Totals Panel */
.tff-sheet-totals {
  margin-top: 20px !important;
  background: var(--color-bg-2, #F7F9F7) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.tff-total-row {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 14px !important;
  color: var(--color-text-2, #4A5C4E) !important;
}

.tff-total-row.grand-total {
  border-top: 1.5px dashed var(--color-border, #E2EBE4) !important;
  padding-top: 10px !important;
  margin-top: 4px !important;
  font-size: 16px !important;
  color: var(--color-text, #1a1a1a) !important;
}

.tff-total-row.grand-total strong {
  font-size: 20px !important;
  color: var(--brand-color, var(--color-primary, #1A7F4B)) !important;
  font-weight: 800 !important;
}

.tff-sheet-disclaimer {
  font-size: 11px !important;
  color: var(--color-text-3, #7A917E) !important;
  margin-top: 12px !important;
  line-height: 1.4 !important;
}
/* =============================================
   PHASE 4 — Budget Progress Bar + Smart Upsell Toast
   All classes scoped/prefixed to avoid touching anything above.
   ============================================= */
.tff-budget-wrap {
  margin-bottom: 16px !important;
  padding-bottom: 16px !important;
  border-bottom: 1.5px dashed var(--color-border, #E2EBE4) !important;
}

.tff-budget-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.tff-budget-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--color-text-2, #4A5C4E) !important;
}

.tff-budget-input-group {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: var(--color-bg-2, #F7F9F7) !important;
  border: 1.5px solid var(--color-border, #E2EBE4) !important;
  border-radius: var(--radius-md, 12px) !important;
  padding: 4px 10px !important;
}

.tff-budget-currency {
  font-weight: 700 !important;
  color: var(--color-text-3, #7A917E) !important;
  font-size: 13px !important;
}

.tff-budget-input {
  border: none !important;
  background: transparent !important;
  width: 70px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--color-text, #1a1a1a) !important;
  outline: none !important;
  -moz-appearance: textfield;
}

.tff-budget-track {
  height: 8px !important;
  border-radius: var(--radius-full, 9999px) !important;
  background: var(--color-bg-3, #EEF3EE) !important;
  overflow: hidden !important;
  margin-bottom: 6px !important;
}

.tff-budget-fill {
  display: block !important;
  height: 100% !important;
  border-radius: var(--radius-full, 9999px) !important;
  background: var(--color-primary, #1A7F4B) !important;
  transition: width var(--transition-base, 250ms ease), background var(--transition-base, 250ms ease) !important;
}

.tff-budget-fill.over-budget {
  background: var(--color-closed, #DC2626) !important;
}

.tff-budget-status {
  font-size: 12px !important;
  color: var(--color-text-3, #7A917E) !important;
  margin: 0 !important;
}

.tff-budget-track.over-budget + .tff-budget-status {
  color: var(--color-closed, #DC2626) !important;
  font-weight: 700 !important;
}

/* Smart Upsell Toast — floats just above the calculator bar */
.tff-upsell-toast {
  position: fixed !important;
  left: var(--space-4, 16px) !important;
  right: var(--space-4, 16px) !important;
  bottom: calc(var(--bottom-nav-h, 64px) + 84px) !important;
  z-index: 299 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: var(--color-surface, #fff) !important;
  border: 1.5px solid var(--color-accent, #F4A623) !important;
  box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.1)) !important;
  border-radius: var(--radius-lg, 16px) !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--color-text, #1a1a1a) !important;
  animation: tffUpsellSlideIn var(--transition-base, 250ms ease) !important;
}

@keyframes tffUpsellSlideIn {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.tff-upsell-toast[hidden] { display: none !important; }

.tff-upsell-toast span:first-child { flex: 1 1 auto !important; }

.tff-upsell-toast-add {
  flex: 0 0 auto !important;
  background: var(--color-accent, #F4A623) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-full, 9999px) !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.tff-upsell-toast-dismiss {
  flex: 0 0 auto !important;
  background: transparent !important;
  border: none !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: var(--color-text-3, #7A917E) !important;
  cursor: pointer !important;
  padding: 0 2px !important;
}

@media (min-width: 768px) {
  .tff-upsell-toast {
    max-width: 420px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}