body {
    background-color: #f8f9fa;
}

.card {
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}
.cake-desc{
font-size:14px;
color:#555;
margin:3px 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.badge-label{
position:absolute;
top:8px;
left:8px;
color:white;
font-size:12px;
padding:3px 8px;
border-radius:4px;
font-weight:600;
}

/* Hot Seller - Red */
.hot-seller{
background:#e53935;
}

/* Best Seller - Green */
.best-seller{
background:#28a745;
}
.prep-time-badge{
position:absolute;
bottom:6px;
left:6px;

background:rgba(255,255,255,0.9);
color:#333;

font-size:10px;
padding:2px 6px;
border-radius:12px;

display:flex;
align-items:center;
gap:3px;

box-shadow:0 1px 4px rgba(0,0,0,0.15);
font-weight:500;
}

.prep-time-badge i{
font-size:10px;
color:#ff6b6b;
}
.cake-meta{
font-size:12px;
color:#666;
margin-top:2px;
}

.cake-meta i{
margin-right:3px;
color:#ff6b6b;
}
.price-row{
display:flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
}

.cake-kg{
font-size:11px;
background:#f2f2f2;
padding:2px 6px;
border-radius:10px;
color:#555;
display:flex;
align-items:center;
gap:3px;
}

.rating-row{
display:flex;
justify-content:space-between;
align-items:center;
}

.cake-weight,
.cake-shape{
font-size:12px;
margin-left:5px;
color:#666;
}

.cake-shape{
font-size:11px;
background:#f2f2f2;
padding:2px 6px;
border-radius:10px;
color:#555;
display:flex;
align-items:center;
gap:3px;
}
.product-title{
font-size:15px;
font-weight:600;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
@media(max-width:576px){

.rating-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:6px;
}

.rating-badge{
font-size:11px;
padding:2px 5px;
}

.review-count{
font-size:11px;
}

.cake-weight{
display:flex;
align-items:center;
gap:6px;
font-size:12px;
}

.cake-shape{
background:#f2f2f2;
padding:2px 6px;
border-radius:10px;
font-size:11px;
}

}

.cake-kg i,
.cake-shape i{
font-size:10px;
color:#ff6b6b;
}
.mobile-product-img{
position:relative;
}
#mobileSearchBox input {
  border: 1px solid #ddd;
}
.navbar-brand {
    font-size: 1.3rem;
    letter-spacing: 1px
}
.navbar input {
  height: 40px;
  border: 1px solid #eee;
  box-shadow: none;
}
.top-bar {
  font-size: 13px;
}

.navbar input:focus {
 
   box-shadow: none;
  border-color: #ff4d4d;
}

.navbar a:hover {
  color: #ff4d4d !important;
  transition: 0.3s;
}

footer {
    font-size: 0.9rem;
}
.top-header {
  background: #fff;
}

.category-nav span {
  cursor: pointer;
}

.category-img {
  transition: 0.3s ease;
}

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


/*  Top Header */
.search-box input{
  border-radius:25px;
  padding-left:20px;
}
.search-history-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px;
border-bottom:1px solid #eee;
cursor:pointer;
font-size:15px;
}

.search-history-item:hover{
background:#f7f7f7;
}

.history-arrow{
font-size:14px;
color:#666;
cursor:pointer;
}
.suggestions-box{
background:#fff;
border:1px solid #eee;
border-radius:6px;
margin-top:5px;
max-height:250px;
overflow-y:auto;
}

.suggestion-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px;
cursor:pointer;
border-bottom:1px solid #eee;
}

.suggestion-item:hover{
background:#f5f5f5;
}

.suggestion-arrow{
font-size:14px;
color:#666;
cursor:pointer;
}
/*  Category Nav */
.category-nav{
  overflow-x:auto;
  white-space:nowrap;
}

/*  Circular Category Row (Always One Row) */
.category-row{
  display:flex;
  justify-content:space-between;
  flex-wrap:nowrap;
  overflow-x:auto;
  gap:20px;
}

.category-item{
  text-align:center;
  flex:0 0 auto;
}

.category-img{
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:50%;
}

.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 9999;
  display: none;
  padding: 30px;
}

.search-container {
  max-width: 600px;
  margin: auto;
}

.search-history-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.search-history-item:hover {
  background: #f5f5f5;
}


.category-track{
display:flex;
gap:25px;
width:max-content;
animation:scroll 20s linear infinite;
}

.category-item{
min-width:120px;
text-align:center;
}

.category-img{
width:100px;
height:100px;
border-radius:50%;
object-fit:cover;
}

/* infinite animation */

@keyframes scroll{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}

/* pause on hover */

.category-slider:hover .category-track{
animation-play-state:paused;
}
.category-slider{
overflow-x:auto;
scrollbar-width:none;
 scroll-behavior: smooth;
width:100%;
}

