/**
 * Easifix Applicant Portal — component library
 * Source: Figma Components page — all variant sets
 */

/* ══════════════════════════════════════
   BASE
   ══════════════════════════════════════ */
.ef-portal {
  font-family: var(--ef-font-body);
  font-size: var(--ef-text-body-lg);
  line-height: var(--ef-text-body-lg-lh);
  color: var(--ef-color-text-body);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
/*
  Figma Payments / Dashboard Viewport:
  linear #FFFFFF → #F1F4F3 (Grey/50), top→bottom across the 390×812 frame.
  Size to 100dvh (not attachment:fixed — broken on iOS) so the bottom of the
  screen reads grey like Figma; scroll past uses solid end color.
*/
html:has(body.ef-portal),
body.ef-portal {
  background-color: #f1f4f3;
  background-image: linear-gradient(180deg, #ffffff 0%, #f1f4f3 100%);
  background-repeat: no-repeat;
  background-size: 100% 100dvh;
  background-attachment: scroll;
}

.ef-portal *, .ef-portal *::before, .ef-portal *::after { box-sizing: border-box; }

/* ══════════════════════════════════════
   TEXT FIELD (10 Figma variants)
   States driven by JS classes: is-active, is-filled, is-autofilled
   Modifiers: --with-leading-icon, --with-trailing-icon, __control--date
   ══════════════════════════════════════ */
.ef-text-field { width: 100%; }

.ef-text-field__control {
  position: relative;
  height: var(--ef-input-height);
  background: var(--ef-color-bg-input);
  border: none;
  border-radius: var(--ef-radius-md) var(--ef-radius-md) 0 0;
  border-bottom: 1px solid var(--ef-color-border-input);
  overflow: hidden;
  transition: background var(--ef-transition-fast), border-color var(--ef-transition-fast);
}

.ef-text-field__control:hover { background: var(--ef-color-bg-input-hover); }

.ef-text-field__label {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  z-index: 2;
  margin: 0;
  font-family: var(--ef-font-body);
  font-size: var(--ef-text-input-label);
  line-height: var(--ef-text-input-label-lh);
  color: var(--ef-color-text-secondary);
  pointer-events: none;
  transform: translateY(-50%);
  transition: top var(--ef-transition-fast), transform var(--ef-transition-fast), font-size var(--ef-transition-fast), line-height var(--ef-transition-fast), color var(--ef-transition-fast);
}

.ef-text-field--with-leading-icon .ef-text-field__label { left: 48px; }

.ef-text-field__control input,
.ef-text-field__control select {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 8px;
  width: auto;
  height: var(--ef-textfield-value-height);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--ef-font-body);
  font-size: var(--ef-text-input-label);
  line-height: var(--ef-textfield-value-height);
  color: var(--ef-color-text-body);
  appearance: none;
  -webkit-appearance: none;
  z-index: 1;
}

.ef-text-field--with-leading-icon .ef-text-field__control input { left: 48px; }
.ef-text-field--with-trailing-icon .ef-text-field__control input { right: 48px; }

.ef-text-field__control input::placeholder { color: transparent; }

/* ── Resting empty: label centred, invisible full-area input ── */
.ef-text-field__control:not(.is-active):not(.is-filled):not(.is-autofilled) input {
  top: 0;
  bottom: 0;
  height: 100%;
  color: transparent;
  caret-color: transparent;
}

/* ── Active / filled: label top, value below with bottom inset ── */
.ef-text-field__control.is-active .ef-text-field__label,
.ef-text-field__control.is-filled .ef-text-field__label,
.ef-text-field__control.is-autofilled .ef-text-field__label {
  top: var(--ef-textfield-label-top);
  transform: none;
  font-size: var(--ef-text-input-label-float);
  line-height: var(--ef-text-input-label-float-lh);
}

.ef-text-field__control.is-active input,
.ef-text-field__control.is-filled input,
.ef-text-field__control.is-autofilled input {
  top: var(--ef-textfield-value-top);
  bottom: auto;
  height: var(--ef-textfield-value-height);
  line-height: var(--ef-textfield-value-height);
  color: var(--ef-color-text-body);
  caret-color: var(--ef-color-text-body);
}

.ef-text-field__control.is-active { border-bottom-width: 2px; border-bottom-color: var(--ef-color-primary); }
.ef-text-field__control.is-active .ef-text-field__label { color: var(--ef-color-primary-hover); }

.ef-text-field__control.is-filled:not(.is-active) .ef-text-field__label,
.ef-text-field__control.is-autofilled:not(.is-active) .ef-text-field__label {
  color: var(--ef-color-text-secondary);
}

/* ── Variant: date (custom calendar icon; native picker hidden) ── */
.ef-text-field--date .ef-text-field__control input { right: 48px; }

.ef-text-field--date.ef-text-field--error .ef-text-field__control input,
.ef-text-field--date.ef-text-field--success .ef-text-field__control input,
.ef-text-field--date.ef-text-field--readonly .ef-text-field__control input {
  right: 80px;
}

.ef-text-field__control--date:not(.is-filled):not(.is-active) input[type="date"] {
  color: transparent;
}

.ef-text-field__control--date:not(.is-filled):not(.is-active) input[type="date"]::-webkit-datetime-edit,
.ef-text-field__control--date:not(.is-filled):not(.is-active) input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  opacity: 0;
}

.ef-text-field__control--date input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

.ef-text-field__control--date input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
  appearance: none;
}

.ef-text-field__ff-date-mask { display: none; }

/* Firefox 109+ provides no CSS to hide the native date button, so instead of
   fighting it we hide OUR custom calendar icon and let Firefox's own button
   render in its default position. */
html.ef-is-firefox .ef-text-field--date .ef-text-field__icon--calendar {
  display: none;
}

html.ef-is-firefox .ef-text-field__control--date input[type="date"] {
  right: 16px;
  padding-right: 0;
  -moz-appearance: auto;
  appearance: auto;
}

html.ef-is-firefox .ef-text-field--date.ef-text-field--error .ef-text-field__control--date input[type="date"],
html.ef-is-firefox .ef-text-field--date.ef-text-field--success .ef-text-field__control--date input[type="date"],
html.ef-is-firefox .ef-text-field--date.ef-text-field--readonly .ef-text-field__control--date input[type="date"] {
  right: 48px;
}

.ef-text-field--date.ef-text-field--error .ef-text-field__icon--calendar,
.ef-text-field--date.ef-text-field--success .ef-text-field__icon--calendar,
.ef-text-field--date.ef-text-field--readonly .ef-text-field__icon--calendar {
  right: 48px;
}

/* ── Autofill ── */
.ef-text-field__control input:-webkit-autofill,
.ef-text-field__control input:-webkit-autofill:hover,
.ef-text-field__control input:-webkit-autofill:focus,
.ef-text-field__control input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--ef-color-bg-input) inset !important;
  box-shadow: 0 0 0 1000px var(--ef-color-bg-input) inset !important;
  -webkit-text-fill-color: var(--ef-color-text-body) !important;
  caret-color: var(--ef-color-text-body);
  transition: background-color 9999s ease-out, color 9999s ease-out;
}

.ef-text-field__control:hover input:-webkit-autofill,
.ef-text-field__control:hover input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px var(--ef-color-bg-input-hover) inset !important;
  box-shadow: 0 0 0 1000px var(--ef-color-bg-input-hover) inset !important;
}

/* ── Icons ── */
.ef-text-field__icon {
  position: absolute;
  z-index: 3;
  font-size: 24px;
  line-height: 1;
  color: var(--ef-gray-700);
  pointer-events: none;
}

.ef-text-field__icon--leading { left: 16px; top: 50%; transform: translateY(-50%); }
.ef-text-field__icon--trailing { right: 16px; top: 50%; transform: translateY(-50%); }

.ef-text-field__icon.ef-text-field__icon--calendar {
  pointer-events: auto;
  cursor: pointer;
  z-index: 6;
}

.ef-text-field__icon--error { color: var(--ef-color-error); }
.ef-text-field__icon--success { color: var(--ef-color-success); }
.ef-text-field__icon--readonly { color: var(--ef-gray-600); }

/* ── Variant: error / success / disabled / readonly ── */
.ef-text-field--error .ef-text-field__control { border-bottom-color: var(--ef-color-error); border-bottom-width: 2px; }
.ef-text-field--error .ef-text-field__label,
.ef-text-field--error .ef-text-field__control.is-active .ef-text-field__label { color: var(--ef-color-error); }

.ef-text-field--success .ef-text-field__control { border-bottom-color: var(--ef-color-success); border-bottom-width: 2px; }
.ef-text-field--success .ef-text-field__label,
.ef-text-field--success .ef-text-field__control.is-active .ef-text-field__label { color: var(--ef-color-success); }

.ef-text-field--disabled .ef-text-field__control,
.ef-text-field--readonly .ef-text-field__control { opacity: 0.55; pointer-events: none; border-bottom-color: var(--ef-gray-300); }

/* Lab: force hover preview */
.ef-lab--force-hover .ef-text-field__control { background: var(--ef-color-bg-input-hover); }

/* ══════════════════════════════════════
   DROPDOWN (custom menu — Figma list panel)
   Same spacing tokens as text field: --ef-textfield-*
   ══════════════════════════════════════ */
.ef-dropdown {
  position: relative;
  width: 100%;
}

.ef-dropdown.is-open {
  z-index: 1060;
}

.ef-dropdown__control {
  position: relative;
  height: var(--ef-input-height);
  background: var(--ef-color-bg-input);
  border: none;
  border-radius: var(--ef-radius-md) var(--ef-radius-md) 0 0;
  border-bottom: 1px solid var(--ef-color-border-input);
  transition: background var(--ef-transition-fast), border-color var(--ef-transition-fast);
}

.ef-dropdown__control:hover { background: var(--ef-color-bg-input-hover); }

.ef-dropdown__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ef-dropdown__label {
  position: absolute;
  left: 16px;
  right: 48px;
  top: 50%;
  z-index: 2;
  margin: 0;
  font-family: var(--ef-font-body);
  font-size: var(--ef-text-input-label);
  line-height: var(--ef-text-input-label-lh);
  color: var(--ef-color-text-secondary);
  pointer-events: none;
  transform: translateY(-50%);
  transition: top var(--ef-transition-fast), transform var(--ef-transition-fast), font-size var(--ef-transition-fast), line-height var(--ef-transition-fast), color var(--ef-transition-fast);
}

.ef-dropdown__value {
  position: absolute;
  left: 16px;
  right: 48px;
  top: 50%;
  z-index: 1;
  margin: 0;
  font-family: var(--ef-font-body);
  font-size: var(--ef-text-input-label);
  line-height: var(--ef-textfield-value-height);
  color: var(--ef-color-text-body);
  pointer-events: none;
  transform: translateY(-50%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ef-dropdown__trigger {
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.ef-dropdown__trigger:disabled {
  cursor: not-allowed;
}

/* Empty resting: label centred, value hidden */
.ef-dropdown__control:not(.is-filled):not(.is-active) .ef-dropdown__value {
  opacity: 0;
}

/* Active / filled: label top, value below */
.ef-dropdown__control.is-active .ef-dropdown__label,
.ef-dropdown__control.is-filled .ef-dropdown__label {
  top: var(--ef-textfield-label-top);
  transform: none;
  font-size: var(--ef-text-input-label-float);
  line-height: var(--ef-text-input-label-float-lh);
}

.ef-dropdown__control.is-active .ef-dropdown__value,
.ef-dropdown__control.is-filled .ef-dropdown__value {
  top: var(--ef-textfield-value-top);
  transform: none;
  height: var(--ef-textfield-value-height);
  line-height: var(--ef-textfield-value-height);
}

.ef-dropdown__control.is-active,
.ef-dropdown.is-open .ef-dropdown__control {
  border-bottom-width: 2px;
  border-bottom-color: var(--ef-color-primary);
}

.ef-dropdown__control.is-active .ef-dropdown__label,
.ef-dropdown.is-open .ef-dropdown__label { color: var(--ef-color-primary-hover); }

.ef-dropdown__control.is-filled:not(.is-active) .ef-dropdown__label {
  color: var(--ef-color-text-secondary);
}

.ef-dropdown.is-open .ef-dropdown__label {
  color: var(--ef-color-primary-hover);
}

.ef-lab--force-hover .ef-dropdown__control { background: var(--ef-color-bg-input-hover); }

.ef-dropdown__chevron {
  position: absolute;
  right: 16px;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
  font-size: 24px;
  line-height: 1;
  color: var(--ef-gray-700);
  pointer-events: none;
  transition: transform var(--ef-transition-fast);
}

.ef-dropdown.is-open .ef-dropdown__chevron {
  transform: translateY(-50%) rotate(180deg);
}

/* ── Menu panel ── */
.ef-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--ef-color-bg-surface);
  border-radius: var(--ef-radius-lg);
  box-shadow: var(--ef-shadow-3);
  overflow: hidden;
}

.ef-dropdown__menu-header {
  padding: 10px 16px 6px;
  font-family: var(--ef-font-body);
  font-size: var(--ef-text-label-sm);
  line-height: var(--ef-text-label-sm-lh);
  font-weight: var(--ef-font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ef-color-text-muted);
}

.ef-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 8px;
  max-height: 280px;
  overflow-y: auto;
}

