/* ==========================================================================
   CentPay — shared components
   --------------------------------------------------------------------------
   Small patterns that used to be repeated as hand-written inline SVG in every
   template. Loaded after main.css so it can refine legacy rules, and before
   the per-page stylesheets.
   ========================================================================== */

/* --- Check list --------------------------------------------------------
   Replaces the ~40-line inline SVG badge that was pasted once per bullet on
   the home and about pages. */
.xb-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.xb-check-list li {
  position: relative;
  margin-bottom: var(--space-sm);
  padding-left: 32px;
  color: var(--color-default);
  line-height: var(--leading-body);
}

.xb-check-list li::before {
  content: "\f058"; /* fa-check-circle */
  font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 18px;
  line-height: inherit;
  color: var(--color-primary);
}

.xb-check-list--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
}

.xb-check-list--inline li {
  margin-bottom: 0;
}

/* --- Blockquote --------------------------------------------------------
   The attribution was a bare <span>; it is a <cite> now, so it needs the
   same treatment main.css gives `blockquote span`, dash rule included. */
blockquote cite {
  display: inline-block;
  position: relative;
  padding-left: 27px;
  color: var(--color-default);
  font-size: var(--text-lg);
  font-style: normal;
  font-weight: 500;
}

blockquote cite::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 1px;
  background-color: var(--color-default);
}

/* --- Utilities ---------------------------------------------------------
   A handful of spacing helpers used by the templates, expressed as tokens. */
.mb-25 {
  margin-bottom: var(--space-md);
}

.section-lead {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: var(--color-default);
}

/* --- Screen-reader-only text ------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Footer widgets -----------------------------------------------------
   These headings carried an inline `color: var(--color-primary)` in the old
   template; the rule lives here now. */
.xb-item--widget-title {
  display: block;
  margin-bottom: var(--space-sm);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
}

.xb-footer-wrap .xb-item--links {
  flex: 0 1 auto;
}

.xb-footer-wrap .xb-item--about {
  flex: 1 1 520px;
  max-width: 660px;
}

.xb-footer-wrap .xb-item--about p + p {
  margin-top: var(--space-sm);
}

.xb-footer-wrap .xb-item--help {
  flex: 0 1 auto;
}

@media (max-width: 991px) {
  .xb-footer-wrap .xb-item--about {
    flex-basis: 100%;
  }
}

/* ==========================================================================
   Theme details preserved through the refactor
   --------------------------------------------------------------------------
   Where a template element changed type (a <div> that became a heading, an
   inline SVG that became an icon) main.css no longer matches it. These rules
   restore the original appearance without reintroducing inline styles.
   ========================================================================== */

/* The colour splash under the mobile-app panel. main.css positions this
   absolutely at bottom:-209px; the template overrode that inline so it sits
   in the flow. */
.feature .feature-shape {
  position: static;
}

/* "Why Choose Us?" is a real section heading now. main.css leaves the inner
   span's size to inheritance, so the heading must not impose h2's 32px. */
.patners-title--heading {
  font-size: var(--text-base);
  font-weight: 500;
}

/* Hero standfirst — previously an <h6>, so it inherited the heading colour
   and family. */
.hero__subtitle {
  margin-top: 20px;
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

/* Contact cards — the card title is an <h2> for correct document outline,
   but keeps the visual weight of the original <h3>. */
.contact-info__item h2 {
  margin-bottom: 18px;
  font-size: 20px;
  line-height: 24px;
}

/* The "what makes CentPay unique" list flowed inline in the original theme.
   .xb-check-list is a stacked list by default, so restore the inline flow
   in this one context. */
.about-wrap .xb-check-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 90px;
  row-gap: 12px;
}

.about-wrap .xb-check-list li {
  margin-bottom: 21px;
}

@media (max-width: 1199px) {
  .about-wrap .xb-check-list {
    column-gap: 40px;
  }
}

/* Mobile-app eyebrow: the flame is an icon font now, not inline SVG. */
.mobile-crypto .xb-item--sub-title i {
  margin-right: 8px;
  color: var(--color-danger);
}

/* main.css sizes `.them-btn .btn_icon svg` via the fill attribute; the arrow
   uses currentColor now so it tracks the button's text colour on hover. */
.them-btn .btn_icon svg {
  color: inherit;
}

/* --- About section artwork ---------------------------------------------
   The USDT render had no width constraint, so it painted at its full
   1024×1024 and hung ~350px past the right edge of the viewport — about a
   third of the image was simply cut off. Sizing it to the column it sits
   beside keeps the intended bleed without losing the artwork. */
.about .about-img img {
  width: min(620px, 44vw);
  height: auto;
  right: -40px;
  top: -60px;
}

@media only screen and (min-width: 1200px) and (max-width: 1500px) {
  .about .about-img img {
    width: min(560px, 44vw);
    right: -30px;
  }
}

@media (max-width: 1199px) {
  .about .about-img img {
    width: min(460px, 46vw);
    right: -20px;
    top: -20px;
  }
}

@media (max-width: 991px) {
  .about .about-img img {
    width: min(420px, 72vw);
    right: auto;
    top: 0;
    margin: 0 auto -60px;
    display: block;
  }
}

/* ==========================================================================
   Scrollbars
   --------------------------------------------------------------------------
   Previously only `body` was styled — a flat 7px amber bar on a grey track
   that sat off-palette, had no hover feedback, and left every inner scroller
   (the mobile drawer, any overflow container) with the OS default.

   These rules are unprefixed so they reach every scrolling element, and are
   paired with the standard `scrollbar-*` properties for Firefox.
   ========================================================================== */

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* WebKit and Chromium */
::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

/* The transparent border plus `background-clip` insets the thumb, so it reads
   as a slim pill floating in the track rather than filling it edge to edge. */
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 2px solid transparent;
  border-radius: 100px;
  background-clip: content-box;
  transition: background-color var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active);
  background-clip: content-box;
}

/* Where both axes scroll, the corner should not fall back to system grey. */
::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

/* The drawer sits on a slightly lighter ground than the page, so its track
   matches that instead of the page ink. */
.drawer__panel {
  scrollbar-color: var(--scrollbar-thumb) var(--color-bg-alt);
}

.drawer__panel::-webkit-scrollbar-track,
.drawer__panel::-webkit-scrollbar-corner {
  background: var(--color-bg-alt);
}