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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Poppins",sans-serif;
    background:#fffaf4;
    color:#2d211b;
    line-height:1.6;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

button{
    font-family:inherit;
    cursor:pointer;
}


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

.header{
    position:sticky;
    top:0;
    z-index:1000;

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

    gap:20px;

    padding:12px 4%;

    background:rgba(255,250,244,.97);

    border-bottom:1px solid #eadbd0;

    box-shadow:
        0 5px 25px rgba(70,40,20,.10);

    backdrop-filter:blur(12px);
}


/* LOGO */

.logo-area{
    display:flex;
    align-items:center;
    gap:12px;

    flex-shrink:0;
}

.logo-area img{
    width:52px;
    height:52px;

    object-fit:contain;
}

.logo-area h2{
    color:#5b321f;

    font-family:"Playfair Display",serif;

    font-size:24px;

    letter-spacing:.5px;
}

.logo-area span{
    font-size:10px;

    color:#9b7058;

    letter-spacing:1.4px;
}


/* ================= PREMIUM NAVIGATION BAR ================= */

.navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* All navigation links */
.navbar a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 15px;

    color: #5b321f;
    background: #f5e8de;

    border: 1px solid #e4cdbd;
    border-radius: 25px;

    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    transition: all 0.3s ease;
}

/* Hover effect */
.navbar a:hover {
    background: #a65f35;
    color: #ffffff;
    border-color: #a65f35;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(91, 50, 31, 0.18);
}

/* Active / clicked style */
.navbar a:active {
    transform: scale(0.96);
}

/* My Orders same style as all other links */
.navbar a[href="#orders"] {
    background: #f5e8de;
    color: #5b321f;
    border: 1px solid #e4cdbd;
}

/* My Orders hover */
.navbar a[href="#orders"]:hover {
    background: #a65f35;
    color: #ffffff;
    border-color: #a65f35;
}


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

.header-buttons {
    display: flex;
    align-items: center;
    gap: 9px;
}

.header-buttons button {
    border: 1px solid #dfcbbb;
    background: #ffffff;
    color: #5b321f;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    cursor: pointer;

    transition: all 0.3s ease;
}

.header-buttons button:hover {
    background: #f5e8de;
    border-color: #a65f35;
    color: #a65f35;
    transform: translateY(-2px);
}


/* ================= DARK MODE NAVBAR ================= */

body.dark-mode .navbar a {
    background: #30231d;
    color: #ead8ca;
    border-color: #49372c;
}

body.dark-mode .navbar a:hover {
    background: #a65f35;
    color: #ffffff;
    border-color: #a65f35;
}

body.dark-mode .navbar a[href="#orders"] {
    background: #30231d;
    color: #ead8ca;
    border-color: #49372c;
}

body.dark-mode .navbar a[href="#orders"]:hover {
    background: #a65f35;
    color: #ffffff;
}


/* ================= MOBILE NAVBAR ================= */

@media (max-width: 1000px) {

    .navbar {
        gap: 6px;
    }

    .navbar a {
        padding: 8px 11px;
        font-size: 13px;
    }
}


