/**
 * Listing shortcodes — uses GeneratePress Global Colors only.
 * Variables: contrast, contrast-2, contrast-3, base, base-2, base-3, accent, accent-2.
 * accent-2 is used sparingly (buttons and accent elements only) so it can be changed to a brighter blue in Customizer.
 * Headings and other dark UI use contrast-2.
 */
:root {
    --listing-accent: var(--accent);
    --listing-bg: var(--base-3);
    --listing-bg-soft: var(--base-2);
    --listing-border: var(--base);
    --listing-text: var(--contrast-2);
    --listing-text-muted: var(--contrast-3);
    /* Headings, titles, rate text — neutral dark (contrast-2) */
    --listing-blue: var(--contrast-2);
    --listing-blue-bg: var(--listing-bg-soft);
    /* Buttons and accent-like elements only — accent-2 (may become brighter blue later) */
    --listing-btn-bg: var(--accent-2);
    --listing-btn-bg-hover: var(--accent-2);
    --listing-btn-radius: 999px;
    --listing-radius: 12px;
    --listing-radius-sm: 8px;
    --listing-radius-bar: 8px;
    --listing-shadow: 0 4px 12px color-mix(in srgb, var(--contrast) 8%, transparent);
    --listing-shadow-hover: 0 8px 24px color-mix(in srgb, var(--contrast) 12%, transparent);
    --listing-divider: color-mix(in srgb, var(--contrast) 10%, transparent);
}

/* ----- Search bar (BlackSwan-style: icon left, label+value right) ----- */
.listing-search-wrap {
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Wrapper so datepicker can be positioned directly below form (no overlap) */
.listing-search-form-bar {
    position: relative;
}

/* Form bar (z-index so datepicker wrap can sit above when open) */
.listing-search-bar .listing-search-form {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    background: var(--base-3);
    border-radius: 6px;
    border: 1px solid var(--listing-border);
    box-shadow: var(--listing-shadow);
}

/* Submit field: no separator, no hover bg */
.listing-search-bar .listing-search-submit-field {
    flex: 0 0 auto;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    border-right: none;
    background: transparent !important;
}

/* Each field: icon on the left, text on the right */
.listing-search-bar .listing-search-field {
    flex: 1 1 0%;
    min-width: 0;
    padding: 14px 20px;
    border-right: 1px solid var(--listing-divider);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background 0.15s ease;
    position: relative;
}
.listing-search-bar .listing-search-field:hover {
    background: transparent;
}
/* No hover on date fields — avoid random input hover effects */
.listing-search-bar .listing-search-checkin-field:hover,
.listing-search-bar .listing-search-checkout-field:hover {
    background: transparent;
}
.listing-search-bar .listing-search-field:last-of-type {
    border-right: none;
}

/* Text container inside field (label stacked above value) */
.listing-search-field-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

/* Labels: small, muted, uppercase */
.listing-search-bar .listing-search-label {
    font-size: 0.7em;
    font-weight: 500;
    color: var(--listing-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    display: block;
    line-height: 1;
    cursor: pointer;
}

/* Values: bold, dark — nuke all GP button defaults */
.listing-search-bar .listing-search-location-value,
.listing-search-bar .listing-search-checkin,
.listing-search-bar .listing-search-checkout,
.listing-search-bar .listing-search-guests-value {
    all: unset;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--listing-text);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    line-height: 1.4;
    display: block;
    width: 100%;
    box-sizing: border-box;
}
.listing-search-bar .listing-search-checkin::placeholder,
.listing-search-bar .listing-search-checkout::placeholder {
    color: var(--contrast-3);
    font-weight: 400;
}

/* Icons: 18px, muted, on the left */
.listing-search-bar .listing-search-icon {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
    background-color: var(--contrast-3);
}
.listing-search-icon-pin { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat; }
.listing-search-icon-calendar { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center/contain no-repeat; }
.listing-search-icon-guests { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center/contain no-repeat; }

/* Submit button: clean, no lift animation */
/* Search submit: match default site button (gb-button) */
.listing-search-bar .listing-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    font-size: 1em;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    padding: 5px 20px;
    border-radius: var(--listing-btn-radius);
    background-color: var(--listing-btn-bg);
    color: var(--base-3);
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    box-sizing: border-box;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.listing-search-bar .listing-search-submit:hover,
.listing-search-bar .listing-search-submit:active {
    background-color: var(--accent);
    color: var(--base-3);
}
.listing-search-bar .listing-search-submit.is-loading {
    opacity: 0.7;
    pointer-events: none;
}
.listing-search-bar .listing-search-submit:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Error message */
.listing-search-error {
    margin: 8px 0 0;
    padding: 8px 16px;
    font-size: 0.85em;
    color: var(--contrast);
    background: color-mix(in srgb, var(--contrast) 5%, var(--base-3));
    border: 1px solid color-mix(in srgb, var(--contrast) 15%, var(--base-3));
    border-radius: 4px;
}

/* ----- Location dropdown ----- */
.listing-search-location-field { position: relative; }
.listing-search-location-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--base-3);
    border-radius: 8px;
    box-shadow: var(--listing-shadow-hover);
    padding: 6px 0;
    z-index: 500;
    min-width: 220px;
    border: 1px solid var(--listing-border);
}
.listing-search-location-dropdown[aria-hidden="true"] { display: none; }
.listing-search-location-dropdown[aria-hidden="false"] { display: block; }
.listing-search-location-option {
    all: unset;
    display: block;
    width: 100%;
    padding: 4px 18px;
    font-size: 0.9em;
    font-weight: normal !important;
    color: var(--listing-text);
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
    transition: background 0.1s ease;
}
.listing-search-location-option:hover {
    background: var(--base);
    color: var(--listing-text);
}
.listing-search-location-option-any { font-style: italic; color: var(--contrast-3); }
.listing-search-location-option-any:hover {
    background: var(--base);
    color: var(--listing-text-muted);
}

