/*
 * ==========================================================================
 * REQUEST A VALUATION  --  the wizard at /request-a-valuation
 * ==========================================================================
 *
 * Its own file, loaded only by that page. Every selector is prefixed .hzv.
 *
 * ---------------------------------------------------------------------------
 * WHY .hzv AND NOT .hzs
 * ---------------------------------------------------------------------------
 *
 * Because .hzs- is taken, twice over, and this is a third thing.
 *
 * The Add Listing wizard's rail already uses .hzs-rail, .hzs-steps, .hzs-step,
 * .hzs-dot, .hzs-progress and .hzs-panel -- declared inline in its own view and
 * every one of them scoped under .hzf-page. The service page at /sell-with-hagzi
 * uses .hzs-step and .hzs-steps for something else entirely: the four "how it
 * works" cards. Neither collides today, because the wizard's are host-scoped to
 * .hzf-page and the service page's live in a stylesheet only that page loads.
 *
 * Adding a THIRD meaning for .hzs-step would be relying on that separation
 * holding forever. It does not need to: this file owns .hzv-.
 *
 * What is reused, deliberately and by name, is the PATTERN -- the geometry,
 * states and behaviour of the Add Listing rail, so the site has one wizard
 * convention rather than two. Values below are matched to it: a 248px rail
 * column, a 16px ring marker with a 2px border, a filled marker with a tick at
 * 42 degrees once a step is answered, a red marker with a "!" when a step has
 * failed, a 3px progress track and a 12px counter.
 *
 * Components reused rather than rebuilt: .hzp-shell's gutter idea, .hzp-btn and
 * .hzp-btn--accent for every control, and .hzp-field / .hzp-field__label /
 * .hzp-input / .hzp-input__field / .hzp-select / .hzp-select__el for the inputs
 * -- the same controls the search bar and the Add Listing form use.
 *
 * ---------------------------------------------------------------------------
 * THE COLOUR TRAP, AND WHY EVERY OVERRIDE CARRIES A LEADING .hzv
 * ---------------------------------------------------------------------------
 *
 * The wrapper carries .hzp-page, and that is load-bearing. property-pages.css
 * scopes both its --hzp-* token declarations and the block that repaints
 * .hzp-page .hzp-btn--accent in the theme's purple to that class. A wrapper
 * without it gets an accent button matching neither, falling back to an older
 * unscoped rule whose var(--hzp-red) has nothing in reach, computing a
 * transparent background under white text.
 *
 * Read the ACCENT tokens -- --hzp-accent, --hzp-accent-dark,
 * --hzp-accent-line -- because they say what they hold.
 *
 * WHAT STOOD HERE WAS A WARNING THAT NO LONGER APPLIES, in both of its halves.
 * It said --hzp-red survived the repaint because a warning notice still used
 * its tint, and that reading --hzp-red would therefore put red markers beside a
 * purple button on one screen. There was no such notice -- the tint's only
 * consumer was the mortgage panel, which the repaint block already covers -- and
 * the --hzp-red* names now resolve to the accent themselves, so reading one can
 * no longer produce red here.
 *
 * The advice survives its reasoning: reach for the accent names anyway.
 * --hzp-red holding purple is a wart being tolerated because renaming it would
 * mean editing thirty-four call sites, not a pattern worth copying.
 *
 * And -- measured in the document rather than assumed -- THIS FILE LOADS BEFORE
 * THE THEME'S. A page @push('styles') runs before the layout component's own
 * pushes, so the head lists this sheet ahead of property.css and
 * property-pages.css. "Later in the cascade" is therefore not available as a
 * tie-breaker: an override that merely ties on specificity LOSES. That is why
 * the rules below that override a theme rule carry a leading .hzv they would not
 * otherwise need. The service page lost its inverted button to exactly this.
 *
 * All three of these show up only by measuring computed values in a browser.
 */

