/* ============================================================
   FamilyFinancePro — CoreUI Light Theme
   Tokens extraídos do CoreUI React Latest Light
   Primary #5856d6 · Body bg #f3f4f7 · Sidebar white 256px
   ============================================================ */

/* ── 1. Design tokens ──────────────────────────────────── */
:root {
  --ffp-primary:         #5856d6;
  --ffp-primary-hover:   #4644c4;
  --ffp-primary-light:   #ededfb;
  --ffp-primary-rgb:     88, 86, 214;
  --ffp-secondary:       #6b7785;
  --ffp-success:         #1b9e3e;
  --ffp-danger:          #e55353;
  --ffp-warning:         #f9b115;
  --ffp-info:            #39f;

  --ffp-body-bg:         #f3f4f7;
  --ffp-body-color:      #252b36;
  --ffp-muted:           #6b7785;
  --ffp-border:          #dbdfe6;

  --ffp-radius:          6px;
  --ffp-radius-lg:       8px;

  --ffp-card-bg:         #ffffff;
  --ffp-card-shadow:     0 1px 3px rgba(8, 10, 12, .12);

  --ffp-sidebar-width:   256px;
  --ffp-sidebar-bg:      #ffffff;
  --ffp-sidebar-border:  #dbdfe6;
  --ffp-sidebar-color:   #252b36;

  --ffp-header-h:        57px;
  --ffp-header-bg:       #ffffff;
  --ffp-header-border:   #dbdfe6;

  --ffp-font:            system-ui, -apple-system, "Segoe UI", Roboto,
                         "Helvetica Neue", Arial, sans-serif;
}

/* ── 2. Reset global para tokens CoreUI ────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--ffp-font);
  background: var(--ffp-body-bg);
  color: var(--ffp-body-color);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ffp-primary);
}

/* ── 3. Layout principal (dashboard-page) ──────────────── */
body.dashboard-page {
  background: var(--ffp-body-bg);
}

/* Margem à esquerda quando sidebar visível */
body.dashboard-page main.dashboard-layout,
body.dashboard-page .dashboard-layout {
  margin-left: var(--ffp-sidebar-width);
  padding-top: calc(var(--ffp-header-h) + 24px);
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 32px;
  min-height: 100vh;
  background: var(--ffp-body-bg);
}

/* sidebar collapsed */
body.sidebar-collapsed .ffp-sidebar {
  transform: translateX(-100%);
}
body.sidebar-collapsed main.dashboard-layout,
body.sidebar-collapsed .dashboard-layout {
  margin-left: 0;
}
body.sidebar-collapsed .ffp-header {
  left: 0;
}

/* ── 4. Sidebar ────────────────────────────────────────── */
.ffp-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--ffp-sidebar-width);
  background: var(--ffp-sidebar-bg);
  border-right: 1px solid var(--ffp-sidebar-border);
  display: flex;
  flex-direction: column;
  z-index: 1030;
  transition: transform .2s ease;
  overflow: hidden;
}

.ffp-sidebar-brand {
  height: var(--ffp-header-h);
  padding: 0 16px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--ffp-border);
  flex-shrink: 0;
}

.ffp-brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ffp-body-color);
}

.ffp-brand-logo {
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
}

.ffp-brand-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ffp-body-color);
  white-space: nowrap;
}

.ffp-sidebar-nav-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.ffp-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ffp-nav-title {
  padding: 12px 16px 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ffp-muted);
  user-select: none;
}

.ffp-nav-item {
  margin: 0;
}

.ffp-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ffp-sidebar-color);
  text-decoration: none;
  border-radius: 0;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  transition: background .12s, color .12s;
}

.ffp-nav-link:hover {
  background: var(--ffp-body-bg);
  color: var(--ffp-primary);
  text-decoration: none;
}

.ffp-nav-link.active,
.ffp-nav-item.active > .ffp-nav-link {
  background: var(--ffp-primary-light);
  color: var(--ffp-primary);
  font-weight: 600;
}

.ffp-nav-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.ffp-nav-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ffp-nav-group-title {
  padding: 10px 16px 4px 48px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ffp-muted);
}

.ffp-sidebar-footer {
  border-top: 1px solid var(--ffp-border);
  padding: 6px 0;
  flex-shrink: 0;
}

/* ── 5. Header ─────────────────────────────────────────── */
.ffp-header {
  position: fixed;
  top: 0;
  left: var(--ffp-sidebar-width);
  right: 0;
  height: var(--ffp-header-h);
  background: var(--ffp-header-bg);
  border-bottom: 1px solid var(--ffp-header-border);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  z-index: 1020;
  transition: left .2s ease;
}

.ffp-sidebar-toggler {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--ffp-border);
  border-radius: var(--ffp-radius);
  color: var(--ffp-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}