/* ----- Guests value + dropdown ----- */
.listing-search-guests-field { position: relative; }
.listing-search-guests-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--base-3);
    border-radius: 8px;
    box-shadow: var(--listing-shadow-hover);
    padding: 16px 20px;
    z-index: 500;
    min-width: 180px;
    border: 1px solid var(--listing-border);
}
.listing-search-guests-dropdown[aria-hidden="true"] { display: none; }
.listing-search-guests-dropdown[aria-hidden="false"] { display: block; }
.listing-search-guests-label {
    font-size: 0.7em;
    font-weight: 500;
    color: var(--listing-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 12px;
}
.listing-search-guests-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}
.listing-search-guests-minus,
.listing-search-guests-plus {
    all: unset;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--listing-border);
    background: var(--base-3);
    font-size: 1em;
    cursor: pointer;
    color: var(--listing-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    box-sizing: border-box;
}
.listing-search-guests-minus:hover,
.listing-search-guests-plus:hover {
    border-color: var(--contrast-3);
    background: var(--base);
    color: var(--listing-text);
}
.listing-search-guests-minus:focus,
.listing-search-guests-plus:focus {
    outline: none !important;
    background: var(--base-3) !important;
    border-color: var(--listing-border) !important;
    color: var(--listing-text) !important;
}
.listing-search-guests-minus:disabled,
.listing-search-guests-plus:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--base);
}
.listing-search-guests-minus:disabled:hover,
.listing-search-guests-plus:disabled:hover {
    border-color: var(--listing-border);
    background: var(--base);
}
.listing-search-guests-num {
    font-weight: 500;
    font-size: 1em;
    min-width: 20px;
    text-align: center;
    color: var(--listing-text);
}

/* ----- Date picker: positioned directly below form (like location/guests dropdowns), no overlap. ----- */
.listing-search-datepicker-wrap {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 100;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible;
}
.listing-search-datepicker-wrap[aria-hidden="false"] {
    z-index: 1001;
}
.listing-search-datepicker-wrap .flatpickr-calendar {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    display: block !important;
    border: none !important;
}
.listing-search-datepicker-wrap .flatpickr-calendar.static {
    position: absolute !important;
    top: calc(100% + 20px) !important;
}
.listing-search-datepicker-wrap .flatpickr-calendar:before {
    display: none;
}

/* When Flatpickr injects calendar into form (e.g. .flatpickr-wrapper next to check-in input) */
.listing-search-form-bar .flatpickr-calendar.static,
.listing-search-form .flatpickr-calendar.static {
    position: absolute !important;
    top: calc(100% + 20px) !important;
    left: -50px !important;
    right: auto !important;
}
.flatpickr-calendar:before,
.flatpickr-calendar:after {
    display: none !important
}
.listing-search-form-bar .flatpickr-calendar.open,
.listing-search-form .flatpickr-calendar.open {
    display: block;
    background: var(--base-3) !important;
    border-radius: 8px;
    box-shadow: var(--listing-shadow-hover);
    border: 1px solid var(--listing-border);
    padding: 16px;
}

