/* =============== GLOBAL STYLES =============== */
:root {
  --primary-color: #2563eb;
  --primary-dark: #1e40af;
  --primary-light: #3b82f6;
  --secondary-color: #10b981;
  --accent-color: #f59e0b;
  --danger-color: #ef4444;
  --header-footer-bg: #1e293b;
  --header-footer-text: #ffffff;
  --dark-bg: #1e293b;
  --light-bg: #f8fafc;
  --card-bg: #ffffff;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --border-color: #e2e8f0;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Performance optimizations */
* {
  box-sizing: border-box;
}

/* Optimize image loading */
img {
  max-width: 100%;
  height: auto;
}

/* Lazy loading styles */
img.lazy {
  opacity: 0;
  transition: opacity 0.3s;
}

img.lazy.loaded {
  opacity: 1;
}

/* Loading indicator styles */
.loading-indicator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.95);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  text-align: center;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* =============== ANIMATION KEYFRAMES =============== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

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

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

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

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(37, 99, 235, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.6), 0 0 30px rgba(37, 99, 235, 0.4);
  }
}

@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

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

* {
  box-sizing: border-box;
}

body {
  --bg: #e4e4e4;
  background-color: var(--bg);

  /* soft wash + ecommerce icon pattern */
  background-image:
    radial-gradient(80% 50% at 50% -10%, rgba(170, 164, 164, 0.75), rgba(103, 62, 62, 0) 70%),
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'>\
        <g fill='none' stroke='%23666666' stroke-width='1.3' opacity='.13' stroke-linecap='round' stroke-linejoin='round'>\
          \
          <path d='M18 22 h22 a4 4 0 0 1 4 4 v14 l-16 16 -18 -18 z'/>\
          <circle cx='36' cy='26' r='2.5'/>\
          \
          <path d='M58 58 h26 l-3 12 H61 l-7 -26 H22'/>\
          <circle cx='62' cy='74' r='3'/>\
          <circle cx='77' cy='74' r='3'/>\
        </g>\
      </svg>");
  background-size: 100% 100%, 96px 96px;
  background-attachment: fixed, scroll;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text-primary);

  /* Reset defaults first, then apply top padding for the fixed header */
  margin: 0;
  padding-top: 110px; 
  
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Find this class and update it */
.sticky-header {
  position: fixed;  /* Changed from sticky to fixed */
  top: 0;
  left: 0;          /* Anchors it to the left edge */
  width: 100%;      /* Ensures it spans the full width */
  z-index: 1060;    /* Keeps it on top of other elements */
}

.navbar {
  background-color: rgb(255 240 0 / 72%) !important;;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 0.75rem 1rem;
}

.navbar-brand,
.nav-link {
  color: black !important;
  transition: color 0.3s ease;
  font-weight: 500;
}

.navbar-text {
  color: var(--header-footer-text) !important;
  padding-right: 2px;
  font-weight: 600;
}

.nav-link:hover {
  color: rgba(129, 81, 81, 0.8) !important;
}

.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.3);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.dashboard-header {
  margin: 40px 0;
  text-align: center;
}

.card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
  margin-top: 0.3%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  background: var(--card-bg);
  cursor: pointer;
}

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

.loading {
  text-align: center;
  margin-top: 60px;
}

#error-message,
.error-message {
  color: #e74c3c;
  margin-top: 10px;
}

#auth-container {
  max-width: 500px;
  margin: 80px auto;
  background: #ffffff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

#authModal .modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 1rem);
}

#authModal .modal-content {
  margin-top: 50px;
  border-radius: 12px;
  border: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 1rem);
  margin-top: 50px;
}

.modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

#sidebar {
  width: 250px;
  position: fixed;
  top: 0;
  left: -250px;
  height: 100%;
  z-index: 1050;
  background-color: #34495e;
  color: #ecf0f1;
  transition: left 0.3s;
  padding: 30px;
  border-right: 2px solid #2c3e50;
}

#sidebar ul {
  list-style: none;
  padding: 0;
}

#sidebar ul li {
  margin: 15px 0;
}

#sidebar ul li a {
  color: #ecf0f1;
  text-decoration: none;
  font-size: 18px;
  transition: color 0.3s;
}

#sidebar ul li a:hover {
  color: #bdc3c7;
}

#profile-container,
#requests-container,
#cart-container,
#orders-container,
#address-container {
  display: none;
  margin: 20px;
}

.address-card {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  background-color: var(--card-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.address-card h5 {
  font-size: 1.25rem;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.address-card p {
  margin-bottom: 8px;
  color: var(--text-secondary);
}

.card {
  width: 100%;
}

.card.h-100 {
  display: flex;
  flex-direction: column;
}

.col-md-3 {
  padding: 8px;
}

s {
  color: #999;
}

.discount-price {
  color: #dc2626;
  font-weight: 600;
}

.discount-percent {
  color: #059669;
  margin-left: 6px;
  font-weight: 500;
}

.discount-ribbon {
  position: absolute;
  top: 15px;
  left: -10px;
  background-color: #059669;
  color: #fff;
  padding: 6px 16px;
  font-weight: 600;
  font-size: 0.85rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 2;
  border-radius: 0 4px 4px 0;
}

.dropdown-menu {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border: none;
  border-radius: 8px;
}

.card-img-top {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.auth-forms-wrapper {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 40px 20px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.auth-form-box {
  background-color: #ffffff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  width: 400px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  border-radius: 12px;
  position: relative;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.title {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.input-field {
  position: relative;
  width: 100%;
}

.input {
  margin-top: 16px;
  width: 100%;
  outline: none;
  border-radius: 8px;
  height: 48px;
  border: 2px solid var(--border-color);
  background: transparent;
  padding-left: 12px;
  z-index: 3;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.input:focus {
  border: 2px solid var(--primary-color);
}

.input-field .label {
  position: absolute;
  top: 28px;
  left: 16px;
  color: var(--text-secondary);
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 2;
  background: #fff;
  font-size: 14px;
}

.input-field .input:focus ~ .label,
.input-field .input:valid ~ .label {
  top: 8px;
  left: 8px;
  font-size: 12px;
  color: var(--primary-color);
  background-color: #ffffff;
  padding-left: 6px;
  padding-right: 6px;
}

.submit-btn {
  margin-top: 24px;
  height: 48px;
  background: var(--primary-color);
  border-radius: 8px;
  border: 0;
  outline: none;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
}

.submit-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.auth-form-box.hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.auth-toggle {
  text-align: center;
  margin-top: 16px;
  color: var(--primary-color);
  cursor: pointer;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.auth-toggle:hover {
  text-decoration: underline;
}

.search-bar .form-control {
  border: 2px solid var(--border-color);
  border-radius: 24px;
  padding: 12px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  font-size: 14px;
}

.search-bar .form-control:focus {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  border-color: var(--primary-color);
  outline: none;
}

.search-bar .input-group-text {
  background: transparent;
  border: none;
  color: var(--primary-color);
  padding-right: 16px;
}

.search-bar .input-group-text .fas {
  font-size: 1.1rem;
}

#filter-bar {
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: none;
}

#filter-bar  {
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}
.custom-select {
    display: inline-block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem 1.75rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    vertical-align: middle;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
#filter-bar .custom-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* =============== CATEGORY SECTION STYLES =============== */
.category-section {
  background: #f8fafc5f; /* Use a solid, performant background */
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 3rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
}

#categoriesheading {
  text-align: center;
  margin-bottom: 2rem;
}

.category-cards {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
  /* The "justify-content: center;" property has been removed from this rule. */
}
.category-cards::-webkit-scrollbar {
  display: none;
}

.category-card {
  position: relative;
  flex: 0 0 320px;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transition: transform .35s cubic-bezier(0.25, 0.8, 0.25, 1); /* REMOVED box-shadow from transition */
}
.category-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    75deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.25) 45%,
    rgba(255, 255, 255, 0) 60%
  );
  transform: translateX(-100%);
  transition: transform .6s ease-out;
}
.category-card:hover::after {
  transform: translateX(120%);
}

.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85);
  transition: filter .35s;
}
.category-card:hover img {
  filter: brightness(1);
}

.category-card .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0) 100%);
  color: #fff;
}
.category-card h5 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .5px;
}
.category-card p {
  margin: 4px 0 0 0;
  font-size: .85rem;
  opacity: 0.9;
}

