/* =============================================================================
   Bluefin Design System - Components  (Phase 2 / Workstream 1)
   -----------------------------------------------------------------------------
   All component classes are bf- prefixed, BEM-structured (block / __element /
   --modifier / .is-state), and reference tokens.css ONLY (no hard-coded colors,
   spacing, or sizes). None reuse a Bootstrap class (.btn, .form-control, .modal,
   .alert, .label, .badge, .table, .pagination, .nav, .panel, .col-*) or the
   legacy .bf-btn-default / .bf-form-group names that already exist, so they
   coexist with Bootstrap during the migration. Nothing on a page consumes these
   until WS3 adopts them.

   No em dash (U+2014) anywhere (CI style guard).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Button  .bf-btn
   -------------------------------------------------------------------------- */
.bf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bf-space-2);
  padding: var(--bf-space-2) var(--bf-space-4);
  border: 1px solid var(--bf-color-border-strong);
  border-radius: var(--bf-radius-md);
  background-color: var(--bf-color-surface);
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-medium);
  line-height: var(--bf-leading-tight);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  color: var(--bf-color-text);
  cursor: pointer;
}

/* Bare-variant hover: declared BEFORE the variant :hover rules so equal
   specificity lets each variant's own hover win on source order. */
.bf-btn:hover {
  background-color: var(--bf-color-surface-alt);
  border-color: var(--bf-color-text-muted);
}

.bf-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
}

.bf-btn:disabled,
.bf-btn.is-disabled {
  background-color: var(--bf-color-surface-alt);
  border-color: var(--bf-color-border);
  color: var(--bf-color-text-muted);
  box-shadow: none;
  cursor: not-allowed;
}

/* Variants. THE EDITORIAL RULE (conventions.md 5.4): the primary action is an
   ink plate; brand teal never carries text (white-on-teal is 2.78:1, WCAG fail).
   --primary and --ink are intentionally the same surface. */
.bf-btn--primary {
  background-color: var(--bf-brand-secondary);
  border-color: var(--bf-brand-secondary);
  color: var(--bf-color-text-inverse);
}

.bf-btn--primary:hover {
  background-color: var(--bf-color-ink-hover);
  border-color: var(--bf-color-ink-hover);
  color: var(--bf-color-text-inverse);
}

.bf-btn--secondary {
  background-color: var(--bf-color-surface);
  border-color: var(--bf-color-border-strong);
  color: var(--bf-color-text);
}

.bf-btn--secondary:hover {
  background-color: var(--bf-color-surface-alt);
  color: var(--bf-color-text);
}

/* Ink: the editorial solid button (charcoal plate, paper text). Use where the
   teal primary would carry TEXT - white-on-teal is 2.78:1 and fails WCAG AA;
   white-on-ink is 16.3:1. Teal stays an accent color, not a text surface. */
.bf-btn--ink {
  background-color: var(--bf-brand-secondary);
  border-color: var(--bf-brand-secondary);
  color: var(--bf-color-text-inverse);
}

.bf-btn--ink:hover {
  background-color: var(--bf-color-ink-hover);
  border-color: var(--bf-color-ink-hover);
  color: var(--bf-color-text-inverse);
}

.bf-btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--bf-color-primary-text);
}

.bf-btn--ghost:hover {
  background-color: var(--bf-color-surface-alt);
  color: var(--bf-color-primary-text);
}

.bf-btn--danger {
  background-color: var(--bf-color-danger);
  border-color: var(--bf-color-danger);
  color: var(--bf-color-text-inverse);
}

.bf-btn--danger:hover {
  background-color: var(--bf-color-danger-hover);
  border-color: var(--bf-color-danger-hover);
}

.bf-btn--link {
  padding: 0;
  background: transparent;
  border-color: transparent;
  color: var(--bf-color-primary-text);
  text-decoration: underline;
}

/* Press states: the shadow drops and solid variants deepen to ink-hover. */
.bf-btn:active:not(:disabled) {
  box-shadow: none;
}

.bf-btn--primary:active,
.bf-btn--ink:active {
  background-color: var(--bf-color-ink-hover);
}

.bf-btn--link:hover {
  color: var(--bf-color-text);
  text-decoration-thickness: 2px;
}

/* Bootstrap's .btn-default[disabled] paints bg #fff at 0,2,0 and turns the
   disabled modal Continue white-on-white. First rule keeps the enabled
   .btn-default leg on the ink plate; second (0,3,0, beats Bootstrap's 0,2,0)
   keeps disabled = the explicit disabled surface. */
.bf-scope .bf-btn--primary[disabled],
.bf-scope .bf-btn--primary:disabled,
.bf-scope .bf-btn--primary.btn-default {
  background-color: var(--bf-brand-secondary);
  border-color: var(--bf-brand-secondary);
  color: var(--bf-color-text-inverse);
}

.bf-scope .bf-btn--primary[disabled],
.bf-scope .bf-btn--primary:disabled {
  background-color: var(--bf-color-surface-alt);
  border-color: var(--bf-color-border);
  color: var(--bf-color-text-muted);
}

/* Sizes */
.bf-btn--sm {
  padding: var(--bf-space-1) var(--bf-space-3);
  font-size: var(--bf-text-sm);
}

.bf-btn--lg {
  padding: var(--bf-space-3) var(--bf-space-5);
  font-size: var(--bf-text-lg);
}

/* Loading state: dims the label; pair with an aria-busy attribute in markup. */
.bf-btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.bf-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--bf-radius-pill);
  color: var(--bf-color-on-primary);
  /* spin is gated in the motion grammar block; the static ring border is the
     reduced-motion affordance */
}

@keyframes bf-spin {
  to { transform: rotate(360deg); }
}

/* -----------------------------------------------------------------------------
   Form field  .bf-field (wrapper) + .bf-label / .bf-input / .bf-help
   -------------------------------------------------------------------------- */
.bf-field {
  display: block;
  margin-bottom: var(--bf-space-4);
}

.bf-label,
.bf-scope .bf-field > label {
  display: block;
  margin-bottom: var(--bf-space-1);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
  color: var(--bf-color-text);
}

.bf-label__required {
  color: var(--bf-color-danger);
}

.bf-input,
.bf-select,
.bf-textarea {
  display: block;
  width: 100%;
  padding: var(--bf-space-2) var(--bf-space-3);
  background-color: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border-strong);
  border-radius: var(--bf-radius-sm);
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  line-height: var(--bf-leading-normal);
  color: var(--bf-color-text);
  transition: border-color var(--bf-transition-fast),
    box-shadow var(--bf-transition-fast);
}

.bf-textarea {
  min-height: calc(var(--bf-space-10) + var(--bf-space-4));
  resize: vertical;
}

.bf-input:focus,
.bf-select:focus,
.bf-textarea:focus {
  outline: none;
  border-color: var(--bf-color-primary);
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
}

.bf-input:disabled,
.bf-select:disabled,
.bf-textarea:disabled {
  background-color: var(--bf-color-surface-sunken);
  cursor: not-allowed;
}

.bf-input::placeholder,
.bf-textarea::placeholder {
  color: var(--bf-color-text-muted);
}

.bf-help {
  display: block;
  margin-top: var(--bf-space-1);
  font-size: var(--bf-text-sm);
  color: var(--bf-color-text-muted);
}

/* Invalid state: set .bf-field--error on the wrapper. */
.bf-field--error .bf-input,
.bf-field--error .bf-select,
.bf-field--error .bf-textarea,
.bf-input.is-invalid {
  border-color: var(--bf-color-danger);
}

.bf-field--error .bf-help {
  color: var(--bf-color-danger);
}

/* JS-toggled inline error message inside a field (pairs with the "hide" class). */
.bf-field__error {
  display: block;
  margin-top: var(--bf-space-1);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
  color: var(--bf-color-danger);
}

/* Horizontal action row for one or more buttons. */
.bf-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-2);
  align-items: center;
  margin-top: var(--bf-space-3);
}

/* -----------------------------------------------------------------------------
   Card  .bf-card
   -------------------------------------------------------------------------- */
.bf-card {
  display: flex;
  flex-direction: column;
  background-color: var(--bf-color-paper);
  border: 1px solid var(--bf-color-border-strong);
  border-top: 3px solid var(--bf-brand-primary);
  border-radius: var(--bf-radius-md);
  box-shadow: var(--bf-shadow-sm);
  overflow: hidden;
}

.bf-card--flat {
  box-shadow: none;
}

/* Motion (gated): the lift/shadow transition lives in the consolidated
   motion grammar block; the state change snaps for reduced-motion users. */
.bf-card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--bf-shadow-md);
}

.bf-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background-color: var(--bf-color-surface-alt);
}

.bf-card__body {
  padding: var(--bf-space-4);
}

.bf-card__title {
  margin: 0 0 var(--bf-space-2);
  font-family: var(--bf-font-serif);
  font-size: var(--bf-text-lg);
  font-weight: var(--bf-weight-bold);
  line-height: var(--bf-leading-tight);
  color: var(--bf-color-text);
}

.bf-card__footer {
  margin-top: auto;
  padding: var(--bf-space-3) var(--bf-space-4);
  border-top: 1px solid var(--bf-color-border-strong);
  background-color: var(--bf-color-surface-alt);
}

/* Listing-card variant: price uses the accent color, meta is muted. */
.bf-card--listing .bf-card__price {
  font-size: var(--bf-text-xl);
  font-weight: var(--bf-weight-bold);
  color: var(--bf-brand-accent);
}

.bf-card--listing .bf-card__meta {
  font-size: var(--bf-text-sm);
  color: var(--bf-color-text-muted);
}

/* -----------------------------------------------------------------------------
   Table  .bf-table
   -------------------------------------------------------------------------- */
.bf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--bf-text-sm);
  color: var(--bf-color-text);
}

.bf-table th,
.bf-table td {
  padding: var(--bf-space-2) var(--bf-space-3);
  text-align: left;
  border-bottom: 1px solid var(--bf-color-border);
}

.bf-table thead th {
  background-color: var(--bf-color-surface-sunken);
  font-weight: var(--bf-weight-bold);
  color: var(--bf-color-text);
}

.bf-table--striped tbody tr:nth-child(even) {
  background-color: var(--bf-color-surface-alt);
}

.bf-table tbody tr:hover {
  background-color: var(--bf-color-surface-alt);
}

.bf-table--compact th,
.bf-table--compact td {
  padding: var(--bf-space-1) var(--bf-space-2);
}

/* -----------------------------------------------------------------------------
   Nav  .bf-nav
   -------------------------------------------------------------------------- */
.bf-nav {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.bf-nav--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--bf-space-4);
}

.bf-nav__link {
  display: block;
  padding: var(--bf-space-2) var(--bf-space-3);
  border-radius: var(--bf-radius-sm);
  color: var(--bf-color-text);
  text-decoration: none;
  font-weight: var(--bf-weight-medium);
  transition: background-color var(--bf-transition-fast),
    color var(--bf-transition-fast);
}

