/* =========================
MENU SECTION
========================= */

.menu-section{

padding:80px 20px 140px 20px;

position:relative;
overflow:hidden;

/* waffle background */

background-color:#f2d6a2;

background-image:
repeating-linear-gradient(
45deg,
rgba(0,0,0,0.05) 0px,
rgba(0,0,0,0.05) 12px,
transparent 12px,
transparent 24px
),
repeating-linear-gradient(
-45deg,
rgba(0,0,0,0.05) 0px,
rgba(0,0,0,0.05) 12px,
transparent 12px,
transparent 24px
);

background-size:48px 48px;

}


.cone-divider {
    width: 100%;
    height: 140px;
    background: url('/resources/views/home/images/menu/waffle.jpg') repeat;
    background-size: 180px;
}

/* =========================
TITLE
========================= */

.menu-title{

text-align:center;
font-size:42px;
margin-bottom:50px;

}


/* =========================
TABS
========================= */

.menu-tabs{

display:flex;
justify-content:center;
gap:20px;
margin-bottom:40px;
flex-wrap:wrap;

}

.tab{

padding:12px 26px;

border:none;

background:#fff;

border-radius:40px;

cursor:pointer;

font-weight:600;

box-shadow:0 6px 15px rgba(0,0,0,0.08);

transition:.25s;

}

.tab:hover{
transform:translateY(-2px);
}

.tab.active{

background:#4b1c04;
color:#fff;

}


/* =========================
GRID
========================= */

.menu-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:40px;

max-width:1200px;

margin:auto;

}


/* =========================
CATEGORY CARDS
========================= */

.menu-card{

background:#EDE986;

padding:35px;

text-align:center;

border-radius:20px;

box-shadow:0 15px 40px rgba(0,0,0,0.15);

transition:all .35s ease;

}

.menu-card:hover{

transform:translateY(-12px) scale(1.04);

box-shadow:0 30px 60px rgba(0,0,0,0.2);

}

.menu-card img{

width:200px;

max-width:100%;

height:auto;

margin-bottom:20px;

transition:transform .35s ease;

}

.menu-card:hover img{

transform:scale(1.12) rotate(-2deg);

}


.menu-card h3{

font-size:24px;

margin:10px 0 15px;

font-weight:700;

}

.menu-card p{

font-weight:bold;

}


/* =========================
CARD ACTION BUTTONS
========================= */

.card-actions{

display:flex;
gap:10px;
justify-content:center;
margin-top:15px;

}

.menu-action{

border:none;

padding:10px 20px;

border-radius:25px;

background:var(--black);

color:white;

cursor:pointer;

font-size:15px;

font-weight:600;

transition:.2s;

}

.menu-action:hover{

transform:scale(1.08);

}

.menu-action:hover{

transform:scale(1.05);

}


/* =========================
TAB CONTENT
========================= */

.tab-content{
display:none;
}

.tab-content.active{
display:block;
}


/* =========================
MODAL (FULLSCREEN)
========================= */

.menu-modal{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.7);

display:none;

align-items:center;
justify-content:center;

z-index:9999;

}

.menu-modal.active{
display:flex;
}


/* =========================
MODAL WINDOW
========================= */

.modal-window{

width:92vw;
height:90vh;

background:white;

border-radius:16px;

overflow:auto;

padding:40px;

position:relative;

}


/* =========================
MODAL HEADER
========================= */

.modal-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

border-bottom:1px solid #eee;

padding-bottom:10px;

}

.close-modal{

font-size:26px;

background:none;

border:none;

cursor:pointer;

opacity:.6;

transition:.2s;

}

.close-modal:hover{
opacity:1;
}


/* =========================
MODAL ANIMATION
========================= */

.modal-window{

animation:modalPop .35s ease;

}

@keyframes modalPop{

0%{
transform:scale(.9);
opacity:0;
}

100%{
transform:scale(1);
opacity:1;
}

}


/* =========================
MENU LIST (BROWSE VIEW)
========================= */

.menu-list{

list-style:none;
padding:0;

}

.menu-list li{

padding:12px 0;

border-bottom:1px solid #eee;

font-size:18px;

}


/* =========================
GALLERY GRID
========================= */

.gallery-grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(220px,1fr));

gap:20px;

}

.gallery-grid img{

width:100%;

border-radius:10px;

transition:.25s;

}

.gallery-grid img:hover{

transform:scale(1.05);

}



.menu-desc{

font-size:15px;

color:#555;

line-height:1.5;

margin-bottom:20px;

max-width:260px;

margin-left:auto;
margin-right:auto;

}

.menu-card{

display:flex;

flex-direction:column;

align-items:center;

}


.modal-body{

max-width:800px;

margin:auto;

padding-top:10px;

}

.menu-list{

display:flex;

flex-direction:column;

gap:18px;

margin-top:20px;

}

.menu-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:14px 0;

border-bottom:1px solid #eee;

font-size:18px;

}

.menu-item-name{

font-weight:600;

}

.menu-item-price{

font-weight:700;

}

.menu-item-desc{

font-size:14px;

color:#777;

margin-top:4px;

}


/* MENU ITEM LIST */

.menu-items{
display:flex;
flex-direction:column;
gap:18px;
padding:30px 0;
}


/* ITEM ROW */

.menu-item{

display:flex;
align-items:center;

gap:20px;

padding:18px 22px;

border-radius:14px;

background:#fff;

border:1px solid rgba(0,0,0,0.06);

transition:all .25s ease;

cursor:pointer;

}


/* HOVER EFFECT */

.menu-item:hover{

transform:translateY(-3px);

box-shadow:0 12px 30px rgba(0,0,0,0.12);

}


/* IMAGE */

.menu-item-image{

width:70px;
height:70px;

flex-shrink:0;

border-radius:12px;

overflow:hidden;

background:#fafafa;

display:flex;
align-items:center;
justify-content:center;

}

.menu-item-image img{

width:100%;
height:100%;

object-fit:cover;

}


/* TEXT */

.menu-item-info{

flex:1;

}

.menu-item-name{

font-weight:700;

font-size:18px;

margin-bottom:4px;

}

.menu-item-desc{

font-size:14px;

color:#666;

}


/* PRICE */

.menu-item-price{

font-weight:700;

font-size:18px;

color:#000;

}



/* =========================
IMAGE VIEWER
========================= */

.image-viewer{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.85);

display:none;

align-items:center;
justify-content:center;

z-index:10000;

}

.image-viewer.active{
display:flex;
}

.image-viewer img{

max-width:90%;
max-height:90%;

border-radius:12px;

box-shadow:0 20px 60px rgba(0,0,0,0.5);

}

.close-viewer{

position:absolute;

top:25px;
right:35px;

font-size:40px;

color:white;

cursor:pointer;

}



@media (max-width:700px){

.menu-item{

flex-direction:column;

align-items:flex-start;

}

.menu-item-price{

align-self:flex-end;

margin-top:8px;

}

.menu-item-image{

width:100%;
height:180px;

}

.menu-item-image img{

object-fit:cover;

}

}