@media (max-width: 700px) {

    .header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .navbar {
        order: 3;

        width: 100%;

        overflow-x: auto;

        justify-content: flex-start;

        padding: 5px;

        scrollbar-width: none;
    }

    .navbar::-webkit-scrollbar {
        display: none;
    }

    .navbar a {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

.navbar a i{
    font-size:12px;

    color:#a65f35;

    transition:.3s;
}

.navbar a::after{
    content:"";

    position:absolute;

    left:10px;
    right:10px;
    bottom:4px;

    height:2px;

    background:#a65f35;

    transform:scaleX(0);

    transition:.3s;
}

.navbar a:hover{
    color:#a65f35;

    background:#f8eee7;

    transform:translateY(-1px);
}

.navbar a:hover::after{
    transform:scaleX(1);
}


/* MY ORDERS */

.navbar .orders-link{
    background:#5b321f;
    color:#fff;

    padding-left:13px;
    padding-right:13px;
}

.navbar .orders-link i{
    color:#fff;
}

.navbar .orders-link:hover{
    background:#a65f35;
    color:#fff;
}


/* HEADER BUTTONS */

.header-buttons{
    display:flex;

    gap:8px;

    flex-shrink:0;
}

.header-buttons button{
    border:1px solid #dfcbbb;

    background:#fff;

    width:40px;
    height:40px;

    border-radius:50%;

    color:#5b321f;

    transition:.3s;
}

.header-buttons button:hover{
    transform:translateY(-2px);

    box-shadow:
        0 6px 15px rgba(80,40,20,.12);
}


/* CART COUNT */

.cart-button{
    position:relative;
}

#cartCount{
    position:absolute;

    top:-5px;
    right:-5px;

    width:19px;
    height:19px;

    background:#a8552f;

    color:#fff;

    border-radius:50%;

    font-size:11px;

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


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

.search-box{
    position:fixed;

    top:82px;
    right:4%;

    z-index:2000;

    width:350px;

    background:#fff;

    padding:15px;

    border-radius:12px;

    box-shadow:
        0 10px 40px rgba(0,0,0,.18);

    display:none;
}

.search-content{
    display:flex;
    gap:8px;
}

.search-content input{
    flex:1;

    padding:12px;

    border:1px solid #dbc8b9;

    border-radius:8px;

    outline:none;
}

.search-content button{
    border:none;

    background:#5b321f;

    color:#fff;

    width:42px;

    border-radius:8px;
}

#searchResults{
    margin-top:10px;
}

.search-result{
    padding:8px;

    border-bottom:1px solid #eee;

    cursor:pointer;
}

.search-result:hover{
    background:#f7eee7;
}


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

.hero{
    min-height:88vh;

    background:
        linear-gradient(
            rgba(30,18,12,.55),
            rgba(30,18,12,.65)
        ),
        url("assets/hero.jpg");

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;
}

.hero-content{
    max-width:750px;

    margin-left:8%;

    color:#fff;
}

.small-title{
    color:#e6b67f;

    letter-spacing:4px;

    font-size:13px;

    margin-bottom:15px;
}

.hero h1{
    font-family:"Playfair Display",serif;

    font-size:clamp(45px,6vw,78px);

    line-height:1.05;

    margin-bottom:25px;
}

.hero h1 span{
    color:#e5ad73;

    display:block;
}

.hero-content>p:not(.small-title){
    font-size:18px;

    max-width:650px;

    color:#f4ebe3;
}

.hero-buttons{
    display:flex;

    gap:15px;

    margin-top:30px;
}

.primary-btn,
.secondary-btn{
    display:inline-block;

    padding:13px 25px;

    border-radius:30px;

    transition:.3s;

    font-size:15px;
}

.primary-btn{
    background:#a75c34;

    color:#fff;

    border:none;
}

.primary-btn:hover{
    background:#7c4025;

    transform:translateY(-2px);
}

.secondary-btn{
    border:1px solid #e6c5a9;

    color:#fff;
}

.secondary-btn:hover{
    background:#fff;

    color:#5b321f;
}

.opening-status{
    display:flex;

    align-items:center;

    gap:10px;

    margin-top:30px;

    font-size:14px;
}

.status-dot{
    width:10px;
    height:10px;

    background:#65c466;

    border-radius:50%;
}


/* =====================================================
                     FEATURES
===================================================== */

.features{
    display:grid;

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

    padding:45px 7%;

    background:#fff;

    border-bottom:1px solid #eee0d6;
}

.feature{
    text-align:center;

    padding:15px 25px;

    border-right:1px solid #eee0d6;
}

.feature:last-child{
    border-right:none;
}

.feature>div{
    font-size:32px;

    margin-bottom:10px;
}

.feature h3{
    color:#5b321f;

    margin-bottom:5px;
}

.feature p{
    color:#856c5e;

    font-size:14px;
}


/* =====================================================
                     COMMON
===================================================== */

.section{
    padding:90px 7%;
}

.section-heading{
    text-align:center;

    max-width:700px;

    margin:0 auto 45px;
}

.section-label{
    color:#a65f35;

    letter-spacing:3px;

    font-size:12px;

    font-weight:bold;

    margin-bottom:10px;
}

.section-heading h2,
.about-content h2,
.contact-info h2{
    font-family:"Playfair Display",serif;

    font-size:clamp(32px,4vw,50px);

    line-height:1.15;

    color:#3f291e;

    margin-bottom:15px;
}

.section-heading h2 span,
.about-content h2 span,
.contact-info h2 span{
    color:#a65f35;
}

.section-heading>p:last-child{
    color:#806b5e;
}


/* =====================================================
                     ABOUT
===================================================== */

.about{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;
}

.about-image img{
    width:100%;

    height:560px;

    object-fit:cover;

    border-radius:5px 70px 5px 70px;

    box-shadow:
        20px 20px 0 #ead7c7;
}

.about-content>p:not(.section-label){
    color:#735d50;

    margin-bottom:15px;
}

.about-details{
    display:flex;

    gap:35px;

    margin-top:30px;
}

.about-details div{
    display:flex;

    flex-direction:column;
}

.about-details strong{
    color:#a65f35;

    font-size:30px;
}

.about-details span{
    font-size:13px;

    color:#806b5e;
}


/* =====================================================
                     SPECIALS
===================================================== */

.specials{
    background:#f7eee7;
}

.special-grid{
    display:grid;

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

    gap:25px;
}

.special-card{
    background:#fff;

    overflow:hidden;

    border-radius:12px;

    box-shadow:
        0 10px 30px rgba(60,30,15,.08);

    transition:.3s;
}

.special-card:hover{
    transform:translateY(-8px);
}

.special-card img{
    width:100%;

    height:250px;

    object-fit:cover;
}

.special-info{
    padding:20px;
}

.special-info h3{
    color:#4b2e20;

    margin-bottom:5px;
}

.special-info p{
    color:#806b5e;

    font-size:14px;
}

.price-row{
    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:15px;
}

.price-row strong{
    color:#a65f35;

    font-size:20px;
}

.price-row button{
    border:none;

    background:#5b321f;

    color:#fff;

    padding:8px 15px;

    border-radius:20px;
}


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

.menu-section{
    background:#fffaf4;
}

.menu-tabs{
    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:40px;
}

.menu-tabs button{
    border:1px solid #dbc7b7;

    background:#fff;

    padding:9px 17px;

    border-radius:25px;

    color:#5c4030;

    transition:.3s;
}

.menu-tabs button:hover,
.menu-tabs button.active{
    background:#5b321f;

    color:#fff;

    border-color:#5b321f;
}

.menu-grid{
    display:grid;

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

    gap:22px;
}

.menu-item{
    background:#fff;

    display:flex;

    gap:15px;

    padding:12px;

    border:1px solid #eee0d6;

    border-radius:12px;

    transition:.3s;
}

.menu-item:hover{
    transform:translateY(-4px);

    box-shadow:
        0 10px 25px rgba(60,30,15,.08);
}

.menu-item img{
    width:115px;

    height:115px;

    border-radius:9px;

    object-fit:cover;

    flex-shrink:0;
}

.menu-item>div{
    flex:1;
}

.menu-item h3{
    color:#4a2d20;

    font-size:18px;
}

.menu-item p{
    color:#806b5e;

    font-size:13px;

    line-height:1.4;

    margin-top:4px;
}

.item-bottom{
    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:10px;
}

.item-bottom strong{
    color:#a65f35;
}

.item-bottom button{
    width:30px;

    height:30px;

    border:none;

    border-radius:50%;

    background:#5b321f;

    color:#fff;

    font-size:18px;
}


/* =====================================================
                     PROMO
===================================================== */

.promo{
    margin:20px 7% 80px;

    padding:55px 7%;

    border-radius:20px;

    background:
        linear-gradient(
            100deg,
            rgba(70,37,22,.95),
            rgba(110,58,32,.90)
        );

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;
}

.promo p{
    color:#e8b980;

    letter-spacing:3px;

    font-size:12px;
}

.promo h2{
    font-family:"Playfair Display",serif;

    font-size:35px;

    margin:8px 0;
}

.promo span{
    color:#e8d6c7;
}


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

.gallery{
    display:grid;

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

    gap:15px;
}

.gallery img{
    width:100%;

    height:280px;

    object-fit:cover;

    border-radius:10px;

    transition:.4s;
}

.gallery img:hover{
    transform:scale(1.03);
}


/* =====================================================
                     REVIEWS
===================================================== */

.reviews-section{
    background:#fffaf4;
}

.review-summary{
    max-width:520px;

    margin:0 auto 40px;

    padding:22px 30px;

    background:#fff;

    border:1px solid #eee0d6;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    box-shadow:
        0 10px 30px rgba(60,30,15,.06);
}

.rating-number{
    color:#a65f35;

    font-size:48px;

    font-weight:bold;

    line-height:1;
}

.rating-details{
    display:flex;

    flex-direction:column;

    gap:3px;
}

.rating-details strong{
    color:#4a2d20;
}

.rating-details span{
    color:#806b5e;

    font-size:13px;
}

.stars{
    color:#e29a32;

    letter-spacing:3px;

    font-size:17px;
}

.reviews-grid{
    display:grid;

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

    gap:22px;
}

.review-card{
    background:#fff;

    border:1px solid #eee0d6;

    border-radius:15px;

    padding:24px;

    box-shadow:
        0 10px 30px rgba(60,30,15,.06);

    transition:.3s;
}

.review-card:hover{
    transform:translateY(-6px);
}

.review-top{
    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:15px;
}

.review-avatar{
    width:48px;
    height:48px;

    border-radius:50%;

    background:#5b321f;

    color:#fff;

    display:flex;

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

    font-weight:bold;

    font-size:14px;
}

.review-card h3{
    color:#4a2d20;

    font-size:17px;
}

.review-card>p{
    color:#6f5a4d;

    font-size:14px;

    line-height:1.7;

    margin-bottom:15px;
}

.review-date{
    color:#a08372;

    font-size:12px;
}


/* =====================================================
                     CONTACT
===================================================== */

.contact-section{
    padding:90px 7%;

    background:#f5ebe3;
}

.contact-container{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    max-width:1200px;

    margin:auto;
}

.contact-info>p:not(.section-label){
    color:#755e50;
}

.contact-details{
    margin-top:30px;
}

.contact-details div{
    margin-bottom:18px;
}

.contact-details strong{
    color:#5b321f;

    display:block;
}

.contact-details p,
.contact-link{
    color:#806b5e;

    font-size:14px;
}

.contact-link{
    display:block;

    margin-top:2px;

    transition:.3s;
}

.contact-link:hover{
    color:#a65f35;

    text-decoration:underline;
}

.contact-form{
    background:#fff;

    padding:35px;

    border-radius:15px;

    box-shadow:
        0 15px 40px rgba(60,30,15,.08);
}

.contact-form h3{
    font-family:"Playfair Display",serif;

    font-size:28px;

    color:#4a2d20;

    margin-bottom:20px;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
    width:100%;

    padding:13px 15px;

    margin-bottom:15px;

    border:1px solid #ddcbbd;

    border-radius:8px;

    font-family:inherit;

    outline:none;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
    border-color:#a65f35;
}

.form-row{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;
}


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

footer{
    background:#2c1b13;

    color:#e8d8cc;

    padding:60px 7% 20px;
}

.footer-content{
    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:40px;

    padding-bottom:40px;
}

.footer-brand h2{
    font-family:"Playfair Display",serif;

    color:#e5ad73;

    margin-bottom:10px;
}

.footer-brand p{
    color:#bca99e;

    font-size:14px;
}

.footer-content h3{
    color:#f3dfcd;

    margin-bottom:15px;
}

.footer-content a{
    display:block;

    color:#bca99e;

    font-size:14px;

    margin-bottom:8px;

    transition:.3s;
}

.footer-content a:hover{
    color:#e5ad73;
}

.copyright{
    border-top:1px solid #49362c;

    padding-top:20px;

    text-align:center;

    color:#927e73;

    font-size:13px;
}


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

.cart-modal,
.modal{
    position:fixed;

    inset:0;

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

    z-index:3000;

    display:none;

    align-items:center;

    justify-content:center;
}

.cart-box{
    background:#fff;

    width:90%;

    max-width:500px;

    max-height:80vh;

    overflow-y:auto;

    border-radius:15px;

    padding:25px;
}

.cart-header{
    display:flex;

    justify-content:space-between;

    align-items:center;

    border-bottom:1px solid #eee;

    padding-bottom:15px;

    margin-bottom:15px;
}

.cart-header button{
    border:none;

    background:none;

    font-size:20px;
}

.cart-item{
    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid #eee;
}

.cart-item button{
    border:none;

    background:#ead5c7;

    padding:5px 9px;

    border-radius:5px;
}

.cart-total{
    display:flex;

    justify-content:space-between;

    font-size:20px;

    padding:20px 0;
}

.cart-total strong{
    color:#a65f35;
}

.checkout-btn{
    width:100%;

    border:none;

    background:#5b321f;

    color:#fff;

    padding:14px;

    border-radius:8px;

    font-size:16px;
}


/* =====================================================
                     CHECKOUT
===================================================== */

.checkout-box{
    width:92%;

    max-width:760px;

    max-height:90vh;

    overflow-y:auto;

    background:#fffaf5;

    color:#3f2a20;

    border-radius:18px;

    padding:32px;

    position:relative;

    box-shadow:
        0 25px 70px rgba(0,0,0,.30);
}

.checkout-close{
    position:absolute;

    right:18px;
    top:16px;

    border:none;

    background:#f0e4dc;

    color:#5b321f;

    width:36px;
    height:36px;

    border-radius:50%;
}

.checkout-heading{
    text-align:center;

    margin-bottom:25px;
}

.checkout-heading h2{
    font-family:"Playfair Display",serif;

    margin:5px 0 8px;

    color:#4a2d20;
}

.checkout-heading h2 span{
    color:#a65f35;
}

.checkout-heading p:last-child{
    color:#806b5e;

    font-size:14px;
}

.checkout-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:17px;
}

