/* Add Property Listing flow -- full-screen takeover, Airbnb-style: a thin top
   progress bar, one centered question at a time, a persistent bottom
   bar. One accent color (shared with the auth work, --lus-auth-accent),
   generous whitespace instead of the theme's dense dashboard-panel look. */

body.lus-add-property-listing-active {
    overflow: hidden;
}

/* Full-screen takeover -- only the shell a logged-out visitor gets
   (guest-draft mode, via the modal iframe or a direct visit). A
   logged-in visitor gets the dashboard-embedded shell just below
   instead (body.lus-add-property-listing-dashboard-mode), which renders in the normal
   page flow, not as an overlay. */
body.lus-add-property-listing-active #lus-add-property-listing-app {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #fff;
    display: flex;
    flex-direction: column;
    font-family: inherit;
}

/* ----------------------------------------------- dashboard-embedded --- */

/* Same centered card the full-screen modal uses for its own content
   (.lus-add-property-listing-stage-inner, max-width:640px, defined further down and
   shared by both shells) -- just without that shell's topbar/fixed
   bottombar/overlay chrome around it. The step guide above it
   (templates/add_property_listing_steps/dashboard-guide.php) gets the same treatment
   so the whole panel reads as one centered column, not a full-width
   dashboard page with cramped left-aligned text. */
body.lus-add-property-listing-dashboard-mode #lus-add-property-listing-app {
    font-family: inherit;
}

.lus-add-property-listing-dashboard-panel {
    padding: 48px 32px;
}

.lus-add-property-listing-dashboard-guide-wrap {
    max-width: 640px;
    margin: 0 auto 40px;
}

/* Same progress bar + "n / 12" count the full-screen shell has, minus its
   exit button and bottom border (the dashboard already has its own chrome). */
.lus-add-property-listing-topbar.lus-add-property-listing-dashboard-topbar {
    padding: 0;
    border-bottom: none;
}

.lus-add-property-listing-dashboard-actions {
    /* The reused Photos step floats its uploader (#drag-and-drop,
       .col-md-8, ...) left; a flex container sits beside floats unless it
       clears them, which put Back/Next beside the upload box instead of
       under the step. */
    clear: both;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}

.lus-add-property-listing-dashboard-actions .lus-add-property-listing-bottombar-back {
    position: static;
}

/* A handful of theme/plugin widgets are position:fixed and appended
   outside the page's own stacking context (a floating social-share
   panel, the WP admin toolbar for logged-in staff), so they'd otherwise
   float on top of the overlay regardless of its z-index. Hide them while
   the Add Property Listing flow is the whole screen. */
body.lus-add-property-listing-active .social_share_wrapper,
body.lus-add-property-listing-active #wpadminbar,
body.lus-add-property-listing-active .wp-bottom-menu {
    display: none !important;
}

/* ---------------------------------------------------------------- top --- */

.lus-add-property-listing-topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 32px;
    border-bottom: 1px solid #f0f0f0;
}

.lus-add-property-listing-exit {
    font-size: 28px;
    line-height: 1;
    font-weight: 300;
    color: #222;
    text-decoration: none;
}

.lus-add-property-listing-exit:hover {
    color: var(--lus-auth-accent, #d64541);
}

/* Inside the modal launcher's iframe, its own close (x) button already
   covers this -- avoid showing two, and keep clear of where that
   external button sits (top-right, outside the iframe but visually
   overlapping its corner). */
#lus-add-property-listing-app.is-embedded .lus-add-property-listing-exit {
    visibility: hidden;
}

#lus-add-property-listing-app.is-embedded .lus-add-property-listing-topbar {
    padding-right: 56px;
}

.lus-add-property-listing-progressbar {
    flex: 1 1 auto;
    height: 4px;
    background: #eee;
    border-radius: 2px;
    overflow: hidden;
}

.lus-add-property-listing-progressbar-fill {
    height: 100%;
    background: var(--lus-auth-accent, #d64541);
    transition: width .3s ease;
}

.lus-add-property-listing-step-count {
    flex: 0 0 auto;
    font-size: 13px;
    color: #999;
    min-width: 40px;
    text-align: right;
}

/* -------------------------------------------------------------- stage --- */

.lus-add-property-listing-stage {
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    padding: 56px 24px 40px;
}

.lus-add-property-listing-stage-inner {
    width: 100%;
    max-width: 640px;
    /* Centers it on its own in dashboard-embedded mode, which has no
       flex parent doing that job the way .lus-add-property-listing-stage does in the
       full-screen shell -- harmless there too (an auto margin on a
       centered flex child is a no-op). */
    margin: 0 auto;
}

.lus-add-property-listing-substep-heading {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 32px;
    color: #222;
}

/* The reused step templates print their own heading + mandatory-fields
   banner; keep those but bring them in line with the rest of the page. */
#lus-add-property-listing-app .user_dashboard_panel_title {
    font-size: 32px;
    font-weight: 600;
    margin: 0 0 8px;
    /* The dashboard styles indent it 15px; line it up with the fields. */
    padding-left: 0;
    padding-right: 0;
    /* ...and float it left, which squeezes whatever follows (cards, the
       review list) in beside it on narrow screens. One heading per row. */
    float: none;
    width: auto;
}

#lus-add-property-listing-app .submit_error,
#lus-add-property-listing-app .alert-danger {
    background: color-mix(in srgb, var(--lus-auth-accent, #d64541) 10%, #fff);
    color: var(--lus-auth-accent, #d64541);
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 14px;
    margin: 0 0 24px;
}

#lus-add-property-listing-app .alert-danger:empty {
    display: none;
}

/* Every reused template renders its own mandatory-fields notice
   (wpestate_show_mandatory_fields()) as a solid coral block -- keep the
   information but make it read as a quiet aside instead of an error. */
#lus-add-property-listing-app .submit_mandatory {
    background: none;
    color: #8a8a8a;
    font-size: 13px;
    padding: 0;
    margin: 0 0 28px;
}

.lus-add-property-listing-errors {
    color: var(--lus-auth-accent, #d64541);
    font-size: 14px;
    margin-bottom: 16px;
}

/* One field group per screen once JS has grouped Basic Info's fields --
   for every other step this rule simply has nothing to select. */
.lus-substep {
    animation: lus-add-property-listing-fade .25s ease;
}

@keyframes lus-add-property-listing-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

#lus-add-property-listing-app label {
    font-size: 14px;
    color: #6b6b6b;
    margin-bottom: 6px;
    display: block;
}

#lus-add-property-listing-app .form-control:not([type="checkbox"]):not([type="radio"]),
#lus-add-property-listing-app select,
#lus-add-property-listing-app textarea,
#lus-add-property-listing-app input[type="text"],
#lus-add-property-listing-app input[type="number"] {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 16px;
    background: #fff;
}

#lus-add-property-listing-app .form-control:focus:not([type="checkbox"]):not([type="radio"]),
#lus-add-property-listing-app select:focus,
#lus-add-property-listing-app textarea:focus,
#lus-add-property-listing-app input:not([type="checkbox"]):not([type="radio"]):focus {
    outline: none;
    border-color: var(--lus-auth-accent, #d64541);
}

#lus-add-property-listing-app input[type="checkbox"],
#lus-add-property-listing-app input[type="radio"] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/* A checkbox field is still one ".col-md-12" row like everything else,
   but it should read as "[x] Label" on one line, not a full-width box
   above stray label text. */
#lus-add-property-listing-app .col-md-12:has(> input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 10px;
}

#lus-add-property-listing-app .col-md-12,
#lus-add-property-listing-app .col-md-6,
#lus-add-property-listing-app .col-md-3 {
    width: 100%;
    max-width: 100%;
    float: none;
    padding: 0;
    margin-bottom: 24px;
}

/* The theme wraps its fields in Bootstrap ".row", whose -15px side margins
   only balance out against the 15px column padding zeroed just above.
   With the padding gone the fields hang 15px left of the step title and
   run 30px wider than it -- cancel the row margins so everything on a
   step lines up on one edge. */
.lus-add-property-listing-stage-inner .row {
    margin-left: 0;
    margin-right: 0;
}

/* Every reused field is a two-part row -- a ".dashboard_chapter_label"
   column repeating the field's name, then the actual field with its own
   inline label saying the same thing. Side by side (the original grid)
   that reads fine; stacked full-width it just repeats itself, so drop
   the redundant outer label and keep the field's own. */
#lus-add-property-listing-app .dashboard_chapter_label {
    display: none;
}

.lus-add-property-listing-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

@media (max-width: 640px) {
    .lus-add-property-listing-checkbox-grid {
        grid-template-columns: 1fr;
    }
}

.lus-add-property-listing-checkbox,
.lus-add-property-listing-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    cursor: pointer;
    font-size: 15px;
    transition: border-color .15s ease;
}