/* GF-style calendar container (match .ui-datepicker .ui-widget-content) */
.listing-search-datepicker-wrap .flatpickr-calendar.open {
    display: block;
    background: var(--base-3) !important;
    border-radius: 6px;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--contrast) 15%, transparent);
    border: 1px solid var(--contrast-3);
    padding: 12px 14px;
    font-family: inherit;
}
/* GF-style header (match .ui-datepicker-header): prev / title / next */
.listing-search-datepicker-wrap .flatpickr-months {
    border-bottom: 1px solid var(--listing-divider);
    padding-bottom: 10px;
    margin-bottom: 10px;
    position: relative;
    min-height: 32px;
}
.listing-search-datepicker-wrap .flatpickr-current-month {
    font-size: 0.9em;
    font-weight: 500;
    color: var(--listing-text);
    padding: 4px 0 0;
    height: auto;
    line-height: 1.3;
}
.listing-search-datepicker-wrap .flatpickr-current-month .numInputWrapper {
    width: auto;
}
.listing-search-datepicker-wrap .flatpickr-current-month .numInputWrapper input {
    font-size: 0.9em;
    font-weight: 500;
    color: var(--listing-text);
    padding: 4px 8px;
    border: 1px solid var(--contrast-3);
    border-radius: 4px;
    background: var(--base-3);
    min-width: 3em;
}
.listing-search-datepicker-wrap .flatpickr-months .flatpickr-prev-month,
.listing-search-datepicker-wrap .flatpickr-months .flatpickr-next-month {
    padding: 6px;
    top: 0;
    border-radius: 4px;
}
.listing-search-datepicker-wrap .flatpickr-months .flatpickr-prev-month:hover,
.listing-search-datepicker-wrap .flatpickr-months .flatpickr-next-month:hover {
    background: transparent;
}
.listing-search-datepicker-wrap .flatpickr-months .flatpickr-prev-month svg,
.listing-search-datepicker-wrap .flatpickr-months .flatpickr-next-month svg {
    fill: var(--listing-text);
    width: 14px;
    height: 14px;
}
/* GF-style weekdays row (match thead th: Mo Tu We Th Fr Sa Su) */
.listing-search-datepicker-wrap .flatpickr-weekdaycontainer {
    display: flex;
    border: none;
}
.listing-search-datepicker-wrap .flatpickr-weekday {
    color: var(--listing-text);
    font-size: 0.7em;
    font-weight: 500;
    text-transform: none;
    flex: 1;
    max-width: 36px;
}
/* Selected date: accent colour (match GF highlight) */
.listing-search-datepicker-wrap .flatpickr-day.selected,
.listing-search-datepicker-wrap .flatpickr-day.startRange,
.listing-search-datepicker-wrap .flatpickr-day.endRange {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--base-3) !important;
}
.listing-search-datepicker-wrap .flatpickr-day.selected:hover,
.listing-search-datepicker-wrap .flatpickr-day.startRange:hover,
.listing-search-datepicker-wrap .flatpickr-day.endRange:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--base-3) !important;
}
.listing-search-datepicker-wrap .flatpickr-day.inRange {
    background: color-mix(in srgb, var(--accent) 15%, transparent) !important;
    box-shadow: -5px 0 0 color-mix(in srgb, var(--accent) 15%, transparent), 5px 0 0 color-mix(in srgb, var(--accent) 15%, transparent) !important;
    border-color: transparent !important;
}
/* GF-style day grid (table-like) */
.listing-search-datepicker-wrap .flatpickr-days {
    border: none;
}
.listing-search-datepicker-wrap .flatpickr-day {
    border-radius: 2px;
    color: var(--listing-text);
    max-width: 36px;
    height: 34px;
    line-height: 34px;
    border: 1px solid transparent;
}
/* No hover on calendar days — avoid random input hover effects */
.listing-search-datepicker-wrap .flatpickr-day:hover:not(.selected):not(.startRange):not(.endRange):not(.flatpickr-disabled) {
    background: transparent;
    border-color: transparent;
}
/* Disabled dates: opacity only, no line-through */
.listing-search-datepicker-wrap .flatpickr-day.flatpickr-disabled,
.listing-search-datepicker-wrap .flatpickr-day.prevMonthDay,
.listing-search-datepicker-wrap .flatpickr-day.nextMonthDay,
.listing-search-datepicker-wrap .flatpickr-day.notAllowed {
    opacity: 0.5 !important;
    color: var(--listing-text-muted) !important;
}
.listing-search-datepicker-wrap .flatpickr-day.flatpickr-disabled {
    cursor: not-allowed;
}
.listing-search-datepicker-wrap[aria-hidden="true"] { display: none; }
.listing-search-datepicker-wrap[aria-hidden="false"] {
    display: block;
    position: relative;
}
.listing-search-datepicker-wrap .listing-search-datepicker-inner {
    min-height: 0;
}
.listing-search-datepicker-wrap.showing-checkin #listing-search-datepicker-checkout,
.listing-search-datepicker-wrap.showing-checkout #listing-search-datepicker-checkin {
    display: none !important;
}

/* Archive hero */
.listing-archive-hero { margin-bottom: 1.5em; }

/* Mobile */
@media (max-width: 768px) {
    .listing-search-form-bar .flatpickr-calendar.static,
    .listing-search-form .flatpickr-calendar.static {
        left: -35px !important;
    }
    .listing-search-bar .listing-search-form {
        flex-direction: column;
        padding-top: 20px;
    }
    .listing-search-bar .listing-search-field {
        border-right: none;
        border-bottom: 1px solid var(--listing-divider);
        padding: 12px 16px;
    }
    .listing-search-bar .listing-search-submit-field {
        padding: 12px 16px;
    }
    .listing-search-bar .listing-search-submit {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 5px 20px;
    }
}

