/* Property page. Loads after Property.css, which still drives the mobile sidebar/modal behaviour, so nothing here sets .sidebar display or position.
     The unit-size markup is rebuilt by Availability.js with the same classes, so those classes are styled here rather than changed. */

/* ---------- Heading ---------- */
.property-head {
    padding-block: 32px 20px;
}

.property-title {
    margin: 0;
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.property-address {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 8px 0 0;
    font-size: .95rem;
    color: var(--ink-mid);
}

    .property-address i {
        color: var(--primary);
    }

/* ---------- Two columns: content left, Apartment Sizes right ---------- */
.property-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 48px;
    align-items: start;
    padding-bottom: 72px;
}

/* Unit chips wrap onto a second row instead of scrolling out of view */
.photo-filter {
    flex-wrap: wrap;
    gap: 6px;
    overflow: visible;
    margin-bottom: 12px;
}

    .photo-filter .chip {
        padding: 4px 12px;
        font-size: .78rem;
    }

/* ---------- Gallery (fotorama) ---------- */
.property-gallery .fotorama__stage {
    border-radius: var(--radius-lg);
    background: var(--primary-tint);
}

.property-gallery .fotorama__nav-wrap {
    margin-top: 10px;
}

.property-gallery .fotorama__thumb {
    border-radius: 8px;
}

.property-gallery .fotorama__thumb-border {
    border-color: var(--primary);
    border-radius: 8px;
}

/* ---------- Amenity chips ---------- */
.feature-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

    .feature-chips li {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 10px 12px;
        border: 1px solid var(--line);
        border-radius: 12px;
        font-size: .88rem;
        font-weight: 500;
        line-height: 1.3;
    }

.feature-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--primary-tint);
    color: var(--primary);
    font-size: .9rem;
}

/* ---------- Sections ---------- */
.property-section {
    margin-top: 36px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
}

.property-section-title {
    margin-bottom: 16px;
    font-size: 1.3rem;
    font-weight: 600;
}

.amenity-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

    .amenity-columns .property-section-title {
        margin-bottom: 12px;
        font-size: 1.1rem;
    }

.property-section-action {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.map-frame {
    overflow: hidden;
    border-radius: var(--radius-md);
}

    .map-frame iframe {
        display: block;
    }

/* The description is typed text with line breaks and • bullets; pre-line shows them as written */
.description-text p {
    margin: 0;
    white-space: pre-line;
    font-size: .95rem;
    line-height: 1.75;
    color: var(--ink-mid);
}

/* ---------- Apartment Sizes card (AvailableUnitSizes.cshtml + Availability.js output) ---------- */
.page-theme .side-section {
    padding-left: 0;
}

.page-theme .sidebar {
    margin-bottom: 16px;
    padding: 8px 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}

    .page-theme .sidebar > h3 {
        margin-bottom: 12px;
        border-color: var(--line) !important;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--ink);
    }

.page-theme .availtext {
    font-size: .88rem;
    color: var(--ink-light);
}

/* Dates: [icon mm/dd/yy | icon mm/dd/yy  GO]. jQuery UI inserts an <img class="ui-datepicker-trigger"> after each input;
     order puts each icon in front of its date */
.page-theme .choose-dates {
    height: 40px;
    border: 1px solid #cfdad9;
    border-radius: 12px;
    overflow: hidden;
}

    /* Focus shows on the whole box, because this box clips its contents */
    .page-theme .choose-dates:focus-within {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(24, 96, 104, .15);
    }

    .page-theme .choose-dates > input:focus {
        box-shadow: none;
    }

    .page-theme .choose-dates > input {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        height: 38px;
        margin: 0;
        padding: 0 6px 0 0;
        font-size: .85rem;
        color: var(--ink);
        background: transparent;
    }

        .page-theme .choose-dates > input:first-of-type {
            order: 2;
            border-right: 1px solid #cfdad9;
        }

        .page-theme .choose-dates > input:last-of-type {
            order: 4;
            margin-left: 0;
        }

    .page-theme .choose-dates > img:first-of-type {
        order: 1;
    }

    .page-theme .choose-dates > img:last-of-type {
        order: 3;
    }

