/* Базові кольори/радіуси */
:root{
  --bg:#0e0f12; --card:#15171c; --text:#e9ecf1; --muted:#a7b0bb;
  --accent:#74ffd8; --accent-2:#ffd274; --radius:14px;
}

/* Глобально */
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);scroll-behavior:smooth}
.container{max-width:1100px;margin:0 auto;padding:0 18px}

/* Навігація */
.nav{position:sticky;top:0;backdrop-filter:saturate(160%) blur(8px);background:rgba(14,15,18,.7);z-index:50;border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.logo{font-weight:800}
.nav a{color:var(--text);text-decoration:none;margin-left:18px;opacity:.9}
.nav a:hover{opacity:1}

/* Hero */
.hero{
  padding:90px 0; text-align:center;
  background:radial-gradient(1200px 600px at 10% -10%, rgba(116,255,216,.18), transparent), 
             radial-gradient(900px 500px at 90% 10%, rgba(255,210,116,.16), transparent);
}
.hero h1{font-size:42px;margin:0 0 10px}
.hero p{color:var(--muted);max-width:720px;margin:0 auto}
.btn{display:inline-block;margin-top:16px;padding:12px 18px;border-radius:10px;background:var(--accent);color:#0a0b0d;text-decoration:none;font-weight:700}
.btn.outline{background:transparent;border:1px solid var(--accent);color:var(--text)}
.btns .btn{margin-right:10px}

/* Секції */
.section{padding:60px 0}
.section.alt{background:rgba(255,255,255,.03)}
h2{font-size:28px;margin:0 0 16px}

/* Списки меню */
.list{list-style:none;margin:0;padding:0;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);overflow:hidden}
.list li{display:flex;justify-content:space-between;gap:16px;padding:12px 14px;border-bottom:1px dashed rgba(255,255,255,.07)}
.list li:last-child{border-bottom:none}
.list small{font-size:.95rem;color:var(--muted)}
.list span:last-child{color:var(--accent-2);font-weight:700;text-align:right;white-space:nowrap}

/* Плитки з фото */
.grid.cards{display:grid;gap:18px}
@media(min-width:760px){ .grid.cards{grid-template-columns:repeat(3,1fr)} }
.card.food{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);overflow:hidden}
.card.food img{width:100%;height:180px;object-fit:cover;display:block}
.card.food .pad{padding:14px}
.card.food h3{margin:0 0 6px}
.card.food p{margin:0;color:var(--muted);min-height:38px}
.price{margin-top:8px;font-weight:800;color:var(--accent-2)}

/* Контакти + футер */
.contact{list-style:none;margin:0 0 12px;padding:0}
.contact li{margin:6px 0}
.footer{border-top:1px solid rgba(255,255,255,.06);padding:18px 0;background:rgba(255,255,255,.02)}
.footer-inner{display:flex;justify-content:center}

/* Щоб якір не ховався під «липкою» шапкою */
.section, h2[id], h3[id]{scroll-margin-top:80px}
/* Секція псування майна */
#damage {
margin-top: 40px;
}

#damage h2 {
text-align: center;
font-size: 28px;
margin-bottom: 20px;
color: #f4d03f;
}

#damage .grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}

#damage .card {
background: #222;
padding: 20px;
border: 1px solid #444;
border-radius: 8px;
text-align: center;
}

#damage .card h3 {
font-size: 20px;
margin-bottom: 10px;
}

#damage .card .price {
font-size: 22px;
font-weight: bold;
color: #ffcc00;
}

#damage .note {
margin-top: 20px;
text-align: center;
font-size: 18px;
color: #ff4d4d;
font-weight: bold;
}
/* Додатки */
#addons h2 {
text-align: center;
font-size: 28px;
margin-bottom: 20px;
color: #4fd1c5; /* бірюзовий акцент */
}

#addons .grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}

#addons .card {
background: #222;
padding: 15px;
border: 1px solid #444;
border-radius: 8px;
text-align: center;
}

#addons .card h3 {
font-size: 18px;
margin-bottom: 8px;
}

#addons .card .price {
font-size: 20px;
font-weight: bold;
color: #ffcc00;
}
food-card img {
width: 100%;
height: 200px; /* можна змінити на 180px чи 220px */
object-fit: cover;
border-radius: 8px;
margin-bottom: 10px;
}
/* === Фікс для бургер-меню === */
#burgers .grid {
display: grid;
gap: 18px;
}
@media (min-width: 760px) {
#burgers .grid { grid-template-columns: repeat(3, 1fr); }
}

/* Змушуємо фото у картках бургерів бути як у піц */
#burgers .card img {
width: 100%;
height: 200px; /* можеш змінити на 180/220px */
object-fit: cover; /* обрізає рівно по картці */
display: block;
border-radius: 8px;
margin-bottom: 10px;
}

/* На випадок, якщо десь є правила, що ламають висоту */
#burgers img { height: 200px !important; object-fit: cover !important; }