.form-group{
    display:flex;

    flex-direction:column;

    gap:7px;
}

.form-group.full-width{
    grid-column:1/-1;
}

.form-group label{
    font-size:14px;

    font-weight:600;

    color:#5b321f;
}

.form-group input,
.form-group textarea{
    width:100%;

    padding:13px 14px;

    border:1px solid #ddcfc5;

    border-radius:9px;

    outline:none;

    background:#fff;

    font-family:inherit;

    font-size:14px;
}

.form-group textarea{
    resize:vertical;
}

.form-group input:focus,
.form-group textarea:focus{
    border-color:#a65f35;
}

.payment-section{
    margin-top:24px;
}

.payment-section h3{
    color:#4a2d20;

    margin-bottom:12px;
}

.payment-option{
    display:flex;

    align-items:center;

    gap:12px;

    padding:14px;

    margin-bottom:10px;

    border:1px solid #e0d2c8;

    border-radius:10px;

    background:#fff;

    cursor:pointer;

    transition:.2s;
}

.payment-option:hover{
    border-color:#a65f35;

    transform:translateY(-1px);
}

.payment-option input{
    accent-color:#a65f35;

    width:17px;
    height:17px;
}

.payment-option span{
    display:flex;

    flex-direction:column;

    gap:3px;
}