.category-card.selected {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
}

.cat-nav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  transition: all .25s;
  z-index: 2;
  display: none;
  background: var(--card-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: none;
  color: var(--text-primary);
}

.cat-nav:hover {
  background: var(--primary-color);
  color: white;
  transform: scale(1.05);
}

@media (min-width: 768px) {
  .cat-nav {
    display: inline-flex;
  }
}

.cat-carousel-wrapper {
  pointer-events: none;
}
.cat-carousel-wrapper > .cat-nav,
.cat-carousel-wrapper > #category-cards {
  pointer-events: auto;
}

.site-footer {
  background: #222b3c;
  color: var(--header-footer-text);
  padding: 48px 0 24px;
  margin-top: 60px;
}

.footer-logo {
  max-width: 240px;
  height: auto;
  margin-bottom: 20px;
}

.site-footer h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--header-footer-text);
}

.site-footer p,
.site-footer a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-footer a:hover {
  color: var(--header-footer-text);
  text-decoration: none;
}

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

.site-footer ul li {
  margin-bottom: 10px;
}

.payment-icons i {
  color: var(--header-footer-text);
}

html,
body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
}
.site-footer {
  margin-top: auto;
}

.out-of-stock-ribbon {
  position: absolute;
  top: 15px;
  left: -10px;
  background: #dc2626;
  color: #fff;
  padding: 6px 16px;
  font-weight: 600;
  font-size: .85rem;
  z-index: 2;
  border-radius: 0 4px 4px 0;
}

#subscribe-form .input-group {
  max-width: 400px;
}

#subscribe-form .form-control {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 12px 16px;
  border-radius: 8px 0 0 8px;
}

#subscribe-form .form-control::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

#subscribe-form .form-control:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--primary-light);
  box-shadow: none;
}

#subscribe-form .btn {
  border-radius: 0 8px 8px 0;
  padding: 6px 24px;
  background: var(--primary-color);
  border-color: var(--primary-color);
}

#subscribe-form .btn:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* =============== TRADERS GRID STYLES (UPDATED) =============== */

.traders-section {
  background: var(--card-bg);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 40px 0;
}

.traders-rail-wrapper {
  /* Removed pointer-events: none hacks */
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Hide the Previous/Next arrows */
.traders-nav,
#traders-prev,
#traders-next {
  display: none !important;
}

.traders-rail {
  display: flex;
  flex-wrap: wrap;       /* This makes them drop to new rows */
  justify-content: center; /* Centers them nicely */
  gap: 1.5rem;           /* Space between cards */
  padding: 12px 8px;
  width: 100%;
  
  /* Disable horizontal scroll */
  overflow-x: visible; 
  scroll-snap-type: none;
}

/* Ensure cards maintain their size but have breathing room */
.trader-card {
  width: 120px;           /* Fixed width */
  height: 80px;
  border-radius: 12px;
  background: var(--card-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s, box-shadow .25s, outline .2s;
  cursor: pointer;
  border: 2px solid transparent;
  
  /* Prevent flex shrinking */
  flex-shrink: 0; 
}

.trader-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  border-color: var(--primary-color);
}

.trader-card.selected {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
}

.trader-logo {
  max-width: 80%;
  max-height: 70%;
  object-fit: contain;
  filter: saturate(1.05) contrast(1.05);
}

.traders-nav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  transition: all .25s;
  z-index: 1;
  display: none;
  background: var(--card-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: none;
  color: var(--text-primary);
}
.traders-nav:hover {
  background: var(--primary-color);
  color: white;
  transform: scale(1.05);
}

@media (min-width: 768px) {
  .traders-nav {
    display: inline-flex;
  }
}

.banner-hero {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  padding: 12px 0 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.banner-hero .banner-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 0;
  overflow: hidden;
  height: clamp(240px, 30vw, 450px);
  background: transparent;
}

.banner-track,
.banner-slide {
  width: 100%;
  height: 100%;
}

.banner-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.banner-slide.active {
  opacity: 1;
}

.banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.banner-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  color: var(--text-primary);
  font-size: 18px;
  transition: all 0.3s ease;
}
.banner-nav:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-50%) scale(1.05);
}
.banner-prev {
  left: 20px;
}
.banner-next {
  right: 20px;
}

.banner-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 2;
}
.banner-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}
.banner-dot.active {
  background: var(--primary-color);
  transform: scale(1.2);
}
.banner-dot:hover {
  background: rgba(255, 255, 255, 0.9);
}

/* Product Details modal helpers */
#productDetailsModal .price-strike { text-decoration: line-through; color:#999; }
#productDetailsModal .price-final { font-weight:600; }

