/* =====================================================================
   UniEats Gh - Master stylesheet
   Brand: Orange (#FF6B1A) + Black (#0D0D0D), creamy lights
   Fonts: Qasira (artistic) + Inter (UI)
===================================================================== */

/* --- Qasira (mandatory). Drop the font file at /assets/fonts/Qasira.woff2 --- */
@font-face {
  font-family: "Qasira";
  src: url("../fonts/Qasira.woff2") format("woff2"),
       url("../fonts/Qasira.woff")  format("woff"),
       url("../fonts/Qasira.ttf")   format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
/* Cursive fallback so brand-font renders gracefully if file missing */
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  --brand:        #FF6B1A;
  --brand-2:      #FF8A3D;
  --brand-soft:   #FFE7D6;
  --brand-glow:   rgba(255,107,26,.45);
  --ink:          #0D0D0D;
  --ink-2:        #1A1A1A;
  --ink-soft:     #262626;
  --bone:         #FAF6F0;
  --cream:        #FFF7EE;
  --line:         rgba(0,0,0,.08);
  --line-dark:    rgba(255,255,255,.08);
  --muted:        #6B6B6B;
  --success:      #2ECC71;
  --danger:       #E74C3C;
  --warning:      #F1C40F;

  --radius:       14px;
  --radius-lg:    22px;
  --shadow-sm:    0 2px 6px rgba(0,0,0,.06);
  --shadow:       0 8px 24px rgba(13,13,13,.08);
  --shadow-lg:    0 20px 60px rgba(13,13,13,.18);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-2); }

.brand-font { font-family: "Qasira", "Caveat", cursive; letter-spacing: .5px; }