.hzv {
    --hzv-ink: var(--hzp-ink, #12141a);
    --hzv-body: var(--hzp-body, #3c414c);
    --hzv-muted: var(--hzp-muted, #6b7280);
    --hzv-line: var(--hzp-line, #e7e9ee);
    --hzv-line-strong: var(--hzp-line-strong, #d6dae1);
    --hzv-fill: var(--hzp-fill, #f7f8fa);

    --hzv-accent: var(--hzp-accent, var(--hagzi-primary, #0745D9));
    --hzv-accent-dark: var(--hzp-accent-dark, var(--hagzi-primary-dark, #0638B0));
    --hzv-wash: var(--hzp-accent-wash, #EEF3FF);
    --hzv-accent-line: var(--hzp-accent-line, #C4D4FA);

    --hzv-red: #c02434;
    --hzv-red-dark: #8f1a26;
    --hzv-red-tint: #fdf2f3;
    --hzv-red-line: #f0c8cd;

    --hzv-r: var(--hzp-radius, 10px);
    --hzv-r-sm: var(--hzp-radius-sm, 8px);

    --hzv-sh-1: 0 1px 2px rgba(18, 20, 26, 0.05), 0 2px 8px -4px rgba(18, 20, 26, 0.10);
    --hzv-sh-2: 0 2px 6px rgba(18, 20, 26, 0.06), 0 14px 30px -14px rgba(18, 20, 26, 0.18);

    /* Grey page, white cards -- the shape the Add Listing form uses, because this
       is the same kind of page. */
    min-height: 70vh;
    padding-block: 22px 60px;
    background: var(--hzv-fill);
    color: var(--hzv-ink);
}

/*
 * .hzp-field sets display: flex, which beats the hidden attribute's UA rule, so a
 * hidden field would stay on screen. The bedrooms row is hidden for a plot of
 * land and every error panel is hidden until it has something in it; both rely on
 * this.
 */
.hzv [hidden] {
    display: none !important;
}

/* Two columns need more than a single column's width. Matched to the Add Listing
   wizard's own 1180. */
.hzv-wrap {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.hzv-back {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 14px;
    color: var(--hzv-muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.hzv-back:hover {
    color: var(--hzv-accent);
}

.hzv-back svg {
    flex: none;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hzv-head {
    max-width: 62ch;
    margin: 0 0 22px;
}

.hzv-head__title {
    margin: 0;
    font-size: clamp(23px, 2.6vw, 32px);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -.018em;
}

.hzv-head__lead {
    margin: 9px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--hzv-muted);
}

/* ------------------------------------------------------------- the layout --- */

.hzv-layout {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/*
 * min-width: 0 is not decoration. Without it a wide child sets this column's
 * minimum to its own content width and pushes the grid past the viewport without
 * ever reporting overflow on itself -- the Add Listing wizard records the same
 * finding about the same grid.
 */
.hzv-main {
    min-width: 0;
}

/* --------------------------------------------------------------- the rail --- */

.hzv-rail {
    position: sticky;
    top: 16px;
    min-width: 0;
    padding: 14px;
    background: #ffffff;
    border: 1px solid var(--hzv-line);
    border-radius: var(--hzv-r);
    box-shadow: var(--hzv-sh-1);
}

.hzv-rail__title {
    margin: 0 0 10px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hzv-muted);
}

.hzv-steps {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hzv-step {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--hzv-r-sm);
    color: var(--hzv-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    text-align: start;
    cursor: pointer;
}

.hzv-step:hover:not(:disabled) {
    background: var(--hzv-fill);
    color: var(--hzv-ink);
}

.hzv-step:focus-visible {
    outline: 2px solid var(--hzv-accent);
    outline-offset: 1px;
}

/* Steps not yet reached: still listed, so the length of the flow is visible from
   the first screen, but plainly inert. The cars rail makes the same call. */
.hzv-step:disabled {
    color: #c8ccd4;
    cursor: default;
}

.hzv-step[aria-current="step"] {
    background: var(--hzv-wash);
    color: var(--hzv-ink);
    font-weight: 700;
}

.hzv-step__label {
    min-width: 0;
}

/* The marker. A ring by default -- the same radio shape the Add Listing rail
   uses -- filled with a tick once the step's required answers are genuinely
   answered. */
.hzv-dot {
    position: relative;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border: 2px solid var(--hzv-line-strong);
    border-radius: 50%;
}

.hzv-step[aria-current="step"] .hzv-dot {
    border-color: var(--hzv-accent);
    box-shadow: 0 0 0 3px var(--hzv-wash);
}

.hzv-step[data-hzv-state="done"] .hzv-dot {
    background: var(--hzv-accent);
    border-color: var(--hzv-accent);
}

/*
 * `left` rather than inset-inline-start on purpose. A tick is not a mirrored
 * glyph -- it reads the same way in Arabic -- so the shape stays put under
 * dir="rtl" instead of jumping to the other side of a 16px circle.
 */
.hzv-step[data-hzv-state="done"] .hzv-dot::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 0;
    width: 4px;
    height: 8px;
    border: 2px solid #ffffff;
    border-top: 0;
    border-left: 0;
    transform: rotate(42deg);
}

/* A step carrying a validation failure. The rail is the only place that can say
   WHERE the problem is without scrolling to it. */
.hzv-step[data-hzv-state="bad"] {
    color: var(--hzv-red-dark);
}

.hzv-step[data-hzv-state="bad"] .hzv-dot {
    background: var(--hzv-red-tint);
    border-color: var(--hzv-red);
    box-shadow: none;
}

.hzv-step[data-hzv-state="bad"] .hzv-dot::after {
    content: "!";
    position: absolute;
    left: -2px;
    right: -2px;
    top: -2px;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    color: var(--hzv-red-dark);
}

/* ------------------------------------------------------------- progress --- */

.hzv-progress {
    margin-top: 12px;
    padding: 0 8px;
}

.hzv-progress__track {
    display: block;
    height: 3px;
    margin-bottom: 8px;
    overflow: hidden;
    background: var(--hzv-line);
    border-radius: 999px;
}

.hzv-progress__fill {
    display: block;
    width: 25%;
    height: 100%;
    background: var(--hzv-accent);
    border-radius: 999px;
    transition: width .18s ease;
}

.hzv-progress__text {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--hzv-muted);
}

/* --------------------------------------------------------------- panels --- */

/*
 * One at a time, and the default is hidden. The markup gives step one .is-on, so
 * the first paint is correct without script having run -- and with script off the
 * whole layout is hidden anyway and the no-script panel takes over.
 */
.hzv-panel {
    display: none;
    scroll-margin-top: 16px;
}

.hzv-panel.is-on {
    display: block;
}

.hzv-card {
    padding: 22px 22px 24px;
    background: #ffffff;
    border: 1px solid var(--hzv-line);
    border-radius: var(--hzv-r);
    box-shadow: var(--hzv-sh-1);
}

.hzv-card__head {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--hzv-line);
}

.hzv-card__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 42px;
    height: 42px;
    background: var(--hzv-wash);
    border: 1px solid var(--hzv-accent-line);
    border-radius: 12px;
}

.hzv-card__icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--hzv-accent);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hzv-card__title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: -.012em;
}

/* The heading takes focus when a step opens, which should move the screen reader
   without drawing a box around a heading nobody clicked. */
.hzv-card__title:focus {
    outline: none;
}

.hzv-card__title:focus-visible {
    outline: 2px solid var(--hzv-accent);
    outline-offset: 3px;
}

.hzv-card__hint {
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--hzv-muted);
}

/* --------------------------------------------------------------- fields --- */

/* The row gap is deliberately much larger than the column gap. Every row on the
   first step is now a full-width pill row, and at 16px they read as one
   undifferentiated block of pills rather than five separate questions. */
.hzv-grid {
    display: grid;
    gap: 18px 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hzv-grid--pair {
    gap: 18px;
}

/*
    SEPARATORS BETWEEN THE QUESTIONS.

    The same treatment as the search page's More filters panel, which asks a
    stack of the same questions in the same shapes: a hairline between
    consecutive blocks, drawn as a top border on the FOLLOWING one. Drawing it
    that way rather than as a bottom border is what buys the two rules -- no
    line above District, and none under the last question hard against the
    card's edge or the footer.

    18px above the line and 18px below, matching the row gap, so the rhythm
    reads the same whether or not a rule falls between two questions. The gap
    was 30px while the space was the only thing separating them; 30 plus a line
    is more than the separation needs, and 18 is also what the panel next door
    settled on, so the two read as one system rather than two near-misses.

    Not the paired name and telephone row: those two sit side by side as one
    question, and a top border on the second would draw half a line up the
    middle of the row.
*/
.hzv-grid:not(.hzv-grid--pair) > .hzv-f + .hzv-f {
    padding-top: 18px;
    border-top: 1px solid var(--hzv-line);
}

/*
    One column for the questions, again as the panel does it, and for the reason
    it does it: a rule has to span the block it separates. Approximate size was
    the one question narrow enough to share a row, and a hairline above a
    half-width field is a hairline that stops halfway across the card.

    The box keeps its width by being capped rather than by being boxed into half
    a grid, so a four-digit area still gets a box sized for one instead of one
    sized for the card. 336px is the cap the panel puts on its own number
    inputs.
*/
.hzv-grid:not(.hzv-grid--pair) {
    grid-template-columns: minmax(0, 1fr);
}

.hzv-grid:not(.hzv-grid--pair) .hzv-input--unit {
    max-width: 336px;
}

.hzv-picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hzv-f .hzp-field__label {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hzv-body);
}

.hzv-opt {
    font-size: 11px;
    font-weight: 500;
    font-style: normal;
    color: var(--hzv-muted);
}

/* Three classes, so this beats a .hzp-page-scoped focus rule in a file that loads
   after this one. */
.hzv .hzv-f .hzp-input:focus-within,
.hzv .hzv-f .hzp-select:focus-within {
    border-color: var(--hzv-accent);
    box-shadow: 0 0 0 3px var(--hzv-wash);
}

/* A field the wizard is complaining about. Border and ring only -- the message
   itself is in the summary, where a screen reader will reach it. */
.hzv .hzv-f.is-bad .hzp-input,
.hzv .hzv-f.is-bad .hzp-select {
    border-color: var(--hzv-red);
    box-shadow: 0 0 0 3px rgba(192, 36, 52, 0.12);
}

.hzv-f.is-bad .hzv-seg {
    border-color: var(--hzv-red);
    box-shadow: 0 0 0 3px rgba(192, 36, 52, 0.12);
}

/* The unit inside the control, so the number and its unit read as one value.
   inset-inline-end, so it is on the left in Arabic. */
.hzv .hzv-input--unit .hzp-input__field {
    padding-inline-end: 42px;
}

.hzv-unit {
    position: absolute;
    inset-inline-end: 12px;
    font-size: 12.5px;
    color: var(--hzv-muted);
    pointer-events: none;
}

/* ---------------------------------------------- segmented radio pair --- */

.hzv-seg {
    display: grid;
    gap: 4px;
    max-width: 420px;
    padding: 4px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--hzv-fill);
    border: 1px solid var(--hzv-line-strong);
    border-radius: var(--hzv-r);
}

.hzv-seg__opt {
    position: relative;
    display: block;
}

/* The input stays in the accessibility tree and keeps a radio group's keyboard
   behaviour; only its own box leaves the layout. */
.hzv-seg__opt input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.hzv-seg__opt span {
    display: block;
    padding: 9px 12px;
    background: transparent;
    border-radius: 7px;
    color: var(--hzv-body);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.hzv-seg__opt span:hover {
    background: rgba(255, 255, 255, 0.75);
}

.hzv-seg__opt input:checked + span {
    background: var(--hzv-accent);
    color: #ffffff;
    box-shadow: 0 6px 14px -8px rgba(7, 69, 217, 0.7);
}

.hzv-seg__opt input:focus-visible + span {
    outline: 2px solid var(--hzv-accent);
    outline-offset: 2px;
}

/* ------------------------------------------------- pills over a select --- */

/*
 * District, property type and bedrooms are drawn twice: a row of pressable pills
 * for readers with script, the select underneath it for readers without. Exactly
 * one is ever shown. The select is the thing that posts, so the pills are pure
 * presentation and there is no second `name` in the payload.
 *
 * The pill treatment follows the cars channel's flow, which draws every choice
 * this way. Its chips are rectangles with a small radius; these are fully round,
 * matching the pill vocabulary the rest of this property theme already uses.
 */
/* Both kinds of control the partial can draw: the select behind the district,
   type, bedrooms and time pills, and the date field behind the day pills. Scoped
   to .hzv-picker, so the ordinary inputs on the same step -- the size, the name,
   the telephone number -- are untouched. */
html.hzv-js .hzv-picker .hzp-select,
html.hzv-js .hzv-picker .hzp-input,
html.hzv-js .hzv-picker .hzv-seg {
    display: none;
}

html:not(.hzv-js) .hzv-picker .hzv-pills {
    display: none;
}

/* Full width: nine districts wrap to two or three rows and have nowhere to do it
   in half a column. */
.hzv-picker {
    grid-column: 1 / -1;
}

/* The block heading above already names this row, so the label is for the
   accessibility tree only -- it labels both the group and the control beneath it,
   which is why it is not simply removed. */
.hzv-lbl--quiet {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.hzv-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hzv-pill {
    padding: 9px 15px;
    background: #ffffff;
    border: 1px solid var(--hzv-line-strong);
    border-radius: 999px;
    color: var(--hzv-body);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.hzv-pill:hover {
    background: var(--hzv-wash);
    border-color: var(--hzv-accent-line);
}

.hzv-pill[aria-pressed="true"] {
    background: var(--hzv-accent);
    border-color: var(--hzv-accent);
    color: #ffffff;
    box-shadow: 0 6px 14px -8px rgba(7, 69, 217, 0.7);
}

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

/* A group the wizard is complaining about. The sentence is in the summary; this
   only says which row it is about. */
.hzv-f.is-bad .hzv-pill {
    border-color: var(--hzv-red-line);
}

/* An icon beside the label, for the times of day. The icon inherits the pill's
   colour, so it goes white along with the text when the pill is chosen. */
.hzv-pill--icon {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.hzv-pill--icon svg {
    width: 15px;
    height: 15px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------- the telephone number --- */

/*
 * The country code outside the field, as it is on the cars form. A span rather
 * than a second control: every number this will be given is Jordanian.
 */
.hzv-tel {
    display: flex;
    align-items: stretch;
}

.hzv-tel__code {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--hzv-fill);
    border: 1px solid var(--hzv-line-strong);
    border-start-start-radius: var(--hzv-r);
    border-end-start-radius: var(--hzv-r);
    border-inline-end: 0;
    color: var(--hzv-body);
    font-size: 14px;
    font-weight: 600;
    /* Read left to right in Arabic too, like the number it belongs to. */
    direction: ltr;
    white-space: nowrap;
}

.hzv-tel__box {
    flex: 1 1 auto;
    min-width: 0;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

/* ------------------------------------- two blocks inside one step --- */

/*
 * The merged step carries the contact pair, the day and the time of day, each
 * section under its own heading -- the cars flow's `sfm-form__block`. Space
 * rather than a rule between them, which is what the reference does: the headings
 * are strong enough to separate the sections on their own.
 */
/*
    The second step's sections, separated the same way as the first step's
    questions. Both of these follow something -- the name and telephone row,
    then the availability question -- so both take a rule, and the last one
    still has nothing under it.
*/
.hzv-block {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--hzv-line);
}

.hzv-block__title {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hzv-muted);
}

/* A question, not a section label, so it is set as one. */
.hzv-block__title--big {
    margin-bottom: 4px;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--hzv-ink);
}

.hzv-block__lead {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--hzv-muted);
}

/*
 * Why the telephone number is being asked for.
 *
 * Aligned to the end of the row rather than the start, so it sits under the
 * button it belongs to -- Continue is at the end of the nav, and in Arabic both
 * of them move to the other side together.
 */
.hzv-why {
    margin: 10px 0 0 auto;
    margin-inline: auto 0;
    max-width: 46ch;
    font-size: 12.5px;
    line-height: 1.6;
    text-align: end;
    color: var(--hzv-muted);
}

@media (max-width: 640px) {
    .hzv-why {
        margin-inline: 0;
        max-width: none;
        text-align: start;
    }
}

/* ------------------------------------------------------ the last step --- */

.hzv-outhead {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hzv-muted);
}

/*
 * Readonly and selectable. It is the honesty of the whole design -- nobody has
 * to trust a description of the message -- and it is the fallback if the handoff
 * goes nowhere, because it can be copied from here.
 */
.hzv-preview {
    display: block;
    width: 100%;
    padding: 15px 16px;
    background: var(--hzv-fill);
    border: 1px solid var(--hzv-line);
    border-radius: var(--hzv-r);
    color: var(--hzv-body);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.65;
    resize: vertical;
}

.hzv-preview:focus-visible {
    outline: 2px solid var(--hzv-accent);
    outline-offset: 1px;
}

.hzv-keep {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 14px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--hzv-muted);
}

.hzv-keep svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    fill: none;
    stroke: var(--hzv-accent);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hzv-send {
    margin-top: 16px;
    padding: 20px 22px 22px;
    background: #ffffff;
    border: 1px solid var(--hzv-accent-line);
    border-radius: var(--hzv-r);
    box-shadow: var(--hzv-sh-2);
}

.hzv .hzv-send__go {
    width: 100%;
}

.hzv-req {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--hzv-body);
}

.hzv-alt {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--hzv-muted);
}

.hzv-alt a {
    color: var(--hzv-accent);
    font-weight: 600;
    text-decoration: none;
}

.hzv-alt a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------- errors --- */

.hzv-errs {
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--hzv-red-tint);
    border: 1px solid var(--hzv-red-line);
    border-inline-start: 3px solid var(--hzv-red);
    border-radius: var(--hzv-r);
}

.hzv-errs:focus-visible {
    outline: 2px solid var(--hzv-red);
    outline-offset: 2px;
}

.hzv-errs__head {
    margin: 0 0 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--hzv-red-dark);
}

.hzv-errs ul {
    margin: 0;
    padding-inline-start: 18px;
}

.hzv-errs li {
    font-size: 13px;
    line-height: 1.55;
    color: var(--hzv-red-dark);
}

/* ------------------------------------------------------------ back/next --- */

.hzv-nav {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
}

/* Holds the empty side so the single button on step one stays at the end edge
   rather than sliding to the start. */
.hzv-nav__gap {
    display: block;
}

.hzv .hzv-btn {
    height: 44px;
    padding: 0 18px;
    font-family: inherit;
    font-size: 14.5px;
    border-radius: var(--hzv-r);
}

.hzv .hzv-btn svg {
    width: 17px;
    height: 17px;
}

/* ---------------------------------------------------------- without JS --- */

/*
 * The form is shown either way now.
 *
 * This used to hide `.hzv-layout` outright and let a prose panel take over,
 * because there was nothing to submit to and a form that could not compose a
 * WhatsApp message would have been a dozen controls that only looked like they
 * worked. There is a real endpoint behind them now, so with scripting off every
 * panel is open and the one Submit at the bottom posts the lot.
 *
 * What the no-script state hides is only what needs script to mean anything: the
 * step rail, the per-step Back and Continue buttons, the panels' error boxes, and
 * the review box the script writes -- which would otherwise sit there holding its
 * "fill in the earlier steps" placeholder for good.
 *
 * `html:not(.hzv-js)` rather than a <noscript><style>: the class is set by a
 * one-liner in <head> before the body is parsed, so neither state ever flashes,
 * and one mechanism is easier to reason about than two.
 */
html:not(.hzv-js) .hzv-panel {
    display: block;
}

html:not(.hzv-js) .hzv-rail,
html:not(.hzv-js) .hzv-nav,
html:not(.hzv-js) [data-hzv-errs],
html:not(.hzv-js) .hzv-outhead,
html:not(.hzv-js) .hzv-preview {
    display: none;
}

/* One column: with the rail gone a 248px empty gutter would sit beside every
   panel. */
html:not(.hzv-js) .hzv-layout {
    grid-template-columns: minmax(0, 1fr);
}

html.hzv-js .hzv-nojs {
    display: none;
}

/* ------------------------------------------- what the server sent back --- */

/*
 * The server's error block, above the form rather than inside a panel.
 *
 * It borrows `.hzv-errs` whole, so a rejection from the server looks exactly
 * like a rejection from the script. The only difference is who decides it is
 * visible: the panels' boxes carry the `hidden` attribute and the script clears
 * it, while this one is only rendered when there is something to say, so it needs
 * no unhiding -- just the margin the panels get from the control above them.
 */
.hzv-errs--server {
    margin-top: 0;
    margin-bottom: 18px;
}

.hzv-resumed {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid var(--hzv-accent-line);
    border-radius: var(--hzv-r-sm, 10px);
    background: var(--hzv-wash, #EEF3FF);
}

.hzv-resumed__title {
    margin: 0 0 4px;
    color: var(--hzv-ink);
    font-size: 14px;
    font-weight: 700;
}

.hzv-resumed__text {
    margin: 0;
    color: var(--hzv-body);
    font-size: 13px;
    line-height: 1.6;
}

.hzv-nojs {
    max-width: 760px;
}

.hzv-nojs__title {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.24;
}

.hzv-nojs__text {
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.62;
    color: var(--hzv-muted);
}

.hzv-nojs__acts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.hzv-nojs__listhead {
    margin: 0 0 10px;
    padding-top: 20px;
    border-top: 1px solid var(--hzv-line);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hzv-muted);
}

/* The same three groups the wizard's steps use, so the two versions of the page
   ask the same questions in the same order. */
.hzv-nojs__list {
    display: grid;
    gap: 14px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    counter-reset: hzvq;
}

.hzv-nojs__list li {
    display: grid;
    gap: 3px;
    padding-inline-start: 34px;
    position: relative;
}

.hzv-nojs__list li::before {
    counter-increment: hzvq;
    content: counter(hzvq);
    position: absolute;
    inset-inline-start: 0;
    top: 1px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    background: var(--hzv-wash);
    border: 1px solid var(--hzv-accent-line);
    border-radius: 8px;
    color: var(--hzv-accent);
    font-size: 12px;
    font-weight: 800;
}

.hzv-nojs__list strong {
    font-size: 14px;
    font-weight: 700;
}

.hzv-nojs__list span {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--hzv-muted);
}

/* ------------------------------------------------------------------ RTL --- */

/*
 * Most of the mirroring is done by the logical properties above --
 * inset-inline-end, padding-inline-start, border-inline-start, text-align: start.
 * What is left is the pair of directional arrows on the navigation buttons, which
 * DO mirror: a back arrow points towards the start edge, which is the right in
 * Arabic. The tick inside a completed marker does not mirror and is positioned
 * physically for that reason, above.
 */
[dir="rtl"] .hzv-back svg,
[dir="rtl"] .hzv-nav .hzv-btn svg {
    transform: scaleX(-1);
}

/* The number stays left-to-right inside an Arabic sentence, which is what the
   rest of the site does with it. */
[dir="rtl"] .hzv-alt a {
    unicode-bidi: isolate;
}

/* --------------------------------------------------------------- narrow --- */

@media (max-width: 1023px) {
    /*
     * The rail goes above the panels and turns into a horizontal strip -- the
     * same move the Add Listing wizard makes at the same kind of width. It stops
     * being sticky, because a sticky bar plus the site header eats a phone's
     * screen.
     */
    .hzv-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    html.hzv-js .hzv-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .hzv-rail {
        position: static;
    }

    .hzv-steps {
        flex-direction: row;
        gap: 4px;
        overflow-x: auto;
        /* Only the strip scrolls, and only when it has to. */
        scrollbar-width: thin;
    }

    .hzv-steps > li {
        flex: 1 1 0;
        min-width: 0;
    }

    .hzv-step {
        flex-direction: column;
        gap: 6px;
        align-items: center;
        padding: 9px 6px;
        font-size: 12px;
        text-align: center;
    }

    .hzv-step__label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    .hzv-progress {
        margin-top: 10px;
        padding: 0;
    }
}

@media (max-width: 719px) {
    .hzv {
        padding-block: 16px 44px;
    }

    .hzv-wrap {
        padding: 0 16px;
    }

    /* One column of fields: two 40px controls side by side in 342px of
       gutter-to-gutter space wrap their labels mid-word. */
    .hzv-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hzv-card {
        padding: 18px 16px 20px;
    }

    .hzv-send {
        padding: 16px;
    }

    .hzv-seg {
        max-width: none;
    }

    /* Both navigation buttons share the row evenly rather than one of them
       shrinking to its text. */
    .hzv-nav {
        gap: 8px;
    }

    .hzv .hzv-nav .hzv-btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 12px;
    }

    .hzv-nav__gap {
        display: none;
    }

    .hzv-nojs__acts .hzp-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hzv-progress__fill,
    .hzv-seg__opt span {
        transition: none;
    }
}

/* City and neighbourhood are standard dropdowns, paired on wider screens. */
.hzv .hzv-location-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.hzv .hzv-location-fields .hzv-f { min-width: 0; gap: 10px; }
.hzv .hzv-location-fields .hzp-select { width: 100%; min-width: 0; }
.hzv .hzv-location-fields .hzp-select__el { width: 100%; min-width: 0; text-overflow: ellipsis; }
.hzv .hzv-location-fields .hzp-select:has(select:disabled) { background: #f6f7fa; color: #737d8e; }
.hzv .hzv-location-fields + .hzv-f { padding-top: 18px; border-top: 1px solid var(--hzv-line); }
@media (max-width: 639.98px) {
    .hzv .hzv-location-fields { grid-template-columns: minmax(0,1fr); }
}