/* --- TABLETS & SMALL DESKTOPS --- */
/* Tablets & small desktops */
@media screen and (max-width: 1024px) { ... }

/* Mobile */
@media screen and (max-width: 768px) { ... }

/* Very small devices */
@media (max-width: 400px) { ... }
@media screen and (max-width: 1024px) {
    .header { padding: 20px 30px; }
    .card-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .hero-content h1 { font-size: 56px; }
    .footer-links { gap: 40px; }
}

/* --- MOBILE DEVICES --- */
@media screen and (max-width: 768px) {
    /* Header Layout */
    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .hamburger {
        display: flex;
        flex: 1; 
        order: 1;
    }

    .logo {
        flex: 2;
        display: flex;
        justify-content: center;
        order: 2;
    }

    .logo img { height: 45px; }

    .nav-icons {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        order: 3;
    }

    /* Navigation Menu */
    .nav-menu {
        display: none;
        position: absolute;
        top: 83px; 
        left: 0;
        width: 100%;
        background-color: #f5bf2a;
        flex-direction: column;
        padding: 20px 0;
        border-bottom: 3px solid #222;
        z-index: 1000;
        order: 4;
    }

    #menu-toggle:checked ~ .nav-menu {
        display: flex;
    }

    .nav-menu a { margin: 15px 0; font-size: 20px; }

    /* Hero Section */
    .hero-content h1 { font-size: 48px; }
    .cta-btn { padding: 12px 24px; }

    /* Featured Section */
    .featured { padding: 50px 20px; }
    .card-grid { grid-template-columns: 1fr; max-width: 350px; } 
    
    /* Find Us Section */
    .find-us h2 { font-size: 32px; }
    .location-details p { font-size: 18px; }
    .map-wrapper iframe { height: 300px; }

    /* Footer Section */
    .footer { padding: 30px 20px; }
    .footer-container { flex-direction: column; align-items: center; text-align: center; }
    .footer-links { margin: 30px 0; flex-dirsection: column; gap: 20px; }
    .footer-social { align-items: center; text-align: center; }

    .hero-content h1 { font-size: 28px; }
    .nav-icons { gap: 10px; }
    .cart-icon, .profile { width: 30px; height: 30px; }
    .footer-logo img { height: 45px; }

    /* announcements grid */
    
    .announcement-container { padding: 50px 20px; }
    .announce-grid { grid-template-columns: 1fr; max-width: 420px;}
    
    .hero-overlay h5{ font-size: 20px; 
        margin: 0 10px }

 .reward-grid {
    grid-template-columns: 1fr;
    gap: 20px;
}

@media screen and (max-width: 768px) {

    .faq-container {
        display: flex;
        flex-direction: row;
        gap: 15px;
    }

    /* LEFT SIDE (compact tabs) */
    .faq-left,  .faq-contact {{
        width: 30%;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .faq-category {
        font-size: 12px;
        padding: 10px;
        text-align: center;
        border-radius: 10px;
        background: #fff1cc;
    }

    /* REMOVE THIS ON MOBILE */
   
    

    /* RIGHT SIDE */
    .faq-right {
        width: 70%;
    }

    .faq-question {
        font-size: 14px;
    }

    .faq-answer {
        font-size: 13px;
    }

   .faq-contact {
        font-size: 12px;
        margin-top: 15px;
      padding: 20px;
}

.contact-btn { padding: 10px 20px; }



}



/* =========================
   MOBILE ORDER PAGE 
   ========================= */

@media screen and (max-width: 768px) {

    /* ===== LAYOUT RESET ===== */
    .order-layout {
        flex-direction: column;
        padding: 0;
        gap: 0;
    }

    .order-products {
        padding: 20px;
    }

    /* ===== FULL WIDTH CATEGORY BAR ===== */
    .order-sidebar {
    width: 100vw;
    max-width: 100vw;

    margin-left: calc(-50vw + 50%);
    left: 0;

    background: #fff1cc;
   
}
/* ===== HEADER FIX ===== */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #f5bf2a;
}

/* ===== CATEGORY BAR (PERFECT STICKY ALIGNMENT) ===== */
.order-sidebar {
    position: sticky;
    top: 84px; 
    z-index: 999;
}

    /* ===== SCROLLABLE CATEGORY ===== */
    .sidebar-scroll {
        width: 100%;
    }

    .order-sidebar ul {
        display: flex;
        gap: 25px;
        overflow-x: auto;

        padding: 0 25px;
        margin: 0;

        scroll-behavior: smooth;
    }

    /* Hide scrollbar */
    .order-sidebar ul::-webkit-scrollbar {
        display: none;
    }

    /* ===== CATEGORY ITEMS ===== */
    .order-sidebar a {
        font-size: 15px;
        color: #777;
        font-weight: 500;
        white-space: nowrap;
        position: relative;
        padding-bottom: 3px;
        padding-top: 15px;
    }

    /* ACTIVE TAB */
    .order-sidebar a.active {
        color: #000;
        font-weight: 700;
    }



    .order-sidebar a.active {
        color: #000;
        font-weight: 700;

.order-sidebar a.active::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 4px; background: #f5bf2a; border-radius: 2px; }

    }

    

    /* ===== REMOVE ARROWS / EFFECTS ===== */
   

    .sidebar-scroll::before,
    .sidebar-scroll::after {
        display: none;
    }

    /* ===== PRODUCT GRID ===== */
    .order-products {
        width: 100%;
    }

    .order-products .card-grid,
    .cards-container {
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px;
    }

    
    /* --- CARD FIX --- */
    .food-card {
        padding: 12px;
        border-radius: 18px;
    }

    .inner-box {
        height: 120px;
    }

    .card-content h3 {
        font-size: 14px;
    }

    .price {
        font-size: 13px;
        font-weight: 600;
    }

    .add-btn {
        font-size: 11px;
        padding: 6px 10px;
    }

    .meta {
        font-size: 10px;
        gap: 5px;
    }

   
}
    




}

