/* Google Font: Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@100;200;300;400;500;600;700;800;900&display=swap');

body{
  background:#f3f7ff;
  background-image: linear-gradient(180deg, #f3f7ff 0%, #f9fbff 40%, #eef3ff 100%);
  font-family:'Kanit', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}
.navbar-brand{font-weight:700}
.card img{object-fit:cover;height:220px}

/* Storefront header background */
.site-header{
  background-image: linear-gradient(120deg, rgba(0, 103, 172, 0.842), rgba(0,0,0,.35)), url('https://images.unsplash.com/photo-1520975922284-9e0ce8273a3b?q=80&w=1600&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  color:#fff;
}
.site-header .navbar-brand,
.site-header .nav-link{
  color:#fff;
}
.site-header .nav-link.active,
.site-header .nav-link:focus,
.site-header .nav-link:hover{
  color:#f1f1f1;
}

/* Sticky footer */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
footer { margin-top: auto; width: 100%; }

/* Public footer */
.site-footer{
  background:#2b2b2b;
}
.site-footer .container,
.site-footer, .site-footer a{ color:#e9ecef; }

/* Sidebar */
.category-sidebar .card{
  border-color:#e9ecef;
}
.category-sidebar .card-header{
  background:#f8f9fa;
  text-align:center;
}
.category-sidebar .list-group-item{
  border-color:#f0f0f0;
  text-align:center;
}
.category-sidebar .list-group-item.active{
  background:#0d6efd;
  border-color:#0d6efd;
}
/* Give some breathing room when sticky */
.sticky-lg-top{ top: 1rem; }

/* Homepage hero banner */
.hero-banner{
  background-image: linear-gradient(120deg, rgba(0, 103, 172, 0.6), rgba(0,0,0,.45)), url('https://images.unsplash.com/photo-1512436991641-6745cdb1723f?q=80&w=1600&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  color:#fff;
  border-radius: .5rem;
}
.hero-banner h1,
.hero-banner p{ color:#fff; }

/* Fix dropdown overlay over sidebar components */
.site-header .dropdown-menu{
  z-index: 2000;
  position: absolute;
  background: #fff;
  border-radius: .5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  min-width: 220px;
}
.site-header .dropdown-menu .dropdown-item,
.site-header .dropdown-menu .dropdown-header{
  text-align: center;
}
.category-sidebar{
  position: relative;
  z-index: 0;
}

/* Responsive utilities */
.w-sm-auto{ width: 100%; }
@media (min-width: 576px){ .w-sm-auto{ width: auto !important; } }
.w-xs-100{ width: 100% !important; }
.stack-sm{ display:flex; }
@media (max-width: 575.98px){ .stack-sm{ flex-direction: column !important; gap: .5rem !important; } }

/* Mobile friendly tweaks */
@media (max-width: 575.98px){
  .card img{ height: 160px; }
  .hero-banner{ border-radius: .5rem; }
  .hero-banner .display-5{ font-size: 2rem; }
  .hero-banner .btn-lg{ padding: .5rem 1rem; font-size: 1rem; }
  .site-header .btn{ padding: .375rem .5rem; font-size: .9rem; }
}

/* Floating Cart (bottom-right) */
.floating-cart{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 320px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  overflow: hidden;
  z-index: 1050;
}
.floating-cart-header{
  padding: .5rem .75rem;
  border-bottom: 1px solid #f0f0f0;
  background: #ffa907;
  cursor: pointer;
}
#floatingCartToggle{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.floating-cart-body{
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
}
.fc-item{ padding: .75rem .75rem; border-bottom: 1px solid #f5f5f5; }
.fc-thumb{ width: 48px; height: 48px; object-fit: cover; }
.fc-name{ font-weight: 600; }
.fc-subtotal{ padding: .75rem .75rem; border-top: 1px solid #f0f0f0; }

/* FAB and badge for collapsed mode */
.floating-cart-fab{
  position: absolute;
  right: 16px;
  bottom: 16px;
  border-radius: 999px;
  box-shadow: none;
  background: transparent !important;
  border: none !important;
  padding: 0;
  z-index: 1060;
}
.floating-cart-fab img{
  display: block;
  width: 24px;
  height: 24px;
  filter: none !important;
}
.floating-cart-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  background: #dc3545;
  color: #fff;
  border-radius: 999px;
  padding: 0 6px;
  font-size: 12px;
  line-height: 18px;
  min-width: 18px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

/* Collapsed state */
.floating-cart.collapsed .floating-cart-body{ display:none; }
.floating-cart.collapsed{
  width: auto;
  height: auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
/* Hide FAB and badge when expanded to prevent overlay on buttons */
.floating-cart:not(.collapsed) .floating-cart-fab{ display: none !important; }
.floating-cart:not(.collapsed) .floating-cart-badge{ display: none !important; }
/* Always hide large FAB icon (keep small icon in header only) */
.floating-cart-fab{ display: none !important; }
/* Floating cart remove button */
.fc-remove-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #dc3545;
}
.fc-remove-btn svg{ width: 18px; height: 18px; }
.fc-remove-btn img{ width: 18px; height: 18px; display:block; }
select[name="size"]{ text-align:center; text-align-last:center; }
select[name="size"] option{ text-align:center; }
/* Wallet badge sizing */
.wallet-badge{
  padding: .5rem 1rem;
  font-size: 1rem;
}
@media (max-width: 575.98px){
  .wallet-badge{
    padding: .4rem .8rem;
    font-size: .95rem;
  }
}
.circle-list{ list-style: none; padding-left: 0; text-align: center; }
.circle-list li{ display: block; }
.circle-list li::before{
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}