/* Member Promo Portal overrides — layered after Tabler so these win.
   Mega Group brand red = #E31837 (NOT #C8102E). */
:root {
  --tblr-primary: #E31837;
  --tblr-primary-rgb: 227, 24, 55;
  /* Links default to blue in Tabler/Bootstrap (not derived from primary) — brand them. */
  --tblr-link-color: #E31837;
  --tblr-link-color-rgb: 227, 24, 55;
  --tblr-link-hover-color: #b3122c;
  /* Readability floor: Tabler's default body is 0.875rem (14px), which drags
     .small (~12px) and badges below a comfortable size for this audience.
     Lift the base to 16px so body text is 16px and .small lands at 14px —
     nothing content-level sits below 14px. Eyebrow labels + badges keep a
     smaller 13px "chrome" floor (set explicitly below and inline). */
  --tblr-body-font-size: 1rem;
}

/* Badges are compact chrome — hold a 13px floor (up from Tabler's ~11–12px). */
.badge { font-size: .8125rem; }
/* "Bundle" marker — a distinct dark purple with white text so it reads clearly
   against the red theme and the green "signed up" badges (and never inherits a
   low-contrast colour when nested inside another badge). Matches the internal
   bundle report's badge (#30225F). */
.badge-bundle { background-color: #30225F !important; color: #fff !important; }
/* Small buttons: keep them compact but not squint-tiny. */
.btn-sm { font-size: .8125rem; }

a { color: #E31837; }
a:hover { color: #b3122c; }
.btn-link { --tblr-btn-color: #E31837; color: #E31837; }
.btn-link:hover { color: #b3122c; }

.btn-primary {
  --tblr-btn-bg: #E31837;
  --tblr-btn-border-color: #E31837;
  --tblr-btn-hover-bg: #c3142f;
  --tblr-btn-hover-border-color: #c3142f;
  --tblr-btn-active-bg: #a91129;
  --tblr-btn-active-border-color: #a91129;
}

.text-primary { color: #E31837 !important; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* Explicit belt-and-suspenders alongside --tblr-body-font-size, in case the
     Tabler build reads a different var name — this override loads last and wins. */
  font-size: 1rem;
}

/* Sticky top header */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: #fff;
}

/* <summary> styled as a button (hide the default disclosure triangle) */
summary.as-btn { cursor: pointer; list-style: none; display: inline-flex; align-items: center; }
summary.as-btn::-webkit-details-marker { display: none; }
summary.as-btn::marker { content: ""; }

/* Signup modal: selection is shown by a green check on the right, not a fill. */
.signup-brand .signup-mark { display: none; font-size: 1.25rem; }
.signup-brand.is-selected .signup-mark { display: inline-flex; }

/* Expanded "See offers" content — light-grey rounded box under the brand row. */
.offers-box { background-color: #f6f7f9; border-radius: 8px; padding: .6rem .85rem; }

/* Header status strip — uniform caption + value so the stats read as one row. */
.stat-cap { font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; }
.stat-val { font-size: 1.4rem; font-weight: 700; }
.stat-box { background-color: #f6f7f9; border: 1px solid var(--tblr-border-color); border-radius: 10px; padding: .7rem 1rem; min-width: 132px; flex: 1 1 0; }

/* Header footer strip: Coverage | Jump-to panels, divider between them (lg+). */
@media (min-width: 992px) { .jump-panel { border-left: 1px solid var(--tblr-border-color); } }
/* Jump-to links styled as chips so they read like the coverage pills. */
.jump-chip {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .15rem .55rem; font-size: .8125rem; line-height: 1.4;
  border: 1px solid var(--tblr-border-color); border-radius: 999px;
  color: var(--tblr-secondary); text-decoration: none; white-space: nowrap;
}
/* text-decoration is repeated here on purpose: the base rule above sets none,
   but Bootstrap's `a:hover { text-decoration: underline }` is (0,1,1) against the
   class's (0,1,0), so it wins on hover no matter which stylesheet loads last —
   and the underline runs under the icon glyph too. (0,2,0) settles it. */
.jump-chip:hover, .jump-chip:focus {
  border-color: #E31837; color: #E31837; background-color: rgba(227,24,55,.06);
  text-decoration: none;
}

/* A sticky navbar covers whatever an in-page anchor lands on. scroll-padding-top
   on the scroll container is the dependable fix — scroll-margin-top on the target
   alone was being ignored here. Set on both html and body so it applies whichever
   one is the scroller. Value clears the ~53px navbar with room to breathe. */
html, body { scroll-padding-top: 5.5rem; }

/* Category-coverage table: icon'd category headers + a status badge per column. */
.coverage-table th {
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .03em;
  font-weight: 600; color: var(--tblr-secondary); background-color: #f6f7f9;
  white-space: nowrap;
}
.coverage-table td { padding-top: .5rem; padding-bottom: .5rem; }

/* Coverage modal matrix: one shared table, grouped by ALWAYS ON / UPCOMING so
   the category columns stay aligned across groups. */
.coverage-matrix th { white-space: nowrap; }
.coverage-matrix .coverage-group td {
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 600; color: var(--tblr-secondary); background-color: #f6f7f9;
}
.coverage-matrix .coverage-mteq-row > td { background-color: rgba(47, 179, 68, .07); }

/* Custom DM: strong grey phase headers + faint per-tactic dividers, so phases
   group more clearly than the tactics within them (matches the coverage-matrix
   group rows). */
.custom-phase-head {
  background-color: #f6f7f9; color: var(--tblr-secondary);
  text-transform: uppercase; font-size: .8125rem; font-weight: 600; letter-spacing: .04em;
  padding: .45rem .75rem; border-radius: 6px; margin-bottom: .25rem;
}
.custom-tactics .list-group-item { padding-left: .75rem; padding-right: .75rem; border-color: #f1f3f5; }

/* Section headings — brand-red accent bar so they stand out from card content. */
.section-title { font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; border-left: 4px solid #E31837; padding-left: .6rem; }
.section-title i { color: #E31837; }

/* Past Promotions: collapsible rows (native <details>). */
.past-summary { cursor: pointer; list-style: none; }
.past-summary::-webkit-details-marker { display: none; }
.past-summary::marker { content: ""; }
.past-caret { display: inline-block; transition: transform .15s ease; }
details[open] > .past-summary .past-caret,
details.past-prev[open] > .past-summary > .past-caret { transform: rotate(90deg); }

/* Tier picker: Tabler select-group boxes, red accent on the chosen tier. */
.form-selectgroup-boxes .form-selectgroup-input:checked + .form-selectgroup-label {
  border-color: #E31837;
  background-color: #f6f7f9;
}

/* A brand option blocked by an overlapping pick: still visible and readable, but
   clearly not choosable until the blocking brand is cleared. */
.signup-brand.is-blocked { opacity: .55; }
.signup-brand.is-blocked .form-check-label { text-decoration: line-through; }