.ffp-sidebar-toggler:hover {
  background: var(--ffp-body-bg);
  color: var(--ffp-body-color);
}

/* Breadcrumb */
.ffp-breadcrumb {
  flex: 1;
}

.ffp-breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ffp-breadcrumb-item {
  font-size: 0.85rem;
  color: var(--ffp-muted);
}

.ffp-breadcrumb-item a {
  color: var(--ffp-muted);
  text-decoration: none;
}

.ffp-breadcrumb-item a:hover {
  color: var(--ffp-primary);
  text-decoration: none;
}

.ffp-breadcrumb-item + .ffp-breadcrumb-item::before {
  content: '/';
  padding: 0 6px;
  color: var(--ffp-border);
}

.ffp-breadcrumb-item.active {
  color: var(--ffp-body-color);
  font-weight: 500;
}

/* Header actions */
.ffp-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.ffp-header-user {
  font-size: 0.82rem;
  color: var(--ffp-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.ffp-header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ffp-primary-light);
  color: var(--ffp-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── 6. Cards / Panels ─────────────────────────────────── */
.dashboard-card,
.dashboard-panel {
  background: var(--ffp-card-bg);
  border-radius: var(--ffp-radius);
  box-shadow: var(--ffp-card-shadow);
  border: 1px solid var(--ffp-border);
  padding: 16px 20px;
}

.dashboard-card h2,
.dashboard-panel h3 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ffp-muted);
  margin-top: 0;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ffp-border);
}

/* ── 7. Atualiza cores primárias ───────────────────────── */
button,
.cta-primary,
.ffp-modal-btn--ok {
  background: var(--ffp-primary);
}

button:hover,
.cta-primary:hover {
  background: var(--ffp-primary-hover);
}

input:focus,
select:focus {
  border-color: var(--ffp-primary);
  box-shadow: 0 0 0 3px rgba(var(--ffp-primary-rgb), .15);
}

a {
  color: var(--ffp-primary);
}

/* Menu buttons */
.menu-button {
  background: var(--ffp-primary-light);
  border-color: rgba(var(--ffp-primary-rgb), .25);
  color: var(--ffp-primary);
  border-radius: var(--ffp-radius);
}

.menu-button:hover {
  background: rgba(var(--ffp-primary-rgb), .15);
}

/* Links / link-buttons */
.link-button {
  background: var(--ffp-primary-light);
  border-color: rgba(var(--ffp-primary-rgb), .25);
  color: var(--ffp-primary);
  border-radius: var(--ffp-radius);
}

.link-button:hover {
  background: rgba(var(--ffp-primary-rgb), .15);
  text-decoration: none;
}

/* ── 8. Tabelas ────────────────────────────────────────── */
.transaction-table th {
  background: var(--ffp-body-bg);
  color: var(--ffp-muted);
}

.transaction-table tr:hover td {
  background: rgba(var(--ffp-primary-rgb), .03);
}

/* ── 9. Botões de ação inline ──────────────────────────── */
.transaction-row-action-btn,
.tree-btn-edit,
.tree-btn-delete {
  border-radius: var(--ffp-radius);
}

.button-primary,
.button-secondary,
.button-danger {
  width: auto;
  margin-top: 0;
  border-radius: var(--ffp-radius);
  padding: 9px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
}

.button-primary {
  background: var(--ffp-primary);
  color: #ffffff;
  border-color: var(--ffp-primary);
}

.button-primary:hover {
  background: var(--ffp-primary-hover);
  border-color: var(--ffp-primary-hover);
}

.button-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.button-secondary {
  background: #ffffff;
  border-color: var(--ffp-border);
  color: var(--ffp-body-color);
}

.button-secondary:hover {
  background: var(--ffp-body-bg);
}

.button-danger {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
}

.button-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

/* ── 10. Status badges ─────────────────────────────────── */
.payable-status-badge {
  border-radius: var(--ffp-radius);
}

/* ── 11. Form inputs ───────────────────────────────────── */
input,
select {
  border-radius: var(--ffp-radius);
  border: 1px solid var(--ffp-border);
  font-family: var(--ffp-font);
  font-size: 0.875rem;
}

label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ffp-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 5px;
}

/* ── 12. Header da página (dentro do content) ──────────── */
.dashboard-header {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border: none;
  padding: 0 0 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--ffp-border);
}

.dashboard-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ffp-body-color);
  margin: 0;
}

.dashboard-subtitle {
  font-size: 0.8rem;
  color: var(--ffp-muted);
  margin: 4px 0 0;
}

/* ── 13. Metric cards (dashboard) ──────────────────────── */
.metric-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ffp-body-color);
}

.metric-caption {
  font-size: 0.78rem;
  color: var(--ffp-muted);
  margin-top: 4px;
}