.payment-option strong{
    color:#4a2d20;
}

.payment-option small{
    color:#806b5e;
}

.checkout-total{
    margin-top:22px;

    padding:16px 0;

    border-top:1px solid #e1d4ca;

    border-bottom:1px solid #e1d4ca;

    display:flex;

    justify-content:space-between;
}

.checkout-total strong{
    color:#a65f35;

    font-size:24px;
}

.place-order-btn{
    width:100%;

    margin-top:18px;

    padding:14px;

    border:none;

    border-radius:10px;

    background:#5b321f;

    color:#fff;

    font-size:16px;

    font-weight:700;
}

.place-order-btn:hover{
    background:#7b452b;

    transform:translateY(-2px);
}


/* =====================================================
                     CONFIRMATION
===================================================== */

.hidden-section{
    display:none;
}

.confirmation-section{
    padding-top:65px;

    padding-bottom:65px;
}

.confirmation-card{
    max-width:800px;

    margin:auto;

    background:#fff;

    border:1px solid #eadbd0;

    border-radius:20px;

    padding:35px;

    text-align:center;

    box-shadow:
        0 15px 45px rgba(60,30,15,.08);
}

.confirmation-icon{
    width:70px;
    height:70px;

    margin:0 auto 15px;

    border-radius:50%;

    background:#e8f6e8;

    color:#3d8d4a;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;
}

