:root {
  /* Slightly darkened from the original brief's #EC1F27 / #10A453 -- both
     were just under the WCAG AA 4.5:1 text-contrast threshold on white (and
     for white text on top of them, e.g. button labels/badges). This shade
     is visually indistinguishable from the original but clears 4.5:1 with
     a small margin. See abc-ad-sticky-cta below for the one spot (red CTA
     text on the dark sticky bar) no shade of red can fix -- white is used
     there instead, since no single red passes 4.5:1 against both white and
     near-black backgrounds at once. */
  --abc-red: #E8141C;
  --abc-green: #0D8644;
  --abc-charcoal: #4D4E4E;
  --abc-charcoal-dark: #2E2F2F;
  --abc-white: #FFFFFF;
  --abc-off-white: #F7F7F7;
  --abc-border: #E4E4E4;
  --abc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;

  /* Spacing scale (redesign foundation) -- prefer these over one-off inline
     styles/margins in new work; existing Bootstrap utility spacing (py-5,
     g-3, etc.) is untouched and still fine to use alongside these. */
  --abc-space-1: 0.25rem;
  --abc-space-2: 0.5rem;
  --abc-space-3: 1rem;
  --abc-space-4: 1.5rem;
  --abc-space-5: 2.5rem;
  --abc-space-6: 4rem;

  /* Type scale (redesign foundation) -- for the "big headline" treatment;
     h1-h6 defaults below are unchanged so existing pages don't shift. */
  --abc-text-display: clamp(2.5rem, 2rem + 2vw, 4rem);
  --abc-text-h1: clamp(2rem, 1.7rem + 1.2vw, 2.75rem);
  --abc-text-h2: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --abc-text-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);
}

body {
  font-family: var(--abc-font);
  color: var(--abc-charcoal-dark);
  background: var(--abc-white);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--abc-charcoal-dark);
  font-weight: 700;
}

/* One real "card" component to replace the ad-hoc `p-4 border rounded-3`
   pattern repeated across dozens of views. Adopted incrementally in later
   redesign phases -- existing p-4/border/rounded-3 usages keep working
   unchanged until each view is migrated. */
.abc-card {
  background: var(--abc-white);
  border: 1px solid var(--abc-border);
  border-radius: 10px;
  padding: var(--abc-space-4);
}

.abc-display {
  font-size: var(--abc-text-display);
  font-weight: 700;
  line-height: 1.1;
}

.abc-lead {
  font-size: var(--abc-text-lead);
  color: var(--abc-charcoal);
}

/* Fades a photo's bottom edge to transparent so it dissolves into whatever
   background sits behind it, instead of ending in a hard rectangle --
   the one technique borrowed from the reference mood images (a photo
   blending down into a solid-color field). Works on any <img>; the
   element it's applied to must sit directly on the background color it
   should blend into (the mask only reveals what's already behind it,
   it doesn't recolor anything). */
.abc-fade-bottom {
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

/* "Poster" panel: photo fades into a solid-color field and the headline/
   body/CTA sit inside that same field (pulled up under the fade with a
   negative margin) rather than beside the image in a separate column --
   the layout technique from the reference mood images, on ABC's own
   palette instead of copying their color. */
.abc-poster-card {
  background: var(--abc-charcoal-dark);
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.abc-poster-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.abc-poster-card-body {
  padding: var(--abc-space-4);
  margin-top: -70px;
  position: relative;
}

@media (max-width: 767.98px) {
  .abc-poster-card-body {
    margin-top: -50px;
  }
}

/* Hero "Our Services Include" checklist -- sits directly on the hero photo. */
.abc-hero-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.abc-hero-checklist li {
  display: flex;
  align-items: center;
  gap: .85rem;
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.9rem);
  margin-bottom: .85rem;
}

.abc-hero-checklist-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

a {
  color: var(--abc-charcoal-dark);
  text-decoration: none;
}

.btn-abc-primary {
  background: var(--abc-red);
  border-color: var(--abc-red);
  color: var(--abc-white);
  font-weight: 600;
  padding: 0.65rem 1.5rem;
  border-radius: 4px;
}

.btn-abc-primary:hover {
  background: #c81920;
  border-color: #c81920;
  color: var(--abc-white);
}

.btn-abc-outline {
  background: transparent;
  border: 1.5px solid var(--abc-charcoal-dark);
  color: var(--abc-charcoal-dark);
  font-weight: 600;
  padding: 0.6rem 1.45rem;
  border-radius: 4px;
}

.btn-abc-outline:hover {
  background: var(--abc-charcoal-dark);
  color: var(--abc-white);
}

.btn-abc-green {
  background: var(--abc-green);
  border-color: var(--abc-green);
  color: var(--abc-white);
  font-weight: 600;
  padding: 0.65rem 1.5rem;
  border-radius: 4px;
}

.btn-abc-green:hover {
  background: #0c8a44;
  border-color: #0c8a44;
  color: var(--abc-white);
}

/* Header */
.abc-header {
  border-bottom: 1px solid var(--abc-border);
  background: var(--abc-white);
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* Bigger logo, same bar height: the brand link's own padding (Bootstrap
   default) is zeroed, and the navbar's own vertical padding (was py-2,
   8px top/bottom, in the markup -- moved here so it isn't a !important
   Bootstrap utility) is trimmed to 3px. What's saved goes straight to the
   image, so the header's total height stays exactly what it was. */