/* ── 14. Mensagens de retorno ──────────────────────────── */
.message.success {
  background: #d6f0de;
  color: #0d5523;
  border: 1px solid #b3dfc0;
  border-radius: var(--ffp-radius);
}

.message.error {
  background: #fde8e8;
  color: #7c1919;
  border: 1px solid #f5b7b7;
  border-radius: var(--ffp-radius);
}

/* ── 15. Login / auth pages ────────────────────────────── */
body:not(.dashboard-page) {
  background: var(--ffp-body-bg);
}

.card {
  border-radius: var(--ffp-radius-lg);
  box-shadow: 0 2px 8px rgba(8, 10, 12, .1);
  border: 1px solid var(--ffp-border);
}

.security-strip {
  background: var(--ffp-primary-light);
  border-color: rgba(var(--ffp-primary-rgb), .2);
  color: var(--ffp-primary);
  border-radius: var(--ffp-radius);
}

.security-icon {
  background: rgba(var(--ffp-primary-rgb), .15);
}

/* ── 15b. Páginas de formulário dentro do dashboard (container + card) ── */
body.dashboard-page .container {
  margin-left: var(--ffp-sidebar-width);
  padding-top: calc(var(--ffp-header-h) + 32px);
  padding-bottom: 32px;
  min-height: 100vh;
  background: var(--ffp-body-bg);
  justify-content: flex-start;
  align-items: flex-start;
}

body.dashboard-page .container .card {
  max-width: 700px;
  width: 100%;
}

/* ── 16. Responsive ────────────────────────────────────── */
@media (max-width: 768px) {
  .ffp-sidebar {
    transform: translateX(-100%);
  }

  body.sidebar-open .ffp-sidebar {
    transform: translateX(0);
  }

  .ffp-header {
    left: 0;
  }

  body.dashboard-page main.dashboard-layout,
  body.dashboard-page .dashboard-layout {
    margin-left: 0;
    padding-left: 16px;
    padding-right: 16px;
  }

  body.dashboard-page .container {
    margin-left: 0;
    padding-top: calc(var(--ffp-header-h) + 16px);
  }

  .ffp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 1029;
  }

  body.sidebar-open .ffp-overlay {
    display: block;
  }
}

/* ── 17. Scrollbar sidebar ─────────────────────────────── */
.ffp-sidebar-nav-wrap::-webkit-scrollbar {
  width: 4px;
}

.ffp-sidebar-nav-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.ffp-sidebar-nav-wrap::-webkit-scrollbar-thumb {
  background: var(--ffp-border);
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════
   18. Polimento profissional — sobrescreve styles.css onde
       necessário para visual consistente em todo o sistema
   ══════════════════════════════════════════════════════════ */

/* ── 18a. Tipografia base ─────────────────────────────────── */
body {
  font-family: var(--ffp-font);
  font-size: 0.9rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  line-height: 1.25;
  font-weight: 700;
}

/* ── 18b. Campos de formulário consistentes ──────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
select,
textarea {
  height: 40px;
  padding: 9px 12px;
  font-size: 0.875rem;
  font-family: var(--ffp-font);
  border: 1px solid var(--ffp-border);
  border-radius: var(--ffp-radius);
  background: #fff;
  color: var(--ffp-body-color);
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
}

textarea {
  height: auto;
  min-height: 80px;
  resize: vertical;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--ffp-primary);
  box-shadow: 0 0 0 3px rgba(var(--ffp-primary-rgb), .12);
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--ffp-body-bg);
  color: var(--ffp-muted);
  cursor: not-allowed;
}

input::placeholder,
textarea::placeholder {
  color: #b0b8c4;
}

label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ffp-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 5px;
}

.field-hint {
  font-size: 0.78rem;
  color: var(--ffp-muted);
  margin: 4px 0 0;
  line-height: 1.45;
}

.required {
  color: var(--ffp-danger);
  margin-left: 2px;
}

/* ── 18c. Alertas inline (mensagem de retorno) ──────────── */
.message {
  display: none;
  padding: 10px 14px;
  border-radius: var(--ffp-radius);
  font-size: 0.855rem;
  font-weight: 500;
  line-height: 1.45;
  border-left: 3px solid transparent;
  margin-bottom: 4px;
}

.message:not([hidden]) {
  display: block;
}

.message.success {
  background: #f0fdf4;
  color: #14532d;
  border-left-color: #16a34a;
  border: 1px solid #bbf7d0;
  border-left-width: 3px;
}

.message.error {
  background: #fef2f2;
  color: #7f1d1d;
  border-left-color: #dc2626;
  border: 1px solid #fecaca;
  border-left-width: 3px;
}

/* ── 18d. Botões de ação — padrão único ─────────────────── */
.form-row-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
  flex-wrap: wrap;
}

