/* Agencies page styles — extracted from style.css */
.agencies-page-wrapper {
    max-width: 960px;
    margin: 0 auto;
    padding: 79px 20px 48px
}

.agencies-hero {
    background: linear-gradient(135deg, var(--muted) 0%, var(--accent) 100%);
    border-radius: 16px;
    text-align: center;
    padding: 32px 24px 28px;
    margin-bottom: 24px
}

.agencies-hero h1 {
    font-size: 34px;
    font-weight: 700;
    color: var(--foreground);
    margin: 0 0 8px;
    letter-spacing: -0.5px
}

.agencies-subtitle {
    font-size: 15px;
    color: var(--muted-foreground);
    margin: 0 0 16px
}

/* Discoverable entry point to the guides hub from the agencies list
   hero. Subtle but visible — sits between subtitle and search bar. */
.agencies-guides-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 28px;
    padding: 8px 16px;
    background: var(--accent);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-foreground);
    text-decoration: none;
    line-height: 1.3;
    transition: background .15s ease, transform .15s ease
}

.agencies-guides-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0
}

.agencies-guides-link:hover {
    background: var(--accent-border);
    color: var(--accent-foreground) !important;
    text-decoration: none;
    transform: translateY(-1px)
}

.agencies-search-wrap {
    position: relative;
    max-width: 680px;
    margin: 0 auto
}

.agencies-search-bar {
    max-width: 680px;
    margin: 0 auto
}

.agencies-search-fields {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 22px;
    /* overflow:hidden removed — was clipping the citycombo suggestions
       dropdown that lives inside .agencies-search-city. The button gets its
       own end-radius below; the city cell inherits the natural rounding of
       its rounded parent. */
    background: var(--card);
    box-shadow: 0 2px 8px rgba(20, 24, 35, .04);
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease
}

.agencies-search-fields:hover {
    box-shadow: 0 6px 20px rgba(20, 24, 35, .10);
    border-color: var(--border)
}

.agencies-search-fields:focus-within {
    border-color: var(--ring);
    box-shadow: 0 8px 24px rgba(20, 24, 35, .12), 0 0 0 3px rgba(26, 26, 26, .06)
}

.agencies-search-city {
    position: relative;
    flex: 0 0 260px;
    border-right: 1px solid var(--border);
    border-radius: 22px 0 0 22px;
    transition: background .15s ease
}

.agencies-search-city:hover {
    background: var(--muted)
}

/* 2026-05-16 — multi-city chip combobox.
   Replaces the single <select>. Chips render inline with the input field;
   suggestions float below as an absolutely-positioned overlay. The legacy
   .agencies-search-city select / ::after rules are dropped because both the
   <select> and the CSS arrow are no longer present. */
.citycombo {
    /* Vertical-center fix: the .agencies-search-fields row stretches each
       cell to row height (~56px). The combo's control was 48px tall and sat
       at the top of the cell, leaving 8px below — placeholder text rendered
       4px above the true vertical center. Make .citycombo a flex column
       that centers its child (the control) on the cell's full height. */
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center
}

.citycombo-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    /* 2026-09-06 — bilo 40px, ispod praga od 44px. Polje unutra ostaje nize,
       ali je dodirna meta ceo okvir, on nosi cursor:text i otvara spisak. */
    min-height: 44px;
    padding: 4px 28px 4px 14px;
    cursor: text;
    box-sizing: border-box
}

.citycombo-chips {
    display: contents
}

.citycombo-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    background: var(--muted);
    color: var(--foreground);
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    max-width: 100%;
    transition: background .15s ease
}

.citycombo-chip:hover {
    background: var(--secondary)
}

.citycombo-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px
}

.citycombo-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, .06);
    border-radius: 50%;
    color: var(--muted-foreground);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease
}

.citycombo-chip-x:hover {
    background: var(--foreground);
    color: var(--d-foreground)
}

.citycombo-input {
    flex: 1 1 100px;
    min-width: 80px;
    height: 32px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    font-size: 14px;
    outline: none;
    color: var(--foreground)
}

/* Kill the global input:focus #222 box-shadow ring — the wrapper
   (.agencies-search-fields:focus-within) already shows focus. Matches the
   name field's existing override so both search inputs look the same. */
.citycombo-input:hover,
.citycombo-input:focus {
    box-shadow: none !important;
    border-color: transparent !important
}

.citycombo-caret {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: color .15s ease
}

.citycombo-caret:hover {
    color: var(--foreground)
}

.citycombo-suggestions {
    /* Positioned relative to .agencies-search-wrap (the 680px wrapper), so
       it spans the full width of the search bar instead of being squeezed
       under the narrow city cell.
       This is the SCROLL container — no padding. Padding lives on the inner
       wrapper below; browsers can otherwise visually eat padding-bottom on a
       scrolling element, making the last item butt against the bottom border. */
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    max-height: min(560px, calc(100vh - 320px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--popover);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 16px 48px rgba(20, 24, 35, .14), 0 4px 12px rgba(20, 24, 35, .06);
    z-index: 50;
    padding: 0;
    animation: citycombo-fade-in .12s ease
}

/* Inner wrapper carries the padding so the last item ALWAYS has visible
   breathing room, whether the outer is scrolling or not. */
.citycombo-suggestions-inner {
    padding: 12px
}

@keyframes citycombo-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.citycombo-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 16px;
    font-size: 14px;
    /* Inherited line-height was 15px (~1.07) — too tight for descenders, so
       "Kragujevac" had its g+j clipped at the bottom. Set 1.5 explicitly so
       g/j/p/q render fully inside the line-box. */
    line-height: 1.5;
    color: var(--foreground);
    cursor: pointer;
    border-radius: 12px;
    transition: background .12s ease
}

.citycombo-suggestion:hover,
.citycombo-suggestion.is-active {
    background: var(--muted)
}

/* Optional section header inside the dropdown — added on the fly via JS only
   when query is empty (showing default top-12 cities). Subtle uppercase label. */
.citycombo-suggestions-header {
    padding: 6px 16px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: .04em
}

.citycombo-suggestion-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    /* Inherit the parent's 1.5 line-height explicitly. With overflow: hidden,
       a too-tight inherited line-height (e.g. 15px from a body rule) was
       clipping the bottoms of descenders. 1.5 gives full descender clearance. */
    line-height: 1.5
}

