/* Shop-specific components. Shares tokens from core.css.
   (The search bar lives in core.css — it is shared with the admin.) */

/* Section title */
.section-title { font-size: var(--fs-lg); font-weight: 700; margin: var(--s-6) 0 var(--s-3); }

/* Rate strip (home) */
.rate-strip { display: inline-flex; align-items: center; gap: var(--s-2); background: var(--brand-tint); color: var(--brand-dark); border-radius: var(--r-pill); padding: 6px var(--s-3); font-size: var(--fs-sm); font-weight: 600; }
.rate-strip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }

/* Category / featured grid */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s-3); }
.cat-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-2); text-decoration: none; color: var(--text); text-align: center;
}
.cat-card:active { background: var(--gray-100); }
.cat-card .icon { font-size: 2rem; }
.cat-card .name { font-weight: 600; font-size: var(--fs-sm); }
.cat-card .count { font-size: var(--fs-xs); color: var(--text-muted); }
.cat-card .price-badge { font-size: var(--fs-sm); font-weight: 700; color: var(--brand-dark); }

/* Announcement card */
.announcement { display: flex; gap: var(--s-3); align-items: flex-start; }
.announcement .a-ic { font-size: 1.5rem; }
.announcement .a-title { font-weight: 700; }

/* Banner carousel — admin-managed promo banners (admin/banners.php).
   Image and caption stack in the same grid cell: the caption overlays the
   image, and still shows on its own if the image is missing or fails. */
.banner-carousel { display: flex; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory; margin-bottom: var(--s-4); padding-bottom: var(--s-1); }
.banner-carousel .banner { flex: 0 0 88%; scroll-snap-align: start; border-radius: var(--r-lg); overflow: hidden; background: var(--brand-tint); min-height: 120px; display: grid; place-items: center; color: var(--brand-dark); font-weight: 600; }
.banner-carousel .banner > * { grid-area: 1 / 1; }
.banner-carousel img { width: 100%; height: 100%; object-fit: cover; }
.banner-carousel .banner-caption {
  z-index: 1; margin: var(--s-3); padding: var(--s-2) var(--s-3);
  background: rgba(15, 23, 42, .55); color: #fff;
  border-radius: var(--r-md); font-size: var(--fs-sm); text-align: center;
}
/* Caption-only banner: skip the scrim pill, show plain brand-colored text. */
.banner-carousel .banner-caption:only-child { background: transparent; color: var(--brand-dark); font-size: var(--fs-md); }

/* Closed banner */
.banner-alert { background: #fef3c7; color: #92400e; padding: var(--s-3) var(--s-4); text-align: center; font-size: var(--fs-sm); }

/* Totals rows */
.totals .row { padding: var(--s-1) 0; }
.totals .grand { font-size: var(--fs-lg); font-weight: 700; border-top: 1px solid var(--border); margin-top: var(--s-2); padding-top: var(--s-3); }

/* Flash message */
.flash { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); margin-bottom: var(--s-4); font-size: var(--fs-sm); }
.flash.err { background: #fee2e2; color: #991b1b; }
.flash.ok { background: #dcfce7; color: #166534; }

/* OTP resend link */
.link-btn { background: none; border: 0; color: var(--brand-dark); font-weight: 600; cursor: pointer; padding: var(--s-2); font-family: inherit; font-size: var(--fs-sm); }
.link-btn:disabled { color: var(--text-muted); cursor: default; }