body {
    margin: 0;
    font-family: sans-serif;
    background: #f9f5f1;
    color: #333;
  }
  
  .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #947f6c;
    padding: 2px 12px; /* কমানো padding */
    color: white;
    position: sticky;
    top: 0;
    z-index: 1000;
    min-height: auto; /* height বরং SVG ও কনটেন্ট থেকে আসবে */
    line-height: 1;
  }
  
  .left-section,
  .right-section {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .logo-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0; /* যেকোনো margin/padding বাদ */
  }
  
  .logo-center svg {
    height: 50px; /* লোগো height ঠিক রাখার জন্য */
    max-height: 50px;
    width: auto;
  }
  
  
  .icon-btn, .menu-btn {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .logo-img {
      height: 28px;
    }
    .icon-btn, .menu-btn {
      font-size: 16px;
    }
    .topbar {
      flex-wrap: wrap;
    }
  }
    




/* ✅ Responsive: মোবাইল ভিউর জন্য height আরও কমানো */
@media (max-width: 768px) {
  .topbar {
    padding: 1px 8px; /* মোবাইলে আরও কম padding */
  }

  .logo-center svg {
    height: 42px; /* মোবাইলে logo ছোট */
    max-height: 42px;
  }

  .icon-btn, .menu-btn {
    font-size: 16px;
  }

  .logo-img {
    height: 28px;
  }

  .topbar {
    flex-wrap: nowrap; /* মোবাইলে যেন এক লাইনে থাকে */
  }
}  



  .logo-center {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
  }
  
  .responsive-logo {
    width: 100%;
    max-width: 200px; /* আগের 260px থেকে কমানো হয়েছে */
    height: auto;
    overflow: hidden;
    text-align: center;
  }
  
  .responsive-logo img {
    width: 100%;
    height: auto;
    max-height: 60px; /* height অনেক কমানো হয়েছে */
    object-fit: contain;
  }
  
  /* মোবাইল রিস্পনসিভ */
  @media (max-width: 480px) {
    .responsive-logo {
      max-width: 160px;
    }
  
    .responsive-logo img {
      max-height: 50px;
    }
  }


/* Search Input Responsive */
.search-container {
  position: relative;
  display: flex;
  align-items: center;
}

#search-input {
  width: 0;
  padding: 6px;
  font-size: 14px;
  border: none;
  outline: none;
  background: transparent;
  border-bottom: 1px solid gray;
  color: black;
  position: absolute;
  top: 0;
  left: 30px;
  opacity: 0;
  transition: width 0.3s ease, opacity 0.3s ease;
  z-index: 10;
}

#search-input.show {
  width: 150px;
  opacity: 1;
  background: white;
  border-radius: 4px;
  padding-left: 8px;
}

/* Tablet view: Smaller width and more left aligned */
@media (max-width: 600px) {
  #search-input {
    left: 13px; /* বাম দিকে সরালাম */
  }

  #search-input.show {
    width: 80px; /* ট্যাবলেটে ছোট */
    font-size: 10px;
  }
}

/* Small mobile view */
@media (max-width: 400px) {
  #search-input {
    left: 5px; /* আরও বাম দিকে */
  }

  #search-input.show {
    width: 40px;
    font-size: 8px;
    padding-left: 6px;
  }
  .left-section {
    display: flex;
    align-items: center;
    gap: 0px;
  }
}



/* Search Result Responsive Grid */
#search-result {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  padding: 0 10px;
}

/* Card Design */
#search-result .card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.2s;
  cursor: pointer;
}

#search-result .card:hover {
  transform: scale(1.02);
}

#search-result .card img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 8px;
}

#search-result .card strong {
  font-size: 15px;
  display: block;
  margin-bottom: 4px;
  color: #333;
}

#search-result .card span {
  font-size: 13px;
  color: #444;
}

