/*
 * Solex interaction stability pass.
 * Loaded last so mobile controls and the Atlas map keep one predictable layout.
 */

/* The country markers appear only after JavaScript has positioned them. This prevents
   their unpositioned first frame from flashing in a pile on slower devices. */
#atlas-network .atlas-map.atlas-map--pending .atlas-country,
#atlas-network .atlas-map.atlas-map--pending .atlas-core-logo,
#atlas-network .atlas-map.atlas-map--pending .atlas-orbit-routes {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

#atlas-network .atlas-map.is-ready .atlas-country,
#atlas-network .atlas-map.is-ready .atlas-core-logo,
#atlas-network .atlas-map.is-ready .atlas-orbit-routes {
    visibility: visible;
    opacity: 1;
    transition: opacity 180ms ease-out;
}

#atlas-network .atlas-map {
    min-height: 35rem !important;
    contain: layout paint;
}

#atlas-network .atlas-country-card {
    max-width: calc(100% - 24px);
}

/* A tap keeps the country card open. On phones it becomes a stable bottom tray
   instead of trying to fit beside a marker near the edge of the map. */
@media (max-width: 700px) {
    #atlas-network .atlas-map {
        min-height: 31.25rem !important;
    }

    #atlas-network .atlas-country-card {
        left: 50% !important;
        top: auto !important;
        bottom: 14px !important;
        width: min(280px, calc(100% - 32px)) !important;
        max-width: calc(100% - 32px) !important;
        transform: translate(-50%, 10px) scale(.98) !important;
        transform-origin: 50% 100% !important;
    }

    #atlas-network .atlas-country-card.is-visible {
        transform: translate(-50%, 0) scale(1) !important;
    }
}

/* Availability actions stay in normal document flow on a narrow card, so they
   never overlap the country name or currency code. */
@media (max-width: 760px) {
    .sx-featured-offer {
        display: flex;
        min-height: 20rem;
        flex-direction: column;
    }

    .sx-featured-offer h3 {
        margin-top: 10rem;
    }

    .sx-featured-offer__action {
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        flex: 0 0 auto;
        margin-top: 1.15rem;
    }

    /* The consultation choices need their own protected layer on small screens. */
    #advisor-wsp-menu {
        position: fixed !important;
        z-index: 90 !important;
        top: auto !important;
        right: max(16px, env(safe-area-inset-right)) !important;
        bottom: max(16px, env(safe-area-inset-bottom)) !important;
        left: max(16px, env(safe-area-inset-left)) !important;
        width: auto !important;
        max-height: min(390px, calc(100svh - 32px));
        margin: 0 !important;
        transform: none !important;
        overflow-y: auto;
        border-color: rgba(99, 229, 197, .36) !important;
        background: rgba(3, 20, 29, .98) !important;
        box-shadow: 0 24px 56px rgba(0, 0, 0, .56), 0 0 0 1px rgba(95, 231, 196, .1);
    }

    #advisor-wsp-menu:not(.hidden) {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    #atlas-network .atlas-map.is-ready .atlas-country,
    #atlas-network .atlas-map.is-ready .atlas-core-logo,
    #atlas-network .atlas-map.is-ready .atlas-orbit-routes,
    #atlas-network .atlas-country-card {
        transition: none !important;
    }
}