/**
 * 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).
 */

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

#wpsl-gmap {
    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-search-wrap #wpsl-search-input,
#wpsl-search-wrap .wpsl-dropdown {
    font-family: Open Sans;
    font-size: 18px;
    color: #777777;
    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-search-wrap #wpsl-search-input {
    padding-block-start: 11px;
    padding-block-end: 11px;
}

#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;
}

@media (max-width: 675px) {
    #wpsl-gmap {
        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-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;
    }
}

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

#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-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;
}

/* 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;
    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;
    color: var(--color-text-dark, #000000);
}

/* Description — clamped to two lines */
#wpsl-stores .cape-pc-desc {
    margin: 0;
    font-size: 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-gmap (the map canvas) so nothing else is affected.
 * ========================================================================= */

/* Strip the default Google bubble chrome so the card image can sit flush. */
#wpsl-gmap .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-gmap .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-gmap .gm-style-iw-chr {
    position: absolute;
    top: 0;
    right: 0;
    height: 0;
    min-height: 0 !important;
    z-index: 2;
}

#wpsl-gmap .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-gmap .gm-style-iw-c button.gm-ui-hover-effect,
#wpsl-gmap 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-gmap button.gm-ui-hover-effect > span {
    margin: 7px !important;
    width: 14px !important;
    height: 14px !important;
}

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

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

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

#wpsl-gmap .cape-pc-iw-img .cape-pc-thumb,
#wpsl-gmap .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-gmap .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-gmap .cape-pc-iw-img--empty svg {
    width: 44px;
    height: 44px;
}

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

#wpsl-gmap .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-gmap .cape-pc-iw-addr {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

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

#wpsl-gmap .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-gmap .cape-pc-iw-price {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary, #2d75ab);
}

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

#wpsl-gmap .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-gmap .cape-pc-iw-stat svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--color-primary, #2d75ab);
}

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

/* View Details button */
#wpsl-gmap .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-gmap .cape-pc-iw-btn:hover,
#wpsl-gmap .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-gmap .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;
    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-gmap .cape-pc-badge {
    top: 10px;
    right: auto;
    left: 10px;
    padding: 6px 10px;
    font-size: 11px;
}