@media (max-width: 480px) {
  #search-result .card img {
    height: 120px;
  }

  #search-result .card {
    padding: 8px;
  }

  #search-result .card strong {
    font-size: 14px;
  }

  #search-result .card span {
    font-size: 12px;
  }
}





  .banner-section {
    width: 100%;
    height: 180px;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
    margin: 10px 0;
  }
  
  .banner-slider {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .banner-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    border-radius: 12px;
  }
  
  .banner-slide.active {
    opacity: 1;
    z-index: 1;
  }
  
  @media (max-width: 768px) {
    .banner-section {
      height: 120px;
      border-radius: 8px;
    }
  }
  
  .banner-slide.animate-in {
    animation: bannerIn 1s ease-in forwards;
  }
  
  .banner-slide.animate-out {
    animation: bannerOut 0.5s ease-out forwards;
  }
  
  @keyframes bannerIn {
    0% {
      clip-path: inset(0 50% 0 50%);
      opacity: 0;
    }
    100% {
      clip-path: inset(0 0 0 0);
      opacity: 1;
    }
  }
  
  @keyframes bannerOut {
    0% {
      clip-path: inset(0 0 0 0);
      opacity: 1;
    }
    100% {
      clip-path: inset(0 50% 0 50%);
      opacity: 0;
    }
  }
  

  
  
  
  
  .filters {
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    font-size: 14px;
    color: #777;
  }
  
  .product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 10px 5px;
  }
  
  /* Product Card */
  


.image-wrapper {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  padding: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  margin-bottom: 0;
  position: relative;
}

.image-wrapper img {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
  display: block;
}

/* Super tight product info */
.product-info {
  background: #f9f5f1;
  border-radius: 0px;
  padding: 6px 4px; /* padding একটু বাড়ানো হয়েছে */
  margin-top: -2px;  /* ইমেজের কাছাকাছি রাখা হয়েছে */
  text-align: center;
 
  width: 100%;
}

.product-info h3 {
  font-size: 13px;
  margin: 4px 0 4px; /* নামের উপর ও নিচে হালকা গ্যাপ */
  color: #222;
  line-height: 1.2;
}

.product-info p {
  font-size: 12px;
  color: #666;
  margin: 2px 0 5px; /* দাম আর নামের মাঝে হালকা গ্যাপ */
  line-height: 1.2;
}

.color-options {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 5px; /* উপরে হালকা গ্যাপ */
  margin-bottom: 4px; /* নিচেও একটু জায়গা */
}




.circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid #ccc;
}

