/* Hagzi mobile navigation (Bayut comparison, 26 Oct 2026).
   Every rule is scoped to the html class its switch sets (hz-mn-<feature>),
   Configure › Hagzi › Mobile navigation. Transforms and opacity only, so
   nothing here can shift layout. */

/* ------------------------------------------------------------ tap_feedback */

.hz-mn-progress {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 2147483000;
    height: 3px;
    background: var(--hagzi-primary, #0745D9);
    opacity: 0;
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: left center;
}

[dir="rtl"] .hz-mn-progress {
    transform-origin: right center;
}

.hz-mn-progress.is-on {
    opacity: 1;
    transform: scaleX(.86);
    transition: transform 2.4s cubic-bezier(.08, .7, .2, 1), opacity 80ms linear;
}

@media (hover: none) {
    html.hz-mn-tap_feedback a,
    html.hz-mn-tap_feedback button,
    html.hz-mn-tap_feedback summary,
    html.hz-mn-tap_feedback [role="button"] {
        -webkit-tap-highlight-color: rgba(7, 69, 217, .12);
    }

    html.hz-mn-tap_feedback .hzp-serp .hzp-card:active {
        transform: scale(.985);
        transition: transform 90ms ease-out;
    }

    html.hz-mn-tap_feedback .hzp-btn:active,
    html.hz-mn-tap_feedback .hzp-fb__show:active,
    html.hz-mn-tap_feedback .hzp-mf__apply:active,
    html.hz-mn-tap_feedback .hzp-core__opt:active,
    html.hz-mn-tap_feedback .hzp-serp-pagination__button:active,
    html.hz-mn-tap_feedback .hzp-chip-link:active,
    html.hz-mn-tap_feedback .hzp-fb__toggle:active,
    html.hz-mn-tap_feedback .hzd-callbar a:active {
        opacity: .72;
        transform: scale(.97);
        transition: transform 80ms ease-out, opacity 80ms ease-out;
    }
}

/* 44 x 44 touch areas with the same drawn size: the photo arrows become a
   transparent 44px button around their 24px disc, the card heart gets an
   invisible ring. */
@media (max-width: 720px) {
    html.hz-mn-tap_feedback.hzp-js .hzp-serp .hzp-card__gallery-nav {
        width: 44px;
        height: 44px;
        border: 0;
        background: radial-gradient(circle, rgba(255, 255, 255, .72) 0 11.5px, rgba(255, 255, 255, .5) 12px, transparent 12.5px);
        box-shadow: none;
    }

    html.hz-mn-tap_feedback .hzp-card__gallery-nav--prev {
        inset-inline-start: 2px;
    }

    html.hz-mn-tap_feedback .hzp-card__gallery-nav--next {
        inset-inline-end: 2px;
    }

    html.hz-mn-tap_feedback .hzp-card__gallery-nav svg {
        filter: drop-shadow(0 1px 2px rgba(16, 20, 28, .18));
    }

    html.hz-mn-tap_feedback .hzp-serp .hzp-card .hzp-fav::before {
        position: absolute;
        inset: -6px;
        content: '';
    }
}

/* ------------------------------------------------------------ filter_sheet */

@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
    html.hz-mn-filter_sheet.hzp-js .hzp-serp .hzp-mf.is-open .hzp-mf__body,
    html.hz-mn-filter_sheet.hzp-js .hzp-serp .hzp-fb__more[open] .hzp-fb__panel {
        animation: hz-mn-sheet-in 220ms cubic-bezier(.2, .8, .2, 1) both;
    }

    html.hz-mn-filter_sheet.hzp-js .hzp-serp .hzp-mf.is-open .hzp-mf__backdrop,
    html.hz-mn-filter_sheet.hzp-js .hzp-serp .hzp-fb__more[open] > .hzp-fb__backdrop {
        animation: hz-mn-fade-in 180ms ease-out both;
    }
}

@keyframes hz-mn-sheet-in {
    from { transform: translateY(24px); opacity: .4; }
    to { transform: none; opacity: 1; }
}

@keyframes hz-mn-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --------------------------------------------------------------- image_cls */

/* Photographs already carry width and height (zero layout shift, 26 Oct
   2026); while one loads its box shows a fill rather than a blank. */
html.hz-mn-image_cls .hzp-card__photo,
html.hz-mn-image_cls .hzpg__img,
html.hz-mn-image_cls .hzpg__previewimg,
html.hz-mn-image_cls .hzp-mini__img {
    background-color: var(--hzp-fill, #eef1f5);
}

/* ----------------------------------------------------------- gallery_swipe */

/* Horizontal drags on a results card photograph belong to the card gallery;
   vertical ones still scroll the page. */
html.hz-mn-gallery_swipe.hzp-js .hzp-serp .hzp-card__gallery[data-hzp-card-gallery] {
    touch-action: pan-y pinch-zoom;
}