.ef-dropdown__item + .ef-dropdown__item {
  margin-top: 2px;
}

.ef-dropdown__option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: none;
  border-radius: var(--ef-radius-sm);
  background: transparent;
  font-family: var(--ef-font-body);
  font-size: var(--ef-text-body-md);
  line-height: var(--ef-text-body-md-lh);
  color: var(--ef-color-text-body);
  text-align: left;
  cursor: pointer;
  transition: background var(--ef-transition-fast), color var(--ef-transition-fast);
}

.ef-dropdown__option:hover,
.ef-dropdown__option:focus {
  outline: none;
  background: var(--ef-gray-100);
}

.ef-dropdown__option.is-selected {
  background: var(--ef-green-50);
  color: var(--ef-color-primary);
}

.ef-dropdown__option.is-selected:hover,
.ef-dropdown__option.is-selected:focus {
  background: var(--ef-green-100);
}

.ef-dropdown__option:disabled {
  color: var(--ef-color-text-disabled);
  cursor: not-allowed;
}

.ef-dropdown__option:disabled:hover,
.ef-dropdown__option:disabled:focus {
  background: transparent;
}

.ef-dropdown__option-icon {
  flex-shrink: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--ef-gray-700);
}

.ef-dropdown__option.is-selected .ef-dropdown__option-icon {
  color: var(--ef-color-primary);
}

.ef-dropdown__option-label {
  flex: 1;
  min-width: 0;
}

.ef-dropdown__option-check {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--ef-color-primary);
  opacity: 0;
}

.ef-dropdown__option.is-selected .ef-dropdown__option-check {
  opacity: 1;
}

.ef-dropdown--error .ef-dropdown__control { border-bottom-color: var(--ef-color-error); border-bottom-width: 2px; }
.ef-dropdown--error .ef-dropdown__label { color: var(--ef-color-error); }
.ef-dropdown--disabled .ef-dropdown__control { opacity: 0.55; pointer-events: none; }
.ef-dropdown--readonly .ef-dropdown__control { opacity: 0.55; pointer-events: none; }

/* ══════════════════════════════════════
   DISCLAIMER TEXT (3 variants)
   ══════════════════════════════════════ */
.ef-disclaimer {
  margin: 6px 0 0;
  padding: 0 16px;
  font-family: var(--ef-font-body);
  font-size: var(--ef-text-disclaimer);
  line-height: var(--ef-text-disclaimer-lh);
  color: var(--ef-color-text-secondary);
}

.ef-disclaimer--error { color: var(--ef-color-error); }
.ef-disclaimer--disabled { color: var(--ef-gray-600); }

/* ══════════════════════════════════════
   CHECKBOX (9 variants)
   ══════════════════════════════════════ */
.ef-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.ef-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: var(--ef-control-size);
  height: var(--ef-control-size);
  margin: 0;
  flex-shrink: 0;
  background: #ffffff;
  border: 2px solid var(--ef-color-border-input);
  border-radius: var(--ef-radius-xs);
  cursor: pointer;
  position: relative;
  transition: background var(--ef-transition-fast), border-color var(--ef-transition-fast);
}

.ef-checkbox:hover input[type="checkbox"]:not(:disabled):not(:checked):not(:indeterminate) {
  background-color: var(--ef-green-50);
}

.ef-checkbox:hover input[type="checkbox"]:checked:not(:disabled),
.ef-checkbox:hover input[type="checkbox"]:indeterminate:not(:disabled) {
  background-color: var(--ef-color-primary-hover);
  border-color: var(--ef-color-primary-hover);
}

.ef-checkbox input[type="checkbox"]:checked {
  background-color: var(--ef-color-primary);
  border-color: var(--ef-color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

.ef-checkbox input[type="checkbox"]:indeterminate {
  background-color: var(--ef-color-primary);
  border-color: var(--ef-color-primary);
}

.ef-checkbox input[type="checkbox"]:indeterminate::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  background: #fff;
  border: none;
  transform: translate(-50%, -50%);
}

.ef-checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ef-color-primary-focus-ring);
  outline-offset: 2px;
}

.ef-checkbox input[type="checkbox"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ef-checkbox__label {
  font-family: var(--ef-font-body);
  font-size: var(--ef-text-body-lg);
  line-height: var(--ef-text-body-lg-lh);
  color: var(--ef-color-text-body);
}

.ef-checkbox--disabled .ef-checkbox__label { color: var(--ef-gray-600); }
.ef-checkbox--readonly { pointer-events: none; }

/* ══════════════════════════════════════
   RADIO (8 variants)
   ══════════════════════════════════════ */
.ef-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.ef-radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: var(--ef-control-size);
  height: var(--ef-control-size);
  margin: 0;
  flex-shrink: 0;
  background: #ffffff;
  border: 2px solid var(--ef-color-border-input);
  border-radius: var(--ef-radius-full);
  cursor: pointer;
  position: relative;
  transition: border-color var(--ef-transition-fast);
}

.ef-radio:hover input[type="radio"]:not(:disabled) { background: var(--ef-green-50); }

.ef-radio input[type="radio"]:checked {
  border-color: var(--ef-color-primary);
}

.ef-radio input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  background: var(--ef-color-primary);
  border-radius: var(--ef-radius-full);
  transform: translate(-50%, -50%);
}

.ef-radio input[type="radio"]:focus-visible {
  outline: 2px solid var(--ef-color-primary-focus-ring);
  outline-offset: 2px;
}

.ef-radio input[type="radio"]:disabled { opacity: 0.55; cursor: not-allowed; }

.ef-radio__label {
  font-family: var(--ef-font-body);
  font-size: var(--ef-text-body-lg);
  line-height: var(--ef-text-body-lg-lh);
  color: var(--ef-color-text-body);
}

.ef-radio--disabled .ef-radio__label { color: var(--ef-gray-600); }
.ef-radio--readonly { pointer-events: none; }

/* ══════════════════════════════════════
   BUTTON (45 variants: 3 types × 3 sizes × 5 states)
   ══════════════════════════════════════ */
.ef-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--ef-font-display);
  font-weight: var(--ef-font-weight-bold);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--ef-transition-fast), border-color var(--ef-transition-fast), color var(--ef-transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

.ef-btn--lg { min-height: var(--ef-btn-height-lg); padding: 0 20px; font-size: 1rem; line-height: 1.5rem; border-radius: var(--ef-radius-lg); }
.ef-btn--md { min-height: var(--ef-btn-height-md); padding: 0 16px; font-size: 0.875rem; line-height: 1.375rem; border-radius: var(--ef-radius-md); }
.ef-btn--sm { min-height: var(--ef-btn-height-sm); padding: 0 12px; font-size: 0.75rem; line-height: 1.125rem; letter-spacing: 0.04em; border-radius: var(--ef-radius-sm); }

.ef-btn--primary { background: var(--ef-color-primary); color: var(--ef-color-on-primary); border-color: var(--ef-color-primary); }
.ef-btn--primary:hover { background: var(--ef-color-primary-hover); border-color: var(--ef-color-primary-hover); color: var(--ef-color-on-primary); text-decoration: none; }
.ef-btn--primary:active { background: var(--ef-color-primary-pressed); border-color: var(--ef-color-primary-pressed); }
.ef-btn--primary:focus-visible { outline: 2px solid var(--ef-color-primary-focus-ring); outline-offset: 2px; }
.ef-btn--primary:disabled, .ef-btn--primary.ef-btn--disabled { background: var(--ef-gray-300); border-color: var(--ef-gray-300); color: var(--ef-color-on-primary); cursor: not-allowed; pointer-events: none; }

.ef-btn--secondary { background: var(--ef-color-bg-surface); color: var(--ef-color-primary); border-color: var(--ef-gray-300); }
.ef-btn--secondary:hover { background: var(--ef-green-50); border-color: var(--ef-gray-300); color: var(--ef-color-primary-hover); text-decoration: none; }
.ef-btn--secondary:active { background: var(--ef-green-100); }
.ef-btn--secondary:disabled, .ef-btn--secondary.ef-btn--disabled { color: var(--ef-gray-600); cursor: not-allowed; pointer-events: none; }

/* Figma outline button — fill is hidden (transparent) so page gradient shows through */
.ef-btn--outline {
  background: transparent;
  color: #068763;
  border: 2px solid #068763;
  border-radius: 10px; /* Figma Button cornerRadius 10 */
}
.ef-btn--outline:hover { background: rgba(216, 254, 236, 0.45); color: #016c4e; border-color: #016c4e; text-decoration: none; }
.ef-btn--outline:active { background: rgba(216, 254, 236, 0.7); }
.ef-btn--outline:disabled, .ef-btn--outline.ef-btn--disabled { color: var(--ef-gray-600); border-color: var(--ef-gray-300); cursor: not-allowed; pointer-events: none; }

.ef-btn--text { background: transparent; color: var(--ef-color-primary); border-color: transparent; }
.ef-btn--text:hover { background: var(--ef-green-50); color: var(--ef-color-primary-hover); text-decoration: none; }
.ef-btn--text:active { background: var(--ef-green-100); }
.ef-btn--text:disabled, .ef-btn--text.ef-btn--disabled { color: var(--ef-gray-600); cursor: not-allowed; pointer-events: none; }

.ef-btn--soft {
  background: #d8feec;
  color: #016c4e;
  border-color: transparent;
}
.ef-btn--soft:hover { background: #c4f6df; color: #016c4e; text-decoration: none; }
.ef-btn--soft:active { background: #b0edd0; }
.ef-btn--soft:disabled, .ef-btn--soft.ef-btn--disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

.ef-btn--inline { width: auto; align-self: flex-start; }

/* Legacy aliases */
.ef-btn--primary.ef-btn--sm, .ef-btn--ghost.ef-btn--sm { min-height: var(--ef-btn-height-sm); }
.ef-btn--ghost { background: transparent; color: var(--ef-color-text-secondary); border-color: var(--ef-color-border); }
.ef-btn--ghost:hover { background: var(--ef-gray-100); color: var(--ef-color-text-body); }

/* ══════════════════════════════════════
   TOGGLE (10 variants)
   ══════════════════════════════════════ */
.ef-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.ef-toggle__track {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--ef-gray-800);
  border-radius: var(--ef-radius-full);
  transition: background var(--ef-transition-fast);
  flex-shrink: 0;
}

.ef-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: var(--ef-radius-full);
  transition: transform var(--ef-transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ef-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }

.ef-toggle__check {
  font-size: 14px;
  line-height: 1;
  color: var(--ef-color-primary);
  opacity: 0;
  transition: opacity var(--ef-transition-fast);
}

.ef-toggle input:checked + .ef-toggle__track { background: var(--ef-color-primary); }
.ef-toggle input:checked + .ef-toggle__track .ef-toggle__thumb { transform: translateX(20px); }
.ef-toggle input:checked + .ef-toggle__track .ef-toggle__check { opacity: 1; }

.ef-toggle input:focus-visible + .ef-toggle__track { outline: 2px solid var(--ef-color-primary-focus-ring); outline-offset: 2px; }

.ef-toggle:hover .ef-toggle__track { filter: brightness(0.95); }
.ef-toggle input:disabled + .ef-toggle__track { opacity: 0.55; cursor: not-allowed; }

.ef-toggle__label {
  font-family: var(--ef-font-body);
  font-size: var(--ef-text-body-lg);
  line-height: var(--ef-text-body-lg-lh);
  color: var(--ef-color-text-body);
}

.ef-toggle--readonly { pointer-events: none; }

/* ══════════════════════════════════════
   SELECTABLE CARD (12 variants)
   ══════════════════════════════════════ */
.ef-selectable-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 16px;
  background: var(--ef-color-bg-surface);
  border: 1px solid transparent;
  border-radius: var(--ef-radius-lg);
  cursor: pointer;
  transition: background var(--ef-transition-fast), box-shadow var(--ef-transition-fast), border-color var(--ef-transition-fast);
}

.ef-selectable-card:hover { background: var(--ef-gray-100); }

.ef-selectable-card--muted { background: var(--ef-gray-100); border-color: var(--ef-gray-300); }

.ef-selectable-card--selected {
  background: var(--ef-gray-100);
  border-color: var(--ef-gray-300);
  box-shadow: var(--ef-shadow-selected);
  padding: 18px;
}

.ef-selectable-card__content { flex: 1; min-width: 0; }

.ef-selectable-card__title {
  margin: 0;
  font-family: var(--ef-font-body);
  font-size: var(--ef-text-body-md);
  line-height: var(--ef-text-body-md-lh);
  font-weight: var(--ef-font-weight-regular);
  color: var(--ef-color-text-body);
}

.ef-selectable-card__title--active { font-weight: var(--ef-font-weight-semibold); color: var(--ef-color-primary-hover); }

/* ══════════════════════════════════════
   CLOSE BUTTON (15 variants)
   ══════════════════════════════════════ */
.ef-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--ef-radius-full);
  background: transparent;
  cursor: pointer;
  transition: background var(--ef-transition-fast);
}

