/* ==========================================================================
   MEEF MARKET — GLOBAL DESIGN SYSTEM & STYLESHEET
   Kepatuhan Standar: kz_view.md (Bootstrap 5 Base, Flowbite / shadcn / Tailwind UI aesthetics)
   Palet Warna: Meef Orange (#F59214) & Sprout Green (#82B84D) dari Logo Meef Market
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variabel CSS & Tema Identitas MEEF MARKET
   -------------------------------------------------------------------------- */
:root {
  /* Warna Utama Meef Market (Warm Golden-Orange) */
  --meef-orange: #F59214;
  --meef-orange-hover: #E07E05;
  --meef-orange-light: #FFF7ED;
  --meef-orange-subtle: #FFF0DF;
  --meef-orange-border: #FED7AA;

  /* Warna Aksen Meef Market (Fresh Sprout Green dari Daun/Hati Logo) */
  --meef-green: #82B84D;
  --meef-green-hover: #71A33E;
  --meef-green-light: #F2F9EC;
  --meef-green-border: #D3E8BA;

  /* Warna Netral & Elemen Gelap */
  --meef-dark: #0F172A;
  --meef-text-main: #334155;
  --meef-text-muted: #64748B;
  --meef-bg-body: #FAF8F5;
  --meef-card-bg: #FFFFFF;
  --meef-border-color: #EFE7DE;

  /* Radius & Sudut Halus */
  --meef-radius-lg: 1.25rem;
  --meef-radius-md: 0.85rem;
  --meef-radius-sm: 0.5rem;
  --meef-radius-pill: 50rem;

  /* Bayangan Halus Bertingkat */
  --meef-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
  --meef-shadow-md: 0 4px 14px -1px rgba(245, 146, 20, 0.12), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
  --meef-shadow-lg: 0 12px 28px -5px rgba(245, 146, 20, 0.18), 0 8px 12px -6px rgba(0, 0, 0, 0.04);
}

/* --------------------------------------------------------------------------
   2. Reset & Tipografi Global
   -------------------------------------------------------------------------- */
body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--meef-bg-body);
  color: var(--meef-text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--meef-dark);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* --------------------------------------------------------------------------
   3. Utility Classes Kustom Reusable
   -------------------------------------------------------------------------- */
.text-meef-orange {
  color: var(--meef-orange) !important;
}

.text-meef-green {
  color: var(--meef-green) !important;
}

.bg-meef-orange {
  background-color: var(--meef-orange) !important;
  color: #FFFFFF !important;
}

.bg-meef-green {
  background-color: var(--meef-green) !important;
  color: #FFFFFF !important;
}

.bg-meef-orange-light {
  background-color: var(--meef-orange-light) !important;
}

.bg-meef-green-light {
  background-color: var(--meef-green-light) !important;
}

.border-meef-orange {
  border-color: var(--meef-orange-border) !important;
}

.border-meef-green {
  border-color: var(--meef-green-border) !important;
}

.extra-small {
  font-size: 0.75rem;
  line-height: 1.4;
}