.bf-nav__link:hover {
  background-color: var(--bf-color-surface-alt);
  color: var(--bf-color-primary-text);
}

.bf-nav__link.is-active {
  color: var(--bf-color-primary-text);
  font-weight: var(--bf-weight-bold);
}

/* -----------------------------------------------------------------------------
   Modal  .bf-modal
   -------------------------------------------------------------------------- */
.bf-modal {
  position: fixed;
  inset: 0;
  z-index: var(--bf-z-modal);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: var(--bf-space-6) var(--bf-space-4);
  overflow-y: auto;
}

.bf-modal.is-open {
  display: flex;
}

.bf-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--bf-z-overlay);
  background-color: rgba(0, 0, 0, 0.5);
}

.bf-modal__dialog {
  position: relative;
  z-index: var(--bf-z-modal);
  width: 100%;
  max-width: 512px;
  background-color: var(--bf-color-surface);
  border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-shadow-lg);
  overflow: hidden;
}

.bf-modal__header,
.bf-modal__footer {
  padding: var(--bf-space-4);
}

.bf-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--bf-color-border);
}

.bf-modal__title {
  margin: 0;
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-xl);
  font-weight: var(--bf-weight-bold);
}

.bf-modal__body {
  padding: var(--bf-space-4);
}

.bf-modal__footer {
  display: flex;
  gap: var(--bf-space-2);
  justify-content: flex-end;
  border-top: 1px solid var(--bf-color-border);
  background-color: var(--bf-color-surface-alt);
}

.bf-modal__close {
  padding: var(--bf-space-1);
  background: transparent;
  border: 0;
  font-size: var(--bf-text-xl);
  line-height: 1;
  color: var(--bf-color-text-muted);
  cursor: pointer;
}

.bf-modal__close:hover {
  color: var(--bf-color-text);
}

/* -----------------------------------------------------------------------------
   Alert  .bf-alert  +  message stack  .bf-messages
   -------------------------------------------------------------------------- */
.bf-messages {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-2);
  margin: 0 0 var(--bf-space-4);
}

.bf-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--bf-space-2);
  padding: var(--bf-space-3) var(--bf-space-4);
  border: 1px solid transparent;
  border-radius: var(--bf-radius-md);
  font-size: var(--bf-text-sm);
}

.bf-alert__close {
  margin-left: auto;
  background: transparent;
  border: 0;
  font-size: var(--bf-text-lg);
  line-height: 1;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
}

.bf-alert__close:hover {
  opacity: 1;
}

.bf-alert--success {
  background-color: var(--bf-color-success-bg);
  border-color: var(--bf-color-success);
  color: #0a5c3c;
}

.bf-alert--warning {
  background-color: var(--bf-color-warning-bg);
  border-color: var(--bf-color-warning);
  color: #7a4a00;
}

.bf-alert--danger {
  background-color: var(--bf-color-danger-bg);
  border-color: var(--bf-color-danger);
  color: #8c1430;
}

.bf-alert--info {
  background-color: var(--bf-color-info-bg);
  border-color: var(--bf-color-info);
  color: #0a4775;
}

/* -----------------------------------------------------------------------------
   Pagination  .bf-pagination
   -------------------------------------------------------------------------- */
.bf-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-1);
  align-items: center;
  list-style: none;
  margin: var(--bf-space-4) 0;
  padding: 0;
}

.bf-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--bf-space-6);
  padding: var(--bf-space-1) var(--bf-space-3);
  border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-sm);
  color: var(--bf-color-primary-text);
  text-decoration: none;
  transition: background-color var(--bf-transition-fast),
    color var(--bf-transition-fast);
}

.bf-pagination__link:hover {
  background-color: var(--bf-color-surface-alt);
}

.bf-pagination__item.is-active .bf-pagination__link {
  background-color: var(--bf-brand-secondary);
  border-color: var(--bf-brand-secondary);
  color: var(--bf-color-text-inverse);
}

.bf-pagination__item.is-disabled .bf-pagination__link {
  opacity: 0.5;
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   Badge  .bf-badge
   -------------------------------------------------------------------------- */
.bf-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-1);
  padding: var(--bf-space-1) var(--bf-space-2);
  border-radius: var(--bf-radius-sm);
  background-color: var(--bf-color-surface-sunken);
  color: var(--bf-color-text);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-medium);
  line-height: 1;
}

.bf-badge--pill {
  border-radius: var(--bf-radius-pill);
}

.bf-badge--primary {
  background-color: var(--bf-color-primary);
  color: var(--bf-brand-secondary); /* ink on teal 5.9:1; white is 2.8:1 */
}

.bf-badge--success {
  background-color: var(--bf-color-success);
  color: var(--bf-brand-secondary); /* ink on green 5.9:1; white is 2.8:1 */
}

.bf-badge--danger {
  background-color: var(--bf-color-danger);
  color: var(--bf-color-text-inverse);
}

.bf-badge--info {
  background-color: var(--bf-color-info);
  color: var(--bf-color-text-inverse);
}

/* =============================================================================
   Link list - an unstyled list whose items flow into responsive columns via
   CSS (column-width), no JS. The column count follows the available width, so
   a dense group of links (e.g. browse-by-category subcategory links) lays out
   in 1 column on mobile up to several on wide screens.
   ============================================================================= */
.bf-linklist {
  margin: 0;
  padding: 0;
  list-style: none;
  column-width: 192px;
  column-gap: var(--bf-space-5);
}

.bf-linklist > li {
  margin-bottom: var(--bf-space-2);
  break-inside: avoid;
}

.bf-linklist > li.is-disabled {
  color: var(--bf-color-text-muted);
}

/* -----------------------------------------------------------------------------
   Long-form editorial copy  .bf-prose  (policies, articles)
   Reading measure, generous leading, serif subheads, hairline rules; the
   --dropcap modifier opens the first paragraph with a serif initial.
   -------------------------------------------------------------------------- */
.bf-prose {
  max-width: 65ch;
  font-size: var(--bf-text-lg);
  line-height: 1.75;
}

.bf-prose p {
  margin: 0 0 var(--bf-space-4);
}

.bf-prose h1,
.bf-prose h2,
.bf-prose h3,
.bf-prose h4 {
  margin: var(--bf-space-5) 0 var(--bf-space-3);
  font-family: var(--bf-font-serif);
  font-weight: 600;
  line-height: 1.15;
}

.bf-prose hr {
  height: 0;
  margin: var(--bf-space-5) 0;
  border: 0;
  border-top: 1px solid var(--bf-color-border-strong);
}

.bf-prose--dropcap > p:first-of-type::first-letter {
  float: left;
  padding: 0 var(--bf-space-2) 0 0;
  font-family: var(--bf-font-serif);
  font-size: 3.4em;
  font-weight: 600;
  line-height: 0.85;
  color: var(--bf-brand-secondary);
}

/* Editorial link treatment for category link lists (browse_all). */
.bf-linklist > li > a {
  color: var(--bf-color-primary-text);
  text-decoration: underline;
  text-decoration-color: var(--bf-color-border-strong);
  text-underline-offset: 3px;
}

.bf-linklist > li > a:hover {
  text-decoration-color: var(--bf-color-primary-text);
}

/* =============================================================================
   Search results (search_results.php). Named bf-result* / bf-results-* to avoid
   the legacy .bf-listing / .bf-listing-details classes (hozi.main.css) the page
   still uses. The results are a vertical list of wide horizontal cards.
   ============================================================================= */

/* Inline search bar (replaces sandbox/home_header.php on this page). */
.bf-results-searchbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-3);
  align-items: center;
  margin: var(--bf-space-4) 0;
}

.bf-results-searchbar .bf-input,
.bf-results-searchbar .bf-select {
  flex: 1 1 192px;
  min-width: 0;
  font-size: var(--bf-text-lg);
  padding: var(--bf-space-3) var(--bf-space-4);
}

.bf-results-searchbar .bf-btn {
  flex: 0 0 auto;
  font-size: var(--bf-text-lg);
  padding: var(--bf-space-3) var(--bf-space-5);
}

/* Per-date / per-subcategory group wrapper (was .alert.bf-listing-details). It
   holds a heading + sort control, then the group's result cards. */
.bf-result-group {
  margin: var(--bf-space-5) 0 var(--bf-space-4);
}

.bf-result-group > h2 {
  margin: 0 0 var(--bf-space-3);
  font-family: var(--bf-font-serif);
  font-size: var(--bf-text-xl);
}

.bf-result-group .bf-select {
  display: inline-block;
  width: auto;
}

/* The result card. */
.bf-result {
  position: relative;
  margin-bottom: var(--bf-space-4);
  padding: var(--bf-space-4);
  background-color: var(--bf-color-paper);
  border: 1px solid var(--bf-color-border-strong);
  border-top: 3px solid var(--bf-brand-primary);
  border-radius: var(--bf-radius-md);
  box-shadow: var(--bf-shadow-sm);
  cursor: pointer;
}

.bf-result:hover {
  transform: translateY(-2px);
  box-shadow: var(--bf-shadow-md);
}

.bf-result--featured {
  border-color: var(--bf-brand-accent);
  box-shadow: inset 0 0 0 1px var(--bf-brand-accent), var(--bf-shadow-sm);
}

.bf-result .detail-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.bf-result .detail-link:hover {
  text-decoration: none;
}

@media (min-width: 768px) {
  .bf-result .detail-link > section {
    display: flex;
    gap: var(--bf-space-4);
    align-items: flex-start;
  }
}

.bf-result__media {
  flex: 0 0 auto;
  margin-bottom: var(--bf-space-3);
}

.bf-result__media img {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  border-radius: var(--bf-radius-md);
}

.bf-result__body {
  display: block;
  min-width: 0;
}

.bf-result__body h4 {
  margin: 0 0 var(--bf-space-1);
  font-family: var(--bf-font-serif);
  font-size: var(--bf-text-lg);
  font-weight: var(--bf-weight-bold);
  color: var(--bf-color-text);
}

.bf-result__body h5 {
  margin: 0 0 var(--bf-space-2);
  font-size: var(--bf-text-base);
  color: var(--bf-color-text-muted);
}

.bf-result__badge {
  display: inline-block;
  margin-bottom: var(--bf-space-2);
  font-family: var(--bf-font-display);
  font-weight: var(--bf-weight-bold);
  color: var(--bf-brand-accent);
}

/* Share icons + favorite toggle + listing/portal meta. */
.bf-result__share {
  display: inline-flex;
  gap: var(--bf-space-3);
  align-items: center;
  margin-top: var(--bf-space-3);
}

.bf-result__meta {
  margin-top: var(--bf-space-2);
  font-size: var(--bf-text-base);
  color: var(--bf-color-text-muted);
}

.bf-result__fav {
  position: absolute;
  top: var(--bf-space-3);
  right: var(--bf-space-4);
  font-size: var(--bf-text-xl);
}

