/* The shell: the map, address locator, pins, and where the caterer panel
   (the menu/ iframe) sits. The panel's own styles are in menu/ and shared.css. */
body { margin: 0; padding: 0; font-family: -apple-system, sans-serif; }
html, body, #map { height: 100%; width: 100%; -webkit-tap-highlight-color: transparent; }

/* FPS Camera Controls Hint */
#controls-hint {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 1;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 11px;
    font-family: monospace;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

#controls-hint kbd {
    background: rgba(255,255,255,0.2);
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 2px;
    font-weight: bold;
}

/* Icons (assets/icons/*.svg via <use>): the files have geometry only. */
.ec-ico{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* The panels (menu/, event/), at the top right on a wide screen: the caterer
   panel as tall as the window allows, the event panel a short card (its
   cover, name and address, or its fields and a line for errors). On a phone,
   cards over the bottom of the screen. The panels scroll inside if need be. */
.ec-frame{position:absolute;top:14px;right:14px;z-index:6;box-sizing:border-box;width:400px;max-width:calc(100vw - 28px);height:calc(100vh - 28px);border:0;border-radius:14px;box-shadow:0 6px 28px rgba(0,0,0,.28);background:transparent}
/* The event panel, exactly as tall as its card (the panel says: --h), up to
   the space there is; past that its card scrolls. */
#ec-event-frame{height:var(--h, 240px);max-height:calc(100vh - 28px)}
.ec-frame[hidden]{display:none}
.ec-frame.ec-pending{visibility:hidden} /* until the panel has rendered */

/* Address locator (top left) and the marker it drops. */
#ec-locate{position:absolute;top:14px;left:14px;z-index:6;width:320px;max-width:calc(100vw - 28px);font:13px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
#ec-locate input{box-sizing:border-box;width:100%;height:38px;padding:0 14px;border:0;border-radius:10px;background:#fff;color:#1a1d21;font:inherit;font-size:14px;box-shadow:0 2px 10px rgba(0,0,0,.25);outline:none}
#ec-locate input:focus-visible{box-shadow:0 2px 10px rgba(0,0,0,.25),0 0 0 2px #2563eb}
/* Looking an address up (here and in the event forms): a spinner at the
   input's right end (no busy cursor). */
#ec-locate.ec-busy input{padding-right:38px;background:#fff url(assets/icons/spinner.svg) no-repeat right 12px center/16px 16px}
#ec-locate.ec-busy input{color:#6b7280}
/* "Address field empty" / "Address does not exist": fades in and out under the bar over 2s (see index.js). */
#ec-locate .ec-locate-msg{display:block;width:max-content;margin-top:6px;padding:5px 10px;border-radius:8px;background:rgba(12,12,15,.85);color:#fff;font-size:12px;opacity:0;visibility:hidden;pointer-events:none}
#ec-locate .ec-locate-msg.ec-show{animation:ec-msg 2s ease both}
@keyframes ec-msg{0%{opacity:0;visibility:visible}15%,75%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion: reduce){#ec-locate .ec-locate-msg.ec-show{animation-timing-function:steps(1,end)}}
#ec-loc-pin:not(.maplibregl-marker){display:none}  /* until the first locate */

/* Map pins. Restaurant pins are orange with a fork and knife; the selected one
   is the same pin, larger, with a border in the selected colour. The located
   address is a plain red pin. */
.ec-marker{display:block;padding:0;border:0;background:none;cursor:pointer}
.ec-marker,.ec-loc{line-height:0}
.ec-pin{width:21px;height:25px;overflow:visible;transform-origin:50% 100%;transition:transform .15s ease}
.ec-pin-body{fill:#ea832d}
.ec-pin-icon{fill:#fff}
.ec-marker.ec-sel,.ec-loc{z-index:1}
.ec-marker.ec-sel .ec-pin,.ec-loc .ec-pin{transform:scale(1.45);filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.ec-marker.ec-sel .ec-pin-body{stroke:#cf532c;stroke-width:2.5;stroke-linejoin:round}
.ec-loc .ec-pin-body{fill:#c0392b}
/* The located address, in a card off the pin's top right. */
.ec-loc-card{position:absolute;left:calc(100% + 8px);bottom:26px;box-sizing:border-box;width:max-content;max-width:260px;padding:10px 34px 10px 12px;background:#fff;color:#1a1d21;border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.28);font:13px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;cursor:default}
/* A street found by name: no pin, the label sitting on the line at that point. */
.ec-loc.ec-loc-street .ec-pin{display:none}
.ec-loc.ec-loc-street .ec-loc-card{left:-12px;bottom:10px}
/* A state, a city or a region found by name: no pin, the label in the middle of its boundary. */
.ec-loc.ec-loc-area .ec-pin{display:none}
.ec-loc.ec-loc-area .ec-loc-card{left:0;bottom:auto;top:0;transform:translate(-50%,-50%)}
.ec-loc-close{position:absolute;top:6px;right:6px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:none;color:#6b7280;cursor:pointer}
.ec-loc-close:hover{background:#f3f4f6;color:#1a1d21}
/* Icons drawn as masks (assets/icons/*.svg used whole, in the text colour), as in shared.css. */
.ec-msk{display:block;flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.ec-msk-close{--src:url(assets/icons/close.svg)}
.ec-loc-close .ec-msk{width:20px;height:20px}
/* "Add Event" under the located address: a new event there (the event panel, as a draft). */
@media (prefers-reduced-motion: reduce){.ec-pin{transition:none}}

/* Events: their pins — blue with a calendar; a selected event opens the event
   panel (event/, in #ec-event-frame) in the caterer panel's place. */
.ec-event{line-height:0;cursor:pointer}
.ec-event .ec-pin-body{fill:#2563eb}
.ec-event .ec-pin-icon{filter:invert(1)} /* assets/icons/calendar.svg is black: white on the pin */
.ec-event.ec-sel{z-index:2}
.ec-event.ec-sel .ec-pin{transform:scale(1.45);filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}

/* ---- Phone ---- */
@media (max-width: 640px) {
  #controls-hint{display:none}
  /* The address bar: the screen's width. */
  #ec-locate{width:auto;right:14px;max-width:none}
  /* The caterer panel floats over the bottom 70%, inset from the edges, the
     event panel over less (index.js centres the pin between the address bar
     and the panel). (An iframe doesn't stretch to its insets like a div: it
     gets explicit sizes.) */
  .ec-frame{position:fixed;inset:auto 20px 20px 20px;width:calc(100vw - 40px);max-width:none;height:calc(70dvh - 20px);max-height:none;box-shadow:0 4px 24px rgba(0,0,0,.3)}
  #ec-event-frame{height:var(--h, 240px);max-height:calc(70dvh - 20px)}
  /* The located address's card: centred above its pin, within the screen. */
  .ec-loc-card{left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);max-width:calc(100vw - 40px)}
  .ec-loc.ec-loc-street .ec-loc-card{left:50%;bottom:10px}
  .ec-loc.ec-loc-area .ec-loc-card{left:0;bottom:auto;top:0;transform:translate(-50%,-50%)}
}