/* ---------- Bootstrap overrides ---------- */
.btn { border-radius: 999px; font-weight: 600; padding: .65rem 1.25rem; }
.btn-warning, .btn-brand {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  border: none; color: #fff;
}
.btn-warning:hover, .btn-brand:hover { color:#fff; filter: brightness(1.05); box-shadow: 0 8px 22px var(--brand-glow); }
.btn-outline-brand {
  border: 2px solid var(--brand); color: var(--brand); background: transparent;
}
.btn-outline-brand:hover { background: var(--brand); color: #fff; }
.btn-dark { background: var(--ink); border-color: var(--ink); }
.btn-light-soft { background: #fff; color: var(--ink); border: 1px solid var(--line); }

.form-control, .form-select {
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: .8rem 1rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .25rem var(--brand-glow);
}

.text-brand { color: var(--brand) !important; }
.bg-brand   { background: var(--brand) !important; color: #fff; }
.bg-ink     { background: var(--ink) !important; color: #fff; }
.bg-cream   { background: var(--cream) !important; }

.badge-soft {
  background: var(--brand-soft); color: var(--brand);
  border-radius: 999px; padding: .35em .8em; font-weight: 600;
}

/* ---------- Layout components ---------- */
.navbar-ueats {
  background: rgba(255,255,255,.85); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.navbar-ueats .navbar-brand { font-family: "Qasira", "Caveat", cursive; font-size: 1.6rem; color: var(--ink); }
.navbar-ueats .navbar-brand img { height: 38px; margin-right: .55rem; }
.navbar-ueats .nav-link { color: var(--ink); font-weight: 500; }
.navbar-ueats .nav-link.active, .navbar-ueats .nav-link:hover { color: var(--brand); }

.footer {
  background: var(--ink); color: #c9c9c9;
  padding: 3rem 0 2rem; margin-top: 4rem;
}
.footer h6 { color: #fff; font-weight: 700; }
.footer a  { color: #c9c9c9; }
.footer a:hover { color: var(--brand); }

/* ---------- Cards ---------- */
.card-ueats {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
.card-ueats:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.product-card .img-wrap {
  aspect-ratio: 1/1; background: var(--cream);
  display: grid; place-items: center; overflow: hidden;
}
.product-card .img-wrap img { width: 86%; height: 86%; object-fit: contain; transition: transform .4s ease; }
.product-card:hover .img-wrap img { transform: scale(1.07) rotate(-3deg); }
.product-card .price { color: var(--brand); font-weight: 800; }
.category-pill {
  display: inline-flex; align-items: center; gap:.5rem;
  padding: .55rem 1rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-weight: 600; color: var(--ink); cursor: pointer;
  transition: all .2s ease;
}
.category-pill.active, .category-pill:hover {
  background: var(--brand-soft); color: var(--brand); border-color: var(--brand-soft);
}

/* ---------- Hero (landing) ---------- */
.hero-ueats {
  position: relative; overflow: hidden; min-height: 92vh;
  background:
    radial-gradient(80% 60% at 80% 20%, rgba(255,107,26,.2) 0, transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(255,138,61,.18) 0, transparent 60%),
    linear-gradient(180deg, #0D0D0D 0%, #1A1A1A 100%);
  color: #fff;
}
.hero-ueats::before {
  content: ""; position: absolute; inset: 0;
  background-image: url('../../bg/bg1.jpg');
  background-size: cover; background-position: center;
  opacity: .14; mix-blend-mode: screen; pointer-events: none;
}
.hero-ueats .hero-content { position: relative; z-index: 2; }
.hero-ueats h1 {
  font-family: "Qasira", "Caveat", cursive;
  font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: 1.05;
}
.hero-ueats h1 .accent { color: var(--brand); }
.hero-ueats p.lead { color: #d8d8d8; max-width: 560px; }

#three-hero {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
}

/* ---------- Onboarding ---------- */
.onb-wrap { background: var(--ink); min-height: 100vh; color:#fff; display:flex; flex-direction:column; }
.onb-slide { display:none; flex:1; padding: 2rem 1.5rem; flex-direction:column; align-items:center; text-align:center; }
.onb-slide.active { display:flex; }
.onb-slide img { max-width: 92%; max-height: 70vh; object-fit: contain; border-radius: 24px; }
.onb-dots { display:flex; gap:.5rem; justify-content:center; padding: 1rem; }
.onb-dot { width: 10px; height: 10px; border-radius: 999px; background:#444; }
.onb-dot.active { background: var(--brand); width: 26px; }

/* ---------- Cart drawer / order summary ---------- */
.summary-card {
  background: #fff; border-radius: var(--radius-lg); padding: 1.25rem;
  border: 1px solid var(--line); box-shadow: var(--shadow);
}

/* ---------- Status timeline ---------- */
.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before { content:""; position:absolute; left: 7px; top:0; bottom:0; width: 2px; background: var(--line); }
.timeline .step { position: relative; padding: .6rem 0; }
.timeline .step::before {
  content:""; position:absolute; left:-1.05rem; top: .85rem;
  width: 14px; height: 14px; border-radius: 999px;
  background: #fff; border: 3px solid var(--line);
}
.timeline .step.done::before { background: var(--brand); border-color: var(--brand); }
.timeline .step.current::before { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-glow); }

/* ---------- Admin / POS shell ---------- */
.app-shell { display:flex; min-height: 100vh; background: var(--bone); }
.app-side {
  width: 84px; background: #fff; border-right: 1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; padding: 1.25rem 0; gap:.75rem;
  position: sticky; top:0; height: 100vh;
}
.app-side .logo { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-soft);
  display:grid; place-items:center; }
.app-side .logo img { width: 32px; }
.app-side a {
  width: 52px; height: 52px; border-radius: 14px; display:grid; place-items:center;
  color: #6b6b6b; font-size: 1.15rem;
}
.app-side a.active, .app-side a:hover { background: var(--brand-soft); color: var(--brand); }
.app-main { flex: 1; min-width: 0; padding: 1.5rem; }
.app-topbar {
  display:flex; align-items:center; gap:1rem; margin-bottom: 1.25rem;
}
.app-topbar .search {
  flex:1; background:#fff; border:1px solid var(--line); border-radius: 14px; padding:.7rem 1rem;
  display:flex; align-items:center; gap:.5rem;
}
.app-topbar .search input { border:0; outline:0; width:100%; }
.kpi { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem; }
.kpi .v { font-size: 1.7rem; font-weight: 800; }
.kpi .l { color: var(--muted); font-size: .9rem; }

.table-clean { background:#fff; border-radius: var(--radius-lg); overflow: hidden; border:1px solid var(--line); }
.table-clean th { background: #fafafa; font-weight: 700; }
.table-clean td, .table-clean th { padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.table-clean tr:last-child td { border-bottom: 0; }

.status-pill { padding:.3rem .7rem; border-radius:999px; font-size:.78rem; font-weight:700; }
.status-pending          { background:#FFF3E0; color:#E67E22; }
.status-received         { background:#E8F4FF; color:#1976D2; }
.status-preparing        { background:#FFF8E1; color:#F1A413; }
.status-ready            { background:#E8F8EE; color:#27AE60; }
.status-out_for_delivery { background:#EDE7F6; color:#7E57C2; }
.status-delivered        { background:#E8F5E9; color:#1F9D4D; }
.status-cancelled        { background:#FDECEA; color:#C0392B; }
.status-refunded         { background:#ECEFF1; color:#607D8B; }

/* ---------- POS ---------- */
.pos-shell { display:grid; grid-template-columns: 1fr 380px; gap:1.25rem; }
@media (max-width: 1100px) { .pos-shell { grid-template-columns: 1fr; } }
.pos-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:.9rem; }
.pos-tile {
  background:#fff; border:1px solid var(--line); border-radius: 16px; padding: .75rem;
  text-align:center; cursor:pointer; transition: all .2s ease;
}
.pos-tile:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-2px); }
.pos-tile img { aspect-ratio: 1/1; object-fit: contain; width: 100%; background: var(--cream); border-radius: 10px; }
.pos-tile .n { font-weight: 700; margin-top:.4rem; font-size:.95rem; }
.pos-tile .p { color: var(--brand); font-weight: 800; }

/* ---------- Loader ---------- */
#ueats-loader {
  position: fixed; inset: 0; background: #0D0D0D;
  display: grid; place-items: center; z-index: 9999;
  transition: opacity .4s ease;
}
#ueats-loader img { width: 120px; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:scale(.95);opacity:.7} 50%{transform:scale(1.05);opacity:1} }
.is-loaded #ueats-loader { opacity:0; pointer-events:none; }

/* ---------- Mobile responsiveness ---------- */
@media (max-width: 992px) {
  .app-side { width: 100%; flex-direction: row; height: auto; position: sticky; top: 0;
    overflow-x: auto; border-right: 0; border-bottom:1px solid var(--line); }
  .app-side a { flex: 0 0 auto; }
}
@media (max-width: 576px) {
  .hero-ueats { min-height: 80vh; }
}

/* ---------- Utilities ---------- */
.glass { background: rgba(255,255,255,.7); backdrop-filter: blur(10px); border:1px solid var(--line); }
.divider-soft { height:1px; background: var(--line); margin: 1rem 0; }
.text-muted-2 { color: var(--muted); }
.qty-control { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; }
.qty-control button { border:0; background:transparent; width:32px; height:32px; font-size:1rem; }
.qty-control input { border:0; width:36px; text-align:center; outline:0; background:transparent; }

.dark-section { background: var(--ink); color: #fff; padding: 4rem 0; }
.dark-section h2 { font-family: "Qasira","Caveat",cursive; font-size: clamp(2rem,4vw,3.4rem); }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }