/*
 * property-home.css — every homepage-only stylesheet of the property channel
 * in one request (HOME-01, 2026-10-22).
 *
 * Before this file the homepage pushed seven sheets onto the layout's styles
 * stack, each a separate HTTP request ahead of property.css. They are
 * concatenated here IN THE SAME ORDER they used to be pushed, so the cascade
 * is unchanged; each section below is the former file byte for byte, under a
 * divider that names it. Loaded once from home/index.blade.php with the same
 * ?v=<filemtime> cache-buster property.css uses; plain CSS out of public/,
 * outside the Vite build, so no asset build is needed.
 *
 * Two of the sections are also used off the homepage and therefore still
 * exist as their own files for those pages: property-popular-cities.css
 * (cities/index, hub-directory/index) and property-serp-seo.css (search/index,
 * property/hubs/show). Edit a shared rule in both places. The other five
 * former files were deleted.
 *
 * Verified before the merge: none of the seven sheets contained @import,
 * @charset or a relative url(), so moving them into one file in this
 * directory changes nothing they resolve.
 */

/* ==========================================================================
   property-home-types.css — Browse by Type (home/browse-by-type.blade.php)
   ========================================================================== */

/*
 * Homepage Browse by Type (views/home/browse-by-type.blade.php).
 * Plain CSS outside the Vite build; the link carries ?v=<filemtime>.
 * Logical properties and a grid keep the row mirrored in RTL unchanged.
 */