.category-slider::-webkit-scrollbar{
display:none;
}

/*  Responsive Fix */
@media(max-width:768px){

  .top-header .container{
    flex-direction:column;
    gap:10px;
  }

  .search-box{
    width:100% !important;
  }

  .category-img{
    width:80px;
    height:80px;
  }

  .banner-box{
    height:200px;
  }

  .banner-box h2{
    font-size:18px;
  }
}

/* ===== HERO ===== */
.hero-section {
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-top: 70px;
}

.hero-animate {
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  animation: heroEnter 1s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes heroEnter {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-img {
  width: 100%;
  height: auto;
  max-height: 90vh;
  object-fit: cover;
  display: block;
  cursor: pointer;
  transition: transform 0.5s ease;
}

/*  Red Arrows */
.custom-arrow {
  filter: invert(19%) sepia(96%) saturate(7490%)
          hue-rotate(356deg) brightness(98%) contrast(115%);
}

/*  Dots Color */
.carousel-indicators [data-bs-target] {
  background-color:red;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.carousel-indicators .active {
  background-color: red;
}

.carousel-item{
  padding: 10px 5px;
}
/* PRODUCT CARD */

.mobile-product-card{
background:#fff;
border-radius:10px;
overflow:hidden;
transition:0.3s;
height:100%;
}

.mobile-product-card:hover{
transform:translateY(-4px);
box-shadow:0 6px 16px rgba(0,0,0,0.08);
}


/* IMAGE CONTAINER */
.mobile-product-img{
position:relative;
width:100%;
aspect-ratio:1/1;
overflow:hidden;
background:#f8f8f8;
}

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


/* BEST SELLER TAG */
.best-seller{
position:absolute;
top:10px;
left:10px;
background:#28a745;
color:#fff;
font-size:12px;
padding:3px 8px;
border-radius:5px;
}


/* WISHLIST HEART */
.wishlist{
position:absolute;
bottom:10px;
right:10px;
background:#fff;
width:30px;
height:30px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 2px 6px rgba(0,0,0,0.15);
cursor:pointer;
}
.cart-icon-btn{
border:none;
background:#fff;
width:36px;
height:36px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 2px 6px rgba(0,0,0,0.15);
cursor:pointer;
}

.cart-icon{
color:#333;
font-size:16px;
}

.cart-active{
background:#e11d48;
}

.cart-active .cart-icon{
color:#fff;
}



/* PRICE */
.price-row{
display:flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
}

.main-price{
font-weight:700;
font-size:15px;
}

.old-price{
text-decoration:line-through;
color:#777;
font-size:13px;
}

.discount{
background:#e6f7ec;
color:#28a745;
font-size:12px;
padding:2px 6px;
border-radius:4px;
}


/* DELIVERY */
.delivery{
font-size:12px;
color:#666;
margin-top:4px;
}

 .rating-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:6px;
flex-wrap:nowrap; 
}

.rating-badge{
background:#28a745;
color:#fff;
font-size:11px;
padding:2px 5px;
border-radius:4px;
}

.review-count{
font-size:12px;
color:#666;
white-space:nowrap;
}
#userStatusBadge{
position:absolute;
bottom:-3px;
right:-3px;
width:10px;
height:10px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:6px;
color:white;
border:2px solid white;
}

.user-dropdown{
display:none;
position:absolute;
right:15px;
top:60px;
background:white;
border-radius:8px;
box-shadow:0 4px 12px rgba(0,0,0,0.15);
overflow:hidden;
font-size:14px;
z-index:1000;
}

.user-dropdown div{
padding:10px 18px;
cursor:pointer;
}

.user-dropdown div:hover{
background:#f3f4f6;
}

/* //// details page  */
.product-image-wrapper{
width:100%;
height:420px;
overflow:hidden;
border-radius:12px;
box-shadow:0 4px 15px rgba(0,0,0,0.1);
}
.product-main-image{
width:100%;
height:100%;
object-fit:cover;
border-radius:10px;
}
.weight-scroll{
display:flex;
overflow-x:auto;
gap:10px;
padding-bottom:5px;
scrollbar-width:none;
}

.weight-scroll::-webkit-scrollbar{
display:none;
}

.weight-box{
flex:0 0 auto;
cursor:pointer;
}

.weight-box input{
display:none;
}

.weight-box span{
display:inline-block;
padding:6px 16px;
border:1px solid #ccc;
border-radius:20px;
font-size:14px;
white-space:nowrap;
background:#fff;
transition:0.2s;
}

.weight-box input:checked + span{
background:#dc3545;
color:#fff;
border-color:#dc3545;
}

/* FOOTER */
.bakery-footer{

background:#fff5f5;
padding:50px 0 20px;

border-top:3px solid #ff4d4d;

}

.footer-logo{
font-weight:700;
color:#e63946;
}

.footer-desc{
font-size:14px;
color:#555;
}

.footer-title{
font-weight:600;
margin-bottom:10px;
}

.footer-links{
list-style:none;
padding:0;
}

.footer-links li{
margin-bottom:6px;
}

.footer-links a{
text-decoration:none;
color:#444;
font-size:14px;
transition:0.3s;
}

.footer-links a:hover{
color:#ff4d4d;
padding-left:4px;
}

.footer-bottom{
font-size:13px;
color:black;
margin-top:10px;
}

/* mobile */

@media(max-width:768px){

.bakery-footer{
text-align:center;
}

}
.whatsapp-float {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 999;
  text-decoration: none;

  background: #25D366;
  color: white;

  /*  Controlled responsive (not too big) */
  width: clamp(40px, 4vw, 50px);
  height: clamp(40px, 4vw, 50px);

  font-size: clamp(22px, 2.8vw, 26px);

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

  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);

  transition: all 0.3s ease;
}