.ef-close-btn .material-symbols-outlined { font-size: 20px; }

.ef-close-btn--default { color: var(--ef-gray-950); }
.ef-close-btn--default:hover { background: var(--ef-gray-100); }
.ef-close-btn--default:active { background: var(--ef-gray-300); }

.ef-close-btn--success { color: var(--ef-success-800); background: var(--ef-success-100); }
.ef-close-btn--success:hover { background: var(--ef-success-200); }
.ef-close-btn--success:active { background: var(--ef-success-300); }

.ef-close-btn--info { color: var(--ef-blue-700); background: var(--ef-blue-100); }
.ef-close-btn--info:hover { background: var(--ef-blue-200); }
.ef-close-btn--info:active { background: var(--ef-blue-300); }

.ef-close-btn--warning { color: var(--ef-yellow-600); background: var(--ef-yellow-100); }
.ef-close-btn--warning:hover { background: var(--ef-yellow-200); }
.ef-close-btn--warning:active { background: var(--ef-yellow-300); }

.ef-close-btn--error { color: var(--ef-red-800); background: var(--ef-red-100); }
.ef-close-btn--error:hover { background: var(--ef-red-200); }
.ef-close-btn--error:active { background: var(--ef-red-300); }

/* ══════════════════════════════════════
   ALERTS (4 variants)
   ══════════════════════════════════════ */
.ef-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 2px solid transparent;
  border-radius: var(--ef-radius-xl);
  font-family: var(--ef-font-body);
}

.ef-alert__icon { font-size: 24px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.ef-alert__body { flex: 1; min-width: 0; }
.ef-alert__title { margin: 0 0 4px; font-family: var(--ef-font-display); font-size: var(--ef-text-body-md); font-weight: var(--ef-font-weight-bold); line-height: 1.25rem; }
.ef-alert__message { margin: 0; font-size: var(--ef-text-body-md); line-height: 1.375rem; color: var(--ef-color-text-secondary); }

.ef-alert--success { background: var(--ef-success-100); border-color: var(--ef-success-300); }
.ef-alert--success .ef-alert__icon, .ef-alert--success .ef-alert__title { color: var(--ef-success-800); }

.ef-alert--info { background: var(--ef-blue-100); border-color: var(--ef-blue-300); }
.ef-alert--info .ef-alert__icon, .ef-alert--info .ef-alert__title { color: var(--ef-blue-700); }

.ef-alert--warning { background: var(--ef-yellow-100); border-color: var(--ef-yellow-300); }
.ef-alert--warning .ef-alert__icon, .ef-alert--warning .ef-alert__title { color: var(--ef-yellow-600); }

.ef-alert--error { background: var(--ef-red-100); border-color: var(--ef-red-300); }
.ef-alert--error .ef-alert__icon, .ef-alert--error .ef-alert__title { color: var(--ef-red-700); }

/* Legacy simple alerts (backward compat) */
.ef-alert--success:not(:has(.ef-alert__title)) { color: var(--ef-success-800); font-size: var(--ef-text-body-sm); }
.ef-alert--error:not(:has(.ef-alert__title)) { color: var(--ef-red-700); font-size: var(--ef-text-body-sm); }
.ef-alert--warning:not(:has(.ef-alert__title)) { color: var(--ef-yellow-600); font-size: var(--ef-text-body-sm); }

/* ══════════════════════════════════════
   HEADER
   ══════════════════════════════════════ */
.ef-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--ef-header-height);
  padding: 12px 32px;
  background: var(--ef-color-bg-surface);
  box-shadow: var(--ef-shadow-header);
}

.ef-header__start { display: flex; align-items: center; gap: 20px; min-width: 0; }
.ef-header__end { display: flex; align-items: center; gap: 8px; }
.ef-header__logo { display: inline-flex; align-items: center; line-height: 0; }
.ef-header__logo img { height: 40px; width: auto; display: block; }
.ef-header__user { font-size: var(--ef-text-body-md); font-weight: var(--ef-font-weight-medium); color: var(--ef-color-text-secondary); margin-right: var(--ef-space-2); }

.ef-header--portal {
  height: auto;
  min-height: 56px;
  padding: 12px 16px;
  background: var(--ef-color-bg-page);
  box-shadow: none;
  gap: 12px;
  overflow: visible;
}
.ef-header--portal .ef-header__start {
  flex: 1 1 auto;
  min-width: 0;
}
.ef-header--portal .ef-header__end {
  flex: 0 0 auto;
}
.ef-header--portal .ef-header__logo {
  max-width: 160px;
}
.ef-header--portal .ef-header__logo img {
  height: 34px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.ef-header__welcome {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.ef-header__welcome-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
.ef-header__eyebrow {
  display: block;
  font-family: var(--ef-font-display);
  font-size: 10px;
  font-weight: var(--ef-font-weight-medium);
  letter-spacing: 0.04em;
  color: #5c6b66;
}
.ef-header__name {
  display: block;
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: var(--ef-font-weight-bold);
  color: #0b1512;
}
.ef-initial-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 19px;
  background: var(--ef-green-100);
  color: var(--ef-green-700);
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: var(--ef-font-weight-bold);
  text-decoration: none;
  flex-shrink: 0;
}
.ef-initial-icon:hover { color: var(--ef-green-800); text-decoration: none; }
.ef-header__logout { margin-left: 4px; flex-shrink: 0; }

/* ══════════════════════════════════════
   ICON BUTTON (18 variants)
   ══════════════════════════════════════ */
.ef-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--ef-radius-full);
  background: transparent;
  color: var(--ef-gray-950);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ef-transition-fast);
}

.ef-icon-btn--sm { width: var(--ef-icon-btn-sm); height: var(--ef-icon-btn-sm); }
.ef-icon-btn--md { width: var(--ef-icon-btn-md); height: var(--ef-icon-btn-md); }
.ef-icon-btn--lg { width: var(--ef-icon-btn-lg); height: var(--ef-icon-btn-lg); }

.ef-icon-btn--sm .material-symbols-outlined { font-size: 20px; }
.ef-icon-btn--md .material-symbols-outlined { font-size: 28px; }
.ef-icon-btn--lg .material-symbols-outlined { font-size: 32px; }

.ef-icon-btn--default:hover { background: var(--ef-gray-100); }
.ef-icon-btn--default:active { background: var(--ef-gray-300); }
.ef-icon-btn--green:hover { background: var(--ef-green-50); }
.ef-icon-btn--green:active { background: var(--ef-green-100); }

/* ══════════════════════════════════════
   MENU BUTTON (3 variants)
   ══════════════════════════════════════ */
.ef-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ef-menu-btn-size);
  height: var(--ef-menu-btn-size);
  padding: 0;
  border: none;
  border-radius: var(--ef-radius-xs);
  background: var(--ef-color-bg-surface);
  color: var(--ef-gray-950);
  cursor: pointer;
  transition: background var(--ef-transition-fast);
}

.ef-menu-btn:hover { background: var(--ef-gray-100); }
.ef-menu-btn:active { background: var(--ef-gray-300); }
.ef-menu-btn .material-symbols-outlined { font-size: 32px; }

/* ══════════════════════════════════════
   LAYOUT / PAGE / CARD
   ══════════════════════════════════════ */
.ef-page { max-width: var(--ef-content-max-width); margin: 0 auto; padding: var(--ef-space-8) var(--ef-space-4) var(--ef-space-12); }

.ef-auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}
/* Match dashboard gutters: page 8/16 + header 4/0 → logo sits like Home */
.ef-auth-shell__inner {
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  padding: 8px 16px 24px;
  box-sizing: border-box;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ef-dash-header--auth {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 4px 0 16px;
  box-sizing: border-box;
}
.ef-page--auth {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 8px 0 24px;
  box-sizing: border-box;
}

.ef-card {
  background: var(--ef-color-bg-surface);
  border-radius: var(--ef-radius-card);
  box-shadow: var(--ef-shadow-card);
  width: 100%;
  max-width: var(--ef-auth-card-max-width);
}

.ef-card--auth {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  flex: 0 0 auto;
}
.ef-page--auth .ef-form-actions {
  width: 100%;
}
.ef-page--auth .ef-form-actions:not(.ef-form-actions--split) .ef-btn {
  width: 100%;
  justify-content: center;
}
.ef-card__content { display: flex; flex-direction: column; gap: 24px; }
.ef-card__title { margin: 0; font-family: var(--ef-font-display); font-size: var(--ef-text-headline-md); font-weight: var(--ef-font-weight-bold); line-height: var(--ef-text-headline-md-lh); letter-spacing: -0.01em; color: var(--ef-color-text-primary); }
.ef-card__subtitle { margin: 0; font-family: var(--ef-font-body); font-size: var(--ef-text-body-lg); line-height: var(--ef-text-body-lg-lh); color: var(--ef-color-text-secondary); }

.ef-field-group { display: flex; flex-direction: column; gap: 24px; }
.ef-form-actions { margin: 0; display: flex; gap: 16px; }
.ef-form-actions--split { justify-content: flex-start; align-items: center; }
.ef-form-actions--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.ef-form-actions__or {
  margin: 0;
  text-align: center;
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: var(--ef-font-weight-medium);
  line-height: 20px;
  color: #5c6b66;
}
.ef-form-actions__aside { margin: 0; display: flex; }

/* ══════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════ */
.ef-text-strong { font-weight: var(--ef-font-weight-semibold); color: var(--ef-color-text-body); }
.ef-text-muted { color: var(--ef-color-text-secondary); }
.ef-link { color: var(--ef-color-primary); font-weight: var(--ef-font-weight-medium); text-decoration: none; }
.ef-link:hover { color: var(--ef-color-primary-hover); text-decoration: underline; }
.ef-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ef-space-1);
  margin-bottom: var(--ef-space-4);
  font-size: var(--ef-text-body-md);
  font-weight: var(--ef-font-weight-medium);
  color: var(--ef-color-primary);
  text-decoration: none;
}
/* Figma Text button hover: underline label only (not the leading icon). */
.ef-back-link:hover {
  color: #016c4e;
  text-decoration: none;
}
.ef-back-link:hover .ef-back-link__label {
  text-decoration: underline;
}
.ef-back-link .material-symbols-outlined {
  text-decoration: none;
}
.ef-hidden-mobile { display: none; }

