/* ==========================================================================
   forpay-pro.css — the desktop restyle layer.

   Scoped entirely to `body.fp-pro`, so it is one <link> and one class per
   page, and removing them puts the old look back untouched.

   What it changes, and why:
     · the tall gradient hero on every page becomes a compact header band —
       a banner that size is a phone pattern; on a 1440px screen it pushes the
       actual work below the fold for no information
     · cards go flat: a hairline border instead of a drop shadow, tighter
       padding, smaller radius. Shadows stack badly when a page has six cards
     · one wider container and a denser type scale, because this is a desktop
       app being read at arm's length, not a phone at 375px
     · the account control in the navbar, which is where the wallet balance
       went when its card was removed
   ========================================================================== */

/* ---- shell --------------------------------------------------------------- */
body.fp-pro {
  font-size: .9375rem;
}
.fp-pro .container { max-width: 1320px; }

.fp-pro .navbar {
  padding-top: .4rem;
  padding-bottom: .4rem;
  box-shadow: 0 1px 0 var(--bs-border-color);
}
.fp-pro .navbar-brand { font-size: 1.05rem; }
.fp-pro .navbar .nav-link {
  font-size: .875rem;
  padding-inline: .7rem;
  border-radius: .4rem;
}
.fp-pro .navbar .nav-link.active {
  background: var(--bs-secondary-bg);
  font-weight: 600;
}

/* ---- page header ---------------------------------------------------------
   The masthead keeps its accent, but as a band: one line of title, one line
   of context, actions on the right. */
.fp-pro .fp-pagehead {
  border-radius: .75rem !important;
  padding: 1.15rem 1.5rem !important;
  margin-bottom: 1.25rem !important;
  box-shadow: none !important;
}
.fp-pro .fp-pagehead h1 {
  font-size: 1.35rem !important;
  margin-bottom: .15rem !important;
}
.fp-pro .fp-pagehead p { font-size: .85rem; }
/* The oversized watermark glyph is decoration that only reads at phone size. */
.fp-pro .fp-pagehead > .bi:first-child { font-size: 8rem !important; opacity: .05 !important; }
.fp-pro .fp-pagehead .badge { font-size: .62rem; }
.fp-pro .fp-pagehead .btn { --bs-btn-padding-y: .35rem; --bs-btn-font-size: .82rem; }

/* ---- cards ---------------------------------------------------------------- */
.fp-pro .card {
  border: 1px solid var(--bs-border-color) !important;
  box-shadow: none !important;
  border-radius: .6rem;
}
.fp-pro .card .card-header {
  padding-top: .7rem;
  padding-bottom: .7rem;
  background: var(--bs-body-bg);
}
.fp-pro .card .card-body { padding: 1.1rem 1.25rem; }
.fp-pro .card .card-body.p-4 { padding: 1.25rem !important; }
.fp-pro .list-group-item { padding-top: .6rem; padding-bottom: .6rem; }

.fp-pro .h5, .fp-pro h2.h5 { font-size: 1.05rem; }
.fp-pro .h6, .fp-pro .card-header .h6 { font-size: .92rem; }

/* Section headings inside the SEO pages read as a document, not as shouts. */
.fp-pro section.card + section.card { margin-top: 1rem !important; }

/* ---- breadcrumb ----------------------------------------------------------- */
.fp-pro .breadcrumb { font-size: .8rem; margin-bottom: 1rem !important; }

/* ---- the account control -------------------------------------------------- */
.fp-avatar-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--bs-border-color); background: var(--bs-body-bg);
  border-radius: 999px; padding: .2rem .6rem .2rem .2rem;
  color: var(--bs-body-color); line-height: 1;
}
.fp-avatar-btn:hover { background: var(--bs-secondary-bg); }
.fp-avatar-btn:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.fp-avatar {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary);
  font-weight: 700; font-size: .8rem;
}
.fp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fp-avatar-lg { width: 42px; height: 42px; font-size: 1rem; }
.fp-avatar-meta { flex-direction: column; align-items: flex-start; max-width: 11rem; }
.fp-avatar-name { font-size: .78rem; font-weight: 600; max-width: 11rem; }
.fp-avatar-bal { font-size: .72rem; color: var(--bs-secondary-color); font-weight: 600; }
.fp-avatar-caret { font-size: .6rem; color: var(--bs-secondary-color); }