.cursor-pointer {
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   4. Tombol Kustom (Buttons)
   -------------------------------------------------------------------------- */
/* Tombol Utama Oranye Meef Market */
.btn-meef-primary {
  background-color: var(--meef-orange);
  border-color: var(--meef-orange);
  color: #FFFFFF;
  font-weight: 600;
  border-radius: var(--meef-radius-pill);
  padding: 0.55rem 1.4rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(245, 146, 20, 0.3);
}

.btn-meef-primary:hover,
.btn-meef-primary:focus {
  background-color: var(--meef-orange-hover);
  border-color: var(--meef-orange-hover);
  color: #FFFFFF;
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px rgba(245, 146, 20, 0.4);
}

.btn-meef-primary:active {
  transform: translateY(0);
}

/* Tombol Aksen Hijau Meef (Sprout Green) */
.btn-meef-green {
  background-color: var(--meef-green);
  border-color: var(--meef-green);
  color: #FFFFFF;
  font-weight: 600;
  border-radius: var(--meef-radius-pill);
  padding: 0.55rem 1.4rem;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(130, 184, 77, 0.3);
}

.btn-meef-green:hover,
.btn-meef-green:focus {
  background-color: var(--meef-green-hover);
  border-color: var(--meef-green-hover);
  color: #FFFFFF;
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px rgba(130, 184, 77, 0.4);
}

/* Tombol Lembut / Soft Accent Button */
.btn-meef-soft {
  background-color: var(--meef-orange-light);
  border-color: var(--meef-orange-border);
  color: var(--meef-orange-hover);
  font-weight: 600;
  border-radius: var(--meef-radius-pill);
  padding: 0.55rem 1.3rem;
  transition: all 0.2s ease;
}

.btn-meef-soft:hover {
  background-color: var(--meef-orange);
  border-color: var(--meef-orange);
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* Tombol Outline Halus */
.btn-meef-outline {
  background-color: transparent;
  border: 1.5px solid var(--meef-border-color);
  color: var(--meef-text-main);
  font-weight: 600;
  border-radius: var(--meef-radius-pill);
  padding: 0.55rem 1.3rem;
  transition: all 0.2s ease;
}

.btn-meef-outline:hover {
  border-color: var(--meef-orange);
  color: var(--meef-orange);
  background-color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   5. Navbar & Navigasi
   -------------------------------------------------------------------------- */
.navbar-meef {
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--meef-border-color);
  padding: 0.75rem 0;
  transition: all 0.3s ease;
}

.navbar-brand-meef {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--meef-dark);
}

.navbar-brand-meef img {
  height: 42px;
  width: auto;
  object-fit: contain;
}

.navbar-meef .nav-link {
  color: var(--meef-text-main);
  font-weight: 600;
  font-size: 0.925rem;
  padding: 0.5rem 1rem;
  border-radius: var(--meef-radius-pill);
  transition: all 0.2s ease;
}

.navbar-meef .nav-link:hover {
  color: var(--meef-orange);
  background-color: var(--meef-orange-light);
}

.navbar-meef .nav-link:focus,
.navbar-meef .nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(245, 146, 20, 0.2);
  color: var(--meef-orange);
}

.navbar-meef .nav-link.active,
.navbar-meef .show > .nav-link {
  color: var(--meef-orange) !important;
  background-color: var(--meef-orange-light) !important;
  font-weight: 700;
}

/* Dropdown Menu & Dropdown Item Kustom Meef Market (Menghilangkan Warna Biru Default Bootstrap) */
.navbar-meef .dropdown-menu {
  border-radius: var(--meef-radius-md);
  border: 1px solid var(--meef-border-color);
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  padding: 0.5rem;
  margin-top: 0.35rem;
}

.navbar-meef .dropdown-item {
  color: var(--meef-text-main);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.45rem;
  padding: 0.5rem 0.85rem;
  transition: all 0.15s ease;
}

.navbar-meef .dropdown-item:hover,
.navbar-meef .dropdown-item:focus {
  background-color: var(--meef-orange-light);
  color: var(--meef-orange);
}

.navbar-meef .dropdown-item.active,
.navbar-meef .dropdown-item:active {
  background-color: var(--meef-orange) !important;
  color: #FFFFFF !important;
  font-weight: 600;
}

.navbar-meef .dropdown-item.active *,
.navbar-meef .dropdown-item:active * {
  color: #FFFFFF !important;
}

.navbar-meef .navbar-toggler:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(245, 146, 20, 0.25);
}

/* Badge Keranjang Belanja Floating */
.cart-badge-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: var(--meef-orange);
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(245, 146, 20, 0.4);
}

/* --------------------------------------------------------------------------
   6. Hero & Banner Seksi (Landing Page)
   -------------------------------------------------------------------------- */
.hero-meef {
  background: linear-gradient(135deg, #FFFDF8 0%, #FFF7EE 50%, #FFF1DF 100%);
  border-radius: var(--meef-radius-lg);
  padding: 3.5rem 2.5rem;
  margin-top: 1.5rem;
  margin-bottom: 3rem;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--meef-orange-border);
  box-shadow: var(--meef-shadow-sm);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #FFFFFF;
  color: var(--meef-orange);
  font-weight: 700;
  font-size: 0.825rem;
  padding: 0.4rem 1rem;
  border-radius: var(--meef-radius-pill);
  border: 1px solid var(--meef-orange-border);
  box-shadow: var(--meef-shadow-sm);
  margin-bottom: 1.25rem;
}

