/* Directions overlay for the full-viewport StancePoint community map. */
.main-app .map-page {
    --directions-ink: var(--text, #203536);
    --directions-muted: var(--app-muted, rgba(26, 43, 44, .74));
    --directions-line: var(--app-line, rgba(28, 44, 45, .18));
    --directions-glass: var(--app-glass, rgba(34, 47, 48, .94));
    --directions-soft: var(--app-glass-soft, rgba(41, 55, 56, .12));
    --directions-accent: #39aeb0;
    --directions-accent-soft: rgba(83, 197, 199, .15);
    --directions-danger: #b04d43;
}

.main-app .map-page .directions-panel {
    position: absolute;
    z-index: 850;
    top: calc(88px + env(safe-area-inset-top, 0px));
    bottom: calc(112px + env(safe-area-inset-bottom, 0px));
    left: calc(16px + env(safe-area-inset-left, 0px));
    width: min(390px, calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    max-height: calc(100dvh - 212px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(83, 197, 199, .55) transparent;
    padding: 19px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 17px 34px 17px 17px;
    color: #f3f6f7;
    background: var(--directions-glass);
    -webkit-backdrop-filter: blur(18px) saturate(1.16);
    backdrop-filter: blur(18px) saturate(1.16);
    box-shadow: inset 1px 1px 2px rgba(255,255,255,.13), 0 14px 38px rgba(0,0,0,.24);
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

.main-app .map-page .directions-panel[hidden] {
    display: none !important;
}

.main-app .map-page .directions-panel::-webkit-scrollbar { width: 7px; }
.main-app .map-page .directions-panel::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 9px;
    background: rgba(83, 197, 199, .55);
    background-clip: padding-box;
}

.main-app .map-page .directions-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin: 0 0 13px;
}

.main-app .map-page .directions-header h2 {
    min-width: 0;
    margin: 0;
    color: #f3f6f7;
    font: 700 clamp(1.35rem, 4vw, 1.65rem)/1.05 "RajBold", sans-serif;
    letter-spacing: .015em;
    overflow-wrap: anywhere;
}

.main-app .map-page .directions-close {
    display: inline-grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin: -4px -4px 0 0;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 12px 19px 12px 12px;
    color: #f3f6f7;
    background: rgba(255,255,255,.1);
    font: 1.35rem/1 "RajMed", sans-serif;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.main-app .map-page .directions-close:hover {
    transform: translateY(-1px);
    border-color: rgba(120,226,227,.65);
    background: rgba(120,226,227,.14);
}

.main-app .map-page .directions-destination {
    margin: 0 0 12px;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,.17);
    border-left: 2px solid var(--app-cyan, #78e2e3);
    border-radius: 0 12px 12px 0;
    color: rgba(243,246,247,.9);
    background: rgba(255,255,255,.075);
    font-size: .98rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.main-app .map-page .directions-destination p,
.main-app .map-page .directions-status p,
.main-app .map-page .directions-summary p,
.main-app .map-page .directions-note p { margin: 0; }

.main-app .map-page .directions-status {
    min-height: 1.35em;
    margin: 0 0 12px;
    color: rgba(243,246,247,.76);
    font-size: .94rem;
    line-height: 1.4;
}

.main-app .map-page .directions-status:empty { display: none; }
.main-app .map-page .directions-status[data-state="loading"],
.main-app .map-page .directions-status.is-loading { color: #a9eeee; }
.main-app .map-page .directions-status[data-state="error"],
.main-app .map-page .directions-status.is-error { color: #ffc0b7; }

.main-app .map-page .directions-start,
.main-app .map-page .popup-directions {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 14px;
    border: 1px solid rgba(20,79,78,.42);
    border-radius: 10px 20px 10px 10px;
    color: #102b2c;
    background: linear-gradient(115deg, #82dddd, #b4ece5);
    box-shadow: 0 5px 15px rgba(25,113,113,.17);
    font: 700 1rem "RajBold", sans-serif;
    letter-spacing: .02em;
    text-decoration: none;
    cursor: pointer;
    transition: transform 160ms ease, filter 160ms ease, border-color 160ms ease;
}

.main-app .map-page .directions-start {
    width: 100%;
    box-sizing: border-box;
}

.main-app .map-page .popup-directions {
    min-height: 38px;
    padding: 8px 12px;
    font-size: .94rem;
}

.main-app .map-page .directions-start:hover:not(:disabled),
.main-app .map-page .popup-directions:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.main-app .map-page .directions-start:disabled {
    opacity: .64;
    cursor: wait;
    box-shadow: none;
}

.main-app .map-page .directions-external {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 9px;
    padding: 8px 10px;
    border-radius: 9px;
    color: #a9eeee;
    font: 700 .98rem "RajBold", sans-serif;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: background-color 160ms ease, color 160ms ease;
}

.main-app .map-page .directions-external:hover { color: #d1ffff; background: rgba(120,226,227,.1); }
.main-app .map-page .directions-external[hidden] { display: none !important; }

.main-app .map-page .directions-summary {
    margin: 13px 0 0;
    padding: 11px 12px;
    border: 1px solid rgba(120,226,227,.26);
    border-radius: 11px 22px 11px 11px;
    color: #f3f6f7;
    background: rgba(83,197,199,.1);
    font-size: .97rem;
    font-weight: 700;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.main-app .map-page .directions-summary:empty { display: none; }
.main-app .map-page .directions-steps:empty { display: none; }

.main-app .map-page .directions-steps {
    display: grid;
    gap: 0;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: direction-step;
}

.main-app .map-page .directions-steps li {
    position: relative;
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    column-gap: 10px;
    padding: 0 0 15px;
    color: rgba(243,246,247,.91);
    font-size: .96rem;
    line-height: 1.38;
    overflow-wrap: anywhere;
}

.main-app .map-page .directions-steps li::before {
    counter-increment: direction-step;
    content: counter(direction-step);
    grid-row: 1 / span 2;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    border: 1px solid rgba(120,226,227,.4);
    border-radius: 50%;
    color: #a9eeee;
    background: rgba(83,197,199,.12);
    font: 700 .78rem "RajBold", sans-serif;
    font-variant-numeric: tabular-nums;
}

.main-app .map-page .directions-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 28px;
    bottom: 3px;
    left: 12px;
    border-left: 1px solid rgba(120,226,227,.28);
}

.main-app .map-page .directions-steps li small {
    display: block;
    grid-column: 2;
    margin-top: 4px;
    color: rgba(220,235,234,.66);
    font-size: .83rem;
    font-variant-numeric: tabular-nums;
}

.main-app .map-page .directions-credit {
    display: block;
    margin: 4px 0 0;
    padding-top: 11px;
    border-top: 1px solid rgba(255,255,255,.15);
    color: rgba(220,235,234,.66);
    font-size: .78rem;
    line-height: 1.4;
}

.main-app .map-page .directions-credit a {
    color: #a9eeee;
    text-underline-offset: 2px;
}

.main-app .map-page .directions-note {
    margin: 10px 0 0;
    color: rgba(220,235,234,.64);
    font-size: .83rem;
    line-height: 1.4;
}

.main-app .map-page .directions-note:empty { display: none; }

.main-app .map-page .directions-panel :is(button, a):focus-visible,
.main-app .map-page .popup-directions:focus-visible {
    outline: 2px solid #78e2e3;
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .main-app .map-page .directions-panel {
        top: auto;
        bottom: calc(108px + env(safe-area-inset-bottom, 0px));
        left: calc(10px + env(safe-area-inset-left, 0px));
        width: min(430px, calc(100% - 20px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
        max-height: min(45dvh, calc(100dvh - 190px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
        padding: 16px;
        border-radius: 15px 29px 15px 15px;
    }
}

@media (max-height: 520px) {
    .main-app .map-page .directions-panel {
        top: calc(76px + env(safe-area-inset-top, 0px));
        bottom: calc(94px + env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - 170px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-app .map-page .directions-panel *,
    .main-app .map-page .popup-directions { transition: none !important; }
}