.citycombo-suggestion-cnt {
    color: var(--muted-foreground);
    font-size: 12px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums
}

.citycombo-empty {
    padding: 16px 14px;
    color: var(--muted-foreground);
    font-size: 13px;
    text-align: center
}

.agencies-search-name {
    flex: 1;
    position: relative;
    transition: background .15s ease;
    /* Vertical-center fix: same as the city cell — the 48px input was
       top-aligned inside the 56px cell so placeholder text was 4px above
       true center. Flex-center the input within the cell. */
    display: flex;
    align-items: center
}

.agencies-search-name:hover {
    background: var(--muted)
}

.agencies-search-name>svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--muted-foreground);
    pointer-events: none
}

.agencies-search-name input {
    width: 100%;
    height: 48px;
    padding: 0 38px 0 38px;
    border: none;
    border-radius: 0;
    font-size: 14px;
    outline: none;
    background: transparent;
    box-sizing: border-box
}

.agencies-search-name input:hover,
.agencies-search-name input:focus {
    border: none !important;
    box-shadow: none !important
}

.agencies-search-btn {
    flex-shrink: 0;
    height: 48px;
    padding: 0 24px;
    margin: 4px;
    background: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18)
}

.agencies-search-btn:hover {
    background: var(--primary-hover);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
    transform: translateY(-1px)
}

.agencies-search-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18)
}

.agencies-search-btn svg {
    width: 16px;
    height: 16px
}

.agencies-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--muted-foreground);
    background: var(--secondary);
    border-radius: 50%;
    z-index: 2;
    line-height: 0
}

.agencies-search-clear svg {
    display: block
}

.agencies-search-clear:hover {
    background: var(--input);
    color: var(--foreground)
}

.agencies-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--popover);
    border: 1px solid var(--border);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 280px;
    overflow-y: auto;
    /* 2026-05-18 — must outrank .agencies-toolbar (sticky, z-index: 10)
       which sits below in DOM and creates its own stacking context.
       At equal z-index, the toolbar wins the tiebreak AND punches the
       filter chips through this dropdown. Match the citycombo z-index
       (50) so both autocompletes stack consistently. */
    z-index: 50
}

.agencies-autocomplete-item {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    line-height: 1.4
}

.agencies-autocomplete-item:last-child {
    border-bottom: none
}

.agencies-autocomplete-item:hover {
    background: var(--muted)
}

.agencies-autocomplete-item .ac-city {
    color: var(--muted-foreground);
    font-size: 13px;
    margin-left: 8px
}

.agencies-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 680px;
    margin: 18px auto 0
}

/* 2026-05-17 (Airbnb pass) — unified pill style.
   Dropped the green "trust" color-coding + inline divider. One
   coherent row of pills per Airbnb's category-bar pattern. Krug:
   user doesn't care about our internal categorization (platform
   vs trust); they care about the filter's outcome. */
.agencies-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 36px tall pill — Airbnb category-pill spec is 32-40px range */
    padding: 9px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--foreground);
    text-decoration: none;
    background: var(--card);
    transition: border-color .15s cubic-bezier(0.2, 0, 0, 1),
                background .15s cubic-bezier(0.2, 0, 0, 1),
                box-shadow .15s cubic-bezier(0.2, 0, 0, 1);
    white-space: nowrap;
    cursor: pointer
}

.agencies-filter-pill:hover {
    border-color: var(--primary-hover);
    color: var(--primary-hover);
    background: var(--card);
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06)
}

.agencies-filter-pill.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
    /* Slight padding-right adjustment for the trailing × on active pills */
    padding-right: 12px
}

/* "Sve agencije" pill (active when no filter applied) shouldn't get
   the × — it's the default state, not a removable filter. */
.agencies-filter-pill.active:not(:first-of-type)::after {
    content: '×';
    display: inline-block;
    margin-left: 6px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    opacity: 0.8;
    transition: opacity .15s ease;
    vertical-align: -1px
}

.agencies-filter-pill.active:not(:first-of-type):hover::after {
    opacity: 1
}

.agencies-filter-pill.active:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--primary-foreground) !important; /* defeat global a:hover cascade */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14)
}

/* Backward-compat shims — old class names still appear in some
   markup paths during transition. */
.agencies-filter-pill-divider { display: none }
.agencies-filter-pill-trust { /* inherits from .agencies-filter-pill */ }

/* SEO landing pages reuse the city-landing layout but with their own
   gradient accent so they feel distinct from a city page. */
.agencies-hero-seo-landing {
    background: linear-gradient(135deg, var(--muted) 0%, var(--accent) 100%)
}

.agencies-filter-reset {
    font-size: 13px;
    color: var(--muted-foreground);
    text-decoration: none;
    margin-left: 4px;
    transition: color .2s
}

.agencies-filter-reset:hover {
    color: var(--primary-hover);
    text-decoration: underline
}

/* 2026-05-17 — symmetric padding so the text sits visually centered
   between the toolbar's bottom border (above) and this element's own
   bottom border (below). Was: padding-bottom 14px only, which sank
   the text against the lower line. */
.agencies-results-count {
    font-size: 14px;
    color: var(--muted-foreground);
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px
}

.agencies-results-count strong {
    color: var(--foreground);
    font-weight: 700
}

.agencies-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 32px 0 24px
}

.agencies-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    text-decoration: none;
    background: var(--card);
    transition: all .2s
}

.agencies-page-link:hover {
    border-color: var(--primary-hover);
    color: var(--primary-hover);
    text-decoration: none
}

.agencies-page-link.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
    font-weight: 700
}

.agencies-page-link.disabled {
    opacity: .4;
    pointer-events: none
}

.agencies-page-dots {
    min-width: 30px;
    text-align: center;
    color: var(--muted-foreground);
    font-size: 14px;
    line-height: 38px
}

.agencies-grid {
    display: grid;
    /* minmax(0, 1fr) — same reasoning as featured carousel. Otherwise long agency
       names with no breakable whitespace cause card columns to expand and bust
       the wrapper, producing horizontal scroll on the whole page. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 28px gap so the layered card shadows have breathing room without
       overlapping each other. 20px caused visual touching at edges. */
    gap: 28px;
    margin-bottom: 48px
}