/* Dashboard */
.ef-hero { background: linear-gradient(135deg, var(--ef-green-700) 0%, var(--ef-green-600) 100%); color: #fff; border-radius: var(--ef-radius-card); padding: var(--ef-space-6); margin-bottom: var(--ef-space-5); box-shadow: var(--ef-shadow-card); }
.ef-hero h1 { margin: 0 0 var(--ef-space-2); font-family: var(--ef-font-display); font-size: var(--ef-text-headline-md); font-weight: var(--ef-font-weight-bold); line-height: var(--ef-text-headline-md-lh); }
.ef-hero__grid { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; }
.ef-hero__meta { opacity: 0.85; margin-bottom: 8px; }
.ef-hero__aside { text-align: right; }
.ef-hero__aside-label { opacity: 0.75; font-size: var(--ef-text-body-md); }
.ef-hero__aside-value { font-weight: var(--ef-font-weight-medium); }
.ef-badge { display: inline-block; padding: 4px 12px; font-size: var(--ef-text-label-sm); font-weight: var(--ef-font-weight-medium); color: #fff; background: rgba(255,255,255,0.2); border-radius: var(--ef-radius-full); }
.ef-tile { display: block; padding: var(--ef-space-5); background: var(--ef-color-bg-surface); border: 1px solid var(--ef-color-border); border-radius: var(--ef-radius-card); color: inherit; text-decoration: none; box-shadow: var(--ef-shadow-card); transition: transform var(--ef-transition-fast); }
.ef-tile:hover { transform: translateY(-1px); color: inherit; text-decoration: none; }
.ef-tile__title { margin: 0 0 var(--ef-space-2); font-family: var(--ef-font-display); font-size: var(--ef-text-body-lg); font-weight: var(--ef-font-weight-bold); }
.ef-tile__meta { margin: 0; font-size: var(--ef-text-body-md); color: var(--ef-color-text-secondary); }
.ef-status--complete { color: var(--ef-color-success); }
.ef-status--incomplete { color: var(--ef-color-warning); }

/* ══════════════════════════════════════
   PORTAL PAGES (dashboard + detail)
   ══════════════════════════════════════ */
.ef-page-header { margin-bottom: var(--ef-space-6); }
.ef-page-header h1 {
  margin: 0 0 var(--ef-space-2);
  font-family: var(--ef-font-display);
  font-size: var(--ef-text-headline-sm);
  font-weight: var(--ef-font-weight-bold);
  line-height: var(--ef-text-headline-sm-lh);
}

.ef-card--fluid {
  max-width: none;
  padding: 24px;
  border-radius: var(--ef-radius-card);
}

.ef-card--fluid .ef-card__body { padding: 0; }

.ef-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.ef-stat-card {
  background: var(--ef-color-bg-surface);
  border-radius: var(--ef-radius-card);
  padding: 20px;
  box-shadow: var(--ef-shadow-card);
}

.ef-stat-card__label {
  font-size: var(--ef-text-body-sm);
  line-height: var(--ef-text-body-sm-lh);
  color: var(--ef-color-text-secondary);
  margin-bottom: 4px;
}

.ef-stat-card__value {
  font-family: var(--ef-font-display);
  font-size: var(--ef-text-headline-sm);
  font-weight: var(--ef-font-weight-bold);
  line-height: var(--ef-text-headline-sm-lh);
}

.ef-stat-card__meta {
  margin-top: 4px;
  font-size: var(--ef-text-body-md);
  color: var(--ef-color-text-secondary);
}

.ef-data-card {
  background: var(--ef-color-bg-surface);
  border-radius: var(--ef-radius-card);
  box-shadow: var(--ef-shadow-card);
  overflow: hidden;
  max-width: none;
}

.ef-data-card__header {
  padding: 16px 24px;
  font-family: var(--ef-font-display);
  font-size: var(--ef-text-body-lg);
  font-weight: var(--ef-font-weight-bold);
  border-bottom: 1px solid var(--ef-color-border);
}

.ef-data-table { width: 100%; border-collapse: collapse; }
.ef-data-table th,
.ef-data-table td {
  padding: 12px 24px;
  text-align: left;
  border-bottom: 1px solid var(--ef-gray-100);
  font-size: var(--ef-text-body-md);
  line-height: var(--ef-text-body-md-lh);
}
.ef-data-table th {
  background: var(--ef-gray-50);
  font-weight: var(--ef-font-weight-semibold);
  color: var(--ef-color-text-secondary);
}
.ef-data-table tr:last-child td { border-bottom: none; }

.ef-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.ef-detail-item__label {
  font-size: var(--ef-text-body-sm);
  color: var(--ef-color-text-secondary);
  margin-bottom: 4px;
}

.ef-detail-item__value {
  font-weight: var(--ef-font-weight-semibold);
  color: var(--ef-color-text-body);
}

.ef-section-title {
  margin: 0 0 16px;
  font-family: var(--ef-font-display);
  font-size: var(--ef-text-title-lg);
  font-weight: var(--ef-font-weight-bold);
  line-height: var(--ef-text-title-lg-lh);
}

.ef-loan-selector { margin-bottom: 24px; max-width: 420px; }

.ef-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.ef-email-display {
  margin: 0;
  font-weight: var(--ef-font-weight-semibold);
  color: var(--ef-color-text-body);
}

.ef-access-subtitle-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (min-width: 576px) { .ef-hidden-mobile { display: inline; } }

@media (max-width: 575px) {
  .ef-header { padding: 12px 16px; }
  .ef-header__user { display: none; }
  .ef-auth-shell__inner { padding-left: 16px; padding-right: 16px; }
}

/* ══════════════════════════════════════
   DASHBOARD — Figma Dashboard Expanded
   ══════════════════════════════════════ */
.ef-page--portal {
  max-width: 390px;
  margin: 0 auto;
  padding: 8px 16px calc(140px + env(safe-area-inset-bottom, 0px));
}

.ef-dashboard {
  max-width: 390px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ef-dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0 16px;
}
.ef-dash-header__logo {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 180px;
}
.ef-dash-header__logo img {
  height: 34px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.ef-dash-header__welcome {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.ef-dash-header__text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
.ef-dash-header__eyebrow {
  font-family: var(--ef-font-display);
  font-size: 10px;
  font-weight: var(--ef-font-weight-medium);
  letter-spacing: 0.04em;
  color: #5c6b66;
}
.ef-dash-header__name {
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: var(--ef-font-weight-bold);
  color: #0b1512;
}
.ef-header--portal,
.ef-page--portal {
  background: transparent;
}

.ef-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: var(--ef-font-display);
  font-size: 12px;
  font-weight: var(--ef-font-weight-bold);
  letter-spacing: 0.04em;
  line-height: 18px;
}
.ef-badge--sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: transparent;
  border-color: transparent;
  letter-spacing: 0;
}
/* Figma Badges / Active: fill #dbfee1, stroke #92efa7 1px, text #036e30 */
.ef-badge--success {
  background: #dbfee1;
  color: #036e30;
  border-color: #92efa7;
}
.ef-badge--sm.ef-badge--success { background: transparent; color: #036e30; border-color: transparent; }
.ef-badge--warning {
  background: #fff5e5;
  color: #8a6a00;
  border-color: #ffda98;
}
.ef-badge--error {
  background: #fdecea;
  color: #c63933;
  border-color: transparent;
}
.ef-badge--sm.ef-badge--error { background: transparent; color: #c63933; border-color: transparent; }
.ef-badge--neutral { background: var(--ef-gray-200); color: var(--ef-gray-800); border-color: var(--ef-gray-300); }

/* Main loan card */
.ef-loan-card {
  background: #ffffff;
  border: 1px solid #e5ebe9;
  border-radius: 20px;
  box-shadow:
    0 4px 8px rgba(30, 33, 32, 0.08),
    0 2px 3px rgba(30, 33, 32, 0.11);
  overflow: hidden;
}
.ef-loan-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: #f8fbfa;
  border-bottom: 1px solid #e5ebe9;
}
.ef-loan-card__ref {
  font-family: var(--ef-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #545d5a;
}
.ef-loan-card__ref-label {
  font-weight: 700;
}
.ef-loan-card__body {
  display: flex;
  flex-direction: column;
  padding: 0 20px 20px;
}
.ef-loan-card__balance {
  padding-top: 16px;
  padding-bottom: 16px;
}
.ef-loan-card__balance-label {
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: var(--ef-font-weight-bold);
  line-height: 22px;
  letter-spacing: 0.04em;
  color: var(--ef-gray-800);
  margin-bottom: 0;
}
/*
  Figma Balance (Payoff / Dashboard):
  - Row 315×50, HORIZONTAL, children top-aligned (same y)
  - Attach money: frame 20×38, pad top 10 / right 6 / bottom 4, vector 14×24 #545d5a
  - dollars: Plus Jakarta ExtraBold 40 / lh 50 / ls -0.8 / #1e2120
  - cents: Plus Jakarta Bold 24 / lh 34 / ls -0.24 / #545d5a (baseline with dollars)
*/
.ef-amount {
  display: flex;
  align-items: flex-start;
  font-family: var(--ef-font-display);
  color: #1e2120;
  line-height: 1;
}
.ef-amount--xl {
  height: 50px;
}
.ef-amount--hero {
  height: 64px;
  justify-content: center;
}
.ef-amount--hero .ef-amount__dollars {
  font-size: 48px;
  line-height: 58px;
  letter-spacing: -1px;
}
.ef-amount--hero .ef-amount__cents {
  font-size: 28px;
  padding-bottom: 8px;
}
.ef-amount--hero .ef-amount__currency {
  width: 22px;
  height: 48px;
}
.ef-amount--hero .ef-amount__currency img {
  width: 22px;
  height: 48px;
}
.ef-amount__currency {
  display: block;
  flex-shrink: 0;
  align-self: flex-start;
  width: 20px;
  height: 38px;
  line-height: 0;
}
.ef-amount__currency img {
  display: block;
  width: 20px;
  height: 38px;
}
.ef-amount__value {
  display: inline-flex;
  align-items: flex-end; /* cents sit on the baseline with the dollars */
  min-width: 0;
}
.ef-amount__dollars {
  font-family: var(--ef-font-display);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 50px;
  color: #1e2120;
}
.ef-amount__cents {
  font-family: var(--ef-font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.24px;
  line-height: 1;
  color: #545d5a;
  padding-bottom: 6px; /* optical baseline with ExtraBold 40 / lh 50 */
}

.ef-loan-card__progress-block {
  padding-bottom: 20px;
}
.ef-progress {
  height: 8px;
  border-radius: var(--ef-radius-full);
  background: var(--ef-gray-200);
  overflow: hidden;
  margin: 0 0 8px;
}
.ef-progress__fill {
  height: 100%;
  background: var(--ef-color-primary);
  border-radius: inherit;
  transition: width var(--ef-transition-fast);
}
.ef-loan-card__progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--ef-font-body);
  font-size: 12px;
  line-height: 18px;
  color: var(--ef-gray-800);
}

.ef-loan-card__row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
}
.ef-loan-card__row-col { flex: 1 1 0; min-width: 0; }
.ef-loan-card__vdivider {
  width: 1px;
  align-self: stretch;
  background: var(--ef-gray-200);
  flex-shrink: 0;
}
.ef-loan-card__row-label {
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: var(--ef-font-weight-bold);
  line-height: 22px;
  letter-spacing: 0.04em;
  color: var(--ef-gray-800);
  margin-bottom: 0;
}
.ef-loan-card__row-value {
  font-family: var(--ef-font-display);
  font-size: 24px;
  font-weight: var(--ef-font-weight-extrabold);
  letter-spacing: -0.24px;
  line-height: 34px;
  color: var(--ef-gray-950);
}
.ef-loan-card__row-sub {
  font-family: var(--ef-font-body);
  font-size: 12px;
  line-height: 18px;
  color: var(--ef-gray-700);
}
.ef-text-right { text-align: right; }

.ef-loan-card__vehicle {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 20px;
}
.ef-loan-card__hdivider {
  height: 1px;
  width: 100%;
  background: var(--ef-gray-200);
  margin-bottom: 16px;
}
.ef-loan-card__vehicle-label {
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: var(--ef-font-weight-bold);
  line-height: 22px;
  letter-spacing: 0.04em;
  color: #545d5a;
}
.ef-loan-card__vehicle-name {
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: var(--ef-font-weight-bold);
  line-height: 22px;
  color: #0f1c19;
}
/* Figma: "VIN: " Inter Bold 700; VIN value Inter Regular 400; both #545d5a 12px */
.ef-loan-card__vehicle-vin {
  font-family: var(--ef-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.12px;
  color: #545d5a;
}
.ef-loan-card__vin-label {
  font-weight: 700;
}
.ef-loan-card__alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px 14px;
  background: #fff5e5;
  border: 1px solid #ffda98;
  border-radius: 12px;
}
.ef-loan-card__alert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.ef-loan-card__alert-icon img {
  width: 20px;
  height: 20px;
  display: block;
}
.ef-loan-card__alert-text {
  font-family: var(--ef-font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: #545d5a;
}

.ef-btn--block { width: 100%; justify-content: center; }
.ef-make-payment { margin-top: 0; }

/* Section headers */
.ef-dash-section { margin-top: 0; }
.ef-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 28px 0 8px;
}
.ef-section-header__title {
  margin: 0;
  font-family: var(--ef-font-display);
  font-size: 16px;
  font-weight: var(--ef-font-weight-bold);
  line-height: 24px;
  color: var(--ef-gray-950);
}
.ef-section-header__action {
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: var(--ef-font-weight-bold);
  line-height: 22px;
  color: var(--ef-green-600);
  text-decoration: none;
}
.ef-section-header__action:hover { color: var(--ef-green-700); text-decoration: none; }

/*
  Dashboard surface cards (Quick Links / Recent Payments / Loan Summary):
  Same elevation as Figma Main Card — white fill, 1px #e5ebe9, dual drop shadow.
  (Figma secondary cards use #f1f4f3 stroke which disappears on white/near-white page.)
*/
.ef-quick-tile,
.ef-summary-card {
  background: #ffffff;
  border: 1px solid #e5ebe9;
  border-radius: 20px;
  box-shadow:
    0 4px 8px rgba(30, 33, 32, 0.08),
    0 2px 3px rgba(30, 33, 32, 0.11);
}

/* Quick links — Figma 2×2 cards on home; --2 also used on Payments */
.ef-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.ef-quick-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.ef-quick-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 12px;
  text-decoration: none;
  color: #0f1c19;
  transition: transform var(--ef-transition-fast), box-shadow var(--ef-transition-fast);
  min-height: 106px;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
button.ef-quick-tile:disabled {
  cursor: default;
  opacity: 0.5;
  box-shadow: none;
  color: #545d5a;
}
.ef-quick-tile__hint {
  font-family: var(--ef-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #545d5a;
  text-align: center;
}
.ef-quick-tile:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 4px 8px rgba(30, 33, 32, 0.10),
    0 2px 3px rgba(30, 33, 32, 0.14);
  color: #0f1c19;
  text-decoration: none;
}
.ef-quick-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--ef-green-100);
  color: var(--ef-green-700);
}
.ef-quick-tile__icon img {
  width: 32px;
  height: 32px;
  display: block;
}
.ef-quick-tile__label {
  font-family: var(--ef-font-display);
  font-weight: var(--ef-font-weight-bold);
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}