.hz-types {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hz-types > li {
    min-width: 0;
}

.hz-type {
    display: flex;
    height: 100%;
    min-height: 44px;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    padding: 22px 12px 20px;
    border: 1px solid var(--hz-line, #e7e9ee);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(18, 20, 26, 0.04), 0 4px 14px rgba(18, 20, 26, 0.05);
    color: var(--hz-ink, #12141a);
    text-align: center;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hz-type:hover {
    border-color: var(--hagzi-primary, #0745d9);
    box-shadow: 0 6px 18px rgba(7, 69, 217, 0.1);
}

.hz-type:focus-visible {
    outline: 2px solid var(--hagzi-primary, #0745d9);
    outline-offset: 2px;
}

.hz-type__icon {
    display: inline-flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    margin-block-end: 12px;
    border-radius: 14px;
    background: rgba(7, 69, 217, 0.07);
    color: var(--hagzi-primary, #0745d9);
}

.hz-type__icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hz-type__name {
    display: block;
    max-width: 100%;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.hz-type__count {
    display: block;
    margin-block-start: 4px;
    color: var(--hz-muted, #6b7280);
    font-size: 13px;
    line-height: 1.35;
}

@media (max-width: 639px) {
    .hz-types {
        gap: 12px;
    }

    .hz-type {
        padding: 18px 10px 16px;
    }
}

@media (max-width: 299px) {
    .hz-types {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hz-type {
        transition: none;
    }
}

/* ==========================================================================
   property-popular-cities.css — Popular Cities (home/popular-cities.blade.php); the city directory keeps its own copy of this file
   ========================================================================== */

/*
 * Explore Properties in Popular Cities (homepage) and the city directory.
 * Four columns on desktop, two on tablet, one on handsets. Logical properties
 * only, so the Arabic page mirrors without an RTL override.
 */
.hzcities__seeall {
    color: var(--hagzi-primary, #0745D9);
}

.hzcities__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hzcities__card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 8px;
    border-radius: 14px;
    color: var(--hz-ink, #12141a);
    text-decoration: none;
}

.hzcities__card:hover .hzcities__name {
    color: var(--hagzi-primary, #0745D9);
}

.hzcities__card:focus-visible {
    outline: 3px solid var(--hagzi-focus, rgba(82, 50, 137, 0.28));
    outline-offset: 2px;
}

.hzcities__img {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
}

.hzcities__img--none {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef2fb;
    color: var(--hagzi-primary, #0745D9);
}

.hzcities__img--none svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hzcities__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hzcities__name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.hzcities__count {
    margin-top: 2px;
    color: var(--hz-muted, #6b7280);
    font-size: 14px;
    line-height: 1.35;
}

.hzcities__crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-end: 12px;
    color: var(--hz-muted, #6b7280);
    font-size: 13px;
}

.hzcities__crumbs a {
    color: inherit;
}

.hzcities__intro,
.hzcities__empty {
    margin-block: 8px 24px;
    color: var(--hz-muted, #6b7280);
}

@media (max-width: 1023px) {
    .hzcities__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .hzcities__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
}

/* ==========================================================================
   property-service-banner.css — Sell with Hagzi service banner (partials/service-banner.blade.php)
   ========================================================================== */

/*
 * Property channel — "Sell with Hagzi" service banner (.hzsvc-*).
 *
 * The homepage entry point to the done-for-you selling service at
 * /sell-with-hagzi. Sits in the seam between the "Property for Sale" and
 * "Property for Rent" rows.
 *
 * ---------------------------------------------------------------------------
 * WHY THIS IS A SEPARATE FILE
 * ---------------------------------------------------------------------------
 *
 * property-pages.css and property-rtl.css are both being written by other
 * sessions right now, and property.css is the homepage's own sheet. A new file
 * is the only place these rules can go without queueing behind someone else's
 * save, and it costs one more request on one page.
 *
 * No build step. Plain CSS out of public/, cache-busted with filemtime by the
 * partial that loads it, which is how every other sheet on this channel is
 * served.
 *
 * ---------------------------------------------------------------------------
 * NAMESPACE
 * ---------------------------------------------------------------------------
 *
 * Every selector is under .hzsvc-. Checked against all five live property
 * sheets before the prefix was chosen: property.css uses .hz-, .pf-, .ph-,
 * .op-, .marketplace-; property-pages.css uses .hzp-, .hzf-, .hzpg-; the
 * homepage promo panel uses .hzb-; the sell page uses .hzs-. None of them
 * contains the string "hzsvc" and none declares an [class*=] or bare element
 * selector that could reach in here.
 *
 * ---------------------------------------------------------------------------
 * WHY THE COLOURS ARE LITERALS AND NOT var(--hzp-*)
 * ---------------------------------------------------------------------------
 *
 * The tokens this banner wants -- --hzp-accent, --hzp-accent-wash,
 * --hzp-accent-line -- are declared by property-pages.css on .hzp-page. The
 * homepage does not carry that class and does not load that sheet, so every
 * one of those references would resolve to nothing and the panel would compute
 * a transparent background under white text. That exact failure is recorded on
 * the sell page for the same reason. The values below are the same numbers,
 * declared locally on .hzsvc so they cannot leak outward either.
 *
 * ---------------------------------------------------------------------------
 * WHY THIS PANEL IS LIGHT WHEN THE ADD-LISTING PANEL IS DARK
 * ---------------------------------------------------------------------------
 *
 * Deliberate, and the point of the whole block.
 *
 * The Add Listing banner (.hzp-sell, on the results page and the listing page)
 * is a deep blue #06358F card. The homepage already carries a second deep
 * blue full-width slab further down (.hzb-banner). A third blue slab in
 * the middle of the same page would read as the same object repeated, which is
 * exactly the failure this banner has to avoid: Add Listing is self-serve and
 * this is done-for-you, and a reader has to be able to tell which is which at
 * a glance.
 *
 * So the register is inverted -- the accent wash as the ground, the blue as
 * the edge and the type -- while every other part of the idiom is kept
 * identical on purpose: the same 999px pill chips at the same 12.5px/700, the
 * same arrow-in-a-round-button call to action, the same title weight, the same
 * flat two-tone illustration built from a gradient shape with a white glyph
 * inside it and three coral sparks beside it. Same family, different member.
 */

/*
 * Scoped border-box. The homepage inherits a Tailwind preflight from the shop
 * build, but this block should not depend on a reset it does not own -- the
 * .hz-shell gutter is added outside its 100% width without it, which overflows
 * the page by the width of the gutter.
 */
.hzsvc,
.hzsvc *,
.hzsvc *::before,
.hzsvc *::after {
    box-sizing: border-box;
}

.hzsvc {
    /* Same numbers as --hzp-accent / --hzp-accent-wash / --hzp-accent-line.
       See the header: they cannot be referenced from here. */
    --hzsvc-accent: #0745D9;
    --hzsvc-accent-dark: #0638B0;
    --hzsvc-wash: #EEF3FF;
    --hzsvc-line: #C4D4FA;
    --hzsvc-ink: #1b1830;
    --hzsvc-muted: #4a4463;
    /* The Add Listing card's coral, used only for the three sparks so the two
       illustrations are visibly siblings. Never for a control here. */
    --hzsvc-spark: #ec6555;
}

.hzsvc__panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px 22px;
    padding: 22px 26px;
    border: 1px solid var(--hzsvc-line);
    border-radius: 18px;
    background: var(--hzsvc-wash);
}

/* ----------------------------------------------------------- illustration -- */

.hzsvc__art {
    flex: none;
    width: 92px;
    height: auto;
}

/* ------------------------------------------------------------------ copy -- */

.hzsvc__body {
    min-width: 0;
}

/*
 * The one-glance label. .hzp-sell has no pill, so this is not a borrowed
 * element -- it is the fastest way to say "done for you" before the headline
 * is read, which is the whole job of this banner next to the other one.
 */
.hzsvc__pill {
    display: inline-block;
    margin: 0 0 8px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--hzsvc-accent);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
}

/* 21px/800 is .hzp-sell__title exactly. The two headlines should sit at the
   same rank in the page even though the panels do not share a ground. */
.hzsvc__title {
    margin: 0;
    color: var(--hzsvc-ink);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.hzsvc__text {
    max-width: 62ch;
    margin: 8px 0 0;
    color: var(--hzsvc-muted);
    font-size: 13.5px;
    line-height: 1.5;
}

/* ----------------------------------------------------------------- chips -- */

.hzsvc__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 13px;
}

/*
 * Labels, not controls: no hover, no pointer, no focus target -- the same
 * contract .hzp-sell__chip states. A border rather than the shadowless white
 * of the dark card, because white on the wash has too little edge without one.
 */
.hzsvc__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border: 1px solid var(--hzsvc-line);
    border-radius: 999px;
    background: #ffffff;
    color: #212026;
    font-size: 12.5px;
    font-weight: 700;
    cursor: default;
}

.hzsvc__chip svg {
    flex: none;
    width: 15px;
    height: 15px;
}

/* ------------------------------------------------------------------- cta -- */

.hzsvc__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 20px;
    border-radius: 999px;
    background: var(--hzsvc-accent);
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.hzsvc__cta:hover {
    background: var(--hzsvc-accent-dark);
    color: #ffffff;
}

.hzsvc__cta:focus-visible {
    outline: 2px solid var(--hzsvc-accent);
    outline-offset: 2px;
}

.hzsvc__cta svg {
    flex: none;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
 * The arrow points along the reading direction, so in Arabic it points the
 * other way. Same treatment and same reason as .hz-seeall's arrow in
 * property-rtl.css; kept here rather than added there because that file is
 * open in another session.
 */
[dir="rtl"] .hzsvc__cta svg {
    transform: scaleX(-1);
}

/* ------------------------------------------------------------ responsive -- */

/*
 * The call to action drops under the copy before the copy is squeezed. At this
 * width a nowrap Arabic button and a headline cannot share a row without one
 * of them wrapping badly.
 */
@media (max-width: 899.98px) {
    .hzsvc__panel {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 16px 18px;
        padding: 20px;
    }

    .hzsvc__cta {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/*
 * Phone. The illustration goes -- the same call .hzp-sell makes below its own
 * breakpoint, and for the same reason: at this width it is taking a third of
 * the row off the words. The button goes full width because a left-aligned
 * pill in a 350px column reads as an offcut.
 */
@media (max-width: 599.98px) {
    .hzsvc__panel {
        grid-template-columns: minmax(0, 1fr);
        padding: 18px 16px;
        border-radius: 14px;
    }

    .hzsvc__art {
        display: none;
    }

    .hzsvc__title {
        font-size: 19px;
    }

    .hzsvc__cta {
        justify-self: stretch;
        width: 100%;
        /* The English label fits on one line at 390; the Arabic one is longer
           and must be allowed to use two rather than push the panel wide. */
        white-space: normal;
    }
}

/* ==========================================================================
   property-home-projects.css — New projects row (property/projects/home-cards.blade.php)
   ========================================================================== */

/* Same homepage card anatomy; the accent is confined to new projects. */
.hz-home-projects .hz-lcard--project { border-color: #dddff1; }
.hz-home-projects .hz-lcard__body { border-top: 3px solid #c8cbf0; }
.hz-home-projects .hz-home-projects__badge { background: #393a7a; }
.hz-home-projects .hz-lcard__title { min-height: 2.7em; }
.hz-home-projects .hz-lcard__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hz-home-projects .hz-lcard__price { margin-top: auto; }
.hz-home-projects__units {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #ececf5;
    color: #393a7a;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
.hz-home-projects__units:hover { text-decoration: underline; }
.hz-home-projects__units svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    flex: 0 0 auto;
}
[dir="rtl"] .hz-home-projects__units svg { transform: scaleX(-1); }
.hz-home-projects a:focus-visible { outline: 2px solid var(--hagzi-primary); outline-offset: 3px; }

/* ==========================================================================
   banner/banner.css — Valuation promo banner (.hzb-*, inline in home/index.blade.php)
   ========================================================================== */

/*
 * Property channel — "valuation" promo banner (hzb-*).
 *
 * Standalone block for the property homepage, intended to sit between the
 * "Explore new projects in Jordan" section and "Why choose Hagzi?".
 *
 * Namespace
 * ---------
 * Every selector below is under .hzb-*. Checked against both live sheets
 * before this prefix was chosen: property.css uses .hz-, .pf-, .ph-, .op-,
 * .marketplace-; property-pages.css uses .hzp-, .hzf-. Neither contains the
 * string "hzb", and neither declares an [class*=] / [class^=] selector or a
 * bare element selector that could reach in here. The custom properties are
 * declared on .hzb-banner rather than :root so they cannot leak either.
 *
 * Depends on two site classes for its outer rhythm, both from property.css:
 *   .hz-sec    section padding (44px top, 34px under 720px)
 *   .hz-shell  1200px max-width + 24px gutter
 * If those are ever renamed this block still renders; it just loses the
 * shared page rhythm.
 *
 * No JavaScript. Nothing here binds a listener, so the Vue app that mounts on
 * #app can rebuild the subtree without breaking anything.
 *
 * Plain CSS served from public/. No build step, by design.
 */

/*
 * Scoped border-box. The homepage gets this from the shop build's Tailwind
 * preflight, but this block should not depend on a reset it does not own —
 * without it .hz-shell's 24px gutter is added outside its 100% width and the
 * page overflows by 48px. Measured, not assumed: that is exactly what happened
 * on the preview page before this rule existed.
 */
.hzb-banner,
.hzb-banner *,
.hzb-banner *::before,
.hzb-banner *::after {
    box-sizing: border-box;
}

.hzb-banner {
    /*
     * Deep blue, deliberately not the site's red. The panel advertises
     * something that does not exist yet, so it should not wear the colour the
     * live calls to action use. Measured 10.5:1 against white.
     */
    --hzb-purple: #0638B0;
    --hzb-white: #ffffff;
    --hzb-soft: rgba(255, 255, 255, 0.87);
    --hzb-faint: rgba(255, 255, 255, 0.62);
    --hzb-red: #d92228;
    --hzb-ink: #12141a;
    --hzb-card-muted: #56607a;
}

.hzb-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px 132px;
    grid-template-areas: "copy card rail";
    align-items: center;
    gap: 36px;
    padding: 34px 40px;
    border-radius: 18px;
    background: var(--hzb-purple);
    color: var(--hzb-white);
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ----------------------------------------------------------------- copy --- */

.hzb-copy {
    grid-area: copy;
    min-width: 0;
}

.hzb-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}

.hzb-mark {
    flex: none;
    width: 30px;
    height: 30px;
    fill: none;
    stroke: var(--hzb-white);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
 * Reads "Design preview", not "Beta". Beta would imply something exists and
 * can be used. The site's red is used here and only here, to tie the panel
 * back to the palette without letting it look like a live promotion.
 */
.hzb-pill {
    padding: 3px 9px;
    border-radius: 4px;
    background: var(--hzb-red);
    color: var(--hzb-white);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hzb-title {
    margin: 0 0 12px;
    color: var(--hzb-white);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.4px;
}

.hzb-title span {
    display: block;
}

.hzb-lede {
    margin: 0;
    max-width: 46em;
    color: var(--hzb-soft);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

.hzb-alt {
    margin: 14px 0 0;
    color: var(--hzb-soft);
    font-size: 13.5px;
    line-height: 1.55;
}

/* 700, not 600: the page loads Roboto 400/500/700 only, so 600 would be faux-bold. */
.hzb-link {
    color: var(--hzb-white);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.hzb-link:hover {
    text-decoration-thickness: 2px;
}

/* Focus ring never removed, only restyled — same rule the site follows. */
.hzb-link:focus-visible {
    outline: 3px solid var(--hzb-white);
    outline-offset: 3px;
    border-radius: 3px;
}

/* ------------------------------------------------------ mock-up card ------ */

.hzb-card {
    grid-area: card;
    min-width: 0;
    margin: 0;
    border-radius: 14px;
    background: var(--hzb-white);
    /* Clips the photograph to the top corners. */
    overflow: hidden;
    box-shadow: 0 14px 30px rgba(12, 8, 40, 0.28);
}

.hzb-card__photo {
    display: block;
    width: 100%;
    height: 116px;
    object-fit: cover;
    background: #dfe3ea;
}

.hzb-card__body {
    padding: 13px 18px 15px;
}

/*
 * Dashed outline rather than a solid chip: the card is a drawing of a result,
 * and the label should not look like a status the system produced.
 */
.hzb-card__label {
    display: inline-block;
    margin: 0 0 11px;
    padding: 2px 8px;
    border: 1px dashed #9aa2b8;
    border-radius: 4px;
    color: var(--hzb-card-muted);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hzb-figures {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.hzb-figures__end {
    flex: none;
    color: var(--hzb-card-muted);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

/*
 * The middle figure is set at the same size and weight as the two ends. It is
 * the only invented number on the page, and at display size it was both the
 * largest number below the hero and a bolded centre value, which reads as a
 * point estimate — the one thing the headline says does not exist. Colour alone
 * marks the centre of the band; the gradient bar carries the rest.
 */
.hzb-figures__mid {
    flex: none;
    color: var(--hzb-ink);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

.hzb-bar {
    height: 6px;
    margin-top: 11px;
    border-radius: 999px;
    background: linear-gradient(90deg, #E7EEFF 0%, #79A0F0 52%, var(--hzb-purple) 100%);
}

.hzb-card__note {
    margin: 11px 0 0;
    padding-top: 10px;
    border-top: 1px solid #e7e9ee;
    color: var(--hzb-card-muted);
    font-size: 11.5px;
    line-height: 1.5;
}

/* ------------------------------------------------------------- QR rail ---- */

.hzb-rail {
    grid-area: rail;
    min-width: 0;
    text-align: center;
}

.hzb-qr {
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto;
    padding: 6px;
    border-radius: 8px;
    background: var(--hzb-white);
}

.hzb-rail__note {
    margin: 9px 0 0;
    color: var(--hzb-soft);
    font-size: 11.5px;
    line-height: 1.45;
}

/* ---------------------------------------------------------- responsive ---- */

/*
 * Under 1080 the three-up row runs out of room for the copy, so the copy takes
 * a full row and the card keeps its width beside the QR.
 */
@media (max-width: 1080px) {
    .hzb-panel {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "copy copy"
            "card rail";
        align-items: start;
        gap: 26px 28px;
        padding: 30px 32px;
    }

    .hzb-title {
        font-size: 27px;
    }

    .hzb-rail {
        padding-top: 6px;
    }
}

/*
 * Single column. The card takes the full width rather than being squeezed, and
 * the QR lies down next to its caption so it costs one short row instead of
 * two tall ones.
 */
@media (max-width: 720px) {
    .hzb-panel {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "copy"
            "card"
            "rail";
        gap: 22px;
        padding: 26px 24px;
        border-radius: 16px;
    }

    .hzb-title {
        font-size: 25px;
    }

    .hzb-card__photo {
        height: 132px;
    }

    .hzb-rail {
        display: flex;
        align-items: center;
        gap: 14px;
        text-align: start;
        padding-top: 0;
    }

    .hzb-qr {
        flex: none;
        width: 84px;
        height: 84px;
        margin: 0;
    }

    .hzb-rail__note {
        margin: 0;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .hzb-panel {
        gap: 20px;
        padding: 22px 18px;
        border-radius: 14px;
    }

    .hzb-title {
        font-size: 22px;
        line-height: 1.25;
    }

    .hzb-lede {
        font-size: 13.5px;
    }

    .hzb-card__body {
        padding: 12px 14px 14px;
    }

    .hzb-figures__end,
    .hzb-figures__mid {
        font-size: 11.5px;
    }
}

/* ==========================================================================
   seo/hzseo-links.css — Explore more SEO link block (home/hub-links.blade.php)
   ========================================================================== */

/* ==========================================================================
   hzseo-links.css
   "Explore more" SEO link block — property channel homepage, above the footer.

   NAMESPACE: hzseo-
   Chosen after a whole-token census of every class in property.css,
   property-pages.css and every Blade view under views/property (including
   their inlined <style> blocks). Substring grep is worthless for this job,
   because "hz" prefixes every namespace on the channel: matching is on the
   leading segment of a complete class token instead.

   Prefixes already owned by other work, all avoided:
       hz-     113 tokens      hzp-    189 tokens
       hzf-     49 tokens      hzpr-    80 tokens
       hzb-     25 tokens      hzg-     24 tokens
       hzs-     37 tokens   <- the Add Listing step rail in
                               views/sell-for-me/index.blade.php. This file
                               used to use hzs-; that was a collision and this
                               is the correction.
   Leading segment "hzseo": 0 tokens anywhere. And no rule on the channel uses
   [class*=], [class^=], [class|=] or [class$=], so nothing can catch this
   prefix by pattern rather than by name.

   -------------------------------------------------------------------------
   LOAD ORDER, AND WHY NOTHING HERE DEPENDS ON IT
   -------------------------------------------------------------------------
   The inserting agent adds this sheet with @push('styles'). Measured on the
   rendered homepage, that stack lands at roughly byte 3k-35k of <head> while
   property.css lands at 45.7k — so THIS FILE LOADS FIRST and loses every
   cascade tie to property.css. Three things follow, and all three are honoured
   below:

     1. This file never redefines a --hz-* token, it only reads them. Custom
        properties resolve at computed-value time from whichever :root
        declaration wins, so a consumer is order-independent by construction.
        Every var() here also carries a literal fallback, which is what makes
        the file correct standing alone as well.

     2. This file declares nothing at a specificity that property.css also
        reaches. Checked, not assumed: property.css and property-pages.css
        contain no bare element rules and no descendant rules rooted at
        .hz-shell or .hz-sec that end in an element type, so there is nothing
        for a single-class rule here to tie with.

     3. .hzseo__shell restates .hz-shell rather than overriding it. Same
        values, so the tie it loses changes nothing.

   The one borrow is .hz-shell on the inner wrapper, for the site's 1200px
   centred gutter.

   PALETTE — read from property.css, each with a literal fallback:
       --hagzi-primary  #0745D9  accent: active tab underline, hover, focus
                                 ring, chip and link hover, chevron

   That accent used to be --hz-red. This sheet was written before the purple
   landed and kept reading the red token afterwards, which is why this one
   section still had a red underline when the rest of the channel did not.
   --hz-red itself is untouched and still very much in use -- property.css,
   the sell-for-me form and the banner all read it -- so only the ten uses
   in this file moved. The saved state on favourites is a different colour
   again (--hzfav-saved, #e11d48) and is unrelated to either.
       --hz-ink   #12141a   headings and summaries
       --hz-nav   #3c414c   link text
       --hz-line  #e7e9ee   rules and chip borders
   The reference design's purple is Property Finder's brand and is not used.

   NO JAVASCRIPT
   Tabs are a radio group read with :checked and the sibling combinator.
   Groups are native <details>. Nothing here needs a script, so the block is
   immune to the Vue mount on #app discarding listeners bound during parse.
   The tab mechanism depends on the #hzseo-tab-rent / #hzseo-tab-buy ids and
   the shared radio name matching the markup exactly — a half-renamed selector
   here breaks the tabs silently.
   ========================================================================== */

.hzseo {
    padding: 44px 0 56px;
    background: #ffffff;
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}

.hzseo *,
.hzseo *::before,
.hzseo *::after {
    box-sizing: border-box;
}

/* Fallback for .hz-shell. Identical values, so the two never disagree. */
.hzseo__shell {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.hzseo__title {
    margin: 0 0 18px;
    color: var(--hz-ink, #12141a);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.25;
}

/* --------------------------------------------------------------------------
   TABS

   The radios are the state. They sit as direct children of .hzseo__tabwrap,
   before both the labels and the panels, because :checked ~ only reaches
   later siblings. Moving them inside .hzseo__tabs would break every rule
   below.
   -------------------------------------------------------------------------- */

.hzseo__tabwrap {
    position: relative;
}

.hzseo__radio {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    /* Not display:none and not visibility:hidden — both would take the control
       out of the tab order and make the tabs keyboard-unreachable. */
    pointer-events: none;
}

.hzseo__tabs {
    display: flex;
    gap: 28px;
    margin: 0 0 20px;
    border-bottom: 1px solid var(--hz-line, #e7e9ee);
}

.hzseo__tab {
    display: inline-block;
    margin-bottom: -1px;
    padding: 0 0 12px;
    border-bottom: 2px solid transparent;
    color: #5a6070;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    transition: color 0.15s ease, border-color 0.15s ease;
    -webkit-user-select: none;
    user-select: none;
}

.hzseo__tab:hover {
    color: var(--hz-ink, #12141a);
}

#hzseo-tab-rent:checked ~ .hzseo__tabs .hzseo__tab[for="hzseo-tab-rent"],
#hzseo-tab-buy:checked ~ .hzseo__tabs .hzseo__tab[for="hzseo-tab-buy"] {
    border-bottom-color: var(--hagzi-primary, #0745D9);
    color: var(--hz-ink, #12141a);
    font-weight: 700;
}

/* Keyboard focus has to be shown on the label, because the control it belongs
   to is the visually hidden radio. */
#hzseo-tab-rent:focus-visible ~ .hzseo__tabs .hzseo__tab[for="hzseo-tab-rent"],
#hzseo-tab-buy:focus-visible ~ .hzseo__tabs .hzseo__tab[for="hzseo-tab-buy"] {
    outline: 2px solid var(--hagzi-primary, #0745D9);
    outline-offset: 3px;
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   PANELS
   -------------------------------------------------------------------------- */

.hzseo__panel {
    display: none;
}

#hzseo-tab-rent:checked ~ .hzseo__panel--rent,
#hzseo-tab-buy:checked ~ .hzseo__panel--buy {
    display: block;
}

/* --------------------------------------------------------------------------
   DISTRICT CHIPS
   Wrapping rather than a horizontal scroller: the reference keeps them on one
   line, but ten chips in a 342px viewport would need an overflow container,
   and a wrap costs nothing and cannot leak a scrollbar onto the page.
   -------------------------------------------------------------------------- */

.hzseo__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.hzseo__chip {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid var(--hz-line, #e7e9ee);
    border-radius: 999px;
    background: #ffffff;
    color: var(--hz-nav, #3c414c);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.hzseo__chip:hover,
.hzseo__chip:focus-visible {
    border-color: var(--hagzi-primary, #0745D9);
    background: #fff5f5;
    color: var(--hagzi-primary, #0745D9);
}

.hzseo__chip:focus-visible {
    outline: 2px solid var(--hagzi-primary, #0745D9);
    outline-offset: 2px;
}

.hzseo__note {
    margin: 0 0 20px;
    color: #5a6070;
    font-size: 12px;
    line-height: 1.6;
}

.hzseo__note b {
    color: var(--hz-nav, #3c414c);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   COLLAPSIBLE GROUPS
   -------------------------------------------------------------------------- */

.hzseo__group {
    border-top: 1px solid var(--hz-line, #e7e9ee);
}

.hzseo__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 2px;
    color: var(--hz-ink, #12141a);
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    list-style: none;
}

/* Remove the UA disclosure triangle in both engine families. */
.hzseo__summary::-webkit-details-marker {
    display: none;
}

.hzseo__summary::marker {
    content: "";
}

.hzseo__summary:hover {
    color: var(--hagzi-primary, #0745D9);
}

.hzseo__summary:focus-visible {
    outline: 2px solid var(--hagzi-primary, #0745D9);
    outline-offset: -2px;
    border-radius: 4px;
}

/* Match the shared FAQ chevron exactly: a 20px stroked SVG inside a 24px
   control area. It points down when closed and rotates up when open. */
.hzseo__chev {
    display: grid;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    place-items: center;
    color: var(--hzp-accent, var(--hagzi-primary, #0745D9));
    transition: transform 0.18s ease;
}

.hzseo__chev svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hzseo__group[open] > .hzseo__summary .hzseo__chev {
    transform: rotate(180deg);
}

.hzseo__summary:hover .hzseo__chev {
    color: var(--hzp-accent, var(--hagzi-primary, #0745D9));
}

/* --------------------------------------------------------------------------
   TWO-COLUMN LINK LISTS
   CSS columns rather than a grid: the reference fills the left column before
   the right, which is column-major, and that is what `columns` does natively.
   -------------------------------------------------------------------------- */

.hzseo__list {
    margin: 0;
    padding: 0 0 20px;
    column-count: 2;
    column-gap: 56px;
    list-style: none;
}

.hzseo__item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

.hzseo__link {
    display: inline-block;
    padding: 6px 0;
    color: var(--hz-nav, #3c414c);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
    /* Long district phrases must wrap inside the column rather than push it
       wider, which is what would put a scrollbar on the page. */
    overflow-wrap: break-word;
    word-break: break-word;
}

.hzseo__link:hover {
    color: var(--hagzi-primary, #0745D9);
    text-decoration: underline;
}

.hzseo__link:focus-visible {
    outline: 2px solid var(--hagzi-primary, #0745D9);
    outline-offset: 2px;
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   NARROW VIEWPORTS
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .hzseo {
        padding: 32px 0 40px;
    }

    .hzseo__title {
        font-size: 20px;
    }

    .hzseo__list {
        column-count: 1;
    }

    .hzseo__summary {
        font-size: 14px;
    }
}

@media (max-width: 640px) {
    .hzseo__chev {
        flex-basis: 22px;
        width: 22px;
        height: 22px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hzseo__list {
        column-gap: 32px;
    }
}

/* Respect a reduced-motion preference: the only motion here is the chevron. */
@media (prefers-reduced-motion: reduce) {
    .hzseo__tab,
    .hzseo__chip,
    .hzseo__chev {
        transition: none;
    }
}

/* ==========================================================================
   property-serp-seo.css — FAQ treatment (.hzp-serp-seo); the SERP and hub pages keep their own copy of this file
   ========================================================================== */

/*
 * End-of-results guide for the Property SERP and the matching FAQ treatment
 * reused on the Property homepage.
 *
 * Loaded by the Property search and home views. Every selector is scoped to
 * .hzp-serp-seo so it cannot alter listing pages, the account area or Cars.
 */

.hzp-serp-seo {
    --hzp-serp-seo-blue: var(--hzp-accent, var(--hagzi-primary, #0745D9));
    --hzp-serp-seo-line: var(--hzp-line, #e3e6ec);
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 0 0 64px;
    border-top: 1px solid var(--hzp-serp-seo-line);
}

.hzp-serp-seo h2,
.hzp-serp-seo p {
    margin: 0;
}

.hzp-serp-seo__about,
.hzp-serp-seo__faq,
.hzp-serp-seo__nearby {
    padding: 30px 0;
    border: 0;
    border-bottom: 1px solid var(--hzp-serp-seo-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.hzp-serp-seo__nearby {
    border-bottom: 0;
}

.hzp-serp-seo__card-head {
    display: block;
    padding: 0;
    border: 0;
}

.hzp-serp-seo__card-head h2,
.hzp-serp-seo__section-head h2 {
    color: var(--hzp-ink);
    font-size: clamp(24px, 2.2vw, 30px);
    font-weight: 760;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.hzp-serp-seo__card-head p {
    margin-top: 4px;
    color: var(--hzp-muted);
    font-size: 14px;
    line-height: 1.5;
}

.hzp-serp-seo__icon,
.hzp-serp-seo__eyebrow {
    display: none;
}

.hzp-serp-seo__about-copy {
    display: grid;
    gap: 12px;
    padding: 12px 0 0;
    color: #4d5667;
    font-size: 15px;
    line-height: 1.65;
}

.hzp-serp-seo__about-more {
    margin: 0;
}

.hzp-serp-seo__about-more summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--hzp-serp-seo-blue);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}

.hzp-serp-seo__about-more summary::-webkit-details-marker {
    display: none;
}

.hzp-serp-seo__about-more summary:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hzp-serp-seo__about-more summary svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hzp-serp-seo__about-less {
    display: none;
}

.hzp-serp-seo__about-more[open] .hzp-serp-seo__about-more-label {
    display: none;
}

.hzp-serp-seo__about-more[open] .hzp-serp-seo__about-less {
    display: inline;
}

.hzp-serp-seo__about-more-copy {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.hzp-serp-seo__section-head {
    max-width: none;
}

.hzp-serp-seo__faq-list {
    display: block;
    margin-top: 16px;
    border-top: 1px solid var(--hzp-serp-seo-line);
}

.hzp-serp-seo__faq-item {
    overflow: visible;
    border: 0;
    border-bottom: 1px solid var(--hzp-serp-seo-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.hzp-serp-seo__faq-item summary {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 2px;
    color: var(--hzp-ink);
    font-size: 16px;
    font-weight: 650;
    line-height: 1.45;
    list-style: none;
    cursor: pointer;
}

.hzp-serp-seo__faq-item summary::-webkit-details-marker {
    display: none;
}

.hzp-serp-seo__faq-item summary:hover {
    color: var(--hzp-serp-seo-blue);
}

.hzp-serp-seo__chevron {
    display: grid;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    place-items: center;
    background: transparent;
    color: var(--hzp-serp-seo-blue);
    transition: transform .18s ease;
}

.hzp-serp-seo__chevron::before {
    display: none;
    content: none;
}

.hzp-serp-seo__chevron svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hzp-serp-seo__faq-item[open] .hzp-serp-seo__chevron {
    transform: rotate(180deg);
    background: transparent;
    color: var(--hzp-serp-seo-blue);
}

.hzp-serp-seo__faq-item[open] .hzp-serp-seo__chevron::before {
    content: none;
}

.hzp-serp-seo__answer {
    padding-block: 0 16px;
    padding-inline: 2px 42px;
    color: #5f697a;
    font-size: 15px;
    line-height: 1.65;
}

.hzp-serp-seo__answer::before {
    display: none;
}

.hzp-serp-seo__nearby .hzp-serp-seo__card-head p {
    display: none;
}

.hzp-serp-seo__nearby-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 44px;
    margin: 0;
    padding: 16px 0 0;
    list-style: none;
}

.hzp-serp-seo__nearby-list a {
    display: inline;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--hzp-serp-seo-blue);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    text-decoration: none;
}

.hzp-serp-seo__nearby-list a:hover {
    border: 0;
    box-shadow: none;
    text-decoration: underline;
    text-underline-offset: 3px;
    transform: none;
}

.hzp-serp-seo__nearby-list a svg {
    display: none;
}

[dir="rtl"] .hzp-serp-seo__about-more summary svg {
    transform: scaleX(-1);
}

@media (max-width: 991.98px) {
    .hzp-serp-seo__nearby-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .hzp-serp-seo {
        margin-top: 10px;
        padding-bottom: 42px;
    }

    .hzp-serp-seo__about,
    .hzp-serp-seo__faq,
    .hzp-serp-seo__nearby {
        padding: 24px 0;
    }

    .hzp-serp-seo__card-head h2,
    .hzp-serp-seo__section-head h2 {
        font-size: 22px;
    }

    .hzp-serp-seo__about-copy {
        gap: 10px;
        padding-top: 10px;
        font-size: 14px;
        line-height: 1.65;
    }

    .hzp-serp-seo__about-more summary {
        font-size: 14px;
    }

    .hzp-serp-seo__about-more-copy {
        gap: 10px;
        margin-top: 10px;
    }

    .hzp-serp-seo__faq-list {
        margin-top: 14px;
    }

    .hzp-serp-seo__faq-item summary {
        min-height: 52px;
        gap: 14px;
        padding: 12px 0;
        font-size: 15px;
    }

    .hzp-serp-seo__chevron {
        flex-basis: 22px;
        width: 22px;
        height: 22px;
    }

    .hzp-serp-seo__answer {
        padding-block-end: 14px;
        padding-inline: 0 32px;
        font-size: 14px;
    }

    .hzp-serp-seo__nearby-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 11px;
        padding-top: 14px;
    }

    .hzp-serp-seo__nearby-list a {
        font-size: 14.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hzp-serp-seo__chevron {
        transition: none;
    }
}