/* 2026-05-16 — design-review §3.1: 3-column grid at ≥1280px viewports.
   20 cards × 2 cols = 10 scroll rows; 3 cols cuts it to ~7. Widen the page
   wrapper at the same breakpoint so cards stay readable (~360px each rather
   than ~300px which would crush the row-flex logo+body layout). */
@media (min-width: 1280px) {
    .agencies-page-wrapper {
        max-width: 1200px
    }
    .agencies-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

.agency-card {
    background: var(--card);
    /* No 1px border — the inset hairline layer of the lift-2 shadow IS
       the border. Airbnb pattern: shadow-as-border for warm-lifted cards. */
    border: 0;
    /* Airbnb listing-card radius is 20px (--corner-radius-xlarge20px) */
    border-radius: 20px;
    /* 28px internal padding so content has Airbnb-grade breathing room
       on all four sides (was 22px which felt cramped against the card edge). */
    padding: 28px;
    /* 2026-05-17 — switched to column flex. Logo + name sit in the
       header (horizontal row), everything else (rating, pills, desc,
       contact, button) sits in .agency-card-content below at FULL
       card width. Previously row-flex squeezed all content into the
       right column next to the logo. */
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Airbnb "lift-2" 3-layer shadow:
         layer 1: inset hairline ring (acts as border)
         layer 2: ambient (small offset, low opacity)
         layer 3: lift (larger blur, higher opacity)         */
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.02),
        0 2px 6px 0 rgba(0, 0, 0, 0.04),
        0 4px 8px 0 rgba(0, 0, 0, 0.10);
    transition: box-shadow .2s cubic-bezier(0.2, 0, 0, 1),
                transform .2s cubic-bezier(0.2, 0, 0, 1);
    text-decoration: none;
    color: inherit
}

.agency-card:hover {
    /* Lift to elevation-3 on hover, keeping the layered structure */
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.02),
        0 8px 24px 0 rgba(0, 0, 0, 0.10);
    transform: translateY(-2px)
}

/* 2026-05-16 — Krug pass: whole-card click target.
   The agency name link gets a pseudo-element overlay that covers the card,
   so any click on empty card surface navigates to the profile. Other anchors
   (phone, website, claim, view-profile, compare label) sit above the overlay
   via z-index so they keep their own targets. This is the standard "card
   overlay link" pattern — works with screen readers because there's only one
   primary link, and avoids nesting <a> inside <a>. */
.agency-card-name a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit
}

.agency-card-logo-col,
.agency-card-content {
    position: relative;
    z-index: 0
}

.agency-card a:not(.agency-card-name a),
.agency-card-compare-check,
.agency-card-btn,
.agency-card-claim-btn,
.agency-card-contact {
    position: relative;
    z-index: 2
}

/* Header row — logo on left, name + city on right. Vertically
   centered so a long agency name doesn't push the logo to the top.
   Always horizontal (no wrap) — the body section below uses full
   card width for everything else. */
.agency-card-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-right: 88px;  /* reserve space for the absolute Uporedi pill */
    min-width: 0
}

/* 2026-09-06 — rezerva od 88px postoji zbog pilule "Uporedi", koja je apsolutno
   pozicionirana u gornjem desnom uglu kartice.
   Popodne istog dana pilula je dodata i nepreuzetim karticama (poredjenje je i ranije
   radilo za sve, samo se kvacica nije crtala), pa rezerva vazi za obe grane i ovde se
   vise ne ponistava. Na telefonu se, nize u ovom fajlu, pilula skriva i rezerva pada
   na nulu: ime tada dobija punih 196px umesto 140. */

.agency-card-titles {
    flex: 1;
    min-width: 0
}

.agency-card-logo-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center
}

/* 2026-05-18 PM — Airbnb-style rounded square, matches .gp-hero-logo
   on the profile page exactly. 20px corner (≈21% of 96px), 3-layer
   shadow (hairline + ambient + lift), subtle top highlight in the
   placeholder gradient, embossed initial. */
.agency-card-logo {
    width: 96px;
    height: 96px;
    border-radius: 20px;
    object-fit: cover;
    background: var(--card);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.04),
        0 2px 6px 0 rgba(0, 0, 0, 0.04),
        0 4px 8px 0 rgba(0, 0, 0, 0.06)
}

.agency-card-logo-placeholder {
    width: 96px;
    height: 96px;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0) 45%),
        linear-gradient(135deg, #2a2a2a 0%, #3d3d3d 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.04),
        0 2px 6px 0 rgba(0, 0, 0, 0.06),
        0 4px 12px 0 rgba(0, 0, 0, 0.10)
}

/* Card body — full card width below the header. Holds rating, pills,
   description, contact row + view-profile button. */
.agency-card-content {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex: 1
}

.agency-card-top {
    /* No more name/city here — they moved to .agency-card-titles in
       the header. .agency-card-top is now just a wrapper around the
       rating chip; spacing handled by the parent flex gap. */
    margin: 0
}

.agency-card-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--foreground);
    /* 8px between the name and the inline verified pill below */
    margin: 0 0 8px;
    line-height: 1.3;
    letter-spacing: -0.18px;
    /* padding-right reservation lives on .agency-card-header now
       (so logo + titles together leave room for the Uporedi pill). */
    display: block
}

.agency-card-name a {
    color: inherit;
    text-decoration: none;
    transition: color .15s ease
}

.agency-card:hover .agency-card-name a {
    color: var(--foreground)
}

/* Verified badge: small inline-block immediately after the name link, with
   a gap. Sits on the same line when there's room; wraps cleanly below when
   the name fills the line. */
.agency-card-name .agency-card-verified {
    margin-left: 6px;
    vertical-align: 2px
}

.agency-card-verified {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--status-ok);
    background: var(--status-ok-soft);
    padding: 2px 8px;
    border-radius: 999px;
    vertical-align: middle;
    white-space: nowrap;
    margin-left: 0
}

.agency-card-city {
    font-size: 13px;
    color: var(--muted-foreground);
    /* City sits inside .agency-card-titles under the name + license.
       Rating chip and the rest live in .agency-card-content below the
       header, so the bottom margin is no longer needed (header→content
       spacing comes from .agency-card flex gap). */
    margin: 0
}

