:root {
    --petroo-bottom-nav-height: 78px;
    --petroo-shell-bg: #f5f6f8;
    --petroo-shell-surface: rgba(255, 255, 255, 0.96);
    --petroo-shell-border: rgba(20, 24, 31, 0.08);
    --petroo-shell-text: #20242b;
    --petroo-shell-muted: #737985;
    --petroo-shell-brand: #f26725;
    --petroo-shell-brand-soft: #fff1e9;
    --petroo-shell-progress: #24a148;
    /* Robust safe-area: always uses env() from browser even if --petroo-safe-area-top is 0 */
    --petroo-safe-area-top-robust: max(var(--petroo-safe-area-top, 0px), env(safe-area-inset-top, 0px));
}

html {
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
    overflow-y: scroll;
}

body {
    background: var(--petroo-shell-bg);
}

#mud-snackbar-container.mud-snackbar-location-top-center,
#mud-snackbar-container.mud-snackbar-location-top-left,
#mud-snackbar-container.mud-snackbar-location-top-right {
    top: calc(15px + max(var(--petroo-safe-area-top-robust), 15px) + 56px + 10px) !important;
    z-index: 100200 !important;
}

button,
a,
[role="button"],
.btn,
.nav-link,
.card,
.list-group-item {
    touch-action: manipulation;
}

:where(button, a[href], [role="button"], .btn, .nav-link, .dropdown-item, .list-group-item, [data-petroo-touch]):not(.petroo-no-tap-feedback):not([data-petroo-no-tap-feedback]) {
    -webkit-tap-highlight-color: transparent;
}

:where(button, a[href], .btn, .nav-link, .dropdown-item, .list-group-item, [role="button"], [data-petroo-touch]):not(.yb-dot-button):not(.yb-dashboard-button):not(.petroo-no-tap-feedback):not([data-petroo-no-tap-feedback]) {
    transition: transform 130ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 130ms ease, opacity 130ms ease, background-color 130ms ease, box-shadow 130ms ease;
    will-change: transform;
}

:where(button, .btn, .nav-link, .dropdown-item, .list-group-item, [role="button"], [data-petroo-touch]):not(.yb-dot-button):not(.yb-dashboard-button):not(.petroo-no-tap-feedback):not([data-petroo-no-tap-feedback]):active,
:where(button, .btn, .nav-link, .dropdown-item, .list-group-item, [role="button"], [data-petroo-touch]):not(.yb-dot-button):not(.yb-dashboard-button):not(.petroo-no-tap-feedback):not([data-petroo-no-tap-feedback]).petroo-tap-active {
    transform: translateY(2px) scale(0.965);
    filter: brightness(0.93) saturate(1.04);
}

a[href]:not(.btn):not(.nav-link):not([role="button"]).petroo-tap-active {
    border-radius: 8px;
    background-color: rgba(242, 103, 37, 0.12);
    box-shadow: 0 0 0 8px rgba(242, 103, 37, 0.12);
    opacity: 0.72;
}

.dz-floting-sidebar.sidebar .navbar-nav li > a.nav-link {
    border-radius: 14px;
    margin: -8px -10px;
    padding: 8px 10px !important;
    transform-origin: left center;
    transition: transform 130ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 130ms ease, box-shadow 130ms ease, opacity 130ms ease, filter 130ms ease;
}

.dz-floting-sidebar.sidebar .navbar-nav li > a.nav-link:active,
.dz-floting-sidebar.sidebar .navbar-nav li > a.nav-link.petroo-tap-active {
    background-color: rgba(242, 103, 37, 0.12);
    box-shadow: 0 0 0 5px rgba(242, 103, 37, 0.1);
    opacity: 0.95;
    transform: translateY(2px) scale(0.965);
    filter: brightness(0.96);
}

.dz-floting-sidebar.sidebar .navbar-nav li > a.nav-link.active.petroo-tap-active {
    background-color: rgba(242, 103, 37, 0.18);
    box-shadow: 0 0 0 6px rgba(242, 103, 37, 0.12);
}

.petroo-mobile-shell {
    min-height: 100vh;
    min-height: 100dvh;
    background: #FFF;
}

