/* Niwa AI — Products (card rail, pricing, suggestions) */

/* Proizvodi — Niwa card rail */
#za-flyout .niwa-products,
.za-shortcode .niwa-products {
  --card-w: 238px;
  --gap: 12px;
  --radius: 14px;
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 8px;
  scrollbar-width: none;
  -ms-overflow-style: none
}
#za-flyout .niwa-products::-webkit-scrollbar,
.za-shortcode .niwa-products::-webkit-scrollbar { display: none }
#za-flyout .niwa-products,
.za-shortcode .niwa-products { cursor: grab }
#za-flyout .niwa-products.dragging,
.za-shortcode .niwa-products.dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none }

#za-flyout .niwa-card,
.za-shortcode .niwa-card {
  flex: 0 0 var(--card-w);
  scroll-snap-align: start;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s
}
#za-flyout .niwa-card:hover,
.za-shortcode .niwa-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
  transform: translateY(-2px)
}

/* — Image — */
#za-flyout .niwa-card-img,
.za-shortcode .niwa-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #fff;
  overflow: hidden;
  cursor: pointer
}
#za-flyout .niwa-card-img img,
.za-shortcode .niwa-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

/* Bottom hazy buffer — short, soft fog into image */
#za-flyout .niwa-card-img::after,
.za-shortcode .niwa-card-img::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30%;
  background: linear-gradient(
    to top,
    #fff 0px,
    #fff 14px,
    rgba(255,255,255,0.15) 40%,
    rgba(255,255,255,0.06) 65%,
    rgba(255,255,255,0.02) 85%,
    transparent 100%
  );
  z-index: 2;
  pointer-events: none
}

/* Badge — absolute on image top-left, no buffer */
#za-flyout .niwa-badge,
.za-shortcode .niwa-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: inline-block;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  letter-spacing: .02em
}

/* Content — title + description + CTA below the image */
#za-flyout .niwa-card-content,
.za-shortcode .niwa-card-content {
  padding: 14px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1
}
#za-flyout .niwa-card-title,
.za-shortcode .niwa-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}
#za-flyout .niwa-card-desc,
.za-shortcode .niwa-card-desc {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0
}

/* CTA row — price left + button right */
#za-flyout .niwa-card-cta,
.za-shortcode .niwa-card-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px
}
#za-flyout .niwa-card-price,
.za-shortcode .niwa-card-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0
}
#za-flyout .niwa-price-current,
.za-shortcode .niwa-price-current {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap
}
#za-flyout .niwa-price-old,
.za-shortcode .niwa-price-old {
  font-size: 12px;
  color: #888;
  text-decoration: line-through;
  white-space: nowrap
}

/* Footer — rating + delivery info */
#za-flyout .niwa-card-footer,
.za-shortcode .niwa-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 16px;
  margin-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: #fafafa;
  border-radius: 0 0 var(--radius) var(--radius);
  min-width: 0
}

/* Delivery info */
#za-flyout .niwa-card-delivery,
.za-shortcode .niwa-card-delivery {
  font-size: 11px;
  color: #6b7280;
  white-space: nowrap
}
#za-flyout .niwa-card-delivery strong,
.za-shortcode .niwa-card-delivery strong {
  color: #1a1a1a;
  font-weight: 600
}

/* Star rating */
#za-flyout .niwa-card-rating,
.za-shortcode .niwa-card-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: #9ca3af;
  line-height: 1;
  min-width: 0
}
#za-flyout .niwa-card-rating .niwa-stars,
.za-shortcode .niwa-card-rating .niwa-stars {
  display: inline-flex;
  gap: 0;
  color: #facc15;
  font-size: 13px;
  letter-spacing: -1px
}
#za-flyout .niwa-card-rating .niwa-rating-count,
.za-shortcode .niwa-card-rating .niwa-rating-count {
  font-size: 10px;
  color: #9ca3af
}

/* Pill button */
#za-flyout .niwa-btn-pill,
.za-shortcode .niwa-btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: #1a1a1a;
  color: #fff;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  transition: background .15s, transform .1s;
  flex-shrink: 0
}
#za-flyout .niwa-btn-pill:hover,
.za-shortcode .niwa-btn-pill:hover { background: #333 }
#za-flyout .niwa-btn-pill:active,
.za-shortcode .niwa-btn-pill:active { transform: scale(.97) }
#za-flyout .niwa-btn-pill:disabled,
.za-shortcode .niwa-btn-pill:disabled { background: #999; cursor: wait }

/* Sugestije — kao cipovi */
#za-flyout .za-suggests,
.za-shortcode .za-suggests {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px
}

#za-flyout .za-chip,
.za-shortcode .za-chip {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--niwa-border) !important;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255,255,255,0.75) !important
}

#za-flyout .za-chip:hover,
.za-shortcode .za-chip:hover {
  background: rgba(255,255,255,0.9) !important
}