/*
 * FILE LOCATION:
 *   static/ai_assistant/css/chatbot.css
 *
 * FoodOnline AI Assistant — Chat Widget Styles
 * Theme: dark teal (#1a3c34) header + red (#e31837) accents
 * Matches existing FoodOnline brand exactly.
 */

/* ── CSS Variables ──────────────────────────────────────────── */
:root {
  --foi-dark:     #1a3c34;
  --foi-red:      #e31837;
  --foi-red-dk:   #c0142f;
  --foi-white:    #ffffff;
  --foi-light:    #f8f9fa;
  --foi-bg:       #f4f6f8;
  --foi-border:   #dee2e6;
  --foi-text:     #333333;
  --foi-muted:    #6c757d;
  --foi-radius:   12px;
  --foi-shadow:   0 8px 32px rgba(0, 0, 0, 0.18);
  --foi-fab-size: 58px;
}

/* ── Floating Action Button ─────────────────────────────────── */
#foi-fab {
  position:       fixed;
  bottom:         28px;
  right:          28px;
  width:          var(--foi-fab-size);
  height:         var(--foi-fab-size);
  background:     var(--foi-red);
  border-radius:  50%;
  display:        flex;
  align-items:    center;
  justify-content: center;
  cursor:         pointer;
  z-index:        9998;
  box-shadow:     0 4px 18px rgba(227, 24, 55, 0.45);
  border:         none;
  outline:        none;
  transition:     transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                  box-shadow 0.2s ease,
                  background 0.2s ease;
}
#foi-fab:hover {
  transform:  scale(1.1);
  box-shadow: 0 6px 24px rgba(227, 24, 55, 0.55);
  background: var(--foi-red-dk);
}
#foi-fab svg { pointer-events: none; }

/* Notification dot on FAB */
#foi-fab-dot {
  position:      absolute;
  top:           4px;
  right:         4px;
  width:         12px;
  height:        12px;
  background:    #ffc107;
  border-radius: 50%;
  border:        2px solid #fff;
  display:       none;
  animation:     foi-pulse 1.5s infinite;
}

/* ── Chat Window ────────────────────────────────────────────── */
#foi-chat-window {
  position:       fixed;
  bottom:         100px;
  right:          28px;
  width:          370px;
  max-height:     560px;
  background:     var(--foi-white);
  border-radius:  var(--foi-radius);
  box-shadow:     var(--foi-shadow);
  display:        flex;
  flex-direction: column;
  z-index:        9999;
  overflow:       hidden;
  /* Closed state */
  transform:      scale(0.85) translateY(20px);
  opacity:        0;
  pointer-events: none;
  transform-origin: bottom right;
  transition:     transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
                  opacity   0.22s ease;
}
#foi-chat-window.foi-open {
  transform:      scale(1) translateY(0);
  opacity:        1;
  pointer-events: all;
}

/* ── Header ─────────────────────────────────────────────────── */
#foi-chat-header {
  background:  var(--foi-dark);
  color:       var(--foi-white);
  padding:     14px 16px;
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-shrink: 0;
}
#foi-chat-header .foi-avatar {
  width:           38px;
  height:          38px;
  background:      var(--foi-red);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       18px;
  flex-shrink:     0;
}
#foi-chat-header .foi-header-info { flex: 1; }
#foi-chat-header .foi-header-name {
  font-weight:    700;
  font-size:      15px;
  letter-spacing: 0.01em;
  line-height:    1.2;
}
#foi-chat-header .foi-header-status {
  font-size:   11px;
  opacity:     0.8;
  display:     flex;
  align-items: center;
  gap:         4px;
  margin-top:  2px;
}
.foi-status-dot {
  width:         7px;
  height:        7px;
  background:    #4caf50;
  border-radius: 50%;
  display:       inline-block;
  animation:     foi-pulse 2s infinite;
}
.foi-header-actions { display: flex; gap: 6px; }
.foi-header-btn {
  background:      rgba(255, 255, 255, 0.12);
  border:          none;
  color:           #fff;
  width:           28px;
  height:          28px;
  border-radius:   6px;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       14px;
  transition:      background 0.15s;
}
.foi-header-btn:hover { background: rgba(255, 255, 255, 0.22); }

