/**
 * Flavor Cart Pro - Order Tracker CSS v8
 * Shortcode button, glass morphism, status animation, dual rating, classic professional
 */

/* ── Root Variables ─────────────────────────────────────────────────────────── */
:root {
  --fct-primary:     var(--fc-primary, #1a1a1a);
  --fct-secondary:   var(--fc-secondary, #d4a72c);
  --fct-bg:          #ffffff;
  --fct-border:      rgba(0,0,0,0.08);
  --fct-radius:      14px;
  --fct-shadow:      0 8px 36px rgba(0,0,0,0.16);
  --fct-dur:         300ms;
  --fct-ease:        cubic-bezier(0.34,1.56,0.64,1);

  --fct-pending-bg:    #fff8e7; --fct-pending-c:  #9a6500;
  --fct-process-bg:   #edf5ff; --fct-process-c:  #1a5fa0;
  --fct-onhold-bg:    #f0fff4; --fct-onhold-c:   #176639;
  --fct-done-bg:      #f5f5f5; --fct-done-c:     #444444;
  --fct-cancel-bg:    #fff0f0; --fct-cancel-c:   #c0392b;

  --fct-star-empty:  #d1d5db;
  --fct-star-filled: #f59e0b;

  /* Overridable from settings */
  --fct-btn-bg:       var(--fct-primary);
  --fct-btn-text:     #ffffff;
  --fct-btn-border:   transparent;
  --fct-popup-bg:     #ffffff;
  --fct-text:         #333333;
  --fct-text-light:   #888888;
  --fct-glass-op:     0.80;
  --fct-glass-blur:   20;
  --fct-glass-text:        #ffffff;
  --fct-glass-text-light:  rgba(255,255,255,0.75);
}

/* ── Shortcode Button ────────────────────────────────────────────────────────── */
.fc-tracker-btn-shortcode {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: var(--fct-btn-py, 10px) var(--fct-btn-px, 18px);
  min-height: var(--fct-btn-height, 44px);
  background: var(--fct-btn-bg);
  color: var(--fct-btn-text);
  border: 2px solid transparent;
  border-radius: var(--fct-btn-radius, 40px);
  font-size: var(--fct-btn-fs, 13px);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,0.16);
  transition: box-shadow 0.22s, transform 0.18s, border-color 0.3s, background 0.3s;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  font-family: inherit;
}
.fc-tracker-btn-shortcode:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.2);
}
.fc-tracker-btn-shortcode:focus-visible {
  outline: 2px solid var(--fct-secondary);
  outline-offset: 3px;
}

