/* app.css — non-critical styles for paytothe.com */
body{ background: radial-gradient(1200px 600px at 10% -10%, #ecfeff 0%, transparent 60%), radial-gradient(1200px 600px at 110% -20%, #ecfdf5 0%, transparent 60%), var(--bg); }
.card{ box-shadow:0 4px 16px rgba(2,6,23,.04); transition:box-shadow .2s, transform .2s, border-color .2s; }
.card:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(2,6,23,.08); border-color:#dbeafe; }
.chip{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--border); padding:.35rem .7rem; border-radius:9999px; font-size:.875rem; background:#f8fafc; }
.link:hover{ color:var(--accent); text-decoration:none; }
header nav{ flex-wrap: wrap; }
.kbd{ padding:.15rem .45rem; font-size:.75rem; font-family:ui-monospace,Menlo,Consolas,monospace; background:#f1f5f9; border:1px solid var(--border); border-radius:6px; }
input[type="search"], select{ background:#fff; }
input[type="search"]:focus, select:focus{ outline:2px solid rgba(16,185,129,.35); box-shadow:0 0 0 4px rgba(16,185,129,.12); border-color:#a7f3d0; }
button{ background:#fff; cursor:pointer; transition:background .15s, transform .05s; }
button:hover{ background:#f8fafc; }
button:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent-600); color:#fff; border-color:transparent; box-shadow:0 6px 14px rgba(5,150,105,.18); transition: transform .06s ease, box-shadow .2s ease; }
.btn-primary:hover{ background:var(--accent); box-shadow:0 10px 20px rgba(16,185,129,.22); }
.btn-primary:active{ transform: translateY(1px); }
.btn-ghost{ border:1px solid var(--border); border-radius:8px; padding:.25rem .5rem; font-size:.75rem; }
.btn-ghost[disabled]{ opacity:.5; cursor:not-allowed; }
.btn-inline{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .6rem; border:1px solid var(--border); border-radius:8px; font-size:.875rem; background:transparent; }
.btn-inline:hover{ background:rgba(2,6,23,.04); }
html[data-theme="dark"] .btn-inline:hover{ background:rgba(255,255,255,.06); }
.icon-16{ width:16px; height:16px; }
@media (prefers-reduced-motion: reduce){ .card:hover{ transform:none; } .btn-primary{ transition:none; } }
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.spinner{ width:32px;height:32px;border:4px solid #e2e8f0;border-top-color:#059669;border-radius:50%;animation:mltShdSpin 1.7s infinite ease,round 1.7s infinite ease; }
@keyframes mltShdSpin{0%{box-shadow:0 0 0 0 rgba(5,150,105,.4)}70%{box-shadow:0 0 0 8px rgba(5,150,105,0)}100%{box-shadow:0 0 0 0 rgba(5,150,105,0)}}
@keyframes round{to{transform:rotate(360deg)}}

/* Modals */
#feeModal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:1rem; opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:50; }
#feeModal[data-open="true"]{ opacity:1; pointer-events:auto; }
#feeModal .backdrop{ position:absolute; inset:0; background:rgba(2,6,23,.55); backdrop-filter: blur(2px); }
#feeModal [role="dialog"]{ position:relative; width:100%; max-width:36rem; border-radius:16px; border:1px solid var(--border); background:var(--card); color:var(--text); box-shadow:0 20px 60px rgba(2,6,23,.45); transform: translateY(6px) scale(.98); opacity:0; transition:transform .2s ease, opacity .2s ease; }
#feeModal[data-open="true"] [role="dialog"]{ transform:none; opacity:1; }

/* County input looks like select */
.combo{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24' stroke='%2364758b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .75rem center; background-size:1.1rem; padding-right:2.25rem; }
.combo:disabled{ opacity:.6; cursor:not-allowed; background-image:none; }

/* Dark mode readability */
html[data-theme="dark"] body{ color:var(--text); background:var(--bg); }
html[data-theme="dark"] header{ background:rgba(2,6,23,.8) !important; border-color:var(--border); }
html[data-theme="dark"] .card{ background:var(--card); border-color:var(--border); }
html[data-theme="dark"] .chip{ background:#0b1220; border-color:var(--border); color:var(--text); }
html[data-theme="dark"] .link{ color:var(--accent); }
html[data-theme="dark"] .link:hover{ color:#67e8f9; }
html[data-theme="dark"] ::placeholder{ color:#9fb3c8; opacity:1; }
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { background:#111827; color:var(--text); }
html[data-theme="dark"] #county{ background:#111827; color:var(--text) !important; -webkit-text-fill-color: var(--text); }
html[data-theme="dark"] #county:disabled{ color:#94a3b8; -webkit-text-fill-color:#94a3b8; }
html[data-theme="dark"] #county::placeholder{ color:#9fb3c8; }

/* --- High-contrast controls in dark mode --- */
html[data-theme="dark"] select,
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] .combo {
  background: #0f172a;           /* card */
  color: #e5e7eb;                /* text */
  border-color: #334155;         /* slate-700 */
}

/* Buttons */
html[data-theme="dark"] button {
  background: #111827;           /* slightly darker than card */
  color: #e5e7eb;
  border-color: #334155;
}

/* Theme toggle in header */
html[data-theme="dark"] #themeToggle {
  background: transparent;       /* avoid white-on-white look */
  color: #e5e7eb;
  border-color: #334155;
}

/* Clear button should still look present even when disabled */
#clear[disabled] {
  opacity: .8;                   /* was .5; too faint on dark */
}

/* View toggle chip */
#viewToggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 9999px;
  overflow: hidden;
  font-size: .875rem;
}
#viewToggle [role="radio"] {
  border: 0;
  padding: .35rem .7rem;
  background: transparent;
}
#viewToggle [role="radio"][aria-checked="true"] {
  background: var(--accent-600);
  color: #fff;
}
html[data-theme="dark"] #viewToggle {
  background: #0f172a;
  border-color: #334155;
  color: #e5e7eb;
}
html[data-theme="dark"] #viewToggle [role="radio"][aria-checked="true"] {
  background: var(--accent);
  color: #0f172a;
}

/* Labels in filter area */
label { color: var(--text); }

/* Tooltips */
.tooltip {
  position: absolute;
  z-index: 10000;
  max-width: 280px;
  padding: .5rem .75rem;
  border-radius: .375rem;
  font-size: .875rem;
  line-height: 1.2;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity .15s ease, transform .15s ease;
}
.tooltip[data-open] {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.info-btn {
  display: none;
  margin-left: .25rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  font-size: .75rem;
  line-height: 1.1rem;
  text-align: center;
}
@media (hover: none) {
  .info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
  }
}