.petroo-mobile-shell .page-wrapper {
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: calc(var(--petroo-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
}

.petroo-route-surface {
    opacity: 1;
    transition: opacity 180ms ease;
}

html.petroo-route-changing .petroo-route-surface {
    opacity: 0.9;
}

html.petroo-page-entering .petroo-route-surface,
.petroo-route-surface.petroo-route-surface-entering {
    animation: petroo-page-fade-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    will-change: opacity;
}

@keyframes petroo-page-fade-in {
    from {
        opacity: 0.18;
    }

    to {
        opacity: 1;
    }
}

body::before {
    position: fixed;
    inset: 0;
    z-index: 2147482999;
    pointer-events: none;
    content: "";
    background: rgba(255, 255, 255, 0.22);
    opacity: 0;
    transition: opacity 160ms ease;
}

html.petroo-route-changing body::before {
    opacity: 1;
}

html.petroo-modal-open .dz-nav-floting:not(.show) {
    z-index: auto;
}

html.petroo-modal-open .petroo-route-surface {
    animation: none;
    will-change: auto;
}

html.petroo-modal-open body::before {
    opacity: 0;
}

html.petroo-modal-open .modal.dz-pwa-modal,
.modal.dz-pwa-modal.show {
    z-index: 999990;
}

html.petroo-modal-open .modal-backdrop {
    z-index: 999980;
    background-color: rgba(17, 24, 39, 0.42);
    opacity: 1;
}

.petroo-route-progress {
    position: fixed;
    top: var(--petroo-safe-area-top-robust);
    left: 0;
    width: 100%;
    height: 5px;
    z-index: 2147483000;
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, var(--petroo-shell-brand), var(--petroo-shell-progress));
    box-shadow: 0 4px 14px rgba(242, 103, 37, 0.32);
    transition: transform 340ms ease, opacity 160ms ease;
    opacity: 0;
}

html.petroo-route-changing .petroo-route-progress {
    transform: scaleX(1);
    opacity: 1;
}

.menubar-area.footer-fixed {
    display: block !important;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--petroo-shell-surface);
    border-top: 1px solid var(--petroo-shell-border);
    box-shadow: 0 -8px 24px rgba(20, 24, 31, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.menubar-area.footer-fixed.d-none {
    display: none !important;
}

main.yb-footer {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 2140 !important;
    width: 100% !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: none !important;
    will-change: auto !important;
}

.menubar-area.footer-fixed .toolbar-inner.menubar-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 560px;
    min-height: 58px;
    margin: 0 auto;
}

.menubar-area.footer-fixed .footer-menu {
    display: flex;
    min-width: 0;
    height: 54px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 8px;
    color: var(--petroo-shell-muted);
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease, transform 120ms ease;
}

.menubar-area.footer-fixed .footer-menu i {
    font-size: 19px;
    line-height: 1;
}

.menubar-area.footer-fixed .footer-menu span {
    max-width: 100%;
    overflow: hidden;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menubar-area.footer-fixed .footer-menu.active {
    color: var(--petroo-shell-brand);
    background: var(--petroo-shell-brand-soft);
}

.menubar-area.footer-fixed .footer-menu:active,
.back-btn:active,
.btn:active,
button:active,
[role="button"]:active,
[data-petroo-touch]:active {
    transform: scale(0.97);
}

[role="button"]:active,
[data-petroo-touch]:active {
    filter: brightness(0.98);
}

main.yb-footer .yb-dot-button,
main.yb-footer .yb-dashboard-button {
    position: relative;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 130ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 130ms ease;
    will-change: transform;
}

main.yb-footer .yb-dot-button {
    overflow: hidden;
    border-radius: 14px;
}

main.yb-footer .yb-dot-button > *,
main.yb-footer .yb-dashboard-button > * {
    position: relative;
    z-index: 1;
}


@media (prefers-reduced-motion: reduce) {
    .petroo-route-surface,
    body::before,
    .petroo-route-progress,
    .menubar-area.footer-fixed .footer-menu,
    :where(button, a[href], .btn, .nav-link, .dropdown-item, .list-group-item, [role="button"], [data-petroo-touch]),
    main.yb-footer .yb-dot-button,
    main.yb-footer .yb-dashboard-button {
        transition: none;
    }

    html.petroo-route-changing .petroo-route-surface {
        opacity: 1;
    }

    html.petroo-route-changing body::before {
        opacity: 0;
    }

    html.petroo-page-entering .petroo-route-surface {
        animation: none;
    }
}