/* Rating chip — calmer base, full prominence on hover. The gold-on-cream was
   visually loud and competed with the agency name. Cleaner neutral chip with
   gold stars carries the same trust signal without shouting. */
.agency-card-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1;
    padding: 8px 12px;
    background: #f8f6f0;
    border: 1px solid #f0ebdf;
    border-radius: 12px;
    /* 24px breathing before the stats row below — keeps the rating chip
       from butting against the stat numbers. */
    margin: 0 0 24px;
    text-decoration: none;
    color: #5b4400;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
    align-self: flex-start;
    /* Lock height so the chip baseline is constant regardless of inner content */
    min-height: 34px;
    box-sizing: border-box
}

.agency-card-rating:hover {
    background: #fff8e1;
    border-color: #ffcd66;
    text-decoration: none
}

.agency-card-rating-value {
    font-weight: 800;
    font-size: 16px;
    color: #2a2000;
    font-variant-numeric: tabular-nums
}

/* Star-bar visualization: two stacked text layers (grey bg + gold fg)
   with the foreground width clipped to (rating / 5) * 100%. */
.agency-card-rating-stars {
    position: relative;
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 1px;
    color: var(--border);
    white-space: nowrap
}
.agency-card-rating-stars-bg {
    display: inline-block
}
.agency-card-rating-stars-fg {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--star);
    overflow: hidden;
    white-space: nowrap
}

.agency-card-rating-count {
    color: #8a7333;
    font-size: 12px;
    font-variant-numeric: tabular-nums
}

/* "na Google-u" — quiet source label so the star chip unmistakably reads as a
   Google rating (vs. our own on-profile reviews). */
.agency-card-rating-source {
    color: #8a7333;
    font-size: 12px;
    opacity: .8;
    white-space: nowrap
}

.agency-card-stats {
    display: flex;
    /* 24px gap between stat columns — pairs with internal 28px padding */
    gap: 24px;
    /* 20px breathing before the desc/contact row (was 8px which felt
       crammed against the description) */
    margin-bottom: 20px
}

.agency-card-stat {
    display: flex;
    flex-direction: column
}

.agency-card-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--foreground);
    line-height: 1.2
}

.agency-card-stat-value.has-ads {
    color: var(--foreground)
}

.agency-card-stat-label {
    font-size: 11px;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: .3px
}

.agency-card-desc {
    font-size: 13px;
    color: var(--muted-foreground);
    line-height: 1.5;
    /* 24px breathing before the bottom contact row */
    margin: 0 0 24px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.agency-card-bottom {
    display: flex;
    align-items: center;
    /* 20px gap between contact items + buttons (was 16px). Wider gap so
       elements read as separate units, not a tight cluster. */
    gap: 20px;
    flex-wrap: wrap;
    margin-top: auto;
    /* 20px breathing above the contact row (was 12px). Section divider
       inside the card needs the same rhythm as page section dividers. */
    padding-top: 20px;
    border-top: 1px solid var(--border)
}

.agency-card-contact {
    font-size: 13px;
    color: var(--muted-foreground);
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.agency-card-contact a {
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color .15s ease
}

.agency-card-contact a:hover {
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 2px
}

.agency-card-contact svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.7
}

/* Primary CTA — dark filled pill, matches the .gp-action-call /
   .gp-contact-card-call treatment on the agency profile page so the
   page-to-card visual language stays consistent. */
.agency-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 10px 18px;
    background: var(--primary);
    border: 0;
    border-radius: 999px;
    color: var(--primary-foreground);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
    white-space: nowrap
}

.agency-card-btn:hover {
    background: var(--primary-hover);
    color: var(--primary-foreground) !important; /* defeat global a:hover */
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15)
}

.agency-card:hover .agency-card-btn {
    background: var(--primary-hover)
}

.agency-card-btn svg {
    width: 14px;
    height: 14px
}

.agencies-cta-banner {
    background: var(--d-background);
    border-radius: 16px;
    text-align: center;
    padding: 40px 24px;
    margin-bottom: 32px
}

.agencies-cta-banner h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--d-foreground);
    margin: 0 0 8px
}

.agencies-cta-banner p {
    font-size: 15px;
    color: var(--d-secondary-foreground);
    margin: 0 0 20px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto
}

.agencies-cta-banner .btn-register {
    display: inline-block;
    padding: 12px 32px;
    background: var(--card);
    color: var(--foreground);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all .2s
}

.agencies-cta-banner .btn-register:hover {
    background: var(--muted);
    text-decoration: none;
    color: var(--foreground)
}

.agencies-no-results {
    display: none;
    text-align: center;
    padding: 48px 20px;
    color: var(--muted-foreground);
    font-size: 15px
}

.agencies-footer-text {
    font-size: 14px;
    color: var(--muted-foreground);
    line-height: 1.6;
    margin-top: 32px;
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto
}

.agency-card-unclaimed {
    border: 1.5px dashed var(--input);
    background: var(--muted)
}

.agency-card-unclaimed:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px)
}

/* Unclaimed = warm muted grey instead of cool blue-grey ("not yet
   personalized" rather than "abandoned"). Matches .gp-hero-unclaimed. */
.agency-card-unclaimed .agency-card-logo-placeholder {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0) 45%),
        linear-gradient(135deg, #B4B0AA 0%, #CFCBC5 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12)
}

.agency-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 8px
}

.agency-card-meta-item {
    font-size: 12px;
    color: var(--muted-foreground);
    display: flex;
    align-items: center;
    gap: 4px
}

.agency-card-meta-item strong {
    font-weight: 600;
    color: var(--secondary-foreground)
}

/* Claim-this-profile CTA on unclaimed cards — primary action.
   Definitive rule. The second .agency-card-claim-btn block later in this
   file is the visual the user actually sees (blue solid pill). Consolidated
   here so there's a single source of truth. */
.agency-card-claim-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-left: auto;
    padding: 8px 16px;
    background: var(--primary);
    color: var(--primary-foreground);
    border: 0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
    white-space: nowrap
}

/* Zahtev za preuzimanje čeka proveru — 13.09.2026. Isto mesto kao dugme, ali nije
   dugme: siva, bez pokazivača, da niko ne šalje dokument uzalud. */
