:root {
    --consumer-nav-brand: #f65505;
    --consumer-nav-brand-deep: #df4900;
    --consumer-nav-brand-soft: #fff1e6;
    --consumer-nav-height: calc(72px + env(safe-area-inset-bottom));
    --consumer-nav-visible-height: 0px;
}

.custom-consumer-navigation,
.custom-consumer-navigation * {
    box-sizing: border-box;
}

.custom-consumer-navigation {
    position: relative;
    z-index: 80;
    inline-size: 100%;
    color: #23201e;
    font-family: 'IRANSansXFaNum', 'IRANSansX', Tahoma, Arial, sans-serif;
}

.custom-consumer-navigation__back-region {
    display: flex;
    inline-size: min(1180px, 100%);
    min-block-size: 58px;
    align-items: center;
    margin-inline: auto;
    padding: max(7px, env(safe-area-inset-top)) clamp(12px, 3vw, 24px) 7px;
    pointer-events: none;
}

.custom-consumer-navigation__back {
    display: inline-flex;
    min-inline-size: 44px;
    min-block-size: 44px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-inline: 11px 14px;
    border: 1px solid #f4d8c8;
    border-radius: 14px;
    color: #8d3308;
    background: rgb(255 255 255 / 94%);
    box-shadow: 0 5px 18px rgb(65 38 24 / 8%);
    font-size: .82rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

.custom-consumer-navigation__back:hover {
    border-color: #f0b998;
    color: var(--consumer-nav-brand-deep);
    background: var(--consumer-nav-brand-soft);
}

.custom-consumer-navigation__back:focus-visible,
.custom-consumer-navigation .ui-v2-bottom-navigation__item:focus-visible,
body.has-consumer-navigation [data-consumer-back]:focus-visible {
    outline: 3px solid rgb(246 85 5 / 28%);
    outline-offset: 2px;
}

body.has-consumer-navigation [data-consumer-back] {
    min-block-size: 44px;
    touch-action: manipulation;
}

.custom-consumer-navigation__back-icon {
    display: grid;
    place-items: center;
}

html[dir='ltr'] .custom-consumer-navigation__back-icon {
    transform: scaleX(-1);
}

.custom-consumer-navigation--overlay {
    position: fixed;
    z-index: 95;
    inset: 0 0 auto;
    block-size: 0;
    pointer-events: none;
}

.custom-consumer-navigation--overlay .custom-consumer-navigation__back-region {
    justify-content: flex-end;
}

.custom-consumer-navigation .ui-v2-bottom-navigation {
    position: fixed;
    z-index: 100;
    inset-inline: 0;
    inset-block-end: 0;
    display: grid;
    inline-size: 100%;
    max-inline-size: 430px;
    min-block-size: var(--consumer-nav-height);
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    margin-inline: auto;
    padding: 6px max(4px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    border-block-start: 1px solid #e7e8ea;
    background: rgb(255 255 255 / 97%);
    box-shadow: 0 -5px 18px rgb(38 29 24 / 9%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    pointer-events: auto;
}

.custom-consumer-navigation .ui-v2-bottom-navigation__item {
    display: flex;
    min-inline-size: 0;
    min-block-size: 54px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    padding: 3px 1px;
    border-radius: 12px;
    color: #68615c;
    font-size: .6875rem;
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
}

.custom-consumer-navigation .ui-v2-bottom-navigation__item.is-current {
    color: var(--consumer-nav-brand-deep);
    background: var(--consumer-nav-brand-soft);
}

.custom-consumer-navigation .ui-v2-bottom-navigation__icon {
    display: grid;
    inline-size: 25px;
    block-size: 25px;
    place-items: center;
}

.custom-consumer-navigation .ui-v2-bottom-navigation__item.is-primary {
    color: #68615c;
    background: transparent;
}

.custom-consumer-navigation .ui-v2-bottom-navigation__item.is-primary .ui-v2-bottom-navigation__icon {
    inline-size: 40px;
    block-size: 40px;
    margin-block-start: -18px;
    border-radius: 50%;
    color: #fff;
    background: var(--consumer-nav-brand);
    box-shadow: 0 7px 18px rgb(246 85 5 / 28%);
}

.custom-consumer-navigation .ui-v2-bottom-navigation svg {
    inline-size: 23px;
    block-size: 23px;
}

body.has-consumer-navigation:not(.consumer-navigation-overlay):not(.consumer-navigation-embedded) {
    padding-block-end: var(--consumer-nav-height);
}

body.consumer-navigation-embedded .custom-consumer-navigation,
body.consumer-navigation-keyboard-open .custom-consumer-navigation .ui-v2-bottom-navigation,
body.consumer-navigation-fullscreen .custom-consumer-navigation,
body:has(dialog[open]) .custom-consumer-navigation .ui-v2-bottom-navigation,
body:has([aria-modal='true']:not([hidden]):not([aria-hidden='true'])) .custom-consumer-navigation .ui-v2-bottom-navigation {
    display: none;
}

body.consumer-navigation-embedded [data-consumer-navigation] :is(.ui-v2-bottom-navigation, [data-consumer-back]),
body.consumer-navigation-keyboard-open.has-consumer-navigation .ui-v2-bottom-navigation,
body.consumer-navigation-fullscreen.has-consumer-navigation .ui-v2-bottom-navigation,
body.has-consumer-navigation:has(dialog[open]) .ui-v2-bottom-navigation,
body.has-consumer-navigation:has([aria-modal='true']:not([hidden]):not([aria-hidden='true'])) .ui-v2-bottom-navigation {
    display: none;
}

@media (max-width: 767px) {
    body.consumer-navigation-overlay:not(.consumer-navigation-embedded) {
        --consumer-nav-visible-height: var(--consumer-nav-height);
    }

    body.consumer-navigation-overlay:is(
        .consumer-navigation-embedded,
        .consumer-navigation-keyboard-open,
        .consumer-navigation-fullscreen
    ),
    body.consumer-navigation-overlay:has(dialog[open]),
    body.consumer-navigation-overlay:has([aria-modal='true']:not([hidden]):not([aria-hidden='true'])) {
        --consumer-nav-visible-height: 0px;
    }

    body.has-consumer-navigation:not(.consumer-navigation-embedded) .ui-detail__sticky-actions {
        inset-block-end: var(--consumer-nav-height);
    }

    body.has-consumer-navigation:not(.consumer-navigation-embedded) .ui-detail {
        padding-block-end: calc(176px + env(safe-area-inset-bottom));
    }

    body.consumer-navigation-overlay:not(.consumer-navigation-embedded) .business-map-tools {
        right: auto;
        left: max(11px, env(safe-area-inset-left));
    }

    html[dir='ltr'] body.consumer-navigation-overlay:not(.consumer-navigation-embedded) .business-map-tools {
        right: max(11px, env(safe-area-inset-right));
        left: auto;
    }

    body.consumer-navigation-overlay:not(.consumer-navigation-embedded) :is(.iran-map-legend, .iran-map-attribution) {
        bottom: calc(var(--consumer-nav-height) + 8px);
    }
}

@media (min-width: 768px) {
    .custom-consumer-navigation .ui-v2-bottom-navigation,
    body.has-consumer-navigation .ui-v2-bottom-navigation {
        display: none;
    }

    body.has-consumer-navigation:not(.consumer-navigation-overlay):not(.consumer-navigation-embedded) {
        padding-block-end: 0;
    }
}

@media (max-width: 359px) {
    .custom-consumer-navigation .ui-v2-bottom-navigation__item {
        font-size: .625rem;
    }

    .custom-consumer-navigation__back span:last-child {
        display: none;
    }
}

@media (max-height: 480px) and (orientation: landscape) {
    .custom-consumer-navigation .ui-v2-bottom-navigation {
        min-block-size: calc(60px + env(safe-area-inset-bottom));
        padding-block-start: 3px;
    }

    .custom-consumer-navigation .ui-v2-bottom-navigation__item {
        min-block-size: 48px;
    }

    .custom-consumer-navigation .ui-v2-bottom-navigation__item.is-primary .ui-v2-bottom-navigation__icon {
        inline-size: 34px;
        block-size: 34px;
        margin-block-start: -11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .custom-consumer-navigation * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

@media (forced-colors: active) {
    .custom-consumer-navigation__back,
    .custom-consumer-navigation .ui-v2-bottom-navigation {
        border-color: CanvasText;
        background: Canvas;
    }
}