.lus-add-property-listing-checkbox:hover,
.lus-add-property-listing-radio:hover {
    border-color: var(--lus-auth-accent, #d64541);
}

.lus-add-property-listing-checkbox input,
.lus-add-property-listing-radio input {
    margin: 0;
}

.lus-add-property-listing-radio-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.lus-add-property-listing-field {
    display: block;
    margin-bottom: 24px;
}

.lus-add-property-listing-field span {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: #6b6b6b;
}

.lus-add-property-listing-step-hint {
    color: #6b6b6b;
    margin: 0 0 32px;
    font-size: 16px;
}


.lus-add-property-listing-review-grid {
    display: flex;
    gap: 24px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.lus-add-property-listing-review-photo img {
    width: 220px;
    height: 160px;
    object-fit: cover;
    border-radius: 12px;
}

.lus-add-property-listing-review-list {
    margin: 0;
    flex: 1;
    min-width: 220px;
}

/* One row per section: label + value on the left, "Edit" on the right. */
.lus-add-property-listing-review-row {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 16px;
    align-items: start;
    padding: 14px 0;
    border-top: 1px solid #eee;
}

.lus-add-property-listing-review-row:first-child {
    border-top: none;
    padding-top: 0;
}

.lus-add-property-listing-review-list dt {
    grid-column: 1;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8a8a8a;
}

.lus-add-property-listing-review-list dd {
    grid-column: 1;
    margin: 2px 0 0;
    font-size: 15px;
    color: #222;
}

.lus-add-property-listing-review-list dd.is-empty {
    color: #9a9a9a;
    font-style: italic;
}

.lus-add-property-listing-review-edit {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    /* A comfortable tap target on phones. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: #222;
    text-decoration: underline;
}

.lus-add-property-listing-review-edit:hover {
    color: var(--lus-auth-accent, #d64541);
}

/* ------------------------------------------------------------ bottom --- */

.lus-add-property-listing-bottombar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 32px;
    border-top: 1px solid #f0f0f0;
}

.lus-add-property-listing-bottombar-back {
    background: none;
    border: none;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    text-decoration: underline;
    cursor: pointer;
    padding: 10px 0;
}

.lus-add-property-listing-bottombar-back:hover {
    color: var(--lus-auth-accent, #d64541);
}

.lus-add-property-listing-bottombar-next {
    background: var(--lus-auth-accent, #d64541);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.lus-add-property-listing-bottombar-next.is-saving {
    opacity: .6;
    pointer-events: none;
}

.lus-add-property-listing-bottombar-next.is-disabled,
.lus-add-property-listing-bottombar-next:disabled {
    background: #e2e2e2;
    color: #9a9a9a;
    cursor: not-allowed;
}

/* --------------------------------------------------- hidden chrome --- */

/* The reused templates' own Save / Continue / "next" links stay in the
   DOM (their click handlers are what actually save the step -- see
   data-save-trigger in user_dashboard_add_property_listing.php) but are replaced
   visually by the one persistent bottom bar above. */
#lus-add-property-listing-app .next_submit_page,
#lus-add-property-listing-app #edit_prop_locations,
#lus-add-property-listing-app #edit_prop_image,
#lus-add-property-listing-app #edit_prop_ammenities,
#lus-add-property-listing-app #edit_prop_details,
#lus-add-property-listing-app #edit_prop_price,
#lus-add-property-listing-app #edit_calendar,
#lus-add-property-listing-app #form_submit_1,
#lus-add-property-listing-app .lus-add-property-listing-save-next,
#lus-add-property-listing-app .lus-add-property-listing-publish {
    display: none;
}

/* Guest-mode notice ("You must Login/Register...") -- this one stays
   visible, it's real information, not navigation chrome. */
#lus-add-property-listing-app .next_submit_page_first_step {
    display: block;
    margin-top: 16px;
    font-size: 14px;
    color: #6b6b6b;
}

/* ------------------------------------------- amenities multi-select --- */

/* The searchable picker (initAmenitiesPicker in the JS) replaces the long
   checkbox grid. The real checkboxes stay in the DOM, hidden -- they're
   what actually gets saved. */
.lus-add-property-listing-amenities-replaced .listing_detail {
    display: none;
}

.lus-add-property-listing-amenities-replaced > .col-md-9 {
    width: 100%;
    float: none;
    padding-left: 0;
    padding-right: 0;
}

.lus-add-property-listing-amenity-picker {
    width: 100%;
}

.lus-add-property-listing-amenity-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    min-height: 34px;
}

.lus-add-property-listing-amenity-empty {
    color: #8a8a8a;
    font-size: 14px;
    align-self: center;
}

.lus-add-property-listing-amenity-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 14px;
    border: 1px solid #ddd;
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    color: #222;
}

.lus-add-property-listing-amenity-chip-x {
    border: none;
    background: #f2f2f2;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    padding: 0;
    line-height: 1;
    font-size: 14px;
    color: #444;
    cursor: pointer;
}

.lus-add-property-listing-amenity-chip-x:hover {
    background: var(--lus-auth-accent, #d64541);
    color: #fff;
}

.lus-add-property-listing-amenity-searchwrap {
    position: relative;
}

.lus-add-property-listing-amenity-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
    padding: 6px 0;
}

.lus-add-property-listing-amenity-group {
    padding: 10px 16px 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a8a8a;
}

.lus-add-property-listing-amenity-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    font-size: 15px;
    color: #222;
    cursor: pointer;
}

.lus-add-property-listing-amenity-option:hover,
.lus-add-property-listing-amenity-option.is-active {
    background: #f7f7f7;
}

.lus-add-property-listing-amenity-tick {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    position: relative;
}

.lus-add-property-listing-amenity-option.is-selected .lus-add-property-listing-amenity-tick {
    background: var(--lus-auth-accent, #d64541);
    border-color: var(--lus-auth-accent, #d64541);
}

.lus-add-property-listing-amenity-option.is-selected .lus-add-property-listing-amenity-tick::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.lus-add-property-listing-amenity-none {
    padding: 14px 16px;
    color: #8a8a8a;
    font-size: 14px;
}

/* ---------------------------------------------- single-select dropdown --- */

/* Styled replacement for a native <select> (initSingleSelect in the JS).
   The real select stays in the form, visually hidden but still laid out,
   so serialization and validation keep reading it. */
#lus-add-property-listing-app select.lus-add-property-listing-single-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    opacity: 0;
    pointer-events: none;
}

.lus-add-property-listing-single {
    position: relative;
    width: 100%;
}

.lus-add-property-listing-single-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 16px;
    color: #222;
    text-align: left;
    cursor: pointer;
}

.lus-add-property-listing-single-trigger:hover {
    border-color: #bbb;
}

.lus-add-property-listing-single-trigger:focus,
.lus-add-property-listing-single-trigger.is-open {
    outline: none;
    border-color: var(--lus-auth-accent, #d64541);
}

.lus-add-property-listing-single-caret {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border: solid #666;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.lus-add-property-listing-single-trigger.is-open .lus-add-property-listing-single-caret {
    margin-top: 4px;
    transform: rotate(225deg);
}

.lus-add-property-listing-single-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
    overflow: hidden;
}

/* Selectors are deliberately as specific as the form-wide input rules
   (#app input[type=text], #app input:not(...):focus) so the panel's search
   box stays flat instead of picking up the boxed, red-focus input look. */
#lus-add-property-listing-app .lus-add-property-listing-single input.lus-add-property-listing-single-search,
#lus-add-property-listing-app .lus-add-property-listing-single input.lus-add-property-listing-single-search:focus {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid #eee;
    border-radius: 0;
    font-size: 15px;
    background: #fff;
    outline: none;
    box-shadow: none;
}

.lus-add-property-listing-single-list {
    max-height: 280px;
    overflow-y: auto;
    padding: 6px 0;
}

.lus-add-property-listing-single-option {
    padding: 10px 16px;
    font-size: 15px;
    color: #222;
    cursor: pointer;
}

.lus-add-property-listing-single-option:hover,
.lus-add-property-listing-single-option.is-active {
    background: #f7f7f7;
}

.lus-add-property-listing-single-option.is-selected {
    font-weight: 600;
    color: var(--lus-auth-accent, #d64541);
}

.lus-add-property-listing-single-none {
    padding: 14px 16px;
    color: #8a8a8a;
    font-size: 14px;
}

/* ------------------------------------ reused steps' save messages --- */

/* The reused steps' own Save handlers (ajaxcalls_add.js) print "Saving..."
   and then the server's "... saved" text into #profile_message before
   moving on to the next step. The flow already shows progress on the Next
   button and goes straight to the next step, so that flash is just noise.
   Hidden here; only the error variant (.alert_err -- e.g. the mandatory
   fields warning) stays visible. */
#lus-add-property-listing-app #profile_message .login-alert:not(.alert_err),
#lus-add-property-listing-app #profile_message2 .login-alert:not(.alert_err) {
    display: none;
}

/* ---------------------------------- per-bedroom bed types (hidden) --- */

/* The Details step's "Bedroom 1..N" accordions (King/Queen/Double/Single/
   Couch counts per bedroom) are up to 25 typed numbers, only built for
   logged-in hosts, and optional -- too heavy for this flow. Hidden by CSS
   (not removed): the theme's script deletes and rebuilds this wrapper
   whenever Bedrooms changes. Still editable on the regular Edit Listing
   page.

   KNOWN THEME BUG (pre-existing, not caused by hiding): the save handler
   stores bed counts keyed by bed-type INDEX, but dashboard-control.js's
   wpestate_show_bedrooms_input() reads them back keyed by bed-type LABEL, so
   it always draws zeros -- and Save then writes those zeros over any bed
   data already saved on the listing. For a brand-new listing there is
   nothing to lose; for an existing one, re-saving this step resets it. */
#lus-add-property-listing-app #whole_beds_wrapper {
    display: none;
}

/* ---------------------------------------- sleeping arrangements --- */

.lus-add-property-listing-bedrooms {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px;
}

.lus-add-property-listing-bedroom {
    margin: 0;
    padding: 18px 20px 6px;
    border: 1px solid #ddd;
    border-radius: 14px;
    background: #fff;
}

.lus-add-property-listing-bedroom legend {
    float: none;
    width: auto;
    margin: 0 0 6px;
    padding: 0 6px;
    border: none;
    font-size: 17px;
    font-weight: 600;
    color: #222;
}

.lus-add-property-listing-bed-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid #f0f0f0;
}

.lus-add-property-listing-bed-row:first-of-type {
    border-top: none;
}

.lus-add-property-listing-bed-label {
    font-size: 15px;
    color: #222;
}

.lus-add-property-listing-bed-stepper {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.lus-add-property-listing-bed-minus,
.lus-add-property-listing-bed-plus {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #b0b0b0;
    border-radius: 50%;
    background: #fff;
    font-size: 20px;
    line-height: 1;
    color: #444;
    cursor: pointer;
}

.lus-add-property-listing-bed-minus:hover:not(:disabled),
.lus-add-property-listing-bed-plus:hover {
    border-color: #222;
    color: #222;
}

.lus-add-property-listing-bed-minus:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* Specificity matches the form-wide text-input rules so the count reads as a
   plain number between the buttons, not a boxed input. */
#lus-add-property-listing-app .lus-add-property-listing-bed-stepper input.lus-add-property-listing-bed-count {
    width: 32px;
    padding: 0;
    border: none;
    background: none;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: #222;
    cursor: default;
}

.lus-add-property-listing-bedrooms-empty {
    padding: 16px 18px;
    border-radius: 12px;
    background: #f7f7f8;
    color: #555;
    font-size: 15px;
}