/* Desktop: pill-shaped filter bar */
@media (min-width: 769px) {
    .listing-search-bar .listing-search-form {
        border-radius: 999px;
    }
}

/* ----- Listing cards (shortcode: listing_loop, listing_cards) ----- */
.listing-loop-wrap {
    margin: 2em 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.listing-loop {
    display: grid;
    gap: 1.5em;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.listing-loop-cards {
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
@media (max-width: 768px) {
    .listing-loop-cards {
        grid-template-columns: 1fr !important;
        gap: 1.25em;
    }
}
@media (max-width: 640px) {
    .listing-loop-cards {
        grid-template-columns: 1fr !important;
        gap: 1.25em;
    }
}
.listing-card {
    border-radius: var(--listing-radius);
    overflow: hidden;
    box-shadow: var(--listing-shadow);
    border: 1px solid var(--listing-border);
    background: var(--listing-bg);
    transition: box-shadow 0.2s ease;
    min-width: 0;
    max-width: 100%;
}
.listing-card:hover { box-shadow: var(--listing-shadow-hover); }
.listing-card-link { text-decoration: none; color: inherit; display: block; }
.listing-card-image-wrap { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.listing-card-rate {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 2;
    padding: 0.25em 0.5em;
    background: color-mix(in srgb, var(--contrast) 70%, transparent);
    color: var(--base-3);
    font-size: 0.85em;
    font-weight: 500;
    border-radius: 4px;
}
.listing-card-image { width: 100%; height: 100%; object-fit: cover; }
.listing-card-image-placeholder { background: var(--listing-border); min-height: 140px; display: block; }
.listing-card-body { padding: 1.25em; min-width: 0; }
.listing-card-title {
    margin: 0 0 0.35em;
    font-size: 1.15em;
    font-weight: 500;
    color: var(--listing-blue);
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}
.listing-card-meta { margin: 0 0 0.75em; font-size: 0.9em; color: var(--listing-text-muted); line-height: 1.4; }
.listing-card-amenities { display: flex; flex-wrap: wrap; gap: 0.35em; }
.listing-amenity-tag {
    font-size: 0.7em;
    padding: 0.3em 0.6em;
    background: var(--listing-blue-bg);
    color: var(--listing-text);
    border-radius: var(--listing-btn-radius);
}

/* ----- Archive (list only) ----- */
/* Force contained width: layout is right-sidebar but sidebar hidden so content uses normal width. */
.listing-archive-page .widget-area,
.listing-archive-page .inside-right-sidebar {
    display: none;
}
.listing-archive-page .content-area {
    width: 100%;
    float: none;
}

.listing-archive-wrap {
    margin: 2em auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.listing-archive-list {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}
.listing-archive-title { margin: 0 0 0.25em; font-size: 1.75em; font-weight: 500; color: var(--listing-blue); }
/* Subtitle inline with archive H1 (inside .page-title) */
.listing-archive-page .page-title .listing-archive-subtitle {
    font-weight: 400;
    color: var(--listing-text-muted);
}
.listing-archive-page .page-title .listing-archive-subtitle::before {
    content: ': ';
    color: var(--listing-text-muted);
}
.listing-archive-count {
    display: inline-block;
    margin-bottom: 1.25em;
    padding: 0.35em 0.9em;
    background: var(--listing-btn-bg);
    color: var(--base-3);
    border-radius: var(--listing-btn-radius);
    font-size: 0.9em;
    font-weight: 500;
}

.listing-archive-footer {
    max-width: 800px;
    margin: 5em 0 0;
    text-align: left;
}
.listing-archive-footer__title {
    margin: 0 0 0.5em;
    font-weight: 500;
    color: var(--listing-blue);
}
.listing-archive-footer__text {
    margin: 0;
    font-size: 1em;
    line-height: 1.6;
    color: var(--listing-text);
}

/* ----- Single listing ----- */

/* Full-width feature block (gallery) */
.listing-single-feature { margin-bottom: 2em; }
.listing-single-feature .listing-gallery-wrap { margin-bottom: 0; }

/* Two-column body: main-top + main-bottom (left) | sidebar (right). Mobile: main-top, form, main-bottom (form before map). */
.listing-single-body {
    display: grid;
    grid-template-columns: 7fr 3fr;
    grid-template-rows: auto auto;
    gap: 2em;
    align-items: start;
}
.listing-single-main-top { grid-column: 1; grid-row: 1; min-width: 0; }
.listing-single-sidebar {
    grid-column: 2;
    grid-row: 1 / -1;
    position: sticky;
    top: 1.5em;
    width: auto;
    min-width: 400px;
    max-width: 100%;
}
.listing-single-main-bottom { grid-column: 1; grid-row: 2; min-width: 0; }
.listing-single-inquiry {
    background: var(--base-3);
    border: 1px solid var(--listing-border);
    border-radius: 12px;
    padding: 1.5em;
    box-shadow: var(--listing-shadow);
}

/* Single listing inquiry form: same style as search form (fonts, sizes, icons), stacked layout for sidebar */
.listing-inquiry-form {
    position: relative;
}
.listing-inquiry-form .listing-search-form {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}
.listing-inquiry-form .listing-search-field {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
    padding: 12px 0;
    border-right: none;
    border-bottom: 1px solid var(--listing-divider);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.listing-inquiry-form .listing-search-field:last-of-type {
    border-bottom: none;
}
.listing-inquiry-form .listing-search-field:hover {
    background: transparent;
}

/* Match search form: labels — small, uppercase, muted */
.listing-inquiry-form .listing-search-label {
    font-size: 0.7em;
    font-weight: 500;
    color: var(--listing-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    display: block;
    line-height: 1;
    cursor: pointer;
}

/* Match search form: date inputs — bold, dark; explicitly interactive so datepicker opens on click/focus */
.listing-inquiry-form .listing-search-checkin,
.listing-inquiry-form .listing-search-checkout {
    all: unset;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--listing-text);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    line-height: 1.4;
    display: block;
    width: 100%;
    box-sizing: border-box;
    pointer-events: auto;
    min-height: 1.5em;
}
.listing-inquiry-form .listing-search-checkin::placeholder,
.listing-inquiry-form .listing-search-checkout::placeholder {
    color: var(--contrast-3);
    font-weight: 400;
}

/* Match search form: icons — 18px, muted grey */
.listing-inquiry-form .listing-search-icon {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
    background-color: var(--contrast-3);
}

/* Guests controls: minus / value / plus (same as search bar dropdown — circular, 30px, same border/colour) */
.listing-inquiry-form .listing-inquiry-guests-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}
.listing-inquiry-form .listing-inquiry-guests-value {
    font-size: 0.9em;
    font-weight: 500;
    min-width: 20px;
    text-align: center;
    color: var(--listing-text);
}
.listing-inquiry-form .listing-inquiry-guests-minus,
.listing-inquiry-form .listing-inquiry-guests-plus {
    all: unset;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--listing-border);
    background: var(--base-3);
    color: var(--listing-text);
    font-size: 1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.listing-inquiry-form .listing-inquiry-guests-minus:hover,
.listing-inquiry-form .listing-inquiry-guests-plus:hover {
    border-color: var(--contrast-3);
    background: var(--base);
    color: var(--listing-text);
}
.listing-inquiry-form .listing-inquiry-guests-minus:focus,
.listing-inquiry-form .listing-inquiry-guests-plus:focus {
    outline: none !important;
    background: var(--base-3) !important;
    border-color: var(--listing-border) !important;
    color: var(--listing-text) !important;
}
.listing-inquiry-form .listing-inquiry-guests-minus:disabled,
.listing-inquiry-form .listing-inquiry-guests-plus:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--base);
}
.listing-inquiry-form .listing-inquiry-guests-minus:disabled:hover,
.listing-inquiry-form .listing-inquiry-guests-plus:disabled:hover {
    border-color: var(--listing-border);
    background: var(--base);
}

/* Nights value: same as search form value style */
.listing-inquiry-form .listing-inquiry-nights-field .listing-inquiry-nights-value {
    font-size: 0.9em;
    font-weight: 500;
    color: var(--listing-text);
}

/* Price breakdown: same font family/size as form */
.listing-inquiry-form .listing-inquiry-price-breakdown-wrap {
    padding: 12px 0;
    margin: 0;
    font-size: 0.9em;
    color: var(--listing-text);
}
.listing-inquiry-form .listing-inquiry-price-breakdown-wrap .listing-price-breakdown__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1em;
    padding: 0.35em 0;
}
.listing-inquiry-form .listing-inquiry-price-breakdown-wrap .listing-price-breakdown__total {
    font-weight: 500;
    padding-top: 0.25em;
}
.listing-inquiry-form .listing-inquiry-price-breakdown-wrap .listing-price-breakdown__divider {
    margin: 0.5em 0;
    border: none;
    border-top: 1px solid var(--listing-divider);
}

/* Match search form: submit button */
.listing-inquiry-form .listing-inquiry-min-nights {
    font-size: 0.85em;
    color: var(--listing-text-muted);
    margin: 0 0 0.5rem 0;
}

.listing-inquiry-form .listing-search-submit-field {
    padding: 1em 0 0;
    border: none;
}
.listing-inquiry-form .listing-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    font-size: 1em;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    padding: 10px 20px;
    border-radius: var(--listing-btn-radius);
    background-color: var(--listing-btn-bg);
    color: var(--base-3);
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    box-sizing: border-box;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.listing-inquiry-form .listing-search-submit:hover,
.listing-inquiry-form .listing-search-submit:active {
    background-color: var(--accent);
    color: var(--base-3);
}
.listing-inquiry-form .listing-search-datepicker-wrap {
    top: auto;
    left: 0;
    right: 0;
    width: 100%;
}
.listing-inquiry-form #listing-inquiry-datepicker-wrap.showing-checkin #listing-inquiry-datepicker-checkout,
.listing-inquiry-form #listing-inquiry-datepicker-wrap.showing-checkout #listing-inquiry-datepicker-checkin {
    display: none !important;
}

.listing-single-inquiry-rate {
    margin: 0 0 0.5em;
    font-size: 1.15em;
    line-height: 1.3;
}
.listing-single-inquiry-rate__amount {
    font-weight: 500;
    color: var(--accent);
}
.listing-single-inquiry-rate__per {
    font-weight: 400;
    color: var(--listing-text);
    font-size: 0.9em;
}
.listing-single-inquiry-min-stay {
    margin: 0 0 1em;
    font-size: 0.9em;
    color: var(--listing-text-muted);
}

@media (max-width: 1023px) {
    .listing-single-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .listing-single-main-top,
    .listing-single-sidebar,
    .listing-single-main-bottom {
        grid-column: 1;
        grid-row: auto;
    }
    .listing-single-sidebar {
        position: static;
        min-width: 0;
    }
}

/* Gallery: dynamic layout by image count (never looks odd)
 * 1 = 16:9 wide hero; 2 = 4:3 | 4:3; 3 = hero left (2 rows) + 2 cells right; 4 = hero left + 3 right; 5+ = hero left + 4 right — 4:3 cells
 */
.listing-gallery-wrap { margin-bottom: 2em; }

.listing-gallery-grid {
    display: grid;
    gap: 6px;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
}

/* 5 images: hero 50% left spanning 2 rows, 4 cells in 2×2 on the right — 4:3 cells */
.listing-gallery-grid--5 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 8 / 3;
}
.listing-gallery-grid--5 .listing-gallery-hero {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    aspect-ratio: 4 / 3;
}
.listing-gallery-grid--5 .listing-gallery-cell {
    aspect-ratio: 4 / 3;
}

