/* ===================================================================
   RENTALS HUB — LIST-AN-ITEM WIZARD (wizard.css)
   Pixel truth: scratchpad/rental-design-zip/rental-hub/List an Item.dc.html
   Page-scoped styles only — shared shell/tokens live in app.css (frozen).
   =================================================================== */

/* ---- Frame: header / scroller / footer column ------------------- */
.wz-frame {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    background: #fff;
    overflow: hidden;
}

/* ---- Header + progress ------------------------------------------ */
.wz-header {
    flex-shrink: 0;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #f0f2f4;
    background: #fff;
}
.wz-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}
.wz-circle-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: #f1f3f5;
    color: var(--vm-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
a.wz-circle-btn { color: var(--vm-text-2); font-size: 14px; }
.wz-steplabel {
    font-family: var(--vm-font-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--vm-muted);
}
.wz-track {
    height: 5px;
    border-radius: 999px;
    background: var(--vm-border-2);
    overflow: hidden;
}
.wz-bar {
    height: 100%;
    width: 20%;
    background: var(--vm-primary);
    border-radius: 999px;
    transition: width .3s cubic-bezier(.2, .8, .2, 1);
}

/* ---- Scroll area ------------------------------------------------- */
.wz-scroller {
    flex: 1;
    overflow-y: auto;
    padding: 20px 20px 16px;
}
.wz-scroller h1 {
    margin: 0 0 6px;
    font-family: var(--vm-font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
}
.wz-sub {
    margin: 0 0 18px;
    font-size: 13.5px;
    color: var(--vm-muted);
    line-height: 1.4;
}
.wz-h2 {
    margin: 0 0 6px;
    font-family: var(--vm-font-display);
    font-weight: 700;
    font-size: 16px;
}
.wz-sub--sm { font-size: 12.5px; margin-bottom: 13px; }

/* ---- Step 1: category tiles -------------------------------------- */
.wz-cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}
.wz-cat-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 13px;
    border-radius: 14px;
    border: 1.5px solid var(--vm-border);
    background: #fff;
    text-align: left;
    transition: transform .12s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.wz-cat-tile .wz-cat-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--vm-tint);
    color: var(--vm-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}
.wz-cat-tile span:last-child { font-size: 13.5px; font-weight: 600; }
.wz-cat-tile.is-selected,
.wz-radio.is-selected,
.wz-mode.is-selected {
    border-color: var(--vm-primary);
    background: var(--vm-tint-soft);
}

/* Owner-review fix: the base is-selected state (1.5px border + #f4fbf3 bg)
   was nearly invisible on a phone — taps read as "nothing happened". The
   category tile now flips HARD: solid green icon chip, tinted bg, a double
   border ring, and a corner check badge. */
.wz-cat-tile.is-selected {
    background: var(--vm-tint);
    box-shadow: 0 0 0 1.5px var(--vm-primary) inset;
}
.wz-cat-tile.is-selected .wz-cat-icon {
    background: var(--vm-primary);
    color: #fff;
}
.wz-cat-tile.is-selected span:last-child {
    font-weight: 700;
    color: var(--vm-primary-dark);
}
.wz-cat-tile .wz-cat-check {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--vm-primary);
    border: 2px solid #fff;
    color: #fff;
    font-size: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(26, 137, 23, .35);
}
.wz-cat-tile.is-selected .wz-cat-check { display: flex; }

/* Instant touch feedback — the tap must visibly respond even before the
   selected state paints. */
.wz-cat-tile:active,
.wz-radio:active,
.wz-mode:active { transform: scale(.965); }

/* Blocked-Continue inline error (shown next to the toast so the reason is
   impossible to miss) + attention shake on the category grid. */
.wz-inline-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 11px 13px;
    border-radius: 12px;
    background: #fdecec;
    border: 1px solid #f5c6c6;
    color: var(--vm-red);
    font-size: 12.5px;
    font-weight: 600;
}
.wz-inline-error i { font-size: 13px; flex-shrink: 0; }
.wz-inline-error[hidden] { display: none !important; }
@keyframes wzShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.wz-cat-grid.is-shake { animation: wzShake .4s ease; }