.ffp-modal-actions {
  justify-content: flex-end;
}

/* Action buttons inside tables (👁️✏️🗑️) */
.transaction-row-action-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border-radius: var(--ffp-radius);
  border: 1px solid var(--ffp-border);
  background: #fff;
  color: var(--ffp-muted);
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}

.transaction-row-action-btn:hover {
  background: var(--ffp-primary-light);
  border-color: rgba(var(--ffp-primary-rgb), .3);
  color: var(--ffp-primary);
}

.transaction-row-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* ── 18e. Menu de ações (botões tipo chip no topo da página) */
.menu-button {
  height: 36px;
  padding: 0 14px;
  font-size: 0.855rem;
  border-radius: var(--ffp-radius);
  font-weight: 500;
  gap: 6px;
}

/* Export buttons — herdam menu-button style */
.export-action-btn {
  background: var(--ffp-primary-light);
  border-color: rgba(var(--ffp-primary-rgb), .25);
  color: var(--ffp-primary);
  border-radius: var(--ffp-radius);
  font-weight: 500;
  font-size: 0.855rem;
}

.export-action-btn:hover {
  background: rgba(var(--ffp-primary-rgb), .15);
}

/* ── 18f. Tabelas ───────────────────────────────────────── */
.transaction-table {
  border-collapse: separate;
  border-spacing: 0;
}

.transaction-table thead tr {
  background: var(--ffp-body-bg);
}

.transaction-table th {
  background: var(--ffp-body-bg);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ffp-muted);
  padding: 10px 10px;
  border-bottom: 2px solid var(--ffp-border);
  white-space: nowrap;
}

.transaction-table td {
  padding: 11px 10px;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--ffp-border);
  vertical-align: middle;
}

.transaction-table tbody tr:hover td {
  background: rgba(var(--ffp-primary-rgb), .025);
}

.transaction-table tbody tr:last-child td {
  border-bottom: none;
}

/* Tabela de parcelas (payable) */
.payable-installments-table th {
  background: var(--ffp-body-bg);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ffp-muted);
}

/* ── 18g. Dashboard panels ─────────────────────────────── */
.dashboard-wrapper {
  display: grid;
  gap: 16px;
}

.dashboard-panel {
  margin-top: 0;
  padding: 20px 22px;
}

.dashboard-panel h3 {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ffp-muted);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ffp-border);
}

/* ── 18h. Dashboard metric cards ──────────────────────────  */
.dashboard-card {
  padding: 18px 20px;
  position: relative;
}

.dashboard-card h2 {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ffp-muted);
  margin: 0 0 10px;
  border-bottom: none;
  padding-bottom: 0;
}

.metric-value {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--ffp-body-color);
  line-height: 1.1;
}

.metric-caption {
  font-size: 0.78rem;
  color: var(--ffp-muted);
  margin-top: 6px;
}

/* ── 18i. Status badges profissionais ─────────────────── */
.payable-status-badge,
.reconciled-chip,
.not-reconciled-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ── 18j. Paginação ─────────────────────────────────────  */
.statement-pagination .button-secondary {
  flex: 0 0 auto;
  min-width: 90px;
}

#page-info {
  font-size: 0.855rem;
  font-weight: 500;
  color: var(--ffp-muted);
}

/* ── 18k. Scrollbar global (webkit) ─────────────────────  */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--ffp-border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #b0b8c4;
}

/* ── 18l. Auth page refinements ─────────────────────────  */
body:not(.dashboard-page) .card {
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(8, 10, 12, .09);
  border: 1px solid var(--ffp-border);
  padding: 28px 28px 24px;
}

body:not(.dashboard-page) h1 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ffp-body-color);
}

body:not(.dashboard-page) .subtitle {
  font-size: 0.855rem;
  color: var(--ffp-muted);
}

body:not(.dashboard-page) button[type="submit"] {
  height: 42px;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--ffp-radius);
  letter-spacing: .01em;
}

/* ── 18m. Inline installment edit inputs ────────────────  */
.payable-installment-inline-input {
  height: 32px;
  padding: 4px 8px;
  font-size: 0.855rem;
  width: 120px;
}

/* ── 18n. Category tree refinements ────────────────────── */
.category-tree {
  background: var(--ffp-body-bg);
  border-color: var(--ffp-border);
  border-radius: var(--ffp-radius);
}

.category-tree-item:hover {
  background: rgba(var(--ffp-primary-rgb), .04);
}

/* ── 18o. Form fieldset refinements ────────────────────── */
.form-fieldset {
  border: 1px solid var(--ffp-border);
  border-radius: var(--ffp-radius);
  padding: 16px 18px;
  margin-bottom: 14px;
}

.form-fieldset legend {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ffp-primary);
  padding: 0 6px;
}