/* ── Role Badge ─────────────────────────────────────────────── */
#foi-role-badge {
  padding:    4px 16px 10px;
  background: var(--foi-dark);
  font-size:  11px;
  color:      rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}
#foi-role-badge span {
  background:     var(--foi-red);
  color:          #fff;
  padding:        1px 8px;
  border-radius:  20px;
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Messages Area ──────────────────────────────────────────── */
#foi-messages {
  flex:           1;
  overflow-y:     auto;
  padding:        14px 14px 8px;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  background:     var(--foi-bg);
  min-height:     240px;
  max-height:     340px;
  scroll-behavior: smooth;
}
#foi-messages::-webkit-scrollbar       { width: 4px; }
#foi-messages::-webkit-scrollbar-track { background: transparent; }
#foi-messages::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

/* Message wrapper */
.foi-msg {
  display:        flex;
  flex-direction: column;
  max-width:      85%;
  animation:      foi-msgIn 0.2s ease;
}
.foi-msg.foi-user  { align-self: flex-end;  align-items: flex-end; }
.foi-msg.foi-bot   { align-self: flex-start; align-items: flex-start; }

/* Bubbles */
.foi-bubble {
  padding:       10px 13px;
  border-radius: 16px;
  font-size:     13.5px;
  line-height:   1.5;
  word-break:    break-word;
  white-space:   pre-wrap;
}
.foi-msg.foi-user .foi-bubble {
  background:              var(--foi-red);
  color:                   #fff;
  border-bottom-right-radius: 4px;
}
.foi-msg.foi-bot .foi-bubble {
  background:             var(--foi-white);
  color:                  var(--foi-text);
  border-bottom-left-radius: 4px;
  box-shadow:             0 1px 4px rgba(0, 0, 0, 0.08);
  border:                 1px solid var(--foi-border);
}

/* Timestamp */
.foi-msg-time {
  font-size:  10px;
  color:      var(--foi-muted);
  margin-top: 3px;
  padding:    0 4px;
}

/* ── Typing Indicator ───────────────────────────────────────── */
#foi-typing {
  display:     none;
  align-self:  flex-start;
  align-items: flex-start;
}
#foi-typing .foi-bubble {
  background: var(--foi-white);
  border:     1px solid var(--foi-border);
  padding:    10px 16px;
}
.foi-typing-dots {
  display:     flex;
  gap:         4px;
  align-items: center;
}
.foi-typing-dots span {
  width:         7px;
  height:        7px;
  background:    var(--foi-muted);
  border-radius: 50%;
  animation:     foi-dot 1.2s infinite;
}
.foi-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.foi-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

/* ── Suggestion Chips ───────────────────────────────────────── */
#foi-suggestions {
  padding:    6px 14px 8px;
  display:    flex;
  flex-wrap:  wrap;
  gap:        6px;
  background: var(--foi-bg);
  flex-shrink: 0;
}
.foi-chip {
  background:    var(--foi-white);
  border:        1px solid var(--foi-red);
  color:         var(--foi-red);
  font-size:     11.5px;
  padding:       4px 11px;
  border-radius: 20px;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    background 0.15s, color 0.15s;
}
.foi-chip:hover {
  background: var(--foi-red);
  color:      var(--foi-white);
}

/* Post-card suggestion chips — slightly warmer tint to stand out */
.foi-chip.foi-chip-suggestion {
  background: #fff8f0;
  border-color: #f4a435;
  color: #b35c00;
}
.foi-chip.foi-chip-suggestion:hover {
  background: #f4a435;
  color: #fff;
}

/* ── Input Area ─────────────────────────────────────────────── */
#foi-input-area {
  padding:     10px 12px;
  background:  var(--foi-white);
  border-top:  1px solid var(--foi-border);
  display:     flex;
  gap:         8px;
  align-items: flex-end;
  flex-shrink: 0;
}
#foi-input-wrap {
  flex:          1;
  background:    var(--foi-light);
  border:        1.5px solid var(--foi-border);
  border-radius: 22px;
  display:       flex;
  align-items:   center;
  padding:       0 12px;
  overflow:      hidden;
  transition:    border-color 0.15s;
}
#foi-input-wrap:focus-within { border-color: var(--foi-red); }

