/* ── Reset (scoped — no global html/body interference) ───────────────────── */
#eita-app *,
#eita-app *::before,
#eita-app *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ───────────────────────────────────────────────────────── */
#eita-app {
  --teal:        #22625f;
  --teal-dk:     #174440;
  --teal-lt:     #e6f4f3;
  --teal-xlt:    #f2faf9;
  --map-bg:      #edf4f8;
  --county-base: #c5dde5;
  --county-data: #7dbfbe;
  --county-hi:   #4aa8a6;
  --county-sel:  #22625f;
  --w:    #ffffff;
  --g50:  #f9fafb;
  --g100: #f3f4f6;
  --g200: #e5e7eb;
  --g400: #9ca3af;
  --g600: #4b5563;
  --g900: #111827;
  --ei-bg: #dbeafe; --ei-fg: #1e3a8a;
  --ps-bg: #dcfce7; --ps-fg: #14532d;
  --fs-bg: #fef9c3; --fs-fg: #713f12;
  --el-bg: #d1fae5; --el-fg: #064e3b;
  --mod-bg:#f3f4f6; --mod-fg:#374151;

  /* ── Self-contained block layout ── */
  position:    relative;
  display:     flex;
  flex-direction: column;
  width:       100%;
  height:      620px;          /* adjustable via Elementor height */
  min-height:  480px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size:   14px;
  color:       var(--g900);
  background:  var(--map-bg);
  border:      1px solid var(--g200);
  border-radius: 10px;
  overflow:    hidden;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
#eita-app .topbar {
  position:   relative;           /* NOT fixed */
  flex-shrink: 0;
  height:     54px;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--g200);
  display:    flex;
  align-items: center;
  padding:    0 16px;
  gap:        12px;
  z-index:    10;
  flex-wrap:  nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
#eita-app .topbar::-webkit-scrollbar { display: none; }

#eita-app .brand { display:flex; align-items:center; gap:8px; flex-shrink:0; }
#eita-app .brand-mark {
  width:28px; height:28px; background:var(--teal); border-radius:7px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
#eita-app .brand-mark svg { width:14px; height:14px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#eita-app .brand-name { font-size:13px; font-weight:600; color:var(--g900); white-space:nowrap; }
#eita-app .div { width:1px; height:20px; background:var(--g200); flex-shrink:0; }

#eita-app .sel-wrap { position:relative; flex-shrink:0; }
#eita-app .sel-wrap::after {
  content:''; position:absolute; right:8px; top:50%;
  transform:translateY(-50%);
  border:4px solid transparent; border-top-color:var(--g400);
  margin-top:2px; pointer-events:none;
}
#eita-app #eita-csel {
  appearance:none; background:var(--g50); border:1px solid var(--g200);
  color:var(--g900); padding:6px 26px 6px 10px; border-radius:7px;
  font-size:12px; font-family:inherit; font-weight:500;
  cursor:pointer; min-width:160px; transition:border-color .15s;
}
#eita-app #eita-csel:hover  { border-color:var(--teal); }
#eita-app #eita-csel:focus  { outline:2px solid var(--teal); outline-offset:2px; border-color:transparent; }
#eita-app #eita-csel option { color:#111; background:#fff; }

#eita-app .pills { display:flex; gap:4px; flex-wrap:nowrap; }
#eita-app .pill {
  font-family:inherit; font-size:11px; font-weight:500;
  padding:5px 11px; border-radius:20px;
  border:1px solid var(--g200); background:var(--g50); color:var(--g600);
  cursor:pointer; white-space:nowrap; transition:all .14s;
}
#eita-app .pill:hover { border-color:var(--teal); color:var(--teal); background:var(--teal-xlt); }
#eita-app .pill:focus { outline:2px solid var(--teal); outline-offset:2px; }
#eita-app .pill.on   { background:var(--teal); color:#fff; border-color:var(--teal); font-weight:600; }
#eita-app .tb-tail   { margin-left:auto; flex-shrink:0; font-size:11px; color:var(--g600); white-space:nowrap; }

/* ── Map canvas ──────────────────────────────────────────────────────────── */
#eita-app .map-canvas {
  position:   relative;           /* NOT fixed */
  flex:       1 1 0;
  overflow:   hidden;
  background: var(--map-bg);
  min-height: 0;
}
#eita-app .map-canvas::before {
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(34,98,95,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events:none; z-index:0;
}
#eita-app #eita-svg {
  width:100%; height:100%; display:block;
  position:relative; z-index:1;
}
#eita-app #eita-svg path {
  fill:var(--county-base); stroke:#fff; stroke-width:.9; stroke-linejoin:round;
  cursor:pointer; outline:none; transition:fill .13s;
}
#eita-app #eita-svg path.has-data { fill:var(--county-data); }
#eita-app #eita-svg path:hover,
#eita-app #eita-svg path:focus  { fill:var(--county-hi); }
#eita-app #eita-svg path.sel    { fill:var(--county-sel)!important; stroke:rgba(255,255,255,.8); stroke-width:1.6; }
#eita-app #eita-svg path:focus-visible { stroke:var(--teal-dk); stroke-width:2.5; }
#eita-app #eita-svg text {
  fill:#0f2832;
  font-family:'Inter',system-ui,sans-serif; font-weight:700;
  pointer-events:none; user-select:none;
}

