@charset "utf-8";
html {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  height: 100%;
  margin: 0;
  flex-direction: column;
  /*min-height: 100vh;*/
  scrollbar-width: none;
  overflow: auto;
  box-shadow: inset 0 5px 5px -5px rgba(0, 0, 0, 0.7);
}
.element-class::-webkit-scrollbar {
  display: none;
}
.element-class {
  -ms-overflow-style: none; /* Internet Explorer and Edge */
  scrollbar-width: none; /* Firefox */
}
.addOn {
  border-radius: 8px;
  max-width: 100%;
  padding: 10px;
  background-color: #bbb;
  text-align: center;
  margin-bottom: 25px;
  margin-top: 15px;
  /*box-shadow: 0 4px 2px -2px gray;*/
  font-weight: bold;
  /*border: 1px dashed #888;*/
}
/***********/
/* BUTTONS */
/***********/
.lenderbutton {
  background-color: #aaa;
  border: none;
  color: black;
  padding: 10px 10px;
  text-decoration: none;
  font-size: 20px;
  min-width: 350px;
  max-width: 100%;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  cursor: hand;
}
.button {
  background-color: #78C01C; /* Green */
  border: none;
  color: white;
  padding: 25px 32px;
  text-decoration: none;
  font-size: 26px;
  min-width: 350px;
  max-width: 100%;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  cursor: hand;
}
.button:active {
  background-color: #78C01C;
}
.button:hover {
  background-color: #555;
}
.button2 {
  background-color: #78C01C; /* purple */
  color: white;
  border: none;
  padding: 25px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 26px;
  min-width: 100%;
  max-width: 100%;
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  cursor: hand;
}
.button2:active {
  background-color: #78C01C;
}
.button2:hover {
  background-color: #555;
}
/***********/
/* BODYBOX */
/***********/
main {
  flex: 1; /* This pushes footer to bottom */
}
footer {
  color: #666;
  text-align: center;
  padding: 10px;
  line-height: 15px;
}
.bodyBox {
  box-shadow: inset 0 5px 5px -5px rgba(0, 0, 0, 0.7);
  /*box-shadow: inset 0px 7px 3px -3px rgba(50, 50, 50, 0.75);*/
  margin: 0 auto;
  font-size: 14px;
  font-size-adjust: auto;
  background-color: #CCC; /* gray */
  border: none;
  color: black;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  text-align: inherit;
  font-size: 14px;
  min-width: 350px;
  max-width: 370px;
  font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
}
/***********/
/*  LABEL  */
/***********/
label {
  width: 135px;
  color: #828282;
  float: left;
  text-align: right;
  border: 0px red solid;
  margin: 0px;
  padding-right: 10px;
  color: #555;
  font-size: 20px;
}
/******************/
/* DROPDOWN MENUS */
/******************/
*, *::before, *::after {
  box-sizing: border-box;
}
:root {
  --select-border: #777;
  --select-focus: blue;
  --select-arrow: var(--select-border);
}
select {
  appearance: small;
  background-color: transparent;
  border: none;
  padding: 0 1em 0 0;
  margin: 0;
  width: 100px;
  font-family: inherit;
  font-size: 20px;
  cursor: inherit;
  line-height: inherit;
  /* Stack above custom arrow*/
  z-index: 1;
  /* Remove dropdown arrow in IE10 & IE11
  // @link https://www.filamentgroup.com/lab/select-css.html*/
  &::-ms-expand {
    display: none;
  }
  /*Remove focus outline, will add on alternate element*/
  outline: none;
}
.select {
  display: grid;
  grid-template-areas: "select";
  align-items: center;
  position: relative;
  border-bottom: 1px black solid;
  select, &::after {
    grid-area: select;
  }
  min-width: 15ch;
  max-width: 30ch;
  border: 1px solid var(--select-border);
  border-radius: 0.25em;
  padding: 0.25em 0.5em;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1.1;
  // Optional styles
  // remove for transparency
  background-color: #fff;
  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
  // Custom arrow
  &:not(.select--multiple)::after {
    content: "";
    justify-self: end;
    width: 0.8em;
    height: 0.5em;
    background-color: var(--select-arrow);
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  }
}
/* Interim solution until :focus-within has better support */
select:focus + .focus {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 2px solid var(--select-focus);
  border-radius: inherit;
}
llc {
  font-size: 5pt;
  font-family: arial;
  color: red;
}
/***************/
/* PRICE INPUT */
/***************/
input[type=number] {
  width: 100%;
  color: rgba(110, 110, 110, 1.00);
  font-size: 26px;
  line-height: 20px;
  min-height: 28px;
  border-radius: 10px;
  padding: 8px 8px;
  border: 2px solid transparent;
  /*box-shadow: rgb(0 0 0 / 12%) 0px 1px 3px, rgb(0 0 0 / 24%) 0px 1px 2px;*/
  background: rgb(251, 251, 251);
  transition: all 0.1s ease 0s;
}
input[type=number]:focus {
  outline: none;
  border-color: #78C01C;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
}
/***************/
/* HYPERLINK   */
/***************/
a {
  color: black;
}
a:hover {
  color: #78C01C;
}
a:active {
  color: #78C01C;
}
/*a:visited{color: black;}*/
a.oval-button {
  display: inline-block;
  padding: 10px 25px;
  background-color: #78C01C; /* Button color */
  color: #fff; /* Text color */
  text-decoration: none;
  border-radius: 7px; /* Creates the oval shape */
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  transition: background-color 0.3s ease;
  max-width: 150px;
  min-width: 150px;
  padding: 15px 0px;
}
a.oval-button:hover {
  background-color: #555; /* Hover color */
}
.input_container {
  border: 1px solid #e5e5e5;
  max-width: 400px;
  min-width: 300px;
}
input[type=file]::file-selector-button {
  background-color: #fff;
  color: #000;
  border: 0px;
  border-right: 1px solid #e5e5e5;
  padding: 10px 15px;
  margin-right: 20px;
  transition: .5s;
}
input[type=file]::file-selector-button:hover {
  background-color: #bbb;
  border: 0px;
  border-right: 1px solid #e5e5e5;
  color: #eee;
}
input[type="file"] {
  font-size: 12px; /* makes text and button bigger */
  padding: 0px 0px; /* increases clickable area */
}
/* Phones (portrait & small landscape) */
@media screen and (max-width: 767px) {
  body {
    font-size: 16px;
  }
}
/* Tablets */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body {
    font-size: 18px;
  }
}
/* Small laptops/desktops */
@media screen and (min-width: 1025px) {
  body {
    font-size: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  body {
    font-size: 18px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  body {
    font-size: 1.2rem;
  }
}
::placeholder {
  color: #D4D4D4;
}
.maxline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0
}
.badge {
  background: #fff59d;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600
}
.icon-btn.help .fa {
  font-size: 16px;
  opacity: .8
}
.icon-btn.help:hover .fa {
  opacity: 1
}
/* Popover */
.popover {
  position: fixed; /* positioned near the icon via JS */
  z-index: 1000;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .15);
  width: min(380px, 92vw);
  padding: 12px;
}
.popover-inner {
  font-size: 14px;
  color: #374151
}
.popover-list {
  margin-top: 8px;
  border-top: 1px solid #eef2f7;
  padding-top: 8px
}
.popover-list-head, .popover-list-row {
  display: grid;
  grid-template-columns: 1.3fr .7fr .7fr .8fr 1fr;
  gap: 8px;
  align-items: center;
}
.popover-list-head {
  font-weight: 700;
  color: #4b5563
}
.popover-list-row {
  padding: 6px 0;
  border-bottom: 1px dashed #eef2f7
}
.popover-list-row:last-child {
  border-bottom: 0
}
/* yellow bar + layout */
.maxline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 0
}
.mc-badge {
  /*background:#fff59d; color:#111827; padding:6px 10px; border-radius:8px;
  font-weight:300; box-shadow: inset 0 0 0 1px #e5e7eb;*/
}
/* tooltip trigger */
.tt {
  position: static;
  display: inline-block
}
.tt-btn {
  list-style: none;
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  background-color: transparent;
  color: #78C01C;
  border: 1px #aaa dashed;
}
.tt-btn::-webkit-details-marker {
  display: none
}
/* backdrop + centered popover */
.tt-center .tt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  display: none;
  z-index: 1999;
}
.tt-center[open] .tt-overlay {
  display: block
}
.tt-center .tt-pop {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 92vw);
  max-height: 80vh;
  overflow: auto;
  z-index: 2000;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .25);
  padding: 14px 16px 16px;
  font-size: 14px;
  display: none;
}
.tt-center[open] .tt-pop {
  display: block;
  animation: tt-pop .14s ease-out
}
@keyframes tt-pop {
  from {
    transform: translate(-50%, -55%);
    opacity: .7
  }
  to {
    opacity: 1
  }
}
/* popover typography */
.tt-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: #111827
}
.tt-text {
  margin: 0;
  color: #374151;
  line-height: 1.5;
  align: justify
}
/* mobile tweaks */
@media (hover:none) and (pointer:coarse) {
  .tt-btn {
    width: 30px;
    height: 30px;
    font-size: 14px
  }
  .tt-center .tt-pop {
    width: 92vw;
    border-radius: 16px
  }
}
.tt-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
}
.tt-close:hover {
  color: #111827
}
.tt-center .tt-overlay {
  pointer-events: auto;
}
.tt-center .tt-overlay {
  pointer-events: none;
}
.copied-tip {
  background: #111827;
  color: #fff;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .12s, transform .12s;
  z-index: 3000;
}
.copied-tip.show {
  opacity: 1;
  transform: translateY(0)
}
/* --- Admin drawer button --- */
.drawer {
  max-width: 460px;
  margin: 10px auto 0;
}
.drawer > summary {
  list-style: none;
  display: flex;
  justify-content: center;
  cursor: pointer;
}
.drawer > summary::-webkit-details-marker {
  display: none;
}
.btn-admin {
  min-width: 160px;
}
/* --- Card --- */
.admin-card {
  margin-top: 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .10);
  padding: 16px;
  animation: adminCardIn .18s ease-out;
}
@keyframes adminCardIn {
  from {
    opacity: .6;
    transform: translateY(-6px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
.admin-card-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.admin-card-head .icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(120, 192, 28, 0.10);
  color: #78C01C;
}
.admin-card-head .title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}
.admin-card-head .sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: #6b7280;
}
/* --- Flash notice --- */
.drawer-flash {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  padding: 8px 10px;
  border-radius: 8px;
  margin: 8px 0 12px;
}
/* --- Form layout --- */
.admin-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 140px;
  gap: 12px 12px;
  align-items: end;
}
.admin-form .field {
  display: grid;
  gap: 6px;
}
.admin-form .field.small {
  width: 140px;
}
.admin-form label {
  font-size: 12px;
  letter-spacing: .02em;
  color: #6b7280;
}
.input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  transition: box-shadow .12s, border-color .12s;
}
.input:focus {
  outline: none;
  border-color: #78C01C;
  box-shadow: 0 0 0 3px rgba(120, 192, 28, .16);
}
/* Submit button */
.btn-primary {
  grid-column: 1 / -1;
  margin-top: 4px;
  background: #78C01C;
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-primary:hover {
  filter: brightness(0.96);
}
/* Mobile: stack fields vertically */
@media (max-width: 480px) {
  .admin-form {
    grid-template-columns: 1fr;
  }
  .admin-form .field.small {
    width: 100%;
  }
}
/* ===== Admin drawer (namespaced to avoid global conflicts) ===== */
.ad-drawer {
  max-width: 460px;
  margin: 10px auto 0;
}
.ad-drawer > summary {
  list-style: none;
  display: flex;
  justify-content: center;
  cursor: pointer;
}
.ad-drawer > summary::-webkit-details-marker {
  display: none;
}
.ad-btn {
  min-width: 160px;
}
/* Card */
.ad-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .10);
  padding: 16px;
  margin-top: 12px;
  text-align: left;
  letter-spacing: normal;
  animation: adCardIn .18s ease-out;
}
.ad-card, .ad-card *, .ad-card *::before, .ad-card *::after {
  box-sizing: border-box;
}
@keyframes adCardIn {
  from {
    opacity: .6;
    transform: translateY(-6px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
/* Header */
.ad-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.ad-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(120, 192, 28, 0.10);
  color: #78C01C;
}
.ad-title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 2px 0;
  line-height: 1.25;
}
.ad-sub {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}
/* Flash */
/* Admin drawer flash notice */
.ad-flash {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  padding: 10px 12px; /* a bit more breathing room */
  margin: 8px 0 12px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.35; /* fix the cramped baseline */
  letter-spacing: normal; /* neutralize any global tracking */
  text-align: left; /* avoid inherited centering */
  white-space: normal;
  word-break: break-word;
  display: flex; /* keeps single-line vertically centered too */
  align-items: center;
  gap: 8px;
}
/* optional checkmark */
.ad-flash::before {
  content: "✓";
  font-weight: 700;
}
/* Form */
.ad-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.ad-form--compact .ad-input {
  font-size: 16px;
} /* helps mobile keyboard */
.ad-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  line-height: 1.3;
  transition: border-color .12s, box-shadow .12s;
}
.ad-input:focus {
  outline: none;
  border-color: #78C01C;
  box-shadow: 0 0 0 3px rgba(120, 192, 28, .16);
}
/* Select arrow + spacing */
.ad-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2378C01C'%3E%3Cpath d='M5.8 7.5L10 11.7l4.2-4.2c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1l-4.8 4.8c-.3.3-.8.3-1.1 0L4.7 8.6c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 42px;
}
/* Submit */
.ad-primary {
  margin-top: 4px;
  background: #78C01C;
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ad-primary:hover {
  filter: brightness(.96);
}
/* Hidden (for a11y-only) labels */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Desktop: email + ceiling side by side (no overflow) */
@media (min-width: 560px) {
  .ad-form.ad-form--compact {
    grid-template-columns: minmax(260px, 1fr) 180px;
    align-items: end;
  }
  .ad-primary {
    grid-column: 1 / -1;
  }
}
.ad-sep {
  border: 0;
  border-top: 1px solid #e5e7eb;
  margin: 14px 0
}
.ad-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.ad-addon-row {
  display: grid;
  grid-template-columns: 1fr 120px 120px auto;
  gap: 10px;
  align-items: end;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px;
}
.ad-addon-new {
  background: #f0f9ff;
}
.ad-row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.ad-btn-save {
  background: #78C01C;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
}
.ad-btn-delete {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 600;
  cursor: pointer;
}
@media (max-width: 560px) {
  .ad-addon-row {
    grid-template-columns: 1fr;
  }
  .ad-row-actions {
    justify-content: stretch
  }
  .ad-btn-save, .ad-btn-delete {
    width: 100%
  }
}
/* --- Add-on row layout --- */
.ad-addon-row {
  display: grid;
  grid-template-columns: 1fr 110px 92px 76px 42px; /* name | $price | show/hide | save | delete */
  gap: 12px;
  align-items: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
  padding: 10px 12px;
  margin: 12px 0;
}
.ad-addon-form {
  display: contents;
} /* use grid areas from parent */
.ad-addon-del-inline {
  display: contents;
} /* delete button participates in the grid */
/* Name input: slightly bolder for scannability */
.ad-input--name {
  font-weight: 600;
  font-size: 15px;
}
/* Money input wrapper draws the $ prefix */
.ad-price {
  position: relative;
}
.ad-price::before {
  content: '$';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  font-size: 13px;
  pointer-events: none;
}
/* Money input itself: compact, right aligned, tabular digits */
.ad-input--money {
  padding-left: 22px; /* room for $ */
  padding-right: 10px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
/* Tiny select + tiny buttons */
.ad-select--xs {
  height: 36px;
  line-height: 36px;
  font-size: 13px;
  padding: 0 26px 0 10px;
  border-radius: 10px;
}
.ad-btn--xs {
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
}
/* Delete icon button */
.ad-icon-btn {
  height: 36px;
  width: 36px;
  border-radius: 10px;
  border: 1px solid #fca5a5;
  background: #fff5f5;
  color: #b91c1c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ad-icon-btn:hover {
  background: #fee2e2;
}
/* Responsive: stack neatly on narrow screens */
@media (max-width: 480px) {
  .ad-addon-row {
    grid-template-columns: 1fr 90px 1fr 60px 36px;
    gap: 10px;
  }
  .ad-input--name {
    font-size: 14px;
  }
  .ad-input--money {
    font-size: 14px;
  }
}
/* Max-Ceiling flash: hold color, then fade it away */
/* base badge (no highlight by default) */
.mc-badge {
  display: inline-block;
  padding: 8px 12px;
  max-width: 100%;
  min-width: 100%;
  border-radius: 10px;
  background: transparent;
  box-shadow: inset 0 0px 0 rgba(0, 0, 0, .06);
}
/* only animate when we add .mc-flash */
.mc-badge.mc-flash {
  background: #f5fe7a;
  animation: mcHoldThenFade 3s ease-out .5s forwards;
}
@keyframes mcHoldThenFade {
  0%, 70% {
    background: #f5fe7a;
  }
  100% {
    background: transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-badge.mc-flash {
    animation: none;
  }
}
/* ===== Add-ons row: compact, readable, and aligned ===== */
.ad-addon-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e8e8ef;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
}
/* inputs look crisp */
.ad-addon-row .ad-input {
  height: 40px;
  border: 1px solid #d7d9e3;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 1;
  color: #1f2937; /* darker text for readability */
  background: #fff;
}
/* name gets the space */
.ad-addon-row .ad-name {
  flex: 1 1 220px; /* stretches but keeps minimum width */
  min-width: 140px;
}
/* price: small, right aligned, with a $ prefix (pure CSS) */
.ad-money {
  position: relative;
  width: 110px; /* smaller */
}
.ad-money::before {
  content: "$";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  font-weight: 600;
  pointer-events: none;
}
.ad-money .ad-price {
  width: 100%;
  padding-left: 22px; /* room for the $ */
  text-align: right; /* numbers line up */
}
/* compact Show/Hide select */
.ad-select--sm {
  width: 92px;
  padding-right: 26px; /* room for arrow */
  font-size: 14px;
}
/* save button a touch smaller to match */
.ad-addon-row .ad-btn-save {
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 12px;
}
/* Optional: ensure the pill arrow doesn’t double-render on some browsers */
.ad-select, .ad-select--sm {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* If you show a custom arrow via ::after on a wrapper, keep it here.
   If not, you can ignore. */
/* Compact add-on row (no Show/Hide select now) */
.ad-addon-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e8e8ef;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
}
.ad-addon-row .ad-input {
  height: 40px;
  border: 1px solid #d7d9e3;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 1;
  color: #1f2937;
  background: #fff;
}
.ad-addon-row .ad-name {
  flex: 1 1 240px;
  min-width: 140px;
}
/* Price: small, right-aligned, with $ prefix purely via CSS */
.ad-money {
  position: relative;
  width: 110px;
}
.ad-money::before {
  content: "$";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  font-weight: 600;
  pointer-events: none;
}
.ad-money .ad-price {
  width: 100%;
  padding-left: 22px; /* room for $ */
  text-align: left;
}
/* Save button a tad smaller */
.ad-addon-row .ad-btn-save {
  padding: 8px 12px;
  font-size: 8px;
  border-radius: 12px;
}
/* Make the separate Delete form look compact */
.ad-addon-del {
  margin: 6px 0 12px;
  display: flex;
  justify-content: flex-end;
}
.ad-addon-del .ad-btn-delete {
  background: #fee2e2; /* light red */
  color: #b91c1c;
  border: 1px solid #fecaca;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 13px;
}
.ad-addon-del .ad-btn-delete:hover {
  filter: brightness(.97);
}
/* Admin add-ons: compact, aligned */
.ad-addon-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #e6e6eb;
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
}
.ad-row--slim {
  padding: 10px 12px;
}
.ad-txt {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid #d4d7de;
  border-radius: 10px;
  background: #fff;
}
.ad-money {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d4d7de;
  border-radius: 10px;
  background: #f7f8fb;
  padding: 0 10px;
}
.ad-pre {
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}
.ad-num {
  width: 55px;
  border: 0;
  background: transparent;
  font-size: 5px;
  padding: 5px 0;
  text-align: left;
  outline: none;
}
/* remove number spinners for a cleaner look */
.ad-num::-webkit-outer-spin-button, .ad-num::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ad-num[type=number] {
  -moz-appearance: textfield;
}
.ad-btn-save {
  margin-left: auto;
  background: #78C01C;
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
}
.ad-addon-del {
  display: flex;
  justify-content: flex-end;
}
.ad-btn-delete {
  background: #fee2e2;
  color: #b91c1c;
  border: 0;
  border-radius: 10px;
  padding: 6px 12px;
  margin: 6px 0;
  font-weight: 600;
}
/* ---------- Admin Drawer: Add-ons (compact, responsive) ---------- */
.ad-grid {
  display: grid;
  gap: 14px;
}
.ad-row {
  display: grid;
  grid-template-columns: 1fr minmax(96px, 120px) 44px; /* name | price | icon */
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}
/* Let the name field actually shrink on small screens */
.ad-row .ad-input {
  min-width: 0;
}
.ad-name {
  height: 36px;
  font-size: 15px; /* a bit smaller on desktop */
  border-radius: 10px;
}
/* Price pill with a $ prefix */
.ad-price-wrap {
  position: relative;
}
.ad-price-wrap::before {
  content: '$';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #4b5563;
  font-weight: 700;
  pointer-events: none;
}
.ad-price {
  height: 36px;
  font-size: 18px; /* smaller than before */
  font-weight: 700;
  text-align: right;
  padding-left: 26px; /* make room for $ */
  border-radius: 10px;
}
/* Icon-only primary button (Save/Add) */
.ad-iconbtn {
  width: 40px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: #78C01C;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(120, 192, 28, .22);
  cursor: pointer;
}
.ad-iconbtn:hover {
  filter: brightness(1.05);
}
.ad-iconbtn:active {
  transform: translateY(1px);
}
.ad-btn-delete {
  display: inline-block;
  margin: 8px 0 18px;
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  background: #fde2e2;
  color: #b91c1c;
  font-weight: 600;
  cursor: pointer;
}
/* Small screens */
@media (max-width: 420px) {
  .ad-row {
    grid-template-columns: 1fr 92px 40px;
    gap: 8px;
    padding: 10px 12px;
  }
  .ad-name {
    font-size: 14px;
    height: 34px;
  }
  .ad-price {
    font-size: 16px;
    height: 34px;
  }
}
/* ---------- Admin Drawer: Add-ons (compact) ---------- */
.ad-grid {
  display: grid;
  gap: 14px;
}
.ad-row {
  display: grid;
  grid-template-columns: 1fr minmax(88px, 110px) 38px 38px; /* name | price | save | delete */
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}
/* let inputs shrink on mobile */
.ad-row .ad-input {
  min-width: 0;
}
.ad-name {
  height: 32px;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 10px;
}
/* $ prefix and compact price field */
.ad-price-wrap {
  position: relative;
}
.ad-price-wrap::before {
  content: '$';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #4b5563;
  font-weight: 700;
  font-size: 14px;
  pointer-events: none;
}
.ad-price {
  height: 32px;
  font-size: 14px;
  font-weight: 400; /* not bold */
  text-align: right;
  padding: 6px 10px 6px 22px; /* room for the $ */
  border-radius: 10px;
}
/* icon buttons */
.ad-iconbtn {
  width: 38px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ad-iconbtn i {
  font-size: 14px;
}
.ad-iconbtn.is-save {
  background: #78C01C;
  color: #fff;
  box-shadow: 0 6px 14px rgba(120, 192, 28, .22);
}
.ad-iconbtn.is-delete {
  background: #fee2e2;
  color: #b91c1c;
  box-shadow: none;
}
.ad-iconbtn:hover {
  filter: brightness(1.05);
}
.ad-iconbtn.is-delete:hover {
  filter: brightness(0.98);
}
/* screen-reader helper (add if you don't have one yet) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Mobile tweaks */
@media (max-width:420px) {
  .ad-row {
    grid-template-columns: 1fr 84px 34px 34px;
    padding: 8px 10px;
  }
  .ad-name {
    font-size: 13px;
    height: 30px;
    padding: 6px 8px;
  }
  .ad-price {
    font-size: 13px;
    height: 30px;
    padding: 6px 8px 6px 20px;
  }
  .ad-price-wrap::before {
    left: 7px;
    font-size: 13px;
  }
  .ad-iconbtn {
    width: 34px;
    height: 30px;
  }
  .ad-iconbtn i {
    font-size: 13px;
  }
}
/* ===== Add-ons price field overrides (place at end of CSS) ===== */
.ad-row .ad-input {
  min-width: 0;
} /* allow shrinking */
.ad-row .ad-name {
  height: 30px;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 10px;
}
.ad-row .ad-price-wrap {
  position: relative;
}
.ad-row .ad-price-wrap::before {
  content: '$';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  font-weight: 600;
  font-size: 14px;
  pointer-events: none;
  z-index: 2;
}
.ad-row .ad-price {
  height: 30px;
  font-size: 16px; /* smaller number */
  font-weight: 400; /* not bold */
  text-align: left;
  padding: 6px 10px 6px 22px; /* room for the $ */
  border-radius: 10px;
}
/* compact icon buttons */
.ad-row .ad-iconbtn {
  width: 34px;
  height: 30px;
}
.ad-row .ad-iconbtn i {
  font-size: 13px;
}
/* remove number spinners */
.ad-row .ad-price::-webkit-outer-spin-button, .ad-row .ad-price::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ad-row .ad-price {
  -moz-appearance: textfield;
}
@media (max-width:420px) {
  .ad-row {
    grid-template-columns: 1fr 84px 34px 34px;
    gap: 8px;
    padding: 8px 10px;
  }
  .ad-row .ad-name {
    font-size: 13px;
    height: 30px;
  }
  .ad-row .ad-price {
    font-size: 13px;
    height: 30px;
    padding-left: 20px;
  }
  .ad-row .ad-price-wrap::before {
    left: 7px;
    font-size: 13px;
  }
}
.ad-row .ad-price {
  font-variant-numeric: tabular-nums;
}
.ad-row .ad-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(120, 192, 28, .16);
  border-color: #78C01C;
}
.ad-row .ad-iconbtn:hover {
  filter: brightness(1.07);
}
.ad-row .ad-iconbtn.is-delete:hover {
  filter: brightness(0.95);
}
@media (max-width:420px) {
  .ad-row {
    gap: 8px;
    padding: 8px 10px;
  }
}
/* when there's a flash message, we already render .ad-flash.
   give save icons a quick success pulse too */
.ad-flash + .ad-grid .ad-iconbtn.is-save {
  box-shadow: 0 0 0 0 rgba(22, 163, 74, .0);
  animation: pulseSaved 1.2s ease-out 1;
}
@keyframes pulseSaved {
  0% {
    box-shadow: 0 0 0 0 rgba(22, 163, 74, .35);
  }
  100% {
    box-shadow: 0 0 0 14px rgba(22, 163, 74, .0);
  }
}
/* Black icon-only links (no visited purple) */
.trash-link, .trash-link:link, .trash-link:visited, .trash-link:hover, .trash-link:active, .trash-link:focus {
  color: #000 !important; /* keep it black in all states */
  text-decoration: none;
  font-size: 20px;
}
.trash-link:hover, .trash-link:focus-visible {
  opacity: .7; /* subtle hover/focus feedback */
  outline: none;
}
/* Team list */
.team-grid {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}
.team-row {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto auto auto;
  gap: 10px;
  background: #f3f3f7;
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06) inset;
}
.team-email {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}
.team-ceil {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #d6d6e2;
  background: #fff;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1;
}
/* Keep the first column (email) short and ellipsized */
.team-row {
  /* first col ≈ 12 characters, then the controls */
  grid-template-columns: minmax(0, 12ch) auto auto auto;
}
.team-email {
  inline-size: 12ch; /* ~12 characters wide */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* shows “…” */
}
/* Make the ceiling dropdown compact */
.team-ceil {
  width: 70px; /* small, consistent width */
  padding: 6px 10px;
  text-align: right;
  font-size: 14px;
}
/* Optional: give a bit more room on wider screens */
@media (min-width: 600px) {
  .team-row {
    grid-template-columns: minmax(0, 16ch) auto auto auto;
  }
  .team-email {
    inline-size: 16ch;
  }
}
/* Center contents of each user row vertically */
.team-row {
  /* you already have display:grid and template columns */
  align-items: center; /* <-- fixes the baseline clipping */
  min-height: 48px; /* (optional) ensure a comfy row height */
}
/* Email cell: keep short, readable, ellipsized */
.team-email {
  inline-size: 12ch; /* or 16ch on wider screens */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 1.3; /* give ascenders/descenders room */
  padding-block: 3px; /* small top/bottom padding to avoid cutoffs */
  display: block; /* behave like a box so padding applies cleanly */
}
/* Compact ceiling dropdown so it doesn't steal space */
.team-ceil {
  width: 70px;
  padding: 6px 10px;
  text-align: right;
  font-size: 14px;
}
@media (min-width: 600px) {
  .team-row {
    min-height: 52px;
  }
  .team-email {
    inline-size: 16ch;
  }
}
/* Flash base look — keep whatever you already have; add these lines */
.ad-flash {
  opacity: 1;
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.ad-flash.is-fading {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}
.signed-in-as {
  text-align: center;
  font-size: 12px;
  color: #666;
  margin: 20px 0 6px;
  opacity: .85;
  padding: 15px 0px;
}
/* container list reset */
.lenders-list {
  list-style: none;
  padding: 0;
  margin: 0 -6px; /* slight edge breathing room */
}
.lenders-item {
  margin: 15px 6px 0;
}
/* the full-clickable card */
.lender-card {
  display: block;
  width: 100%;
  min-height: 100px;
  padding: 5px 0;
  border: 1px dashed #aaa;
  border-radius: 12px;
  background: #bbb;
  cursor: pointer;
  /* remove default button look */
  appearance: none;
  -webkit-appearance: none;
  border-width: 1px;
  /* motion/feedback */
  transition: background-color .18s ease, box-shadow .18s ease, transform .06s ease;
  text-align: center;
}
/* logo look + hover treatment */
.lender-logo {
  width: auto;
	height: 100px;
  max-width: 75%;
  opacity: .6;
  filter: grayscale(1);
  transition: opacity .18s ease, filter .18s ease;
}
/* hover/active/focus feedback */
.lender-card:hover, .lender-card:active {
  background: #cfd3dd;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
  transform: translateY(-1px);
}
.lender-card:hover .lender-logo, .lender-card:active .lender-logo {
  opacity: .9;
  filter: none;
}
/* keyboard accessibility */
.lender-card:focus-visible {
  outline: 3px solid #78C01C;
  outline-offset: 2px;
}
/* Container: fill parent width, center, keep a sensible max */
.ppn-uploader {
  width: 100%;
  max-width: 560px;
  margin: 0 auto 14px;
}
/* Really hide the native input (resists global resets) */
.ppn-uploader__input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}
/* Make the drop zone full width */
.ppn-uploader__drop {
  width: 100%; /* <-- key fix */
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 2px dashed #c9efb4;
  border-radius: 14px;
  background: #EBFBF0;
  padding: 14px 16px;
  cursor: pointer;
  color: #2b2b2b;
  text-align: left;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.ppn-uploader__drop:hover, .ppn-uploader__drop:focus {
  border-color: #78C01C;
  box-shadow: 0 0 0 3px rgba(48, 0, 255, .12);
  outline: 0;
}
.ppn-uploader__drop.ppn--dragover {
  background: #EBFBF0;
  border-color: #78C01C;
}
.ppn-uploader__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #EBFBF0;
  color: #78C01C;
}
/* Keep the message compact on small screens */
.ppn-uploader__text {
  line-height: 1.25;
}
.ppn-uploader__text strong {
  font-weight: 700;
}
.ppn-uploader__text small {
  color: #666;
  display: block;
  margin-top: 2px;
}
/* File meta row */
.ppn-uploader__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .02);
  font-size: 14px;
}
.ppn-uploader__meta b {
  color: #111;
}
/* hide by default */
.ppn-uploader__meta {
  display: none;
}
/* show when we add the class in JS */
.ppn-uploader__meta.is-visible {
  display: flex;
}
/* if it's ever empty, don’t render */
.ppn-uploader__meta:empty {
  display: none;
}
/* belt-and-suspenders: any stray native file inputs inside the uploader */
.ppn-uploader input[type="file"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
}
/* hide the native input, keep it in the DOM for the label 'for' to work */
.ppn-uploader__input {
  position: absolute;
  left: -9999px;
}
/* meta row hidden by default; shown when we add .is-visible from JS */
.ppn-uploader__meta {
  display: none;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
}
.ppn-uploader__meta.is-visible {
  display: flex;
}
/* nice visual hover/drag state (optional) */
.ppn-uploader__drop {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 14px 16px;
  border-radius: 14px;
  cursor: pointer;
  border: 2px dashed #cbd5e1;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.ppn-uploader__drop:hover {
  border-color: #94a3b8;
}
.ppn-uploader__drop.is-drag {
  border-color: #78C01C;
  background: #EBFBF0;
}
.ppn-uploader__icon {
  font-size: 22px;
}
.ppn-uploader__hint {
  font-size: 12px;
  color: #6b7280;
}
/* keep the native input off-screen */
.ppn-uploader__input {
  position: absolute;
  left: -9999px;
}
/* dropzone */
.ppn-uploader__drop {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 14px 16px;
  border-radius: 14px;
  cursor: pointer;
  border: 2px dashed #cbd5e1;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.ppn-uploader__drop:hover {
  border-color: #94a3b8;
}
.ppn-uploader__drop.is-drag {
  border-color: #78C01C;
  background: #EBFBF0;
}
.ppn-uploader__icon {
  font-size: 22px;
}
.ppn-uploader__hint {
  font-size: 12px;
  color: #6b7280;
}
/* filename row (hidden until file selected) */
.ppn-uploader__meta {
  display: none;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
}
.ppn-uploader__meta.is-visible {
  display: flex;
}
.ppn-upload {
  background: #fff;
  border: 1px dashed #bdbdbd;
  border-radius: 14px;
  padding: 16px 14px;
  margin: 10px 0 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06)
}
.ppn-upload__label {
  display: block;
  margin-bottom: 8px
}
.ppn-upload__title {
  display: block;
  font-weight: 700
}
.ppn-upload__hint {
  font-size: 12px;
  color: #6b7280
}
.ppn-upload__control {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}
.ppn-upload__control input[type=file] {
  display: none
}
.ppn-upload__btn {
  border: 0;
  background: #78C01C;
  color: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer
}
.ppn-upload__name {
  font-size: 14px;
  color: #374151
}
.ppn-upload__clear {
  border: 0;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
  opacity: .6
}
.ppn-upload__clear:hover {
  opacity: 1
}
/* container */
.lender-section {
  max-width: 520px; /* keeps the block compact */
  margin: 0 auto;
  text-align: center;
}
/* list layout */
.lender-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 10px auto 6px;
  max-width: 520px;
}
/* each row */
.lender-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px dashed #aaa;
  border-radius: 10px;
  background: #f7f7f7;
}
/* readable name, no exaggerated spacing, ellipsis if long */
.lender-name {
  justify-self: start;
  font-weight: 600;
  color: #1f2937; /* darker text */
  letter-spacing: 0; /* cancel any inherited letter-spacing */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* count + delete aligned to the right */
.lender-count {
  justify-self: end;
  font-size: 13px;
  color: #6b7280;
}
.lender-row .ad-iconbtn {
  justify-self: end;
}
/* hover polish */
.lender-row:hover {
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}
/* upload row: center + natural widths */
.admin-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap; /* stack on very narrow screens */
  margin: 8px auto 0;
  max-width: 520px;
}
/* keep input and button from stretching full width */
.admin-upload .ad-input {
  width: auto;
  min-width: 240px;
  max-width: 320px;
}
.lender-section .ad-primary {
  width: auto; /* override any global 100% */
  min-width: 140px;
  height: 44px;
  padding: 10px 16px;
}
/* Fix squashed text in the admin drawer lender list */
#adminDrawer .lender-section, #adminDrawer .lender-section * {
  line-height: 1.25 !important; /* restore normal line height */
  letter-spacing: 0 !important; /* cancel the global .07em */
}
#adminDrawer .lender-name {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #111;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* modal */
.ppn-modal[hidden] {
  display: none;
}
.ppn-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.ppn-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
}
.ppn-modal__dialog {
  position: relative;
  margin: 6vh auto 0;
  max-width: 720px;
  width: 92%;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  overflow: hidden;
}
.ppn-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f6f6f7;
  border-bottom: 1px solid #eee;
}
.ppn-modal__close {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.ppn-modal__body {
  padding: 12px 16px 16px;
}
.ppn-modal__status {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}
.ppn-modal__tablewrap {
  max-height: 60vh;
  overflow: auto;
  border: 1px solid #eee;
  border-radius: 10px;
}
.ppn-table {
  width: 100%;
  border-collapse: collapse;
}
.ppn-table th, .ppn-table td {
  padding: 10px;
  border-bottom: 1px solid #eee;
  text-align: left;
  white-space: nowrap;
}
.ppn-table tbody tr:nth-child(odd) {
  background: #fafafa;
}
/* Lender list tidy */
.lender-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.lender-row {
  display: grid;
  grid-template-columns: 1fr auto auto; /* name | count | actions */
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px dashed #aaa;
  border-radius: 12px;
  background: #fff;
}
.lender-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lender-count {
  font-size: 12px;
  color: #666;
}
.lender-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
/* Icon buttons (match your look) */
.ad-iconbtn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  background: #eee;
  color: #333;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
}
.ad-iconbtn i {
  font-size: 16px;
  line-height: 1;
}
.ad-iconbtn.is-preview {
  background: #78C01C;
  color: #fff;
}
.ad-iconbtn.is-preview:hover {
  filter: brightness(0.95);
}
.ad-iconbtn.is-delete {
  background: #ffe4e4;
  color: #b31212;
}
.ad-iconbtn.is-delete:hover {
  filter: brightness(0.95);
}
/* Modal body scroll + sticky header */
.ppn-modal__body {
  max-height: 70vh; /* scroll area height */
  overflow: auto; /* rows scroll */
  padding: 0; /* table will handle its own padding */
}
.ppn-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.ppn-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff; /* must be solid for stickiness */
  text-align: left;
  font-weight: 700;
  padding: 12px 14px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06); /* subtle divider under header */
}
.ppn-table tbody td {
  padding: 10px 14px;
  border-top: 1px solid #eee;
  white-space: nowrap;
}
/* Team users — keep one row on all sizes */
.team-row {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) 64px 36px 36px; /* email | % | save | delete */
  gap: 8px;
}
.team-email {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-ceil {
  width: 64px;
  min-width: 64px;
  padding: 6px 10px;
  text-align: center;
  border-radius: 999px; /* keeps the pill look */
}
.team-row .ad-iconbtn {
  width: 36px;
  height: 36px;
}
/* a bit more room on wider screens */
@media (min-width:560px) {
  .team-row {
    grid-template-columns: minmax(0, 1fr) 72px 38px 38px;
    gap: 10px;
  }
  .team-ceil {
    width: 72px;
    min-width: 72px;
  }
}
/* Pending/inactive row styling */
.team-row.is-pending {
  background: #e9e9ee;
}
.team-status {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 999px;
  background: #fef3c7; /* light amber */
  color: #92400e;
  border: 1px solid #fde68a;
  vertical-align: baseline;
}
.team-row.is-pending {
  background: #ececec !important;
}
.team-row .team-status {
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 999px;
  background: #EBFBF0;
  color: #8a6d00;
  font-weight: 700;
}
/* Team users — pending state */
#adminDrawer .team-row.is-pending {
  background: #ececec !important; /* force override */
  border: 1px dashed #c9c9c9;
}
#adminDrawer .team-row.is-pending .team-status {
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 999px;
  background: #EBFBF0;
  color: #8a6d00;
  font-weight: 700;
}
.team-row.is-owner .team-status {
  margin-left: 8px;
  font-weight: 700;
  color: #1f2937;
}
.team-row.is-pending {
  background: #EBFBF0;
} /* already using similar; tweak as you like */
/* Make all help triggers look like the Suggested Quote badge */
.help-tt, .tt .tt-btn {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  line-height: 1;
  border-radius: 50%;
  border: 1px dashed #aaa;
  background: transparent;
  color: #78C01C;
  font-weight: 700;
  text-decoration: none; /* no underline if it's an <a> */
  vertical-align: middle; /* sits nicely next to headings */
  margin-left: 6px; /* small gap from the title */
}
/* hide default marker on <summary> */
.tt .tt-btn::-webkit-details-marker {
  display: none;
}
/* if your headings have letter-spacing, don’t stretch the ? */
.ad-title .help-tt, .ad-title .tt .tt-btn {
  letter-spacing: 0;
}
.tt .tt-btn2 {
  display: inline-grid;
  cursor: pointer;
  place-items: center;
  width: 20px;
  height: 20px;
  line-height: 1;
  border-radius: 50%;
  border: 1px dashed #666;
  background: transparent;
  color: #78C01C;
  font-weight: 700;
  text-decoration: none; /* no underline if it's an <a> */
  vertical-align: middle; /* sits nicely next to headings */
  margin-left: 6px; /* small gap from the title */
}
/* hide default marker on <summary> */
.tt .tt-btn::-webkit-details-marker {
  display: none;
}
/* if your headings have letter-spacing, don’t stretch the ? */
.ad-title .help-tt, .ad-title .tt .tt-btn {
  letter-spacing: 0;
}
.tt-text {
  font-family: Arial;
  font-weight: normal;
  text-align: justify;
}
.currency-input {
  box-sizing: border-box;
  min-width: 300px;
  max-width: 350px; /* keep it from getting too wide */
  display: block;
  margin: 0 auto; /* center it */
  font-size: 42px;
  padding: 18px 12px;
  border: 1px solid #999;
  border-radius: 10px;
  background: #ccc;
}
.currency-box {
  position: relative;
  min-width: 330px;
  max-width: 350px;
  margin: 0 auto 50px;
}
/* the $ sits inside the input, not part of the value */
.currency-box::before {
  content: "$";
  position: absolute;
  left: 12px;
  top: 45%;
  transform: translateY(-40%);
  color: #767676;
  font-weight: 400;
  pointer-events: none;
  font-size: 42px;
}
/* pad-left so text doesn’t overlap the $ */
.currency-input {
  box-sizing: border-box;
  min-width: 300px;
  max-width: 350px; /* keep it from getting too wide */
  display: block;
  margin: 0 auto; /* center it */
  font-size: 42px;
  padding: 15px 12px 15px 30px; /* <-- extra left padding for the $ */
  color: #767676;
  /*border:1px solid #999;
  border-radius:10px;*/
  background-color: #C4C4C4;
}
/* normal text */
.price-input {
  letter-spacing: -2px;
  font-size: 56px;
  padding-left: -20px;
}
.price-input:hover {
  border: 1px #78C01C solid;
}
/* placeholder only */
.price-input::placeholder {
  letter-spacing: -2px; /* your spacing */
  color: #c7c7c7; /* optional */
  opacity: .9;
  font-size: 36px;
  line-height: 3;
}
/* (optional) older fallbacks */
.price-input::-webkit-input-placeholder {
  letter-spacing: -2px;
}
.price-input::-moz-placeholder {
  letter-spacing: -2px;
}
.price-input:-ms-input-placeholder {
  letter-spacing: -2px;
}
.price-input::-ms-input-placeholder {
  letter-spacing: -2px;
}
/* keep the $ inside the field */
.money-prefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #222;
  opacity: .9;
  font-weight: 600;
  pointer-events: none;
}
/* Toast */
.ppn-toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(10px);
  max-width: min(92vw, 520px);
  background: #111827;
  color: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .30);
  z-index: 4000;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.ppn-toast.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0)
}
.ppn-toast.is-success {
  background: #065f46
} /* green */
.ppn-toast.is-error {
  background: #7f1d1d
} /* red   */
.ppn-toast__close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: .85;
}
.ppn-toast__close:hover {
  opacity: 1
}
/* Bottom-right mini variant */
.ppn-toast--br {
  left: auto;
  right: 16px;
  bottom: 16px;
  max-width: 320px;
  transform: translateX(0) translateY(10px);
}
.ppn-toast--br.show {
  transform: translateX(0) translateY(0);
}
/* Overhead form tweaks */
.ov-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap
}
.ov-select {
  width: 170px
} /* tighten the dropdown */
.ov-btn {
  height: 46px;
  width: 140px;
  padding: 0 0px
} /* slimmer Save button */
@media (max-width: 480px) {
  .ov-row {
    flex-direction: column;
    align-items: stretch
  }
  .ov-select {
    width: 100%
  }
  .ov-btn {
    width: 100%
  }
}
/* =========================================================
   FeeFactorPro beta pass 1 — mobile-first UI layer
   Safe override layer: keeps current PHP IDs/forms/session flow intact.
   ========================================================= */ :root {
  --ffp-navy: #061b49;
  --ffp-blue: #0b2f74;
  --ffp-orange: #78C01C;
  --ffp-bg: #f4f7fb;
  --ffp-card: #ffffff;
  --ffp-border: #d9e2f0;
  --ffp-text: #101828;
  --ffp-muted: #667085;
  --ffp-soft-orange: #EBFBF0;
  --ffp-shadow: 0 14px 34px rgba(6, 27, 73, .10);
}
html {
  height: auto;
  min-height: 100%;
  background: var(--ffp-bg)
}
body.ffp-body, body {
  min-height: 100%;
  background: linear-gradient(180deg, #ffffff 0%, var(--ffp-bg) 42%, #eef3fb 100%) !important;
  color: var(--ffp-text);
  font-family: Arial, Helvetica, sans-serif;
  scrollbar-width: auto;
}
.bodyBox.ffp-app, .bodyBox {
  width: min(100%, 540px);
  min-width: 0 !important;
  max-width: 540px !important;
  margin: 0 auto !important;
  padding: 0 14px 28px !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left;
  font-size: 16px;
}
.ffp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  margin: 0 -14px 18px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ffp-border);
  box-shadow: 0 8px 24px rgba(6, 27, 73, .08);
  display: flex;
  gap: 12px;
  align-items: center;
}
.ffp-brandmark {
  width: 72px;
  height: 54px;
  border-radius: 14px;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px var(--ffp-border);
  overflow: hidden;
  flex: 0 0 auto;
}
.ffp-brandmark img {
  max-width: 96%;
  max-height: 96%;
  object-fit: contain;
  display: block;
}
.ffp-brandtext strong {
  display: block;
  color: var(--ffp-navy);
  font-size: 21px;
  letter-spacing: -.02em;
  line-height: 1.05;
  font-weight: 900;
}
.ffp-brandtext span {
  display: block;
  margin-top: 3px;
  color: var(--ffp-muted);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
}
.ffp-dashboard-intro, .ffp-login-card, .ad-card, .ffp-section-card {
  background: var(--ffp-card);
  border: 1px solid var(--ffp-border);
  border-radius: 22px;
  padding: 20px;
  box-shadow: var(--ffp-shadow);
  margin: 16px auto;
}
.ffp-dashboard-intro {
  padding: 18px 18px 16px;
  margin-top: 8px;
}
.ffp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 90, 0, .10);
  color: var(--ffp-orange);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ffp-dashboard-intro h1, .ffp-login-card h1 {
  margin: 12px 0 6px;
  color: var(--ffp-navy);
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -.04em;
}
.ffp-dashboard-intro p, .ffp-login-card p {
  margin: 0;
  color: var(--ffp-muted);
  font-size: 14px;
  line-height: 1.45;
}
/* Login */
.ffp-login-card {
  text-align: left;
  margin-top: 20px;
}
.ffp-login-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--ffp-soft-orange);
  color: var(--ffp-orange);
  display: grid;
  place-items: center;
  font-size: 22px;
  margin-bottom: 12px;
}
.ffp-login-form {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}
.ffp-login-form label {
  float: none;
  width: auto;
  text-align: left;
  padding: 0;
  margin: 6px 0 0;
  color: var(--ffp-navy);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .01em;
}
.ffp-login-form input {
  width: 100%;
  height: 52px;
  border: 1px solid var(--ffp-border);
  border-radius: 15px;
  background: #fff;
  color: var(--ffp-text);
  font-size: 17px;
  padding: 0 14px;
  box-shadow: none !important;
  outline: none;
}
.ffp-login-form input:focus {
  border-color: var(--ffp-orange);
  box-shadow: 0 0 0 4px rgba(255, 90, 0, .14) !important;
}
.ffp-password-wrap {
  position: relative;
}
.ffp-password-wrap input {
  padding-right: 48px;
}
.ffp-password-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: #f1f5fb;
  color: var(--ffp-navy);
  cursor: pointer;
}
.ffp-login-error {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #9f1239;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  text-align: left;
}
.ffp-login-submit, .button2.ffp-login-submit {
  margin-top: 8px;
  background: var(--ffp-orange) !important;
  border: 0 !important;
  color: #fff !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 16px !important;
  border-radius: 16px !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 24px rgba(120, 192, 28, .22) !important;
}
.ffp-login-footer {
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
}
.ffp-login-footer a {
  color: var(--ffp-navy);
  font-weight: 800;
}
.ffp-llc {
  text-align: center;
  color: var(--ffp-muted);
  font-size: 11px;
  line-height: 1.35;
  margin: 18px auto 0;
}
/* Lender cards */
.lenders-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  list-style: none;
}
.lenders-item {
  margin: 0 !important;
}
.lender-card {
  width: 100% !important;
  min-height: 116px !important;
  border: 1px solid var(--ffp-border) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 10px 26px rgba(6, 27, 73, .08) !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
  cursor: pointer !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
.lender-card:hover, .lender-card:focus-visible {
  border-color: var(--ffp-orange) !important;
  box-shadow: 0 16px 32px rgba(6, 27, 73, .13) !important;
  transform: translateY(-1px);
  outline: none !important;
}
.lender-logo {
  width: 220px !important;
  max-width: 82% !important;
  opacity: .95 !important;
  filter: none !important;
}
/* Main quote controls */
.currency-box {
  min-width: 0 !important;
  max-width: none !important;
  width: 100% !important;
  margin: 10px auto 16px !important;
}
.currency-box::before {
  color: var(--ffp-orange) !important;
  left: 18px !important;
  font-weight: 900 !important;
}
.currency-input, .price-input, input#myNumber {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 74px !important;
  border: 1px solid var(--ffp-border) !important;
  border-radius: 20px !important;
  background: #fff !important;
  color: var(--ffp-navy) !important;
  font-size: 42px !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  padding-left: 44px !important;
  box-shadow: var(--ffp-shadow) !important;
}
.price-input::placeholder {
  font-size: 28px !important;
  color: #c7ceda !important;
}
.currency-input:focus, .price-input:focus, input#myNumber:focus {
  border-color: var(--ffp-orange) !important;
  box-shadow: 0 0 0 4px rgba(255, 90, 0, .14), var(--ffp-shadow) !important;
  outline: none !important;
}
#packageSelect, select#termSelect, select#rateSelect, select {
  appearance: auto !important;
  width: 100% !important;
  max-width: none !important;
  border: 1px solid var(--ffp-border) !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: var(--ffp-text) !important;
  font-size: 17px !important;
  padding: 14px 12px !important;
  line-height: 1.2 !important;
}
label {
  float: none !important;
  width: auto !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 0 0 7px !important;
  color: var(--ffp-navy) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}
