:root{--primary:#198754;--text:#1f2937}
*{box-sizing:border-box}
body
{
	font-family:'Poppins',sans-serif;color:var(--text);
}
.announcement-bar
{
	background:linear-gradient(90deg,#0ea5e9,#22c55e);
	padding:.5rem 0;
	position: fixed;   /* Sticks to the viewport */
	top: 0;            /* Aligns to top */
	left: 0;           /* Aligns to left */
	width: 100%;       /* Ensures full width */
	z-index: 1; 
}
@media(max-width:576px)
{
  .announcement-bar{padding:.4rem 0}
  .announcement-bar .container{flex-direction:column;align-items:flex-start;gap:.25rem}
  .announcement-bar .container>.d-flex{flex-wrap:wrap;gap:.5rem}
  .announcement-bar span,.announcement-bar .small{font-size:.85rem}
}
.img-overlay {
    display: none; 
    position: absolute;
    top: 0px;
    left: 0px;
    width: 80%;
    height: auto;
    pointer-events: none; /* Allows clicks to pass through */
    opacity: 0.7;      /* Adjust transparency here (0.0 to 1.0) */
}
.navbar-styled
{
	position: fixed;   /* Sticks to the viewport */
	top: 0px;            /* Aligns to top */
	left: 0;           /* Aligns to left */
	width: 100%;       /* Ensures full width */
    height: auto;
	z-index: 2; 
}
.navbar-styled{box-shadow:0 10px 30px rgba(0,0,0,.06)}
.navbar-styled:after
{
	content:"";
	position:fixed;
	width: 100%;       /* Ensures full width */
    height: auto;
	z-index: 1; 
	left:0;
	right:0;
	bottom:-1px;
	height:3px;
	background:linear-gradient(90deg,#22c55e,#0ea5e9)
}
.navbar .navbar-brand{color:#0f172a;background:linear-gradient(90deg,#22c55e,#0ea5e9);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.search-form .form-control{height:44px}
.search-form .input-group{border:1px solid #e5e7eb;border-radius:999px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.06)}
.search-form .form-control{border:none}
.search-form .form-control:focus{box-shadow:none}
.search-form .input-group-text{border:none}
.mega .dropdown-menu
{
	min-width:600px;
	max-width:calc(100vw - 32px);
	right:auto;
	left:0;
	overflow-x:auto;
	max-height: 80vh;
	overflow-y: auto;
}
.mega .dropdown-menu{box-shadow:0 20px 40px rgba(0,0,0,.10);border:none;border-radius:12px}
.mega>.nav-link.dropdown-toggle{background:var(--primary);color:#fff;border-radius:999px;padding:.45rem .9rem}
.mega>.nav-link.dropdown-toggle:hover{filter:brightness(1.1)}
.mega-menu .dropdown-item
{
	font-size: clamp(0.9rem, 1.8vw, 1.1rem);
	padding:.25rem 0
}
.hero .hero-slide{height:520px;background-size:cover;background-position:center;background-color:#0f172a}
.hero .hero-slide .container .text-white{max-width:560px;margin:0 auto;text-align:center}
.section-title{font-weight:600}
.category-card{text-decoration:none;border:1px solid #e5e7eb;transition:transform .2s,box-shadow .2s}
.category-card:hover{transform:translateY(-4px);box-shadow:0 10px 20px rgba(0,0,0,.08)}
.category-card .card-img-top{height:140px;width:100%;object-fit:cover}

.mobile-actions{display:none!important}
img{max-width:100%;display:block}
.btn-gradient{background:linear-gradient(90deg,#22c55e,#0ea5e9);color:#fff;border:none;border-radius:999px}
.btn-gradient:hover{opacity:.92;color:#fff}
.navbar .nav-link.position-relative{border-radius:999px}
#cartCount{animation:pulse 2s infinite}
@keyframes pulse{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.08)}100%{transform:translate(-50%,-50%) scale(1)}}
.banner{display:flex;align-items:center;justify-content:space-between}
.banner.wide{min-height:120px}
.gradient-1{background:linear-gradient(90deg,#22c55e,#16a34a)}
.gradient-2{background:linear-gradient(90deg,#0ea5e9,#0284c7)}
.gradient-3{background:linear-gradient(90deg,#f59e0b,#d97706)}
.gradient-4{background:linear-gradient(90deg,#a855f7,#7c3aed)}
.gradient-5{background:linear-gradient(90deg,#ef4444,#dc2626)}
.brand-logo{height:60px;object-fit:contain}
.icon-box .icon{font-size:28px;color:var(--primary)}
.footer a{text-decoration:none}
.footer .list-unstyled li{margin:.25rem 0}
.newsletter input{height:48px}
footer.footer{position:relative;z-index:1}
.footer .text-muted{color:rgba(255,255,255,.85)!important}
.footer a.text-muted{color:rgba(255,255,255,.85)!important}
.footer a.text-muted:hover{color:#ffffff!important}
@media(max-width:992px){.mega .dropdown-menu{min-width:unset;width:100%}}
@media(max-width:576px){
  .hero .hero-slide{height:300px}
  .hero h1{font-size:1.5rem}
  .hero .lead{font-size:.95rem}
  .search-form .input-group{border-radius:14px}
}
.fw-semibold.mb-2
{
	color:green;
	font-size:22px;
}	
.announcement-bar{display:block}
@media(max-width:576px){.announcement-bar{display:none!important}}
.offcanvas-end#cartSidebar{--bs-offcanvas-width:360px}
@media(max-width:576px){.offcanvas-end#cartSidebar{--bs-offcanvas-width:100vw}}
#brandsCarousel .carousel-item .d-flex{flex-wrap:wrap}



/* Hide on desktops, show on screens smaller than 992px (Bootstrap lg breakpoint) */
@media (max-width: 991.98px) 
{
  body 
  {
    padding-bottom: 70px; /* Adjust this based on the height of your nav */
  }
  
  .fixed-bottom 
  {
    z-index: 1030; /* Ensures it stays above other content */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05); /* Subtle shadow for depth */
  }
}
.soon::after 
{
	content: "soon";
	font-size: 11px;
	color: #888;            /* Subtle gray color */
	margin-left: 6px;       /* Gap between name and 'soon' */
	font-style: italic;     /* Optional: makes it look distinct */
	font-weight: 400;
}
.soon
{
	font-size: 15px;
	color: #888;            /* Subtle gray color */
	margin-left: 6px;       /* Gap between name and 'soon' */
	font-weight: 400;
	pointer-events: none;  /* Disables clicks and hover effects */
    color: #6c757d;        /* Grey color to look "inactive" */
    text-decoration: none; /* Removes the underline */
    opacity: 0.6;
}
/* Force a solid white background so the gray backdrop doesn't show through */
.offcanvas#cartSidebar 
{
    background-color: white !important;
    z-index: 2100 !important; /* Extremely high to beat any other element */
}
/* Ensure the backdrop stays below the cart but above the rest of the page */
section.py-5 {
    margin-bottom: -100px !important;
}

/* To remove the gap from the very last section */
section.py-5:last-of-type {
    margin-bottom: 0 !important;
}
/* Default Background */
/* 1. Base Body Setup */
body 
{
    position: relative;
    margin: 0;
    min-height: 100vh;
    background-color: #f8f9fa;
    transition: background 0.5s ease;
    /* Prevents horizontal scroll from the transform: scale */
    overflow-x: hidden; 
}

/* 2. The Blurred Wallpaper Layer */
body::before 
{
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Use 100% or 100vh; some mobile browsers struggle with fixed + 100% */
    height: 100%; 
    z-index: -1;
    background-position: center center;
    background-repeat: no-repeat;
    /* Added -webkit- prefix for older mobile browser support */
    -webkit-background-size: cover;
    background-size: cover;
    filter: blur(3px);
    /* Scale prevents white edges during blur */
    transform: scale(1.1);
    transition: background 0.5s ease;
    /* Critical: Ensures pseudo-element doesn't collapse on mobile */
    display: block; 
}

/* 3. Theme Sections - Ensure consistent pathing */
body.theme-market::before 
{
    background-color: #e8f5e9;
    background-image: url('../png/background2.jpg');
}
body.theme-restaurant::before 
{
    background-color: #fff5f5;
    background-image: url('../png/restaurants.jpg');
}

body.theme-butcher::before 
{
    background-color: #e3f2fd;
    background-image: url('../png/butchershops.jpg'); 
}
body.theme-grocery::before 
{
    background-color: #e3f2fd;
    background-image: url('../png/groceries.jpg'); 
}
body.theme-toys::before 
{
    background-color: #e3f2fd;
    background-image: url('../png/toys.jpg'); 
}
body.theme-bakery::before 
{
    background-color: #e3f2fd;
    background-image: url('../png/bakery.jpg'); 
}
body.theme-sweet::before 
{
    background-color: #e3f2fd;
    background-image: url('../png/sweets.jpg'); 
}
body.theme-tobbaco::before 
{
    background-color: #e3f2fd;
    background-image: url('../png/tobacco.jpg'); 
}

/* 4. Glassmorphism for cards */
.product-card, .category-card, .navbar-styled 
{
    background: rgba(255, 255, 255, 0.85) !important;
    -webkit-backdrop-filter: blur(5px); /* Safari support */
    backdrop-filter: blur(5px);
}
/* Ensure the sidebar is ALWAYS above the backdrop */
.offcanvas {
    z-index: 1060 !important;
}

/* The backdrop should be lower than the sidebar */
.offcanvas-backdrop {
    z-index: 1050 !important;
}
.dropdown-toggle {
  /* 1. Centering */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  /* 2. Dynamic Font Size (Min: 14px, Scalable: 1.2vw, Max: 22px) */
  font-size: clamp(12px, 1.2vw, 22px);

  /* 3. Rational Width (Width is 10x the font size) */
  /* This ensures the box is always wide enough for the text */
  min-width: 4em; 
  
  /* Optional: prevents text from wrapping to two lines */
  white-space: nowrap; 
}
.delivo-logo
{
	height:7vh;
	width:auto;
}