.confirmation-card h2{
    font-family:"Playfair Display",serif;

    color:#4a2d20;

    font-size:32px;
}

.confirmation-card h2 span{
    color:#a65f35;
}

.confirmation-card>p{
    color:#806b5e;

    margin:8px auto 20px;
}

.confirmation-details{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

    text-align:left;

    margin:20px 0;
}

.confirmation-detail{
    padding:14px;

    background:#faf4ef;

    border-radius:10px;
}

.confirmation-detail small{
    display:block;

    color:#9b806f;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:1px;
}

.confirmation-detail strong{
    color:#4a2d20;
}

.confirmation-items{
    text-align:left;

    margin-top:18px;

    border-top:1px solid #eadbd0;

    padding-top:18px;
}

.confirmation-items p{
    display:flex;

    justify-content:space-between;

    padding:6px 0;

    color:#6f5a4d;
}

.confirmation-total{
    display:flex;

    justify-content:space-between;

    font-size:20px;

    margin-top:10px;

    padding-top:15px;

    border-top:1px solid #eadbd0;
}

.confirmation-total strong{
    color:#a65f35;
}


/* =====================================================
                     ORDER HISTORY
===================================================== */

.orders-section{
    background:#f7eee7;
}

.history-tabs{
    display:flex;

    justify-content:center;

    gap:10px;

    margin-bottom:30px;
}