.abc-header .navbar {
  padding-top: 3px;
  padding-bottom: 3px;
}

.abc-header .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}

.abc-header .navbar-brand img {
  height: 64px;
  width: auto;
}

.abc-header .nav-link {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--abc-charcoal-dark);
  padding: 0.5rem 0.85rem;
}

.abc-header .nav-link:hover,
.abc-header .nav-link.active {
  color: var(--abc-red);
}

/* Footer */
.abc-footer {
  background: var(--abc-charcoal-dark);
  color: #d9d9d9;
  padding: 3rem 0 1.5rem;
}

.abc-footer a {
  color: #d9d9d9;
}

.abc-footer a:hover {
  color: var(--abc-white);
}

.abc-footer h6 {
  color: var(--abc-white);
  font-weight: 700;
  margin-bottom: 1rem;
}

.abc-footer .abc-footer-bottom {
  border-top: 1px solid #565757;
  margin-top: 2rem;
  padding-top: 1.25rem;
  font-size: 0.85rem;
  color: #a8a8a8;
}

/* Alerts / flash messages */
.abc-flash {
  border-radius: 4px;
  border: none;
}

/* Utility */
.text-abc-red { color: var(--abc-red); }
.text-abc-green { color: var(--abc-green); }
.bg-abc-off-white { background: var(--abc-off-white); }

/* Hero slider */
.hero-slider {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: var(--abc-white);
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.4s ease, transform 7s ease;
  z-index: 0;
}

.hero-slide.active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(115deg, rgba(15,15,15,.92) 0%, rgba(15,15,15,.82) 45%, rgba(15,15,15,.62) 100%);
}

.hero-content {
  position: relative;
  z-index: 3;
}

.hero-content h1,
.hero-content h2,
.hero-content h3 {
  color: var(--abc-white);
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.hero-content .lead {
  color: #ececec;
  text-shadow: 0 1px 8px rgba(0,0,0,.3);
}

/* Rotating hero headline -- one per background slide, toggled by app.js
   in sync with the slides. Inactive headlines are pulled out of flow and
   faded out; the active one sits in flow and defines the block height. */
.hero-headline-rotator {
  position: relative;
  min-height: 2.4em;
}

.hero-headline {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* Only the incoming headline animates (fades in over the space the old one
   just vacated). The outgoing one is hidden instantly -- no transition here
   -- so two different-length headlines never overlap mid-crossfade. */
.hero-headline.active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .45s ease;
}

@media (prefers-reduced-motion: reduce) {
  .hero-headline.active { transition: none; }
}

.hero-dots {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
}

.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.45);
  padding: 0;
  cursor: pointer;
  transition: all .3s ease;
}

.hero-dot.active {
  background: var(--abc-white);
  width: 26px;
  border-radius: 6px;
}

@media (max-width: 767.98px) {
  .hero-slider { min-height: 560px; }
}

/* Photo banners (pillar / club pages) */
.abc-photo-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  color: var(--abc-white);
  overflow: hidden;
}

.abc-photo-banner .abc-photo-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(15,15,15,.9) 0%, rgba(15,15,15,.75) 55%, rgba(15,15,15,.55) 100%);
}

