/**
 * Cape Property Site Plans — WP Store Locator property-card listing.
 *
 * Restyles each store in the [wpsl] results list (#wpsl-stores) into a property
 * card matching the site's property-card design. All selectors are scoped under
 * #wpsl-stores so nothing else on the page is affected. Kit design tokens are
 * referenced as CSS variables with hex fallbacks (same convention as site-plan.css).
 *
 * Enqueued with WPSL's 'wpsl-styles' as a dependency, so it prints after WPSL's
 * stylesheet and wins equal-weight ties. The few !important flags below beat
 * WPSL 3 rules that are either !important themselves or scoped under very
 * heavy selectors (`.wpsl-v3-css #wpsl-wrap:not(…):not(…) …`).
 */

/* Map resets — override WP Store Locator's default map chrome. */
#wpsl-wrap .wpsl-search {
    background: var(--color-light-bg);
    padding: 18px 24px !important;
    border-radius: var(--radius-card, 15px);
    border: 1px solid var(--color-border-gray, #bfbfbf);
    margin-bottom: 24px;
}

#wpsl-map {
    border-radius: var(--radius-card, 15px);
    width: 65.5% !important;
}

#wpsl-search-wrap form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

#wpsl-search-btn,
#wpsl-search-wrap div {
    float: unset;
    display: flex !important;
    align-items: center;
    margin: 0;
}

.wpsl-input label,
#wpsl-radius label,
#wpsl-category label {
    width: auto !important;
}

/* WPSL 3 resets the labels to `line-height: inherit` (and adds a 5px bottom
 * margin on phones); keep v2's 32px rows. */
#wpsl-search-wrap div label {
    line-height: 32px !important;
    margin-bottom: 0 !important;
}

#wpsl-search-wrap #wpsl-search-input,
#wpsl-search-wrap .wpsl-dropdown {
    font-family: Open Sans;
    font-size: 18px;
    color: #000000;
    padding-block-start: 4px;
    padding-block-end: 4px;
    padding-inline-start: 19px;
    padding-inline-end: 19px;
    border-radius: 8px;
    border-width: 1px;
    border-color: var(--color-border-gray, #bfbfbf);
    border-style: solid;
    width: 260px !important;
    /* WPSL 3 pins both to 40px */
    height: auto;
    min-height: 0;
    max-height: none;
}

#wpsl-search-wrap #wpsl-search-input {
    padding-block-start: 11px;
    padding-block-end: 11px;
    line-height: 1.5;
}

#wpsl-search-wrap input#wpsl-search-input::placeholder {
    color: #777777;
}

/* On touch devices WPSL 3 shows native <select>s instead of the styled
 * dropdowns: pad them to the same 53px height, and draw the styled dropdown's
 * triangle — WPSL 3 keeps `appearance: none` but removes its own arrow image
 * on narrow screens, leaving no visual cue that they open. */
#wpsl-wrap #wpsl-search-wrap select.wpsl-dropdown {
    padding-block-start: 12px;
    padding-block-end: 12px;
    padding-inline-start: 31px; /* 19px + the styled item's 12px inset */
    padding-inline-end: 40px;
    color: #000000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M0 0h12L6 8z' fill='%23000'/%3E%3C/svg%3E");
    background-position: right 13px center;
    background-repeat: no-repeat;
}

/* WPSL 3 strips the styled dropdown's selected item to zero vertical padding
 * (!important), collapsing the dropdowns below the input's height. */
#wpsl-search-wrap .wpsl-dropdown .wpsl-selected-item {
    padding: 9px 35px 9px 12px !important;
    line-height: normal !important;
}

/* WPSL 3 gives every search-bar <div> a 10px bottom margin (same selector,
 * so this one wins by load order) and pins the radius wrapper to 40px with an
 * extra right margin — together they wrap the Search button onto a 2nd row. */
#wpsl-search-wrap div:not(#mapbox-autocomplete):not(.wpsl-autocomplete-search-container) {
    margin-bottom: 0;
}

/* …and re-adds it to the category filter through a far heavier selector,
 * plus a 10px top margin that only shows once the bar stacks on phones. */
#wpsl-search-wrap #wpsl-category {
    margin-top: 0;
    margin-bottom: 0 !important;
}

#wpsl-search-wrap .wpsl-select-wrap div#wpsl-radius {
    margin-right: 0;
    height: auto;
    min-height: 0;
    max-height: none;
}

/* WPSL 3 drops the Search button 10px once the bar wraps (tablet widths). */
#wpsl-search-wrap .wpsl-search-btn-wrap {
    margin-top: 0 !important;
}