.fp-profile-menu {
  min-width: 17rem; padding: 0; overflow: hidden;
  border: 1px solid var(--bs-border-color); border-radius: .7rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
}
.fp-profile-head {
  display: flex; align-items: center; gap: .65rem;
  padding: .85rem 1rem; border-bottom: 1px solid var(--bs-border-color);
}
.fp-profile-balance {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 0 .5rem; padding: .8rem 1rem;
  background: var(--bs-secondary-bg); border-bottom: 1px solid var(--bs-border-color);
}
.fp-profile-k { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--bs-secondary-color); }
.fp-profile-v { font-size: 1.15rem; font-weight: 800; color: var(--bs-success); }
.fp-profile-sub { grid-column: 1 / -1; font-size: .72rem; color: var(--bs-secondary-color); }
.fp-profile-links { padding: .35rem; }
.fp-profile-links .dropdown-item {
  display: flex; align-items: center; gap: .6rem;
  border-radius: .4rem; font-size: .86rem; padding: .5rem .6rem;
}
.fp-profile-links .dropdown-item i { font-size: .95rem; width: 1.1rem; text-align: center; }

@media (max-width: 991.98px) {
  .fp-pro .fp-pagehead { padding: 1rem 1.1rem !important; }
  .fp-pro .fp-pagehead h1 { font-size: 1.2rem !important; }
}

/* ==========================================================================
   .fp-prose — the legacy text pages (terms, privacy, refunds, about, …).

   Their markup was written for a 2022 theme that is no longer loaded: bare
   <h2>/<h3>/<ul>, a few hardcoded greys, and wrapper divs whose classes now
   style nothing. Rather than rewrite that markup — it carries legal wording
   that should not be reworded to suit a stylesheet — this normalises whatever
   it finds, and does it with theme tokens so the pages follow dark mode like
   everything else.
   ========================================================================== */
.fp-prose { max-width: 68ch; color: var(--bs-body-color); }
.fp-prose > *:first-child { margin-top: 0; }
.fp-prose > *:last-child  { margin-bottom: 0; }

.fp-prose h1, .fp-prose h2, .fp-prose h3, .fp-prose h4 {
  font-weight: 700; line-height: 1.3; margin: 2rem 0 .75rem;
}
.fp-prose h1 { font-size: 1.4rem; }
.fp-prose h2 { font-size: 1.15rem; }
.fp-prose h3 { font-size: 1rem; }
.fp-prose h4 { font-size: .94rem; }

.fp-prose p, .fp-prose li { font-size: .92rem; line-height: 1.7; }
.fp-prose p { margin-bottom: 1rem; }
.fp-prose ul, .fp-prose ol { margin: 0 0 1rem; padding-left: 1.35rem; }
.fp-prose li { margin-bottom: .4rem; }
/* `:not(.btn)` matters: `.fp-prose a` outweighs `.btn-primary`, so without it
   every link styled as a button lost its white label and rendered blue text
   on a blue fill. */
.fp-prose a:not(.btn) { color: var(--bs-primary); }
.fp-prose strong, .fp-prose b { font-weight: 600; }
.fp-prose hr { margin: 2rem 0; opacity: .25; }

.fp-prose img { max-width: 100%; height: auto; border-radius: .5rem; }
.fp-prose table { width: 100%; margin-bottom: 1rem; font-size: .88rem; }
.fp-prose table th, .fp-prose table td {
  padding: .5rem .65rem; border: 1px solid var(--bs-border-color); text-align: left;
}
.fp-prose table th { background: var(--bs-secondary-bg); font-weight: 600; }
/* A wide table must scroll on its own rather than push the page sideways. */
.fp-prose .table-responsive { overflow-x: auto; }

/* The legacy pages hardcode light greys inline and in old class names. Those
   are unreadable on a dark background, so the theme's own colours win. */