.abc-photo-banner .container {
  position: relative;
  z-index: 1;
}

.abc-photo-banner h1,
.abc-photo-banner h2,
.abc-photo-banner h3 {
  color: var(--abc-white);
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.abc-photo-banner .lead {
  color: #ececec;
  text-shadow: 0 1px 8px rgba(0,0,0,.3);
}

/* Scroll-reveal transitions */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Card hover polish */
.abc-card-hover {
  transition: transform .25s ease, box-shadow .25s ease;
}

.abc-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

/* Icon badges */
.abc-icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 1rem;
}

.abc-icon-badge svg {
  width: 28px;
  height: 28px;
}

.abc-icon-badge--red { background: rgba(236,31,39,.1); color: var(--abc-red); }
.abc-icon-badge--green { background: rgba(16,164,83,.1); color: var(--abc-green); }
.abc-icon-badge--charcoal { background: rgba(77,78,78,.12); color: var(--abc-charcoal); }

.abc-pillar-card {
  border: 1px solid var(--abc-border);
  border-top: 3px solid transparent;
}

.abc-pillar-card--red { border-top-color: var(--abc-red); }
.abc-pillar-card--green { border-top-color: var(--abc-green); }
.abc-pillar-card--charcoal { border-top-color: var(--abc-charcoal); }

/* Numbered step badges (How Membership Works, etc.) */
.abc-step {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
}

.abc-step-number {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: var(--abc-charcoal-dark);
  color: var(--abc-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .9rem;
}

.abc-step + .abc-step {
  margin-top: .9rem;
}

/* Search input with icon */
.abc-search-input-group {
  position: relative;
}

.abc-search-input-group .abc-search-icon {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--abc-charcoal);
  opacity: .45;
  pointer-events: none;
  z-index: 4;
}

.abc-search-input-group input {
  padding-left: 2.75rem !important;
}

/* Category chip icon */
.abc-chip-icon {
  width: 15px;
  height: 15px;
  margin-right: .35rem;
  vertical-align: -2px;
  opacity: .7;
}

/* Decorative background blobs */
.abc-blob-bg {
  position: relative;
  overflow: hidden;
}

.abc-blob-bg::before,
.abc-blob-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}

.abc-blob-bg::before {
  width: 380px;
  height: 380px;
  background: rgba(236,31,39,.06);
  top: -140px;
  left: -120px;
}

.abc-blob-bg::after {
  width: 320px;
  height: 320px;
  background: rgba(16,164,83,.07);
  bottom: -120px;
  right: -100px;
}

.abc-blob-bg > * {
  position: relative;
  z-index: 1;
}

/* Footer social links */
.abc-social-links {
  display: flex;
  gap: .6rem;
}

.abc-social-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  color: #d9d9d9;
  transition: background .2s ease, color .2s ease, transform .2s ease;
  flex-shrink: 0;
}

.abc-social-icon svg {
  width: 18px;
  height: 18px;
}

.abc-social-icon:hover,
.abc-social-icon:focus-visible {
  background: var(--abc-red);
  color: var(--abc-white);
  transform: translateY(-2px);
}

/* Section eyebrow */
.abc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--abc-red);
  margin-bottom: .6rem;
}

.abc-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--abc-red);
  display: inline-block;
}

/* Phone number + country-code picker (registration, profile edit) */
.abc-phone-input .dropdown-toggle {
  flex: 0 0 auto;
  white-space: nowrap;
}

.abc-phone-country-menu {
  min-width: 260px;
  max-width: min(340px, 90vw);
}

@media (max-width: 400px) {
  .abc-phone-input .dropdown-toggle {
    padding-left: .5rem;
    padding-right: .5rem;
  }
}

/* Status badges (Credit Score history, Advertising, and any other customer-
   facing status list) — mirrors admin.css's .abc-badge so these render
   correctly outside the admin layout, which doesn't load admin.css. */
.abc-badge {
  display: inline-block;
  padding: .25em .6em;
  border-radius: 4px;
  font-size: .76rem;
  font-weight: 700;
  color: #fff;
}