/* ---- Step 2: lister-type radio cards + mode cards ----------------- */
.wz-radio-col {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 26px;
}
.wz-radio {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px;
    border-radius: 14px;
    border: 1.5px solid var(--vm-border);
    background: #fff;
    text-align: left;
}
.wz-radio .wz-radio-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #f1f3f5;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
.wz-radio .wz-radio-text { flex: 1; }
.wz-radio .wz-radio-title { display: block; font-size: 14.5px; font-weight: 700; }
.wz-radio .wz-radio-sub { display: block; font-size: 12px; color: var(--vm-muted-2); margin-top: 1px; }
.wz-radio [data-check] {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 2px solid #d7dbdf;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wz-radio [data-check] i { color: #fff; font-size: 11px; display: none; }
.wz-radio.is-selected [data-check] {
    border-color: var(--vm-primary);
    background: var(--vm-primary);
}
.wz-radio.is-selected [data-check] i { display: block; }

.wz-mode-row { display: flex; gap: 11px; }
.wz-mode {
    flex: 1;
    padding: 14px 12px;
    border-radius: 14px;
    border: 1.5px solid var(--vm-border);
    background: #fff;
    text-align: left;
}
.wz-mode > i { color: var(--vm-primary); font-size: 15px; }
.wz-mode .wz-mode-title { display: block; font-size: 13.5px; font-weight: 700; margin-top: 8px; }
.wz-mode .wz-mode-sub { display: block; font-size: 11.5px; color: var(--vm-muted-2); margin-top: 2px; line-height: 1.35; }

/* ---- Step 3: photos + video --------------------------------------- */
.wz-dropzone {
    width: 100%;
    border: 2px dashed #cdd3d8;
    border-radius: 16px;
    background: #fafbfc;
    padding: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
}
.wz-dropzone .wz-drop-icon {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: var(--vm-tint);
    color: var(--vm-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.wz-dropzone .wz-drop-title { font-size: 14px; font-weight: 700; color: var(--vm-text); }
.wz-dropzone .wz-drop-sub { font-size: 11.5px; color: var(--vm-muted-2); }

.wz-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-bottom: 22px;
}
.wz-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
}
.wz-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wz-thumb .wz-cover-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 8.5px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, .6);
    border-radius: 5px;
    padding: 2px 6px;
}
.wz-thumb .wz-thumb-x {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wz-thumb-add {
    aspect-ratio: 1;
    border-radius: 12px;
    border: 1.5px solid var(--vm-border);
    background: #fafbfc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c2c8ce;
    font-size: 20px;
}

.wz-video-row {
    width: 100%;
    border: 1.5px solid var(--vm-border);
    border-radius: 16px;
    background: #fff;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 13px;
    text-align: left;
}
.wz-video-row .wz-video-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--vm-tint);
    color: var(--vm-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
.wz-video-row .wz-video-text { flex: 1; min-width: 0; }
.wz-video-row .wz-video-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wz-video-row .wz-video-sub { display: block; font-size: 11.5px; color: var(--vm-muted-2); margin-top: 1px; }
.wz-video-row .wz-video-cta {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--vm-primary-dark);
    background: var(--vm-tint);
    border-radius: 999px;
    padding: 5px 11px;
    white-space: nowrap;
    flex-shrink: 0;
}
.wz-video-row .wz-video-remove {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #f1f3f5;
    color: var(--vm-muted);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---- Determinate progress panel ------------------------------------
   Shrinking a clip on step 3, then the uploads on step 5. .wz-bar above
   is the STEP counter and already sits at 100% by the time anything
   uploads, so long work needs a bar of its own. One element, mounted by
   list-item.js wherever the work is happening. */
.wz-prog {
    display: block;
    border: 1.5px solid var(--vm-border);
    border-radius: 16px;
    background: #fafbfc;
    padding: 14px 15px;
    margin-top: 12px;
}
/* Author `display` beats the UA's [hidden] rule — the house footgun. */
.wz-prog[hidden] { display: none !important; }
.wz-prog .wz-prog-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.wz-prog .wz-prog-label {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
}
.wz-prog .wz-prog-cancel {
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--vm-text-2);
    background: #f1f3f5;
    border-radius: 999px;
    padding: 6px 13px;
}
.wz-prog .wz-prog-track {
    height: 6px;
    border-radius: 999px;
    background: var(--vm-border-2);
    overflow: hidden;
}
.wz-prog .wz-prog-bar {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--vm-primary);
    transition: width .2s linear;
}
.wz-prog .wz-prog-note {
    display: block;
    margin-top: 7px;
    font-size: 11.5px;
    color: var(--vm-muted-2);
    /* the byte counter must not jitter as the digits change */
    font-variant-numeric: tabular-nums;
}