.history-tab{
    border:1px solid #d9c5b5;

    background:#fff;

    padding:11px 20px;

    border-radius:25px;

    color:#5b321f;

    transition:.3s;
}

.history-tab.active,
.history-tab:hover{
    background:#5b321f;

    color:#fff;
}

.history-hidden{
    display:none;
}

.history-card{
    background:#fff;

    border:1px solid #eadbd0;

    border-radius:16px;

    padding:22px;

    margin:0 auto 16px;

    max-width:900px;

    box-shadow:
        0 8px 25px rgba(60,30,15,.06);
}

.history-top{
    display:flex;

    justify-content:space-between;

    gap:15px;

    border-bottom:1px solid #eee0d6;

    padding-bottom:12px;

    margin-bottom:12px;
}

.history-top h3{
    color:#4a2d20;
}

.history-status{
    background:#e8f6e8;

    color:#3d8d4a;

    padding:5px 10px;

    border-radius:20px;

    font-size:12px;

    font-weight:bold;
}

.history-line{
    display:flex;

    justify-content:space-between;

    gap:15px;

    padding:5px 0;

    color:#6f5a4d;

    font-size:14px;
}

.history-line strong{
    color:#4a2d20;

    text-align:right;
}

.empty-history{
    text-align:center;

    padding:35px;

    color:#806b5e;

    background:#fff;

    border-radius:15px;

    border:1px dashed #d9c5b5;

    max-width:900px;

    margin:auto;
}

.clear-history{
    display:block;

    margin:20px auto;

    border:none;

    background:#ead5c7;

    color:#5b321f;

    padding:9px 16px;

    border-radius:20px;
}


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

#toast{
    position:fixed;

    bottom:25px;

    right:25px;

    background:#2c1b13;

    color:#fff;

    padding:13px 20px;

    border-radius:8px;

    z-index:5000;

    opacity:0;

    transform:translateY(20px);

    pointer-events:none;

    transition:.3s;
}

#toast.show{
    opacity:1;

    transform:translateY(0);
}


/* =====================================================
                     DARK MODE
===================================================== */

body.dark-mode{
    background:#12100e;

    color:#eee5de;
}