.fp-prose [style*="background"],
.fp-prose .term-bg,
.fp-prose .container-content,
.fp-prose .main-content-1 {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  width: auto !important;
  margin: 0 !important;
}
.fp-prose [style*="color:#"],
.fp-prose [style*="color: #"] { color: var(--bs-body-color) !important; }

/* FAQ-style question blocks (cashbackPolicy.php). */
.fp-prose .faq-page {
  font-size: 1rem; font-weight: 700; margin: 1.75rem 0 .5rem;
  padding-top: 1.25rem; border-top: 1px solid var(--bs-border-color);
}
.fp-prose .faq-page:first-of-type { border-top: 0; padding-top: 0; }
.fp-prose .faq-heading { display: none; }   /* duplicates the page's own h1 */

/* The legacy pages nest two `w-75 m-auto` wrappers inside each other, so the
   text ended up 56% of the card wide and pushed off-centre. Width utilities
   mean nothing inside a prose column — the column already has its own measure. */
.fp-prose .w-25, .fp-prose .w-50, .fp-prose .w-75 { width: auto !important; }
.fp-prose .content-001,
.fp-prose .container-content,
.fp-prose .main-top-term {
  width: auto !important; max-width: none !important;
  margin-left: 0 !important; margin-right: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
/* A Bootstrap .container inside the card would add its own gutters on top of
   the card's padding, and cap the width a second time. */
.fp-prose > .container, .fp-prose .container, .fp-prose .container-fluid {
  width: auto !important; max-width: none !important;
  padding-left: 0 !important; padding-right: 0 !important;
  margin-left: 0 !important; margin-right: 0 !important;
}

/* ---------------------------------------------------------------------------
   Legacy panels in dark mode.

   The 2022 pages paint their panels with `.bg-white` and `.bg-light`, which in
   Bootstrap 5.3 are literal colours, not theme tokens: `--bs-light-rgb` is the
   one variable the dark theme deliberately does NOT flip, and `.bg-white` was
   never a variable at all. Their TEXT, though, comes from `--bs-body-color`,
   which does flip — so in dark mode those panels rendered near-white text on a
   white card. Unreadable, and the reason the pages "didn't match the theme".

   Only the surfaces are re-pointed at theme tokens; the light theme is left
   exactly as it was. The border replaces the shadow the legacy `.shadow-md`
   class used to give these panels — that class lives in the old stylesheet the
   new shell no longer loads, so without it the panels had no edge at all.
   --------------------------------------------------------------------------- */
[data-bs-theme="dark"] .fp-pro .bg-white,
[data-bs-theme="dark"] .fp-pro .bg-light {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .fp-pro .accordion-body.bg-white {
  background-color: transparent !important;
}

/* `.shadow-md` is not a Bootstrap class — it came from the old theme. Give the
   panels that use it a real edge in both themes. */
.fp-pro .fp-prose .shadow-md,
.fp-pro .fp-prose .bg-white {
  border: 1px solid var(--bs-border-color);
  border-radius: .6rem;
}

/* Bootstrap 5.3 renders `.text-muted` from --bs-secondary-color, which is
   theme-aware, but the legacy pages also hard-code a few dark text colours. */
[data-bs-theme="dark"] .fp-pro .fp-prose .text-dark,
[data-bs-theme="dark"] .fp-pro .fp-prose .text-black {
  color: var(--bs-emphasis-color) !important;
}

/* ---------------------------------------------------------------------------
   Wide prose, and the legacy `featured-box` layout.

   The 68ch measure above is right for a policy the visitor reads top to bottom,
   and wrong for a page laid out in columns — on contactus.php it squeezed a
   two-column map-and-address grid into 643px of a 1170px card, leaving half the
   page empty. `$fpWide = true` on such a page turns the measure off while
   keeping every other prose rule.
   --------------------------------------------------------------------------- */
.fp-prose.fp-prose-wide { max-width: none; }

/* `.featured-box.style-1` put its icon in a block div, so with the old theme's
   stylesheet gone the icon sat alone on a line above the heading it labels.
   Lay it out as the leading column it was drawn to be. */
/* The icon, the heading and the body are three flat siblings — there is no
   wrapper to put the text in — so the row wraps instead: icon and heading
   share the first line, the body takes the whole next one and is indented to
   line up under the heading. */
.fp-pro .featured-box.style-1 {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: .85rem; margin-bottom: 1.75rem;
}
.fp-pro .featured-box.style-1 .featured-box-icon {
  flex: 0 0 auto; width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 1rem;
  background: var(--bs-primary-bg-subtle); color: var(--bs-primary);
}
.fp-pro .featured-box.style-1 > h3 {
  flex: 1 1 0; min-width: 0; margin: 0; font-size: 1rem;
}
/* `> h2` as well as `> p`: the phone block is written `<p><h2>…</h2></p>`, and
   the parser closes the paragraph at the heading, so the h2 ends up a direct
   sibling rather than the paragraph's child. */
.fp-pro .featured-box.style-1 > p,
.fp-pro .featured-box.style-1 > h2 {
  flex: 1 1 100%; margin: .4rem 0 0; padding-left: 3.1rem;
}
.fp-pro .featured-box.style-1 > h2 { font-size: .92rem; font-weight: 400; }
.fp-pro .featured-box.style-1 > p:empty { display: none; }

/* The map panel has to have a height of its own: its only content is an iframe
   set to `h-100`, and a percentage height against an auto-height parent is
   nothing at all — which is why the map column rendered as an empty grey box. */
.fp-pro #content iframe[src*="maps.google"] {
  min-height: 420px; border: 0; border-radius: .5rem; display: block;
}

/* ---------------------------------------------------------------------------
   distributorship.php's feature cards.

   `.big-icon` is the giant faded watermark in the corner of each card and
   `.icon2` the real icon above the heading — but neither class was ever defined
   in a stylesheet the site still loads, so the two rendered identically and
   every card showed its icon twice at the same size. Restoring the watermark is
   what the markup was written for.
   --------------------------------------------------------------------------- */
.fp-pro .card.features { min-height: 100%; }
.fp-pro .card.features .icon2 { display: block; margin-bottom: .5rem; }
.fp-pro .card.features .big-icon {
  position: absolute; right: -1rem; bottom: -1.5rem;
  font-size: 5.5rem; line-height: 1; opacity: .07; pointer-events: none;
}

/* The legacy pages wrap their copy in a `.container(-fluid) p-5 bg-light` that
   used to be the page's own panel against the old grey page background. Inside
   the prose card that panel is the card — so a second one nested inside reads
   as a box in a box, with its own padding stacked on the card's. */
.fp-prose .container.bg-light,
.fp-prose .container-fluid.bg-light,
.fp-prose > .container-fluid,
.fp-prose > .container {
  background: none !important; border: 0 !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
}

/* refund-policy.php centres every heading with `.text-center` while its body
   copy stays left-aligned, so each section title floated over its own bullets
   and the page read differently from terms and privacy beside it. In a reading
   column headings belong on the left; a page laid out in columns (`fp-prose-wide`)
   keeps its centred section titles, which is where they make sense. */
.fp-prose:not(.fp-prose-wide) h1.text-center,
.fp-prose:not(.fp-prose-wide) h2.text-center,
.fp-prose:not(.fp-prose-wide) h3.text-center,
.fp-prose:not(.fp-prose-wide) h4.text-center { text-align: left !important; }

/* The first heading sits several wrappers deep, so `> *:first-child` never
   reaches it and its `mt-5` opened a gap at the top of the card. */
.fp-prose > *:first-child :is(h1, h2, h3, h4):first-child { margin-top: 0; }

/* ---------------------------------------------------------------------------
   The login modal (partials/fp_login_modal.php).

   Kept here rather than in a per-page stylesheet because any page can include
   the partial — the point of it is that signing in never takes you off the page
   you were on.
   --------------------------------------------------------------------------- */
.fp-login-dialog { max-width: 26rem; }
.fp-login-head { background: var(--fp-masthead); padding: 1.5rem 1.5rem 1.75rem; }

/* The reason the person is being asked. Framed as information rather than an
   error, because being signed out is not a mistake they made. */
.fp-login-reason {
  font-size: .82rem; border-radius: .6rem; padding: .6rem .85rem; margin-bottom: 1.25rem;
  background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis);
  border: 1px solid var(--bs-info-border-subtle);
}

