/**
 * SBDR My Account — first-party styles for the Digital Rewards endpoint
 * (§19 performance budget: lightweight markup + first-party CSS only).
 * Layout mechanics only; colors inherit from the theme.
 */

.sbdr-order {
  margin: 0 0 2.5rem;
}

.sbdr-order h4 {
  margin: 1.25rem 0 0.5rem;
}

.sbdr-rewards {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sbdr-rewards__item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgb(128 128 128 / 25%);
}

.sbdr-rewards__label {
  font-weight: 600;
}

.sbdr-rewards__type,
.sbdr-rewards__note {
  font-size: 0.85em;
  opacity: 0.75;
}

.sbdr-rewards__action {
  margin-left: auto;
}

.sbdr-rewards__action:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 2px;
}

/* Staging §4.2 finding (2026-08-24): the action is a shared SB Buttons pill,
   and that system sets `white-space: nowrap`, `overflow: hidden` and 40px of
   padding on each side for its fill treatment. On a phone the row has less
   width than a label like "Download Check Poster" needs, so the text was
   quietly clipped at both ends instead of wrapping. Below 30rem the action
   stops competing with the reward's text for the row: it takes a full-width
   line of its own, wraps, and grows to fit. The selector carries one class
   more than the button system's own `body .woocommerce a.button`, so it wins
   on weight rather than on stylesheet order. Scoped to this endpoint — the
   clipping is a property of the shared pill and is recorded against
   suprbad-buttons as a sitewide observation, not fixed from here. */

@media (width <= 30rem) {
  body .woocommerce a.button.sbdr-rewards__action {
    width: 100%;
    height: auto;
    min-height: 3.25rem;
    margin-left: 0;
    padding: 0.75rem 1.25rem;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
}

/* Reserve Pack groups (SBR-04 §11/§11.0): the order-attached "Bonus
   Rewards" badge and the customer-attached "More Rewards" section. */

/* Staging §4.2 finding (2026-08-24): the pill sat low against the text beside
   it — its bottom edge dropping to the descender line while its top edge only
   grazed the capitals. `vertical-align: middle` centres an inline box on the
   parent's x-height midpoint (baseline + half the x-height), but a line of
   text is read against its cap height, whose midpoint sits roughly 0.1em
   higher. Lift the pill by that difference. The value is in the badge's own
   em — 0.7em of the surrounding text — so 0.14em here is ~0.1em of the text
   it sits beside, and it tracks whatever font-size the heading uses. Relative
   positioning shifts the painted box only: the line box, the line height and
   the wrapping are untouched, so this is a purely visual correction and it
   behaves identically at every viewport width. */

.sbdr-rewards__badge {
  display: inline-block;
  padding: 0.1em 0.5em;
  border: 1px solid currentcolor;
  border-radius: 999px;
  font-size: 0.7em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
  position: relative;
  top: -0.14em;
}

.sbdr-rewards__pack {
  margin: 0.5rem 0 0.25rem;
}

.sbdr-rewards__reason {
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.75;
}

.sbdr-rewards--bonus {
  padding-left: 0.75rem;
  border-left: 2px solid rgb(128 128 128 / 35%);
}

.sbdr-rewards--more[open] > summary {
  margin-bottom: 0.75rem;
}

.sbdr-rewards__unavailable {
  opacity: 0.7;
}

/* Revision 6: type-aware rows. The media tile is a thumbnail for ungated
   images and a text glyph tile (PDF / File / Link) otherwise. */

.sbdr-rewards__media {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid rgb(128 128 128 / 35%);
  border-radius: 0.375rem;
  overflow: hidden;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sbdr-rewards__media--image {
  border: 0;
}

.sbdr-rewards__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sbdr-rewards__text {
  flex: 1 1 12rem;
  min-width: 0;
}

/* Revision 6: "More Rewards" is a native <details>; the heading lives in
   its <summary>. */

.sbdr-rewards--more > summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;

  /* Firefox draws the marker from the list-style, Chrome/Safari from the
     ::marker/::-webkit-details-marker pseudo. Suppress all three and draw
     our own below — see the disclosure-triangle note. */
  list-style: none;
}

/* Staging §4.2 finding (2026-08-23): `display: flex` on the summary already
   suppresses the native disclosure marker in Chrome, so the section rendered
   as a plain heading with no affordance that it opens at all. The triangle is
   drawn here rather than left to a per-browser default: sideways when closed,
   pointing down when open. */

.sbdr-rewards--more > summary::-webkit-details-marker {
  display: none;
}

.sbdr-rewards--more > summary::before {
  content: '';
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-top: 0.32rem solid transparent;
  border-bottom: 0.32rem solid transparent;
  border-left: 0.46rem solid currentcolor;
  transition: transform 0.15s ease;
}

.sbdr-rewards--more[open] > summary::before {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .sbdr-rewards--more > summary::before {
    transition: none;
  }
}

/* Staging §4.2 finding (2026-08-23, amended 2026-08-24): "More Rewards" holds
   customer-attached grants — a different kind of section from an order's
   rewards — and it always renders first on page 1 (§2.3). Rule the boundary
   on the order section that follows it, so no rule is ever drawn between two
   order sections and none is left trailing at the end of the list. One
   adjacent-sibling selector covers it now that the position is fixed; the
   mirrored `.sbdr-order + .sbdr-rewards--more` half of the pair went with the
   withdrawn recency rule in v0.4.6.

   Second pass (same day): at 1px / 35% grey the boundary was indistinguishable
   from the row rules, so with More Rewards expanded the eye could not find
   where it ended. Every other rule on this page is a thin, faded grey; this
   one is the only full-strength, double-weight rule, and it carries extra
   space on both sides. Still a rule — no background, no box. The element is
   absent altogether when the customer has no grants (renderMoreRewards()
   returns no markup), so nothing here can render on its own. */

.sbdr-rewards--more + .sbdr-order {
  margin-top: 3rem;
  border-top: 2px solid currentcolor;
  padding-top: 2.25rem;
}

.sbdr-rewards--more > summary h3 {
  display: inline;
  margin: 0;
}

.sbdr-rewards--more > summary:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 2px;
}

.sbdr-rewards__count {
  font-size: 0.85em;
  opacity: 0.75;
}

/* Revision 6: pagination (20 order sections per page). */

.sbdr-pagination {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.sbdr-pagination__status {
  font-size: 0.85em;
  opacity: 0.75;
}

/* Revision 6: the "New" menu badge and per-section markers. The menu
   class is added via the woocommerce_account_menu_item_classes filter;
   WooCommerce escapes menu labels, so the badge is CSS-generated content
   rather than a <span> in the label. Shown while any section was earned
   after the customer's last visit (_sbdr_extras_seen timestamp). */

.sbdr-menu-item--new a::after {
  content: 'New';
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.1em 0.5em;
  border: 1px solid currentcolor;
  border-radius: 999px;
  font-size: 0.7em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;

  /* Same optical-centre lift as .sbdr-rewards__badge — see its note. The two
     badges are the same pill in two places and must stay in step. */
  position: relative;
  top: -0.14em;
}