.banner-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* Hamster loader (from Uiverse.io by Nawsome) */
.wheel-and-hamster {
  --dur: 1s;
  position: relative;
  width: 12em;
  height: 12em;
  font-size: 14px;
}
.wheel, .hamster, .hamster div, .spoke { position: absolute; }
.wheel, .spoke { border-radius: 50%; top: 0; left: 0; width: 100%; height: 100%; }
.wheel { background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%); z-index: 2; }
.hamster { animation: hamster var(--dur) ease-in-out infinite; top: 50%; left: calc(50% - 3.5em); width: 7em; height: 3.75em; transform: rotate(4deg) translate(-0.8em,1.85em); transform-origin: 50% 0; z-index: 1; }
.hamster__head { animation: hamsterHead var(--dur) ease-in-out infinite; background: hsl(30,90%,55%); border-radius: 70% 30% 0 100% / 40% 25% 25% 60%; box-shadow: 0 -0.25em 0 hsl(30,90%,80%) inset, 0.75em -1.55em 0 hsl(30,90%,90%) inset; top: 0; left: -2em; width: 2.75em; height: 2.5em; transform-origin: 100% 50%; }
.hamster__ear { animation: hamsterEar var(--dur) ease-in-out infinite; background: hsl(0,90%,85%); border-radius: 50%; box-shadow: -0.25em 0 hsl(30,90%,55%) inset; top: -0.25em; right: -0.25em; width: 0.75em; height: 0.75em; transform-origin: 50% 75%; }
.hamster__eye { animation: hamsterEye var(--dur) linear infinite; background-color: hsl(0,0%,0%); border-radius: 50%; top: 0.375em; left: 1.25em; width: 0.5em; height: 0.5em; }
.hamster__nose { background: hsl(0,90%,75%); border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%; top: 0.75em; left: 0; width: 0.2em; height: 0.25em; }
.hamster__body { animation: hamsterBody var(--dur) ease-in-out infinite; background: hsl(30,90%,90%); border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%; box-shadow: 0.1em 0.75em 0 hsl(30,90%,55%) inset, 0.15em -0.5em 0 hsl(30,90%,80%) inset; top: 0.25em; left: 2em; width: 4.5em; height: 3em; transform-origin: 17% 50%; transform-style: preserve-3d; }
.hamster__limb--fr, .hamster__limb--fl { clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%); top: 2em; left: 0.5em; width: 1em; height: 1.5em; transform-origin: 50% 0; }
.hamster__limb--fr { animation: hamsterFRLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%); transform: rotate(15deg) translateZ(-1px); }
.hamster__limb--fl { animation: hamsterFLLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%); transform: rotate(15deg); }
.hamster__limb--br, .hamster__limb--bl { border-radius: 0.75em 0.75em 0 0; clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%); top: 1em; left: 2.8em; width: 1.5em; height: 2.5em; transform-origin: 50% 30%; }
.hamster__limb--br { animation: hamsterBRLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%); transform: rotate(-25deg) translateZ(-1px); }
.hamster__limb--bl { animation: hamsterBLLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%); transform: rotate(-25deg); }
.hamster__tail { animation: hamsterTail var(--dur) linear infinite; background: hsl(0,90%,85%); border-radius: 0.25em 50% 50% 0.25em; box-shadow: 0 -0.2em 0 hsl(0,90%,75%) inset; top: 1.5em; right: -0.5em; width: 1em; height: 0.5em; transform: rotate(30deg) translateZ(-1px); transform-origin: 0.25em 0.25em; }
.spoke { animation: spoke var(--dur) linear infinite; background: radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,hsla(0,0%,60%,0) 5%), linear-gradient(hsla(0,0%,55%,0) 46.9%,hsl(0,0%,65%) 47% 52.9%,hsla(0,0%,65%,0) 53%) 50% 50% / 99% 99% no-repeat; }
/* Animations */
@keyframes hamster { from,to { transform: rotate(4deg) translate(-0.8em,1.85em);} 50% { transform: rotate(0) translate(-0.8em,1.85em);} }
@keyframes hamsterHead { from,25%,50%,75%,to{transform:rotate(0);} 12.5%,37.5%,62.5%,87.5%{transform:rotate(8deg);} }
@keyframes hamsterEye { from,90%,to{transform:scaleY(1);} 95%{transform:scaleY(0);} }
@keyframes hamsterEar { from,25%,50%,75%,to{transform:rotate(0);} 12.5%,37.5%,62.5%,87.5%{transform:rotate(12deg);} }
@keyframes hamsterBody { from,25%,50%,75%,to{transform:rotate(0);} 12.5%,37.5%,62.5%,87.5%{transform:rotate(-2deg);} }
@keyframes hamsterFRLimb { from,25%,50%,75%,to{transform:rotate(50deg) translateZ(-1px);} 12.5%,37.5%,62.5%,87.5%{transform:rotate(-30deg) translateZ(-1px);} }
@keyframes hamsterFLLimb { from,25%,50%,75%,to{transform:rotate(-30deg);} 12.5%,37.5%,62.5%,87.5%{transform:rotate(50deg);} }
@keyframes hamsterBRLimb { from,25%,50%,75%,to{transform:rotate(-60deg) translateZ(-1px);} 12.5%,37.5%,62.5%,87.5%{transform:rotate(20deg) translateZ(-1px);} }
@keyframes hamsterBLLimb { from,25%,50%,75%,to{transform:rotate(20deg);} 12.5%,37.5%,62.5%,87.5%{transform:rotate(-60deg);} }
@keyframes hamsterTail { from,25%,50%,75%,to{transform:rotate(30deg) translateZ(-1px);} 12.5%,37.5%,62.5%,87.5%{transform:rotate(10deg) translateZ(-1px);} }
@keyframes spoke { from { transform: rotate(0); } to { transform: rotate(-1turn); } }

/* Center the loader neatly inside your existing .loading blocks */
.loading { text-align: center; }
.loading .wheel-and-hamster { margin: 12px auto 8px; transform: scale(.9); }
.loading p { margin-top: 4px; }


/* Custom Search Box (from Uiverse.io) */
.input-container {
  width: 100%;
  position: relative;
  max-width: 300px;
}
.icon {
  position: absolute;
  right: 10px;
  top: calc(50% + 5px);
  transform: translateY(calc(-50% - 5px));
}
.input {
  width: 100%;
  height: 40px;
  padding: 10px;
  transition: .2s linear;
  border: 2.5px solid black;
  font-size: 14px;
  
  letter-spacing: 2px;
  background-color: #f7f7f7;
}
.input:focus {
  outline: none;
  border: 0.5px solid black;
  box-shadow: -5px -5px 0px black;
}
.input-container:hover > .icon {
  animation: anim 1s linear infinite;
}
@keyframes anim {
  0%, 100% { transform: translateY(calc(-50% - 5px)) scale(1); }
  50%      { transform: translateY(calc(-50% - 5px)) scale(1.1); }
}
.badge-rejected {
  background-color: #dc3545;
  color: #fff;
  padding: 4px 8px;
  display: inline-block;
  margin-bottom: 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.9rem;
}


/* footer layout polish */
.site-footer .row {
  align-items: flex-start;
}

/* make the stats row horizontal with spacing on desktop */
.footer-stats .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;   /* left-align like your 2nd image */
  gap: 32px;                     /* space between the three items */
}

/* cleaner, flatter stat cards */
.footer-stat-card {
  background: transparent;
  box-shadow: none;
  text-align: left;              /* numbers/labels align like screenshot 2 */
  min-width: 120px;              /* prevents collapsing at large widths */
}

.footer-stat-number {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--header-footer-text);
}

.footer-stat-label {
  color: rgba(255,255,255,0.8);
  font-size: 0.9rem;
}

/* keep things centered on phones */
@media (max-width: 575.98px) {
  .footer-stats .row {
    justify-content: center;
    gap: 16px;
  }
}

/* Container for the image */
.footer-bottom-image {
    width: 100%;
    background: var(--header-footer-bg); 
    display: flex;
    justify-content: center;
    padding-bottom: 0;
    margin-top: -1px;       
    position: relative;
    z-index: 1000;
}

