/*=========================================================
  THE SPOILED CHEF
  MENU PAGE
=========================================================*/

/*=========================================================
MENU HERO
=========================================================*/

.menu-hero{

    position:relative;

    background:linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-primary-dark)
    );

    overflow:hidden;

    padding:120px 0 80px;

}

.menu-hero::before{

    content:"";

    position:absolute;

    top:-200px;

    right:-200px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

}

.menu-hero::after{

    content:"";

    position:absolute;

    left:-180px;

    bottom:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(255,255,255,.04);

}

.menu-hero .container{

    position:relative;

    z-index:2;

}

/*=========================================================
MENU HERO WRAPPER
=========================================================*/

.menu-hero__wrapper{

    display:grid;

    grid-template-columns:1.2fr 1fr;

    gap:60px;

    align-items:center;

}

.menu-hero__content{

    color:#ffffff;

}

.menu-hero__content h1{

    color:#ffffff;

    margin:20px 0;

}

.menu-hero__content p{

    color:rgba(255,255,255,.9);

    margin-bottom:35px;

    max-width:550px;

}

/*=========================================================
BREADCRUMB
=========================================================*/

.breadcrumb{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:25px;

    font-size:.95rem;

}

.breadcrumb a{

    color:rgba(255,255,255,.85);

}

.breadcrumb span{

    color:#ffffff;

}

/*=========================================================
SEARCH
=========================================================*/

.menu-search{

    display:flex;

    max-width:550px;

    background:#ffffff;

    border-radius:60px;

    overflow:hidden;

    box-shadow:var(--shadow-lg);

}

.menu-search input{

    flex:1;

    height:60px;

    padding:0 25px;

    border:none;

    background:transparent;

    font-size:1rem;

}

.menu-search button{

    min-width:150px;

    background:var(--color-secondary);

    color:#111111;

    font-weight:700;

    transition:var(--transition);

}

.menu-search button:hover{

    background:#ffd84a;

}

/*=========================================================
HERO IMAGE
=========================================================*/

.menu-hero__image{

    text-align:center;

}

.menu-hero__image img{

    max-width:100%;

    filter:drop-shadow(0 30px 40px rgba(0,0,0,.25));

}

/*=========================================================
CATEGORY NAVIGATION
=========================================================*/

.menu-category-nav{

    position:sticky;

    top:var(--header-height);

    z-index:90;

    background:#ffffff;

    box-shadow:var(--shadow-sm);

    border-bottom:1px solid var(--color-border);

}

.category-scroll{

    display:flex;

    gap:15px;

    overflow-x:auto;

    padding:18px 0;

    scrollbar-width:none;

}

.category-scroll::-webkit-scrollbar{

    display:none;

}

.category-scroll a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    white-space:nowrap;

    padding:12px 22px;

    border-radius:999px;

    background:#f6f6f6;

    color:var(--color-heading);

    font-weight:600;

    transition:var(--transition);

}

.category-scroll a:hover,

.category-scroll a.active{

    background:var(--color-primary);

    color:#ffffff;

}

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

.menu-section{

    padding:80px 0;

}

.menu-section:nth-child(even){

    background:#fafafa;

}

.menu-heading{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:45px;

}

.menu-heading h2{

    margin:0;

}

.menu-heading p{

    margin:10px 0 0;

}
/*=========================================================
MENU GRID
=========================================================*/

.menu-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.menu-card{

    background:#ffffff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:var(--shadow-md);

    transition:var(--transition);

}

.menu-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.menu-card__image{

    position:relative;

    overflow:hidden;

}

.menu-card__image img{

    width:100%;

    aspect-ratio:1;

    object-fit:cover;

    transition:.4s;

}

.menu-card:hover img{

    transform:scale(1.08);

}

.menu-badge{

    position:absolute;

    top:18px;

    left:18px;

    background:var(--color-primary);

    color:#ffffff;

    padding:8px 16px;

    border-radius:999px;

    font-size:.8rem;

    font-weight:700;

    z-index:2;

}

.menu-card__content{

    padding:30px;

}

.menu-card__content h3{

    margin:18px 0 12px;

}

.menu-meta{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    font-size:.85rem;

    color:var(--color-text-light);

}

.non-veg{

    color:#D71920;

    font-weight:700;

}

.veg{

    color:#0F9D58;

    font-weight:700;

}

.menu-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:25px;

}

.menu-footer .price{

    font-size:1.7rem;

    font-weight:700;

    color:var(--color-primary);

}