/* App-like feel */
:root{
  --app-bg: #f6f7fb;
  --card-radius: 16px;

  /* Bottom nav sizing */
  --bottom-nav-h: 72px;   /* slightly larger than 64 to avoid overlap */
  --bottom-nav-gap: 8px;  /* small breathing room */
}

html, body { height: 100%; }

body.app-body{
  background: var(--app-bg);
  /* Space for fixed bottom nav (kept small, but enough to prevent overlap) */
  padding-bottom: calc(var(--bottom-nav-h) + var(--bottom-nav-gap) + env(safe-area-inset-bottom));
}

.app-main{
  padding-top: 12px;
  padding-bottom: 24px;
}

.app-bottom-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--bottom-nav-h);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box; /* IMPORTANT: padding won't increase total height */
  z-index: 1030;
}

.bn-item{
  text-decoration: none;
  color: #6c757d;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size: 12px;
  position: relative;
}
.bn-item i{ font-size: 20px; }
.bn-item.active{ color: #0d6efd; font-weight: 600; }

.card.product-card{
  border: 0;
  border-radius: var(--card-radius);
  overflow:hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Product page + carousel images: show FULL image (no cropping) */
.product-img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;          /* changed from cover -> contain */
  background: #fff;
  padding: 10px;                /* small frame padding */
  box-sizing: border-box;
}

/* Home card image: nicely fitted with padding */
.product-img-wrap{
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 8px;
}
.product-img-main{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Home: extra images thumbnails */
.product-thumbs{
  display:flex;
  gap: 6px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.product-thumbs::-webkit-scrollbar{ height: 4px; }

.thumb-btn{
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 12px;
}
.product-thumb{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  object-fit: cover;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  padding: 2px;
  display:block;
}
.thumb-btn.active .product-thumb{
  border-color: rgba(13,110,253,.8);
  box-shadow: 0 0 0 2px rgba(13,110,253,.12);
}

.btn-icon{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.btn-icon .spinner-border{ width: 1rem; height: 1rem; display:none; }
.btn-icon.is-busy .spinner-border{ display:inline-block; }
.btn-icon.is-busy .bi{ display:none; }

.badge-soft{
  background: rgba(13,110,253,.10);
  color: #0d6efd;
  border: 1px solid rgba(13,110,253,.20);
}

.table-card{
  border: 0;
  border-radius: var(--card-radius);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.price-row{
  display:flex; align-items:center; justify-content:space-between;
  gap: .75rem;
  padding: .5rem .75rem;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.price-row:last-child{ border-bottom: 0; }

/* Shop rows: allow long shop names to wrap fully */
.price-row .shop-info{ min-width: 0; flex: 1 1 auto; }
.price-row .shop-name{ white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.price-row .price-val{ flex: 0 0 auto; white-space: nowrap; }

/* Shopping list totals: allow long shop names to wrap fully */
[data-totals] .shop-total-row{ gap: .75rem; }
[data-totals] .shop-total-left{ min-width: 0; flex: 1 1 auto; }
[data-totals] .shop-total-left .shop-name{ white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
[data-totals] .shop-total-right{ flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 420px){
  .price-row{ flex-direction: column; align-items: flex-start; }
  .price-row .price-val{ align-self: flex-end; }
  [data-totals] .shop-total-row{ flex-direction: column; align-items: flex-start !important; }
  [data-totals] .shop-total-right{ align-self: flex-end; }
}

.skeleton{
  background: linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,.09), rgba(0,0,0,.05));
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: 12px;
}
@keyframes shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }


/* Home: big search box */
.home-search .input-group{
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.home-search .input-group-text{
  border-radius: 18px 0 0 18px;
}
.home-search .btn{
  border-radius: 0 18px 18px 0;
}

/* Home: horizontal scroll categories */
.cat-scroll{
  display:flex;
  gap:10px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 6px;
}
.cat-scroll::-webkit-scrollbar{ height: 4px; }
.cat-chip{
  flex: 0 0 auto;
  text-decoration:none;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
  color: #212529;
  font-size: 14px;
  white-space: nowrap;
}
.cat-chip.active{
  background: rgba(13,110,253,.10);
  border-color: rgba(13,110,253,.25);
  color: #0d6efd;
  font-weight: 600;
}

/* Bottom nav: list badge */
.bn-badge{
  position:absolute;
  top: 8px;
  right: 24px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #dc3545;
  color: #fff;
  font-size: 11px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bn-item:not(.bn-list) .bn-badge{ display:none; }

/* Search input-group tune (button slightly smaller, merged look) */
.home-search .input-group{
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.home-search .input-group-text{
  border-radius: 18px 0 0 18px;
}
.home-search .btn-search{
  border-radius: 0 18px 18px 0;
  padding: .42rem .85rem;
  white-space: nowrap;
}
@media (max-width: 420px){
  .home-search .btn-search{
    padding: .42rem .65rem;
  }
}

/* Horizontal scroll categories (if not already present) */
.cat-scroll{
  display:flex;
  gap:10px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 6px;
}
.cat-scroll::-webkit-scrollbar{ height: 4px; }
.cat-chip{
  flex: 0 0 auto;
  text-decoration:none;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
  color: #212529;
  font-size: 14px;
  white-space: nowrap;
}
.cat-chip.active{
  background: rgba(13,110,253,.10);
  border-color: rgba(13,110,253,.25);
  color: #0d6efd;
  font-weight: 600;
}
/* Home: fixed/sticky top (title + search + categories) */
.home-fixed-top{
  z-index: 1025;
  background: rgba(246, 247, 251, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.home-fixed-inner{
  padding: 10px 0 10px;
}
.home-title{
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1.2;
}

/* Search input-group (icon-only submit) */
.home-search .input-group{
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  background: #fff;
}
.home-search .input-group-text{
  border-radius: 18px 0 0 18px;
  background: #fff;
}
.home-search .btn-search{
  border-radius: 0 18px 18px 0;
  padding: .40rem .75rem; /* smaller icon button */
  min-width: 52px;
  justify-content: center;
}
@media (max-width: 420px){
  .home-search .btn-search{
    padding: .40rem .60rem;
    min-width: 48px;
  }
}

/* Categories: keep on one line and comfortable under sticky top */
.cat-scroll{
  padding-bottom: 4px;
}

/* PWA Install floating button (shows only when install is available) */
.pwa-install-btn{
  position: fixed;
  right: 14px;
  bottom: calc(var(--bottom-nav-h, 64px) + 14px);
  z-index: 1100;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
  padding: .55rem .85rem;
}
@media (min-width: 768px){
  .pwa-install-btn{ display:none !important; }
}
.pwa-install-btn .spinner-border{
  width: 1rem;
  height: 1rem;
}