/* Listing type and rent frequency badges */
.badge-sale { background: #e8f5e9; color: #2e7d32; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; display: inline-block; }
.badge-rent { background: #e3f2fd; color: #1565c0; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; display: inline-block; }
.badge-price-freq { font-size: 0.75em; color: #666; font-weight: normal; }
.badge-price-freq-sm { font-size: 0.65em; color: #666; font-weight: normal; }

/* Location pill cloud (homepage SEO region links). The border is declared
   transparent up-front so the hover outline appears without shifting layout. */
.location-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.location-cloud-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    background: #eef6ee;
    border: 1px solid transparent;
    color: #244d2c;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.location-cloud-tag:hover,
.location-cloud-tag:focus-visible {
    border-color: #1e6b2a;
    background: #fff;
    color: #1e6b2a;
    text-decoration: none;
}
@media (max-width: 460px) {
    .location-cloud { gap: 8px; }
    .location-cloud-tag { padding: 9px 14px; font-size: 13px; }
}

/* Property-type filter tags (homepage hero + browse filter panel), rendered by
   renderPropertyTypeTags(). One tag per market property type — its line icon
   plus the translated label — and several can be on at once, so a group of them
   reads as selectable tags rather than a form control (an all-off group means
   "any type").

   Each tag is still a checkbox so the browser submits one repeated
   `property_type` param per selection and the group works without JavaScript;
   the checkbox itself is never drawn. Selection is shown with an OUTLINE and a
   light tint rather than a filled block, so ten tags on one card do not turn
   into a wall of colour. The icon is stroked with currentColor, so it picks up
   the tag's own colour in every state.

   The two-class `.pt-tags .pt-tag` selectors are deliberate: the themes' form
   styles (`form label`, `.bf-field label`) make labels `display:block`, which
   would otherwise stack the tags one per line. */
.pt-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-tags .pt-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: auto;
    margin: 0;
    cursor: pointer;
    font-weight: 600;
    /* A tag is a control, not text: without this, clicking one can start a text
       selection (a double-click or a small drag while toggling highlights the
       label instead of just selecting the type). */
    user-select: none;
    -webkit-user-select: none;
}
.pt-tags .pt-tag > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
}
.pt-tag-face {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    height: 34px;
    padding: 0 13px;
    border: 1px solid #dfe7df;
    border-radius: 999px;
    background: #fff;
    color: #4c554d;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.pt-tag-face svg { flex: none; opacity: .85; }
.pt-tags .pt-tag:hover .pt-tag-face { border-color: #9cc79f; color: #1e6b2a; }
.pt-tags .pt-tag:hover .pt-tag-face svg { opacity: 1; }
/* Selected: an outline doubled with an inset ring, plus a hint of tint — the
   tag stays light so a row of selections still reads as a row. */
.pt-tags .pt-tag > input:checked + .pt-tag-face {
    border-color: #1e6b2a;
    box-shadow: inset 0 0 0 1px #1e6b2a;
    background: #f1f8f1;
    color: #155320;
    font-weight: 700;
}
.pt-tags .pt-tag > input:checked + .pt-tag-face svg { opacity: 1; }
.pt-tags .pt-tag > input:focus-visible + .pt-tag-face {
    outline: 2px solid rgba(46,125,50,.35);
    outline-offset: 2px;
}

@media (max-width: 460px) {
    .pt-tags { gap: 5px; }
    .pt-tag-face { height: 32px; padding: 0 11px; font-size: 12.5px; }
}