.hero-highlight-tag {
  color: var(--meef-green);
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   7. Kartu Modern & Produk (Product Cards)
   -------------------------------------------------------------------------- */
.card-meef {
  background-color: var(--meef-card-bg);
  border: 1px solid var(--meef-border-color);
  border-radius: var(--meef-radius-lg);
  box-shadow: var(--meef-shadow-sm);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-meef:hover {
  box-shadow: var(--meef-shadow-md);
  border-color: var(--meef-orange-border);
}

.product-card {
  border: 1px solid var(--meef-border-color);
  border-radius: var(--meef-radius-lg);
  background: var(--meef-card-bg);
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--meef-shadow-lg);
  border-color: var(--meef-orange-border);
}

.product-card .img-wrapper {
  position: relative;
  height: 190px;
  overflow: hidden;
  background-color: #F8FAFC;
}

.product-card .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.product-card:hover .img-wrapper img {
  transform: scale(1.07);
}

.product-card .badge-category {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  color: var(--meef-dark);
  font-weight: 700;
  font-size: 0.725rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--meef-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.product-card .badge-status {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--meef-green);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.7rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--meef-radius-pill);
  box-shadow: 0 2px 6px rgba(130, 184, 77, 0.3);
}

.product-card .badge-detail-hint {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: var(--meef-radius-pill);
  opacity: 0.85;
  transition: all 0.2s ease;
  pointer-events: none;
}

.product-card:hover .badge-detail-hint {
  opacity: 1;
  background: var(--meef-orange);
}


/* Filter Kategori Pills */
.nav-pills-meef {
  gap: 0.5rem;
}

.nav-pills-meef .nav-link {
  color: var(--meef-text-muted);
  font-weight: 600;
  border-radius: var(--meef-radius-pill);
  padding: 0.55rem 1.35rem;
  background-color: var(--meef-card-bg);
  border: 1px solid var(--meef-border-color);
  transition: all 0.2s ease;
}

.nav-pills-meef .nav-link:hover {
  background-color: var(--meef-orange-light);
  color: var(--meef-orange);
  border-color: var(--meef-orange-border);
}

.nav-pills-meef .nav-link.active {
  background-color: var(--meef-orange);
  color: #FFFFFF;
  border-color: var(--meef-orange);
  box-shadow: 0 4px 12px rgba(245, 146, 20, 0.28);
}

/* --------------------------------------------------------------------------
   8. Antarmuka Kasir POS (Interactive Cashier Layout)
   -------------------------------------------------------------------------- */
.pos-container {
  background-color: var(--meef-bg-body);
  border-radius: var(--meef-radius-lg);
  border: 1px solid var(--meef-border-color);
  overflow: hidden;
  box-shadow: var(--meef-shadow-sm);
}

.pos-order-panel {
  background-color: #FFFFFF;
  border-left: 1px solid var(--meef-border-color);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pos-order-items {
  max-height: 380px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.pos-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px dashed var(--meef-border-color);
}

/* Tombol Qty Adjuster */
.qty-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--meef-border-color);
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--meef-text-main);
  transition: all 0.15s ease;
}

.qty-btn:hover {
  background-color: var(--meef-orange);
  color: #FFFFFF;
  border-color: var(--meef-orange);
}

/* --------------------------------------------------------------------------
   9. Widget Statistik & Dashboard Admin
   -------------------------------------------------------------------------- */
.stat-card {
  background: #FFFFFF;
  border-radius: var(--meef-radius-lg);
  border: 1px solid var(--meef-border-color);
  padding: 1.35rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  box-shadow: var(--meef-shadow-sm);
  transition: all 0.2s ease;
}

.stat-card:hover {
  box-shadow: var(--meef-shadow-md);
  border-color: var(--meef-orange-border);
}