/* 4 images (hero 50% + 3) — 4:3 cells */
.listing-gallery-grid--4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 8 / 3;
}
.listing-gallery-grid--4 .listing-gallery-hero {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    aspect-ratio: 4 / 3;
}
.listing-gallery-grid--4 .listing-gallery-cell {
    aspect-ratio: 4 / 3;
}

/* 3 images (hero + 2) — 4:3 cells */
.listing-gallery-grid--3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 4 / 3;
}
.listing-gallery-grid--3 .listing-gallery-hero {
    grid-row: 1 / 3;
    aspect-ratio: 4 / 3;
}
.listing-gallery-grid--3 .listing-gallery-cell {
    aspect-ratio: 4 / 3;
}

/* 2 images — 4:3 left, 4:3 right */
.listing-gallery-grid--2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    aspect-ratio: 8 / 3;
}
.listing-gallery-grid--2 .listing-gallery-hero,
.listing-gallery-grid--2 .listing-gallery-cell {
    aspect-ratio: 4 / 3;
}

/* 1 image only — wide hero */
.listing-gallery-grid--1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    aspect-ratio: 16 / 9;
}

.listing-gallery-hero,
.listing-gallery-cell {
    all: unset;
    position: relative;
    display: block;
    overflow: hidden;
    cursor: pointer;
    min-width: 0;
    min-height: 0;
}