/* Figma Recent Payments card (Payments + Full Payment History 2157:10969):
   stroke #f1f4f3, r20, dual DROP_SHADOW — no overflow:hidden (clips shadow) */
.ef-payment-list {
  background: #ffffff;
  border: 1px solid #f1f4f3;
  border-radius: 20px;
  box-shadow:
    0 4px 8px rgba(30, 33, 32, 0.08),
    0 2px 3px rgba(30, 33, 32, 0.11);
}
/* Recent Payment Line Item: pad 16, inset divider #cfd8d5 */
.ef-payment-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: #ffffff;
}
.ef-payment-row:first-child {
  border-radius: 20px 20px 0 0;
}
.ef-payment-row:last-child {
  border-radius: 0 0 20px 20px;
}
.ef-payment-row:only-child {
  border-radius: 20px;
}
.ef-payment-row:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  background: #cfd8d5;
}
.ef-payment-row__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ef-payment-row__title {
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: var(--ef-font-weight-bold);
  line-height: 22px;
  color: #0f1c19;
}
.ef-payment-row__date {
  font-family: var(--ef-font-body);
  font-size: 12px;
  line-height: 18px;
  color: #545d5a;
}
.ef-payment-row__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.ef-payment-row__amount {
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: var(--ef-font-weight-extrabold);
  line-height: 22px;
  color: #0f1c19;
}
.ef-payment-row--empty {
  flex-direction: column;
  align-items: flex-start;
}
.ef-payment-row__check {
  font-size: 16px;
  line-height: 1;
}

/*
  Figma Full Payment History (2157:10969 / 2157:11200)
  Only the history table scrolls; back/close in the nav.
*/
.ef-page--portal:has(.ef-payment-history) {
  max-width: 390px;
  min-height: 100dvh;
  min-height: 100svh;
  height: 100dvh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 16px;
  overflow: hidden;
}
.ef-payment-history {
  width: 100%;
  max-width: 358px;
  margin: 0 auto;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}
