/* ============================================================
   WapiGrow — utilities.css
   Small, reusable utility classes extracted from inline style=""
   attributes that repeated across many pages (most heavily the 11
   industries/*.php pages, which are near-identical clones of one
   template). Each class is a mechanical 1:1 copy of the inline
   style it replaces — no visual changes, just relocation.
   ============================================================ */

.u-center-row   { justify-content: center; }
.u-flex-start   { justify-content: flex-start; }
.u-text-left    { text-align: left; }
.u-mx-auto      { margin: 0 auto; }
.u-max-820      { max-width: 820px; }
.u-lh-2         { line-height: 2; }
.u-fs-140       { font-size: 1.4rem; }
.u-italic-quote { font-size: 1.12rem; font-style: italic; }

/* Narrow centered section wrapper (testimonial cards, etc.) */
.u-section-narrow { max-width: 720px; margin: 0 auto; text-align: center; }

/* Transparent/outline CTA button, for use on dark hero backgrounds
   (pairs with wg-btn/wg-btn-lg — same look as wg-btn-outline-white,
   just used ad hoc across the industries pages before this). */
.u-hero-outline-btn { border: 1px solid rgba(255,255,255,0.4); background: transparent; color: #fff; }

/* Step-number / badge circle (thank-you.php, pos.php how-it-works lists) */
.u-badge-circle {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; flex-shrink: 0;
}

/* Stat/price highlight text (pos.php, thank-you.php) */
.u-stat-highlight { font-size: 24px; font-weight: 700; color: var(--color-green); }

/* Flex row with a gap, wrapping, centered — the 403/404/500/use-cases
   "back to home" style button rows */
.u-btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Initially-hidden element, later revealed via el.style.display = '...'
   in JS — an inline style assignment always overrides a class rule, so
   this is safe to use anywhere a script toggles visibility this way. */
.u-hidden { display: none; }

/* Zero out a .section's default top padding — used where a section
   immediately follows a hero/header with its own spacing. */
.u-pt-0 { padding-top: 0; }

.u-flex-1 { flex: 1; }

/* Exact-value spacing utilities — mechanical extraction of the
   specific margin values found across the public-site pages in this
   batch. Not a rounded/approximate scale: each matches a real
   pre-existing inline-style value exactly (1rem and 16px are the same
   computed value at the default root font-size, so share one class). */
.u-mt-015r { margin-top: .15rem; }
.u-mt-8    { margin-top: 8px; }
.u-mt-10   { margin-top: 10px; }
.u-mt-085r { margin-top: .85rem; }
.u-mt-16   { margin-top: 16px; }
.u-mt-24   { margin-top: 24px; }
.u-mt-32   { margin-top: 32px; }
.u-mt-40   { margin-top: 40px; }
.u-mt-3r   { margin-top: 3rem; }
.u-mt-075r { margin-top: .75rem; }
.u-mt-04r  { margin-top: .4rem; }

/* Hidden honeypot field wrapper — real users never see or tab into
   this; bots that fill every field trip it. Shared by every signup
   form's spam-guard (client/signup.php, pos/signup.php, ...). */
.u-honeypot { position: absolute; left: -9999px; top: -9999px; }

.u-nowrap { white-space: nowrap; }

.u-mb-4    { margin-bottom: 4px; }
.u-mb-6    { margin-bottom: 6px; }
.u-mb-8    { margin-bottom: 8px; }
.u-mb-12   { margin-bottom: 12px; }
.u-mb-16   { margin-bottom: 16px; }
.u-mb-24   { margin-bottom: 24px; }
.u-mb-32   { margin-bottom: 32px; }
.u-mb-125r { margin-bottom: 1.25rem; }
.u-mb-02r  { margin-bottom: .2rem; }
.u-mb-03r  { margin-bottom: .3rem; }

.u-ml-05r  { margin-left: .5rem; }
.u-fs-08r  { font-size: .8rem; }

/* Recurring admin-portal form field label patterns (client/products.php,
   client/profile.php, and others) — two distinct value-sets found, each
   an exact mechanical match for the inline style it replaces. */
.u-field-label-78 { font-size: .78rem; font-weight: 600; display: block; margin-bottom: .3rem; }
.u-field-label-80 { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .35rem; }

/* Recurring "large touch-target" button min-height (client/api-settings.php,
   client/bot-settings.php Save buttons) — exact value match, used 2+ places. */
.u-minh-44 { min-height: 44px; }

/* Full-width button — recurs across many client/ admin forms
   (setup.php, services.php, inbox.php, broadcast.php, support.php). */
.u-w-full { width: 100%; }