/* The card is the site's own (.card in style.css: the ground, the shadow, the glare); the rest is this one's. */
.worker-card{display:flex;flex-direction:column;min-width:0}
.worker-card .card{position:relative;flex:1;cursor:pointer;border:1px solid var(--line-soft);border-radius:18px;transition:transform .2s ease,box-shadow .3s ease}
.worker-card .card::after{border-radius:18px}
/* The trade's colour, once, as a thread along the top edge. */
.worker-card .card::before{position:absolute;z-index:2;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--card-accent),color-mix(in srgb,var(--card-accent) 0%,transparent) 85%);content:"";pointer-events:none}
/* The card's own link, under everything: the text lets clicks through to it, the contact and the seal do not. */
.worker-card-link{position:absolute;inset:0;z-index:0;border-radius:inherit}
.worker-card .property-card__body{position:relative;z-index:1;display:flex;flex:1;flex-direction:column;padding:20px 20px 18px;pointer-events:none}
.worker-card .worker-card-link:focus-visible{outline:none}
.worker-card .card:has(.worker-card-link:focus-visible){box-shadow:0 0 0 3px rgba(var(--accent-rgb),.35)}

/* Who: the picture (or the initials in the trade's colour), the name, the place; stars and crown at the far end. */
.worker-card .worker-who{position:relative;display:flex;align-items:center;gap:12px;min-width:0;margin:0}
/* Written under .worker-card: the catalogue's rule for the row's <span>s (.property-card__location span — the name:
   flex:1, the grey, the ellipsis) reaches every span in it, and stretched the picture into a pill. */
