/* ══════════════════════════════════════════════════════
   theme-modals.css — InvoiceFlow Pro v3
   Enhancements only — core animation is in theme-pages.css
   ══════════════════════════════════════════════════════ */

/* Sticky modal header */
.modal-t {
  position: sticky;
  top: -24px;       /* offset the modal padding */
  margin: -24px -24px 16px -24px;
  padding: 16px 24px 12px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  border-radius: var(--r3) var(--r3) 0 0;
  z-index: 2;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--s2);
}

/* Sticky modal footer */
.modal-f {
  position: sticky;
  bottom: -24px;
  margin: 16px -24px -24px -24px;
  padding: 12px 24px;
  background: var(--white);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r3) var(--r3);
  z-index: 2;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Thin scrollbar inside modal */
.modal {
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}
.modal::-webkit-scrollbar       { width: 5px; }
.modal::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 10px; }