/* --- 1. CORE VARIABLES & RESET --- */
:root {
    --bg: #f5f5f7;         /* Soft Apple-style white */
    --card-bg: #ffffff;    /* Pure white for cards */
    --accent: #008080;    /* Namcor Cyan preserved */
    --text: #1d1d1f;      /* Near black for high contrast */
    --text-dim: #86868b;  /* Muted gray for secondary text */
    --border: #d2d2d7;    /* Light hairline borders */
    --sidebar-width: 240px;
    --header-height: 72px;
    --radius: 7px;        /* Preserved 7px border radius */
}

/* Core Native Behavior */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

html, body {
    width: 100%;
    height: 100vh !important;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevents the 'bounce' on the whole screen */
    background-color: #fff;
    /* Smooth fonts for that premium feel */
    -webkit-font-smoothing: antialiased;
    user-select: none;
    -webkit-user-select: none;
}

/* This targets your <main class="main-content"> */
.main-content {
    position: absolute;
    top: 0px !important; /* Adjust this to match your header height exactly */
    bottom: 85px; /* This locks it ABOVE the mobile nav */
    left: 0;
    right: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    
    /* Safe Area for Notched Phones */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Ensure images don't act like text */
img {
    -webkit-user-drag: none;
}

/* Keep inputs functional */
input, textarea {
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* Hide scrollbars for a cleaner 'App' look on mobile */
.main-content::-webkit-scrollbar {
    display: none;
}

body { 
    background: var(--bg); 
    color: var(--text); 
    font-family: 'Inter', -apple-system, sans-serif; 
    margin: 0 auto; 
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation;
}
/* --- 2. LAYOUT ENGINE --- */
.app-container {
	margin: 0 auto;
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* 1. Ensure the Sidebar is an overlay */
.side-nav {
    width: var(--sidebar-width);
    height: 100vh;
    background: #ffffff;
    border-right: 1px solid var(--border);
    position: fixed; /* Keep it fixed */
    left: 0; 
    top: 0;
    z-index: 3000; /* Higher than header and main content */
    transition: transform 0.3s ease;
	padding: 100px 10px 0 10px;
    
    /* Shadow makes it look like it's floating over the content */
    box-shadow: 5px 0 15px rgba(0,0,0,0.05); 
}

/* 2. Remove any logic that pushes the main content or header */
.namcor-header {
    margin-left: 0 !important; /* Force no margin */
    width: 100% !important;    /* Always full width */
    left: 0 !important;        /* Always start at the edge */
    transition: none;          /* No sliding animation needed */
}

/* 3. Logic for Opening/Closing only affects the Sidebar's position */
body.sidebar-closed .side-nav {
    transform: translateX(-100%); /* Slide only the menu out */
}

body.sidebar-open .side-nav {
    transform: translateX(0);    /* Slide only the menu in */
}

/* 4. Optional: Add an overlay (scrim) to dim the background when menu is open */
body.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 2999; /* Just below sidebar */
}
/* Close Button Styling */
.menu-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #000;
    color: #fff;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


/* Main Content: Flexible Right */
.main-content {
    margin: 0 auto !important; /* Forces the section to center itself */
    width: 100% !important;
    align-items: center; /* Automatically centers all child sections */
	padding: 0px 50px 20px 0px; /* Your requested 100px top, 10px sides */
	box-sizing: border-box;
	padding-top: var(--header-height);
    min-height: 100vh !important;
}

/* --- 3. HEADER (FULL WIDTH OF MAIN) --- */
.namcor-customer-header-full {
    width: inherit;
    height: var(--header-height);
    background: rgba(255, 255, 255, 1); /* Frosted glass white */
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    border-bottom: 1px solid var(--border);
    position: fixed;
    top: 0;
    z-index: 1000;
    box-sizing: border-box;
	width: 100%;
}

.header-left { 
    flex: 0 1 auto; /* Only takes up as much space as the logo needs */
    display: flex; 
    align-items: left; 
    padding-right: 20px; /* Controls the exact gap between logo and center */
}

.header-center { 
    flex: 1; /* Takes the remaining space but allows items to sit naturally */
    display: flex; 
    align-items: center; 
    justify-content: flex-start; /* Pulls the buttons toward the logo */
    gap: 15px; 
}

.header-right { 
    flex: 0 1 auto; 
    display: flex; 
    align-items: center; 
    justify-content: flex-end; 
    gap: 20px; 
	margin-left: 20px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 20px; /* Space between hamburger and logo */
}

.header-logo-img {
    height: 32px;      /* Standard professional header height */
    width: auto;       /* Maintains aspect ratio */
    display: block;
    transition: opacity 0.2s;
}

.header-logo-img:hover {
    opacity: 0.8;      /* Subtle feedback on hover */
}

/* Adjust hamburger for better alignment */
.hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 7px; /* Your requested 7px border radius */
    transition: background 0.2s;
    color: #000;
}

.hamburger-btn:hover {
    background: rgba(0,0,0,0.05);
}


.toggle-opt {
    background: transparent;
    border: none;
    color: var(--text-dim);
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 5px;
}

.toggle-opt.active {
    background: #ffffff;
    color: var(--text);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.toggle-opt.active {
    background: #ffffff;
    color: var(--text);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Buttons */
.btn-signup {
    background: var(--text);
    color: #000;
    border: none;
    padding: 10px 20px;
    font-weight: 700;
    cursor: pointer;
}

/* --- 4. CATEGORY SCROLLER --- */
.category-mission-scroller {
    position: relative;
    width: 100%;
    height: 120px;
    background: transparent;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-top: 0px !important;
}

.category-items-wrapper {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 15px;
    padding: 0px;
    scrollbar-width: none;
}
.category-items-wrapper::-webkit-scrollbar { display: none; }

.category-card {
    min-width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid transparent;
    transition: 0.2s;
}

.category-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}


.category-card label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dim);
}

/* Scroller Arrows */
.nav-arrow {
    position: absolute;
    width: 40px;
    height: 40px;
    background: #000;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: white;
    z-index: 30;
    display: none; /* JS controlled */
    align-items: center;
    justify-content: center;
}
.nav-arrow.left { left: 15px; }
.nav-arrow.right { right: 15px; }



.nav-item:hover { color: #fff; background: #111; border-radius: var(--radius); }
.nav-item.active { color: #fff; background: #000; border-radius: var(--radius); }

.promo-container {
    width: 100%;
    padding: 20px 0;
    overflow: hidden;
}

.promo-wrapper {
    display: flex;
    gap: 20px;
    overflow-x: auto;
	scroll-behavior: smooth;
    scroll-snap-type: x mandatory; /* Makes cards "snap" into place */
    scrollbar-width: none;
}

.promo-wrapper::-webkit-scrollbar { display: none; }

.promo-card {
    min-width: 380px; /* Large rectangle */
    height: 180px;
    background-color: #111;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius); /* 7px */
    border: 1px solid var(--border);
    flex-shrink: 0;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    align-items: center;
    padding: 25px;
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.promo-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
}

.promo-content h2 {
    margin: 5px 0;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.5px;
}

.promo-content p {
    font-size: 13px;
    color: #ccc;
    margin-bottom: 15px;
    max-width: 200px;
}

.promo-btn {
    background: var(--accent);
    color: #000;
    border: none;
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 800;
    border-radius: 4px; /* Slightly tighter than container */
    cursor: pointer;
}

.tiny-label {
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--accent);
    font-weight: 800;
}

.filter-bar {
    display: flex;
    gap: 10px;
    padding: 15px 0px;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--bg);
}
.filter-bar::-webkit-scrollbar { display: none; }

.filter-btn {
    padding: 8px 16px;
    background: #111;
    border: 1px solid var(--border);
    color: #fff;
    border-radius: 20px; /* Pill shape for filter buttons */
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.2s;
}
.filter-btn:hover { border-color: var(--accent); }

/* Modal Positioning */
.filter-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* This is the "Dark" part */
    display: none; /* Controlled by JS */
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.filter-modal-content {
    background: white;
    padding: 30px;
    border-radius: 7px; /* Matching your 7px requirement */
    width: 90%;
    max-width: 400px;
    position: relative;
}

/* Dark Overlay for Sidebar */
body:not(.sidebar-closed)::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7); /* The dark dim effect */
    z-index: 998; /* Just below the side-nav (usually 999 or 1000) */
    pointer-events: auto; /* Ensures you can click it to close */
    transition: opacity 0.3s ease;
}

/* Ensure the sidebar stays on top of the overlay */
.side-nav {
    z-index: 10001 !important;
}