.bf-result__fav a {
  cursor: pointer;
}

/* =============================================================================
   Ad view (ad_listing.php). The editorial-broadsheet content language matching
   the bf-header masthead (layout.css): a warm paper surface, the Fraunces serif
   display face, the storefront brand color used as a thin ACCENT (a top rule,
   active states) rather than a fill, and hairline rules as the broadsheet frame.
   Named bf-adview* to avoid the legacy .bf-listing / .ad-detail / .info-box-wrapper
   classes, which are dropped from this page's markup in favor of these (the legacy
   hozi.main.css loads after this file, so co-classing would lose on source order).
   ============================================================================= */

/* The listing detail card: warm paper, a hairline frame, and a thin brand accent
   rule along the top edge (recolors per storefront, like the masthead accent). */
.bf-adview {
  position: relative;
  margin-bottom: var(--bf-space-5);
  padding: var(--bf-space-5);
  background-color: var(--bf-color-paper);
  border: 1px solid var(--bf-color-border-strong);
  border-top: 3px solid var(--bf-brand-primary);
  border-radius: var(--bf-radius-md);
  box-shadow: var(--bf-shadow-sm);
}

/* Listing title in the Fraunces serif face, underlined by a hairline rule (the
   masthead echo). Qualified with .bf-adview so it outranks base.css's .bf-scope h1
   (which would otherwise impose the Oswald display face). */
.bf-adview .bf-adview__title {
  margin: 0 0 var(--bf-space-4);
  padding-bottom: var(--bf-space-3);
  font-family: var(--bf-font-serif);
  font-size: var(--bf-text-3xl);
  font-weight: var(--bf-weight-bold);
  line-height: var(--bf-leading-tight);
  color: var(--bf-color-text);
  border-bottom: 1px solid var(--bf-color-border-strong);
}

/* Category / Source / Listed meta block, separated from the body by a hairline. */
.bf-adview__meta {
  margin-bottom: var(--bf-space-4);
  padding-bottom: var(--bf-space-4);
  font-size: var(--bf-text-base);
  line-height: var(--bf-leading-loose);
  color: var(--bf-color-text);
  border-bottom: 1px solid var(--bf-color-border);
}

/* Description + properties body. */
.bf-adview__desc {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  line-height: var(--bf-leading-loose);
  color: var(--bf-color-text);
}

.bf-adview__desc hr {
  border: 0;
  border-top: 1px solid var(--bf-color-border);
  margin: var(--bf-space-4) 0;
}

/* Map frame: a hairline-bordered, rounded well (replaces the inline silver border
   the legacy markup carried). The #map height stays in the page's head style. */
.bf-adview__map {
  margin-top: var(--bf-space-4);
  overflow: hidden;
  border: 1px solid var(--bf-color-border-strong);
  border-radius: var(--bf-radius-md);
}

/* Share row: charcoal glyphs that pick up the brand color on hover. The a-rule
   matches base.css's .bf-scope a specificity and wins by source order. */
.bf-adview__share {
  display: inline-flex;
  gap: var(--bf-space-4);
  align-items: center;
  margin-top: var(--bf-space-4);
  font-size: var(--bf-text-2xl);
}

.bf-adview__share a,
.bf-adview__share > div {
  color: var(--bf-color-text);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--bf-transition-fast);
}

.bf-adview__share a:hover,
.bf-adview__share > div:hover {
  color: var(--bf-brand-primary);
  text-decoration: none;
}

/* Favorite toggle: floats at the card's top-right corner (over the meta), in the
   accent color when active. */
.bf-adview__fav {
  position: absolute;
  top: var(--bf-space-4);
  right: var(--bf-space-4);
  font-size: var(--bf-text-2xl);
  cursor: pointer;
}

.bf-adview__fav a {
  color: var(--bf-color-text);
  cursor: pointer;
}

.bf-adview__fav a:hover {
  color: var(--bf-brand-accent);
}

/* Owner ad-management actions: a centered group below the description. */
.bf-adview__owner {
  margin-top: var(--bf-space-4);
  text-align: center;
}

/* -----------------------------------------------------------------------------
   Callout  .bf-callout  -  centered icon + message status block
   -------------------------------------------------------------------------- */
.bf-callout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bf-space-3);
  padding: var(--bf-space-4) 0;
  text-align: center;
}

.bf-callout__icon {
  font-size: calc(var(--bf-text-xl) * 3);
  line-height: 1;
}

.bf-callout--warning .bf-callout__icon {
  color: var(--bf-color-warning);
}

.bf-callout--success .bf-callout__icon {
  color: var(--bf-color-success);
}

.bf-callout--danger .bf-callout__icon {
  color: var(--bf-color-danger);
}

.bf-callout__title {
  margin: 0;
  font-family: var(--bf-font-serif);
  font-size: var(--bf-text-xl);
}

/* -----------------------------------------------------------------------------
   Order card internals  .bf-order__*  (orders_history)
   -------------------------------------------------------------------------- */
.bf-order__topbar {
  display: flex;
  justify-content: flex-end;
}

.bf-order__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bf-space-4);
}

@media (min-width: 768px) {
  .bf-order__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .bf-order__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* =============================================================================
   Homepage (home_pages/index_starter.php). Front-page editorial treatment:
   a masthead hero (eyebrow, Fraunces headline, dateline, search command bar
   over a double masthead rule) and category tiles built as photo + SOLID ink
   caption plate - text never sits on an image, so legibility is guaranteed
   rather than scrim-dependent. All colors are tokens; every text/surface pair
   here passes WCAG AA (see the contrast notes inline).
   ============================================================================= */

.bf-hero {
  position: relative;
  background-color: var(--bf-color-paper);
  padding: var(--bf-space-8) 0 var(--bf-space-6);
}

/* Classic masthead double rule: 3px ink bar, 3px gap, 1px hairline. */
.bf-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 7px;
  border-top: 3px solid var(--bf-brand-secondary);
  border-bottom: 1px solid var(--bf-brand-secondary);
}

/* Compact variant: the paper band + double rule without the masthead block,
   for pages whose opener is a search bar (search_results). */
.bf-hero--compact {
  padding: var(--bf-space-4) 0;
}

.bf-hero--compact .bf-results-searchbar {
  max-width: none;
  margin: 0;
}

/* Eyebrow: letterspaced small caps between two hairlines (decorative rules). */
.bf-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--bf-space-4);
  margin: 0;
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-bold, 700);
  letter-spacing: 0.32em;
  text-indent: 0.32em; /* visually re-center the tracked text */
  text-transform: uppercase;
  color: var(--bf-color-text-muted); /* 5.2:1 on paper */
}

.bf-hero__eyebrow::before,
.bf-hero__eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--bf-color-border-strong);
}

/* Doubled class for specificity: base.css sizes .bf-scope h1..h6 (0,1,1), and
   the legacy stylesheets size bare h1; this must win to get display scale. */
.bf-hero .bf-hero__title {
  margin: var(--bf-space-4) 0 0;
  font-family: var(--bf-font-serif);
  font-weight: 600;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-align: center;
  color: var(--bf-color-text); /* 14.5:1 on paper */
}

/* The closing mark in the brand red - 4.5:1 on paper, and display-size. */
.bf-hero__title .bf-hero__mark {
  color: var(--bf-brand-accent);
}

.bf-hero__dateline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--bf-space-2) var(--bf-space-3);
  margin: var(--bf-space-3) 0 0;
  font-size: var(--bf-text-sm);
  color: var(--bf-color-text-muted); /* 5.2:1 on paper */
}

.bf-hero__dateline strong {
  font-weight: 600;
  color: var(--bf-color-text);
}

.bf-hero__dateline .bf-hero__sep {
  color: var(--bf-brand-accent);
}

/* The search command bar. Inputs get ink-adjacent borders: the default
   border-strong is 1.7:1 on paper and fails the 3:1 UI-component minimum;
   text-muted (#666) is 5.2:1. */
.bf-hero .bf-results-searchbar {
  max-width: 896px;
  margin: var(--bf-space-6) auto 0;
}

.bf-hero .bf-input,
.bf-hero .bf-select {
  background-color: var(--bf-color-surface);
  border-color: var(--bf-color-text-muted);
}

/* Section heading: kicker + serif headline over a hairline, newspaper-style. */
.bf-section-head {
  position: relative;
  padding: var(--bf-space-6) 0 var(--bf-space-4);
  border-bottom: 3px solid var(--bf-brand-secondary);
  margin-bottom: var(--bf-space-6);
}

/* Completes the masthead double rule: 3px bar (the border), 3px gap, hairline. */
.bf-section-head::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 1px;
  background-color: var(--bf-brand-secondary);
}

.bf-section-head h1,
.bf-section-head h2 {
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.bf-kicker {
  display: flex;
  align-items: center;
  gap: var(--bf-space-2);
  margin: 0 0 var(--bf-space-2);
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-bold, 700);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bf-color-text-muted); /* 5.5:1 on the page background */
}

/* Red leading block: color as a decorative mark, not as text. */
.bf-kicker::before {
  content: "";
  width: 0.7em;
  height: 0.7em;
  background-color: var(--bf-brand-accent);
}

/* Category tiles: photo (framed, hover-zoom) above a SOLID ink caption plate.
   Everything readable lives on the plate: paper/white on charcoal is 14.9:1 -
   16.3:1; the teal tile number is 5.9:1 on ink. */
.bf-category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bf-space-5);
}

@media (min-width: 576px) {
  .bf-category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bf-category-card {
  display: flex;
  flex-direction: column;
  background-color: var(--bf-brand-secondary);
  border: 1px solid var(--bf-color-border-strong);
  border-radius: var(--bf-radius-md);
  overflow: hidden;
  box-shadow: var(--bf-shadow-sm);
  cursor: pointer;
}

.bf-category-card__frame {
  overflow: hidden;
}

.bf-category-card__media {
  aspect-ratio: 16 / 10;
  background-color: var(--bf-color-surface-sunken);
  background-size: cover;
  background-position: center;
}

.bf-category-card:hover .bf-category-card__media,
.bf-category-card:focus-within .bf-category-card__media {
  transform: scale(1.045);
}

.bf-category-card__plate {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bf-space-1);
  padding: var(--bf-space-4);
  border-top: 3px solid var(--bf-brand-primary);
  background-color: var(--bf-brand-secondary);
  color: var(--bf-color-text-inverse);
}

.bf-category-card__no {
  margin: 0;
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-bold, 700);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bf-brand-primary); /* teal on ink: 5.9:1 */
}

.bf-category-card__heading {
  margin: 0;
}

/* The tile title is a real <button> (keyboard path for the card's onclick),
   restyled as an editorial serif headline. */
.bf-category-card__title {
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font-family: var(--bf-font-serif);
  font-weight: 600;
  font-size: var(--bf-text-2xl);
  line-height: 1.1;
  text-align: left;
  color: var(--bf-color-text-inverse); /* 16.3:1 on ink */
  cursor: pointer;
}