#wpsl-search-wrap #wpsl-search-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 16px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    font-family: var(--font-body, "Open Sans"), sans-serif;
    color: #ffffff;
    background: var(--color-primary, #2d75ab);
    transition: background 0.2s ease;
    border: 1px solid var(--color-primary, #2d75ab);
    border-radius: 0;
    /* WPSL 3 pins it to 40px, clipping the label */
    height: auto;
    min-height: 0;
    max-height: none;
}

@media (max-width: 675px) {
    #wpsl-map {
        width: 100% !important;
    }
    #wpsl-search-wrap form {
        flex-direction: column;
        gap: 0px;
    }
    #wpsl-search-btn,
    #wpsl-search-wrap div {
        flex-direction: column;
        align-items: start;
        width: 100%;
    }
    /* WPSL 3 centres these through heavier selectors, which in this stacked
     * layout centres the labels horizontally. */
    #wpsl-search-wrap .wpsl-input,
    #wpsl-search-wrap .wpsl-input > div,
    #wpsl-search-wrap #wpsl-radius {
        align-items: start !important;
    }
    #wpsl-wrap #wpsl-search-wrap #wpsl-search-input,
    #wpsl-wrap #wpsl-search-wrap .wpsl-dropdown {
        width: 100% !important;
    }
    #wpsl-search-wrap .wpsl-search-btn-wrap {
        margin-top: 20px !important; /* WPSL 3: 10px via a heavier selector */
    }
}

/* List resets — override WP Store Locator's default list-item chrome. */
#wpsl-stores ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#wpsl-wrap #wpsl-stores ul li.cape-pc-item {
    list-style: none;
    border: 0 !important;
    margin: 0 0 20px;
    padding: 0 !important;
    background: none;
    overflow: visible;
}

/*
 * WPSL 3 forces `font-size: var(--wpsl-font-size-base, 14px) !important` onto
 * every element inside a result <li>. Rather than out-!important it, each sized
 * card element below also sets that variable to its own size; the card root
 * sets it to the body size for everything that only inherits.
 */
#wpsl-stores .cape-property-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--color-border-gray, #bfbfbf);
    border-radius: var(--radius-card, 15px);
    overflow: hidden;
    font-family: var(--font-body, "Open Sans"), sans-serif;
    --wpsl-font-size-base: 18px;
}

/* Featured image / placeholder */
#wpsl-stores .cape-pc-img {
    display: block;
    position: relative;
    width: 100%;
    line-height: 0;
}

#wpsl-stores .cape-pc-img .cape-pc-thumb,
#wpsl-stores .cape-pc-img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    margin: 0;
    border: 0;
    max-width: none;
    border-radius: 0;
}

#wpsl-stores .cape-pc-img--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    background: var(--color-light-bg, #f7f7f7);
    color: var(--color-border-gray, #bfbfbf);
}

#wpsl-stores .cape-pc-img--empty svg {
    width: 56px;
    height: 56px;
}

/* Card body */
#wpsl-stores .cape-pc-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
}

#wpsl-stores .cape-pc-titlerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#wpsl-stores .cape-pc-title {
    margin: 0;
    font-family: var(--font-heading, "Montserrat"), sans-serif;
    font-size: 26px;
    --wpsl-font-size-base: 26px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--color-secondary, #112548);
}

/* Address */
#wpsl-stores .cape-pc-addr {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--color-text-gray, #777777);
}

#wpsl-stores .cape-pc-addr svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    color: var(--color-text-dark, #000000);
}

#wpsl-stores .cape-pc-addr-text {
    margin: 0;
    font-family: var(--font-heading, "Montserrat"), sans-serif;
    font-size: 18px;
    color: var(--color-text-dark, #000000);
    line-height: 1.4;
}

/* Price */
#wpsl-stores .cape-pc-price {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary, #2d75ab);
}

/* Stat chips (sqft + lease status) */
#wpsl-stores .cape-pc-stats {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

#wpsl-stores .cape-pc-stat {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    background: var(--color-light-bg, #f7f7f7);
}

#wpsl-stores .cape-pc-stat svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--color-primary, #2d75ab);
}

#wpsl-stores .cape-pc-stat-text {
    font-size: 15px;
    --wpsl-font-size-base: 15px;
    color: var(--color-text-dark, #000000);
}

/* Description — clamped to two lines */
#wpsl-stores .cape-pc-desc {
    margin: 0;
    font-size: 14px;
    --wpsl-font-size-base: 14px;
    line-height: 1.5;
    color: var(--color-text-gray, #777777);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* View Details button */
#wpsl-stores .cape-pc-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    padding: 12px 16px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    font-family: var(--font-body, "Open Sans"), sans-serif;
    color: #ffffff;
    background: var(--color-primary, #2d75ab);
    transition: background 0.2s ease;
}

#wpsl-stores .cape-pc-btn:hover,
#wpsl-stores .cape-pc-btn:focus {
    background: var(--color-secondary, #112548);
    color: #ffffff;
}

/* =========================================================================
 * Map marker info-window popup — a compact version of the property card.
 * Scoped under #wpsl-map (the map canvas) so nothing else is affected.
 * ========================================================================= */

/* Strip the default Google bubble chrome so the card image can sit flush. */
#wpsl-map .gm-style-iw.gm-style-iw-c {
    padding: 0 !important;
    border-radius: var(--radius-card, 15px) !important;
    overflow: hidden !important;
    max-width: 320px !important;
}