.black { background: #000; }
.white { background: #fff; }
.beige { background: #eadcc2; }

.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: white;
  color: #444;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 12px;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.discount-price {
  color: #f85606;
  font-weight: bold;
  font-size: 13px;
}

.original-price {
  text-decoration: line-through;
  color: #999;
  font-size: 12px;
  margin-left: 6px;
}

a.product-card {
  text-decoration: none;
  color: inherit;
  display: block;
}


.countdown-timer {
  font-size: 13px;          /* ফন্ট ছোট */
  color: #d12f00;
  margin: 2px 0;            /* উপরে নিচে কম স্পেস */
  padding: 2px 0;           /* কম প্যাডিং */
  font-weight: 500;
  line-height: 1.2;
}



.footer {
  background-color: #947f6c;
  color: #ddd;
  padding: 20px 16px;
  font-size: 14px;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: start;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-brand h2 {
  margin: 0 0 4px;
  font-size: 18px;
  color: #000000;
}

.footer-brand p {
  margin: 0;
  font-size: 10px;
  color: #242222;
}

.footer-links a {
  color: #070606; /* সাদা */
  text-decoration: none;
  margin-right: 16px;
  font-size: 13px;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #f6e05e; /* হোভার করলে হালকা গোল্ডেন */
  text-decoration: underline;
}



.footer-social a {
  display: inline-block;
  color: #ccc;
  background: #333;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 50%;
  margin-right: 10px;
  font-size: 14px;
  transition: background 0.3s, color 0.3s;
}

.footer-social a:hover {
  background: #f85606;
  color: white;
}


.footer-bottom {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: #000000;
  border-top: 1px solid #101111;
  padding-top: 12px;
}

@media (max-width: 600px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .footer-links a {
    margin: 6px 8px;
  }
}




.color-option {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: inline-block;
  margin: 5px;
  cursor: pointer;
  border: 2px solid transparent;
}
.color-option.selected {
  border: 2px solid #f85606;
}

.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: red;
  color: #fff;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 4px;
}


.popular-products {
  margin: 16px 0 0px; /* আগে ছিল 40px 0 → এখন উপরে 16px, নিচে 32px */
  padding: 0 6px;       /* পাশের প্যাডিং একটু কমানো হয়েছে */
}

.popular-products h2 {
  font-size: 20px;       /* হেডিং একটু ছোট */
  margin-bottom: 10px;   /* নিচের গ্যাপ কমানো হয়েছে */
  font-weight: bold;
  color: #222;
}

.product-slider {
  display: flex;
  overflow-x: auto;
  gap: 5px;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
}

.product-slider::-webkit-scrollbar {
  height: 6px;
}
.product-slider::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.product-card {
  flex: 0 0 auto;
  width: 200px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
  transition: transform 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.image-wrapper {
  position: relative;
  height: 160px;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #fff;
}

.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: crimson;
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}

.product-info {
  padding: 10px;
}

.product-info h3 {
  margin: 0 0 5px;
  font-size: 16px;
}

.discount-price {
  color: #e91e63;
  font-weight: bold;
}

.original-price {
  color: #888;
  text-decoration: line-through;
  margin-left: 6px;
}

.color-options .circle {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #ccc;
  margin-right: 4px;
  margin-top: 5px;
}

.circle.black { background: #000; }
.circle.white { background: #fff; }
.circle.beige { background: #f5f5dc; }
.circle.brown { background: #8B4513; }
.circle.grey { background: #808080; }


.products {
  padding: 7px 4px 16px; /* উপরে কমানো হয়েছে: top 20px → 10px, side 10px → 6px */
  background-color: #f9f5f1;
  font-family: 'Segoe UI', sans-serif;
  margin-top: 0; /* margin থাকলে সরিয়ে দিন */
}

.products h2 {
  text-align: center;
  font-size: 18px; /* হেডিং আরো ছোট */
  margin: 0px 0 4px; /* উপরে 2px, নিচে 4px */
  color: #333;
}



.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px; /* কমানো হয়েছে: 20px → 12px */
}

@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px; /* মোবাইলে আরও কম gap */
  }
}

/* ✅ ট্যাবলেট: ৩টি কলাম */
@media (max-width: 991px) and (min-width: 481px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}


.product {
  background: #f9f5f1;
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.product img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  background-color: #fff;
}


.product h3 {
  font-size: 15px;
  margin: 7px;
  color: #111;
}

.product p {
  margin: 0 10px 10px;
  font-size: 16px;
  color: #e91e63;
  font-weight: bold;
}

.product .discount {
  text-decoration: line-through;
  color: #999;
  margin-right: 5px;
}

.product button {
  margin: 10px;
  padding: 10px;
  background-color: #947f6c;
  color: white;
  border: none;
  border-radius: 30px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

.product button:hover {
  background-color: #5c4c3f;
}


/* ✅ Fix for JUST FOR YOU dynamic products */
#just-for-you .product {
  padding: 0;
}



#just-for-you .product .image-wrapper {
  margin: 0;
  padding: 0;
  height: 180px;
  overflow: hidden;
}

#just-for-you .product img {
  display: block;
  margin: 0 auto;
  padding: 0;
  height: 180px;
  object-fit: contain;
  background-color: #fff;
}

/* Remove unnecessary gap between price and button */
#just-for-you .product .product-info {
  padding-bottom: 0;
  margin-bottom: 0;
}

#just-for-you .product button {
  margin-top: 0;
}



/* Sidebar Styles */
.side-menu {
  width: 250px;
  background: #f7f0f0;
  padding: 20px;
  position: fixed;
  left: -100%; /* fully hidden */
  top: 0;
  bottom: 0;
  transition: left 0.3s ease-in-out;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  overflow-y: auto;
}

.side-menu.active {
  left: 0; /* show sidebar */
}

.side-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-menu ul li {
  margin: 15px 0;
}

.side-menu ul li a,
.side-menu ul li span {
  font-size: 18px;
  color: #312525;
  text-decoration: none;
  cursor: pointer;
}

/* Dropdown styles */
.user-dropdown {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding-left: 0;
  margin-top: 0;
}

.user-dropdown.show {
  max-height: 200px;
  padding-left: 15px;
  margin-top: 10px;
}

/* Buttons */
.menu-btn {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 10000;
  position: relative;
}

.close-btn {
 
  width: 26px;
  height: 26px;
  font-size: 16px;
  line-height: 26px;
  border-radius: 50%;
  border: none;
  background-color: #f8d7da;
  color: #e00606;
  cursor: pointer;
  transition: background-color 0.3s;
}

.close-btn:hover {
  background-color: #f5c2c7;
}
.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding-left: 15px;
  margin-top: 0;
}