.bf-category-card__title:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--bf-brand-primary);
  text-underline-offset: 4px;
}

.bf-category-card__title:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
  border-radius: var(--bf-radius-sm);
}

.bf-category-card__links,
.bf-category-card__plate ul {
  list-style: none;
  margin: var(--bf-space-2) 0 0;
  padding: 0;
}

.bf-category-card__plate li {
  display: inline-block;
  margin: 0 var(--bf-space-4) var(--bf-space-1) 0;
}

.bf-category-card__plate a {
  color: var(--bf-color-paper); /* 14.9:1 on ink */
  font-size: var(--bf-text-sm);
  text-decoration: underline;
  text-decoration-color: var(--bf-color-text-muted);
  text-underline-offset: 3px;
}

.bf-category-card__plate a:hover {
  color: var(--bf-color-text-inverse);
  text-decoration-color: var(--bf-brand-primary);
}

.bf-category-card__plate a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
  border-radius: var(--bf-radius-sm);
}

/* Homepage rail: tie the legacy sidebar fragments to the editorial language
   with a top ink rule (scoped to the homepage only via .bf-home-rail). */
.bf-home-rail {
  border-top: 3px solid var(--bf-brand-secondary);
  padding-top: var(--bf-space-4);
}

/* -----------------------------------------------------------------------------
   Tile grid  .bf-tile-grid / .bf-tile  -  editorial action tiles (icon + label)
   The CSR back-office landing (csr_home.php) and similar navigational dashboards
   use these instead of .bf-category-card, which is photo + caption-plate shaped.
   -------------------------------------------------------------------------- */
.bf-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--bf-space-5);
  margin-bottom: var(--bf-space-6);
}

.bf-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--bf-space-3);
  padding: var(--bf-space-5) var(--bf-space-4);
  background-color: var(--bf-color-paper);
  border: 1px solid var(--bf-color-border-strong);
  border-top: 3px solid var(--bf-brand-primary);
  border-radius: var(--bf-radius-md);
  box-shadow: var(--bf-shadow-sm);
  text-align: center;
  text-decoration: none;
  color: var(--bf-color-text);
}

.bf-tile:hover {
  box-shadow: var(--bf-shadow-md);
  transform: translateY(-2px);
}

.bf-tile:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
}

.bf-tile__icon {
  display: block;
  max-width: 100%;
  height: auto;
}

.bf-tile__title {
  font-family: var(--bf-font-serif);
  font-size: var(--bf-text-lg);
  font-weight: var(--bf-weight-bold);
  line-height: var(--bf-leading-tight);
  color: var(--bf-color-text);
}

/* CSR support badge: the cust_support graphic that anchors the back-office area. */
.bf-csr-badge {
  margin: 0 0 var(--bf-space-4);
  text-align: center;
}

.bf-csr-badge__img {
  max-width: 100%;
  height: auto;
}

/* -----------------------------------------------------------------------------
   Tabs  .bf-tabs / .bf-tab  -  a horizontal group switcher (banner_admin groups,
   widget_admin). The .active state + the legacy .search-link hook stay on the
   <li> for the inline jQuery that toggles the panels; styling rides .bf-tab.
   -------------------------------------------------------------------------- */
.bf-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-1);
  list-style: none;
  margin: 0 0 var(--bf-space-5);
  padding: 0;
  border-bottom: 1px solid var(--bf-color-border-strong);
}

.bf-tab__btn {
  display: block;
  padding: var(--bf-space-2) var(--bf-space-4);
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-medium);
  color: var(--bf-color-primary-text);
  cursor: pointer;
}

.bf-tab__btn:hover {
  color: var(--bf-color-text);
}

.bf-tab__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
}

.bf-tab.active .bf-tab__btn {
  color: var(--bf-color-text);
  border-bottom-color: var(--bf-brand-primary);
  font-weight: var(--bf-weight-bold);
}

/* -----------------------------------------------------------------------------
   Detail list  .bf-detail-list  -  label/value pairs for admin record cards.
   -------------------------------------------------------------------------- */
.bf-detail-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--bf-space-1) var(--bf-space-4);
  margin: var(--bf-space-3) 0;
}

.bf-detail-list dt {
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
  color: var(--bf-color-text-muted);
}

.bf-detail-list dd {
  margin: 0;
  font-size: var(--bf-text-sm);
  color: var(--bf-color-text);
}

.bf-meta {
  margin: 0 0 var(--bf-space-2);
  font-size: var(--bf-text-sm);
  color: var(--bf-color-text-muted);
}

/* Banner/record card head: title + status pill on one row. */
.bf-banner__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-3);
}

.bf-banner__img {
  display: block;
  max-width: 100%;
  margin: var(--bf-space-2) 0;
  border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-sm);
}

/* Status pill that is also the toggle control (a real <button>). */
.bf-status-toggle {
  border: 0;
  cursor: pointer;
}

.bf-status-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
}

/* Selectable record card (widget_admin list): a clickable .bf-card that selects
   the record; keyboard reachable via tabindex/role=button on the markup. */
.bf-widget-card {
  cursor: pointer;
  margin-bottom: var(--bf-space-4);
}

.bf-widget-card.is-selected {
  border-color: var(--bf-brand-accent);
  box-shadow: 0 0 0 2px var(--bf-brand-accent);
}

.bf-widget-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
}

.bf-widget-card__logo {
  margin: var(--bf-space-2) 0;
}

/* Confirm-dialog body text (delete modals). */
.bf-confirm-text {
  margin: var(--bf-space-3) 0;
  font-family: var(--bf-font-serif);
  font-size: var(--bf-text-xl);
  text-align: center;
  color: var(--bf-color-text);
}

/* Standalone popup window padding (no site chrome - e.g. the rate-package wizard). */
.bf-popup {
  padding: var(--bf-space-5);
}

/* -----------------------------------------------------------------------------
   Setup section nav  .bf-setup-nav  -  the cross-wizard section switcher that
   every setup.php wizard renders (Categories / Publications / Rates / Composition
   / Web Config). Grouped columns of links on an editorial paper card.
   -------------------------------------------------------------------------- */
.bf-setup-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-5);
  margin-bottom: var(--bf-space-5);
  padding: var(--bf-space-4);
  background-color: var(--bf-color-paper);
  border: 1px solid var(--bf-color-border-strong);
  border-top: 3px solid var(--bf-brand-primary);
  border-radius: var(--bf-radius-md);
}

.bf-setup-nav__group {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-1);
  min-width: 160px;
}

.bf-setup-nav__group a {
  font-size: var(--bf-text-sm);
}

.bf-setup-nav__head {
  font-family: var(--bf-font-serif);
  font-weight: var(--bf-weight-bold);
  font-size: var(--bf-text-base);
}

/* Page-load choreography: one staggered rise. Fully disabled for
   prefers-reduced-motion users (WCAG 2.3.3). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes bf-rise {
    from {
      opacity: 0;
      transform: translateY(14px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  .bf-hero__eyebrow,
  .bf-hero__title,
  .bf-hero__dateline,
  .bf-hero .bf-results-searchbar,
  .bf-category-card {
    animation: bf-rise 0.55s ease both;
  }

  .bf-hero__title {
    animation-delay: 0.07s;
  }

  .bf-hero__dateline {
    animation-delay: 0.14s;
  }

  .bf-hero .bf-results-searchbar {
    animation-delay: 0.22s;
  }

  .bf-category-card:nth-child(1) {
    animation-delay: 0.1s;
  }

  .bf-category-card:nth-child(2) {
    animation-delay: 0.18s;
  }

  .bf-category-card:nth-child(3) {
    animation-delay: 0.26s;
  }

  .bf-category-card:nth-child(4) {
    animation-delay: 0.34s;
  }

  .bf-category-card:nth-child(n + 5) {
    animation-delay: 0.42s;
  }
}

/* ---------------------------------------------------------------------------
   THE motion grammar (consolidated). Everything that moves or transitions
   lives inside this gate; outside it, state changes snap instantly, which is
   the reduced-motion baseline. Timing: color/border on fast, shadow/transform
   on base, media zooms on slow.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .bf-btn {
    transition: background-color var(--bf-transition-fast),
                border-color var(--bf-transition-fast),
                color var(--bf-transition-fast),
                box-shadow var(--bf-transition-base);
  }

  .bf-btn.is-loading::after {
    animation: bf-spin 0.6s linear infinite;
  }

  .bf-scope .bf-pick-card,
  .bf-scope .bf-pack-card,
  .bf-scope .bf-template-card {
    transition: border-color var(--bf-transition-fast),
                background-color var(--bf-transition-fast),
                box-shadow var(--bf-transition-base);
  }

  .bf-card--interactive,
  .bf-result,
  .bf-tile {
    transition: box-shadow var(--bf-transition-base),
                transform var(--bf-transition-base);
  }

  .bf-category-card__media {
    transition: transform var(--bf-transition-slow);
  }

  /* a.tab-nav-link (type bump) outranks the later un-gated 'transition: none'
     hozi kill, so the gated grammar actually runs under no-preference. */
  .bf-scope .bf-steps > li > a.tab-nav-link {
    transition: color var(--bf-transition-fast),
                border-bottom-color var(--bf-transition-fast);
  }

  .bf-scope .tab-content > .tab-pane.active {
    animation: bf-pane-in 200ms ease-out;
  }

  @keyframes bf-pane-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
  }

  .bf-scope .glyphicon-refresh-animate {
    animation: bf-spin 2s linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bf-scope .glyphicon-refresh-animate {
    animation: none;
    -webkit-animation: none;
  }

  .bf-scope .modal.fade .modal-dialog {
    transition: none;
    transform: none;
  }
}

/* Press states (ungated: an instant tint is reduced-motion safe). */
.bf-scope .bf-pick-card:active,
.bf-scope .bf-pack-card:active,
.bf-scope .bf-template-card:active {
  background-color: var(--bf-color-surface-alt);
}

/* ---------------------------------------------------------------------------
   Place-ad wizard (WS3 place-ad area).
   .bf-steps restyles the legacy ul.nav.nav-tabs step strip WITHOUT changing
   its markup contract (Bootstrap tab JS addresses panes via li:eq(N) and
   toggles .active; the li set must never change). hozi.main.css loads after
   this file and styles .nav-tabs > li > .tab-nav-link, so every rule here
   carries the .bf-scope prefix to win on specificity.
   --------------------------------------------------------------------------- */
.bf-scope .bf-wizard-frame {
  display: flow-root; /* contain the floated legacy col-* children (the removed .row used to clearfix) */
  background-color: var(--bf-color-paper);
  border: 1px solid var(--bf-color-border-strong);
  border-top: 3px solid var(--bf-brand-primary);
  border-radius: var(--bf-radius-md);
  box-shadow: var(--bf-shadow-sm);
  padding: var(--bf-space-5) var(--bf-space-4);
}