body.dark-mode .header{
    background:rgba(20,17,15,.98);

    border-bottom-color:#332a25;
}

body.dark-mode .logo-area h2,
body.dark-mode .navbar a{
    color:#f3dfcd;
}

body.dark-mode .logo-area span{
    color:#b99b86;
}

body.dark-mode .navbar a:hover{
    background:#2b211c;

    color:#e6b17e;
}

body.dark-mode .navbar .orders-link{
    background:#a65f35;

    color:#fff;
}

body.dark-mode .header-buttons button{
    background:#211c18;

    color:#f4dfca;

    border-color:#4a3a30;
}

body.dark-mode .search-box{
    background:#211c18;

    color:#f4ebe3;
}

body.dark-mode .search-content input{
    background:#171310;

    color:#eee5de;

    border-color:#4a3a30;
}

body.dark-mode .search-result{
    border-bottom-color:#3b3029;

    color:#eee5de;
}

body.dark-mode .features{
    background:#181411;

    border-bottom-color:#332a25;
}

body.dark-mode .feature{
    border-color:#332a25;
}

body.dark-mode .feature h3{
    color:#e7c4a5;
}

body.dark-mode .feature p{
    color:#b29d8f;
}

body.dark-mode .section,
body.dark-mode .menu-section,
body.dark-mode .reviews-section{
    background:#12100e;
}

body.dark-mode .section-heading h2,
body.dark-mode .about-content h2,
body.dark-mode .contact-info h2{
    color:#f1e7df;
}

body.dark-mode .section-heading>p:last-child,
body.dark-mode .about-content>p:not(.section-label),
body.dark-mode .about-details span,
body.dark-mode .contact-info>p:not(.section-label){
    color:#b9a69a;
}

body.dark-mode .about-image img{
    box-shadow:20px 20px 0 #30241d;
}

body.dark-mode .specials,
body.dark-mode .contact-section,
body.dark-mode .orders-section{
    background:#1a1512;
}

body.dark-mode .special-card,
body.dark-mode .menu-item,
body.dark-mode .menu-tabs button,
body.dark-mode .contact-form,
body.dark-mode .review-card,
body.dark-mode .review-summary,
body.dark-mode .history-card,
body.dark-mode .empty-history{
    background:#211c18;

    border-color:#3a2e27;

    color:#eee5de;
}

body.dark-mode .special-info h3,
body.dark-mode .menu-item h3,
body.dark-mode .contact-form h3,
body.dark-mode .review-card h3,
body.dark-mode .rating-details strong,
body.dark-mode .history-top h3,
body.dark-mode .history-line strong{
    color:#f0ddcb;
}

body.dark-mode .special-info p,
body.dark-mode .menu-item p,
body.dark-mode .review-card>p,
body.dark-mode .history-line,
body.dark-mode .empty-history{
    color:#b9a69a;
}

body.dark-mode .menu-tabs button{
    color:#e5d5c8;
}

body.dark-mode .menu-tabs button:hover,
body.dark-mode .menu-tabs button.active,
body.dark-mode .history-tab.active{
    background:#a65f35;

    color:#fff;

    border-color:#a65f35;
}

body.dark-mode .contact-form input,
body.dark-mode .contact-form select,
body.dark-mode .contact-form textarea{
    background:#171310;

    color:#eee5de;

    border-color:#4a3a30;
}

body.dark-mode .contact-details strong{
    color:#e6c3a4;
}

body.dark-mode .contact-details p,
body.dark-mode .contact-link{
    color:#b9a69a;
}

body.dark-mode footer{
    background:#0c0a09;
}

body.dark-mode .footer-content h3{
    color:#f0ddcb;
}

body.dark-mode .footer-content a,
body.dark-mode .footer-brand p{
    color:#a99689;
}

body.dark-mode .copyright{
    border-top-color:#2c2520;

    color:#89776c;
}

body.dark-mode .cart-box,
body.dark-mode .checkout-box,
body.dark-mode .confirmation-card{
    background:#211c18;

    color:#eee5de;

    border-color:#3a2e27;
}