/* The Image itself */
.footer-bottom-image img {
    width: 100%;             
    
    /* --- HEIGHT CONTROL --- */
    height: 450px;           
    
    /* --- PREVENT DISTORTION --- */
    object-fit: cover;       
    
    display: block;          

    /* --- REMOVE HOVER/INTERACTION EFFECTS --- */
    pointer-events: none;    /* Prevents clicking/hovering */
    user-select: none;       /* Prevents highlighting */
}

/* Mobile Adjustment: Make it shorter on phones if needed */
@media (max-width: 768px) {
    .footer-bottom-image img {
        height: 150px;       /* Smaller height for mobile screens */
    }
}

/* --- SLIDING BANNER FIXES --- */

/* Frame holds the viewport */
.banner-frame{
  position: relative;
  overflow: hidden;
  height: 260px;            /* tweak as needed */
  border-radius: 12px;
}

/* Track scrolls horizontally */
#banner-track{
  display: flex;
  height: 100%;
  transform: translateX(0);
  transition: transform 600ms ease;
}

/* Each slide participates in flex flow (NOT absolute!) */
.banner-slide{
  position: static !important;   /* override old fade CSS */
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  opacity: 1 !important;         /* kill fade opacity toggles */
  transition: none !important;
}

/* Media fill */
.banner-slide img,
.banner-slide video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Paste this rule at the end of your styles.css file */

.local-ribbon {
  position: absolute;
  top: 15px;
  right: -10px;
  background-color: #f59e0b; /* Orange accent color */
  color: #fff;
  padding: 6px 16px;
  font-weight: 600;
  font-size: 0.85rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 2;
  border-radius: 4px 0 0 4px;
}

/* Styles for new header controls */
.header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 400px;
}

#header-address-select {
  max-width: 250px;
  border: 2.5px solid black;
  background-color: #f7f7f7;
  height: 40px;
}

#header-address-select:disabled {
  background-color: #e9ecef;
  opacity: 0.7;
  cursor: not-allowed;
}

/* Custom Alert Modal Styles */
#local-alert-modal .modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* ============== Modern Header Address Select ============== */

/* Styles for the address select dropdown */
#header-address-select {
    background-color: #ffffff;
    border: 1px solid #dcdfe6; /* Softer border color */
    border-radius: 8px;        /* Rounded corners */
    height: 42px;
    font-size: 14px;
    color: #333;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;  /* Remove default system styling */
    -moz-appearance: none;
    appearance: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04); /* Subtle shadow */
    padding-left: 15px;
    padding-right: 35px; /* Make space for the arrow */
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 14px 14px;
    margin-top: 15px;
}

/* Focus state for the dropdown */
#header-address-select:focus {
    outline: none;
    border-color: #3b82f6; /* Use primary color on focus */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Style for the disabled state */
#header-address-select:disabled {
    background-color: #f5f7fa;
    color: #a8abb2;
    cursor: not-allowed;
}


/* ============== Google Translate Widget Styling ============== */

/* This targets the container holding the dropdown */
#google_element {
    padding: 8px 0; /* Align vertically with other nav items */
}

/* This is a special selector that can sometimes influence the font
  styles inside the widget. 
*/
#google_element .goog-te-gadget-simple {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: 1rem !important; /* Match nav link font size */
}

#google_element .goog-te-gadget-simple .goog-te-menu-value span {
    color: black !important; /* Match nav link color */
    font-weight: 500 !important;
    text-decoration: none !important;
}

#google_element .goog-te-gadget-simple:hover .goog-te-menu-value span {
    color: rgba(129, 81, 81, 0.8) !important; /* Match nav link hover color */
}



#google_element {
    position: fixed; /* Makes the element float relative to the browser window */
    top: 120px;      /* 100px from the top to clear the sticky header */
    right: 20px;     /* 20px from the right edge of the screen */
    z-index: 1070;   /* Ensures it stays on top of other content */
    background-color: #ffffff;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

#google_element:hover {
    transform: scale(1.02); /* Slight zoom effect on hover */
}


@media (max-width: 768px) {
    #google_element {
        display: none;
    }
}