.stat-icon-wrapper {
  width: 52px;
  height: 52px;
  border-radius: var(--meef-radius-md);
  background-color: var(--meef-orange-light);
  color: var(--meef-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.stat-icon-wrapper.green {
  background-color: var(--meef-green-light);
  color: var(--meef-green);
}

.table-meef {
  vertical-align: middle;
}

.table-meef th {
  background-color: #F8FAFC;
  color: var(--meef-text-muted);
  font-weight: 700;
  font-size: 0.785rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--meef-border-color);
  padding: 0.95rem 1.15rem;
}

.table-meef td {
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid var(--meef-border-color);
  font-size: 0.925rem;
}

/* --------------------------------------------------------------------------
   10. Struk Nota Termal Meef Market (58mm / 80mm POS Printer Standard)
   Catatan: Styling CSS khusus struk termal telah dipisahkan & dienkapsulasi
   ke dalam komponen Blade: resources/views/components/receipt-modal.blade.php
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   11. Panel Template Pesanan WhatsApp & Optimasi Mobile
   -------------------------------------------------------------------------- */
.sticky-wa-panel {
  position: sticky;
  top: 85px;
  z-index: 10;
}

.wa-preview-card {
  background: #FFFFFF;
  border-radius: var(--meef-radius-lg);
  border: 1.5px solid var(--meef-border-color);
  box-shadow: var(--meef-shadow-md);
  overflow: hidden;
}

.wa-card-header {
  background: linear-gradient(135deg, #128C7E 0%, #075E54 100%);
  color: #FFFFFF;
  padding: 0.9rem 1.25rem;
}

.wa-chat-container {
  background-color: #EFEAE2;
  background-image: radial-gradient(#D6CFC7 1px, transparent 1px);
  background-size: 16px 16px;
  border-radius: var(--meef-radius-md);
  padding: 0.85rem;
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid #D5CEBF;
}

.wa-chat-bubble {
  background-color: #DCF8C6;
  color: #111B21;
  border-radius: 0.75rem 0.75rem 0.75rem 0.25rem;
  padding: 0.75rem 0.9rem;
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.btn-whatsapp {
  background-color: #25D366;
  border-color: #25D366;
  color: #FFFFFF;
  font-weight: 700;
  border-radius: var(--meef-radius-pill);
  padding: 0.65rem 1.4rem;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}

.btn-whatsapp:hover,
.btn-whatsapp:focus {
  background-color: #1EBE5D;
  border-color: #1EBE5D;
  color: #FFFFFF;
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
}

/* Nav Pills Scrollable secara Horizontal pada Mobile */
.nav-pills-scrollable {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  padding-bottom: 0.35rem;
  gap: 0.4rem;
}

.nav-pills-scrollable::-webkit-scrollbar {
  display: none; /* Chrome & Safari */
}

.nav-pills-scrollable .nav-item {
  flex: 0 0 auto;
}

/* Floating Mobile Order Bar */
.mobile-wa-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1.5px solid var(--meef-orange-border);
  padding: 0.65rem 1rem;
  padding-bottom: max(0.65rem, env(safe-area-inset-bottom));
  z-index: 1040;
  box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.12);
  animation: slideUpMobileBar 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpMobileBar {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   12. Media Queries Khusus Mobile (< 768px dan < 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  body {
    padding-bottom: 70px; /* Ruang agar konten tidak tertutup mobile bottom bar */
  }

  .navbar-meef {
    padding: 0.55rem 0;
  }

  .navbar-brand-meef img {
    height: 34px;
  }

  .navbar-brand-meef {
    font-size: 1.15rem;
  }

  /* Product Card pada layar HP */
  .product-card .img-wrapper {
    height: 135px;
  }

  .product-card .badge-category {
    top: 8px;
    left: 8px;
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
  }

  .product-card .badge-status {
    top: 8px;
    right: 8px;
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
  }

  .product-card h6 {
    font-size: 0.85rem;
  }

  .product-card .btn-sm {
    font-size: 0.775rem;
    padding: 0.4rem 0.6rem;
  }

  .product-card .qty-btn {
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
  }
}