/* ============================================================
   ThatDailyDeal — Components
   Canonical component rules shared by the prototype (index.html)
   and the design library showcase (library.html). All rules
   reference design tokens from tokens.css — no hardcoded values.

   When adding a new shared component:
     1. Define it here, referencing tokens.css.
     2. Add a showcase section to library.html.
     3. Use it in the prototype via class names from this file.
   ============================================================ */

/* ============================================================
   PRICE PILL
   Liquid-glass pill with product name + current/old price +
   optional discount badge. Add .pp-soldout to strikethrough the
   current price (sold-out state).
   ============================================================ */
.price-pill {
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-white);
  font-family: var(--font-family-primary);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.pp-info { flex: 1 1 auto; min-width: 0; }
.pp-name {
  /* Title Small */
  font-size:      var(--type-title-small-size);
  font-weight:    var(--type-title-small-weight);
  line-height:    var(--type-title-small-lh);
  letter-spacing: var(--type-title-small-tracking);
  color: var(--color-white);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-bottom: var(--space-1);
}
.pp-prices {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.pp-now {
  /* Title Large */
  font-size:      var(--type-title-large-size);
  font-weight:    var(--type-title-large-weight);
  line-height:    var(--type-title-large-lh);
  letter-spacing: var(--type-title-large-tracking);
  color: var(--color-white);
}
.pp-old {
  /* Body Small @ weight 400 — strikethrough should not be bold */
  font-size:      var(--type-body-small-size);
  font-weight:    400;
  line-height:    var(--type-body-small-lh);
  letter-spacing: var(--type-body-small-tracking);
  color: rgba(255, 255, 255, .7);
  text-decoration: line-through;
}
.pp-discount {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  /* Label Medium @ weight 800, tracking -0.2px */
  font-size:      var(--type-label-medium-size);
  font-weight:    800;
  line-height:    var(--type-label-medium-lh);
  letter-spacing: -.2px;
  color: var(--color-white);
  background: var(--color-red);
  border-radius: var(--radius-xs);
  transform: translateY(-1px);
}

/* Sold-out variant — strikethrough now-price, lighter weight. */
.pp-soldout .pp-now {
  text-decoration: line-through;
  color: rgba(255, 255, 255, .7);
  font-weight: 700;
}

/* ============================================================
   BUTTON
   Composable: .btn (base) + .btn-primary/secondary (color) +
   .btn-sm/md/lg (size) + optional .btn-ghost / .btn-icon-only /
   .btn-glass. Icon position is DOM order (icon first = left).
   ============================================================ */
.btn {
  font-family: var(--font-family-primary);
  font-weight: 700;
  border: 0;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, transform .12s ease, filter .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:active { transform: scale(.97); }

/* Sizes — size bound to type scale; weight 700 stays on .btn base for all sizes. */
.btn-sm { height: 36px; font-size: var(--type-body-small-size);   padding: 0 var(--space-4); } /* Body Small @ weight 700 */
.btn-md { height: 44px; font-size: var(--type-body-medium-size);  padding: 0 var(--space-5); } /* Body Medium @ weight 700 */
.btn-lg { height: 54px; font-size: var(--type-title-medium-size); padding: 0 var(--space-6); } /* Title Medium */

/* Color — filled */
.btn-primary {
  background: var(--color-gold);
  color: var(--color-white);
  box-shadow: var(--shadow-gold-glow);
}
.btn-primary:hover { background: var(--color-gold-dark); }

.btn-secondary {
  background: var(--color-blue);
  color: var(--color-white);
  box-shadow: 0 4px 14px rgba(60, 101, 189, .35);
}
.btn-secondary:hover { background: var(--color-blue-dark); }

/* Ghost — transparent fill, colored border + text. Composes on top of
   a color variant: .btn-primary.btn-ghost or .btn-secondary.btn-ghost. */
.btn-ghost {
  background: transparent;
  box-shadow: none;
  border: 1.5px solid currentColor;
}
.btn-primary.btn-ghost   { color: var(--color-gold); }
.btn-secondary.btn-ghost { color: var(--color-blue); }
.btn-primary.btn-ghost:hover   { background: color-mix(in srgb, var(--color-gold) 8%, transparent); }
.btn-secondary.btn-ghost:hover { background: color-mix(in srgb, var(--color-blue) 8%, transparent); }

/* Icon-only — square aspect, equal padding, perfect circle. */
.btn-icon-only { padding: 0; aspect-ratio: 1 / 1; }
.btn-sm.btn-icon-only { width: 36px; }
.btn-md.btn-icon-only { width: 44px; }
.btn-lg.btn-icon-only { width: 54px; }

/* Glass — replaces solid bg with the primary liquid-glass tokens.
   Primarily for icon-only (action-stack pattern), works on filled too. */
.btn-glass {
  background: var(--glass-bg);
  border: var(--glass-border);
  color: var(--color-white);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.btn-glass:hover { background: rgba(40, 40, 40, .65); }

/* Icon sizing by parent size — scales with .btn-sm / md / lg. */
.btn-icon { flex-shrink: 0; }
.btn-sm .btn-icon { width: 16px; height: 16px; }
.btn-md .btn-icon { width: 18px; height: 18px; }
.btn-lg .btn-icon { width: 20px; height: 20px; }

/* Toggle states for icon-only buttons. Embed BOTH icons in the button
   (with .btn-icon-default and .btn-icon-active). Toggling .is-active on
   the button swaps which one is visible. Use for mute, pause, favorite,
   any binary state. */
.btn .btn-icon-active   { display: none;  }
.btn.is-active .btn-icon-default { display: none;  }
.btn.is-active .btn-icon-active  { display: block; }

/* Favorite — adds a red color shift on active, so the heart reads as
   "liked". Compose: .btn-glass.btn-icon-only.btn-favorite + .is-active. */
.btn-favorite.is-active { color: var(--color-red); }

/* ============================================================
   MENU
   Container (.menu) is a primary-glass pill. Items (.menu-item)
   stack vertically: icon over label. .is-selected adds a gold pill
   background. Optional .menu-item-badge for counts.
   ============================================================ */
.menu {
  position: relative;
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: var(--radius-pill);
  padding: var(--space-1);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  font-family: var(--font-family-primary);
}
.menu::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
  z-index: 0;
}

.menu-item {
  position: relative;
  z-index: 1;
  width: 64px;
  min-height: 50px;
  /* Explicit symmetric padding — overrides the browser's default button
     padding (1px 6px) so the icon + label stay centered. */
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  color: rgba(255, 255, 255, .65);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.menu-item:hover { color: var(--color-white); }

.menu-item.is-selected {
  color: var(--color-white);
  background: color-mix(in srgb, var(--color-gold) 85%, transparent);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow:
    0 4px 14px rgba(240, 161, 42, .45),
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -1px 0 rgba(0, 0, 0, .15);
}

.menu-item-icon { width: 22px; height: 22px; flex-shrink: 0; }
.menu-item-label {
  /* Label Small */
  font-size:      var(--type-label-small-size);
  font-weight:    var(--type-label-small-weight);
  line-height:    var(--type-label-small-lh);
  letter-spacing: var(--type-label-small-tracking);
  color: inherit;
}

.menu-item-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  background: var(--color-red);
  color: var(--color-white);
  /* Label Small @ weight 700, no tracking (badge digits stay flush) */
  font-size:      var(--type-label-small-size);
  font-weight:    700;
  line-height:    var(--type-label-small-lh);
  letter-spacing: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-ink);
}

/* ============================================================
   DEALS BANNER
   Compact liquid-glass pill with a red icon + countdown time.
   Used in card overlays + section headers.
   ============================================================ */
.deals-banner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, .92);
  font-family: var(--font-family-primary);
  /* Label Medium */
  font-size:      var(--type-label-medium-size);
  font-weight:    var(--type-label-medium-weight);
  line-height:    var(--type-label-medium-lh);
  letter-spacing: var(--type-label-medium-tracking);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.deals-banner-icon {
  color: var(--color-red);
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.deals-banner-time {
  /* Label Medium @ weight 800, tracking 0.4px (countdown digits stay aligned) */
  font-weight:    800;
  letter-spacing: .4px;
  color: var(--color-red);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   SWIPE STAMPS
   Large rotated overlays shown briefly on a card during a swipe
   gesture, or persistently on sold-out cards. The base class
   hides the stamp by default (opacity: 0) — visibility is owned
   by the consumer (e.g. .deal-card in the prototype toggles
   .show-add / .show-skip / .show-notify / .sold-out to reveal
   the matching stamp). Stamps need a positioned ancestor.
   ============================================================ */
.swipe-stamp {
  position: absolute;
  top: 36%;
  font-family: var(--font-family-primary);
  /* Display Large */
  font-size:      var(--type-display-large-size);
  font-weight:    var(--type-display-large-weight);
  line-height:    var(--type-display-large-lh);
  letter-spacing: var(--type-display-large-tracking);
  border: 4px solid currentColor;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  transition: opacity .12s ease;
}
.stamp-add  { left: var(--space-5);  color: var(--color-green); transform: rotate(-12deg); }
.stamp-skip { right: var(--space-5); color: var(--color-red);   transform: rotate( 12deg); }
/* Muted skip — used when the underlying product is unavailable, so the
   skip cue stays semantically meaningful without the "you're losing a
   good deal" red urgency. */
.stamp-skip.is-muted { color: var(--color-gray-300); }
.stamp-soldout {
  left: 50%;
  color: var(--color-red);
  transform: translateX(-50%) rotate(-8deg);
  white-space: nowrap;
}
.stamp-notify {
  left: var(--space-5);
  color: var(--color-gold);
  transform: rotate(-12deg);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* Display Medium (weight/lh/tracking inherited from .swipe-stamp / Display Large — values match) */
  font-size: var(--type-display-medium-size);
}
.stamp-notify svg { width: 44px; height: 44px; }

/* ============================================================
   TOAST (small tap)
   Black pill, white text, 13px. Used for low-stakes feedback —
   "Liked", "Skip", "Link copied", "Added × N". Hidden by default;
   add .show to reveal (consumer owns the slide-in transform).
   ============================================================ */
.toast {
  background: rgba(20, 20, 20, .92);
  color: var(--color-white);
  font-family: var(--font-family-primary);
  /* Body Small @ weight 600 */
  font-size:      var(--type-body-small-size);
  font-weight:    600;
  line-height:    var(--type-body-small-lh);
  letter-spacing: var(--type-body-small-tracking);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.toast.show { opacity: 1; }

/* ============================================================
   RICH TOAST
   White card with circular gold-tinted icon, bold title, gray
   supporting text. Used for high-stakes confirmations — e.g.
   "You're on the list / We'll notify you when this is back in
   stock". Hidden by default; add .show to reveal (consumer owns
   the slide-in transform).
   ============================================================ */
.rich-toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-white);
  color: var(--color-ink);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-family-primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.rich-toast.show { opacity: 1; }

.rich-toast-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--color-gold) 16%, transparent);
  color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rich-toast-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rich-toast-title {
  /* Title Small @ weight 800, tracking -0.1px */
  font-size:      var(--type-title-small-size);
  font-weight:    800;
  line-height:    var(--type-title-small-lh);
  letter-spacing: -.1px;
  color: var(--color-ink);
}
.rich-toast-sub {
  /* Body Small */
  font-size:      var(--type-body-small-size);
  font-weight:    var(--type-body-small-weight);
  line-height:    var(--type-body-small-lh);
  letter-spacing: var(--type-body-small-tracking);
  color: var(--color-gray-700);
}