/* Unified BE FORWARD-style UI for inner page content */

/* ── Page body normalization ─────────────────────────────────── */

body.bf-site[class*="rj-"],
body.bf-site.guest-invoice-page,
body.bf-site.blog-post-page,
body.bf-site.car-detail-page,
body.bf-site.bf-detail-page {
  background: var(--bf-page) !important;
  font-family: var(--bf-font) !important;
  color: var(--bf-black) !important;
}

body.bf-site[class*="rj-"] main,
body.bf-site .bf-page-main {
  background: transparent;
}

/* ── Buttons ─────────────────────────────────────────────────── */

body.bf-site .rj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--bf-radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

body.bf-site .rj-btn--solid {
  background: var(--bf-orange);
  color: #fff !important;
  border-color: var(--bf-orange);
  box-shadow: 0 4px 14px rgba(0, 71, 255, 0.25);
}

body.bf-site .rj-btn--solid:hover {
  background: var(--bf-orange-d);
  border-color: var(--bf-orange-d);
  transform: translateY(-1px);
}

body.bf-site .rj-btn--ghost {
  background: #fff;
  color: var(--bf-black) !important;
  border-color: var(--bf-line);
}

body.bf-site .rj-btn--ghost:hover {
  border-color: var(--bf-orange);
  color: var(--bf-orange) !important;
}

body.bf-site .rj-btn--light {
  background: #fff;
  color: var(--bf-black) !important;
}

body.bf-site .rj-btn--compact {
  padding: 10px 16px;
  font-size: 12px;
}

/* ── Pillar bars ─────────────────────────────────────────────── */

body.bf-site [class$="-pillars"] {
  padding: 0 0 24px;
  background: var(--bf-page);
}

body.bf-site [class$="-pillar-bar"] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  background: #fff;
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius);
  padding: 8px;
  box-shadow: var(--bf-shadow);
}

body.bf-site [class$="-pillar"] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--bf-radius-sm);
  text-decoration: none;
  color: inherit !important;
  transition: background 0.15s ease;
}

body.bf-site [class$="-pillar"]:hover {
  background: var(--bf-orange-soft);
}

body.bf-site [class$="-pillar"] > i {
  width: 36px;
  height: 36px;
  border-radius: var(--bf-radius-sm);
  background: var(--bf-orange-soft);
  color: var(--bf-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

body.bf-site [class$="-pillar"] span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.bf-site [class$="-pillar"] strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--bf-black);
}

body.bf-site [class$="-pillar"] em {
  font-style: normal;
  font-size: 11px;
  color: var(--bf-muted);
}

/* ── Section headers / eyebrows ──────────────────────────────── */

body.bf-site [class$="-eyebrow"],
body.bf-site [class$="-eyebrow-dark"],
body.bf-site .rj-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bf-orange) !important;
  margin: 0 0 10px;
}

body.bf-site [class$="-section-head"] h2,
body.bf-site [class$="-panel-head"] h2 {
  color: var(--bf-black);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ── Content panels & cards ──────────────────────────────────── */

body.bf-site [class$="-main"],
body.bf-site [class$="-layout"] {
  background: var(--bf-page);
}

body.bf-site [class$="-panel"],
body.bf-site [class$="-bank-panel"],
body.bf-site [class$="-side-card"],
body.bf-site [class$="-info-card"],
body.bf-site [class$="-mission-card"],
body.bf-site [class$="-value"],
body.bf-site [class$="-service"],
body.bf-site [class$="-unit"],
body.bf-site .car-card {
  border-color: var(--bf-line) !important;
  border-radius: var(--bf-radius) !important;
  box-shadow: var(--bf-shadow) !important;
}

body.bf-site [class$="-bank-panel"],
body.bf-site [class$="-instructions-panel"],
body.bf-site [class$="-office-card"]:not(.abt-office-card),
body.bf-site [class$="-cta-main"] {
  background: #fff;
}

/* ── Forms ───────────────────────────────────────────────────── */

body.bf-site .lgn-field label,
body.bf-site .reg-field label,
body.bf-site .auth-form label,
body.bf-site .form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--bf-grey);
  margin-bottom: 6px;
}

body.bf-site .lgn-field input,
body.bf-site .reg-field input,
body.bf-site .reg-field select,
body.bf-site .auth-form input,
body.bf-site .form-group input,
body.bf-site .form-group textarea,
body.bf-site .form-group select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius-sm);
  font-family: inherit;
  font-size: 14px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.bf-site .lgn-field input:focus,