@media screen and (max-width: 768px) {

    .hamburger {
        display: flex;
    }

    .nav-menu {
        display: none;
    }

    #menu-toggle:checked ~ .nav-menu {
        display: flex;
    }

}
@media screen and (max-width: 768px) {

    .order-sidebar {
        flex: none;
        max-width: 100% !important;
        width: 100vw;
    }

    .order-sidebar ul {
        display: flex !important;
        flex-direction: row !important;
    }

@media screen and (max-width: 768px) {
      #shopbytext {
    font-size: 12px;
    margin: 15px 0px -5px 30px;

    }

}

 /* --- OUR FOOD--- */
.food-quality { padding: 50px 20px; }
    .quality-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px;
    }
} 

@media screen and (max-width: 768px) {

    .privacy-sidebar {
        display: none;
    }

}


@media screen and (max-width: 768px) {

  .timeline-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
     align-items: center;  
    text-align: center;  
  }

  .timeline-item {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    
  }

  .timeline-item img {
    width: 100% !important;
    height: auto !important;
       align-items: center;   
    text-align: center;  

  }

}@media screen and (max-width: 768px) {

  .slide-card {
    display: flex !important;
    flex-direction: column !important; 
    align-items: center;
    text-align: center;
    gap: 15px;

  }

  .slide-img {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .slide-img img {
    width: 70% !important;
    max-width: 300px;
    height: auto !important;
  }

  .slide-text {
    width: 100%;
  }

}

@media screen and (max-width: 768px) {

  .service-row {
    display: flex !important;
    flex-direction: column !important; 
    align-items: center;
    text-align: center;
    gap: 20px;
  }

  .service-image {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .service-image img {
    width: 80% !important;
    max-width: 320px;
    height: auto !important;
  }

  .service-text {
    width: 100%;
  }

}


@media (max-width: 768px) {

    .cart-container {
        flex-direction: column;
    }

    .cart-header {
        display: none;
    }

    .cart-item {
        grid-template-columns: 1fr;
        gap: 10px;
        background: white;
        padding: 15px;
        border-radius: 12px;
        margin-bottom: 15px;
    }

    .product-info {
        justify-content: flex-start;
    }
}


@media (max-width: 768px) {

  .account-container {
    flex-direction: column;
  }

  .account-sidebar {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
  }

  .account-sidebar a {
    flex: 1;
    text-align: center;
    font-size: 12px;
  }

  .form-row {
    flex-direction: column;
  }

}

/* ================= PROFILE ORDERS MOBILE ================= */
@media (max-width: 768px) {

    .account-container {
        flex-direction: column;
        padding: 20px;
    }

    /* SIDEBAR → TOP MENU */
    .account-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 10px;
    }

    .account-sidebar a {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 12px;
        padding: 8px 12px;
    }

    /* CONTENT */
    .account-content {
        text-align: left;
    }

    /* ORDER CARD MOBILE */
    .order-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 15px;
    }

    .order-card img {
        width: 100%;
        max-width: 120px;
        border-radius: 10px;
    }

    .order-card div {
        width: 100%;
    }

    .order-card p {
        margin: 3px 0;
        font-size: 14px;
    }

    .order-card small {
        font-size: 12px;
    }

    /* STATUS BADGE */
    .status {
        align-self: flex-start;
        font-size: 12px;
        padding: 5px 10px;
    }

    /* RESET BUTTON */
    .reset-btn {
        width: 100%;
        text-align: center;
        margin-top: 15px;
    }
}