/* Suggested for you vertical carousel and search panel. Brand: deep navy and deep gold. */


/* 
   SUGGESTED FOR YOU, "Sponsored · Suggested for
   you" list. Sits directly below the Featured Real
   Estate Agencies carousel on the blog homepage
   (never on single-post pages). Plain white cards, no dark navy panel.

   Layout: a horizontal carousel of SLIDES, where
   each slide is a group of ROLL_SIZE (3) agency
   cards stacked VERTICALLY, not a 3-column grid.
   One slide is the main visible unit at a time, with
   the next slide peeking in at the edge (no arrows, the peek is the swipe hint). Swiping moves the
   whole 3-card group together as one unit onto the
   next group. See render_suggested_rows() /
   render_suggested_demo() in class-glh-featured-
   agencies.php for the .glh-sfy-carousel >
   .glh-sfy-slides > .glh-sfy-slide > .glh-sfy-row
   markup this styles.
 */
.glh-sfy-wrap {
    width: 100%;
    box-sizing: border-box;
    margin: 22px 0 0;
    padding: 16px 0 8px;
    background: #ffffff;
    border: 1px solid rgba(20,20,40,.05);
    box-shadow: 0 4px 20px rgba(20,20,40,.10), 0 1px 3px rgba(20,20,40,.06);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
}

.glh-sfy-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px 12px;
}

.glh-sfy-head-text {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.glh-sfy-eyebrow {
    font-size: 12px;
    font-weight: 700;
    color: rgba(20,20,40,.55);
}

.glh-sfy-eyebrow-sample {
    color: #b8901f;
}

.glh-sfy-sep {
    color: rgba(20,20,40,.3);
    font-size: 12px;
}

.glh-sfy-title {
    font-size: 17px;
    font-weight: 900;
    color: #1A1A2E;
    letter-spacing: -.2px;
}

.glh-sfy-menu {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: 1px solid rgba(20,20,40,.12);
    background: rgba(20,20,40,.05);
    padding: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.glh-sfy-menu:hover,
.glh-sfy-menu:focus-visible {
    background: rgba(20,20,40,.12);
    border-color: rgba(20,20,40,.22);
}
.glh-sfy-menu:active {
    transform: scale(.94);
}
.glh-sfy-menu:focus-visible {
    outline: 2px solid #C9A84C;
    outline-offset: 2px;
}
.glh-sfy-menu span {
    width: 4.5px;
    height: 4.5px;
    border-radius: 50%;
    background: #1A1A2E;
}

/* 
   PROPERTY & PROPERTY SERVICES SEARCH PANEL
   Opened from .glh-sfy-menu above. Floating frosted
   card centered on desktop, bottom sheet on mobile.
   See search_panel_markup() in class-glh-featured-agencies.php:
   Phase 2/3 built the Properties tab's fields, Phase 4 built the
   Services tab's, both tabs share every class below.
 */
.glh-sps-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,15,25,.4);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility 0s linear .18s;
}
.glh-sps-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .18s ease, visibility 0s linear 0s;
}

.glh-sps-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(420px, 92vw);
    max-height: min(560px, 84vh);
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(20,20,40,.28), 0 2px 8px rgba(20,20,40,.08);
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%,-50%) scale(.96);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.glh-sps-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%,-50%) scale(1);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}

.glh-sps-panel-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.glh-sps-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px 12px 18px;
    border-bottom: 1px solid rgba(20,20,40,.06);
    flex: 0 0 auto;
}

.glh-sps-tabs {
    display: inline-flex;
    gap: 4px;
    background: rgba(20,20,40,.06);
    padding: 3px;
    border-radius: 999px;
}
.glh-sps-tab {
    border: none;
    background: transparent;
    padding: 7px 15px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(20,20,40,.55);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.glh-sps-tab.is-active {
    background: #fff;
    color: #1A1A2E;
    box-shadow: 0 1px 4px rgba(20,20,40,.12);
}

.glh-sps-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(20,20,40,.08);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(20,20,40,.65);
    cursor: pointer;
    flex: 0 0 auto;
    box-shadow: 0 1px 3px rgba(20,20,40,.12);
    transition: background .12s ease, color .12s ease, transform .12s ease;
}
.glh-sps-close:hover {
    background: rgba(20,20,40,.08);
    color: #1A1A2E;
    transform: scale(1.05);
}

/* 2.28.0, front-end "how this works" info toggle, for the visitor
   benefit-explanation the search panel didn't have before. */