@media (max-width: 576px) {
  .whatsapp-float {
    bottom: 15px;
    right: 15px;
  }
}
.whatsapp-float {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(37,211,102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102, 0); }
}

.whatsapp-float:hover {
  transform: scale(1.1);
  background: #1ebe5d;
}
.active-type {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
}
.laava-animate {
  background: linear-gradient(90deg, #ff0000, #ff7b00, #ff0000);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: laavaGradient 3s linear infinite;
}

@keyframes laavaGradient {
  0% { background-position: 0%; }
  100% { background-position: 200%; }
}
.cake-weight,
.cake-shape {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  font-size: 12px;
}


/* PROMO */
.promo-slider{
width:100%;
margin-top:15px;
margin-bottom:35px;
}

.promo-slide{
padding:10px;
box-sizing:border-box;
}

.slick-list{
overflow:hidden;
}

.slick-track{
display:flex !important;
align-items:stretch;
}

.slick-slide{
height:auto;
float:none !important;
}

.slick-slide > div{
height:100%;
}

.promo-banner{
width:100%;
display:block;
border-radius:14px;
transition:.4s;
box-shadow:0 4px 14px rgba(255,182,120,.35);
}

.promo-banner:hover{
transform:scale(1.02);
}

/* remove slick default number icons */
.slick-dots li button:before{
content:'' !important;
font-size:0 !important;
line-height:0 !important;
}

/* custom centered dots */
.slick-dots{
position:relative;
bottom:-18px;
display:flex !important;
justify-content:center;
align-items:center;
gap:8px;
padding:0;
margin:0;
list-style:none;
}

.slick-dots li{
width:10px;
height:10px;
margin:0;
}

.slick-dots li button{
width:10px;
height:10px;
padding:0;
border:none;
background:#d7a2a2;
border-radius:50%;
text-indent:-9999px; 
overflow:hidden;
}

.slick-dots li.slick-active button{
background:#971717; 
transform:scale(1.2);
transition:.3s;
}
@media(max-width:768px){
.promo-slide{
padding:8px;
}
}
.login-prompt-backdrop{
position:fixed;
inset:0;
background:rgba(0,0,0,.55);
display:none;
align-items:center;
justify-content:center;
z-index:99999;
backdrop-filter:blur(8px);
animation:fadeIn .45s ease;
}

.login-prompt-box{
width:min(92%,420px);
background:#fff;
padding:34px 28px;
border-radius:28px;
text-align:center;
box-shadow:0 20px 60px rgba(0,0,0,.25);
animation:popupZoom .55s cubic-bezier(.17,.89,.32,1.28);
}

.cake-bounce{
font-size:58px;
margin-bottom:14px;
animation:bounce 2s infinite;
}

.login-prompt-box h3{
font-weight:800;
margin-bottom:10px;
}

.login-prompt-box p{
color:#666;
line-height:1.6;
}

.login-glow-btn{
background:linear-gradient(45deg,#ff5a5f,#ff8c42);
border:none;
color:#fff;
font-weight:700;
padding:12px;
border-radius:14px;
box-shadow:0 8px 25px rgba(255,90,95,.35);
transition:.3s;
}

.login-glow-btn:hover{
transform:translateY(-3px) scale(1.02);
}

@keyframes popupZoom{
0%{transform:scale(.65);opacity:0}
100%{transform:scale(1);opacity:1}
}

@keyframes fadeIn{
from{opacity:0}
to{opacity:1}
}

@keyframes bounce{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-10px)}
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  transition: background 0.15s;
}
.suggestion-item:hover { background: #f9f9f9; }
.suggestion-img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: #f0f0f0;
  flex-shrink: 0;
}
.suggestion-info { flex: 1; min-width: 0; }
.suggestion-text {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggestion-flavour {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}