:root{
  --fb-red:#e63933;
  --fb-red-dark:#c22b26;
  --fb-red-darker:#a02420;
  --fb-dark:#2e3a36;
  --fb-dark-2:#3a4844;
  --fb-green:#7ac142;
  --fb-green-dark:#5a9c2c;
  --fb-cream:#fbf7f3;
  --fb-muted:#6c757d;
}
*{ box-sizing:border-box; }
body{
  background:var(--fb-cream);
  font-family:'Inter','Segoe UI',Arial,sans-serif;
  color:#2b2b2b;
}
h1,h2,h3,h4,h5,h6,.navbar-brand,.section-title,.price-tag,.btn{ font-family:'Poppins','Segoe UI',Arial,sans-serif; }
.fw-800{ font-weight:800; }

/* Topbar */
.topbar{ background:var(--fb-dark); color:#c9cdd1; }
.topbar i{ color:var(--fb-green); margin-right:4px; }

/* Navbar */
.navbar-fb{ background:linear-gradient(90deg, var(--fb-red) 0%, var(--fb-red-dark) 100%); box-shadow:0 2px 14px rgba(0,0,0,.15); padding:.55rem 0; }
.navbar-fb .navbar-brand{ color:#fff !important; font-weight:700; font-size:1.35rem; letter-spacing:.5px; }
.brand-logo-wrap{ background:transparent; padding:0; display:inline-flex; align-items:center; }
.brand-logo{ height:52px; display:block; }
.brand-logo-wrap-sm{ padding:0; }
.brand-logo-wrap-sm .brand-logo{ height:34px; }
.navbar-fb .nav-link{ color:#ffe6e4 !important; font-weight:500; font-size:.92rem; padding:.5rem .85rem !important; }
.navbar-fb .nav-link:hover{ color:#fff !important; }
.btn-nav-fill{ background:var(--fb-dark); color:#fff !important; border-radius:30px; padding:.4rem 1.1rem; font-weight:600; font-size:.88rem; text-decoration:none; }
.btn-nav-fill:hover{ background:#1e2622; color:#fff; }
.btn-nav-outline{ border:1.5px solid #fff; color:#fff !important; border-radius:30px; padding:.35rem 1rem; font-weight:600; font-size:.88rem; text-decoration:none; }
.btn-nav-outline:hover{ background:#fff; color:var(--fb-red) !important; }

/* Buttons */
.btn-fb{ background:var(--fb-red); border-color:var(--fb-red); color:#fff; font-weight:600; border-radius:8px; }
.btn-fb:hover{ background:var(--fb-red-dark); border-color:var(--fb-red-dark); color:#fff; }
.btn-fb-green{ background:var(--fb-green); border-color:var(--fb-green); color:#fff; font-weight:600; border-radius:8px; }
.btn-fb-green:hover{ background:var(--fb-green-dark); border-color:var(--fb-green-dark); color:#fff; }
.btn-fb-outline{ border:1.5px solid var(--fb-red); color:var(--fb-red); font-weight:600; border-radius:8px; background:#fff; }
.btn-fb-outline:hover{ background:var(--fb-red); color:#fff; }

/* Hero */
.hero{ background:linear-gradient(120deg, var(--fb-red) 0%, #c9241f 55%, var(--fb-dark) 100%);
  color:#fff; border-radius:18px; padding:3.2rem 2.5rem; position:relative; overflow:hidden; }
.hero::after{ content:''; position:absolute; right:-60px; top:-60px; width:260px; height:260px;
  background:rgba(255,255,255,.08); border-radius:50%; }
.hero h1{ font-weight:800; font-size:2.4rem; }
.hero .lead{ opacity:.95; }
.hero-stats{ display:flex; gap:2rem; margin-top:1.5rem; flex-wrap:wrap; }
.hero-stats div{ background:rgba(255,255,255,.12); padding:.6rem 1.1rem; border-radius:10px; }

/* Hero slider (carousel) */
.hero-slider{ border-radius:18px; overflow:hidden; box-shadow:0 8px 26px rgba(0,0,0,.12); }
.hero-slide-img{ height:380px; object-fit:cover; }
.hero-caption{ background:rgba(0,0,0,.38); border-radius:14px; padding:1rem 1.5rem; bottom:1.5rem; }
@media (max-width:767.98px){ .hero-slide-img{ height:220px; } .hero-caption{ padding:.6rem 1rem; } .hero-caption h2{ font-size:1.2rem; } }

/* Section title */
.section-title{ border-left:5px solid var(--fb-red); padding-left:12px; font-weight:700; margin-bottom:1.2rem; color:var(--fb-dark); }

/* Package cards */
.card-package{ border:none; border-radius:14px; box-shadow:0 3px 14px rgba(0,0,0,.07); overflow:hidden; transition:.22s; background:#fff; }
.card-package:hover{ transform:translateY(-4px); box-shadow:0 10px 26px rgba(0,0,0,.13); }
.card-package .pkg-img{ height:180px; width:100%; object-fit:cover; }
.card-package .price-tag{ background:var(--fb-red); color:#fff; font-weight:700; padding:5px 12px; border-radius:8px; display:inline-block; font-size:.95rem; }
.badge-meal{ background:var(--fb-dark); color:#fff; font-weight:500; letter-spacing:.4px; padding:.4em .7em; }
.badge-day{ background:var(--fb-green); color:#fff; font-weight:500; padding:.4em .7em; }
.card-package .card-title{ font-weight:700; font-size:1.05rem; }

/* Box grid */
.box-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(48px,1fr)); gap:9px; }
.box-slot{ aspect-ratio:1/1; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#fff; user-select:none; transition:.15s; }
.box-available{ background:var(--fb-green); border-bottom:4px solid var(--fb-green-dark); cursor:pointer; }
.box-available:hover{ filter:brightness(1.08); transform:scale(1.05); }
.box-available.selected{ outline:3px solid var(--fb-dark); outline-offset:1px; }
.box-reserved{ background:#f0a93c; border-bottom:4px solid #c8811b; cursor:not-allowed; }
.box-sold{ background:#9aa0a5; border-bottom:4px solid #767c81; cursor:not-allowed; opacity:.8; }

.box-legend{ display:flex; flex-wrap:wrap; gap:14px; font-size:.85rem; color:#444; }
.legend-item{ display:inline-flex; align-items:center; gap:6px; }
.legend-dot{ width:14px; height:14px; border-radius:4px; display:inline-block; }
.legend-available{ background:var(--fb-green); }
.legend-reserved{ background:#f0a93c; }
.legend-sold{ background:#9aa0a5; }

.order-summary{ background:#fff; border:1px solid #f0e5df; border-radius:12px; padding:1rem 1.2rem; }

/* Status pills */
.status-pill{ padding:4px 12px; border-radius:20px; font-size:12px; font-weight:600; color:#fff; }
.status-pending{background:#8a8f94;} .status-preparing{background:#e29a1b;}
.status-out_for_delivery{background:#2b7de0;} .status-delivered{background:var(--fb-green-dark);}
.status-cancelled{background:var(--fb-red-dark);}

/* Footer */
.footer-fb{ background:var(--fb-dark); color:#c9cdd1; margin-top:4rem; }
.footer-link{ display:block; color:#b7bcc1; text-decoration:none; margin-bottom:.55rem; font-size:.92rem; }
.footer-link:hover{ color:var(--fb-green); }
.social-ico{ width:36px; height:36px; border-radius:50%; background:var(--fb-dark-2); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.social-ico:hover{ background:var(--fb-red); }

/* Category cards (homepage service hub) */
.category-card{ background:#fff; border-radius:16px; padding:2rem 1.6rem; text-align:center;
  box-shadow:0 3px 14px rgba(0,0,0,.07); transition:.22s; border:1px solid #f4ece6; }
.category-card:hover{ transform:translateY(-5px); box-shadow:0 10px 26px rgba(0,0,0,.12); }
.category-icon{ width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,var(--fb-red),var(--fb-red-dark));
  color:#fff; font-size:1.7rem; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem auto; }
.fw-700{ font-weight:700; }

/* Breadcrumb */
.breadcrumb{ background:#fff; border-radius:10px; padding:.65rem 1rem; box-shadow:0 2px 8px rgba(0,0,0,.05); margin-bottom:1.25rem; }
.breadcrumb-item a{ color:var(--fb-red); font-weight:500; }
.breadcrumb-item a:hover{ color:var(--fb-red-dark); }
.breadcrumb-item.active{ color:var(--fb-dark); font-weight:600; }
.breadcrumb-item + .breadcrumb-item::before{ color:#c9b8b2; }

/* Info blocks */
.info-box{ background:#fff; border-radius:12px; padding:1.4rem; box-shadow:0 2px 10px rgba(0,0,0,.06); }
.info-box i{ font-size:1.8rem; color:var(--fb-red); margin-bottom:.6rem; display:block; }

/* Admin */
.admin-sidebar{ background:var(--fb-dark); min-height:100vh; max-height:100vh; overflow-y:auto; position:sticky; top:0; }
.admin-sidebar a{ color:#c9cdd1; display:block; padding:11px 18px; text-decoration:none; font-size:.94rem; border-left:3px solid transparent; }
.admin-sidebar a:hover{ background:var(--fb-dark-2); color:#fff; }
.admin-sidebar a.active{ background:var(--fb-dark-2); color:#fff; border-left-color:var(--fb-red); font-weight:600; }
.sidebar-heading{ color:#8a9490; font-size:.7rem; text-transform:uppercase; letter-spacing:.6px; font-weight:700;
  padding:14px 18px 4px 18px; }

.sidebar-group{ margin-top:6px; }
.sidebar-group-toggle{
  width:100%; background:none; border:none; color:#8a9490; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.6px; font-weight:700; padding:14px 18px 6px 18px; display:flex; align-items:center;
  justify-content:space-between; cursor:pointer;
}
.sidebar-group-toggle:hover{ color:#c9cdd1; }
.sidebar-group-toggle i.bi{ margin-right:4px; }
.toggle-chevron{ font-size:.75rem; transition:transform .15s ease; margin-right:0 !important; }
.toggle-chevron.rotated{ transform:rotate(-90deg); }
.sidebar-group-links{ display:block; }

/* ===== Mobile app-like experience ===== */
.mobile-icon-btn{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.16);
  color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-size:1.1rem; text-decoration:none;
}
.mobile-icon-btn:hover{ background:rgba(255,255,255,.3); color:#fff; }
.cart-badge{
  position:absolute; top:-4px; right:-4px; background:var(--fb-green); color:#fff;
  font-size:.62rem; font-weight:700; min-width:16px; height:16px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; padding:0 3px; line-height:1;
}
.cart-badge-desktop{ top:-6px; right:-14px; }

.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:1030;
  background:#fff; display:flex; justify-content:space-around; align-items:center;
  box-shadow:0 -4px 18px rgba(0,0,0,.10);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom)) 4px;
  border-top:1px solid #f0e9e4;
}
.bn-item{
  flex:1; text-align:center; text-decoration:none; color:#8a8f94;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:.68rem; font-weight:600; padding:4px 0; border-radius:10px;
}
.bn-item i{ font-size:1.28rem; line-height:1; }
.bn-item.active{ color:var(--fb-red); }
.bn-item:active{ background:#fff3f2; }

@media (max-width:991.98px){
  body.has-bottom-nav{ padding-bottom:64px; }
  .hero{ padding:2.2rem 1.4rem; border-radius:14px; }
  .hero h1{ font-size:1.7rem; }
  .hero-stats{ gap:.6rem; }
  .hero-stats div{ padding:.45rem .8rem; font-size:.82rem; flex:1 1 auto; text-align:center; }
  .section-title{ font-size:1.15rem; }
  .card-package{ border-radius:16px; }
  .card-package .pkg-img{ height:150px; }
  .btn, .btn-fb, .btn-fb-outline, .btn-fb-green{ border-radius:10px; }
  .navbar-fb{ padding:.55rem 0; }
  .navbar-fb .navbar-brand{ font-size:1.15rem; }
  .footer-fb{ padding-bottom:70px; }
  .box-slot{ font-size:11px; border-radius:10px; }
  .container{ padding-left:14px; padding-right:14px; }
}