body.bf-site .reg-field input:focus,
body.bf-site .auth-form input:focus,
body.bf-site .form-group input:focus,
body.bf-site .form-group textarea:focus {
  outline: none;
  border-color: var(--bf-orange);
  box-shadow: 0 0 0 3px rgba(0, 71, 255, 0.15);
}

body.bf-site .lgn-submit,
body.bf-site .reg-submit,
body.bf-site .auth-submit {
  width: 100%;
  margin-top: 8px;
}

body.bf-site [class$="-divider"],
body.bf-site .auth-page-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 24px;
  color: var(--bf-muted);
  font-size: 12px;
}

body.bf-site [class$="-divider"]::before,
body.bf-site [class$="-divider"]::after,
body.bf-site .auth-page-divider::before,
body.bf-site .auth-page-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bf-line);
}

body.bf-site [class$="-switch"],
body.bf-site .auth-switch {
  padding: 0 24px 20px;
  font-size: 13px;
  color: var(--bf-muted);
  text-align: center;
}

body.bf-site [class$="-switch"] a,
body.bf-site .auth-switch a {
  color: var(--bf-blue) !important;
  font-weight: 600;
}

body.bf-site [class$="-switch"] a:hover,
body.bf-site .auth-switch a:hover {
  color: var(--bf-orange) !important;
}

/* ── Section backgrounds ─────────────────────────────────────── */

body.bf-site [class$="-section-alt"]:not(.abt-section-alt) {
  background: var(--bf-bg-soft) !important;
}

body.bf-site .abt-section-alt {
  background: #fff !important;
}

body.bf-site .reviews-bg,
body.bf-site .abt-reviews {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
}

body.bf-site .abt-cta {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
}

body.bf-site .abt-pillars,
body.bf-site .abt-stats,
body.bf-site .abt-creds {
  background: var(--bf-page) !important;
}

body.bf-site .abt-pillar-bar {
  background: #fff;
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius);
  box-shadow: var(--bf-shadow);
}

body.bf-site .abt-pillar-icon,
body.bf-site [class$="-pillar-icon"] {
  color: var(--bf-orange) !important;
  background: var(--bf-orange-soft) !important;
}

body.bf-site .abt-value-icon,
body.bf-site [class$="-service-icon"],
body.bf-site [class$="-kpi-icon"] {
  background: var(--bf-orange-soft) !important;
  color: var(--bf-orange) !important;
}

body.bf-site .abt-value-accent {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
}

body.bf-site [class$="-value-accent"]:not(.abt-value-accent) {
  background: linear-gradient(135deg, var(--bf-orange) 0%, var(--bf-orange-d) 100%) !important;
}

/* ── Stats / KPI bars ────────────────────────────────────────── */

body.bf-site [class$="-stats"],
body.bf-site [class$="-kpi-grid"],
body.bf-site .abt-kpi-grid {
  background: var(--bf-page);
}

body.bf-site [class$="-kpi"],
body.bf-site .abt-kpi {
  background: #fff;
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius);
  box-shadow: var(--bf-shadow);
}

body.bf-site [class$="-kpi-num"]:not(.abt-kpi-num),
body.bf-site [class$="-kpi-icon"]:not(.abt-kpi-icon) {
  color: var(--bf-orange) !important;
}

body.bf-site .abt-kpi-num {
  color: var(--bf-black) !important;
}

/* ── CTA sections ────────────────────────────────────────────── */

body.bf-site [class$="-cta"]:not(.abt-cta) {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
}

body.bf-site [class$="-cta"] .rj-btn--solid {
  background: var(--bf-orange);
}

body.bf-site [class$="-cta"] .rj-btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff !important;
}

/* ── 404 / empty states ──────────────────────────────────────── */

body.bf-site .bf-empty-page {
  text-align: center;
  padding: 48px 0 64px;
}

body.bf-site .bf-empty-page__code {
  font-size: clamp(4rem, 12vw, 6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--bf-orange);
  margin: 0 0 8px;
}

body.bf-site .bf-empty-page h2 {
  margin: 0 0 10px;
  font-size: 1.5rem;
  color: var(--bf-black);
}

body.bf-site .bf-empty-page p {
  color: var(--bf-muted);
  margin: 0 0 24px;
}

body.bf-site .bf-empty-page__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  body.bf-site [class$="-pillar-bar"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  body.bf-site [class$="-pillar-bar"] {
    grid-template-columns: 1fr;
  }
}