/* ------------------------------------------------- pricing mode --- */

/* Price-adjustment calendar: lives in the pricing "Advanced options"; the
   theme's own mode toggle shows it in Default mode only. */
#lus-add-property-listing-app .lus-pricing-advanced {
    clear: both;
}

.lus-add-property-listing-pricing-modes {
    /* The theme floats the step title; start below it, full width. */
    clear: both;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 8px 0 32px;
}

@media (max-width: 640px) {
    .lus-add-property-listing-pricing-modes {
        grid-template-columns: 1fr;
    }
}

.lus-add-property-listing-pricing-modes-question {
    grid-column: 1 / -1;
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: #222;
}

#lus-add-property-listing-app label.lus-add-property-listing-pricing-mode {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 18px 18px 18px 48px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #fff;
    font-weight: normal;
    cursor: pointer;
}

#lus-add-property-listing-app label.lus-add-property-listing-pricing-mode:hover {
    border-color: #b0b0b0;
}

#lus-add-property-listing-app label.lus-add-property-listing-pricing-mode.is-selected {
    border-color: var(--lus-auth-accent, #d64541);
    box-shadow: 0 0 0 1px var(--lus-auth-accent, #d64541);
}

#lus-add-property-listing-app .lus-add-property-listing-pricing-mode input[type="radio"] {
    position: absolute;
    left: 18px;
    top: 20px;
    margin: 0;
    accent-color: var(--lus-auth-accent, #d64541);
}

.lus-add-property-listing-pricing-mode-title {
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

.lus-add-property-listing-pricing-mode-desc {
    font-size: 13px;
    line-height: 1.5;
    color: #6b6b6b;
}

/* Section headings inside a step (Custom Pricing Table, Price Notes) are
   sub-headings, not a second page title. */
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .user_dashboard_panel_title,
#lus-add-property-listing-app #wprentals_price_notes_wrap .user_dashboard_panel_title {
    font-size: 20px;
    margin: 8px 0 8px;
}

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

/* Replaced by a small asterisk on each required field's label
   (markRequiredFields in the JS). */
#lus-add-property-listing-app .submit_mandatory {
    display: none;
}

.lus-add-property-listing-required {
    color: var(--lus-auth-accent, #d64541);
    font-weight: 600;
}

/* ----------------------------------------------------- login gate --- */

.lus-add-property-listing-account-points {
    margin: 8px 0 0;
    padding-left: 20px;
    color: #555;
    font-size: 15px;
    line-height: 1.7;
}

/* ------------------------------------------------- photos step --- */

/* The theme's uploader is a fixed 422px box beside an empty column; in this
   single-column flow it spans the step like every other field. */
#lus-add-property-listing-app #drag-and-drop {
    width: 100%;
    float: none;
    box-sizing: border-box;
}

#lus-add-property-listing-app .col-md-8 {
    width: 100%;
    max-width: 100%;
    float: none;
    padding: 0;
}

/* ------------------------------------ one look in both layouts --- */

/* The dashboard styles set form labels in the heading font (serif, 500);
   guests see them in the body font. Use the guest look everywhere. */
body.lus-add-property-listing-dashboard-mode #lus-add-property-listing-app label,
body.lus-add-property-listing-dashboard-mode #lus-add-property-listing-app legend {
    font-family: inherit;
    font-weight: 400;
}

body.lus-add-property-listing-dashboard-mode #lus-add-property-listing-app .lus-add-property-listing-bedroom legend,
body.lus-add-property-listing-dashboard-mode #lus-add-property-listing-app .lus-add-property-listing-pricing-mode-title {
    font-weight: 600;
}

/* The dashboard styles float paragraphs left; the step hint under each new
   step's title then squeezes the next block (the Review list, at 0 width
   on phones) in beside it. Keep the hint in normal flow. */
#lus-add-property-listing-app .lus-add-property-listing-step-body > p {
    float: none;
}

.lus-add-property-listing-review-grid {
    clear: both;
}

.lus-add-property-listing-review-list {
    min-width: 0;
}

/* -------------------------------------------- availability step --- */

/* The theme sizes the availability calendar for its wide dashboard tab: a
   fixed 900px box with a 15px left margin, and indented hint / iCal blocks.
   Fit all of it to the flow's single column. */
#lus-add-property-listing-app .booking-calendar-wrapper-in-wrapper.booking-calendar-set,
#lus-add-property-listing-app .booking-calendar-set .booking-calendar-wrapper-in,
#lus-add-property-listing-app .booking-calendar-set .month-title,
#lus-add-property-listing-app .booking-calendar-set table.booking-calendar {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    float: none;
    box-sizing: border-box;
}

#lus-add-property-listing-app .booking-calendar-set table.booking-calendar {
    padding-left: 0;
}

#lus-add-property-listing-app .price_explaning,
#lus-add-property-listing-app #icalfeed_wrapper {
    width: 100%;
    float: none;
    padding-left: 0;
    box-sizing: border-box;
}

/* The prev/next month arrows sit on the month title bar, inside the box. */
#lus-add-property-listing-app .booking-calendar-set #calendar-prev-internal-set {
    right: 44px;
}

#lus-add-property-listing-app .booking-calendar-set #calendar-next-internal-set {
    right: 8px;
}

/* "Import/Export iCalendar feeds" is a sub-heading, not a second title, and
   the theme sets it inline-block (which centres it here). */
#lus-add-property-listing-app .calendar-actions ~ .user_dashboard_panel_title {
    display: block;
    font-size: 20px;
    margin: 32px 0 8px;
}

#lus-add-property-listing-app .import_ical {
    float: none;
    padding-left: 0;
    padding-right: 0;
}

/* ------------------------------------- review: what's still missing --- */

.lus-add-property-listing-review-missing {
    margin: 0 0 24px;
    padding: 16px 18px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--lus-auth-accent, #d64541) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--lus-auth-accent, #d64541) 30%, #fff);
}

.lus-add-property-listing-review-missing.is-soft {
    background: #f7f7f8;
    border-color: #eee;
}

.lus-add-property-listing-review-missing-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

.lus-add-property-listing-review-missing.is-soft .lus-add-property-listing-review-missing-title {
    font-weight: 400;
}

.lus-add-property-listing-review-missing ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

.lus-add-property-listing-review-missing li {
    margin: 4px 0;
}

.lus-add-property-listing-review-missing a {
    color: #222;
    font-weight: 600;
    text-decoration: underline;
}

.lus-add-property-listing-review-missing a:hover {
    color: var(--lus-auth-accent, #d64541);
}

/* --------------------------------------------- values vs. hints --- */

/* The theme draws typed values in a pale grey, so a saved "2" looked like a
   placeholder hint. Real values are dark; hints stay light. */
#lus-add-property-listing-app input[type="text"],
#lus-add-property-listing-app input[type="number"],
#lus-add-property-listing-app input[type="email"],
#lus-add-property-listing-app textarea,
#lus-add-property-listing-app select {
    color: #222;
}

#lus-add-property-listing-app input::placeholder,
#lus-add-property-listing-app textarea::placeholder {
    color: #9a9a9a;
    opacity: 1;
}

/* --------------------------------------------------- count rows --- */

/* "Guests  (-) 4 (+)" -- label on the left, stepper on the right, one row
   per count, like the Sleeping step. The real field stays (hidden). */
#lus-add-property-listing-app .lus-add-property-listing-count-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    margin: 0;
    border-bottom: 1px solid #eee;
}

#lus-add-property-listing-app .lus-add-property-listing-count-row label {
    margin: 0;
    font-size: 16px;
    color: #222;
}

#lus-add-property-listing-app .lus-add-property-listing-count-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    opacity: 0;
    pointer-events: none;
}

.lus-add-property-listing-count-stepper {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}

.lus-add-property-listing-count-minus,
.lus-add-property-listing-count-plus {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #b0b0b0;
    border-radius: 50%;
    background: #fff;
    font-size: 20px;
    line-height: 1;
    color: #444;
    cursor: pointer;
}

.lus-add-property-listing-count-minus:hover:not(:disabled),
.lus-add-property-listing-count-plus:hover:not(:disabled) {
    border-color: #222;
    color: #222;
}

.lus-add-property-listing-count-minus:disabled,
.lus-add-property-listing-count-plus:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.lus-add-property-listing-count-value {
    min-width: 28px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #222;
}

/* ------------------------------------------------- option cards --- */

/* House rules / safety (checkboxes) and cancellation (radios): the theme's
   own checkbox styling pushed the box above the text and made it faint. */
#lus-add-property-listing-app .lus-add-property-listing-checkbox,
#lus-add-property-listing-app .lus-add-property-listing-radio {
    /* The dashboard styles force labels to display:block, which broke the
       card's flex row (box above the text). */
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-weight: 400;
    color: #222;
}

#lus-add-property-listing-app .lus-add-property-listing-checkbox input,
#lus-add-property-listing-app .lus-add-property-listing-radio input {
    -webkit-appearance: auto;
    appearance: auto;
    position: static;
    top: auto;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--lus-auth-accent, #d64541);
    cursor: pointer;
}

#lus-add-property-listing-app .lus-add-property-listing-checkbox:has(input:checked),
#lus-add-property-listing-app .lus-add-property-listing-radio:has(input:checked) {
    border-color: var(--lus-auth-accent, #d64541);
    box-shadow: 0 0 0 1px var(--lus-auth-accent, #d64541);
}

.lus-add-property-listing-single-trigger.is-placeholder .lus-add-property-listing-single-value {
    color: #9a9a9a;
}

/* ------------------------------------------------ submitted screen --- */

.lus-add-property-listing-submitted {
    padding: 24px 0 8px;
    text-align: center;
}

.lus-add-property-listing-submitted-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--lus-auth-accent, #d64541) 12%, #fff);
    color: var(--lus-auth-accent, #d64541);
    font-size: 30px;
    line-height: 64px;
    font-weight: 700;
}

#lus-add-property-listing-app .lus-add-property-listing-submitted h2 {
    margin: 0 0 12px;
    font-size: 28px;
    color: #222;
}

.lus-add-property-listing-submitted p {
    max-width: 460px;
    margin: 0 auto 28px;
    color: #555;
    font-size: 16px;
    line-height: 1.6;
}