/* Six boxes have to fit a 320px phone without the row wrapping or the digits
   clipping, so they size from the space available rather than a fixed width. */
#fpLoginOtpGroup .form-control {
  flex: 1 1 0; min-width: 0; padding-inline: .25rem;
  font-size: 1.15rem; letter-spacing: 0;
}

@media (max-width: 400px) {
  .fp-login-head { padding: 1.25rem 1.25rem 1.5rem; }
  #fpLoginOtpGroup { gap: .35rem !important; }
}

/* ---------------------------------------------------------------------------
   The support button (partials/fp_support_fab.php).

   Fixed bottom-right on every page. It stays a pill with a visible word rather
   than a bare icon, because "a circle with a headset in it" is only obvious to
   people who already know what it is.
   --------------------------------------------------------------------------- */
.fp-support-fab {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1045;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.1rem; border-radius: 999px;
  background: var(--bs-primary); color: #fff; text-decoration: none;
  font-size: .9rem; font-weight: 600; line-height: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.fp-support-fab:hover,
.fp-support-fab:focus-visible {
  color: #fff; transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .34);
}
.fp-support-fab i { font-size: 1.15rem; }

/* z-index 1045 sits above page content and the sticky navbar (1030) but below
   modals (1055) and their backdrop (1050) — a support button floating over an
   open dialog would be both ugly and clickable when it should not be. */

@media (prefers-reduced-motion: reduce) {
  .fp-support-fab { transition: none; }
  .fp-support-fab:hover, .fp-support-fab:focus-visible { transform: none; }
}

/* On a phone the word costs a third of the thumb zone, so it becomes a circle —
   still labelled for screen readers by its title.
   The body gains room underneath so the last control on a page can always be
   scrolled out from under the button; a fixed element resting permanently on a
   plus/minus stepper is the classic FAB complaint. */
@media (max-width: 575.98px) {
  .fp-support-fab { padding: .8rem; right: 1rem; bottom: 1rem; }
  .fp-support-fab-label { display: none; }
  body.fp-pro { padding-bottom: 4.5rem; }
}

/* bus.php already has a filter FAB in this corner. Stack rather than overlap. */
.bus-fab { bottom: 5.5rem !important; }

/* ===========================================================================
   BRAND MARK
   ---------------------------------------------------------------------------
   The wordmark replaces the placeholder <i class="bi bi-hexagon-fill"> plus the
   word "ForPay" that stood in for a logo everywhere.

   images/forpay-mark.png is a TRANSPARENT derivative of images/forpay.png.
   The original is RGB with a solid white background, which would have shown as
   a white slab on this navbar -- it is dark in both themes. The white was keyed
   out by coverage rather than by a threshold, so the letter edges carry partial
   alpha and composite cleanly on any background; the white "PAY" inside the
   green block was left alone, and the counters of the O and R are genuinely
   transparent rather than white fills that only look right on a light page.

   The original stays where a solid background is wanted: schema.org's
   Organization logo and og:image.

   Height, not width, is what is set -- the aspect ratio is nearly 5:1 and a
   width would let the mark grow taller than the navbar on a narrow screen.
   =========================================================================== */
.fp-brand-mark {
  height: 2.1rem;
  width: auto;
  display: block;
  /* The mark is its own shape; nothing should hang off it. */
  max-width: min(58vw, 15rem);
  object-fit: contain;
}
.navbar-brand .fp-brand-mark { margin-block: -.15rem; }

/* Phones: the brand shares its row with the hamburger, so it gives way first. */
@media (max-width: 575.98px) {
  .fp-brand-mark { height: 1.8rem; }
}
@media (max-width: 359.98px) {
  .fp-brand-mark { height: 1.6rem; }
}

/* Standalone lockups (the login page, the login modal header) can breathe. */
.fp-brand-mark.is-lg { height: 3rem; max-width: min(72vw, 18rem); }