/* ── Tooltip ─────────────────────────────────────────────────────────────── */
#eita-tip {
  position:  absolute;            /* absolute within map-canvas, NOT fixed */
  background:var(--g900); color:#fff;
  padding:7px 12px; border-radius:8px; font-size:12px; font-weight:600;
  pointer-events:none; opacity:0; transition:opacity .1s;
  white-space:nowrap; z-index:200;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
}
#eita-tip.on { opacity:1; }
#eita-app .tip-sub { font-size:10px; font-weight:400; color:rgba(255,255,255,.82); margin-top:1px; }

/* ── Legend ──────────────────────────────────────────────────────────────── */
#eita-app .legend {
  position: absolute;             /* absolute within map-canvas, NOT fixed */
  bottom:12px; left:12px;
  display:flex; gap:10px; z-index:50;
  background:rgba(255,255,255,.92);
  border:1px solid var(--g200); border-radius:7px; padding:6px 10px;
}
#eita-app .leg { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:500; color:var(--g600); }
#eita-app .leg-sw { width:11px; height:11px; border-radius:2px; border:1px solid rgba(0,0,0,.08); flex-shrink:0; }

/* ── Floating panel ──────────────────────────────────────────────────────── */
#eita-pw {
  position:  absolute;            /* absolute within map-canvas, NOT fixed */
  top:10px; right:12px;
  width:     390px;
  max-width: calc(100% - 24px);
  /* Must have explicit height for children to scroll */
  height:    calc(100% - 20px);
  max-height: 580px;
  z-index:   150;
  transition:transform .28s cubic-bezier(.34,1.4,.64,1), opacity .2s;
  transform: translateY(-10px) scale(.98);
  opacity:   0; pointer-events:none;
  display:   flex; flex-direction:column;
}
#eita-pw.open { transform:translateY(0) scale(1); opacity:1; pointer-events:all; }
#eita-panel {
  background:#fff; border-radius:14px; border:1px solid var(--g200);
  box-shadow:0 8px 40px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
  flex: 1 1 0;       /* fill the height of #eita-pw */
  min-height: 0;     /* allow flex child to shrink */
  display:flex; flex-direction:column; overflow:hidden;
}

/* ── Panel header ────────────────────────────────────────────────────────── */
#eita-app .phdr       { background:#224562; padding:14px 16px 12px; flex-shrink:0; }
#eita-app .phdr-row   { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:10px; }
#eita-app .cname      { font-size:18px; font-weight:700; color:#fff; line-height:1.15; letter-spacing:-.2px; }
#eita-app .xbtn {
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.2);
  color:#fff; width:28px; height:28px; border-radius:50%; cursor:pointer;
  font-size:14px; font-family:inherit;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:background .14s;
}
#eita-app .xbtn:hover { background:rgba(255,255,255,.28); }
#eita-app .xbtn:focus { outline:2px solid rgba(255,255,255,.7); outline-offset:2px; }
#eita-app .stat-row   { display:flex; gap:7px; }
#eita-app .stat       {
  flex:1; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.15);
  border-radius:8px; padding:7px 8px; text-align:center;
}
#eita-app .stat-n     { font-size:18px; font-weight:700; color:#fff; line-height:1; }
#eita-app .stat-l     { font-size:9px; font-weight:600; color:rgba(255,255,255,.88); margin-top:2px; text-transform:uppercase; letter-spacing:.4px; }
#eita-app .stat.zero  { opacity:.38; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
#eita-app .tabs {
  display:flex; gap:6px; padding:10px 12px 0;
  background:#fff; border-bottom:1px solid var(--g200); flex-shrink:0;
}
#eita-app .tab {
  flex:1; padding:8px 6px 9px; font-size:11px; font-weight:600;
  color:var(--g600); cursor:pointer; text-align:center;
  transition:all .14s; font-family:inherit;
  background:var(--g100); border:1px solid var(--g200);
  border-bottom:none; border-radius:8px 8px 0 0;
  position:relative; top:1px; white-space:nowrap;
}
#eita-app .tab:hover { background:var(--teal-lt); color:var(--teal); border-color:var(--teal); }
#eita-app .tab:focus { outline:2px solid var(--teal); outline-offset:2px; }
#eita-app .tab.on    {
  background:#F0A500; color:#0f2832;
  border-color:#F0A500; border-bottom-color:#F0A500;
  font-weight:700; box-shadow:none;
}

