/* Earth Finance public site styles (Bootstrap 5.3.8 base)
   Keep overrides minimal and component-scoped. */
:root {
  /* Brand tokens (approx from screenshots; adjust as needed) */
  --ef-primary: #1e6f5c; /* primary green */
  --ef-secondary: #0f3d3a; /* deep teal for headers */
  --ef-accent: #10b981; /* accent green */
  --ef-muted: #6b7280; /* gray text */
  --ef-surface: #f5f7f8; /* light panel bg */
  --ef-border: #e5e7eb; /* border color */

  --bs-primary: var(--ef-primary);
}

body {
  font-feature-settings: "rlig" 1, "calt" 0;
  color: #111827;
}

.navbar-brand span {
  letter-spacing: 0.2px;
}

.icon-square { display: inline-block; }

/* Panel & card tweaks */
.card { border-color: var(--ef-border); }
.card-header { background-color: #fff; }
.card.kpi-card .display-6 { line-height: 1; }

/* Utilities */
.bg-body-tertiary { background-color: var(--ef-surface) !important; }
.text-muted-ef { color: var(--ef-muted) !important; }
.border-ef { border-color: var(--ef-border) !important; }

/* Legend */
.legend-swatch { display:inline-block; width:16px; height:12px; border-radius:2px; border:1px solid rgba(0,0,0,.15); }
/* Gradient legend bar */
.legend-gradient { width: min(90vw, 520px); height: 12px; border-radius: 999px; border: 1px solid var(--ef-border); box-shadow: inset 0 0 0 1px rgba(0,0,0,.02); }

/* Inline legend layout for map overlay */
.legend-inline { display: grid; grid-auto-flow: row; gap: 6px; align-items: center; justify-items: center; }
.legend-inline .legend-item { display:flex; align-items:center; gap:6px; }

/* Map full-screen root and canvas */
/* .map-root { position: relative; } */
/* .map-canvas { height: 100%; min-height: 320px; } */

/* Sidebar overlay (floats over map) */
.map-sidebar-overlay { position: absolute; top: 12px; left: 12px; z-index: 11; background: rgba(255,255,255,0.98); backdrop-filter: saturate(180%) blur(8px); box-shadow: 0 12px 32px rgba(0,0,0,.2); border: 1px solid var(--ef-border); border-radius: 12px; padding: 12px; width: min(92vw, 360px); max-height: calc(100vh - 90px); overflow: auto; display: none; }
.map-sidebar-overlay .accordion-item { border-left: 0; border-right: 0; }
.map-sidebar-overlay.open { display: block; }
@media (min-width: 992px) {
  .map-sidebar-overlay { display: block; }
}

/* Map overlay (bottom center) */
.map-overlay-bottom { position: absolute; /*left: 50%; transform: translateX(-50%);*/ right: 1rem; width: 30vw; bottom: 16px; z-index: 10; background: rgba(255,255,255,0.96); backdrop-filter: saturate(180%) blur(8px); box-shadow: 0 6px 24px rgba(0,0,0,.15); border: 1px solid var(--ef-border); border-radius: 12px; padding: 10px 12px; max-width: min(96vw, 1400px); }
.map-overlay-bottom .btn-group { flex-wrap: wrap; }
#combined-weights { width: min(96vw, 1200px); }

/* Centered map spinner overlay */
.map-center-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 12; background: rgba(255,255,255,0.85); border: 1px solid var(--ef-border); border-radius: 16px; padding: 18px; box-shadow: 0 12px 32px rgba(0,0,0,.18); backdrop-filter: saturate(180%) blur(8px); }

/* Cool-looking spinner (clean CSS, widely supported) */
.ef-spinner { width: 64px; height: 64px; border-radius: 50%;
  border: 4px solid rgba(16, 185, 129, 0.18);
  border-top-color: #10b981;
  border-right-color: #06b6d4;
  animation: ef-spin 0.8s linear infinite;
  box-shadow: 0 8px 24px rgba(0,0,0,.15), inset 0 0 8px rgba(255,255,255,0.5);
}
@keyframes ef-spin { to { transform: rotate(360deg); } }

/* Chart/map placeholder areas */
.chart-area { min-height: 260px; background: linear-gradient(180deg, #fff, #fafafa); border: 1px solid var(--ef-border); border-radius: .5rem; }
.map-area { min-height: 420px; }

/* Section spacing tweaks for large screens */
@media (min-width: 1200px) {
  /* section { padding-top: 5rem; padding-bottom: 5rem; } */
}