.agency-card-claim-btn.is-pending {
    background: var(--muted, #f3f4f6);
    color: var(--muted-foreground, #6b7280);
    cursor: default
}

.agency-card-claim-btn:hover {
    background: var(--primary-hover);
    color: var(--primary-foreground) !important; /* defeat global a:hover cascade */
    text-decoration: none;
    transform: translateY(-1px)
}

.agency-card-claim-btn svg {
    width: 14px;
    height: 14px
}

@media (max-width:600px) {
    .agencies-page-wrapper {
            padding: 61px 14px 32px
        }
    .agencies-hero {
            padding: 20px 16px 18px;
            border-radius: 12px
        }
    .agencies-hero h1 {
            font-size: 22px;
            line-height: 1.25;
            margin-bottom: 6px
        }
    .agencies-search-fields {
            flex-direction: column;
            border-radius: 10px
        }
    .agencies-search-city {
            flex: none;
            border-right: none;
            border-bottom: 1px solid var(--border)
        }
    .agencies-search-city select {
            height: 44px
        }
    .agencies-search-name input {
            height: 44px
        }
    .agencies-search-btn {
            height: 44px;
            justify-content: center;
            border-radius: 0 0 8px 8px
        }
    .agencies-filters {
            gap: 6px
        }
    .agencies-filter-pill {
            /* 2026-05-17 (Airbnb pass) — keep mobile tap-target at ~34px
               with 13px text (was 6px/12px → too thin, hard to hit).
               2026-09-06 — 34px je ispod praga od 44px koji vazi na celom sajtu.
               Slog i unutrasnji razmak ostaju isti, raste samo visina mete. */
            padding: 8px 14px;
            font-size: 13px;
            min-height: 44px;
            display: inline-flex;
            align-items: center
        }
    .agencies-sort {
            font-size: 13px
        }
    .agencies-sort label {
            /* On mobile, the visible selected option already says what's
               sorted ("Najveće") — the prefix label "Sortiraj po:" is
               redundant and consumes ~80px we can't spare. */
            display: none
        }
    .agencies-sort select {
            padding: 8px 32px 8px 14px;
            font-size: 13px;
            min-height: 44px   /* 2026-09-06 — bilo 39px */
        }
    .agencies-grid {
            grid-template-columns: 1fr
        }
    .agency-card {
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 20px 16px
        }
    .agency-card-stats {
            justify-content: center
        }
    .agency-card-bottom {
            justify-content: center
        }
    .agency-card-btn {
            margin-left: 0
        }
    .agency-card-claim-btn {
            margin-left: 0
        }
    .agencies-cta-banner {
            padding: 28px 16px;
            border-radius: 12px
        }
    .agencies-cta-banner h2 {
            font-size: 20px
        }
    .agencies-pagination {
            gap: 2px
        }
    .agencies-page-link {
            /* 2026-09-05 — dodirna meta: bilo 34x34, ispod praga od 44.
               Na 375 ima svega 4 veze, pa 4x44 + razmaci staje bez prelivanja. */
            min-width: 44px;
            height: 44px;
            font-size: 13px
        }
}

/* Scope to tablet range only (601–768). Without min-width, the
   `.agencies-search-city { flex: 0 0 170px }` rule below would
   override the <=600 column-direction rule and turn into a fixed
   170px HEIGHT (because flex-basis is along the main axis, which
   becomes vertical when flex-direction:column kicks in at <=600).
   That's what caused the tall empty city cell on mobile. */
@media (min-width:601px) and (max-width:768px) {
    .agencies-page-wrapper {
            padding: 69px 16px 40px
        }
    .agencies-hero {
            padding: 28px 20px 24px
        }
    .agencies-hero h1 {
            font-size: 28px
        }
    .agencies-grid {
            gap: 16px
        }
    .agencies-search-city {
            flex: 0 0 170px
        }
}

/* ──────────────────────────────────────────────────────────────────
   Phase 1 — Trust-signal pills + unclaimed-card imported-data row
   ────────────────────────────────────────────────────────────────── */

.agency-card-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px
}

/* Trust pills — Airbnb 2026 pass: line icons replace color-coded
   backgrounds. The icon does the labeling at a glance (Krug:
   scannable), the number is the data, the noun is confirmation.
   2026-05-17: pill content wraps so it never breaks out of the card
   on narrow grid columns. max-width: 100% caps the pill at card width;
   row-gap on flex-wrap stacks the sub-text onto its own line when the
   parent text + sub combined would overflow. */
.agency-pill {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 6px;
    row-gap: 2px;
    font-size: 12px;
    line-height: 1.3;
    padding: 6px 12px;
    border-radius: 16px;
    color: var(--muted-foreground);
    background: var(--muted);
    border: 0;
    max-width: 100%;
    transition: background .15s ease, color .15s ease
}

.agency-pill:hover {
    background: var(--secondary);
    color: var(--foreground)
}

.agency-pill-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--muted-foreground);
    opacity: 0.85
}

.agency-pill strong {
    color: var(--foreground);
    font-weight: 700;
    font-variant-numeric: tabular-nums
}

/* Per-type accents removed — icons + neutral grey unify the row.
   Specific colored numbers (green/blue) were noise; numbers in #222
   read with proper weight. */
.agency-pill-listings strong,
.agency-pill-cities   strong,
.agency-pill-since    strong {
    color: var(--foreground)
}

/* 2026-05-17 — blokade pills break the neutral-grey convention
   intentionally: this IS a status signal (good/bad), not a passive
   trust pill, so it gets a distinct color treatment. Subtle enough to
   not yell over the agency name, but tinted enough to be scannable
   at the card-grid level. Source: NBS DUPN, refreshed daily. */
.agency-pill-blokade-ok {
    background: var(--status-ok-soft);
    color: var(--status-ok)
}
.agency-pill-blokade-ok .agency-pill-icon,
.agency-pill-blokade-ok strong {
    color: var(--status-ok)
}
.agency-pill-blokade-ok:hover {
    background: var(--status-ok-soft);
    color: var(--status-ok)
}

.agency-pill-blokade-bad {
    background: var(--status-bad-soft);
    color: var(--destructive)
}
.agency-pill-blokade-bad .agency-pill-icon,
.agency-pill-blokade-bad strong {
    color: var(--destructive)
}
.agency-pill-blokade-bad:hover {
    background: var(--status-bad-soft);
    color: var(--destructive)
}