/* =============== ANIMATION CLASSES =============== */
.animate-fadeInUp {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fadeInLeft {
  animation: fadeInLeft 0.6s ease-out forwards;
}

.animate-fadeInRight {
  animation: fadeInRight 0.6s ease-out forwards;
}

.animate-fadeIn {
  animation: fadeIn 0.6s ease-out forwards;
}

.animate-slideInDown {
  animation: slideInDown 0.6s ease-out forwards;
}

.animate-bounceIn {
  animation: bounceIn 0.8s ease-out forwards;
}

.animate-pulse {
  animation: pulse 2s infinite;
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

.animate-slideInFromTop {
  animation: slideInFromTop 0.6s ease-out forwards;
}

.animate-zoomIn {
  animation: zoomIn 0.5s ease-out forwards;
}

/* Staggered animations */
.animate-delay-1 {
  animation-delay: 0.1s;
}

.animate-delay-2 {
  animation-delay: 0.2s;
}

.animate-delay-3 {
  animation-delay: 0.3s;
}

.animate-delay-4 {
  animation-delay: 0.4s;
}

.animate-delay-5 {
  animation-delay: 0.5s;
}

/* Hover animations */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.hover-scale {
  transition: transform 0.3s ease;
}

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

.hover-glow {
  transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.4);
}

.hover-rotate {
  transition: transform 0.3s ease;
}

.hover-rotate:hover {
  transform: rotate(5deg);
}

/* Button animations */
.btn-animated {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-animated::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-animated:hover::before {
  left: 100%;
}

.btn-bounce {
  transition: transform 0.2s ease;
}

.btn-bounce:active {
  transform: scale(0.95);
}

/* Loading animations */
.loading-dots {
  display: inline-block;
}

.loading-dots::after {
  content: '';
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0%, 20% {
    content: '';
  }
  40% {
    content: '.';
  }
  60% {
    content: '..';
  }
  80%, 100% {
    content: '...';
  }
}

/* Scroll animations */
.scroll-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Page load animations */
.page-load {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
}

/* Card animations */
.card-animated {
  transition: all 0.3s ease;
  transform: translateY(0);
}

.card-animated:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* Text animations */
.text-typewriter {
  overflow: hidden;
  border-right: 2px solid;
  white-space: nowrap;
  animation: typewriter 3s steps(40, end), blink 0.75s step-end infinite;
}

/* Image animations */
.img-zoom {
  transition: transform 0.3s ease;
}

.img-zoom:hover {
  transform: scale(1.1);
}

/* Modal animations */
.modal-animated {
  animation: zoomIn 0.3s ease-out;
}

/* Navigation animations */
.nav-slide {
  animation: slideInFromTop 0.5s ease-out;
}

/* Product card animations */
.product-card {
  transition: all 0.3s ease;
  transform: translateY(0);
}

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

.product-card .product-image {
  transition: transform 0.3s ease;
}

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

/* Search animation */
.search-focus {
  animation: glow 1s ease-in-out infinite;
}

/* Cart animation */
.cart-bounce {
  animation: bounceIn 0.6s ease-out;
}

/* Success animation */
.success-checkmark {
  animation: bounceIn 0.8s ease-out;
}

/* Error animation */
.error-shake {
  animation: shake 0.5s ease-in-out;
}

/* Marquee Styling */
.marquee-container {
  background-color: #1e2b3b;
  padding: 22px 0;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 1059;
  display: flex;         /* Add this line */
  align-items: center;   /* And this line */
}
.marquee-text {
  display: inline-block;
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  will-change: transform; /* Performance optimization */

  /* Scrolling RGB Gradient Text Effect */
  background: white;
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: scroll-left 25s linear infinite, text-gradient-animation 4s linear infinite alternate;
}

@keyframes scroll-left {
  from {
    transform: translateX(100vw);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes text-gradient-animation {
  to {
    background-position: 200% center;
  }
}

/* Star Rating Styles */
.star-rating {
  font-size: 2rem;
  color: #d3d3d3; /* Light gray for unselected stars */
  cursor: pointer;
}

.star-rating i:hover,
.star-rating i.hover {
  color: #ffc107; /* Yellow on hover */
}

.star-rating i.selected {
  color: #ffc107; /* Yellow for selected stars */
}

/* Product Card Review Styles */
.product-review .fa-star {
  font-size: 0.9rem; /* Adjust star size to fit neatly */
}

.product-review .text-warning {
  color: #ffc107 !important; /* Gold color for filled stars */
}

.product-review .text-light-gray {
  color: #e0e0e0 !important; /* Light gray for empty stars */
}

.product-review .review-count {
  font-size: 0.85rem;
  color: #6c757d; /* Muted text color for the review count */
  vertical-align: middle;
}

/* Social Media Icons (Footer) */
ul {
  list-style: none;
}

.example-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.example-2 .icon-content {
  margin: 0 10px;
  position: relative;
}
.example-2 .icon-content .tooltip {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  padding: 6px 10px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  font-size: 14px;
  transition: all 0.3s ease;
}
.example-2 .icon-content:hover .tooltip {
  opacity: 1;
  visibility: visible;
  top: -50px;
}
.example-2 .icon-content a {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #4d4d4d;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover {
  box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
}
.example-2 .icon-content a svg {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
}
.example-2 .icon-content a:hover {
  color: white;
}
.example-2 .icon-content a .filled {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #000;
  transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover .filled {
  height: 100%;
}

.example-2 .icon-content a[data-social="whatsapp"] .filled,
.example-2 .icon-content a[data-social="whatsapp"] ~ .tooltip {
  background-color: #128c7e;
}

.example-2 .icon-content a[data-social="facebook"] .filled,
.example-2 .icon-content a[data-social="facebook"] ~ .tooltip {
  background-color: #3b5998;
}
.example-2 .icon-content a[data-social="instagram"] .filled,
.example-2 .icon-content a[data-social="instagram"] ~ .tooltip {
  background: linear-gradient(
    45deg,
    #405de6,
    #5b51db,
    #b33ab4,
    #c135b4,
    #e1306c,
    #fd1f1f
  );
}
.example-2 .icon-content a[data-social="youtube"] .filled,
.example-2 .icon-content a[data-social="youtube"] ~ .tooltip {
  background-color: #ff0000;
}

/* --- Category Group Headers --- */
.category-group-header {
  font-family: 'Bagel Fat One', cursive;
  font-size: 1.8rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--border-color);
  color: var(--text-primary);
}

/* Make the first header have less top margin */
#products-container .col-12:first-child .category-group-header {
  margin-top: 1rem;
}

/* =============== Product Detail Modal Review Styles =============== */

#pd-reviews-section {
  margin-top: 1.25rem;
}

#pd-reviews-container {
  max-height: 250px; /* Limit height and allow scrolling */
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: #f8f9fa; /* Light background for contrast */
}

/* Styles for each individual review item */
.review-card-item {
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
}
.review-card-item:last-child {
  border-bottom: none; /* No border on the last item */
}

/* Header for Name + Date */
.review-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}
.review-card-header strong {
  font-size: 1rem;
  color: var(--text-primary);
}
.review-card-header small {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Star rating within the review card */
.review-stars {
  margin-bottom: 0.5rem;
  font-size: 0.9rem; /* Slightly smaller stars */
}
.review-stars .fa-star.text-light-gray {
  color: #e0e0e0 !important; /* Ensure empty stars are gray */
}

/* Comment text */
.review-comment {
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 0;
  white-space: pre-wrap; /* Respect line breaks in comments */
}

/* Styling for reviews with no comment */
.review-comment.empty {
  font-style: italic;
  color: var(--text-secondary);
}

/* =============== Promo Video Popup =============== */
.promo-video-popup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 360px; /* "Small" size */
  max-width: 90vw;
  background: #000;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  z-index: 2050; /* High z-index to be on top */
  
  /* Start hidden and ready for transition */
  opacity: 0;
  transform: scale(0.9) translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none; /* Can't be clicked when hidden */
}

/* This class will be added by JS to show the popup */
.promo-video-popup.show {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto; /* Clickable when shown */
}

.promo-video-popup video {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

.promo-video-close {
  position: absolute;
  top: -10px; /* Offset for a modern look */
  right: -10px;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  z-index: 10; /* Above the video */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: background 0.2s ease, transform 0.2s ease;
}

.promo-video-close:hover {
  background: rgba(220, 53, 69, 0.9); /* Red on hover */
  transform: scale(1.1);
}

/* =============== Product Card Improvements =============== */

/* Make the bootstrap column a flex container. This ensures
   that all cards in a row will be the same height. */
.product-col {
  display: flex;
}

/* Make the card fill the column height and set a softer border.
   'overflow: hidden' is crucial for the image zoom effect. */
.product-col .card {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

/* Your script.js already adds 'd-flex flex-column'.
   This rule ensures the card body fills the available space,
   which is essential for same-height cards. */
.product-col .card .card-body {
  height: 100%;
}

/* Polish the card title with 2-line clamping */
.product-col .card .card-title {

  color: var(--text-primary);
  /* Reserve space for 2 lines to help vertical alignment */
  min-height: 40px; 
  margin-bottom: 0.5rem;
  
  /* 2-line clamp */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Add a zoom-on-hover effect for the product image */
.product-col .card .card-img-top {
  transition: transform 0.3s ease;
}

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

/* Standardize secondary text (seller, qty) */
.product-col .card .card-text {
  font-size: 1 rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem; 
}

/* Ensure 'Price:' 'Available Quantity:' labels are dark */
.product-col .card-body .card-text strong {
    color: var(--text-primary);
}

/* Make the final price more prominent */
.product-col .card-body .discount-price {
  font-size: 1.1rem;
  font-weight: 700;
}

/* Ensure review block has consistent spacing */
.product-col .card-body .product-review {
    margin-bottom: 0.75rem; /* Space between reviews and price */
    /* Reserve space to help align cards even if one has no reviews */
    min-height: 20px; 
}

/* Style the button container at the bottom of the card */
.product-col .card-body .d-flex.mt-auto {
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color); /* Separator line */
  margin-top: auto !important; /* Force to bottom */
}

/* Style the buttons to share space */
.product-col .card-body .d-flex .btn {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 0.5rem;
    flex-grow: 0.2; /* Make buttons share the space */
}

/* =============== Profile Form Styling =============== */
#profile-container {
  max-width: 700px;
  margin: 40px auto;
  background: var(--card-bg);
  padding: 2.5rem;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  animation: fadeInUp 0.5s ease-out;
}

#profile-form .form-group {
  margin-bottom: 1.5rem;
}

