/* =====================================================================
   mapkit.css — shared map styling for thefifthavenueconcierge.com

   Loaded after leaflet.css and after the page's own stylesheet.

   This file owns the map wrapper, the pins, the category stepper, the
   overlay panel and the location dot. It deliberately does NOT own
   .stop-num or .cafe-letter — those are the badges printed beside each
   entry's name in the text, and the page styles them itself.

   House colour variables (--navy, --gold, --rule, --ink, --muted,
   --link, --paper, --paper-deep, --card) are expected to be defined by
   the page.
   ===================================================================== */

/* ---------- the map block ------------------------------------------
   Only the bottom margin is set here. The Koreatown pages centre the
   block themselves with `margin:26px auto 0`, and mapkit.css loads
   last — setting the shorthand here would overwrite their `auto` and
   push the map hard left. --------------------------------------- */
.gmap-wrap{margin-bottom:26px;}
.gmap-head{margin:0 0 10px;}
.gmap-hint{
  font-style:italic;color:var(--muted, #5A5A5A);font-size:0.95rem;
  line-height:1.5;margin-top:4px;
}
#guide-map{
  height:var(--mk-h, 430px);
  border:1px solid var(--rule, #B89B5E);
  border-radius:8px;
  background:var(--paper-deep, #F3EEE3);
  box-shadow:0 2px 10px rgba(27,42,78,.07);
  z-index:0;
}
@media(max-width:640px){ #guide-map{height:var(--mk-h-sm, 330px);} }

/* ---------- pins ----------------------------------------------------
   The class sits on the icon element itself, so each rule also has to
   cancel Leaflet's own .leaflet-div-icon box (white fill, grey border).
   box-sizing keeps the border inside the size Leaflet reserves, which
   is what keeps the circle round. ----------------------------------- */
.stop-pin,.cafe-pin{
  box-sizing:border-box;
  display:flex !important;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--navy, #1B2A4E);color:#fff;
  border:2px solid #fff;
  box-shadow:0 2px 6px rgba(27,42,78,.4);
  font:600 12px/1 Georgia,serif;
  transition:transform .18s ease, opacity .18s ease, background .18s ease;
}
.cafe-pin{background:var(--gold, #8B6F2D);}

.stop-pin.sel,.cafe-pin.sel{
  background:var(--gold, #8B6F2D);border-color:#fff;
  box-shadow:0 0 0 4px rgba(139,111,45,.32),0 2px 8px rgba(139,111,45,.5);
  transform:scale(1.18);
}
.cafe-pin.sel{background:var(--navy, #1B2A4E);}
.stop-pin.dim,.cafe-pin.dim{opacity:.42;}

.hotel-pin{
  box-sizing:border-box;
  display:flex !important;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:var(--gold, #8B6F2D);color:#fff;
  border:2px solid #fff;font-size:14px;line-height:1;
  box-shadow:0 2px 7px rgba(139,111,45,.5);
}

/* a background context dot, for pages that supply #mapkit-context */
.mk-dot{
  box-sizing:border-box;
  width:11px;height:11px;border-radius:50%;
  background:#C8A95B;border:1.5px solid #fff;
  box-shadow:0 1px 3px rgba(27,42,78,.35);
}
.gpop .gpop-shop{display:block;margin:2px 0;}
.gpop .gpop-shop a{color:var(--navy, #1B2A4E);text-decoration:none;border-bottom:1px solid var(--rule, #B89B5E);}
.gpop .gpop-addr{font-style:italic;color:var(--muted, #5A5A5A);font-size:0.88rem;display:block;margin-top:6px;}

/* hidden rather than removed — see setShown() in mapkit.js */
.leaflet-marker-icon.mk-off{display:none !important;}
#guide-map.mk-hide-context .mk-dot{display:none !important;}

/* ---------- popups -------------------------------------------------- */
.leaflet-popup-content-wrapper{
  border-radius:5px;background:var(--card, #fff);
  border:1px solid var(--rule, #B89B5E);
  box-shadow:0 6px 22px rgba(27,42,78,.22);
}
.leaflet-popup-content{margin:11px 14px;font-family:Garamond,Georgia,serif;}
.gpop{min-width:150px;}
.gpop b{display:block;color:var(--navy, #1B2A4E);font-size:1.02rem;line-height:1.25;}
.gpop span{display:block;font-style:italic;color:var(--muted, #5A5A5A);font-size:0.88rem;margin-top:2px;}
.gpop button,.gpop a{
  display:inline-block;margin-top:7px;background:none;border:none;padding:0;
  font-family:inherit;font-size:0.88rem;color:var(--gold, #8B6F2D);
  font-weight:600;cursor:pointer;text-decoration:none;
}
.gpop button:hover,.gpop a:hover{color:var(--navy, #1B2A4E);}

/* ---------- category stepper, under the map ------------------------- */
.gmap-steps{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:12px 0 4px;
}
.gstep{
  border:1px solid var(--rule, #B89B5E);background:var(--card, #fff);
  color:var(--navy, #1B2A4E);border-radius:4px;
  width:34px;height:32px;font-size:1rem;line-height:1;
  cursor:pointer;font-family:inherit;
}
.gstep:hover{background:var(--paper-deep, #F3EEE3);}
.gs-label{
  min-width:16em;text-align:center;
  color:var(--navy, #1B2A4E);font-size:0.97rem;
  font-family:Garamond,Georgia,serif;
}
.gs-label small{
  display:block;font-size:0.68rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--gold, #8B6F2D);margin-bottom:2px;
}
@media(max-width:430px){
  .gmap-steps{gap:8px;}
  .gs-label{min-width:0;flex:1;font-size:0.92rem;}
}

/* status line for location permission and errors */
.geo-note{
  margin-top:8px;font-size:0.86rem;color:var(--muted, #5A5A5A);
  font-style:italic;text-align:center;
}
.geo-note.err{color:#8B3A2D;}

/* ---------- live location ------------------------------------------- */
.geo-dot{
  box-sizing:border-box;position:relative;
  width:14px;height:14px;border-radius:50%;
  background:#2E6BE6;border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(46,107,230,.5),0 1px 5px rgba(0,0,0,.4);
}
.geo-dot::after{
  content:'';position:absolute;inset:-5px;border-radius:50%;
  border:2px solid rgba(46,107,230,.55);animation:geopulse 2s ease-out infinite;
}
@keyframes geopulse{
  0%{transform:scale(.7);opacity:.9;}
  100%{transform:scale(2.1);opacity:0;}
}
@media(prefers-reduced-motion:reduce){ .geo-dot::after{animation:none;opacity:.5;} }

/* the bullseye, under the zoom controls */
.leaflet-bar.mk-locate-bar{margin-top:8px;}
a.mk-locate{
  display:flex !important;align-items:center;justify-content:center;
  font-size:1.15rem;line-height:1;color:var(--navy, #1B2A4E);text-decoration:none;
}
a.mk-locate:hover{color:var(--gold, #8B6F2D);}
a.mk-locate.on{color:#2E6BE6;background:#EEF3FD;}
a.mk-locate.asking{color:var(--gold, #8B6F2D);animation:mk-pulse 1.1s ease-in-out infinite;}
@keyframes mk-pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
@media(prefers-reduced-motion:reduce){a.mk-locate.asking{animation:none;}}

/* ---------- per-entry control --------------------------------------- */
.onmap{
  background:none;border:none;padding:0;cursor:pointer;font-family:inherit;
  color:var(--gold, #8B6F2D);font-size:0.9rem;font-weight:600;
}
.onmap:hover{color:var(--navy, #1B2A4E);}
.onmap .pin-glyph{font-style:normal;margin-right:4px;}

/* Share carries no styling of its own: it sits in the links row and is
   dressed by the page's own .meta a rule, like Website and the two map
   links beside it. No underline, no visited state. */
a.share-entry{cursor:pointer;}

/* ---------- the overlay panel ---------------------------------------- */
.msheet{position:fixed;inset:0;z-index:1200;display:flex;align-items:flex-end;justify-content:center;}
.msheet[hidden]{display:none;}
.msheet-scrim{position:absolute;inset:0;background:rgba(27,42,78,.45);opacity:0;transition:opacity .28s ease;}
.msheet.in .msheet-scrim{opacity:1;}
.msheet-panel{
  position:relative;width:min(100%,760px);max-height:88vh;display:flex;flex-direction:column;
  background:var(--paper, #FBF9F4);border:1px solid var(--rule, #B89B5E);
  border-top:3px solid var(--gold, #8B6F2D);
  border-radius:12px 12px 0 0;box-shadow:0 -14px 50px rgba(27,42,78,.34);
  font-family:Garamond,Georgia,serif;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.msheet.in .msheet-panel{transform:translateY(0);}
@media(prefers-reduced-motion:reduce){
  .msheet-panel,.msheet-scrim{transition:none;}
}
.msheet-head{
  display:flex;align-items:flex-start;gap:14px;padding:16px 18px 12px;
  border-bottom:1px solid var(--paper-deep, #F3EEE3);
}
.msheet-head .ms-txt{flex:1;min-width:0;}
.msheet-eyebrow{
  display:block;color:var(--gold, #8B6F2D);font-size:0.64rem;
  letter-spacing:0.2em;text-transform:uppercase;font-weight:700;margin-bottom:3px;
}
.msheet-head h4{margin:0;color:var(--navy, #1B2A4E);font-size:1.16rem;line-height:1.25;}
.msheet-addr{display:block;font-style:italic;color:var(--muted, #5A5A5A);font-size:0.9rem;margin-top:2px;}
.msheet-close{
  border:none;background:none;font-size:1.6rem;line-height:1;
  color:var(--muted, #5A5A5A);cursor:pointer;padding:0 2px;
}
.msheet-close:hover{color:var(--navy, #1B2A4E);}

#sheet-map{flex:1;min-height:46vh;background:var(--paper-deep, #F3EEE3);}
@media(max-width:640px){#sheet-map{min-height:52vh;}}

.msheet-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;border-top:1px solid var(--paper-deep, #F3EEE3);
}
.ms-step{
  border:1px solid var(--rule, #B89B5E);background:var(--card, #fff);
  color:var(--navy, #1B2A4E);border-radius:4px;padding:6px 12px;
  font-family:inherit;font-size:0.86rem;cursor:pointer;white-space:nowrap;
}
.ms-step:hover{background:var(--paper-deep, #F3EEE3);}
.ms-step[disabled]{opacity:.32;cursor:default;}
.ms-mid{flex:1;text-align:center;min-width:0;}
.ms-count{
  display:block;font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gold, #8B6F2D);
}
.ms-read{
  background:none;border:none;color:var(--link, #5A6B8C);
  font-family:inherit;font-size:0.9rem;cursor:pointer;padding:2px 0;text-decoration:underline;
}
.ms-dist{display:block;font-size:0.84rem;color:var(--navy, #1B2A4E);margin-top:2px;}
.ms-dist b{font-style:normal;color:var(--gold, #8B6F2D);font-weight:700;}
.ms-dist[hidden]{display:none;}
@media(max-width:430px){
  .ms-step{padding:6px 9px;font-size:0.8rem;}
  .msheet-head{padding:13px 14px 10px;}
  .msheet-foot{padding:10px;}
}

/* the list is pinned while the panel is open, so closing returns you
   to exactly the line you left */
body.mk-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden;}

/* brief highlight when "Read this entry" returns you to the text */
.mk-flash{animation:mk-flash 1.6s ease;}
@keyframes mk-flash{
  0%{background:rgba(139,111,45,.16);}
  100%{background:transparent;}
}
@media(prefers-reduced-motion:reduce){.mk-flash{animation:none;}}