@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* Typography */
  --ff-sans        : "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ff-mono        : "JetBrains Mono", monospace;
  --font-base      : 0.9375rem;

  /* Palette - Modern Healthcare Slate & Clinical Sky */
  --bg-app         : #f8fafc;
  --surface-card   : #ffffff;
  --surface-subtle : #f1f5f9;

  --text-main      : #0f172a;
  --text-muted     : #64748b;
  --text-subtle    : #94a3b8;

  --primary        : #0284c7;
  --primary-hover  : #0369a1;
  --primary-light  : #e0f2fe;

  --nav-bg         : #0f172a;
  --nav-text       : #f8fafc;
  --nav-hover      : #1e293b;

  --border         : #e2e8f0;
  --border-focus   : #38bdf8;

  /* Semantic Alerts */
  --success        : #10b981;
  --success-bg     : #ecfdf5;
  --success-text   : #065f46;

  --warning        : #f59e0b;
  --warning-bg     : #fffbeb;
  --warning-text   : #92400e;

  --danger         : #ef4444;
  --danger-bg      : #fef2f2;
  --danger-text    : #991b1b;

  /* Elevation & Geometry */
  --shadow-sm      : 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md      : 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg      : 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --radius         : 10px;
}

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

::placeholder {
  opacity : 0.6;
  color   : var(--text-muted);
}

body {
  background-color       : var(--bg-app);
  color                  : var(--text-main);
  font-family            : var(--ff-sans);
  font-size              : var(--font-base);
  line-height            : 1.5;
  margin                 : 0;
  padding                : 0;
  min-height             : 100vh;
  display                : flex;
  flex-direction         : column;
  -webkit-font-smoothing : antialiased;
}

/* ==========================================================================
   Header & Top Brand Bar
   ========================================================================== */
header {
  background      : #ffffff;
  border-bottom   : 1px solid var(--border);
  padding         : 0.75rem 1.75rem;
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  gap             : 1.5rem;
  box-shadow      : var(--shadow-sm);
  position        : relative;
  z-index         : 10;
}

.header-brand {
  display     : flex;
  align-items : center;
}

.header-brand .brand-link {
  display         : inline-flex;
  align-items     : center;
  gap             : 0.85rem;
  text-decoration : none;
}

.header-brand .brand-logo {
  height  : 52px;
  width   : auto;
  display : block;
}

header .logo {
  height              : 42px;
  width               : 160px;
  background-image    : url("/assets/images/logo-portal.svg");
  background-repeat   : no-repeat;
  background-position : left center;
  background-size     : contain;
}

.portal-tag {
  font-size      : 0.75rem;
  font-weight    : 700;
  text-transform : uppercase;
  letter-spacing : 0.06em;
  color          : var(--primary);
  background     : var(--primary-light);
  padding        : 0.2rem 0.55rem;
  border-radius  : 4px;
}

header .names {
  display     : flex;
  align-items : center;
  gap         : 1rem;
}

header .names .practice-name a {
  color           : var(--text-muted);
  font-size       : 0.85rem;
  font-weight     : 600;
  text-decoration : none;
  padding-right   : 0.75rem;
  border-right    : 1px solid var(--border);
  transition      : color 0.15s ease;
}

header .names .practice-name a:hover {
  color : var(--text-main);
}

.user-pill {
  display       : inline-flex;
  align-items   : center;
  gap           : 0.5rem;
  background    : var(--surface-subtle);
  padding       : 0.25rem 0.75rem 0.25rem 0.35rem;
  border-radius : 20px;
  border        : 1px solid var(--border);
  min-width     : 0;
}

.user-avatar {
  width           : 26px;
  height          : 26px;
  border-radius   : 50%;
  background      : var(--primary);
  color           : #ffffff;
  font-size       : 0.75rem;
  font-weight     : 700;
  display         : flex;
  align-items     : center;
  justify-content : center;
  flex-shrink     : 0;
}

.patient-name {
  color           : var(--text-main) !important;
  font-weight     : 600 !important;
  font-size       : 0.85rem;
  text-decoration : none;
  white-space     : nowrap;
  overflow        : hidden;
  text-overflow   : ellipsis;
}

.logout-btn {
  font-size       : 0.825rem;
  font-weight     : 600;
  color           : #dc2626;
  background      : #fef2f2;
  border          : 1px solid #fee2e2;
  padding         : 0.35rem 0.85rem;
  border-radius   : 6px;
  text-decoration : none;
  transition      : all 0.15s ease;
  white-space     : nowrap;
  flex-shrink     : 0;
}

.logout-btn:hover {
  background      : #fee2e2;
  color           : #b91c1c;
  text-decoration : none;
}

@media (max-width : 768px) {
  header {
    padding : 0.55rem 0.85rem;
    gap     : 0.5rem;
  }

  .header-brand .brand-logo {
    height : 36px;
  }

  header .logo {
    height : 34px;
    width  : 130px;
  }

  .portal-tag,
  header .names .practice-name {
    display : none;
  }

  header .names {
    gap       : 0.45rem;
    min-width : 0;
  }

  .user-pill {
    padding : 0.2rem 0.6rem 0.2rem 0.25rem;
    gap     : 0.35rem;
  }

  .user-avatar {
    width     : 24px;
    height    : 24px;
    font-size : 0.7rem;
  }

  .patient-name {
    font-size : 0.8rem;
    max-width : 115px;
  }

  .logout-btn {
    padding   : 0.3rem 0.65rem;
    font-size : 0.78rem;
  }
}

/* ==========================================================================
   Navigation Bar
   ========================================================================== */
nav {
  background      : var(--nav-bg);
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  padding         : 0 1.5rem;
  box-shadow      : var(--shadow-sm);
}

.nav-links {
  display     : flex;
  align-items : center;
  flex-wrap   : wrap;
}

.nav-actions {
  display     : flex;
  align-items : center;
}

nav a {
  display         : inline-flex;
  align-items     : center;
  color           : #cbd5e1;
  text-decoration : none;
  padding         : 0.85rem 1rem;
  font-size       : 0.875rem;
  font-weight     : 500;
  letter-spacing  : 0.01em;
  transition      : all 0.15s ease;
  border-bottom   : 2px solid transparent;
}

nav a:hover {
  color           : #ffffff;
  background      : var(--nav-hover);
  text-decoration : none;
}

nav a.selected {
  color         : #ffffff;
  font-weight   : 600;
  border-bottom : 2px solid var(--primary);
  background    : rgba(255, 255, 255, 0.04);
}

.nav-toggle {
  display     : none;
  background  : none;
  border      : none;
  color       : #ffffff;
  padding     : 0.75rem 0.5rem;
  cursor      : pointer;
  font-size   : 0.9rem;
  font-family : inherit;
  font-weight : 600;
  gap         : 0.5rem;
  align-items : center;
}

.nav-payment-btn {
  display         : inline-flex;
  align-items     : center;
  gap             : 0.5rem;
  background      : var(--success);
  color           : #ffffff !important;
  font-size       : 0.825rem;
  font-weight     : 600;
  padding         : 0.45rem 0.9rem;
  border-radius   : 6px;
  text-decoration : none;
  transition      : filter 0.15s ease;
  margin          : 0.35rem 0;
  border-bottom   : none !important;
}

.nav-payment-btn:hover {
  filter          : brightness(1.1);
  text-decoration : none;
}