body.dark-mode .cart-header,
body.dark-mode .cart-item{
    border-color:#3a2e27;
}

body.dark-mode .cart-item button{
    background:#49362c;

    color:#f5e8de;
}

body.dark-mode .checkout-close{
    background:#392c25;

    color:#f0ddcb;
}

body.dark-mode .checkout-heading h2,
body.dark-mode .payment-section h3,
body.dark-mode .form-group label,
body.dark-mode .confirmation-card h2,
body.dark-mode .confirmation-detail strong{
    color:#f0ddcb;
}

body.dark-mode .checkout-heading p:last-child,
body.dark-mode .payment-option small,
body.dark-mode .checkout-total span{
    color:#b9a69a;
}

body.dark-mode .form-group input,
body.dark-mode .form-group textarea,
body.dark-mode .payment-option{
    background:#171310;

    color:#eee5de;

    border-color:#4a3a30;
}

body.dark-mode .payment-option strong{
    color:#f0ddcb;
}

body.dark-mode .checkout-total{
    border-color:#3a2e27;
}

body.dark-mode .place-order-btn{
    background:#a65f35;
}

body.dark-mode .confirmation-icon{
    background:#263b2a;
}

body.dark-mode .confirmation-detail{
    background:#171310;
}

body.dark-mode .confirmation-detail small{
    color:#a99689;
}

body.dark-mode .confirmation-items p{
    color:#b9a69a;
}


/* =====================================================
                     RESPONSIVE
===================================================== */

@media(max-width:1100px){

    .navbar{
        gap:1px;
    }

    .navbar a{
        padding:9px 6px;

        font-size:12px;
    }

    .navbar a i{
        display:none;
    }

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

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

    .feature:nth-child(2){
        border-right:none;
    }

    .feature{
        border-bottom:1px solid #eee0d6;
    }

    .about,
    .contact-container{
        grid-template-columns:1fr;
    }

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

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


@media(max-width:800px){

    .header{
        flex-wrap:wrap;

        gap:10px;
    }

    .navbar{
        order:3;

        width:100%;

        overflow-x:auto;

        justify-content:flex-start;

        padding:3px 0 6px;
    }

    .navbar a{
        white-space:nowrap;

        padding:9px 12px;
    }

    .navbar a i{
        display:inline;
    }

    .hero{
        min-height:80vh;
    }

    .hero-content{
        margin:0 7%;
    }

    .hero h1{
        font-size:45px;
    }

    .hero-buttons{
        flex-direction:column;

        align-items:flex-start;
    }

    .features,
    .special-grid,
    .menu-grid,
    .gallery,
    .footer-content{
        grid-template-columns:1fr;
    }

    .feature{
        border-right:none;
    }

    .about-image img{
        height:400px;
    }

    .promo{
        flex-direction:column;

        align-items:flex-start;
    }

    .promo h2{
        font-size:28px;
    }

    .form-row,
    .checkout-grid{
        grid-template-columns:1fr;
    }

    .form-group.full-width{
        grid-column:auto;
    }

    .search-box{
        width:90%;

        right:5%;
    }

    .reviews-grid{
        grid-template-columns:1fr;
    }

    .confirmation-details{
        grid-template-columns:1fr;
    }
}


@media(max-width:550px){

    .logo-area h2{
        font-size:20px;
    }

    .logo-area img{
        width:45px;

        height:45px;
    }

    .header-buttons button{
        width:37px;

        height:37px;
    }

    .navbar a{
        font-size:11px;

        padding:8px 10px;
    }

    .navbar a i{
        font-size:10px;
    }

    .section{
        padding:65px 5%;
    }

    .contact-section{
        padding:65px 5%;
    }

    .promo{
        margin:15px 5% 60px;

        padding:35px 6%;
    }

    .menu-item img{
        width:90px;

        height:90px;
    }

    .menu-item h3{
        font-size:16px;
    }

    .checkout-box{
        padding:25px 18px;
    }

    .confirmation-card{
        padding:25px 18px;
    }

    .history-line{
        flex-direction:column;

        gap:2px;
    }

    .history-line strong{
        text-align:left;
    }

}