/* Status tints */
.fc-tracker-btn-shortcode.fct-btn-processing { background: #1a5fa0; }
.fc-tracker-btn-shortcode.fct-btn-pending     { background: #8a5d00; }
.fc-tracker-btn-shortcode.fct-btn-onhold      { background: #176639; }
.fc-tracker-btn-shortcode.fct-btn-completed   { background: #3a3a3a; }

/* Pulse ring when active */
.fc-tracker-btn-shortcode.fct-btn-active::before,
.fc-tracker-btn-shortcode.fct-btn-active::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 44px;
  border: 2px solid var(--fct-secondary);
  animation: fct-pulse 2.4s ease-out infinite;
  opacity: 0;
  pointer-events: none;
}
.fc-tracker-btn-shortcode.fct-btn-active::after { animation-delay: 1.2s; }
@keyframes fct-pulse {
  0%   { transform: scale(0.96); opacity: 0.55; }
  70%  { transform: scale(1.1);  opacity: 0; }
  100% { transform: scale(1.1);  opacity: 0; }
}

/* Status-change animation: border flash + glow */
.fc-tracker-btn-shortcode.fct-btn-status-changed {
  border-color: var(--fct-btn-border, var(--fct-secondary)) !important;
  animation: fct-status-glow 4s ease forwards;
}
@keyframes fct-status-glow {
  0%   { box-shadow: 0 0 0 0 rgba(212,167,44,0.7); }
  15%  { box-shadow: 0 0 0 10px rgba(212,167,44,0.35); }
  30%  { box-shadow: 0 0 0 0 rgba(212,167,44,0); }
  45%  { box-shadow: 0 0 0 10px rgba(212,167,44,0.25); }
  60%  { box-shadow: 0 0 0 0 rgba(212,167,44,0); }
  100% { box-shadow: 0 4px 18px rgba(0,0,0,0.16); border-color: transparent; }
}

/* Badge */
.fc-tracker-sc-badge {
  min-width: 19px; height: 19px; padding: 0 4px;
  background: #e74c3c; color: #fff;
  border-radius: 10px; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  animation: fct-badge-pop 0.35s var(--fct-ease);
}
@keyframes fct-badge-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.fc-tracker-sc-icon { display: flex; flex-shrink: 0; }

/* ── Overlay ─────────────────────────────────────────────────────────────────── */
.fc-tracker-overlay {
  position: fixed; inset: 0; z-index: 99980;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 24px;
  animation: fct-overlay-in 0.2s ease;
}
@keyframes fct-overlay-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Popup ───────────────────────────────────────────────────────────────────── */
.fc-tracker-popup {
  width: min(420px, 96vw);
  max-height: min(640px, 85vh);
  display: flex; flex-direction: column;
  background: var(--fct-popup-bg);
  border-radius: var(--fct-radius);
  box-shadow: var(--fct-shadow);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--fct-text);
}
.fc-tracker-popup.fct-popup-animate {
  animation: fct-popup-in 0.32s var(--fct-ease);
}
@keyframes fct-popup-in {
  from { opacity: 0; transform: translateY(28px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes fct-popup-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(20px) scale(0.97); }
}

/* Glass */
.fc-tracker-glass {
  background: rgba(255,255,255,calc(var(--fct-glass-op,0.8))) !important;
  backdrop-filter: blur(calc(var(--fct-glass-blur,20) * 1px));
  -webkit-backdrop-filter: blur(calc(var(--fct-glass-blur,20) * 1px));
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: var(--fct-glass-text, var(--fct-text));
}
.fc-tracker-glass .fc-tracker-order { background: rgba(255,255,255,0.45); }
.fc-tracker-glass .fc-tracker-order-num,
.fc-tracker-glass .fc-tracker-item-name,
.fc-tracker-glass .fc-tracker-title,
.fc-tracker-glass .fc-tracker-total { color: var(--fct-glass-text, var(--fct-text)); }
.fc-tracker-glass .fc-tracker-item-desc,
.fc-tracker-glass .fc-tracker-item-qty,
.fc-tracker-glass .fc-tracker-review-title { color: var(--fct-glass-text-light, var(--fct-text-light)); }

/* ── Header ──────────────────────────────────────────────────────────────────── */
.fc-tracker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--fct-primary); color: #fff; flex-shrink: 0;
}
.fc-tracker-header-left { display: flex; align-items: center; gap: 8px; }
.fc-tracker-header-icon { opacity: 0.8; display: flex; }
.fc-tracker-title { margin: 0; font-size: 14px; font-weight: 700; }
.fc-tracker-close {
  background: rgba(255,255,255,0.12); border: none; color: #fff;
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.18s; padding: 0;
}
.fc-tracker-close:hover { background: rgba(255,255,255,0.22); }

/* ── Body ────────────────────────────────────────────────────────────────────── */
.fc-tracker-body {
  flex: 1; overflow-y: auto; padding: 12px 14px; scroll-behavior: smooth;
}
.fc-tracker-body::-webkit-scrollbar { width: 4px; }
.fc-tracker-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }

/* ── Loading / Empty ─────────────────────────────────────────────────────────── */
.fc-tracker-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; color: var(--fct-text-light); font-size: 13px; }
.fc-tracker-spinner { width: 28px; height: 28px; border: 3px solid rgba(0,0,0,0.08); border-top-color: var(--fct-primary); border-radius: 50%; animation: fct-spin 0.65s linear infinite; }
@keyframes fct-spin { to { transform: rotate(360deg); } }
.fc-tracker-empty { text-align: center; padding: 40px 20px; color: var(--fct-text-light); font-size: 13px; }
.fc-tracker-empty svg { opacity: 0.2; margin-bottom: 10px; }