.lus-add-property-listing-submitted-button {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 10px;
    background: var(--lus-auth-accent, #d64541);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.lus-add-property-listing-submitted-button:hover,
.lus-add-property-listing-submitted-button:focus {
    color: #fff;
    filter: brightness(.95);
}

/* =====================================================================
   DESIGN LAYER -- "soft structural" pass over the whole flow.
   Airy white surfaces, hairline edges instead of grey 1px borders, very
   soft diffused depth, "double-bezel" surfaces (a faint outer shell around
   a white core, drawn with layered box-shadows so no extra markup), pill
   buttons, chapter labels, and spring-eased motion on transform/opacity
   only. Brand fonts and accent colour are kept.
   ===================================================================== */

#lus-add-property-listing-app {
    --lus-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --lus-ink: #1d1d1f;
    --lus-muted: #6e6e73;
    --lus-hairline: rgba(29, 29, 31, 0.08);
    --lus-hairline-strong: rgba(29, 29, 31, 0.14);
    --lus-shell: rgba(29, 29, 31, 0.035);
    --lus-accent: var(--lus-auth-accent, #d64541);
    --lus-accent-soft: color-mix(in srgb, var(--lus-accent) 9%, #fff);
    --lus-accent-ring: color-mix(in srgb, var(--lus-accent) 22%, #fff);
    /* A single clean edge -- no shaded outer shell around boxes. */
    --lus-bezel: 0 0 0 1px var(--lus-hairline-strong);
    --lus-bezel-focus: 0 0 0 1.5px var(--lus-accent);
    --lus-lift: 0 1px 2px rgba(29, 29, 31, 0.04), 0 18px 40px -22px rgba(29, 29, 31, 0.22);
}

/* ---------------------------------------------------- typography --- */

#lus-add-property-listing-app .lus-add-property-listing-stage-inner .user_dashboard_panel_title,
#lus-add-property-listing-app .lus-add-property-listing-substep-heading {
    color: var(--lus-ink);
    letter-spacing: -0.015em;
    line-height: 1.15;
}

#lus-add-property-listing-app .lus-add-property-listing-step-hint {
    color: var(--lus-muted);
    font-size: 15px;
    line-height: 1.6;
    max-width: 52ch;
}

#lus-add-property-listing-app .lus-add-property-listing-stage-inner label {
    color: #3a3a3c;
}

/* Chapter label above each title ("Your place", "Guest policies", ...). */
.lus-add-property-listing-eyebrow {
    /* Its own line above the title (the dashboard styles make titles
       inline-block, which would otherwise sit them side by side). */
    display: flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    margin: 0 0 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--lus-accent-soft, #fbeceb);
    color: var(--lus-accent, #d64541);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
}

/* -------------------------------------------- fields: double bezel --- */

#lus-add-property-listing-app input[type="text"],
#lus-add-property-listing-app input[type="number"],
#lus-add-property-listing-app input[type="email"],
#lus-add-property-listing-app textarea,
#lus-add-property-listing-app select,
#lus-add-property-listing-app .lus-add-property-listing-single-trigger {
    border: 0;
    border-radius: 14px;
    background: #fff;
    color: var(--lus-ink);
    box-shadow: var(--lus-bezel);
    transition: box-shadow 0.5s var(--lus-ease), transform 0.5s var(--lus-ease);
}

#lus-add-property-listing-app input[type="text"]:focus,
#lus-add-property-listing-app input[type="number"]:focus,
#lus-add-property-listing-app input[type="email"]:focus,
#lus-add-property-listing-app textarea:focus,
#lus-add-property-listing-app select:focus,
#lus-add-property-listing-app .lus-add-property-listing-single-trigger:focus,
#lus-add-property-listing-app .lus-add-property-listing-single-trigger.is-open {
    outline: none;
    border: 0;
    box-shadow: var(--lus-bezel-focus);
}

/* ---------------------------------------------- cards: double bezel --- */

#lus-add-property-listing-app .lus-add-property-listing-checkbox,
#lus-add-property-listing-app .lus-add-property-listing-radio,
#lus-add-property-listing-app label.lus-add-property-listing-pricing-mode {
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--lus-bezel);
    transition: box-shadow 0.5s var(--lus-ease), transform 0.5s var(--lus-ease);
}

#lus-add-property-listing-app .lus-add-property-listing-checkbox:hover,
#lus-add-property-listing-app .lus-add-property-listing-radio:hover,
#lus-add-property-listing-app label.lus-add-property-listing-pricing-mode:hover {
    transform: translateY(-1px);
    border: 0;
}

#lus-add-property-listing-app .lus-add-property-listing-checkbox:has(input:checked),
#lus-add-property-listing-app .lus-add-property-listing-radio:has(input:checked),
#lus-add-property-listing-app label.lus-add-property-listing-pricing-mode.is-selected {
    border: 0;
    background: color-mix(in srgb, var(--lus-accent) 3%, #fff);
    box-shadow: var(--lus-bezel-focus);
}

#lus-add-property-listing-app .lus-add-property-listing-bedroom {
    border: 0;
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--lus-bezel), var(--lus-lift);
    padding: 22px 24px 10px;
}

#lus-add-property-listing-app .lus-add-property-listing-bed-row,
#lus-add-property-listing-app .lus-add-property-listing-count-row {
    border-color: var(--lus-hairline);
}

/* Review: the summary is one quiet card. */
#lus-add-property-listing-app .lus-add-property-listing-review-list {
    padding: 6px 24px;
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--lus-bezel), var(--lus-lift);
}

#lus-add-property-listing-app .lus-add-property-listing-review-row {
    border-top-color: var(--lus-hairline);
    padding: 16px 0;
}

#lus-add-property-listing-app .lus-add-property-listing-review-row:first-child {
    padding-top: 16px;
}

#lus-add-property-listing-app .lus-add-property-listing-review-missing {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 0 0 1px var(--lus-accent-ring);
}

#lus-add-property-listing-app .lus-add-property-listing-review-missing.is-soft {
    box-shadow: var(--lus-bezel);
}

/* Steppers (counts and beds): soft round buttons with real press feedback. */
#lus-add-property-listing-app .lus-add-property-listing-count-minus,
#lus-add-property-listing-app .lus-add-property-listing-count-plus,
#lus-add-property-listing-app .lus-add-property-listing-bed-minus,
#lus-add-property-listing-app .lus-add-property-listing-bed-plus {
    border: 0;
    background: #fff;
    box-shadow: 0 0 0 1px var(--lus-hairline-strong), 0 1px 2px rgba(29, 29, 31, 0.06);
    color: var(--lus-ink);
    transition: transform 0.4s var(--lus-ease), box-shadow 0.4s var(--lus-ease);
}

#lus-add-property-listing-app .lus-add-property-listing-count-minus:hover:not(:disabled),
#lus-add-property-listing-app .lus-add-property-listing-count-plus:hover:not(:disabled),
#lus-add-property-listing-app .lus-add-property-listing-bed-minus:hover:not(:disabled),
#lus-add-property-listing-app .lus-add-property-listing-bed-plus:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px var(--lus-ink), 0 6px 14px -8px rgba(29, 29, 31, 0.35);
}

#lus-add-property-listing-app .lus-add-property-listing-count-minus:active:not(:disabled),
#lus-add-property-listing-app .lus-add-property-listing-count-plus:active:not(:disabled),
#lus-add-property-listing-app .lus-add-property-listing-bed-minus:active:not(:disabled),
#lus-add-property-listing-app .lus-add-property-listing-bed-plus:active {
    transform: scale(0.94);
}

/* Amenity chips and dropdown panels pick up the same quiet depth. */
#lus-add-property-listing-app .lus-add-property-listing-amenity-chip {
    border: 0;
    box-shadow: 0 0 0 1px var(--lus-hairline-strong);
}

#lus-add-property-listing-app .lus-add-property-listing-amenity-panel,
#lus-add-property-listing-app .lus-add-property-listing-single-panel {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 0 0 1px var(--lus-hairline), 0 24px 48px -20px rgba(29, 29, 31, 0.28);
}

/* ----------------------------------------------- photo upload zone --- */

#lus-add-property-listing-app #drag-and-drop {
    border: 1.5px dashed var(--lus-hairline-strong);
    border-radius: 22px;
    background: #fff;
    padding: 36px 24px;
    box-shadow: none;
    transition: box-shadow 0.5s var(--lus-ease), border-color 0.5s var(--lus-ease);
}

#lus-add-property-listing-app #drag-and-drop:hover {
    border-color: var(--lus-accent);
}

/* --------------------------------------------------------- buttons --- */

/* Next: a pill with its arrow nested in its own circle (drawn with ::after
   so it survives the JS swapping the label to "Publish Property" etc.). */
#lus-add-property-listing-app .lus-add-property-listing-bottombar-next {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    height: auto;
    padding: 8px 8px 8px 26px;
    border: 0;
    border-radius: 999px;
    background: var(--lus-accent);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--lus-accent) 70%, transparent);
    transition: transform 0.5s var(--lus-ease), box-shadow 0.5s var(--lus-ease), opacity 0.3s var(--lus-ease);
}

#lus-add-property-listing-app .lus-add-property-listing-bottombar-next::after {
    content: "\2192";
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    font-size: 16px;
    line-height: 1;
    transition: transform 0.5s var(--lus-ease);
}

#lus-add-property-listing-app .lus-add-property-listing-bottombar-next:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--lus-accent) 80%, transparent);
}

#lus-add-property-listing-app .lus-add-property-listing-bottombar-next:hover:not(:disabled)::after {
    transform: translateX(3px) translateY(-1px) scale(1.05);
}

#lus-add-property-listing-app .lus-add-property-listing-bottombar-next:active:not(:disabled) {
    transform: scale(0.98);
}

#lus-add-property-listing-app .lus-add-property-listing-bottombar-next:disabled,
#lus-add-property-listing-app .lus-add-property-listing-bottombar-next.is-disabled {
    background: #ececef;
    color: #9a9a9f;
    box-shadow: none;
    cursor: not-allowed;
}

#lus-add-property-listing-app .lus-add-property-listing-bottombar-next:disabled::after,
#lus-add-property-listing-app .lus-add-property-listing-bottombar-next.is-disabled::after {
    background: rgba(29, 29, 31, 0.06);
}

