/* ------------------------------
   Core tokens
--------------------------------*/
:root{
  --header-h: 70px;
  --brand-red:   #e53935;
  --brand-yellow:#ffc107;
  --brand-green: #07ff07;
  --brand-black: #111;
  --ink:   #1f2937;
  --muted: #6b7280;
  --card:  #fff;
  --bg:    #e7e7e7;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html.no-scroll{
  overflow:hidden;
}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--ink);
  background:var(--bg);
  /* push content below fixed header */
  padding-top: calc(var(--header-h) + env(safe-area-inset-top));
}
body.no-scroll{
  overflow:hidden;
}
/* Prevent double-tap zoom on iOS while keeping pinch-zoom */
* { touch-action: manipulation; }
@media (max-width: 640px){
  :root{ --header-h: 110px; }
}

/* ------------------------------
   Header (fixed)
--------------------------------*/
header{
  position: fixed; inset: 0 0 auto 0; top:0; z-index:80;
  background:linear-gradient(90deg,var(--brand-black),#2a2a2a);
  color:#fff; border-bottom:3px solid var(--brand-red);
  padding:14px 20px; display:flex; align-items:center; gap:12px;
}
.hamburger{ background:transparent; border:0; color:#fff; font-size:1.4rem; cursor:pointer; padding:6px 8px; border-radius:10px; }
.brand-mark{ width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background:radial-gradient(circle at 25% 25%, var(--brand-yellow), var(--brand-red)); font-weight:900; color:#111; }

  .brand-mark img {
  width: 90%;
  height: 90%;
  object-fit: contain; /* keeps aspect ratio */
  border-radius: 8px;  /* optional: matches the rounded container */
  display: block;
  filter: brightness(0) saturate(100%) invert(100%);
}

.brand h1{ font-size:1.25rem; margin:0; }
.brand span{ display:block; font-size:.75rem; color:#e5e7eb; }
.brand-logo-only{ display:flex; align-items:center; }
.brand-logo-img{ height:40px; width:auto; display:block; }
.header-spacer{ flex:1; }
.order-mode{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.order-mode .mode-option{ display:inline-flex; align-items:center; gap:6px; font-size:.9rem; background:rgba(255,255,255,.06); padding:6px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.15); color:#fff; }
.order-mode input[type="radio"]{ accent-color: var(--brand-green); }
.address-chip{
  position:relative;
  background:#fff;
  color:#111;
  border-radius:9999px;
  padding:6px 36px 6px 10px;
  font-size:.85rem;
  border:1px solid #e5e7eb;
  cursor:pointer;
}
.address-chip::after{
  content:"";
  position:absolute;
  right:6px;
  top:50%;
  width:22px;
  height:22px;
  transform:translateY(-50%);
  border-radius:999px;
  background-color:#111;
  background-repeat:no-repeat;
  background-position:center;
  background-size:14px 14px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/></svg>");
}

/* ------------------------------
   Modal
--------------------------------*/
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:200; }
.modal-overlay.open{ display:flex; }
.modal-overlay#addressModal{
  inset:0;
  align-items:flex-start;
  justify-content:center;
  padding: calc(var(--header-h) + 28px + env(safe-area-inset-top, 0px)) 12px 18px;
}
.modal{ width:min(560px,92vw); background:#fff; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.35); overflow:hidden; }
.modal{ position:relative; }
.modal header{ position:relative; inset:auto; display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:#111; color:#fff; border-bottom:3px solid var(--brand-red); }
.modal-overlay#addressModal .modal header{
  background:linear-gradient(120deg, #0f172a, #111);
  border-bottom-color: var(--brand-red);
}
#addressModal .modal{
  padding-top: 0;
}
.modal-overlay#addressModal .content{
  padding-top: 10px;
}
.modal-title-inline{
  margin: 0 40px 10px 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #111827;
  display:flex;
  align-items:center;
}
.modal-close{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#111;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.modal .content{ padding:16px; }
.modal .row{ display:flex; gap:10px; align-items:center; }
.modal input[type="text"], input[type="password"]{ flex:1; padding:12px 14px; border-radius:10px; border:1px solid #aaacae; font-size:1rem; }
.modal textarea{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #aaacae;
  font-size:1rem;
  resize:vertical;
  min-height:110px;
}
.modal footer{ display:flex; gap:10px; justify-content:flex-end; padding:14px 16px; background:#fafafa; border-top:1px solid #eee; }
.modal-overlay#favConfirmModal .btn.outline[data-fav-confirm-cancel]{ color:#111; }
.btn{ padding:10px 14px; border-radius:12px; border:1px solid #e5e7eb; background:#fff; font-weight:700; color:inherit; text-decoration:none; cursor:pointer; }
.btn.primary{ background:var(--brand-red); color:#fff; border-color:var(--brand-red); }
.btn.outline{ background:#fff; border-color:#e5e7eb; }
.address-error{
  margin-top:10px;
  padding:8px 10px;
  border:1px solid #fecaca;
  border-radius:10px;
  background:#fef2f2;
  color:#b91c1c;
  font-size:.9rem;
}
.colony-confirm{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#f8fafc;
}
.colony-title{
  font-weight:700;
  font-size:.9rem;
  margin-bottom:6px;
  color:#111827;
}
.colony-line{
  font-size:.9rem;
  margin-bottom:6px;
  color:#111827;
}
.colony-check{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:.85rem;
  color:#111827;
}
.colony-check input{
  width:16px;
  height:16px;
}

/* ------------------------------
   Sidebar
--------------------------------*/
.sidebar{
  position:fixed; inset: var(--header-h) auto 0 0;
  width:300px; height: calc(100vh - var(--header-h));
  background:#111; color:#f5f5f5; transform:translateX(-102%);
  transition:transform .25s ease; z-index:75; box-shadow:6px 0 24px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
}
.sidebar{
  /* slight extra offset for safer spacing under fixed header */
  inset: calc(var(--header-h) + 8px) auto 0 0;
  height: calc(100vh - (var(--header-h) + 8px));
}
.sidebar.open{ transform:translateX(0); }
.sidebar .panel{ padding:18px; display:grid; gap:16px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.sidebar .section-title{ font-size:.85rem; color:#a3a3a3; letter-spacing:.08em; text-transform:uppercase; margin-top:6px; }
.sidebar a{ color:#e5e5e5; text-decoration:none; padding:10px 12px; border-radius:10px; display:flex; align-items:center; gap:8px; border:1px solid transparent; }
.sidebar a:hover{ background:#1f1f1f; border-color:#2a2a2a; }
.sidebar .divider{ height:1px; background:#262626; margin:6px 0; }
.sidebar .closebar{ background:transparent; border:0; color:#fff; font-size:1.2rem; cursor:pointer; padding:10px; border-radius:10px; }

/* Backdrop (shared) */
.backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:60; display:none; }

/* ------------------------------
   Cart drawer
--------------------------------*/
.cart-drawer{
  position:fixed; inset: var(--header-h) 0 0 auto;
  width:min(420px, 92vw); height: calc(100vh - var(--header-h));
  background:#fff; color:var(--ink); transform:translateX(102%);
  transition:transform .25s ease; z-index:75; display:flex; flex-direction:column;
  box-shadow:-6px 0 24px rgba(0,0,0,.25); border-left:3px solid var(--brand-red);
  overflow:hidden;
}
.cart-drawer{
  inset: calc(var(--header-h) + 8px) 0 0 auto;
  height: calc(100vh - (var(--header-h) + 8px));
}
.cart-drawer.open{ transform:translateX(0); }
.cart-drawer header{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:#111; color:#fff; border-bottom:1px solid #eee; }
.cart-body{
  padding:100px 14px 12px; /* extra top space under header */
  padding-top: 100px;
  display:flex; flex-direction:column; align-items:stretch; gap:8px;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.cart-items-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.totals-box{
  margin-top:auto;
}
.cart-item{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:10px; padding:8px 0; border-bottom:1px solid #eee;
}
.cart-item:last-child{ border-bottom:0; }
.cart-item > div:first-child{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cart-item-title{ font-size:.95rem; font-weight:700; color:#111827; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-item-note{ font-size:.85rem; color:#374151; white-space:normal; line-height:1.3; }
.cart-item-meta{ font-size:.85rem; color:#6b7280; }
.cart-qty{ display:inline-flex; align-items:center; gap:6px; flex-shrink:0; }
.qty-btn{ width:28px; height:28px; border-radius:8px; border:1px solid #e5e7eb; background:#fff; font-weight:700; cursor:pointer; line-height:1; }
.cart-qty span{ min-width:20px; text-align:center; font-weight:600; }
.cart-footer{ padding:12px 14px; display:grid; gap:10px; border-top:1px solid #eee; flex:0 0 auto; }
.cart-total{ display:flex; justify-content:space-between; align-items:center; }
.checkout-btn{ padding:10px 12px; border-radius:10px; font-weight:800; border:1px solid var(--brand-red); background:var(--brand-red); color:#fff; cursor:pointer; }
.payment-methods{
  display:grid;
  gap:8px;
  padding:10px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fafafa;
}
.payment-methods__label{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.payment-method-option{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.95rem;
  font-weight:600;
}
.payment-method-option input{ accent-color: var(--brand-red); }
.cash-agreement{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:10px;
  border:1px dashed #f59e0b;
  border-radius:10px;
  background:#fff7ed;
  font-size:.85rem;
  color:#7c2d12;
}
.cash-agreement input{ margin-top:2px; }
#stripePayment{ display:grid; gap:8px; }

/* Header cart button */
.cart-wrap{ position:relative; }
.cart-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff; cursor:pointer; }
.cart-btn:hover{ background:rgba(255,255,255,.12); }
.cart-badge{ position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 6px; border-radius:9999px; background:var(--brand-red); color:#fff; font-size:.72rem; line-height:20px; text-align:center; font-weight:800; box-shadow:0 2px 6px rgba(0,0,0,.25); display:none; }
.cart-badge.show{ display:block; }

/* Sharper close buttons (avoid overly rounded corners on mobile) */
#cartClose,
#closeSidebar,
.sidebar .closebar,
.cart-close{
  border-radius: 4px !important;
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------
   Page layout
--------------------------------*/
main{ padding:20px; }
footer{ padding:22px; border-top:2px solid #eee; background:#2a2a2a; color:#dadbde; font-size:.9rem; text-align:center; }

/* ------------------------------
   Restaurant grid + cards (clickable)
--------------------------------*/
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap:18px;
  max-width:1200px; margin:10px auto 40px; padding:0 20px;
}
.restaurant-card{
  display:grid; grid-template-rows:auto auto; /* image, then text */
  background:#fff; border:1px solid #e5e7eb; border-radius:18px; overflow:hidden;
  text-decoration:none; color:inherit;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.restaurant-card:hover{ transform:translateY(-2px); border-color:#e0e0e0; box-shadow:0 8px 22px rgba(0,0,0,.10); }
.restaurant-card:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(225,29,72,.35); transform:translateY(-1px); }

.restaurant-card .thumb{ aspect-ratio:16/9; background:#f3f4f6; }
.restaurant-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.restaurant-card .info{ padding:12px 14px; display:grid; gap:4px; }
.restaurant-card .title{ font-weight:800; font-size:1.05rem; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.restaurant-card .meta{ color:var(--muted); font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Account row (no nested anchors) */
.sidebar .account-item { padding: 10px 12px; }

.sidebar .account-link{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px; text-decoration:none;
  color:#e5e5e5; border:1px solid transparent; background:#171717;
}

.sidebar .account-link:hover{
  background:#1f1f1f; border-color:#2a2a2a;
}

.sidebar .account-link:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(229,57,53,.35);
}

.sidebar .account-icon{
  width:28px; height:28px; flex:0 0 28px; color:#d4d4d4;
}

.sidebar .account-text{
  display:flex; flex-direction:column; line-height:1.2; margin-left:2px; min-width:0;
}

.sidebar .account-name{
  font-size:1.05rem; font-weight:800; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.sidebar .account-manage{
  font-size:.8rem; color:#a3a3a3;
}

.sidebar .account-chev{
  margin-left:auto; width:18px; height:18px; color:#8a8a8a; opacity:.9;
}


/* Card */
.restaurant-card.v2{
  display:block;
  background:#fff;
  border-radius:18px;
  border:1px solid #ececec;
  text-decoration:none; color:inherit;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.restaurant-card.v2:hover{
  transform: translateY(-2px);
  border-color:#e3e3e3;
  box-shadow:0 8px 22px rgba(0,0,0,.10);
}

/* Media (large rounded image) */
.rcv2-media{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  margin:10px;                /* creates the rounded frame look */
  height:120px;               /* compact, like screenshot */
  background:#f3f4f6;
}
.rcv2-media img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  border-radius:14px;         /* inner rounding */
}

/* Badge pill */
.rcv2-badge{
  position:absolute; top:10px; left:14px;
  background:#e53935; color:#fff; font-weight:700;
  font-size:.82rem; line-height:1;
  padding:8px 10px; border-radius:9999px;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  display:inline-flex; align-items:center; gap:6px;
}
.rcv2-badge .trophy{ font-size:1rem; }

/* Body */
.rcv2-body{ padding:0 16px 14px 16px; }

.rcv2-title-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:6px;
}
.rcv2-name{
  margin:0; font-size:1.05rem; font-weight:800; color:#111;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Heart button (outline) */
.rcv2-fav{
  appearance:none; border:0; background:transparent; padding:4px;
  border-radius:9999px; color:#8d8d8d; cursor:pointer;
}
.rcv2-fav:hover{ color:#e53935; background:#f6f6f6; }

/* Cuisine */
.rcv2-cuisine{
  color:var(--muted); font-size:.92rem; margin-top:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Meta row: fee • rating • eta */
.rcv2-meta{
  display:flex; align-items:center; gap:8px; margin-top:6px; color:#3b3b3b;
  font-size:.92rem;
}
.rcv2-meta .dot{ color:#b7b7b7; }
.rcv2-meta .eta-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  border-radius:999px;
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  font-weight:700;
  color:#111;
  line-height:1.1;
}
.rcv2-meta .eta-label{
  font-weight:600;
  color:#374151;
}
.rcv2-meta .rating strong{ font-weight:800; color:#111; }
.rcv2-meta .rating .count{ color:#6b7280; }

/* Responsive tweaks */
@media (max-width: 900px){
  .grid{ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
@media (max-width: 640px){
  .rcv2-media{ height:120px; }
  .rcv2-name{ font-size:1rem; }
}
/* ------------------------------
   Menu item (generic card used elsewhere)
--------------------------------*/
.menu-item{
  background:var(--card);
  border-radius:12px; border:1px solid #ddd; padding:14px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.menu-item:hover{ transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.1); }

/* ------------------------------
   Mobile tweaks
--------------------------------*/
@media (max-width:640px){
  header{ padding:10px 12px; gap:10px; flex-wrap:wrap; }
  .brand-mark{ width:34px; height:34px; border-radius:8px; }
  .brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* keeps aspect ratio */
  border-radius: 8px;  /* optional: matches the rounded container */
  display: block;
}
  .brand h1{ font-size:1rem; }
  .brand span{ display:none; }
  .order-mode{ width:100%; order:2; margin-left:0; padding-top:6px; justify-content:space-between; gap:8px; }
  .order-mode .mode-option{ font-size:.85rem; padding:6px 10px; }
  .address-chip{ max-width:58vw; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:6px 10px; font-size:.8rem; }
  .cart-wrap{ margin-left:auto; }
  .hamburger{ padding:8px 10px; }

  .grid{ gap:16px; }
  .restaurant-card .info{ padding:10px 12px; }
  .restaurant-card .title{ font-size:1rem; }
}

/* ------------------------------
   Very small screens (cart tweaks)
--------------------------------*/
@media (max-width:480px){
  .cart-item-title{ font-size:.92rem; }
  .cart-item-meta{ font-size:.82rem; }
  .qty-btn{ width:26px; height:26px; border-radius:7px; }
}