:root {
  --bg: #f8f7f5;
  --text: #1c1c1c;
  --muted: #747474;
  --green: #16A36A;
  --green-dark: #0d7a4e;
  --green-pale: #e6f5ee;
  --blue: #1a73e8;
  --slate: #8a9bb0;
  --border: #e5e7eb;
  --card: #fff;
  --future-bg: #f8f9fb;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; }
button, a { font: inherit; }
a { color: inherit; }
.hidden { display: none !important; }
.svg-defs { position: absolute; overflow: hidden; }

.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(248,247,245,.92);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 2px 10px rgba(0,0,0,.045);
}
.header-inner {
  height: 64px; max-width: 768px; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { width: 32px; height: 32px; flex: none; }
.brand h1 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.brand p { margin: 3px 0 0; font-size: 11px; color: var(--muted); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang-button {
  height: 34px; min-width: 48px; border-radius: 999px; border: 1px solid #e2e2e2;
  background: rgba(255,255,255,.72); font-size: 12px; font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.main-shell { width: 100%; max-width: 768px; margin: 0 auto; }
.map-wrap {
  position: relative; height: 52dvh; min-height: 320px; margin: 8px 12px 0;
  border-radius: 24px; overflow: hidden; background: #eef0f1;
}
@media (min-width: 640px) { .map-wrap { min-height: 400px; } }
#map { width: 100%; height: 100%; }
.leaflet-tile-pane { filter: url(#water-blue-boost); }
.leaflet-tile { image-rendering: -webkit-optimize-contrast; }
.leaflet-control-attribution { font-size: 10px !important; background: rgba(255,255,255,.8) !important; }
.locate-button {
  position: absolute; z-index: 600; top: 12px; right: 12px; width: 46px; height: 46px;
  border-radius: 50%; border: 1px solid rgba(0,0,0,.08); background: #fff; color: var(--green);
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.14);
}
.locate-button svg { width: 23px; height: 23px; }

@keyframes mapPulse { 0%{transform:scale(1);opacity:.5} 75%{transform:scale(2.5);opacity:0} 100%{transform:scale(2.5);opacity:0} }
.user-loc { position: relative; width: 26px; height: 26px; }
.user-loc::before { content:""; position:absolute; inset:0; border-radius:50%; background:#3b82f6; animation:mapPulse 2.4s ease-out infinite; }
.user-loc::after { content:""; position:absolute; inset:6px; border-radius:50%; background:#3b82f6; border:2.5px solid #fff; box-shadow:0 2px 8px rgba(59,130,246,.55); }

.leaflet-popup-content-wrapper { border-radius: 14px !important; box-shadow: 0 8px 32px rgba(0,0,0,.12) !important; border: 1px solid #e8eaed; }
.leaflet-popup-content { margin: 12px 16px !important; font-family: "Plus Jakarta Sans", sans-serif; min-width: 150px; }
.popup-card-link { display:block; color:inherit !important; text-decoration:none; }
.popup-card-link:focus-visible { outline:2px solid #3b82f6; outline-offset:4px; }
.pharmacy-card { scroll-margin-top:100px; }
.pharmacy-card:focus { outline:2px solid #3b82f6; outline-offset:3px; }
.location-status { margin:8px 0; font-size:13px; color:#555; }
.location-status:empty { display:none; }
.popup-name { font-weight: 700; font-size: 13px; margin-bottom: 3px; }
.popup-status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.popup-status.open { color: var(--green); }
.popup-status.future { color: var(--slate); }

.content-wrap { padding: 16px; }
.results { display: flex; flex-direction: column; gap: 32px; margin-top: 8px; }
.pharmacy-section { display: flex; flex-direction: column; gap: 12px; }
.section-title-row { display: flex; align-items: center; gap: 9px; padding: 0 4px; }
.section-title-row h2 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .055em; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(22,163,106,.05); }
.muted-title h2 { color: #70757d; }
.card-list { display: flex; flex-direction: column; gap: 12px; }

.pharmacy-card {
  background: var(--card); border-radius: 22px; box-shadow: 0 3px 12px rgba(0,0,0,.055);
  overflow: hidden; border: 0;
}
.pharmacy-card.future { background: var(--future-bg); border: 1px solid #dfe4ea; }
.card-body { padding: 20px; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.status-chip { background: var(--green-pale); color: var(--green-dark); padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.future .status-chip { background: #eef1f4; color: #64748b; border: 1px solid #dce2e8; font-size: 12px; font-weight: 700; }
.duty-type { font-size: 10px; color: #888; letter-spacing: .12em; text-transform: uppercase; }
.future .duty-type { color: #98a2b1; }
.distance-chip { flex: none; background: rgba(22,163,106,.1); color: var(--green); padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.future .distance-chip { background:#eef1f4; color:#64748b; border:1px solid #dce2e8; }
.pharmacy-name { margin: 14px 0 0; font-size: 18px; line-height: 1.25; font-weight: 800; letter-spacing: -.02em; }
.future .pharmacy-name { color: #3f4b5a; }
.details { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; color: #747474; font-size: 14px; }
.future .details { color: #667085; }
.detail-row { display: flex; align-items: flex-start; gap: 11px; text-decoration: none; line-height: 1.42; }
.detail-row svg { flex: none; width: 19px; height: 19px; margin-top: 1px; color: #7c8289; }
.detail-row.address svg { color: rgba(22,163,106,.58); }
.future .detail-row svg { color: #98a2b1; }
.detail-row.address:hover span { text-decoration: underline; text-underline-offset: 2px; }
.card-actions { display: flex; gap: 10px; padding: 0 20px 20px; }
.action-btn { min-height: 50px; flex: 1; border-radius: 17px; display: flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; font-size: 14px; font-weight: 700; }
.action-btn svg { width: 19px; height: 19px; }
.call-btn { color:#fff; background: linear-gradient(160deg,#1dbd7a 0%,#0e8a57 100%); box-shadow:0 2px 10px rgba(14,138,87,.28), inset 0 1px 0 rgba(255,255,255,.18); }
.directions-btn { color:#fff; background: #1a73e8; }
.future .card-actions { display: block; }
.future .directions-btn { min-height: 46px; color:#596574; background:transparent; border:1px solid #cbd3dc; }

.loading-list { display: flex; flex-direction: column; gap: 12px; }
.skeleton-card { height: 220px; border-radius: 22px; background: linear-gradient(90deg,#eee 25%,#f6f6f6 37%,#eee 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
@keyframes shimmer { 0%{background-position:100% 0}100%{background-position:0 0} }
.error-state, .empty-state { text-align:center; padding:48px 20px; color:#747474; background:#fff; border-radius:22px; box-shadow:0 3px 12px rgba(0,0,0,.04); }
.error-state h2 { color:#1c1c1c; font-size:20px; margin:12px 0 8px; }
.error-state p { max-width:320px; margin:0 auto 18px; font-size:14px; line-height:1.5; }
.error-icon { width:48px;height:48px;margin:auto;border-radius:50%;display:grid;place-items:center;background:#feecec;color:#d43a3a;font-weight:800; }
#retryButton { border:1px solid #d8d8d8;background:white;border-radius:12px;padding:10px 16px;font-weight:700;cursor:pointer; }

.footer { max-width:768px; margin: 0 auto; padding: 10px 16px 26px; text-align:center; color:#999; }
.footer p { margin: 4px 0; font-size: 12px; }
.footer .updated { font-size:10px; color:#aaa; }
.footer .stale { display:inline-block; margin-top:8px; background:#fff3cd; color:#916c00; border-radius:9px; padding:6px 10px; }

@media (max-width: 390px) {
  .brand p { max-width: 225px; }
  .content-wrap { padding-left:12px; padding-right:12px; }
  .card-body { padding:18px; }
  .card-actions { padding-left:18px; padding-right:18px; }
  .pharmacy-name { font-size:17px; }
}