/* =========================
   2026 THEME VARIABLES & RESET
========================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Updated 2026 Grocery Theme */
    --primary-green: #10b981;       /* Emerald 500 */
    --dark-green: #059669;          /* Emerald 900 */
    --light-bg: #f9fafb;            /* Body Background */
    --card-bg: #ffffff;             /* Product Card Background */
    
    /* TEXT COLOR LOGIC */
    --text-color: #064e3b;          /* CHANGED: Use Dark Green for readability on light backgrounds */
    --milk-white: #FEFCFF;          /* NEW: Save your Milk White for use on dark green elements */
    
    --text-muted: #6b7280;          /* Secondary Text */
    --border-color: #d1fae5;        /* Light Green Border */
    --header-bg:  #10B981;           /* UPDATED: Solid Green Header */
    --price-color: #047857;         /* Darker Green for Price */
    --alert-red: #ef4444;     
 #10B981

}



body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--light-bg);
    color: var(--text-color);
    font-weight: 400;
}


/* =========================
   HEADER (STICKY & GLASSMORPHIC)
========================= */
.main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--header-bg);
    backdrop-filter: blur(12px); /* 2026 high-quality blur effect */
    -webkit-backdrop-filter: blur(12px); 
    border-bottom: 1px solid rgba(16, 185, 129, 0.1);
    padding: 10px 0;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

/* Branding & Typography */
.store-branding { text-align: center; flex-grow: 1; }
.store-branding h1 { 
    margin: 0; 
    font-size: 1.8rem; 
    color: #FEFCFF; 
    font-weight: 800;
}
.store-branding .tagline { 
    margin: 0; 
    font-size: 1rem; 
    color: #FEFCFF;
    font-weight: 500;
}

/* Menu Button */
.menu-btn {
    background: none; border: none; display: flex; align-items: center; gap: 8px;
    cursor: pointer; color: var(--milk-white); padding: 8px; border-radius: 8px;
    transition: background 0.2s;
}

.menu-btn:hover { background: #f3f4f6; }
.hamburger-icon span {
    display: block; width: 20px; height: 2px; background: currentColor; margin: 4px 0; border-radius: 2px;
}

/* Cart Pill Design */
.cart-pill {
    background: var(--dark-green); color: white; padding: 6px 12px; border-radius: 50px; 
    display: flex; align-items: center; gap: 10px; text-decoration: none;
    transition: transform 0.2s;
}
.cart-pill:active { transform: scale(0.95); }
.cart-icon { position: relative; display: flex; }
.badge {
    position: absolute; top: -8px; right: -10px; background: var(--alert-red); color: white;
    font-size: 10px; padding: 2px 5px; border-radius: 10px; font-weight: bold; border: 2px solid var(--dark-green);
}
.cart-amount { font-weight: 700; font-size: 0.9rem; }



/* =========================
   CATEGORY DRAWER
========================= */
.category-drawer {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100vh;

    background: #ffffff;
    z-index: 2001;

    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 10px 0 30px rgba(0,0,0,0.1);

    display: flex;
    flex-direction: column;

    overflow-y: auto;               /* IMPORTANT */
    -webkit-overflow-scrolling: touch;
}


.category-drawer.open {
    left: 0;
}

/* =========================
   OVERLAY (BACKGROUND DIM)
========================= */

.drawer-overlay {
    display: none !important;
}

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2000;

    display: none;
    cursor: pointer;
}

.drawer-overlay.active {
    display: block;
}

/* =========================
   DRAWER HEADER
========================= */
.drawer-header {
    padding: 20px;
    border-bottom: 1px solid #eee;

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

    color: var(--dark-green);
}

.close-drawer {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
}

/* =========================
   CATEGORY LINKS
========================= */
.cat-link {
    width: 100%;
    padding: 15px 20px;

    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid #f1f5f9;

    font-size: 1rem;
    color: #374151;
    cursor: pointer;

    transition: background 0.2s ease;
}

.cat-link:hover {
    background: #f3f4f6;
}

.cat-link.active {
    color: var(--primary-green);
    font-weight: 600;
    background: #ecfdf5;
}

.cat-link {
    text-transform: capitalize;
}