.glh-sps-info-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(63,169,245,.18);
    background: rgba(63,169,245,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    color: #2E8FDB;
    cursor: pointer;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0;
    box-shadow: 0 1px 3px rgba(201,168,76,.18);
    transition: background .12s ease, transform .12s ease;
}
.glh-sps-info-btn svg {
    display: block;
}
.glh-sps-info-btn:hover {
    background: rgba(63,169,245,.20);
    transform: scale(1.05);
}
.glh-sps-info-panel {
    margin: 0 18px;
    padding: 12px 14px;
    background: rgba(63,169,245,.07);
    border: 1px solid rgba(63,169,245,.18);
    border-radius: 10px;
}
.glh-sps-info-panel p {
    margin: 0 0 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #1A1A2E;
}
.glh-sps-info-panel p:last-child {
    margin-bottom: 0;
}

.glh-sps-body {
    padding: 18px;
    overflow-y: auto;
    flex: 1 1 auto;
}
.glh-sps-tab-panel {
    display: none;
}
.glh-sps-tab-panel.is-active {
    display: block;
}
.glh-sps-placeholder {
    margin: 26px 4px;
    text-align: center;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(20,20,40,.5);
}

/*  Phase 2: category / purpose / smart filter fields  */
.glh-sps-field {
    margin: 0 0 16px;
}
.glh-sps-field-row {
    display: flex;
    gap: 10px;
}
.glh-sps-field-row .glh-sps-field {
    flex: 1 1 0;
    min-width: 0;
}
.glh-sps-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: rgba(20,20,40,.6);
    margin: 0 0 6px;
}
.glh-sps-select,
.glh-sps-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 13.5px;
    color: #1A1A2E;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(20,20,40,.12);
    border-radius: 10px;
    font-family: inherit;
}
.glh-sps-select:focus,
.glh-sps-input:focus {
    outline: none;
    border-color: #C9A84C;
    box-shadow: 0 0 0 3px rgba(201,168,76,.18);
}

/* 2.28.0, "Other (type manually)" escape hatch under a State/City
   dropdown that already has real cascade data. */
.glh-sps-back-to-list {
    display: block;
    margin: 6px 0 0;
    padding: 0;
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 600;
    color: #C9A84C;
    cursor: pointer;
    text-decoration: underline;
}
.glh-sps-back-to-list:hover {
    color: #1A1A2E;
}

/* 2.28.0, small country map preview under the Country selector.
   Non-interactive-feeling (no scroll-zoom) but still a real, panned
   map, professional, compact, matches the panel's rounded-card
   language rather than looking bolted on. */
.glh-sps-map {
    margin-top: 10px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(20,20,40,.12);
    height: 140px;
    background: rgba(20,20,40,.04);
}
.glh-sps-map-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* 2.28.0, the small caption under "Price range" explaining which
   currency the figures are in and why. */
.glh-sps-currency-note {
    margin: 0 0 10px;
    font-size: 11.5px;
    line-height: 1.4;
    color: rgba(20,20,40,.5);
}

.glh-sps-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.glh-sps-chip {
    border: 1px solid rgba(20,20,40,.14);
    background: rgba(255,255,255,.8);
    color: #1A1A2E;
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 13px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.glh-sps-chip:hover {
    border-color: rgba(20,20,40,.28);
}
.glh-sps-chip[aria-checked="true"] {
    background: #1A1A2E;
    border-color: #1A1A2E;
    color: #fff;
}

.glh-sps-filtersets {
    margin: 4px 0 16px;
    min-height: 20px;
}
.glh-sps-filterset {
    display: none;
}
.glh-sps-filterset.is-active {
    display: block;
}
.glh-sps-filterset.glh-sps-placeholder.is-active {
    margin: 10px 4px 4px;
    text-align: left;
}

.glh-sps-checks {
    border: none;
    padding: 0;
    margin: 0;
}
.glh-sps-checks legend {
    padding: 0;
}
.glh-sps-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1A1A2E;
    padding: 6px 0;
    cursor: pointer;
}
.glh-sps-check input {
    width: 15px;
    height: 15px;
}

.glh-sps-note {
    margin: 0 0 14px;
    font-size: 12px;
    color: rgba(20,20,40,.45);
    text-align: center;
}

/*  Phase 3: location + price fields  */
.glh-sps-panel .is-hidden {
    display: none !important;
}

.glh-sps-price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.glh-sps-price-input {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}
.glh-sps-currency {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12.5px;
    font-weight: 700;
    color: rgba(20,20,40,.5);
    pointer-events: none;
    white-space: nowrap;
}
.glh-sps-price-field {
    /* Fallback for the instant before JS measures the actual symbol
       and sets an exact padding-left inline (see updateCurrency() in
       featured-agencies.js), sized generously so longer codes like
       "FCFA" don't get clipped by typed digits even pre-JS. */
    padding-left: 46px;
}
.glh-sps-price-sep {
    color: rgba(20,20,40,.35);
    font-size: 13px;
    flex: 0 0 auto;
}