.abc-badge-neutral { background: #8a8a8a; }
.abc-badge-info { background: #3a7ca5; }
.abc-badge-warn { background: #d98e04; }
.abc-badge-success { background: var(--abc-green); }
.abc-badge-danger { background: var(--abc-red); }

/* Supplier advertising: homepage/dashboard/supplier-page carousel */
.abc-ad-carousel-wrap {
  max-width: 100%;
}

.abc-ad-carousel {
  border: 1px solid var(--abc-border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.abc-ad-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  color: inherit;
  text-decoration: none;
  min-height: 120px;
}

/* A real banner image is the ad's whole message -- give it the full card
   width and let its own aspect ratio decide the height (auto), instead of
   squeezing it into a small fixed box next to the text. The max-height is
   only a safety cap against an unusually tall upload, not a target size. */
.abc-ad-card--banner {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
}

.abc-ad-card--banner .abc-ad-copy {
  padding: 1rem 1.25rem 1.25rem;
}

.abc-ad-card:hover {
  color: inherit;
  background: var(--abc-off-white);
}

.abc-ad-banner {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  display: block;
  background: var(--abc-off-white);
}

.abc-ad-card--banner .abc-ad-banner {
  border-radius: 10px 10px 0 0;
}

.abc-ad-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 6px;
}

.abc-ad-copy {
  min-width: 0;
}

.abc-ad-title {
  font-weight: 700;
  margin-bottom: .25rem;
}

.abc-ad-desc {
  color: #6c757d;
  font-size: .9rem;
  margin-bottom: .5rem;
}

.abc-ad-cta {
  display: inline-block;
  font-size: .85rem;
  font-weight: 700;
  color: var(--abc-red);
}

.abc-ad-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #adb5bd;
  margin-top: .4rem;
}

.abc-ad-carousel .carousel-control-prev,
.abc-ad-carousel .carousel-control-next {
  width: 3rem;
  opacity: .6;
}

.abc-ad-carousel .carousel-control-prev-icon,
.abc-ad-carousel .carousel-control-next-icon {
  filter: invert(1) grayscale(100);
  width: 1.5rem;
  height: 1.5rem;
}

.abc-ad-carousel .carousel-indicators {
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .abc-ad-card:not(.abc-ad-card--banner) {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* Supplier advertising: closeable sticky-bottom bar (site-wide) */
.abc-ad-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background: var(--abc-charcoal-dark, #2b2b2b);
  color: #fff;
  display: flex;
  align-items: center;
  padding: .5rem 2.5rem .5rem 1rem;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .15);
}

.abc-ad-sticky[hidden] {
  display: none;
}

.abc-ad-sticky-track {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 1.6rem;
}

.abc-ad-sticky-item {
  display: none;
  align-items: center;
  gap: .6rem;
  color: #fff;
  text-decoration: none;
}

.abc-ad-sticky-item.active {
  display: flex;
}

.abc-ad-sticky-item:hover {
  color: #fff;
  opacity: .9;
}

.abc-ad-sticky-item .abc-ad-label {
  color: rgba(255, 255, 255, .55);
  margin-top: 0;
  flex-shrink: 0;
}

.abc-ad-sticky-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}

/* A banner (unlike the small square logo) is the ad's actual creative --
   size it up to something a bottom bar can carry, and let its own aspect
   ratio pick the width so wide leaderboard-style and taller poster-style
   uploads both render at their natural shape instead of a fixed crop. */
.abc-ad-sticky-banner {
  height: auto;
  max-height: 88px;
  width: auto;
  max-width: min(60vw, 320px);
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .abc-ad-sticky-banner {
    max-height: 52px;
    max-width: 50vw;
  }
}

.abc-ad-sticky-title {
  font-weight: 600;
  font-size: .9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.abc-ad-sticky-cta {
  font-size: .8rem;
  font-weight: 700;
  /* White, not brand red -- on this dark bar, red text can't clear 4.5:1
     no matter how it's shaded (see the --abc-red comment above). White
     already gives 13:1+ here. */
  color: var(--abc-white);
  flex-shrink: 0;
  white-space: nowrap;
}

.abc-ad-sticky-close {
  position: absolute;
  top: 50%;
  right: .5rem;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  padding: .25rem .5rem;
  cursor: pointer;
}

@media (max-width: 575.98px) {
  .abc-ad-sticky-cta {
    display: none;
  }
}