.listing-gallery-grid-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.listing-gallery-hero:hover .listing-gallery-grid-img,
.listing-gallery-cell:hover .listing-gallery-grid-img {
    transform: scale(1.03);
}

/* "+ N photos" badge on last cell (no overlay darkening) */
.listing-gallery-cell-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 2;
    padding: 0.4em 0.75em;
    border-radius: 6px;
    background: color-mix(in srgb, var(--contrast) 65%, transparent);
    color: var(--base-3);
    font-size: 0.9em;
    font-weight: 500;
    pointer-events: none;
}

/* Lightbox — white background, no opacity; controls match card carousel arrows */
.listing-gallery-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--base-3);
    z-index: 99999;
    align-items: center;
    justify-content: center;
}
.listing-gallery-lightbox[aria-hidden="false"] { display: flex; }
.listing-gallery-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    transform: none;
    font-size: 0;
}
.listing-gallery-lightbox-close::before,
.listing-gallery-lightbox-close::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 14px;
    background: var(--contrast-2);
    border-radius: 1px;
}
.listing-gallery-lightbox-close::before {
    transform: rotate(45deg);
}
.listing-gallery-lightbox-close::after {
    transform: rotate(-45deg);
}
.listing-gallery-lightbox-close:hover {
    background: var(--base);
    transform: none;
}
.listing-gallery-lightbox-close:hover::before,
.listing-gallery-lightbox-close:hover::after {
    background: var(--contrast-2);
}
.listing-gallery-lightbox-close:focus {
    outline: none;
}
.listing-gallery-lightbox-counter {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--listing-text);
    font-size: 1em;
}
.listing-gallery-lightbox-prev,
.listing-gallery-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.listing-gallery-lightbox-prev:hover,
.listing-gallery-lightbox-next:hover {
    background: var(--base);
}
.listing-gallery-lightbox-prev:focus,
.listing-gallery-lightbox-next:focus {
    outline: none;
}
.listing-gallery-lightbox-prev {
    left: 20px;
}
.listing-gallery-lightbox-prev::after {
    content: '';
    width: 12px;
    height: 12px;
    border-left: 2px solid var(--contrast-2);
    border-bottom: 2px solid var(--contrast-2);
    transform: rotate(45deg);
    margin-left: 4px;
}
.listing-gallery-lightbox-next {
    right: 20px;
}
.listing-gallery-lightbox-next::after {
    content: '';
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--contrast-2);
    border-top: 2px solid var(--contrast-2);
    transform: rotate(45deg);
    margin-right: 4px;
}
.listing-gallery-lightbox-prev,
.listing-gallery-lightbox-next {
    font-size: 0;
    color: transparent;
}
.listing-gallery-lightbox-img-wrap { max-width: 90vw; max-height: 90vh; }
.listing-gallery-lightbox-img-wrap img { max-width: 100%; max-height: 90vh; object-fit: contain; }