#profile-form .form-control[readonly] {
  background-color: #e9ecef;
  cursor: not-allowed;
}

#profile-message {
  margin-top: 1rem;
  font-size: 0.9rem;
  display: none;
}

#profile-message.success {
  color: green;
  display: block;
}

#profile-message.error {
  color: red;
  display: block;
}

/* --- Share Button Styling (Top Right) --- */
.share-btn {

  
  /* Use flex-based layout provided by .product-actions-top */
  position: static; 
  top: auto;
  right: auto;
  margin: 0; 
  
  /* Copying the essential visual styles from the like button for consistency */
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%; 
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.2s ease;
}

.share-btn .fa-share-alt {
  color: #333;
}

.share-btn:hover:not(:disabled) {
  background-color: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* --- New Marquee Styles --- */

/* Inverted background color and slightly less padding */
.marquee-container-invert {
  background-color: #f8fafc; /* Light background */
  padding: 18px 0;
  /* Adjust shadow to be on top, separating from the one above */
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08);
}

/* Override the text color for the inverted container */
.marquee-container-invert .marquee-text {
  /* Use the dark header/footer bg color for the text */
  background: var(--header-footer-bg, #1e2b3b);
  background-size: auto; /* Reset background size */
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  /* Override animation to remove the gradient effect */
  animation: scroll-left 25s linear infinite;
}

/* ADDED THIS RULE FOR THE LINKS */
.marquee-container-invert .marquee-text a {
  color: inherit; /* This makes the link inherit the 'transparent' color */
  text-decoration: underline; /* Keeps the link underlined */
}
/* END OF ADDED RULE */

/* New class to slow down any marquee text */
.marquee-text-slow {
  /* Use !important to ensure it overrides the 25s duration */
  animation-duration: 40s !important;
}

/* =============== ORDER HIGHLIGHT ANIMATION =============== */
@keyframes highlight-pulse {
  0% {
    background-color: rgba(60, 130, 246, 0.05);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }
  70% {
    background-color: rgba(60, 130, 246, 0.15);
    box-shadow: 0 0 12px 20px rgba(59, 130, 246, 0);
  }
  100% {
    background-color: rgba(60, 130, 246, 0.05);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

.card.highlight-order {
  border-color: var(--primary-color);
  animation: highlight-pulse 1.5s ease-out 2; /* Run the animation twice */
}

.success-message {
  color: #059669; /* A green color */
  margin-top: 10px;
  font-weight: 500;
  font-size: 14px;
}

/* === Shop Category Label === */
.shop-category-label {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3; /* Above the image */
  background-color: var(--accent-color, #f59e0b); /* Uses your existing accent color */
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- New Product Action Container --- */
.product-actions-top {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3; /* Above ribbons and image */
  display: flex;
  gap: 8px; /* Space between the like and share buttons */
}

/* --- Like Button Styling --- */
.like-btn {
  /* Inherits button reset styles */
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%; 
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.2s ease;
  color: green; /* Default gray for outline heart (far fa-heart) */
  position: relative; /* Needed for positioning the count */
}

.like-btn:hover:not(:disabled) {
  background-color: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  color: #0ddd67; /* Hint of red on hover */
}

/* Liked state (when user has clicked it) */
.like-btn.liked {
  color: #21ca05; /* Red for filled heart (fas fa-heart) */
  background-color: rgba(255, 240, 249, 0.9);
}

/* Like Count Badge */
.like-btn .like-count {
  position: absolute;
  top: -4px;
  right: -8px;
  font-size: 10px;
  font-weight: 700;
  color: white;
  background-color: #21ca05;
  border-radius: 50%;
  padding: 1px 4px;
  min-width: 16px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  /* The display is handled by JavaScript, but this ensures good default placement */
}

/* --- Changes in styles.css (Add or modify existing styles) --- */

/* Ensure the card is a positioning context */
.product-col .card {
  position: relative; /* This should already be there */
  overflow: hidden; /* To ensure icons don't spill out if placed too close to edge */
}

/* --- Veg/Non-Veg Icon Overlay (Bottom Right) --- */
.veg-nonveg-overlay {
  position: absolute;
  
  /* CHANGED: Use 'top' instead of 'bottom' to place it on the image */
  /* Calculation: 220px (Image Height) - 32px (Icon Height) - 8px (Padding) = 180px */
  top: 180px; 
  right: 8px; 
  bottom: auto; /* Ensures the old 'bottom' value is ignored */

  z-index: 10;
  width: 32px;
  height: 32px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  display: flex; 
  justify-content: center;
  align-items: center;
  overflow: hidden; 
}

.veg-nonveg-overlay img {
  width: 80%;   /* Make the icon fit inside the circle */
  height: auto;  
  display: block;
}

/* =========================================
   CUSTOMER REVIEWS – FINAL CLEAN VERSION
   ========================================= */

.customer-reviews-section {
  display: block;
  background-color: #f8fafc81;
  padding: 40px 20px;
  border-top: 1px solid #e2e8f0;
}

/* WRAPPER */
.reviews-marquee-container {
  width: 100%;
  overflow-x: hidden !important;    /* ❌ No scrollbar */
  scrollbar-width: none !important; /* Firefox hide */
  padding-bottom: 0;
  cursor: grab;
}

/* Hide scrollbar (Chrome/Safari/Edge) */
.reviews-marquee-container::-webkit-scrollbar {
  display: none !important;
}

/* TRACK */
.reviews-track {
  display: flex;
  gap: 24px;
  width: max-content;
  padding: 10px 0;
  animation: autoScrollReviews 50s linear infinite;   /* Auto-scroll runs here */
}

/* Pause animation when dragging */
.reviews-marquee-container:active .reviews-track {
  animation-play-state: paused;
  cursor: grabbing;
}

/* REVIEW CARD (Matches your data structure) */
.review-card-home {
  width: 320px;
  min-width: 320px;
  flex-shrink: 0;

  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Card Header */
.review-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.review-user-name {
  font-weight: bold;
  font-size: 1rem;
  color: #333;
}

/* Review Text */
.review-text {
  font-size: 0.9rem;
  color: #555;
  font-style: italic;
  margin-bottom: 15px;
  white-space: normal;
}

/* Product row */
.review-product-snippet {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.review-prod-thumb {
  width: 35px;
  height: 35px;
  border-radius: 4px;
  object-fit: cover;
}

.review-prod-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #444;
}

/* Auto-scroll keyframes */
@keyframes autoScrollReviews {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%); /* Half width because we duplicate content */
  }
}

 .trust-badges {
      padding: 60px 20px;
      background-color: #ffffff;
    }

    .trust-badges-container {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 30px;
    }

    .badge-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
    }

    .badge-icon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background-color: rgba(58, 124, 82, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      transition: all 0.3s ease;
    }

    .badge-icon svg {
      width: 40px;
      height: 40px;
      stroke: #3a7c52;
      fill: none;
      stroke-width: 1.5;
      transition: all 0.3s ease;
    }

    .badge-item:hover .badge-icon {
      background-color: #3a7c52;
      transform: scale(1.1);
      box-shadow: 0 8px 24px -8px rgba(58, 124, 82, 0.4);
    }

    .badge-item:hover .badge-icon svg {
      stroke: #fff;
    }

    .badge-title {
      font-weight: 600;
      font-size: 15px;
      color: #2d2a24;
      margin-bottom: 4px;
    }

    .badge-description {
      font-size: 13px;
      color: #6b6560;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .trust-badges-container {
        grid-template-columns: repeat(3, 1fr);
      }
    }

@media (max-width: 640px) {
      .trust-badges-container {
        display: flex;            /* Switch to Flexbox to allow centering */
        flex-wrap: wrap;          /* Allow items to wrap to the next line */
        justify-content: center;  /* Centers items in the middle */
        gap: 10px;                /* Gap between items */
      }

      /* This forces 3 items per row (approx 30% width each) */
      .badge-item {
        flex: 0 0 31%;            
        max-width: 31%;
        /* Ensures the items flex correctly */
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      /* Keep the smaller sizing for neatness */
      .badge-icon {
        width: 50px;
        height: 50px;
      }

      .badge-icon svg {
        width: 24px;
        height: 24px;
      }

      .badge-title {
        font-size: 11px;
        line-height: 1.2;
      }

      .badge-description {
        font-size: 10px;
        line-height: 1.1;
      }
    }

    /* Add to styles.css */
.google-btn {
  margin-top: 12px;
  width: 100%;
  height: 48px;
  background-color: #ffffff;
  border: 1px solid #dadce0;
  border-radius: 8px;
  color: #3c4043;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background-color 0.2s, box-shadow 0.2s;
}

.google-btn:hover {
  background-color: #f7f8f8;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.google-btn img {
  width: 18px;
  height: 18px;
}

/* ======================================================
   FINAL HEADER STYLES (Paste at bottom of styles.css)-----rgba(255, 247, 0, 0.724) !important
   ====================================================== */

/* 1. Glassy Yellow Navbar */
.navbar {
  background: rgb(255 240 0 / 72%) !important;;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgb(255 240 0 / 72%) !important;
  padding: 10px 20px;
}

/* 2. The White "Capsule" Container */
.header-controls {
  background: #ffffff;
  padding: 0;
  border-radius: 50px;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: space-between; /* Pushes items to edges */
  width: 100%;
  max-width: 700px;
  height: 48px;
  margin: 0 auto;
  overflow: hidden;
}

.header-controls:hover {
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}

/* 3. Search Section (Left Side) */
#product-search-form {
  flex-grow: 1; /* Takes all available space */
  display: flex;
  align-items: center;
  border-right: 1px solid #eee; /* The Separator Line */
  height: 60%; /* Height of the separator */
}

.input-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

/* The Input Field */
.input-container .input {
  width: 100%;
  height: 100%; /* Full height to vertically center text */
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 40px 0 25px; /* Right padding makes room for icon */
  font-size: 15px;
  outline: none;
  color: #333;
  margin: 0; /* Remove default margins */
  line-height: normal; /* Fix vertical alignment */
}

/* 4. Restore the Search Icon */
.input-container .icon {
  display: flex !important; /* Force show */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  pointer-events: none;
}
.input-container .icon svg {
  width: 18px; 
  height: 18px;
  stroke-width: 2;
}

/* 5. Address Dropdown (Right Side) */
#header-address-select {
  flex-shrink: 0; /* Don't shrink */
  width: auto;
  max-width: 250px; /* Limit width */
  height: 100%;
  
  border: none !important;
  background-color: transparent !important; /* Transparent to fix "Empty Space" */
  box-shadow: none !important;
  margin: 0;
  
  font-size: 13px;
  font-weight: 600;
  color: #444;
  padding: 0 30px 0 15px; /* Right padding for arrow */
  cursor: pointer;
  outline: none;

  /* Custom Arrow */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-overflow: ellipsis;
}

/* 6. Mobile Tweaks */
@media (max-width: 576px) {
  .header-controls {
    max-width: 100%; /* Full width on phone */
  }
  .input-container .input {
    font-size: 14px;
    padding-left: 15px;
  }
  #header-address-select {
    max-width: 140px; /* Shorten address on small screens */
    font-size: 12px;
    padding-left: 10px;
  }
}