/* Ensure body doesn't scroll when sidebar is open */
body:not(.sidebar-closed) {
    overflow: hidden;
}
/* Find this in order.css */
body.sidebar-closed {
    overflow: auto; /* Change from hidden to auto */
}

.tesla-slider {
    width: 100%;
    margin: 20px 0;
    accent-color: #000;
}
.tesla-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #000;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.filter-value-display {
    font-size: 24px;
    font-weight: 800;
    margin: 10px 0;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #888;
}

/* Tesla Slider Styling */
.tesla-slider {
    width: 100%;
    accent-color: var(--accent);
    margin: 15px 0;
}

.filter-value-display {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent);
    margin-top: 5px;
}


.promo-container-secondary {
    width: 100%;
    padding: 10px 0 30px 0;
}

.promo-wrapper-snap {
    display: flex;
    gap: 15px;
    overflow-x: auto;
	overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.mini-promo {
    min-width: 340px; /* Slightly narrower than the main ads */
    height: 150px;   /* Taller for a portrait look */
    background-color: #111;
    background-size: cover;
    background-position: center;
    border-radius: 7px; /* Your standard border radius */
    border: 1px solid var(--border);
    flex-shrink: 0;
    scroll-snap-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    box-sizing: border-box;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mini-promo:hover {
    transform: scale(1.02);
    border-color: var(--accent);
}

.mini-promo-tag {
    align-self: flex-start;
    background: #fff;
    color: #000;
    font-size: 9px;
    font-weight: 900;
    padding: 4px 8px;
    border-radius: 3px;
    letter-spacing: 1px;
}

.mini-promo-info h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

.mini-promo-info p {
    font-size: 12px;
    color: #bbb;
    margin: 5px 0 15px 0;
}

.mini-btn {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.shops-near-you {
    padding: 40px 0;
    width: 100%;
    margin: 0 auto;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 5px; /* Slight internal padding for the text */
}

.shop-circle-wrapper {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    padding: 10px 5px;
    scrollbar-width: none; /* Hides scrollbar on Firefox */
}

.shop-circle-wrapper::-webkit-scrollbar {
    display: none; /* Hides scrollbar on Chrome/Safari */
}

.section-header h3 {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.view-all {
    background: transparent;
    border: none;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}


.shop-circle-wrapper::-webkit-scrollbar { display: none; }

.shop-circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 85px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.circle-frame {
    width: 140px;
    height: 140px;
    border-radius: 50%; /* Force Circular */
    background: #111;
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.circle-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-circle-item label {
    font-size: 15px;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
}

.shop-meta {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 2px;
}

/* Hover Effect */
.shop-circle-item:hover .circle-frame {
    border-color: var(--accent);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
    transform: translateY(-5px);
}

.shop-circle-item:active {
    transform: scale(0.9);
}

.split-promo-container {
    display: flex;
    justify-content: center; /* Centers children horizontally */
    align-items: center;     /* Centers children vertically */
    gap: 40px;
    padding: 60px 30px;
    max-width: 1200px;       /* Keeps content from spreading too wide */
    margin: 0 auto;         /* The key to centering the container itself */
    width: 100%;
    box-sizing: border-box;
}

/* Ensure the text and ad blocks are balanced */
.promo-text-block {
    flex: 1;
    max-width: 500px;
    text-align: left; /* Keeps text professional while container is centered */
}

.promo-ads-block {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    max-width: 600px;
}


.promo-text-block h1 {
    font-size: 38px;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.accent-text {
    color: var(--accent);
}

.promo-text-block p {
    color: var(--text-dim);
    font-size: 16px;
    margin-bottom: 25px;
}

.mini-search-trigger {
    background: #111;
    border: 1px solid var(--border);
    padding: 12px 20px;
    color: #555;
    font-size: 14px;
    cursor: pointer;
    width: fit-content;
    transition: 0.2s;
}

.mini-search-trigger:hover {
    border-color: var(--accent);
    color: #fff;
}


.split-ad-card {
    height: 220px;
    background-size: cover;
    background-position: center;
    border-radius: 7px; /* Your standard border radius */
    border: 1px solid var(--border);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.split-ad-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
}

.split-ad-card h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.ad-tag {
    font-size: 9px;
    font-weight: 900;
    background: var(--accent);
    color: #000;
    padding: 3px 7px;
    border-radius: 3px;
    width: fit-content;
    margin-bottom: 10px;
}


/* Responsive adjustment */
@media (max-width: 1100px) {
    .split-promo-container { flex-direction: column; align-items: flex-start; }
    .promo-ads-block { width: 100%; }
}

.all-stores-section {
    padding: 40px 30px;
}

.all-stores-section h2 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 25px;
}

.stores-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Columns */
    gap: 20px;
}

.store-card {
    border: 1px solid var(--border);
    border-radius: 7px; /* Your standard 7px */
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease;
	height: 100px;
}

.store-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.store-card-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.store-logo-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #222;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid #333;
}

.store-logo-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.store-info {
    display: flex;
    flex-direction: column;
}

.store-name {
    font-size: 15px;
    font-weight: 700;
    color: #000;
    margin-bottom: 2px;
}

.store-delivery {
    font-size: 12px;
    color: var(--text-dim);
}

.like-btn {
    background: transparent;
    border: none;
    color: #555;
    font-size: 18px;
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s, transform 0.2s;
}

.like-btn:hover {
    color: #ff4d4d;
    transform: scale(1.2);
}

.like-btn.liked {
    color: #ff4d4d;
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
    .stores-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .stores-grid { grid-template-columns: 1fr; }
}

.merchant-page-view {
    width: 100%;
    background: var(--bg);
}

.merchant-hero {
    width: 100%;
    height: 200px; /* As requested */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    box-sizing: border-box;
}

.hero-actions {
    display: flex;
    gap: 10px;
}

.hero-action-btn, .back-btn {
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    color: white;
    padding: 8px 12px;
    border-radius: 7px; /* 7px radius */
    cursor: pointer;
    font-weight: 600;
}

/* Branding Section */
.merchant-branding {
    padding: 0;
    margin-top: -30px; /* Pulls logo up into hero gradient */
    position: relative;
    z-index: 10;
    margin-bottom: 20px;;
}



.brand-title h1 {
    font-size: 32px;
    font-weight: 900;
    margin: 0;
    letter-spacing: -1px;
}

.merchant-meta {
    color: var(--text-dim);
    font-size: 14px;
    margin-top: 5px;
}

.merchant-cover-image {
    width: 300px;           /* Increased width for a 'header' feel */
    height: 160px;          /* Match the height of your text block */
    border-radius: 7px;     /* Your standard radius */
    overflow: hidden;
    border: 1px solid var(--border);
    flex-shrink: 0;         /* Prevents it from squishing */
}

.merchant-cover-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* This makes it a true header image */
    object-position: center;
}


/* Mission Stats Bar */
.mission-info-bar {
    background: #111;
    display: flex;
    padding: 15px;
    border: 1px solid var(--border);
    justify-content: space-around;
/* Rounds Top-Left and Top-Right, keeps Bottom-Left and Bottom-Right sharp */
	border-radius: 7px 7px 0 0;
}

.info-item { text-align: center; }
.info-item .label { display: block; font-size: 10px; color: var(--text-dim); font-weight: 800; margin-bottom: 4px; }
.info-item .value { font-size: 14px; font-weight: 700; color: var(--accent); }



/* Sticky Menu Nav */
.merchant-menu-nav {
    display: flex;
    gap: 25px;
    margin: 0 -20px;
    padding: 20px 30px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 72px; /* Sticks just below your main header */
    z-index: 100;
    overflow-x: auto;
    scrollbar-width: none;
    
}

.menu-cat {
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dim);
    cursor: pointer;
    transition: 0.2s;
}

.menu-cat.active {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
    padding-bottom: 5px;
}


/* 3. Force the Map into that 'hole' */
#merchant-mini-map {
    position: absolute !important;
    right: 0;
    top: 55px; /* Adjust this to sit exactly under the Heart button */
    
    /* Specific dimensions are required for maps to render */
    width: 200px !important;
    height: 110px !important;
    display: block !important;
    visibility: visible !important;
    z-index: 5;
    border-radius: 7px;
    border: 1px solid #eee;
    background: #f0f0f0; /* Helps see if it's there before map tiles load */
}

.product-scroller-section {
    padding: 20px 30px;
    width: 100%;
}

.product-horizontal-wrapper {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: none; /* Hide for clean look */
}

.product-horizontal-wrapper::-webkit-scrollbar {
    display: none;
}

