/* ===================================
            RESET
=================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --primary:#980000;
    --primary-dark:#760000;
    --secondary:#FFD54F;
    --background:#f6f6f6;
    --white:#ffffff;
    --black:#222;
    --gray:#777;
    --shadow:0 10px 25px rgba(0,0,0,.08);

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Cairo",sans-serif;

    background:var(--background);

    color:var(--black);

    overflow-x:hidden;

}

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

header{

    position:sticky;

    top:0;

    z-index:1000;

    background:rgba(152,0,0,.95);

    backdrop-filter:blur(10px);

    box-shadow:0 4px 15px rgba(0,0,0,.1);

}

nav{

    max-width:1200px;

    margin:auto;

    height:80px;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:0 20px;

}

.logo img{

    height:58px;

    display:block;

}

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

.search-section{

    max-width:900px;

    margin:35px auto 25px;

    padding:0 20px;

}

.search-box{

    background:white;

    border-radius:50px;

    display:flex;

    align-items:center;

    gap:15px;

    padding:0 22px;

    height:58px;

    box-shadow:var(--shadow);

}

.search-box i{

    color:var(--gray);

    font-size:20px;

}

.search-box input{

    flex:1;

    border:none;

    outline:none;

    font-family:inherit;

    font-size:17px;

    background:transparent;

}

/* ===================================
            CATEGORIES
=================================== */

.categories{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

    margin:10px auto 35px;

    padding:0 20px;

}

.category{

    border:none;

    background:white;

    padding:12px 22px;

    border-radius:30px;

    cursor:pointer;

    font-family:inherit;

    font-size:15px;

    font-weight:700;

    transition:.3s;

    box-shadow:0 4px 12px rgba(0,0,0,.05);

}

.category:hover{

    transform:translateY(-3px);

}

.category.active{

    background:var(--primary);

    color:white;

}
/* ===================================
            PRODUCTS GRID
=================================== */

.products{

    max-width:1200px;

    margin:auto;

    padding:20px;

    display:grid;

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

    gap:25px;

}

/* ===================================
            PRODUCT CARD
=================================== */

.card{

    background:var(--white);

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

    position:relative;

}

.card:hover{

    transform:translateY(-8px);

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

}

.card img{

    width:100%;

    height:220px;

    object-fit:cover;

    display:block;

}

.card-body{

    padding:20px;

}

.card-body h3{

    font-size:24px;

    font-weight:800;

    margin-bottom:10px;

    color:var(--black);

}

.card-body p{

    color:var(--gray);

    line-height:1.8;

    font-size:15px;

    margin-bottom:18px;

    min-height:50px;

}

.price{

    color:var(--primary);

    font-size:26px;

    font-weight:900;

    margin-bottom:18px;

}

.card-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

}

/* ===================================
            BADGE
=================================== */

.badge{

    background:#FFE9A6;

    color:#8B0000;

    padding:6px 14px;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    white-space:nowrap;

}

/* ===================================
            ADD BUTTON
=================================== */

.add-btn{

    border:none;

    background:var(--primary);

    color:white;

    padding:12px 18px;

    border-radius:12px;

    cursor:pointer;

    font-family:inherit;

    font-size:15px;

    font-weight:700;

    transition:.3s;

}

.add-btn:hover{

    background:var(--primary-dark);

    transform:scale(1.05);

}

.add-btn:active{

    transform:scale(.95);

}

/* ===================================
            EMPTY RESULT
=================================== */

.empty-products{

    grid-column:1/-1;

    background:white;

    padding:50px;

    text-align:center;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.empty-products h2{

    color:var(--gray);

    font-size:24px;

}

/* ===================================
            PRODUCT ANIMATION
=================================== */

.card{

    animation:fadeUp .45s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* ===================================
            TOAST
=================================== */

.toast{

    position:fixed;

    top:20px;

    right:20px;

    background:#27ae60;

    color:white;

    padding:15px 22px;

    border-radius:15px;

    display:flex;

    align-items:center;

    gap:10px;

    box-shadow:0 15px 35px rgba(0,0,0,.25);

    transform:translateX(150%);

    opacity:0;

    transition:.35s;

    z-index:99999;

    font-weight:700;

}

.toast.show{

    transform:translateX(0);

    opacity:1;

}

/* ===================================
            CART BAR
=================================== */

.cart-bar{

    position:fixed;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    width:min(95%,520px);

    background:var(--primary);

    color:white;

    border-radius:20px;

    padding:15px 20px;

    display:none;

    justify-content:space-between;

    align-items:center;

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

    z-index:999;

    animation:slideUp .35s;

}

.cart-details{

    display:flex;

    flex-direction:column;

    gap:5px;

}

.cart-details span{

    font-size:15px;

}

.cart-details strong{

    font-size:22px;

    color:var(--secondary);

}

#openCart{

    border:none;

    background:var(--secondary);

    color:var(--primary);

    padding:14px 20px;

    border-radius:14px;

    cursor:pointer;

    font-family:inherit;

    font-weight:800;

    transition:.3s;

}

#openCart:hover{

    transform:scale(1.05);

}