/* ======================================================
   FIX: VISIBLE REVIEW STARS (Paste at bottom of styles.css)
   ====================================================== */

/* 1. Global definition for light gray text to ensure it works everywhere */
.text-light-gray {
  color: #c0c0c0 !important; /* Made darker (Silver) so it's visible on white */
}

/* 2. Ensure FontAwesome stars have the right base settings */
.fa-star {
  transition: color 0.2s ease;
}

/* 3. Force the warning color (Yellow) to be visible */
.text-warning {
  color: #ffc107 !important;
}

/* 4. Specific fix for Product Review container to ensure no override hides it */
.product-review .text-light-gray,
.review-stars .text-light-gray {
  color: #cccccc !important; /* Distinct gray for empty stars */
}
/* 

--------------- */



/* ======================================================
   FINAL HEADER STYLES (Paste at bottom of styles.css)
   ====================================================== */

/* 1. Make the Yellow Navbar "Glassy" and Premium */
.navbar {
  background: rgb(255 240 0 / 72%) !important;; /* Bright Yellow */
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgb(255 240 0 / 72%) !important;
  padding: 10px 20px;
}

/* 2. The White "Capsule" (Search Bar + Address) */
.header-controls {
  background: #ffffff;
  padding: 0; 
  border-radius: 50px; /* Fully rounded pill shape */
  border: 1px solid rgba(0,0,0,0.1); 
  box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Soft shadow */
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 700px;
  height: 45px; /* Fixed neat height */
  margin: 0 20px;
  overflow: hidden; /* Keeps everything inside the curve */
}

/* Hover effect for the capsule */
.header-controls:hover {
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}

/* 3. The Search Input Area */
.input-container {
  flex: 1; /* Takes up left side space */
  height: 100%;
  position: relative;
  border: none;
}

/* The actual typing box */
.input-container .input {
  width: 100%;
  height: 100%;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 15px 0 20px; /* Space for text */
  font-size: 15px;
  outline: none;
  color: #333;
}

/* The Search Icon */
.input-container .icon {
  display: none; /* Hide default icon position if it conflicts */
}