.product-card {
    width: 100%;
    cursor: pointer;
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-image-container {
    width: 100%;
   /* Keep this around 100px-110px for 3-per-row */
    aspect-ratio: 1 / 1; /* Forces a perfect square regardless of screen width */
    height: auto;
    background: #111;
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    margin-bottom: 8px;
}

.product-image-container img {
    width: 100%;
    height: 100% !important;
    object-fit: contain; /* Good for bottles/electronics */
    padding: 10px;
}

/* The "+" Add Button overlay */
.add-mini-btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 32px;
    height: 32px;
    background: #fff;
    color: #000;
    border: none;
    border-radius: 7px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Typography Stack */
.product-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-price {
    font-size: 16px;
    font-weight: 800;
    color: #008080;
}

.product-name {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    line-height: 1.2;
    /* Limit to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-tag {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Header link */
.view-all-btn {
    background: transparent;
    border: none;
    color: var(--accent);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}

/* Grid Layout */
.product-auto-grid {
    display: grid;
    /* This creates as many 160px columns as will fit in the width */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 30px 20px; /* More vertical gap for the text stacks */
    padding: 20px 30px;
}

.grid-header {
    padding: 20px 30px 0 0px;
}

.grid-header h1 {
    font-size: 28px;
    font-weight: 900;
}

/* Modal Footer Styling */
.modal-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #222;
}

.btn-reset {
    background: transparent;
    border: 1px solid #444;
    color: #fff;
    padding: 10px 15px;
    border-radius: 7px; /* Standard radius */
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    flex: 1;
}

.btn-apply {
    background: var(--accent);
    border: none;
    color: #000;
    padding: 10px 15px;
    border-radius: 7px; /* Standard radius */
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    flex: 1.5;
}

.btn-apply:hover {
    background: #00c2d9;
}

/* Checkbox/Option Styling */
.filter-options-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
}

.check-option {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #ccc;
    cursor: pointer;
}

.check-option input[type="checkbox"] {
    accent-color: var(--accent);
    width: 18px;
    height: 18px;
}

.mission-mode-selector {
    margin-bottom: 20px;
}

/* Layout Container */
.brand-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0px;
    gap: 40px;
}

/* Left side grows to take available space */
.brand-title {
    flex: 1;
}

/* Right side keeps content stacked and aligned to the right */
.brand-actions-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Pushes toggle and logo to far right */
    gap: 20px;
}

/* Container for the toggle */
.toggle-container {
    display: flex;
    background: #eeeeee; /* Light grey track */
    padding: 4px;
    border-radius: 7px; /* Your brand standard */
    width: fit-content;
    height: 40px;
    align-items: center;
}

/* Individual buttons */
.toggle-opt {
    border: none;
    background: transparent;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 7px; /* Match container */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #555;
    height: 100%;
}

/* Active state - High contrast Black/White */
.toggle-opt.active {
    background: #000000;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Hover effect for inactive button */
.toggle-opt:not(.active):hover {
    background: rgba(0,0,0,0.05);
}


.toggle-container input {
    display: none; /* Hide actual radio buttons */
}

.toggle-container label {
    flex: 1;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #888;
    transition: color 0.3s ease;
    cursor: pointer;
}

/* The actual sliding highlight */
.toggle-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(50% - 2px);
    height: calc(100% - 4px);
    background: var(--accent);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* Change text color and move slider based on checked state */
#mode-delivery:checked ~ label[for="mode-delivery"] { color: #000; }
#mode-pickup:checked ~ label[for="mode-pickup"] { color: #000; }

#mode-pickup:checked ~ .toggle-slider {
    transform: translateX(100%);
}

#mode-delivery:checked ~ .toggle-slider {
    transform: translateX(0%);
}

.food-menu-section {
    padding: 20px 0px;
}

.food-grid {
    display: grid;
    /* Keeps the 3-column layout consistent with your "All Stores" section */
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px;
}

.food-item-card {
    background: #eee;
    border: 1px solid var(--border);
    border-radius: 7px; /* Your standard 7px radius */
    padding: 15px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s;
    height: 120px; /* Fixed height for clean grid alignment */
	align-items: center;
}

.food-item-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

/* Left Content (70% approx) */
.food-content-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.food-name {
    font-size: 16px;
    font-weight: 800;
    color: #000;
}

.food-description {
    font-size: 14px;
    color: var(--text-dim);
    line-height: 1.3;
    /* Truncate text to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 5px 0;
}

.food-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
}

/* Right Image (30% approx) */
.food-image-right {
    width: 130px; /* Approximately 30% of card width */
    height: 100%;
    background: #222;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.food-image-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Floating Add Button on Image */
.add-food-btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 28px;
    height: 28px;
    background: #fff;
    color: #000;
    border: none;
    border-radius: 7px;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}



/* Dark background overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Dimmed background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Higher than header/sidebar */
    backdrop-filter: blur(4px); /* Modern frosted glass effect */
    
}

/* The white card */
.modal-content {
    background: #ffffff;
    padding: 30px;
    width: 90%;
    max-width: 450px;
    border-radius: 7px; /* Your brand standard */
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    position: relative;
    max-height: 90vh;
    overflow: none;
    
}

.modal-content h3 {
    margin-top: 0;
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 20px;
}
.product-modal-container {
    background: #ffffff;
    /* Create a large square (e.g., 700px or 80% of screen) */
    width: 1050px; 
    height: 1050px; 
    
    /* Ensure it doesn't overflow smaller screens */
    max-width: 100vw;
    max-height: 95vh;
    
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Clips content to your 7px radius */
    border-radius: 7px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
}

.modal-scroll-area {
    padding: 30px;
    overflow-y: auto;   /* Strictly vertical scrolling */
    overflow-x: hidden; /* Prevents horizontal sliding */
    flex: 1;
    display: flex;
    flex-direction: column; /* Stacks image, text, and buttons vertically */
}

/* Custom scrollbar to keep it looking modern/minimal */
.modal-scroll-area::-webkit-scrollbar {
    width: 6px;
}
.modal-scroll-area::-webkit-scrollbar-thumb {
    background: #d2d2d7;
    border-radius: 10px;
}

/* Safety rules for modal contents */
#product-modal-content img {
    max-width: 100%; /* Image will never push wider than the square */
    /*height: auto;*/
    border-radius: 7px;
    margin-bottom: 20px;
}

#product-modal-content * {
    max-width: 100%;
    word-wrap: break-word; /* Prevents long text from pushing the width */
    box-sizing: border-box;
}

.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255,255,255,0.9);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Header Split */
.product-main-header {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
}

.product-hero-image {
    flex: 0 0 40%;
    height: 450px;
    background: #111;
    border-radius: 7px;
    overflow: hidden;
}

.product-hero-image img { width: 100%; height: 100%; object-fit: cover; }

.product-main-details { flex: 1; }

.modal-product-name { font-size: 32px; font-weight: 900; margin-bottom: 5px; }
.modal-product-price { font-size: 20px; font-weight: 700; color: var(--accent); display: block; margin-bottom: 15px; }

/* Instructions & Qty */
.special-instructions label { display: block; font-size: 12px; font-weight: 800; margin-bottom: 8px; text-transform: uppercase; color: #000; }
.special-instructions textarea { width: 100%; border: 1px solid var(--border); color: #000; padding: 12px; resize: none; height: 80px; }

.quantity-selector {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 25px;
}

.quantity-selector button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: #111;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

/* Upsell Grid (2 cols, 3 rows) */
.upsell-section h3 { font-size: 26px; margin-bottom: 50px; }
.upsell-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    gap: 15px;
}

.product-disclaimer { margin-top: 40px; padding-bottom: 40px; border-top: 1px solid #222; padding-top: 20px; color: #555; font-size: 12px; }


.add-to-order-btn {
    width: 100%;
    background: var(--accent);
    color: #000;
    padding: 18px 25px;
    font-weight: 900;
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
/* Container Box */
.product-options-container {
    margin-top: 25px;
    background: #fff; 
    border-radius: 7px;
    border: 1px solid #eee;
    padding: 0 20px;
}

/* Header Spacing */
.option-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 15px 0;
    border-bottom: 1px solid #eee;
}

/* Far-Right Radio Logic */
.option-item {
    display: flex;
    justify-content: space-between; /* This pushes info left and radio right */
    align-items: center;
    padding: 18px 0;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    background: none !important; /* No background */
    transition: none;
}

.option-item:last-child {
    border-bottom: none;
}

.option-info {
    display: flex;
    flex-direction: column;
    flex: 1; /* Occupy space to keep radio right */
}

/* The outer circle */
.custom-radio {
    width: 22px;
    height: 22px;
    border: 2px solid #ddd;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.2s ease;
}

/* Change border color when checked */
.option-item input:checked + .custom-radio {
    border-color: #000; /* Or your brand color */
}

/* The inner dot (only visible when checked) */
.option-item input:checked + .custom-radio::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 50%;
}

/* Spacing for Notes Title */
.notes-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-top: 30px; /* Space between the Options box and this title */
    margin-bottom: 12px;
    color: #000;
}