.worker-card .worker-who>span{flex:none;overflow:visible}
.worker-card .worker-who>.worker-who-text{flex:1;min-width:0;overflow:hidden}
.worker-card .worker-who-text>span{flex:none}
.worker-card .worker-avatar,.worker-avatar{display:grid;place-items:center;flex:none;width:44px;height:44px;overflow:hidden;border-radius:50%;background:color-mix(in srgb,var(--card-accent) 16%,var(--white));color:var(--card-accent);font-size:15px;font-weight:800;letter-spacing:.02em}
.worker-avatar img{width:100%;height:100%;object-fit:cover}
.worker-who-text{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.25}
.worker-card .worker-name{display:block;overflow:hidden;color:var(--ink);font-size:15px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.worker-card .worker-place{display:flex;align-items:center;gap:4px;overflow:hidden;margin-top:2px;color:var(--ink-3);font-size:12.5px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.worker-place i{flex:none;color:var(--card-accent);font-size:13px}
/* The seal of a confirmed account, on the picture's corner — and hoverable, which the card's body is not. */
.worker-card .worker-verified{position:absolute;left:30px;top:28px;z-index:2;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--white);color:var(--ok);pointer-events:auto;cursor:help;overflow:visible}
.worker-card .worker-verified i{color:var(--ok);font-size:17px}
/* The bubble hangs to the RIGHT of the seal: centred on it, half of it would hang outside a card that clips. */
.worker-card .worker-verified.tooltip::after{left:-2px;transform:none}
.worker-card .worker-verified.tooltip::before{left:7px;transform:none}
@media (hover:hover) and (pointer:fine){
  .worker-card .worker-verified.tooltip:hover::after,
  .worker-card .worker-verified.tooltip:hover::before{transform:translateY(-2px)}
}
.worker-card .worker-rating{display:inline-flex;flex:none;align-items:center;gap:4px;color:var(--ink-2);font-size:13px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.worker-card .worker-rating i{font-size:14px;color:#E8A317}
.worker-card .worker-rating small{color:var(--ink-3);font-size:12px;font-weight:500}
/* The site's own Premium sign — the black tile with the gold crown, as everywhere. */
.worker-card .worker-crown{display:grid;place-items:center;flex:none;width:28px;height:28px;margin:0;border-radius:9px;color:#d4af37;background:rgba(27,25,22,.82);border:1px solid rgba(212,175,55,.32);box-shadow:0 2px 6px -2px rgba(0,0,0,.22)}
.worker-card .worker-crown i{font-size:14px;color:inherit}

/* What: the trade in large type, the others under it, then what it pays. */
.worker-card-title{margin:16px 0 0;min-width:0;color:var(--ink);font-size:21px;font-weight:750;line-height:1.2;letter-spacing:-.02em;overflow-wrap:anywhere}
.worker-also{margin-top:3px;overflow:hidden;color:var(--ink-3);font-size:13px;font-weight:500;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
/* The pay (2026-10-08, after a rose figure «портит глаза», a marker «тупо» and a plate «нет, давай без фона»): no
   ground, a greyish tone, the figure large and the sign and «-dan» smaller beside it. */
.worker-pay{display:flex;align-items:baseline;gap:5px;margin-top:10px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.worker-pay-figure{font-size:19px;font-weight:800;line-height:1.15;letter-spacing:-.02em}
.worker-pay-unit{font-size:14px;font-weight:700;opacity:.85}
.worker-pay.is-agreed{color:var(--ink-2);font-size:15px;font-weight:650}

/* The chips the ad's own page lists the other trades with (.worker-show-also): in a soft tint of the card's colour,
   no border. The card itself says them as a line of text now (.worker-also). */
.worker-chip{display:inline-flex;align-items:center;padding:6px 11px;border-radius:9px;background:color-mix(in srgb,var(--card-accent,var(--accent)) 9%,var(--white));color:color-mix(in srgb,var(--card-accent,var(--accent)) 62%,var(--ink));font-size:11px;font-weight:650;line-height:1.2;white-space:nowrap}

/* The facts as small plates: the experience and the photographs. */
.worker-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.worker-fact{display:inline-flex;align-items:center;flex:none;gap:6px;height:28px;padding:0 10px;border-radius:9px;background:rgba(var(--ink-rgb),.05);color:var(--ink-2);font-size:12px;font-weight:600;line-height:1;white-space:nowrap}
.worker-fact i{color:var(--card-accent);font-size:14px}

/* The foot, pinned to the bottom so the cards of a row end on one line: when, and the way to reach them. */
.worker-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:20px}
.worker-date{display:inline-flex;align-items:center;gap:6px;min-width:0;color:var(--ink-3);font-size:12.5px;white-space:nowrap}
.worker-date i{font-size:14px}
.worker-contact{display:flex;align-items:center;gap:8px;min-width:0;pointer-events:auto}
/* «Əlaqə» is a button of its own, quiet at rest: a light plate in the text's colour. No rose standing on the card
   (the owner, 2026-10-08: «розовый цвет как то портит глаза») — it comes only when the button is pointed at. */
.worker-call{position:relative;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;border:1px solid var(--line-soft);border-radius:11px;background:rgba(var(--ink-rgb),.05);color:var(--ink);font-family:inherit;font-size:13.5px;font-weight:750;line-height:1;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.worker-call i{font-size:16px}
.worker-call[disabled]{opacity:.6;cursor:default}
/* Waiting for the number: the phone gives way to the site's own spinner (btn-spin, style.css), at full strength. */
.worker-call .btn-spinner{display:none}
.worker-call.is-loading>i{display:none}
.worker-call.is-loading .btn-spinner{display:inline-block;flex:none;width:14px;height:14px;border:2.5px solid color-mix(in srgb,currentColor 28%,transparent);border-top-color:currentColor;border-radius:50%;animation:btn-spin .6s linear infinite}
.worker-call[disabled].is-loading{opacity:1}
@media (prefers-reduced-motion:reduce){.worker-call.is-loading .btn-spinner{animation-duration:1.6s}}
.worker-contact a{color:var(--ink);font-size:13px;font-weight:750;white-space:nowrap}
@media (hover:hover) and (pointer:fine){
  /* One lift, on the card: everything inside it — the contact included — comes along. */
  .worker-card:hover .card{transform:translateY(-4px)}
  /* The button answers its own pointer only (the owner, 2026-10-08: «hover на elaqe должен только при hover на
     него, так как hover карточки отдельный»). */
  /* Quiet at rest, the house rose when pointed at (the owner, 2026-10-08: «цвет hover на elaqe верни»). */
  .worker-call:hover{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 8px 18px -8px rgba(var(--accent-rgb),.6)}
}

/* The contact's ground: a soft glow of the trade's colour from the top corner and a fainter one from the bottom,
   and the house's door, cut out of the same colour, standing low in the corner. */
.worker-reveal{position:absolute;inset:0;z-index:3;isolation:isolate;overflow:hidden;pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:20px;border-radius:inherit;background:radial-gradient(130% 90% at 100% 0%,color-mix(in srgb,var(--card-accent,var(--accent)) 17%,transparent) 0%,transparent 62%),radial-gradient(110% 80% at 0% 100%,color-mix(in srgb,var(--card-accent,var(--accent)) 9%,transparent) 0%,transparent 60%),var(--white);box-shadow:var(--rest-shadow)}
.worker-reveal:before{position:absolute;z-index:-1;right:-12px;bottom:-22px;width:92px;height:128px;background:color-mix(in srgb,var(--card-accent,var(--accent)) 10%,transparent);-webkit-mask:url('/assets/front/logo/birev-door-pink.svg?v=74ddddfdbf') no-repeat center/contain;mask:url('/assets/front/logo/birev-door-pink.svg?v=74ddddfdbf') no-repeat center/contain;content:"";pointer-events:none;transform:rotate(-8deg)}
.worker-reveal[hidden]{display:none}
.worker-reveal-premium{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid rgba(212,175,55,.4);border-radius:9px;background:rgba(27,25,22,.9);color:#d4af37;line-height:1}
.worker-reveal-premium i{font-size:13px}
/* A close mark a thumb finds (the owner, 2026-10-25, a screenshot of the open contact card: «Увеличь Х»): 40px on a
   soft tint, the mark 20px and darker — it was 26px, transparent and grey. */
.worker-reveal-x{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:11px;background:rgba(var(--ink-rgb),.06);color:var(--ink-2);font-size:20px;cursor:pointer;transition:background .15s,color .15s}
.worker-reveal-kicker{color:var(--card-accent,var(--accent));font-size:9.5px;font-weight:850;letter-spacing:.15em;text-transform:uppercase}
.worker-reveal-who{overflow:hidden;max-width:100%;margin:1px 0 12px;color:var(--ink);font-size:14.5px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.worker-reveal-body{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;max-width:230px}
.worker-reveal-line{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid transparent;border-radius:11px;font-size:15.5px;font-weight:800;letter-spacing:.01em;white-space:nowrap;text-decoration:none}
.worker-reveal-line i{font-size:18px}
.worker-reveal-line--tel{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 6px 14px -8px rgba(var(--accent-rgb),.6)}
.worker-reveal-line--wa{background:rgba(37,211,102,.09);border-color:rgba(37,211,102,.26);color:#0E9F53;font-size:14px}
:root[data-theme="dark"] .worker-reveal-line--wa{background:rgba(37,211,102,.13);border-color:rgba(37,211,102,.3);color:#4ADE80}
/* On the dark ground what a trade's colour draws — the avatar's letter, the place pin, the facts' icons, the reveal's
   kicker — is that colour lightened (2026-10-24, the owner: «как будто для глаз очень трудно»): the trades' colours are
   picked for the light card, and «Fəhlə»'s #7C3AED stood at 2.6–2.9:1 on the dark one. */
:root[data-theme="dark"] .worker-avatar,:root[data-theme="dark"] .worker-place i,:root[data-theme="dark"] .worker-fact i,:root[data-theme="dark"] .worker-reveal-kicker{color:color-mix(in srgb,var(--card-accent,var(--accent)) 55%,#fff)}
.worker-reveal-none{margin:0;color:var(--ink-3);font-size:14px;text-align:center}
@media (hover:hover) and (pointer:fine){
  .worker-reveal-x:hover{background:rgba(var(--ink-rgb),.07);color:var(--ink)}
  .worker-reveal-line--tel:hover{filter:brightness(1.06)}
  .worker-reveal-line--wa:hover{background:rgba(37,211,102,.16);border-color:rgba(37,211,102,.44)}
}
/* Five stars filled to a fraction (the ad's page): a grey row, and a gold one laid over it and clipped to --fill. */
.stars{position:relative;display:inline-block;line-height:1;vertical-align:middle;white-space:nowrap}
.stars i{font-size:15px;letter-spacing:1px}
.stars__base{color:var(--line)}
.stars__fill{position:absolute;top:0;left:0;width:var(--fill,0%);overflow:hidden;color:#E8A317;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.worker-card .card,.worker-call{transition:none}}

.worker-show-bar{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.worker-show-bar .breadcrumb{min-width:0;flex:1 1 auto}
.worker-show-bar .detail-actions{padding-top:12px;flex:none}
@media(max-width:700px){.worker-show-bar{align-items:flex-start}.worker-show-bar .detail-actions{padding-top:0;width:100%}.worker-show-bar .share-link{max-width:100%}}
.worker-show{padding-top:18px;padding-bottom:72px}
.workers-kicker{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.14em}
.workers-kicker i{font-size:15px}
.workers-results-head{margin:8px 0 14px}
.workers-results-head h2{margin:4px 0 0;color:var(--ink);font-size:23px;letter-spacing:-.02em}
/* Two columns, each its own box — not four items in two rows with the aside
   spanning both. That shape had the aside filling its whole grid area, so
   `position:sticky` had nowhere to travel and nothing ever stuck (the owner,
   2026-09-30: «левая сторона не sticky»), and the surplus height it forced on
   the rows opened a gap three times the one asked for («что за отступы?»).
   With `align-items:start` each column is only as tall as itself while its
   area is the full row, so whichever column is SHORTER stays in sight while
   the taller one scrolls — no rule has to know which that is. */
/* The property page's own measure — 380px and a 44px gutter (.detail-layout) — and not the 340px this had: the contact card was narrow beside it (the owner, 2026-10-02: «поправь в usta правый блок как в недвижимости, а то у нас он узкий»). */
.worker-show-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:44px;align-items:start;margin-top:18px}
.worker-show-main{display:grid;gap:20px;min-width:0;position:sticky;top:88px}
.worker-show-hero{position:relative;isolation:isolate;padding:28px 32px 26px;border:1px solid color-mix(in srgb,var(--card-accent) 16%,var(--line-soft));border-radius:28px;background:radial-gradient(120% 95% at 100% 0%,color-mix(in srgb,var(--card-accent) 15%,transparent) 0%,transparent 62%),radial-gradient(90% 80% at 0% 100%,color-mix(in srgb,var(--card-accent) 7%,transparent) 0%,transparent 64%),var(--white)}
.worker-show-glow{position:absolute;z-index:-1;overflow:hidden;inset:0;border-radius:inherit;pointer-events:none}
.worker-show-ghost{position:absolute;right:30px;top:-30px;color:color-mix(in srgb,var(--card-accent) 8%,transparent);font-size:230px;line-height:1;transform:rotate(-12deg);pointer-events:none}
.worker-show-top{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* The trade's colour, as on its card (config/worker_ads.php group_accents),
   and the theme's own surfaces — the flat pink gradient stayed light in the
   dark theme. */
.worker-show-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
/* The facts are neutral — a white chip, a grey hairline, a grey mark: in the trade's colour they were too much beside the glow behind them (the owner, 2026-10-02: «сделай без цветным а то слишком»). */
.worker-show-facts span,.worker-show-rating{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border:1px solid var(--line-soft);border-radius:9px;background:var(--white);color:var(--ink-2);font-size:13.5px;font-weight:700;text-decoration:none;box-shadow:0 6px 14px -12px rgba(50,30,45,.3)}
.worker-show-facts i{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:7px;background:var(--paper);color:var(--ink-3);font-size:16px}
.worker-show-also{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0}
.worker-show-also .worker-chip{padding:7px 12px;font-size:12.5px}
.worker-show-contact{position:sticky;top:88px}
/* A figure is set big; a phrase («Razılaşma ilə») is not a figure, and at 33px bold it shouted over the card (the owner, 2026-10-02: «Razılaşma ilə — фонт поправь»). */
.worker-show-contact .pc-price--text{font-size:22px;font-weight:750;letter-spacing:-.015em;line-height:1.25}
.worker-show-contact .pc-agent-wrap{margin:14px 0 16px}
/* While it waits, the button shows the spinner alone — the mark beside it
   read as two things happening at once (the ad page does the same). */
.worker-show-contact [data-worker-phone].is-loading>i{display:none}
.worker-shots{padding:22px 24px;border:1px solid var(--line-soft);border-radius:22px;background:var(--white)}
.worker-shots h2{margin:0 0 14px;font-size:20px;letter-spacing:-.02em}
.worker-shots-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.worker-shot{display:block;overflow:hidden;border-radius:14px;background:var(--paper);aspect-ratio:4/3}
.worker-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
@media (hover:hover) and (pointer:fine){ .worker-shot:hover img{transform:scale(1.04)} }
/* No rule between the chips and «Haqqında» (the owner, 2026-10-02: «убери полоску»): the heading is enough of a break. */
.worker-show-about{margin-top:24px}
.worker-show-about h2{margin:0 0 12px;font-size:20px;letter-spacing:-.02em}
/* The trade is the card's second line and the page's h1: the heading element, the line's own look. */
.worker-show-contact h1.agent-role{margin:3px 0 0;font-size:12.5px;font-weight:400;line-height:inherit;letter-spacing:normal}
/* The worker's own words in the ink of the page's text, not the grey of its captions (2026-10-24, the owner's screenshot
   of a dark card: «читается не очень хорошо» — --ink-2 on the tinted card was dim). */
.worker-show-text{color:var(--ink);font-size:16px;line-height:1.65}
.worker-show-date{display:flex;align-items:center;gap:6px;margin:18px 0 0;color:var(--ink-3);font-size:13px}
.worker-show-date i{color:var(--accent)}
.worker-show-related{margin-top:28px}
.worker-show-rating{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border:1px solid #f0ebed;border-radius:999px;background:#fff;color:var(--ink);font-size:13px;font-weight:700;text-decoration:none}
.worker-show-facts .worker-show-rating i{color:#E8A317}.worker-show-rating small{color:var(--ink-3);font-size:11.5px;font-weight:600}
.worker-reviews{margin-top:0}
/* The tile sits in the column's own grid, which has its gap: no margin of its own on top of it. */
.worker-show-main .birev-social-wrap{margin-top:0}
/* The head is the property thread's own (.lc__head). The verdict sits under it in one soft panel: the average on the
   left, how the stars were spread on the right. */
.worker-reviews__summary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 36px;align-items:center;margin:-8px 0 22px;padding:18px 24px;border-radius:16px;background:var(--paper)}
.worker-reviews__score{display:flex;flex-direction:column;align-items:flex-start;gap:6px;color:var(--ink-2);font-size:13px}.worker-reviews__score strong{color:var(--ink);font-size:42px;font-weight:800;letter-spacing:-.03em;line-height:1}
.worker-reviews__score .stars{font-size:17px}
.worker-reviews__bars{display:grid;gap:6px;min-width:0}
.worker-reviews__bar{display:grid;grid-template-columns:10px 14px 1fr 24px;align-items:center;gap:7px;color:var(--ink-3);font-size:12px}.worker-reviews__bar i{color:#E8A317;font-size:12px}
.worker-reviews__bar b{display:block;height:7px;border-radius:9px;background:color-mix(in srgb,var(--ink) 9%,var(--white));overflow:hidden}.worker-reviews__bar em{display:block;height:100%;border-radius:9px;background:#E8A317}
@media(max-width:560px){.worker-reviews__summary{grid-template-columns:1fr;padding:16px}}
/* The footnotes are the comments' own (.lc__guest-note); the link keeps its house colour. */
.worker-reviews .lc__guest-note{margin:12px 0 0}
/* The header of the block (the owner, 2026-10-03: «сделай аккуратнее и красивее», and of the first try, with its ring,
   gradient and pink pill, «я же сказал сделать аккуратно»): small and quiet. One row of three things of one height class —
   a 34px tile in a flat tint, the title, a 22px count — close together, nothing else on it. Only here: the property page's
   «Şərhlər» keeps the shared look. */
.worker-reviews .lc__head{gap:10px;margin:0 0 18px}
.worker-reviews .lc__head h2{font-size:21px;letter-spacing:-.01em;line-height:1.2}
.worker-reviews .lc__count{min-width:26px;justify-content:center;height:26px;padding:0 9px;border-radius:9px;font-size:13px;font-weight:700;color:var(--ink-2);background:color-mix(in srgb,var(--ink) 6%,var(--white));box-shadow:inset 0 0 0 1px var(--line-soft);font-variant-numeric:tabular-nums}
.worker-reviews .lc__head + .worker-reviews__summary{margin-top:0}
/* While there is nothing to read the head carries the invitation at its far end and the form follows at once — no stage, no
   row of its own, no rule between the head and the field (the owner, 2026-10-03: «слишком много места занимает»). */
.worker-reviews .lc__head{flex-wrap:wrap}
.worker-reviews__tagline{margin-left:auto;color:var(--ink-2);font-size:15px;line-height:1.3;text-align:right}
.worker-reviews__tagline .accent-word{font-size:1.14em;line-height:1;padding:0 .05em}
.worker-reviews__tagline--quiet{color:var(--ink-3);font-size:14px}
.worker-reviews[data-bare] .lc__head{margin-bottom:16px}
.worker-reviews[data-bare] .lc__form{margin-top:0;padding-top:0;border-top:0}
.worker-reviews[data-bare] .worker-reviews__cta{margin-top:0}
/* The form is ONE box: the avatar over the first line, and in the bottom bar the stars at the left, the count and the send button
   in the bottom right corner (the owner, 2026-10-03). On a phone the avatar goes, the word and the count give way, the button stays. */
.worker-review-form__bar{flex-wrap:wrap;gap:6px 10px;padding:0 10px 10px 12px}
.worker-review-form__bar .star-picker{margin:0}
.worker-review-form__bar .star-picker__box{gap:8px}
.worker-review-form__bar .star-picker__row{gap:2px}
.worker-review-form__bar .star-picker label{width:26px;height:26px}
.worker-review-form__bar .star-picker label i{font-size:24px}
.worker-review-form__bar .star-picker__word{min-width:0;font-size:13px}
.worker-review-form__bar .lc__actions,.worker-review-form__bar .lc-item__editor-actions{margin:0}
.worker-review-form__bar .lc__submit{height:36px;padding:0 14px;font-size:13.5px;border-radius:11px}
.worker-review-form__bar .lc__submit--icon{width:44px;padding:0;justify-content:center}
.worker-review-form__bar .lc__submit--icon i{font-size:19px}
.worker-review-form__bar .lc-item__editor-actions .btn,.worker-review-form__bar .lc-item__editor-actions .ghost-btn{height:36px;padding:0 14px;font-size:13px}
@media(max-width:520px){.worker-review-form__bar .star-picker__word{display:none}.worker-review-form__bar .lc__counter:not(.is-near):not(.is-full){display:none}.worker-review-form__bar .lc__actions,.worker-review-form__bar .lc-item__editor-actions{margin-left:auto}}
.worker-review-form .lc__field textarea{min-height:68px}
.worker-review-form__me{position:absolute;left:12px;top:11px;z-index:1;width:28px;height:28px;font-size:12px}
.worker-review-form:not(.lc-item__editor) .lc__field textarea{padding-left:52px}
@media(max-width:640px){.worker-review-form__me{display:none}.worker-review-form:not(.lc-item__editor) .lc__field textarea{padding-left:14px}}
@media(max-width:520px){.worker-reviews__tagline{flex-basis:100%;margin:2px 0 0;text-align:left}}
@media(max-width:640px){.worker-reviews .lc__head h2{font-size:20px}}
/* «Rəy əlavə etmək üçün daxil olun» — a plate with the way in, not a footnote under the block. */
.worker-reviews .lc__guest-note.worker-reviews__cta{display:flex;align-items:center;justify-content:center;gap:10px;margin:20px 0 0;padding:14px 16px;border-radius:13px;background:var(--paper);color:var(--ink-2);font-size:14.5px;text-align:center}
.worker-reviews__cta i{flex:none;font-size:20px;color:var(--accent)}
.worker-reviews__cta a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.worker-review-form{margin:0}
.worker-review-form__state{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:10px 12px;border-radius:11px;background:var(--paper);color:var(--ink-2);font-size:13px}
.worker-review-form__state--approved{color:var(--ok)}.worker-review-form__state--rejected{color:var(--danger)}
.worker-review-form__error{margin:0 0 10px;color:var(--danger);font-size:13px}
.worker-review-form__withdraw{margin:14px 0 0}.worker-review-form__withdraw button{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--ink-3);font:inherit;font-size:12.5px;cursor:pointer}
.worker-review-form__withdraw button:hover{color:var(--danger)}
/* The stars sit above the words, on the card's own white, not in a box of their own (the owner, 2026-10-02: the grey
   box was «тупо и уродливо», and so was the star row inside the field). Outline stars; the gold one comes up over
   the outline for every star from the right end of the row to the chosen one — written 5→1 and laid out in
   reverse, so `~` does it with no script. A word beside them says what the choice means. */
.star-picker{margin:0 0 4px;padding:0;border:0;min-width:0}
.star-picker__box{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px}
.star-picker__row{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.star-picker input{position:absolute;opacity:0;pointer-events:none}
.star-picker label{position:relative;display:block;width:32px;height:32px;cursor:pointer;color:color-mix(in srgb,var(--ink) 30%,var(--white));transition:transform .12s}
.star-picker label i{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;line-height:1}
.star-picker label .ph-fill{color:#E8A317;opacity:0;transform:scale(.6);transition:opacity .12s,transform .18s cubic-bezier(.34,1.56,.64,1)}
.star-picker input:checked~label .ph-fill,.star-picker label:hover .ph-fill,.star-picker label:hover~label .ph-fill{opacity:1;transform:none}
.star-picker input:checked~label,.star-picker label:hover,.star-picker label:hover~label{color:#E8A317}
/* No ring round the chosen star (the owner, 2026-10-02: «опять этот border, я же говорил везде убери»): the keyboard
   gets the star a little larger instead. */
.star-picker input:focus-visible{outline:none}
.star-picker input:focus-visible+label{transform:scale(1.14)}
.star-picker__word{min-width:84px;color:var(--ink-2);font-size:14px;font-weight:600}
/* Pressed with none chosen: the stars go red (the owner, 2026-10-02: «если пусто звездочки красные»). */
.star-picker.is-error label{color:var(--danger)}
.star-picker.is-error .star-picker__word{color:var(--danger)}
.star-picker.is-error .star-picker__row{animation:star-shake .32s ease-in-out}
@keyframes star-shake{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){.star-picker.is-error .star-picker__row{animation:none}}
.worker-reviews .lc__field.is-error{border-color:var(--danger)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.worker-review__top .stars{margin-left:2px}
.worker-review__top .lc-item__date{margin-left:auto}
@media(max-width:640px){.worker-review__top{padding-right:0}}
/* The reader's own review, drawn as a comment of the property page: «Siz», the date next to the name, and
   «Redaktə» / «Sil» at the far end (on a phone, icons in the corner — the shared 68px they are given room for). */
.worker-review--mine .worker-review__top .lc-item__date{margin-left:0}
@media(max-width:640px){.worker-review--mine .worker-review__top{padding-right:68px}}
.worker-review [hidden]{display:none}
.lc-tag--refused{margin-top:9px;height:auto;min-height:22px;padding:3px 8px;line-height:1.3;color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--white))}
.worker-review-form.lc-item__editor{margin-top:10px}
/* In the review the field has the avatar's width less than under the thread, and the hint's single line
   (nowrap in the shared .lc__hint) would push the whole block wider than a phone — it may wrap here. */
.worker-review-form.lc-item__editor .lc__hint span{white-space:normal}
/* Stretch, as on the list: the three «Oxşar elanlar» are one height. */
.worker-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:860px){
  /* One column, and the contact between the two — `display:contents` puts the
     left box's children back into the grid so they can be ordered, and takes
     its own sticky with it. */
  .worker-show-layout{grid-template-columns:1fr;gap:20px}
  .worker-show-main{display:contents}
  .worker-show-contact{order:1;position:static}
  .worker-show-hero{order:2}
  .worker-shots{order:3}
  .worker-show-main .birev-social-wrap{order:4}
  .worker-reviews{order:4}
  .worker-related-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .worker-show{padding-top:8px;padding-bottom:48px}
  .worker-show-hero{padding:22px 16px 18px;border-radius:22px}
  .worker-show-ghost{right:-6px;top:-18px;font-size:150px}
}