/*
 * gf-map.css — chrome shared by every location-picker map.
 *
 * Lives here rather than in new-trip-v2.css because three templates use the same picker with
 * different stylesheets (new-trip-v2.leaf and edit-trip-v2.leaf load new-trip-v2.css,
 * trips/new.leaf loads trip-request.css) while location-picker.js — and therefore the expand
 * control — is loaded globally from base.leaf. A copy per stylesheet would have meant the
 * control silently doing nothing on whichever page was forgotten.
 *
 * Hand-written CSS: there is no node toolchain here, so Public/css/tailwind.css cannot be
 * recompiled and Tailwind utilities not already in it do nothing.
 */

/* ============================================================
   FULL-MAP MODE
   The picker map is ~260px tall inline, which is not enough to place a pin accurately with a
   thumb. "Full map" (the .gf-picker-expand control, added by location-picker.js) grows the
   container to fill the viewport.

   Deliberately NOT the Fullscreen API: selecting a location hides this container, and hiding a
   fullscreen element does not leave fullscreen — Android is then left with an invisible
   fullscreen surface over the form and the page looks frozen. See the comment above
   `fullscreenControl` in location-picker.js.
   ============================================================ */
.map-container.is-map-expanded {
    /* Teleported to <body> by addMapExpandControl in location-picker.js before this class is
       added.  Moving it out of .gf-wizard-page (which has position:relative; overflow-x:hidden)
       is the critical step: on WebKit, a positioned ancestor with overflow ≠ visible creates a
       new containing block and clips position:fixed children to itself, not the viewport. */
    position: fixed;
    inset: 0;
    z-index: 9000;
    margin: 0;
    padding: 0;
    background: #000;   /* Shows for the ~2 rAF frames before Google Maps paints. */
}

.map-container.is-map-expanded .location-map {
    /* Height is set to window.visualViewport.height by JS so Google Maps has a concrete
       pixel value to paint into — height:auto in block context resolves to 0 on iOS. */
    width: 100%;
    border-radius: 0;
    overflow: hidden;
}

.map-container.is-map-expanded .map-help {
    /* Floats as a frosted-glass bar over the bottom of the map.
       No longer in normal block flow — it sits over the map so the full viewport height
       is given to the map canvas. padding-bottom keeps the text above the home indicator. */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    margin: 0;
    padding: 0.6rem 1rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #475569;
    text-align: center;
    font-size: 0.8rem;
    box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.08);
}

/* While a map is expanded the form behind it must not scroll under the finger. */
body.gf-map-expanded {
    overflow: hidden;
}

/* The control itself. Google positions it (TOP_RIGHT), so no absolute placement here — but it
   does need to clear the notch when the map is full-bleed. */
.gf-picker-expand {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    /* 44px floor. This floats over a map, so a missed tap pans the map instead of doing
       anything — the one place where an undersized target is actively confusing. */
    min-height: 44px;
    margin: 10px;
    padding: 0.5rem 0.85rem;
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

.gf-picker-expand:active {
    background: #f1f5f9;
}

.gf-picker-expand:focus-visible {
    outline: 2px solid var(--gf-emerald, #059669);
    outline-offset: 2px;
}

.map-container.is-map-expanded .gf-picker-expand {
    margin-top: calc(10px + env(safe-area-inset-top));
}