#modal-instructions {
    width: 100%;
    min-height: 100px;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 7px;
    resize: none;
}

/* 4. Spacing for Notes Title below the container */
.notes-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-top: 30px; /* Added significant space above the title */
    margin-bottom: 12px; /* Space between title and textarea */
    color: #000;
}

.product-notes-textarea {
    width: 100%;
    min-height: 100px;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 7px;
    font-family: inherit;
    resize: none;
}

.mini-cart-float {
    position: fixed;
    top: 80px; 
    right: 30px; 
    width: 340px;
    height: 500px; /* Use a fixed height so the footer has a 'bottom' to stick to */
    background: #000;
    border: 1px solid #222;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    z-index: 1000;
    display: flex;
    flex-direction: column; 
    border-radius: 7px;
    overflow: hidden; /* Ensures contents don't spill over the 7px radius */
}

/* This is the magic part: flex-grow fills the gap */
.receipt-list {
    flex: 1; 
    overflow-y: auto; /* Only this part scrolls */
    padding: 10px 15px;
}

.mini-cart-footer {
    padding: 20px;
    background: #fafafa; /* Keeping your color */
    border-top: 1px solid #222;
    /* No need for bottom: 0 here; flexbox handles it */
}

.add-note-trigger {
    width: 100%;
    background: transparent;
    border: 1px dashed #444;
    color: #888;
    padding: 10px;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    margin-bottom: 15px;
    border-radius: 4px;
}

.go-to-checkout-btn {
    width: 100%;
    background: var(--accent);
    color: #000;
    border: none;
    padding: 14px;
    font-weight: 900;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.2s;
}

.go-to-checkout-btn:hover { transform: scale(1.02); }

@keyframes slideInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}


.checkout-main {
    flex: 1.8;
}

.checkout-title {
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 30px;
}

.checkout-section {
    background: #0a0a0a;
    border: 1px solid var(--border);
    padding: 25px;
    margin-bottom: 20px;
}

.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.edit-link {
    background: transparent;
    border: none;
    color: var(--accent);
    font-weight: 700;
    cursor: pointer;
}

/* Sidebar & Sticky Logic */
.checkout-sidebar {
    flex: 1;
}

.summary-sticky-card {
    position: sticky;
    top: 100px;
    background: #111;
    border: 1px solid var(--border);
    padding: 25px;
    margin-bottom: 30px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--text-dim);
}

.summary-row.total {
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    margin-top: 15px;
}

.summary-divider {
    border: 0;
    border-top: 1px solid #222;
    margin: 15px 0;
}

.place-order-btn {
    width: 100%;
    background: var(--accent);
    color: #000;
    padding: 18px;
    font-weight: 900;
    border: none;
    cursor: pointer;
    margin-top: 20px;
    letter-spacing: 1px;
}

/* Upsell Area */
.checkout-upsell-container h4 {
    font-size: 14px;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

/* Small adjustments to the upsell grid for sidebar width */
.checkout-upsell-container .upsell-grid {
    grid-template-columns: 1fr; /* Stack vertically in sidebar if narrow */
    gap: 10px;
}

.checkout-upsell-container .food-item-card.mini {
    height: 100px;
    padding: 10px;
	font-size: 16px;
}

.checkout-page-container.wide-layout {
    display: flex;
    max-width: 1440px; /* Increased from 1200px */
    margin: 40px auto;
    padding: 0 50px; /* More breathing room on edges */
    gap: 50px;
}

.checkout-main {
    flex: 2.5; /* Takes significantly more space than the sidebar */
}

.checkout-sidebar {
    flex: 1;
    min-width: 350px;
}

.checkout-section {
    background: #0a0a0a;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 30px; /* Increased padding */
    margin-bottom: 30px;
}

/* Wide Receipt Items */
.receipt-item-wide {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #1a1a1a;
}

.item-meta {
    display: flex;
    flex-direction: column;
}

.item-name {
    font-size: 16px;
    font-weight: 700;
}

.item-details {
    font-size: 12px;
    color: var(--text-dim);
}

/* The Upsell Grid adjustment for wide view */
.checkout-upsell-wide {
    margin-top: 50px;
}

.checkout-upsell-wide h4 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 20px;
}

/* Sticky Summary adjustments */
.summary-sticky-card {
    position: sticky;
    top: 100px;
    background: #111;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 30px;
}

.summary-heading {
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 20px;
}

.terms-text {
    font-size: 11px;
    color: #444;
    text-align: center;
    margin-top: 15px;
}

/* Horizontal Date Scroller */
.date-scroller {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 15px;
    margin-bottom: 20px;
    scrollbar-width: none; /* Hide scrollbar Firefox */
}

.date-scroller::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
}

.date-box {
    min-width: 65px;
    padding: 12px 5px;
    border: 1px solid #ddd;
    border-radius: 7px;
    text-align: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
}

.date-box.active {
    background: #000;
    color: #fff;
    border-color: #000;
}

.date-box .day { font-size: 11px; display: block; text-transform: uppercase; }
.date-box .num { font-size: 18px; font-weight: 800; display: block; }

/* Vertical Time Slots */
.time-slots-container {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 7px;
}

/* Date Box Active State */
.date-box.active {
    background: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
}

/* Time Slot Active State */
.time-slot.active {
    background: #000 !important;
    color: #fff !important;
}

/* Make the inner circle change color when the parent is active */
.time-slot.active .selector-circle {
    border-color: var( --accent) !important;
    background: var( --accent) !important;
}

/* Ensure the scrollers allow for clicking */
.time-slots-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    padding: 10px 0;
}

.time-slot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border: 1px solid #eee;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s ease;
}


