/* --- VARIABLES --- */
:root {
    --burgundy: #800000;
    --gold: #FFCC00;
    --black: #111;
    --dark-gray: #222;
    --light: #f4f4f4;
}

/* --- GLOBAL --- */
body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--black); color: var(--light); }
a { text-decoration: none; }
.container { max-width: 1100px; margin: auto; padding: 20px; }
section { margin-bottom: 80px; padding-top: 20px; }

/* --- HERO --- */
.hero { height: 60vh; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; }
.logo { font-size: 4rem; margin: 0; color: var(--gold); text-transform: uppercase; text-shadow: 4px 4px 0px var(--burgundy); letter-spacing: 3px; }
.tagline { font-size: 1.5rem; font-weight: bold; letter-spacing: 2px; margin-bottom: 30px; }
.hero-btns .btn { margin: 10px; }

/* --- BUTTONS --- */
.btn { padding: 12px 30px; font-weight: bold; border-radius: 4px; cursor: pointer; display: inline-block; border: 2px solid transparent; transition: 0.3s; }
.btn-gold { background: var(--gold); color: var(--black); }
.btn-gold:hover { background: white; }
.btn-outline { border-color: var(--gold); color: var(--gold); }
.btn-outline:hover { background: var(--gold); color: var(--black); }
.btn-burgundy { background: var(--burgundy); color: white; border: none; }
.full-width { width: 100%; display: block; text-align: center; }

/* --- INFO BAR --- */
.info-bar { background: var(--burgundy); display: flex; justify-content: center; flex-wrap: wrap; padding: 10px; }
.info-bar p { margin: 5px 20px; font-weight: bold; font-size: 0.9rem; }
.info-bar a { color: white; }

/* --- MENU GRID --- */
.section-title { border-left: 5px solid var(--gold); padding-left: 15px; font-size: 2rem; color: white; margin-bottom: 30px; }
.menu-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; }
.menu-item { background: var(--dark-gray); padding: 20px; border-radius: 8px; margin-bottom: 20px; border-left: 4px solid transparent; }
.menu-item:hover { border-left: 4px solid var(--gold); }
.item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.item-header h3 { margin: 0; color: var(--gold); }
.price { font-size: 1.2rem; font-weight: bold; }
.btn-add { background: #444; color: white; border: none; padding: 5px 15px; cursor: pointer; float: right; border-radius: 4px; }
.btn-add:hover { background: var(--gold); color: black; }
.menu-image img { width: 100%; border-radius: 8px; border: 2px solid var(--gold); object-fit: cover; height: 100%; }

/* --- STICKY CART --- */
#sticky-cart { position: fixed; bottom: 20px; right: 20px; width: 300px; background: white; color: black; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.5); overflow: hidden; z-index: 1000; display: none; }
.cart-header { background: var(--burgundy); color: white; padding: 15px; cursor: pointer; display: flex; justify-content: space-between; font-weight: bold; }
#cart-body { padding: 15px; display: none; } /* Hidden by default */
#cart-body.open { display: block; }
#cart-list { list-style: none; padding: 0; margin: 0; max-height: 200px; overflow-y: auto; }
#cart-list li { border-bottom: 1px solid #eee; padding: 8px 0; font-size: 0.9rem; display: flex; justify-content: space-between; }
.cart-footer { border-top: 2px solid black; margin-top: 10px; padding-top: 10px; font-weight: bold; }

/* --- PARTY FORM --- */
.party-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.party-image img { width: 100%; border-radius: 8px; border: 2px solid var(--burgundy); }
.party-form { background: var(--dark-gray); padding: 30px; border-radius: 8px; }
.party-form input, .party-form select { width: 100%; padding: 12px; margin-bottom: 15px; background: #333; border: 1px solid #555; color: white; border-radius: 4px; box-sizing: border-box; }
.party-form .row { display: flex; gap: 10px; }
.checkbox-label { display: block; margin-bottom: 20px; cursor: pointer; }

/* --- MOBILE --- */
@media (max-width: 768px) {
    .hero { height: 50vh; }
    .logo { font-size: 2.5rem; }
    .menu-layout, .party-layout { grid-template-columns: 1fr; }
    .menu-image, .party-image { order: -1; } /* Images on top for mobile */
    #sticky-cart { width: 90%; left: 5%; right: 5%; }
}