/* =====================================================================
   SellGoldNearby.com — styles
   Layout: sticky header  +  sticky finder (search + map)  +  scrolling list
   Tuned for a 55+ audience: large text, big tap targets, high contrast.
   ===================================================================== */

:root{
  --black:#0d0d0f;
  --panel:#16161a;
  --panel-2:#1e1e24;
  --ink:#f4efe6;
  --muted:#b3ab9c;
  --gold:#d4af37;
  --gold-bright:#f3d572;
  --gold-deep:#a8842a;
  --green:#3fae6a;
  --line:#2c2c33;
  --radius:16px;
  --focus:#ffd970;
  --head-h:78px;            /* measured & updated by app.js */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:
    radial-gradient(1100px 520px at 80% -10%, rgba(212,175,55,.10), transparent 60%),
    var(--black);
  color:var(--ink);
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:19px;
  line-height:1.55;
  overflow-x:hidden;
}
a{color:var(--gold-bright)}
img{max-width:100%}
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:4px solid var(--focus); outline-offset:2px;
}
.wrap{max-width:1240px;margin:0 auto;padding:0 22px}

/* ---------- Sticky header ---------- */
header.site{
  position:sticky;top:0;z-index:1100;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(24,24,28,.98), rgba(13,13,15,.98));
  backdrop-filter:blur(8px);
}
.headrow{display:flex;align-items:center;gap:16px;padding:14px 22px}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.crest{
  width:52px;height:52px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%, #f7e08f, var(--gold) 45%, var(--gold-deep) 100%);
  border:2px solid #f3d572;
  box-shadow:0 4px 14px rgba(0,0,0,.5), inset 0 0 8px rgba(255,255,255,.35);
}
.crest span{font-weight:800;font-size:19px;color:#3a2c00;letter-spacing:.5px}
.brandtext{min-width:0}
.brand .name{margin:0;font-size:23px;font-weight:800;letter-spacing:.3px;line-height:1.05}
.brand .name .dot{color:var(--gold-bright)}
.brand .tag{margin:3px 0 0;color:var(--muted);font-size:14px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
.headcall{
  margin-left:auto;display:inline-flex;align-items:center;gap:9px;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));color:#241c00;
  text-decoration:none;font-weight:800;font-size:18px;
  padding:11px 17px;border-radius:12px;white-space:nowrap;
}
.headcall:hover{filter:brightness(1.06)}

/* ---------- Hero (headline) ---------- */
.hero{padding:30px 0 10px}
.hero h2{font-size:33px;line-height:1.2;margin:0 0 10px;font-weight:800}
.hero h2 .accent{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.sub{margin:0;color:var(--muted);font-size:18px;max-width:680px}

/* ---------- Stage: list (left) + finder (right) on desktop ---------- */
.stage{
  display:grid;grid-template-columns:1.1fr .9fr;gap:26px;
  align-items:start;padding:18px 0 60px;
}
.cards{order:1;display:flex;flex-direction:column;gap:16px;min-width:0}
.finder{order:2;position:sticky;top:calc(var(--head-h) + 14px);min-width:0}

/* ---------- Search card ---------- */
.searchcard{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:0 14px 40px rgba(0,0,0,.45);
}
.searchcard label{display:block;font-weight:800;font-size:18px;margin:0 0 12px}
.searchrow{display:flex;gap:12px;flex-wrap:wrap}
#findBtn{flex:0 0 auto}
.zipbox{
  flex:1 1 150px;min-width:0;
  font-size:23px;font-weight:700;letter-spacing:2px;
  padding:16px 18px;border-radius:12px;
  background:#0c0c0e;color:var(--ink);border:2px solid var(--line);
}
.zipbox::placeholder{color:#6f6a60;letter-spacing:1px;font-weight:600}
.zipbox:focus{border-color:var(--gold)}
.btn{
  cursor:pointer;border:none;border-radius:12px;
  font-size:19px;font-weight:800;padding:16px 22px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:58px;
}
.btn-gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));color:#241c00;box-shadow:0 6px 16px rgba(212,175,55,.25)}
.btn-gold:hover{filter:brightness(1.06)}
.btn-ghost{background:var(--panel-2);color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--gold)}
.geo{flex:1 1 100%}
.searchhint{margin:14px 2px 0;color:var(--muted);font-size:14px}
.searchhint b{color:var(--ink)}
.errline{margin:12px 2px 0;color:#ff8c8c;font-size:16px;font-weight:700;display:none}
.farline{margin:12px 2px 0;padding:12px 14px;font-size:15px;line-height:1.45;font-weight:600;
  color:var(--ink);background:rgba(212,175,55,.10);border:1px solid rgba(212,175,55,.40);border-radius:12px}
.farline a{font-weight:800;white-space:nowrap}
.addr-hint{color:var(--gold-deep);font-weight:600;font-size:.92em}
.maphint{margin:8px 2px 0;font-size:13px;color:var(--gold-deep);text-align:center}
.maphint b{color:var(--ink)}

/* ---------- Controls (count + filter) ---------- */
.controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:16px 2px}
.resultcount{font-size:18px;font-weight:800}
.resultcount .small{color:var(--muted);font-weight:600;font-size:15px}
.toggle{margin-left:auto;display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;font-size:16px;cursor:pointer;user-select:none}
.toggle input{width:24px;height:24px;accent-color:var(--gold);cursor:pointer}