/* ── Order Card ──────────────────────────────────────────────────────────────── */
.fc-tracker-order {
  background: #fff; border: 1px solid var(--fct-border);
  border-radius: 11px; margin-bottom: 11px; overflow: hidden;
  transition: box-shadow 0.22s;
  animation: fct-card-in 0.28s ease;
}
.fc-tracker-order:last-child { margin-bottom: 0; }
@keyframes fct-card-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* Highlight updated card */
.fc-tracker-order.fct-card-updated { animation: fct-card-update 2s ease; }
@keyframes fct-card-update {
  0%   { box-shadow: 0 0 0 0 rgba(212,167,44,0.5); }
  30%  { box-shadow: 0 0 0 6px rgba(212,167,44,0.25); }
  100% { box-shadow: none; }
}

/* Order header */
.fc-tracker-order-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--fct-border); flex-wrap: wrap; gap: 6px; }
.fc-tracker-order-num { font-size: 11.5px; font-weight: 700; color: var(--fct-text); opacity: 0.55; }

/* Status */
.fc-tracker-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600;
  animation: fct-status-in 0.35s ease;
}
@keyframes fct-status-in { from { opacity:0; transform:scale(0.85); } to { opacity:1; transform:scale(1); } }
.fc-t-pending    { background: var(--fct-pending-bg);  color: var(--fct-pending-c);  }
.fc-t-processing { background: var(--fct-process-bg);  color: var(--fct-process-c);  }
.fc-t-onhold     { background: var(--fct-onhold-bg);   color: var(--fct-onhold-c);   }
.fc-t-completed  { background: var(--fct-done-bg);     color: var(--fct-done-c);     }
.fc-t-cancelled  { background: var(--fct-cancel-bg);   color: var(--fct-cancel-c);   }

/* Progress */
.fc-tracker-progress { height: 3px; background: var(--fct-border); }
.fc-tracker-progress-bar { height: 100%; border-radius: 3px; transition: width 0.8s ease, background 0.5s; }
[data-status="pending"]    .fc-tracker-progress-bar { background: var(--fct-pending-c); }
[data-status="processing"] .fc-tracker-progress-bar { background: var(--fct-process-c); }
[data-status="on-hold"]    .fc-tracker-progress-bar { background: var(--fct-onhold-c); }
[data-status="completed"]  .fc-tracker-progress-bar { background: var(--fct-onhold-c); }
[data-status="cancelled"]  .fc-tracker-progress-bar { background: var(--fct-cancel-c); }

/* Customer */
.fc-tracker-customer { padding: 7px 12px; border-bottom: 1px solid var(--fct-border); font-size: 12px; color: var(--fct-text-light); display: flex; gap: 10px; flex-wrap: wrap; }

