/* AvicMarket Food Market – Frontend Styles */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Playfair+Display:wght@700&display=swap');

:root {
  --amf-red:    #c0392b;
  --amf-green:  #27ae60;
  --amf-bg:     #fff9f8;
  --amf-card:   #ffffff;
  --amf-radius: 16px;
  --amf-shadow: 0 4px 24px rgba(192,57,43,.10);
}

.amf-wrapper { font-family: 'Nunito', sans-serif; }

/* ── Filter Bar ── */
.amf-filter-bar { background:#fff; border-radius:14px; padding:18px; box-shadow:0 2px 12px rgba(0,0,0,.07); }

/* ── Food Card ── */
.amf-card {
  border-radius: var(--amf-radius);
  overflow: hidden;
  box-shadow: var(--amf-shadow);
  background: var(--amf-card);
  transition: transform .25s ease, box-shadow .25s ease;
  border: 1.5px solid rgba(192,57,43,.08);
}
.amf-card:hover { transform: translateY(-6px); box-shadow: 0 12px 36px rgba(192,57,43,.18); }

.amf-card-img-wrap { position: relative; height: 200px; overflow: hidden; background: #f5ece9; }
.amf-card-img { width:100%; height:100%; object-fit: cover; transition: transform .4s ease; }
.amf-card:hover .amf-card-img { transform: scale(1.06); }
.amf-card-img-placeholder { display:flex; align-items:center; justify-content:center; height:100%; font-size:4rem; color:#ddd; }

.amf-badge {
  position: absolute; top:12px; left:12px; z-index:2;
  font-size: 10px; font-weight:800; letter-spacing:.5px; border-radius:20px; padding:4px 10px;
}
.amf-type-badge {
  position: absolute; bottom:10px; right:10px; z-index:2;
  background: rgba(39,174,96,.92); color:#fff; font-size:10px; font-weight:700;
  border-radius:12px; padding:3px 9px;
}
.amf-type-badge.ready { background: rgba(192,57,43,.9); }

.amf-card-body { padding:16px; }
.amf-card-title { font-weight:800; font-size:1rem; margin-bottom:6px; color:#1a1a1a; }
.amf-card-desc  { font-size:.82rem; color:#666; line-height:1.45; margin-bottom:10px; }
.amf-card-price { font-size:1.3rem; font-weight:800; color:var(--amf-red); margin:8px 0; }

.amf-ing-list { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.amf-ing-tag  {
  background:#f0fdf4; color:var(--amf-green); border:1px solid #bbf7d0;
  font-size:11px; padding:2px 8px; border-radius:10px; font-weight:600;
}
.amf-ing-tag.optional { background:#fff5f5; color:var(--amf-red); border-color:#fecaca; }
.amf-ing-legend { font-size:11px; color:#888; align-self:center; }

/* ── Cart ── */
.amf-cart-footer { position:sticky; bottom:0; }
.amf-cart-item { background:#fff9f8; border-radius:10px; padding:12px; margin-bottom:10px; border:1px solid #f5d5d0; }
.amf-cart-item-name { font-weight:700; font-size:.95rem; }
.amf-qty-btn { width:28px; height:28px; padding:0; font-weight:bold; }

/* ── Customize Modal ── */
.amf-ing-row { border:1px solid #e9ecef; border-radius:10px; padding:12px; margin-bottom:8px; background:#fafafa; }
.amf-ing-row.selected { background:#fff0ee; border-color:#f5b7b1; }
.amf-ing-check { width:18px; height:18px; accent-color:var(--amf-red); }

/* ── Invoice / Track ── */
.amf-track-box { max-width:820px; margin:0 auto; }
.amf-invoice-card { background:#fff; border-radius:var(--amf-radius); padding:28px; box-shadow:var(--amf-shadow); }
.amf-info-box { background:#f9f9f9; border-radius:10px; padding:14px; height:100%; }
.amf-info-box h6 { font-weight:800; color:var(--amf-red); margin-bottom:8px; }

/* ── Order Timeline ── */
.amf-order-timeline { border-left:3px solid #e5e7eb; padding-left:20px; }
.amf-step { display:flex; align-items:center; gap:14px; margin-bottom:16px; opacity:.4; transition:opacity .3s; }
.amf-step.active { opacity:1; }
.amf-step-icon {
  width:40px; height:40px; border-radius:50%; background:#e5e7eb; display:flex; align-items:center; justify-content:center;
  font-size:18px; color:#999; flex-shrink:0; margin-left:-31px; border:3px solid #fff;
}
.amf-step.active .amf-step-icon { background:var(--amf-red); color:#fff; }

/* ── Buttons ── */
.btn-danger   { background:var(--amf-red); border-color:var(--amf-red); }
.btn-danger:hover { background:#a93226; border-color:#a93226; }

/* Animations */
.amf-food-item { animation: amfFadeUp .4s ease both; }
@keyframes amfFadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
.amf-food-item:nth-child(2) { animation-delay:.05s }
.amf-food-item:nth-child(3) { animation-delay:.10s }
.amf-food-item:nth-child(4) { animation-delay:.15s }

/* Responsive */
@media(max-width:576px) { .amf-card-img-wrap { height:170px; } }