.button, .button2, .btn-primary, .ad-primary {
  background: var(--ffp-orange) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 17px !important;
  box-shadow: 0 12px 24px rgba(120, 192, 28, .22) !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  padding: 17px 18px !important;
  cursor: pointer !important;
}
.button:hover, .button2:hover, .btn-primary:hover, .ad-primary:hover {
  filter: brightness(.96);
  background: var(--ffp-orange) !important;
}
/* Suggested quote / result blocks */
.mc-badge {
  width: 100%;
  min-width: 0 !important;
  background: #fff !important;
  border: 1px solid var(--ffp-border);
  border-radius: 18px;
  box-shadow: var(--ffp-shadow);
  padding: 14px 16px !important;
  text-align: center;
}
.mc-label {
  color: var(--ffp-navy);
  font-weight: 900;
  letter-spacing: -.02em;
}
.addOn {
  background: #fff !important;
  border: 1px solid var(--ffp-border) !important;
  border-radius: 18px !important;
  color: var(--ffp-navy) !important;
  box-shadow: var(--ffp-shadow) !important;
}
/* Admin drawer */
.ad-drawer {
  max-width: none !important;
  margin: 18px auto 0 !important;
}
.ad-drawer > summary {
  justify-content: center;
}
.ad-card {
  border-radius: 22px !important;
}
.ad-icon {
  background: var(--ffp-soft-orange) !important;
  color: var(--ffp-orange) !important;
}
.ad-title {
  color: var(--ffp-navy) !important;
  font-size: 17px !important;
}
.ad-input {
  border-radius: 14px !important;
  border-color: var(--ffp-border) !important;
}
.ad-input:focus {
  border-color: var(--ffp-orange) !important;
  box-shadow: 0 0 0 4px rgba(255, 90, 0, .14) !important;
}
.ad-iconbtn.is-save, .ad-iconbtn.is-preview {
  background: var(--ffp-navy) !important;
  color: #fff !important;
}
.trash-link:hover, .trash-link:focus-visible {
  color: var(--ffp-orange) !important;
}
/* Desktop expansion */
@media (min-width:760px) {
  .bodyBox.ffp-app, .bodyBox {
    max-width: 720px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  .ffp-header {
    margin-left: -22px;
    margin-right: -22px;
    padding-left: 22px;
    padding-right: 22px;
  }
  .lenders-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   FeeFactorPro Beta - Lender Dashboard Polish
   Add at END of pick.css
========================================================= */

:root {
  --ffp-navy: #061b49;
  --ffp-blue: #0b2f74;
  --ffp-orange: #78C01C;
  --ffp-bg: #f3f6fb;
  --ffp-card: #ffffff;
  --ffp-border: #d7e0ee;
  --ffp-muted: #61708a;
  --ffp-shadow: 0 18px 45px rgba(6, 27, 73, 0.10);
}

body {
  background:
    radial-gradient(circle at top center, rgba(255, 90, 0, 0.055), transparent 260px),
    linear-gradient(180deg, #ffffff 0%, var(--ffp-bg) 42%, #eaf0f8 100%);
  color: var(--ffp-navy);
}

/* Main app width */
.ffp-shell,
.bodyBox {
  max-width: 520px !important;
  width: min(100%, 520px) !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Header */
.ffp-header {
  max-width: 520px;
  margin: 0 auto 18px;
  padding: 12px 18px;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--ffp-border);
  border-top: none;
  box-shadow: 0 12px 34px rgba(6, 27, 73, 0.08);
}

.ffp-brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ffp-brand-mark {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--ffp-border);
}

.ffp-brand-title {
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  color: var(--ffp-navy);
  letter-spacing: -0.03em;
}

.ffp-brand-tagline {
  margin-top: 5px;
  font-size: 13px;
  color: var(--ffp-muted);
  font-weight: 700;
}

/* Dashboard intro card */
.ffp-dashboard-card,
.ffp-card {
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--ffp-border);
  border-radius: 22px;
  box-shadow: var(--ffp-shadow);
  padding: 18px;
}

.ffp-kicker,
.ffp-step,
.ffp-step-label {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 90, 0, 0.10);
  color: var(--ffp-orange);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ffp-dashboard-card h1,
.ffp-card h1 {
  margin: 16px 0 8px;
  color: var(--ffp-navy);
  font-size: 27px;
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.ffp-dashboard-card p,
.ffp-card p {
  margin: 0;
  color: #41506a;
  font-size: 14px;
  line-height: 1.55;
}

/* Lender grid */
.lenders-list,
.lender-grid {
  max-width: 520px !important;
  width: 100%;
  margin: 16px auto 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px !important;
  padding: 0 !important;
  list-style: none;
}

.lenders-item {
  margin: 0 !important;
}

/* Lender cards */
.lender-card {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 108px !important;
  padding: 18px 14px !important;
  border: 1px solid var(--ffp-border) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 28px rgba(6, 27, 73, 0.075) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    border-color 0.14s ease,
    background-color 0.14s ease;
}

.lender-card:hover,
.lender-card:focus-visible {
  border-color: rgba(255, 90, 0, 0.8) !important;
  box-shadow: 0 16px 36px rgba(6, 27, 73, 0.14) !important;
  transform: translateY(-2px);
  outline: none;
}

.lender-card:active {
  transform: translateY(0);
}

.lender-logo {
  width: 150px !important;
  max-width: 88% !important;
  max-height: 58px !important;
  object-fit: contain;
  opacity: 0.78 !important;
  filter: grayscale(0.35) !important;
}

.lender-card:hover .lender-logo,
.lender-card:focus-visible .lender-logo {
  opacity: 1 !important;
  filter: none !important;
}

/* Admin/logout utility area */
.ffp-utility,
.admin-utility,
.signed-in-as {
  max-width: 520px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.signed-in-as {
  font-size: 12px !important;
  color: var(--ffp-muted) !important;
  margin-top: 24px !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
}

.button,
.button2,
.btn-primary,
.ad-primary {
  background: var(--ffp-orange) !important;
  border-radius: 15px !important;
  box-shadow: 0 14px 28px rgba(120, 192, 28, 0.22) !important;
}

.button:hover,
.button2:hover,
.btn-primary:hover,
.ad-primary:hover {
  background: #336600 !important;
}

/* Logout button specifically */
form[action*="logout"] .button,
input[value="LOGOUT"],
button.logout,
.logout-button {
  background: var(--ffp-navy) !important;
}

/* Make ADMIN look less stranded if it is plain text/summary */
summary,
.drawer > summary,
.ad-drawer > summary {
  color: var(--ffp-navy);
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Footer */
footer {
  color: #6a7588 !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
  padding-bottom: 28px !important;
}

/* Mobile */
@media (max-width: 560px) {
  .ffp-header {
    margin-bottom: 14px;
    padding: 11px 14px;
  }

  .ffp-brand-mark {
    width: 52px;
    height: 52px;
  }

  .ffp-brand-title {
    font-size: 22px;
  }

  .ffp-brand-tagline {
    font-size: 12px;
  }

  .bodyBox,
  .ffp-shell {
    width: calc(100% - 28px) !important;
    max-width: none !important;
  }

  .lenders-list,
  .lender-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px !important;
  }

  .lender-card {
    min-height: 102px !important;
    border-radius: 17px !important;
    padding: 16px 10px !important;
  }

  .lender-logo {
    width: auto !important;
    max-height: 300px !important;
  }
}

@media (max-width: 380px) {
  .lenders-list,
  .lender-grid {
    grid-template-columns: 1fr;
  }

  .lender-card {
    min-height: 92px !important;
  }
}
/* =========================================================
   FeeFactorPro Beta - Pass 3 Price / Package Screen
   Add at END of pick.css
========================================================= */

.ffp-price-card {
  width: min(100%, 520px);
  max-width: 520px;
  margin: 18px auto 0;
  padding: 20px 18px 22px;
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--ffp-border, #d7e0ee);
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(6, 27, 73, 0.10);
  text-align: left;
}

.ffp-price-card h1 {
  margin: 16px 0 8px;
  color: var(--ffp-navy, #061b49);
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.ffp-card-copy {
  margin: 0 0 20px;
  color: #41506a;
  font-size: 14px;
  line-height: 1.55;
}

.ffp-price-form {
  margin: 0;
}

.ffp-field-label {
  display: block;
  float: none !important;
  width: auto !important;
  text-align: left !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: var(--ffp-navy, #061b49) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em;
}

.ffp-money-box {
  position: relative;
  width: 100%;
  margin: 0 0 16px;
}

.ffp-money-symbol {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #000000;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

.ffp-money-input,
#myNumber.ffp-money-input,
#myNumber.price-input {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 18px 18px 18px 48px !important;
  border: 1px solid var(--ffp-border, #d7e0ee) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  color: var(--ffp-navy, #061b49) !important;
  font-size: 38px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  box-shadow: inset 0 1px 0 rgba(6, 27, 73, 0.03);
}

.ffp-money-input:focus,
#myNumber.ffp-money-input:focus,
#myNumber.price-input:focus {
  outline: none !important;
  border-color: var(--ffp-orange, #78C01C) !important;
  box-shadow: 0 0 0 4px rgba(255, 90, 0, 0.14) !important;
}

.ffp-money-input::placeholder,
#myNumber.price-input::placeholder {
  color: #b9c3d3 !important;
  opacity: 1 !important;
  font-size: 30px !important;
  letter-spacing: -0.04em !important;
}

.ffp-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 16px;
  color: #7a879a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ffp-divider::before,
.ffp-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ffp-border, #d7e0ee);
}

.ffp-package-select,
#packageSelect {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 16px 44px 16px 16px !important;
  border: 1px solid var(--ffp-border, #d7e0ee) !important;
  border-radius: 16px !important;
  background-color: #ffffff !important;
  color: var(--ffp-navy, #061b49) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23ff5a00'%3E%3Cpath d='M5.8 7.5L10 11.7l4.2-4.2c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1l-4.8 4.8c-.3.3-.8.3-1.1 0L4.7 8.6c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
}

.ffp-package-select:focus,
#packageSelect:focus {
  outline: none !important;
  border-color: var(--ffp-orange, #78C01C) !important;
  box-shadow: 0 0 0 4px rgba(255, 90, 0, 0.14) !important;
}

.ffp-primary-action {
  width: 100%;
  margin-top: 22px;
  border: 0;
  border-radius: 17px;
  padding: 17px 18px;
  background: var(--ffp-orange, #78C01C);
  color: #ffffff;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 15px 30px rgba(255, 90, 0, 0.24);
}

.ffp-primary-action:hover,
.ffp-primary-action:focus-visible {
  background: #78C01C;
  outline: none;
  transform: translateY(-1px);
}

.ffp-primary-action:active {
  transform: translateY(0);
}

/* Optional selected lender mini card */
.ffp-selected-lender {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 18px;
  padding: 11px 13px;
  border: 1px solid var(--ffp-border, #d7e0ee);
  border-radius: 15px;
  background: #f8fbff;
}

.ffp-selected-lender img {
  width: 92px;
  max-height: 34px;
  object-fit: contain;
}

.ffp-selected-lender span {
  color: #61708a;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (max-width: 560px) {
  .ffp-price-card {
    width: calc(100% - 28px);
    padding: 18px 16px 20px;
  }

  .ffp-price-card h1 {
    font-size: 25px;
  }

  .ffp-money-input,
  #myNumber.ffp-money-input,
  #myNumber.price-input {
    font-size: 34px !important;
    padding-left: 44px !important;
  }

  .ffp-money-symbol {
    font-size: 31px;
    left: 16px;
  }
}
.ad-drawer,
.drawer {
  margin-top: 24px !important;
}

.ad-drawer > summary,
.drawer > summary {
  color: var(--ffp-navy, #061b49);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Selected lender card above Step 2 */
.ffp-selected-lender-wrap {
  width: min(100%, 520px);
  max-width: 520px;
  margin: 14px auto 18px;
}

.ffp-selected-lender-card {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 96px !important;
  padding: 18px 18px !important;
  border-radius: 20px !important;

  /* subtle orange relationship */
  border: 1px solid rgba(255, 90, 0, 0.16) !important;
  background: linear-gradient(180deg, #EBFBF0 0%, #ffffff 100%) !important;

  box-shadow:
    0 12px 30px rgba(6, 27, 73, 0.08),
    0 0 0 1px rgba(255, 90, 0, 0.04) inset !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ffp-selected-lender-card .lender-logo {
  width: 170px !important;
  max-width: 86% !important;
  max-height: 56px !important;
  object-fit: contain;
  opacity: 0.88 !important;
  filter: grayscale(0.15) !important;
}
/* =========================================================
   FeeFactorPro - Suggested Quote Hero Card
========================================================= */

.ffp-suggested-quote {
  width: min(100%, 520px);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  padding: 18px 20px 17px;
  border-radius: 22px;
  border: 1px solid rgba(255, 90, 0, 0.22);
  /*background:
    radial-gradient(circle at top left, rgba(255, 90, 0, 0.14), transparent 54%),
    linear-gradient(180deg, #EBFBF0 0%, #ffffff 100%);
  box-shadow:
    0 18px 42px rgba(6, 27, 73, 0.10),
    0 10px 28px rgba(255, 90, 0, 0.08);*/
  text-align: center;
}

.ffp-suggested-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ffp-orange, #78C01C);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ffp-suggested-value {
  display: block;
  margin-top: 8px;
  color: var(--ffp-navy, #061b49);
  font-size: 36px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.055em;
}

.ffp-suggested-note {
  margin-top: 8px;
  color: #61708a;
  font-size: 13px;
  font-weight: 700;
}

/* Keep the help button aligned inside the hero label */
.ffp-suggested-label .tt {
  display: inline-flex;
  align-items: center;
}

.ffp-suggested-label .tt-btn {
  margin-left: 2px;
  width: 22px;
  height: 22px;
  color: var(--ffp-orange, #78C01C);
  border-color: rgba(255, 90, 0, 0.42);
  background: rgba(255, 255, 255, 0.72);
}

/* Reuse your flash behavior, but make it fit the new card */
.ffp-suggested-quote.mc-flash {
  animation: ffpSuggestedPulse 2.6s ease-out 1;
}

@keyframes ffpSuggestedPulse {
  0% {
    box-shadow:
      0 0 0 0 rgba(255, 90, 0, 0.34),
      0 18px 42px rgba(6, 27, 73, 0.10);
  }

  55% {
    box-shadow:
      0 0 0 10px rgba(255, 90, 0, 0),
      0 18px 42px rgba(6, 27, 73, 0.10);
  }

  100% {
    box-shadow:
      0 18px 42px rgba(6, 27, 73, 0.10),
      0 10px 28px rgba(255, 90, 0, 0.08);
  }
}

@media (max-width: 560px) {
  .ffp-suggested-quote {
    width: calc(100% - 28px);
    padding: 17px 16px 16px;
  }

  .ffp-suggested-value {
    font-size: 34px;
  }
}

/* =========================================================
   FeeFactorPro - Quote Summary / Math Card
========================================================= */

.ffp-quote-summary {
  width: min(100%, 520px);
  max-width: 520px;
  margin: 12px auto 14px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--ffp-border, #d7e0ee);
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(6, 27, 73, 0.10);
}

.ffp-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid #edf1f7;
}

.ffp-summary-row:last-child {
  border-bottom: none;
}

.ffp-summary-label {
  color: var(--ffp-blue, #0b2f74);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ffp-summary-value {
  color: var(--ffp-navy, #061b49);
  font-size: 17px;
  font-weight: 850;
  text-align: right;
}

.ffp-summary-value.is-negative {
  color: #d92d20;
}

.ffp-payment-row {
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.ffp-payment-row .ffp-summary-label {
  color: var(--ffp-orange, #78C01C);
}

.ffp-payment-row .ffp-summary-value {
  font-size: 22px;
  font-weight: 950;
}
.ffp-summary-label.is-muted {
  color: #667085;
}

.ffp-summary-value.is-negative {
  color: #d92d20;
}

.ffp-payment-row {
  background:
    linear-gradient(180deg, rgba(255, 90, 0, 0.08), rgba(255, 255, 255, 1));
}

.ffp-payment-row .ffp-summary-label {
  color: var(--ffp-orange, #78C01C);
}

.ffp-payment-row .ffp-summary-value {
  font-size: 23px;
  font-weight: 950;
}
/* =========================================================
   FeeFactorPro - neutralize old quote wrapper
========================================================= */

/* The old inline wrapper around the quote summary still exists.
   This visually removes the gray shell without changing PHP structure. */
.ffp-quote-summary {
  position: relative;
  z-index: 2;
  margin-bottom: 0 !important;
}

/* Make reduced/payment rows look intentional even inside old wrapper */
.ffp-summary-row {
  background: #ffffff;
}

.ffp-summary-row:first-child {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.ffp-summary-row:last-child {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* Reduced row */
.ffp-summary-label.is-muted {
  color: #667085 !important;
}

.ffp-summary-value.is-negative {
  color: #d92d20 !important;
}

/* Payment row */
.ffp-payment-row {
  background:
    radial-gradient(circle at left center, rgba(255, 90, 0, 0.12), transparent 60%),
    linear-gradient(180deg, #EBFBF0 0%, #ffffff 100%) !important;
}

.ffp-payment-row .ffp-summary-label {
  color: var(--ffp-orange, #78C01C) !important;
}

.ffp-payment-row .ffp-summary-value {
  color: var(--ffp-navy, #061b49) !important;
  font-size: 23px !important;
  font-weight: 950 !important;
}

/* Hide old gray wrapper visually by covering the gray background */
.ffp-quote-summary,
.ffp-quote-summary ~ .ffp-summary-row {
  width: min(100%, 520px);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Pull reduced/payment rows tight to the main quote card */
.ffp-quote-summary ~ .ffp-summary-row {
  margin-top: 0;
  border-left: 1px solid var(--ffp-border, #d7e0ee);
  border-right: 1px solid var(--ffp-border, #d7e0ee);
  box-shadow: 0 14px 34px rgba(6, 27, 73, 0.06);
}

.ffp-quote-summary ~ .ffp-summary-row:last-of-type {
  border-bottom: 1px solid var(--ffp-border, #d7e0ee);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.ffp-old-quote-wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: min(100%, 520px);
  max-width: 520px;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 20px !important;
}
/* =========================================================
   FeeFactorPro - Add-On Options
========================================================= */

.addOn {
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  margin: 14px auto 14px !important;
  padding: 12px 16px !important;
  border-radius: 18px !important;
  border: 1px solid var(--ffp-border, #d7e0ee) !important;
  background: #ffffff !important;
  color: var(--ffp-navy, #061b49) !important;
  box-shadow: 0 12px 28px rgba(6, 27, 73, 0.08) !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ffp-addon-list {
  width: min(100%, 520px);
  max-width: 520px;
  margin: 0 auto 16px;
  display: grid;
  gap: 12px;
}

.ffp-addon-card {
  padding: 14px 14px 12px;
  border: 1px solid var(--ffp-border, #d7e0ee);
  border-radius: 18px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 10px 24px rgba(6, 27, 73, 0.07);
}

.ffp-addon-card label {
  display: block;
  float: none !important;
  width: auto !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  text-align: left !important;
  color: var(--ffp-navy, #061b49) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: 0.02em;
}

.ffp-addon-card select {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 15px 44px 15px 14px !important;
  border: 1px solid var(--ffp-border, #d7e0ee) !important;
  border-radius: 16px !important;
  background-color: #ffffff !important;
  color: var(--ffp-navy, #061b49) !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23ff5a00'%3E%3Cpath d='M5.8 7.5L10 11.7l4.2-4.2c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1l-4.8 4.8c-.3.3-.8.3-1.1 0L4.7 8.6c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
}

.ffp-addon-card select:focus {
  outline: none !important;
  border-color: var(--ffp-orange, #78C01C) !important;
  box-shadow: 0 0 0 4px rgba(255, 90, 0, 0.14) !important;
}

.ffp-addon-monthly {
  display: block;
  margin-top: 7px;
  color: #61708a;
  font-size: 12px;
  font-weight: 800;
}

.ffp-addon-monthly strong {
  color: var(--ffp-orange, #78C01C);
}
.addOn {
  background:
    linear-gradient(180deg, #EBFBF0 0%, #ffffff 100%) !important;
  border: 1px solid rgba(255, 90, 0, 0.16) !important;
  color: var(--ffp-navy, #061b49) !important;
}
.ffp-addon-monthly {
  font-size: 13px !important;
  margin-top: 9px !important;
}

.ffp-addon-monthly strong {
  font-size: 13px !important;
}
.ffp-addon-list {
  gap: 14px !important;
}
/* =========================================================
   FeeFactorPro - Selected / Added Options
========================================================= */

.ffp-added-options {
  width: min(100%, 520px);
  max-width: 520px;
  margin: 8px auto 10px;
  overflow: hidden;
  border: 1px solid var(--ffp-border, #d7e0ee);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(6, 27, 73, 0.08);
}

.ffp-added-options-head {
  padding: 10px 14px;
  background:
    linear-gradient(180deg, #EBFBF0 0%, #ffffff 100%);
  border-bottom: 1px solid #edf1f7;
}

.ffp-added-options-head span {
  color: var(--ffp-orange, #78C01C);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ffp-added-option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  border-bottom: 1px solid #edf1f7;
}

.ffp-added-option-row:last-child {
  border-bottom: none;
}

.ffp-added-option-name {
  min-width: 0;
  color: #78C01C;
  font-size: 14px;
  font-weight: 850;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ffp-added-option-name .fa {
  margin-right: 7px;
  color: #78C01C;
}

.ffp-added-option-remove {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9b1c1c !important;
  background: #fff5f5;
  border: 1px solid #ffd4d4;
  text-decoration: none !important;
  flex: 0 0 auto;
}

.ffp-added-option-remove:hover,
.ffp-added-option-remove:focus-visible {
  background: #ffe8e8;
  outline: none;
}
/* =========================================================
   FeeFactorPro - Term / Rate Select Cards
========================================================= */

.ffp-select-card {
  width: min(100%, 520px);
  max-width: 520px;
  margin: 10px auto 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--ffp-border, #d7e0ee);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 12px 28px rgba(6, 27, 73, 0.08);
}

.ffp-select-card form {
  margin: 0;
}

.ffp-select-card label {
  display: block;
  float: none !important;
  width: auto !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  text-align: left !important;
  color: var(--ffp-navy, #061b49) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: 0.02em;
}

.ffp-select-card select,
#termSelect,
#rateSelect {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 15px 44px 15px 14px !important;
  border: 1px solid var(--ffp-border, #d7e0ee) !important;
  border-radius: 16px !important;
  background-color: #ffffff !important;
  color: var(--ffp-navy, #061b49) !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23ff5a00'%3E%3Cpath d='M5.8 7.5L10 11.7l4.2-4.2c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1l-4.8 4.8c-.3.3-.8.3-1.1 0L4.7 8.6c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
}

.ffp-select-card select:focus,
#termSelect:focus,
#rateSelect:focus {
  outline: none !important;
  border-color: var(--ffp-orange, #78C01C) !important;
  box-shadow: 0 0 0 4px rgba(255, 90, 0, 0.14) !important;
}/* =========================================================
   FeeFactorPro - Clear Quote Button
========================================================= */

.ffp-clear-form {
  width: min(100%, 520px);
  max-width: 520px;
  margin: 24px auto 10px;
}

.ffp-clear-btn {
  width: 100%;
  border: 1px solid rgba(217, 45, 32, 0.22);
  border-radius: 17px;
  padding: 15px 18px;
  background: #fff5f5;
  color: #b42318;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(6, 27, 73, 0.06);
}

.ffp-clear-btn:hover,
.ffp-clear-btn:focus-visible {
  background: #ffecec;
  outline: none;
}
footer .oval-button {
  background: var(--ffp-navy, #061b49) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(6, 27, 73, 0.12);
}

footer .oval-button:hover {
  background: #0b2f74 !important;
}

/* =========================================================
   FeeFactorPro - Admin Quote Display Toggle
========================================================= */

.ffp-toggle-form {
  display: grid;
  gap: 14px;
}

.ffp-toggle-row {
  display: flex !important;
  float: none !important;
  width: 100% !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid #d7e0ee;
  border-radius: 16px;
  background: #ffffff;
  text-align: left !important;
  cursor: pointer;
}

.ffp-toggle-row span {
  display: block;
  min-width: 0;
}

.ffp-toggle-row strong {
  display: block;
  color: var(--ffp-navy, #061b49);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.2;
}

.ffp-toggle-row small {
  display: block;
  margin-top: 4px;
  color: #61708a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.ffp-toggle-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ffp-toggle-row i {
  position: relative;
  width: 54px;
  height: 30px;
  border-radius: 999px;
  background: #cbd5e1;
  flex: 0 0 auto;
  transition: background 0.16s ease;
}

.ffp-toggle-row i::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(6, 27, 73, 0.18);
  transition: transform 0.16s ease;
}

.ffp-toggle-row input:checked + i {
  background: var(--ffp-orange, #78C01C);
}

.ffp-toggle-row input:checked + i::before {
  transform: translateX(24px);
}

.ffp-admin-save-btn {
  width: 100%;
  min-width: 0 !important;
}
/* =========================================================
   FeeFactorPro - Itemized Fee Breakdown
========================================================= */

.ffp-fee-breakdown {
  border-top: 1px solid #edf1f7;
  background: linear-gradient(180deg, #EBFBF0 0%, #ffffff 100%);
}

.ffp-fee-breakdown-head {
  padding: 10px 14px 4px;
  color: var(--ffp-orange, #78C01C);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ffp-breakdown-row {
  background: transparent !important;
  padding-top: 10px;
  padding-bottom: 10px;
}

.ffp-breakdown-row .ffp-summary-label {
  color: #667085;
}

.ffp-breakdown-row .ffp-summary-value {
  font-size: 16px;
}
/* =========================================================
   FeeFactorPro - Admin Drawer Modernization
========================================================= */

.ad-drawer {
  width: min(100%, 520px);
  max-width: 520px;
  margin: 22px auto 14px !important;
  text-align: left;
}

.ad-drawer > summary,
.ad-btn,
summary.oval-button.ad-btn {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 auto 14px !important;
  padding: 14px 18px !important;
  border-radius: 18px !important;
  border: 1px solid var(--ffp-border, #d7e0ee) !important;
  background: #ffffff !important;
  color: var(--ffp-navy, #061b49) !important;
  box-shadow: 0 10px 24px rgba(6, 27, 73, 0.08) !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  list-style: none;
}

.ad-drawer > summary::-webkit-details-marker {
  display: none;
}

.ad-drawer[open] > summary,
.ad-drawer > summary:hover {
  border-color: rgba(255, 90, 0, 0.28) !important;
  background:
    linear-gradient(180deg, #EBFBF0 0%, #ffffff 100%) !important;
}

/* Main admin section cards */
.ad-drawer .ad-card,
.ad-drawer .ad-grid,
.ad-drawer .lender-section,
.ad-drawer #packagesAdmin,
.ad-drawer #quoteDisplayAdmin,
.ad-drawer div[style*="background-color: #aaa"],
.ad-drawer div[style*="background:#aaa"],
.ad-drawer div[style*="background-color: #aaa"] {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 18px !important;
  padding: 16px !important;
  border-radius: 22px !important;
  border: 1px solid var(--ffp-border, #d7e0ee) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 14px 34px rgba(6, 27, 73, 0.09) !important;
  color: var(--ffp-navy, #061b49) !important;
}

/* Admin section titles */
.ad-title,
.ad-drawer .ad-title {
  color: var(--ffp-navy, #061b49) !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em;
  margin-bottom: 6px !important;
}

.ad-sub,
.ad-drawer .ad-sub {
  color: #61708a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

/* Admin separators */
.ad-sep {
  border: 0 !important;
  height: 1px !important;
  background: #dbe3ef !important;
  margin: 22px 0 !important;
}

/* Inputs/selects inside admin */
.ad-input,
.ad-select,
.team-ceil,
.ov-select,
.admin-upload input[type="file"],
.ad-drawer input[type="email"],
.ad-drawer input[type="text"],
.ad-drawer input[type="number"],
.ad-drawer select {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  border: 1px solid var(--ffp-border, #d7e0ee) !important;
  border-radius: 15px !important;
  background-color: #ffffff !important;
  color: var(--ffp-navy, #061b49) !important;
  padding: 13px 14px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.ad-drawer input:focus,
.ad-drawer select:focus {
  outline: none !important;
  border-color: var(--ffp-orange, #78C01C) !important;
  box-shadow: 0 0 0 4px rgba(255, 90, 0, 0.14) !important;
}

/* Admin primary buttons */
.ad-primary,
.admin-upload .ad-primary,
.ov-btn,
.ffp-admin-save-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  border: 0 !important;
  border-radius: 16px !important;
  padding: 15px 16px !important;
  background: var(--ffp-orange, #78C01C) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  box-shadow: 0 14px 28px rgba(255, 90, 0, 0.22) !important;
  cursor: pointer;
}

.ad-primary:hover,
.admin-upload .ad-primary:hover,
.ov-btn:hover,
.ffp-admin-save-btn:hover {
  background: #336600 !important;
}

/* Lender/rate sheet rows */
.lender-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin: 12px 0 !important;
}

.lender-row {
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid var(--ffp-border, #d7e0ee) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
}

.lender-name {
  color: var(--ffp-navy, #061b49) !important;
  font-weight: 900 !important;
}

.lender-count {
  color: #61708a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* Small icon buttons */
.ad-iconbtn,
.lender-actions .ad-iconbtn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}

.ad-iconbtn.is-preview {
  background: var(--ffp-navy, #061b49) !important;
  color: #ffffff !important;
}

.ad-iconbtn.is-delete {
  background: #fff5f5 !important;
  color: #d92d20 !important;
  border-color: #ffd4d4 !important;
}

.ad-iconbtn.is-save {
  background: #f0fdf4 !important;
  color: #15803d !important;
  border-color: #bbf7d0 !important;
}

/* File upload area */
.admin-upload {
  display: grid !important;
  gap: 12px !important;
  margin-top: 12px !important;
}

/* Overhead row */
.ov-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

/* Team rows */
.team-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.team-row {
  display: grid !important;
  grid-template-columns: 1fr 90px 42px 42px !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 12px !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid var(--ffp-border, #d7e0ee) !important;
}

.team-email {
  min-width: 0;
  color: var(--ffp-navy, #061b49);
  font-weight: 850;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.team-status {
  display: block;
  margin-top: 3px;
  color: #61708a;
  font-size: 11px;
  font-weight: 800;
}

/* Mobile admin rows */
@media (max-width: 480px) {
  .team-row {
    grid-template-columns: 1fr !important;
  }

  .team-ceil {
    width: 100% !important;
  }

  .ad-row {
    grid-template-columns: 1fr !important;
  }

  .lender-row {
    grid-template-columns: 1fr auto auto !important;
  }
}
/* =========================================================
   FeeFactorPro - Contractor-friendly admin icon buttons
========================================================= */

.ad-iconbtn,
.lender-actions .ad-iconbtn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  border: 1px solid var(--ffp-border, #d7e0ee) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  box-shadow: none !important;
}

/* View / preview: strong navy */
.ad-iconbtn.is-preview {
  background: var(--ffp-navy, #061b49) !important;
  color: #ffffff !important;
  border-color: var(--ffp-navy, #061b49) !important;
}

/* Save: calm navy-outline, not green */
.ad-iconbtn.is-save {
  background: #ffffff !important;
  color: var(--ffp-navy, #061b49) !important;
  border-color: rgba(6, 27, 73, 0.22) !important;
}

/* Save hover/focus: slight navy fill */
.ad-iconbtn.is-save:hover,
.ad-iconbtn.is-save:focus-visible {
  background: #f3f6fb !important;
  border-color: rgba(6, 27, 73, 0.38) !important;
  outline: none !important;
}

/* Delete: still red, but softened */
.ad-iconbtn.is-delete {
  background: #fffafa !important;
  color: #c81e1e !important;
  border-color: #ffd7d7 !important;
}

.ad-iconbtn.is-delete:hover,
.ad-iconbtn.is-delete:focus-visible {
  background: #fff1f1 !important;
  border-color: #ffbcbc !important;
  outline: none !important;
}

/* Remove any glow/pulse that feels too flashy */
.ad-iconbtn.ppn-pulse,
.ppn-pulse {
  animation: none !important;
  box-shadow: none !important;
}
.ad-iconbtn.is-delete {
  background: #ffffff !important;
  color: #b42318 !important;
  border-color: rgba(180, 35, 24, 0.20) !important;
}
/* =========================================================
   FeeFactorPro - Tone Down Orange Buttons
========================================================= */

:root {
  --ffp-orange: #78C01C;        /* muted contractor orange */
  --ffp-orange-dark: #336600;
  --ffp-orange-soft: #EBFBF0;
}

/* Main action buttons */
.ffp-primary-action,
.ad-primary,
.admin-upload .ad-primary,
.ov-btn,
.ffp-admin-save-btn,
.button,
.button2 {
  background: var(--ffp-orange) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(120, 192, 28, 0.16) !important;
}

/* Hover/focus */
.ffp-primary-action:hover,
.ffp-primary-action:focus-visible,
.ad-primary:hover,
.ad-primary:focus-visible,
.admin-upload .ad-primary:hover,
.admin-upload .ad-primary:focus-visible,
.ov-btn:hover,
.ov-btn:focus-visible,
.ffp-admin-save-btn:hover,
.ffp-admin-save-btn:focus-visible,
.button:hover,
.button2:hover {
  background: var(--ffp-orange-dark) !important;
  box-shadow: 0 10px 22px rgba(120, 192, 28, 0.18) !important;
  outline: none !important;
}

/* Reduce bright orange glow on suggested quote / selected lender cards */
.ffp-suggested-quote,
.ffp-selected-lender-card,
.addOn {
  border-color: rgba(216, 90, 26, 0.18) !important;
  /*box-shadow: 0 12px 30px rgba(6, 27, 73, 0.08) !important;*/
}

/* Softer orange gradient areas */
.ffp-suggested-quote,
.ffp-payment-row,
.addOn,
.ad-drawer[open] > summary,
.ad-drawer > summary:hover {
  /*background:
    linear-gradient(180deg, #EBFBF0 0%, #ffffff 100%) !important;*/
}

/* Small orange labels */
.ffp-step,
.ffp-step-label,
.ffp-kicker,
.ffp-suggested-label,
.ffp-added-options-head span,
.ffp-fee-breakdown-head {
  /*color: var(--ffp-orange) !important;
  background: rgba(216, 90, 26, 0.08) !important;*/
}

/* Orange icons/details */
.ffp-money-symbol,
.ffp-payment-row .ffp-summary-label,
.ffp-added-option-name .fa,
.ffp-addon-monthly strong {
  color: #000000;
}

/* Toggle switch */
.ffp-toggle-row input:checked + i {
  background: var(--ffp-orange) !important;
}
/* =========================================================
   FeeFactorPro - Add-on header price alignment
========================================================= */

.ffp-addon-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.ffp-addon-head label {
  margin: 0 !important;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ffp-addon-head .ffp-addon-monthly {
  margin: 0 !important;
  flex: 0 0 auto;
  color: #61708a;
  font-size: 13px !important;
  font-weight: 850;
  white-space: nowrap;
}

.ffp-addon-head .ffp-addon-monthly strong {
  color: var(--ffp-orange, #78C01C);
  font-size: 13px !important;
  font-weight: 950;
}

/* tighten card now that monthly price moved up */
.ffp-addon-card {
  padding: 13px 14px 14px !important;
}

/* =========================================================
   FeeFactorPro - Compact Add-On Rows
========================================================= */

.ffp-addon-card--compact {
  padding: 12px 14px !important;
}

.ffp-addon-compact-form {
  display: grid;
  grid-template-columns: minmax(105px, 1fr) auto 112px;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
}

.ffp-addon-name {
  display: block;
  margin: 0 !important;
  min-width: 0;
  color: var(--ffp-navy, #061b49) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ffp-addon-compact-form .ffp-addon-monthly {
  margin: 0 !important;
  color: #61708a;
  font-size: 12px !important;
  font-weight: 850;
  white-space: nowrap;
}

.ffp-addon-compact-form .ffp-addon-monthly strong {
  color: var(--ffp-orange, #78C01C);
  font-size: 12px !important;
  font-weight: 950;
}

.ffp-addon-select-compact,
.ffp-addon-card select.ffp-addon-select-compact {
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  margin: 0 !important;
  padding: 11px 34px 11px 12px !important;
  border-radius: 13px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  background-position: right 10px center !important;
  background-size: 18px 18px !important;
}

/* Very narrow screens: allow graceful stacking */
@media (max-width: 380px) {
  .ffp-addon-compact-form {
    grid-template-columns: 1fr auto;
  }

  .ffp-addon-select-compact,
  .ffp-addon-card select.ffp-addon-select-compact {
    grid-column: 1 / -1;
    width: 100% !important;
    max-width: none !important;
  }
}
/* =========================================================
   FeeFactorPro - Compact Add-On Rows
========================================================= */

.ffp-addon-card--compact {
  padding: 12px 14px !important;
}

.ffp-addon-compact-form {
  display: grid;
  grid-template-columns: minmax(105px, 1fr) auto 112px;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
	padding-bottom: -25px;
}

.ffp-addon-name {
  display: block;
  margin: 0 !important;
  min-width: 0;
  color: var(--ffp-navy, #061b49) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ffp-addon-compact-form .ffp-addon-monthly {
  margin: 0 !important;
  color: #61708a;
  font-size: 12px !important;
  font-weight: 850;
  white-space: nowrap;
}

.ffp-addon-compact-form .ffp-addon-monthly strong {
  color: var(--ffp-orange, #78C01C);
  font-size: 12px !important;
  font-weight: 950;
}

.ffp-addon-select-compact,
.ffp-addon-card select.ffp-addon-select-compact {
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  margin: 0 !important;
  padding: 11px 34px 11px 12px !important;
  border-radius: 13px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  background-position: right 10px center !important;
  background-size: 18px 18px !important;
}

/* Very narrow screens: allow graceful stacking */
@media (max-width: 380px) {
  .ffp-addon-compact-form {
    grid-template-columns: 1fr auto;
  }

  .ffp-addon-select-compact,
  .ffp-addon-card select.ffp-addon-select-compact {
    grid-column: 1 / -1;
    width: 100% !important;
    max-width: none !important;
  }
}/* =========================================================
   FeeFactorPro - Visual hierarchy refinement
   Make financing fee + payment the focus
========================================================= */

/* 1) Mute the upper quote summary */
.ffp-quote-summary {
  border-color: #dbe3ef !important;
  box-shadow: 0 8px 20px rgba(6, 27, 73, 0.05) !important;
}

.ffp-quote-summary .ffp-summary-row {
  background: #fcfdff !important;
}

.ffp-quote-summary .ffp-summary-label {
  color: #7a879a !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
}

.ffp-quote-summary .ffp-summary-value {
  color: #0b2f74 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.ffp-fee-breakdown {
  background: #fafbfd !important;
}

.ffp-fee-breakdown-head {
  color: #9aa4b2 !important;
  background: transparent !important;
  font-size: 10px !important;
}

/* 2) Spotlight card for finance fee + payment */
.ffp-focus-card {
  width: min(100%, 520px);
  max-width: 520px;
  margin: 10px auto 14px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(120, 192, 28, 0.18);
  background:
    linear-gradient(180deg, #EBFBF0 0%, #ffffff 100%);
  box-shadow:
    0 16px 34px rgba(6, 27, 73, 0.08),
    0 8px 18px rgba(120, 192, 28, 0.10);
}

.ffp-focus-head {
  padding: 10px 14px 6px;
  color: #7a879a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ffp-focus-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 14px 16px;
  border-top: 1px solid #edf1f7;
}

.ffp-focus-row:first-of-type {
  border-top: none;
}

.ffp-focus-label {
  color: #7a879a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ffp-focus-value {
  color: var(--ffp-navy, #061b49);
  font-size: 24px;
  font-weight: 950;
  text-align: right;
  white-space: nowrap;
}

.ffp-focus-row.is-payment {
  background:
    linear-gradient(180deg, #EBFBF0 0%, #ffffff 100%);
}

.ffp-focus-row.is-payment .ffp-focus-label {
  color: var(--ffp-orange, #78C01C);
}

.ffp-focus-row.is-payment .ffp-focus-value {
  font-size: 32px;
  font-weight: 980;
}

.ffp-focus-row.is-fee .ffp-focus-value {
  color: #78C01C;
}

/* Optional smaller reduced line */
.ffp-focus-note {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 10px 16px 14px;
  border-top: 1px solid #edf1f7;
  background: #fcfdff;
}

.ffp-focus-note .ffp-summary-label {
  color: #7a879a !important;
}

.ffp-focus-note .ffp-summary-value {
  color: #d92d20 !important;
  font-size: 16px !important;
  font-weight: 850 !important;
}

/* =========================================================
   FeeFactorPro - Quote Summary Hierarchy
========================================================= */

/* Main quote summary: keep clean, not too loud */
.ffp-quote-summary {
  background: #ffffff !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

/* Standard rows */
.ffp-quote-summary .ffp-summary-row {
  background: #ffffff !important;
}

/* Reduced stays visible, but not dominant */
.ffp-summary-label.is-muted {
  color: #7a879a !important;
}

.ffp-summary-value.is-negative {
  color: #c7352c !important;
  font-size: 18px !important;
}

/* Divider line before payment */
.ffp-payment-divider {
  height: 1px;
  background: #dbe3ef;
  margin: 0;
}

/* Payment becomes the focus */
.ffp-payment-row {
  background:
    linear-gradient(180deg, #EBFBF0 0%, #ffffff 100%) !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

.ffp-payment-row .ffp-summary-label {
  color: var(--ffp-orange, #78C01C) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.ffp-payment-row .ffp-summary-value {
  color: var(--ffp-navy, #061b49) !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

/* Fee breakdown becomes secondary/supporting */
.ffp-fee-breakdown--subtle {
  margin-top: 0;
  border-top: 1px solid #e5ebf3;
  background: #f7f9fc !important;
}

.ffp-fee-breakdown--subtle .ffp-fee-breakdown-head {
  padding: 12px 16px 4px;
  color: #8a94a6 !important;
  background: transparent !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.ffp-fee-breakdown--subtle .ffp-breakdown-row {
  background: #f7f9fc !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.ffp-fee-breakdown--subtle .ffp-summary-label {
  color: #8a94a6 !important;
  font-size: 11px !important;
}

.ffp-fee-breakdown--subtle .ffp-summary-value {
  color: #46556f !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}
/* =========================================================
   FeeFactorPro - Login Header / Public Menu
========================================================= */

.ffp-login-header {
  width: 100%;
  background: rgba(255,255,255,0.94);
  border-bottom: 1px solid var(--ffp-border, #d7e0ee);
  box-shadow: 0 10px 28px rgba(6, 27, 73, 0.06);
  position: sticky;
  top: 0;
  z-index: 50;
}

.ffp-login-header-inner {
  width: min(100% - 28px, 980px);
  min-height: 74px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.ffp-login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
  color: var(--ffp-navy, #061b49);
}

.ffp-login-brand img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid var(--ffp-border, #d7e0ee);
  background: #ffffff;
  flex: 0 0 auto;
}

.ffp-login-brand strong {
  display: block;
  color: var(--ffp-navy, #061b49);
  font-size: 23px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.ffp-login-brand small {
  display: block;
  margin-top: 4px;
  color: #61708a;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
}


/* Adjust login page spacing so header doesn't feel cramped */
.ffp-login-card,
.login-card,
.ffp-card.login {
  margin-top: 26px !important;
}

/* Mobile */
@media (max-width: 760px) {
  .ffp-login-header-inner {
    min-height: 68px;
  }

  .ffp-login-brand img {
    width: 48px;
    height: 48px;
  }

  .ffp-login-brand strong {
    font-size: 20px;
  }

  .ffp-login-brand small {
    font-size: 11px;
  }

}

@media (max-width: 420px) {
  .ffp-login-header-inner {
    width: min(100% - 20px, 980px);
    gap: 10px;
  }

  .ffp-login-brand small {
    display: none;
  }

}

/* =========================================================
   FeeFactorPro - Splash Contact Form
========================================================= */

.ffp-contact-card {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 28px;
  align-items: start;
  border: 1px solid var(--ffp-border);
  border-radius: 30px;
  background:
    radial-gradient(circle at top left, rgba(120, 192, 28, 0.10), transparent 330px),
    #ffffff;
  box-shadow: var(--ffp-shadow);
  padding: 30px;
}

.ffp-contact-copy h2 {
  margin: 18px 0 12px;
  color: var(--ffp-navy);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.03;
  letter-spacing: -0.055em;
}

.ffp-contact-copy p {
  margin: 0;
  color: #4b5b73;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 650;
}

.ffp-contact-form {
  display: grid;
  gap: 14px;
  margin: 0;
}

.ffp-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.ffp-contact-form label {
  display: block;
  margin: 0 0 7px;
  color: var(--ffp-navy);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ffp-contact-form input,
.ffp-contact-form textarea {
  width: 100%;
  border: 1px solid var(--ffp-border);
  border-radius: 16px;
  background: #ffffff;
  color: var(--ffp-navy);
  padding: 14px 15px;
  font-size: 15px;
  font-weight: 750;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: inset 0 1px 0 rgba(6, 27, 73, 0.03);
}

.ffp-contact-form textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.45;
}

.ffp-contact-form input:focus,
.ffp-contact-form textarea:focus {
  outline: none;
  border-color: var(--ffp-orange);
  box-shadow: 0 0 0 4px rgba(120, 192, 28, 0.16);
}

.ffp-contact-submit {
  width: 100%;
  margin-top: 4px;
  border: 0;
  cursor: pointer;
}

.ffp-contact-flash {
  padding: 12px 14px;
  border-radius: 15px;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.4;
}

.ffp-contact-flash.is-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.ffp-contact-flash.is-error {
  background: #fff5f5;
  border: 1px solid #ffd7d7;
  color: #b42318;
}

.ffp-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 820px) {
  .ffp-contact-card {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .ffp-contact-grid {
    grid-template-columns: 1fr;
  }
}
.ffp-suggested-card {
  background: #EBFBF0;
  border: 1px solid #c9efb4;
  box-shadow: none;
  padding: 18px 20px;
}

.ffp-suggested-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: #78C01C;
}

.ffp-suggested-value {
  font-size: 40px;
  line-height: 1;
  font-weight: 900;
  color: #082b6f;
}

.ffp-suggested-sub {
  font-size: 14px;
  color: #65738a;
  font-weight: 700;
}
.ffp-quote-summary {
  background: #ffffff;
  border: 1px solid #cfd9e8;
  border-radius: 28px;
  box-shadow: 0 10px 30px rgba(7, 31, 73, 0.06);
  overflow: hidden;
}

.ffp-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #dfe6f1;
}


.ffp-summary-value {
  font-size: 24px;
  font-weight: 900;
  color: #082b6f;
}

.ffp-reduced-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  background: #f7f9fc;
  border-top: 1px solid #dfe6f1;
}

.ffp-reduced-label {
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  color: #7f8aa0;
  letter-spacing: 0.04em;
}

.ffp-reduced-value {
  font-size: 22px;
  font-weight: 900;
  color: #78C01C;
}
.ffp-copy-btn {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin-left: 10px;
  color: #082b6f;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.ffp-copy-btn:hover {
  opacity: 0.72;
  background: transparent;
}

.ffp-copy-btn:focus {
  outline: none;
  box-shadow: none;
}.ffp-lender-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  border-radius: 24px;
  border: 1px solid #c9efb4;
  background: #EBFBF0;
  box-sizing: border-box;
}
.ffp-suggested-card {
  background: #EBFBF0;
  border: 1px solid #c9efb4;
  box-shadow: none;
}

.ffp-suggested-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 900;
  color: #78C01C;
  text-transform: uppercase;
}

.ffp-suggested-value {
  font-size: 38px;
  line-height: 1;
  font-weight: 900;
  color: #8f949c;
}

.ffp-suggested-sub {
  font-size: 14px;
  font-weight: 700;
  color: #66748b;
}

.ffp-quote-summary {
  background: #ffffff;
  border: 1px solid #ccd7e7;
  border-radius: 28px;
  box-shadow: 0 10px 26px rgba(7, 31, 73, 0.05);
  overflow: hidden;
}

.ffp-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid #d9e2ef;
}

.ffp-summary-label {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: #1C2663;
  text-transform: uppercase;
}

.ffp-summary-value {
  font-size: 20px;
  font-weight: 900;
  color: #082b6f;
}
.ffp-quote-summary .ffp-summary-row .ffp-summary-label {
  font-size: 22px !important;
  font-weight: 950 !important;
  letter-spacing: 0.03em !important;
  color: #1C2663 !important;
  text-transform: uppercase !important;
}
/* Keep the main quote rows connected */
.ffp-quote-summary .ffp-summary-row {
  border-radius: 0 !important;
}

/* Only round the top of the first row */
.ffp-quote-summary .ffp-summary-row:first-child {
  border-top-left-radius: 22px !important;
  border-top-right-radius: 22px !important;
}

/* Do NOT round the RATE row if Reduced follows it */
.ffp-quote-summary .ffp-summary-row:last-child {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.ffp-reduced-row {
  margin-top: -1px !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  background: linear-gradient(180deg, #f6f8fb 0%, #ffffff 100%) !important;
  border-top: 1px solid #d9e2ef !important;
  border-bottom: 1px solid #e4eaf3 !important;
  box-shadow: inset 0 8px 12px rgba(6, 27, 73, 0.035) !important;
}

.ffp-reduced-label {
  color: #B6B6B6 !important;
}

.ffp-reduced-value {
  color: #c7352c !important;
}
/* Quote summary connects into Reduced/Payment block */
.ffp-quote-summary-attached {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
}

.ffp-quote-summary-attached .ffp-summary-row:last-child {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Reduced block attaches cleanly below quote summary */
.ffp-reduced-row {
  margin-top: -1px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top: 1px solid #d9e2ef !important;
  background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%) !important;
}

/* REDUCED ROW */
.ffp-reduced-row {
  background: #f3f5f8 !important;
  border-top: 1px solid #d9e2ef !important;
  border-bottom: 1px solid #d9e2ef !important;
}

.ffp-reduced-row .ffp-summary-label,
.ffp-reduced-row .ffp-reduced-label {
  color: #7a8699 !important;
}

.ffp-reduced-row .ffp-summary-value,
.ffp-reduced-row .ffp-reduced-value {
  color: #336600 !important;
}

/* PAYMENT */
.ffp-payment-row {
  padding: 20px 24px !important;
  background: #EBFBF0 !important;
}

.ffp-payment-label {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #78C01C !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.ffp-payment-value {
  font-size: 38px !important;
  font-weight: 950 !important;
  color: #082b6f !important;
  line-height: 1 !important;
}

/* ADD-ON DIVIDER */
.ffp-addon-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 50px 0 16px;
  color: #082b6f;
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ffp-addon-divider::before,
.ffp-addon-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #d7deea;
  max-width: 180px;
}
.ffp-summary-value-wrap{
	font-size: 45px;
}

/* =========================================================
   FeeFactorPro - Selected Add-Ons: no card/background
========================================================= */

.ffp-added-options {
  width: 100% !important;
  margin: 6px 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.ffp-added-options-head {
  padding: 8px 0 6px !important;
  border: 0 !important;
  background: transparent !important;
}

.ffp-added-options-head span {
  display: block !important;
  color: #78C01C !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.ffp-added-option-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 11px 0 !important;
  border-top: 1px solid #d7deea !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

.ffp-added-option-row:last-child {
  border-bottom: 1px solid #d7deea !important;
}

.ffp-added-option-name {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  /*color: #061b49 !important;*/
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

.ffp-added-option-name i {
  color: #78C01C !important;
  font-size: 11px !important;
}

.ffp-added-option-remove {
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(201, 61, 43, 0.22) !important;
  background: transparent !important;
  color: #336600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  flex: 0 0 auto !important;
}

.ffp-added-option-remove:hover {
  background: rgba(201, 61, 43, 0.07) !important;
}
/* Indent Added Options line items like a checklist */
.ffp-added-option-row {
  padding-left: 22px !important;
  padding-right: 0 !important;
}

.ffp-added-option-name {
  gap: 10px !important;
}

.ffp-added-option-name i {
  margin-left: 2px !important;
}


/* =========================================================
   FeeFactorPro - Reduced/Savings below Payment
========================================================= */

.ffp-reduced-note-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 24px 16px !important;
  background: transparent !important;
  border-top: 1px solid rgba(215, 222, 234, 0.75) !important;
}

.ffp-reduced-note-label {
  color: #7a8699 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.ffp-reduced-note-value {
  color: #336600 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.ffp-quote-summary .ffp-summary-row:not(.ffp-payment-row):not(.ffp-reduced-row) .ffp-summary-value {
  font-size: 20px !important;
  font-weight: 800 !important;
  /*color: #061b49 !important;*/
  line-height: 1.1 !important;
}
/* Enlarge selected lender logo */
.lender-card img.lender-logo,
.ffp-lender-card img.lender-logo,
button.lender-card img.lender-logo {
  width: auto !important;
  max-width: 68% !important;
  height: auto !important;
  max-height: 82px !important;
  object-fit: contain !important;
}/* Make PAYMENT label stronger */
.ffp-payment-row .ffp-summary-label,
.ffp-payment-label {
  font-size: 18px !important;
  font-weight: 950 !important;
  color: #78C01C !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}
.ffp-payment-row .ffp-summary-label,
.ffp-payment-label {
  font-size: 20px !important;
}
/* =========================================================
   FeeFactorPro - Added Options Checklist
========================================================= */

.ffp-added-options {
  width: 100% !important;
  margin: 6px 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ffp-added-options-head {
  padding: 8px 0 6px !important;
  border: 0 !important;
  background: transparent !important;
}

.ffp-added-options-head span {
  display: block !important;
  color: #78C01C !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.ffp-added-options-list {
  width: 100% !important;
  padding-left: 22px !important;
	  color: var(--ffp-orange, #78C01C);
}

.ffp-added-option-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 11px 0 !important;
  border-top: 1px solid #d7deea !important;
  background: transparent !important;
	  color: var(--ffp-orange, #78C01C);
}

.ffp-added-option-row:last-child {
  border-bottom: 1px solid #d7deea !important;
}

.ffp-added-option-name {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: var(--ffp-orange, #78C01C);
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  min-width: 0 !important;
}

.ffp-added-option-name i {
  color: #78C01C !important;
  font-size: 11px !important;
  flex: 0 0 auto !important;
}

.ffp-added-option-text {
  display: inline-block !important;
  min-width: 0 !important;
}

.ffp-added-option-remove {
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(201, 61, 43, 0.22) !important;
  background: transparent !important;
  color: #336600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  flex: 0 0 auto !important;
}

.ffp-added-option-remove:hover {
  background: rgba(201, 61, 43, 0.07) !important;
}

/* =========================================================
   Fee Breakdown - subdued secondary detail
========================================================= */

.ffp-fee-breakdown {
  background: #f7f9fc !important;
}

.ffp-fee-breakdown-head {
  color: #9aa3af !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 12px 24px 6px !important;
}

.ffp-fee-breakdown .ffp-breakdown-row {
  background: #f7f9fc !important;
}

.ffp-fee-breakdown .ffp-breakdown-row .ffp-summary-label,
.ffp-fee-breakdown .ffp-breakdown-row .ffp-summary-value {
  color: #8f949c !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: 0.02em !important;
}

.ffp-fee-breakdown .ffp-breakdown-row .ffp-summary-label,
.ffp-fee-breakdown .ffp-breakdown-row strong.ffp-summary-value {
  color: #969da8 !important;
  font-weight: 650 !important;
}

/* Hard override for Fee Breakdown labels and values */
.ffp-quote-summary .ffp-fee-breakdown .ffp-breakdown-row span.ffp-summary-label,
.ffp-quote-summary .ffp-fee-breakdown .ffp-breakdown-row strong.ffp-summary-value {
  color: #8f949c !important;
  font-weight: 700 !important;
}

.ffp-quote-summary .ffp-fee-breakdown .ffp-breakdown-row strong.ffp-summary-value {
  color: #8f949c !important;
  font-size: 22px !important;
  font-weight: 700 !important;
}

/* =========================================================
   FeeFactorPro - Available Add-On Options: flatter rows
========================================================= */

/* Main available add-on card/row container */
.ffp-addon-card,
.ffp-addon-option-card,
.ffp-addon-row-card,
.addon-card,
.addon-option-card {
  width: 100% !important;
  margin: 0 !important;
  padding: 13px 0 !important;
  border: 0 !important;
  border-top: 1px solid #d7deea !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Last available add-on row gets a bottom divider */
.ffp-addon-card:last-child,
.ffp-addon-option-card:last-child,
.ffp-addon-row-card:last-child,
.addon-card:last-child,
.addon-option-card:last-child {
  border-bottom: 1px solid #d7deea !important;
}

/* Force the inner layout into: Name | Monthly | Dropdown */
.ffp-addon-card form,
.ffp-addon-option-card form,
.ffp-addon-row,
.ffp-addon-compact-form,
.addon-card form,
.addon-option-card form {
  display: grid !important;
  grid-template-columns: minmax(110px, 1fr) auto 150px !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

/* Add-on name */
.ffp-addon-name,
.addon-name,
.addon-label {
  color: #061b49 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Monthly price */
.ffp-addon-monthly,
.addon-monthly,
.addon-price,
.addon-monthly-price {
  color: #7a879a !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.ffp-addon-monthly strong,
.addon-monthly strong,
.addon-price strong,
.addon-monthly-price strong {
  color: #78C01C !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

/* Dropdown */
.ffp-addon-card select,
.ffp-addon-option-card select,
.ffp-addon-row select,
.ffp-addon-compact-form select,
.addon-card select,
.addon-option-card select {
  width: 150px !important;
  min-width: 150px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 7px 34px 7px 12px !important;
  border-radius: 12px !important;
  border: 1px solid #d7e0ee !important;
  background-color: #ffffff !important;
  color: #061b49 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}
/* Available Add-On row: Name | Monthly | Dropdown */
.ffp-addon-row,
.ffp-addon-compact-form {
  display: grid !important;
  grid-template-columns: minmax(120px, 1fr) auto 150px !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Force name left */
.ffp-addon-name {
  grid-column: 1 !important;
}

/* Force monthly amount middle */
.ffp-addon-monthly {
  grid-column: 2 !important;
  justify-self: end !important;
  white-space: nowrap !important;
}

/* Force PICK dropdown right */
.ffp-addon-row select,
.ffp-addon-compact-form select {
  grid-column: 3 !important;
  justify-self: end !important;
  width: 150px !important;
  min-width: 150px !important;
}

/* Available Add-On row: Name | Monthly | Dropdown */
.ffp-addon-card form,
.ffp-addon-row,
.ffp-addon-compact-form {
  display: grid !important;
  grid-template-columns: minmax(130px, 1fr) auto 150px !important;
  grid-template-areas: "name monthly select" !important;
  align-items: center !important;
  column-gap: 12px !important;
  row-gap: 0 !important;
}

/* Name left */
.ffp-addon-name {
  grid-area: name !important;
  justify-self: start !important;
  align-self: center !important;
}

/* Monthly middle */
.ffp-addon-monthly {
  grid-area: monthly !important;
  justify-self: end !important;
  align-self: center !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
 padding-bottom: -15px;
}

/* Dropdown right */
.ffp-addon-card select,
.ffp-addon-row select,
.ffp-addon-compact-form select {
  grid-area: select !important;
  justify-self: end !important;
  align-self: center !important;
  width: 150px !important;
  min-width: 150px !important;
  margin: 0 !important;
	 padding-bottom: -15px;
}
/* =========================================================
   FeeFactorPro - Final Add-On Row Polish
========================================================= */

/* Remove the first/top divider line under Add-On Options */
.ffp-addon-card:first-of-type,
.ffp-addon-option-card:first-of-type,
.ffp-addon-row-card:first-of-type {
  border-top: 0 !important;
}

/* If your rows are direct siblings after the divider */
.ffp-addon-divider + .ffp-addon-card,
.ffp-addon-divider + .ffp-addon-option-card,
.ffp-addon-divider + .ffp-addon-row-card {
  border-top: 0 !important;
}

/* Tighten row height / bottom padding */
.ffp-addon-card,
.ffp-addon-option-card,
.ffp-addon-row-card {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Tighten the inner form layout */
.ffp-addon-card form,
.ffp-addon-row,
.ffp-addon-compact-form {
  min-height: 48px !important;
  row-gap: 0 !important;
}

/* Make the dropdown match the page background better */
.ffp-addon-card select,
.ffp-addon-option-card select,
.ffp-addon-row select,
.ffp-addon-compact-form select {
  background-color: #eef4fb !important;
  border-color: #cfd9e8 !important;
}

.lenders-item.ffp-lender-no-suggested {
  display: block !important;
  margin-bottom: 28px !important;
}

/* =========================================================
   FeeFactorPro - Mobile Real Estate Expansion
========================================================= */

@media (max-width: 760px) {
  .ffp-app,
  .bodyBox {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  .ffp-quote-summary,
  .ffp-old-quote-wrap,
  .ffp-price-card,
  .ffp-select-card,
  .ffp-suggested-quote,
  .ffp-selected-lender-card,
  .ffp-added-options,
  .ffp-addon-list,
  .ffp-addon-card,
  .ffp-clear-form {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 480px) {
  .ffp-app,
  .bodyBox {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}
@media (max-width: 760px) {
  [style*="min-width:350px"],
  [style*="max-width:370px"],
  [style*="min-width: 350px"],
  [style*="max-width: 370px"] {
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }
}
@media (max-width: 760px) {
  .ffp-summary-row {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .ffp-summary-label {
    font-size: 20px !important;
  }

  .ffp-summary-value {
    font-size: 24px !important;
  }

  .ffp-payment-value {
    font-size: 42px !important;
  }
}
@media (max-width: 760px) {
  .ffp-addon-card form,
  .ffp-addon-row,
  .ffp-addon-compact-form {
    grid-template-columns: minmax(95px, 1fr) auto 118px !important;
    column-gap: 8px !important;
  }

  .ffp-addon-card select,
  .ffp-addon-row select,
  .ffp-addon-compact-form select {
    width: 118px !important;
    min-width: 118px !important;
  }
}

/* =========================================================
   FeeFactorPro - Hard Mobile Admin Overflow Fix
   Use only for admin drawer on small screens
========================================================= */

@media (max-width: 760px) {

  /* Stop admin drawer from creating horizontal scroll */
  #adminDrawer,
  #adminDrawer *,
  .ad-drawer,
  .ad-drawer * {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #adminDrawer,
  .ad-drawer {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  #adminDrawer .ad-card,
  #adminDrawer .ad-grid,
  #adminDrawer #packagesAdmin,
  #adminDrawer .ffp-admin-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Kill old nested card spacing inside Packages/Add-ons */
  #packagesAdmin .ad-grid,
  #packagesAdmin .ad-row,
  #adminDrawer .ad-grid .ad-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Make package/add-on rows compact instead of wide nested cards */
  #packagesAdmin .ad-row,
  #adminDrawer .ad-row {
    display: grid !important;
    grid-template-columns: 1fr 40px 40px !important;
    grid-template-areas:
      "name save delete"
      "price save delete" !important;
    align-items: center !important;
    gap: 8px !important;

    padding: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    border-radius: 14px !important;
  }

  #adminDrawer .ad-row .ad-name {
    grid-area: name !important;
    width: 100% !important;
  }

  #adminDrawer .ad-row .ad-price-wrap {
    grid-area: price !important;
    width: 100% !important;
  }

  #adminDrawer .ad-row .ad-price {
    width: 100% !important;
  }

  #adminDrawer .ad-row .is-save {
    grid-area: save !important;
  }

  #adminDrawer .ad-row .is-delete {
    grid-area: delete !important;
  }

  #adminDrawer .ad-iconbtn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    padding: 0 !important;
  }

  /* Override inline 300px widths in Add New User form on mobile */
  #adminDrawer input[style],
  #adminDrawer select[style],
  #adminDrawer button[style] {
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* =========================================================
   FeeFactorPro - Existing Users Mobile Fix
   Layout: Email row, then Ceiling | Save | Delete
========================================================= */

@media (max-width: 760px) {

  #adminDrawer .team-grid {
    display: grid !important;
    gap: 12px !important;
    width: 100% !important;
  }

  #adminDrawer form.team-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px 42px !important;
    grid-template-areas:
      "email email email"
      "ceil save delete" !important;

    align-items: center !important;
    gap: 8px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    padding: 12px !important;
    box-sizing: border-box !important;
  }

  #adminDrawer form.team-row .team-email {
    grid-area: email !important;

    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  #adminDrawer form.team-row .team-status {
    flex: 0 0 auto !important;
  }

  #adminDrawer form.team-row .team-ceil {
    grid-area: ceil !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 42px !important;
    margin: 0 !important;

    text-align: center !important;
    text-align-last: center !important;
  }

  #adminDrawer form.team-row button.is-save {
    grid-area: save !important;
  }

  #adminDrawer form.team-row button.is-delete {
    grid-area: delete !important;
  }

  #adminDrawer form.team-row button.ad-iconbtn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

 /* Header */
    .ffp-public-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--ffp-border);
    }

    .ffp-public-header-inner {
      width: min(100% - 32px, 1120px);
      margin: 0 auto;
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .ffp-public-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      min-width: 0;
    }

    .ffp-public-brand img {
      width: 54px;
      height: 54px;
      object-fit: contain;
      border: 1px solid var(--ffp-border);
      border-radius: 14px;
      background: #ffffff;
    }

    .ffp-public-brand strong {
      display: block;
      font-size: 23px;
      line-height: 1;
      font-weight: 950;
      letter-spacing: -0.04em;
      color: var(--ffp-navy);
    }

    .ffp-public-brand span {
      display: block;
      margin-top: 4px;
      font-size: 12px;
      font-weight: 800;
      color: var(--ffp-muted);
    }

/* =========================================================
   FeeFactorPro - Add-On Row Vertical Balance
========================================================= */

.ffp-addon-list {
  display: block !important;
}

.ffp-addon-card {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  margin: 0 !important;
  min-height: 0 !important;
}

.ffp-addon-card form,
.ffp-addon-compact-form,
.ffp-addon-row {
  min-height: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;
  align-items: center !important;
}

/* Make sure the individual items are not adding vertical drift */
.ffp-addon-name,
.ffp-addon-monthly,
.ffp-addon-card select {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  align-self: center !important;
}

#quote-focus {
  scroll-margin-top: 95px;
}

@media (max-width: 760px) {
  #quote-focus {
    scroll-margin-top: 105px;
  }
}

/* =========================================================
   FeeFactorPro - Sticky Responsive Header for Beta App
========================================================= */

.ffp-sticky-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid #d7deea;
  box-shadow: 0 4px 18px rgba(6, 27, 73, 0.05);
}

.ffp-sticky-header-inner {
  width: 100%;
  max-width: 1180px;
  min-height: 76px;
  margin: 0 auto;
  padding: 0 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  box-sizing: border-box;
}

.ffp-sticky-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}

.ffp-sticky-brand img {
  display: block;
  width: auto;
  height: 44px;
  max-width: 230px;
  object-fit: contain;
}



.ffp-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid #d7deea;
  border-radius: 14px;
  background: #ffffff;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}

.ffp-menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 5px auto;
  border-radius: 999px;
  background: #061b49;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

/* Anchor parking / sticky header offset */
html {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: 105px;
}

#quote-focus {
  scroll-margin-top: 95px;
}

/* Mobile header */
@media (max-width: 760px) {
  .ffp-sticky-header-inner {
    min-height: 68px;
    padding: 0 12px;
  }

  .ffp-sticky-brand img {
    height: 38px;
    max-width: 205px;
  }

  .ffp-menu-toggle {
    display: inline-block;
  }

  

  .ffp-menu-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .ffp-menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
  }

  .ffp-menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  [id] {
    scroll-margin-top: 92px;
  }

  #quote-focus {
    scroll-margin-top: 86px;
  }
}

/* =========================================================
   FeeFactorPro - Polished Mobile Header Menu
========================================================= */

@media (max-width: 760px) {

  

  
}

/* =========================================================
   FeeFactorPro - Footer / Account Panel
========================================================= */

.ffp-footer {
  width: 100%;
  margin: 0;
  padding: 0 12px 34px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

.ffp-footer-account {
  width: 100%;
  max-width: 360px;
  margin: 20px auto 0;
  padding: 18px 18px 20px;
  box-sizing: border-box;

  text-align: center;
  border: 1px solid #d7deea;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 34px rgba(6, 27, 73, 0.06);
}

.ffp-signed-in-as {
  margin: 0 0 14px !important;
  color: #7a879a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.ffp-signed-in-as span {
  display: block;
  margin-bottom: 2px;
}

.ffp-signed-in-as strong {
  display: block;
  color: #061b49;
  font-size: 13px;
  font-weight: 900;
}

.ffp-footer-logout {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 48px;
  margin: 0 0 16px;
  padding: 0 18px;
  box-sizing: border-box;

  border-radius: 14px;
  background: #061b49;
  color: #ffffff;
  text-decoration: none;

  font-size: 14px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;

  box-shadow: 0 10px 22px rgba(6, 27, 73, 0.16);
}

.ffp-footer-logout:hover {
  background: #082b6f;
  color: #ffffff;
}

.ffp-footer-legal {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid #e3e9f2;

  color: #7a879a;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .05em;
}

.ffp-footer-legal img {
  display: block;
  width: 78px;
  height: auto;
  margin: 11px auto 0;
  opacity: .62;
}

@media (max-width: 760px) {
  .ffp-footer {
    padding-left: 12px;
    padding-right: 12px;
  }

  .ffp-footer-account {
    max-width: none;
    margin-top: 18px;
  }
}

/* =========================================================
   FeeFactorPro - Force Mobile Menu Open State
========================================================= */

@media (max-width: 760px) {
  .ffp-sticky-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    overflow: visible !important;
  }

  .ffp-sticky-header-inner {
    position: relative !important;
    overflow: visible !important;
  }
}

/* =========================================================
   FeeFactorPro - FINAL Mobile Menu Open Override
   Must stay at the VERY bottom of pick.css
========================================================= */

@media screen and (max-width: 760px) {
  header.ffp-sticky-header nav#ffpMainNav.ffp-sticky-nav.is-open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 12px !important;
    right: 12px !important;
    z-index: 999999 !important;

    flex-direction: column !important;
    align-items: stretch !important;

    width: auto !important;
    height: auto !important;
    max-height: none !important;

    padding: 8px 0 !important;
    margin: 0 !important;

    background: #ffffff !important;
    border: 1px solid #d7deea !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 38px rgba(6, 27, 73, 0.18) !important;
    overflow: hidden !important;
  }

  header.ffp-sticky-header,
  header.ffp-sticky-header .ffp-sticky-header-inner {
    overflow: visible !important;
  }

  header.ffp-sticky-header nav#ffpMainNav.ffp-sticky-nav.is-open a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    min-height: 48px !important;
    padding: 0 18px !important;

    color: #061b49 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e4eaf3 !important;

    text-align: left !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  header.ffp-sticky-header nav#ffpMainNav.ffp-sticky-nav.is-open a:last-child {
    border-bottom: 0 !important;
  }

  header.ffp-sticky-header nav#ffpMainNav.ffp-sticky-nav.is-open .ffp-nav-cta {
    justify-content: center !important;
    margin: 8px 12px 4px !important;
    border-radius: 999px !important;
    background: #78c01c !important;
    color: #ffffff !important;
    border-bottom: 0 !important;
  }
}

/* =========================================================
   FeeFactorPro - Login Screen Polish
========================================================= */

.loginBox,
.login-box,
.ffp-login-card {
  width: 100% !important;
  max-width: 360px !important;
  margin: 50px auto 24px !important;
  padding: 26px 20px 28px !important;
  box-sizing: border-box !important;

  border: 1px solid #d7deea !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 18px 42px rgba(6, 27, 73, 0.08) !important;
}

.loginBox h1,
.loginBox h2,
.login-box h1,
.login-box h2,
.ffp-login-card h1,
.ffp-login-card h2 {
  margin: 0 0 22px !important;
  color: #061b49 !important;
  font-size: 25px !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.loginBox h1::after,
.loginBox h2::after,
.login-box h1::after,
.login-box h2::after,
.ffp-login-card h1::after,
.ffp-login-card h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: #78c01c;
}

.loginBox p,
.login-box p,
.ffp-login-card p {
  margin: 0 0 24px !important;
  color: #061b49 !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
}

.loginBox input,
.login-box input,
.ffp-login-card input {
  width: 100% !important;
  min-height: 56px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;

  border: 1px solid #d7deea !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: #061b49 !important;

  font-size: 15px !important;
  font-weight: 850 !important;

  box-shadow: 0 8px 18px rgba(6, 27, 73, 0.08) !important;
}

.loginBox input::placeholder,
.login-box input::placeholder,
.ffp-login-card input::placeholder {
  color: #061b49 !important;
  opacity: .72 !important;
}

.loginBox button,
.login-box button,
.ffp-login-card button,
.loginBox input[type="submit"],
.login-box input[type="submit"],
.ffp-login-card input[type="submit"] {
  width: 100% !important;
  min-height: 60px !important;
  margin-top: 18px !important;

  border: 0 !important;
  border-radius: 14px !important;
  background: #78c01c !important;
  color: #ffffff !important;

  font-size: 16px !important;
  font-weight: 950 !important;

  box-shadow: 0 14px 28px rgba(120, 192, 28, 0.2) !important;
}

.loginBox a,
.login-box a,
.ffp-login-card a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 40px !important;
  margin-top: 10px !important;
  padding: 0 16px !important;

  border-radius: 999px !important;
  color: #061b49 !important;
  text-decoration: none !important;

  font-size: 14px !important;
  font-weight: 900 !important;
}

.loginBox a:hover,
.login-box a:hover,
.ffp-login-card a:hover {
  background: #eef4fb !important;
  color: #78c01c !important;
}

@media (max-width: 760px) {
  .loginBox,
  .login-box,
  .ffp-login-card {
    max-width: none !important;
    margin: 48px 12px 22px !important;
  }
}

/* =========================================================
   FeeFactorPro - Public/Login Footer
========================================================= */

.ffp-public-footer {
  width: 100%;
  padding: 0 12px 34px;
  box-sizing: border-box;
}

.ffp-public-footer-inner {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 18px 18px 20px;
  box-sizing: border-box;

  text-align: center;
  border-top: 1px solid #d7deea;
}

.ffp-public-footer-inner p {
  margin: 0 auto 12px;
  color: #7a879a;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .05em;
}

.ffp-public-footer-inner img {
  display: block;
  width: 78px;
  height: auto;
  margin: 0 auto;
  opacity: .62;
}

/* =========================================================
   FeeFactorPro - Login Centering Fix
========================================================= */

body:not(.is-logged-in) .bodyBox,
body:not(.is-logged-in) .ffp-app,
.ffp-login-page,
.ffp-login-wrap {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  box-sizing: border-box !important;
}

.loginBox,
.login-box,
.ffp-login-card {
  display: block !important;
  width: 100% !important;
  max-width: 360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
}

.ffp-public-footer,
.ffp-public-footer-inner {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* =========================================================
   FeeFactorPro - Lender Selection Cards
========================================================= */

.lenders-list {
  width: 100% !important;
  max-width: 720px !important;
  margin: 34px auto 40px !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;

  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)) !important;
  gap: 18px !important;

  list-style: none !important;
}

.lenders-item {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.lenders-item form {
  width: 100% !important;
  margin: 0 !important;
}

.lender-card {
  width: 100% !important;
  min-height: 118px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 18px !important;
  box-sizing: border-box !important;

  border: 1px solid #d7deea !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.86) !important;

  box-shadow: 0 14px 34px rgba(6, 27, 73, 0.06) !important;
  cursor: pointer !important;

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}

.lender-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(120, 192, 28, .45) !important;
  box-shadow: 0 18px 38px rgba(6, 27, 73, 0.11) !important;
}

.lender-logo {
  display: block !important;
  max-width: 120px !important;
  max-height: 54px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

@media (max-width: 760px) {
  .lenders-list {
    max-width: none !important;
    margin: 24px auto 34px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .lender-card {
    min-height: 102px !important;
    border-radius: 16px !important;
    padding: 14px !important;
  }

  .lender-logo {
    max-width: 112px !important;
    max-height: 48px !important;
  }
}

/* =========================================================
   FeeFactorPro - Logged-In App Width Control
========================================================= */

.ffp-app {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  box-sizing: border-box !important;
}

@media (max-width: 760px) {
  .ffp-app {
    max-width: none !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* =========================================================
   FeeFactorPro - Selected Lender Card
========================================================= */

.ffp-selected-lender-card,
.selected-lender-card,
.lender-logo-card,
.lender-selected,
.maxline > .lender-card {
  width: 100% !important;
  max-width: 520px !important;
  min-width: 0 !important;
  min-height: 92px !important;

  margin: 18px auto 12px !important;
  padding: 18px !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid #d7deea !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.86) !important;
  box-shadow: 0 14px 34px rgba(6, 27, 73, 0.06) !important;
}

.ffp-selected-lender-card img,
.selected-lender-card img,
.lender-logo-card img,
.lender-selected img,
.maxline > .lender-card img {
  display: block !important;
  max-width: 180px !important;
  max-height: 60px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}
/* =========================================================
   FeeFactorPro - Reduced From Suggested Quote
========================================================= */

.ffp-reduced-note-row {
  width: 100% !important;
  max-width: 520px !important;
  margin: 8px auto 34px !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;

  border-top: 1px solid #d7deea !important;
  border-bottom: 1px solid #d7deea !important;
}

.ffp-reduced-note-label {
  color: #7a879a !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.ffp-reduced-note-value {
  color: #336600 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  .ffp-reduced-note-row {
    max-width: none !important;
    margin-top: 8px !important;
    margin-bottom: 28px !important;
  }

  .ffp-reduced-note-label {
    font-size: 10px !important;
    white-space: normal !important;
  }
}

/* =========================================================
   FeeFactorPro - Lender Picker Grid
========================================================= */

.ffp-lender-picker {
  width: 100% !important;
  max-width: 560px !important;
  margin: 24px auto 36px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.lenders-list {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;

  list-style: none !important;
}

.lenders-item,
.lenders-item form {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.lender-card {
  width: 100% !important;
  min-height: 104px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 16px !important;
  box-sizing: border-box !important;

  border: 1px solid #d7deea !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.86) !important;
  box-shadow: 0 14px 34px rgba(6, 27, 73, 0.06) !important;
}

.lender-logo {
  display: block !important;
  max-width: 120px !important;
  max-height: 52px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.ffp-app {
  max-width: 760px;
  margin: 0 auto;
}

/* =========================================================
   FeeFactorPro - Constrain Single Selected Lender Card
   Works with current <li><form><button> markup
========================================================= */

/* Only targets the one-card lender display, not the full lender grid */
.ffp-app .lenders-list > .lenders-item:only-child,
.ffp-app ul > li.lenders-item:only-child {
  width: 100% !important;
  max-width: 560px !important;
  margin: 18px auto 18px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  list-style: none !important;
}

/* Keep the form from stretching beyond the centered card */
.ffp-app .lenders-list > .lenders-item:only-child form,
.ffp-app ul > li.lenders-item:only-child form {
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Override the inline button styling and prevent full-screen width */
.ffp-app .lenders-list > .lenders-item:only-child .lender-card,
.ffp-app ul > li.lenders-item:only-child .lender-card {
  width: 100% !important;
  max-width: 560px !important;
  min-width: 0 !important;
  min-height: 104px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 auto !important;
  padding: 18px !important;
  box-sizing: border-box !important;

  border: 1px solid #d7deea !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 14px 34px rgba(6, 27, 73, 0.06) !important;
}

/* Logo inside the selected lender card */
.ffp-app .lenders-list > .lenders-item:only-child .lender-logo,
.ffp-app ul > li.lenders-item:only-child .lender-logo {
  display: block !important;
  max-width: 190px !important;
  max-height: 64px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 0.72;
}

@media (max-width: 760px) {
  .ffp-app .lenders-list > .lenders-item:only-child,
  .ffp-app ul > li.lenders-item:only-child {
    max-width: none !important;
    margin: 14px auto 16px !important;
    padding: 0 10px !important;
  }

  .ffp-app .lenders-list > .lenders-item:only-child .lender-card,
  .ffp-app ul > li.lenders-item:only-child .lender-card {
    min-height: 92px !important;
    border-radius: 16px !important;
  }

  .ffp-app .lenders-list > .lenders-item:only-child .lender-logo,
  .ffp-app ul > li.lenders-item:only-child .lender-logo {
    max-width: 160px !important;
    max-height: 54px !important;
  }
}
/* =========================================================
   FeeFactorPro - Active Next Step Refinement
   Bottom of /logIn/css/pick.css
========================================================= */

.ffp-next-step {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;

  border-color: rgba(120, 192, 28, 0.92) !important;
  border-radius: 22px !important;

  background:
    radial-gradient(circle at top right, rgba(120, 192, 28, 0.12), transparent 48%),
    #ffffff !important;

  box-shadow:
    0 0 0 4px rgba(120, 192, 28, 0.13),
    0 0 30px rgba(120, 192, 28, 0.34),
    0 18px 44px rgba(6, 27, 73, 0.12) !important;
}

/* Rounded highlight around the price input itself */
.ffp-next-step--price .ffp-money-box {
  position: relative !important;
  border-radius: 22px !important;
  overflow: visible !important;

  box-shadow:
    0 0 0 4px rgba(120, 192, 28, 0.13),
    0 0 30px rgba(120, 192, 28, 0.34) !important;
}

/* The actual input keeps its rounded shape */
.ffp-next-step--price .ffp-money-input,
.ffp-next-step--price #myNumber {
  border-radius: 22px !important;
  border-color: rgba(120, 192, 28, 0.92) !important;
}

/* Keep select cards above the quote summary so the badge is not tucked under it */
.ffp-next-step--term,
.ffp-next-step--rate {
  z-index: 20 !important;
  margin-top: 18px !important;
}

/* Use the data-step-label from the PHP */
.ffp-next-step::before {
  content: attr(data-step-label) !important;

  position: absolute !important;
  top: -16px !important;
  right: 28px !important;
  z-index: 50 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 30px !important;
  padding: 0 18px !important;

  border-radius: 999px !important;
  background: #78C01C !important;
  color: #ffffff !important;

  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;

  box-shadow:
    0 8px 18px rgba(120, 192, 28, 0.28),
    0 0 0 4px rgba(255, 255, 255, 0.82) !important;
}

/* For the price step, attach the badge to the input area, not the entire card */
.ffp-next-step--price::before {
  display: none !important;
}

.ffp-next-step--price .ffp-money-box::after {
  content: attr(data-step-label);

  position: absolute !important;
  top: -18px !important;
  right: 34px !important;
  z-index: 50 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 30px !important;
  padding: 0 18px !important;

  border-radius: 999px !important;
  background: #78C01C !important;
  color: #ffffff !important;

  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;

  box-shadow:
    0 8px 18px rgba(120, 192, 28, 0.28),
    0 0 0 4px rgba(255, 255, 255, 0.82) !important;
}

/* Since the price badge lives on .ffp-money-box, pass it the parent label */
.ffp-next-step--price .ffp-money-box {
  --step-label: "STEP 1";
}

.ffp-next-step--price .ffp-money-box::after {
  content: var(--step-label) !important;
}

.ffp-next-step label,
.ffp-next-step .ffp-field-label {
  color: #336600 !important;
}

.ffp-next-step input,
.ffp-next-step select {
  border-color: rgba(120, 192, 28, 0.92) !important;
}

.ffp-next-step .ffp-money-symbol {
  color: #336600 !important;
}

@media (max-width: 760px) {
  .ffp-next-step::before {
    top: -14px !important;
    right: 18px !important;
    min-height: 26px !important;
    padding: 0 13px !important;
    font-size: 10px !important;
  }

  .ffp-next-step--price .ffp-money-box::after {
    top: -14px !important;
    right: 18px !important;
    min-height: 26px !important;
    padding: 0 13px !important;
    font-size: 10px !important;
  }
}
/* =========================================================
   FeeFactorPro - Next Step Glow: Field Only
   Put at VERY bottom of /logIn/css/pick.css
========================================================= */

/* Remove glow from the full section/card */
.ffp-next-step {
  border-color: var(--ffp-border, #d7e0ee) !important;
  background: #ffffff !important;
  box-shadow: 0 18px 45px rgba(6, 27, 73, 0.10) !important;
  animation: none !important;
}

/* Keep labels green when active */
.ffp-next-step label,
.ffp-next-step .ffp-field-label {
  color: #336600 !important;
}

/* Price step: glow only around the money input box */
.ffp-next-step--price .ffp-money-box {
  border-radius: 22px !important;
  box-shadow:
    0 0 0 5px rgba(120, 192, 28, 0.14),
    0 0 34px rgba(120, 192, 28, 0.38) !important;
}

/* Price input itself */
.ffp-next-step--price .ffp-money-input,
.ffp-next-step--price #myNumber {
  border-color: rgba(120, 192, 28, 0.95) !important;
  border-radius: 22px !important;
}

/* Term/rate: glow only around the select dropdown */
.ffp-next-step--term select,
.ffp-next-step--rate select,
.ffp-next-step--term #termSelect,
.ffp-next-step--rate #rateSelect {
  border-color: rgba(120, 192, 28, 0.95) !important;
  border-radius: 18px !important;

  box-shadow:
    0 0 0 5px rgba(120, 192, 28, 0.14),
    0 0 34px rgba(120, 192, 28, 0.38) !important;
}

/* Badge positioning for price input */
.ffp-next-step--price .ffp-money-box::after {
  top: -18px !important;
  right: 34px !important;
}

/* Badge positioning for term/rate card */
.ffp-next-step--term::before,
.ffp-next-step--rate::before {
  top: -16px !important;
  right: 28px !important;
}

/* Optional: hide the big section background haze */
.ffp-next-step::after {
  display: none !important;
}
/* =========================================================
   FeeFactorPro - Clear Quote Button Green Theme
   Keep at bottom of /logIn/css/pick.css
========================================================= */

.ffp-clear-btn {
  border: 1px solid rgba(120, 192, 28, 0.34) !important;
  background: #EBFBF0 !important;
  color: #336600 !important;

  box-shadow:
    0 10px 24px rgba(6, 27, 73, 0.06),
    0 8px 20px rgba(120, 192, 28, 0.10) !important;
}

.ffp-clear-btn:hover,
.ffp-clear-btn:focus-visible {
  border-color: rgba(120, 192, 28, 0.58) !important;
  background: #dff8d4 !important;
  color: #336600 !important;
  outline: none !important;
}
/* =========================================================
   FeeFactorPro - Make Add-On PICK Control Feel More SaaS
   Keeps original select behavior intact
========================================================= */

.ffp-addon-card select,
.ffp-addon-compact-form select,
.ffp-addon-select-compact {
  width: 118px !important;
  min-width: 118px !important;
  height: 38px !important;
  min-height: 38px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(120, 192, 28, 0.38) !important;
  background-color: #EBFBF0 !important;
  color: #336600 !important;

  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;

  padding: 7px 34px 7px 14px !important;

  box-shadow: 0 8px 18px rgba(120, 192, 28, 0.08) !important;
}

.ffp-addon-card select:hover,
.ffp-addon-compact-form select:hover,
.ffp-addon-select-compact:hover {
  border-color: rgba(120, 192, 28, 0.72) !important;
  background-color: #dff8d4 !important;
}

.ffp-addon-card select:focus,
.ffp-addon-compact-form select:focus,
.ffp-addon-select-compact:focus {
  outline: none !important;
  border-color: #78C01C !important;
  box-shadow:
    0 0 0 4px rgba(120, 192, 28, 0.14),
    0 8px 18px rgba(120, 192, 28, 0.10) !important;
}
/* =========================================================
   FeeFactorPro - Suggested Quote Green Border
========================================================= */

.ffp-suggested-quote {
  border-color: rgba(120, 192, 28, 0.45) !important;
}
/* =========================================================
   FeeFactorPro - FORCE Compact Savings Row
   Must stay at very bottom of /logIn/css/pick.css
========================================================= */

.ffp-app .ffp-quote-summary .ffp-summary-row.ffp-reduced-summary-row {
  min-height: 34px !important;
  height: auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;

  padding: 7px 18px 7px 22px !important;

  background: #eeeeee !important;
  border-top: 1px solid #d7deea !important;
  border-left: 5px solid #78C01C !important;
}

/* Kill inherited giant quote-summary label styling */
.ffp-app .ffp-quote-summary .ffp-summary-row.ffp-reduced-summary-row > span.ffp-summary-label.ffp-reduced-summary-label {
  flex: 1 1 auto !important;

  color: #7a879a !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Kill inherited giant quote-summary value styling */
.ffp-app .ffp-quote-summary .ffp-summary-row.ffp-reduced-summary-row > strong.ffp-summary-value.ffp-reduced-summary-value {
  flex: 0 0 auto !important;

  color: #336600 !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;

  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

/* Mobile tightening */
@media (max-width: 760px) {
  .ffp-app .ffp-quote-summary .ffp-summary-row.ffp-reduced-summary-row {
    min-height: 32px !important;
    padding: 6px 14px 6px 16px !important;
    gap: 8px !important;
  }

  .ffp-app .ffp-quote-summary .ffp-summary-row.ffp-reduced-summary-row > span.ffp-summary-label.ffp-reduced-summary-label {
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
  }

  .ffp-app .ffp-quote-summary .ffp-summary-row.ffp-reduced-summary-row > strong.ffp-summary-value.ffp-reduced-summary-value {
    font-size: 12px !important;
  }
}
/* =========================================================
   FeeFactorPro - Guided Tour UI
========================================================= */

.ffp-tour-active {
  overflow-x: hidden !important;
}

.ffp-tour-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999990 !important;
  background: rgba(6, 27, 73, 0.58) !important;
}

.ffp-tour-highlight {
  position: fixed !important;
  z-index: 999991 !important;
  border: 3px solid #78C01C !important;
  border-radius: 18px !important;
  box-shadow:
    0 0 0 9999px rgba(6, 27, 73, 0.58),
    0 0 28px rgba(120, 192, 28, 0.65) !important;
  pointer-events: none !important;
}

.ffp-tour-box {
  position: fixed !important;
  z-index: 999992 !important;

  width: min(360px, calc(100vw - 32px)) !important;
  padding: 18px !important;

  border-radius: 18px !important;
  border: 1px solid rgba(120, 192, 28, 0.38) !important;
  background: #ffffff !important;

  box-shadow: 0 22px 60px rgba(6, 27, 73, 0.26) !important;
  color: #061b49 !important;
}

.ffp-tour-step {
  color: #78C01C !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

.ffp-tour-box h3 {
  margin: 0 0 8px !important;
  color: #061b49 !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
}

.ffp-tour-box p {
  margin: 0 0 16px !important;
  color: #526173 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

.ffp-tour-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.ffp-tour-actions button {
  min-height: 38px !important;
  padding: 0 14px !important;

  border-radius: 999px !important;
  border: 1px solid #d7deea !important;
  background: #ffffff !important;
  color: #061b49 !important;

  font-size: 13px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

.ffp-tour-actions .ffp-tour-next {
  border-color: #78C01C !important;
  background: #78C01C !important;
  color: #ffffff !important;
}

.ffp-tour-actions .ffp-tour-skip {
  color: #7a879a !important;
}