/* ==========================================
   SPANKY'S KITCHEN
   MENU.CSS
   Menu-page styles only
========================================== */

/* SUCCESS MESSAGE */

.success-message{
    background:#606C38;
    color:#FFFFFF;
    padding:12px 16px;
    border-radius:10px;
    margin-bottom:20px;
    font-weight:600;
}

/* MENU ACTIONS */

.menu-actions{
    margin:40px 0 30px;
}

.menu-actions .order-btn{
    max-width:320px;
    display:block;
    margin:0 auto;
}

/* MENU GRID */

.menu-grid{
    width:100%;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:20px;
}

/* MENU CARD */

.purchase-card{
    background:#FFFFFF;
    border:3px solid transparent;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 4px 15px rgba(0,0,0,.08);
    display:flex;
    flex-direction:column;
    height:100%;
    transition:.2s ease;
}

.purchase-card:has(.menu-checkbox input:checked){
    border-color:#D45113;
    box-shadow:0 4px 18px rgba(212,81,19,.35);
}

.purchase-card img{
    width:100%;
    height:250px;
    object-fit:cover;
    display:block;
    background:#f2f2f2;
}

.card-body{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:15px;
}

.card-body h2{
    margin:0 0 10px;
    font-size:1.2rem;
    line-height:1.3;
    color:#222222;
}

.description{
    flex:1;
    margin:0 0 15px;
    line-height:1.5;
    color:#555555;
}

.item-meta{
    margin-bottom:12px;
    font-size:.95rem;
    color:#444444;
}

.price{
    margin-bottom:15px;
    font-size:1.6rem;
    font-weight:700;
    color:#D45113;
}

/* CHECKBOX ADD TO CART */

.add-cart-form{
    margin:0;
}

.menu-checkbox{
    width:100%;
    padding:12px;
    border-radius:8px;
    background:#D45113;
    color:#FFFFFF;
    font-size:1rem;
    font-weight:700;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    transition:opacity .2s ease;
}

.menu-checkbox:hover{
    opacity:.9;
}

.menu-checkbox input{
    width:22px;
    height:22px;
    cursor:pointer;
    accent-color:#F9A03F;
}

.menu-checkbox span{
    cursor:pointer;
    user-select:none;
}

/* BUTTON */

.order-btn{
    width:100%;
    padding:12px;
    border:none;
    border-radius:8px;
    background:#D45113;
    color:#FFFFFF;
    font-size:1rem;
    font-weight:700;
    cursor:pointer;
    transition:opacity .2s ease;
}

.order-btn:hover{
    opacity:.9;
}

/* EMPTY STATE */

.empty{
    margin-top:20px;
    padding:60px 20px;
    text-align:center;
    background:#FFFFFF;
    color:#333333;
    border-radius:12px;
}

/* TABLET */

@media(max-width:1024px){

    .menu-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

/* MOBILE */

@media(max-width:768px){

    .menu-grid{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:20px;
    }

    .purchase-card{
        width:70vw;
        max-width:70vw;
    }

    .purchase-card img{
        height:220px;
    }

    .card-body{
        padding:12px;
    }

    .card-body h2{
        font-size:1.1rem;
    }

    .description{
        font-size:.95rem;
    }

    .price{
        font-size:1.4rem;
    }

    .menu-actions .order-btn{
        max-width:70vw;
    }

}

/* SMALL PHONES */

@media(max-width:480px){

    .purchase-card{
        width:90vw;
        max-width:90vw;
    }

    .purchase-card img{
        height:180px;
    }

    .card-body h2{
        font-size:1rem;
    }

    .description{
        font-size:.9rem;
    }

    .price{
        font-size:1.25rem;
    }

    .menu-actions{
        margin:30px 0 25px;
    }

}