.submenu.show {
  max-height: 300px;
  margin-top: 10px;
}




/* Compact Tailwind for WhatsApp popup */
.fixed { position: fixed; }
.bottom-5 { bottom: 1.25rem; }
.bottom-24 { bottom: 6rem; }
.right-5 { right: 1.25rem; }
.z-50 { z-index: 50; }
.max-w-\[90vw\] { max-width: 90vw; }
.opacity-0 { opacity: 0; }
.scale-95 { transform: scale(0.95); }
.pointer-events-none { pointer-events: none; }
.transition-all { transition: all 0.3s ease; }
.duration-300 { transition-duration: 300ms; }
.transform { transform: translateZ(0); }
.bg-white { background-color: #ffffff; }

/* Smaller width */
.w-64 { width: 16rem; }         /* default fallback */
.sm\:w-56 { width: 14rem; }     /* small screen */
.xs\:w-52 { width: 13rem; }     /* extra small */

.p-3 { padding: 0.75rem; }
.rounded-xl { border-radius: 0.75rem; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); }
.text-lg { font-size: 1.125rem; }
.font-semibold { font-weight: 600; }
.mb-2 { margin-bottom: 0.5rem; }
.text-green-600 { color: #16a34a; }
.w-full { width: 100%; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.border { border-width: 1px; }
.border-gray-300 { border-color: #d1d5db; }
.rounded-md { border-radius: 0.375rem; }
.text-sm { font-size: 0.875rem; }
.focus\:outline-none:focus { outline: none; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(34,197,94,0.5); }
.focus\:ring-green-400:focus { box-shadow: 0 0 0 2px rgba(74,222,128,1); }
.bg-green-500 { background-color: #22c55e; }
.hover\:bg-green-600:hover { background-color: #16a34a; }
.text-white { color: #ffffff; }
.rounded-full { border-radius: 9999px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.hover\:scale-110:hover { transform: scale(1.10); }
.transition { transition: 0.2s all ease; }
.relative { position: relative; }
.w-14 { width: 3.5rem; }
.h-14 { height: 3.5rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.absolute { position: absolute; }
.top-1 { top: 0.25rem; }
.right-1 { right: 0.25rem; }
.bg-red-600 { background-color: #dc2626; }
.text-xs { font-size: 0.75rem; }
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }

.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
  0% { transform: scale(1); opacity: 1; }
  75%, 100% { transform: scale(2); opacity: 0; }
}

/* Responsive width overrides */
@media (max-width: 640px) {
  .sm\:w-56 {
    width: 14rem;
  }
  .xs\:w-52 {
    width: 13rem;
  }
}




footer {
  position: relative; /* এটা যোগ করুন */
  margin-top: 30px;
  border-top: 2px solid #ddd;
  padding: 10px;
  background-color: #fafafa;
  font-size: 14px;
  overflow: visible; /* যাতে পপআপ দেখাতে পারে */
}


/* Note + Coupon same row */
.addon-coupon-row {
  display: flex; /* এটা যোগ করা হয়েছে */
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0px;
  width: 100%; /* যেন পুরো available space নেয় */
}

.addon-coupon-row button {
  flex: 1;
  font-size: 10px;
  font-weight: 400;
  padding: 2px 11px; /* height ঠিক রেখে একটু চওড়া করা হলো */
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center; /* যাতে টেক্সট সেন্টারে থাকে */
  gap: 3px;
}



/* Payment buttons stacked vertically with full width */
.payment-btns-column {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.payment-btns-column button {
  width: 100%;
  padding: 12px;
  font-size: 11px;
  border-radius: 8px;
}

/* COD button specific style */
.cod-btn {
  background: #ff7c2b;
  color: white;
  border: none;
  
  align-items: center;
  gap: 8px;
  font-weight: 400;
  transition: background 0.3s ease;
}

.cod-btn:hover {
  background: #e06715;
  cursor: pointer;
}




.m-cart-addon--content {
  position: absolute; /* এখন এটা footer এর ভেতরে থাকবে */
  bottom: 40px; /* আপনি চাইলে এটা কম বা বেশি করতে পারেন */
  left: 0;
  right: 0;
  width: 100%;
  background: #f9f9f9;
  border: 1px solid #ccc;
  padding: 16px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 10;
}

.m-cart-addon--content.show {
  transform: translateY(0%);
}

.m-cart-addon--content.hide {
  transform: translateY(100%);
}



/* Optional styles */
.scd__addon-title {
  font-size: 16px;
}
.sf__btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}
.sf__btn-primary {
  background-color: #334bfa;
  color: white;
  border: none;
}
.sf__btn-plain {
  background-color: transparent;
  border: 1px solid #ccc;
  color: #333;
}







/* cash on delevery baton*/
/* -------------------------
   COD Modal Main Container
---------------------------- */
.cod-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 80px 10px 40px; /* Popup নিচে নামানো + প্যাডিং */
  box-sizing: border-box;
}

/* -------------------------
   Modal Box
---------------------------- */
.cod-modal-content {
  background: #ffffff;
  margin: auto;
  padding: 25px 20px;
  border-radius: 12px;
  width: 100%;
  max-width: 500px;
  position: relative;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
  animation: fadeIn 0.4s ease-in-out;
  box-sizing: border-box;
}

/* -------------------------
   Close Button
---------------------------- */
.cod-close-btn {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  color: #ff4444;
  transition: color 0.2s ease;
}
.cod-close-btn:hover {
  color: #c30000;
}

/* -------------------------
   Product Info Box
---------------------------- */
.cod-product-info {
  margin: 16px 0;
  padding: 15px;
  border: 1px solid #e1e1e1;
  border-radius: 10px;
  background: #f8f8f8;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cod-product-info img {
  width: 100%;
  max-width: 90px;
  border-radius: 6px;
  object-fit: cover;
}

.cod-product-info .info-text {
  flex: 1;
  font-size: 15px;
  color: #333;
}

/* -------------------------
   Form Styling
---------------------------- */
form label {
  font-weight: 600;
  display: block;
  margin-top: 12px;
  font-size: 14px;
}

form input,
form textarea {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
  box-sizing: border-box;
}

/* -------------------------
   Shipping & Total
---------------------------- */
.shipping-total {
  margin-top: 18px;
  background: #f1f1f1;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  color: #444;
}

/* -------------------------
   Submit Button
---------------------------- */
.submit-btn {
  background: #f89503;
  color: #000;
  padding: 12px;
  border: none;
  font-weight: bold;
  border-radius: 6px;
  margin-top: 20px;
  width: 100%;
  font-size: 16px;
  transition: background 0.3s ease;
}
.submit-btn:hover {
  background: #e68600;
  cursor: pointer;
}

/* -------------------------
   Fade In Animation
---------------------------- */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -------------------------
   Responsive Layout
---------------------------- */
@media (min-width: 600px) {
  .cod-product-info {
    flex-direction: row;
    align-items: center;
  }

  .cod-product-info img {
    width: 80px;
    height: 80px;
  }

  .cod-product-info .info-text {
    font-size: 16px;
    margin-left: 12px;
  }
}

@media (max-width: 599px) {
  .cod-modal-content {
    margin: 0 auto;
    width: 95%;
  }

  .cod-product-info img {
    align-self: center;
  }

  .cod-close-btn {
    top: 8px;
    right: 10px;
  }
}






.delivery-container {
  margin-top: 10px;
  font-size: 13px;
  color: #333;
}

.delivery-option {
  margin-bottom: 7px;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.delivery-option label {
  display: flex;
  align-items: center;
  font-size: 8px;
  color: #333;
  margin-bottom: 5px;
  white-space: nowrap; /* এক লাইনে রাখবে */
}

.delivery-option label input[type="radio"] {
  margin-right: 2px;
}

.delivery-option label span {
  display: inline-block;
  line-height: 1.2;
}

.sub-options {
  margin-left: 20px;
  margin-top: 5px;
  display: none;
  flex-direction: column;
}

.sub-options label {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #444;
  margin-bottom: 3px;
  white-space: nowrap;
}

.sub-options label input[type="radio"] {
  margin-right: 2px;
}





.note-section {
  margin: 20px 0;
}

.note-label {
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
  color: #333;
}

.note-section textarea {
  width: 100%;
  max-width: 100%;
  min-height: 100px;
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  resize: vertical;
  box-sizing: border-box;
  font-family: inherit;
}





.auth-popup {
  display: none; /* ডিফল্টভাবে লুকানো থাকবে */
  position: fixed;
  top: 60px;
  right: 30px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  width: 300px;
  font-family: 'Segoe UI', sans-serif;
  transition: all 0.3s ease-in-out;
}


/* Responsive Design for Mobile */
@media (max-width: 600px) {
  .auth-popup {
    width: 90%;
    right: 5%;
    top: 20px;
    border-radius: 12px;
  }
}

.auth-popup-content {
  padding: 20px;
  position: relative;
}

.auth-popup .close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 22px;
  color: #666;
  cursor: pointer;
  background-color: #eee;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  text-align: center;
  line-height: 28px;
  transition: background-color 0.2s ease;
}

.auth-popup .close:hover {
  background-color: #ccc;
  color: #000;
}

.auth-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}

.auth-button {
  background-color: #2a6ebb;
  color: #fff;
  padding: 10px 0;
  text-align: center;
  border-radius: 6px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s;
}

.auth-button:hover {
  background-color: #1e57a1;
}

.auth-button.secondary {
  background-color: #f2f2f2;
  color: #333;
}

.auth-button.secondary:hover {
  background-color: #e4e4e4;
}

.divider {
  border: none;
  height: 1px;
  background-color: #ddd;
  margin: 20px 0;
}

.account-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.account-menu li {
  margin-bottom: 12px;
}

.account-menu a {
  text-decoration: none;
  color: #333;
  font-size: 15px;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

.account-menu a:hover {
  color: #2a6ebb;
}



.discount-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  background: crimson;
  color: white;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 50px 0 50px 50px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 10;
 
}
.product {
  position: relative;
  overflow: hidden;
}











.widget-connect {
  position: fixed;
  bottom: 20px;
  right: 15px;
  z-index: 9999;
}
.widget-connect__button {
  display: block;
  width: 50px;
  height: 50px;
  margin: 10px 0;
  background-color: #703796;
  border-radius: 50%;
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s ease;
}
.widget-connect__button:hover {
  transform: scale(1.1);
}
.widget-connect__button-telephone {
  background-color: #ffB200;
  background-image: url('metalfurniturebd/phone.png');
}
.widget-connect__button-messenger {
  background-color: #0866ff;
  background-image: url('metalfurniturebd/facebook-messenger.png');
}

.widget-connect__button-livechat {
  background-image: url('metalfurniturebd/chat--v1.png');
}
.widget-connect__button-activator {
  background-color: #3bd74b;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget-connect__button-activator-icon {
  color: white;
  font-size: 32px;
  font-weight: bold;
  transition: all 0.3s ease;
}
.widget-connect.active .widget-connect__button {
  display: block;
}
.widget-connect__button {
  display: none;
}




.thumbnail-carousel-wrapper {
  position: relative;
  margin-top: 15px;
  display: flex;
  align-items: center;
  overflow: hidden;
  transform: translateX(-8px);
}

.thumbnail-carousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 5px 0;
}

.thumbnail-carousel::-webkit-scrollbar {
  display: none;
}

.thumb-nav {
  background-color: #947f6c;
  color: white;
  border: none;
  font-size: 12px;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 25px;
  margin: 0 5px;
  z-index: 2;
  flex-shrink: 0;
}

.thumb-nav:hover {
  background-color: #5c4c3f;
}

/* ✅ Thumbnail size */
.thumbnail-carousel img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
}

/* ✅ Responsive visible item count control via width */
@media (min-width: 992px) {
  .thumbnail-carousel {
    max-width: calc(80px * 3 + 30px); /* 3 items + gaps */
  }
}

@media (max-width: 991px) and (min-width: 600px) {
  .thumbnail-carousel {
    max-width: calc(80px * 5 + 40px); /* 5 items + gaps */
  }
}

@media (max-width: 599px) {
  .thumbnail-carousel {
    max-width: calc(80px * 3 + 30px); /* 3 items + gaps */
  }
}

/* ✅ মোবাইলে ছোট করে দেখাবে */
@media (max-width: 599px) {
  .color-option {
    width: 18px;
    height: 18px;
    margin: 2px;
  }
}

  /* ইনপুট বক্স যাতে কাটা না যায় তার জন্য নিচেরটা দিন */
  #chat-popup #chat-messages {
    height: 290px !important; /* আগে ছিল 300px, এখন একটু কমানো হলো */
  }

  /* ইনপুট বক্স ঠিক রাখতে অতিরিক্ত প্যাডিং */
  #chat-popup > div:last-child {
    padding-bottom: 6px !important;
  }