.modal-section {
    background: #f8f8f8;
    padding: 15px;
    border-radius: 7px;
    margin-bottom: 20px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.detail-row:last-child {
    border-bottom: none;
}

.btn-change {
    background: #eee;
    border: none;
    padding: 6px 12px;
    border-radius: 7px;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s;
}

.btn-change:hover {
    background: #e0e0e0;
}

.btn-update-full {
    width: 100%;
    background: #000;
    color: #fff;
    border: none;
    padding: 15px;
    font-weight: 700;
    border-radius: 7px;
    cursor: pointer;
    margin-top: 10px;
}

.btn-black {
    width: 100%;
    background: #000;
    color: #fff;
    border: none;
    padding: 15px;
    font-weight: 700;
    border-radius: 7px;
    cursor: pointer;
    margin-top: 10px;	
}

.address-bar {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent; /* Prevents jumping when border appears */
}


/* Optional: Subtle scale down on click for "tactile" feel */
.address-bar:active {
    transform: scale(0.98);
}
.schedule-text {
    margin-left: 15px; /* Adjust this number to increase/decrease the gap */
    font-weight: 600;
    font-size: 13px;
    display: inline-block;
    vertical-align: middle;
}

.modern-icon-loc {
    color: var(--text); /* Or use #000 for high contrast */
    font-size: 16px;
    margin-right: 8px;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

/* Subtle effect when you hover over the address bar */
.address-bar:hover .modern-icon-loc {
    color: var(--accent); /* Switches to your Namcor Cyan on hover */
    transform: scale(1.1);
}

.search-input-modern {
    width: 100%;
    /* Matching your btn-update-full height and padding */
    padding: 15px 15px 15px 45px; 
    border-radius: 7px;
    border: 1px solid var(--border);
    background-color: #f2f2f7; /* Modern light gray */
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* The modern "Focus" state */
.search-input-modern:focus {
    background-color: #ffffff;
    border-color: var(--accent); /* Namcor Cyan highlight */
    box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.1);
}

.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    font-size: 18px;
    pointer-events: none;
}

/* Modern Shopping Bag Icon */
.cart-trigger {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 8px;
    transition: transform 0.2s ease;
}

.cart-trigger:hover {
    transform: scale(1.1);
}

.modern-cart-icon {
    font-size: 25px;
    color: var(--text);
    /* Shopping carts are wider than bags, so we ensure it's centered */
    display: inline-block;
}

.cart-badge {
    position: absolute;
    top: -2px; /* Adjusted slightly for the cart shape */
    right: -2px;
    background: var(--accent); /* Namcor Cyan */
    color: #000;
    font-size: 10px;
    font-weight: 800;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #fff;
}

/* Auth Buttons - Matching your Update Button Style */
.btn-login-modern {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    padding: 10px 20px;
    font-weight: 600;
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.btn-login-modern:hover {
    background: #f5f5f7;
    border-color: var(--text);
}

.btn-signup-modern {
    background: #000; /* Matching btn-update-full */
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-weight: 700;
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
    transition: opacity 0.2s;
}

.btn-signup-modern:hover {
    opacity: 0.8;
}

.cat-img {
    width: 100px;           /* Or your preferred size */
    height: 100px;
    border-radius: 7px;    /* Matches your brand standard */
    background-size: cover;    /* This ensures the image fills the box */
    background-position: center; /* This centers the image in the frame */
    background-repeat: no-repeat;
    margin-bottom: 8px;
    background-color: #eee; /* Placeholder color while image loads */
	filter: none !important;
    -webkit-filter: grayscale(0%);
}

.merchant-view-layout {
    margin-top: calc(var(--header-height) + 50px);
    margin-left: auto;
    margin-right: auto;
    padding: 0 10px;   /* Your requested 10px side spacing */
    width: 100%;
    box-sizing: border-box;
}



.mini-map-container {
    flex: 1; /* Map takes up about 1/3 of the space */
    height: 180px; /* Adjust height as needed */
    background: #e5e5e0;
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    z-index: 1; /* Ensure it stays under dropdowns */
}




.mini-cart-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 350px;
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    z-index: 1000;
    display: none; /* Controlled by JS */
    flex-direction: column;
}

.mini-cart-header {
    padding: 20px;
    border-bottom: 1px solid #f5f5f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.receipt-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px 20px;
}

.receipt-item {
    display: flex;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px dashed #eee;
    font-size: 14px;
}

.go-to-checkout-btn {
    width: 100%;
    background: #000;
    color: #fff;
    border: none;
    padding: 15px;
    font-weight: 700;
    margin-top: 15px;
    cursor: pointer;
    transition: transform 0.2s;
}

.go-to-checkout-btn:hover {
    background: #222;
    transform: translateY(-2px);
}

/* Note Modal Container */
#note-modal .note-modal-content {
    background: #ffffff;
    border-radius: 7px;
    width: 400px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

#note-modal h3 {
    margin-top: 0;
    color: #000000; /* Black text on white background */
    font-size: 1.2rem;
}

#note-modal p {
    font-size: 12px;
    color: #666; /* Grey subtext */
    margin-bottom: 15px;
}

/* Input Styling */
#note-modal textarea {
    width: 100%;
    height: 100px;
    background: #f5f5f7; /* Light grey input */
    border: 1px solid #e2e2e7;
    color: #000;
    padding: 12px;
    border-radius: 7px;
    box-sizing: border-box;
    resize: none;
    font-family: inherit;
}

/* Action Buttons */
.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn-cancel {
    flex: 1;
    background: #eeeeee; /* Grey button */
    color: #333333;
    border: none;
    padding: 12px;
    border-radius: 7px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

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

.btn-save {
    flex: 1;
    background: #000000; /* Black button */
    color: #ffffff;
    border: none;
    padding: 12px;
    border-radius: 7px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-save:hover {
    opacity: 0.9;
}


#note-modal .note-modal-content h3 {
    color: #000;
    font-size: 18px;
    font-weight: 700;
}


#note-modal .btn-apply {
    flex: 2;
    background: var(--accent); /* Namcor Cyan */
    color: #000;
    border: none;
    padding: 12px;
    font-weight: 700;
    border-radius: 7px;
    cursor: pointer;
}

#note-modal textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.homepage-scroller-section {
    margin-bottom: 40px;
    padding: 0px;
}

.section-header-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 15px;
}

.section-header-main h2 {
    font-size: 22px;
    font-weight: 800;
    color: #000;
    margin: 0;
    letter-spacing: -0.5px;
}