.ef-payment-history__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  flex-shrink: 0;
  width: calc(100% + 32px);
  max-width: none;
  margin: 0 -16px;
  padding: 0 8px 8px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  background: #ffffff;
  /* Figma 2157:11200 Frame 2 shadow — only when list scrolls under title */
  box-shadow: none;
  transition: box-shadow 0.15s ease;
}
.ef-payment-history__nav.is-scrolled {
  box-shadow:
    0 8px 16px rgba(30, 33, 32, 0.09),
    0 4px 6px rgba(30, 33, 32, 0.11);
}
.ef-payment-history__nav-title {
  margin: 0;
  flex: 1 1 auto;
  text-align: center;
  font-family: var(--ef-font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #1e2120;
}
.ef-payment-history__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 40px;
  flex-shrink: 0;
  text-decoration: none;
}
.ef-payment-history__icon-btn img {
  display: block;
  width: 24px;
  height: 24px;
}
/* Only this region scrolls */
.ef-payment-history__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 8px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ef-payment-history .ef-payment-list {
  margin: 0;
  flex-shrink: 0;
}
.ef-payment-history__end {
  margin: 0;
  flex-shrink: 0;
  font-family: var(--ef-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #545d5a;
  text-align: center;
}

/* ══════════════════════════════════════
   PAYMENTS PAGE — Figma Make a Payment → Payments Page
   ══════════════════════════════════════ */
.ef-payments__header {
  padding: 4px 0 8px;
}
.ef-payments__title {
  margin: 0;
  font-family: var(--ef-font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 34px;
  color: #1e2120;
}

.ef-next-pay-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e5ebe9;
  border-radius: 20px;
  box-shadow:
    0 4px 8px rgba(30, 33, 32, 0.08),
    0 2px 3px rgba(30, 33, 32, 0.11);
}
.ef-next-pay-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ef-next-pay-card__label {
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0.04em;
  color: #545d5a;
}
.ef-next-pay-card__due {
  font-family: var(--ef-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 22px;
  color: #545d5a;
}
.ef-next-pay-card__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.ef-payments__history-action {
  margin-top: 16px;
}
.ef-payments__full-history {
  margin-top: 16px;
  scroll-margin-top: 24px;
}

/* Skip payment confirm modal */
body.ef-modal-open { overflow: hidden; }
.ef-modal[hidden] { display: none !important; }
.ef-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
/* Step-up OTP must sit above bottom nav / docked footers */
.ef-modal--stepup {
  z-index: 1400;
}
.ef-modal--stepup .ef-stepup-dialog {
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: center;
}
.ef-modal--stepup .ef-modal__title {
  margin: 0 0 8px;
}
.ef-modal--stepup .ef-modal__body {
  margin: 0 0 20px;
  text-align: left;
}
.ef-stepup-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin: 0 0 8px;
}
.ef-stepup-channels {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.ef-stepup-hint {
  margin: 0;
  color: #545d5a;
  font-family: var(--ef-font-body);
  font-size: 13px;
  line-height: 20px;
  text-align: left;
}
.ef-stepup-code-field {
  margin: 0 !important;
  text-align: left;
}
.ef-stepup-error {
  margin: -8px 0 0 !important;
  text-align: left;
}
.ef-stepup-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.ef-stepup-cancel {
  margin-top: 8px;
}
.ef-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(30, 33, 32, 0.45);
}
.ef-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 358px;
  background: #ffffff;
  border: 1px solid #e5ebe9;
  border-radius: 20px;
  box-shadow:
    0 4px 8px rgba(30, 33, 32, 0.08),
    0 2px 3px rgba(30, 33, 32, 0.11);
  padding: 24px 20px 20px;
  text-align: center;
}
.ef-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 12px;
  background: #d8feec;
}
.ef-modal__icon img { width: 28px; height: 28px; display: block; }
.ef-modal__title {
  margin: 0 0 8px;
  font-family: var(--ef-font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  color: #1e2120;
}
.ef-modal__body {
  margin: 0 0 20px;
  font-family: var(--ef-font-body);
  font-size: 14px;
  line-height: 22px;
  color: #545d5a;
  text-align: left;
}
.ef-modal__body strong { color: #1e2120; font-weight: 700; }
.ef-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Figma Full Balance Details modal (2061:6159) */
.ef-modal--balance .ef-modal__backdrop {
  background: rgba(30, 33, 32, 0.5);
}
.ef-balance-modal {
  max-width: 358px;
  padding: 0;
  text-align: left;
  background: #ffffff;
  border: 1px solid #f1f4f3;
  border-radius: 20px;
  box-shadow:
    0 22px 44px rgba(30, 33, 32, 0.11),
    0 10px 16px rgba(30, 33, 32, 0.13);
  overflow: hidden;
}
.ef-balance-modal__title {
  margin: 0;
  padding: 20px 20px 8px;
  font-family: var(--ef-font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #1e2120;
  text-align: left;
}
.ef-balance-details {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  text-align: left;
}
.ef-balance-details__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid #cfd8d5;
}
.ef-balance-details__label {
  font-family: var(--ef-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #545d5a;
}
.ef-balance-details__value {
  font-family: var(--ef-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: #1e2120;
  text-align: right;
  flex-shrink: 0;
}
.ef-balance-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 20px 20px;
}
.ef-balance-modal__actions .ef-btn--outline {
  min-height: 52px;
  border-radius: 12px;
  border-width: 2px;
  font-family: var(--ef-font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #068763;
  border-color: #068763;
  background: #ffffff;
}
.ef-balance-modal__actions .ef-btn--outline:hover {
  background: rgba(216, 254, 236, 0.45);
  color: #016c4e;
  border-color: #016c4e;
}

.ef-modal__dialog--spinner {
  max-width: 220px;
  padding: 28px 20px;
}

/* Documents page spinner (shared with modals) */
.ef-docs-spinner {
  width: 36px;
  height: 36px;
  margin: 0 auto;
  border: 3px solid #d8feec;
  border-top-color: #068763;
  border-radius: 50%;
  animation: ef-spin 0.8s linear infinite;
}
@keyframes ef-spin { to { transform: rotate(360deg); } }

/* ── Documents (Figma 2184:19185) ── */
.ef-docs__intro {
  margin: 0 0 24px;
  font-family: var(--ef-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.14px;
  color: #545d5a;
}

/* ── Insurance (Figma 2347:5273) ── */
.ef-insurance__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ef-insurance .ef-docs__intro {
  margin-bottom: 24px;
}
.ef-insurance-card {
  width: 100%;
  background: #ffffff;
  border: 1px solid #f1f4f3;
  border-radius: 20px;
  box-shadow:
    0 4px 8px rgba(30, 33, 32, 0.08),
    0 2px 3px rgba(30, 33, 32, 0.11);
  box-sizing: border-box;
}
.ef-insurance-card__row {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-height: 60px;
  padding: 16px;
  box-sizing: border-box;
}
.ef-insurance-card__row:not(.ef-insurance-card__row--last)::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  background: #cfd8d5;
}
.ef-insurance-card__label {
  font-family: var(--ef-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #545d5a;
}
.ef-insurance-card__value {
  font-family: var(--ef-font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #1e2120;
  word-break: break-word;
}
/* Upload Documents card: white, #f1f4f3, r20, pad 24/72, gap 12, dual shadow */
.ef-docs-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 24px 71px;
  margin: 0;
  background: #ffffff;
  border: 1px solid #f1f4f3;
  border-radius: 20px;
  box-shadow:
    0 4px 8px rgba(30, 33, 32, 0.08),
    0 2px 3px rgba(30, 33, 32, 0.11);
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}
.ef-docs-upload:hover {
  border-color: #cfd8d5;
  background: #f8fbfa;
}
.ef-docs-upload:focus-visible {
  outline: 2px solid #068763;
  outline-offset: 2px;
}
.ef-docs-upload__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: #d8feec;
  flex-shrink: 0;
  box-sizing: border-box;
}
.ef-docs-upload__icon img {
  display: block;
  width: 32px;
  height: 40px;
}
.ef-docs-upload__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 214px;
}
.ef-docs-upload__title {
  font-family: var(--ef-font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #068763;
}
.ef-docs-upload__sub {
  font-family: var(--ef-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.12px;
  color: #545d5a;
}
.ef-docs__section .ef-docs__section-header {
  padding-top: 28px;
  padding-bottom: 8px;
}
.ef-docs-list {
  background: #ffffff;
  border: 1px solid #f1f4f3;
  border-radius: 20px;
  box-shadow:
    0 4px 8px rgba(30, 33, 32, 0.08),
    0 2px 3px rgba(30, 33, 32, 0.11);
}
.ef-docs-list__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 16px;
  box-sizing: border-box;
  background: #ffffff;
}
.ef-docs-list__row:first-child { border-radius: 20px 20px 0 0; }
.ef-docs-list__row:last-child { border-radius: 0 0 20px 20px; }
.ef-docs-list__row:only-child { border-radius: 20px; }
.ef-docs-list__row:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  background: #cfd8d5;
}
/* Figma latest: Colored Icons + Edit are hidden — name/date + download only */
.ef-docs-list__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 8px;
}
.ef-docs-list__title {
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  color: #0f1c19;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ef-docs-list__meta {
  font-family: var(--ef-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.12px;
  color: #545d5a;
}
.ef-docs-list__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 40px;
  color: #068763;
  text-decoration: none;
  flex-shrink: 0;
}
.ef-docs-list__download .material-symbols-outlined {
  font-size: 32px;
  line-height: 1;
}
.ef-docs-list__download:hover {
  color: #016c4e;
  text-decoration: none;
  background: #f1f4f3;
}
.ef-docs-list__download.is-disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.ef-docs-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding: 24px 71px;
  background: #ffffff;
  border: 1px solid #e5ebe9;
  border-radius: 20px;
  text-align: center;
  box-sizing: border-box;
}
.ef-docs-empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #f1f4f3;
  border: 1px solid #cfd8d5;
  flex-shrink: 0;
  box-sizing: border-box;
}
.ef-docs-empty-state__icon img {
  width: 32px;
  height: 32px;
  display: block;
  filter: brightness(0) saturate(100%) invert(35%) sepia(8%) saturate(481%) hue-rotate(107deg) brightness(94%) contrast(88%);
}
.ef-docs-empty-state__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 214px;
}
.ef-docs-empty-state__title {
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  color: #545d5a;
}
.ef-docs-empty-state__sub {
  font-family: var(--ef-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.12px;
  color: #545d5a;
}
.ef-docs-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 358px;
  z-index: 1200;
  box-sizing: border-box;
}
.ef-docs-toast__inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 16px;
  border-radius: 20px;
  box-shadow:
    0 22px 44px rgba(30, 33, 32, 0.11),
    0 10px 16px rgba(30, 33, 32, 0.13);
  box-sizing: border-box;
}
.ef-docs-toast--success .ef-docs-toast__inner {
  background: #dbfee1;
  border: 1px solid #92efa7;
}
.ef-docs-toast--error .ef-docs-toast__inner {
  background: #fff0ed;
  border: 1px solid #ffc6bf;
}
.ef-docs-toast__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  font-size: 24px;
  line-height: 1;
}
.ef-docs-toast--success .ef-docs-toast__icon img {
  display: block;
  width: 24px;
  height: 24px;
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(624%) hue-rotate(99deg) brightness(92%) contrast(98%);
}
.ef-docs-toast--error .ef-docs-toast__icon { color: #c63933; }
.ef-docs-toast__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 8px;
}
.ef-docs-toast__title {
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}
.ef-docs-toast--success .ef-docs-toast__title { color: #036e30; }
.ef-docs-toast--error .ef-docs-toast__title { color: #c63933; }
.ef-docs-toast__body {
  font-family: var(--ef-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.14px;
}
.ef-docs-toast--success .ef-docs-toast__body { color: #036e30; }
.ef-docs-toast--error .ef-docs-toast__body { color: #c63933; }
.ef-docs-toast__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -4px -4px 0 0;
  padding: 0;
  border: none;
  border-radius: 40px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.ef-docs-toast--success .ef-docs-toast__close { color: #036e30; }
.ef-docs-toast--error .ef-docs-toast__close { color: #a12623; }
.ef-docs-toast__close .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}

/* ── Payoff Info (Figma 2157:15631) ── */
.ef-payoff__intro {
  margin: 0 0 24px;
  font-family: var(--ef-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.14px;
  color: #545d5a;
}
/* Payoff Generation Card: white, #e5ebe9, r20, pad 20, dual shadow */
.ef-payoff-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e5ebe9;
  border-radius: 20px;
  box-shadow:
    0 4px 8px rgba(30, 33, 32, 0.08),
    0 2px 3px rgba(30, 33, 32, 0.11);
  box-sizing: border-box;
}
.ef-payoff-card__balance {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 16px;
}
.ef-payoff-card__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0;
}
.ef-payoff-card__label {
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0.56px;
  color: #545d5a;
}
.ef-payoff-card__date {
  font-family: var(--ef-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.12px;
  color: #545d5a;
  flex-shrink: 0;
}
.ef-payoff-card .ef-btn {
  min-height: 52px;
  border-radius: 12px;
}
.ef-payoff__note {
  margin-top: 24px;
}
/* Section Header: padTop 28, padBottom 8 */
.ef-payoff__statements-section .ef-payoff__section-header {
  padding-top: 28px;
  padding-bottom: 8px;
}
/* Empty: Figma 2157:16661 — white, #e5ebe9, r20, pad 24/72, gap 8, center
   Text: title Jakarta 14/700 lh22 #545d5a; body Inter 12/400 lh18 ls0.12 #545d5a
   Text column 214×62 (gap 4) → body wraps to 2 lines */
.ef-payoff-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* Border-box: 72px Figma pad minus 1px border each side keeps ~214px content */
  padding: 24px 71px;
  background: #ffffff;
  border: 1px solid #e5ebe9;
  border-radius: 20px;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
}
.ef-payoff-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #f1f4f3;
  border: 1px solid #cfd8d5;
  flex-shrink: 0;
  box-sizing: border-box;
}
.ef-payoff-empty__icon img {
  width: 32px;
  height: 32px;
  display: block;
  /* document.svg is green — tint to #545d5a for empty state */
  filter: brightness(0) saturate(100%) invert(35%) sepia(8%) saturate(481%) hue-rotate(107deg) brightness(94%) contrast(88%);
}
.ef-payoff-empty__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 214px;
  max-width: 100%;
  box-sizing: border-box;
}
.ef-payoff-empty__title {
  margin: 0;
  width: 100%;
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0;
  color: #545d5a;
  text-align: center;
}
.ef-payoff-empty__sub {
  margin: 0;
  width: 100%;
  font-family: var(--ef-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.12px;
  color: #545d5a;
  text-align: center;
}
/* List card: border #f1f4f3, dual shadow, white rows (no overflow — clips shadow) */
.ef-payoff-list {
  background: #ffffff;
  border: 1px solid #f1f4f3;
  border-radius: 20px;
  box-shadow:
    0 4px 8px rgba(30, 33, 32, 0.08),
    0 2px 3px rgba(30, 33, 32, 0.11);
}
/* Row pad 16; inset divider #cfd8d5 between items */
.ef-payoff-list__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 16px;
  box-sizing: border-box;
  background: #ffffff;
}
.ef-payoff-list__row:first-child { border-radius: 20px 20px 0 0; }
.ef-payoff-list__row:last-child { border-radius: 0 0 20px 20px; }
.ef-payoff-list__row:only-child { border-radius: 20px; }
.ef-payoff-list__row:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  background: #cfd8d5;
}
.ef-payoff-list__main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.ef-payoff-list__doc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #d8feec;
  flex-shrink: 0;
}
.ef-payoff-list__doc-icon img {
  width: 32px;
  height: 32px;
  display: block;
}
.ef-payoff-list__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ef-payoff-list__title {
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  color: #0f1c19;
}
.ef-payoff-list__meta {
  font-family: var(--ef-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.12px;
  color: #545d5a;
}
.ef-payoff-list__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 40px;
  color: #068763;
  text-decoration: none;
  flex-shrink: 0;
}
.ef-payoff-list__download .material-symbols-outlined {
  font-size: 32px;
  line-height: 1;
}
.ef-payoff-list__download:hover {
  color: #016c4e;
  text-decoration: none;
  background: #f1f4f3;
}
/* Success toast — Figma Alerts after generation */
.ef-payoff-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 358px;
  z-index: 1200;
  box-sizing: border-box;
}
.ef-payoff-toast__inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 16px;
  background: #dbfee1;
  border: 1px solid #92efa7;
  border-radius: 20px;
  box-shadow:
    0 22px 44px rgba(30, 33, 32, 0.11),
    0 10px 16px rgba(30, 33, 32, 0.13);
  box-sizing: border-box;
}
.ef-payoff-toast__check {
  display: inline-flex;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.ef-payoff-toast__check img {
  display: block;
  width: 24px;
  height: 24px;
  /* tint toward Figma #036e30 */
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(624%) hue-rotate(99deg) brightness(92%) contrast(98%);
}
.ef-payoff-toast__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 16px;
}
.ef-payoff-toast__title {
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: #036e30;
}
.ef-payoff-toast__body {
  font-family: var(--ef-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.14px;
  color: #545d5a;
}
.ef-payoff-toast__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -4px -4px 0 0;
  padding: 0;
  border: none;
  border-radius: 40px;
  background: #dbfee1;
  color: #036e30;
  cursor: pointer;
  flex-shrink: 0;
}
.ef-payoff-toast__close .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}

/* Loan summary 2-column table */
.ef-summary-card {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  overflow: hidden;
}
.ef-summary-col { display: flex; flex-direction: column; }
.ef-summary-divider { background: var(--ef-gray-100); }
.ef-summary-item {
  padding: 16px;
  border-bottom: 1px solid var(--ef-gray-100);
}
.ef-summary-item:last-child { border-bottom: none; }
.ef-summary-item__label {
  font-family: var(--ef-font-display);
  font-size: 12px;
  font-weight: var(--ef-font-weight-medium);
  letter-spacing: 0.04em;
  line-height: 18px;
  color: #5a7a6f;
  margin-bottom: 4px;
}
.ef-summary-item__value {
  font-family: var(--ef-font-display);
  font-size: 16px;
  font-weight: var(--ef-font-weight-bold);
  line-height: 24px;
  color: #0f1c19;
}

/* ══════════════════════════════════════
   BOTTOM NAV — Figma Menu Bar
   ══════════════════════════════════════ */
.ef-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: 0 8px calc(24px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
  background: transparent;
  border: none;
  box-shadow: none;
}
.ef-bottom-nav__bar {
  pointer-events: auto;
  width: 100%;
  max-width: 374px;
  display: flex;
  align-items: stretch;
  background: var(--ef-color-bg-surface);
  border-radius: 16px;
  box-shadow: var(--ef-shadow-2);
  overflow: hidden;
}
.ef-bottom-nav__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  color: var(--ef-green-600);
  text-decoration: none;
  font-family: var(--ef-font-display);
  font-size: 10px;
  font-weight: var(--ef-font-weight-bold);
  letter-spacing: 0.04em;
  line-height: 16px;
}
.ef-bottom-nav__chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 55px;
  padding: 4px 12px;
  border-radius: 12px;
  background: transparent;
}
.ef-bottom-nav__icon {
  width: 24px;
  height: 24px;
  display: block;
  opacity: 0.85;
}
.ef-bottom-nav__item:hover { color: var(--ef-green-700); text-decoration: none; }
.ef-bottom-nav__item.is-active { color: var(--ef-green-700); }
.ef-bottom-nav__item.is-active .ef-bottom-nav__chip { background: var(--ef-green-100); }
.ef-bottom-nav__item.is-active .ef-bottom-nav__icon { opacity: 1; }

/* Keep portal at Figma mobile frame width (390). Do not widen on desktop. */
@media (min-width: 720px) {
  .ef-page--portal,
  .ef-dashboard {
    max-width: 390px;
  }
}

/* ══════════════════════════════════════
   MAKE A PAYMENT — 3-step Figma flow
   ══════════════════════════════════════ */