.glh-sps-range {
    position: relative;
    height: 26px;
    margin: 6px 2px 4px;
}
.glh-sps-range-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    transform: translateY(-50%);
    background: rgba(20,20,40,.12);
    border-radius: 999px;
    overflow: hidden;
}
.glh-sps-range-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1A1A2E;
}
.glh-sps-range-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 26px;
    margin: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}
.glh-sps-range-input::-webkit-slider-runnable-track {
    background: transparent;
    height: 26px;
}
.glh-sps-range-input::-moz-range-track {
    background: transparent;
    height: 26px;
    border: none;
}
.glh-sps-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 16px;
    height: 16px;
    margin-top: 5px;
    border-radius: 50%;
    background: #1A1A2E;
    border: 2px solid #fff;
    box-shadow: 0 1px 5px rgba(20,20,40,.35);
    cursor: pointer;
}
.glh-sps-range-input::-moz-range-thumb {
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1A1A2E;
    border: 2px solid #fff;
    box-shadow: 0 1px 5px rgba(20,20,40,.35);
    cursor: pointer;
}

.glh-sps-search-btn {
    display: block;
    width: 100%;
    border: none;
    background: #C9A84C;
    color: #1A1A2E !important;
    font-size: 14px;
    font-weight: 700;
    padding: 13px;
    border-radius: 12px;
    cursor: pointer;
    transition: background .12s ease, transform .12s ease;
}
.glh-sps-search-btn:hover {
    background: #d9bb63;
}
.glh-sps-search-btn:active {
    transform: scale(.98);
}

body.glh-sps-lock-scroll {
    overflow: hidden;
}

/*  "People also search for" chips  */
.glh-sps-frequent {
    margin-top: 10px;
}
.glh-sps-frequent-label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(20,20,40,.55);
    margin-bottom: 6px;
}
.glh-sps-frequent-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.glh-sps-frequent-chip {
    border: 1px solid rgba(20,20,40,.15);
    background: rgba(20,20,40,.04);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    color: rgba(20,20,40,.75);
    cursor: pointer;
}
.glh-sps-frequent-chip:hover {
    background: rgba(20,20,40,.09);
}
.glh-sps-frequent-chip.is-related {
    border-color: rgba(20,20,40,.4);
    background: rgba(20,20,40,.08);
    color: rgba(20,20,40,.95);
}