/* ---- Step 4: form fields ------------------------------------------ */
.wz-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 7px;
}
.wz-input,
.wz-textarea,
.wz-select {
    width: 100%;
    border: 1.5px solid var(--vm-border);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--vm-text);
    outline: none;
    background: #fff;
    margin-bottom: 18px;
}
.wz-textarea { resize: none; line-height: 1.5; }
.wz-select-wrap { position: relative; margin-bottom: 20px; }
.wz-select-wrap .wz-select { appearance: none; margin-bottom: 0; }
.wz-select-wrap i {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vm-muted-2);
    font-size: 12px;
    pointer-events: none;
}
.wz-block { border-top: 1px solid #f0f2f4; padding-top: 20px; }
.wz-money {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--vm-border);
    border-radius: 12px;
    padding: 0 14px;
    margin-bottom: 18px;
    background: #fff;
}
.wz-money .wz-money-cur { font-size: 15px; font-weight: 700; color: var(--vm-muted); }
.wz-money input {
    flex: 1;
    border: none;
    outline: none;
    padding: 12px 10px;
    font-size: 14px;
    color: var(--vm-text);
    min-width: 0;
    background: transparent;
}
.wz-money .wz-money-unit { font-size: 13px; color: var(--vm-muted-2); }

/* Key facts 2x2 grid */
.wz-facts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    margin-bottom: 18px;
}
.wz-facts-grid .wz-fact label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--vm-muted);
    margin-bottom: 5px;
}
.wz-facts-grid .wz-fact input {
    width: 100%;
    border: 1.5px solid var(--vm-border);
    border-radius: 12px;
    padding: 11px 12px;
    font-size: 14px;
    outline: none;
}

/* Tag / chip-entry input */
.wz-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    border: 1.5px solid var(--vm-border);
    border-radius: 12px;
    padding: 8px 10px;
    margin-bottom: 18px;
    background: #fff;
    cursor: text;
}
.wz-tags [data-tag-chips] { display: contents; }
.wz-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--vm-tint);
    color: var(--vm-primary-dark);
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    padding: 5px 6px 5px 11px;
    white-space: nowrap;
}
.wz-tag-chip button {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: rgba(20, 104, 18, .12);
    color: var(--vm-primary-dark);
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wz-tags [data-tag-entry] {
    flex: 1;
    min-width: 130px;
    border: none;
    outline: none;
    padding: 5px 4px;
    font-size: 13px;
    color: var(--vm-text);
    background: transparent;
}

/* ---- Step 5: review ------------------------------------------------ */
.wz-review-card {
    border: 1px solid var(--vm-border-2);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    margin-bottom: 18px;
    background: #fff;
}
.wz-review-media { position: relative; height: 150px; }
.wz-review-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wz-review-media .vm-cover-ph { width: 100%; height: 100%; }
.wz-review-media .wz-review-video-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    border-radius: 999px;
    padding: 4px 10px;
}
.wz-review-media .wz-review-video-badge i { font-size: 9px; }
.wz-review-body { padding: 13px 14px; }
.wz-review-pills { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.wz-pill-cat {
    font-size: 10.5px;
    font-weight: 600;
    color: #4b5563;
    background: #f1f3f5;
    border-radius: 999px;
    padding: 3px 9px;
}
.wz-pill-by {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--vm-primary-dark);
    background: var(--vm-tint);
    border-radius: 999px;
    padding: 3px 9px;
}
.wz-review-body h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.wz-review-loc { font-size: 12px; color: var(--vm-muted); margin-bottom: 9px; }
.wz-review-loc i { font-size: 11px; }
.wz-review-price { display: flex; align-items: baseline; gap: 4px; }
.wz-review-price .wz-price-big {
    font-family: var(--vm-font-display);
    font-weight: 700;
    font-size: 19px;
}
.wz-review-price .wz-price-sub { font-size: 12px; color: var(--vm-muted-2); }

.wz-checklist { display: flex; flex-direction: column; gap: 11px; }
.wz-checklist .wz-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--vm-text-2);
}
.wz-checklist .wz-check-row i { color: var(--vm-primary); font-size: 15px; }
.wz-checklist .wz-check-row.is-warn i { color: var(--vm-amber); }