.view-all-btn {
    background: transparent;
    border: none;
    color: var(--accent); /* Namcor Cyan */
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.category-grid-view {
	padding: 0 30px;
}


.app-footer {
    background: #000000;
    color: #ffffff;
    /* Increased top padding from 60px to 120px */
    padding: 60px 60px 30px 60px; 
    margin-top: 80px;
    font-family: inherit;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    /* Increased gap between brand and links */
    gap: 300px; 
    /* Increased bottom margin before the line */
    margin-bottom: 50px; 
}

.footer-main-logo {
    /* Made the logo slightly larger */
    height: 50px; 
    width: auto;
    object-fit: contain;
    display: block;
    margin-bottom: 200px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    /* Increased spacing between links */
    gap: 22px; 
}

.footer-column a {
    color: #ffffff;
    text-decoration: none;
    /* Slightly larger font for readability in a tall footer */
    font-size: 15px; 
    font-weight: 400;
    transition: color 0.2s;
}

.footer-divider {
    border: 0;
    border-top: 1px solid #1a1a1a;
    /* More space around the divider line */
    margin: 40px 0 40px 0; 
}

.store-img {
    height: 45px;
    border-radius: 7px; /* Kept your 7px brand standard */
    border: 1px solid #333;
    margin-bottom: 5px;
}

.accent-text {
    color: var(--accent, #00e5ff); /* Using your Namcor Cyan */
}

.app-download-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links-grid {
    flex: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

.footer-column a:hover {
    color: var(--accent, #00e5ff);
}


.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-logo-container {
    margin-bottom: 50px;
}


/* Ensure the download buttons stay aligned under the image */
.app-download-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.social-links {
    display: flex;
    gap: 20px;
    font-size: 20px;
}

.social-links a {
    color: white;
    transition: opacity 0.2s;
}

.legal-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #777;
}

.legal-links a {
    color: #777;
    text-decoration: none;
}

.legal-links a:hover {
    color: #fff;
}

.copyright {
    margin-left: 10px;
}

.homepage-layout-container {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

.home-scroll-content {
    flex: 1;
    width: 100%;
    transition: all 0.3s ease;
}

/* Pickup Mode Split */
.homepage-layout-container.split-view .home-scroll-content {
    width: 50%;
    flex: 0 0 50%;
    overflow-y: auto;
    max-height: 100vh;
    padding-right: 20px;
}

.home-map-panel {
    width: 50%;
    height: 100vh;
    position: sticky;
    top: 0;
    opacity: 0.95;
    background: #f8f9fa; /* Light grey background for the container itself */
    border-left: 1px solid var(--border);
    z-index: 10;
}

/* Ensure map markers/popups look correct on your dark theme */
.leaflet-container {
    background: #000 !important;
    border-radius: 0;
}

.title-row {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.service-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 7px; /* Your standard */
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Pickup Only style (Amber/Orange to warn it's not delivery) */
.service-badge.pickup-only {
    background: rgba(255, 165, 0, 0.15);
    color: #ffa500;
    border: 1px solid rgba(255, 165, 0, 0.3);
}

/* Both services style (Namcor Cyan/Green) */
.service-badge.both-services {
    background: rgba(0, 229, 255, 0.1);
    color: #00e5ff;
    border: 1px solid rgba(0, 229, 255, 0.3);
}

.mini-map-container {
    width: 280px;
    height: 160px;
    background: #eee;
    overflow: hidden;
    /* Ensure the Leaflet map actually shows light color here */
}

.merchant-mode-toggle {
    display: inline-flex;
    background: #f1f1f1;
    padding: 4px;
    border: 1px solid #ddd;
}

.mode-opt {
    padding: 6px 15px;
    border: none;
    background: none;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 5px; /* Slightly smaller than 7px to sit inside the 7px container */
    transition: 0.2s;
}

.mode-opt.active {
    background: #000;
}

.toggle-opt.active {
    background: #000 !important;
}

/* Pickup Only Badge Styling */
.service-badge.pickup-only {
    font-size: 10px;
    background: #fff3cd;
    color: #856404;
    padding: 3px 8px;
    border-radius: 7px;
    border: 1px solid #ffeeba;
}



.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 7px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 2000;
    max-height: 250px;
    overflow-y: auto;

}

.address-suggestion {
    padding: 14px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.2s;
}

.address-suggestion:hover {
    background-color: #f8f9fa;
}

.address-suggestion i {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.promo-wrapper-snap {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 10px 5px; /* Added horizontal padding so shadows aren't clipped */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.mini-promo-card {
    scroll-snap-align: start;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.mini-promo-card:active {
    transform: scale(0.98); /* Slight press effect when clicked */
}
.search-dropdown-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 7px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    z-index: 1000;
    overflow: hidden;
    border: 1px solid #eee;
}

.search-dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    transition: background 0.2s;
}

.search-dropdown-item:hover {
    background: #f0fdfa; /* Light Namcor Cyan tint */
}

.search-dropdown-item img {
    width: 40px;
    height: 40px;
    border-radius: 7px;
    object-fit: cover;
    margin-right: 15px;
    border: 1px solid #eee;
}

.search-dropdown-item label {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.search-dropdown-item i {
    color: #ccc;
    font-size: 12px;
}
.dropdown-section-label {
    padding: 12px 15px 5px 15px;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #fff;
}

.search-item-info {
    display: flex;
    flex-direction: column;
}

.search-item-info label {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--text);
}

.search-item-info span {
    font-size: 12px;
    color: var(--text-dim);
}

/* Specific styling for merchant matches to make them stand out */
.merchant-item img {
    border: 2px solid #f0f0f0;
}

.premium-result {
    background: linear-gradient(to right, #f0fdfa, #fff); /* Subtle tint */
    border-left: 3px solid var(--accent); /* Namcor Cyan accent bar */
}

.premium-tag {
    margin-left: auto;
    font-size: 10px;
    font-weight: 800;
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.dropdown-section-label {
    padding: 12px 15px 6px;
    font-size: 11px;
    font-weight: 800;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #fff;
    border-top: 1px solid #f2f2f2;
}

.dropdown-section-label:first-child {
    border-top: none;
}

.category-text-only:hover {
    color: #000 !important;
}

/* --- User Profile Page --- */
.user-page-container {
    max-width: 800px;
    padding: 40px 20px;
    margin: 0 auto;
	margin-top: 100px;
}

.user-profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.profile-pic-wrapper {
    width: 100px;
    height: 100px;
    border-radius: 7px;
    overflow: hidden;
    border: 2px solid var( --accent);
}

.profile-pic-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-details h1 {
    margin: 0;
    font-size: 24px;
}

.membership-tag {
    color: var( --accent);
    font-weight: bold;
    font-size: 14px;
}

.user-menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.user-menu-item {
    border: 1px solid #eee;
    border-radius: 7px;
    padding: 20px;
    cursor: pointer;
    transition: background 0.2s;
}

.user-menu-item:hover {
    background: #fcfcfc;
}

.user-menu-item i {
    font-size: 20px;
    margin-bottom: 10px;
    display: block;
    color: #333;
}

.menu-subtext {
    font-size: 12px;
    color: #777;
    margin-top: 4px;
}

.logout-btn {
    width: 100%;
    margin-top: 30px;
    padding: 15px;
    border: 1px solid #ff4d4d;
    color: #ff4d4d;
    background: transparent;
    border-radius: 7px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.logout-btn:hover {
    background: #ff4d4d;
    color: #fff;
}

/* --- Wallet Page --- */
.wallet-page {
    max-width: 600px;
    margin: 0 auto;
    padding: 40px 20px;
	margin-top: 100px;
}

.back-btn {
    background: none;
    border: none;
    cursor: pointer;
    margin-bottom: 20px;
    font-size: 16px;
	color: #000;
}

.balance-card {
    background: #000; /* Namcor Black */
    color: #fff;
    padding: 30px;
    border-radius: 7px;
    margin-bottom: 30px;
}

.balance-label {
    font-size: 14px;
    opacity: 0.8;
}

.balance-amount {
    font-size: 36px;
    margin: 10px 0;
    color: var( --accent);
}

.add-funds-btn, .send-gift-btn {
    background: var( --accent);
    color: #000;
    border: none;
    padding: 10px 20px;
    border-radius: 7px;
    font-weight: bold;
    cursor: pointer;
}

.gift-card-section {
    border: 1px solid #eee;
    border-radius: 7px;
    padding: 20px;
    background: #fafafa;
}

.gift-content {
    display: flex;
    gap: 20px;
    align-items: center;
}

.gift-visual {
    width: 120px;
    height: 75px;
    background: linear-gradient(45deg, #000, #333);
    border-radius: 7px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var( --accent);
}

.gift-brand {
    position: absolute;
    bottom: 5px;
    right: 8px;
    font-size: 10px;
    color: #fff;
    letter-spacing: 1px;
}

.payment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #f2f2f2;
}

.default-badge {
    color: #777;
    font-size: 12px;
}

.add-payment-btn {
    background: none;
    border: none;
    color: var( --accent);
    font-weight: bold;
    margin-top: 15px;
    cursor: pointer;
}


/* --- Global User Page Helpers --- */
.page-title {
    margin-bottom: 25px;
    font-size: 22px;
}

/* --- Orders --- */
.order-card {
    display: flex;
    gap: 15px;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 7px;
    margin-bottom: 15px;
}
.order-thumb {
    width: 70px;
    height: 70px;
    border-radius: 7px;
    object-fit: cover;
}
.order-info { flex: 1; }
.order-header { display: flex; justify-content: space-between; align-items: flex-start; }
.order-status { font-size: 12px; color: #777; text-transform: uppercase; }
.order-meta { font-size: 13px; color: #666; margin: 4px 0; }
.receipt-btn {
    background: #f1f1f1;
    border: none;
    padding: 6px 14px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

/* --- Favourites --- */
.fav-store-card {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    border: 1px solid #eee;
    border-radius: 7px;
    padding: 12px;
    cursor: pointer;
}
.fav-store-logo { width: 50px; height: 50px; border-radius: 50%; border: 1px solid #eee; }
.fav-store-rating { font-size: 12px; color: #777; margin-top: 2px; }

/* --- Promotions --- */
.promo-coupon-card {
    background: #fff;
    border: 2px dashed var( --accent);
    border-radius: 7px;
    padding: 20px;
    margin-bottom: 15px;
}
.promo-coupon-title { font-weight: bold; color: #000; font-size: 16px; }
.promo-coupon-sub { font-size: 13px; color: #555; margin-top: 2px; }
.promo-code-box {
    margin-top: 12px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: var( --accent);
    background: #000;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
}

/* --- Saved Places --- */
.place-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}
.place-icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}
.place-address { font-size: 13px; color: #777; margin-top: 2px; }
.add-btn-full {
    width: 100%;
    margin-top: 25px;
    padding: 15px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 7px;
    font-weight: bold;
    cursor: pointer;
}

/* --- Receipt Page --- */
.receipt-paper {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 7px;
    padding: 30px;
    max-width: 500px;
    margin: 20px auto;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.receipt-header {
    text-align: center;
    margin-bottom: 25px;
}

.receipt-merchant-logo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 10px;
    border: 2px solid var( --accent);
}

.receipt-status-tag {
    display: inline-block;
    background: #e6fffb;
    color: #008d7d;
    padding: 4px 12px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: bold;
    margin: 8px 0;
}

.receipt-row-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 14px;
}

.receipt-row-item.total {
    font-weight: bold;
    font-size: 18px;
    color: #000;
}

.receipt-divider {
    border: none;
    border-top: 1px dashed #ddd;
    margin: 10px 0;
}

.receipt-footer {
    margin-top: 30px;
    text-align: center;
    color: #999;
    font-size: 12px;
}

.download-receipt-btn {
    margin-top: 20px;
    width: 100%;
    padding: 12px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 7px;
    font-weight: bold;
    cursor: pointer;
}

/* --- Favourites Styles --- */
.fav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
}

.fav-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border: 1px solid #eee;
    border-radius: 7px;
    background: #fff;
    position: relative;
    transition: transform 0.2s;
}

.fav-click-area {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    cursor: pointer;
}

.fav-logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #f0f0f0;
}

.fav-logo.item-thumb {
    border-radius: 7px; /* Items look better with square-ish thumbs */
}

.fav-info strong {
    display: block;
    font-size: 15px;
}

.fav-meta {
    font-size: 12px;
    color: #777;
}

.heart-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 10px;
    color: #ddd; /* Gray when off */
    transition: color 0.2s;
}

.heart-btn.active {
    color: #ff4d4d; /* Red when on */
}

.empty-msg {
    color: #999;
    font-size: 14px;
    grid-column: 1 / -1;
    padding: 20px 0;
}

.places-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

/* --- Saved Places Delete UI --- */
.place-card {
    position: relative; /* Necessary for positioning the delete button */
    display: flex;
    align-items: center;
    padding: 15px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 7px;
    gap: 15px;
}

.delete-place-btn {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    padding: 10px;
    font-size: 16px;
    transition: color 0.2s;
}

.delete-place-btn:hover {
    color: #ff4d4d; /* Turns red on hover */
}

.place-card.add-new {
    cursor: pointer;
    border: 2px dashed #ddd;
    justify-content: center;
    background: #fafafa;
    transition: all 0.2s;
}

.place-card.add-new i {
    font-size: 20px;
    color: var( --accent);
    margin-bottom: 8px;
    display: block;
}

.place-icon {
    width: 40px;
    height: 40px;
    background: #f0f0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}

.place-info {
    flex: 1;
}

.place-info strong {
    display: block;
    font-size: 15px;
}

.place-info span {
    font-size: 13px;
    color: #777;
}

.place-card.add-new:hover {
    background: #f1f1f1 !important;
    border-color: var( --accent) !important;
}

/* --- Fix for Modal Positioning --- */
.namcor-modal-overlay {
    position: fixed;      /* Fixes it to the screen, not the page content */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Darkens the background */
    display: flex;         /* Allows centering of the content */
    align-items: center;   /* Vertical center */
    justify-content: center; /* Horizontal center */
    z-index: 9999;        /* Ensures it stays on top of the GPS/Panels */
	padding: 30px;
}

/* Ensure the content box stays consistent */
.payment-modal-size {
    max-width: 400px;
    width: 90%;
    background: #fff;
    border-radius: 7px;   /* Namcor Standard */
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* --- Wallet Updates --- */
.payment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 7px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: 0.2s;
}

.payment-item:hover {
    border-color: var( --accent);
}

.payment-item.is-default {
    border-color: var( --accent);
}

.payment-details i {
    font-size: 20px;
    margin-right: 10px;
}

.make-default {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    font-weight: bold;
}

.default-badge {
    color: var( --accent);
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}



.modal-body {
    padding: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 14px;
}

.namcor-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 7px;
    font-size: 16px;
    box-sizing: border-box; /* Ensures padding doesn't break width */
}

.form-row {
    display: flex;
    gap: 10px;
}

.modal-footer {
    padding: 20px;
    border-top: 1px solid #eee;
}

.btn-full-action {
    width: 100%;
    background: #000;
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 7px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-full-action:hover {
    background: #333;
}


.close-modal-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    padding: 0;
    line-height: 1; /* Centers the '×' vertically */
}

/* Rest of your existing CSS remains the same */
.payment-modal-size {
    max-width: 400px;
    width: 90%;
    background: #fff;
    border-radius: 7px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 5px 20px; /* Aligned left padding to 20px */
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
}

.close-modal-btn {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #999;
    padding: 0;
    line-height: 1;
}

/* Ensure the form groups don't feel too cramped with the extra fields */
.form-group {
    margin-bottom: 12px;
}

.namcor-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 7px; /* Strict 7px border radius */
    font-size: 14px;
    box-sizing: border-box;
}

/* --- Auth Pages --- */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 100vh;
    padding: 20px;
	margin-top: 10px;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    padding: 40px;
    border-radius: 7px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.auth-header {
    text-align: center;
    margin-bottom: 30px;
}

.auth-logo {
    font-weight: 900;
    font-size: 24px;
    color: var( --accent);
    margin-bottom: 10px;
}

.social-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
    font-weight: 500;
}

.social-btn img {
    width: 18px;
}

.auth-divider {
    text-align: center;
    margin: 20px 0;
    position: relative;
}

.auth-divider::before {
    content: "";
    position: absolute;
    top: 50%; left: 0; width: 100%; height: 1px;
    background: #eee;
    z-index: 1;
}

.auth-divider span {
    background: #fff;
    padding: 0 10px;
    color: #999;
    font-size: 12px;
    position: relative;
    z-index: 2;
}

.auth-footer {
    margin-top: 25px;
    text-align: center;
    font-size: 14px;
    color: #666;
}

.auth-link {
    color: var( --accent);
    font-weight: bold;
    cursor: pointer;
}

.plan-selection {
    margin-bottom: 15px;
}

.plan-selection p {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
}

@media print {
    /* Hide navigation, search bar, and receipt buttons when printing */
    header, 
    .no-print, 
    #search-bar-container,
    .left-panel,
    .right-panel {
        display: none !important;
    }
    
    body {
        background: white;
    }

    .receipt-container {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }
}

@keyframes toastSlideIn {
    from { transform: translateX(-50%) translateY(-100px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

.namcor-toast-active {
    animation: toastSlideIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.add-to-order-btn {
    width: 100%;
    background: #000;
    color: #fff;
    border: none;
    padding: 16px 20px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-radius: 7px; /* Namcor Standard */
    transition: background 0.2s;
}

.add-to-order-btn:active {
    background: #008080; /* Changes to Teal on click */
}

#footer-total-price {
    background: rgba(255,255,255,0.2);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
}

.bundle-prompt-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9999; /* Above the product modal */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.bundle-card {
    background: white;
    padding: 24px;
    max-width: 400px;
    width: 100%;
    text-align: center;
}

.bundle-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.bundle-actions button {
    flex: 1;
    padding: 12px;
    border-radius: 7px;
    font-weight: bold;
    cursor: pointer;
    border: none;
}

.btn-confirm { background: #000; color: #fff; }
.btn-cancel { background: #eee; color: #666; }



.address-suggestion:hover {
    background-color: #f5f5f5;
}

/* Example Loading Overlay Style */
.loading-overlay {
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(5px);
    border-radius: 7px; /* Matches your brand */
    /* ... other centering styles ... */
}

.sort-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    cursor: pointer;
    border-radius: 7px;
    margin-bottom: 5px;
    transition: background 0.2s;
}

.sort-option:hover {
    background: #f9f9f9;
}

.sort-option.active {
    background: #f0f0f0;
}

.selector-circle {
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-radius: 50%;
    position: relative;
}

.sort-option.active .selector-circle {
    border-color: #000;
    background: #000;
}

.sort-option.active .selector-circle::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.selection-limit {
	font-size: 11px;
}

/* Base Font and Scroll Shadow Logic */
.modal-scroll-content {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    height: 100%;
    overflow-y: auto;
    scroll-behavior: smooth;
    /* This creates the shadow effect above the footer */
    background: linear-gradient(to bottom, transparent 95%, rgba(0,0,0,0.05));
}

.modal-product-name {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.modal-product-price {
    font-size: 18px;
    font-weight: 500;
    display: block;
    margin-bottom: 12px;
}

.modal-product-desc {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 30px;
}

/* Options Styling */
.product-options-container {
    margin-bottom: 32px;
}

.option-group-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.option-title-left h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.selection-limit {
    font-size: 13px;
    color: #777;
}

/* REQUIRED BADGE */
.required-badge {
    background: #EEEEEE;
    color: #333;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* OPTION ITEMS (Faint Borders) */
.option-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04); /* VERY faint separator */
    cursor: pointer;
}

.option-item:last-child {
    border-bottom: none;
}

.option-name {
    font-size: 16px;
    font-weight: 400;
    display: block;
}

.option-price-diff {
    font-size: 14px;
    color: #777;
}

/* CUSTOM SELECTORS (UberEats Style) */
.option-item input {
    display: none;
}

.custom-selector {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    position: relative;
    transition: 0.2s;
}

.custom-selector.circle { border-radius: 50%; }
.custom-selector.square { border-radius: 3px; }

.option-item input:checked + .custom-selector {
    background: #000;
    border-color: #000;
}

.option-item input:checked + .custom-selector::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #fff;
}
.custom-selector.circle::after { border-radius: 50%; }
/* Square uses a checkmark or smaller square */
.custom-selector.square::after { width: 6px; height: 6px; }

/* Special Instructions */
.special-instructions {
    margin-top: 20px;
}

.notes-title {
    font-size: 17px; /* Slightly bigger */
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
}

#modal-instructions {
    width: 100%;
    background: #F6F6F6; /* Light grey */
    border: none;
    padding: 15px;
    font-size: 14px;
    resize: none;
    outline: none;
}

/* Upsell Section */
.upsell-title {
    font-size: 22px; /* Larger */
    font-weight: 700;
    margin-bottom: 20px;
}

/* Fixed Footer Shadow */
.modal-fixed-footer {
    position: relative;
    z-index: 20;
    background: #fff;
    padding: 20px;
    border-top: 1px solid #eee;
	box-shadow: 0 -10px 20px -15px rgba(0,0,0,0.2);
}

.add-to-order-btn {
    transition: transform 0.1s;
}

.add-to-order-btn:active {
    transform: scale(0.98);
}

.all-shops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding: 10px 0;
    overflow-x: hidden; /* This removes the horizontal scroll */
}

/* On smaller screens/mobiles, make it 1 card per row */
@media (max-width: 600px) {
    .all-shops-grid {
        grid-template-columns: 1fr;
    }
}

.product-grid-card {
    transition: transform 0.2s ease;
}
.product-grid-card:active {
    transform: scale(0.97);
}
.product-grid-card img {
    border-bottom: 1px solid #f0f0f0;
}

.smart-row-container {
    margin: 20px 0;
    padding-left: 15px; /* Aligns with your page margins */
}

.horizontal-scroll-wrapper {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding-bottom: 10px;
    scrollbar-width: none; /* Hides scrollbar on Firefox */
}

.horizontal-scroll-wrapper::-webkit-scrollbar {
    display: none; /* Hides scrollbar on Chrome/Safari */
}

.merchant-card-sm {
    flex: 0 0 140px; /* Fixed width for cards */
    background: #fff;
    border-radius: 7px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    text-align: center;
    padding: 10px;
}

.merchant-card-sm img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 7px;
    margin-bottom: 8px;
}

.merchant-card-sm h4 {
    font-size: 13px;
    margin: 5px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}









.horizontal-scroll-wrapper::-webkit-scrollbar {
    display: none;
}
.horizontal-scroll-wrapper {
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.fake-cursor {
    width: 2px;
    height: 30px;
    background-color: #008080; /* Namcor Teal */
    animation: blink 1s infinite;
}


/* Map View Styles */
#map-view {
    height: calc(100vh - var(--header-height) - 60px); /* Adjust for header and bottom nav */
    width: 100%;
}

#map-view.hidden {
    display: none;
}

.sort-option.active {
        border-color: #008080 !important;
        background: #f0f8f8;
    }
    .sort-option.active span {
        color: #008080;
    }
    
    /* Smooth slider appearance */
    .custom-slider {
        cursor: pointer;
        height: 6px;
        -webkit-appearance: none;
        background: #eee;
        border-radius: 5px;
        outline: none;
    }


  /* The Opaque Overlay */
.session-expired-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.98); /* Almost pure white/opaque */
    z-index: 9999; /* Sit on top of everything */
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px); /* Blurs the background content */
}

.expired-card {
    width: 90%;
    max-width: 400px;
    padding: 30px;
    text-align: center;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}
.namcor-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Must be 100% to calculate the true screen center */
    background: rgba(0, 0, 0, 0.7); 
    display: flex;
    align-items: center;      /* Vertically centers the white card */
    justify-content: center;    /* Horizontally centers the white card */
    z-index: 9999;
    padding: 15px; 
    box-sizing: border-box;
}

/* The white card */
.modal-content {
    background: #ffffff;
    padding: 30px;
    width: 90%;
    max-width: 450px;
    border-radius: 7px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    position: relative;
    
    /* HEIGHT RESTRICTION */
    max-height: 70vh !important; /* Limits card to 70% of the viewport height */
    overflow-y: none !important; /* Adds scrollbar inside if content is too long */
    
    /* Ensure internal centering and spacing */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}




/* The semi-transparent background */
.filter-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 9999;
    display: none; /* Controlled by JS */
    align-items: center;
    justify-content: center;
    padding: 20px; /* Ensures the white card never touches screen edges */
    box-sizing: border-box;
}

/* The actual white modal cards */
.filter-modal-content {
    background: white;
    padding: 30px 25px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    text-align: center;
    
    /* RESPONSIVE WIDTH LOGIC */
    width: 90%;            /* On mobile, take up 90% of screen */
    max-width: 350px;      /* On desktop, stop at 350px */
    
    /* RESPONSIVE HEIGHT LOGIC */
    max-height: 80vh;      /* Never taller than 80% of screen */
    overflow-y: auto;      /* If content is long, scroll inside the modal */
    
    position: relative;
    box-sizing: border-box;
    
    /* Animation for a smoother "Pop" effect */
    animation: modalPop 0.25s ease-out;
}

@keyframes modalPop {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Specific Overlay for Payment to ensure it stays above everything else */
.payment-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 21000; /* Higher than other UI elements */
    backdrop-filter: blur(4px);
    padding: 20px;
    box-sizing: border-box;
}

/* The Payment Card */
.payment-modal-card {
    background: white;
    width: 100%;
    max-width: 400px; /* Limits width on desktop */
    max-height: 85vh !important; /* Limits height on mobile, allows 15% 'peek' behind */
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    overflow-y: auto; /* Scrollable if content exceeds 85vh */
    box-sizing: border-box;
    animation: slideUpModal 0.3s ease-out;
}

/* Label styling for consistency */
.payment-modal-card label.field-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: #888;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

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

/* Prevent auto-zoom on mobile inputs */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select,
    .payment-modal-card input,
    #new-card-name {
        font-size: 16px !important;
    }
}