.ef-make-pay {
  padding-bottom: 24px;
  width: 100%;
  max-width: 358px; /* Figma content column: 390 − 16 − 16 */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
/*
  Figma Make-a-Payment frame = 390 wide.
  Page supplies the 16px gutters; content/cards/button = 358.
  Nav is full-bleed 390 with 8px inset (not 16).
*/
.ef-page--portal:has(.ef-make-pay) {
  max-width: 390px;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
}
.ef-page--portal:has(.ef-make-pay) .ef-make-pay__nav {
  width: calc(100% + 32px);
  max-width: none;
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 8px;
  padding-right: 8px;
  box-sizing: border-box;
}
.ef-page--portal:has(.ef-make-pay) .ef-make-pay__footer--dock {
  width: 100%;
  max-width: 358px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
/*
  Configure (1873:1682) + Confirm (2003:3407) + Success (2003:3495):
  Button Wrap pinned to bottom of the viewport.
*/
.ef-page--portal:has(.ef-make-pay--configure),
.ef-page--portal:has(.ef-make-pay--confirm),
.ef-page--portal:has(.ef-make-pay--success) {
  min-height: 100dvh;
  min-height: 100svh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding-top: 0;
  padding-bottom: 0;
}
.ef-make-pay--configure,
.ef-make-pay--confirm,
.ef-make-pay--success {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-bottom: 0;
}
/* Configure / Confirm: content top-aligned; CTA docks via footer--dock */
.ef-make-pay__form--configure,
.ef-make-pay__form--confirm {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/*
  Figma Configure Content (1873:1682):
  padTop 8; Payment Date header padBottom 8 only;
  Payment Amount / Method headers padTop 28 + padBottom 8.
*/
.ef-make-pay--configure {
  padding-top: 0;
}
.ef-make-pay--configure .ef-dash-section .ef-section-header {
  padding-top: 28px;
  padding-bottom: 8px;
}
.ef-make-pay--configure .ef-make-pay__date-section .ef-section-header {
  padding-top: 0; /* Figma: Payment Date header has padBottom 8 only */
  padding-bottom: 8px;
}
/* Figma Confirm Content itemSpacing 24 (2003:3407) */
.ef-make-pay--confirm .ef-confirm-card {
  margin-bottom: 0;
}
.ef-make-pay--confirm .ef-notice-card {
  margin-top: 24px;
}
.ef-make-pay__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  margin: 0 0 8px;
}
.ef-make-pay__nav-title {
  margin: 0;
  flex: 1;
  text-align: center;
  font-family: var(--ef-font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #1e2120;
}
/* Figma Icon Button wrap: 36×36 */
.ef-make-pay__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 36px;
  text-decoration: none;
}
.ef-make-pay__icon-btn img { display: block; width: 24px; height: 24px; }

.ef-info-row-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e5ebe9;
  border-radius: 20px;
  box-shadow:
    0 4px 8px rgba(30, 33, 32, 0.08),
    0 2px 3px rgba(30, 33, 32, 0.11);
}
.ef-info-row-card--flush {
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 16px; /* Figma Card pad 16 all sides */
}
.ef-info-row-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #d8feec;
  flex-shrink: 0;
}
.ef-info-row-card__icon img { width: 32px; height: 32px; display: block; }
.ef-info-row-card__text { flex: 1; min-width: 0; }
.ef-info-row-card__title {
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  color: #0f1c19;
}
.ef-info-row-card__sub {
  font-family: var(--ef-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #545d5a;
}
.ef-info-row-card__vdivider {
  width: 1px;
  align-self: stretch;
  background: #cfd8d5;
  flex-shrink: 0;
  margin: 4px 0;
}

.ef-date-field {
  position: relative;
}
.ef-date-field.is-open .ef-info-row-card,
.ef-date-field.is-open .ef-change-schedule__date-card {
  border-color: #068763;
}

.ef-method-field:has(#viewBankBtn) .ef-info-row-card {
  cursor: pointer;
}
.ef-method-field.is-open .ef-info-row-card {
  border-color: #068763;
}
.ef-method-details {
  margin-top: 8px;
  background: #ffffff;
  border: 1px solid #e5ebe9;
  border-radius: 20px;
  overflow: hidden;
}
.ef-method-details .ef-profile-row:last-child {
  border-bottom: 1px solid #cfd8d5;
}
.ef-method-details__link {
  display: block;
  padding: 12px 16px 16px;
  text-align: center;
  font-family: var(--ef-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  color: #068763;
  text-decoration: none;
}
.ef-method-details__link:hover {
  text-decoration: underline;
}

/* Material-style date picker — anchored under Payment Date / Edit */
.ef-mdp {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: min(320px, calc(100vw - 48px));
  padding: 12px 12px 8px;
  background: #ffffff;
  border: 1px solid #e5ebe9;
  border-radius: 16px;
  box-shadow:
    0 8px 16px rgba(30, 33, 32, 0.12),
    0 2px 4px rgba(30, 33, 32, 0.08);
}
.ef-mdp__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 8px;
}
.ef-mdp__month {
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: 700;
  color: #1e2120;
  text-align: center;
  flex: 1;
}
.ef-mdp__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 18px;
  background: transparent;
  color: #068763;
  cursor: pointer;
  padding: 0;
}
.ef-mdp__nav:hover { background: #eefff7; }
.ef-mdp__nav .material-symbols-outlined { font-size: 22px; }

.ef-mdp__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
  text-align: center;
}
.ef-mdp__dow span {
  font-family: var(--ef-font-display);
  font-size: 11px;
  font-weight: 700;
  line-height: 28px;
  color: #545d5a;
}

.ef-mdp__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.ef-mdp__day {
  width: 100%;
  aspect-ratio: 1;
  max-width: 40px;
  max-height: 40px;
  margin: 0 auto;
  border: none;
  border-radius: 20px;
  background: transparent;
  font-family: var(--ef-font-display);
  font-size: 13px;
  font-weight: 600;
  color: #1e2120;
  cursor: pointer;
  padding: 0;
}
.ef-mdp__day--empty {
  pointer-events: none;
  visibility: hidden;
}
.ef-mdp__day:hover:not(:disabled) { background: #eefff7; color: #016c4e; }
.ef-mdp__day.is-today:not(.is-selected) {
  box-shadow: inset 0 0 0 1.5px #068763;
  color: #068763;
}
.ef-mdp__day.is-selected {
  background: #068763;
  color: #ffffff;
}
.ef-mdp__day.is-selected:hover { background: #016c4e; color: #ffffff; }
.ef-mdp__day--disabled,
.ef-mdp__day:disabled {
  color: #b6c1bd;
  cursor: not-allowed;
  background: transparent;
}

.ef-mdp__actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 8px;
  padding-top: 4px;
}
.ef-mdp__action {
  border: none;
  background: transparent;
  font-family: var(--ef-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #068763;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.ef-mdp__action:hover { background: #eefff7; }
.ef-mdp__action--primary { color: #016c4e; }

/*
  Figma Payment Amounts (1873:1682):
  - container itemSpacing = 8
  - unselected: 1px #cfd8d5, no shadow, h≈76
  - selected: 2px #068763 + dual drop shadow, h≈78
*/
.ef-pay-options {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Figma Payment Frequency Amounts itemSpacing */
}
.ef-pay-option {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0; /* kill Bootstrap label { margin-bottom: .5rem } — was doubling the 8px gap */
  padding: 16px;
  background: #ffffff;
  border: 1px solid #cfd8d5;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: none;
  box-sizing: border-box;
}
.ef-pay-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ef-pay-option__radio {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  border: 2px solid #545d5a;
  flex-shrink: 0;
  position: relative;
  background: #ffffff;
}
.ef-pay-option.is-selected {
  border: 2px solid #068763;
  padding: 15px; /* keep outer size stable when border 1→2 */
  box-shadow:
    0 4px 8px rgba(30, 33, 32, 0.08),
    0 2px 3px rgba(30, 33, 32, 0.11);
}
.ef-pay-option.is-selected .ef-pay-option__radio {
  border-color: #068763;
}
.ef-pay-option.is-selected .ef-pay-option__radio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 6px;
  background: #068763;
}
.ef-pay-option__body { display: flex; flex-direction: column; min-width: 0; }
.ef-pay-option__title {
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: 800;
  line-height: 22px;
  color: #1e2120;
}
.ef-pay-option__sub {
  font-family: var(--ef-font-body);
  font-size: 12px;
  line-height: 18px;
  color: #545d5a;
}
.ef-pay-option:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }

.ef-pay-option--warning {
  border-color: var(--ef-yellow-300);
  background: var(--ef-yellow-50);
}
.ef-pay-option--warning .ef-pay-option__sub {
  color: var(--ef-yellow-600);
  font-weight: 600;
}
.ef-pay-option--warning.is-selected {
  border-color: var(--ef-yellow-600);
}
.ef-pay-option--warning.is-selected .ef-pay-option__radio {
  border-color: var(--ef-yellow-600);
}
.ef-pay-option--warning.is-selected .ef-pay-option__radio::after {
  background: var(--ef-yellow-600);
}

.ef-make-pay__other {
  display: none;
  margin-top: 12px;
}
.ef-make-pay__other.is-open { display: block; }
.ef-make-pay__other-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--ef-font-display);
  font-size: 12px;
  font-weight: 700;
  color: #545d5a;
}
.ef-make-pay__other-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #cfd8d5;
  border-radius: 12px;
  font-family: var(--ef-font-display);
  font-size: 16px;
  font-weight: 700;
  color: #1e2120;
  background: #ffffff;
}

.ef-make-pay__footer {
  margin-top: 28px;
  padding-bottom: 8px;
}
/* Figma Button Wrap — absolute-bottom equivalent via flex */
.ef-make-pay__footer--dock {
  margin-top: auto;
  flex-shrink: 0;
  width: 100%;
  padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  background: transparent;
}
.ef-make-pay__hint {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12px;
  color: #545d5a;
}

