/* Final mobile polish: app-like safe visual layer. */
:root {
    --mobile-nav-height: 74px;
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 991.98px) {
    body.has-mobile-quicknav .app-content {
        padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 18px);
    }

    body.has-mobile-quicknav .app-footer {
        padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 14px);
    }

    .mobile-quick-nav {
        position: fixed;
        right: 10px;
        left: 10px;
        bottom: calc(8px + var(--mobile-safe-bottom));
        z-index: 1060;
        min-height: 64px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
        align-items: stretch;
        gap: 6px;
        padding: 8px;
        border: 1px solid rgba(226, 232, 240, .9);
        border-radius: 24px;
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
        backdrop-filter: blur(16px);
    }

    .mobile-quick-link {
        appearance: none;
        border: 0;
        text-decoration: none;
        color: #64748b;
        background: transparent;
        border-radius: 18px;
        min-height: 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        font-size: 11px;
        font-weight: 900;
        line-height: 1.1;
        padding: 6px 4px;
        transition: background .18s ease, color .18s ease, transform .18s ease;
    }

    .mobile-quick-link i {
        font-size: 1.22rem;
        line-height: 1;
    }

    .mobile-quick-link:hover,
    .mobile-quick-link:focus,
    .mobile-quick-link.active {
        color: #0f2d55;
        background: #eff6ff;
    }

    .mobile-quick-link:active {
        transform: scale(.97);
    }

    .mobile-install-link:not(.d-none) {
        color: #047857;
        background: #ecfdf5;
    }

    .mobile-network-banner {
        position: fixed;
        top: calc(10px + env(safe-area-inset-top, 0px));
        left: 14px;
        right: 14px;
        z-index: 1200;
        display: none;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 42px;
        border-radius: 16px;
        background: #fff7ed;
        color: #9a3412;
        border: 1px solid #fed7aa;
        box-shadow: 0 14px 35px rgba(154, 52, 18, .18);
        font-weight: 900;
    }

    body.is-offline .mobile-network-banner {
        display: flex;
    }

    .app-content > .alert,
    .panel-card > .alert,
    .vehicle-result-card > .alert {
        border-radius: 18px;
        line-height: 1.75;
    }

    .sticky-action-panel,
    .commerce-sticky-actions,
    .admin-mobile-actionbar {
        margin-bottom: 10px;
    }

    .modal-footer {
        gap: 8px;
    }

    .modal-footer .btn {
        flex: 1 1 130px;
    }

    .dropdown-menu {
        border-radius: 18px;
    }

    .profile-menu .dropdown-item,
    .dropdown-menu .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .select2-container--open {
        z-index: 2000;
    }

    .select2-dropdown {
        border-radius: 16px;
        overflow: hidden;
    }

    input,
    select,
    textarea {
        font-size: 16px;
    }

    .table-actions .btn,
    .vehicle-actions .btn,
    .hero-actions .btn,
    .form-actions .btn {
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    .mobile-quick-nav {
        right: 6px;
        left: 6px;
        bottom: calc(6px + var(--mobile-safe-bottom));
        border-radius: 22px;
        gap: 4px;
        padding: 7px;
    }

    .mobile-quick-link {
        min-height: 46px;
        border-radius: 16px;
        font-size: 10.5px;
    }

    .mobile-quick-link i {
        font-size: 1.12rem;
    }

    .swal2-popup {
        width: min(94vw, 390px) !important;
        border-radius: 22px !important;
    }

    .login-pro-body,
    .vehicle-login-body {
        min-height: 100dvh;
    }

    .vehicle-login-copy h1 {
        font-size: clamp(24px, 8vw, 31px);
    }

    .vehicle-login-card-head {
        gap: 12px;
    }

    .login-premium-form .form-control {
        font-size: 16px;
    }
}

@media (min-width: 992px) {
    .mobile-quick-nav,
    .mobile-network-banner {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}