/*  Phase 5: live search results  */
.glh-sps-results {
    margin-top: 12px;
}
.glh-sps-empty {
    margin: 10px 4px;
    font-size: 12.5px;
    color: rgba(20,20,40,.45);
    text-align: center;
}
.glh-sps-result-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px;
    border-radius: 12px;
    text-decoration: none;
    transition: background .12s ease;
}
.glh-sps-result-row:hover {
    background: rgba(20,20,40,.05);
}
.glh-sps-result-row + .glh-sps-result-row {
    margin-top: 2px;
}
.glh-sps-result-thumb {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #0d2a5c;
    overflow: hidden;
}
.glh-sps-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.glh-sps-result-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.glh-sps-result-title {
    font-size: 13px;
    font-weight: 700;
    color: #1A1A2E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.glh-sps-result-sub {
    font-size: 11.5px;
    color: rgba(20,20,40,.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.glh-sps-result-price {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: #b3261e;
}

/*  Section 8: "Properties Worth Exploring" floating popup  */
.glh-wep {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: min(220px, 42vw);
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 16px;
    box-shadow: 0 14px 40px rgba(20,20,40,.22), 0 2px 8px rgba(20,20,40,.08);
    padding: 12px;
    z-index: 9000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.glh-wep.is-dismissed {
    display: none;
}
.glh-wep-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(20,20,40,.07);
    color: rgba(20,20,40,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.glh-wep-close:hover {
    background: rgba(20,20,40,.13);
}
.glh-wep-head {
    font-size: 12px;
    font-weight: 800;
    color: #1A1A2E;
    margin: 0 20px 8px 2px;
}
.glh-wep-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.glh-wep-card {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 5px;
    border-radius: 10px;
    transition: background .12s ease;
}
.glh-wep-card:hover {
    background: rgba(20,20,40,.05);
}
.glh-wep-thumb {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    overflow: hidden;
}
.glh-wep-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.glh-wep-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.glh-wep-title {
    font-size: 11.5px;
    font-weight: 700;
    color: #1A1A2E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.glh-wep-price {
    font-size: 11px;
    font-weight: 700;
    color: #b3261e;
}
@media (max-width: 600px) {
    .glh-wep {
        right: 10px;
        bottom: 10px;
        width: min(200px, 52vw);
    }
}

@media (max-width: 600px) {
    .glh-sps-panel {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        max-height: 82vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
    }
    .glh-sps-panel.is-open {
        transform: translateY(0);
    }
    .glh-sps-panel-head {
        padding: 14px 12px 12px 16px;
    }
}

/* .glh-sfy-carousel = the viewport (horizontal scroll + snap).
   .glh-sfy-slides   = the horizontal track; one flex child per slide.
   .glh-sfy-slide    = ONE group of ROLL_SIZE (3) agencies, stacked
                       vertically, this is the thing that scroll-snaps
                       and the thing that moves as a unit on swipe.
   .glh-sfy-row      = one agency card, now full width of its slide
                       (stacked, not a grid column). */
.glh-sfy-carousel {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 18px 4px;
}
.glh-sfy-carousel::-webkit-scrollbar { display: none; }

.glh-sfy-slides {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 14px;
}

/* Slide width is deliberately short of 100% so the next slide's edge
   always peeks into view as a swipe hint, without a pagination arrow.
   Capped with max-width so on wide desktop viewports the slide (and
   its peek) stay a sensible reading width instead of spanning the
   whole screen. */
.glh-sfy-slide {
    flex: 0 0 88%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-snap-align: start;
    box-sizing: border-box;
    min-width: 0;
}

.glh-sfy-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid rgba(20,20,40,.08);
    border-radius: 12px;
    box-sizing: border-box;
    width: 100%;
    flex: 0 0 auto;
}

/*  Blurred placeholder row (Suggested-for-you vertical carousel), same purpose/behaviour as .glh-dc-card-blur above, just shaped like
   a row instead of a grid card. No text, no icon, a blank blurred
   surface, padding out to CAROUSEL_TARGET (250) alongside however many
   real agent + directory rows currently exist. */
.glh-sfy-row-blur {
    min-height: 92px;
    background: #e4e9f2;
    opacity: .9;
    cursor: pointer;
    border-color: transparent;
}
.glh-sfy-row-blur:hover { opacity: 1; }

/* Tighter spacing for phones/tablets, the slide itself still holds
   exactly 3 stacked rows; only the padding/gap shrink here. */
@media (max-width: 900px) {
    .glh-sfy-carousel { padding: 0 10px 6px; }
    .glh-sfy-slides { gap: 10px; }
    .glh-sfy-slide { flex-basis: 90%; gap: 8px; }
    .glh-sfy-row {
        gap: 6px;
        padding: 10px 10px 12px;
        border-radius: 10px;
    }
}

.glh-sfy-row-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    transition: background .15s ease;
}
a.glh-sfy-row-main:hover,
a.glh-sfy-row-main:focus-visible {
    background: rgba(20,20,40,.035);
}

.glh-sfy-icon-wrap { position: relative; flex: 0 0 auto; display: inline-flex; }

.glh-sfy-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20,20,40,.06);
    color: #1A1A2E;
    font-size: 18px;
    font-weight: 800;
}
.glh-sfy-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.glh-sfy-verified {
    position: absolute;
    bottom: -3px;
    right: -4px;
    width: 15px;
    height: 15px;
    background: #2196f3;
    color: #fff;
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    line-height: 1;
    font-style: normal;
    box-shadow: 0 1px 4px rgba(33,150,243,.45);
}

/* Shown whenever an agency/business card, seeded "Suggested for
   you" content or a real one, hasn't been claimed/verified by its
   real owner yet (post_to_card() never auto-marks a real post
   verified either, see class-glh-business-directory.php). Red, to
   match the unverified state everywhere else on the site (business
   profile pages, listing verification badges). */
.glh-sfy-unverified-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 2px;
    padding: 2px 7px;
    background: rgba(231,76,60,.16);
    color: #e74c3c;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    border-radius: 20px;
}