/* Frame rhythm: the steps rail already draws its own hairline, so the hr that
   immediately follows a visible rail is a redundant double rule. */
.bf-scope .bf-steps:not(.hide) + hr {
  display: none;
}

.bf-scope .bf-wizard-frame hr {
  border: 0;
  border-top: 1px solid var(--bf-color-border);
  margin: var(--bf-space-4) 0;
}

.bf-scope .bf-wizard-frame .place-ad_button-row {
  margin-bottom: 0; /* hozi 45px phantom */
}

.bf-scope .bf-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* kill hozi's centered leak; left editorial axis */
  gap: var(--bf-space-4);
  margin: 0 0 var(--bf-space-4);
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--bf-color-border-strong);
  counter-reset: bf-step;
}

.bf-scope .bf-steps > li {
  float: none;
  margin: 0;
  counter-increment: bf-step;
}

.bf-scope .bf-steps > li > .tab-nav-link {
  display: flex;
  align-items: baseline;
  gap: var(--bf-space-2);
  margin: 0;
  padding: var(--bf-space-3) var(--bf-space-3) var(--bf-space-2);
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: none;
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bf-color-text-muted);
  box-shadow: none; /* kill hozi tile shadows */
  transition: none; /* kill hozi 'all 0.2s'; the gated motion grammar re-adds it */
}

.bf-scope .bf-steps > li > .tab-nav-link::before {
  content: counter(bf-step, decimal-leading-zero);
  font-family: var(--bf-font-serif);
  font-size: var(--bf-text-sm);
  color: var(--bf-brand-accent);
}

.bf-scope .bf-steps > li > .tab-nav-link:hover {
  background: none;
  border-bottom-color: var(--bf-color-border-strong);
  color: var(--bf-color-text);
}

/* Bootstrap puts .active on the li; the PHP also seeds .active on the step-2
   anchor for single-category sites - style both carriers. */
.bf-scope .bf-steps > li.active > .tab-nav-link,
.bf-scope .bf-steps > li > .tab-nav-link.active {
  background: none;
  border: 0;
  border-bottom: 3px solid var(--bf-color-text); /* ink, brand-proof */
  box-shadow: none;
  color: var(--bf-color-text);
}

/* Active step: the numeral flips from accent red to ink with the label. */
.bf-scope .bf-steps > li.active > .tab-nav-link::before,
.bf-scope .bf-steps > li > .tab-nav-link.active::before {
  color: var(--bf-color-text);
}

.bf-scope .bf-steps > li > .tab-nav-link:focus-visible {
  outline: none;
  border-radius: var(--bf-radius-sm);
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
}

/* Compact mobile step indicator (owner-approved delta from the legacy
   hidden-xs nav): the strip stays visible at xs as numbers-only chips.
   :not(.hide) keeps the edit-mode $edit_hide contract working - when the
   strip carries .hide this rule does not apply and Bootstrap hides it. */
@media (max-width: 767px) {
  .bf-scope ul.bf-steps:not(.hide) {
    display: flex !important;
    justify-content: center;
    flex-direction: row;
  }

  .bf-scope .bf-steps {
    gap: var(--bf-space-3);
  }

  .bf-scope .bf-steps > li > .tab-nav-link {
    font-size: 0;
    min-width: 44px;
    min-height: 44px;
    padding: var(--bf-space-2) var(--bf-space-3);
    align-items: center;
    justify-content: center;
  }

  .bf-scope .bf-steps > li > .tab-nav-link::before {
    font-size: var(--bf-text-lg);
  }
}

/* Category pick-grid (step 1): real buttons, so the tiles are keyboard
   reachable (the legacy anchors were unclosed markup). --bf-pick-min is
   seeded inline from CATEGORY_BOX_MIN_WIDTH. */
.bf-scope .bf-pick-grid {
  display: grid;
  /* auto-fit collapses the dead trailing track; the 320px cap stops 3-card stretching */
  grid-template-columns: repeat(auto-fit, minmax(var(--bf-pick-min, 200px), 320px));
  justify-content: center;
  gap: var(--bf-space-4);
  width: 100%;
  margin: var(--bf-space-2) 0 var(--bf-space-4);
}

.bf-scope .bf-pick-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bf-space-2);
  padding: var(--bf-space-4) var(--bf-space-4) var(--bf-space-5);
  min-height: 104px; /* card presence + >=48px touch target */
  background-color: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border-strong);
  border-radius: var(--bf-radius-md);
  box-shadow: var(--bf-shadow-sm);
  text-align: left;
  cursor: pointer;
}

/* Unified choice-card hover dialect: border swap + raised shadow, no lift. */
.bf-scope .bf-pick-card:hover {
  border-color: var(--bf-brand-primary);
  box-shadow: var(--bf-shadow-md);
}

.bf-scope .bf-pick-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
}

.bf-scope .bf-pick-card__no {
  margin-bottom: 0;
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-bold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--bf-brand-accent);
}

.bf-scope .bf-pick-card__title {
  font-family: var(--bf-font-serif);
  font-size: var(--bf-text-xl);
  font-weight: 600;
  color: var(--bf-color-text);
}

.bf-scope .bf-pick-card__img {
  max-width: 100%;
  border-radius: var(--bf-radius-sm);
}

/* scripts.js highlightNextButton() flags "ready to continue" by swapping
   btn-warning -> btn-success on the next buttons; under bf- the class is a
   pure state hook - render it as a glow ring on the ink plate. */
.bf-scope .bf-btn.btn-success {
  box-shadow: 0 0 0 3px var(--bf-color-success-ring), var(--bf-shadow-sm);
}

/* Focused AND ready: teal focus ring inside, green ready glow outside. */
.bf-scope .bf-btn.btn-success:focus-visible,
.bf-scope .bf-pack-card.btn-success:focus-visible,
.bf-scope .bf-template-card.btn-success:focus-visible {
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring), 0 0 0 6px var(--bf-color-success-ring);
}

/* Place-ad floating ad-summary panel + inline term labels (the legacy
   alert-info chip; geometry/affix stays owned by the legacy ad-summary
   class - this is surface styling only). */
.bf-scope .bf-summary-card {
  padding: var(--bf-space-3) var(--bf-space-4);
  background-color: var(--bf-color-paper);
  border: 1px solid var(--bf-color-border-strong);
  border-top: 3px solid var(--bf-brand-primary);
  border-radius: var(--bf-radius-md);
  box-shadow: var(--bf-shadow-sm);
}

.bf-scope .bf-term {
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bf-color-text-muted);
}

/* Injected package cards (webfunc/fn_packages.php -> #local_rate_packages).
   The buttons keep their legacy state machinery verbatim: btn + btn-default
   (cleared by scripts.js's $('.btn').removeClass(...)), and selection adds
   active/btn-success/bf-btn-success. bf-pack-card only restyles around it. */
.bf-scope .bf-pack-card {
  display: block;
  padding: var(--bf-space-4) var(--bf-space-3);
  background-color: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border-strong);
  border-radius: var(--bf-radius-md);
  cursor: pointer;
}

.bf-scope .bf-pack-card:hover {
  border-color: var(--bf-brand-primary);
  box-shadow: var(--bf-shadow-sm);
}

.bf-scope .bf-pack-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
}

/* Selected: constant 1px border (no layout jiggle) with an inset ink ring,
   the green ready glow, and (below, scoped) a brand-accent check badge. */
.bf-scope .bf-pack-card.btn-success {
  border: 1px solid var(--bf-color-text);
  box-shadow: inset 0 0 0 1px var(--bf-color-text),
              0 0 0 3px var(--bf-color-success-ring),
              var(--bf-shadow-sm);
}

.bf-scope .bf-pack-card .place_ad-pack-label {
  display: block;
  font-family: var(--bf-font-serif);
  font-size: var(--bf-text-lg);
  font-weight: 600;
  color: var(--bf-color-text);
  cursor: pointer;
}

.bf-scope .bf-pack-card .bf-pack-card__price {
  display: inline-block;
  margin-top: var(--bf-space-1);
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bf-brand-accent);
}

.bf-scope .bf-pack-card .place_ad-pack-desc {
  margin-top: var(--bf-space-2);
  font-size: var(--bf-text-sm);
  color: var(--bf-color-text-muted);
}

/* Form frame: the paper well the place-ad builder (and later wizard steps)
   wrap their form sections in - replaces the legacy alert-warning frames. */
.bf-scope .bf-form-frame {
  display: flow-root;
  padding: var(--bf-space-4);
  background-color: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border-strong);
  border-radius: var(--bf-radius-md);
}

/* Upload thumbnail cell: dropzone-shaped while empty (dashed, sunken, camera
   glyph); a filled cell reverts to a solid paper frame. */
.bf-scope .bf-thumb {
  position: relative;
  width: 100%;
  max-width: 150px;
  aspect-ratio: 1 / 1;
  height: auto;
  margin: 0 auto var(--bf-space-2);
  padding: 2px;
  background-color: var(--bf-color-surface-alt);
  border: 1px dashed var(--bf-color-border-strong);
  border-radius: var(--bf-radius-sm);
}

.bf-scope .bf-thumb:not(:has(img:not(.hide)))::before {
  content: "\f030"; /* FontAwesome camera */
  font-family: "FontAwesome";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--bf-text-xl);
  color: var(--bf-color-text-muted);
}

.bf-scope .bf-thumb:has(img:not(.hide)) {
  border-style: solid;
  background-color: var(--bf-color-surface);
}

/* The photo img fills the cell absolutely so its intrinsic size can never
   stretch the 1:1 aspect-ratio box (filled and empty cells stay row-aligned;
   the markup's inline width/height:100% + object-fit:contain resolve against
   this positioned box). */
.bf-scope .bf-thumb img {
  position: absolute;
  inset: 2px;
}

/* Injected template picker (webfunc/fn_get_templates.php ->
   #build-choose-type). The buttons keep btn/btn-default/template-button
   (scripts.js's selectStyleTemplate clears + sets active/btn-success on
   them); bf-template-card restyles around the state machinery. The plate
   replaces the legacy inline absolute black band - text sits on a SOLID
   ink surface, never on the template image itself. */
.bf-scope .bf-template-card {
  position: relative;
  background-color: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border-strong);
  border-radius: var(--bf-radius-md);
  box-shadow: none;
  cursor: pointer;
}

.bf-scope .bf-template-card:hover {
  border-color: var(--bf-brand-primary);
  box-shadow: var(--bf-shadow-md);
}

.bf-scope .bf-template-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
}

/* Selected: same constant-width treatment as the pack cards (no 1px jiggle). */
.bf-scope .bf-template-card.btn-success {
  border: 1px solid var(--bf-brand-secondary);
  box-shadow: inset 0 0 0 1px var(--bf-brand-secondary),
              0 0 0 3px var(--bf-color-success-ring),
              var(--bf-shadow-sm);
}

