/* ══════════════════════════════════════════════════════════════════════
   Freelancer — the services marketplace, laid out the way buyers read one:
   who is selling, what they are selling, what it starts at. Scoped to
   [data-market="freelancer"] so the other Market pages keep the defaults.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Categories ─────────────────────────────────────────────────────────
   The browse rail is off on this page. It drew the same seven categories
   the chip row underneath already listed — two rows of identical navigation
   costing about 280px, so the first service sat below the fold on a laptop.
   The chips carry the live count now, which is the one thing the rail said
   that the chips did not. */
.vai-mkt[data-market="freelancer"] .vai-mkt__chips { padding-top: 2px; }

/* ── Server-rendered first page ─────────────────────────────────────────
   Present only until the shell's first fetch replaces the grid, so this is
   what a crawler reads and roughly a frame of what a visitor sees. It
   borrows the real card's shape so that frame is not a different layout. */
.vai-mkt-card--freelancer[href] { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.vai-frl-ssr__blurb {
    margin: 0; font-size: 12px; line-height: 1.45; color: var(--vai-mkt-ink-2, #5a626d);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vai-mkt__ssr-foot { padding: 18px 2px 8px; }
.vai-frl-ssr__pager { display: flex; gap: 14px; font-size: 13px; font-weight: 600; }
.vai-frl-ssr__pager a { color: var(--vai-mkt-accent, #16a34a); text-decoration: none; }
.vai-frl-ssr__siblings h2 { font-size: 15px; font-weight: 650; margin: 0 0 10px; }
.vai-frl-ssr__siblings ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.vai-frl-ssr__siblings a { font-size: 13px; color: var(--vai-mkt-accent, #16a34a); text-decoration: none; }

/* ── "Hire someone, or have it done" ─────────────────────────────────
   The question a category asks before it filters anything. Deliberately a
   dialog rather than an inline strip: it is a fork in the road, and both
   roads are worth the same.

   IT CARRIES ITS OWN THEME. The dialog is appended to document.body so the
   marketplace shell cannot clip it — which also puts it outside `.vai-mkt`,
   where the --vai-mkt-* variables live. Inheriting them was the bug: the box
   fell back to #fff while the option titles fell back to `inherit`, i.e. the
   dark theme's near-white, so they were white text on a white card and the
   dialog read as half-empty. Everything below resolves from its own tokens,
   with the app's ink scale (--ty-*) as the first choice where it exists. */
.vai-frl-ask {
    --fa-surface: #ffffff;
    --fa-surface-2: rgba(15, 18, 22, .03);
    --fa-ink: var(--ty-ink, #1f2328);
    --fa-ink-strong: var(--ty-ink-strong, #0f1216);
    --fa-ink-2: var(--ty-ink-2, #5a626d);
    --fa-line: rgba(15, 18, 22, .12);
    --fa-accent: #16a34a;
    --fa-accent-soft: rgba(22, 163, 74, .10);

    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(6, 10, 8, .58);
    backdrop-filter: blur(3px);
    animation: vaiFrlAskIn .16s ease;
    font-family: var(--ty-font, 'Inter', ui-sans-serif, system-ui, sans-serif);
}
[data-background-color="dark"] .vai-frl-ask {
    /* Grey, not the page's near-black: the dialog should read as a surface
       lifted off the page rather than a hole cut into it. */
    --fa-surface: #24272c;
    --fa-surface-2: rgba(243, 244, 246, .07);
    --fa-ink: var(--ty-ink, #E5E7EB);
    --fa-ink-strong: var(--ty-ink-strong, #F3F4F6);
    --fa-ink-2: var(--ty-ink-2, #A1A1AA);
    --fa-line: rgba(243, 244, 246, .16);
    --fa-accent: #22c55e;
    --fa-accent-soft: rgba(34, 197, 94, .14);
}
@keyframes vaiFrlAskIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes vaiFrlAskUp { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.vai-frl-ask__box {
    position: relative;
    width: 100%; max-width: calc(min(1120px, 100vw - 40px) / var(--vzoom, 1));
    padding: 30px 30px 26px;
    border-radius: 20px;
    color: var(--fa-ink);
    background: var(--fa-surface);
    border: 1px solid var(--fa-line);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .38);
    animation: vaiFrlAskUp .18s cubic-bezier(.2, .8, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
    .vai-frl-ask, .vai-frl-ask__box { animation: none; }
}
.vai-frl-ask__x {
    position: absolute; top: 14px; inset-inline-end: 14px;
    width: 30px; height: 30px; line-height: 1;
    display: grid; place-items: center;
    border: 0; border-radius: 9px; cursor: pointer;
    font-size: 19px;
    background: transparent; color: var(--fa-ink-2);
    transition: background .14s ease, color .14s ease;
}
.vai-frl-ask__x:hover { background: var(--fa-surface-2); color: var(--fa-ink); }
/* The category is a chip above the question, not a clause inside it: the
   question then fits one line at any category length. */
.vai-frl-ask__cat {
    display: inline-flex; align-items: center;
    margin: 0 0 14px;
    padding: 5px 11px; border-radius: 999px;
    font-size: 12px; font-weight: 600; letter-spacing: .02em;
    background: var(--fa-accent-soft); color: var(--fa-accent);
}
.vai-frl-ask__t {
    margin: 0 34px 8px 0;
    font-size: 22px; font-weight: 600; line-height: 1.28;
    letter-spacing: -.01em;
    color: var(--fa-ink-strong);
}
.vai-frl-ask__lead {
    margin: 0 0 22px;
    font-size: 14.5px; line-height: 1.6;
    color: var(--fa-ink-2);
}
.vai-frl-ask__choices { display: grid; gap: 12px; }
/* Two ultra-wide strips would waste the extra room and put the badge a foot
   away from the words it belongs to, so past 900px the roads sit side by side. */
@media (min-width: 900px) {
    .vai-frl-ask__choices { grid-template-columns: 1fr 1fr; gap: 14px; }
    .vai-frl-ask__opt { align-items: flex-start; }
    .vai-frl-ask__opt-tag { align-self: center; }
}
.vai-frl-ask__opt {
    display: flex; align-items: center; gap: 16px;
    width: 100%; text-align: start; cursor: pointer;
    padding: 18px 20px; border-radius: 16px;
    color: var(--fa-ink);
    border: 1px solid var(--fa-line);
    background: transparent;
    transition: border-color .14s ease, background .14s ease, transform .1s ease;
}
.vai-frl-ask__opt:hover { border-color: var(--fa-accent); background: var(--fa-surface-2); }
.vai-frl-ask__opt:focus-visible { outline: 2px solid var(--fa-accent); outline-offset: 2px; }
.vai-frl-ask__opt:active { transform: translateY(1px); }
/* The icon says which road this is before the words do. */
.vai-frl-ask__opt-i {
    flex: none; width: 38px; height: 38px; border-radius: 11px;
    display: grid; place-items: center;
    background: var(--fa-surface-2); color: var(--fa-ink-2);
    transition: background .14s ease, color .14s ease;
}
.vai-frl-ask__opt-i svg { width: 19px; height: 19px; }
.vai-frl-ask__opt:hover .vai-frl-ask__opt-i,
.vai-frl-ask__opt--ai .vai-frl-ask__opt-i { background: var(--fa-accent-soft); color: var(--fa-accent); }
.vai-frl-ask__opt-body { min-width: 0; flex: 1 1 auto; }
.vai-frl-ask__opt-t {
    display: block; font-size: 15.5px; font-weight: 600; line-height: 1.35;
    color: var(--fa-ink-strong);
}
.vai-frl-ask__opt-d {
    display: block; margin-top: 4px;
    font-size: 13.5px; line-height: 1.55;
    color: var(--fa-ink-2);
}
/* The assistant is the road people do not know they have, so it leads and
   says how it differs. Browsing stays exactly as readable, just quiet. */
.vai-frl-ask__opt--ai {
    border-color: color-mix(in srgb, var(--fa-accent) 45%, transparent);
    background: color-mix(in srgb, var(--fa-accent) 6%, transparent);
}
.vai-frl-ask__opt--ai:hover { background: color-mix(in srgb, var(--fa-accent) 11%, transparent); }
.vai-frl-ask__opt-tag {
    flex: none; margin-inline-start: auto;
    padding: 5px 11px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
    background: var(--fa-accent); color: #06210f;
}
.vai-frl-ask__opt-go {
    flex: none; align-self: center;
    color: var(--fa-ink-2); opacity: .65;
    transition: opacity .14s ease, transform .14s ease, color .14s ease;
}
.vai-frl-ask__opt-go svg { width: 16px; height: 16px; display: block; }
.vai-frl-ask__opt:hover .vai-frl-ask__opt-go { opacity: 1; color: var(--fa-accent); transform: translateX(2px); }
/* ── The brief step ───────────────────────────────────────────────────
   The dialog is XL for the two-road choice; a form is read, not scanned, so
   it keeps a comfortable measure and centres inside that width. */
.vai-frl-ask__form { max-width: none; }
.vai-frl-ask__box--brief { max-width: calc(min(760px, 100vw - 40px) / var(--vzoom, 1)); }
.vai-frl-ask__fh {
    margin: 0 0 6px;
    font-size: 17px; font-weight: 600; line-height: 1.35;
    color: var(--fa-ink-strong);
}
.vai-frl-ask__fd {
    margin: 0 0 16px;
    font-size: 13.5px; line-height: 1.55;
    color: var(--fa-ink-2);
}
/* The questions this kind of work always needs answered. Optional: they only
   append to the brief, and the preview underneath shows the result. */
.vai-frl-ask__grp { margin-top: 18px; }
.vai-frl-ask__grp-l {
    display: block; margin: 0 0 9px;
    font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
    color: var(--fa-ink-2);
}
.vai-frl-ask__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vai-frl-ask__c {
    padding: 8px 13px; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1;
    color: var(--fa-ink);
    background: transparent;
    border: 1px solid var(--fa-line);
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.vai-frl-ask__c:hover { border-color: var(--fa-accent); }
.vai-frl-ask__c:focus-visible { outline: 2px solid var(--fa-accent); outline-offset: 2px; }
.vai-frl-ask__c.is-on {
    background: var(--fa-accent-soft);
    border-color: color-mix(in srgb, var(--fa-accent) 45%, transparent);
    color: var(--fa-accent); font-weight: 600;
}
.vai-frl-ask__prev {
    margin-top: 18px; padding: 13px 15px;
    border-radius: 12px;
    background: var(--fa-surface-2);
    border: 1px solid var(--fa-line);
}
.vai-frl-ask__prev[hidden] { display: none; }
.vai-frl-ask__prev-l {
    display: block;
    font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--fa-ink-2);
}
.vai-frl-ask__prev-t {
    margin-top: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px; line-height: 1.6;
    color: var(--fa-ink);
    word-break: break-word;
}
.vai-frl-ask__ta {
    width: 100%; box-sizing: border-box; resize: vertical;
    min-height: 150px;
    padding: 15px 16px; border-radius: 14px;
    font-family: inherit; font-size: 14.5px; line-height: 1.6;
    color: var(--fa-ink);
    background: var(--fa-surface-2);
    border: 1px solid var(--fa-line);
    transition: border-color .14s ease;
}
.vai-frl-ask__ta::placeholder { color: var(--fa-ink-2); opacity: .8; }
.vai-frl-ask__ta:focus {
    outline: none;
    border-color: var(--fa-accent);
}
.vai-frl-ask__actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-top: 14px;
}
.vai-frl-ask__back {
    border: 0; background: transparent; cursor: pointer;
    padding: 9px 6px; font-size: 13.5px; font-weight: 500;
    color: var(--fa-ink-2);
    transition: color .14s ease;
}
.vai-frl-ask__back:hover { color: var(--fa-ink); }
.vai-frl-ask__go {
    border: 0; cursor: pointer;
    padding: 11px 24px; border-radius: 11px;
    font-size: 14px; font-weight: 600;
    background: var(--fa-accent); color: #fff;
    transition: filter .14s ease;
}
.vai-frl-ask__go:hover { filter: brightness(1.06); }
.vai-frl-ask__go:disabled { opacity: .6; cursor: default; }
@media (max-width: 560px) {
    .vai-frl-ask { padding: 14px; align-items: flex-end; }
    .vai-frl-ask__box { padding: 22px 18px 18px; border-radius: 18px; }
    .vai-frl-ask__t { font-size: 19px; }
    .vai-frl-ask__lead { margin-bottom: 18px; }
    .vai-frl-ask__opt { padding: 15px 15px; gap: 12px; }
    .vai-frl-ask__opt-i { width: 34px; height: 34px; }
    /* The badge would push the two-line description into three lines. */
    .vai-frl-ask__opt-tag { display: none; }
}

/* ── Service cards ──────────────────────────────────────────────────────
   No box around the card. A bordered tile per listing drew 45 frames on a
   dark page, and the frames were the loudest shape on it. The photo is the
   card now — rounded, on its own — and the text sits under it on the page:
   who sells it, what it is, what it starts at. */
.vai-mkt[data-market="freelancer"] .vai-mkt__grid,
.vai-mkt[data-market="freelancer"] .vai-mkt__skeleton {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 28px 20px;
}
.vai-mkt[data-market="freelancer"] .vai-mkt__grid.is-list-view { grid-template-columns: 1fr; gap: 0; }
.vai-mkt[data-market="freelancer"] .vai-mkt__grid:not(.is-list-view) .vai-mkt-card {
    height: 100%;
    border: 0; border-radius: 0; overflow: visible;
    background: transparent; box-shadow: none;
}
.vai-mkt[data-market="freelancer"] .vai-mkt__grid:not(.is-list-view) .vai-mkt-card:hover {
    transform: none; box-shadow: none;
}
/* 16:10 rather than a squarer crop: sellers upload landscape banners, and a
   taller tile buys nothing but fewer cards per screen. */
.vai-mkt[data-market="freelancer"] .vai-mkt-card__media {
    aspect-ratio: 16 / 10; overflow: hidden;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--vai-mkt-border);
    transition: box-shadow .2s ease;
}
.vai-mkt[data-market="freelancer"] .vai-mkt-card:hover .vai-mkt-card__media {
    box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .45);
}
/* A slow push in on hover — the thumbnail is the seller's own work and is
   the only thing on the card worth enlarging. */
.vai-mkt[data-market="freelancer"] .vai-mkt-card__img { transition: transform .35s ease; }
.vai-mkt[data-market="freelancer"] .vai-mkt-card:hover .vai-mkt-card__img { transform: scale(1.035); }
.vai-mkt[data-market="freelancer"] .vai-mkt-card__body { gap: 0; padding: 12px 2px 0; }
.vai-mkt[data-market="freelancer"] .vai-mkt__skeleton-tile { border-radius: 12px; }
.vai-mkt[data-market="freelancer"] .vai-mkt__skeleton-tile i:nth-child(1) { aspect-ratio: 16 / 10; }

/* ── Painted covers ──────────────────────────────────────────────────
   Most sellers never upload a shot, so the 16:10 box was taking 60% of
   the card to say nothing — a grey rectangle with a camera glyph in it,
   repeated the whole way down the page. A listing without a usable photo
   now paints its own cover out of what the row already carries: the
   category picks the hue and the glyph, the title supplies the word mark. */
.vai-frl-cover {
    position: absolute; inset: 0; overflow: hidden;
    display: flex; align-items: flex-end;
    padding: 12px 13px;
    background: linear-gradient(140deg, var(--cv-1), var(--cv-2));
}
/* A faint rule pattern, so the gradient reads as a surface and not a fill. */
.vai-frl-cover::after {
    content: ""; position: absolute; inset: 0; opacity: .5;
    background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 14px);
}
.vai-frl-cover__glyph {
    position: absolute; right: -14px; bottom: -30px;
    width: 150px; height: 150px; color: rgba(255, 255, 255, .13);
}
.vai-frl-cover__word {
    position: relative; max-width: 78%;
    color: #fff; font-size: 19px; font-weight: 800; line-height: 1.12; letter-spacing: -.03em;
    text-shadow: 0 1px 12px rgba(9, 9, 11, .35);
}
.vai-frl-cover__word.is-long { font-size: 15.5px; }

/* Seller first, as one quiet line: the face, the name, the level after a
   dot. The level is a detail — nearly every seller is the same one — so it
   is text, not a boxed badge competing with the name. */
.vai-frl-seller { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 7px; }
.vai-frl-seller__av { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--vai-mkt-surface-3); }
.vai-frl-seller__ph {
    width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--vai-mkt-surface-3); color: var(--vai-mkt-ink-2);
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
}
.vai-frl-seller__name { flex: 0 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--vai-mkt-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vai-frl-seller__lvl {
    flex: 0 0 auto;
    color: var(--vai-mkt-muted); font-size: 12px; font-weight: 500;
}
.vai-mkt-card .vai-frl-seller__lvl::before { content: "·"; margin-right: 6px; opacity: .7; }

/* Title: regular weight at a reading size. Bold 2-line titles in every
   card made the grid a wall of headlines with nothing standing out. */
.vai-mkt[data-market="freelancer"] .vai-mkt-card__title {
    font-size: 14.5px; font-weight: 500; line-height: 1.45; letter-spacing: -.005em;
    color: var(--vai-mkt-ink-2);
    -webkit-line-clamp: 2; min-height: 42px; margin-bottom: 8px;
}
.vai-mkt[data-market="freelancer"] .vai-mkt-card:hover .vai-mkt-card__title { color: var(--vai-mkt-ink); }

/* Price: "From $40", then what it was and the saving. One line, read
   left to right, instead of a label and two numbers spread across a rule. */
.vai-frl-foot {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px;
    margin-top: auto;
}
.vai-frl-foot__from { font-size: 12.5px; font-weight: 500; color: var(--vai-mkt-muted); }
.vai-frl-foot__price { font-size: 16px; font-weight: 700; letter-spacing: -.015em; color: var(--vai-mkt-ink); font-variant-numeric: tabular-nums; }
.vai-frl-foot__old { font-size: 12px; color: var(--vai-mkt-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.vai-frl-off {
    font-size: 11.5px; font-weight: 700; color: #16a34a;
    font-variant-numeric: tabular-nums;
}
body[data-background-color="dark"] .vai-frl-off { color: #4ade80; }

/* List view — same vocabulary as rows */
.vai-mkt[data-market="freelancer"] .is-list-view .vai-mkt-card { border-radius: 0; }
.vai-mkt[data-market="freelancer"] .is-list-view .vai-mkt-card:hover { transform: none; box-shadow: none; }
.vai-mkt[data-market="freelancer"] .is-list-view .vai-mkt-card__media { flex-basis: 180px; width: 180px; aspect-ratio: 16 / 10; border-radius: 11px; }
.vai-mkt[data-market="freelancer"] .is-list-view .vai-mkt-card__body { padding: 4px 2px; }
.vai-mkt[data-market="freelancer"] .is-list-view .vai-mkt-card__title { -webkit-line-clamp: 2; min-height: 0; margin-bottom: 7px; }
.vai-mkt[data-market="freelancer"] .is-list-view .vai-frl-foot { margin-top: 4px; }
.vai-mkt[data-market="freelancer"] .is-list-view .vai-frl-cover__word { font-size: 14px; max-width: 84%; }
.vai-mkt[data-market="freelancer"] .is-list-view .vai-frl-cover__glyph { width: 96px; height: 96px; right: -18px; bottom: -26px; }

/* Category chips: outlined and quiet, so the one that is on is the only
   filled shape in the row. */
.vai-mkt[data-market="freelancer"] .vai-mkt__chip {
    background: transparent; font-weight: 550; padding: 6px 13px;
}
.vai-mkt[data-market="freelancer"] .vai-mkt__chip:hover { background: var(--vai-mkt-surface-3); }
.vai-mkt[data-market="freelancer"] .vai-mkt__chip.is-active {
    background: #18181b; border-color: #18181b; color: #fff;
}
/* Explicit, not the ink/surface tokens: on the grey dark theme those two
   resolved to the same shade and the active chip read as an empty pill. */
body[data-background-color="dark"] .vai-mkt[data-market="freelancer"] .vai-mkt__chip.is-active {
    background: #fafafa; border-color: #fafafa; color: #18181b;
}

/* ── Detail ─────────────────────────────────────────────────────────── */
.vai-mkt[data-market="freelancer"] .vai-mkt-d__h {
    margin: 24px 0 11px; font-size: 14.5px; font-weight: 700;
    text-transform: none; letter-spacing: -.01em; color: var(--vai-mkt-ink);
}
/* ── Reading a service ──────────────────────────────────────────────────
   The catalogue's own scale is a density scale: it is right for a grid of
   cards you skim, and too tight for the one page you actually stop and read.
   A buyer deciding whether to hire someone reads the description end to end,
   and 13.5px over a full-width column is not a size anyone reads by choice.

   So the detail pane gets its own step up, scoped to this catalogue — the
   grid keeps the size that lets it fit, and Property, Games and Templates
   keep theirs. Everything moves together rather than a few values being
   nudged: the title leads, the description is set at a reading size over a
   measure that wraps near 70 characters, and the labels stay small so they
   stay labels. */
.vai-mkt[data-market="freelancer"] .vai-mkt-split__title { font-size: 28px; line-height: 1.2; }
/* Scoped to the detail pane on purpose. Unscoped, this step-up also landed on
   every CARD's seller line — a 14px name beside a 13px level badge in a
   158px-wide column, which is why a phone showed "Tos…" next to "Junior". */
.vai-mkt[data-market="freelancer"] .vai-mkt-split .vai-frl-seller__name { font-size: 14px; }
.vai-mkt[data-market="freelancer"] .vai-mkt-split .vai-frl-seller__lvl,
.vai-mkt[data-market="freelancer"] .vai-mkt-d__tag { font-size: 13px; padding: 4px 11px; }

/* The one thing on the page that is prose. It gets a measure, because a
   line of text running the full width of a desktop pane is read twice and
   understood once. */
.vai-frl-about {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    max-width: 70ch;
    color: var(--vai-mkt-ink-2);
    white-space: pre-line;
}

.vai-mkt[data-market="freelancer"] .vai-mkt-side__price { font-size: 32px; }
.vai-mkt[data-market="freelancer"] .vai-frl-pkg__name { font-size: 14.5px; }
.vai-mkt[data-market="freelancer"] .vai-mkt-stat__v { font-size: 16px; }
.vai-mkt[data-market="freelancer"] .vai-mkt-stat__k { font-size: 11px; }
.vai-mkt[data-market="freelancer"] .vai-mkt-side__note { font-size: 12.5px; }
.vai-mkt[data-market="freelancer"] .vai-mkt-d__cta { height: 44px; font-size: 15px; }
.vai-mkt[data-market="freelancer"] .vai-mkt-d__rail-t { font-size: 13.5px; }
.vai-mkt[data-market="freelancer"] .vai-mkt-d__rail-p { font-size: 14px; }

/* Headings earn more space above them now that the text they separate is
   bigger — the old 18px read as a gap, not a division. */
.vai-mkt[data-market="freelancer"] .vai-mkt-d__h { margin-top: 26px; }

@media (max-width: 991px) {
    .vai-mkt[data-market="freelancer"] .vai-mkt-split__title { font-size: 23px; }
    .vai-mkt[data-market="freelancer"] .vai-mkt-side__price { font-size: 27px; }
    .vai-frl-about { font-size: 15px; }
}

/* Rating pill in the header + on the seller card */
.vai-frl-rate { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 650; color: var(--vai-mkt-ink-2); }
.vai-frl-rate svg { width: 13px; height: 13px; color: #f59e0b; }
.vai-frl-rate__n { color: var(--vai-mkt-muted); font-weight: 500; }

/* Avatar fallback on the seller card — the shell's <img> class, as a tile */
.vai-frl-pers-ph {
    width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--vai-mkt-surface-3); color: var(--vai-mkt-muted);
    font-size: 15px; font-weight: 700;
}

/* Similar rail — wide enough for a 16:10 thumb and two lines of title */
.vai-mkt[data-market="freelancer"] .vai-mkt-d__rail { gap: 14px; }
.vai-mkt[data-market="freelancer"] .vai-mkt-d__rail-item { flex-basis: 176px; width: 176px; }
.vai-mkt[data-market="freelancer"] .vai-mkt-d__rail-p { font-size: 12.5px; }

/* Package picker inside the sticky card */
.vai-frl-pkg__tabs { margin-bottom: 14px; }
.vai-frl-pkg__name { font-size: 13px; font-weight: 650; color: var(--vai-mkt-muted); margin-bottom: 3px; }
.vai-mkt[data-market="freelancer"] .vai-mkt-side__stats { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 991px) {
    .vai-mkt[data-market="freelancer"] .vai-mkt__rail { padding: 13px 16px 0; }
}
@media (max-width: 560px) {
    .vai-mkt[data-market="freelancer"] .vai-mkt__grid,
    .vai-mkt[data-market="freelancer"] .vai-mkt__skeleton { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 20px 12px; }
    .vai-mkt[data-market="freelancer"] .vai-mkt-card__body { padding: 9px 1px 0; }
    .vai-mkt[data-market="freelancer"] .vai-mkt-card__title { font-size: 13px; min-height: 38px; }
    .vai-frl-seller__av, .vai-frl-seller__ph { width: 20px; height: 20px; }
    .vai-frl-seller__name { font-size: 12px; }
    .vai-frl-foot__price { font-size: 15px; }
    /* Two cards abreast leaves no room for the old price beside the new. */
    .vai-frl-foot__old { display: none; }
}

[data-dashboard-language="rtl"] .vai-mkt-card .vai-frl-seller__lvl::before { margin-right: 0; margin-left: 6px; }

/* ── On-page edit (owner stays on this listing; no hop to chat) ──────── */
.vai-frl-edit-only { display: none !important; }
.vai-mkt-split.is-editing .vai-frl-edit-only { display: flex !important; }
.vai-mkt-split.is-editing .vai-frl-view { display: none !important; }
.vai-frl-airow { display: flex; align-items: flex-start; gap: 8px; width: 100%; }
.vai-frl-in {
    width: 100%; min-width: 0;
    border: 1px solid var(--vai-mkt-border); border-radius: 10px;
    background: var(--vai-mkt-surface-2); color: var(--vai-mkt-ink);
    font: inherit; padding: 10px 12px;
}
.vai-frl-in:focus { outline: none; border-color: var(--vai-mkt-accent); }
.vai-frl-in--title { font-size: 22px; font-weight: 750; letter-spacing: -.025em; line-height: 1.3; }
.vai-frl-in--area { min-height: 148px; resize: vertical; line-height: 1.65; font-size: 13.5px; }
.vai-frl-in--num { text-align: center; font-weight: 700; padding: 6px 4px; font-size: 14px; }
.vai-frl-ai {
    flex: 0 0 auto; width: 36px; height: 36px; margin-top: 2px;
    border: 1px solid var(--vai-mkt-border); border-radius: 10px;
    background: var(--vai-mkt-surface); color: var(--vai-mkt-accent, #22c55e);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.vai-frl-ai svg { width: 16px; height: 16px; }
.vai-frl-ai:hover { background: var(--vai-mkt-surface-3); }
.vai-frl-ai.is-busy { opacity: .5; pointer-events: none; }
.vai-frl-err { display: none; margin-top: 8px; font-size: 12px; color: #ef4444; text-align: center; }

/* ── What a tier includes ──────────────────────────────────────────────
   A cross earns its place next to a tick: "not in Silver" is the line that
   moves someone to Gold, and a list of only the things you get never says
   what you are missing. */
.vai-frl-feats { margin-top: 14px; }
.vai-frl-feats[hidden] { display: none !important; }
.vai-frl-feat {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 2px; border-top: 1px solid var(--vai-mkt-border);
}
.vai-frl-feat:first-child { border-top: 0; }
.vai-frl-feat__t { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--vai-mkt-ink-2); }
.vai-frl-feat__v { flex: 0 0 auto; font-size: 13px; font-weight: 650; color: var(--vai-mkt-ink); }
.vai-frl-feat__m { flex: 0 0 auto; display: inline-flex; }
.vai-frl-feat__m svg { width: 16px; height: 16px; }
.vai-frl-feat__m.is-yes { color: #16a34a; }
.vai-frl-feat__m.is-no  { color: var(--vai-mkt-border-2, #d4d4d8); }

/* ── Compare packages ──────────────────────────────────────────────────
   The sidebar answers "what is in this tier"; only a table answers "what
   does the extra $20 buy me", which is the question that decides the sale. */
.vai-frl-cmp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vai-frl-cmp {
    width: 100%; border-collapse: collapse; min-width: 420px;
    font-size: 13px; color: var(--vai-mkt-ink-2);
}
.vai-frl-cmp th, .vai-frl-cmp td {
    padding: 11px 12px; text-align: center; vertical-align: middle;
    border-bottom: 1px solid var(--vai-mkt-border);
}
.vai-frl-cmp thead th {
    font-size: 13px; font-weight: 700; color: var(--vai-mkt-ink);
    background: var(--vai-mkt-surface-3); white-space: nowrap;
}
.vai-frl-cmp thead th:first-child { background: transparent; }
.vai-frl-cmp__lead {
    text-align: left; font-weight: 550; color: var(--vai-mkt-muted);
    width: 34%; min-width: 130px;
}
.vai-frl-cmp tbody tr:last-child th,
.vai-frl-cmp tbody tr:last-child td { border-bottom: 0; }
.vai-frl-cmp__price td { font-size: 15px; color: var(--vai-mkt-ink); white-space: nowrap; }
.vai-frl-cmp__price strong { font-weight: 750; letter-spacing: -.01em; }
.vai-frl-cmp__was { margin-right: 6px; font-size: 12.5px; color: var(--vai-mkt-muted); }

/* Why a Message failed, said next to the button that failed. */
.vai-frl-msgerr {
    margin: 8px 0 0; font-size: 12.5px; line-height: 1.5;
    color: #dc2626; text-align: center;
}

/* ── Seller block, now a control ───────────────────────────────────────── */
.vai-mkt-d__person.is-link {
    display: flex; align-items: center; gap: 12px; width: 100%;
    text-align: left; border: 1px solid transparent; background: transparent;
    border-radius: 12px; padding: 10px; margin: -10px -10px 0;
    font: inherit; color: inherit; cursor: pointer;
    transition: background .13s ease, border-color .13s ease;
}
.vai-mkt-d__person.is-link:hover { background: var(--vai-mkt-hover, rgba(0,0,0,.035)); border-color: var(--vai-mkt-border, #e4e4e7); }

/* ── Seller drawer ─────────────────────────────────────────────────────
   Mounted on document.body (not inside .vai-mkt), so it cannot inherit the
   market tokens. Define the same light/dark set here — without them the
   panel stays white in dark mode while body text is light, and the name
   disappears into the background. */
.vai-sel {
    --vai-sel-bg: #ffffff;
    --vai-sel-surface: #f4f4f5;
    --vai-sel-border: #e4e4e7;
    --vai-sel-ink: #18181b;
    --vai-sel-ink-2: #3f3f46;
    --vai-sel-muted: #71717a;
    --vai-sel-hover: rgba(0,0,0,.045);
    position: fixed; inset: 0; z-index: 4200; display: flex; justify-content: flex-end;
    color: var(--vai-sel-ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body[data-background-color="dark"] .vai-sel {
    --vai-sel-bg: var(--app-dark-bg, #0c0c0f);
    --vai-sel-surface: var(--app-dark-surface-2, #1c1c21);
    --vai-sel-border: #26262b;
    --vai-sel-ink: #fafafa;
    --vai-sel-ink-2: #e4e4e7;
    --vai-sel-muted: #a1a1aa;
    --vai-sel-hover: rgba(255,255,255,.06);
}
.vai-sel[hidden] { display: none !important; }
.vai-sel__bd { position: absolute; inset: 0; background: rgba(0,0,0,.52); animation: vai-sel-fade .16s ease; }
@keyframes vai-sel-fade { from { opacity: 0 } to { opacity: 1 } }
.vai-sel__panel {
    position: relative; width: 420px; max-width: 100%; height: 100%;
    display: flex; flex-direction: column; overflow-y: auto;
    background: var(--vai-sel-bg); color: var(--vai-sel-ink);
    border-left: 1px solid var(--vai-sel-border);
    box-shadow: -24px 0 60px -24px rgba(9,9,11,.45);
    animation: vai-sel-in .2s cubic-bezier(.32,.72,0,1);
}
@keyframes vai-sel-in { from { transform: translateX(100%) } to { transform: none } }
.vai-sel__x {
    position: absolute; top: 12px; right: 12px; width: 30px; height: 30px;
    border: 0; border-radius: 8px; background: transparent; color: var(--vai-sel-muted);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.vai-sel__x:hover { background: var(--vai-sel-hover); color: var(--vai-sel-ink); }
.vai-sel__head { padding: 22px 20px 16px; border-bottom: 1px solid var(--vai-sel-border); }
.vai-sel__av {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block;
    background: var(--vai-sel-surface);
}
.vai-sel__ph {
    width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--vai-sel-surface); color: var(--vai-sel-muted);
    font: 600 24px/1 inherit;
}
.vai-sel__name { font: 650 17px/1.3 inherit; margin: 12px 0 2px; letter-spacing: -.01em; color: var(--vai-sel-ink); }
.vai-sel__sub  { font: 400 13px/1.5 inherit; color: var(--vai-sel-muted); }
.vai-sel__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vai-sel__tag {
    font: 600 11.5px/1 inherit; padding: 5px 9px; border-radius: 999px;
    background: var(--vai-sel-surface); color: var(--vai-sel-muted);
}
.vai-sel__tag.is-on { background: rgba(61,154,106,.16); color: #3d9a6a; }
body[data-background-color="dark"] .vai-sel__tag.is-on { color: #86efac; }
.vai-sel__body { padding: 16px 20px 26px; }
.vai-sel__h { font: 650 12px/1 inherit; letter-spacing: .04em; text-transform: uppercase; color: var(--vai-sel-muted); margin: 0 0 9px; }
.vai-sel__about { font: 400 13.5px/1.6 inherit; color: var(--vai-sel-ink-2); margin: 0 0 20px; white-space: pre-line; }
.vai-sel__gigs { display: flex; flex-direction: column; gap: 8px; }
.vai-sel__gig {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    border: 1px solid var(--vai-sel-border); border-radius: 10px; padding: 8px;
    background: transparent; font: inherit; color: var(--vai-sel-ink); cursor: pointer;
    transition: background .13s ease;
}
.vai-sel__gig:hover { background: var(--vai-sel-hover); }
.vai-sel__gig img { width: 54px; height: 40px; border-radius: 6px; object-fit: cover; flex: none; background: var(--vai-sel-surface); }
.vai-sel__gig-t { font: 500 13px/1.35 inherit; color: var(--vai-sel-ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vai-sel__gig-p { font: 650 12.5px/1 inherit; color: var(--vai-sel-ink); margin-top: 3px; }
.vai-sel__msg { margin-top: 18px; }
.vai-sel__err { font: 400 13.5px/1.6 inherit; color: var(--vai-sel-muted); padding: 26px 0; text-align: center; }
@media (max-width: 520px) { .vai-sel__panel { width: 100%; border-left: 0; } }

/* Profile landing — hide the services catalog so /profile-details shows
   the seller, not the marketplace grid. */
.vai-mkt.is-seller-page .vai-mkt__filters,
.vai-mkt.is-seller-page .vai-mkt__grid,
.vai-mkt.is-seller-page .vai-mkt__skeleton,
.vai-mkt.is-seller-page .vai-mkt__more,
.vai-mkt.is-seller-page .vai-mkt__sentinel,
.vai-mkt.is-seller-page .vai-mkt__state,
.vai-mkt.is-seller-page .vai-mkt__count,
.vai-mkt.is-seller-page .vai-mkt__search,
.vai-mkt.is-seller-page .vai-mkt__sort,
.vai-mkt.is-seller-page .vai-mkt__views { display: none !important; }
.vai-mkt.is-seller-page .vai-mkt__panel[hidden] { display: block !important; }
.vai-sel-page {
    max-width: 720px;
    padding: 8px 4px 40px;
}
.vai-sel-page .vai-sel__head { padding: 8px 4px 20px; border-bottom: 1px solid var(--vai-mkt-border, #e4e4e7); }
.vai-sel-page .vai-sel__av,
.vai-sel-page .vai-sel__ph { width: 88px; height: 88px; font-size: 32px; }
.vai-sel-page .vai-sel__name { font-size: 28px; letter-spacing: -.03em; margin-top: 14px; }
.vai-sel-page .vai-sel__body { padding: 20px 4px 0; }
.vai-sel-page .vai-sel__gig { padding: 10px; }
.vai-sel-page .vai-sel__gig img { width: 72px; height: 52px; }
/* ── Booking dialog ─────────────────────────────────────────────────────
   Asking for a time happens here rather than in a form left open under the
   price card: most people who open a listing came to read the price, and
   they were being made to scroll past a booking form to reach it.

   Two panes, because the content is wide rather than tall — what you are
   choosing on the left, what you are about to book on the right, and the
   button under the thing it confirms. */
.vai-frl-dlg {
    position: fixed; inset: 0; z-index: 4400;
    display: flex; align-items: center; justify-content: center;
    padding: 26px;
}
.vai-frl-dlg__back { position: absolute; inset: 0; background: rgba(0,0,0,.66); backdrop-filter: blur(2px); }
.vai-frl-dlg__box {
    position: relative;
    width: min(760px, 100%);
    max-height: 100%;
    display: flex; flex-direction: column;
    background: var(--vai-mkt-surface);
    border: 1px solid var(--vai-mkt-border-2);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 80px -24px rgba(0,0,0,.55);
    animation: vaiFrlDlgIn .2s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes vaiFrlDlgIn { from { transform: translateY(10px) scale(.99); opacity: 0; } to { transform: none; opacity: 1; } }
/* Dark mode: the page surface is pure black, and a black dialog over a
   dimmed black page had no edge to it. The dialog is a grey card instead,
   its summary pane a shade darker. */
body[data-background-color="dark"] .vai-frl-dlg__box { background: #1f1f22; border-color: #2e2e33; }
body[data-background-color="dark"] .vai-frl-dlg__pane--side { background: #19191c; }
body[data-background-color="dark"] .vai-frl-dlg__field input,
body[data-background-color="dark"] .vai-frl-dlg__field select,
body[data-background-color="dark"] .vai-frl-dlg__field textarea { background: #2a2a2e; border-color: #38383d; }

.vai-frl-dlg__head {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--vai-mkt-border);
}
.vai-frl-dlg__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vai-frl-dlg__t { font-size: 17px; font-weight: 650; letter-spacing: -0.015em; }
.vai-frl-dlg__s { font-size: 13px; line-height: 1.5; color: var(--vai-mkt-muted); }
.vai-frl-dlg__x {
    flex: none; width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid var(--vai-mkt-border); background: transparent;
    color: var(--vai-mkt-muted); cursor: pointer;
    display: grid; place-items: center;
}
.vai-frl-dlg__x:hover { color: var(--vai-mkt-ink); border-color: var(--vai-mkt-border-2); }
.vai-frl-dlg__x svg { width: 15px; height: 15px; }

.vai-frl-dlg__body { display: grid; grid-template-columns: minmax(0, 1fr) 272px; min-height: 0; }
.vai-frl-dlg__body.is-done { grid-template-columns: 1fr; }

.vai-frl-dlg__pane { padding: 16px 18px; min-width: 0; }
.vai-frl-dlg__pane--pick { overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }
.vai-frl-dlg__pane--side {
    border-left: 1px solid var(--vai-mkt-border);
    background: var(--vai-mkt-surface-2);
    display: flex; flex-direction: column; gap: 11px;
    overflow-y: auto;
}

.vai-frl-dlg__field label {
    display: block; font-size: 12.5px; font-weight: 600;
    color: var(--vai-mkt-muted); margin-bottom: 8px;
}
.vai-frl-dlg__field input,
.vai-frl-dlg__field select,
.vai-frl-dlg__field textarea {
    width: 100%; box-sizing: border-box;
    padding: 9px 10px;
    border: 1px solid var(--vai-mkt-border); border-radius: 9px;
    background: var(--vai-mkt-surface); color: var(--vai-mkt-ink);
    font: 400 14px/1.45 inherit;
}
.vai-frl-dlg__field textarea { resize: vertical; min-height: 62px; }
.vai-frl-dlg__two { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.vai-frl-dlg__days { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 5px; }
.vai-frl-dlg__day {
    flex: none; min-width: 58px; padding: 8px 9px; line-height: 1.25; text-align: center;
    border: 1px solid var(--vai-mkt-border); border-radius: 10px;
    background: var(--vai-mkt-surface); color: var(--vai-mkt-ink); cursor: pointer;
}
.vai-frl-dlg__day:hover { border-color: var(--vai-mkt-border-2); }
.vai-frl-dlg__day.is-on {
    border-color: var(--vai-mkt-accent); background: var(--vai-mkt-accent); color: var(--vai-mkt-accent-ink);
}
.vai-frl-dlg__day b { display: block; font-size: 13px; font-weight: 650; }
.vai-frl-dlg__day span { display: block; font-size: 11.5px; opacity: .75; }

.vai-frl-dlg__slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.vai-frl-dlg__slot {
    padding: 9px 6px; border: 1px solid var(--vai-mkt-border); border-radius: 9px;
    background: var(--vai-mkt-surface); color: var(--vai-mkt-ink);
    font-size: 13.5px; font-weight: 550; cursor: pointer; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.vai-frl-dlg__slot:hover { border-color: var(--vai-mkt-border-2); }
.vai-frl-dlg__slot.is-on {
    border-color: var(--vai-mkt-accent); background: var(--vai-mkt-accent); color: var(--vai-mkt-accent-ink);
}

.vai-frl-dlg__recap { display: flex; flex-direction: column; gap: 9px; }
.vai-frl-dlg__svc { font-size: 14px; font-weight: 650; line-height: 1.35; }
.vai-frl-dlg__by { font-size: 12.5px; color: var(--vai-mkt-muted); }
/* Dashed until a time is chosen, solid once one is — the shape says whether
   there is anything to confirm. */
.vai-frl-dlg__when {
    display: flex; align-items: center; gap: 8px;
    border: 1px dashed var(--vai-mkt-border-2); border-radius: 10px;
    padding: 10px 11px; font-size: 14px; line-height: 1.4;
    color: var(--vai-mkt-muted);
}
.vai-frl-dlg__when svg { width: 15px; height: 15px; flex: none; }
.vai-frl-dlg__when.is-set {
    border-style: solid; border-color: var(--vai-mkt-accent);
    color: var(--vai-mkt-ink); font-weight: 600;
}
.vai-frl-dlg__when.is-set svg { color: var(--vai-mkt-accent); }
.vai-frl-dlg__row {
    display: flex; justify-content: space-between; gap: 12px;
    padding-top: 8px; border-top: 1px solid var(--vai-mkt-border);
    font-size: 13.5px; color: var(--vai-mkt-muted);
}
.vai-frl-dlg__row b { color: var(--vai-mkt-ink); font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.vai-frl-dlg__go { margin-top: auto; }
.vai-frl-dlg__go[disabled] { opacity: .5; cursor: default; }
.vai-frl-dlg__fine { font-size: 11.5px; line-height: 1.5; color: var(--vai-mkt-muted); text-align: center; }
/* Order dialog: the brief is the whole left pane, and the terms of the
   package sit as small rows above the total. */
.vai-frl-dlg__field textarea.vai-frl-dlg__brief { min-height: 190px; }
.vai-frl-dlg__hint { font-size: 12.5px; line-height: 1.55; color: var(--vai-mkt-muted); margin: 0; }
.vai-frl-dlg__row--sm { padding-top: 6px; font-size: 12.5px; }
.vai-frl-dlg__row--sm b { font-size: 13px; font-weight: 600; }
.vai-frl-dlg__link { color: var(--vai-mkt-accent); font-weight: 600; text-decoration: none; }

.vai-frl-dlg__done {
    padding: 30px 26px; display: flex; flex-direction: column;
    align-items: center; text-align: center; gap: 11px;
}
.vai-frl-dlg__tick {
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(61,154,106,.16); color: var(--vai-mkt-accent);
    display: grid; place-items: center;
}
.vai-frl-dlg__tick svg { width: 21px; height: 21px; }
.vai-frl-dlg__done h4 { margin: 0; font-size: 18px; font-weight: 650; }
.vai-frl-dlg__done p { font-size: 14px; line-height: 1.6; color: var(--vai-mkt-muted); max-width: 42ch; }
.vai-frl-dlg__shut { margin-top: 4px; }
.vai-frl-dlg__box--sm { max-width: 440px; }
.vai-frl-dlg__tick.is-warn { background: rgba(217,119,6,.14); color: #d97706; }
.vai-frl-book__badge.is-awaiting_payment { background: rgba(217,119,6,.14); color: #b45309; }

/* Side by side needs about 640px; below that the panes stack. */
@media (max-width: 700px) {
    .vai-frl-dlg { padding: 12px; }
    .vai-frl-dlg__body { grid-template-columns: 1fr; }
    .vai-frl-dlg__pane--side { border-left: 0; border-top: 1px solid var(--vai-mkt-border); }
    .vai-frl-dlg__slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Booking ────────────────────────────────────────────────────────────
   A haircut is not a deliverable you order and wait for — it happens at a
   time. This panel sits under the package card: the days the seller is open,
   the times left on the day you picked, and one button. The seller sees the
   other side of it, where the hours are written down. */
.vai-frl-book {
    margin-top: 12px;
    border: 1px solid var(--vai-mkt-border);
    border-radius: var(--vai-mkt-radius);
    background: var(--vai-mkt-surface-2);
    padding: 14px;
}
.vai-frl-book__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    margin-bottom: 10px;
}
.vai-frl-book__title { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }
.vai-frl-book__tz { font-size: 11px; color: var(--vai-mkt-muted); }
.vai-frl-book__note { font-size: 12px; color: var(--vai-mkt-muted); line-height: 1.5; }

/* The day strip. Scrolls sideways rather than wrapping — a fortnight of days
   in a narrow column wraps into a block that buries the times underneath. */
.vai-frl-book__days {
    display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px;
    scrollbar-width: thin;
}
.vai-frl-book__day {
    flex: 0 0 auto; min-width: 58px; padding: 7px 8px;
    border: 1px solid var(--vai-mkt-border); border-radius: 10px;
    background: var(--vai-mkt-surface); color: var(--vai-mkt-ink);
    cursor: pointer; text-align: center; line-height: 1.25;
}
.vai-frl-book__day:hover { border-color: var(--vai-mkt-border-2); }
.vai-frl-book__day.is-on {
    border-color: var(--vai-mkt-accent);
    background: var(--vai-mkt-accent); color: var(--vai-mkt-accent-ink);
}
.vai-frl-book__day b { display: block; font-size: 12px; font-weight: 650; }
.vai-frl-book__day span { display: block; font-size: 10.5px; opacity: .75; }

.vai-frl-book__slots {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 6px; margin: 10px 0 12px;
}
.vai-frl-book__slot {
    padding: 7px 6px; border: 1px solid var(--vai-mkt-border); border-radius: 9px;
    background: var(--vai-mkt-surface); color: var(--vai-mkt-ink);
    font-size: 12px; font-weight: 550; cursor: pointer; white-space: nowrap;
}
.vai-frl-book__slot:hover { border-color: var(--vai-mkt-border-2); }
.vai-frl-book__slot.is-on {
    border-color: var(--vai-mkt-accent);
    background: var(--vai-mkt-accent); color: var(--vai-mkt-accent-ink);
}

.vai-frl-book__field { margin-bottom: 8px; }
.vai-frl-book__field label {
    display: block; font-size: 11.5px; color: var(--vai-mkt-muted); margin-bottom: 4px;
}
.vai-frl-book__field input,
.vai-frl-book__field select,
.vai-frl-book__field textarea,
.vai-frl-book__row input,
.vai-frl-book__row select {
    width: 100%; box-sizing: border-box;
    padding: 7px 9px; border: 1px solid var(--vai-mkt-border); border-radius: 9px;
    min-width: 0; height: 34px;
    background: var(--vai-mkt-surface); color: var(--vai-mkt-ink);
    font-family: inherit; font-size: 12.5px; font-weight: 400; line-height: 1.4;
    color-scheme: light dark;
}
.vai-frl-book__field textarea { resize: vertical; min-height: 58px; }
.vai-frl-book__err { margin-top: 8px; font-size: 12px; color: #dc2626; }
.vai-frl-book__ok {
    display: flex; gap: 8px; align-items: flex-start;
    padding: 10px; border-radius: 10px;
    background: rgba(61,154,106,.10); border: 1px solid rgba(61,154,106,.35);
    font-size: 12.5px; line-height: 1.5;
}

/* Seller side — the week, written down once. A row per day, and the days
   that are off stay in place rather than vanishing, so the week still reads
   as a week. The panel lives in the ~280px side column, so the day name
   takes its own line and the three fields share the one under it — four
   columns across never fitted and pushed the times out of the card. */
.vai-frl-book__row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px;
    grid-template-areas: "day mins" "from to";
    align-items: center; margin-bottom: 12px;
}
.vai-frl-book__row .vai-frl-book__dayname { grid-area: day; }
.vai-frl-book__row input[type="time"]:nth-of-type(1) { grid-area: from; }
.vai-frl-book__row input[type="time"]:nth-of-type(2) { grid-area: to; }
.vai-frl-book__row select { grid-area: mins; }
/* The side column is sticky at top:0. With the seller's week in it the column
   is taller than the screen, and a sticky box that tall never shows its own
   bottom — Saturday and the Save button were cut off. The seller's view
   scrolls with the page instead. */
.vai-mkt-split__side:has(.vai-frl-book__row) { position: static; }
.vai-frl-book__row.is-off input, .vai-frl-book__row.is-off select { opacity: .4; pointer-events: none; }
/* The ask-for-a-time row is three equal fields, not the seller's day/times. */
.vai-frl-book__row--ask { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.vai-frl-book__row--ask label {
    display: block; font-size: 11.5px; color: var(--vai-mkt-muted); margin-bottom: 4px;
}
.vai-frl-book__dayname {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--vai-mkt-ink-2); cursor: pointer;
}
.vai-frl-book__dayname input { width: auto; }
.vai-frl-book__all {
    display: flex; align-items: center; gap: 7px;
    margin: 10px 0; font-size: 12px; color: var(--vai-mkt-ink-2);
}
.vai-frl-book__all input { width: auto; }

/* Bookings already on the diary. */
.vai-frl-book__list { margin-top: 12px; border-top: 1px solid var(--vai-mkt-border); padding-top: 10px; }
.vai-frl-book__item {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 7px 0; border-bottom: 1px solid var(--vai-mkt-border);
    font-size: 12px;
}
.vai-frl-book__item:last-child { border-bottom: 0; }
.vai-frl-book__when { font-weight: 600; }
.vai-frl-book__who { color: var(--vai-mkt-muted); }
.vai-frl-book__badge {
    margin-left: auto; padding: 2px 7px; border-radius: 999px;
    font-size: 10.5px; font-weight: 600; text-transform: capitalize;
    background: var(--vai-mkt-surface-3); color: var(--vai-mkt-ink-2);
}
.vai-frl-book__badge.is-confirmed { background: rgba(61,154,106,.16); color: #2f7a54; }
.vai-frl-book__badge.is-declined,
.vai-frl-book__badge.is-cancelled { background: rgba(220,38,38,.12); color: #dc2626; }
.vai-frl-book__badge.is-s1,
.vai-frl-book__badge.is-s2,
.vai-frl-book__badge.is-s3 { background: rgba(61,154,106,.16); color: #2f7a54; }
.vai-frl-book__badge.is-s4,
.vai-frl-book__badge.is-s5 { background: rgba(220,38,38,.12); color: #dc2626; }
.vai-frl-book__open { font-size: 11.5px; font-weight: 600; color: var(--vai-mkt-accent); text-decoration: none; }
.vai-frl-book__acts { display: flex; gap: 6px; width: 100%; }
.vai-frl-book__mini {
    padding: 4px 10px; border-radius: 8px; font-size: 11.5px; font-weight: 600;
    border: 1px solid var(--vai-mkt-border); background: var(--vai-mkt-surface);
    color: var(--vai-mkt-ink); cursor: pointer;
}
.vai-frl-book__mini.is-primary {
    border-color: var(--vai-mkt-accent); background: var(--vai-mkt-accent); color: var(--vai-mkt-accent-ink);
}

@media (max-width: 991px) {
    .vai-frl-book__row--ask { grid-template-columns: 1fr; }
    .vai-frl-book__row--ask select { grid-column: auto; }
}


/* ── Catalogue landing — the approved "Saaf catalogue" design ──────────
   Job-type tabs pinned under the header, a Popular strip (one wide card and
   two) on the untouched view, "All services" with Budget / Delivery time /
   Top rated chips and the sort, then three columns of cards that carry the
   rating and delivery time. The Filters button and its 21-chip row are gone:
   most of those categories held no photographed listing at all. */
.vai-mkt[data-market="freelancer"] #vaiFrlFilters { display: none; }
.vai-frl-tabs {
    flex: 0 0 auto; display: flex; gap: 26px; padding: 0 24px;
    border-bottom: 1px solid var(--vai-mkt-border); background: var(--vai-mkt-bg);
    overflow-x: auto; scrollbar-width: none;
}
.vai-frl-tabs::-webkit-scrollbar { display: none; }
.vai-frl-tab {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
    padding: 13px 0 11px; margin: 0; border: 0; border-bottom: 2px solid transparent; background: none;
    font-size: 14.5px; font-weight: 500; color: var(--vai-mkt-muted); cursor: pointer; white-space: nowrap;
}
.vai-frl-tab b { font-size: 12.5px; font-weight: 500; color: var(--vai-mkt-muted); opacity: .75; font-variant-numeric: tabular-nums; }
.vai-frl-tab:hover { color: var(--vai-mkt-ink); }
.vai-frl-tab.is-on { color: var(--vai-mkt-ink); border-bottom-color: var(--vai-mkt-ink); }
.vai-frl-tab.is-on b { opacity: 1; }
.vai-frl-tab:focus-visible { outline: 2px solid var(--vai-mkt-accent); outline-offset: 2px; border-radius: 4px; }
.vai-mkt.is-detail .vai-frl-tabs,
.vai-mkt.is-seller-page .vai-frl-tabs,
.vai-mkt.is-seller-page .vai-frl-panel { display: none !important; }

.vai-mkt[data-market="freelancer"] .vai-mkt__panel.vai-frl-panel {
    margin: 0 0 16px; border: 0; border-radius: 0; background: transparent; overflow: visible;
}
.vai-frl-h { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--vai-mkt-ink); }
.vai-frl-sub { margin: 2px 0 0; font-size: 13px; color: var(--vai-mkt-muted); }
.vai-frl-popular { margin: 2px 0 30px; }
.vai-frl-pophead { margin-bottom: 14px; }
.vai-frl-poprow { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.vai-frl-poprow .vai-mkt-card {
    cursor: pointer; height: 100%;
    border: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none;
}
.vai-frl-poprow .vai-mkt-card:hover { transform: none; box-shadow: none; }
.vai-frl-poprow .vai-mkt-card:focus-visible .vai-mkt-card__media { outline: 2px solid var(--vai-mkt-accent); outline-offset: 2px; }
.vai-frl-wide .vai-mkt-card__title { font-size: 17px !important; font-weight: 600 !important; color: var(--vai-mkt-ink) !important; min-height: 0 !important; }
.vai-frl-wide .vai-frl-meta { font-size: 13.5px; }
.vai-frl-wide .vai-frl-meta__price { font-size: 17px; }

.vai-frl-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vai-frl-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.vai-frl-sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--vai-mkt-muted); }
.vai-frl-dd { position: relative; }
.vai-frl-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
    border: 1px solid var(--vai-mkt-border-2); border-radius: 999px; background: transparent;
    font-size: 13px; font-weight: 500; color: var(--vai-mkt-ink); cursor: pointer; white-space: nowrap;
}
.vai-frl-chip svg { width: 14px; height: 14px; flex: none; color: var(--vai-mkt-muted); }
.vai-frl-chip:hover { background: var(--vai-mkt-surface-3); }
.vai-frl-chip.is-on { border-color: var(--vai-mkt-ink); }
.vai-frl-chip[data-top] svg { color: #f59e0b; }
.vai-frl-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 190px; padding: 5px;
    border: 1px solid var(--vai-mkt-border-2); border-radius: 12px; background: var(--vai-mkt-surface);
    box-shadow: var(--vai-mkt-shadow-2);
}
body[data-background-color="dark"] .vai-frl-menu { background: #2b2929; }
.vai-frl-menu button {
    display: flex; width: 100%; align-items: center; height: 34px; padding: 0 10px; border: 0; border-radius: 8px;
    background: none; font-size: 13.5px; color: var(--vai-mkt-ink); text-align: left; cursor: pointer; white-space: nowrap;
}
.vai-frl-menu button:hover { background: var(--vai-mkt-surface-3); }
.vai-frl-menu button.is-on { font-weight: 600; }
.vai-frl-menu button.is-on::after { content: "✓"; margin-left: auto; padding-left: 14px; color: var(--vai-mkt-accent); }

/* Three columns: bigger cards, a photo you can read. */
@media (min-width: 1100px) {
    .vai-mkt[data-market="freelancer"] .vai-mkt__grid:not(.is-list-view),
    .vai-mkt[data-market="freelancer"] .vai-mkt__skeleton { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 18px; }
}
@media (min-width: 700px) and (max-width: 1099px) {
    .vai-mkt[data-market="freelancer"] .vai-mkt__grid:not(.is-list-view),
    .vai-mkt[data-market="freelancer"] .vai-mkt__skeleton { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
    .vai-frl-poprow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .vai-frl-poprow > :first-child { grid-column: 1 / -1; }
}
/* Sellers upload 1.83:1 banners (550×300), so that is the box. */
.vai-mkt[data-market="freelancer"] .vai-mkt-card__media { aspect-ratio: 11 / 6; }
.vai-mkt[data-market="freelancer"] .vai-mkt__skeleton-tile i:nth-child(1) { aspect-ratio: 11 / 6; }
.vai-mkt[data-market="freelancer"] .vai-mkt-card__title { font-size: 15px; color: var(--vai-mkt-ink); }
.vai-frl-top {
    flex: 0 0 auto; font-size: 11.5px; font-weight: 500; line-height: 1; padding: 4px 8px; border-radius: 999px;
    color: #15803d; background: rgba(22, 163, 74, .1); border: 1px solid rgba(22, 163, 74, .35);
}
body[data-background-color="dark"] .vai-frl-top { color: #86d6aa; background: rgba(61, 154, 106, .12); border-color: rgba(61, 154, 106, .5); }
.vai-frl-meta { display: flex; align-items: center; gap: 7px; margin-top: auto; font-size: 13px; color: var(--vai-mkt-muted); min-width: 0; }
.vai-frl-meta .vai-frl-rate { font-size: 13px; font-weight: 500; color: var(--vai-mkt-ink-2); }
.vai-frl-meta__new { color: var(--vai-mkt-muted); }
.vai-frl-meta__when { white-space: nowrap; }
.vai-frl-meta__price { margin-left: auto; font-size: 15.5px; font-weight: 700; color: var(--vai-mkt-ink); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.vai-frl-meta__price small { margin-right: 4px; font-size: 12.5px; font-weight: 400; color: var(--vai-mkt-muted); letter-spacing: 0; }
@media (max-width: 699px) {
    .vai-frl-tabs { gap: 20px; padding: 0 16px; }
    .vai-frl-poprow { grid-template-columns: minmax(0, 1fr); }
    .vai-frl-bar .vai-frl-chips { margin-left: 0; width: 100%; }
    .vai-frl-sort { margin-left: auto; }
    .vai-frl-menu { right: auto; left: 0; }
    .vai-frl-sort .vai-frl-menu { left: auto; right: 0; }
    .vai-frl-meta { flex-wrap: wrap; gap: 4px 6px; }
    .vai-frl-meta__price { width: 100%; margin-left: 0; }
}