:root {
  /* Color Palette */
  --primary: #1f75bb50;
  --secondary: #255f7c60;
  --accent-color: #03507cd9;
  --glass-bg: rgba(73, 131, 189, 0.35);
  --glass-blur: 2px;
  --glass-radius: 8px;
  --glass-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  --success: rgba(2, 138, 59, 0.673);
  --warning: rgba(202, 107, 6, 0.781);
  --danger: #9b0202;
  --light: rgba(125, 184, 242, 0.411);
  --dark: #000000;
  --background: #22829c26;
  --text: #000000;
  --border: rgb(0, 0, 0);

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* Typography */
  --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  background: var(--background);
  font-family: var(--font-primary);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
}

/* Main Layout */
.main-content .glass-panel {
  margin: var(--spacing-md);
  padding: var(--spacing-md);
  color: var(--text);
  font-weight: 900;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
}

/* Header */
.app-header {
  background-color: var(--primary);
  color: var(--text);
  padding: var(--spacing-lg) var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

/* App Header Title: main heading inside .app-header */
.app-header h1 {
  margin: 0;
  font-size: 2rem;
}

/* Card Component: rounded box with shadow and border */
.card {
  background: rgba(43, 95, 147, 0.182);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  border: 1px solid var(--border);
  color: var(--text);
  transition: background 0.2s;
}

/* Grid Layout: responsive multi-column container */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

/* Loading State Container: centers spinner and text */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  color: var(--secondary);
  min-height: 100vh;
}

/* Error Message Container */
.error-message {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  color: var(--danger);
  min-height: 100vh;
  text-align: center;
}

/* Dashboard Page Container */
.dashboard-page {
  padding: var(--spacing-lg);
}

/* Loading Spinner Element */
.loading::after {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: var(--spacing-sm);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* App Layout */
.app-container {
  display: flex;
  min-height: 100vh;
}

.navigation {
  width: 280px;
  background: rgba(31, 117, 187, 0.1);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
}

.nav-header {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--spacing-md);
}

.nav-location {
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm);
  background: var(--glass-bg);
  border-radius: var(--glass-radius);
  border: 1px solid var(--border);
}

.nav-title {
  font-size: 1.5rem;
  margin: 0;
  color: var(--text);
}

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

.nav-item {
  margin: var(--spacing-sm) 0;
}

.nav-button {
  width: 100%;
  padding: var(--spacing-md);
  background: var(--glass-bg);
  border: 1px solid var(--border);
  border-radius: var(--glass-radius);
  color: var(--text);
  text-align: left;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.nav-button:hover {
  background: var(--primary);
  transform: translateX(4px);
}

.main-content {
  flex: 1;
  padding: var(--spacing-xl);
  background: var(--background);
  overflow-y: auto;
}

/* Responsive Design */
@media (max-width: 768px) {
  .app-container {
    flex-direction: column;
  }

  .navigation {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .nav-item {
    flex: 1;
    min-width: 200px;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .app-header h1 {
    font-size: 1.5rem;
  }
}

/* ===== DONATE FOOTER STYLES ===== */
/* ===== Layout ===== */
.pmc-footer { padding: 16px 0 24px; }
.pmc-wrap   { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

.pmc-card{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items:center;
  padding: 12px 16px;
  border-radius: 14px;

  /* thin glass */
  background: rgba(255,255,255,0.06);
  border: 1px solid rgb(2, 2, 2);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* ===== Type scale + rhythm (tight) ===== */
.pmc-h4{ margin:0; font-size:14px; line-height:1.2; font-weight:700; }
.pmc-title{ text-align:right; }
.pmc-sub{ margin:2px 0 0; font-size:12px; line-height:1.25; opacity:.85; text-align:right; }
.pmc-micro{ margin:6px 0 0; font-size:11px; line-height:1.25; opacity:.9; text-align:right; }
.pmc-legal{ margin:2px 0 0; font-size:10.5px; line-height:1.25; opacity:.72; text-align:right; }

/* ===== Sources ===== */
.pmc-col--sources{ min-width: 320px; }
.pmc-sources{
  margin:6px 0 0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:10px 14px;
  font-size:12px; opacity:.9;
}
.pmc-sources li{ white-space:nowrap; }

/* ===== Donate block ===== */
.pmc-col--donate{ display:grid; justify-items:end; }
.pmc-btn{
  margin-top:8px;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:10px;
  text-decoration:none;

  /* very light glassy gradient button */
  background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.72));
  border:1px solid rgb(0, 0, 0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 6px 16px rgba(0,0,0,0.20);
  transition: transform .12s ease, box-shadow .12s ease;
}
.pmc-btn:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 10px 22px rgba(0,0,0,0.24);
}
.pmc-btn-icon{ width:20px; height:20px; display:block; }

/* ===== Responsive ===== */
@media (max-width:900px){
  .pmc-card{ grid-template-columns: 1fr; gap:12px; }
  .pmc-title, .pmc-sub, .pmc-micro, .pmc-legal{ text-align:left; }
  .pmc-col--donate{ justify-items:start; }
}


/* Tighten vertical rhythm globally in the card */
.footer-card p { margin: 0;
  border: 1px solid #000;           /* <-- solid black */
  border-radius: 14px;
}

/* Responsive */
@media (max-width: 900px) {
  .footer-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }
  .donate-cta, .donate-copy, .donate-micro, .nonprofit-line {
    justify-items: start;
    text-align: left;
  }
  .donate-button { height: 34px; }
}