/* Back: a quiet pill, not an underlined link. */
#lus-add-property-listing-app .lus-add-property-listing-bottombar-back {
    padding: 12px 20px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--lus-ink);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.4s var(--lus-ease), transform 0.4s var(--lus-ease);
}

#lus-add-property-listing-app .lus-add-property-listing-bottombar-back:hover {
    background: var(--lus-shell);
    text-decoration: none;
}

#lus-add-property-listing-app .lus-add-property-listing-bottombar-back:active {
    transform: scale(0.98);
}

/* Full-screen shell: hairline edges; the bottom bar is fixed, so it can
   take a light frosted glass over content scrolling beneath it. */
#lus-add-property-listing-app .lus-add-property-listing-topbar {
    border-bottom-color: var(--lus-hairline);
}

#lus-add-property-listing-app .lus-add-property-listing-bottombar {
    border-top: 1px solid var(--lus-hairline);
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
}

#lus-add-property-listing-app .lus-add-property-listing-progressbar {
    height: 6px;
    border-radius: 999px;
    background: var(--lus-shell);
}

#lus-add-property-listing-app .lus-add-property-listing-progressbar-fill {
    border-radius: 999px;
    background: var(--lus-accent);
}

/* ------------------------------------------- availability calendar --- */

/* Replace the theme's dark grey month bar and dark "today" cells with the
   same light surfaces as the rest of the flow. */
#lus-add-property-listing-app .booking-calendar-wrapper-in-wrapper.booking-calendar-set {
    background: transparent;
}

#lus-add-property-listing-app .booking-calendar-set .booking-calendar-wrapper-in {
    padding: 18px 18px 8px;
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--lus-bezel), var(--lus-lift);
}

#lus-add-property-listing-app .booking-calendar-set .month-title {
    padding: 2px 0 14px;
    background: transparent;
    color: var(--lus-ink);
    font-size: 18px;
    font-weight: 600;
    text-align: left;
}

#lus-add-property-listing-app .booking-calendar-set table.booking-calendar {
    background: transparent;
    border-collapse: separate;
    border-spacing: 4px;
}

#lus-add-property-listing-app .booking-calendar-set th {
    background: transparent;
    color: var(--lus-muted);
    font-size: 12px;
    font-weight: 600;
}

#lus-add-property-listing-app .booking-calendar-set td {
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: var(--lus-ink);
    box-shadow: 0 0 0 1px var(--lus-hairline);
    transition: background-color 0.4s var(--lus-ease), transform 0.4s var(--lus-ease);
}

#lus-add-property-listing-app .booking-calendar-set td.pad {
    background: transparent;
    box-shadow: none;
}

#lus-add-property-listing-app .booking-calendar-set td.has_future {
    cursor: pointer;
}

#lus-add-property-listing-app .booking-calendar-set td.has_future:hover {
    background: var(--lus-shell);
}

/* The theme sets these two states with !important (dark "today" block,
   grey past days); override them only inside this flow. */
#lus-add-property-listing-app .booking-calendar-set td.calendar-today {
    background-color: #fff !important;
    color: var(--lus-ink) !important;
    box-shadow: inset 0 0 0 2px var(--lus-ink);
}

#lus-add-property-listing-app .booking-calendar-set td.has_past {
    background-color: transparent !important;
    color: #c7c7cc !important;
    box-shadow: none;
}

#lus-add-property-listing-app .booking-calendar-set td[class*="calendar-reserved"],
#lus-add-property-listing-app .booking-calendar-set td.calendar-selected {
    background: var(--lus-accent);
    color: #fff;
    box-shadow: none;
}

#lus-add-property-listing-app .booking-calendar-set .internal-calendar-left,
#lus-add-property-listing-app .booking-calendar-set .internal-calendar-right {
    top: 14px;
    width: 34px;
    height: 34px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--lus-ink);
    box-shadow: 0 0 0 1px var(--lus-hairline-strong);
    transition: transform 0.4s var(--lus-ease);
}

#lus-add-property-listing-app .booking-calendar-set #calendar-prev-internal-set {
    right: 64px;
}

#lus-add-property-listing-app .booking-calendar-set #calendar-next-internal-set {
    right: 22px;
}

#lus-add-property-listing-app .booking-calendar-set .internal-calendar-left:hover,
#lus-add-property-listing-app .booking-calendar-set .internal-calendar-right:hover {
    transform: translateY(-1px);
}

#lus-add-property-listing-app .calendar-legend-today {
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--lus-ink);
    border-radius: 4px;
}

#lus-add-property-listing-app .calendar-legend-reserved {
    background: var(--lus-accent);
    border-radius: 4px;
}

/* ----------------------------------------------------------- motion --- */

/* Each step's content settles in with a short staggered fade-up.
   fill-mode "backwards" leaves no transform behind afterwards, so fixed
   things inside a step (the calendar's popup) still position normally. */
@keyframes lus-rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#lus-add-property-listing-app .lus-add-property-listing-stage-inner > *,
#lus-add-property-listing-app .lus-add-property-listing-step-body > *,
#lus-add-property-listing-app .lus-add-property-listing-dashboard-actions {
    animation: lus-rise 0.8s var(--lus-ease) backwards;
}

#lus-add-property-listing-app .lus-add-property-listing-step-body > :nth-child(2) { animation-delay: 0.06s; }
#lus-add-property-listing-app .lus-add-property-listing-step-body > :nth-child(3) { animation-delay: 0.12s; }
#lus-add-property-listing-app .lus-add-property-listing-step-body > :nth-child(4) { animation-delay: 0.18s; }
#lus-add-property-listing-app .lus-add-property-listing-step-body > :nth-child(n+5) { animation-delay: 0.24s; }
#lus-add-property-listing-app .lus-add-property-listing-dashboard-actions { animation-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
    #lus-add-property-listing-app *,
    #lus-add-property-listing-app *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* Stepper numbers are read-only text between − and +, not fields. */
#lus-add-property-listing-app .lus-add-property-listing-bed-stepper input.lus-add-property-listing-bed-count {
    box-shadow: none;
}

/* A fieldset's legend is drawn on the card's top edge; float it into the
   card so the bedroom name reads as the card's own heading. */
#lus-add-property-listing-app .lus-add-property-listing-bedroom legend {
    float: left;
    width: 100%;
    margin: 0 0 6px;
    padding: 0;
    font-size: 17px;
}

#lus-add-property-listing-app .lus-add-property-listing-bedroom legend + * {
    clear: both;
}

/* The hint line is also inserted into the reused theme steps, where the
   dashboard styles float paragraphs -- the calendar then started before the
   hint ended (overlapping it on phones). Always keep it in normal flow. */
#lus-add-property-listing-app .lus-add-property-listing-step-hint {
    float: none;
    clear: both;
}

/* Month name stays clear of the prev/next arrows at every width. */
#lus-add-property-listing-app .booking-calendar-set .month-title {
    min-height: 34px;
    line-height: 34px;
    padding: 0 96px 12px 0;
    margin: 0;
}

/* iCal import/export: one light card instead of the theme's grey block. */
#lus-add-property-listing-app .import_ical {
    margin-top: 8px;
    padding: 20px 22px;
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--lus-bezel);
}

#lus-add-property-listing-app .import_ical div,
#lus-add-property-listing-app .import_ical p,
#lus-add-property-listing-app #icalfeed_wrapper {
    background-color: transparent;
}

#lus-add-property-listing-app .import_ical #add_extra_feed {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--lus-ink);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--lus-hairline-strong);
    cursor: pointer;
    transition: transform 0.4s var(--lus-ease), box-shadow 0.4s var(--lus-ease);
}

#lus-add-property-listing-app .import_ical #add_extra_feed:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px var(--lus-ink);
}

/* iCal section: the theme gives "Add new feed" a 50px line-height and a
   fixed 200px width (a tall oval), and indents "There are no calendar
   feeds". One left edge, even spacing, a normal pill button. */
#lus-add-property-listing-app .import_ical #icalfeed_wrapper,
#lus-add-property-listing-app .import_ical #icalfeed_wrapper * {
    padding-left: 0;
    margin-left: 0;
}

#lus-add-property-listing-app .import_ical #icalfeed_wrapper {
    padding: 12px 0;
    color: var(--lus-muted);
}

#lus-add-property-listing-app .import_ical .icalfeed > * {
    margin-bottom: 12px;
}

#lus-add-property-listing-app .import_ical #add_extra_feed {
    width: auto;
    height: auto;
    min-height: 44px;
    line-height: 1.2;
    padding: 12px 22px;
    margin: 4px 0 0;
    justify-content: center;
}

/* The export link sits just above the iCal card; the theme floats/indents
   it, so the card rode up over it. Normal flow, same left edge. */
#lus-add-property-listing-app .export_ical {
    float: none;
    clear: both;
    margin: 0 0 14px;
    padding: 0;
    color: var(--lus-muted);
    word-break: break-all;
}

#lus-add-property-listing-app .import_ical {
    clear: both;
}

/* Back's pill padding pushed its text 20px in from the content edge; pull
   it back so "← Back" lines up with the fields above (the hover pill still
   shows around it). */
#lus-add-property-listing-app .lus-add-property-listing-bottombar-back {
    margin-left: -20px;
}

/* =====================================================================
   Phones & small tablets, logged-in layout.
   The theme styles the step card as an inline-block, so it was only as
   wide as its contents: edge to edge on narrow phones, but stuck against
   the left with an uneven gap on the right on wider ones (428px and up).
   Make it a full-width block with the same margin on both sides, and line
   the page title up with it.
   ===================================================================== */