/* Gallery mobile: 1 = 16:9; 2 = two 4:3 side by side; 3+ = one 4:3 hero on top, then two 4:3 cells */
@media (max-width: 640px) {
    .listing-gallery-grid {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto !important;
        aspect-ratio: auto !important;
    }
    /* 2 images: two 4:3 columns */
    .listing-gallery-grid--2 {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 1fr !important;
        aspect-ratio: 8 / 3 !important;
    }
    .listing-gallery-grid--2 .listing-gallery-hero,
    .listing-gallery-grid--2 .listing-gallery-cell {
        aspect-ratio: 4 / 3;
    }
    /* 3+ images: hero full width 4:3 on top */
    .listing-gallery-grid:not(.listing-gallery-grid--1):not(.listing-gallery-grid--2) .listing-gallery-hero {
        grid-column: 1 / -1;
        grid-row: 1;
        aspect-ratio: 4 / 3;
        width: 100%;
    }
    .listing-gallery-grid--1 .listing-gallery-hero {
        grid-column: 1 / -1;
        grid-row: 1;
        aspect-ratio: 16 / 9;
        width: 100%;
    }
    .listing-gallery-grid .listing-gallery-cell:nth-child(2),
    .listing-gallery-grid .listing-gallery-cell:nth-child(3) {
        aspect-ratio: 4 / 3;
    }
    .listing-gallery-grid .listing-gallery-cell:nth-child(n+4) {
        display: none !important;
    }
}

.listing-details-wrap { margin-bottom: 2em; }
.listing-single-title { margin: 0 0 0.25em; font-size: 1.75em; font-weight: 500; color: var(--listing-blue); }
.listing-single-meta { margin: 0 0 1em; font-size: 0.85em; color: var(--listing-text-muted); }
.listing-single-description { margin-top: 0.5em; line-height: 1.6; color: var(--listing-text); }

.listing-amenities-wrap { margin-bottom: 2em; }
.listing-amenities-title { margin: 0 0 0.75em; font-size: 1.15em; font-weight: 500; color: var(--listing-blue); }
.listing-amenities-list { margin: 0; padding-left: 1.5em; list-style: disc; }
.listing-amenity-item { margin: 0.35em 0; }

.listing-booking-widget {
    margin-bottom: 2em;
    padding: 1.5em;
    border: 1px solid var(--listing-border);
    border-radius: var(--listing-radius);
    background: var(--listing-bg);
    box-shadow: var(--listing-shadow);
}
.listing-booking-hint { margin: 0 0 1em; font-size: 0.9em; color: var(--listing-text-muted); }
.listing-booking-rate { margin: 0 0 0.75em; font-weight: 500; color: var(--listing-blue); font-size: 1em; }
.listing-booking-total { margin: 0.5em 0 0.75em; font-weight: 500; color: var(--listing-blue); font-size: 1em; }
.listing-booking-widget input { margin: 0 0.5em 0.5em 0; padding: 0.5em 0.75em; border: 1px solid var(--listing-border); border-radius: 6px; }
.listing-booking-submit {
    display: block;
    margin-top: 0.75em;
    padding: 0.65em 1.5em;
    background: var(--listing-btn-bg);
    color: var(--base-3);
    border: none;
    border-radius: var(--listing-btn-radius);
    font-weight: 700;
    cursor: pointer;
}
.listing-booking-submit:hover { background: var(--listing-btn-bg-hover); }

