/* Moved from websites/templates/websites/_merchant_feed_ads_styles.html (redesign checklist: local CSS out of the
   templates). Loaded only by the pages that include that partial. The CSS explainer and the glossary left the
   page on 2026-10-08: the feed campaign page says what a group means in one line, inside its fold. */

.mfa-page {
    --mfa-ink: var(--color-text, var(--navy));
    --mfa-muted: var(--color-neutral-600, var(--color-neutral-600));
    --mfa-line: var(--color-neutral-300, var(--color-neutral-300));
    --mfa-track: var(--color-neutral-200, var(--color-neutral-200));
    --mfa-bad: var(--coral-text);
    font-variant-numeric: tabular-nums; }
.mfa-page .num { text-align: right; white-space: nowrap; }
.mfa-page h3.mfa-h { font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
    font-weight: 800; margin: var(--space-6) 0 var(--space-2); color: var(--mfa-ink); }
.mfa-page h3.mfa-h:first-child { margin-top: 0; }
.mfa-lead { font-size: 15px; line-height: 1.5; margin: 0 0 var(--space-3); max-width: 72ch; }
.mfa-lead b { font-weight: 800; }
.mfa-small { font-size: 12px; color: var(--mfa-muted); margin: var(--space-2) 0 0; }
.mfa-pending { color: var(--ro-pending, var(--color-neutral-600)); font-size: 15px; margin: 0; }
.mfa-bad { color: var(--mfa-bad); font-weight: 700; }

/* Lists wear the standard .table (DOC_DESIGN_UI_KIT.md §4.5), 50 rows a
   page under the standard .pagination (§4.1); only the scroll and the
   title width are this page's. */
.mfa-table-wrap { overflow-x: auto; }
.mfa-table-wrap .table { width: 100%; }
.mfa-table-wrap td.mfa-title { max-width: 32rem; }
.mfa-page .pagination { margin: var(--space-3) 0 var(--space-4); }

.mfa-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.mfa-check { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-3);
    padding: var(--space-2) 0; border-bottom: 1px solid var(--mfa-track); }
.mfa-check h4 { margin: 0 0 2px; font-size: 14px; }
.mfa-check p { margin: 0; }
.mfa-advice { color: var(--mfa-muted); font-size: 13px; margin-top: 2px !important; }
.mfa-check form { margin-top: var(--space-2); }

.mfa-steps { margin: 0 0 var(--space-3); padding-left: 1.4em; }
.mfa-steps li { margin-bottom: 4px; }
.mfa-callout { border: 1px solid var(--mfa-line); border-radius: 8px; padding: var(--space-3);
    margin: 0 0 var(--space-4); background: var(--rs-paper, transparent); }
.mfa-callout h3 { margin-top: 0; }


.mfa-form { display: grid; gap: var(--space-3); max-width: 44rem; }
.mfa-form fieldset { border: 1px solid var(--mfa-line); border-radius: 8px; padding: var(--space-3); margin: 0; }
.mfa-form legend { font-weight: 700; padding: 0 4px; }
.mfa-form label.mfa-option { display: flex; gap: 8px; align-items: baseline; margin: 4px 0; }
.mfa-form .mfa-inline { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.mfa-form .mfa-inline label { display: grid; gap: 4px; font-size: 13px; }
.mfa-form input[type=number], .mfa-form input[type=text], .mfa-form input[type=date] { max-width: 12rem; }

.mfa-url { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mfa-url code { word-break: break-all; }
@media (max-width: 640px) {
  .mfa-check { grid-template-columns: 1fr; }
}