/* 2026-05-17 PM — historical blokade (yellow) state. Companies that
   had blokada periods in past 5 years but currently 0,00 RSD. Vlad's
   URSUS example (87 days history, no current amount). Yellow because
   it's a yellow flag, not a red — they've had issues but accounts
   are now operational. */
/* 2026-05-18 PM — softened to gold-on-cream. Burnt orange still
   read as alarming. Semantic for this state is "noted, look
   into it" not "warning". Kept in sync with profile-page
   .gp-cw-check-hist + .gp-cw-blokade-periods. */
.agency-pill-blokade-hist {
    background: var(--status-warn-soft);
    color: var(--status-warn)
}
.agency-pill-blokade-hist .agency-pill-icon,
.agency-pill-blokade-hist strong {
    color: var(--status-warn)
}
.agency-pill-blokade-hist:hover {
    background: var(--status-warn-soft);
    color: var(--status-warn)
}

/* 2026-05-17 — sub-text takes its own row inside the pill (via the
   parent's flex-wrap). Drops the left-border divider since it's now
   on a different line and the row-gap provides the visual break.
   flex-basis: 100% forces a wrap before the sub so it never sits
   inline (which would push the pill outside the card on narrow grids). */
.agency-pill-sub {
    color: inherit;
    opacity: 0.75;
    font-weight: 500;
    flex-basis: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 1.4
}

/* Unclaimed-card address row — Krug pass: since this only ever shows one
   field now (address), hide the "ADRESA" label and present the address as
   a quiet line with a pin-glyph prefix. The label remains in the DOM for
   screen readers. */
.agency-card-imported {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--muted-foreground)
}

.agency-card-imported-row {
    display: flex;
    align-items: baseline;
    gap: 6px
}

.agency-card-imported-row::before {
    content: '\1F4CD'; /* round pushpin (📍) */
    font-size: 12px;
    line-height: 1;
    opacity: .6;
    flex-shrink: 0
}

.agency-card-imported-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.agency-card-imported-value {
    color: var(--muted-foreground);
    line-height: 1.4
}

/* (Legacy duplicate .agency-card-claim-btn rule retired — single source
   of truth lives earlier in this file with explicit `color: #fff !important`
   on hover to defeat the global a:hover cascade that was making the text
   blend into the dark hover background.) */

/* Secondary "View profile" button on unclaimed cards (claim takes priority) */
.agency-card-btn-secondary {
    background: transparent !important;
    color: var(--muted-foreground) !important;
    border: 1px solid var(--input)
}

.agency-card-btn-secondary:hover {
    background: var(--muted) !important;
    color: var(--foreground) !important;
    border-color: var(--border)
}

/* ──────────────────────────────────────────────────────────────────
   Phase 2 — Toolbar (sticky), sort dropdown, featured carousel,
   city-landing hero, 3-column responsive grid
   ────────────────────────────────────────────────────────────────── */

/* Sticky toolbar: filter pills + sort dropdown in one row, stays visible
   when user scrolls down the grid. */
.agencies-toolbar {
    position: sticky;
    /* 2026-09-06 — bilo 0, pa je traka klizila ISPOD fiksnog zaglavlja
       (.header-bar-wrapper, style.css:3098, height 49px). Gornja polovina prvog
       reda filtera zavrsavala je pod logotipom, a dodir na nju vodio na naslovnu. */
    top: 49px;
    z-index: 10;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    /* margin removed — results-count sits directly below and its top
       padding is now symmetric with its bottom padding so the count
       text reads as centered between the two hairline dividers. */
    margin: 0;
    /* 2026-05-17 (Airbnb pass) — vertical rhythm. 14px top/bottom gives
       the unified pill row enough breathing room above and below;
       previously 10px felt cramped against the hero + featured carousel. */
    padding: 14px 0
}

.agencies-toolbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap
}

/* 2026-05-17 (Airbnb pass) — sort dropdown styled as a peer pill so
   filters + sort read as one coherent control row, not two unrelated
   UI elements. Same border, radius, font as .agencies-filter-pill. */
.agencies-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--muted-foreground)
}

.agencies-sort label {
    font-weight: 500;
    color: var(--muted-foreground);
    /* Hide the "Sortiraj po:" label visually on narrow screens — the
       dropdown's selected-option already conveys the active sort,
       and on mobile every pixel of horizontal space matters. */
}

.agencies-sort select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2.5' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 14px center;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 9px 36px 9px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--foreground);
    cursor: pointer;
    transition: border-color .15s cubic-bezier(0.2, 0, 0, 1),
                box-shadow .15s cubic-bezier(0.2, 0, 0, 1)
}

.agencies-sort select:hover {
    border-color: var(--secondary-foreground);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06)
}

.agencies-sort select:focus {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(26, 26, 26, .08)
}

/* City-landing hero — breadcrumb + city name in title */
.agencies-hero-breadcrumb {
    font-size: 13px;
    color: var(--muted-foreground);
    margin-bottom: 12px
}

.agencies-hero-breadcrumb a {
    color: var(--muted-foreground);
    text-decoration: none
}

.agencies-hero-breadcrumb a:hover {
    color: var(--foreground);
    text-decoration: underline
}

.agencies-hero-breadcrumb-sep {
    margin: 0 6px;
    color: var(--muted-foreground)
}

.agencies-hero-city .agencies-hero-city-name {
    color: var(--accent-foreground);
    font-weight: 600
}

/* Featured agencies carousel — horizontal scroll on mobile, grid on desktop.
   2026-05-17 (Airbnb pass): bumped top margin from 0 → 32px and bottom
   from 28 → 40px so the carousel reads as a distinct content block
   below the (now visually-unified) toolbar, not a continuation of it. */
.agencies-featured-section {
    margin: 32px 0 40px
}

.agencies-featured-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--foreground);
    margin: 0 0 4px
}

.agencies-featured-subtitle {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0 0 20px
}

.agencies-featured-carousel {
    display: grid;
    /* minmax(0, 1fr) is the canonical fix for "grid columns expand past their share
       when child content has long min-content". Without the 0 min, each 1fr column
       grows to fit the card's longest unbreakable token (e.g. "AGENCIJA ZA NEKRETNINE
       MASTER 021"), and the whole carousel busts the 960px content wrapper. */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px
}