/* ---- Success screen ------------------------------------------------ */
.wz-success {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 30px;
}
.wz-success .wz-success-icon {
    width: 88px;
    height: 88px;
    border-radius: 999px;
    background: var(--vm-tint);
    color: var(--vm-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin-bottom: 22px;
}
.wz-success h1 {
    margin: 0 0 8px;
    font-family: var(--vm-font-display);
    font-weight: 700;
    font-size: 23px;
}
.wz-success p { margin: 0; font-size: 14px; color: var(--vm-muted); line-height: 1.5; }
/* Shown only when the listing saved but its optional video tour did not. */
.wz-success .wz-success-note {
    display: flex;
    gap: 9px;
    margin-top: 20px;
    padding: 13px 15px;
    border-radius: 12px;
    background: var(--vm-amber-bg);
    color: var(--vm-amber-text);
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
}
.wz-success .wz-success-note i { font-size: 13px; margin-top: 2px; flex-shrink: 0; }

/* ---- Footer --------------------------------------------------------- */
.wz-footer {
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid #f0f2f4;
    padding: 12px 16px 14px;
    box-shadow: 0 -3px 16px rgba(0, 0, 0, .05);
}
.wz-next {
    width: 100%;
    padding: 15px;
    border-radius: 14px;
    background: var(--vm-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(26, 137, 23, .3);
}
.wz-next:disabled { opacity: .7; cursor: default; }

/* ---- Toasts (page-local; candidate for a shared app.css block) ----- */
.vm-toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 92px;
    z-index: 120;
    max-width: min(420px, calc(100vw - 40px));
    background: #111827;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 11px 18px;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
    text-align: center;
}
.vm-toast.is-visible { opacity: 1; }
.vm-toast--success { background: var(--vm-primary-dark); }
.vm-toast--error { background: var(--vm-red); }
.vm-toast--info { background: #374151; }


/* ===================================================================
   DESKTOP LAYER — >= 901px
   ===================================================================
   Pixel truth: scratchpad/desktop/.../designs/List an Item Desktop.dc.html
   Contract: see the header comment of css/rentals/desktop.css.

   Everything below lives inside a min-width query, so the shipped <=900px
   wizard is byte-frozen. desktop.css loads AFTER this file, so any rule
   here that has to beat one of its class-level rules (notably
   `.vm-dt-only { display: revert }` at >=901) is scoped with #vm-list to
   win on specificity rather than order.

   THE 100vh COLLISION
   -------------------
   .wz-frame is a fixed-height app frame (height:100vh, overflow:hidden,
   internal scroller). A sticky in-flow header on top of that would push
   the document 72px past the viewport, and overflow:hidden on an ancestor
   silently kills position:sticky on the rail and the preview. At desktop
   the frame therefore stops being a frame: height:auto + overflow:visible
   + min-height:calc(100vh - header), and the DOCUMENT scrolls.

   DELIBERATE OMISSIONS from the design (RENTALS_HUB.md 2.7):
     - the preview card's "Video · 0:42" duration  -> no duration is known
       client-side; the badge reads "Video tour" instead
     - step 5's "You approve every renter" panel   -> its body copy promises
       the renter's rating and past rentals in the request, and neither is
       surfaced anywhere in the product
     - the design's "Neighbourhood" field          -> no such column
   =================================================================== */

@media (min-width: 901px) {

/* --- compact wizard header ---------------------------------------
   Not the standard site header (design decision): logo, the free-to-list
   pill, help and close. .vm-dt-header / .vm-dt-header-in / .vm-dt-brand*
   come from desktop.css. */
.wz-dt-header .vm-dt-header-in { gap: 14px; }
.wz-dt-freepill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vm-primary-dark);
    background: var(--vm-tint);
    border: 1px solid #cfe9cd;
    padding: 7px 13px;
    border-radius: 999px;
    white-space: nowrap;
}
.wz-dt-freepill i { font-size: 11px; }
.wz-dt-headright {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    flex-shrink: 0;
}
.wz-dt-help {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--vm-dt-ink-2);
    white-space: nowrap;
    text-decoration: none;
}
.wz-dt-help:hover { color: var(--vm-primary-dark); }

/* --- shell -------------------------------------------------------
   Two columns here; the preview column is added at >=1240 below. The
   .vm-dt-wrap values are inlined rather than adding the class, because
   that class's `padding: 0 28px` would land later in the cascade and
   wipe the vertical padding. */