.bf-scope .bf-template-card__plate {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin-bottom: 5px;
  padding: var(--bf-space-1) var(--bf-space-2);
  background-color: var(--bf-brand-secondary) !important; /* counters hozi's #000 !important */
  color: var(--bf-color-text-inverse) !important;
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-bold);
  letter-spacing: 0.03em;
  cursor: pointer;
}

/* Confirm-step instruction list (replaces the legacy label-per-line stack). */
.bf-scope .bf-confirm-steps {
  margin: 0 0 var(--bf-space-3);
  padding-left: var(--bf-space-5);
}

/* Instruction list sits back under the data it introduces. */
.bf-scope .bf-confirm-steps li {
  margin-bottom: var(--bf-space-1);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-normal);
}

/* -----------------------------------------------------------------------------
   Place-ad wizard step refinements (WS3 polish pass, chunk-2). These ride the
   load-bearing legacy hooks (place_ad-pack, place_ad-pack-rad, btn-success,
   ids) as pure style targets; the JS state machinery is untouched.
   -------------------------------------------------------------------------- */

/* Step 1: validation-error chip + row rule tightening. */
.bf-scope .place-ad_button-row .bf-field__error {
  padding: var(--bf-space-1) var(--bf-space-3);
  background-color: var(--bf-color-danger-bg);
  border-radius: var(--bf-radius-sm);
  font-weight: var(--bf-weight-medium);
}

.bf-scope .place-ad_button-row hr {
  margin: var(--bf-space-2) 0;
}

/* Step 2: neutralize hozi's black hover/active/checked plates on pack cards.
   Hover keeps the unified dialect: border swap + raised shadow, no lift. */
.bf-scope .place_ad-pack .bf-pack-card:hover {
  background-color: var(--bf-color-surface);
  color: var(--bf-color-text);
  border-color: var(--bf-color-text);
  box-shadow: var(--bf-shadow-md);
}

.bf-scope .place_ad-pack .bf-pack-card.active,
.bf-scope .place_ad-pack .bf-pack-card.btn-success,
.bf-scope .place_ad-pack .place_ad-pack-rad:checked + label {
  background-color: var(--bf-color-surface);
  color: var(--bf-color-text);
}

/* Selected: constant border width (no 1px jiggle), ink ring + ready glow. */
.bf-scope .place_ad-pack .bf-pack-card.btn-success {
  border: 1px solid var(--bf-color-text);
  box-shadow: inset 0 0 0 1px var(--bf-color-text),
              0 0 0 3px var(--bf-color-success-ring),
              var(--bf-shadow-sm);
  position: relative;
}

/* ... plus a brand-accent check badge in the corner. */
.bf-scope .place_ad-pack .bf-pack-card.btn-success::after {
  content: "\2713";
  position: absolute;
  top: var(--bf-space-2);
  right: var(--bf-space-2);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bf-brand-accent);
  color: var(--bf-color-text-inverse);
  font-size: var(--bf-text-sm);
  line-height: 22px;
  text-align: center;
}

/* Keyboard focus: out-specifies hozi's outline/box-shadow kill. */
.bf-scope .place_ad-pack .bf-pack-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring), var(--bf-shadow-sm);
}

/* Price: decision datum, not fine print. opacity 1 overrides hozi's
   .place_ad-pack-label small { opacity: .8 }, which composited the accent
   to 3.88:1 (AA fail); full-opacity accent on white is 4.96:1. */
.bf-scope .bf-pack-card .bf-pack-card__price {
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-medium);
  letter-spacing: 0.02em;
  opacity: 1;
}

/* Description: muted prose over a hairline, not shouty uppercase over 1px #000. */
.bf-scope .bf-pack-card .place_ad-pack-desc {
  border-top: 1px solid var(--bf-color-border);
  padding-top: var(--bf-space-2);
}

.bf-scope .bf-pack-card .place_ad-pack-desc p {
  color: var(--bf-color-text-muted);
  font-weight: var(--bf-weight-normal);
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--bf-text-sm);
  margin: 0;
}

/* Equal heights + deliberate token re-assertion over hozi's 6px/18px/drop-shadow. */
.bf-scope .place_ad-pack > .row {
  display: flex;
  flex-wrap: wrap;
}

.bf-scope .place_ad-pack > .row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.bf-scope .place_ad-pack .bf-pack-card {
  flex: 1 1 auto;
  padding: var(--bf-space-4) var(--bf-space-3);
  border-radius: var(--bf-radius-md);
  box-shadow: var(--bf-shadow-sm);
  text-align: left;
}

/* Step 2: zone header as an editorial serif over a hairline, not 2px #000. */
.bf-scope .place-ad_select-pub {
  border-bottom: 1px solid var(--bf-color-border-strong);
  padding-bottom: var(--bf-space-2);
  margin-bottom: var(--bf-space-4);
}

.bf-scope .place-ad_select-pub h3.place_ad-pack-label {
  font-family: var(--bf-font-serif);
  font-size: var(--bf-text-xl);
  font-weight: 600;
  letter-spacing: normal;
  color: var(--bf-color-text);
  margin: 0;
}

/* PACKAGE_CHOOSER_NOTES lede. */
.bf-scope #package > .row.container-fluid:first-child {
  font-size: var(--bf-text-base);
  color: var(--bf-color-text-muted);
  max-width: 62ch;
  margin-bottom: var(--bf-space-4);
}

.bf-scope #package > .row.container-fluid:first-child h3 {
  font-family: var(--bf-font-serif);
  font-size: var(--bf-text-xl);
  color: var(--bf-color-text);
  margin: 0 0 var(--bf-space-2);
}

/* Loading placeholder: inert dashed plate, not a fake clickable button. */
.bf-scope #local_rate_packages .bf-btn--secondary {
  pointer-events: none;
  background: transparent;
  border: 1px dashed var(--bf-color-border-strong);
  color: var(--bf-color-text-muted);
  box-shadow: none;
}

/* Duplicate decorative hr in the package button row (the frame hr rule
   handles the rest). */
.bf-scope #package .place-ad_button-row hr {
  display: none;
}

/* Step 3: neutralize the legacy black hover/active skin on template cards. */
.bf-scope .bf-template-card:hover,
.bf-scope .bf-template-card.active,
.bf-scope .place_ad-build-rad:checked + .bf-template-card {
  background-color: var(--bf-color-surface);
  color: var(--bf-color-text);
}

/* Step 3: right-rail alignment for the print builder. */
@media (min-width: 768px) {
  .bf-scope #full-summary-preview-div {
    width: 50%;
  }

  .bf-scope #build-capture-newspaper > div.col-sm-6:last-child {
    float: right;
    clear: right;
    width: 50%;
  }
}

.bf-scope .full-summary-preview {
  margin-bottom: var(--bf-space-4);
}

/* Summary terms rows (the inline 10px/300px style was removed from markup). */
.bf-scope .full-summary-preview .row {
  margin: 0;
  padding-left: var(--bf-space-2);
}

/* Statically-classed btn-success CTAs must not wear the permanent ready glow. */
.bf-scope #update-preview-button.btn-success,
.bf-scope #continue-to-digital-button.btn-success {
  box-shadow: var(--bf-shadow-sm);
  padding: var(--bf-space-3) var(--bf-space-5);
}

/* ... but their keyboard focus ring must survive the id-specificity above. */
.bf-scope #update-preview-button.btn-success:focus-visible,
.bf-scope #continue-to-digital-button.btn-success:focus-visible {
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
}

/* Style intro: editorial paper + brand top rule instead of a blue system alert. */
.bf-scope #select-style-template-div.bf-alert--info {
  background-color: var(--bf-color-paper);
  border: 1px solid var(--bf-color-border-strong);
  border-top: 3px solid var(--bf-brand-primary);
  color: var(--bf-color-text);
}

/* Demote the parenthetical formatting note (covers print + online intros). */
.bf-scope .place_ad-print-details > p {
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-normal);
  color: var(--bf-color-text-muted);
  margin-bottom: var(--bf-space-3);
}

/* Upsell rows: flexed rows with hairlines, muted prices. */
.bf-scope #prominent_placement_options .bf-form-frame label {
  display: flex;
  align-items: center;
  gap: var(--bf-space-2);
  margin: 0;
  padding: var(--bf-space-2) 0;
  font-size: var(--bf-text-base);
}

.bf-scope #prominent_placement_options .bf-form-frame label ~ label {
  border-top: 1px solid var(--bf-color-border);
}

.bf-scope #prominent_placement_options .bf-form-frame > br {
  display: none;
}

.bf-scope #featured_homepage_upsell_price,
.bf-scope #featured_category_upsell_price,
.bf-scope #featured_parent_category_upsell_price {
  color: var(--bf-color-text-muted);
}

/* Step 4 (confirm): tabular right-aligned figures. !important is needed only
   to widen the inline width:50px / re-assert over inline text-align. */
.bf-scope #place_ad-confirm-price,
.bf-scope #place_ad-confirm-tax,
.bf-scope #place_ad-confirm-total {
  display: inline-block;
  width: 90px !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

/* Total: one hairline under the whole label+amount pair, terminal bold.
   !important replaces the inline border-top:1px solid #ccc stub on #amount. */
.bf-scope #place_ad-confirm-total-label,
.bf-scope #place_ad-confirm-amount {
  display: inline-block;
  margin-top: var(--bf-space-2);
  padding-top: var(--bf-space-2);
  border-top: 1px solid var(--bf-color-border-strong) !important;
  font-weight: var(--bf-weight-bold);
}

/* Instruction alert: stop Bootstrap .container width + flex-column squeeze. */
.bf-scope #confirm .bf-alert--info.container {
  display: block;
  width: auto;
  max-width: 100%;
}

.bf-scope #confirm .bf-alert--info > div {
  margin-top: var(--bf-space-2);
}

/* Section rhythm: hairlines between form-groups, ink eyebrows. */
.bf-scope #place_ad-confirm > .form-group + .form-group {
  border-top: 1px solid var(--bf-color-border-strong);
  padding-top: var(--bf-space-4);
}

.bf-scope #place_ad-confirm .bf-term {
  color: var(--bf-color-text);
  display: inline-block;
  margin-bottom: var(--bf-space-1);
}

/* Empty JS-populated wells disappear until filled. */
.bf-scope #place_ad-confirm .info-box-wrapper:empty {
  display: none;
}

/* Headline in the editorial serif voice. */
.bf-scope #confirm .place_ad-confirm-heading {
  font-family: var(--bf-font-serif);
  font-size: var(--bf-text-2xl);
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 var(--bf-space-3);
}

/* Not-logged-in warning (now a real role=alert div) breathes above the rule. */
.bf-scope #confirm-not-logged-in {
  margin-top: var(--bf-space-2);
}

/* Button row: captcha anchored to its action; full-width stack on mobile. */
.bf-scope #captcha {
  margin-bottom: var(--bf-space-3);
}

