nav.mobile-tabbar {
    display: none;
}

@media (max-width: 900px) {
    body:has(nav.mobile-tabbar) {
        --jd-tab-bottom: max(10px, env(safe-area-inset-bottom, 0px));
        --jd-dock-edge: #f4eaf0;
        --jd-dock-veil: #f4eaf0b8;
        padding-bottom: calc(94px + var(--jd-tab-bottom));
    }

    html.dark body:has(nav.mobile-tabbar) {
        --jd-dock-edge: #1b1920;
        --jd-dock-veil: #1b1920b8;
    }

    body:has(nav.mobile-tabbar)::after {
        content: "";
        position: fixed;
        inset: auto 0 0;
        z-index: 2499;
        height: calc(var(--jd-tab-bottom) + 88px);
        background: linear-gradient(to top, var(--jd-dock-edge) var(--jd-tab-bottom),
            var(--jd-dock-veil) calc(var(--jd-tab-bottom) + 44px), transparent);
        pointer-events: none;
    }

    html.jaydad-app body:has(nav.mobile-tabbar) {
        --jd-tab-bottom: max(9px, calc(env(safe-area-inset-bottom, 0px) - 21px));
    }

    html nav.mobile-tabbar {
        --jd-tab-gutter: 4px;
        --jd-tab-width: calc((100% - 2 * var(--jd-tab-gutter)) / 5);
        --jd-tab-start: calc(var(--jd-tab-gutter) + var(--jd-tab-index, 0) * var(--jd-tab-width));
        --jd-highlight-inset: clamp(3px, 1.55vw, 7px);
        --jd-tab-red: linear-gradient(145deg, #c54b61, #ac354c);
        --jd-tab-active: #b90821;
        --jd-tab-ink: #202536;
        --jd-tab-ring: #fff;
        --jd-wave-direction: 1;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: stretch;
        isolation: isolate;
        position: fixed;
        inset: auto max(5px, env(safe-area-inset-right, 0px)) var(--jd-tab-bottom)
            max(5px, env(safe-area-inset-left, 0px));
        z-index: 2500;
        width: auto;
        max-width: 520px;
        margin-inline: auto;
        padding: 4px var(--jd-tab-gutter);
        border: 1px solid #fff;
        border-radius: 30px;
        background: linear-gradient(180deg, rgba(255, 253, 254, .98), rgba(255, 249, 252, .97));
        backdrop-filter: blur(18px) saturate(1.4);
        box-shadow: 0 10px 24px #33233130, 0 2px 7px #1a172710;
    }

    html[dir="rtl"] nav.mobile-tabbar {
        --jd-wave-direction: -1;
    }

    html.dark nav.mobile-tabbar {
        --jd-tab-active: #ff8ca6;
        --jd-tab-ink: #e4e5ee;
        --jd-tab-ring: #25242c;
        border-color: #45444e;
        background: rgba(32, 31, 39, .94);
        box-shadow: 0 12px 34px #0007;
    }

    nav.mobile-tabbar[data-indicator]::before,
    nav.mobile-tabbar[data-indicator]::after {
        content: "";
        position: absolute;
        opacity: 0;
        pointer-events: none;
        transition: inset-inline-start .28s cubic-bezier(.25, .8, .3, 1), opacity .15s ease;
    }

    nav.mobile-tabbar[data-indicator]::before {
        inset-block: 9px 5px;
        inset-inline-start: calc(var(--jd-tab-start) + var(--jd-highlight-inset));
        width: calc(var(--jd-tab-width) - 2 * var(--jd-highlight-inset));
    }

    nav.mobile-tabbar[data-indicator]::before,
    nav.mobile-tabbar:not([data-indicator]) .mtab.active:not(.mtab-add)::before {
        z-index: -1;
        box-sizing: border-box;
        border-start-start-radius: 26px;
        border-start-end-radius: 26px;
        border-end-end-radius: 11px;
        border-end-start-radius: 25px;
        box-shadow: 0 3px 8px #b9082120;
    }

    nav.mobile-tabbar[data-indicator]::after {
        /* The mask draws the shoulder that sweeps down into the next tab. */
        --jd-tab-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 90' preserveAspectRatio='none'%3E%3Cpath d='M0 36C0 14 15 1 37 1H52C69 1 79 6 86 18C93 31 94 47 105 58C113 66 125 68 140 68V90H37C16 90 0 75 0 53Z'/%3E%3C/svg%3E");
        z-index: -2;
        inset-block: 0 -12px;
        inset-inline-start: calc(var(--jd-tab-start) - 4px);
        width: calc(var(--jd-tab-width) + 49px);
        background: radial-gradient(ellipse 80% 65% at 31% 72%, #db123e35, #ec4b731a 47%, transparent 75%),
            linear-gradient(100deg, transparent 4%, #ec4b731a 62%, transparent);
        -webkit-mask: var(--jd-tab-wave) center / 100% 100% no-repeat;
        mask: var(--jd-tab-wave) center / 100% 100% no-repeat;
        transform: scaleX(var(--jd-wave-direction));
    }

    nav.mobile-tabbar[data-indicator="visible"]::before,
    nav.mobile-tabbar[data-indicator="visible"]::after {
        opacity: 1;
    }

    nav.mobile-tabbar[data-indicator-reset]::before,
    nav.mobile-tabbar[data-indicator-reset]::after {
        transition: none;
    }

    html nav.mobile-tabbar .mtab {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
        min-height: 65px;
        gap: 5px;
        padding: 4px 1px 7px;
        border: 0;
        border-radius: 24px;
        background: transparent;
        color: var(--jd-tab-ink);
        cursor: pointer;
        font-family: inherit;
        font-size: clamp(9px, 2.8vw, 12px);
        font-weight: 650;
        line-height: 1.15;
        text-align: center;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: color .15s ease;
    }

    html nav.mobile-tabbar .mtab.active:not(.mtab-add) {
        color: var(--jd-tab-active);
    }

    nav.mobile-tabbar:not([data-indicator]) .mtab.active:not(.mtab-add) {
        isolation: isolate;
    }

    nav.mobile-tabbar:not([data-indicator]) .mtab.active:not(.mtab-add)::before {
        content: "";
        position: absolute;
        inset-block: 5px 1px;
        inset-inline: var(--jd-highlight-inset);
        pointer-events: none;
    }

    nav.mobile-tabbar .mtab svg {
        width: 26px;
        height: 26px;
        flex: none;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.35;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    nav.mobile-tabbar .mtab:focus-visible {
        outline: 2px solid #ee5172;
        outline-offset: -1px;
    }

    nav.mobile-tabbar .mtab-add-btn {
        width: clamp(48px, 14.5vw, 57px);
        height: clamp(48px, 14.5vw, 57px);
        margin-block-start: -25px;
        display: grid;
        place-items: center;
        border: 4px solid var(--jd-tab-ring);
        border-radius: 50%;
        background: var(--jd-tab-red);
        color: #fff;
        box-shadow: 0 0 0 1px #c54b6155, 0 6px 14px #ac354c33;
        transition: transform .18s ease;
    }

    nav.mobile-tabbar .mtab-add-btn svg {
        width: 30px;
        height: 30px;
        stroke-width: 1.65;
    }

    nav.mobile-tabbar .mtab-add:active .mtab-add-btn {
        transform: scale(.93) rotate(-10deg);
    }

    body:has(nav.mobile-tabbar) .jd-asst-btn,
    body:has(nav.mobile-tabbar) .jd-asst-panel {
        bottom: calc(91px + var(--jd-tab-bottom));
    }
}

@media (max-width: 640px) {
    .search-split .search-head {
        --search-accent: #b90821;
        --search-map-ink: #374151;
        --search-map-border: #9ca3af;
    }

    html.dark .search-split .search-head {
        --search-accent: #ff8ca6;
        --search-map-ink: #e4e5ee;
        --search-map-border: #777985;
    }

    .search-split .search-head :is(.sf-apply, .hsp-ai-submit, .hsp-modes a[aria-current="true"],
        .near-btn, .near-active, .size-chip.on, .fresh-chip.on, .subtype-chip.on, .open-map-btn) {
        border: 1px solid var(--search-control-border, currentColor);
        background: transparent;
        color: var(--search-control-ink, var(--search-accent));
    }

    .search-split .search-head .open-map-btn {
        --search-control-border: var(--search-map-border);
        --search-control-ink: var(--search-map-ink);
    }

    .search-split .search-head :is(.sf-apply, .hsp-ai-submit, .hsp-modes a[aria-current="true"],
        .near-btn, .size-chip.on, .fresh-chip.on, .subtype-chip.on, .open-map-btn):is(:hover, :active) {
        background: color-mix(in srgb, currentColor 7%, transparent);
    }

    .search-split .search-head .subtype-chip.on .sc-count {
        background: color-mix(in srgb, currentColor 7%, transparent);
        color: inherit;
    }

    :is(.results-search, .hero-search-panel) .hsp-ai-submit .hsp-ai-spinner {
        border-color: color-mix(in srgb, currentColor 35%, transparent);
        border-top-color: currentColor;
    }
}

@media (max-width: 480px) {
    .header .mobile-search-btn {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }

    .header .mobile-search-btn svg {
        width: 26px;
        height: 26px;
    }

    .header .lang-switch a {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 6px 12px;
        font-size: 13px;
    }

    .header .lang-switch a[lang="ur"] {
        font-size: 14px;
    }

    .hero-banner .hero-tagline {
        font-size: 12px;
    }

    .hero-banner .hero-right {
        display: none;
    }

    .hero-banner .hero-badge-icon,
    body:has(.hero-banner) .jd-asst-btn {
        color: var(--brand);
    }

    html.dark .hero-banner .hero-badge-icon,
    html.dark body:has(.hero-banner) .jd-asst-btn {
        color: #ff8ca6;
    }

    .hero-banner .hero-badge-icon {
        border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
        background: transparent;
    }

    .hero-banner .hero-badge-icon svg {
        stroke: currentColor;
    }

    body:has(.hero-banner) .jd-asst-btn {
        border: 1.5px solid currentColor;
        background: #fff;
        box-shadow: 0 5px 18px #211b2d24;
    }

    html.dark body:has(.hero-banner) .jd-asst-btn {
        background: #25242c;
    }

    .hero-search-panel :is(.hsp-form .hsp-btn, .hsp-ai .hsp-ai-submit) {
        border: 1.5px solid currentColor;
        background: transparent;
        color: var(--brand);
    }

    html.dark .hero-search-panel :is(.hsp-form .hsp-btn, .hsp-ai .hsp-ai-submit) {
        color: #ff8ca6;
    }

    .hero-search-panel .hsp-form .hsp-btn svg {
        stroke: currentColor;
    }

    .hero-search-panel :is(.hsp-form .hsp-btn, .hsp-ai .hsp-ai-submit):is(:hover, :active) {
        background: color-mix(in srgb, currentColor 8%, transparent);
    }

    .hero-search-panel :is(.hsp-form .hsp-btn, .hsp-ai .hsp-ai-submit):focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    nav.mobile-tabbar[data-indicator]::before,
    nav.mobile-tabbar[data-indicator]::after,
    html nav.mobile-tabbar .mtab,
    nav.mobile-tabbar .mtab-add-btn {
        transition: none;
    }

    nav.mobile-tabbar .mtab-add:active .mtab-add-btn {
        transform: none;
    }
}