.glh-sfy-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.glh-sfy-name {
    font-size: 15px;
    font-weight: 800;
    color: #1A1A2E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.glh-sfy-cat {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(20,20,40,.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.glh-sfy-rating {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12.5px;
    font-weight: 700;
    color: rgba(20,20,40,.8);
}
.glh-sfy-star { fill: #C9A84C; }

.glh-sfy-icon-btn.glh-sfy-pin {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(20,20,40,.08);
    color: #1A1A2E;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}
.glh-sfy-icon-btn.glh-sfy-pin svg { width: 22px; height: 22px; }
.glh-sfy-icon-btn.glh-sfy-pin:hover { background: rgba(20,20,40,.16); }

.glh-sfy-demo-note {
    margin: 10px 18px 0;
    font-size: 11.5px;
    color: rgba(20,20,40,.4);
}

@media (max-width: 480px) {
    .glh-sfy-head { padding: 0 14px 10px; }
    .glh-sfy-demo-note { margin: 8px 14px 0; }
}

/* "Suggested for you" rows now share the same light card background as
   .glh-dc-card, so the footer extras need no dark-context override, just tighter padding since a row is narrower than a full card. */
.glh-sfy-row .glh-dc-extras {
    border-top-color: rgba(20,20,40,.07);
    padding: 6px 0 2px;
}

/* 
   SUGGESTED FOR YOU, phone/tablet sizing.
   Placed at the very end of this file on purpose: every selector
   below already exists earlier in this stylesheet with the same
   specificity, and CSS resolves ties by source order, so these have
   to come last to actually win inside their media query.

   Each slide (.glh-sfy-slide, sized in the @media (max-width: 900px)
   block above) still holds exactly ROLL_SIZE (3) agency rows, stacked
   vertically and occupying the slide's full width, the icon-left
   .glh-sfy-row-main layout used at desktop width still has plenty of
   room here, since a row is no longer squeezed into 1/3 of the track.
   Only icon/type sizing is trimmed at narrower widths for legibility;
   the horizontal card layout, category label, map-pin shortcut, and
   description all stay exactly as they are above 900px.
 */
@media (max-width: 900px) {
    .glh-sfy-icon { width: 44px; height: 44px; border-radius: 10px; font-size: 15px; }
    .glh-sfy-verified { width: 13px; height: 13px; font-size: 7px; }
    .glh-sfy-name { font-size: 13px; }
    .glh-sfy-unverified-tag { font-size: 8px; padding: 1px 5px; margin-top: 1px; }
    .glh-sfy-rating { font-size: 11px; }
}

/* Narrower phones, a touch tighter still. */
@media (max-width: 480px) {
    .glh-sfy-slide { flex-basis: 92%; }
    .glh-sfy-icon { width: 38px; height: 38px; border-radius: 9px; font-size: 13px; }
    .glh-sfy-name { font-size: 12px; }
    .glh-sfy-unverified-tag { font-size: 7.5px; }
    .glh-sfy-rating { font-size: 10px; }
}

/* Very narrow phones, a further notch tighter still. */
@media (max-width: 380px) {
    .glh-sfy-slides { gap: 8px; }
    .glh-sfy-row { padding: 8px 8px 10px; }
    .glh-sfy-icon { width: 34px; height: 34px; }
    .glh-sfy-name { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .glh-sfy-carousel, .glh-sfy-slides { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

.glh-sfy-carousel:focus-visible { outline: 2px solid #C9A84C; outline-offset: 2px; }

/* 2.30.28, a well pronounced close X on the property and services filter panel.
   Large, dark navy, thick white cross, always on top and easy to tap. */
.glh-sps-panel-head .glh-sps-close {
    width: 44px;
    height: 44px;
    border: 2px solid #ffffff;
    background: #0a1f44;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(10, 31, 68, .38);
    position: relative;
    z-index: 3;
}
.glh-sps-panel-head .glh-sps-close svg {
    width: 22px;
    height: 22px;
}
.glh-sps-panel-head .glh-sps-close svg path {
    stroke: #ffffff;
    stroke-width: 3.4;
}
.glh-sps-panel-head .glh-sps-close:hover,
.glh-sps-panel-head .glh-sps-close:focus-visible {
    background: #d4af37;
    color: #0a1f44;
    transform: scale(1.06);
    outline: none;
}
.glh-sps-panel-head .glh-sps-close:hover svg path,
.glh-sps-panel-head .glh-sps-close:focus-visible svg path {
    stroke: #0a1f44;
}
@media (max-width: 600px) {
    .glh-sps-panel-head .glh-sps-close { width: 46px; height: 46px; }
}

/* Deep gold with white text, ONLY on the comment form submit button.
   v2.30.48: the earlier site wide rule that painted every button, role="button" and .button gold
   was removed. Each component styles its own buttons. */
#respond .form-submit input[type="submit"],
.comment-form .form-submit .submit {
  background-color: #9A6B00;
  color: #fff;
  border-color: #9A6B00;
}
#respond .form-submit input[type="submit"]:hover,
#respond .form-submit input[type="submit"]:focus-visible,
.comment-form .form-submit .submit:hover,
.comment-form .form-submit .submit:focus-visible {
  background-color: #795300;
  border-color: #795300;
}