/* ============================================================================
   ZYBENEFITS — PAGE COMPOSITIONS (supplement to zybenefits.css)
   v1 · 14 August 2026 · values lifted verbatim from ZyBenefits.dc.html inline
   styles. Covers the six compositions not expressible from zybenefits.css +
   the docs alone. Load AFTER zybenefits.css. Hexes not present in
   01-DESIGN-TOKENS.md are flagged in 08-PAGE-COMPOSITIONS.md §7.
   ========================================================================= */

/* ── 1 · MEMBER APP HEADER BAND ─────────────────────────────────────────────
   NOT a flat gradient in the prototype: a nebula raster + the suite's
   --zq-nebula-overlay wash. Image: prototype/uploads/Gemini_Generated_Image_
   eeyaydeeyaydeeya.png (ship or replace with brand art). Gradient fallback
   below reads correctly if the image is dropped. */
.zqb-appbar {
  background-image: var(--zq-nebula-overlay),
                    linear-gradient(135deg, #2a0b52 0%, #4a148c 55%, #1B5062 140%); /* fallback */
  background-size: cover; background-position: center;
  padding: 12px 18px 14px; color: #fff;
}
.zqb-appbar.has-art {
  background-image: var(--zq-nebula-overlay), url("../prototype/uploads/Gemini_Generated_Image_eeyaydeeyaydeeya.png");
}
.zqb-appbar-row { display: flex; align-items: center; gap: 10px; }
.zqb-appbar-wordmark { font: 800 14px/1.15 var(--zq-font-family); color: #fff; }
/* Subtitle = suite .zq-brand-sub reduced to 9px. Text is contextual:
   "MEMBER BENEFITS · MINISTRY OF EDUCATION" (top bar), "GOOD MORNING, {NAME}"
   (wallet), section subtitles elsewhere. */
.zqb-appbar-sub { font: 700 9px/1.4 var(--zq-font-family); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
.zqb-appbar .zq-brand-disc { width: 30px; height: 30px; }   /* logo disc, suite class */
.zqb-appbar .zq-brand-disc img { height: 24px; }
/* Back/glass buttons on the band: suite .zq-glass / .zq-glass--circle, 30px. */

/* ── 2 · CATEGORY TAXONOMY + CHIPS ──────────────────────────────────────────
   Full list, fixed order: All · Stays · Groceries · Supplies · Food · Events
   (+ "Back-to-school" collection chip appended, icon auto_awesome→close).
   Base: suite .zq-chip.zq-chip--outline; active state = .is-on (suite:
   primary-soft fill, primary text+border). Single-select for categories,
   independent toggle for the collection chip. Phone: one horizontal-scroll
   row, no wrap (flex-wrap:nowrap; overflow-x:auto; flex-shrink:0 chips). */
.zqb-filter-row,
.zqb-cat-row { display: flex; gap: 7px; flex-wrap: wrap; }
.zqb-cat-row { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; }
.zqb-filter-row > .zq-chip,
.zqb-cat-row > .zq-chip { flex-shrink: 0; }
.zqb-filter-chip {
  --zqb-filter-bg: #f4eef8;
  --zqb-filter-ink: #4a285d;
  --zqb-filter-border: #bfaaca;
  min-height: 31px;
  cursor: pointer;
  border: 1px solid var(--zqb-filter-border);
  background: var(--zqb-filter-bg);
  color: var(--zqb-filter-ink);
  font-weight: 800;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.zqb-filter-chip > span { display: inline-flex; align-items: center; gap: 5px; }
.zqb-filter-chip.is-on {
  background: var(--zqb-filter-ink);
  border-color: var(--zqb-filter-ink);
  color: #fff;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--zqb-filter-ink) 24%, transparent);
}
.zqb-filter-chip.is-on > span::before { content: "✓"; font-weight: 950; }
.zqb-filter-chip:hover:not(.is-on) { border-color: var(--zqb-filter-ink); }
.zqb-filter-chip:focus-visible {
  outline: 3px solid #ffbf69;
  outline-offset: 2px;
}
.zqb-filter-chip--closing { --zqb-filter-bg: #fff1df; --zqb-filter-ink: #813b00; --zqb-filter-border: #e9a358; }
.zqb-filter-chip--saving  { --zqb-filter-bg: #e8f7f1; --zqb-filter-ink: #105c49; --zqb-filter-border: #75bda9; }
.zqb-filter-chip--rated   { --zqb-filter-bg: #fff7d8; --zqb-filter-ink: #6b5200; --zqb-filter-border: #d5b94c; }
.zqb-filter-chip--all     { --zqb-filter-bg: #f2e9f8; --zqb-filter-ink: #541577; --zqb-filter-border: #b59ac5; }
.zqb-filter-chip--stays   { --zqb-filter-bg: #e6f3fa; --zqb-filter-ink: #14546f; --zqb-filter-border: #80b8ce; }
.zqb-filter-chip--groceries { --zqb-filter-bg: #e8f6f2; --zqb-filter-ink: #175c4e; --zqb-filter-border: #79b8aa; }
.zqb-filter-chip--supplies { --zqb-filter-bg: #eceefd; --zqb-filter-ink: #343f86; --zqb-filter-border: #9da6d8; }
.zqb-filter-chip--food    { --zqb-filter-bg: #fff0e4; --zqb-filter-ink: #7d3900; --zqb-filter-border: #e2a065; }
.zqb-filter-chip--events  { --zqb-filter-bg: #e9f5ec; --zqb-filter-ink: #245a31; --zqb-filter-border: #84b78e; }

/* ── 3 · DEAL-CARD MEDIA BANNER ─────────────────────────────────────────────
   Heights: 92px phone list · 84px desktop grid · 148px C7 hero.
   Fill = per-CATEGORY gradient (135deg); icon watermark = Material icon,
   centred absolute, white at opacity .55 (36px list / 32px desktop / 44px
   hero); category chip = .zq-chip--neutral absolute top 8px right 8px;
   FEATURED chip = absolute top 8px left 8px, rgba(0,0,0,.42) bg, #ffe082
   text. No-photo fallback state IS this gradient + watermark (by design —
   never a grey box); a dropped photo covers the gradient, chips stay on top
   (photo layer z0, chips/watermark pointer-events:none above). */
.zqb-banner { position: relative; color: #fff; height: 92px; overflow: hidden; }
.zqb-banner--desktop { height: 84px; }
.zqb-banner--hero { height: 148px; }
.zqb-banner--stays     { background: linear-gradient(135deg, #1B5062, #0277bd); }
.zqb-banner--groceries { background: linear-gradient(135deg, #4a148c, #7b1fa2); }
.zqb-banner--supplies  { background: linear-gradient(135deg, #3f51b5, #283593); }
.zqb-banner--food      { background: linear-gradient(135deg, #fb8c00, #9c5700); }
.zqb-banner--events    { background: linear-gradient(135deg, #00897b, #00695c); }
.zqb-banner-watermark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: 36px; opacity: 0.55; pointer-events: none;
}
.zqb-banner--desktop .zqb-banner-watermark { font-size: 32px; }
.zqb-banner--hero .zqb-banner-watermark { font-size: 44px; top: 56%; }
.zqb-banner-cat { position: absolute; top: 8px; right: 8px; pointer-events: none; }   /* .zq-chip--neutral */
.zqb-banner-featured {
  position: absolute; top: 8px; left: 8px; pointer-events: none;
  background: rgba(0,0,0,0.42); color: #ffe082;   /* on .zq-chip */
}
.zqb-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── 4 · CLOSING-THIS-WEEK STUB CARD ────────────────────────────────────────
   Rail: horizontal scroll, gap 8px. Card: .zq-card.zq-card--pad-sm base,
   flex 0 0 168px, column gap 4px. Membership: deals with < 7 days to close,
   sorted soonest-first. */
.zqb-stubcard { flex: 0 0 168px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; text-align: left; }
.zqb-stubcard-head { display: flex; align-items: center; gap: 5px; }
.zqb-stubcard-tile { /* icon tile carries the merchant's CATEGORY gradient (§3) */
  width: 22px; height: 22px; border-radius: 6px; color: #fff; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.zqb-stubcard-tile .material-icons { font-size: 12px; }
.zqb-stubcard-m { font: 700 10.5px/1.2 var(--zq-font-family); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zqb-stubcard-price { font: 800 13px/1 var(--zq-font-family); color: var(--zq-primary); font-variant-numeric: tabular-nums; }
/* "Nd left" chip = suite .zq-chip.zq-chip--pending (amber), align-self:flex-start. */

/* ── 5 · VERIFIED BADGE + MERCHANT META ROW ─────────────────────────────────
   Badge = Material `verified` ligature, NOT a component: #2196f3 on light
   surfaces (13px card grids / 14px phone list); #64b5f6 inside dark chips
   (C7 hero merchant chip). Always immediately after the merchant name.
   Meta row (phone list): name 700 12.5px · badge · "· {location}" muted
   10.5px · spacer · "closes {DD MMM}" muted 10.5px. C7 detail meta:
   "{location} · commitments close {DD MMM} · redeem {window}" muted 11px. */
.zqb-verified { font-size: 14px; color: #2196f3; }
.zqb-verified--ondark { color: #64b5f6; }
.zqb-meta-row { display: flex; align-items: center; gap: 6px; }
.zqb-meta-row .zqb-m { font: 700 12.5px/1.3 var(--zq-font-family); }
.zqb-meta-row .zqb-loc, .zqb-meta-row .zqb-closes { font-size: 10.5px; color: var(--zq-text-secondary); }

/* ── 6 · RATINGS ROW ────────────────────────────────────────────────────────
   Cards: stars 13px (12px desktop) + value 700 10.5px (10px desktop) +
   "({count})" muted same size. Detail (C7): stars 14px + value 700 11.5px +
   "· {n} ratings from verified redemptions" muted 11px. Stars always
   #ff9800 star/star_half/star_border (half at ≥ x.25, full at ≥ x.75).
   Base classes in zybenefits.css §10 (.zqb-stars); this is the row recipe. */
.zqb-rating-row { display: flex; align-items: center; gap: 4px; }
.zqb-rating-row .zqb-val { font: 700 10.5px/1 var(--zq-font-family); }
.zqb-rating-row .zqb-count { font-size: 10.5px; color: var(--zq-text-secondary); }
.zqb-rating-row--detail { gap: 5px; }
.zqb-rating-row--detail .zqb-val { font-size: 11.5px; }

/* ── CUSTOMER ZYCROWD OFFER CARDS ──────────────────────────────────────────
   An editorial value-ticket treatment for the member-facing /deals surface.
   Seller operations keep their intentionally compact portal layout. */
.zqb-offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(14px, 2.4vw, 22px);
}
.zqb-offer-card {
  --zqb-card-purple: #4a148c;
  --zqb-card-ink: #23172e;
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--zqb-card-purple) 16%, var(--zq-border-soft));
  box-shadow: 0 14px 38px rgba(48, 20, 71, .10);
  background: color-mix(in srgb, var(--zq-surface, #fff) 97%, #f3edf7);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.zqb-offer-card:hover,
.zqb-offer-card:focus-within {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--zqb-card-purple) 42%, var(--zq-border-soft));
  box-shadow: 0 18px 46px rgba(48, 20, 71, .16);
}
.zqb-offer-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 8.4;
  min-height: 168px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}
.zqb-offer-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(20, 9, 28, .52), transparent);
}
.zqb-offer-media > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform .3s ease;
}
.zqb-offer-card:hover .zqb-offer-media > img { transform: scale(1.025); }
.zqb-offer-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 9px;
  color: rgba(255,255,255,.88);
  font: 800 11px/1 var(--zq-font-family);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.zqb-offer-category,
.zqb-offer-featured {
  position: absolute;
  z-index: 2;
  top: 12px;
}
.zqb-offer-category { right: 12px; }
.zqb-offer-featured {
  left: 12px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #fff2b8;
  color: #563c00;
  font: 900 9px/1 var(--zq-font-family);
  letter-spacing: .09em;
  text-transform: uppercase;
  box-shadow: 0 5px 18px rgba(0,0,0,.18);
}
.zqb-offer-body {
  min-width: 0;
  padding: clamp(16px, 3vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.zqb-offer-seller {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--zqb-card-purple);
  font: 800 11px/1.25 var(--zq-font-family);
  letter-spacing: .025em;
}
.zqb-offer-seller > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zqb-offer-place {
  margin-left: auto;
  color: var(--zq-text-secondary);
  font-weight: 650;
  white-space: nowrap;
}
.zqb-offer-body h2 {
  margin: 0;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.18;
  letter-spacing: -.025em;
}
.zqb-offer-body h2 a { color: var(--zq-text); text-decoration: none; }
.zqb-offer-body h2 a:hover { color: var(--zqb-card-purple); }
.zqb-offer-value {
  margin: 0;
  color: var(--zq-text-secondary);
  font-size: 12.5px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.zqb-offer-commercial {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 10px;
}
.zqb-offer-price,
.zqb-offer-status {
  min-width: 0;
  padding: 11px 12px;
  border-radius: 14px;
}
.zqb-offer-price {
  background: linear-gradient(145deg, #f3e8fa, #ead9f3);
  color: #381051;
  border: 1px solid #c7a9d7;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.zqb-offer-status {
  position: relative;
  padding-left: 27px;
  background: #eef8f4;
  border: 1px solid #9bc9bd;
  color: #163e35;
}
.zqb-offer-price span,
.zqb-offer-price small,
.zqb-offer-status small { display: block; }
.zqb-offer-price span,
.zqb-offer-status small {
  font: 700 9.5px/1.3 var(--zq-font-family);
}
.zqb-offer-price span { color: #5b306f; text-transform: uppercase; letter-spacing: .055em; }
.zqb-offer-price strong {
  display: block;
  margin: 2px 0;
  color: #35104f;
  font: 950 clamp(22px, 3.1vw, 29px)/1 var(--zq-font-family);
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.zqb-offer-price small { font: 700 9.5px/1.35 var(--zq-font-family); color: #573466; }
.zqb-offer-status strong { display: block; color: #173f36; font: 900 11.5px/1.3 var(--zq-font-family); }
.zqb-offer-closes {
  width: max-content;
  max-width: 100%;
  margin-top: 6px;
  padding: 4px 7px;
  border-radius: 7px;
  border: 1px solid #efb173;
  background: #fff0df;
  color: #843c00;
  font-weight: 850 !important;
  letter-spacing: .01em;
}
.zqb-offer-status-dot {
  position: absolute;
  top: 13px;
  left: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2b7d6b;
  box-shadow: 0 0 0 4px rgba(43,125,107,.12);
}
.zqb-offer-rating { display: flex; align-items: center; gap: 5px; font-size: 10.5px; }
.zqb-offer-rating > span:last-child { color: var(--zq-text-secondary); }
.zqb-offer-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: #3f3245;
  font-size: 10.5px;
  line-height: 1.35;
}
.zqb-offer-terms > span {
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 999px;
  background: #f1edf3;
  border: 1px solid #d5c9da;
  overflow-wrap: anywhere;
}
.zqb-offer-terms strong { color: #2d2032; }
.zqb-offer-cta {
  margin-top: auto;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--zqb-card-purple);
  color: #fff;
  text-decoration: none;
  font: 850 12px/1 var(--zq-font-family);
}
.zq-root a.zqb-offer-cta,
.zq-root a.zqb-offer-cta:link,
.zq-root a.zqb-offer-cta:visited { color: #fff; text-decoration: none; }
.zq-root a.zqb-offer-cta:hover { background: #35105f; color: #fff; text-decoration: none; }
.zq-root a.zqb-offer-cta:focus-visible {
  outline: 3px solid #ffbf69;
  outline-offset: 3px;
  background: #35105f;
  color: #fff;
}
.zq-root a.zqb-offer-cta[aria-disabled="true"] {
  pointer-events: none;
  background: #685b70;
  color: #fff;
  opacity: 1;
}
.zqb-offer-cta > span { min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.zqb-offer-cta svg { flex: 0 0 auto; transition: transform .18s ease; }
.zqb-offer-cta:hover svg { transform: translateX(3px); }

.zq-deal-image-preview {
  min-height: 116px;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  color: var(--zq-text-secondary);
  background: #f1e8f7;
  border: 1px dashed rgba(74,20,140,.28);
  font-size: 11px;
}
.zq-deal-image-preview img { width: 100%; height: 116px; display: block; object-fit: cover; }

.zqb-wallet-offer {
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
}
.zqb-wallet-offer-media {
  min-height: 104px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(145deg, #35105f, #1b5062);
}
.zqb-wallet-offer-media > img:not(.zqb-wallet-offer-fallback) {
  width: 100%;
  height: 100%;
  min-height: 104px;
  object-fit: cover;
}
.zqb-wallet-offer-fallback { width: 54px; height: 54px; object-fit: contain; }
.zqb-wallet-offer-copy { min-width: 0; padding: 12px 14px; }

@media (max-width: 620px) {
  .zqb-offer-grid { grid-template-columns: minmax(0, 1fr); }
  .zqb-offer-card { border-radius: 17px; }
  .zqb-offer-media { min-height: 150px; }
  .zqb-offer-body { padding: 15px; }
  .zqb-offer-commercial { grid-template-columns: 1fr; }
  .zqb-offer-price, .zqb-offer-status { min-height: 54px; }
  .zqb-offer-cta { min-height: 46px; }
  .zqb-offer-value { -webkit-line-clamp: 2; }
  .zq-deal-image-editor { grid-template-columns: 1fr !important; }
  .zqb-wallet-offer { grid-template-columns: 92px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .zqb-offer-card, .zqb-offer-media > img, .zqb-offer-cta svg { transition: none; }
}