#vm-list.wz-frame {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 32px;
    row-gap: 0;
    /* align-content:start is load-bearing. min-height gives the grid more
       height than its rows need on a short step, and the default (stretch)
       would spread that slack INTO the rows, opening a hole under the page
       head and inflating the card. */
    align-content: start;
    /* NOT align-items:start. The rail and the preview span rows 2-3, so they
       set the row heights; a start-aligned form card would then float above
       the action bar with a hole between them. The card stretches instead and
       the two rows read as one continuous card. The rail and the preview take
       align-self:start themselves so they stay content-sized and can slide. */
    height: auto;
    /* -1px for the header's bottom border: --vm-dt-header-h is the 72px
       content height only, so without it a short step overflows by a pixel. */
    min-height: calc(100vh - var(--vm-dt-header-h) - 1px);
    overflow: visible;
    background: transparent;
    box-shadow: none;
    max-width: var(--vm-dt-wrap);
    margin: 0 auto;
    padding: 34px var(--vm-dt-pad) 56px;
}

/* The mobile top bar (back / step label / progress track) is replaced by
   the compact header, the rail and the in-card action bar. */
#vm-list .wz-header { display: none; }

#vm-list .wz-dt-pagehead {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 26px;
}
.wz-dt-pagetitle {
    margin: 0 0 8px;
    font-family: var(--vm-font-display);
    font-weight: 700;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.14;
    letter-spacing: -.8px;
    color: var(--vm-text);
}
.wz-dt-pagesub {
    margin: 0;
    max-width: 640px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--vm-muted);
}

/* --- step rail ---------------------------------------------------- */
#vm-list .wz-dt-rail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    grid-column: 1;
    grid-row: 2 / span 2;
    align-self: start;
    position: sticky;
    /* The house sticky offset: header height + 24px, same as the listing
       booking card, the account and bookings rails and the safety contents
       rail. This was a hard-coded 104px, 8px out of step with all five and
       not derived from the header token, so a header-height change would
       have silently desynced the wizard from every other page. */
    top: calc(var(--vm-dt-header-h) + 24px);
}
.wz-rail-step {
    display: flex;
    align-items: center;
    gap: 13px;
    text-align: left;
    padding: 12px 14px;
    border-radius: 14px;
    background: transparent;
    transition: background .18s ease;
}
.wz-rail-step:hover { background: #f1f3f5; }
.wz-rail-num {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 999px;
    background: #f1f3f5;
    color: var(--vm-muted-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--vm-font-display);
    font-weight: 700;
    font-size: 13px;
}
.wz-rail-num i { display: none; font-size: 12px; }
.wz-rail-text { min-width: 0; }
.wz-rail-title {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--vm-text-2);
}
.wz-rail-sub {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--vm-muted-2);
}
/* completed first, active second: the current step is never "done" */
.wz-rail-step.is-done .wz-rail-num { background: #cfe9cd; color: var(--vm-primary-dark); }
.wz-rail-step.is-done .wz-rail-num i { display: block; }
.wz-rail-step.is-done .wz-rail-num b { display: none; }
.wz-rail-step.is-active,
.wz-rail-step.is-active:hover { background: var(--vm-tint); }
.wz-rail-step.is-active .wz-rail-num { background: var(--vm-primary); color: #fff; }
.wz-rail-step.is-active .wz-rail-num i { display: none; }
.wz-rail-step.is-active .wz-rail-num b { display: block; }
.wz-rail-step.is-active .wz-rail-title { font-weight: 700; color: var(--vm-primary-dark); }
.wz-rail-step.is-active .wz-rail-sub { color: var(--vm-muted); }

.wz-rail-note {
    margin-top: 18px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--vm-border-2);
    border-radius: 16px;
}
.wz-rail-note-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px;
    font-size: 12.5px;
    color: var(--vm-text);
}
.wz-rail-note-head i { color: var(--vm-primary); font-size: 14px; }
.wz-rail-note-body {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--vm-muted);
}
.wz-rail-note-link { font-size: 12.5px; font-weight: 600; color: var(--vm-primary); }
.wz-rail-note-link:hover { color: var(--vm-primary-dark); }
.wz-rail-note-link i { font-size: 10px; }

/* --- form card ---------------------------------------------------
   The scroller and the action bar are two grid rows, but they read as
   ONE card: row-gap 0, joined borders, and clip-path trimming each
   shadow at the seam so no line shows where they meet. */