.date-scroller::-webkit-scrollbar, 
div[style*="overflow-x: auto"]::-webkit-scrollbar {
    display: none;
}

/* Reset the dashboard containers to prevent right-shift */
#dashboard-main-content, 
#dashboard-address-content, 
#dashboard-schedule-content {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    display: block !important;
}

/* Ensure all dashboard elements calculate width correctly */
#dashboard-main-content *, 
#dashboard-address-content *, 
#dashboard-schedule-content * {
    box-sizing: border-box !important;
}

/* Hide scrollbars on horizontal lists */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


.dashboard-slide{

    margin: 0 auto !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

/* Mobile Fix for Split Ads */
@media (max-width: 768px) {
    .split-promo-container {
        flex-direction: column; /* Stack text on top of ads */
        gap: 20px;              /* Reduce gap for mobile */
        padding: 30px 20px;     /* Tighter padding */
        text-align: center;
    }

    .promo-text-block {
        max-width: 100%;
        text-align: center;     /* Center text for better mobile flow */
    }

    .promo-text-block h1 {
        font-size: 28px;        /* Slightly smaller heading for mobile */
    }

    .promo-ads-block {
        width: 100%;
        grid-template-columns: 1fr 1fr; /* Keep 2-column grid */
        gap: 12px;
    }

    .split-ad-card {
        height: auto !important;   /* Override the fixed 220px height */
        aspect-ratio: 1 / 1;       /* FORCE THE SQUARE SHAPE */
        padding: 15px;             /* Slightly less padding so text fits */
    }

    .split-ad-card h3 {
        font-size: 14px;           /* Scale down font so it doesn't overflow the square */
        line-height: 1.2;
    }
}

/* Ensure the map provider (Google/Leaflet) knows to fill the container */
#map {
    width: 100%;
    height: 100%;
    min-height: 300px;
}

