/* Mobile release eco-mobile-20260930-2. Keep existing viewport-fit=auto. */
:root {
    --eco-visible-height: 100vh;
    --eco-visible-top: 0px;
}

@supports (height: 100dvh) {
    :root {
        --eco-visible-height: 100dvh;
    }

    #map,
    .sidebar {
        height: 100dvh;
    }
}

@media (max-width: 768px),
(hover: none) and (pointer: coarse) {
    .auth-modal-container {
        top: var(--eco-visible-top);
        bottom: auto;
        height: var(--eco-visible-height);
        padding: 12px;
        padding-top: max(12px, env(safe-area-inset-top, 0px));
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }

    .auth-modal-container .auth-modal {
        max-width: 100%;
    }

    .auth-modal-content {
        box-sizing: border-box;
        max-height: calc(var(--eco-visible-height) - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        overscroll-behavior-y: contain;
        padding: 24px 20px;
    }

    .modal-window {
        box-sizing: border-box;
        top: calc(var(--eco-visible-top) + 12px + env(safe-area-inset-top, 0px));
        left: calc(12px + env(safe-area-inset-left, 0px));
        width: calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
        max-height: calc(var(--eco-visible-height) - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        overscroll-behavior-y: contain;
        padding-top: 56px;
    }

    .auth-modal-container input:not([type="checkbox"]):not([type="radio"]),
    .modal-window input:not([type="checkbox"]):not([type="radio"]),
    .feedback-form-container input:not([type="checkbox"]):not([type="radio"]),
    .feedback-form-container textarea {
        font-size: 16px !important;
        scroll-margin-block: 20px;
    }

    .close-modal-btn,
    .close-modal-btn2,
    .close-mobile-popup,
    .tool-button,
    .social-icon,
    #helpMapBtn {
        min-width: 44px;
        min-height: 44px;
        box-sizing: border-box;
        touch-action: manipulation;
    }

    .modal-window .close-modal-btn2 {
        top: 8px;
        right: 8px;
    }

    .auth-btn {
        min-height: 44px;
    }
}

@media (max-width: 768px) {
    #mobile-wrapper-menu {
        top: calc(12px + env(safe-area-inset-top, 0px));
        left: calc(12px + env(safe-area-inset-left, 0px));
    }

    #mobile-wrapper-menu-right {
        top: calc(12px + env(safe-area-inset-top, 0px));
        right: calc(12px + env(safe-area-inset-right, 0px));
    }

    .mobile-popup {
        box-sizing: border-box;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        overscroll-behavior-y: contain;
        max-height: calc(var(--eco-visible-height) - 24px);
    }

    .mobile-popup .parent-popup {
        height: auto;
        min-height: 0;
    }

    .expanded-view .expanded-content-wrapper {
        max-height: calc(var(--eco-visible-height) - 80px);
        overscroll-behavior-y: contain;
    }

    .user-dropdown .dropdown-content {
        padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {

    .aurora-layer,
    .particle,
    .floating-particle {
        animation: none !important;
    }

    .fade-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .sidebar,
    .mobile-popup {
        animation: none !important;
        transition: none !important;
    }
}

.tool-button:focus-visible,
.close-modal-btn:focus-visible,
.close-modal-btn2:focus-visible,
.auth-btn:focus-visible {
    outline: 3px solid #f3bb48;
    outline-offset: 3px;
}

@media (max-width: 768px),
(hover: none) and (pointer: coarse) {
    #closeHelpModal {
        min-width: 44px;
        min-height: 44px;
        flex-shrink: 0;
    }

    #helpModal {
        top: var(--eco-visible-top);
        height: var(--eco-visible-height);
    }

    #helpModal .help-modal-content {
        max-height: calc(var(--eco-visible-height) - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        overscroll-behavior-y: contain;
    }
}