.nav-payment-btn.secondary {
  background : rgba(255, 255, 255, 0.12);
  border     : 1px solid rgba(255, 255, 255, 0.2);
}

.pay-tag {
  background    : rgba(0, 0, 0, 0.2);
  padding       : 0.15rem 0.4rem;
  border-radius : 4px;
  font-size     : 0.75rem;
}

@media (max-width : 768px) {
  nav {
    flex-direction  : row;
    flex-wrap       : wrap;
    align-items     : center;
    justify-content : space-between;
    padding         : 0.3rem 0.85rem;
  }

  .nav-links {
    display : contents;
  }

  .nav-toggle {
    display : inline-flex;
    order   : 1;
    padding : 0.5rem 0.25rem;
  }

  .nav-actions {
    order   : 2;
    padding : 0;
  }

  .nav-payment-btn {
    width         : auto;
    padding       : 0.38rem 0.75rem;
    font-size     : 0.8rem;
    margin        : 0.2rem 0;
    white-space   : nowrap;
  }

  .nav-links a {
    display       : none;
    order         : 3;
    width         : 100%;
    padding       : 0.7rem 0.5rem;
    border-bottom : 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-links a:first-of-type {
    border-top : 1px solid rgba(255, 255, 255, 0.1);
    margin-top : 0.25rem;
  }

  .nav-links a:last-of-type {
    border-bottom : none;
  }

  nav.responsive .nav-links a {
    display : block;
  }
}

/* ==========================================================================
   Alert Banners & Flash Messages
   ========================================================================== */
.cc_onfile_warning {
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  gap             : 0.75rem;
  background      : #fffbeb;
  border-bottom   : 1px solid #fef3c7;
  color           : #92400e;
  padding         : 0.75rem 1.75rem;
  font-size       : 0.875rem;
  font-weight     : 500;
}

.cc_onfile_warning .btn-danger {
  display          : inline-block;
  background-color : #d97706;
  color            : #ffffff;
  padding          : 0.4rem 0.95rem;
  border-radius    : 6px;
  font-size        : 0.825rem;
  font-weight      : 600;
  text-decoration  : none;
  white-space      : nowrap;
  transition       : background-color 0.15s ease;
}

.cc_onfile_warning .btn-danger:hover {
  background-color : #b45309;
}

.cc_onfile_added {
  display         : flex;
  justify-content : center;
  align-items     : center;
  gap             : 0.75rem;
  flex-wrap       : wrap;
  background      : #f0fdf4;
  border-bottom   : 1px solid #dcfce7;
  color           : #166534;
  padding         : 0.55rem 1rem;
  font-size       : 0.85rem;
  font-weight     : 500;
}

.cc_onfile_added .btn-update-cc {
  display          : inline-block;
  background-color : #166534;
  color            : #ffffff;
  padding          : 0.28rem 0.75rem;
  border-radius    : 5px;
  font-size        : 0.78rem;
  font-weight      : 600;
  text-decoration  : none;
  white-space      : nowrap;
  transition       : background-color 0.15s ease;
}

.cc_onfile_added .btn-update-cc:hover {
  background-color : #14532d;
  color            : #ffffff;
}

.header-messages {
  grid-area : header-messages;
}

.header-messages div {
  padding     : 0.75rem 1.5rem;
  font-weight : 500;
  text-align  : center;
}

.text-danger, .text-error {
  background    : var(--danger-bg);
  color         : var(--danger-text);
  border-bottom : 1px solid #fecaca;
}

.text-success, .text-info {
  background    : var(--success-bg);
  color         : var(--success-text);
  border-bottom : 1px solid #a7f3d0;
}

.text-warning {
  background    : var(--warning-bg);
  color         : var(--warning-text);
  border-bottom : 1px solid #fde68a;
}

/* ==========================================================================
   Main Content Layout & Submenu
   ========================================================================== */
main {
  flex      : 1;
  max-width : 1360px;
  width     : 100%;
  margin    : 0 auto;
  padding   : 1.75rem 1.25rem;
}

.flex {
  display     : flex;
  gap         : 1.5rem;
  align-items : flex-start;
}

/* Allow the right-side container to expand fully next to .submenu */
.flex > div:not(.submenu) {
  flex      : 1;
  min-width : 0;
  width     : 100%;
}

/* Ensure any card inside a flex content area expands to the full available width */
.flex .card {
  width     : 100%;
  max-width : 100%;
}

.submenu {
  min-width     : 210px;
  max-width     : 240px;
  background    : var(--surface-card);
  border        : 1px solid var(--border);
  border-radius : var(--radius);
  box-shadow    : var(--shadow-sm);
  padding       : 0.5rem;
  position      : sticky;
  top           : 1.5rem;
}

.submenu a {
  display         : block;
  font-weight     : 500;
  font-size       : 0.9rem;
  color           : var(--text-main);
  padding         : 0.65rem 0.9rem;
  border-radius   : 6px;
  text-decoration : none;
  transition      : all 0.15s ease;
  margin-bottom   : 2px;
}

.submenu a:hover {
  background      : var(--surface-subtle);
  color           : var(--primary);
  text-decoration : none;
}

.submenu a.active {
  background  : var(--primary-light);
  color       : var(--primary);
  font-weight : 600;
}

@media (max-width : 768px) {
  main {
    padding : 1rem 0.75rem;
  }

  .flex {
    flex-direction : column;
    gap            : 1rem;
  }

  .submenu {
    position  : static;
    width     : 100%;
    max-width : 100%;
  }
}

/* ==========================================================================
   Cards & Component Panels
   ========================================================================== */
.card {
  background    : var(--surface-card);
  border        : 1px solid var(--border);
  border-radius : var(--radius);
  box-shadow    : var(--shadow-sm);
  margin-bottom : 1.25rem;
  overflow      : hidden;
  transition    : box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  box-shadow : var(--shadow-md);
}

.card.full {
  width     : 100%;
  max-width : 100%;
}

.card.small {
  max-width : 400px;
}

.card.medium {
  max-width : 600px;
}

.card.large {
  max-width : 800px;
}

.card.no-border {
  border     : none;
  box-shadow : none;
}

.card.recent {
  border-left : 4px solid var(--primary);
  background  : #fdfdfd;
}

.card__header {
  background      : #ffffff;
  color           : var(--text-main);
  padding         : 0.9rem 1.25rem;
  font-weight     : 600;
  font-size       : 0.95rem;
  border-bottom   : 1px solid var(--border);
  display         : flex;
  justify-content : space-between;
  align-items     : center;
}

.card__header.light {
  background : #fafafa;
  color      : var(--text-main);
}

.card__header a {
  color           : var(--primary);
  font-weight     : 600;
  text-decoration : none;
}

.card__header a:hover {
  text-decoration : underline;
}

.card__subheader {
  padding       : 0.75rem 1.25rem;
  font-size     : 0.85rem;
  font-weight   : 600;
  color         : var(--text-muted);
  background    : var(--surface-subtle);
  border-top    : 1px solid var(--border);
  border-bottom : 1px solid var(--border);
}

.card__body {
  padding     : 1.25rem;
  color       : var(--text-main);
  font-size   : 0.925rem;
  line-height : 1.6;
}

/* Reply Threading */
.card .reply {
  margin-top   : 1rem;
  border-left  : 2px solid var(--border);
  padding-left : 1rem;
}

.card .reply .card__subheader {
  background  : none;
  border      : none;
  padding     : 0.25rem 0;
  font-weight : 600;
  color       : var(--text-muted);
}

.card .reply .card__body {
  padding : 0.35rem 0 0.75rem 0;
}

/* ==========================================================================
   Tables & Medical Labs View
   ========================================================================== */
table {
  width           : 100%;
  border-collapse : collapse;
  font-size       : 0.9rem;
}

table th {
  background     : var(--surface-subtle);
  color          : var(--text-muted);
  font-weight    : 600;
  text-align     : left;
  padding        : 0.75rem 1rem;
  border-bottom  : 1px solid var(--border);
  font-size      : 0.825rem;
  text-transform : uppercase;
  letter-spacing : 0.03em;
}

table td {
  padding       : 0.75rem 1rem;
  border-bottom : 1px solid var(--border);
  color         : var(--text-main);
}

table.striped tr:nth-child(even) td {
  background : #f8fafc;
}

table.relaxed td, table.relaxed th {
  padding : 0.85rem 1rem;
}

table.bordered {
  border : 1px solid var(--border);
}

table th.number, table td.number {
  text-align  : right;
  font-family : var(--ff-mono);
}

/* Modern Lab Cards */
.lab-card {
  background    : var(--surface-card);
  border        : 1px solid var(--border);
  border-radius : var(--radius);
  box-shadow    : var(--shadow-sm);
  margin-bottom : 2rem;
  overflow      : hidden;
  transition    : box-shadow 0.2s ease;
}

.lab-card:hover {
  box-shadow : var(--shadow-md);
}

.lab-card-header {
  background      : #ffffff;
  padding         : 1rem 1.5rem;
  border-bottom   : 1px solid var(--border);
  display         : flex;
  justify-content : space-between;
  align-items     : center;
}

.lab-title-group {
  display     : flex;
  align-items : center;
  gap         : 0.75rem;
}

.lab-badge {
  background     : var(--primary-light);
  color          : var(--primary);
  font-weight    : 700;
  font-size      : 0.75rem;
  text-transform : uppercase;
  padding        : 0.25rem 0.6rem;
  border-radius  : 4px;
  letter-spacing : 0.05em;
}

.lab-title {
  font-size   : 1.05rem;
  font-weight : 700;
  color       : var(--text-main);
}

.lab-meta-grid {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 1.5rem;
  padding               : 1.25rem 1.5rem;
  background            : var(--surface-subtle);
  border-bottom         : 1px solid var(--border);
  font-size             : 0.85rem;
}

.lab-meta-col dl {
  display               : grid;
  grid-template-columns : 110px 1fr;
  row-gap               : 0.4rem;
  margin                : 0;
}

.lab-meta-col dt {
  color       : var(--text-muted);
  font-weight : 600;
}

.lab-meta-col dd {
  margin      : 0;
  color       : var(--text-main);
  font-weight : 500;
}

.lab-clinical-notes {
  margin        : 1rem 1.5rem;
  padding       : 0.85rem 1.25rem;
  background    : #fffbeb;
  border        : 1px solid #fef3c7;
  border-radius : 6px;
  font-size     : 0.85rem;
  color         : #92400e;
}

.lab-clinical-notes h4 {
  font-size      : 0.8rem;
  text-transform : uppercase;
  letter-spacing : 0.05em;
  font-weight    : 700;
  margin-bottom  : 0.25rem;
  color          : #b45309;
}

.lab-table-container {
  overflow-x : auto;
  width      : 100%;
}

.lab-results-table {
  width           : 100%;
  border-collapse : collapse;
  font-size       : 0.875rem;
}

.lab-results-table th {
  background     : #ffffff;
  color          : var(--text-muted);
  font-weight    : 600;
  font-size      : 0.78rem;
  text-transform : uppercase;
  letter-spacing : 0.04em;
  padding        : 0.75rem 1.25rem;
  border-bottom  : 1px solid var(--border);
}

.lab-results-table td {
  padding        : 0.75rem 1.25rem;
  border-bottom  : 1px solid var(--border);
  color          : var(--text-main);
  vertical-align : middle;
}

.lab-panel-divider th {
  background     : #f8fafc;
  color          : var(--text-main);
  font-weight    : 700;
  font-size      : 0.85rem;
  padding        : 0.75rem 1.25rem;
  border-top     : 1px solid var(--border);
  border-bottom  : 1px solid var(--border);
  letter-spacing : 0.02em;
}

.lab-results-table .num-val {
  text-align  : right;
  font-family : var(--ff-mono);
  font-size   : 0.875rem;
}

.flag-badge {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  font-size       : 0.72rem;
  font-weight     : 700;
  padding         : 0.15rem 0.5rem;
  border-radius   : 4px;
  letter-spacing  : 0.04em;
}

.flag-badge.high {
  background : #fee2e2;
  color      : #b91c1c;
  border     : 1px solid #fecaca;
}

.flag-badge.low {
  background : #e0f2fe;
  color      : #0369a1;
  border     : 1px solid #bae6fd;
}

.flag-badge.abnormal {
  background : #fef3c7;
  color      : #b45309;
  border     : 1px solid #fde68a;
}

tr.row-flagged td {
  background : #fffbfb;
}

tr.row-flagged td.result-cell {
  color       : #b91c1c;
  font-weight : 700;
}

.lab-inline-note {
  background    : #f8fafc;
  color         : var(--text-muted);
  font-size     : 0.8rem;
  padding       : 0.5rem 1.25rem 0.65rem 2.5rem;
  border-bottom : 1px solid var(--border);
  font-family   : var(--ff-mono);
  line-height   : 1.5;
}

.lab-btn-group {
  display : flex;
  gap     : 0.5rem;
}

.lab-btn {
  display         : inline-flex;
  align-items     : center;
  font-size       : 0.8rem;
  font-weight     : 600;
  padding         : 0.4rem 0.85rem;
  border-radius   : 6px;
  text-decoration : none;
  transition      : all 0.15s ease;
}

.lab-btn-outline {
  color      : var(--text-main);
  background : #ffffff;
  border     : 1px solid var(--border);
}

.lab-btn-outline:hover {
  background      : var(--surface-subtle);
  text-decoration : none;
}

.lab-btn-primary {
  color      : #ffffff;
  background : var(--primary);
  border     : 1px solid var(--primary);
}

.lab-btn-primary:hover {
  background      : var(--primary-hover);
  text-decoration : none;
}

/* ==========================================================================
   Document List View
   ========================================================================== */
.docs-container {
  max-width      : 900px;
  margin         : 0 auto;
  display        : flex;
  flex-direction : column;
  gap            : 1.75rem;
}

.doc-list {
  display        : flex;
  flex-direction : column;
}

.doc-row {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 0.9rem 1.25rem;
  border-bottom   : 1px solid var(--border);
  transition      : background-color 0.15s ease;
  gap             : 1rem;
}

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

.doc-row:hover {
  background-color : var(--surface-subtle);
}

.doc-info {
  display     : flex;
  align-items : center;
  gap         : 0.85rem;
  min-width   : 0;
  flex        : 1;
}

.doc-icon {
  width           : 36px;
  height          : 36px;
  border-radius   : 8px;
  background      : var(--primary-light);
  color           : var(--primary);
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  flex-shrink     : 0;
  font-size       : 1.1rem;
}

.doc-icon.clinic {
  background : #f1f5f9;
  color      : #475569;
}

.doc-name {
  font-weight     : 600;
  color           : var(--text-main);
  text-decoration : none;
  font-size       : 0.925rem;
  display         : block;
  word-break      : break-word;
}

.doc-row:hover .doc-name {
  color : var(--primary);
}

.doc-meta {
  display     : flex;
  align-items : center;
  gap         : 1.25rem;
  flex-shrink : 0;
}

.doc-date {
  color       : var(--text-muted);
  font-size   : 0.825rem;
  white-space : nowrap;
}

.doc-view-btn {
  font-size       : 0.8rem;
  font-weight     : 600;
  color           : var(--primary);
  background      : var(--surface-card);
  border          : 1px solid var(--border);
  padding         : 0.35rem 0.75rem;
  border-radius   : 6px;
  text-decoration : none;
  transition      : all 0.15s ease;
  white-space     : nowrap;
}

.doc-row:hover .doc-view-btn {
  background      : var(--primary);
  border-color    : var(--primary);
  color           : #ffffff;
  text-decoration : none;
}

/* ==========================================================================
   Demographics & Profile View
   ========================================================================== */
.demo-container {
  max-width : 1040px;
  margin    : 0 auto;
}

.demo-grid {
  display               : grid;
  grid-template-columns : repeat(2, 1fr);
  gap                   : 1.25rem;
}

.demo-section {
  background    : var(--surface-card);
  border        : 1px solid var(--border);
  border-radius : var(--radius);
  box-shadow    : var(--shadow-sm);
  overflow      : hidden;
}

.demo-section.span-full,
.demo-grid.span-full {
  grid-column : 1 / -1;
}

.demo-section-header {
  display        : flex;
  align-items    : center;
  gap            : 0.6rem;
  padding        : 0.85rem 1.25rem;
  background     : var(--surface-subtle);
  border-bottom  : 1px solid var(--border);
  font-weight    : 700;
  font-size      : 0.875rem;
  color          : var(--text-main);
  letter-spacing : 0.02em;
}

.demo-section-body {
  padding : 1.15rem 1.25rem;
}

.demo-dl {
  display               : grid;
  grid-template-columns : 130px 1fr;
  row-gap               : 0.6rem;
  column-gap            : 0.75rem;
  margin                : 0;
  font-size             : 0.875rem;
}

.demo-dl dt {
  color       : var(--text-muted);
  font-weight : 600;
  word-break  : break-word;
}

.demo-dl dd {
  margin      : 0;
  color       : var(--text-main);
  font-weight : 500;
  word-break  : break-word;
}

.ins-tag {
  font-size      : 0.72rem;
  font-weight    : 700;
  text-transform : uppercase;
  background     : var(--primary-light);
  color          : var(--primary);
  padding        : 0.15rem 0.5rem;
  border-radius  : 4px;
}

@media (max-width : 820px) {
  .demo-grid {
    grid-template-columns : 1fr;
  }
}

/* ==========================================================================
   Medical History View
   ========================================================================== */
.history-wrapper {
  flex           : 1;
  width          : 100%;
  display        : flex;
  flex-direction : column;
  gap            : 1.5rem;
}

.history-card {
  scroll-margin-top : 1.5rem;
}

.history-card-header {
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  padding         : 0.85rem 1.25rem;
  background      : #ffffff;
  border-bottom   : 1px solid var(--border);
}

.history-card-title {
  display     : flex;
  align-items : center;
  gap         : 0.6rem;
  font-weight : 700;
  font-size   : 0.95rem;
  color       : var(--text-main);
}

.history-card-count {
  font-size     : 0.75rem;
  font-weight   : 600;
  color         : var(--text-muted);
  background    : var(--surface-subtle);
  padding       : 0.2rem 0.55rem;
  border-radius : 12px;
  border        : 1px solid var(--border);
}

.history-card.allergy-alert {
  border-left : 4px solid var(--warning);
}

.allergy-badge {
  background     : var(--warning-bg);
  color          : var(--warning-text);
  font-weight    : 700;
  font-size      : 0.72rem;
  text-transform : uppercase;
  padding        : 0.2rem 0.55rem;
  border-radius  : 4px;
  border         : 1px solid #fde68a;
  letter-spacing : 0.04em;
}

.hx-table {
  width           : 100%;
  border-collapse : collapse;
}

.hx-table th {
  background     : var(--surface-subtle);
  color          : var(--text-muted);
  font-weight    : 600;
  font-size      : 0.8rem;
  text-transform : uppercase;
  letter-spacing : 0.03em;
  padding        : 0.65rem 1.25rem;
  border-bottom  : 1px solid var(--border);
}

.hx-table td {
  padding        : 0.75rem 1.25rem;
  border-bottom  : 1px solid var(--border);
  color          : var(--text-main);
  font-size      : 0.875rem;
  vertical-align : middle;
}

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

.hx-table tr:hover td {
  background-color : #fafbfc;
}

.hx-table .date-col {
  white-space : nowrap;
  font-family : var(--ff-mono);
  font-size   : 0.825rem;
  color       : var(--text-muted);
}

.hx-empty-row {
  text-align : center;
  color      : var(--text-muted);
  font-style : italic;
  padding    : 1.5rem !important;
}

.submenu-section-label {
  padding        : 0.4rem 0.85rem;
  font-size      : 0.75rem;
  font-weight    : 700;
  text-transform : uppercase;
  color          : var(--text-subtle);
  letter-spacing : 0.05em;
}

/* ==========================================================================
   Appointments View
   ========================================================================== */
.apps-table {
  width           : 100%;
  border-collapse : collapse;
}

.apps-table th {
  background     : var(--surface-subtle);
  color          : var(--text-muted);
  font-weight    : 600;
  font-size      : 0.8rem;
  text-transform : uppercase;
  letter-spacing : 0.03em;
  padding        : 0.75rem 1rem;
  border-bottom  : 1px solid var(--border);
}

.apps-table td {
  padding        : 0.85rem 1rem;
  border-bottom  : 1px solid var(--border);
  color          : var(--text-main);
  font-size      : 0.875rem;
  vertical-align : middle;
}

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

.apps-table tr:hover td {
  background : #fafbfc;
}

.app-status-badge {
  display        : inline-flex;
  align-items    : center;
  font-size      : 0.75rem;
  font-weight    : 700;
  padding        : 0.2rem 0.6rem;
  border-radius  : 4px;
  letter-spacing : 0.03em;
  text-transform : uppercase;
}

.app-status-badge.confirmed {
  background : var(--success-bg);
  color      : var(--success-text);
  border     : 1px solid #a7f3d0;
}

.app-status-badge.scheduled {
  background : var(--primary-light);
  color      : var(--primary);
  border     : 1px solid #bae6fd;
}

.app-status-badge.canceled {
  background : var(--danger-bg);
  color      : var(--danger-text);
  border     : 1px solid #fecaca;
}

.btn-confirm-app {
  display         : inline-flex;
  align-items     : center;
  gap             : 0.35rem;
  font-size       : 0.8rem;
  font-weight     : 600;
  color           : #ffffff;
  background      : var(--success);
  border          : 1px solid var(--success);
  padding         : 0.35rem 0.75rem;
  border-radius   : 6px;
  text-decoration : none;
  transition      : all 0.15s ease;
  white-space     : nowrap;
}

.btn-confirm-app:hover {
  filter          : brightness(1.08);
  color           : #ffffff;
  text-decoration : none;
}

.app-time-cell {
  font-weight : 600;
  color       : var(--text-main);
  white-space : nowrap;
}

.app-booked-date {
  font-family : var(--ff-mono);
  font-size   : 0.825rem;
  color       : var(--text-muted);
  white-space : nowrap;
}

/* ==========================================================================
   Account & Security Views
   ========================================================================== */
.account-container {
  max-width : 600px;
  margin    : 1.5rem auto;
}

.account-dl {
  display               : grid;
  grid-template-columns : 160px 1fr;
  align-items           : baseline;
  row-gap               : 0.85rem;
  column-gap            : 1rem;
  margin                : 0;
  font-size             : 0.9rem;
}

.account-dl dt {
  color       : var(--text-muted);
  font-weight : 600;
}

.account-dl dd {
  margin      : 0;
  color       : var(--text-main);
  font-weight : 500;
  word-break  : break-word;
}

.account-footer {
  margin-top      : 1.75rem;
  padding-top     : 1.25rem;
  border-top      : 1px solid var(--border);
  display         : flex;
  align-items     : center;
  justify-content : flex-end;
  gap             : 0.75rem;
  flex-wrap       : wrap;
}

.form-container {
  max-width : 520px;
  margin    : 1.5rem auto;
}

.form-group {
  margin-bottom : 1.25rem;
}

.form-group label {
  display       : block;
  font-weight   : 600;
  font-size     : 0.85rem;
  color         : var(--text-main);
  margin-bottom : 0.4rem;
}

.password-rules-box {
  background    : var(--surface-subtle);
  border        : 1px solid var(--border);
  border-radius : 6px;
  padding       : 0.75rem 1rem;
  margin-top    : 0.5rem;
  font-size     : 0.8rem;
  color         : var(--text-muted);
}

.password-rules-box ul {
  margin     : 0.35rem 0 0 1.25rem;
  list-style : disc;
}

.password-rules-box li {
  margin-bottom : 0.2rem;
}

.form-actions {
  display         : flex;
  align-items     : center;
  justify-content : flex-end;
  gap             : 1rem;
  margin-top      : 1.75rem;
  padding-top     : 1.25rem;
  border-top      : 1px solid var(--border);
}

.btn-cancel {
  font-size       : 0.875rem;
  font-weight     : 500;
  color           : var(--text-muted);
  text-decoration : none;
  padding         : 0.5rem 0.75rem;
  border-radius   : 6px;
  transition      : all 0.15s ease;
}

.btn-cancel:hover {
  color           : var(--text-main);
  background      : var(--surface-subtle);
  text-decoration : none;
}

/* ==========================================================================
   Modern Standardized Form Inputs & Controls
   ========================================================================== */
.form-group {
  margin-bottom : 1.15rem;
}

label,
.form-group label,
.card form label {
  display       : block;
  font-weight   : 600;
  font-size     : 0.85rem;
  color         : var(--text-main);
  margin-bottom : 0.4rem;
  line-height   : 1.3;
}

.req {
  color       : var(--danger, #ef4444);
  font-weight : 700;
  margin-left : 0.15rem;
}

.req-legend {
  font-size   : 0.78rem;
  font-weight : 500;
  color       : var(--text-muted);
}

/* Universal Input Styling (works inside or outside .card / form) */
/* Universal Input Styling */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea,
.form-control {
  display            : block;
  width              : 100%;
  height             : 42px;
  padding            : 0.55rem 0.85rem;
  font-family        : var(--ff-sans);
  font-size          : 0.925rem;
  line-height        : 1.5;
  color              : var(--text-main);
  background-color   : #ffffff;
  background-clip    : padding-box;
  border             : 1px solid var(--border);
  border-radius      : 6px;
  box-shadow         : inset 0 1px 1px rgba(0, 0, 0, 0.03);
  transition         : border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  outline            : none;
  -webkit-appearance : none;
  -moz-appearance    : none;
  appearance         : none;
}

/* Textarea height override */
textarea {
  height     : auto;
  min-height : 95px;
  padding    : 0.65rem 0.85rem;
  resize     : vertical;
}

/* Select arrow styling */
select {
  cursor              : pointer;
  padding-right       : 2.25rem;
  background-image    : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-position : right 0.65rem center;
  background-repeat   : no-repeat;
  background-size     : 1.25rem 1.25rem;
}

/* Soft, focused glow (replaces harsh red or thick borders) */
input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color     : var(--primary);
  box-shadow       : 0 0 0 3px rgba(2, 132, 199, 0.15);
  background-color : #ffffff;
}

/* Clean required hint instead of a thick solid bar */
input:required:focus,
select:required:focus,
textarea:required:focus {
  border-color : var(--primary);
}

/* Checkboxes & Radios */
input[type="checkbox"],
input[type="radio"] {
  display        : inline-block;
  width          : auto;
  height         : auto;
  margin-right   : 0.5rem;
  accent-color   : var(--primary);
  vertical-align : middle;
}

/* Placeholder styling */
input::placeholder,
textarea::placeholder {
  color   : var(--text-subtle);
  opacity : 1;
}

/* Error States */
.form-error,
.invalid-feedback {
  display     : block;
  color       : var(--danger);
  font-size   : 0.8rem;
  font-weight : 500;
  margin-top  : 0.35rem;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-group {
  padding : 0;
  display : inline-flex;
  gap     : 0.5rem;
}

.btn-success,
a.btn-success,
.btn-primary,
a.btn-primary,
.card form button.btn {
  background      : var(--primary);
  color           : #fff;
  border          : 1px solid transparent;
  border-radius   : 6px;
  padding         : 0.6rem 1.25rem;
  font-size       : 0.875rem;
  font-weight     : 600;
  line-height     : 1.25;
  cursor          : pointer;
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  transition      : background 0.15s ease;
  text-decoration : none;
}

.btn-success:hover,
a.btn-success:hover,
.btn-primary:hover,
a.btn-primary:hover,
.card form button.btn:hover {
  background      : var(--primary-hover);
  color           : #fff;
  text-decoration : none;
}

.btn-secondary,
a.btn-secondary {
  background      : #ffffff;
  color           : var(--primary);
  border          : 1px solid var(--primary);
  border-radius   : 6px;
  padding         : 0.6rem 1.25rem;
  font-size       : 0.875rem;
  font-weight     : 600;
  line-height     : 1.25;
  cursor          : pointer;
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  transition      : all 0.15s ease;
  text-decoration : none;
}

.btn-secondary:hover,
a.btn-secondary:hover {
  background      : var(--primary-light, #f0f9ff);
  color           : var(--primary-hover);
  text-decoration : none;
}

.btn-danger,
a.btn-danger {
  background      : var(--danger);
  color           : #fff;
  border          : none;
  border-radius   : 6px;
  padding         : 0.6rem 1.25rem;
  font-size       : 0.875rem;
  font-weight     : 600;
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  text-decoration : none;
  transition      : opacity 0.15s ease;
}

.btn-danger:hover,
a.btn-danger:hover {
  opacity         : 0.9;
  text-decoration : none;
}

/* ==========================================================================
   Lists & Utilities
   ========================================================================== */
ul {
  padding    : 0;
  margin     : 0;
  list-style : none;
}

a {
  color           : var(--primary);
  text-decoration : none;
}

a:hover {
  text-decoration : underline;
}

a.underline {
  text-decoration : underline;
}

pre {
  font-family : var(--ff-mono);
}

.aright {
  text-align : right;
}

.aleft {
  text-align : left;
}

.acenter {
  text-align : center;
}

.fright {
  float : right;
}

.fleft {
  float : left;
}

.list-items {
  border        : 1px solid var(--border);
  border-radius : var(--radius);
  background    : var(--surface-card);
  overflow      : hidden;
}

.list-items li {
  border-bottom : 1px solid var(--border);
}

.list-items li:last-child {
  border : none;
}

.list-items li a {
  display     : block;
  padding     : 0.75rem 1rem;
  color       : var(--text-main);
  font-weight : 500;
}

.list-items li a:hover {
  background      : var(--surface-subtle);
  color           : var(--primary);
  text-decoration : none;
}

.no-entries {
  text-align : center;
  margin     : 2rem auto;
  font-size  : 1.1rem;
  color      : var(--text-muted);
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
  margin-top : auto;
  background : #ffffff;
  border-top : 1px solid var(--border);
  padding    : 2rem 1.25rem;
  text-align : center;
  color      : var(--text-muted);
  font-size  : 0.85rem;
}

footer .footer-nav {
  display         : flex;
  justify-content : center;
  gap             : 1.5rem;
  background      : none;
  box-shadow      : none;
  margin-bottom   : 1rem;
}

footer .footer-nav a {
  color       : var(--text-muted);
  padding     : 0;
  border      : none;
  font-weight : 500;
}

footer .footer-nav a:hover {
  color           : var(--primary);
  background      : none;
  text-decoration : underline;
}

/* ==========================================================================
   Media Queries & Visibility
   ========================================================================== */
@media screen {
  .no-display {
    display : none;
  }
}

@media (max-width : 768px) {
  .no-phone {
    display : none;
  }
}

@media (min-width : 768px) and (max-width : 1023px) {
  .no-tablet {
    display : none;
  }
}

@media (min-width : 1024px) {
  .no-desktop {
    display : none;
  }
}

@media print {
  body {
    min-height : auto;
    background : none;
  }

  main {
    min-height : auto;
  }

  footer, .no-print, .submenu {
    display : none !important;
  }

  .lab-card, .card {
    border           : none;
    box-shadow       : none;
    page-break-after : always;
  }

  .lab-card:last-child, .card:last-child {
    page-break-after : avoid;
  }
}


/* ==========================================================================
   Patient Billing & Statement View
   ========================================================================== */
.statement-wrapper {
  max-width : 900px;
  margin    : 1rem auto;
}

.statement-top-bar {
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  margin-bottom   : 1.5rem;
  padding         : 1rem 1.25rem;
  background      : #ffffff;
  border          : 1px solid var(--border);
  border-radius   : var(--radius);
  box-shadow      : var(--shadow-sm);
}

.statement-due-callout {
  display        : flex;
  flex-direction : column;
}

.statement-due-label {
  font-size      : 0.75rem;
  font-weight    : 700;
  text-transform : uppercase;
  color          : var(--text-muted);
  letter-spacing : 0.04em;
}

.statement-due-amount {
  font-size   : 1.5rem;
  font-weight : 800;
  color       : var(--text-main);
  font-family : var(--ff-mono);
}

.statement-card {
  background    : #ffffff;
  border        : 1px solid var(--border);
  border-radius : var(--radius);
  box-shadow    : var(--shadow-sm);
  padding       : 2rem;
  margin-bottom : 2rem;
}

.statement-header-summary {
  display               : grid;
  grid-template-columns : repeat(3, 1fr);
  gap                   : 1rem;
  background            : var(--surface-subtle);
  border                : 1px solid var(--border);
  border-radius         : 8px;
  padding               : 1rem;
  margin-bottom         : 1.75rem;
  text-align            : center;
}

.statement-summary-item {
  display        : flex;
  flex-direction : column;
  gap            : 0.2rem;
}

.statement-summary-label {
  font-size      : 0.72rem;
  font-weight    : 700;
  text-transform : uppercase;
  color          : var(--text-muted);
  letter-spacing : 0.05em;
}

.statement-summary-value {
  font-size   : 0.95rem;
  font-weight : 700;
  color       : var(--text-main);
}

.statement-messages {
  background    : #fffbeb;
  border        : 1px solid #fef3c7;
  border-left   : 4px solid var(--warning);
  border-radius : 6px;
  padding       : 0.85rem 1.25rem;
  margin-bottom : 1.5rem;
  font-size     : 0.85rem;
  color         : #92400e;
}

.statement-messages ul {
  margin     : 0.25rem 0 0 1.25rem;
  list-style : disc;
}

/* Statement Line Items Table */
.statement-table-box {
  border        : 1px solid var(--border);
  border-radius : 8px;
  overflow      : hidden;
  margin-bottom : 2rem;
}

.statement-table {
  width           : 100%;
  border-collapse : collapse;
}

.statement-table th {
  background     : var(--surface-subtle);
  color          : var(--text-muted);
  font-weight    : 600;
  font-size      : 0.78rem;
  text-transform : uppercase;
  letter-spacing : 0.03em;
  padding        : 0.75rem 1rem;
  border-bottom  : 1px solid var(--border);
}

.statement-table td {
  padding       : 0.85rem 1rem;
  border-bottom : 1px solid var(--border);
  font-size     : 0.875rem;
}

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

.statement-table tr:hover td {
  background-color : #fafbfc;
}

.statement-table .num-cell {
  text-align  : right;
  font-family : var(--ff-mono);
  font-size   : 0.875rem;
  white-space : nowrap;
}

/* Aging Summary Block */
.statement-aging-container {
  display         : flex;
  justify-content : flex-end;
  margin-top      : 1rem;
}

.statement-aging-box {
  width         : 100%;
  max-width     : 620px;
  border        : 1px solid var(--border);
  border-radius : 8px;
  overflow      : hidden;
}

.aging-table {
  width           : 100%;
  border-collapse : collapse;
}

.aging-table th {
  background     : var(--surface-subtle);
  color          : var(--text-muted);
  font-size      : 0.72rem;
  text-transform : uppercase;
  font-weight    : 700;
  letter-spacing : 0.04em;
  padding        : 0.65rem 0.75rem;
  border-bottom  : 1px solid var(--border);
  text-align     : right;
}

.aging-table td {
  padding       : 0.75rem 0.75rem;
  font-family   : var(--ff-mono);
  font-size     : 0.875rem;
  text-align    : right;
  border-bottom : none;
}

.aging-table th:first-child,
.aging-table td:first-child {
  text-align : left;
}

.aging-table .total-due-cell {
  font-weight : 800;
  color       : var(--primary);
  background  : var(--primary-light);
}

@media (max-width : 768px) {
  .statement-top-bar {
    flex-direction : column;
    align-items    : flex-start;
    gap            : 1rem;
  }

  .statement-header-summary {
    grid-template-columns : 1fr;
    text-align            : left;
  }

  .statement-card {
    padding : 1rem;
  }

  .statement-aging-box {
    max-width : 100%;
  }
}

@media print {
  .statement-top-bar, .no-print {
    display : none !important;
  }

  .statement-card {
    border     : none;
    box-shadow : none;
    padding    : 0;
  }
}


/* ==========================================================================
   Checkout & Online Payment View
   ========================================================================== */
.checkout-wrapper {
  max-width : 820px;
  margin    : 1.5rem auto 3rem auto;
  padding   : 0 1rem;
}

.checkout-header {
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  margin-bottom   : 1.5rem;
  padding-bottom  : 1rem;
  border-bottom   : 1px solid var(--border);
}

.checkout-practice-title {
  font-size   : 1.25rem;
  font-weight : 700;
  color       : var(--text-main);
  margin      : 0;
}

.patient-summary-grid {
  display               : grid;
  grid-template-columns : repeat(4, 1fr);
  gap                   : 1rem;
  padding               : 1.25rem;
  background            : var(--surface-subtle);
  border-bottom         : 1px solid var(--border);
}

.patient-summary-item {
  display        : flex;
  flex-direction : column;
  gap            : 0.2rem;
}

.patient-summary-label {
  font-size      : 0.72rem;
  font-weight    : 700;
  text-transform : uppercase;
  color          : var(--text-muted);
  letter-spacing : 0.05em;
}

.patient-summary-val {
  font-size   : 0.875rem;
  font-weight : 600;
  color       : var(--text-main);
}

.patient-balance-highlight {
  background      : #ecfdf5;
  border          : 1px solid #a7f3d0;
  border-radius   : 8px;
  padding         : 0.65rem 0.85rem;
  display         : flex;
  flex-direction  : column;
  justify-content : center;
}

.patient-balance-highlight .patient-summary-label {
  color : #065f46;
}

.patient-balance-highlight .patient-balance-amount {
  font-size   : 1.35rem;
  font-weight : 800;
  color       : #065f46;
  font-family : var(--ff-mono);
  line-height : 1.1;
  margin-top  : 0.2rem;
}

/* Payment Layout Form Grid */
.payment-grid {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 1rem;
}

.payment-grid.three-col {
  grid-template-columns : 2fr 1fr 1fr;
}

.card-secure-tag {
  display       : inline-flex;
  align-items   : center;
  gap           : 0.35rem;
  font-size     : 0.75rem;
  color         : var(--success-text);
  background    : var(--success-bg);
  padding       : 0.2rem 0.55rem;
  border-radius : 4px;
  border        : 1px solid #a7f3d0;
  font-weight   : 600;
}

.btn-pay-submit {
  width           : 100%;
  background      : var(--primary);
  color           : #ffffff;
  border          : none;
  border-radius   : 8px;
  padding         : 0.85rem 1.5rem;
  font-size       : 1.05rem;
  font-weight     : 700;
  cursor          : pointer;
  display         : flex;
  align-items     : center;
  justify-content : center;
  gap             : 0.6rem;
  transition      : all 0.15s ease;
  box-shadow      : var(--shadow-sm);
  margin-top      : 1.25rem;
}

.btn-pay-submit:hover {
  background : var(--primary-hover);
  box-shadow : var(--shadow-md);
}

.btn-pay-submit:disabled {
  background : var(--text-subtle);
  cursor     : not-allowed;
  opacity    : 0.7;
}

/* Card-on-File & Terms Components */
.cc-status-badge {
  background      : #ecfdf5;
  border          : 1px solid #a7f3d0;
  border-radius   : 8px;
  padding         : 0.65rem 0.85rem;
  display         : flex;
  flex-direction  : column;
  justify-content : center;
  gap             : 0.2rem;
}

.cc-status-badge.empty {
  background   : #fffbeb;
  border-color : #fde68a;
}

.cc-status-val {
  font-size   : 0.95rem;
  font-weight : 700;
  color       : #065f46;
}

.cc-status-badge.empty .cc-status-val {
  color : #92400e;
}

.cc-update-callout {
  background    : #eff6ff;
  border        : 1px solid #bfdbfe;
  border-left   : 4px solid #2563eb;
  border-radius : 6px;
  padding       : 0.85rem 1rem;
  margin-bottom : 1.25rem;
  color         : #1e3a8a;
  font-size     : 0.9rem;
  line-height   : 1.45;
}

.terms-box {
  max-height    : 220px;
  overflow-y    : auto;
  border        : 1px solid var(--border, #e2e8f0);
  border-radius : 6px;
  padding       : 1rem 1.25rem;
  background    : #f8fafc;
  margin-top    : 0.75rem;
  margin-bottom : 1rem;
  font-size     : 0.875rem;
  line-height   : 1.55;
  color         : var(--text-main, #1e293b);
}

.terms-box p {
  margin-bottom : 0.75rem;
}

.note-list {
  list-style-type : disc;
  margin-left     : 20px;
  margin-bottom   : 20px;
}

.ack-row {
  display     : flex;
  align-items : flex-start;
  gap         : 0.65rem;
  margin-top  : 1rem;
  font-size   : 0.92rem;
  font-weight : 500;
  color       : var(--text-main, #1e293b);
  cursor      : pointer;
}

.ack-row input[type="checkbox"] {
  width       : 18px;
  height      : 18px;
  margin-top  : 2px;
  flex-shrink : 0;
  cursor      : pointer;
}

/* Payment & Vault Result Cards */
.result-card {
  max-width     : 560px;
  margin        : 2.5rem auto;
  text-align    : center;
  overflow      : hidden;
  border-radius : var(--radius-lg, 12px);
}

.result-banner {
  padding         : 2.25rem 1.5rem;
  color           : #ffffff;
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  justify-content : center;
  gap             : 0.65rem;
}

.result-banner.success {
  background : linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.result-banner.danger {
  background : linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.result-icon {
  width           : 64px;
  height          : 64px;
  border-radius   : 50%;
  background      : rgba(255, 255, 255, 0.2);
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : 2rem;
  font-weight     : 700;
  line-height     : 1;
}

.result-body {
  padding : 2rem 1.75rem;
}

.result-title {
  font-size     : 1.35rem;
  font-weight   : 700;
  color         : var(--text-main, #0f172a);
  margin-bottom : 0.75rem;
}

.result-desc {
  color         : var(--text-muted, #64748b);
  font-size     : 0.95rem;
  line-height   : 1.55;
  margin-bottom : 1.25rem;
}

.result-meta {
  display       : inline-block;
  background    : #f8fafc;
  border        : 1px solid var(--border, #e2e8f0);
  border-radius : 6px;
  padding       : 0.55rem 1rem;
  font-family   : var(--ff-mono, monospace);
  font-size     : 0.875rem;
  color         : var(--text-main, #0f172a);
  margin-bottom : 1.5rem;
}

.result-meta.error {
  color        : #b91c1c;
  background   : #fef2f2;
  border-color : #fecaca;
}

.result-actions {
  display         : flex;
  justify-content : center;
  gap             : 0.75rem;
  flex-wrap       : wrap;
  margin-top      : 0.5rem;
}

@media (max-width : 768px) {
  .checkout-header {
    flex-direction : column;
    align-items    : flex-start;
    gap            : 0.75rem;
  }

  .patient-summary-grid {
    grid-template-columns : 1fr;
    gap                   : 0.85rem;
  }

  .payment-grid,
  .payment-grid.three-col {
    grid-template-columns : 1fr;
  }
}

/* ==========================================================================
   Login & Authentication Screen
   ========================================================================== */
.auth-wrapper {
  max-width : 680px;
  margin    : 3rem auto 1.5rem auto;
  /* padding   : 0 1rem; */
}

.auth-card {
  background    : var(--surface-card);
  border        : 1px solid var(--border);
  border-radius : var(--radius);
  box-shadow    : var(--shadow-md);
  overflow      : hidden;
}

.auth-header {
  padding       : 1.75rem 1.5rem 1.25rem 1.5rem;
  text-align    : center;
  border-bottom : 1px solid var(--border);
  background    : #ffffff;
}

.auth-header .logo {
  height              : 54px;
  margin              : 0 auto 0.75rem auto;
  background-image    : url("/assets/images/logo-portal.svg");
  background-repeat   : no-repeat;
  background-position : center;
  background-size     : contain;
}

.auth-title {
  font-size   : 1.15rem;
  font-weight : 700;
  color       : var(--text-main);
  margin      : 0;
}

.auth-subtitle {
  font-size  : 0.85rem;
  color      : var(--text-muted);
  margin-top : 0.35rem;
}

.auth-body {
  padding : 1.75rem 1.5rem;
}

.auth-links {
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  margin-top      : 1.25rem;
  font-size       : 0.85rem;
  font-weight     : 500;
}

.auth-links a {
  color           : var(--primary);
  text-decoration : none;
}

.auth-links a:hover {
  text-decoration : underline;
}

/* Reassuring Legal & HIPAA Disclaimer */
.auth-legal-box {
  max-width     : 680px;
  margin        : 2rem auto;
  padding       : 1.5rem;
  background    : #ffffff;
  border        : 1px solid var(--border);
  border-radius : var(--radius);
  box-shadow    : var(--shadow-sm);
  font-size     : 0.825rem;
  color         : var(--text-muted);
  line-height   : 1.6;
}

.auth-legal-header {
  display        : flex;
  align-items    : center;
  gap            : 0.5rem;
  font-size      : 0.85rem;
  font-weight    : 700;
  text-transform : uppercase;
  letter-spacing : 0.04em;
  color          : var(--text-main);
  margin-bottom  : 0.75rem;
}

.auth-legal-box ol {
  margin  : 0.75rem 0 0.75rem 1.25rem;
  padding : 0;
}

.auth-legal-box li {
  margin-bottom : 0.5rem;
}

.auth-legal-box p {
  margin : 0.5rem 0;
}

/* ==========================================================================
   Status Confirmation / Success Screens
   ========================================================================== */
.status-confirm-box {
  text-align : center;
  padding    : 2.5rem 1.5rem;
}

.status-icon-circle {
  width           : 64px;
  height          : 64px;
  border-radius   : 50%;
  background      : var(--success-bg);
  border          : 1px solid #a7f3d0;
  color           : var(--success);
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  font-size       : 1.75rem;
  margin-bottom   : 1.25rem;
}

.status-title {
  font-size     : 1.25rem;
  font-weight   : 700;
  color         : var(--text-main);
  margin-bottom : 0.5rem;
}

.status-message {
  font-size   : 0.95rem;
  color       : var(--text-muted);
  max-width   : 440px;
  margin      : 0 auto 1.75rem auto;
  line-height : 1.6;
}

.status-next-steps {
  background    : var(--surface-subtle);
  border        : 1px solid var(--border);
  border-radius : var(--radius);
  padding       : 1.25rem;
  max-width     : 460px;
  margin        : 0 auto 1.5rem auto;
  font-size     : 0.875rem;
  color         : var(--text-main);
  line-height   : 1.5;
}

.status-bookmark-url {
  font-family : var(--ff-mono);
  font-size   : 0.825rem;
  color       : var(--text-muted);
  margin-top  : 0.5rem;
}

/* ==========================================================================
   Token Setup & Account Creation Card
   ========================================================================== */
.token-account-info {
  background            : var(--surface-subtle);
  border                : 1px solid var(--border);
  border-radius         : 8px;
  padding               : 1rem 1.25rem;
  margin                : 1.25rem 0;
  display               : grid;
  grid-template-columns : 120px 1fr;
  row-gap               : 0.5rem;
  column-gap            : 0.5rem;
  font-size             : 0.9rem;
}

.token-account-info dt {
  color       : var(--text-muted);
  font-weight : 600;
}

.token-account-info dd {
  margin      : 0;
  font-weight : 700;
  color       : var(--text-main);
  font-family : var(--ff-mono);
}

label.error {
  display     : block;
  color       : var(--danger);
  font-size   : 0.8rem;
  font-weight : 500;
  margin-top  : 0.35rem;
}

/* ==========================================================================
   Message Partials & Interactive Form Controls
   ========================================================================== */
.med-select-list {
  display        : flex;
  flex-direction : column;
  gap            : 0.5rem;
  margin         : 0.5rem 0 1.25rem 0;
}

/* Ensure the pill label stays a horizontal flex row */
label.med-select-item,
.med-select-item {
  display        : flex !important;
  flex-direction : row !important;
  align-items    : center !important;
  gap            : 0.85rem !important;
  margin         : 0 0 0.5rem 0 !important;
  cursor         : pointer;
  width          : 100%;
}

/* Force the checkbox to remain inline and vertically centered */
.med-select-item input[type="checkbox"] {
  display        : inline-block !important;
  width          : 18px !important;
  height         : 18px !important;
  min-width      : 18px !important;
  margin         : 0 !important;
  padding        : 0 !important;
  cursor         : pointer;
  flex-shrink    : 0 !important;
  vertical-align : middle;
}

/* Medication name and dosage wrapper */
.med-select-item > div {
  display     : flex;
  align-items : baseline;
  flex-wrap   : wrap;
  gap         : 0.4rem;
  margin      : 0;
  line-height : 1.4;
}

.med-select-item:hover {
  background   : var(--surface-subtle);
  border-color : #cbd5e1;
}

.med-select-item input[type="checkbox"] {
  width  : 18px;
  height : 18px;
  margin : 0;
  cursor : pointer;
}

.med-select-item.is-selected {
  background   : #f0f9ff;
  border-color : var(--primary);
}

.med-select-name {
  font-weight : 600;
  color       : var(--text-main);
  font-size   : 0.9rem;
}

.med-select-details {
  color       : var(--text-muted);
  font-size   : 0.825rem;
  margin-left : 0.35rem;
}

/* Quoted Previous Conversation */
.quoted-thread-box {
  background    : var(--surface-subtle);
  border        : 1px solid var(--border);
  border-radius : 8px;
  padding       : 1rem 1.25rem;
  margin-bottom : 1.5rem;
}

.quoted-thread-header {
  font-size      : 0.75rem;
  font-weight    : 700;
  text-transform : uppercase;
  color          : var(--text-muted);
  letter-spacing : 0.05em;
  margin-bottom  : 0.5rem;
}

.quoted-msg-body {
  font-size   : 0.9rem;
  color       : var(--text-main);
  line-height : 1.5;
}

.quoted-reply-item {
  margin-top  : 0.75rem;
  padding-top : 0.75rem;
  border-top  : 1px solid var(--border);
}