#vm-list .wz-scroller {
    grid-column: 2;
    grid-row: 2;
    flex: none;
    overflow: visible;
    background: #fff;
    border: 1px solid var(--vm-border-2);
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    padding: 32px 34px 26px;
    box-shadow: var(--vm-dt-shadow-raised);
    clip-path: inset(-40px -40px 0 -40px);
}
#vm-list .wz-footer {
    grid-column: 2;
    grid-row: 3;
    align-self: start;   /* row 3 can be inflated by the spanning rail/preview */
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--vm-border-2);
    border-top: 1px solid #f0f2f4;
    border-radius: 0 0 18px 18px;
    padding: 22px 34px 30px;
    box-shadow: var(--vm-dt-shadow-raised);
    clip-path: inset(0 -40px -40px -40px);
}
#vm-list .wz-scroller h1 { font-size: 22px; margin-bottom: 7px; }
#vm-list .wz-sub { font-size: 14px; margin-bottom: 22px; }
#vm-list .wz-h2 { font-size: 17px; }

/* --- action bar --------------------------------------------------- */
#vm-list .wz-dt-back {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--vm-text-2);
    background: #fff;
    border: 1px solid #e0e3e6;
    padding: 13px 20px;
    border-radius: 14px;
    transition: background .18s ease, border-color .18s ease;
}
#vm-list .wz-dt-back:hover { background: var(--vm-canvas); border-color: #cdd3d8; }
#vm-list .wz-dt-back i { font-size: 12px; }
#vm-list .wz-dt-steplabel {
    display: block;
    margin-left: auto;
    font-size: 13px;
    color: var(--vm-muted-2);
}
#vm-list .wz-next {
    width: auto;
    padding: 14px 30px;
    font-size: 15px;
}

/* --- step 1: 3-up category grid ----------------------------------- */
#vm-list .wz-cat-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
#vm-list .wz-cat-tile { padding: 17px 15px; gap: 12px; }
#vm-list .wz-cat-tile .wz-cat-icon { width: 40px; height: 40px; font-size: 17px; }
#vm-list .wz-cat-tile span:last-child { font-size: 14px; }

/* --- step 2: 3-up lister cards, stacked like the design ----------- */
#vm-list .wz-radio-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 30px;
}
#vm-list .wz-radio {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px;
}
#vm-list .wz-radio .wz-radio-icon { width: 44px; height: 44px; font-size: 18px; }
#vm-list .wz-radio .wz-radio-text { flex: none; }
#vm-list .wz-radio .wz-radio-title { font-size: 15px; }
#vm-list .wz-radio .wz-radio-sub { font-size: 12.5px; margin-top: 3px; line-height: 1.4; }
#vm-list .wz-radio [data-check] { position: absolute; top: 16px; right: 16px; }
#vm-list .wz-mode-row { gap: 12px; }
#vm-list .wz-mode { padding: 17px 16px; }
#vm-list .wz-mode > i { font-size: 16px; }
#vm-list .wz-mode .wz-mode-title { font-size: 14.5px; margin-top: 10px; }
#vm-list .wz-mode .wz-mode-sub { font-size: 12.5px; margin-top: 3px; line-height: 1.4; }

/* --- step 3: bigger drop zone, 5-up thumbnails -------------------- */
#vm-list .wz-dropzone { padding: 34px; gap: 10px; margin-bottom: 16px; }
#vm-list .wz-dropzone .wz-drop-icon { width: 56px; height: 56px; font-size: 22px; }
#vm-list .wz-dropzone .wz-drop-title { font-size: 15px; }
#vm-list .wz-dropzone .wz-drop-sub { font-size: 12px; }
#vm-list .wz-photo-grid { grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 24px; }
#vm-list .wz-video-row { padding: 18px; gap: 14px; }
#vm-list .wz-video-row .wz-video-icon { width: 46px; height: 46px; font-size: 18px; }
#vm-list .wz-video-row .wz-video-title { font-size: 14.5px; }
#vm-list .wz-video-row .wz-video-cta { font-size: 12.5px; padding: 7px 14px; }