@media (max-width: 991px) {
    body.lus-add-property-listing-dashboard-mode .dashboard-header {
        float: none;
        width: auto;
        margin: 0 16px 4px;
    }

    body.lus-add-property-listing-dashboard-mode .dashboard-header h1.entry-title {
        margin: 0;
        width: auto;
        line-height: 1.2;
    }

    body.lus-add-property-listing-dashboard-mode .lus-add-property-listing-dashboard-panel {
        display: block;
        float: none;
        clear: both;
        width: auto;
        min-width: 0;
        max-width: none;
        margin: 0 16px 24px;
        padding: 28px 20px;
        border-radius: 22px;
        box-shadow: 0 1px 2px rgba(29, 29, 31, 0.04), 0 18px 40px -26px rgba(29, 29, 31, 0.22);
    }

    body.lus-add-property-listing-dashboard-mode .lus-add-property-listing-dashboard-guide-wrap {
        margin-bottom: 28px;
    }

    /* Buttons never closer to the card's edge than the fields above them. */
    body.lus-add-property-listing-dashboard-mode .lus-add-property-listing-dashboard-actions {
        margin-top: 28px;
    }
}

/* Very small phones: a little less side padding so fields keep their room. */
@media (max-width: 360px) {
    body.lus-add-property-listing-dashboard-mode .lus-add-property-listing-dashboard-panel {
        margin-left: 12px;
        margin-right: 12px;
        padding: 24px 16px;
    }

    body.lus-add-property-listing-dashboard-mode .dashboard-header {
        margin-left: 12px;
        margin-right: 12px;
    }
}

/* ===================================================================
   Photos: drop box on top, the photos you've added below it.
   The theme floats the drop box left next to a floated photo list, which
   only works as long as both are floats. Making the box full width (above)
   left it as a normal block that the floated list sat underneath -- the
   box covered the pictures, and its button was shoved below them. Stack
   the two with flexbox instead (flex ignores floats), box first.
   =================================================================== */
#lus-add-property-listing-app #aaiu-upload-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#lus-add-property-listing-app #aaiu-upload-container #drag-and-drop {
    order: 1;
    float: none;
    clear: none;
    width: 100%;
    margin: 0 0 18px;
}

/* Filenames of photos still uploading. */
#lus-add-property-listing-app #aaiu-upload-container #aaiu-upload-imagelist {
    order: 2;
    float: none;
    width: 100%;
    margin: 0;
}

#lus-add-property-listing-app #aaiu-upload-imagelist div {
    margin: 0 0 8px;
    color: var(--lus-muted, #6e6e73);
    font-size: 14px;
}

/* The finished photos: a tidy grid of equal tiles. */
#lus-add-property-listing-app #aaiu-upload-container #imagelist {
    order: 3;
    float: none;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 640px) {
    #lus-add-property-listing-app #aaiu-upload-container #imagelist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

#lus-add-property-listing-app #imagelist .uploaded_images {
    float: none;
    position: relative;
    margin: 0;
    max-width: none;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    background: #f2f2f4;
    box-shadow: 0 0 0 1px var(--lus-hairline, rgba(29, 29, 31, 0.08));
    cursor: grab;
}

#lus-add-property-listing-app #imagelist .uploaded_images img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
}

/* Remove (trash) button: a small round button on the photo's corner. */
#lus-add-property-listing-app #imagelist .uploaded_images i {
    top: 8px;
    left: 8px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    background: rgba(29, 29, 31, 0.62);
    color: #fff;
    font-size: 13px;
    transition: background-color 0.3s var(--lus-ease, ease), transform 0.3s var(--lus-ease, ease);
}

#lus-add-property-listing-app #imagelist .uploaded_images i:hover {
    background: var(--lus-accent, #d64541);
    transform: scale(1.06);
}

/* The cover photo's star sits on the opposite corner. */
#lus-add-property-listing-app #imagelist .uploaded_images .thumber,
#lus-add-property-listing-app #imagelist .uploaded_images .fa-star {
    left: auto;
    right: 8px;
    background: var(--lus-accent, #d64541);
}

/* The "Drag and Drop Images or" message is absolutely positioned by the
   theme with no left/right. Such an element starts where the box's padding
   starts, so my 24px side padding pushed the icon and text 24px right of
   centre while the button stayed centred. Pin it to both edges instead. */
#lus-add-property-listing-app #drag-and-drop .drag-drop-msg {
    left: 0;
    right: 0;
    width: auto;
}

/* ============================================ Location: pin map ====== */

.lus-add-property-listing-map-wrap {
    /* The rows above are floated by the dashboard styles; without this the
       map (hidden overflow) was squeezed into the leftover space beside
       them -- zero wide on a phone. Own line, full width. */
    clear: both;
    float: none;
    width: 100%;
    margin: 4px 0 24px;
}

.lus-add-property-listing-map {
    /* Leaflet uses z-indexes up to 1000 for its panes and buttons; contain
       them so the address suggestions list always opens above the map. */
    position: relative;
    z-index: 0;
    isolation: isolate;
    height: 340px;
    border-radius: 22px;
    overflow: hidden;
    background: #eef0f3;
    box-shadow: 0 0 0 1px var(--lus-hairline-strong, rgba(29, 29, 31, 0.14));
}

@media (max-width: 640px) {
    .lus-add-property-listing-map {
        height: 280px;
        border-radius: 18px;
    }
}

.lus-add-property-listing-map-hint {
    margin: 10px 2px 0;
    color: var(--lus-muted, #6e6e73);
    font-size: 13px;
    line-height: 1.5;
}

/* The draggable pin: a brand-red teardrop with a white centre. */
.lus-add-property-listing-map-pin {
    background: none;
    border: 0;
}

.lus-add-property-listing-map-pin span {
    position: absolute;
    left: 4px;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50% 50% 50% 0;
    background: var(--lus-accent, #d64541);
    transform: rotate(-45deg);
    box-shadow: 0 6px 12px -4px rgba(29, 29, 31, 0.45);
    cursor: grab;
    transition: transform 0.3s var(--lus-ease, ease);
}

.lus-add-property-listing-map-pin span::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
}

.lus-add-property-listing-map-pin:active span,
.lus-add-property-listing-map-pin.leaflet-drag-target span {
    cursor: grabbing;
    transform: rotate(-45deg) scale(1.12);
}

.lus-add-property-listing-map .leaflet-control-zoom a {
    border-radius: 10px;
}

/* Basic Info: collapsible guest settings */
#lus-add-property-listing-app .lus-guest-advanced-toggle {
    background: none;
    border: 0;
    padding: 8px 0;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
#lus-add-property-listing-app .lus-guest-advanced-toggle::after {
    content: ' \25BE';
}
#lus-add-property-listing-app .lus-guest-advanced-toggle[aria-expanded="true"]::after {
    content: ' \25B4';
}
#lus-add-property-listing-app .lus-guest-advanced-body > .col-md-3 {
    width: 100%;
    padding-top: 10px;
}

#lus-add-property-listing-app .lus-location-advanced {
    clear: both;
}
#lus-add-property-listing-app .lus-location-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 16px;
    margin-top: 16px;
}
#lus-add-property-listing-app .lus-location-fields > .col-md-3 {
    float: none;
    width: auto;
    padding: 0;
}
@media (max-width: 640px) {
    #lus-add-property-listing-app .lus-location-fields { grid-template-columns: 1fr; }
}

/* The theme draws its own checkmark (input:checked:before) absolutely
   positioned; on these native-looking checkbox cards it landed in the
   card's top-left corner. */
#lus-add-property-listing-app .lus-add-property-listing-checkbox input::before,
#lus-add-property-listing-app .lus-add-property-listing-checkbox input:checked::before {
    content: none !important;
    display: none !important;
}

#lus-add-property-listing-app .lus-add-property-listing-radio-desc {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: #666;
}

#lus-add-property-listing-app .lus-add-property-listing-save-draft {
    margin-left: auto;
    margin-right: 12px;
    padding: 12px 20px;
    border: 1px solid #ddd;
    border-radius: 999px;
    background: #fff;
    font-weight: 600;
    cursor: pointer;
}
#lus-add-property-listing-app .lus-add-property-listing-save-draft:disabled {
    opacity: .6;
    cursor: default;
}

/* ------------------------------------------------------ edit mode --- */

/* The theme's old per-listing side menu (Description / Price / Images ...);
   editing uses the overview cards instead. */
.property_edit_menu {
    display: none !important;
}