.agencies-featured-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease
}

.agencies-featured-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 106, 255, .08);
    transform: translateY(-2px);
    text-decoration: none
}

.agencies-featured-logo {
    width: 64px;
    height: 64px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center
}

.agencies-featured-logo img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 8px
}

.agencies-featured-logo-placeholder {
    width: 64px;
    height: 64px;
    background: var(--accent);
    color: var(--accent-foreground);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700
}

.agencies-featured-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%
}

.agencies-featured-namecity {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 50px
}

.agencies-featured-body {
    text-align: center;
    width: 100%;
    /* Pixel-perfect alignment fix: lay the body out as a column with the
       rating pushed to the bottom via margin-top: auto. With tiles equal
       height (grid flex), the ratings line up horizontally regardless of
       whether each tile shows 1 or 2 name lines, with or without a city
       line. Previously rating Y varied by up to 25px across the row. */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 90px;
    padding-bottom: 4px
}

.agencies-featured-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 4px;
    line-height: 1.3;
    /* Reserve a 2-line slot so the name+city stack has fixed height regardless
       of whether name is 1 or 2 lines. height = font-size × line-height × 2 =
       13 × 1.3 × 2 ≈ 34px. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    min-height: 34px
}

.agencies-featured-city {
    font-size: 12px;
    color: var(--muted-foreground);
    margin: 0
}

.agencies-featured-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto !important; /* push to bottom of body */
    padding-top: 10px;
    font-size: 11px
}

.agencies-featured-rating-value {
    font-weight: 700;
    color: #3a2c00;
    font-size: 13px
}

.agencies-featured-rating-count {
    color: #806020;
    font-size: 10px
}

.agencies-featured-license {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    color: var(--status-ok);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1
}

.agencies-featured-license svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0
}

/* Responsive carousel collapse */
@media (max-width: 1024px) {
    .agencies-featured-carousel {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}
@media (max-width: 640px) {
    .agencies-featured-carousel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px
    }
    .agencies-featured-logo, .agencies-featured-logo img, .agencies-featured-logo-placeholder {
        width: 48px;
        height: 48px
    }
    .agencies-toolbar-inner {
        gap: 8px
    }
}


/* ──────────────────────────────────────────────────────────────────
   Phase 4 — Compare mode: card checkbox, floating bar, compare table
   ────────────────────────────────────────────────────────────────── */

.agency-card { position: relative }

.agency-card-compare-check {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(4px);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    color: var(--muted-foreground);
    user-select: none;
    /* Krug pass: a checkbox on every card is genuinely useful (compare flow)
       but it doesn't need to scream. Calm chrome by default, full clarity on
       card hover or its own focus state. */
    opacity: .7;
    transition: opacity .15s ease, color .15s ease, border-color .15s ease, background .15s ease;
    z-index: 2
}

.agency-card:hover .agency-card-compare-check,
.agency-card-compare-check:hover,
.agency-card-compare-check:focus-within {
    opacity: 1;
    color: var(--foreground);
    border-color: var(--input);
    background: var(--card)
}

.agency-card-compare-input {
    margin: 0;
    cursor: pointer;
    accent-color: var(--primary);
    width: 13px;
    height: 13px
}

.agency-card-compare-label { font-weight: 500; line-height: 1 }

/* Floating compare bar — sticks to bottom of viewport when selection has items */
.compare-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--d-background);
    color: var(--d-foreground);
    border-top: 3px solid var(--primary);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .15);
    padding: 14px 20px
}

.compare-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap
}

.compare-bar-info { font-size: 14px; flex: 1; min-width: 0 }
.compare-bar-info strong { color: var(--d-foreground); font-size: 16px }
.compare-bar-names {
    color: var(--muted-foreground);
    font-size: 13px;
    margin-left: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 50%;
    white-space: nowrap;
    vertical-align: bottom
}

.compare-bar-actions { display: flex; gap: 8px }

.compare-bar-clear, .compare-bar-go {
    border: none;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease
}

.compare-bar-clear {
    background: transparent;
    color: var(--muted-foreground);
    border: 1px solid var(--d-border)
}

.compare-bar-clear:hover { background: var(--d-card); color: var(--d-foreground) }

.compare-bar-go {
    background: var(--primary);
    color: var(--primary-foreground)
}

.compare-bar-go:hover { background: var(--primary-hover); transform: translateY(-1px) }
.compare-bar-go:disabled { background: #6a6a6a; cursor: not-allowed; transform: none }

@media (max-width: 640px) {
    .compare-bar-names { display: none }
    .compare-bar-clear, .compare-bar-go { padding: 6px 10px; font-size: 13px }
}

/* Compare-page layout */
.compare-page-wrapper { padding-bottom: 100px }

.compare-breadcrumb {
    font-size: 13px;
    color: var(--muted-foreground);
    margin: 16px 0 12px
}

.compare-breadcrumb a { color: var(--muted-foreground); text-decoration: none }
.compare-breadcrumb a:hover { color: var(--foreground); text-decoration: underline }
.compare-breadcrumb-sep { margin: 0 6px; color: var(--muted-foreground) }

.compare-h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--foreground);
    margin: 0 0 4px
}

.compare-subtitle {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0 0 24px
}

.compare-empty {
    background: #fff8e1;
    border: 1px solid #ffe0a3;
    border-radius: 8px;
    padding: 16px;
    color: #5b4400;
    font-size: 14px
}

.compare-empty a { color: var(--accent-foreground); font-weight: 600; margin-left: 4px }

.compare-table-wrap { overflow-x: auto }

.compare-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card)
}

.compare-attr-col { width: 160px }

.compare-attr-label {
    background: var(--muted);
    padding: 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: .3px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle
}

.compare-agency-col {
    padding: 16px 12px;
    border-bottom: 2px solid var(--border);
    text-align: center;
    background: var(--card);
    min-width: 200px
}

.compare-agency-link { text-decoration: none; color: inherit; display: block }

/* 2026-05-18 PM — unified with .gp-hero-logo / .agency-card-logo:
   rounded square (14px on 64px tile ≈ 22%), warm-charcoal gradient,
   hairline + ambient shadow (lighter than the listing card because
   compare tiles are dense — heavy shadows would create noise). */