#foi-input {
  flex:        1;
  border:      none;
  background:  transparent;
  outline:     none;
  font-size:   13.5px;
  padding:     9px 0;
  resize:      none;
  max-height:  90px;
  line-height: 1.4;
  color:       var(--foi-text);
  font-family: inherit;
}
#foi-input::placeholder { color: #aaa; }

/* Voice button */
#foi-voice-btn {
  background:  none;
  border:      none;
  color:       var(--foi-muted);
  cursor:      pointer;
  padding:     4px;
  display:     flex;
  align-items: center;
  flex-shrink: 0;
  transition:  color 0.15s;
}
#foi-voice-btn:hover             { color: var(--foi-red); }
#foi-voice-btn.foi-listening     { color: var(--foi-red); animation: foi-pulse 0.8s infinite; }

/* Send button */
#foi-send-btn {
  width:           40px;
  height:          40px;
  background:      var(--foi-red);
  color:           var(--foi-white);
  border:          none;
  border-radius:   50%;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  box-shadow:      0 2px 8px rgba(227, 24, 55, 0.3);
  transition:      background 0.15s, transform 0.15s;
}
#foi-send-btn:hover    { background: var(--foi-red-dk); transform: scale(1.06); }
#foi-send-btn:disabled { background: #ccc; cursor: not-allowed; box-shadow: none; transform: none; }

/* ── Footer ─────────────────────────────────────────────────── */
#foi-chat-footer {
  text-align:  center;
  font-size:   10.5px;
  color:       var(--foi-muted);
  padding:     6px 14px 8px;
  background:  var(--foi-white);
  border-top:  1px solid #f0f0f0;
  flex-shrink: 0;
}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes foi-pulse {
  0%,  100% { transform: scale(1);   opacity: 1; }
  50%        { transform: scale(1.3); opacity: 0.7; }
}
@keyframes foi-dot {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
  40%            { transform: scale(1);   opacity: 1; }
}
@keyframes foi-msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #foi-chat-window {
    width:      calc(100vw - 24px);
    right:      12px;
    bottom:     86px;
    max-height: 70vh;
  }
  #foi-fab {
    bottom: 18px;
    right:  18px;
  }
}


/* Phase -2  */

/* ═══════════════════════════════════════════════════════════════════
   PHASE 2 — APPEND THIS TO foodonline_main/static/ai_assistant/css/chatbot.css
   These styles render the editable AI food-item card inside the chatbot.
═══════════════════════════════════════════════════════════════════ */