#wpsl-map .gm-style-iw-d {
    overflow: hidden !important;
    padding: 0 !important;
    max-width: none !important;
}

/*
 * Collapse the info-window header row. Google reserves vertical space above the
 * content for the close button (the `-chr` / `-ch` header), which leaves a white
 * band above the flush image. Take the header out of flow so the image starts at
 * the very top; the close button is floated over the image (rules below).
 */
#wpsl-map .gm-style-iw-chr {
    position: absolute;
    top: 0;
    right: 0;
    height: 0;
    min-height: 0 !important;
    z-index: 2;
}

#wpsl-map .gm-style-iw-ch {
    padding: 0 !important;
    min-height: 0 !important;
}

/* Float the close (X) button over the image on a legible white disc. */
#wpsl-map .gm-style-iw-c button.gm-ui-hover-effect,
#wpsl-map button.gm-ui-hover-effect {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    margin: 0 !important;
    width: 28px !important;
    height: 28px !important;
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

#wpsl-map button.gm-ui-hover-effect > span {
    margin: 7px !important;
    width: 14px !important;
    height: 14px !important;
}

/* The card */
#wpsl-map .cape-pc-iw {
    width: 270px;
    max-width: 100%;
    font-family: var(--font-body, "Open Sans"), sans-serif;
}

#wpsl-map .cape-pc-iw * {
    box-sizing: border-box;
}

/* Featured image / placeholder */
#wpsl-map .cape-pc-iw-img {
    display: block;
    position: relative;
    width: 100%;
    line-height: 0;
}

#wpsl-map .cape-pc-iw-img .cape-pc-thumb,
#wpsl-map .cape-pc-iw-img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    margin: 0;
    border: 0;
    max-width: none;
    border-radius: 0;
}

#wpsl-map .cape-pc-iw-img--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    background: var(--color-light-bg, #f7f7f7);
    color: var(--color-border-gray, #bfbfbf);
}

#wpsl-map .cape-pc-iw-img--empty svg {
    width: 44px;
    height: 44px;
}

/* Body */
#wpsl-map .cape-pc-iw-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

#wpsl-map .cape-pc-iw-title {
    margin: 0;
    font-family: var(--font-heading, "Montserrat"), sans-serif;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--color-secondary, #112548);
}

/* Address */
#wpsl-map .cape-pc-iw-addr {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

#wpsl-map .cape-pc-iw-addr svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    color: var(--color-text-dark, #000000);
}

#wpsl-map .cape-pc-iw-addr-text {
    display: block;
    margin: 0;
    font-family: var(--font-heading, "Montserrat"), sans-serif;
    font-size: 15px;
    line-height: 1.4;
    color: var(--color-text-dark, #000000);
}

/* Price */
#wpsl-map .cape-pc-iw-price {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary, #2d75ab);
}

/* Stat chips */
#wpsl-map .cape-pc-iw-stats {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

#wpsl-map .cape-pc-iw-stat {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border-radius: 8px;
    background: var(--color-light-bg, #f7f7f7);
}

#wpsl-map .cape-pc-iw-stat svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--color-primary, #2d75ab);
}

#wpsl-map .cape-pc-iw-stat-text {
    display: block;
    font-size: 13px;
    color: var(--color-text-dark, #000000);
}

/* View Details button */
#wpsl-map .cape-pc-iw-btn {
    display: block;
    margin-top: 2px;
    padding: 10px 14px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    font-family: var(--font-body, "Open Sans"), sans-serif;
    color: #ffffff;
    background: var(--color-primary, #2d75ab);
    transition: background 0.2s ease;
}

#wpsl-map .cape-pc-iw-btn:hover,
#wpsl-map .cape-pc-iw-btn:focus {
    background: var(--color-secondary, #112548);
    color: #ffffff;
}

/* =========================================================================
 * Category badge overlaid on the card image ("Under Development").
 * #fa8419 = the fill color of WPSL's orange map pin, so the badge matches
 * the marker color those properties get on the map.
 * ========================================================================= */

#wpsl-stores .cape-pc-badge,
#wpsl-map .cape-pc-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    padding: 7px 12px;
    background: #fa8419;
    color: #000000;
    font-family: var(--font-body, "Open Sans"), sans-serif;
    font-size: 13px;
    --wpsl-font-size-base: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* In the popup the close (X) button floats top-right over the image, so the
 * badge sits top-left there instead, sized down for the smaller card. */
#wpsl-map .cape-pc-badge {
    top: 10px;
    right: auto;
    left: 10px;
    padding: 6px 10px;
    font-size: 11px;
}