/* ============ Directory search (/index) ============ */
/* White ground; unified hero band (.site-band) supplies the top visual.
   Old white-card intro removed 2026-07-31. */
.dir { background:#fff; padding:0 0 72px; min-height:60vh; }

/* Layout: filters + results. */
.dir-shell { display:grid; grid-template-columns:320px 1fr; gap:26px; align-items:start; }
@media (max-width:900px){ .dir-shell{ grid-template-columns:1fr; } }
/* Left rail: STATIC (not sticky) - filters card then Get-quotes card. */
.dir-rail { display:flex; flex-direction:column; gap:18px; }

/* ---- Filters ---- */
.dir-filters { background:#fff; border:1px solid var(--line,#e6e9f2); border-radius:18px; padding:20px; box-shadow:0 8px 24px rgba(30,38,109,.06); position:static; display:flex; flex-direction:column; gap:14px; }
.dir-filters__h { display:flex; align-items:center; justify-content:space-between; }
.dir-filters__h h3 { margin:0; font-size:1rem; font-weight:800; color:#150d15; }
.dir-filters__clear { font-size:.8rem; font-weight:800; color:#656d80; text-decoration:none; }
.dir-filters__clear:hover { color:#150d15; }
.dir-search { position:relative; }
.dir-search input { width:100%; box-sizing:border-box; padding:11px 13px 11px 40px; border:1.5px solid var(--line,#e6e9f2); border-radius:11px; font:inherit; font-size:.92rem; background:#fbfaff; color:var(--s-ink,#150d15); outline:none; transition:border-color .15s, box-shadow .15s; }
.dir-search input:focus { border-color:#6865e7; box-shadow:0 0 0 3px rgba(104,101,231,.14); }
.dir-search .mag { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted,#656d80); }
.dir-field { display:flex; flex-direction:column; gap:6px; }
/* Only the field's OWN label is the uppercase caption - NOT nested option
   labels (feature checkboxes live inside .dir-field and were catching this). */
.dir-field > label { font-size:.78rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--muted,#656d80); }
.dir-field select { width:100%; box-sizing:border-box; padding:10px 12px; border:1.5px solid var(--line,#e6e9f2); border-radius:11px; font:inherit; font-size:.9rem; background:#fff; color:var(--s-ink,#150d15); cursor:pointer; }
.dir-field select:focus { outline:0; border-color:#6865e7; box-shadow:0 0 0 3px rgba(104,101,231,.14); }
.dir-chip-active { display:inline-flex; align-items:center; gap:8px; font-size:.9rem; font-weight:600; padding:8px 12px; background:#f1edfa; border-radius:9px; color:#524fd4; }
.dir-chip-active a { color:#8a86c8; text-decoration:none; font-size:1.1rem; line-height:1; }
.dir-chip-active a:hover { color:#6865e7; }
.dir-check { display:flex; align-items:center; gap:9px; font-size:.9rem; font-weight:600; color:var(--text-dark,#2b3245); cursor:pointer; }
.dir-check input { width:17px; height:17px; accent-color:#6865e7; }
.dir-actions { display:flex; align-items:center; gap:14px; margin-top:4px; }
.dir-actions .btn { flex:1; text-align:center; }
.dir-clear { font-size:.85rem; font-weight:700; color:var(--muted,#656d80); text-decoration:none; }
.dir-clear:hover { color:#6865e7; }

/* ---- Results ---- */
.dir-resulthead { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.dir-count { font-size:1rem; font-weight:800; color:#150d15; }
.dir-sort { display:inline-flex; align-items:center; gap:8px; font-size:.85rem; color:var(--muted,#656d80); font-weight:700; }
.dir-sort select { padding:8px 11px; border:1.5px solid var(--line,#e6e9f2); border-radius:10px; font:inherit; font-size:.88rem; background:#fff; color:var(--s-ink,#150d15); cursor:pointer; }

/* #2 - results are ONE column now. */
.dir-list { display:flex; flex-direction:column; gap:12px; }

/* Listing card (shared shape with the category page). */
/* #2 - one-column rich card: logo, body, chevron. */
.lc { display:flex; align-items:flex-start; gap:16px; background:#fff; border:1px solid var(--line,#e6e9f2); border-radius:14px; padding:16px 18px; text-decoration:none; color:inherit; box-shadow:0 1px 2px rgba(30,38,109,.04); transition:border-color .16s, box-shadow .16s, transform .16s; }
.lc:hover { border-color:#c9c0f2; box-shadow:0 14px 36px rgba(104,101,231,.14); transform:translateY(-1px); }
.lc__logo { flex:none; width:56px; height:56px; border-radius:13px; display:grid; place-items:center; color:#fff; font-weight:900; font-size:1.25rem; }
.lc__body { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.lc__top { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.lc__name { font-weight:800; font-size:1.08rem; color:#150d15; line-height:1.2; }
.lc__desc { font-size:.9rem; line-height:1.5; color:var(--text,#5a6478); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lc__meta { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:5px; }
.lc__cat { font-size:.76rem; padding:4px 10px; border-radius:8px; background:#f1edfa; color:#6865e7; font-weight:800; }
.lc__loc { display:inline-flex; align-items:center; gap:5px; font-size:.84rem; color:var(--muted,#656d80); font-weight:700; }
.lc__loc svg { width:13px; height:13px; }
.lc__go { flex:none; align-self:center; color:#c9c0f2; font-size:1.3rem; font-weight:700; transition:color .16s, transform .16s; }
.lc:hover .lc__go { color:#6865e7; transform:translateX(3px); }
/* legacy skeleton class kept */
.lc__grade { flex:none; font-size:.82rem; font-weight:800; color:#0a7d46; background:#e6f6ed; border:1px solid #b8e6cc; padding:3px 10px; border-radius:8px; }
.lc__chip { font-size:.78rem; padding:3px 9px; border-radius:7px; background:#f1edfa; color:#6865e7; font-weight:700; }

.dir-empty { text-align:center; padding:54px 20px; background:#fff; border:1px dashed var(--line,#e6e9f2); border-radius:14px; }
.dir-empty p { color:var(--text,#5a6478); font-size:1.02rem; margin:0 0 18px; }

/* ---- Overview map (collapsible) ---- */
.dir-map { margin-bottom:18px; border:1px solid var(--line,#e6e9f2); border-radius:12px; background:#fff; overflow:hidden; }
.dir-map > summary { cursor:pointer; padding:12px 16px; font-weight:700; font-size:.9rem; color:var(--text-dark,#2b3245); list-style:none; display:flex; align-items:center; gap:8px; }
.dir-map > summary::-webkit-details-marker { display:none; }
.dir-map > summary::before { content:''; width:9px; height:9px; border-right:2px solid #6865e7; border-bottom:2px solid #6865e7; transform:rotate(-45deg); transition:transform .2s; }
.dir-map[open] > summary::before { transform:rotate(45deg); }
.dir-map .wh-map { border-top:1px solid var(--line,#e6e9f2); }
.wh-map { z-index:0; }
.wh-map .leaflet-control-attribution { font-size:10px; }
/* Opt Leaflet images out of the global img{max-width:100%;height:auto} reset. */
.leaflet-container img { max-width:none!important; height:auto; }
.leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile { max-width:none!important; }
.leaflet-marker-icon { display:block; }

/* ---- Pagination ---- */
.dir-pager { margin-top:26px; }
.dir-pager nav { display:flex; justify-content:center; }
.dir-pager .pagination { display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0; align-items:center; }
.dir-pager .page-item .page-link, .dir-pager .page-item span { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px; border-radius:10px; border:1px solid var(--line,#e6e9f2); background:#fff; color:var(--text-dark,#2b3245); font-weight:700; font-size:.9rem; text-decoration:none; transition:background .14s, border-color .14s, color .14s; }
.dir-pager .page-item .page-link:hover { border-color:#6865e7; color:#6865e7; }
.dir-pager .page-item.active span { background:#6865e7; border-color:#6865e7; color:#fff; }
.dir-pager .page-item.disabled span { opacity:.4; }
/* Brand SVG pin (divIcon) — strip the default divIcon box. */
.wh-pin{background:none;border:0;}
.wh-pin svg{display:block;filter:drop-shadow(0 2px 3px rgba(21,13,21,.3));}

/* ============ Keyword geo-landing (/index/{country}/{city}/{keyword}) ============ */
/* Scope note in the sidebar. */
.kl-scope { margin:2px 0 0; font-size:.86rem; font-weight:700; color:#150d15; }
/* Related searches list in the sidebar. */
.kl-related { border-top:1px solid var(--line,#e6e9f2); padding-top:16px; }
.kl-related__list { display:flex; flex-direction:column; gap:2px; }
.kl-related__list a { display:flex; align-items:center; gap:9px; font-size:.88rem; color:#6865e7; text-decoration:none; padding:5px 0; font-weight:600; border-bottom:1px solid #f0eefb; }
.kl-related__list a:last-child { border-bottom:0; }
.kl-related__list a:hover { color:#150d15; }
.kl-related__ico { flex:none; display:inline-flex; }
.kl-related__ico svg { width:18px; height:18px; color:#8f8bd8; }
.kl-related__list a:hover .kl-related__ico svg { color:#6865e7; }
/* Templated SEO copy under the results. */
.kl-copy { margin-top:34px; padding-top:26px; border-top:1px solid var(--line,#e6e9f2); }
.kl-copy h2 { font-size:1.3rem; font-weight:800; color:#150d15; margin:0 0 12px; }
.kl-copy p { font-size:.95rem; line-height:1.7; color:var(--text,#5a6478); margin:0 0 12px; }
.kl-copy a { color:#6865e7; font-weight:700; text-decoration:none; }
.kl-copy a:hover { text-decoration:underline; }

/* Design placeholder (skeleton) cards — visual stubs while the catalogue is
   thin. Not interactive; pulse to read clearly as placeholders. */
.lc--stub { pointer-events:none; background:#fbfbfd; border-style:dashed; box-shadow:none; }
.lc--stub .lc__name, .lc--stub .lc__grade--stub, .lc--stub .lc__desc span,
.lc--stub .lc__chip--stub, .lc--stub .lc__loc {
  background:linear-gradient(90deg,#eceaf6 25%,#f4f2fb 37%,#eceaf6 63%);
  background-size:400% 100%; border-radius:6px; color:transparent; border-color:transparent;
  animation:kl-shimmer 1.4s ease infinite;
}
.lc--stub .lc__name { width:56%; height:1.05rem; }
.lc--stub .lc__grade--stub { width:34px; height:1.3rem; }
.lc--stub .lc__desc { display:flex; flex-direction:column; gap:6px; }
.lc--stub .lc__desc span { display:block; height:.72rem; }
.lc--stub .lc__desc span:first-child { width:100%; }
.lc--stub .lc__desc span:last-child { width:72%; }
.lc--stub .lc__chip--stub { width:80px; height:1.1rem; }
.lc--stub .lc__loc { width:110px; height:.82rem; }
@keyframes kl-shimmer { 0% { background-position:100% 0; } 100% { background-position:-100% 0; } }
@media (prefers-reduced-motion: reduce){ .lc--stub .lc__name,.lc--stub .lc__grade--stub,.lc--stub .lc__desc span,.lc--stub .lc__chip--stub,.lc--stub .lc__loc{ animation:none; } }

/* ---- Primary search bar (separate from filters, above results) ---- */
/* #3 - full-width search bar on the results page. */
.dir-searchbar { width:100%; margin:6px 0 14px; }
/* #2 - context is a normal BLOCK so its inline label + term links wrap like
   text and can never run off to the right (flex kept them on one long line). */
.dir-context { display:block; margin:0 0 18px; padding:11px 14px; background:#f3f1fd; border:1px solid #e0daf7; border-radius:12px; font-size:.92rem; color:#5a6478; line-height:1.9; overflow-wrap:anywhere; }
.dir-context > span, .dir-context strong, .dir-context__tags { display:inline; }
.dir-context strong { color:#150d15; font-weight:800; }
.dir-context strong { color:#150d15; font-weight:800; }
.dir-context__clear { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; background:#fff; color:#6865e7; text-decoration:none; font-size:1.1rem; line-height:1; border:1px solid #e0daf7; }
.dir-context__clear:hover { background:#6865e7; color:#fff; }

/* Resolved-tag chip inside the search context bar (synonym -> tag). */
/* #1 - resolved-term chips are now small inline LINKS (no fill), and anything
   past the first 8 folds into a "+N more" accordion so they never blanket the page. */
.dir-context__tags { display:inline; }
/* NO white-space:nowrap - a long term must be free to wrap so it can never
   push past the box edge (Firefox rendered a nowrap chip slightly wider and it
   escaped the block). overflow-wrap breaks even a long single token. */
.dir-context__tag { display:inline; padding:0; background:none; color:#6865e7; font-weight:700; font-size:.82rem; text-decoration:none; overflow-wrap:anywhere; }
.dir-context__tag::before { content:'·'; color:#c3bde6; margin:0 5px 0 3px; }
.dir-context__tag:hover { text-decoration:underline; }
/* Checkbox-hack accordion for the overflow terms (cross-browser, unlike inline <details>). */
.dir-context__rest { display:none; }
.dir-context__cb:checked ~ .dir-context__rest { display:inline; }
.dir-context__cb:checked ~ .dir-context__toggle { display:none; }
.dir-context__toggle { display:inline; cursor:pointer; color:#8a86a0; font-weight:800; font-size:.8rem; margin-left:6px; }
.dir-context__toggle:hover { color:#6865e7; }

/* Collapsed chain card (a multi-location brand shown once in results) */
.lc--brand{border-color:#d9d4f3;background:linear-gradient(180deg,#faf9ff, #fff);}
.lc--brand:hover{border-color:#6865e7;}
.lc__count{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:800;color:#6865e7;background:#efedfd;padding:3px 11px;border-radius:999px;}

/* ===== /index empty-state: big centred search (type + country + city) ===== */
.dir-hero-search{display:flex;justify-content:center;padding:26px 0 60px}
.dir-hero-search__inner{width:100%;max-width:640px;text-align:center}
.dir-hero-search__title{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;color:#150d15;margin:0 0 6px}
.dir-hero-search__lede{color:#5b5670;margin:0 0 22px;font-size:1.02rem}
.dir-hero-search__quick{margin-bottom:18px}
.dir-hero-search__or{display:flex;align-items:center;gap:14px;color:#8b8699;font-size:.86rem;margin:6px 0 18px}
.dir-hero-search__or::before,.dir-hero-search__or::after{content:"";flex:1;height:1px;background:#e6e4ee}

.dir-bigform{display:flex;flex-direction:column;gap:14px;align-items:stretch}
/* Type segmented control */
.dir-seg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dir-seg__btn{padding:16px 12px;font-size:1.05rem;font-weight:700;color:#150d15;background:#fff;border:2px solid #e6e4ee;border-radius:14px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.dir-seg__btn:hover{border-color:#c9c5dd}
.dir-seg__btn.is-on{border-color:var(--primary,#6865e7);background:#f3f2fe;box-shadow:0 0 0 3px rgba(104,101,231,.14)}
/* Country + city row */
.dir-bigrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dir-biginput{width:100%;padding:15px 16px;font-size:1.02rem;font-family:inherit;color:#150d15;background:#fff;border:2px solid #e6e4ee;border-radius:14px;outline:none;transition:border-color .15s}
.dir-biginput:focus{border-color:var(--primary,#6865e7)}
.dir-biginput:disabled{background:#f6f5f9;color:#9d99ab;cursor:not-allowed}
.dir-biginput--sel{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23150d15' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
/* City typeahead */
.dir-cityfield{position:relative}
.dir-citypanel{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid #e6e4ee;border-radius:12px;box-shadow:0 12px 30px rgba(21,13,21,.12);overflow:hidden;max-height:280px;overflow-y:auto;text-align:left}
.dir-citypanel__opt{display:block;width:100%;text-align:left;padding:11px 14px;font-size:.98rem;color:#150d15;background:#fff;border:0;border-bottom:1px solid #f1eff6;cursor:pointer}
.dir-citypanel__opt:last-child{border-bottom:0}
.dir-citypanel__opt:hover{background:#f3f2fe}
.dir-citypanel__opt em{color:#8b8699;font-style:normal}
/* Big search button + hint */
.dir-bigbtn{width:100%;padding:16px;font-size:1.08rem;margin-top:4px}
.dir-bigbtn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.3)}
.dir-bigform__hint{color:#8b8699;font-size:.88rem;margin:2px 0 0}
@media (max-width:560px){
  .dir-seg,.dir-bigrow{grid-template-columns:1fr}
}

/* ----- /index empty-state: icons, flag dropdown, right-aligned Search ----- */
/* type buttons: icon + label (same height as before) */
.dir-seg__btn{display:flex;align-items:center;justify-content:center;gap:10px}
.dir-seg__btn svg{width:22px;height:22px;flex:none;color:#6f6a86}
.dir-seg__btn.is-on svg{color:var(--primary,#6865e7)}

/* country: custom flag dropdown (matches .dir-biginput sizing) */
.dir-cselect{position:relative}
.dir-cselect__btn{display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;width:100%}
#bfCountryLabel{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bfCountryLabel.is-placeholder{color:#9d99ab}
.dir-cselect__chev{width:18px;height:18px;flex:none;color:#150d15}
.dir-flag{display:inline-block;width:22px;height:16px;flex:none;border-radius:3px;background-size:cover;background-position:center;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.dir-cselect__panel{position:absolute;z-index:31;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid #e6e4ee;border-radius:12px;box-shadow:0 12px 30px rgba(21,13,21,.12);overflow:hidden}
.dir-cselect__q{width:100%;border:0;border-bottom:1px solid #eee;padding:12px 14px;font:inherit;font-size:.98rem;outline:none}
.dir-cselect__opts{max-height:260px;overflow-y:auto}
.dir-cselect__opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 14px;font-size:.98rem;color:#150d15;background:#fff;border:0;border-bottom:1px solid #f4f2f9;cursor:pointer}
.dir-cselect__opt:last-child{border-bottom:0}
.dir-cselect__opt:hover{background:#f3f2fe}
.dir-cselect__opt.is-on{background:#f3f2fe;font-weight:700}
.dir-cselect__none{padding:12px 14px;color:#8b8699;font-size:.92rem;margin:0}

/* Search: right-aligned, same width as the City field */
.dir-bigsubmit{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dir-bigsubmit .dir-bigbtn{grid-column:2;width:100%;margin-top:0}
.dir-bigbtn{display:flex;align-items:center;justify-content:center;gap:9px}
.dir-bigbtn svg{width:19px;height:19px;flex:none}
@media (max-width:560px){
  .dir-bigsubmit{grid-template-columns:1fr}
  .dir-bigsubmit .dir-bigbtn{grid-column:1}
}

.dir-flag[hidden]{display:none}

.dir-hero-search__step{font-weight:700;color:#150d15;margin:0 0 12px;font-size:1.02rem;text-align:center}

/* country dropdown section separator (Popular / All countries) */
.dir-cselect__sep{padding:7px 14px;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#9d99ab;background:#faf9fd;border-top:1px solid #efedf6;border-bottom:1px solid #efedf6}

.dir-hero-search__quick .wh-search__btn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.35)}

/* /index empty-state: unified query row (one search, one button) */
.dir-hero-search__step--2{margin-top:20px}
.dir-searchrow{display:flex;gap:10px;align-items:stretch}
.dir-searchrow__field{position:relative;flex:1}
.dir-searchrow__mag{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:#8b8699;pointer-events:none}
.dir-searchrow__input{padding-left:42px}
.dir-searchbtn{flex:none;padding:15px 26px;display:flex;align-items:center;gap:9px;font-size:1.02rem}
.dir-searchbtn svg{width:19px;height:19px;flex:none}
.dir-searchbtn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.35)}
@media (max-width:560px){.dir-searchrow{flex-direction:column}.dir-searchbtn{justify-content:center}}

/* ============ /index LANDING (pre-search) — split hero (Variant B) ============ */
.dir-land{ max-width:1160px; margin:0 auto; }
.dir-land__hero{ display:grid; grid-template-columns:1.15fr .85fr; gap:20px; align-items:stretch; }
@media (max-width:900px){ .dir-land__hero{ grid-template-columns:1fr; } }

/* LEFT: composer */
.dir-compose{ position:relative; background:#fff; border:1px solid #e6e9f2; border-radius:18px; padding:26px; box-shadow:0 18px 44px rgba(21,13,21,.08); }
.dir-eyebrow{ font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#6865e7; }
.dir-compose__title{ font-size:clamp(1.5rem,3.2vw,2.05rem); font-weight:800; color:#150d15; margin:8px 0 6px; letter-spacing:-.02em; line-height:1.15; }
.dir-compose__lede{ color:#8a86a0; margin:0 0 20px; }
.dir-block{ border:1.5px solid #e6e9f2; border-radius:12px; padding:15px; background:#faf9ff; }
.dir-block + .dir-block{ margin-top:12px; }
.dir-block__h{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.dir-block__n{ flex:none; width:24px; height:24px; border-radius:50%; background:#6865e7; color:#fff; font-weight:800; display:grid; place-items:center; font-size:.78rem; }
.dir-block--off .dir-block__n{ background:#a9a4bd; }
.dir-block__t{ font-weight:800; color:#150d15; font-size:.96rem; }
.dir-block__note{ margin-left:auto; color:#8a86a0; font-size:.76rem; }
.dir-block .dir-bigrow{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
@media (max-width:520px){ .dir-block .dir-bigrow{ grid-template-columns:1fr; } }

/* search field = the bordered box; input transparent; mag inline; panel anchors here */
.dir-searchrow__field{ position:relative; flex:1; display:flex; align-items:center; gap:10px; background:#fff; border:2px solid #e6e4ee; border-radius:14px; padding:0 14px; min-width:0; }
.dir-searchrow__field:focus-within{ border-color:#6865e7; }
.dir-searchrow .dir-searchrow__mag{ position:static; top:auto; left:auto; transform:none; color:#656d80; width:19px; height:19px; flex:none; }
.dir-searchrow__field .wh-search__input{ flex:1; border:0; background:transparent; font:inherit; font-size:1.02rem; color:#150d15; padding:15px 0; outline:none; min-width:0; }

/* toggles + filters button */
.dir-controls{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:18px; }
.dir-toggle{ display:inline-flex; align-items:center; gap:9px; background:#fff; border:1.5px solid #e6e9f2; border-radius:999px; padding:7px 14px 7px 11px; cursor:pointer; font-weight:700; font-size:.88rem; color:#2b2740; user-select:none; }
.dir-toggle input{ position:absolute; opacity:0; width:0; height:0; }
.dir-sw{ width:34px; height:20px; border-radius:999px; background:#e6e9f2; position:relative; flex:none; transition:background .16s; }
.dir-sw::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .16s; }
.dir-toggle input:checked ~ .dir-sw::after{ transform:translateX(14px); }
.dir-toggle[data-kind="req"] input:checked ~ .dir-sw{ background:#1f9d63; }
.dir-toggle[data-kind="req"]:has(input:checked){ border-color:#1f9d63; background:#e7f6ee; }
.dir-toggle[data-kind="rec"] input:checked ~ .dir-sw{ background:#b8892b; }
.dir-toggle[data-kind="rec"]:has(input:checked){ border-color:#b8892b; background:#fbf3e2; }
.dir-toggle input:focus-visible ~ .dir-sw{ box-shadow:0 0 0 3px rgba(104,101,231,.3); }
.dir-filters-btn{ margin-left:auto; background:#fff; border:1.5px solid #e6e9f2; color:#150d15; border-radius:999px; padding:8px 15px; font:inherit; font-weight:800; cursor:pointer; display:inline-flex; gap:8px; align-items:center; }
.dir-filters-btn:hover{ border-color:#6865e7; color:#6865e7; }

/* RIGHT: brand / recognition panel */
.dir-brandpanel{ border-radius:18px; padding:26px; color:#fff; display:flex; flex-direction:column; box-shadow:0 18px 44px rgba(21,13,21,.10);
  background:radial-gradient(130% 130% at 100% 0%, rgba(255,255,255,.20) 0, transparent 55%), linear-gradient(150deg,#6f6bec,#4d49c9 70%,#3f2f7a); }
.dir-bp__shield{ width:50px; height:50px; border-radius:14px; background:rgba(255,255,255,.16); display:grid; place-items:center; margin-bottom:16px; }
.dir-bp__shield svg{ width:27px; height:27px; }
.dir-bp__h{ font-size:1.3rem; font-weight:800; margin:0 0 6px; letter-spacing:-.01em; color:#fff; }
.dir-bp__sub{ color:rgba(255,255,255,.82); font-size:.92rem; margin:0 0 14px; }
.dir-bp__t{ font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:9px; }
.dir-bp__cities{ margin:2px 0 16px; }
.dir-bp__cities a{ color:#fff; text-decoration:none; font-weight:700; font-size:.88rem; margin:0 6px 6px 0; padding:5px 10px; border-radius:8px; display:inline-block; background:rgba(255,255,255,.12); }
.dir-bp__cities a:hover{ background:rgba(255,255,255,.24); }
.dir-bp__pts{ display:flex; flex-direction:column; gap:10px; margin:0 0 16px; }
.dir-bp__pt{ display:flex; gap:10px; align-items:flex-start; font-size:.88rem; color:rgba(255,255,255,.94); }
.dir-bp__pt svg{ width:18px; height:18px; flex:none; margin-top:1px; color:#e7c66a; }
.dir-bp__apps{ margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,.18); }
.dir-bp__appsrow{ display:flex; gap:12px; flex-wrap:wrap; }
.dir-appbadge{ display:inline-flex; text-decoration:none; transition:transform .14s, opacity .14s; }
.dir-appbadge:hover{ transform:translateY(-1px); opacity:.92; }
.dir-appbadge img{ height:44px; width:auto; display:block; }
@media (max-width:520px){ .dir-appbadge img{ height:42px; } }

/* Filters slide-over */
.dir-sheet-back{ position:fixed; inset:0; background:rgba(21,13,21,.4); z-index:80; opacity:0; pointer-events:none; transition:opacity .2s; }
.dir-sheet-back.is-open{ opacity:1; pointer-events:auto; }
.dir-sheet{ position:fixed; top:0; right:0; height:100%; width:min(420px,94vw); background:#fff; border-left:1px solid #e6e9f2; box-shadow:-20px 0 50px rgba(21,13,21,.18); transform:translateX(100%); transition:transform .22s; z-index:81; display:flex; flex-direction:column; }
.dir-sheet.is-open{ transform:none; }
.dir-sheet[hidden]{ display:flex; }   /* keep it in the form; visibility via transform */
.dir-sheet__h{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid #e6e9f2; }
.dir-sheet__h b{ font-size:1.05rem; color:#150d15; font-weight:800; }
.dir-sheet__x{ border:0; background:transparent; font-size:1.5rem; color:#8a86a0; cursor:pointer; line-height:1; }
.dir-sheet__body{ padding:18px 20px; overflow:auto; flex:1; display:flex; flex-direction:column; gap:16px; }
.dir-sheet__field > label{ display:block; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#8a86a0; margin:0 0 7px; }
.dir-sheet__field select{ width:100%; padding:11px 12px; border:1.5px solid #e6e9f2; border-radius:11px; background:#faf9ff; color:#150d15; font:inherit; }
.dir-sheet__check{ display:inline-flex; align-items:center; gap:9px; font-weight:700; color:#2b2740; cursor:pointer; }
/* two selects side by side (Category+Specialism, Plan+Distinction) */
.dir-sheet__row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dir-sheet__row2 .dir-sheet__field[hidden]{ display:none; }
@media (max-width:420px){ .dir-sheet__row2{ grid-template-columns:1fr; } }

/* Features as collapsible facet groups (no more one flat blanket of chips) */
.dir-facets{ display:flex; flex-direction:column; border:1.5px solid #e6e9f2; border-radius:12px; overflow:hidden; }
.dir-facet{ border-bottom:1px solid #eee; background:#fff; }
.dir-facet:last-child{ border-bottom:0; }
.dir-facet > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px; padding:11px 13px; font-weight:700; font-size:.9rem; color:#2b2740; user-select:none; }
.dir-facet > summary::-webkit-details-marker{ display:none; }
.dir-facet__label{ flex:1; }
.dir-facet__badge{ flex:none; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#6865e7; color:#fff; font-size:.7rem; font-weight:800; display:grid; place-items:center; }
.dir-facet__chev{ flex:none; width:16px; height:16px; color:#9d99ab; transition:transform .18s; }
.dir-facet[open] > summary .dir-facet__chev{ transform:rotate(180deg); }
.dir-facet[open] > summary{ background:#faf9ff; }
.dir-facet__body{ display:grid; grid-template-columns:1fr 1fr; gap:2px 14px; padding:6px 13px 13px; }
@media (max-width:420px){ .dir-facet__body{ grid-template-columns:1fr; } }
.dir-facet__opt{ display:flex; align-items:center; gap:8px; padding:5px 0; font-size:.86rem; color:#2b2740; cursor:pointer; }
.dir-facet__opt input{ flex:none; width:16px; height:16px; accent-color:#6865e7; }

.dir-sheet__f{ padding:16px 20px; border-top:1px solid #e6e9f2; display:flex; gap:12px; align-items:center; justify-content:space-between; }
.dir-sheet__apply{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; }
.dir-sheet__apply svg{ width:17px; height:17px; flex:none; }
.dir-sheet__clear{ color:#8a86a0; font-weight:800; text-decoration:none; }
.dir-sheet__clear:hover{ color:#150d15; }

/* Browse the directory */
.dir-browse{ margin-top:34px; }
.dir-browse__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 14px; }
.dir-browse__h{ font-weight:800; color:#150d15; font-size:1.05rem; margin:0; }
.dir-browse__all{ flex:none; font-weight:800; font-size:.9rem; color:#6865e7; text-decoration:none; white-space:nowrap; }
.dir-browse__all:hover{ text-decoration:underline; }
/* the 8 most-populated categories, one row on desktop -> vertical compact cards */
.dir-catgrid{ display:grid; grid-template-columns:repeat(8,1fr); gap:10px; }
@media (max-width:980px){ .dir-catgrid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:560px){ .dir-catgrid{ grid-template-columns:repeat(2,1fr); } }
.dir-catcard{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px; background:#fff; border:1px solid #e6e9f2; border-radius:12px; padding:15px 8px; text-decoration:none; color:#150d15; font-weight:800; transition:transform .14s, border-color .14s, box-shadow .14s; }
.dir-catcard:hover{ transform:translateY(-2px); border-color:#c9c0f2; box-shadow:0 12px 30px rgba(21,13,21,.08); }
.dir-catcard__ico{ width:42px; height:42px; border-radius:11px; background:#efeefc; color:#6865e7; display:grid; place-items:center; flex:none; }
.dir-catcard__ico svg{ width:22px; height:22px; }
.dir-catcard__n{ font-size:.82rem; line-height:1.2; }

/* ===== Results redesign: filter toggles, Get-quotes rail, prev/next pager ===== */
/* Switch-style toggles as full-width rows inside the filters card (reuse .dir-sw). */
.dir-toggles { display:flex; flex-direction:column; gap:9px; }
.dir-toggles .dir-toggle { width:100%; justify-content:flex-start; border-radius:11px; padding:10px 12px; }
.dir-tt { display:flex; flex-direction:column; line-height:1.2; font-weight:700; font-size:.9rem; color:#150d15; }
.dir-tt small { font-weight:600; font-size:.76rem; color:#656d80; }
.dir-toggles .dir-toggle .dir-sw { margin-left:auto; }

/* Apply button in the filters card. */
.dir-apply { width:100%; margin-top:4px; border:0; border-radius:999px; background:#6865e7; color:#fff; font:inherit; font-weight:800; font-size:.95rem; padding:12px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; transition:background .14s; }
.dir-apply:hover { background:#524fd4; }
.dir-apply svg { width:16px; height:16px; }

/* Get-quotes rail card (after the filters). */
.dir-quotes { background:#fff; border:1px solid var(--line,#e6e9f2); border-radius:18px; box-shadow:0 18px 44px rgba(30,38,109,.10); overflow:hidden; }
.dir-quotes__hd { padding:20px 20px 4px; background:linear-gradient(180deg,#f1eefe,#fff); }
.dir-quotes__eyebrow { font-size:.68rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:#6865e7; }
.dir-quotes__hd h3 { font-size:1.12rem; font-weight:800; color:#150d15; margin:6px 0 3px; }
.dir-quotes__hd p { margin:0 0 14px; font-size:.85rem; color:#656d80; font-weight:600; }
.dir-avstack { display:flex; align-items:center; padding:2px 20px 12px; }
.dir-av { width:34px; height:34px; border-radius:50%; border:2.5px solid #fff; display:grid; place-items:center; color:#fff; font-weight:900; font-size:.75rem; margin-left:-10px; box-shadow:0 2px 6px rgba(30,38,109,.16); }
.dir-av:first-child { margin-left:0; }
.dir-av--more { background:#f1eefe; color:#6865e7; }
.dir-quotes__live { margin:0 20px 12px; font-size:.8rem; color:#00a34a; font-weight:800; display:flex; align-items:center; gap:8px; }
.dir-quotes__live .dot { width:8px; height:8px; border-radius:50%; background:#00b84c; box-shadow:0 0 0 4px rgba(0,184,76,.22); }
.dir-qpts { list-style:none; margin:0; padding:0 20px 6px; display:flex; flex-direction:column; gap:9px; }
.dir-qpts li { display:flex; gap:9px; font-size:.82rem; color:#5a6478; align-items:flex-start; }
.dir-qpts svg { width:16px; height:16px; color:#00b84c; flex:none; margin-top:1px; }
.dir-quotes__cta { display:block; text-align:center; margin:14px 20px 8px; border-radius:999px; background:#6865e7; color:#fff; font-weight:800; font-size:.95rem; padding:13px 14px; text-decoration:none; box-shadow:0 12px 26px rgba(104,101,231,.32); transition:background .14s, transform .14s; }
.dir-quotes__cta:hover { background:#524fd4; transform:translateY(-1px); }
.dir-quotes__fine { margin:0 20px 18px; font-size:.74rem; color:#656d80; text-align:center; }

/* Map summary (city clusters) - flex layout, no double caret. */
.dir-map > summary { justify-content:flex-start; }
.dir-map > summary::before { display:none; }
.dir-map > summary svg { width:18px; height:18px; color:#6865e7; flex:none; }
.dir-map__hint { margin-left:auto; font-size:.76rem; font-weight:700; color:#656d80; }

/* Prev/next pager (#6). */
.dir-pager { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:26px; }
.dir-pg { min-width:40px; height:40px; padding:0 14px; border-radius:10px; border:1.5px solid var(--line,#e6e9f2); background:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:.9rem; color:#150d15; text-decoration:none; transition:border-color .14s, color .14s; }
a.dir-pg:hover { border-color:#6865e7; color:#6865e7; }
.dir-pg--cur { background:#f5f3fe; border-color:#d9d4f3; color:#6865e7; }
.dir-pg--dis { opacity:.4; }
.dir-pagernote { text-align:center; font-size:.8rem; color:#656d80; margin-top:12px; }

/* ===== Round-2 fixes ===== */
/* #3 - real company logo when present (else the colour initial fallback). */
.lc__logo--img { background:#fff; border:1px solid var(--line,#e6e9f2); overflow:hidden; }
.lc__logo--img img { width:100%; height:100%; object-fit:contain; padding:5px; box-sizing:border-box; }

/* #4 - feature options: small, normal case, tight lines (not the field caption). */
.dir-facet__opt { font-size:.8rem; padding:3px 0; line-height:1.25; color:#2b2740; }
.dir-facet__opt input { width:15px; height:15px; }
.dir-facets .dir-facet__body { gap:0 12px; padding:4px 12px 10px; }

/* #5 - Get-quotes "Describe the job" field + reliable button hover. */
.dir-quotes__field { padding:2px 20px 4px; }
.dir-quotes__field label { display:block; font-size:.8rem; font-weight:800; color:#150d15; margin:0 0 6px; }
.dir-quotes__ta { width:100%; box-sizing:border-box; border:1.5px solid #dcdfec; border-radius:11px; background:#fff; padding:10px 12px; font:inherit; font-size:.86rem; color:#150d15; resize:vertical; line-height:1.45; }
.dir-quotes__ta:focus { outline:0; border-color:#6865e7; box-shadow:0 0 0 3px rgba(104,101,231,.16); }
.dir-quotes__ta::placeholder { color:#9aa2b4; }
.dir-quotes__cta, .dir-quotes__cta:hover, .dir-quotes__cta:focus { color:#fff; }
.dir-quotes__cta:hover { background:#524fd4; }

/* ===== Round-3 fixes ===== */
/* #1 - visible city clusters: a number badge per city on the overview map. */
.wh-cluster { background:none; border:0; }
.wh-cluster__b { display:flex; align-items:center; justify-content:center; border-radius:50%; background:#6865e7; color:#fff; font-weight:900; font-size:.8rem; border:2.5px solid #fff; box-shadow:0 3px 10px rgba(104,101,231,.45); font-family:inherit; }
/* #4 - sidebar action buttons use a 5px radius (not the pill). */
.dir-apply, .dir-quotes__cta { border-radius:5px; }

/* ===== Round-4: card accepts-requests badge + Request button, logo avatars ===== */
.lc { position:relative; }
.lc__name.lc__stretch { text-decoration:none; }
/* Stretched link makes the whole card open the profile... */
.lc__stretch::after { content:''; position:absolute; inset:0; z-index:0; }
/* ...while the request button + chevron sit above it and stay clickable. */
.lc__req, .lc__go { position:relative; z-index:1; }
.lc__req { flex:none; align-self:center; border:1.5px solid #6865e7; color:#6865e7; background:#fff; border-radius:5px; padding:9px 14px; font:inherit; font-weight:800; font-size:.82rem; text-decoration:none; white-space:nowrap; transition:background .14s, color .14s; }
.lc__req:hover { background:#6865e7; color:#fff; }
.lc__pill { display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:800; padding:3px 9px; border-radius:999px; }
.lc__pill--req { background:#e7f6ee; color:#0a8a3d; }
.lc__pill--req svg { width:12px; height:12px; }
@media (max-width:560px){ .lc__req{ align-self:flex-start; } }

/* #4 - logo inside the Get-quotes avatar stack. */
.dir-av--img { background:#fff; overflow:hidden; padding:0; }
.dir-av--img img { width:100%; height:100%; object-fit:contain; padding:3px; box-sizing:border-box; }

/* ===== Round-5 ===== */
/* #2 - lift the hovered card (and its R-badge tooltip) above the next card. */
.lc:hover { z-index:10; }

/* ===== Phone pass 2026-09-20: result cards restack to ONE column =====
   The desktop card is [logo | body | Request-a-quote | arrow]; under 640px the
   side column squeezed the name/desc into ~150px ("верстка рвется"). Now the
   card wraps: logo + body on top, the quote button drops to a full-width row
   under the text, the hover arrow (a mouse affordance) goes away. */
@media (max-width:640px){
  .lc{flex-wrap:wrap;gap:12px 14px}
  .lc__logo{width:48px;height:48px}
  .lc__body{flex:1 1 calc(100% - 62px)}
  .lc__go{display:none}
  .lc__req{flex:1 1 100%;align-self:auto;text-align:center;margin-top:2px;padding:11px 14px}
}

/* Phone: the whole Filters card collapses behind its header (tap to open) -
   the full sheet of selects/toggles/facets was a page-long wall before the
   first result (client mobile pass 2026-09-20). display:revert restores each
   child's own display when open. */
@media (max-width:640px){
  .dir-filters > :not(.dir-filters__h){display:none}
  .dir-filters.is-open > :not(.dir-filters__h){display:revert}
  .dir-filters__h{cursor:pointer;-webkit-tap-highlight-color:transparent;margin-bottom:0}
  .dir-filters.is-open .dir-filters__h{margin-bottom:12px}
  .dir-filters__h h3::after{content:"";display:inline-block;width:8px;height:8px;margin-left:9px;
    border-right:2px solid #6f6a86;border-bottom:2px solid #6f6a86;vertical-align:2px;
    transform:rotate(45deg);transition:transform .15s}
  .dir-filters.is-open .dir-filters__h h3::after{transform:rotate(225deg);vertical-align:-2px}
}