/* ── Card wrapper ───────────────────────────────────────────────── */
.food-gen-card {
  background: linear-gradient(135deg, #fff9f0 0%, #fff3e0 100%);
  border: 1.5px solid #f4a435;
  border-radius: 16px;
  padding: 16px;
  margin: 10px 4px;
  box-shadow: 0 4px 18px rgba(244, 164, 53, 0.18);
  font-family: inherit;
  animation: fgcSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* ── Header ─────────────────────────────────────────────────────── */
.fgc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.fgc-icon {
  font-size: 20px;
}

.fgc-label {
  font-size: 13px;
  font-weight: 700;
  color: #b35c00;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Fields ─────────────────────────────────────────────────────── */
.fgc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  flex: 1;
}

.fgc-field label {
  font-size: 11px;
  font-weight: 600;
  color: #7a5230;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fgc-hint {
  font-weight: 400;
  text-transform: none;
  color: #aaa;
  letter-spacing: 0;
}

.fgc-input {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid #f4a435;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  color: #2d2d2d;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: vertical;
}

.fgc-input:focus {
  outline: none;
  border-color: #e07b00;
  box-shadow: 0 0 0 3px rgba(244, 164, 53, 0.2);
}

/* ── Side-by-side row ────────────────────────────────────────────── */
.fgc-row {
  display: flex;
  gap: 10px;
}

.fgc-row .fgc-field {
  flex: 1;
}

/* ── Action buttons ─────────────────────────────────────────────── */
.fgc-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.fgc-btn {
  flex: 1;
  padding: 9px 12px;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s, opacity 0.15s, box-shadow 0.15s;
}

.fgc-btn:active { transform: scale(0.97); }

.fgc-btn-save {
  background: linear-gradient(135deg, #f4a435, #e07b00);
  color: #fff;
  box-shadow: 0 3px 10px rgba(224, 123, 0, 0.35);
}

.fgc-btn-save:hover:not(:disabled) {
  box-shadow: 0 5px 16px rgba(224, 123, 0, 0.5);
  transform: translateY(-1px);
}

.fgc-btn-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.fgc-btn-discard {
  background: #fff;
  color: #c0392b;
  border: 1.5px solid #e0b8b8;
}

.fgc-btn-discard:hover {
  background: #fff5f5;
  border-color: #c0392b;
}

/* ── Status messages ────────────────────────────────────────────── */
.fgc-status {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  min-height: 18px;
}

.fgc-status-success { color: #27ae60; }
.fgc-status-error   { color: #c0392b; }

/* ── Vendor chip override ────────────────────────────────────────── */
.chip-food-gen {
  background: linear-gradient(135deg, #f4a435, #e07b00) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
}

.chip-food-gen:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}



/* ── Phase 3: Price Comparison Table ── */
.foi-price-table-wrap {
  margin: 8px 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  background: #fff;
  font-size: 12px;
}

.foi-price-table-title {
  background: #1a3c34;
  color: #fff;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 12px;
}

.foi-price-table {
  width: 100%;
  border-collapse: collapse;
}

.foi-price-table th {
  background: #f5f5f5;
  padding: 6px 8px;
  text-align: left;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #e8e8e8;
}

.foi-price-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #f0f0f0;
  color: #444;
}

.foi-price-table tr:last-child td {
  border-bottom: none;
}

.foi-price-table tr:hover td {
  background: #fafafa;
}

.foi-price-legend {
  padding: 6px 12px;
  font-size: 11px;
  color: #888;
  background: #fafafa;
  border-top: 1px solid #f0f0f0;
}

/* ════════════════════════════════════════════════
   PHASE 4 — Image Generation
════════════════════════════════════════════════ */

.fgc-btn-img {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.fgc-btn-img:hover   { opacity: 0.85; }
.fgc-btn-img:disabled { opacity: 0.5; cursor: not-allowed; }

.fgc-btn-regen {
  background: #f0f0f0;
  color: #333;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.2s;
}

.fgc-btn-regen:hover { background: #e0e0e0; }

.fgc-img-preview {
  margin-top: 8px;
}

.fgc-img-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #f8f4ff;
  border-radius: 8px;
  font-size: 12px;
  color: #7c3aed;
}

.fgc-img-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #e9d5ff;
  border-top-color: #7c3aed;
  border-radius: 50%;
  animation: foi-spin 0.8s linear infinite;
  flex-shrink: 0;
}

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

.fgc-img-wrapper {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e9d5ff;
  background: #faf5ff;
}

.fgc-img-result {
  width: 100%;
  height: auto;
  display: block;
  max-height: 220px;
  object-fit: cover;
}

.fgc-img-caption {
  padding: 6px 10px;
  font-size: 11px;
  color: #7c3aed;
  font-weight: 500;
}

.fgc-img-actions {
  display: flex;
  gap: 8px;
  padding: 6px 10px 10px;
}

.fgc-img-download {
  font-size: 11px;
  color: #7c3aed;
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid #e9d5ff;
  border-radius: 6px;
  background: #fff;
  transition: background 0.2s;
}

.fgc-img-download:hover { background: #f3e8ff; }

.fgc-img-error {
  padding: 10px 12px;
  background: #fff0f0;
  border-radius: 8px;
  font-size: 12px;
  color: #e31837;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fgc-btn-retry-img {
  background: #e31837;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
}

.fgc-btn-retry-img:hover { opacity: 0.85; }


/* ── Phase 4 Updated Styles ── */
.fgc-img-auto {
  margin-bottom: 8px;
}

.fgc-img-btns {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.fgc-btn-upload-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: #f0f7ff;
  color: #1a6bbf;
  transition: all 0.2s;
  justify-content: center;
  font-family: inherit;
}

.fgc-btn-upload-label:hover {
  background: #1a6bbf;
  color: #fff;
  border-color: #1a6bbf;
}

/* Caption variant shown after a manual upload */
.fgc-img-caption--upload {
  color: #27ae60;
}

.fgc-btn-skip-img {
  background: #f5f5f5;
  color: #888;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.fgc-btn-skip-img:hover {
  background: #ffe0e0;
  color: #e31837;
  border-color: #e31837;
}

.fgc-img-skipped {
  padding: 10px 12px;
  background: #f9f9f9;
  border-radius: 8px;
  font-size: 12px;
  color: #888;
  border: 1px dashed #ddd;
  margin-bottom: 8px;
}

.fgc-img-caption {
  padding: 6px 10px;
  font-size: 11px;
  color: #7c3aed;
  font-weight: 500;
}

/* Green caption after vendor uploads their own photo */
.fgc-img-caption--upload {
  color: #27ae60;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 5 — CUSTOMER FOOD RECOMMENDATION CARDS
   Append this to the bottom of static/ai_assistant/css/chatbot.css
═══════════════════════════════════════════════════════════════ */

/* Grid wrapper — scrollable horizontal row on mobile,
   vertical stack on desktop (chat is narrow anyway)          */
.foi-rec-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 0 10px 0;
  width: 100%;
}

/* Individual card */
.foi-rec-card {
  background: var(--foi-surface, #ffffff);
  border: 1px solid var(--foi-border, #e8ecf0);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
}

.foi-rec-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}

/* Image area */
.foi-rec-img-wrap {
  width: 100%;
  height: 130px;
  overflow: hidden;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf0 100%);
  position: relative;
}

.foi-rec-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.foi-rec-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  color: #c0ccd8;
  background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
}

/* Card body */
.foi-rec-body {
  padding: 10px 12px 6px;
  flex: 1;
}

.foi-rec-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--foi-text-primary, #1a202c);
  margin-bottom: 3px;
  line-height: 1.3;
}

.foi-rec-vendor {
  font-size: 11px;
  color: var(--foi-text-secondary, #718096);
  margin-bottom: 5px;
}

.foi-rec-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.foi-rec-category {
  font-size: 10px;
  background: var(--foi-chip-bg, #eef2ff);
  color: var(--foi-primary, #4f46e5);
  border-radius: 20px;
  padding: 2px 8px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: capitalize;
}

.foi-rec-price {
  font-size: 14px;
  font-weight: 800;
  color: var(--foi-primary, #4f46e5);
}

.foi-rec-desc {
  font-size: 11px;
  color: var(--foi-text-secondary, #718096);
  line-height: 1.45;
  margin-bottom: 4px;
}

.foi-rec-reason {
  font-size: 10px;
  color: #38a169;
  font-style: italic;
  margin-top: 2px;
}

/* Footer — Order Now button */
.foi-rec-footer {
  padding: 8px 12px 10px;
  border-top: 1px solid var(--foi-border, #e8ecf0);
}

.foi-rec-order-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--foi-primary, #4f46e5);
  color: #ffffff !important;
  text-decoration: none;
  border-radius: 8px;
  padding: 7px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: background 0.18s ease, transform 0.12s ease;
}

.foi-rec-order-btn:hover {
  background: var(--foi-primary-dark, #3730a3);
  transform: scale(1.02);
}

/* ── Phase 4 revised — upload prompt zone ── */
.fgc-img-upload-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 18px 12px;
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
  border: 2px dashed #c7d2fe;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
}

.fgc-img-upload-icon {
  font-size: 36px;
  margin-bottom: 8px;
}

.fgc-img-upload-text {
  font-size: 13px;
  font-weight: 700;
  color: #4f46e5;
  margin-bottom: 4px;
}

.fgc-img-upload-sub {
  font-size: 11px;
  color: #818cf8;
}

.fgc-btn-upload-primary {
  background: #4f46e5 !important;
  color: #ffffff !important;
  font-weight: 700;
  flex: 2;
}

.fgc-btn-upload-primary:hover {
  background: #3730a3 !important;
}

/* ═══════════════════════════════════════════════════════════════
   ORDER TRACKING CARDS
═══════════════════════════════════════════════════════════════ */
.foi-order-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 6px 0 10px;
  width: 100%;
}

.foi-order-card {
  background: var(--foi-surface, #fff);
  border: 1px solid var(--foi-border, #e8ecf0);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.foi-order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.foi-order-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--foi-text-primary, #1a202c);
}

.foi-order-status {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  border-radius: 20px;
  padding: 3px 10px;
}

.foi-order-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--foi-text-secondary, #718096);
  margin-bottom: 10px;
}

/* Timeline */
.foi-order-timeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 10px;
  overflow-x: auto;
}

.foi-tl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

.foi-tl-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: #e2e8f0;
  z-index: 0;
}

.foi-tl-active .foi-tl-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--foi-primary, #4f46e5);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--foi-primary, #4f46e5);
  z-index: 1;
  position: relative;
}

.foi-tl-inactive .foi-tl-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e2e8f0;
  z-index: 1;
  position: relative;
}

.foi-tl-label {
  font-size: 9px;
  color: var(--foi-text-secondary, #718096);
  text-align: center;
  margin-top: 4px;
  max-width: 60px;
  line-height: 1.3;
}

/* Vendor blocks */
.foi-order-vendor-block {
  background: #f8faff;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
}

.foi-order-vendor-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--foi-text-primary, #1a202c);
  margin-bottom: 5px;
}

.foi-order-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.foi-order-item-pill {
  font-size: 10px;
  background: #eef2ff;
  color: var(--foi-primary, #4f46e5);
  border-radius: 20px;
  padding: 2px 8px;
  font-weight: 600;
}

.foi-order-contacts {
  display: flex;
  gap: 6px;
}

.foi-order-contact-btn {
  font-size: 11px;
  font-weight: 700;
  background: var(--foi-primary, #4f46e5);
  color: #fff !important;
  text-decoration: none;
  border-radius: 6px;
  padding: 4px 10px;
  transition: background 0.15s;
}

.foi-order-contact-btn:hover {
  background: var(--foi-primary-dark, #3730a3);
}

/* ═══════════════════════════════════════════════════════════════
   REORDER CARDS (extends .foi-rec-card)
═══════════════════════════════════════════════════════════════ */
.foi-reorder-card {
  position: relative;
}

.foi-reorder-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #f59e0b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 8px;
  z-index: 2;
}

.foi-reorder-copy-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--foi-primary, #4f46e5);
  margin-bottom: 2px;
}

.foi-reorder-copy-sub {
  font-size: 11px;
  color: var(--foi-text-secondary, #718096);
  font-style: italic;
  margin-bottom: 6px;
  line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════════════
   PHASE 6 — VENDOR / RESTAURANT CARDS
═══════════════════════════════════════════════════════════════ */
.foi-vendor-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 6px 0 10px;
  width: 100%;
}

.foi-vendor-card {
  background: var(--foi-surface, #fff);
  border: 1px solid var(--foi-border, #e8ecf0);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: box-shadow 0.2s;
}

.foi-vendor-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

.foi-vendor-img-wrap {
  width: 100%;
  height: 110px;
  overflow: hidden;
  background: #f0f4ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.foi-vendor-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foi-vendor-cover-placeholder {
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f0f4ff, #e8ecf8);
}

.foi-vendor-body {
  padding: 10px 12px 6px;
}

.foi-vendor-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--foi-text-primary, #1a202c);
  margin-bottom: 4px;
}

.foi-vendor-dist {
  font-size: 11px;
  color: var(--foi-primary, #4f46e5);
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

.foi-vendor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}

.foi-vendor-tag {
  font-size: 10px;
  background: #eef2ff;
  color: var(--foi-primary, #4f46e5);
  border-radius: 20px;
  padding: 2px 8px;
  font-weight: 600;
}

.foi-vendor-footer {
  padding: 8px 12px 10px;
}

.foi-vendor-btn {
  display: block;
  text-align: center;
  background: var(--foi-primary, #4f46e5);
  color: #fff !important;
  text-decoration: none;
  border-radius: 8px;
  padding: 8px;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.15s;
}

.foi-vendor-btn:hover {
  background: var(--foi-primary-dark, #3730a3);
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 7 — ADD TO CART + VENDOR INFO PANEL
═══════════════════════════════════════════════════════════════ */

/* Two-button footer row */
.foi-rec-footer--two,
.foi-vendor-footer--two {
  display: flex;
  gap: 6px;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--foi-border, #e8ecf0);
}

/* Primary cart button */
.foi-rec-btn-primary {
  flex: 1;
  background: var(--foi-red, #e31837) !important;
  color: #fff !important;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, transform 0.12s !important;
}
.foi-rec-btn-primary:hover {
  background: var(--foi-red-dk, #c0142f) !important;
  transform: scale(1.02) !important;
}
.foi-rec-btn-primary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none !important;
}

/* Secondary / View Menu link */
.foi-rec-btn-secondary {
  flex: 1;
  background: var(--foi-white, #fff) !important;
  color: var(--foi-red, #e31837) !important;
  border: 1.5px solid var(--foi-red, #e31837) !important;
  text-align: center;
}
.foi-rec-btn-secondary:hover {
  background: #fff5f7 !important;
}

/* Vendor footer two-button override */
.foi-vendor-footer--two {
  border-top: 1px solid var(--foi-border, #e8ecf0);
}

.foi-vendor-info-btn {
  flex: 1;
  background: #f0f4ff;
  color: var(--foi-primary, #4f46e5);
  border: 1.5px solid #c7d2fe;
  border-radius: 8px;
  padding: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.foi-vendor-info-btn:hover {
  background: #e0e7ff;
}

/* ── Vendor Info Panel ───────────────────────────────────── */
.foi-vendor-info-panel {
  margin: 0 12px 12px;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  overflow: hidden;
  font-size: 12px;
  animation: foi-msgIn 0.2s ease;
}

.foi-vendor-info-loading,
.foi-vendor-info-error {
  padding: 12px;
  color: var(--foi-muted, #6c757d);
  text-align: center;
}

.foi-vi-header {
  background: var(--foi-dark, #1a3c34);
  color: #fff;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.foi-vi-open   { color: #4ade80; font-size: 11px; font-weight: 700; }
.foi-vi-closed { color: #f87171; font-size: 11px; font-weight: 700; }

.foi-vi-contacts {
  padding: 8px 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.foi-vi-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--foi-text, #333);
  text-decoration: none;
  font-size: 12px;
  line-height: 1.4;
}

.foi-vi-row:hover { color: var(--foi-red, #e31837); }

.foi-vi-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }

/* Opening hours */
.foi-vi-hours {
  padding: 8px 12px;
  background: #f8faff;
  border-top: 1px solid #e8ecf0;
}

.foi-vi-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--foi-primary, #4f46e5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.foi-vi-hours-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px solid #eef2ff;
  font-size: 11px;
}
.foi-vi-hours-row:last-child { border-bottom: none; }

.foi-vi-day  { font-weight: 600; color: var(--foi-text, #333); }
.foi-vi-time { color: var(--foi-muted, #718096); }

.foi-vi-footer {
  padding: 8px 12px 10px;
  background: #fff;
  border-top: 1px solid #e8ecf0;
}

/* ═══════════════════════════════════════════════════════════════
   PROACTIVE DEAL NUDGE
═══════════════════════════════════════════════════════════════ */
.foi-nudge-bubble {
  background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%) !important;
  border: 1.5px solid #f4a435 !important;
  color: #7a4f00 !important;
  font-weight: 500;
}

.foi-nudge-msg {
  animation: foi-nudgeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes foi-nudgeIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}


/* ── REVIEW SYSTEM ─────────────────────────────────────── */
.foi-review-list { display:flex; flex-direction:column; gap:8px; margin:4px 0; }

.foi-review-item-card {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--foi-bg-light, #fafafa);
  border:1px solid #eee; border-radius:10px; padding:10px 12px;
}
.foi-review-item-title { font-weight:600; font-size:13px; }
.foi-review-item-vendor { font-size:11px; color:#888; margin-top:2px; }
.foi-review-start-btn {
  background:#f39c12; color:#fff; border:none;
  border-radius:8px; padding:6px 12px; font-size:12px;
  cursor:pointer; white-space:nowrap;
}
.foi-review-start-btn:hover { background:#e67e22; }

/* Review modal */
.foi-review-modal {
  background:#fff; border:1px solid #eee; border-radius:14px;
  padding:16px; margin:4px 0; width:100%; box-sizing:border-box;
}
.foi-review-modal-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:12px; font-size:13px;
}
.foi-review-modal-close {
  background:none; border:none; cursor:pointer; font-size:16px; color:#999;
}

/* Half-star picker */
.foi-star-picker { display:flex; gap:2px; margin:8px 0 4px; font-size:28px; cursor:pointer; }
.foi-star-wrap { display:inline-flex; position:relative; }
.foi-star-half, .foi-star-full { color:#ccc; transition:color 0.1s; user-select:none; }
.foi-star-half { position:absolute; left:0; width:50%; overflow:hidden; }
.foi-star-label { font-size:12px; color:#666; margin-bottom:10px; min-height:16px; }

/* Comment field */
.foi-review-field { margin:8px 0; }
.foi-review-comment {
  width:100%; box-sizing:border-box;
  border:1px solid #ddd; border-radius:8px;
  padding:8px; font-size:13px; resize:vertical;
  font-family:inherit;
}
.foi-review-comment:focus { outline:none; border-color:#e31837; }
.foi-review-charcount { font-size:11px; color:#aaa; text-align:right; }

/* Photo upload */
.foi-review-photo-row { margin:8px 0; }
.foi-review-photo-label {
  font-size:12px; color:#555; cursor:pointer;
  display:inline-block; padding:5px 10px;
  border:1px dashed #ccc; border-radius:8px;
}
.foi-review-photo-thumb {
  width:60px; height:60px; object-fit:cover;
  border-radius:6px; margin-top:6px; display:block;
}

/* Actions */
.foi-review-modal-actions { display:flex; gap:8px; margin-top:12px; }
.foi-review-submit-btn {
  flex:1; background:#e31837; color:#fff; border:none;
  border-radius:10px; padding:10px; font-size:13px;
  cursor:pointer; font-weight:600;
}
.foi-review-submit-btn:disabled { background:#ccc; cursor:not-allowed; }
.foi-review-submit-btn:hover:not(:disabled) { background:#c0392b; }
.foi-review-cancel-btn {
  background:none; border:1px solid #ddd; border-radius:10px;
  padding:10px 16px; font-size:13px; cursor:pointer; color:#666;
}
.foi-review-modal-status { font-size:12px; margin-top:6px; min-height:14px; }

/* Rated recommendation card extras */
.foi-rec-card--rated .foi-rec-rating-row { display:flex; align-items:center; gap:6px; font-size:12px; margin:4px 0; }
.foi-rec-review-count { color:#888; }
.foi-rec-no-reviews { color:#bbb; font-size:11px; }
.foi-rec-top-review { font-size:11px; color:#666; font-style:italic; margin:4px 0; border-left:2px solid #f39c12; padding-left:6px; }
.foi-inline-stars { font-size:13px; }

/* Chip variants */
.foi-chip-review { background:#fff3cd !important; color:#856404 !important; border-color:#ffc107 !important; }
.foi-chip-tour   { background:#e8f4fd !important; color:#0c5460 !important; border-color:#bee5eb !important; }
.foi-chip-flow   { background:#f0fff4 !important; color:#155724 !important; border-color:#c3e6cb !important; }

/* ── ONBOARDING TOUR ───────────────────────────────────── */
.foi-tour-bubble {
  background:linear-gradient(135deg,#fff8f0,#fff) !important;
  border:2px solid #f39c12 !important;
}
.foi-tour-title  { font-size:14px; display:block; margin-bottom:4px; }
.foi-tour-progress {
  font-size:10px; color:#aaa; text-align:right;
  margin-top:8px; border-top:1px solid #f5e6d0; padding-top:4px;
}

/* FAB pulse animation for new users */
@keyframes foi-pulse {
  0%   { box-shadow:0 0 0 0 rgba(227,24,55,0.6); }
  70%  { box-shadow:0 0 0 14px rgba(227,24,55,0); }
  100% { box-shadow:0 0 0 0 rgba(227,24,55,0); }
}
.foi-fab-pulse { animation:foi-pulse 1s ease-out 3; }

/* ── CART +/- CONTROLS ─────────────────────────────────── */
.foi-cart-ctrl {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: #e31837;
  border-radius: 8px;
  overflow: hidden;
  height: 34px;
}
.foi-cart-minus,
.foi-cart-plus {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  width: 36px;
  height: 34px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}
.foi-cart-minus:hover { background: rgba(0,0,0,0.15); }
.foi-cart-plus:hover  { background: rgba(0,0,0,0.15); }
.foi-cart-qty {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  min-width: 24px;
  text-align: center;
}