/* Same drop-shadow trick as the amenity icons: the grey PNG is repainted in the brand colour */
.page-theme .ui-datepicker-trigger {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin: 0 6px 0 10px;
    cursor: pointer;
    transform: translateY(-100px);
    filter: drop-shadow(0 100px 0 var(--primary));
}

.page-theme .go-button-dates {
    order: 5;
    flex-shrink: 0;
    height: 28px;
    margin-right: 5px;
    padding: 0 12px !important;
    border: 0;
    border-radius: 999px !important;
    background: var(--primary);
    font-size: .75rem;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: .04em;
}

    .page-theme .go-button-dates:hover {
        background: var(--primary-dark);
    }

/* "Min N Day Stay" */
.page-theme .dates > p.text-color {
    font-size: .75rem;
    font-weight: 500;
}

/* Adults, Children and Pets share one row */
.page-theme .dates > .flex-wrap {
    flex-wrap: nowrap !important;
    gap: 8px;
}

.page-theme .numberOption,
.page-theme .numberOption ~ .w-100 {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
}

    .page-theme .numberOption ~ .w-100 {
        width: auto !important;
    }

    /* Fixed label height, so the Pets button lines up with the counters next to it */
    .page-theme .numberOption label {
        display: block;
        height: 18px;
        margin: 12px 0 6px;
        font-size: .8rem;
        font-weight: 600;
        line-height: 18px;
        color: var(--ink);
    }

.page-theme .inputSpinnerGroup .form-control {
    height: 38px;
    padding: 0;
    border-color: #cfdad9;
    font-size: .88rem;
    text-align: center;
}

.page-theme .input-spinner-btn {
    padding: 0 8px;
    border: 0;
    background: var(--primary-tint);
    color: var(--primary);
}

    .page-theme .input-spinner-btn:hover {
        background: var(--primary);
        color: #fff;
    }

.page-theme .petsBtn {
    height: 38px;
    margin-top: 36px !important;
    border-radius: 10px;
    background: var(--primary-tint);
    color: var(--primary) !important;
    font-weight: 600;
    line-height: 38px;
}

.page-theme .pets {
    margin-top: 6px;
    padding: 6px 8px !important;
    border-radius: 10px;
    background: var(--primary-tint);
    color: var(--ink-mid);
    font-size: .72rem;
    font-style: normal;
}

/* One bordered box per unit size */
.page-theme .unitsize {
    margin-top: 12px;
    padding: 16px !important;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.page-theme .bedroom {
    font-family: var(--font-display);
    font-size: 1.12rem !important;
    font-weight: 700;
    color: var(--ink);
}

/* "Up to N Guests" */
.page-theme .rooms-guest p.text-uppercase {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--ink-light) !important;
}

.page-theme .rooms p {
    font-size: .88rem;
    color: var(--ink-mid);
}

/* Unit Photos / Virtual Tour as plain text links, no sprite icons */
.page-theme .unitphotos .bg-img_icon,
.page-theme .unitphotos .bg-virtual_tour {
    display: none !important;
}

.page-theme .rooms .unitphotos a {
    margin-left: 0 !important;
    color: var(--primary) !important;
    font-weight: 600;
}

    .page-theme .rooms .unitphotos a p {
        margin: 0 0 4px !important;
        padding-left: 0;
        font-size: .8rem;
    }

/* Prices: "Average nightly rate" and the nights total */
.page-theme [id^="availInfo"] > p:first-child:not(.callchat),
.page-theme .unittotal-book p.mb-0 {
    font-weight: 700;
    color: var(--ink);
}

/* "Just N left!" */
.page-theme .rooms h6.text-color {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(171, 200, 55, .2);
    color: #4d5e10;
    font-size: .75rem;
    font-weight: 600;
}

/* Total on its own line, Book now full width under it */
.page-theme .unittotal-book {
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--line);
}

.page-theme .btn-book {
    display: block;
    align-self: stretch;
    width: 100%;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--primary);
    background-image: none;
    font-size: .9rem;
    letter-spacing: .04em;
    text-align: center;
    cursor: pointer;
}

    .page-theme .btn-book:hover {
        opacity: 1;
        background: var(--primary-dark);
    }

