/* Shared reset & variables */
:root{
  --bg: #f5f5f5;        /* light grey background */
  --panel: #ffffff;     /* white panels/cards */
  --muted: #777777;     /* muted grey text */
  --text: #222222;      /* main text (almost black) */
  --brand: #333333;     /* brand accent (dark grey / black) */
  --accent: #555555;    /* secondary accent (medium grey) */
  --shadow: 0 8px 20px rgba(0,0,0,0.12);
  --radius: 12px;
  --container: 1200px;
}


*{box-sizing:border-box}
body{
  margin:0; height: 900px; background:var(--bg);color:var(--text);font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  -webkit-font-smoothing:antialiased; padding-top: 83px;
}

.container{max-width:var(--container);margin:0 auto;padding:0 20px}

.site-header{padding-left: 20px; padding-right: 20px; background: linear-gradient(180deg,#222,#111);;color:#fff;border-bottom: 1px solid rgba(255,255,255,0.06);
            position: fixed; top:0px; left: 0px; right: 0px;
            }
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit}
.logo{width:50;height:50px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #f1c27d,#8a4b2f);box-shadow:var(--shadow)}
.brand h1{margin:0;font-size:20px}
.tagline{font-size:12px;color:rgba(255,255,255,0.9)}

.main-nav a{color:rgba(255,255,255,0.95);text-decoration:none;margin-left:18px;padding:8px 10px;border-radius:8px;transition:all .18s}
.main-nav a:hover{background:rgba(255,255,255,0.06)}
.main-nav a.active{background:rgba(0,0,0,0.12);font-weight:600}

/* HERO */
.hero{padding:48px 0;background-image:url("../PICTURES/HERO/HERO\ BACKGROUND\.png") }
.hero-inner{ padding: 50px; background-color: rgba(255, 255, 255, 0.7); display: grid; grid-template-columns: 560px 560px ; gap: 28px; justify-content: center; align-items: center; }
.hero-copy h2{ font-size:46px; color: #111; margin:0 0 8px}
.lead{font-weight: bold; color:rgba(0, 0, 0, 0.9);margin:0 0 18px}
.hero-media img{width:100%;height:320px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow);border:6px solid rgba(255,255,255,0.04)}

/* Buttons */
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;border:0;background:transparent;color:var(--text);cursor:pointer;box-shadow:none;transition:all .18s}
.btn-menu{display: flex; flex-direction: row; justify-content: center;}
.btn:hover{transform:translateY(-3px)}
.btn.primary{background: linear-gradient(135deg, var(--brand), #555);color:#fff;font-weight:700;box-shadow:0 8px 20px rgba(0,0,0,0.2)}

/* sections */
.section-title{font-size:22px;margin:18px 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--panel);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);transition:transform .18s}
.card:hover{transform:translateY(-6px)}
.card img{width:100%;height:160px;object-fit:cover;display:block}
.card-body{padding:12px}
.muted{color:var(--muted)}

/* featured grid */
.featured-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px}
.feat-item{background:var(--panel);padding:12px;border-radius:12px;text-align:center;box-shadow:var(--shadow);transition:all .14s}
.feat-item img{width:100%;height:140px;object-fit:cover;border-radius:8px}
.price{color:var(--brand);font-weight:700;margin-top:8px}

/* menu grid */
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-top:12px}
.menu-card{background:var(--panel);border-radius:12px;padding:12px;box-shadow:var(--shadow);transition:transform .14s;cursor:pointer}
.menu-card:hover{transform:translateY(-6px)}
.menu-card img{width:100%;height:140px;object-fit:cover;border-radius:8px}
.menu-card h4{margin:8px 0 4px}


/* filters */
.filters{display:flex;gap:10px;margin-bottom:12px}
.filter{padding:8px 12px;border-radius:10px;background:#f5efe8;border:1px solid rgba(0,0,0,0.04);cursor:pointer}
.filter.active{outline:2px solid rgba(183,121,31,0.22);box-shadow:inset 0 -3px 0 rgba(0,0,0,0.03)}

/* forms */
.form-card{background:var(--panel);padding:18px;border-radius:12px;box-shadow:var(--shadow)}
.row{margin-bottom:10px}
.row.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,select,textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #e6ded2;background:#fff;color:var(--text)}
textarea{min-height:80px}
.message-area{min-height:28px;margin:8px 0}

/* gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gallery-grid img{width:100%;height:200px;object-fit: cover; border-radius:10px}

/* footer */
.site-footer{background: #111;color:#fff;padding:18px 0;margin-top:28px}
.site-footer .container{display:flex;justify-content:space-between;align-items:center}
.small-nav a{color:rgba(255,255,255,0.85);text-decoration:none;margin-left:12px}
.IG-Logo, .FB-Logo{ width: 40px; height: 40px;}


/* admin output */
.admin-actions{display:flex;gap:12px;margin-bottom:12px}
.admin-output{background:#fff;padding:12px;border-radius:8px;min-height:200px;white-space:pre-wrap;color:var(--text)}

/* responsive */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .featured-grid{grid-template-columns:repeat(2,1fr)}
  .menu-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .site-footer .container{flex-direction:column;gap:8px}
}

@media (max-width: 640px){
  .cards{grid-template-columns:1fr}
  .featured-grid{grid-template-columns:1fr}
  .menu-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .header-inner{flex-direction:column;gap:12px;align-items:flex-start}
  .main-nav{display:flex;gap:8px;flex-wrap:wrap}
  .row.two{grid-template-columns:1fr}
}

/* ---------- Order page / cart styles (append) ---------- */
.order-container {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 22px;
  align-items: start;
  margin-top: 8px;
  margin-bottom: 40px;
}

@media (max-width: 960px) {
  .order-container { grid-template-columns: 1fr; }
  .cart { order: 2; margin-top: 18px; }
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

/* order item card (consistent with .menu-card) */
.item-card {
  background: var(--panel);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--shadow);
  transition: transform .12s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.item-card:hover, .feat-item:hover { transform: translateY(-6px); }
.item-card img { width:100%; height:140px; object-fit:cover; border-radius:8px; }
.item-card h4 { margin: 6px 0 0; font-size: 16px; }
.item-card .price { color: var(--brand); font-weight:700; margin-top:auto; }

/* add-to-cart button */
.item-card .add-to-cart {
  display:inline-block;
  margin-top:8px;
  padding:8px 12px;
  background: linear-gradient(135deg,var(--brand), #d99a3a);
  color:#28160d;
  border-radius:8px;
  border:0;
  cursor:pointer;
  font-weight:600;
}

/* cart */
.cart { background: var(--panel); padding: 14px; border-radius:12px; box-shadow:var(--shadow); }
.cart h3 { margin:0 0 10px; }
.cart-list { min-height: 60px; margin-bottom: 8px; }
.cart-item { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:8px; }
.cart-item .meta {display:flex;flex-direction:column;}
.cart-item .controls { display:flex; gap:6px; align-items:center; }
.cart-item button { background:transparent;border:none;color:var(--muted);cursor:pointer;font-weight:700; }

.cart-summary { margin-top:8px; font-size:16px; }
.checkout label { font-size:13px; color:var(--muted); margin-top:8px; display:block; }
.checkout input, .checkout select { width:100%; padding:8px; border-radius:8px; border:1px solid #e8dfd4; margin-top:6px; background:#fff; color:var(--text); }

#confirmCart { margin-top:12px; }
#clearCart { margin-top:8px; }
.message-area { min-height:20px; margin-top:6px; font-size:14px; }