:root{
  --bg:#f5f7fb;
  --card:#fff;
  --text:#0b1220;
  --muted:rgba(11,18,32,.62);
  --muted2:rgba(11,18,32,.50);
  --border:rgba(15,23,42,.10);
  --shadow:0 18px 40px rgba(15,23,42,.10);
  --shadow2:0 10px 26px rgba(15,23,42,.08);
  --radius:22px;
  --radius2:18px;
  --blue:#2563eb;
  --tap:48px;

  --free:#22c55e;
  --low:#f59e0b;
  --paid:#ef4444;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background:
    radial-gradient(900px 420px at 20% -10%, rgba(34,197,94,.16), transparent 55%),
    radial-gradient(900px 420px at 85% 0%, rgba(37,99,235,.16), transparent 55%),
    radial-gradient(900px 420px at 50% 115%, rgba(249,115,22,.10), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text","SF Pro Display",
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.page{
  max-width: 860px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 12px) 14px calc(env(safe-area-inset-bottom) + 22px);
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 12px;
}

.back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height: var(--tap);
  padding:0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  border:1px solid var(--border);
  text-decoration:none;
  color: rgba(11,18,32,.78);
  font-weight: 900;
  font-size: 14px;
  box-shadow: var(--shadow2);
}

.title{
  margin:0;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: -0.01em;
  color: rgba(11,18,32,.82);
}

.pill{
  font-size: 12px;
  font-weight: 950;
  color: rgba(11,18,32,.72);
  background: rgba(255,255,255,.70);
  border:1px solid var(--border);
  padding: 7px 10px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: var(--shadow2);
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.76));
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* Controls */
.controls{
  padding: 14px;
  display:grid;
  gap: 10px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.searchbar{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px;
  border-radius: var(--radius2);
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow2);
}

.icon{
  width: var(--tap);
  height: var(--tap);
  border-radius: 16px;
  background: rgba(37,99,235,.08);
  display:grid;
  place-items:center;
  flex: 0 0 auto;
}
.icon svg{ width: 19px; height: 19px; stroke: rgba(37,99,235,.85); }

.searchbar input{
  flex: 1;
  border:0;
  outline:none;
  background:transparent;
  font-size:16px;
  padding: 12px 2px;
  min-width:0;
  color: var(--text);
}
.searchbar input::placeholder{ color: rgba(11,18,32,.35); }

.searchbar .go{
  width: var(--tap);
  height: var(--tap);
  border:0;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(37,99,235,.12);
  color: rgba(37,99,235,.95);
  cursor:pointer;
  flex: 0 0 auto;
}
.searchbar .go svg{ width: 20px; height: 20px; stroke: currentColor; }
.searchbar .go:active{ transform: translateY(1px); filter: brightness(.98); }

/* Generic row */
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px;
  border:1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
}

.row label{
  font-size: 14px;
  font-weight: 950;
  color: rgba(11,18,32,.86);
}

/* ===========================
   COUNTY (no clear button)
   =========================== */

/* Use grid so the control never wraps into a second “random block” */
.row.row-county{
  display:grid;
  grid-template-columns: 110px 1fr;
  align-items:center;
  gap: 12px;

  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

.row.row-county label{
  font-size: 15px;
  font-weight: 950;
  color: rgba(11,18,32,.90);
  letter-spacing: -0.01em;
}

/* Control wrapper spans the whole remaining column */
.county-control{
  min-width: 0;
}

/* Outer pill (the only pill) */
.county-pill{
  position: relative;
  width: 100%;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background:
    radial-gradient(420px 140px at 10% 0%, rgba(37,99,235,.10), transparent 60%),
    rgba(255,255,255,.96);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 10px 22px rgba(15,23,42,.06);
  overflow:hidden;
}

/* Make select totally flat so iOS can’t draw its own inner “pill” */
.county-pill .county-select{
  -webkit-appearance:none;
  appearance:none;
  border:0;
  outline:none;
  background:transparent;
  box-shadow:none;

  width:100%;
  height:100%;
  padding: 0 52px 0 16px;

  font-size: 16px;
  font-weight: 950;
  color: rgba(11,18,32,.90);
  cursor:pointer;
}

/* Focus ring goes on the wrapper */
.county-pill:focus-within{
  border-color: rgba(37,99,235,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 10px 22px rgba(15,23,42,.06),
    0 0 0 4px rgba(37,99,235,.18);
}

/* Caret (single caret, consistent) */
.county-caret{
  position:absolute;
  right: 18px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(11,18,32,.60);
  border-bottom: 2px solid rgba(11,18,32,.60);
  transform: translateY(-60%) rotate(45deg);
  pointer-events:none;
  opacity:.95;
}

/* Mobile: stack label above pill cleanly */
@media (max-width: 520px){
  .row.row-county{
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
  }
  .row.row-county label{
    padding-left: 2px;
  }
}

/* Results */
.results-head{
  padding: 12px 14px 6px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}

.count{ margin:0; font-size:14px; color:var(--muted); font-weight:900; }
.hint{ margin:0; font-size:12.5px; color:var(--muted2); text-align:right; }

.list{
  padding: 10px 14px 14px;
  display:grid;
  gap: 10px;
}

.item{
  border:1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  padding: 14px;
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
}

.item-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.name{ margin:0; font-size:16px; font-weight: 950; letter-spacing: -0.01em; }
.meta{ margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.35; }

.badge{
  font-size:12px;
  font-weight:950;
  padding: 7px 10px;
  border-radius: 999px;
  border:1px solid rgba(15,23,42,.10);
  white-space:nowrap;
}
.badge-free{ background: rgba(34,197,94,.14); color:#0b5d20; border-color: rgba(34,197,94,.22); }
.badge-low { background: rgba(245,158,11,.16); color:#7a3f00; border-color: rgba(245,158,11,.24); }
.badge-paid{ background: rgba(239,68,68,.14); color:#7a0f0a; border-color: rgba(239,68,68,.22); }

.actions{ margin-top: 12px; display:grid; gap:10px; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 46px;
  padding: 0 12px;
  border-radius: 16px;
  border:1px solid rgba(15,23,42,.12);
  text-decoration:none;
  font-weight: 950;
  font-size: 14px;
  width: 100%;
}

.btn-primary{
  background: var(--blue);
  color:#fff;
  border-color: rgba(37,99,235,.35);
  box-shadow: 0 10px 20px rgba(37,99,235,.16);
}
.btn-primary:active{ transform: translateY(1px); filter: brightness(.98); }

.btn.disabled{
  opacity: .55;
  cursor: not-allowed;
}

.empty{
  padding: 18px 14px 22px;
  text-align:center;
  color: rgba(11,18,32,.72);
}

:focus-visible{
  outline: 3px solid rgba(37,99,235,.30);
  outline-offset: 2px;
  border-radius: 14px;
}