/* ---------- Map ---------- */
#map{
  height:480px;width:100%;border-radius:var(--radius);
  border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.45);
  background:#0c0c0e;z-index:0;
}
.leaflet-popup-content{font-size:16px;margin:14px 16px;line-height:1.5}
.leaflet-popup-content b{font-size:17px}
.leaflet-popup-content a{font-weight:700}

/* ---------- Cards ---------- */
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;transition:border-color .15s;
}
.card.active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.card .top{display:flex;align-items:flex-start;gap:12px}
.card h3{margin:0;font-size:22px;font-weight:800;line-height:1.25;flex:1}
.badge{flex:0 0 auto;font-size:13px;font-weight:800;letter-spacing:.4px;padding:7px 12px;border-radius:999px;white-space:nowrap;text-transform:uppercase}
.badge.open{background:rgba(63,174,106,.16);color:#7fe0a3;border:1px solid rgba(63,174,106,.5)}
.badge.soon{background:rgba(212,175,55,.14);color:var(--gold-bright);border:1px solid rgba(212,175,55,.45)}
.badge.closed{background:rgba(150,150,160,.14);color:#b9b9c2;border:1px solid rgba(150,150,160,.4)}
.badge.closingsoon{background:rgba(232,140,60,.16);color:#f2b27a;border:1px solid rgba(232,140,60,.5)}
/* badges that carry a "· closes in X" tail: allow wrap, ease the casing */
.badge.open, .badge.closed{text-transform:none;letter-spacing:.2px;white-space:normal}
.dist{display:inline-block;margin-top:12px;font-size:16px;font-weight:800;color:var(--gold-bright);background:rgba(212,175,55,.10);border:1px solid rgba(212,175,55,.3);padding:6px 13px;border-radius:999px}
.meta{margin:14px 0 0;display:flex;flex-direction:column;gap:9px}
.meta .row{display:flex;gap:11px;align-items:flex-start;font-size:18px}
.meta .ico{flex:0 0 24px;text-align:center;color:var(--gold);font-size:18px;line-height:1.5}
.meta .row .txt{color:var(--ink)}
.meta .note{color:var(--gold-bright);font-weight:600}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.actions a{flex:1 1 160px;text-decoration:none;text-align:center;font-size:18px;font-weight:800;padding:16px;border-radius:12px;min-height:56px;display:inline-flex;align-items:center;justify-content:center;gap:9px}
.a-dir{background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));color:#241c00}
.a-dir:hover{filter:brightness(1.06)}
.a-call{background:var(--panel-2);border:1px solid var(--line);color:var(--ink)}
.a-call:hover{border-color:var(--gold)}
.empty{color:var(--muted);font-size:18px;padding:30px 4px}
.cards .card{scroll-margin-top:calc(var(--head-h) + 20px)}

/* ---------- Footer ---------- */
footer.site{border-top:1px solid var(--line);padding:28px 0 44px;color:var(--muted);font-size:16px}
footer.site .ftrow{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between}
footer.site a{color:var(--gold-bright);font-weight:800;text-decoration:none}

/* =====================================================================
   MOBILE  (<= 760px)
   Sticky header, then sticky finder (search + map), then scrolling list.
   ===================================================================== */
@media (max-width:760px){
  body{font-size:18px}
  .wrap{padding:0 14px}

  .headrow{padding:11px 14px;gap:12px}
  .crest{width:44px;height:44px}
  .crest span{font-size:16px}
  .brand .name{font-size:19px}
  .brand .tag{display:none}              /* keep header short so more map/list shows */
  .headcall{font-size:16px;padding:10px 14px}
  .headcall .num{display:none}           /* compact phone button: icon only */
  .headcall .ic{font-size:20px}
  .headcall::after{content:"Call";font-weight:800}

  .hero{display:none}                     /* search is right under the header instead */

  .stage{display:block;padding:0 0 28px}

  /* Finder becomes the sticky top panel */
  .finder{
    position:sticky;top:var(--head-h);z-index:900;
    order:0;margin:0 -14px;padding:12px 14px 14px;
    background:var(--black);
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 18px -8px rgba(0,0,0,.7);
  }
  .searchcard{padding:12px;box-shadow:none}
  .searchcard label{font-size:15px;margin-bottom:8px}
  .searchrow{gap:8px}
  .zipbox{flex:1 1 110px;font-size:21px;padding:13px 14px;text-align:center}
  .btn{min-height:54px;font-size:18px;padding:13px 16px}
  #findBtn{padding:13px 18px}
  .geo{flex:0 0 auto;min-width:54px;padding:13px}   /* icon-only, square */
  .geo .lbl{display:none}                            /* hide "Use My Location" text on mobile */
  .errline{margin-top:10px}

  .controls{margin:12px 2px 12px}
  .resultcount{font-size:16px}
  .toggle{font-size:15px}

  #map{height:30vh;min-height:200px;max-height:300px;box-shadow:none}

  /* Scrolling list below the sticky finder */
  .cards{gap:14px;padding-top:16px}
  .card{padding:18px}
  .card h3{font-size:20px}
  .meta .row{font-size:17px}
  .actions{gap:10px}
  .actions a{flex:1 1 100%;min-height:58px;font-size:19px}  /* full-width Directions / Call */

  footer.site{padding:22px 0 30px}
  footer.site .ftrow{flex-direction:column;align-items:flex-start;gap:8px}
}

@media (max-width:380px){
  .brand .name{font-size:18px}
  #map{height:26vh}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---- Reserve button (sits beside Directions / Call) ---- */
.a-reserve{flex:1 1 160px;cursor:pointer;font-family:inherit;font-size:18px;font-weight:800;
  padding:16px;border-radius:12px;min-height:56px;display:inline-flex;align-items:center;
  justify-content:center;gap:9px;border:1px solid var(--gold);background:transparent;color:var(--gold-bright)}
.a-reserve:hover{background:rgba(212,175,55,.12)}
.far-call{margin-left:10px;font-weight:700}

/* ---- Form modal ---- */
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.66);display:flex;align-items:flex-start;
  justify-content:center;padding:24px 16px;z-index:9999;overflow-y:auto;backdrop-filter:blur(2px)}
.modal{position:relative;width:100%;max-width:440px;margin:auto;background:var(--panel,#15140f);
  border:1px solid var(--line);border-radius:18px;padding:26px 24px 22px;
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
.modal-x{position:absolute;top:12px;right:14px;width:40px;height:40px;border:none;background:transparent;
  color:var(--muted,#9a948a);font-size:30px;line-height:1;cursor:pointer;border-radius:10px}
.modal-x:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.modal-h{margin:0 36px 6px 0;font-size:22px;color:var(--ink)}
.modal-sub{margin:0 0 18px;font-size:15px;line-height:1.5;color:var(--muted,#b8b2a6)}
.modal-form{display:flex;flex-direction:column;gap:13px}
.modal-form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:700;color:var(--ink)}
.modal-form input,.modal-form textarea{font-family:inherit;font-size:17px;padding:13px 14px;
  border-radius:11px;border:1px solid var(--line);background:var(--panel-2,#1d1b14);color:var(--ink)}
.modal-form input:focus,.modal-form textarea:focus{outline:none;border-color:var(--gold)}
.modal-form textarea{resize:vertical;min-height:70px}
.consent{flex-direction:row!important;align-items:flex-start;gap:10px!important;
  font-weight:500!important;font-size:13px!important;line-height:1.45;color:var(--muted,#b8b2a6)!important;
  background:rgba(212,175,55,.06);border:1px solid rgba(212,175,55,.25);border-radius:11px;padding:12px 13px}
.consent input{flex:0 0 auto;width:22px;height:22px;margin-top:1px;accent-color:var(--gold-deep,#b8932f)}
.modal-err{display:none;margin:2px 0 0;color:#ff8c8c;font-size:14px;font-weight:700}
.modal-submit{margin-top:4px;cursor:pointer;font-family:inherit;font-size:18px;font-weight:800;
  padding:15px;border-radius:12px;border:none;min-height:54px;
  background:linear-gradient(180deg,var(--gold-bright,#e7c65a),var(--gold-deep,#b8932f));color:#241c00}
.modal-submit:hover{filter:brightness(1.06)}
.modal-submit:disabled{opacity:.6;cursor:default}
.modal-fine{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted,#8f897d);text-align:center}
@media (max-width:560px){
  .modal{max-width:none;border-radius:16px;padding:22px 18px}
  .modal-h{font-size:20px}
  .a-reserve{flex:1 1 100%;min-height:58px;font-size:19px}
}