/* ── Panel body & tables ─────────────────────────────────────────────────── */
#eita-panel .pbody { overflow-y:auto; overflow-x:hidden; flex:1 1 0; min-height:0; }

#eita-app .ptbl { width:100%; border-collapse:collapse; table-layout:auto; }
#eita-app .ptbl th:first-child { width:82px; }
#eita-app .ptbl thead th {
  font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.6px;
  color:var(--g600); padding:8px 12px 7px; background:var(--g50);
  border-bottom:1px solid var(--g200); text-align:left;
  position:sticky; top:0; z-index:2;
}
#eita-app .ptbl tbody tr   { border-bottom:1px solid var(--g200); transition:background .1s; }
#eita-app .ptbl tbody tr:hover { background:var(--teal-xlt); }
#eita-app .ptbl tbody tr:last-child { border-bottom:none; }
#eita-app .ptbl td { padding:8px 10px; font-size:12px; color:var(--g900); vertical-align:top; word-break:break-word; overflow-wrap:anywhere; }
#eita-app .ptbl td.phone      { white-space:nowrap; width:105px; }
#eita-app .ptbl td.phone a    { color:var(--teal); font-weight:500; text-decoration:none; }
#eita-app .ptbl td.phone a:hover { text-decoration:underline; }
#eita-app .ptbl td.phone a:focus { outline:2px solid var(--teal); outline-offset:2px; border-radius:2px; }
#eita-app .sub  { font-size:10px; color:var(--g600); margin-top:3px; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
#eita-app .tbadge {
  display:inline-block; font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:.3px;
  padding:2px 7px; border-radius:8px; white-space:nowrap;
}
#eita-app .b-it  { background:var(--ei-bg); color:var(--ei-fg); }
#eita-app .b-ps  { background:var(--ps-bg); color:var(--ps-fg); }
#eita-app .b-fs  { background:var(--fs-bg); color:var(--fs-fg); }
#eita-app .b-el  { background:var(--el-bg); color:var(--el-fg); }
#eita-app .b-mod { background:var(--mod-bg); color:var(--mod-fg); }
#eita-app .also  { font-size:10px; color:var(--g600); font-style:italic; margin-top:3px; }
#eita-app .none  { padding:20px 14px; font-size:12px; color:var(--g400); font-style:italic; text-align:center; }

/* ── Panel actions bar ───────────────────────────────────────────────────── */
#eita-app .panel-actions {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 12px; border-bottom:1px solid var(--g200);
  background:var(--g50); flex-shrink:0;
}
#eita-app .print-btn {
  display:flex; align-items:center; gap:5px;
  padding:5px 11px;
  background:rgba(34,69,98,.08); border:1px solid rgba(34,69,98,.18);
  border-radius:6px; color:#224562; font-size:11px; font-weight:500;
  cursor:pointer; font-family:inherit; transition:background .15s;
}
#eita-app .print-btn:hover { background:rgba(34,69,98,.15); }
#eita-app .print-btn:focus { outline:2px solid var(--teal); outline-offset:2px; }

/* ── Copy phone ──────────────────────────────────────────────────────────── */
#eita-app .copy-btn {
  display:inline-flex; align-items:center; gap:3px;
  margin-left:6px; padding:1px 5px;
  background:var(--teal-lt); border:1px solid var(--teal-lt);
  border-radius:4px; font-size:10px; font-weight:500;
  color:var(--teal); cursor:pointer;
  opacity:0; transition:opacity .15s; vertical-align:middle;
  font-family:inherit;
}
#eita-app .ptbl td.phone:hover .copy-btn { opacity:1; }
#eita-app .copy-btn.copied { background:#d1fae5; color:#065f46; border-color:#a7f3d0; }

/* ── Also-serves toggle ──────────────────────────────────────────────────── */
#eita-app .also-toggle {
  font-size:10px; color:var(--teal); cursor:pointer;
  background:none; border:none; font-family:inherit;
  padding:0; text-decoration:underline;
}

/* ── Loading spinner ─────────────────────────────────────────────────────── */
@keyframes eita-spin { to { transform:rotate(360deg); } }

/* ── Accessibility ───────────────────────────────────────────────────────── */
#eita-app .sr-only {
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
  #eita-app .topbar,
  #eita-app .legend,
  #eita-pw { display:none!important; }
  #eita-app .map-canvas { height:280px; }
}

/* ── Responsive: narrow containers ──────────────────────────────────────── */
@media (max-width: 640px) {
  #eita-app         { height:560px; }
  #eita-pw          { width:calc(100% - 16px); right:8px; top:8px; }
  #eita-app .topbar { gap:8px; padding:0 10px; }
  #eita-app .brand-name,
  #eita-app .tb-tail { display:none; }
  #eita-app .pills  { gap:3px; }
  #eita-app .pill   { padding:4px 8px; font-size:10px; }
}