.compare-agency-logo, .compare-agency-logo-placeholder {
    width: 64px;
    height: 64px;
    margin: 0 auto 8px;
    display: block;
    object-fit: cover;
    border-radius: 14px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.04),
        0 1px 4px 0 rgba(0, 0, 0, 0.05)
}

.compare-agency-logo-placeholder {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0) 45%),
        linear-gradient(135deg, #2a2a2a 0%, #3d3d3d 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18)
}

.compare-agency-name { font-size: 15px; font-weight: 700; color: var(--foreground) }
.compare-agency-city { font-size: 13px; color: var(--muted-foreground); margin-top: 2px }

.compare-cell {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    text-align: center;
    font-size: 14px
}

.compare-cell-about { text-align: left; font-size: 13px; color: var(--muted-foreground); line-height: 1.5 }

.compare-empty-cell { color: var(--muted-foreground) }

.compare-rating { display: inline-flex; flex-direction: column; align-items: center; gap: 2px }
.compare-rating-value { font-weight: 700; color: #3a2c00; font-size: 18px }
.compare-rating-count { font-size: 11px; color: #806020 }

.compare-yes { color: var(--status-ok); font-weight: 600 }

.compare-phone-link, .compare-web-link {
    color: var(--accent-foreground);
    text-decoration: none;
    font-weight: 500
}
.compare-phone-link:hover, .compare-web-link:hover { text-decoration: underline }

.compare-visit-btn {
    display: inline-block;
    padding: 8px 14px;
    background: var(--primary);
    color: var(--primary-foreground);
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s ease
}
.compare-visit-btn:hover { background: var(--primary-hover); color: var(--primary-foreground) !important; text-decoration: none }

@media (max-width: 640px) {
    .compare-table { font-size: 13px }
    .compare-attr-col { width: 120px }
    .compare-agency-logo, .compare-agency-logo-placeholder { width: 48px; height: 48px }
    .compare-agency-name { font-size: 13px }
}

/* 2026-09-04 (korak 6 teme) — smanjeno kretanje po komponenti: samo ulazak padajuće liste gradova. */
@media (prefers-reduced-motion: reduce) {
    .citycombo-suggestions { animation: none; }
}

/* 2026-09-06 — recenica koja je zamenila pilulu "Licencirane". Ona je vracala SVE
   agencije, pa nije bila filter nego tvrdnja. Tiha je namerno: nosi cinjenicu, ne
   trazi klik. */
.agencies-licensed-note {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted-foreground)
}

/* -------------------------------------------------------------------------------------
   TELEFON: poređenje se ne nudi, ime dobija ceo red — 06.09.2026.

   Pilula „Uporedi" stoji apsolutno u gornjem desnom uglu i traži 88px rezerve u zaglavlju
   kartice. Na 375px je to trećina širine: ime se lomilo u osam do devet redova velikim
   slovima. Poređenje dve agencije jedna uz drugu je posao za širi ekran, a i sama tabela
   poređenja se na telefonu čita teško.

   Zato se na telefonu pilula skriva i rezerva pada na nulu; ime tada dobija 196px umesto
   140. Skriva se omotač, ne sam input, pa jQuery i dalje čita zatečeno stanje izbora.
   ------------------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .agency-card-compare-check {
        display: none
    }

    .agency-card-header {
        padding-right: 0
    }
}

/* -------------------------------------------------------------------------------------
   PILULE POSLOVANJA — 07.09.2026.

   Blizina je roba koju ima svaki imenik. Ovo su podaci koje nema niko drugi, pa idu na
   karticu. Izmereno na 1.294 agencije: posluje od 934 (72%), zaposleni 700 (54%),
   bonitet A+/A 385 (30%).

   Namerno NEMA poreskog duga ni slabog boniteta: nijedna agencija ne duguje porez i
   nijedna nema ocenu ispod A. Oznaka koju svi imaju ne razlikuje nikoga; to je greška
   zbog koje je 06.09. sklonjena pilula „Licencirane".

   Tiše su od pilule blokade, jer blokada je upozorenje a ovo je kontekst.
   ------------------------------------------------------------------------------------- */
.agency-pill-founded,
.agency-pill-emp,
.agency-pill-bonitet {
    background: var(--muted);
    color: var(--secondary-foreground);
    border: 1px solid var(--border)
}

.agency-pill-founded strong,
.agency-pill-emp strong {
    color: var(--foreground)
}

/* Bonitet je jedina od tri koja je ocena, pa sme da nosi boju. A+ i A su jedine koje
   se uopšte prikazuju, pa je boja uvek pozitivna. */
.agency-pill-bonitet {
    background: var(--status-ok-soft);
    border-color: #cfe6d8;
    color: var(--status-ok)
}

.agency-pill-bonitet strong {
    color: var(--status-ok)
}

/* Ocena koja NIJE iz A-grupe ne sme da nosi zelenu boju pohvale. Danas takve ocene ne
   postoje (A+ 122, A 263, A- 126, bez ocene 783), ali pravilo stoji unapred. */
.agency-pill-bonitet.agency-pill-bonitet-neutral {
    background: var(--muted);
    border-color: var(--border);
    color: var(--secondary-foreground)
}

.agency-pill-bonitet.agency-pill-bonitet-neutral strong {
    color: var(--foreground)
}

/* ── Agencije po gradovima (hub, 2026-09-14) ─────────────────────────
   Blok veza ka gradskim stranama imenika; isti izgled kao filter pilule
   (.agencies-filter-pill), samo manje i gušće, jer ih je ~110. */
.agencies-cities {
    margin: 8px 0 32px
}

.agencies-cities-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--foreground);
    margin: 0 0 4px
}

.agencies-cities-sub {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0 0 16px
}

.agencies-cities-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.agencies-cities-list li {
    margin: 0;
    padding: 0
}

.agencies-city-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 14px;
    line-height: 1.2;
    color: var(--foreground);
    background: var(--card);
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease
}

.agencies-city-link:hover {
    border-color: var(--primary-hover);
    color: var(--primary-hover);
    text-decoration: none
}

.agencies-city-count {
    color: var(--muted-foreground);
    font-size: 13px
}

@media (max-width: 640px) {
    .agencies-cities-title {
        font-size: 19px
    }
    .agencies-city-link {
        padding: 5px 10px;
        font-size: 13px
    }
}