.ef-make-pay__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 0 20px;
  text-align: center;
}
.ef-make-pay__price-label {
  font-family: var(--ef-font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #545d5a;
}
/*
  Figma Price: pad 16 top / 32 bottom (32px = gap before Informational Card),
  itemSpacing 8 between amount and “Submitted…”
*/
.ef-make-pay__price--success {
  padding: 16px 0 0;
  gap: 8px;
  width: 100%;
  margin: 0;
}
.ef-make-pay__price--success .ef-amount--hero {
  height: auto;
  min-height: 0;
  align-items: flex-end;
  line-height: 0;
}
.ef-make-pay__price--success .ef-amount__currency {
  height: auto;
  align-self: center;
}
.ef-make-pay__price--success .ef-amount__dollars {
  font-size: 48px;
  line-height: 1;
  letter-spacing: -1px;
}
.ef-make-pay__price--success .ef-amount__cents {
  padding-bottom: 0;
  margin-top: 0;
  font-size: 28px;
  line-height: 1;
}
.ef-make-pay__submitted-meta {
  display: block;
  margin: 0 !important;
  padding: 0;
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: #545d5a;
}
.ef-confirm-card {
  background: #ffffff;
  border: 1px solid #e5ebe9;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 4px 8px rgba(30, 33, 32, 0.08),
    0 2px 3px rgba(30, 33, 32, 0.11);
  margin-bottom: 16px;
}
.ef-confirm-card__divider {
  height: 1px;
  background: #cfd8d5;
  margin: 0 16px; /* Figma Divider Line horizontal inset 16 */
}

/* Figma Informational Card: white, #e5ebe9 1px, r20, pad 12/16, gap 12, counterAxis = top (icon + text share same y) */
.ef-notice-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #e5ebe9;
  border-radius: 20px;
  box-sizing: border-box;
}
.ef-notice-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #ecf4ff;
  flex-shrink: 0;
}
.ef-notice-card__icon img { width: 20px; height: 20px; display: block; }
.ef-notice-card__text {
  margin: 0 !important;
  flex: 1;
  min-width: 0;
  font-family: var(--ef-font-body);
  font-size: 12px;
  line-height: 18px;
  color: #545d5a;
}
.ef-notice-card__text strong { font-weight: 700; color: #1e2120; }
.ef-notice-card--success .ef-notice-card__icon { background: #d8feec; }
.ef-notice-card--warning .ef-notice-card__icon { background: #fff5e5; }
.ef-notice-card--warning .ef-notice-card__text { color: #545d5a; }
.ef-notice-card--info .ef-notice-card__icon { background: #ecf4ff; }
.ef-notice-card--neutral .ef-notice-card__icon,
.ef-notice-card--asterisk .ef-notice-card__icon { background: #f1f4f3; }
.ef-notice-card--info,
.ef-notice-card--neutral,
.ef-notice-card--asterisk {
  border-color: #e5ebe9;
}

/* Figma Skip a Payment (2156:9133 / 2156:9147) */
.ef-skip-payment__intro {
  margin: 0;
  font-family: var(--ef-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #545d5a;
}
/* Figma Section Header: padTop 20, padBottom 8 → 8px to card */
.ef-skip-payment.ef-make-pay--configure .ef-dash-section .ef-section-header {
  padding-top: 20px;
  padding-bottom: 8px;
}
/* Figma Current Schedule (2156:9140 / 2156:9156):
   stroke #f1f4f3 1px OUTSIDE, r20, row fills white,
   DROP_SHADOW 0/4/8 @0.08 + 0/2/3 @0.11 — never overflow:hidden (clips shadow) */
.ef-detail-table {
  background: #ffffff;
  border: 1px solid #f1f4f3;
  border-radius: 20px;
  box-shadow:
    0 4px 8px rgba(30, 33, 32, 0.08),
    0 2px 3px rgba(30, 33, 32, 0.11);
}
.ef-detail-table__row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px;
  background: #ffffff;
}
.ef-detail-table__row:first-child {
  border-radius: 20px 20px 0 0;
}
.ef-detail-table__row:last-child {
  border-radius: 0 0 20px 20px;
}
.ef-detail-table__row:only-child {
  border-radius: 20px;
}
/* Inset divider: 16px from card edges (Figma line 324/326 in card) */
.ef-detail-table__row:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  background: #cfd8d5;
}
.ef-detail-table__label {
  font-family: var(--ef-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #545d5a;
}
.ef-detail-table__value {
  font-family: var(--ef-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: #1e2120;
  text-align: right;
}
/* Figma notices Content: padTop 24, gap 8, padBottom 24 */
.ef-skip-payment__notices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 24px 0 0;
  padding-bottom: 24px;
}
/* Figma Button Wrap: VERTICAL gap=8, pad 16; buttons 52 tall, r=12 */
.ef-skip-payment__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px));
}
.ef-skip-payment__actions .ef-btn {
  margin: 0;
  min-height: 52px;
  height: 52px;
  border-radius: 12px;
  font-family: var(--ef-font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  box-sizing: border-box;
}
.ef-skip-payment__actions .ef-btn--primary {
  border-width: 0;
}
.ef-skip-payment__actions .ef-btn--outline {
  background: #ffffff;
  border-width: 2px;
  border-color: #068763;
  color: #068763;
}
/* Figma 2156:9147 Content: main=CENTER, cross=CENTER, pad L/R 16 (page), padBottom 64 */
.ef-skip-payment__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 1 1 auto;
  justify-content: center;
  padding: 0 0 64px;
  gap: 0;
  text-align: center;
  box-sizing: border-box;
}
/* Confirmation Graphic: VERTICAL gap=12, pad L/R 16 */
.ef-skip-payment__success-graphic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}
.ef-skip-payment__success-icon {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  line-height: 0;
}
.ef-skip-payment__success-icon img {
  display: block;
  width: 72px;
  height: 72px;
}
.ef-skip-payment__success-title {
  margin: 0;
  font-family: var(--ef-font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: #1e2120;
}
.ef-skip-payment__success-copy {
  margin: 0;
  width: 100%;
  max-width: 326px;
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: #545d5a;
  text-align: center;
}
/* Price: padTop 24 (text→card), padBottom 32, gap 24 */
.ef-skip-payment__price {
  width: 100%;
  padding: 24px 0 32px;
  box-sizing: border-box;
}
.ef-skip-payment__summary {
  width: 100%;
  margin: 0;
  text-align: left;
}
.ef-skip-payment__next-skip {
  margin: 16px 0 0;
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: #545d5a;
  text-align: center;
}

/* Figma Change Schedule (2061:6099 / 4785 / 4950 / 5228) */
.ef-change-schedule__intro {
  margin: 0 0 0;
  font-family: var(--ef-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #545d5a;
}
.ef-change-schedule.ef-make-pay--configure .ef-dash-section .ef-section-header,
.ef-change-schedule.ef-make-pay--confirm .ef-dash-section .ef-section-header,
.ef-change-schedule__section-header {
  padding-top: 20px;
  padding-bottom: 8px;
}
/* Figma CS2 First Payment Date / CS3 What We Calculated: padTop 28 */
.ef-change-schedule__section-header--date,
.ef-change-schedule__section-header--calc {
  padding-top: 28px;
}
.ef-change-schedule__freq {
  margin: 0;
}
.ef-change-schedule__freq-option {
  align-items: center;
}
.ef-change-schedule__freq-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.ef-change-schedule__freq-left {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  padding-right: 8px;
}
.ef-change-schedule__freq-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* Figma Badge Type=Brand Green, Size=Small */
.ef-change-schedule__current-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  min-height: 16px;
  border-radius: 4px;
  background: #eefff7;
  border: 1px solid #8aedc5;
  color: #016c4e;
  font-family: var(--ef-font-display);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0;
}
.ef-change-schedule__freq-amount {
  flex-shrink: 0;
  font-family: var(--ef-font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #1e2120;
  text-align: right;
}
/* Figma Content padBottom 24 between frequency cards and Informational Card */
.ef-change-schedule__freq-note {
  margin-top: 24px;
}
.ef-change-schedule__date-card,
.ef-change-schedule__choice-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #f1f4f3;
  border-radius: 20px;
  box-shadow:
    0 4px 8px rgba(30, 33, 32, 0.08),
    0 2px 3px rgba(30, 33, 32, 0.11);
  box-sizing: border-box;
}
/* Figma CS3 “Cards”: one outer frame, two rows + inset divider */
.ef-change-schedule__chose-card {
  background: #ffffff;
  border: 1px solid #f1f4f3;
  border-radius: 20px;
  box-shadow:
    0 4px 8px rgba(30, 33, 32, 0.08),
    0 2px 3px rgba(30, 33, 32, 0.11);
  overflow: hidden;
  box-sizing: border-box;
}
.ef-change-schedule__chose-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #ffffff;
  box-sizing: border-box;
}
.ef-change-schedule__chose-row:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  background: #cfd8d5;
}
.ef-change-schedule__date-card-icon,
.ef-change-schedule__choice-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #d8feec;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ef-change-schedule__date-card-icon img,
.ef-change-schedule__choice-icon img {
  width: 32px;
  height: 32px;
  display: block;
}
.ef-change-schedule__date-card-text,
.ef-change-schedule__choice-text {
  flex: 1 1 auto;
  min-width: 0;
}
.ef-change-schedule__date-card-label,
.ef-change-schedule__choice-label {
  font-family: var(--ef-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #545d5a;
}
.ef-change-schedule__date-card-value,
.ef-change-schedule__choice-value {
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  color: #1e2120;
}
.ef-change-schedule__choice-meta {
  font-weight: 400;
  color: #545d5a;
}
/* Figma CS2 date Header fill */
.ef-change-schedule__date-card-value {
  color: #0f1c19;
}
.ef-change-schedule__date-edit {
  flex-shrink: 0;
  margin: 0;
  padding: 0 0 0 12px;
  border: 0;
  border-left: 1px solid #cfd8d5;
  background: transparent;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  color: #068763;
  text-decoration: none;
  cursor: pointer;
}
.ef-change-schedule__date-edit:hover {
  color: #016c4e;
  text-decoration: none;
}
/* Figma: What We Calculated Content padBottom 24 before info card */
.ef-change-schedule__calc-section {
  padding-bottom: 24px;
}
.ef-change-schedule.ef-make-pay--confirm .ef-change-schedule__confirm-note {
  margin-top: 0;
}

/*
  Figma CS4 (2061:5228):
  Content pad L/R 16 (page already provides this) — don’t double-inset the graphic.
  Confirmation Graphic gap 12; Price padTop 24 / padBottom 32; table r20 #f1f4f3 + dual shadow.
*/
.ef-change-schedule.ef-make-pay--success .ef-skip-payment__success-graphic {
  padding-left: 0;
  padding-right: 0;
}
.ef-change-schedule.ef-make-pay--success .ef-skip-payment__success-title {
  text-align: center;
  max-width: 315px;
}
.ef-change-schedule.ef-make-pay--success .ef-skip-payment__price {
  padding-top: 24px;
  padding-bottom: 32px;
}
.ef-change-schedule.ef-make-pay--success .ef-skip-payment__summary {
  max-width: 356px;
  margin-left: auto;
  margin-right: auto;
}
.ef-make-pay--confirm .ef-notice-card--info,
.ef-make-pay--confirm .ef-notice-card--warning {
  margin-top: 0;
  margin-bottom: 0;
}

/* Figma Content: vertical, main=CENTER — pack children, center the group */
.ef-make-pay__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  flex: 1 1 auto;
  justify-content: center;
  padding: 0;
  gap: 0;
}
/* Figma “Payment Submitted” cluster: icon + title, gap 12 */
.ef-make-pay__success-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
/* Figma success icon is a single 72×72 asset (mint disc + outline check already baked in) */
.ef-make-pay__success-icon {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  line-height: 0;
}
.ef-make-pay__success-icon img {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0;
  padding: 0;
  border: 0;
}
.ef-make-pay__success-title {
  margin: 0;
  font-family: var(--ef-font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: #1e2120;
}
/* 32px gap Submitted… → Processing… (Figma Price paddingBottom) */
.ef-make-pay__success > .ef-notice-card {
  width: 100%;
  text-align: left;
  margin-top: 32px;
}

/* ── Profile (Figma 2247:25898 / 2247:27375 / 2247:27397) ── */
.ef-profile {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  padding-bottom: 8px;
}

.ef-profile__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 0;
}

.ef-profile__logout {
  margin: 0;
  flex: 0 0 auto;
}

.ef-profile__logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 12px;
  border: 2px solid #068763;
  border-radius: 12px;
  background: transparent;
  color: #068763;
  font-family: var(--ef-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  cursor: pointer;
}

.ef-profile__logout-btn .material-symbols-outlined {
  font-size: 20px;
}

.ef-profile__logout-btn:hover {
  background: rgba(216, 254, 236, 0.45);
  color: #016c4e;
  border-color: #016c4e;
}

.ef-profile__block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.ef-profile__section-header {
  margin: 0;
  padding: 0;
}

.ef-profile__title {
  margin: 0;
  font-family: var(--ef-font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 34px;
  color: #1e2120;
}

.ef-profile-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #f1f4f3;
  border-radius: 20px;
  box-shadow:
    0 4px 8px rgba(30, 33, 32, 0.08),
    0 2px 3px rgba(30, 33, 32, 0.11);
}

.ef-profile-card--edit {
  gap: 20px;
}

.ef-profile-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.ef-profile-card .ef-btn--outline,
.ef-profile-card .ef-btn--primary {
  border-radius: 12px;
}

.ef-profile-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.ef-profile-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-height: 56px;
  padding: 6px 16px 8px;
  border-bottom: 1px solid #cfd8d5;
}

.ef-profile-row:last-child {
  border-bottom: none;
}

.ef-profile-row__label {
  font-family: var(--ef-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #545d5a;
}

.ef-profile-row__value {
  font-family: var(--ef-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #1e2120;
  word-break: break-word;
}

.ef-profile-field {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-height: 56px;
  width: 100%;
  margin: 0;
  padding: 6px 16px 8px;
  background: #f1f4f3;
  border: 1px solid #838d8a;
  border-radius: 12px;
  box-sizing: border-box;
}

.ef-profile-field--select {
  padding-right: 44px;
}

.ef-profile-field__label {
  font-family: var(--ef-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #545d5a;
}

.ef-profile-field__input {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--ef-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #1e2120;
  appearance: none;
  -webkit-appearance: none;
}

.ef-profile-field__input:focus {
  outline: none;
}

.ef-profile-field:focus-within {
  border-color: #068763;
  box-shadow: 0 0 0 1px #068763;
}
.ef-profile-field--error {
  border-color: #c63933;
}
.ef-profile-field--error:focus-within {
  border-color: #c63933;
  box-shadow: 0 0 0 1px #c63933;
}
.ef-field-group > .ef-profile-field__error,
.ef-field-group > .ef-profile-field__hint {
  margin-top: -12px;
}

.ef-profile-field__chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: #6c7672;
  pointer-events: none;
}

.ef-profile-field__error {
  margin: -12px 0 0;
  font-family: var(--ef-font-body);
  font-size: 12px;
  line-height: 18px;
  color: #c63933;
}

.ef-profile-field__hint {
  margin: -12px 0 0;
  font-family: var(--ef-font-body);
  font-size: 12px;
  line-height: 18px;
  color: #545d5a;
}

/* ── Banking Info (Figma 2247:26552 / 2283:5726 / 2283:5744) ── */
.ef-banking {
  gap: 0;
}
.ef-banking .ef-profile-card {
  margin-top: 8px;
}