/* --- step 4: 2-up money row + the pay-directly caption ------------ */
#vm-list .wz-input,
#vm-list .wz-textarea,
#vm-list .wz-select {
    padding: 13px 15px;
    font-size: 14.5px;
    margin-bottom: 20px;
}
#vm-list .wz-textarea { resize: vertical; }
#vm-list .wz-select-wrap .wz-select { margin-bottom: 0; }
#vm-list .wz-block { margin-top: 24px; padding-top: 22px; }
#vm-list .wz-dt-fieldrow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
}
#vm-list .wz-money { padding: 0 15px; }
#vm-list .wz-money input { padding: 13px 10px; font-size: 14.5px; }
#vm-list .wz-dt-pricenote {
    display: block;
    margin: 12px 2px 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--vm-muted-2);
}
#vm-list .wz-facts-grid { grid-template-columns: repeat(4, 1fr); }

/* --- step 5: confirmation rows as the design's tiles -------------- */
#vm-list .wz-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
#vm-list .wz-checklist .wz-check-row {
    gap: 11px;
    background: var(--vm-canvas);
    border-radius: 14px;
    padding: 14px 15px;
    font-size: 13.5px;
}
#vm-list .wz-review-card { max-width: 420px; }

/* --- success ------------------------------------------------------ */
#vm-list .wz-success { height: auto; padding: 44px 30px 40px; }
#vm-list .wz-success-note { max-width: 520px; }

/* --- live preview: markup ships at every width, paints at >=1240 --- */
#vm-list .wz-dt-preview { display: none; }

} /* end >= 901px */


/* ================================================================
   LIVE PREVIEW TIER — >= 1240px
   ================================================================ */
@media (min-width: 1240px) {

#vm-list.wz-frame {
    grid-template-columns: 232px minmax(0, 1fr) 348px;
    column-gap: 36px;
}
#vm-list .wz-dt-preview {
    display: block;
    grid-column: 3;
    grid-row: 2 / span 2;
    align-self: start;
    position: sticky;
    /* The house sticky offset: header height + 24px, same as the listing
       booking card, the account and bookings rails and the safety contents
       rail. This was a hard-coded 104px, 8px out of step with all five and
       not derived from the header token, so a header-height change would
       have silently desynced the wizard from every other page. */
    top: calc(var(--vm-dt-header-h) + 24px);
}
/* The preview already shows the finished card, so step 5 drops its copy. */
#vm-list [data-review-card] { display: none; }

.wz-prev-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--vm-muted-2);
}
.wz-prev-eyebrow i { font-size: 12px; }

.wz-prev-card {
    background: #fff;
    border: 1px solid var(--vm-border-2);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--vm-dt-shadow-card);
    margin-bottom: 18px;
}
.wz-prev-media { position: relative; height: 180px; }
.wz-prev-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wz-prev-media .vm-cover-ph { width: 100%; height: 100%; }
.wz-prev-video {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    border-radius: 999px;
    padding: 4px 10px;
}
.wz-prev-video i { font-size: 9px; }
.wz-prev-body { padding: 14px 15px 15px; }
.wz-prev-pills { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; min-height: 21px; }
.wz-prev-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.wz-prev-loc { margin: 0 0 11px; font-size: 12px; color: var(--vm-muted); }
.wz-prev-loc i { font-size: 11px; }
.wz-prev-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 11px;
    border-top: 1px solid #f0f2f4;
}
.wz-prev-pricewrap { display: inline-flex; align-items: baseline; gap: 2px; }
.wz-prev-price { font-family: var(--vm-font-display); font-weight: 700; font-size: 19px; }
.wz-prev-per { font-size: 12px; color: var(--vm-muted-2); }
.wz-prev-cta {
    margin-left: auto;   /* contact-only hides the price block; keep the CTA right */
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    background: var(--vm-primary);
    padding: 7px 16px;
    border-radius: 999px;
    white-space: nowrap;
}
.wz-prev-dep { margin: 8px 0 0; font-size: 11.5px; color: var(--vm-muted-2); }

.wz-prev-tips {
    background: #fff;
    border: 1px solid var(--vm-border-2);
    border-radius: 16px;
    padding: 16px 17px;
}
.wz-prev-tips-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 11px;
    font-size: 13px;
}
.wz-prev-tips-head i { color: var(--vm-star, #f5a623); font-size: 14px; }
.wz-prev-tips-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.wz-prev-tips-list li {
    display: flex;
    gap: 9px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--vm-dt-ink-2);
}
.wz-prev-tips-list li i { color: var(--vm-primary); font-size: 11px; margin-top: 3px; flex-shrink: 0; }

} /* end >= 1240px */