/* =========================
   MOBILE OVERLAY
========================= */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* =========================
   MOBILE goo TOUCH TARGETS
========================= */
.drawer-header {
    padding: 1.5rem;
    border-bottom: 1px solid #eee;
    position: sticky; /* Keeps the close button accessible */
    top: 0;
    background: inherit;
}

.cat-link {
    width: 100%;
    padding: 1.25rem 1.5rem; /* Increased padding for the "Thumb Zone" */
    font-size: 1.1rem;      /* Larger font for better readability */
    border: none;
    border-bottom: 1px solid #f9fafb;
    text-align: left;
    background: none;
    
    /* Remove the blue highlight on mobile taps */
    -webkit-tap-highlight-color: transparent; 
}

/* Active state visual feedback */
.cat-link:active {
    background: rgba(0, 0, 0, 0.05);
}

.cat-link.active {
    color: var(--primary-green);
    background: #ecfdf5;
    font-weight: 700;
    border-left: 5px solid var(--primary-green);
}


/* =========================
   PRODUCT GRID & CARD
========================= */
.products {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    align-items: stretch;
}

.product-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,.05);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform .15s ease, box-shadow .15s ease;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,.1);
}

/* Image container */
.product-image {
    height: 140px;
    min-height: 140px;           /* FIX */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 10px;
}

.product-image img {
    max-height: 100%;
    max-width: 100%;
    display: block;
    transition: transform 0.2s ease;
    object-fit: contain;
}

.product-card:hover img {
    transform: scale(1.05);
}

.product-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
}

/* 🔧 FORCE EQUAL TEXT HEIGHT */
.product-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark-green);
    margin: 0;
    min-height: 40px;           /* FIX: equal title height */
}

.product-card .tamil {
    font-size: 0.8rem;
    color: var(--text-muted);
    min-height: 32px;           /* FIX: equal tamil text height */
}

.category {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 5px;
    min-height: 18px;           /* FIX: keeps spacing uniform */
}

.price {
    font-size: 1rem;
    color: var(--price-color);
    font-weight: 700;
    margin-top: 8px;
}

/* Add to Cart Button */
.product-card button {
    margin-top: auto;
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 600;
    background: var(--primary-green);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.08s ease;
}

.product-card button:hover { background: var(--dark-green); }
.product-card button:active { transform: scale(0.97); }

/* =========================
   MOBILE RESPONSIVENESS
========================= */
@media (max-width: 650px) {
    /* Header adjustments for small screens */
    .header-container { padding: 0 10px; }
    .store-branding h1 { font-size: 1rem; }
     .store-branding .tagline, .menu-label, .cart-amount { display: none; }
    .store-branding .tagline, .menu-label, .cart-amount { display: none; }
    .cart-pill { padding: 8px 10px; }


    /* Search bar looks better full width on mobile */
    .floating-search { top: 60px; padding: 8px 10px; }
    .search-container { box-shadow: none; border-radius: 8px; }
    .floating-search button { padding: 8px 14px; font-size: 12px; }

    /* Product Grid becomes a single column for easy scrolling */
    .products {
        grid-template-columns: 1fr; /* Single column */
        gap: 12px;
        padding: 0 10px;
    }
    
    .product-card { padding: 10px; border-radius: 8px; }
    .product-image { height: 100px; }
    .product-card h3 { font-size: 0.9rem; }
    .price { font-size: 0.9rem; }
}


/* ===== BILLING POPUP ===== */
/* Overlay with blur effect */
.billing-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px); /* Modern blur effect */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
    box-sizing: border-box;
}

/* The Popup Box */
.billing-box {
    background: #fff;
    width: 100%;
    max-width: 450px;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Typography */
.billing-box h3 {
    margin: 0 0 20px 0;
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    text-align: center;
}

/* Form Styling */
.billing-box label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 6px;
    margin-top: 15px;
}

.billing-box select, 
.billing-box input {
    width: 100%;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 15px;
    color: #334155;
    background-color: #f8fafc;
    box-sizing: border-box;
    outline: none;
    transition: border 0.2s;
}

.billing-box select:focus, 
.billing-box input:focus {
    border-color: #2563eb;
    background-color: #fff;
}