/* Items */
.fc-tracker-items { padding: 8px 12px; border-bottom: 1px solid var(--fct-border); }
.fc-tracker-item { display: flex; align-items: flex-start; gap: 9px; padding: 5px 0; border-bottom: 1px dashed rgba(0,0,0,0.05); }
.fc-tracker-item:last-child { border-bottom: none; }
.fc-tracker-item-img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; flex-shrink: 0; background: #f3f3f3; }
.fc-tracker-item-info { flex: 1; min-width: 0; }
.fc-tracker-item-name { font-size: 12px; font-weight: 600; color: var(--fct-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-tracker-item-desc { font-size: 11px; color: var(--fct-text-light); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-tracker-item-qty  { font-size: 11px; color: var(--fct-text-light); }
.fc-tracker-item-total { font-size: 12px; font-weight: 600; color: var(--fct-secondary); white-space: nowrap; align-self: center; }

/* Total */
.fc-tracker-total { display: flex; justify-content: space-between; padding: 9px 12px; font-size: 12.5px; font-weight: 700; color: var(--fct-text); border-bottom: 1px solid var(--fct-border); }
.fc-tracker-total-amount { color: var(--fct-secondary); }

/* ── Review Section ──────────────────────────────────────────────────────────── */
.fc-tracker-review-section { padding: 10px 12px; }
.fc-tracker-review-form    { display: flex; flex-direction: column; gap: 8px; }
.fc-tracker-review-row-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fc-tracker-rl { font-size: 11.5px; font-weight: 600; color: var(--fct-text-light); min-width: 90px; }

/* Stars */
.fc-tracker-stars { display: flex; flex-direction: row-reverse; gap: 3px; }
[dir="ltr"] .fc-tracker-stars { flex-direction: row; }
.fc-tracker-star {
  font-size: 20px; cursor: pointer; color: var(--fct-star-empty);
  transition: color 0.15s, transform 0.12s; line-height: 1; user-select: none;
}
.fc-tracker-star:hover,
.fc-tracker-star.active { color: var(--fct-star-filled); transform: scale(1.2); }

.fc-tracker-hint { font-size: 11px; color: var(--fct-text-light); min-width: 50px; min-height: 14px; transition: color 0.18s; }

.fc-tracker-review-textarea {
  width: 100%; border: 1px solid var(--fct-border); border-radius: 8px;
  padding: 7px 9px; font-size: 12px; resize: none; font-family: inherit;
  background: rgba(0,0,0,0.02); color: var(--fct-text); transition: border-color 0.2s; box-sizing: border-box;
}
.fc-tracker-review-textarea:focus { outline: none; border-color: var(--fct-secondary); }

.fc-tracker-submit-review {
  width: 100%; padding: 8px; border: none; border-radius: 8px;
  background: var(--fct-primary); color: #fff;
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: opacity 0.2s, transform 0.15s; font-family: inherit;
}
.fc-tracker-submit-review:hover { opacity: 0.87; transform: translateY(-1px); }
.fc-tracker-submit-review:disabled { opacity: 0.45; cursor: not-allowed; }

/* Submitted review */
.fc-tracker-review-done {
  padding: 9px 10px; background: rgba(39,174,96,0.07);
  border-radius: 8px; border: 1px solid rgba(39,174,96,0.2);
}
.fct-review-appear { animation: fct-card-in 0.35s ease; }
.fc-tracker-review-row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.fc-rr-label { font-size: 11.5px; color: var(--fct-text-light); min-width: 80px; }
.fc-rr-stars { font-size: 14px; }
.fc-tracker-review-text-display { font-size: 12px; color: var(--fct-text); font-style: italic; margin-top: 4px; }
.fct-thanks { font-size: 12px; color: #27ae60; margin: 5px 0 0; font-weight: 600; }

@media (max-width: 480px) {
  .fc-tracker-overlay { padding-bottom: 10px; }
  .fc-tracker-popup   { max-height: 82vh; }
}

/* ── New Animation Types ──────────────────────────────────────────────────── */
:root {
  --fct-btn-anim-speed: 1000ms;
  /* Per-status custom colors (overridable) */
  --fct-color-pending:    ;
  --fct-color-processing: ;
  --fct-color-onhold:     ;
  --fct-color-cashier:    ;
  --fct-color-completed:  ;
  --fct-color-cancelled:  ;
}

/* Awaiting-cashier status */
.fc-t-cashier {
  background: #fff3e0;
  color: #e65100;
}
[data-status="awaiting-cashier"] .fc-tracker-progress-bar { background: #e65100; }

/* Status tint for awaiting-cashier button */
.fc-tracker-btn-shortcode.fct-btn-awaitingcashier { background: #e65100; }

/* Custom status colors from settings */
.fc-tracker-btn-shortcode.fct-btn-processing { background: var(--fct-color-processing, #1a5fa0); }
.fc-tracker-btn-shortcode.fct-btn-pending     { background: var(--fct-color-pending, #8a5d00); }
.fc-tracker-btn-shortcode.fct-btn-onhold      { background: var(--fct-color-onhold, #176639); }
.fc-tracker-btn-shortcode.fct-btn-awaitingcashier { background: var(--fct-color-cashier, #e65100); }
.fc-tracker-btn-shortcode.fct-btn-completed   { background: var(--fct-color-completed, #3a3a3a); }
.fc-tracker-btn-shortcode.fct-btn-cancelled   { background: var(--fct-color-cancelled, #c0392b); }

/* Remove default status tints now using CSS vars */
.fc-tracker-btn-shortcode.fct-btn-processing { background: var(--fct-color-processing, #1a5fa0); }
.fc-tracker-btn-shortcode.fct-btn-pending     { background: var(--fct-color-pending, #8a5d00); }
.fc-tracker-btn-shortcode.fct-btn-onhold      { background: var(--fct-color-onhold, #176639); }
.fc-tracker-btn-shortcode.fct-btn-completed   { background: var(--fct-color-completed, #3a3a3a); }

/* Status name text in button */
.fct-btn-status-text { font-size: 10px; opacity: 0.85; font-weight: 400; }

/* Remove ::before/::after from pulse animation - use class-based instead */
.fc-tracker-btn-shortcode.fct-btn-active.fct-anim-pulse::before,
.fc-tracker-btn-shortcode.fct-btn-active.fct-anim-pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 44px;
  border: 2px solid var(--fct-secondary);
  animation: fct-pulse var(--fct-btn-anim-speed, 1000ms) ease-out infinite;
  opacity: 0;
  pointer-events: none;
}
.fc-tracker-btn-shortcode.fct-btn-active.fct-anim-pulse::after {
  animation-delay: calc(var(--fct-btn-anim-speed, 1000ms) / 2);
}

/* Override default pulse rings to only show when fct-anim-pulse */
.fc-tracker-btn-shortcode.fct-btn-active::before,
.fc-tracker-btn-shortcode.fct-btn-active::after {
  animation: none;
  opacity: 0;
}

/* Bounce */
.fc-tracker-btn-shortcode.fct-btn-active.fct-anim-bounce {
  animation: fct-bounce var(--fct-btn-anim-speed, 1000ms) ease infinite;
}
@keyframes fct-bounce {
  0%, 100% { transform: translateY(0); }
  40%       { transform: translateY(-5px); }
  60%       { transform: translateY(-3px); }
}

/* Glow */
.fc-tracker-btn-shortcode.fct-btn-active.fct-anim-glow {
  animation: fct-glow var(--fct-btn-anim-speed, 1000ms) ease-in-out infinite;
}
@keyframes fct-glow {
  0%, 100% { box-shadow: 0 4px 18px rgba(0,0,0,0.16); }
  50%       { box-shadow: 0 4px 24px rgba(212,167,44,0.6), 0 0 12px rgba(212,167,44,0.4); }
}

/* Shake */
.fc-tracker-btn-shortcode.fct-btn-active.fct-anim-shake {
  animation: fct-shake var(--fct-btn-anim-speed, 1000ms) ease infinite;
}
@keyframes fct-shake {
  0%, 80%, 100% { transform: translateX(0); }
  10%, 30%, 50% { transform: translateX(-3px); }
  20%, 40%, 60% { transform: translateX(3px); }
}

/* Rotate */
.fc-tracker-btn-shortcode.fct-btn-active.fct-anim-rotate .fc-tracker-sc-icon {
  animation: fct-rotate var(--fct-btn-anim-speed, 1000ms) linear infinite;
  display: inline-flex;
}
@keyframes fct-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Border Blink (Soft Warning) ─────────────────────────────────────────── */
/* Very soft blinking border - gentle warning when active orders exist */
.fc-tracker-btn-shortcode.fct-btn-active.fct-anim-border-blink {
  animation: fct-border-blink var(--fct-btn-anim-speed, 1000ms) ease-in-out infinite;
}
@keyframes fct-border-blink {
  0%   { border-color: transparent;                                    box-shadow: 0 4px 18px rgba(0,0,0,0.16); }
  40%  { border-color: rgba(212,167,44,0.85); border-width: 2px;      box-shadow: 0 4px 22px rgba(212,167,44,0.35); }
  55%  { border-color: rgba(212,167,44,0.85);                          box-shadow: 0 4px 22px rgba(212,167,44,0.35); }
  100% { border-color: transparent;                                    box-shadow: 0 4px 18px rgba(0,0,0,0.16); }
}

/* Latest order name in button */
.fct-btn-latest-order {
  font-size: 10px;
  opacity: 0.8;
  font-weight: 400;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}