/* 4. The Address Dropdown (Right Side) */
#header-address-select {
  height: 100%;
  border: none !important;
  background-color: #f9f9f9 !important; /* Slightly distinct background */
  box-shadow: none !important;
  border-left: 1px solid #eee !important; /* Subtle separator line */
  border-radius: 0;
  
  font-size: 13px;
  font-weight: 600;
  color: #444;
  padding: 0 25px 0 15px;
  margin: 0;
  cursor: pointer;
  max-width: 220px;
  
  /* Custom Arrow */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  -webkit-appearance: none;
}

/* 5. Navigation Links (Cart, Login) */
.nav-link {
  font-weight: 600 !important;
  color: #333 !important;
  padding: 8px 15px !important;
  transition: all 0.2s;
}

.nav-link:hover {
  background: rgba(255,255,255,0.5);
  border-radius: 20px;
  color: #000 !important;
}


/* --- New Auth Tabbed Interface Styles --- */

/* Wrapper handles positioning */
.auth-forms-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 20px;
}

/* The main white card */
.auth-card {
  background-color: #ffffff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  width: 400px;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden; /* Ensures content stays inside rounded corners */
  position: relative;
}

/* Tab Header Container */
.auth-tabs {
  display: flex;
  background-color: #f8f9fa; /* Light grey background for header */
  border-bottom: 1px solid #e2e8f0;
}

/* Individual Tabs */
.auth-tab {
  flex: 1;
  text-align: center;
  padding: 16px;
  font-weight: 600;
  font-size: 14px;
  color: #64748b; /* Inactive color */
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
}

.auth-tab:hover {
  background-color: #f1f5f9;
  color: #333;
}

/* Active Tab Styling (Red underline) */
.auth-tab.active {
  color: #1e293b; /* Dark text */
  border-bottom: 3px solid #1e293b; /* Red line */
  background-color: #ffffff;
}

/* Content Area for Forms */
.auth-form-content {
  padding: 30px;
  animation: fadeIn 0.4s ease-out;
}

.auth-form-content.hidden {
  display: none;
}

/* Small link style for Forgot Password */
.auth-link-sm {
  font-size: 13px;
  color: var(--primary-color);
  cursor: pointer;
  text-decoration: none;
}
.auth-link-sm:hover {
  text-decoration: underline;
}

/* Adjustments to input fields to fit new padding */
.auth-form-content .input-field {
  margin-bottom: 15px;
}

/* Clean up old styles override */
.auth-form-box {
  display: none !important; /* Force hide old class usage if any remains */
}


/* --- Modern Auth Modal Styles --- */
.auth-tabs-header {
  display: flex;
  background: #fff;
  border-bottom: 1px solid #eee;
  padding-top: 10px;
}

.auth-tab {
  flex: 1;
  text-align: center;
  padding: 15px 0;
  font-size: 14px;
  font-weight: 700;
  color: #888;
  cursor: pointer;
  letter-spacing: 1px;
  position: relative;
  transition: all 0.3s ease;
}

.auth-tab:hover {
  background-color: #f9f9f9;
  color: #555;
}

/* The Active Red Line */
.auth-tab.active {
  color: #000;
}
.auth-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #1e293b; 
}

/* Modern Inputs (Thick borders + rounded) */
.modern-input {
  border: 2px solid #333 !important;
  border-radius: 8px !important;
  padding: 12px 15px !important;
  height: auto !important;
  font-size: 15px;
  font-weight: 500;
  background-color: #fcfcfc;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.modern-input:focus {
  border-color: #2563eb !important; /* Blue focus */
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
  background-color: #fff;
}

/* Primary Button (Blue) */
.btn-modern-primary {
  background-color: #1a73e8; /* Google Blue */
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 6px rgba(26, 115, 232, 0.2);
  transition: transform 0.2s;
}
.btn-modern-primary:hover {
  background-color: #1557b0;
  transform: translateY(-2px);
  color: #fff;
}

/* Google Button (White) */
.btn-modern-google {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  color: #444;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.2s;
}
.btn-modern-google:hover {
  background-color: #f7f7f7;
  border-color: #ccc;
}
.btn-modern-google img {
  width: 18px;
  height: 18px;
}

.forgot-link-text {
  font-size: 0.9rem;
  color: #1a73e8;
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
}
.forgot-link-text:hover {
  text-decoration: underline;
}

/* Hide helper class */
.hidden-form {
  display: none;
}


/* =============== MODAL NAVIGATION STYLE =============== */

/* Eye-catching Back/Home Button */
.modal-back-btn {
  display: inline-flex;
  align-items: center;
  background-color: #f1f5f9; /* Soft gray-blue */
  color: #334155;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 50px; /* Pill shape */
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid #cbd5e1;
  margin-right: 12px; /* Space between button and title */
  flex-shrink: 0;
}

.modal-back-btn:hover {
  background-color: #2563eb; /* Primary Blue on hover */
  color: #ffffff;
  border-color: #2563eb;
  transform: translateX(-3px); /* Slide left animation */
  box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
  text-decoration: none;
}

.modal-back-btn i {
  margin-right: 6px;
  font-size: 0.8rem;
}

/* Fix Flexbox layout for Modal Header to align items correctly */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Align start to put back button first */
  padding: 1rem 1.2rem;
}

/* Push the Close (X) button to the far right */
.modal-header .close {
  margin-left: auto;
  padding: 0; /* Remove default bootstrap padding for better alignment */
  margin-top: 0;
}

/* Ensure title flows nicely */
.modal-title {
  line-height: 1.2;
  font-size: 1.15rem;
  margin: 0;
}

/* =============== SECTION HEADER & NAVIGATION =============== */

/* Flex container to align Back button and Title */
.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e2e8f0;
  margin-top: 20px;
}

/* Eye-catching Back/Home Button for Pages */
.section-back-btn {
  display: inline-flex;
  align-items: center;
  background-color: #f1f5f9; /* Soft gray-blue */
  color: #334155;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 50px; /* Pill shape */
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid #cbd5e1;
  margin-right: 20px; /* Space between button and title */
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.section-back-btn:hover {
  background-color: #2563eb; /* Primary Blue */
  color: #ffffff;
  border-color: #2563eb;
  transform: translateX(-4px); /* Slide left animation */
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}

.section-back-btn i {
  margin-right: 8px;
  font-size: 0.9rem;
}

/* Adjust headings inside section headers to remove default margins */
.section-header h2 {
  margin-bottom: 0;
  line-height: 1;
}

/* =========================================
   CUSTOM GREEN SCROLLBAR STYLES
   ========================================= */

/* 1. For Webkit Browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 4px;               /* Width of the vertical scrollbar */
  height: 12px;              /* Height of the horizontal scrollbar */
}

::-webkit-scrollbar-track {
  background: #f1f1f1;       /* Color of the tracking area (background) */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #28a745; /* GREEN color for the scroll thumb */
  border-radius: 10px;       /* Rounded corners for the thumb */
  border: 3px solid #f1f1f1; /* Creates a nice padding effect around the thumb */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #218838; /* Darker green when hovering */
}

/* 2. For Firefox (Standard Property) */
html {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: #28a745 #f1f1f1; /* thumb color | track color */
}