.listing-calendar-wrap { margin-bottom: 2em; }
.listing-calendar-title { margin: 0 0 0.5em; font-size: 1.15em; font-weight: 500; color: var(--listing-blue); }
.listing-calendar-hint { margin: 0 0 0.5em; font-size: 0.9em; color: var(--listing-text-muted); }
.listing-calendar-clear {
    margin-bottom: 0.75em;
    padding: 0.35em 0.75em;
    background: transparent;
    border: 1px solid var(--listing-border);
    border-radius: var(--listing-btn-radius);
    cursor: pointer;
    font-size: 0.85em;
}
.listing-calendar-grid { display: flex; gap: 2em; flex-wrap: wrap; }
.listing-calendar-month { min-width: 220px; }
.listing-calendar-month-title { font-weight: 500; margin-bottom: 0.5em; color: var(--listing-text); }
.listing-calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.listing-calendar-day { padding: 0.35em; text-align: center; font-size: 0.85em; border-radius: 4px; }
.listing-calendar-day-blocked { background: var(--listing-border); color: var(--listing-text-muted); }
.listing-calendar-day-past { color: var(--contrast-3); }

.listing-single-map-title { margin: 0 0 0.5em; font-size: 1.15em; font-weight: 500; color: var(--listing-blue); }
.listing-single-map-wrap {
    position: relative;
    margin-bottom: 2em;
    border-radius: var(--listing-radius);
    overflow: hidden;
}
.listing-single-map-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--base-3) 90%, transparent);
    cursor: pointer;
    font-size: 1em;
    color: var(--listing-text);
    text-align: center;
    padding: 1em;
}
.listing-single-map-wrap .listing-single-map {
    pointer-events: none;
}
.listing-single-map-wrap.is-active .listing-single-map-overlay {
    display: none;
}
.listing-single-map-wrap.is-active .listing-single-map {
    pointer-events: auto;
}
.listing-single-map {
    width: 100%;
    height: 400px;
    border-radius: var(--listing-radius);
    overflow: hidden;
}

.listing-good-to-know { margin-bottom: 2em; }
.listing-good-to-know-title { margin: 0 0 0.75em; font-size: 1.15em; font-weight: 500; color: var(--listing-blue); }
.listing-house-rules,
.listing-cancellation { margin: 0.5em 0; line-height: 1.6; }

/* ----- Checkout summary (right column on checkout page) ----- */
.listing-checkout-summary {
    background: var(--listing-bg);
    border: 1px solid var(--listing-border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--listing-shadow);
}
.listing-checkout-summary--empty { padding: 1.5rem; }
.listing-checkout-summary-empty-msg { margin: 0 0 1rem; color: var(--listing-text-muted); font-size: 1em; }
.listing-checkout-summary-empty-actions { margin: 0; }
.listing-checkout-summary-empty-actions .listing-checkout-summary-empty-btn {
    display: inline-block;
    padding: 0.6em 1.2em;
    min-height: 40px;
    line-height: 1.25;
    font-size: 0.9em;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: var(--base-3);
    background-color: var(--accent);
    border: none;
    border-radius: var(--listing-btn-radius);
    cursor: pointer;
}
.listing-checkout-summary-empty-actions .listing-checkout-summary-empty-btn:hover {
    background-color: var(--accent);
    color: var(--base-3);
    text-decoration: none;
}
.listing-checkout-summary__property {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}
.listing-checkout-summary__thumb { flex-shrink: 0; }
.listing-checkout-summary__img {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 8px;
}
.listing-checkout-summary__img-placeholder {
    background: var(--listing-border);
}
.listing-checkout-summary__title-wrap { min-width: 0; }
.listing-checkout-summary__title {
    margin: 0;
    font-size: 1em;
    font-weight: 500;
    color: var(--listing-blue);
    line-height: 1.3;
}
.listing-checkout-summary__location {
    margin: 0.25em 0 0;
    font-size: 1em;
    color: var(--listing-text-muted);
    line-height: 1.3;
}
.listing-checkout-summary__cancellation {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--listing-divider);
    font-size: 1em;
}
.listing-checkout-summary__cancellation strong { font-size: 1em; }
.listing-checkout-summary__cancellation-text {
    margin: 0.35em 0 0;
    font-size: 1em;
    line-height: 1.5;
    color: var(--listing-text);
}
.listing-checkout-summary__trip {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--listing-divider);
    font-size: 1em;
}
.listing-checkout-summary__trip strong { font-size: 1em; display: block; margin-bottom: 0.5em; }
.listing-checkout-summary__trip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.35em;
    font-size: 1em;
}
.listing-checkout-summary__edit {
    font-size: 1em;
    color: var(--listing-blue);
    text-decoration: underline;
}
.listing-checkout-summary__edit:hover { text-decoration: none; }
.listing-checkout-summary__price {
    font-size: 1em;
}
.listing-checkout-summary__price strong { font-size: 1em; display: block; margin-bottom: 0.5em; }
.listing-checkout-summary__price-row {
    display: flex;
    justify-content: space-between;
    margin-top: 0.35em;
    font-size: 1em;
}
.listing-checkout-summary__price-row--total {
    margin-top: 0.75em;
    padding-top: 0.5em;
    border-top: 1px solid var(--listing-divider);
    font-size: 1em;
}