@media (max-width: 767px) {
  .bf-scope #confirm .place-ad_button-row .bf-btn {
    float: none;
    width: 100%;
    margin-bottom: var(--bf-space-2);
  }
}

/* -----------------------------------------------------------------------------
   Bootstrap modals inside .bf-scope: the editorial card treatment (paper
   surface, hairline frame, 3px brand top rule, serif title, sunken footer).
   -------------------------------------------------------------------------- */
.bf-scope .modal-content {
  background-color: var(--bf-color-paper);
  border: 1px solid var(--bf-color-border-strong);
  border-top: 3px solid var(--bf-brand-primary);
  border-radius: var(--bf-radius-md);
  box-shadow: var(--bf-shadow-lg);
}

.bf-scope .modal-header {
  border-bottom: 1px solid var(--bf-color-border);
}

.bf-scope .modal-header h1,
.bf-scope .modal-header h2,
.bf-scope .modal-header h3,
.bf-scope .modal-header h4,
.bf-scope .modal-title {
  font-family: var(--bf-font-serif);
  font-weight: 600;
  font-size: var(--bf-text-xl);
  margin: 0;
}

.bf-scope .modal-footer {
  border-top: 1px solid var(--bf-color-border);
  background-color: var(--bf-color-surface-alt);
}

/* Region-picker modal: each radio row becomes a hairline-divided flex row. */
.bf-scope #region_dialog .form-group {
  display: flex;
  align-items: center;
  gap: var(--bf-space-2);
  padding: var(--bf-space-2) 0;
  margin: 0;
  border-bottom: 1px solid var(--bf-color-border);
}

.bf-scope #region_dialog input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--bf-brand-primary);
}

/* Listbox variant of bf-select (the subcategory modal's size-N select). */
.bf-scope select.bf-select[size] {
  height: auto;
  max-height: 280px;
  padding: var(--bf-space-1);
  font-size: var(--bf-text-base);
  line-height: 1.4;
  border: 1px solid var(--bf-color-border-strong);
  border-radius: var(--bf-radius-md);
}

.bf-scope select.bf-select[size] option {
  padding: var(--bf-space-2) var(--bf-space-3);
  border-radius: var(--bf-radius-sm);
}

.bf-scope select.bf-select[size] option:checked {
  background: var(--bf-color-surface-sunken);
  color: var(--bf-color-text);
}

/* -----------------------------------------------------------------------------
   Quoted/system content well  .bf-well  (echoed legacy summaries)
   -------------------------------------------------------------------------- */
.bf-well {
  margin-top: var(--bf-space-5);
  padding: var(--bf-space-4);
  background-color: var(--bf-color-surface-sunken);
  border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-sm);
  text-align: left;
}

.bf-scope .bf-well h4 {
  font-family: var(--bf-font-serif);
  font-size: var(--bf-text-lg);
  margin: 0 0 var(--bf-space-2);
}

/* Button-row alignment modifiers. */
.bf-btn-row--center {
  justify-content: center;
}

.bf-btn-row--split {
  justify-content: space-between;
}

@media (max-width: 600px) {
  .bf-btn-row--split {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .bf-btn-row--split .bf-btn {
    width: 100%;
  }
}

/* Brand-accented checkbox row  .bf-check */
.bf-check {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-2);
  cursor: pointer;
}

.bf-check input[type="checkbox"] {
  width: var(--bf-space-4);
  height: var(--bf-space-4);
  accent-color: var(--bf-brand-primary);
}

.bf-check input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
}

/* -----------------------------------------------------------------------------
   Payment page + small pages (WS3 polish pass, chunk-3). Pure style targets on
   the load-bearing payment/CSR hooks; JS state machinery untouched.
   -------------------------------------------------------------------------- */

/* Billing edit form rhythm (#update-billing-info). */
.bf-scope #update-billing-info br {
  display: none;
}

.bf-scope #update-billing-info .bf-input,
.bf-scope #update-billing-info .bf-select {
  margin-bottom: var(--bf-space-3);
}

.bf-scope #update-billing-info .bf-field__error:not(.hide) {
  display: block;
  margin: calc(-1 * var(--bf-space-2)) 0 var(--bf-space-3);
}

/* Billing summary as a definition list (#show-billing-info). */
.bf-scope #show-billing-info > .form-group > div {
  padding: var(--bf-space-2) 0;
  border-bottom: 1px solid var(--bf-color-border);
}

.bf-scope #show-billing-info > .form-group > div:last-child {
  border-bottom: 0;
}

.bf-scope #show-billing-info #show-billing-email_address {
  font-weight: var(--bf-weight-medium);
}

.bf-scope #show-billing-info #show-billing-firstname,
.bf-scope #show-billing-info #show-billing-lastname {
  font-family: var(--bf-font-serif);
  font-size: var(--bf-text-lg);
}

.bf-scope #show-billing-info .bf-btn {
  margin-top: var(--bf-space-3);
  border-color: var(--bf-color-border-strong);
}

/* Section headings: one shared eyebrow rule. */
.bf-scope #show-billing-info > label,
.bf-scope #update-billing-info > #customer-create-label,
.bf-scope #update-billing-info > #update-billing-label,
.bf-scope #payment-credit-card-info > label,
.bf-scope .place-ad_summary > label {
  display: block;
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bf-color-text-muted);
  padding-bottom: var(--bf-space-2);
  border-bottom: 1px solid var(--bf-color-border);
  margin-bottom: var(--bf-space-3);
}

/* Total amount row: the inline width:200px label wrap dies; figures align. */
.bf-scope #payment-credit-card-info .form-group label[style] {
  width: auto !important;
  margin: 0;
}

.bf-scope #payment-credit-card-info .info-box-wrapper > .form-group:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bf-space-3);
}

.bf-scope #payment-credit-card-info #payment-amount {
  font-family: var(--bf-font-serif);
  font-size: var(--bf-text-xl);
  font-weight: 600;
  color: var(--bf-color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; /* the spaced legacy separators must not break mid-figure */
}

/* Square iframe space reserved up front; no layout jump on mount. */
.bf-scope #card-container {
  min-height: 90px;
}

.bf-scope #card-container:empty {
  background-color: var(--bf-color-surface-sunken);
  border: 1px dashed var(--bf-color-border);
  border-radius: var(--bf-radius-sm);
}

/* CSR lookup: status chip + 48px result rows. */
.bf-scope #customerLookupMessage.btn-warning {
  display: block;
  padding: var(--bf-space-2) var(--bf-space-3);
  background-color: var(--bf-color-warning-bg);
  border: 1px solid var(--bf-color-warning);
  border-left-width: 3px;
  border-radius: var(--bf-radius-sm);
  color: var(--bf-color-text);
  letter-spacing: normal;
  font-weight: var(--bf-weight-medium);
}

.bf-scope #customerLookupResults br {
  display: none;
}

.bf-scope #customerLookupResults .bf-btn--ghost {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  min-height: var(--bf-space-8);
  margin-bottom: var(--bf-space-2);
  border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-sm);
}

.bf-scope #customerLookupResults .bf-btn--ghost:hover {
  border-color: var(--bf-brand-primary);
}

.bf-scope .place-ad_summary hr {
  border-bottom-color: var(--bf-color-border);
}

/* #myModal emphasis rebalance: the affirmative Pay Now gets the solid ink
   plate; the danger Cancel keeps its meaning but stops dominating. */
.bf-scope #myModal .modal-footer .bf-btn[data-dismiss="modal"] {
  background-color: var(--bf-brand-secondary);
  border-color: var(--bf-brand-secondary);
  color: var(--bf-color-text-inverse);
}

/* Small-pages callout CTA: full-size button presence. */
.bf-scope .bf-callout .bf-btn {
  min-width: 12em;
}

/* Fraud-report row: re-assert the bf-check layout over the .bf-field > label
   block treatment (0,3,0 beats 0,2,1), and drop Bootstrap's checkbox margin. */
.bf-scope .bf-field > .bf-check {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-2);
  margin: 0;
}

.bf-scope .bf-check input[type="checkbox"] {
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* Drawer (off-canvas panel) - the slide-out "ALL CATEGORIES" nav      */
/* shared by ad_listing / search_results / the homepage. VISUAL ONLY:  */
/* positioning, width, the velocity-driven `right` open/close, and the */
/* `.open .category-sub-list { display:block }` accordion stay in       */
/* hozi.main.css (JS-coupled mechanics). Rules carry the 2-class        */
/* `.bf-scope .bf-drawer` prefix so they win over the legacy            */
/* `.panel-all-categories*` / `.category-*` colors regardless of CSS    */
/* load order. (WS3 A1.)                                                */
/* ------------------------------------------------------------------ */
.bf-scope .panel-all-categories.bf-drawer {
  background-color: var(--bf-color-surface);
  color: var(--bf-color-text);
}

.bf-scope .bf-drawer .bf-drawer__panel {
  background-color: var(--bf-color-surface);
  color: var(--bf-color-text);
  padding: var(--bf-space-3);
}

.bf-scope .bf-drawer .bf-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-2);
  padding-bottom: var(--bf-space-3);
  margin-bottom: var(--bf-space-2);
  border-bottom: 2px solid var(--bf-color-primary);
}

.bf-scope .bf-drawer .bf-drawer__title {
  margin: 0;
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-lg);
  font-weight: var(--bf-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bf-color-text);
}

.bf-scope .bf-drawer .bf-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: var(--bf-space-1) var(--bf-space-2);
  background: transparent;
  border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-sm);
  color: var(--bf-color-text-muted);
  cursor: pointer;
}

.bf-scope .bf-drawer .bf-drawer__close:hover {
  background-color: var(--bf-color-surface-sunken);
  color: var(--bf-color-text);
}

.bf-scope .bf-drawer .bf-drawer__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
}

.bf-scope .bf-drawer .bf-drawer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bf-scope .bf-drawer .bf-drawer__group {
  border-bottom: 1px solid var(--bf-color-border);
}

/* Accordion header: a real, full-width, keyboard-reachable disclosure
   button (replaces the old clickable <h4>). */
.bf-scope .bf-drawer .bf-drawer__cat {
  display: flex;
  align-items: center;
  gap: var(--bf-space-2);
  width: 100%;
  padding: var(--bf-space-3) var(--bf-space-2);
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-medium);
  color: var(--bf-color-text);
  text-align: left;
  cursor: pointer;
}

.bf-scope .bf-drawer .bf-drawer__cat .fa {
  font-size: var(--bf-text-sm);
  color: var(--bf-color-text-muted);
}

.bf-scope .bf-drawer .bf-drawer__cat:hover {
  background-color: var(--bf-color-surface-sunken);
}

.bf-scope .bf-drawer .bf-drawer__cat:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--bf-color-focus-ring);
}

/* Expanded group: sunken plate + teal-as-accent left rule (teal carries
   NO text here, per conventions.md 5.4). */