/* ===================================
            OVERLAY
=================================== */

.overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:1000;

}

.overlay.show{

    opacity:1;

    visibility:visible;

}

/* ===================================
            CART DRAWER
=================================== */

.cart-drawer{

    position:fixed;

    left:0;

    right:0;

    bottom:-100%;

    background:white;

    border-radius:30px 30px 0 0;

    padding:25px;

    max-height:85vh;

    overflow:auto;

    transition:.4s;

    z-index:1001;

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

}

.cart-drawer.show{

    bottom:0;

}

/* ===================================
            DRAWER HEADER
=================================== */

.drawer-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.drawer-header h2{

    color:var(--primary);

    font-size:28px;

}

.drawer-header button{

    border:none;

    background:#eee;

    width:45px;

    height:45px;

    border-radius:50%;

    cursor:pointer;

    font-size:18px;

}

/* ===================================
            CART ITEMS
=================================== */

.cart-items{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.cart-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#fafafa;

    border-radius:18px;

    padding:15px;

}

.item-info h4{

    margin-bottom:6px;

}

.item-price{

    color:var(--primary);

    font-weight:800;

}

.qty{

    display:flex;

    align-items:center;

    gap:10px;

}

.qty button{

    width:34px;

    height:34px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:var(--primary);

    color:white;

    font-size:18px;

}

/* ===================================
            DRAWER FOOTER
=================================== */

.drawer-footer{

    margin-top:30px;

    border-top:1px solid #eee;

    padding-top:20px;

}

.total{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

    font-size:22px;

    font-weight:800;

}

#checkoutBtn{

    width:100%;

    border:none;

    background:#25D366;

    color:white;

    padding:18px;

    border-radius:15px;

    cursor:pointer;

    font-size:18px;

    font-family:inherit;

    font-weight:800;

    transition:.3s;

}

#checkoutBtn:hover{

    transform:translateY(-3px);

}

/* ===================================
            Animation
=================================== */

@keyframes slideUp{

    from{

        transform:translate(-50%,120px);

        opacity:0;

    }

    to{

        transform:translate(-50%,0);

        opacity:1;

    }

}
/* ===================================
            CUSTOMER MODAL
=================================== */

.customer-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:1100;

}

.customer-modal.show{

    opacity:1;

    visibility:visible;

}

.modal-box{

    width:min(95%,450px);

    background:white;

    border-radius:25px;

    padding:30px;

    animation:modalShow .35s ease;

}

.modal-box h2{

    text-align:center;

    color:var(--primary);

    margin-bottom:25px;

}

.modal-box input,

.modal-box textarea{

    width:100%;

    margin-bottom:15px;

    border:1px solid #ddd;

    border-radius:12px;

    padding:15px;

    font-family:inherit;

    font-size:16px;

    outline:none;

    transition:.3s;

}

.modal-box input:focus,

.modal-box textarea:focus{

    border-color:var(--primary);

}

.modal-box textarea{

    resize:none;

    min-height:110px;

}

#sendOrder{

    width:100%;

    border:none;

    background:#25D366;

    color:white;

    padding:16px;

    border-radius:12px;

    cursor:pointer;

    font-size:18px;

    font-weight:800;

    font-family:inherit;

    transition:.3s;

}

#sendOrder:hover{

    background:#20b358;

}

/* ===================================
            Responsive
=================================== */

@media(max-width:768px){

    nav{

        height:70px;

    }

    .logo img{

        height:50px;

    }

    .products{

        grid-template-columns:1fr;

        padding:15px;

    }

    .search-section{

        padding:0 15px;

    }

    .categories{

        padding:0 15px;

        gap:8px;

    }

    .category{

        padding:10px 18px;

        font-size:14px;

    }

    .card img{

        height:200px;

    }

    .cart-bar{

        bottom:12px;

        width:95%;

        padding:15px;

    }

    #openCart{

        font-size:15px;

        padding:12px 18px;

    }

    .drawer-header h2{

        font-size:22px;

    }

    .modal-box{

        padding:22px;

    }

}

@media(max-width:480px){

    .price{

        font-size:22px;

    }

    .card-body h3{

        font-size:20px;

    }

    .toast{

        right:10px;

        left:10px;

        justify-content:center;

        font-size:14px;

    }

}

/* ===================================
            Animations
=================================== */

@keyframes modalShow{

    from{

        opacity:0;

        transform:translateY(40px) scale(.95);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::selection{

    background:var(--primary);

    color:white;

}