/* Edit layout: section list on the left, the open section on the right */
.lus-ed {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 80px;
    align-items: start;
}
.lus-ed-nav {
    position: sticky;
    top: 24px;
}
.lus-ov-back {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 14px;
    color: #555;
    text-decoration: none;
}
.lus-ed-listing { margin: 0 0 8px; font-size: 22px; line-height: 1.25; }
.lus-ov-meta {
    display: flex;
    gap: 14px;
    align-items: center;
    margin: 0 0 20px;
    font-size: 14px;
}
.lus-ov-status {
    padding: 3px 10px;
    border-radius: 999px;
    background: #f1f1f1;
    font-weight: 600;
    font-size: 12px;
}
.lus-ov-status.is-publish { background: #e3f5e9; color: #1d7a3e; }
.lus-ov-status.is-pending { background: #fff3d6; color: #8a6200; }
.lus-ed-list { list-style: none; margin: 0; padding: 0; }
.lus-ed-group {
    margin: 18px 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #999;
}
.lus-ed-item {
    position: relative;
    display: block;
    padding: 12px 16px;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition: background .15s ease;
}
.lus-ed-item:hover { background: #f5f5f5; }
.lus-ed-item.is-active {
    background: color-mix(in srgb, var(--lus-auth-accent, #d64541) 8%, #fff);
    box-shadow: inset 3px 0 0 var(--lus-auth-accent, #d64541);
}
.lus-ed-item.is-active .lus-ed-item-title { color: var(--lus-auth-accent, #d64541); }
.lus-ed-item-title { display: block; font-size: 15px; font-weight: 600; color: #222; }
.lus-ed-item-sub {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lus-ed-item-sub.is-empty { color: #b0b0b0; font-style: italic; }
.lus-ed-item.has-missing::after {
    content: '';
    position: absolute;
    top: 16px;
    right: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lus-auth-accent, #d64541);
}
.lus-ed-main { min-width: 0; }

@media (max-width: 900px) {
    .lus-ed { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .lus-ed-nav { position: static; }

    /* Section picker: one line ("Editing: Pricing"), the list opens as a bottom sheet. */
    .lus-ed-picker {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin: 4px 0 8px;
        padding: 14px 18px;
        border: 1px solid #e6e6e6;
        border-radius: 14px;
        background: #fff;
        text-align: left;
        cursor: pointer;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    }
    .lus-ed-picker-label { display: block; font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: .06em; }
    .lus-ed-picker-title { display: block; margin-top: 2px; font-size: 16px; font-weight: 600; color: #222; }
    .lus-ed-picker::after { content: '\25BE'; font-size: 16px; color: #555; }
    .lus-ed-picker.has-missing .lus-ed-picker-label::after {
        content: '';
        display: inline-block;
        width: 7px;
        height: 7px;
        margin-left: 8px;
        border-radius: 50%;
        background: var(--lus-auth-accent, #d64541);
    }

    .lus-ed-list, .lus-ed-nav > .lus-ed-sheet-backdrop { display: none; }
    /* The theme styles bare links (red, its own padding/line-height), which made this
       look lopsided: pin the type and give it a real centred pill. */
    a.lus-ed-next,
    a.lus-ed-next:visited {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 100%;
        min-height: 48px;
        margin: 20px 0 0;
        padding: 0 20px;
        border-radius: 999px;
        background: #f5f5f5;
        font-size: 15px;
        line-height: 1.2;
        font-weight: 600;
        color: #222;
        text-align: center;
        text-decoration: none;
    }
    a.lus-ed-next:hover,
    a.lus-ed-next:active { background: #ececec; color: #222; }
}
@media (min-width: 901px) {
    .lus-ed-picker, .lus-ed-next { display: none !important; }
}

/* The bottom sheet is built on <body> (a fixed element inside the dashboard
   would be positioned against an animated ancestor, not the screen). */
.lus-ed-sheet-backdrop-body {
    position: fixed;
    inset: 0;
    z-index: 100002;
    background: rgba(0, 0, 0, .45);
}
.lus-ed-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100003;
    max-height: 78vh;
    overflow-y: auto;
    padding: 10px 16px 28px;
    border-radius: 22px 22px 0 0;
    background: #fff;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .2);
    animation: lus-sheet-up .28s cubic-bezier(.32, .72, 0, 1);
}
@keyframes lus-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.lus-ed-sheet-handle { width: 44px; height: 4px; margin: 0 auto 8px; border-radius: 2px; background: #ddd; }
.lus-ed-sheet .lus-ed-list { display: block; list-style: none; margin: 0; padding: 0; }
.lus-ed-sheet .lus-ed-group { display: block; }
.lus-ed-sheet .lus-ed-item { display: block; padding: 14px 16px; }
.lus-ed-sheet .lus-ed-item-sub { display: block; }
.lus-ed-sheet .lus-ed-item.has-missing::after { top: 20px; right: 16px; }
@media (max-width: 900px) {
    .lus-ed-savebar-spacer { height: 150px; }
    .lus-ed-list { position: relative; }
}
.lus-ed-save { white-space: nowrap; }
@media (max-width: 900px) {
    .lus-ed-savebar { padding: 10px 12px; gap: 10px; }
    .lus-ed-savebar-status { font-size: 13px; line-height: 1.3; }
}

/* ===================================================== edit shell ===== */

.lus-edit-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    z-index: 100001;
    padding: 12px 22px;
    border-radius: 999px;
    background: #222;
    color: #fff;
    font-size: 14px;
    transition: opacity .6s ease;
}
.lus-edit-toast.is-hiding { opacity: 0; }

.lus-ed-nav { min-width: 0; }
.lus-ed-list {
    width: 100%;
    box-sizing: border-box;
}
.lus-ed-item.is-active .lus-ed-item-title { color: var(--lus-auth-accent, #d64541); }

/* One iframe per section, stacked; only the active one shows. */
.lus-ed-frames { position: relative; }
.lus-ed-frame { display: none; position: relative; }
.lus-ed-frame.is-active { display: block; }
.lus-ed-iframe {
    display: block;
    width: 100%;
    min-height: 480px;
    border: 0;
}
.lus-ed-frame.is-loading .lus-ed-iframe { visibility: hidden; }
.lus-ed-loading {
    display: none;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    justify-content: center;
}
.lus-ed-frame.is-loading .lus-ed-loading { display: flex; }
.lus-ed-loading span {
    width: 32px;
    height: 32px;
    border: 3px solid #e6e6e6;
    border-top-color: #222;
    border-radius: 50%;
    animation: lus-spin .8s linear infinite;
}
@keyframes lus-spin { to { transform: rotate(360deg); } }

/* The iframe documents themselves. */
body.lus-edit-embed {
    background: #fff;
    margin: 0;
    padding: 0 4px 24px;
    overflow-y: hidden;
}
body.lus-edit-embed #lus-add-property-listing-app { padding: 0; }
/* Theme chrome that renders even in the bare iframe documents. */
body.lus-edit-embed .wp-bottom-menu,
body.lus-edit-embed .backtop,
body.lus-edit-embed #cover {
    display: none !important;
}
/* The shell's save bar replaces the frame's own button row. */
body.lus-edit-embed .lus-add-property-listing-dashboard-actions {
    display: none;
}
/* Contain the floated blocks some steps use (e.g. the custom pricing table)
   so the document's height includes them. */
body.lus-edit-embed #lus-add-property-listing-app .lus-add-property-listing-stage-inner::after {
    content: '';
    display: table;
    clear: both;
}

/* ------------------------------------------------ save bar + dialog --- */

.lus-ed-savebar {
    /* Fixed (not sticky): an ancestor of the dashboard has overflow:hidden.
       lus-edit-shell.js sets left/width/bottom to match the section column. */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 14px 4px;
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid #eee;
}
.lus-ed-savebar.is-hidden { display: none; }
.lus-ed-savebar-spacer { height: 76px; }
.lus-ed-savebar-status { font-size: 14px; color: #777; }
.lus-ed-save {
    padding: 12px 28px;
    border: 0;
    border-radius: 999px;
    background: var(--lus-auth-accent, #d64541);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s ease, background .2s ease;
}
.lus-ed-save:disabled {
    background: #ececec;
    color: #aaa;
    cursor: default;
}

.lus-ed-dialog {
    position: fixed;
    inset: 0;
    z-index: 100002;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .45);
}
.lus-ed-dialog-box {
    width: min(420px, calc(100% - 32px));
    padding: 28px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.lus-ed-dialog-box h3 { margin: 0 0 8px; font-size: 20px; }
.lus-ed-dialog-box p { margin: 0 0 22px; color: #666; }
.lus-ed-dialog-actions { display: flex; flex-direction: column; gap: 10px; }
.lus-ed-dialog-actions button {
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid #ddd;
    background: #fff;
    font-weight: 600;
    cursor: pointer;
}
.lus-ed-dialog-actions .lus-ed-dialog-save {
    border-color: var(--lus-auth-accent, #d64541);
    background: var(--lus-auth-accent, #d64541);
    color: #fff;
}

/* ------------------------------------------------- section spacing --- */

/* Pricing: "How should guests book?" -- cards need room between them and
   around the heading, and the price field below needs space above it. */
#lus-add-property-listing-app .lus-booking-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    clear: both;
    margin: 8px 0 36px;
}
#lus-add-property-listing-app .lus-booking-options .lus-add-property-listing-pricing-modes-question {
    margin: 0 0 4px;
}
#lus-add-property-listing-app .lus-calendar-visibility {
    margin: 0 0 28px;
}
#lus-add-property-listing-app .lus-location-fields {
    margin-top: 28px;
}

/* Custom pricing table + price notes: the theme's compact table fields. The
   flow's general big, rounded input style made every cell tall and pushed the
   table far past the column. */
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-table input,
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-table select,
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-table textarea,
#lus-add-property-listing-app #wprentals_price_notes_wrap input,
#lus-add-property-listing-app #wprentals_price_notes_wrap textarea {
    height: auto;
    min-height: 0;
    padding: 5px 8px;
    font-size: 12px;
    line-height: 1.4;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    box-shadow: none;
    background-color: #fff;
}
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-table select {
    padding-right: 20px;
}
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-table textarea {
    height: 56px;
}
/* The table is wider than the column; keep its sideways scrollbar visible. */
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-scroll-wrap {
    padding-bottom: 8px;
}
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-scroll-wrap::-webkit-scrollbar {
    height: 8px;
}
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-scroll-wrap::-webkit-scrollbar-thumb {
    background: #c9c9c9;
    border-radius: 4px;
}
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-scroll-wrap::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}
/* Slightly narrower columns so the table is as compact as it can be. */
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-table th:nth-child(1),
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-table td:nth-child(1) { width: 125px; min-width: 125px; }
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-table th:nth-child(2),
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-table td:nth-child(2),
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-table th:nth-child(3),
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-table td:nth-child(3) { width: 100px; min-width: 100px; }
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-table th:nth-child(4),
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-table td:nth-child(4) { width: 130px; min-width: 130px; }
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-table th:nth-child(5),
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-table td:nth-child(5) { width: 75px; min-width: 75px; }
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-table th:nth-child(6),
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-table td:nth-child(6),
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-table th:nth-child(7),
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-table td:nth-child(7) { width: 140px; min-width: 140px; }
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-table th:nth-child(8),
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-table td:nth-child(8),
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-table th:nth-child(9),
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-table td:nth-child(9) { width: 70px; min-width: 70px; }
#lus-add-property-listing-app #wprentals_custom_pricing_wrap .sp-table {
    min-width: 0;
}

.lus-ed-pending {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fff8e6;
    border: 1px solid #f3dfa0;
    font-size: 14px;
    color: #5c4a00;
}
.lus-ed-pending small { color: #7a6a2a; }
.lus-ed-pending-cancel {
    align-self: flex-start;
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: #8a6200;
    font-weight: 600;
    cursor: pointer;
}

/* Save bar: soft shadow instead of a hard line, and in the page (not fixed)
   once the end of the form is on screen. */
.lus-ed-savebar {
    border-top: 0;
    box-shadow: 0 -8px 20px rgba(0, 0, 0, .05);
}
.lus-ed-savebar.is-docked {
    position: static;
    width: auto;
    padding: 20px 0 0;
    background: transparent;
    box-shadow: none;
}
.lus-ed-savebar.is-docked + .lus-ed-savebar-spacer { display: none; }

/* Save bar, take 2: no white strip across the form. The bar itself is see-through
   and lets clicks pass; only the status chip and the button are solid, so it
   floats over the form instead of hiding it. */
.lus-ed-savebar {
    background: transparent;
    box-shadow: none;
    border-top: 0;
    padding: 12px 4px 16px;
    pointer-events: none;
}
.lus-ed-savebar > * { pointer-events: auto; }
.lus-ed-savebar-status:not(:empty) {
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    color: #555;
}
.lus-ed-save {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.lus-ed-save:disabled { box-shadow: 0 4px 12px rgba(0, 0, 0, .10); }
.lus-ed-savebar.is-docked { padding: 20px 0 0; pointer-events: auto; }
.lus-ed-savebar.is-docked .lus-ed-save,
.lus-ed-savebar.is-docked .lus-ed-savebar-status:not(:empty) { box-shadow: none; }
.lus-ed-savebar.is-docked .lus-ed-savebar-status:not(:empty) { background: transparent; padding: 0; }

@media (max-width: 900px) {
    /* Phones: a full-width Save button with the status above it. */
    .lus-ed-savebar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 12px 12px;
    }
    .lus-ed-save { width: 100%; padding: 15px 20px; }
    .lus-ed-savebar-status:not(:empty) { align-self: center; }
    .lus-ed-savebar.is-docked { padding: 16px 0 0; }
    .lus-ed-savebar.is-docked .lus-ed-save { width: 100%; }
}

/* ------------------------------------------------- custom details --- */
#lus-add-property-listing-app .lus-custom-advanced { clear: both; margin-top: 8px; }
#lus-add-property-listing-app .lus-custom-details { padding: 16px 0 4px; }
#lus-add-property-listing-app .lus-custom-details-title { margin: 0 0 8px; font-size: 18px; }
#lus-add-property-listing-app .lus-custom-details-explain,
#lus-add-property-listing-app .lus-custom-details-where,
#lus-add-property-listing-app .lus-custom-details-tip {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
}
#lus-add-property-listing-app .lus-custom-details-where {
    padding: 10px 14px;
    border-radius: 10px;
    background: #f6f6f7;
    color: #333;
}
#lus-add-property-listing-app .lus-custom-details-tip { color: #888; }
#lus-add-property-listing-app .lus-cd-row,
#lus-add-property-listing-app .lus-cd-add {
    display: grid;
    grid-template-columns: 1fr 1.4fr auto;
    gap: 10px;
    align-items: center;
    margin: 0 0 10px;
}
#lus-add-property-listing-app .lus-cd-row .form-control,
#lus-add-property-listing-app .lus-cd-add .form-control { margin: 0; }
#lus-add-property-listing-app .lus-cd-remove {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #f1f1f1;
    font-size: 20px;
    line-height: 1;
    color: #666;
    cursor: pointer;
}
#lus-add-property-listing-app .lus-cd-remove:hover { background: #ffe3e3; color: #c0392b; }
#lus-add-property-listing-app .lus-cd-add {
    margin-top: 14px;
    padding: 14px;
    border-radius: 12px;
    background: #f6f6f7;
}
#lus-add-property-listing-app .lus-cd-add-btn {
    padding: 11px 20px;
    border: 0;
    border-radius: 999px;
    background: #222;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
/* (The edit page shows each section in a ~570px frame, so only stack on real phones.) */
@media (max-width: 440px) {
    #lus-add-property-listing-app .lus-cd-row,
    #lus-add-property-listing-app .lus-cd-add { grid-template-columns: 1fr; }
    #lus-add-property-listing-app .lus-cd-remove { justify-self: end; }
}
#lus-add-property-listing-app .lus-add-property-listing-save-draft { white-space: nowrap; }
@media (max-width: 480px) {
    #lus-add-property-listing-app .lus-add-property-listing-save-draft { padding: 12px 14px; font-size: 14px; }
}

/* Wizard steps size to their content: no minimum height, so a short step
   (like the title) isn't followed by a tall empty gap before Back / Next. */
.lus-wz-frames .lus-ed-iframe { min-height: 0; }

/* Next button: the arrow circle must never be squeezed. */
#lus-add-property-listing-app .lus-add-property-listing-bottombar-next::after {
    flex: 0 0 34px;
}

/* Phones: Back, Save as draft and Next share ONE compact row. Back and Save take only the
   room they need; Next takes whatever is left. (This replaces three earlier layers of
   phone rules that stacked Back underneath on its own line.) */
@media (max-width: 480px) {
    #lus-add-property-listing-app .lus-add-property-listing-dashboard-actions {
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 6px;
        margin-top: 22px;
    }
    #lus-add-property-listing-app .lus-add-property-listing-dashboard-actions .lus-add-property-listing-bottombar-back {
        order: 1;
        flex: 0 0 auto;
        margin: 0;
        padding: 8px 6px;
        font-size: 13px;
        white-space: nowrap;
    }
    #lus-add-property-listing-app .lus-add-property-listing-dashboard-actions .lus-add-property-listing-save-draft {
        order: 2;
        flex: 0 0 auto;
        margin: 0;
        padding: 9px 12px;
        font-size: 13px;
        white-space: nowrap;
    }
    #lus-add-property-listing-app .lus-add-property-listing-dashboard-actions .lus-add-property-listing-bottombar-next {
        order: 3;
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
        gap: 8px;
        padding: 5px 5px 5px 14px;
        font-size: 14px;
        white-space: nowrap;
        justify-content: space-between;
    }
    #lus-add-property-listing-app .lus-add-property-listing-dashboard-actions .lus-add-property-listing-bottombar-next::after {
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
}

/* Guest footer: Next always on the right, even when Back is not shown. */
.lus-add-property-listing-bottombar .lus-add-property-listing-bottombar-next {
    margin-left: auto;
}

/* Popups inside a step's iframe (e.g. the price-adjustment calendar's "Custom
   Price" form). The theme centres its dialogs with left:50% and a fixed negative
   margin, which only works at full browser width: in the narrow frame the dialog
   hung off to the side and was cut off. Centre it with auto margins instead and
   keep the dimmer light. */
body.lus-edit-embed .modal-dialog {
    left: auto !important;
    right: auto !important;
    width: min(560px, calc(100% - 32px)) !important;
    max-width: none !important;
    margin: 24px auto !important;
    transform: none !important;
}
body.lus-edit-embed .modal-backdrop,
body.lus-edit-embed .modal-backdrop.in {
    opacity: .45 !important;
    background: #222 !important;
}
body.lus-edit-embed .modal { overflow-x: hidden; }

/* Scrolling a frame into view must leave room for the site header. */
.lus-ed-frames, .lus-wz-frames { scroll-margin-top: 150px; }

/* ----------------------------------- house rules: allowed / not allowed --- */

#lus-add-property-listing-app .lus-hr-list { display: grid; gap: 14px; margin-bottom: 24px; }
#lus-add-property-listing-app .lus-hr-rule { margin: 0; padding: 16px 18px; border: 0; border-radius: 18px; background: #fff; box-shadow: var(--lus-bezel, 0 0 0 1px #e2e2e2); }
#lus-add-property-listing-app .lus-hr-title { float: left; display: block; width: 100%; margin: 0 0 12px; padding: 0; border: 0; font-size: 16px; font-weight: 600; color: #222; }
#lus-add-property-listing-app .lus-hr-ico { display: grid; place-items: center; width: 22px; height: 22px; font-style: normal; }
#lus-add-property-listing-app .lus-hr-ico svg, #lus-add-property-listing-app .lus-hr-ico img { width: 22px; height: 22px; object-fit: contain; }
#lus-add-property-listing-app .lus-hr-ico svg:not([fill="none"]) { fill: currentColor; }
#lus-add-property-listing-app .lus-hr-choices { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#lus-add-property-listing-app .lus-hr-choice { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid #e2e2e2; border-radius: 12px; background: #fff; font-size: 15px; font-weight: 400; color: #444; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
#lus-add-property-listing-app .lus-hr-choice:hover { border-color: #b5b5b5; }
#lus-add-property-listing-app .lus-hr-choice input { position: absolute; opacity: 0; pointer-events: none; }
#lus-add-property-listing-app .lus-hr-choice .lus-hr-ico { flex: 0 0 auto; color: #8a8a8a; }
#lus-add-property-listing-app .lus-hr-choice:has(input:focus-visible) { outline: 2px solid var(--lus-accent, #d64541); outline-offset: 2px; }
#lus-add-property-listing-app .lus-hr-choice--allowed:has(input:checked) { border-color: #1f7a45; background: #f1faf4; color: #14532d; box-shadow: 0 0 0 1px #1f7a45; }
#lus-add-property-listing-app .lus-hr-choice--allowed:has(input:checked) .lus-hr-ico { color: #1f7a45; }
#lus-add-property-listing-app .lus-hr-choice--banned:has(input:checked) { border-color: var(--lus-accent, #d64541); background: color-mix(in srgb, var(--lus-accent, #d64541) 5%, #fff); color: #222; box-shadow: 0 0 0 1px var(--lus-accent, #d64541); }
#lus-add-property-listing-app .lus-hr-choice--banned:has(input:checked) .lus-hr-ico { color: var(--lus-accent, #d64541); }
@media (max-width: 480px) { #lus-add-property-listing-app .lus-hr-choices { grid-template-columns: 1fr; } }

/* house rules: pick which rules to set first, then answer them */
#lus-add-property-listing-app .lus-hr-rule[hidden] { display: none; }
#lus-add-property-listing-app .lus-hr-pick-label { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: #222; }
#lus-add-property-listing-app .lus-hr-pick { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
#lus-add-property-listing-app .lus-hr-chip { position: relative; margin: 0; padding: 9px 16px; border: 1px solid #d6d6d6; border-radius: 999px; background: #fff; font-size: 15px; font-weight: 400; color: #333; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
#lus-add-property-listing-app .lus-hr-chip:hover { border-color: #222; }
#lus-add-property-listing-app .lus-hr-chip input { position: absolute; opacity: 0; pointer-events: none; }
#lus-add-property-listing-app .lus-hr-chip:has(input:checked) { border-color: #222; background: #222; color: #fff; }
#lus-add-property-listing-app .lus-hr-chip:has(input:focus-visible) { outline: 2px solid var(--lus-accent, #d64541); outline-offset: 2px; }