.billing-box input[readonly] {
    background-color: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

/* Total Section */
.billing-box .total {
    margin-top: 25px;
    padding: 15px;
    background: #eff6ff;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #1e40af;
}

.billing-box .total strong {
    font-size: 20px;
}

/* Buttons */
.billing-box .actions {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

.btn-add {
    flex: 2;
    background: #10B981;
    color: white;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-add:hover { background: #10B981; }

.btn-cancel {
    flex: 1;
    background: #f1f5f9;
    color: #64748b;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.btn-cancel:hover { background: #e2e8f0; }

/* Update this class in your CSS */


/* Remove or comment out this part from your @media query */
@media (max-width: 480px) {
    .billing-box {
        /* bottom: 0; <--- REMOVE THIS */
        /* position: fixed; <--- REMOVE THIS */
        width: 95%; /* Ensures it doesn't touch the screen edges */
        border-radius: 16px; /* Keep uniform rounded corners */
    }
}


/* =========================
   BACK TO TOP
========================= */
#backTop {
  position: fixed;
  right: 14px;
  bottom: 18px;
  background: #10B981;
  color: #fff;
  padding: 12px 16px;
  border-radius: 50px;
  font-size: 14px;
  display: none;
  cursor: pointer;
  z-index: 100000;
}

/* =========================
   cart bill + - move
========================= */

@keyframes shake {
  0% { transform: scale(1); }
  25% { transform: scale(1.1); }
  50% { transform: scale(0.95); }
  75% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.cart-pill.shake {
  animation: shake 0.4s ease-in-out;
}

/* FOOTER /
.custom-footer {
  width: 100%;
  clear: both;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
}

/* INNER WRAPPER */
.footer-inner {
  max-width: 1200px;
  margin: auto;
  padding: 15px 20px;

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

/* LEFT AD */
.footer-left-ad img {
  width: 140px;
  height: auto;
  border-radius: 6px;
}

/* AD LABEL */
.ad-label {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
}

/* CENTER TEXT */
.footer-center {
  flex: 1;
  text-align: center;
  color: #334155;
}

/* LINKS */
.footer-center a {
  color: #334155;
  text-decoration: none;
}
.footer-center a:hover {
  color: #1E40AF;
}

/* MOBILE FIX */
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* =========================
   SEARCH BAR (NORMAL)
========================= */
.floating-search {
    position: relative;     /* ✅ normal flow */
    width: 100%;
    max-width: 520px;
    margin: 12px auto 20px; /* spacing */
    padding: 0 12px;
    z-index: auto;
}

/* Inner container */
.search-inner {
    display: flex;
    align-items: center;
    gap: 12px;

    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);

    padding: 12px 16px;
    border-radius: 999px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
}

/* Input */
#searchBox {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 12px;
    outline: none;
    font-size: 16px;
}

/* Reset button */
#resetBtn {
    background: #10B981;
    color: #FEFCFF;
    border: none;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s;
    font-weight: 500;
    white-space: nowrap;
}

#resetBtn:hover {
    background: #0EA371;
}
/* =========================
   SEARCH BAR (MOBILE)
========================= */
@media (max-width: 768px) {

  .floating-search {
    position: relative;   /* ✅ NORMAL */
    top: 0;
    left: 0;
    transform: none;

    width: 100%;
    max-width: 100%;
    margin: 8px auto 16px;
    padding: 0 12px;

    z-index: auto;
  }

  .search-inner {
    padding: 10px 14px;
  }

  #searchBox {
    font-size: 16px;      /* prevents iOS zoom */
    padding: 10px 10px;
  }

  #resetBtn {
    padding: 8px 12px;
    font-size: 14px;
  }
}


/* =========================
   ACCESSIBILITY FIX
========================= */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}
.custom-footer {
    background: #f9fafb;
    padding: 15px 10px;
    border-top: 1px solid #e5e7eb;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.footer-left-ad img {
    max-width: 180px;
}

.footer-links a {
    font-size: 13px;
    color: #2563eb;
    text-decoration: none;
    margin: 0 5px;
}

.footer-center {
    font-size: 13px;
    color: #555;
}