/* Prevent text selection on the tracking card */
.gps-bottom-card {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Fix for iOS bottom notch */
@supports (padding: env(safe-area-inset-bottom)) {
    .gps-bottom-card {
        bottom: calc(15px + env(safe-area-inset-bottom));
    }
}

/* Container for the GPS View */
.gps-wrapper {
    display: flex;
    flex-direction: column;
    font-family: sans-serif;
    position: relative;
    overflow: hidden;
    border-radius: 7px;
    
    /* The Fix: Dynamic height minus header/footer space */
    height: 70vh; /* Fallback */
    height: calc(100dvh - 160px); 
    margin-top: 80px;
}

/* The Bottom Card - Uber Style */
.gps-info-card {
    position: absolute;
    bottom: 15px; /* Floating slightly above the bottom */
    left: 15px;
    right: 15px;
    z-index: 1000;
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 -5px 25px rgba(0,0,0,0.1);
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Ensure the map doesn't collapse */
#map {
    flex: 1;
    width: 100%;
    height: 100%;
    background: #f8f9fa;
}

.gps-wrapper {
    display: flex;
    flex-direction: column;
    font-family: sans-serif;
    position: relative;
    
    /* Lock the height */
    height: calc(100dvh - 230px); 
    margin-top: 0px;
    border-radius: 7px;

    /* THE FIX: Disable scrolling */
    overflow: hidden; /* Prevents internal scrolling */
    touch-action: none; /* Prevents the browser from handling swipes/scrolls */
    overscroll-behavior: contain; /* Prevents the "bounce" effect on iOS/Android */
}

/* Ensure the map inside still allows zooming/panning if needed */
#map {
    flex: 1;
    width: 100%;
    height: 100%;
    touch-action: auto; /* Re-enable touch ONLY for the map part */
}


.search-view-layout {
    margin-top: -20px !important;

}

.gps-pulse {
    z-index: 9999 !important;
    position: relative;
}