/* =====================================================================
   PETUK — Fire & Flame theme (KFC-grade professional)
   Loaded after Tailwind CDN. Custom styles only.
   ===================================================================== */

:root {
  --petuk-yellow: #FFD600;
  --petuk-red: #E53935;
  --petuk-dark-red: #B71C1C;
  --petuk-text: #1A1A1A;
  --petuk-muted: #5D4037;
  --petuk-border: #FFE082;
  --petuk-accent: #FFAB00;
  --petuk-success: #2E7D32;
  --petuk-error: #C62828;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  background-color: var(--petuk-yellow);
  color: var(--petuk-text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  margin: 0;
}

h1, h2, h3, h4, h5, h6, .font-poppins {
  font-family: 'Poppins', system-ui, sans-serif;
  letter-spacing: 0.02em;
}

/* Headings uppercase style helper */
.heading-uc {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

/* ============ Custom scrollbar ============ */
.scroll-petuk::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-petuk::-webkit-scrollbar-track { background: #FFF8E1; border-radius: 4px; }
.scroll-petuk::-webkit-scrollbar-thumb { background: var(--petuk-accent); border-radius: 4px; }
.scroll-petuk::-webkit-scrollbar-thumb:hover { background: var(--petuk-red); }

/* ============ Card shadow ============ */
.card-shadow { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.card-shadow-lg { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }

/* ============ Touch target ============ */
.touch-target { min-height: 44px; min-width: 44px; }

/* ============ Buttons ============ */
.btn-red {
  background-color: var(--petuk-red);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.625rem 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.875rem;
  cursor: pointer;
  min-height: 44px;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.btn-red:hover { background-color: var(--petuk-dark-red); }
.btn-red:active { transform: scale(0.98); }
.btn-red:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-outline {
  background-color: transparent;
  color: var(--petuk-red);
  border: 2px solid var(--petuk-red);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.875rem;
  cursor: pointer;
  min-height: 44px;
  transition: all 0.15s ease;
}
.btn-outline:hover { background-color: var(--petuk-red); color: #fff; }

.btn-white {
  background-color: #fff;
  color: var(--petuk-red);
  border: none;
  border-radius: 0.5rem;
  padding: 0.625rem 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.875rem;
  cursor: pointer;
  min-height: 44px;
}
.btn-white:hover { background-color: var(--petuk-border); }

/* ============ Inputs ============ */
.input-petuk {
  background-color: #fff;
  color: var(--petuk-text);
  border: 2px solid var(--petuk-border);
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.9375rem;
  width: 100%;
  min-height: 44px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input-petuk:focus {
  border-color: var(--petuk-red);
  box-shadow: 0 0 0 3px rgba(229,57,53,0.15);
}

/* ============ Pills (category tabs) ============ */
.pill {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  border: 2px solid var(--petuk-border);
  background: #fff;
  color: var(--petuk-text);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  transition: all 0.15s ease;
}
.pill:hover { border-color: var(--petuk-red); }
.pill-active {
  background: var(--petuk-red);
  color: #fff;
  border-color: var(--petuk-red);
}

/* ============ Status badges ============ */
.badge { padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; display: inline-block; }
.badge-pending   { background: var(--petuk-red); color: #fff; }
.badge-cooking   { background: var(--petuk-accent); color: var(--petuk-text); }
.badge-ready     { background: var(--petuk-success); color: #fff; }
.badge-served    { background: var(--petuk-success); color: #fff; }
.badge-delivered { background: #1565C0; color: #fff; }
.badge-completed { background: #616161; color: #fff; }
.badge-cancelled { background: #9E9E9E; color: #fff; }
.badge-active    { background: var(--petuk-success); color: #fff; }
.badge-inactive  { background: #9E9E9E; color: #fff; }

/* ============ Tier badges ============ */
.tier-regular  { background: #fff; color: var(--petuk-text); border: 2px solid var(--petuk-border); }
.tier-silver   { background: #C0C0C0; color: var(--petuk-text); }
.tier-gold     { background: var(--petuk-yellow); color: var(--petuk-text); }
.tier-platinum { background: #E5E4E2; color: var(--petuk-text); }

/* ============ Cart drawer slide ============ */
.drawer-enter { transform: translateX(0); }
.drawer-exit { transform: translateX(100%); }

/* ============ Hide number input arrows ============ */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* ============ Smooth transitions ============ */
button, a, input, select, textarea { transition: all 0.15s ease; }

/* ============ THERMAL RECEIPT PRINT (80mm) ============ */
@media print {
  body * { visibility: hidden !important; }
  #receipt-print, #receipt-print * { visibility: visible !important; }
  #receipt-print {
    position: absolute !important;
    left: 0; top: 0;
    width: 80mm;
    padding: 4mm;
    background: #fff !important;
    color: #000 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 12px !important;
    line-height: 1.4;
  }
  .no-print { display: none !important; }
}

#receipt-print {
  display: none;
}
#receipt-print.show { display: block; }

/* ============ Toast ============ */
.toast {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 0.875rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  max-width: 90vw;
  text-align: center;
}
.toast-success { background: var(--petuk-success); }
.toast-error { background: var(--petuk-error); }
.toast-info { background: var(--petuk-red); }

/* ============ Pulse animation (current order dot) ============ */
@keyframes pulse-yellow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,171,0,0.6); }
  50% { box-shadow: 0 0 0 10px rgba(255,171,0,0); }
}
.pulse-yellow { animation: pulse-yellow 1.5s infinite; }

/* ============ Truncate ============ */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============ Modal backdrop (CRITICAL — without this, modals are invisible) ============ */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ============ New order alarm (Foodpanda/Uber Eats style) ============ */
@keyframes alarm-flash {
  0%, 100% { background-color: #E53935; }
  50% { background-color: #B71C1C; }
}
@keyframes alarm-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
}
.alarm-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: #E53935;
  color: #fff;
  text-align: center;
  padding: 12px 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
  animation: alarm-flash 0.8s infinite;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.alarm-banner .alarm-icon {
  display: inline-block;
  animation: alarm-pulse 0.6s infinite;
  margin-right: 8px;
}
.alarm-stop-btn {
  display: inline-block;
  margin-left: 12px;
  background: #fff;
  color: #E53935;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
}