/* ===================================
   BAR KEBABERO
   Blackboard / Chalk Theme
=================================== */


/* ---------- GLOBAL ---------- */

* {
    box-sizing: border-box;
}


body {

    margin: 0;

    font-family:
        "Trebuchet MS",
        Arial,
        sans-serif;

    background:

        linear-gradient(
            rgba(0,0,0,0.15),
            rgba(0,0,0,0.15)
        ),

        #1c1c1c;

    color: #f5f1e8;

    line-height: 1.6;

}


/* Chalk effect */

h1,
h2,
h3 {

    font-family:
        "Comic Sans MS",
        "Trebuchet MS",
        cursive;

    color: #ffffff;

    text-shadow:
        1px 1px 2px #000;

}



a {

    color: #ffd166;

    text-decoration: none;

}



button {

    cursor: pointer;

    border: none;

    font-size: 16px;

}



/* ---------- HEADER ---------- */


.header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 15px 20px;

    background:

    rgba(0,0,0,0.75);

    border-bottom:

    2px solid #444;

    position: sticky;

    top:0;

    z-index:100;

}



.logo-container img {

    width:70px;

    height:70px;

    object-fit:contain;

}



.header h1 {

    margin:0;

    font-size:26px;

}



#cartButton {

    background:#ffd166;

    color:#222;

    padding:10px 15px;

    border-radius:10px;

    font-weight:bold;

}



#cartCount {

    background:#d62828;

    color:white;

    border-radius:50%;

    padding:3px 8px;

}





/* ---------- HERO ---------- */


.hero {


    min-height:450px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:30px;


    background:

    linear-gradient(

    rgba(0,0,0,.65),

    rgba(0,0,0,.65)

    ),

    url("../images/logo.png");


    background-size:cover;

    background-position:center;


}



.hero h2 {

    font-size:38px;

}



.hero p {

    max-width:500px;

    font-size:20px;

}



.hero button,
.whatsapp-button,
.call-button {


    display:inline-block;

    margin:10px;

    padding:14px 25px;

    border-radius:8px;

    font-weight:bold;


}



.hero button {

    background:#ffd166;

    color:#222;

}



.whatsapp-button {

    background:#25D366;

    color:white;

}




/* ---------- INFORMATION ---------- */


.info {


    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));


    gap:20px;

    padding:30px;

}



.info div {


    background:#262626;

    padding:20px;

    border-radius:12px;


    border:

    1px solid #555;


}





/* ---------- MENU ---------- */


#menu {

    padding:30px;

}



#menu h2 {

    text-align:center;

    font-size:32px;

}



#categories {


    display:flex;

    overflow-x:auto;

    gap:10px;

    padding:15px;

}



.category-button {


    background:#333;

    color:white;

    padding:10px 20px;

    border-radius:20px;


}



#products {


    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(260px,1fr));


    gap:20px;


}




.product {


    background:#242424;

    border-radius:15px;

    overflow:hidden;

    border:

    1px solid #555;


}



.product img {


    width:100%;

    height:180px;

    object-fit:cover;


}



.product-content {


    padding:15px;

}



.product h3 {


    margin-top:0;

}



.price {


    color:#ffd166;

    font-size:22px;

    font-weight:bold;


}



.add-button {


    width:100%;

    padding:12px;

    background:#ffd166;

    color:#222;

    border-radius:8px;


}



/* ---------- SECTIONS ---------- */


.delivery,
.reservation,
.location {


    padding:30px;

    text-align:center;

}



.call-button {

    background:#25D366;

    color:white;

}





/* ---------- CART MODAL ---------- */


.modal {


    display:none;


    position:fixed;


    top:0;

    left:0;


    width:100%;


    height:100%;


    background:

    rgba(0,0,0,.8);


    z-index:500;



}




.cart-box {


    background:#222;


    width:90%;

    max-width:500px;


    margin:50px auto;


    padding:25px;


    border-radius:15px;


}



.cart-item {


    display:flex;


    justify-content:space-between;


    border-bottom:

    1px solid #555;


    padding:10px 0;


}



#customerName,
#customerNotes {


    width:100%;

    padding:12px;

    margin:10px 0;


    background:#333;

    color:white;

    border:

    1px solid #666;


    border-radius:8px;


}



#sendWhatsapp {


    width:100%;


    background:#25D366;


    color:white;


    padding:15px;


    border-radius:10px;


}



#closeCart {


    width:100%;


    margin-top:10px;


    background:#555;

    color:white;

    padding:12px;


}





/* ---------- FOOTER ---------- */


footer {


    background:#111;

    padding:25px;

    text-align:center;


}



footer a {


    margin:10px;

}





/* ---------- MOBILE ---------- */


@media(max-width:600px){


.header h1 {

    font-size:20px;

}



.hero h2 {

    font-size:30px;

}


}