.page-theme .limited-avail .btn-basic {
    display: block !important;
    width: 100%;
    padding: 10px 18px !important;
    border: 0;
    border-radius: 999px;
    background-color: var(--primary) !important;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: center;
}

.page-theme .min-LOS-Msg {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--primary-tint);
    color: var(--ink-mid);
    font-size: .85rem;
    font-style: normal;
    font-weight: 500;
}

/* ---------- Similar properties (flexslider + _ListingCard) ---------- */
.page-theme .sim-properties {
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

    /* room on the right of the heading for the arrows */
    .page-theme .sim-properties > .section-title {
        margin-bottom: 24px;
        padding-right: 104px;
    }

/* Flexslider's arrows, moved from the slide edges to the top right, beside the heading */
.page-theme #carousel2 .flex-direction-nav {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
}

    .page-theme #carousel2 .flex-direction-nav a {
        position: static;
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        margin: 0;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: var(--surface);
        overflow: hidden !important;
        text-shadow: none;
        transition: border-color .2s;
    }

        .page-theme #carousel2 .flex-direction-nav a:hover {
            border-color: var(--primary);
        }

        .page-theme #carousel2 .flex-direction-nav a:before {
            position: static;
            font-size: 14px;
            line-height: 1;
            color: var(--primary) !important;
        }

/* Property.css sizes every #carousel2 img; the card image fills its frame instead */
.page-theme #carousel2 .listing-card-media img {
    height: 100%;
}

/* The slider viewport clips overflow, so the card does not lift on hover */
.page-theme .sim-properties .listing-card:hover {
    transform: none;
}

/* ---------- Mobile "Search Availability" button (shown by Property.css under 768px) ---------- */
.page-theme .searchAppartmentAvaButton {
    z-index: 10;
    border-radius: 999px;
    background-color: var(--primary);
    box-shadow: var(--shadow);
}

/* Tablet: the card stays beside the content, narrower, with the counters on two rows */
@media (max-width: 1023px) {
    .property-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 24px;
    }

    .page-theme .dates > .flex-wrap {
        flex-wrap: wrap !important;
    }

    .page-theme .numberOption,
    .page-theme .numberOption ~ .w-100 {
        flex: 1 1 40%;
    }
}

/* Phone: one column, with the Apartment Sizes card right under the photos. minmax(0, ...) stops fotorama full-size images
   from stretching the column. The wrappers are dissolved so the card can sit between the left column pieces, and the
   Search Availability button is not needed with the card on the page. */
@media (max-width: 767px) {
    .property-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

        .property-layout > div,
        .property-layout > .side-section {
            display: contents;
        }

    .photo-filter {
        order: 1;
    }

    .property-gallery {
        order: 2;
    }

    .page-theme .side-section > .sidebar {
        display: block;
        order: 3;
        margin-top: 24px;
        margin-bottom: 0;
    }

    .feature-chips {
        order: 4;
    }

    .property-section {
        order: 5;
    }

    .page-theme .side-section > .help {
        order: 6;
        margin-top: 36px;
    }

    .page-theme .searchAppartmentAvaButton {
        display: none;
    }

    .amenity-columns {
        grid-template-columns: 1fr;
    }
}

/* ---------- Popup close buttons (map, Search Availability, Virtual Tour): same look as every GLS popup (custom.css). The markup is shared with other sites, so the "x" stays text ---------- */
/* color !important beats the tour close's color: #fff !important in Property.css */
#mapModal .close-btn,
#searchAvailaibilityModal .sidebar .close-btn,
.rooms .unitphotos a.virtualTourFrameDiv-close-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-mid) !important;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
}

    #mapModal .close-btn:hover,
    #searchAvailaibilityModal .sidebar .close-btn:hover,
    .rooms .unitphotos a.virtualTourFrameDiv-close-btn:hover {
        border-color: var(--primary);
        background: var(--primary);
        color: #fff !important;
    }

/* Map and tour: the button sits on the frame's corner; Search Availability: inside the panel's corner */
#mapModal .close-btn {
    top: -16px;
    right: -16px;
}

#searchAvailaibilityModal .sidebar .close-btn {
    top: 12px;
    right: 12px;
}

.rooms .unitphotos a.virtualTourFrameDiv-close-btn {
    top: -52px;
    right: 0;
}