.official-route-map,
    .official-route-map canvas {
        width: 100% !important;
        height: 100% !important;
    }
    .official-route-marker {
        width: 18px;
        height: 18px;
        border-radius: 9999px;
        background: #f97316;
        border: 3px solid #fff;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.28);
    }
    .official-route-save.is-saved {
        background: #f97316;
        color: #fff;
        border-color: #f97316;
    }

@media (max-width: 767px) {
    .official-route-map {
        min-height: 56dvh;
    }

    .official-route-save {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .official-route-save svg {
        width: 20px;
        height: 20px;
    }

    [data-route-card-url] {
        border-radius: 22px !important;
        transform: none !important;
    }

    [data-route-card-url] > .relative:first-child {
        aspect-ratio: 4 / 3 !important;
    }

    [data-route-card-url] h2 {
        font-size: 18px !important;
        line-height: 1.16 !important;
    }

    [data-route-card-url] p {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    [data-route-card-url] a {
        min-height: 44px;
    }

    #official-routes-filter-form input,
    #official-routes-filter-form select,
    #official-filters-panel input,
    #official-filters-panel select {
        min-height: 44px;
        font-size: 16px !important;
    }

    #official-filters-panel-content {
        border-radius: 28px 28px 0 0 !important;
        max-height: calc(100dvh - 18px - env(safe-area-inset-top, 0px)) !important;
    }
}