.bf-scope .bf-drawer .bf-drawer__group.open .bf-drawer__cat {
  background-color: var(--bf-color-surface-sunken);
  border-left-color: var(--bf-color-primary);
}

.bf-scope .bf-drawer .bf-drawer__sublist-item {
  padding: 0;
}

.bf-scope .bf-drawer .bf-drawer__sublink {
  display: inline-block;
  padding: var(--bf-space-1) 0;
  color: var(--bf-color-primary-text);
  text-decoration: none;
}

.bf-scope .bf-drawer .bf-drawer__sublink:hover {
  color: var(--bf-color-text);
  text-decoration: underline;
}

.bf-scope .bf-drawer .bf-drawer__sublink:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
}

@media (prefers-reduced-motion: no-preference) {
  .bf-scope .bf-drawer .bf-drawer__cat,
  .bf-scope .bf-drawer .bf-drawer__close,
  .bf-scope .bf-drawer .bf-drawer__sublink {
    transition: background-color var(--bf-transition-base),
                color var(--bf-transition-base),
                border-color var(--bf-transition-base),
                box-shadow var(--bf-transition-base);
  }
}

/* ------------------------------------------------------------------ */
/* Featured carousel (sidebar widget) - the "FEATURED ADS" rail on     */
/* ad_listing / search_results. The Bootstrap carousel mechanics       */
/* (.carousel/.carousel-inner/.item/.carousel-control positioning +    */
/* the data-ride auto-advance) stay vendored; these rules only re-skin */
/* the widget, cards, and controls. Designed to be reused by the A3/A4 */
/* featured/recently-viewed widgets. (WS3 A2.)                         */
/* ------------------------------------------------------------------ */
.bf-scope .bf-carousel {
  margin: 0 0 var(--bf-space-5);
  text-align: left;
}

.bf-scope .bf-carousel__head {
  margin-bottom: var(--bf-space-3);
}

.bf-scope .bf-carousel__title {
  margin: 0;
  padding-bottom: var(--bf-space-2);
  border-bottom: 2px solid var(--bf-color-primary);
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-lg);
  font-weight: var(--bf-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bf-color-text);
}

.bf-scope .bf-carousel__viewport {
  position: relative;
}

.bf-scope .bf-carousel__slide {
  padding: var(--bf-space-1) 0;
}

/* Card: editorial paper surface, hairline, brand-accent top rule. */
.bf-scope .bf-carousel__card {
  position: relative;
  margin-bottom: var(--bf-space-2);
  padding: var(--bf-space-4) var(--bf-space-3);
  background-color: var(--bf-color-paper);
  border: 1px solid var(--bf-color-border);
  border-top: 3px solid var(--bf-brand-accent);
  border-radius: var(--bf-radius-md);
}

.bf-scope .bf-carousel a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.bf-scope .bf-carousel a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
  border-radius: var(--bf-radius-md);
}

.bf-scope .bf-carousel__card strong {
  display: block;
  margin-bottom: var(--bf-space-2);
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bf-color-text-muted);
}

.bf-scope .bf-carousel__card-title {
  margin: 0 0 var(--bf-space-1);
  font-family: var(--bf-font-serif);
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-bold);
  line-height: var(--bf-leading-tight);
  color: var(--bf-color-text);
}

.bf-scope .bf-carousel__card-body {
  font-size: var(--bf-text-sm);
  line-height: var(--bf-leading-normal);
  color: var(--bf-color-text);
}

.bf-scope .bf-carousel__card-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto var(--bf-space-2);
  border-radius: var(--bf-radius-sm);
}

/* Prev/next controls: re-skin the Bootstrap .carousel-control glyphs into
   compact readable plates (the glyph keeps its Bootstrap absolute centering). */
.bf-scope .bf-carousel__control {
  background: none;
  opacity: 1;
  text-shadow: none;
}

.bf-scope .bf-carousel__control .glyphicon {
  padding: var(--bf-space-2);
  background-color: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-pill);
  box-shadow: var(--bf-shadow-sm);
  color: var(--bf-color-text);
}

.bf-scope .bf-carousel__control:hover .glyphicon {
  color: var(--bf-color-primary-text);
  border-color: var(--bf-color-primary);
}

.bf-scope .bf-carousel__control:focus-visible {
  outline: none;
}

.bf-scope .bf-carousel__control:focus-visible .glyphicon {
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
}

@media (prefers-reduced-motion: no-preference) {
  .bf-scope .bf-carousel__card,
  .bf-scope .bf-carousel__control .glyphicon {
    transition: background-color var(--bf-transition-base),
                color var(--bf-transition-base),
                border-color var(--bf-transition-base),
                box-shadow var(--bf-transition-base);
  }

  .bf-scope .bf-carousel__card:hover {
    box-shadow: var(--bf-shadow-sm);
  }
}

/* ------------------------------------------------------------------ */
/* Homepage masthead - newspaper nameplate hero (extends .bf-hero).     */
/* Behavior-preserving: the search command bar is unchanged. (WS3.)     */
/* ------------------------------------------------------------------ */
.bf-scope .bf-masthead {
  text-align: center;
}

.bf-scope .bf-masthead__nameplate {
  margin: 0;
  padding-bottom: var(--bf-space-3);
  border-bottom: 1px solid var(--bf-color-border-strong);
  font-family: var(--bf-font-serif);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--bf-color-text);
}

.bf-scope .bf-masthead .bf-hero__title {
  margin-top: var(--bf-space-3);
}

.bf-scope .bf-masthead__edition {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--bf-space-2) var(--bf-space-3);
  margin: var(--bf-space-3) 0 0;
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bf-color-text-muted);
}

/* ------------------------------------------------------------------ */
/* Lead category tile - the first card spans the grid; media + plate    */
/* side by side on md+ (magazine front page). (WS3.)                    */
/* ------------------------------------------------------------------ */
.bf-scope .bf-category-grid .bf-category-card--lead {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .bf-scope .bf-category-card--lead {
    flex-direction: row;
  }

  .bf-scope .bf-category-card--lead .bf-category-card__frame {
    flex: 1 1 56%;
  }

  .bf-scope .bf-category-card--lead .bf-category-card__media {
    height: 100%;
    min-height: 320px;
    aspect-ratio: auto;
  }

  .bf-scope .bf-category-card--lead .bf-category-card__plate {
    flex: 1 1 44%;
    justify-content: center;
  }

  .bf-scope .bf-category-card--lead .bf-category-card__title {
    font-size: clamp(28px, 3vw, 40px);
  }
}

/* ------------------------------------------------------------------ */
/* Ad band - 728x90 banner + place-ad CTA (replaces legacy .ad-row).    */
/* Hidden below the lg breakpoint (matches old visible-md/lg). (WS3 A8.)*/
/* ------------------------------------------------------------------ */
.bf-scope .bf-adband {
  display: none;
}

@media (min-width: 992px) {
  .bf-scope .bf-adband {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bf-space-5);
    margin: var(--bf-space-5) auto;
    padding: var(--bf-space-4);
    background-color: var(--bf-color-surface);
    border: 1px solid var(--bf-color-border);
    border-radius: var(--bf-radius-md);
  }
}

.bf-scope .bf-adband__banner {
  flex: 0 1 auto;
  min-width: 0;
}

.bf-scope .bf-adband__cta {
  position: relative;
  flex: 0 0 auto;
}

.bf-scope .bf-adband__cta img {
  max-width: 100%;
  height: auto;
}

/* Sidebar ad rail (300x250 box ads) - replaces the legacy <center> in
   sandbox/ad_sidebar.php. (WS3 A9.) */
.bf-scope .bf-adrail {
  margin: var(--bf-space-4) 0;
  text-align: center;
}

.bf-scope .bf-adrail img {
  max-width: 100%;
  height: auto;
}

/* Place-ad graphics picker (webfunc/fn_load_graphics.php -> #graphics-library
   modal). bf- cards around the intact selectAttentionGetter JS. (WS3 A10.) */
.bf-scope .bf-graphic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--bf-space-3);
}

.bf-scope .bf-graphic-card {
  display: block;
  padding: var(--bf-space-2);
  background-color: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border-strong);
  border-radius: var(--bf-radius-md);
  cursor: pointer;
}

.bf-scope .bf-graphic-card:hover {
  border-color: var(--bf-color-primary);
  box-shadow: var(--bf-shadow-sm);
}

.bf-scope .bf-graphic-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
}

.bf-scope .bf-graphic-card__img {
  display: block;
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .bf-scope .bf-graphic-card {
    transition: border-color var(--bf-transition-base), box-shadow var(--bf-transition-base);
  }
}

/* Site maintenance page (site_maintenance.php) - centered card, no site chrome. (WS3 A11.) */
.bf-scope .bf-maintenance {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--bf-space-5);
}

.bf-scope .bf-maintenance__card {
  max-width: 640px;
  text-align: center;
}

.bf-scope .bf-maintenance__art {
  max-width: 100%;
  height: auto;
  margin-bottom: var(--bf-space-4);
}

.bf-scope .bf-maintenance__lede {
  font-family: var(--bf-font-serif);
  font-size: var(--bf-text-lg);
  color: var(--bf-color-text);
}

.bf-scope .bf-maintenance__time {
  color: var(--bf-color-text-muted);
}

/* Non-publish-date popup (setup_publications.php editNonPubDate; appended to
   <body>, so its root carries bf-scope). (WS3 A13.) */
.bf-scope.bf-nonpub-popup {
  width: 400px;
  max-width: 92vw;
  padding: var(--bf-space-4);
  background-color: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border-strong);
  border-radius: var(--bf-radius-md);
  box-shadow: var(--bf-shadow-lg);
}

.bf-scope.bf-nonpub-popup .bf-nonpub-popup__close {
  margin: 0 0 var(--bf-space-2);
  text-align: right;
}

.bf-scope.bf-nonpub-popup .bf-nonpub-popup__actions {
  display: flex;
  gap: var(--bf-space-2);
  justify-content: center;
  margin-top: var(--bf-space-3);
}

/* ------------------------------------------------------------------ */
/* bf- skin for the Bootstrap region/notice modals (Bootstrap .modal    */
/* mechanics + data-dismiss stay; this only re-surfaces .modal-content).*/
/* ------------------------------------------------------------------ */
.bf-scope .bf-modal__skin {
  background-color: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border-strong);
  border-radius: var(--bf-radius-md);
  box-shadow: var(--bf-shadow-lg);
  color: var(--bf-color-text);
}

.bf-scope .bf-modal__skin .modal-header,
.bf-scope .bf-modal__skin .modal-footer {
  border-color: var(--bf-color-border);
}

.bf-scope .bf-modal__skin .modal-title,
.bf-scope .bf-modal__skin h3,
.bf-scope .bf-modal__skin h4 {
  font-family: var(--bf-font-serif);
  color: var(--bf-color-text);
}