/* Self-hosted Quicksand (variable, latin) — replaces the render-blocking Google Fonts
   request (no fonts.googleapis / fonts.gstatic round-trips on the critical path). Same
   file Google served, so rendering is identical. font-display:swap = no invisible text. */
@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/static/fonts/quicksand.woff2') format('woff2');
}

/* =========================================================
   KaamWala — Skilled Workers Marketplace
   Design system: modern, professional, mobile-first, lightweight.
   Zero frameworks. One web font (Quicksand, rounded geometric) with a full
   system-font fallback stack, so it stays readable offline / before load.
   Light + dark themes via prefers-color-scheme + data-theme toggle.
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
    color-scheme: light dark;

    /* Brand — muted teal accent, cream ink (Aesop moody-dark scheme, default) */
    --brand: #86b0aa;
    --brand-2: #6f9c97;
    --brand-ink: #b0d5cf;
    --brand-soft: #32403e;
    --teal: #86b0aa;
    --green: #6f9c97;
    --green-2: #5f8a86;
    --green-soft: #32403e;
    --amber: #cb9a5e;
    --danger: #cf8a80;

    /* Surfaces & text — moody slate-teal ground, warm bone/cream text */
    --bg: #2b3538;
    --bg-2: #313d40;
    --surface: #34423f;
    --surface-2: #3d4c47;
    --ink: #ece4d5;
    --text: var(--ink);
    --ink-2: #cbc3b2;
    --muted: #99a29e;
    --border: #44524e;
    --border-2: #536460;

    /* Effects — soft depth on dark */
    --ring: 0 0 0 3px rgba(134, 176, 170, .40);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, .32);
    --shadow: 0 12px 34px rgba(0, 0, 0, .42);
    --shadow-lg: 0 26px 60px rgba(0, 0, 0, .55);
    --shadow-brand: 0 10px 24px rgba(0, 0, 0, .4);
    --shadow-green: 0 10px 24px rgba(0, 0, 0, .4);
    --grad: linear-gradient(135deg, #5f8a86 0%, #486e69 100%);
    --grad-cta: linear-gradient(135deg, #202a2a 0%, #2f4340 100%);
    --grad-text: linear-gradient(100deg, #86b0aa 0%, #b0d5cf 60%, #6f9c97 120%);

    /* Geometry — refined, less rounded */
    --r-sm: 6px;
    --r: 10px;
    --r-lg: 14px;
    --r-xl: 18px;
    --r-pill: 999px;

    --container: 1120px;
    --header-h: 72px;

    --font: "Quicksand", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
    --font-display: "Quicksand", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --brand: #8fbcb6;
        --brand-2: #74a49e;
        --brand-ink: #b6ddd6;
        --brand-soft: #283533;
        --teal: #8fbcb6;
        --green: #6f9c97;
        --green-2: #5f8a86;
        --green-soft: #283533;
        --amber: #d6a663;
        --danger: #d98a82;

        --bg: #232c2e;
        --bg-2: #293335;
        --surface: #2d3937;
        --surface-2: #35433f;
        --ink: #efe8da;
    --text: var(--ink);
        --ink-2: #cdc5b4;
        --muted: #9aa39f;
        --border: #3c4945;
        --border-2: #4a5a56;

        --ring: 0 0 0 3px rgba(143, 188, 182, .42);
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow-sm: 0 2px 12px rgba(0, 0, 0, .42);
        --shadow: 0 12px 34px rgba(0, 0, 0, .5);
        --shadow-lg: 0 26px 60px rgba(0, 0, 0, .62);
        --shadow-brand: 0 10px 24px rgba(0, 0, 0, .45);
        --shadow-green: 0 10px 24px rgba(0, 0, 0, .45);
        --grad: linear-gradient(135deg, #5f8a86 0%, #486e69 100%);
        --grad-cta: linear-gradient(135deg, #191f1f 0%, #283a38 100%);
        --grad-text: linear-gradient(100deg, #8fbcb6 0%, #b6ddd6 60%, #74a49e 120%);
    }
}

/* Light variant of the teal scheme (applied when the toggle is set to light) */
:root[data-theme="light"] {
    --brand: #2b8b7e;
    --brand-2: #1f6f64;
    --brand-ink: #17544c;
    --brand-soft: #e2f2ef;
    --teal: #2b8b7e;
    --green: #2b8b7e;
    --green-2: #1f6f64;
    --green-soft: #e2f2ef;
    --amber: #b0802e;
    --danger: #c0473f;

    --bg: #f1f5f3;
    --bg-2: #e7efec;
    --surface: #ffffff;
    --surface-2: #f3f8f6;
    --ink: #14211e;
    --text: var(--ink);
    --ink-2: #43514d;
    --muted: #6c7773;
    --border: #e3ebe7;
    --border-2: #d1ded9;

    --ring: 0 0 0 3px rgba(43, 139, 126, .28);
    --shadow-xs: 0 1px 2px rgba(18, 38, 33, .05);
    --shadow-sm: 0 2px 12px rgba(18, 38, 33, .06);
    --shadow: 0 12px 34px rgba(18, 38, 33, .08);
    --shadow-lg: 0 24px 58px rgba(18, 38, 33, .12);
    --shadow-brand: 0 8px 22px rgba(43, 139, 126, .22);
    --shadow-green: 0 8px 22px rgba(43, 139, 126, .22);
    --grad: linear-gradient(135deg, #2f9c8c 0%, #1f726a 100%);
    --grad-cta: linear-gradient(135deg, #16413b 0%, #22615a 100%);
    --grad-text: linear-gradient(100deg, #2b8b7e 0%, #33a596 60%, #1f6f64 120%);
}

/* Header theme toggle */
.theme-toggle {
    display: inline-grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-2);
    background: var(--surface-2);
    color: var(--ink-2);
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.theme-toggle:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.theme-toggle .icon { width: 19px; height: 19px; }

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.16; letter-spacing: -.01em; }
h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; }  /* rounded geometric display (Quicksand) */
h3, h4 { font-weight: 600; }  /* functional titles stay in the neutral sans */
h1 { font-size: clamp(2.2rem, 5.4vw, 3.7rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.16rem; }
p { margin: 0 0 1rem; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { margin: 0; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }

/* Anchored sections shouldn't hide under the sticky header on jump */
#main, #workers, #how, #register, [id]:target { scroll-margin-top: 88px; }

/* Line-icon system (inline SVG sprite, currentColor, zero requests) */
.icon { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.16em; flex: none; }
.icon--fill { fill: currentColor; stroke: none; }
.icon--lg { width: 1.35em; height: 1.35em; }

.grad-text {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--brand); /* fallback if clip unsupported */
}
.muted { color: var(--muted); }
.center { text-align: center; }

::selection { background: rgba(111, 122, 83, .24); }

:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: 6px;
}

.skip-link {
    position: absolute;
    left: 12px; top: -60px;
    z-index: 200;
    background: var(--brand);
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--r-sm);
    font-weight: 700;
    transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

.eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-soft);
    padding: 5px 12px;
    border-radius: var(--r-pill);
    margin-bottom: 14px;
}

/* =========================================================
   Header / navigation
   ========================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    /* NOTE: no backdrop-filter/filter/transform here — those make the header
       the containing block for the fixed mobile drawer and break it. */
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.site-header.is-scrolled {
    border-bottom-color: var(--border);
    box-shadow: var(--shadow-sm);
}
.header-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--header-h);
}
/* brand may shrink (and truncate) so it can NEVER slide under the header toggles */
.header-inner .brand { margin-right: auto; padding-right: 8px; min-width: 0; flex: 0 1 auto; }
/* keep a real gap between the logo and the first nav item even when the bar is tight */
.header-inner .primary-nav { margin-left: 8px; }
.header-tools { display: flex; align-items: center; gap: 10px; position: relative; z-index: 101; flex: none; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.22rem; letter-spacing: -.02em; min-width: 0; }
.brand-logo { width: 34px; height: 34px; border-radius: 9px; box-shadow: var(--shadow-xs); flex: none; }
.brand-name { color: var(--ink); font-family: var(--font-display); font-weight: 700; letter-spacing: .01em; font-size: 1.3rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-name::after { content: ""; }

.primary-nav { display: flex; align-items: center; gap: 2px; }
.nav-link {
    position: relative;
    padding: 9px 10px;
    border-radius: var(--r-sm);
    font-weight: 600;
    font-size: .95rem;
    color: var(--ink-2);
    white-space: nowrap;
    transition: color .18s ease, background .18s ease;
}
.nav-link:hover { color: var(--brand); background: var(--brand-soft); }
.nav-link.is-active { color: var(--brand); }
.nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px; bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand);
}
.nav-cta {
    margin-left: 6px;
    padding: 10px 16px;
    border-radius: var(--r);
    font-weight: 700;
    font-size: .95rem;
    white-space: nowrap;
    color: #fff;
    background: var(--grad);
    box-shadow: var(--shadow-brand);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(67, 76, 48, .3); }
.nav-cta.is-active { filter: brightness(.95); }

/* Hamburger */
.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    flex: none;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
}
.nav-toggle-box { display: inline-flex; flex-direction: column; gap: 5px; width: 20px; }
.nav-toggle-bar { height: 2px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(6, 12, 24, .5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

@media (max-width: 1120px) {
    .nav-toggle { display: inline-flex; }
    .primary-nav {
        position: fixed;
        top: var(--header-h); right: 0; bottom: 0;
        width: min(82vw, 320px);
        z-index: 95;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 16px 18px 24px;
        background: var(--surface);
        border-left: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
        transform: translateX(105%);
        transition: transform .3s cubic-bezier(.4, 0, .2, 1);
        overflow-y: auto;
    }
    .nav-link { padding: 13px 14px; font-size: 1.02rem; }
    .nav-link.is-active::after { display: none; }
    .nav-link.is-active { background: var(--brand-soft); }
    .nav-cta { margin: 10px 0 0; text-align: center; }
    body.nav-open .primary-nav { transform: translateX(0); }
    body.nav-open { overflow: hidden; }
    body:not(.nav-open) .nav-backdrop { display: none; }

    body.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    body.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
    body.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: .96rem;
    font-weight: 700;
    line-height: 1;
    padding: 12px 22px;
    border-radius: var(--r);
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: transform .16s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-lg { padding: 15px 30px; font-size: 1.02rem; }
.btn-block { width: 100%; }
/* The [hidden] attribute must always win — some flex classes (.hero-card, .stat-cell)
   were overriding it, so empty rating cards showed. This makes hidden authoritative. */
[hidden] { display: none !important; }

/* ---- Customer dashboard (pro layout) ---- */
.cd-wrap { max-width: 900px; margin: 0 auto; }
.cd-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 6px 0 24px; }
.cd-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.cd-stat-ico { font-size: 1.1rem; }
.cd-stat-num { font-size: 1.85rem; font-weight: 800; color: var(--brand); line-height: 1.1; margin-top: 6px; }
.cd-stat-label { font-size: .8rem; color: var(--muted); margin-top: 2px; display: block; }
.cd-hero { background: radial-gradient(130% 130% at 100% 0%, var(--green-soft), transparent 55%), var(--surface);
    border: 1px solid color-mix(in srgb, var(--green) 26%, var(--border)); border-radius: var(--r-lg); padding: 20px; margin-bottom: 14px; box-shadow: var(--shadow-sm); }
.cd-hero h3 { margin: 0 0 4px; font-size: 1.15rem; line-height: 1.3; }
/* clean, uniformly-aligned detail pills (no more scattered inline text) */
.cd-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.cd-meta { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-size: .82rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; line-height: 1.2; }
.cd-meta-ic { font-size: .92em; line-height: 1; }
.cd-meta-sub { color: var(--brand); font-weight: 700; }
a.cd-meta-link { text-decoration: none; border-color: color-mix(in srgb, var(--brand) 30%, var(--border)); background: var(--brand-soft); color: var(--ink); }
a.cd-meta-link:hover { border-color: var(--brand); }
.cd-hero-detail { margin: 0 0 2px; font-size: .9rem; line-height: 1.5; }
.cd-hero .cd-worker { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.cd-hero .cd-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
/* filled primary confirm button: force white text (beats the standalone ghost .btn-approve rule) */
.cd-hero .btn-approve { font-size: .95rem; padding: 11px 20px; color: #fff; }
.cd-hero .btn-approve:hover { background: var(--grad); color: #fff; filter: brightness(1.06); }

/* Dual-role switcher: a prominent, mobile-first segmented toggle at the top of a dashboard */
.role-switch-bar { display: flex; align-items: center; justify-content: center; margin: 0 0 16px; }
.role-switch { display: inline-flex; width: 100%; max-width: 360px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px; gap: 3px; box-shadow: var(--shadow-sm); }
.role-switch-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: none; background: transparent; color: var(--ink-2); font-family: inherit; font-weight: 800; font-size: .86rem; padding: 9px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .16s ease, color .16s ease, box-shadow .16s ease; min-height: 40px; }
.role-switch-btn .icon { width: 16px; height: 16px; flex: none; }
.role-switch-btn.active { background: var(--grad); color: #fff; box-shadow: var(--shadow-brand); }
.role-switch-btn:not(.active):hover { color: var(--brand); }
[dir="rtl"] .role-switch { flex-direction: row-reverse; }
/* instant "Switching…" overlay shown the moment the toggle is tapped (masks the page reload) */
.role-switch-overlay { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: rso-in .12s ease; }
@keyframes rso-in { from { opacity: 0; } to { opacity: 1; } }
.rso-card { display: inline-flex; align-items: center; gap: 12px; background: var(--grad); color: #fff; font-weight: 800; font-size: .95rem; padding: 14px 22px; border-radius: 999px; box-shadow: var(--shadow-brand); }
.rso-spin { width: 18px; height: 18px; border-radius: 50%; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; animation: rso-spin .7s linear infinite; flex: none; }
@keyframes rso-spin { to { transform: rotate(360deg); } }
.cd-timeline { display: flex; align-items: center; gap: 4px; margin-top: 12px; flex-wrap: wrap; }
.cd-step { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); }
.cd-step .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--border-2); }
.cd-step.done .dot { background: var(--green); }
.cd-step.on { color: var(--brand); font-weight: 700; }
.cd-step.on .dot { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.cd-step .bar { width: 20px; height: 2px; background: var(--border); }
.cd-trust { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: .8rem; color: var(--muted); }
.cd-trust b { color: var(--ink); }
.cd-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cd-quick a { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 18px 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); font-weight: 600; color: var(--ink); box-shadow: var(--shadow-xs); transition: transform .14s, border-color .14s; }
.cd-quick a:hover { transform: translateY(-2px); border-color: var(--brand); color: var(--brand); }
.cd-quick .qi { font-size: 1.7rem; }
.cd-activity { display: flex; flex-direction: column; gap: 4px; }
.cd-activity .cd-act { display: flex; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: .88rem; }
.cd-hist-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
@media (max-width: 720px) { .cd-summary, .cd-quick { grid-template-columns: repeat(2, 1fr); } }
/* Breathing room for buttons inside dashboard/admin forms (were touching the fields/card edges) */
.hire-form .btn { margin-top: 20px; }
.hire-form .btn + .btn { margin-left: 10px; }
.admin-table .row-actions { gap: 6px; row-gap: 6px; }
.admin-table td.row-actions { white-space: normal; }
.empty-state .btn { margin-top: 12px; }

.btn-primary { background: var(--grad); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(67, 76, 48, .3); }

.btn-call { background: var(--green); color: #fff; box-shadow: var(--shadow-green); width: 100%; margin-top: 14px; }
.btn-call:hover { background: var(--green-2); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(67, 76, 48, .28); }

/* Call + WhatsApp saath saath (card + profile) */
.card-actions { display: flex; gap: 8px; margin-top: 14px; }
.card-actions .btn-call { width: auto; flex: 1; margin-top: 0; }
.card-actions .btn-wa { flex: 1; }
.btn-wa { background: var(--grad); color: #fff; }      /* theme dark-green (matches the Log-in button) */
.btn-wa:hover { filter: brightness(.95); transform: translateY(-2px); }
.wa-icon { width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; margin-top: -1px; }
.profile-contact { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.profile-contact .btn { flex: 1; min-width: 140px; margin-top: 0; }
@media (max-width: 380px) {
    .card-actions { flex-direction: column; }
}

.btn-ghost {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--border-2);
    box-shadow: var(--shadow-xs);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

.btn-clear { background: transparent; color: var(--muted); border-color: var(--border-2); }
.btn-clear:hover { color: var(--danger); border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }

/* =========================================================
   Hero + search (homepage)
   ========================================================= */
.hero {
    position: relative;
    padding: clamp(46px, 8vw, 84px) 0 40px;
    overflow: hidden;
    background:
        radial-gradient(75% 90% at 50% 0%, var(--surface), transparent 72%),
        var(--bg);
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 8%, transparent) 1px, transparent 0);
    background-size: 26px 26px;
    opacity: .35;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%);
    mask-image: linear-gradient(180deg, #000, transparent 75%);
    pointer-events: none;
}
/* Hero rising-particles (gentle motion = activity, premium) */
/* ---------------------------------------------------------
   Hero scene: dim trade tools jo dheere drift/ghoomte hain.
   Asli video ki jagah — ~10KB, offline chalta hai, battery/mobile
   data par halka, aur project ka purpose (skilled trades) bayan karta hai.
   --------------------------------------------------------- */
.hero-scene {
    position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
    /* Mouse ke sath halka parallax (JS --px/--py deta hai). */
    transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
/* Particles ULTI taraf hilte hain -> do layers = asli gehrai ka ehsaas */
.hero-fx {
    transform: translate3d(calc(var(--px, 0px) * -.55), calc(var(--py, 0px) * -.55), 0);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

/* ---- Gehrai (atmospheric perspective) ----
   Door wale chhote + dhundle + halke, paas wale saaf aur numaya. Yehi cheez
   scene ko flat hone se bachati hai. */
.hero-scene .w2, .hero-scene .w5, .hero-scene .w7, .hero-scene .w8 { filter: blur(.3px); }
.hero-scene .w3, .hero-scene .w6, .hero-scene .w9 { filter: blur(.8px); }

/* Hero screen se bahar ho to sab kuch rok do — CPU/battery bekaar na jaye */
.hero-off .hero-scene *, .hero-off .hero-fx span, .hero-off .hero-scene { animation-play-state: paused !important; }
.hero-scene .tool {
    position: absolute;
    opacity: var(--tool-o, .8);
    will-change: transform;
}
.hero-scene .tool svg {
    width: 100%; height: 100%; display: block; overflow: visible;
    fill: none; stroke-linecap: round; stroke-linejoin: round;
    /* halka saya -> 3D/uthi hui shakl ka ehsaas */
    filter: drop-shadow(1px 2px 2.5px rgba(0, 0, 0, .3));
}

/* ---- Worker ke rang (3D ke liye gradients base.html ke <defs> me hain) ---- */
.hero-scene .p-shadow   { fill: rgba(0, 0, 0, .22); }          /* zameen par saya */
.hero-scene .p-hat-fill { fill: url(#g-hat); }                 /* peela helmet */
.hero-scene .p-hat      { stroke: #d99f28; stroke-width: 1.8; } /* helmet ka kinara */
.hero-scene .p-skin     { fill: url(#g-skin); }                /* chehra/haath */
/* Qameez ka rang har trade ka apna (yeh azaad workers hain, ek company ka staff
   nahi) — magar sab rang site ki moody slate-teal palette se hi hain, is liye
   variety hoti hai, larai nahi. Helmet aur pant sab ka same rehta hai — wahi
   scene ko jorte hain. */
.hero-scene .p-shirt    { stroke: var(--w-shirt, #4fa197); stroke-width: 3.4; }
.hero-scene [data-kind="wrench"] { --w-shirt: #5c8fa8; }   /* mechanic — steel blue */
.hero-scene [data-kind="saw"]    { --w-shirt: #6f9c72; }   /* carpenter — sage */
.hero-scene [data-kind="roller"] { --w-shirt: #c9803f; }   /* painter — burnt orange */
.hero-scene [data-kind="pipe"]   { --w-shirt: #4f8f7a; }   /* plumber — deep teal */
.hero-scene [data-kind="bulb"]   { --w-shirt: #7a8fa6; }   /* electrician — slate */
.hero-scene [data-kind="ladder"] { --w-shirt: #5c8fa8; }
.hero-scene .w8 { --w-shirt: #c9803f; }
.hero-scene .w9 { --w-shirt: #6f9c72; }  /* qameez + baazu */
.hero-scene .p-pants    { stroke: #3c4b56; stroke-width: 3; }/* pant + boot */
.hero-scene .p-tool     { stroke: #c2ccd3; stroke-width: 1.9; }/* steel tool */
.hero-scene .p-wood     { stroke: #b0763f; stroke-width: 2; }/* lakri (handle/takhta/seerhi) */
.hero-scene .p-wall     { stroke: #8d9aa3; stroke-width: 2.2; }  /* deewar */
.hero-scene .p-roller   { fill: #4fa197; }                     /* paint roller */
.hero-scene .p-bolt     { fill: #9aa7b0; stroke: #c2ccd3; stroke-width: 1; }
.hero-scene .p-bulb     { fill: url(#g-bulb); }

/* Light mode (safed bg): workers ko zyada tar DARK/black rakho — halke rang
   safed par phike lag rahe the. Dark silhouette-jaisi figures white par natural
   aur saaf dikhti hain. (Dark theme me upar wale rangeen rang hi rehte hain.) */
:root[data-theme="light"] .hero-scene .p-shirt    { stroke: #232d2b; }
:root[data-theme="light"] .hero-scene .p-pants    { stroke: #171e1d; }
:root[data-theme="light"] .hero-scene .p-hat      { stroke: #211c18; }
:root[data-theme="light"] .hero-scene .p-hat-fill { fill: #43341f; }
:root[data-theme="light"] .hero-scene .p-skin     { fill: #6a4e35; }
:root[data-theme="light"] .hero-scene .p-tool     { stroke: #464f57; }
:root[data-theme="light"] .hero-scene .p-wood     { stroke: #4a3721; }
:root[data-theme="light"] .hero-scene .p-wall     { stroke: #55606a; }
:root[data-theme="light"] .hero-scene .p-roller   { fill: #232d2b; }
:root[data-theme="light"] .hero-scene .p-bolt     { fill: #55606a; stroke: #46505a; }
/* SVG = halka saans lena (float). Bahar wala span = jagah badalna (relocate).
   Andar ka baazu (w-arm) = asal kaam. Teenon alag alag layers par, is liye
   ek dusre se takratay nahi. */
.has-js .hero-scene .tool svg { animation: toolFloat 7s ease-in-out infinite; }
@keyframes toolFloat {
    0%, 100% { transform: translate3d(0, 9px, 0); }
    50%      { transform: translate3d(5px, -11px, 0); }
}

/* Kaam karte workers thori der baad doosri jagah CHAL kar jate hain (jaise site
   par hota hai). Har figure ke andar do shaklein hain: .w-work (kaam karta hua
   pose) aur .w-walk (chalta hua). Jagah badalte waqt kaam wala chhup jata hai
   aur chalne wala qadam uthata hua nayi jagah pohnchta hai — phir kaam shuru.
   Teenon (span/w-work/w-walk) ki timing ek hi var se aati hai taake sync rahein.
   Seerhi wala (w7) mustasna — uska apna safar pehle se hai. */
.hero-scene .w-walk { opacity: 0; }
.has-js .hero-scene .worker-fig:not(.w7) {
    animation: relocate var(--reloc, 22s) ease-in-out infinite;
    animation-delay: var(--rd, 0s);
}
.has-js .hero-scene .worker-fig:not(.w7) .w-work {
    animation: showWork var(--reloc, 22s) steps(1, end) infinite;
    animation-delay: var(--rd, 0s);
}
.has-js .hero-scene .worker-fig:not(.w7) .w-walk {
    animation: showWalk var(--reloc, 22s) steps(1, end) infinite;
    animation-delay: var(--rd, 0s);
}
/* Span kaam ki jagah A se B tak (aur wapas) le jata hai — chalne ke waqfe me */
@keyframes relocate {
    0%, 36%   { transform: translate(0, 0); }
    48%, 86%  { transform: var(--move); }
    100%      { transform: translate(0, 0); }
}
/* Kaam wala pose: chalne ke waqfe me chhup jata hai */
@keyframes showWork {
    0%, 34%  { opacity: 1; }
    36%, 47% { opacity: 0; }
    49%, 84% { opacity: 1; }
    86%, 97% { opacity: 0; }
    99%      { opacity: 1; }
}
/* Chalne wala: sirf safar ke doran */
@keyframes showWalk {
    0%, 34%  { opacity: 0; }
    36%, 47% { opacity: 1; }
    49%, 84% { opacity: 0; }
    86%, 97% { opacity: 1; }
    99%      { opacity: 0; }
}

/* Har worker ki apni jagah + size (bade taake pose parha ja sake) */
.hero-scene .w1 { left: 3%;   top: 11%;    width: 104px; height: 104px; --move: translate(74px, 130px);  --reloc: 21s; --rd: -3s; }
.hero-scene .w2 { left: 12%;  bottom: 6%;  width: 88px;  height: 88px;  --move: translate(96px, -104px); --reloc: 26s; --rd: -14s; --tool-o: .72; }
.hero-scene .w3 { left: 27%;  top: 44%;    width: 66px;  height: 66px;  --move: translate(-72px, 92px);  --reloc: 24s; --rd: -9s;  --tool-o: .5; }
.hero-scene .w7 { left: 17%;  top: 4%;     width: 76px;  height: 106px; animation: none; --tool-o: .62; }
.hero-scene .w4 { right: 3%;  top: 13%;    width: 100px; height: 100px; --move: translate(-88px, 122px); --reloc: 23s; --rd: -17s; }
.hero-scene .w5 { right: 12%; bottom: 7%;  width: 86px;  height: 86px;  --move: translate(-78px, -96px); --reloc: 28s; --rd: -6s;  --tool-o: .72; }
.hero-scene .w6 { right: 25%; top: 47%;    width: 66px;  height: 66px;  --move: translate(68px, 84px);   --reloc: 25s; --rd: -21s; --tool-o: .5; }

/* Baazu apne KANDHE par pivot kare (har pose ka kandha alag jagah hai) */
.hero-scene .worker-fig .w-arm { transform-box: view-box; }
.hero-scene [data-kind="hammer"] .w-arm { transform-origin: 32px 37px; }
.hero-scene [data-kind="wrench"] .w-arm { transform-origin: 33px 40px; }
.hero-scene [data-kind="saw"]    .w-arm { transform-origin: 31px 41px; }
.hero-scene [data-kind="roller"] .w-arm { transform-origin: 33px 41px; }
.hero-scene [data-kind="pipe"]   .w-arm { transform-origin: 28px 51px; }
.hero-scene [data-kind="bulb"]   .w-arm { transform-origin: 32px 37px; }
.hero-scene [data-kind="ladder"] .w-arm { transform-origin: 16.8px 31px; }

/* ---- Har worker apna kaam kare ---- */
.has-js .hero-scene [data-kind="hammer"] .w-arm { animation: actSwing 1.3s ease-in-out infinite; }
.has-js .hero-scene [data-kind="wrench"] .w-arm { animation: actTurn  1.7s ease-in-out infinite; }
.has-js .hero-scene [data-kind="saw"]    .w-arm { animation: actSaw   0.85s ease-in-out infinite; }
.has-js .hero-scene [data-kind="roller"] .w-arm { animation: actPaint 1.6s ease-in-out infinite; }
.has-js .hero-scene [data-kind="pipe"]   .w-arm { animation: actTurn  2.1s ease-in-out infinite; }
.has-js .hero-scene [data-kind="bulb"]   .w-arm { animation: actFit   2s ease-in-out infinite; }
.has-js .hero-scene [data-kind="ladder"] .w-arm { animation: actReach 2.4s ease-in-out infinite; }
/* Seerhi wala: door se chal kar aata hai -> pehli seerhi se aakhri tak charhta hai */
.hero-scene .w-climb { transform-box: view-box; }
.has-js .hero-scene .w-climb { animation: actJourney 16s ease-in-out infinite; }
@keyframes actJourney {
    0%   { transform: translate(-24px, 10px); opacity: 0; }
    5%   { opacity: 1; }
    26%  { transform: translate(0, 10px); }
    32%  { transform: translate(0, 0); }
    86%  { transform: translate(3px, -26px); opacity: 1; }
    96%  { transform: translate(3px, -26px); opacity: 0; }
    100% { transform: translate(-24px, 10px); opacity: 0; }
}
/* Tangain baari baari qadam uthati hain (chalne aur charhne dono me) */
.hero-scene .w-leg { transform-box: view-box; }
.hero-scene [data-kind="ladder"] .w-leg { transform-origin: 13.5px 42.3px; }
.hero-scene .w-leg { transform-origin: 32px 46px; }
.hero-scene [data-kind="ladder"] .w-leg { transform-origin: 13.5px 42.3px; }
.has-js .hero-scene .w-leg.l1 { animation: stepA 1s ease-in-out infinite; }
.has-js .hero-scene .w-leg.l2 { animation: stepB 1s ease-in-out infinite; }
@keyframes stepA { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes stepB { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(-14deg); } }

/* Samaan utha kar chalte workers — poore hero ko cross karte hain */
.hero-scene .carrier { left: 0; width: 100%; height: 92px; animation: none !important; }
.hero-scene .carrier .c-move { position: absolute; top: 0; width: 76px; height: 92px; }
.has-js .hero-scene .carrier .c-move { animation: walkAcross 30s linear infinite; }
@keyframes walkAcross { 0% { transform: translateX(-14vw); } 100% { transform: translateX(112vw); } }
.has-js .hero-scene .w9 .c-move { animation: walkBack 38s linear infinite; }
@keyframes walkBack {
    0%   { transform: translateX(112vw) scaleX(-1); }
    100% { transform: translateX(-14vw) scaleX(-1); }
}
.hero-scene .w8 { bottom: 1%;  --tool-o: .5; }
.hero-scene .w9 { bottom: 10%; --tool-o: .4; }
.hero-scene .p-box { fill: #b0763f; stroke: #8a5a2e; stroke-width: 1; }

/* ---- Darzan (lady tailor) — kapre ke rang, baal, silai ki harkat ---- */
.hero-scene .p-hair   { fill: #2a2019; }
.hero-scene .sewer .p-shirt { stroke: #b5607f; }         /* rose kameez (dark theme) */
/* Light mode: darzan bhi baaki scene ki tarah gehri silhouette (scattered kapre
   inline rangeen rehte hain, dono themes me) */
:root[data-theme="light"] .hero-scene .p-hair { fill: #201811; }
/* Stationary — apni jagah betqi rehti hai (relocate/walk nahi) */
.hero-scene .w10 { left: 33%; bottom: 2%; width: 98px; height: 98px; --tool-o: .82; }
.hero-scene [data-kind="sew"] .w-arm { transform-box: view-box; transform-origin: 24px 39px; }
.has-js .hero-scene [data-kind="sew"] .w-arm { animation: actSew 1.2s ease-in-out infinite; }
@keyframes actSew {
    0%, 100% { transform: translateX(-1px) rotate(-4deg); }
    50%      { transform: translateX(1.6px) rotate(4deg); }
}
/* Bulb jalta-bujhta */
.has-js .hero-scene .w-bulb { animation: actGlow 3.4s ease-in-out infinite; }

/* Hathora: upar -> thok -> halka bounce */
@keyframes actSwing { 0%, 100% { transform: rotate(-46deg); } 42% { transform: rotate(16deg); } 54% { transform: rotate(8deg); } }
/* Wrench/pipe: bolt kasne wali harkat */
@keyframes actTurn { 0%, 100% { transform: rotate(-26deg); } 50% { transform: rotate(26deg); } }
/* Aara: aage-peeche */
@keyframes actSaw { 0%, 100% { transform: translateX(-5.5px) rotate(-2deg); } 50% { transform: translateX(5.5px) rotate(2deg); } }
/* Roller: upar-neeche paint stroke */
@keyframes actPaint { 0%, 100% { transform: rotate(-24deg); } 50% { transform: rotate(12deg); } }
/* Bulb lagana: halka ghumao */
@keyframes actFit { 0%, 100% { transform: rotate(-11deg); } 50% { transform: rotate(11deg); } }
/* Seerhi: haath upar barhana */
@keyframes actReach { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(-14deg); } }
/* Bulb ki roshni */
@keyframes actGlow {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; filter: drop-shadow(0 0 5px #ffd766); }
}

/* =========================================================
   Har kaam ka REACTION (paint tapakta hai, chingari, buradah, paani, kirnein)
   ========================================================= */

/* Painter: deewar par paint + neeche behta hua qatra */
.hero-scene .fx-paint { fill: #4fa197; opacity: .7; transform-box: view-box; transform-origin: 56px 36px; }
.has-js .hero-scene .fx-paint { animation: fxPaint 2.2s ease-in-out infinite; }
@keyframes fxPaint { 0%, 100% { transform: scaleY(.88); } 50% { transform: scaleY(1); } }

.hero-scene .fx-drip { fill: #4fa197; opacity: 0; }
.has-js .hero-scene .fx-drip { animation: fxDrip 2.8s ease-in infinite; }
.has-js .hero-scene .fx-drip.d2 { animation-delay: 1.4s; }
@keyframes fxDrip {
    0%        { transform: translateY(0); opacity: 0; }
    12%       { opacity: .95; }
    80%       { opacity: .9; }
    100%      { transform: translateY(22px); opacity: 0; }
}

/* Carpenter: keel par hathora lagte hi chingari */
.hero-scene .fx-spark { stroke: #ffe08a; stroke-width: 2.2; opacity: 0;
                        transform-box: view-box; transform-origin: 56px 23px; }
.has-js .hero-scene .fx-spark { animation: fxSpark 1.3s ease-out infinite; }
@keyframes fxSpark {
    0%, 36%   { opacity: 0; transform: scale(.5); }
    44%       { opacity: 1; transform: scale(1); }
    64%, 100% { opacity: 0; transform: scale(1.8); }
}

/* Carpenter (betha): aare se buradah girta hua */
.hero-scene .fx-dust circle { fill: #c68f52; opacity: 0; }
.has-js .hero-scene .fx-dust circle { animation: fxDust 1.1s ease-in infinite; }
.has-js .hero-scene .fx-dust circle:nth-child(2) { animation-delay: .45s; }
.has-js .hero-scene .fx-dust circle:nth-child(3) { animation-delay: .9s; }
@keyframes fxDust {
    0%   { transform: translateY(0); opacity: .9; }
    100% { transform: translateY(13px); opacity: 0; }
}

/* Plumber: pipe se paani ke qatre */
.hero-scene .fx-water { fill: #6fb7e8; opacity: 0; }
.has-js .hero-scene .fx-water { animation: fxWater 1.5s ease-in infinite; }
.has-js .hero-scene .fx-water.d2 { animation-delay: .5s; }
.has-js .hero-scene .fx-water.d3 { animation-delay: 1s; }
@keyframes fxWater {
    0%   { transform: translateY(0) scale(.7); opacity: 0; }
    15%  { opacity: 1; transform: translateY(2px) scale(1); }
    100% { transform: translateY(13px) scale(.9); opacity: 0; }
}

/* Electrician: bulb ki kirnein */
.hero-scene .fx-ray { stroke: #ffe08a; stroke-width: 2; opacity: 0;
                      transform-box: view-box; transform-origin: 41px 21px; }
.has-js .hero-scene .fx-ray { animation: fxRay 3.4s ease-in-out infinite; }
@keyframes fxRay {
    0%, 100% { opacity: 0; transform: scale(.85); }
    50%      { opacity: 1; transform: scale(1.25); }
}

/* Mobile: sirf kinaron wale 4 tools rakho (text ke peeche bheed na ho) */
/* Bari screen se choti: beech wale workers hata do (text saaf rahe) */
@media (max-width: 1180px) {
    .hero-scene .w3, .hero-scene .w6 { display: none; }
}
@media (max-width: 860px) {
    .hero-scene .w7 { display: none; }
    .hero-scene .w1, .hero-scene .w4 { width: 62px; height: 62px; }
    .hero-scene .w2, .hero-scene .w5 { width: 54px; height: 54px; }
    /* blur + drop-shadow mobile GPU par SABSE mehngi cheezein hain, aur itne
       chhote figures par nazar bhi nahi aatin -> bilkul band. Scroll smooth. */
    .hero-scene .tool svg { filter: none; }
    .hero-scene .w2, .hero-scene .w3, .hero-scene .w5,
    .hero-scene .w6, .hero-scene .w7, .hero-scene .w8, .hero-scene .w9 { filter: none; }
}
@media (max-width: 700px) {
    /* Carriers poori chaurai me chalte hain -> phone par text ke peeche se
       guzar kar bheed karte the. Aur do kam animated figures = halka page. */
    .hero-scene .carrier { display: none; }
    /* Particles bhi aadhe (15 -> 6) */
    .hero-fx span:nth-child(n+7) { display: none; }
}
@media (max-width: 560px) {
    /* Phone par chaaron konon me ek ek worker — text beech me saaf rehta hai.
       (Filters yahan pehle se band hain, is liye yeh 4 sasti par jaate hain.) */
    .hero-scene .w1, .hero-scene .w4 { width: 54px; height: 54px; --tool-o: .45; }
    .hero-scene .w2, .hero-scene .w5 { width: 46px; height: 46px; --tool-o: .4; }
    /* Jagah badalne ka faasla bhi chhota — desktop wala 74-96px yahan chauthai
       screen ban jata tha aur worker text ke upar chala jata tha. */
    .hero-scene .w1 { --move: translate(32px, 58px); }
    .hero-scene .w2 { --move: translate(38px, -44px); }
    .hero-scene .w4 { --move: translate(-34px, 54px); }
    .hero-scene .w5 { --move: translate(-32px, -42px); }
}

.hero-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-fx span {
    position: absolute;
    bottom: -18px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 214, 208, 1), transparent 70%);
    box-shadow: 0 0 8px rgba(150, 190, 184, .55);
    opacity: 0;
}
.has-js .hero-fx span { animation: floatUp 15s linear infinite; }
.hero-fx span:nth-child(1)  { left: 8%;  }
.hero-fx span:nth-child(2)  { left: 18%; width: 5px; height: 5px; animation-delay: 3s;   animation-duration: 18s; }
.hero-fx span:nth-child(3)  { left: 27%; animation-delay: 6.5s; }
.hero-fx span:nth-child(4)  { left: 38%; width: 5px; height: 5px; animation-delay: 2s;   animation-duration: 13s; }
.hero-fx span:nth-child(5)  { left: 47%; animation-delay: 9s;   }
.hero-fx span:nth-child(6)  { left: 56%; width: 5px; height: 5px; animation-delay: 5s;   }
.hero-fx span:nth-child(7)  { left: 64%; animation-delay: 1.5s; animation-duration: 17s; }
.hero-fx span:nth-child(8)  { left: 72%; width: 6px; height: 6px; animation-delay: 7.5s; }
.hero-fx span:nth-child(9)  { left: 80%; animation-delay: 4s;   }
.hero-fx span:nth-child(10) { left: 88%; width: 5px; height: 5px; animation-delay: 10.5s; animation-duration: 12s; }
.hero-fx span:nth-child(11) { left: 33%; animation-delay: 12s;  }
.hero-fx span:nth-child(12) { left: 68%; width: 5px; height: 5px; animation-delay: 8s;   animation-duration: 19s; }
@keyframes floatUp {
    0%   { transform: translateY(0) scale(1);   opacity: 0; }
    12%  { opacity: .95; }
    85%  { opacity: .6; }
    100% { transform: translateY(-74vh) scale(1.25); opacity: 0; }
}

.hero-inner { position: relative; z-index: 1; text-align: center; max-width: 780px; margin: 0 auto; }
.hero-title { margin-bottom: 16px; color: var(--ink); }
.hero-title .accent, .brand-name .accent { color: var(--brand); }
.hero-subtitle { font-size: clamp(1rem, 2vw, 1.18rem); color: var(--muted); max-width: 620px; margin: 0 auto 30px; }

/* ---- Two-column hero (text left, animated visual + floating cards right) ---- */
.hero-grid { max-width: var(--container); margin: 0 auto; text-align: left;
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.hero-copy { position: relative; z-index: 2; min-width: 0; }
.hero-grid .hero-title { margin-bottom: 14px; }
.hero-grid .hero-subtitle { margin: 0 0 22px; max-width: 540px; }
.hero-grid .hero-title .accent { color: var(--brand-2); }
:root:not([data-theme="light"]) .hero-grid .hero-title .accent { color: var(--brand-ink); }
.hero-grid .hero-trust { justify-content: flex-start; margin: 4px 0 22px; }
.hero-grid .search-card { max-width: none; margin: 0; }
.hero-grid .hero-popular { justify-content: flex-start; }

/* Search sitting between the hero and the stats strip (centered) */
.hero-search-wrap { margin-top: 2px; }
.hero-search-wrap .search-card { max-width: 720px; margin: 0 auto; }
.hero-search-wrap .hero-popular { justify-content: center; margin-top: 14px; }

.hero-visual { position: relative; z-index: 2; min-height: 410px; margin-top: 18px;
    display: flex; align-items: center; justify-content: center; }
/* Fixed-size stage = the circle's bounding box, so the floating cards always
   frame the circle (not the wide column). Cards can overhang; only .hero-photo clips. */
.hero-stage { position: relative; width: min(320px, 76%); aspect-ratio: 1 / 1; }
/* The circle: a true circle that CROPS the worker (head up, shoulders at the base) */
.hero-photo { position: absolute; inset: 0; z-index: 1;
    border-radius: 50%; overflow: hidden; display: flex; align-items: flex-end; justify-content: center;
    background: radial-gradient(circle at 50% 38%,
        color-mix(in srgb, var(--brand) 24%, var(--surface)) 0%,
        color-mix(in srgb, var(--brand) 13%, var(--surface)) 55%,
        color-mix(in srgb, var(--brand) 6%, var(--surface)) 100%); }
.hero-worker { width: 88%; height: auto; display: block; animation: heroFloat 7s ease-in-out infinite; }
/* Real skilled-worker photo — fills the circle (cropped round by .hero-photo overflow) */
.hero-photo-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }
.hw-shadow { fill: rgba(15, 30, 28, .10); }

.hero-card { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 15px;
    padding: 11px 15px;
    box-shadow: 0 16px 34px -14px rgba(15,30,28,.34), inset 0 1px 0 rgba(255,255,255,.5);
    animation: heroFloat 6s ease-in-out infinite; will-change: transform; }
.hero-card .hc-ic { font-size: 1.3rem; line-height: 1; }
.hc-txt { display: flex; flex-direction: column; line-height: 1.2; }
.hc-txt b { font-size: .9rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.hc-txt i { font-style: normal; font-size: .74rem; color: var(--muted); white-space: nowrap; }
/* Positioned relative to the stage (= the circle), overhanging its edges */
.hero-card-tl { top: 2%;     left: -18%; }
.hero-card-tr { top: 15%;    right: -20%; animation-delay: -1.5s; }
.hero-card-bl { bottom: 18%; left: -18%;  animation-delay: -3s; }
.hero-card-br { bottom: 1%;  right: -16%; animation-delay: -4.5s; }
@keyframes heroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---- Trust stats strip (real data) ---- */
.stats-strip-wrap { margin-top: 30px; }
.stats-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center;
    gap: 10px; padding: 20px clamp(16px, 3vw, 34px);
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); }
.stat-cell { display: flex; align-items: center; justify-content: center; gap: 12px; position: relative; }
.stat-cell + .stat-cell::before { content: ""; position: absolute; left: -5px; top: 50%; transform: translateY(-50%); height: 34px; width: 1px; background: var(--border); }
.stat-ic { font-size: 1.4rem; }
.stat-cell-txt { display: flex; flex-direction: column; line-height: 1.1; }
.stat-cell .stat-num { font-size: 1.5rem; }
.stat-cell .stat-label { text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--muted); }

.search-card {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px;
    box-shadow: var(--shadow-lg);
}
.search-row { display: flex; gap: 10px; }
.search-field { position: relative; flex: 1; }
.search-input {
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: var(--r);
    padding: 14px 16px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus { border-color: var(--brand); box-shadow: var(--ring); background: var(--surface); }

.filter-row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.filter-select {
    flex: 1;
    min-width: 150px;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink-2);
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: var(--r);
    padding: 11px 14px;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.filter-select:focus { border-color: var(--brand); box-shadow: var(--ring); }

/* Live search suggestions */
.suggest-box {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    z-index: 40;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: none;
}
.suggest-box.open { display: block; }
.suggest-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}
.suggest-item:last-child { border-bottom: none; }
.suggest-item.active, .suggest-item:hover { background: var(--brand-soft); }
.suggest-icon { font-size: 1.05rem; width: 22px; text-align: center; }
.suggest-main { flex: 1; font-weight: 600; color: var(--ink); display: flex; flex-direction: column; }
.suggest-sub { font-size: .78rem; font-weight: 500; color: var(--muted); }
.suggest-tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: var(--r-pill); }
.suggest-tag-worker { background: var(--brand-soft); color: var(--brand); }
.suggest-tag-skill { background: var(--green-soft); color: var(--green-2); }
.suggest-tag-city { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }

/* Trust stats bar */
.stats-bar {
    display: flex;
    justify-content: center;
    gap: clamp(20px, 6vw, 60px);
    margin-top: 32px;
    flex-wrap: wrap;
}
.stat-item { display: flex; flex-direction: column; align-items: center; }
.stat-num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--brand); letter-spacing: -.03em; }
.stat-label { font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

/* Hero eyebrow badge */
.hero-eyebrow { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--brand); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent); padding: 6px 15px; border-radius: var(--r-pill); margin-bottom: 18px; }

/* Hero trust feature badges */
.hero-trust { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 4px 0 26px; }
.hero-trust-item { display: inline-flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 9px 15px; box-shadow: var(--shadow-xs); }
.hero-trust-item .ht-ic { font-size: 1.15rem; line-height: 1; }
.ht-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.ht-txt b { font-weight: 700; color: var(--ink); font-size: .86rem; }
.ht-txt i { font-style: normal; color: var(--muted); font-size: .74rem; }

/* Hero "Use my location" button + status (own class so it isn't overridden by
   the /workers .btn-locate pill styling further down). */
.hero-locate { white-space: nowrap; }
.hero-locate .icon { color: var(--brand); }
.hero-locate:hover .icon { color: inherit; }

/* Popular skills chips under the search */
.hero-popular { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; }
.hero-popular-label { font-size: .82rem; font-weight: 700; color: var(--muted); }
.pop-chip { font-size: .82rem; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); padding: 6px 13px; border-radius: var(--r-pill); transition: border-color .15s ease, color .15s ease, background .15s ease; }
.pop-chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.pop-chip-all { color: var(--brand); border-color: transparent; background: transparent; }

/* Prominent worker CTA right under the search box */
.hero-join { position: relative; z-index: 2; margin: 22px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hero-join-btn { display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow-brand); }
.hero-join-hint { font-size: .9rem; color: var(--muted); font-weight: 600; }
.how-cta { text-align: center; margin-top: 34px; }

/* =========================================================
   Section scaffolding
   ========================================================= */
.section { padding: clamp(40px, 7vw, 72px) 0; }
.section-head { margin-bottom: 34px; }
.section-head.center { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }

.listing, .top-section, .browse-section, .how-section { padding: clamp(36px, 6vw, 60px) 0; }
.listing-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.listing-head h2 { margin: 0; }
.count-badge {
    font-size: .82rem;
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-soft);
    padding: 5px 13px;
    border-radius: var(--r-pill);
}
.count-badge.gold { color: #92600a; background: linear-gradient(120deg, #fde68a, #fcd34d); }
.active-filter {
    font-size: .82rem;
    font-weight: 700;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--border-2);
    padding: 5px 12px;
    border-radius: var(--r-pill);
}

/* =========================================================
   Worker cards
   ========================================================= */
.worker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 20px;
}
.worker-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    display: flex;
    flex-direction: column;
}
.worker-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: var(--grad);
    opacity: 0;
    transition: opacity .22s ease;
}
.worker-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--brand) 30%, var(--border)); }
.worker-card:hover::before { opacity: 1; }
.worker-card.top-card { border-color: color-mix(in srgb, #f5b301 45%, var(--border)); }

.card-link { display: block; color: inherit; }

.rank-badge {
    position: absolute;
    top: -12px; right: 18px;
    background: linear-gradient(135deg, #f7c948, #e8a005);
    color: #4a2f00;
    font-weight: 700;
    font-size: .82rem;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-sm);
}

.worker-card-top { display: flex; align-items: center; gap: 14px; }
.avatar {
    flex: none;
    width: 54px; height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    background: var(--grad);
    box-shadow: var(--shadow-sm);
    overflow: hidden;   /* profile photo ko rounded corners par clip karo */
}
.avatar-lg { width: 76px; height: 76px; border-radius: 20px; font-size: 2rem; }
/* Profile photo (WhatsApp DP jaisi) — na ho to naam ka pehla harf dikhta hai. */
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Dashboard: avatar par tap karke photo badlo (camera badge) */
.dp-edit { position: relative; display: inline-block; cursor: pointer; }
.dp-cam {
    position: absolute; right: -5px; bottom: -5px; width: 30px; height: 30px;
    border-radius: 50%; background: var(--surface); border: 1px solid var(--border);
    display: grid; place-items: center; font-size: .9rem; box-shadow: var(--shadow-sm);
    transition: border-color .18s ease, transform .18s ease;
}
.dp-edit:hover .dp-cam { border-color: var(--brand); transform: scale(1.08); }
.worker-main { min-width: 0; }
.worker-name { margin: 0 0 5px; font-size: 1.18rem; }
.skill-badge {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    color: var(--green-2);
    background: var(--green-soft);
    padding: 4px 11px;
    border-radius: var(--r-pill);
}

/* Ratings */
.rating { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.stars { position: relative; display: inline-block; font-size: 1rem; line-height: 1; letter-spacing: 2px; }
.stars-bg { color: color-mix(in srgb, var(--muted) 40%, transparent); }
.stars-fg { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: #f5b301; }
.stars.small { font-size: .85rem; }
.rating-num { font-weight: 700; color: var(--ink); }
.rating-count { font-size: .85rem; color: var(--muted); }

.new-badge {
    display: inline-block;
    margin-top: 16px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-soft);
    padding: 5px 12px;
    border-radius: var(--r-pill);
}
.jobs-badge {
    display: inline-block;
    margin-top: 10px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--green-2);
    background: var(--green-soft);
    padding: 5px 12px;
    border-radius: var(--r-pill);
}

.worker-meta { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 9px; color: var(--ink-2); font-size: .93rem; }
.worker-meta li { display: flex; align-items: center; gap: 9px; }
.worker-meta > li > .icon { color: var(--brand); }
.meta-icon { width: 18px; text-align: center; flex: none; }
.js-distance { color: var(--brand); font-weight: 600; }
.profile-city .icon { color: var(--brand); vertical-align: -.18em; }

/* Phone privacy (masked by default, eye reveals) */
.phone-line { position: relative; }
.phone-num { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.phone-line.revealed .phone-num { color: var(--ink); font-weight: 700; }
.phone-eye {
    display: inline-grid;
    place-items: center;
    width: 28px; height: 28px;
    margin-left: auto;
    font-size: .95rem;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    opacity: .75;
    transition: opacity .16s ease, background .16s ease, transform .16s ease;
}
.phone-eye:hover { opacity: 1; background: var(--brand-soft); }
.phone-eye:active { transform: scale(.9); }

/* =========================================================
   Browse by skill tiles
   ========================================================= */
/* Section header with a "View all" link on the right (Browse / Top Rated) */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.section-head h2 { margin: 0; }
.section-link { color: var(--brand); font-weight: 700; font-size: .92rem; white-space: nowrap; }
.section-link:hover { text-decoration: underline; }

/* Browse by Skill — compact centered icon tiles (mockup style) */
.skill-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.skill-tile-more .skill-tile-icon { background: var(--bg-2); color: var(--muted); }
.skill-tile {
    width: 150px; flex: 0 0 auto; scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 22px 14px;
    box-shadow: var(--shadow-xs);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.skill-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.skill-tile-icon { font-size: 1.8rem; width: 58px; height: 58px; display: grid; place-items: center; background: var(--brand-soft); border-radius: 16px; flex: none; }
.skill-tile-name { font-weight: 700; color: var(--ink); font-size: .95rem; line-height: 1.2; }
.skill-tile-count { font-size: .78rem; color: var(--muted); }
/* mobile: single-row smooth horizontal scroll (swipe), bleeding to the screen edges */
@media (max-width: 640px) {
    .skill-grid {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 12px;
        margin: 0 -20px;
        padding: 2px 20px 8px;
    }
    .skill-grid::-webkit-scrollbar { display: none; }
    .skill-tile { width: 132px; padding: 18px 12px; }
}

/* =========================================================
   "How it works" flow
   ========================================================= */
.how-head { text-align: center; max-width: 560px; margin: 0 auto 40px; }
.flow { display: flex; align-items: flex-start; justify-content: center; gap: 8px; flex-wrap: wrap; }
.flow-step {
    flex: 1;
    min-width: 220px;
    max-width: 320px;
    text-align: center;
    position: relative;
    background: linear-gradient(158deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 34px 26px 30px;
    /* 3D depth: glossy top edge + layered drop shadows */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 20px 44px -14px rgba(15,30,28,.30),
        0 6px 16px -8px rgba(15,30,28,.20);
    transition: transform .32s cubic-bezier(.34,1.56,.64,1), box-shadow .32s ease;
}
.flow-step:hover {
    transform: translateY(-9px) scale(1.015);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.65),
        0 34px 66px -16px rgba(15,30,28,.40),
        0 12px 24px -10px rgba(15,30,28,.26);
}
.flow-step h3 { margin: 16px 0 4px; }
.flow-slogan { font-weight: 700; color: var(--brand); font-size: .98rem; margin: 0; }
/* Numbered step badge (3-step customer flow) */
.flow-num { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 8px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 1.5rem; font-weight: 700; box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--brand) 60%, transparent), inset 0 2px 4px rgba(255,255,255,.3); }
.flow-3 .flow-step h3 { margin: 10px 0 6px; }
.flow-3 .flow-step p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.6; }
.flow-icon {
    position: relative; width: 92px; height: 92px; margin: 0 auto;
    display: grid; place-items: center; border-radius: 50%;
    /* 3D orb: soft light from top-left + colored glow + inner shading */
    background: radial-gradient(circle at 34% 28%,
        color-mix(in srgb, var(--brand) 24%, var(--surface)) 0%,
        var(--brand-soft) 72%);
    box-shadow:
        0 12px 26px -10px color-mix(in srgb, var(--brand) 65%, transparent),
        inset 0 2px 5px rgba(255,255,255,.45),
        inset 0 -8px 14px rgba(0,0,0,.10);
    transition: transform .32s cubic-bezier(.34,1.56,.64,1);
}
.flow-step:hover .flow-icon { transform: translateY(-3px) scale(1.06); }
.flow-emoji { font-size: 2.3rem; }
.signal { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--brand); opacity: 0; }
.has-js .signal { animation: ping 2.4s ease-out infinite; }
.has-js .signal-2 { animation-delay: 1.2s; }
@keyframes ping { 0% { transform: scale(.7); opacity: .6; } 100% { transform: scale(1.5); opacity: 0; } }

.sms-bubble { display: inline-flex; gap: 5px; margin-top: 16px; padding: 9px 14px; background: var(--brand); border-radius: 16px 16px 16px 4px; box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--brand) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.25); }
.sms-bubble span { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: .6; }
.has-js .sms-typing span { animation: typing 1.4s infinite ease-in-out; }
.has-js .sms-typing span:nth-child(2) { animation-delay: .2s; }
.has-js .sms-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

.flow-connector { align-self: center; width: 60px; height: 3px; background: var(--border-2); border-radius: 3px; position: relative; overflow: hidden; }
.flow-dot { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--green); }
.has-js .flow-dot { animation: travel 2.2s linear infinite; }
@keyframes travel { 0% { left: -10px; } 100% { left: 100%; } }

.mini-card { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 12px 22px -10px rgba(15,30,28,.28); }
.mini-avatar { width: 26px; height: 26px; border-radius: 8px; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 700; }
.mini-lines { display: flex; flex-direction: column; gap: 4px; }
.mini-lines i { display: block; height: 5px; border-radius: 3px; background: var(--border-2); }
.mini-lines i:first-child { width: 46px; }
.mini-lines i:last-child { width: 30px; }
.mini-check { color: var(--green); font-weight: 700; display: inline-block; transform-origin: center; }

/* ---- Step 2 "Live & Get Hired" — going-online + getting-found story ---- */
/* Globe: a satellite dot orbiting + a gentle breathe = "you're live/online" */
.flow-icon-live .orbit { position: absolute; inset: -7px; border-radius: 50%; }
.has-js .flow-icon-live .orbit { animation: orbit 6s linear infinite; }
.flow-icon-live .orbit i {
    position: absolute; top: -4px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px;
    border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--surface), 0 2px 6px rgba(0,0,0,.25);
}
.has-js .flow-icon-live .flow-emoji { animation: breathe 3.2s ease-in-out infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }

/* Mini-card: lines shimmer (being discovered), then check pops + card lifts (hired) */
.mini-card-live .mini-lines i { position: relative; overflow: hidden; }
.has-js .mini-card-live .mini-lines i::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-120%);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 60%, transparent), transparent);
    animation: shimmer 3.2s ease-in-out infinite;
}
.has-js .mini-card-live .mini-lines i:last-child::after { animation-delay: .25s; }
.has-js .mini-card-live { animation: cardFound 3.2s ease-in-out infinite; }
.has-js .mini-card-live .mini-check { animation: checkPop 3.2s ease-in-out infinite; }
@keyframes shimmer { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(130%); } }
@keyframes checkPop {
    0%, 60%, 100% { transform: scale(1); }
    70% { transform: scale(1.55); }
    82% { transform: scale(.92); }
    90% { transform: scale(1); }
}
@keyframes cardFound {
    0%, 60%, 100% { border-color: var(--border); box-shadow: none; }
    72% { border-color: color-mix(in srgb, var(--green) 55%, transparent);
          box-shadow: 0 8px 22px color-mix(in srgb, var(--green) 28%, transparent); }
}

/* =========================================================
   Locate bar
   ========================================================= */
.locate-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.btn-locate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
    border-radius: var(--r-pill);
    padding: 10px 18px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, transform .16s ease;
}
.btn-locate:hover { background: var(--brand); color: #fff; transform: translateY(-1px); }
.locate-status { color: var(--muted); font-size: .88rem; font-weight: 600; }

/* =========================================================
   Empty state
   ========================================================= */
.empty-state {
    text-align: center;
    padding: 60px 24px;
    background: var(--surface);
    border: 1px dashed var(--border-2);
    border-radius: var(--r-lg);
    color: var(--muted);
}
.empty-state.small { padding: 34px 20px; }
.empty-emoji { font-size: 3rem; margin-bottom: 12px; }
.empty-state h3 { margin: 0 0 6px; color: var(--ink); }

/* =========================================================
   Pagination
   ========================================================= */
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 34px; }
.page-btn, .page-ellipsis {
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    font-weight: 700;
    font-size: .92rem;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 12px;
    transition: all .16s ease;
}
.page-btn:hover { border-color: var(--brand); color: var(--brand); }
.page-btn.on { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 4px 10px rgba(67, 76, 48, .25); }
.page-btn.disabled { opacity: .45; pointer-events: none; }
.page-ellipsis { border: none; background: none; }

/* =========================================================
   Profile (worker detail)
   ========================================================= */
.profile-wrap { padding: 34px 20px 60px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--muted); margin-bottom: 20px; transition: color .16s ease; }
.back-link:hover { color: var(--brand); }

.profile-card {
    position: relative;
    display: flex;
    gap: 24px;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 28px;
    box-shadow: var(--shadow);
    flex-wrap: wrap;
}
/* ♥ save button on the profile — same look family as the header/cards */
.pfav-profile { position: absolute; top: 16px; right: 16px; z-index: 4; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color .12s, border-color .12s, transform .1s; }
@supports not (background: color-mix(in srgb, red, blue)) { .pfav-profile { background: var(--surface); } }
.pfav-profile .kw-heart { width: 1.35rem; height: 1.35rem; }
.pfav-profile:hover { color: #e0556b; border-color: #e0556b; }
.pfav-profile.on { color: #e0556b; border-color: color-mix(in srgb, #e0556b 45%, var(--border)); }
.pfav-profile:active { transform: scale(.9); }
[dir="rtl"] .pfav-profile { right: auto; left: 16px; }
.profile-main { flex: 1; min-width: 240px; }
.profile-name { margin: 0 0 8px; }
.profile-city { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-weight: 600; margin-left: 10px; }
.profile-card .rating { margin-top: 14px; }
.profile-phone { display: flex; align-items: center; gap: 9px; margin: 18px 0 12px; font-size: 1.05rem; color: var(--ink-2); max-width: 260px; }
.profile-call { max-width: 320px; margin-top: 6px; }

/* Hire card */
.hire-card {
    margin-top: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 28px;
    box-shadow: var(--shadow-sm);
}
.hire-intro h2 { margin-bottom: 4px; }
.hire-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.hire-field { flex: 1; min-width: 200px; }

/* Profile grid: feedback + reviews */
.profile-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 22px; margin-top: 24px; }
.review-box, .reviews-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-sm); }

/* Star rating input (reverse trick) */
.star-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; margin-bottom: 12px; }
.star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-input label { font-size: 1.9rem; color: color-mix(in srgb, var(--muted) 40%, transparent); cursor: pointer; transition: color .12s ease, transform .12s ease; }
.star-input label:hover, .star-input label:hover ~ label,
.star-input input:checked ~ label { color: #f5b301; }
.star-input label:hover { transform: scale(1.14); }

.review-item { display: flex; gap: 12px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--border); }
.review-item:first-of-type { border-top: none; }
.review-body { flex: 1; min-width: 0; }
.rv-ava { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; }
.rv-ava img { width: 100%; height: 100%; object-fit: cover; }
.rv-ava-init { background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: 1.05rem; }
.review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review-date { font-size: .8rem; color: var(--muted); margin-left: auto; }
.review-comment { margin: 8px 0 0; color: var(--ink-2); }
/* the quick tags a client picked (Professional, On Time, …) — now shown under each review */
.review-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.review-tag { font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; background: var(--brand-soft); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }

/* =========================================================
   Forms (shared)
   ========================================================= */
.field-label { display: block; font-weight: 700; font-size: .9rem; color: var(--ink-2); margin: 16px 0 7px; }
.req { color: var(--danger); }
.text-input {
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: var(--r);
    padding: 12px 15px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.text-input::placeholder { color: var(--muted); }
.text-input:focus { border-color: var(--brand); box-shadow: var(--ring); background: var(--surface); }
textarea.text-input { resize: vertical; min-height: 60px; }
.checkbox-row { display: flex; align-items: center; gap: 10px; margin: 18px 0; font-weight: 600; cursor: pointer; }
.checkbox-row input { width: 18px; height: 18px; accent-color: var(--brand); }

.form-wrap { padding: 34px 20px 60px; max-width: 640px; }
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow); }

/* =========================================================
   Flash messages
   ========================================================= */
.flash-wrap { margin: 18px 0 0; display: grid; gap: 10px; }
.flash {
    padding: 14px 18px;
    border-radius: var(--r);
    font-weight: 600;
    border: 1px solid transparent;
    box-shadow: var(--shadow-xs);
}
.flash-success { background: var(--green-soft); color: var(--green-2); border-color: color-mix(in srgb, var(--green) 25%, transparent); }
.flash-error { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 28%, transparent); }

/* =========================================================
   My Work page
   ========================================================= */
.mywork-wrap { padding: 34px 20px 60px; max-width: 820px; }
.mywork-head { text-align: center; margin-bottom: 24px; }
.mywork-search { display: flex; gap: 10px; max-width: 480px; margin: 0 auto; }
.mywork-search .text-input { flex: 1; }
.mywork-profile { display: flex; align-items: center; gap: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-sm); margin-top: 24px; flex-wrap: wrap; }
.mywork-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.stat-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px; text-align: center; box-shadow: var(--shadow-xs); }
.stat-box-num { display: block; font-size: 1.7rem; font-weight: 700; color: var(--ink); }
.stat-box-label { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.st-progress-text { color: var(--brand); }
.st-done-text { color: var(--green-2); }
.mywork-subhead { margin: 30px 0 14px; }
.lead-list { display: grid; gap: 14px; }
.lead-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow-xs); }
.lead-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lead-date { font-size: .8rem; color: var(--muted); margin-left: auto; }
.lead-detail { margin: 8px 0; color: var(--ink-2); }
.lead-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: .9rem; }
.lead-phone { color: var(--brand); font-weight: 600; }
.lead-city { color: var(--muted); }

/* Status pills */
.status { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; padding: 4px 11px; border-radius: var(--r-pill); }
.status-active, .st-done { background: var(--green-soft); color: var(--green-2); }
.status-inactive { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }
.st-new { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.st-contacted { background: color-mix(in srgb, #2563eb 15%, transparent); color: #2563eb; }
.st-progress { background: color-mix(in srgb, #7c3aed 16%, transparent); color: #7c3aed; }
.st-cancel { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
/* status <select> also gets these classes — keep readable text */
select.st-new, select.st-contacted, select.st-progress, select.st-done, select.st-cancel { color: var(--ink-2); background: var(--surface); }

/* =========================================================
   About / Contact pages
   ========================================================= */
.page-hero {
    padding: clamp(44px, 7vw, 76px) 0 clamp(30px, 5vw, 48px);
    text-align: center;
    background:
        radial-gradient(75% 90% at 50% 0%, var(--surface), transparent 72%),
        var(--bg);
}
.page-hero-title { max-width: 780px; margin: 0 auto 14px; }
.page-hero-sub { max-width: 620px; margin: 0 auto; color: var(--muted); font-size: clamp(1rem, 2vw, 1.15rem); }

.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.split-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.split-stats .stat-card:first-child { grid-column: 1 / -1; }
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.stat-card-num { display: block; font-size: 2.4rem; font-weight: 700; color: var(--brand); letter-spacing: -.03em; }
.stat-card-label { font-size: .85rem; font-weight: 600; color: var(--muted); }

.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.value-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.value-icon { font-size: 2rem; display: inline-grid; place-items: center; width: 58px; height: 58px; background: var(--brand-soft); border-radius: 16px; margin-bottom: 14px; }
.value-card h3 { margin-bottom: 6px; }
.value-card p { margin: 0; }

.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; counter-reset: step; }
.step { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px 24px; box-shadow: var(--shadow-sm); }
.step-num { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--grad); color: #fff; font-weight: 700; font-size: 1.2rem; margin-bottom: 14px; box-shadow: var(--shadow-sm); }
.step h3 { margin-bottom: 6px; }
.step p { margin: 0; }

.cta-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin: clamp(30px, 6vw, 56px) 0;
    padding: clamp(28px, 4vw, 44px);
    border-radius: var(--r-lg);
    background: var(--grad-cta);
    color: #fff;
    box-shadow: var(--shadow-lg);
}
.cta-band-text h2 { margin: 0 0 6px; color: #fff; }
.cta-band-text p { margin: 0; color: rgba(255, 255, 255, .9); }
.cta-band-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-band .btn-primary { background: #fff; color: var(--brand-2); box-shadow: 0 10px 24px rgba(0, 0, 0, .2); }
.cta-band .btn-primary:hover { background: #fff; filter: brightness(.96); }
.cta-band .btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .5); }
.cta-band .btn-ghost:hover { background: rgba(255, 255, 255, .22); color: #fff; border-color: #fff; }

/* Why KaamWala — trust pillar cards (3D) */
.why-section { padding: clamp(30px, 5vw, 54px) 0; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.why-card {
    text-align: center; padding: 32px 26px;
    background: linear-gradient(158deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--border); border-radius: var(--r-xl);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 16px 36px -16px rgba(15,30,28,.26);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.why-card:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 26px 50px -18px rgba(15,30,28,.34); }
.why-ic {
    display: inline-grid; place-items: center; width: 62px; height: 62px; margin-bottom: 14px; font-size: 1.7rem; border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--brand) 22%, var(--surface)) 0%, var(--brand-soft) 72%);
    box-shadow: inset 0 2px 5px rgba(255,255,255,.4), inset 0 -6px 12px rgba(0,0,0,.10), 0 10px 20px -10px color-mix(in srgb, var(--brand) 60%, transparent);
}
.why-card h3 { margin: 0 0 8px; font-size: 1.12rem; }
.why-card p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.6; }

/* Testimonials — real verified reviews only */
.testimonials-section { padding: clamp(30px, 5vw, 54px) 0; }
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.testimonial-card { margin: 0; padding: 24px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; }
.t-stars { color: var(--amber); font-size: 1rem; letter-spacing: 2px; }
.t-star-off { color: var(--border-2); }
.testimonial-card blockquote { margin: 0; font-size: .98rem; line-height: 1.6; color: var(--ink); }
.testimonial-card figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.t-name { font-weight: 700; color: var(--ink); font-size: .92rem; }
.t-meta { font-size: .8rem; color: var(--muted); }
.t-meta a { color: var(--brand); font-weight: 600; }

/* Contact channels */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.contact-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--brand) 30%, var(--border)); }
.contact-card h3 { margin: 4px 0 0; }
.contact-card p { margin: 0; }
.contact-icon { font-size: 2rem; display: inline-grid; place-items: center; width: 56px; height: 56px; background: var(--brand-soft); border-radius: 15px; margin-bottom: 8px; }
.contact-value { margin-top: 8px; font-weight: 700; color: var(--brand); word-break: break-word; }
.contact-card-accent { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 30%, var(--border)); }
.contact-card-accent .contact-icon { background: color-mix(in srgb, var(--green) 18%, transparent); }
.contact-card-accent .contact-value { color: var(--green-2); }

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 4px 20px; box-shadow: var(--shadow-xs); }
.faq-item summary { list-style: none; cursor: pointer; padding: 16px 0; font-weight: 700; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--brand); transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0 0 16px; color: var(--muted); }
.faq-item a { color: var(--brand); font-weight: 600; }

/* =========================================================
   Admin (dashboard / leads / login)
   ========================================================= */
.admin-wrap { padding: 32px 20px 60px; }
.admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.admin-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pending-alert { background: color-mix(in srgb, var(--amber) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--amber) 32%, transparent); color: var(--ink-2); padding: 14px 18px; border-radius: var(--r); margin-bottom: 18px; }
.pending-alert a { color: var(--amber); font-weight: 700; }

.admin-tabs, .lead-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.admin-tab, .lead-chip {
    font-weight: 700;
    font-size: .9rem;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--border-2);
    padding: 9px 16px;
    border-radius: var(--r-pill);
    transition: all .16s ease;
}
.admin-tab:hover, .lead-chip:hover { border-color: var(--brand); color: var(--brand); }
.admin-tab.on, .lead-chip.on { background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--shadow-sm); }
.lead-chip-n { font-size: .78rem; opacity: .85; margin-left: 3px; }

.admin-search { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.admin-search .text-input { flex: 1; min-width: 200px; }

.table-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 720px; }
.admin-table thead { background: var(--surface-2); }
.admin-table th { text-align: left; padding: 14px 16px; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--border); }
.admin-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--ink-2); vertical-align: middle; }
.admin-table tbody tr:last-child td, .admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: color-mix(in srgb, var(--brand) 4%, transparent); }
.rating-link { color: var(--brand); font-weight: 700; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.inline-form { display: inline; }
.lead-status-select { font-family: inherit; font-weight: 700; font-size: .82rem; padding: 6px 10px; border-radius: var(--r-pill); border: 1px solid var(--border-2); background: var(--surface); color: var(--ink-2); cursor: pointer; }

/* Mini buttons (admin) */
.btn-mini { font-size: .8rem; font-weight: 700; padding: 7px 13px; border-radius: 9px; border: 1px solid var(--border-2); background: var(--surface); color: var(--ink-2); cursor: pointer; transition: all .14s ease; }
.btn-mini:hover { transform: translateY(-1px); }
.btn-approve { color: var(--green-2); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.btn-approve:hover { background: var(--green); color: #fff; border-color: transparent; }
.btn-reject { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn-reject:hover { background: var(--danger); color: #fff; border-color: transparent; }
.btn-edit:hover { background: var(--brand); color: #fff; border-color: transparent; }
.btn-toggle:hover { border-color: var(--brand); color: var(--brand); }
.btn-delete { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 34%, transparent); }
.btn-delete:hover { background: var(--danger); color: #fff; border-color: transparent; }

/* Admin login */
.auth-wrap { min-height: 62vh; display: grid; place-items: center; padding: 40px 20px; }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 36px; box-shadow: var(--shadow-lg); text-align: center; }
.auth-icon { font-size: 2.6rem; margin-bottom: 8px; }
.auth-sub { color: var(--muted); margin-bottom: 8px; }
.auth-card form { text-align: left; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { margin-top: 60px; background: var(--surface); border-top: 1px solid var(--border); }
/* Lean, app-style footer: brand · one tagline · a few essential links · contact · copyright */
.footer-lean { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 40px 20px 32px; }
.footer-lean .brand { margin: 0; }
.footer-lean .footer-tagline { max-width: 440px; margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 2px 0; }
.footer-links a { color: var(--ink-2); font-size: .95rem; font-weight: 600; transition: color .16s ease; }
.footer-links a:hover { color: var(--brand); }
.footer-contact-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
.footer-contact-row a { color: var(--muted); font-size: .9rem; font-weight: 500; transition: color .16s ease; }
.footer-contact-row a:hover { color: var(--brand); }
.footer-copy { margin: 6px 0 0; font-size: .82rem; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr 1.2fr; gap: 30px 26px; padding: 52px 20px 36px; }
.footer-brand .brand { margin-bottom: 12px; }
.footer-tagline { color: var(--muted); font-size: .92rem; max-width: 320px; }
.footer-social { display: flex; gap: 10px; margin-top: 4px; }
.social-link { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); font-weight: 700; transition: all .16s ease; }
.social-link:hover { background: var(--brand); color: #fff; border-color: transparent; transform: translateY(-2px); }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 4px; }
.footer-col a { color: var(--ink-2); font-size: .93rem; font-weight: 500; transition: color .16s ease; width: fit-content; }
.footer-col a:hover { color: var(--brand); }
.footer-address { color: var(--muted); font-size: .93rem; }
.footer-bottom { border-top: 1px solid var(--border); }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 20px; color: var(--muted); font-size: .86rem; }
.footer-legal { display: flex; gap: 18px; }
.footer-legal a { color: var(--muted); font-weight: 600; transition: color .16s ease; }
.footer-legal a:hover { color: var(--brand); }

/* =========================================================
   Entrance animations (only with JS; respect reduced motion)
   ========================================================= */
.has-js .hero-inner > * { opacity: 0; animation: fadeUp .6s ease forwards; }
.has-js .hero-title { animation-delay: .04s; }
.has-js .hero-subtitle { animation-delay: .12s; }
.has-js .search-card { animation-delay: .2s; }
.has-js .hero-join { animation-delay: .24s; }
.has-js .stats-bar { animation-delay: .32s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.anim-init { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.anim-init.in { opacity: 1; transform: none; }

.anim-card { opacity: 0; transform: translateY(22px); transition: opacity .5s ease, transform .5s ease; }
.anim-card.in { opacity: 1; transform: none; }

/* =========================================================
   Premium layer — glow, icons, registration
   ========================================================= */

/* Hero glow orbs (soft, blurred, animated) */
/* Site-wide subtle drifting "aurora" background (fixed, premium, calm) */
body::before {
    content: "";
    position: fixed;
    inset: -20vh -12vw;
    z-index: -1;
    background:
        radial-gradient(34% 40% at 20% 22%, rgba(134, 176, 170, .20), transparent 70%),
        radial-gradient(30% 38% at 84% 14%, rgba(203, 154, 94, .13), transparent 70%),
        radial-gradient(38% 44% at 70% 82%, rgba(111, 156, 151, .18), transparent 72%);
    filter: blur(60px);
    pointer-events: none;
    will-change: transform;
}
.has-js body::before { animation: aurora 26s ease-in-out infinite alternate; }
.hero::before { display: none; }   /* hero uses the shared site-wide aurora */
@keyframes aurora {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2.5%, -2%, 0) scale(1.08); }
    100% { transform: translate3d(-2.5%, 2%, 0) scale(1.05); }
}

/* Gradient headline accent — wrap a word in <span class="accent"> */
.hero-title .accent, .page-hero-title .accent {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--brand);
}

/* Search field leading icon */
.search-field .field-icon { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.search-field .search-input { padding-left: 46px; }

/* Eye toggle (two SVGs, CSS swaps on .revealed) */
.phone-eye .icon { width: 17px; height: 17px; }
.phone-eye .icon-off { display: none; }
.phone-line.revealed .phone-eye .icon-on { display: none; }
.phone-line.revealed .phone-eye .icon-off { display: inline; }

/* Subtle sheen on primary buttons */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 45%);
    pointer-events: none;
}

/* --- Registration / OTP --- */
.register-wrap { padding: 34px 20px 60px; max-width: 560px; }
.register-head { text-align: center; margin-bottom: 22px; }
.register-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: clamp(24px, 4vw, 38px); box-shadow: var(--shadow-lg); }

.reg-steps { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 26px; }
.reg-step { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .86rem; color: var(--muted); }
.reg-step .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border-2); font-size: .8rem; }
.reg-step.active { color: var(--brand); }
.reg-step.active .dot { background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--shadow-brand); }
.reg-step.done .dot { background: var(--green); color: #fff; border-color: transparent; }
.reg-step-line { width: 34px; height: 2px; background: var(--border-2); border-radius: 2px; }

/* OTP: big code input */
.otp-note { text-align: center; color: var(--muted); margin-bottom: 18px; }
.otp-note strong { color: var(--ink); }
.otp-input {
    letter-spacing: .5em;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    padding: 16px;
}
.otp-dev {
    margin: 14px 0 4px;
    padding: 12px 16px;
    text-align: center;
    border-radius: var(--r);
    background: color-mix(in srgb, var(--amber) 14%, var(--surface));
    border: 1px dashed color-mix(in srgb, var(--amber) 45%, transparent);
    color: var(--ink-2);
    font-size: .9rem;
}
.otp-dev b { font-family: var(--font-display); letter-spacing: .2em; color: var(--amber); font-size: 1.05rem; }
.otp-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.link-btn { background: none; border: none; color: var(--brand); font-family: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; padding: 6px; }
.link-btn:hover { text-decoration: underline; }

/* ---- Register / Login tabs (combined worker portal) ---- */
.auth-tabs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; margin-bottom: 24px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px;
}
.auth-tab {
    text-align: center; padding: 11px 10px; border-radius: 10px; font-weight: 700; font-size: .95rem;
    color: var(--muted); text-decoration: none; transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.auth-tab:hover { color: var(--ink); }
.auth-tab.active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow); }
/* Worker / Customer role toggle — the primary selector (filled green) above the Login/Register tabs */
.role-toggle {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; margin-bottom: 14px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px;
}
.role-opt {
    text-align: center; padding: 11px 10px; border: none; background: none; cursor: pointer; font-family: inherit;
    border-radius: 10px; font-weight: 700; font-size: .95rem; color: var(--muted);
    transition: color .18s ease, background .18s ease, box-shadow .18s ease; -webkit-tap-highlight-color: transparent;
}
.role-opt:hover { color: var(--ink); }
.role-opt.active { background: var(--grad); color: #fff; box-shadow: var(--shadow-green); }
.auth-panel { display: none; }
.auth-panel.show { display: block; }
.auth-hint { text-align: center; font-size: .85rem; margin: 14px 0 0; }

/* ---- Worker ID-verification (CNIC upload) page ---- */
.verify-wrap { padding: 30px 20px 60px; max-width: 620px; }
.verify-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.verify-profile { display: flex; align-items: flex-start; gap: 16px; }
.verify-name { margin: 0; font-size: 1.5rem; line-height: 1.15; }
.vp-info { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.vp-namerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vp-edit { width: auto; padding: 5px 12px; }
.vp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.vp-meta .profile-city { margin-left: 0; }
.vp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.vp-actions .btn { width: auto; }
.vp-avail { margin-top: 2px; }
.vp-avail-hint { font-size: .76rem; margin: 6px 0 0; line-height: 1.4; }

.verify-status {
    display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px;
    border-radius: var(--r-xl); margin-bottom: 22px; border: 1px solid var(--border);
}
.verify-status strong { display: block; font-size: 1.02rem; margin-bottom: 2px; }
.verify-status p { margin: 0; font-size: .9rem; color: var(--ink-2); }
.vs-icon { font-size: 1.35rem; line-height: 1; flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; }
.verify-status.is-live { background: color-mix(in srgb, var(--green) 12%, var(--surface)); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.verify-status.is-live .vs-icon { background: var(--green); color: #fff; }
.verify-status.is-live .vs-icon .icon { width: 18px; height: 18px; }
.verify-status.is-review { background: color-mix(in srgb, var(--amber) 14%, var(--surface)); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.verify-status.is-pending { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
.verify-status.is-rejected { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 42%, transparent); }
.verify-status.is-rejected strong { color: var(--danger); }

/* One-time "KYC approved" celebration modal (shows once, then acknowledged forever) */
body.kw-modal-open { overflow: hidden; }
.kyc-modal { position: fixed; inset: 0; z-index: 1000; display: flex; justify-content: center;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 20px; background: rgba(10, 20, 18, .55); backdrop-filter: blur(3px);
    animation: kycFade .2s ease; }
.kyc-modal.is-closing { opacity: 0; transition: opacity .18s ease; }
/* margin:auto centres the card when it fits, and lets the overlay scroll it (top included)
   when the content is taller than the viewport — so the Save button is always reachable. */
.kyc-modal-card { position: relative; width: min(420px, 100%); text-align: center; margin: auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
    padding: 34px 26px 28px; box-shadow: var(--shadow-lg);
    animation: kycPop .28s cubic-bezier(.22, 1, .36, 1); }
.kyc-modal-card h2 { margin: 6px 0 8px; font-size: 1.4rem; color: var(--ink); }
.kyc-modal-card p { margin: 0 0 20px; color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.kyc-modal-badge { width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 50%;
    display: grid; place-items: center; background: var(--grad); color: #fff; box-shadow: var(--shadow-green); }
.kyc-modal-badge .icon { width: 30px; height: 30px; }
.kyc-modal-x { position: absolute; top: 10px; right: 12px; background: none; border: none;
    font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 8px; border-radius: 8px; }
.kyc-modal-x:hover { background: var(--surface-2); color: var(--ink); }
.kyc-modal-ok { width: auto; min-width: 150px; margin: 0 auto; }
@keyframes kycFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kycPop { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kyc-modal, .kyc-modal-card { animation: none; } }

.verify-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: clamp(20px, 4vw, 32px); box-shadow: var(--shadow-lg); }
.verify-card-title { margin: 0 0 4px; font-size: 1.2rem; }
.verify-card-sub { font-size: .88rem; margin: 0 0 20px; }

.cnic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cnic-box {
    position: relative; display: block; cursor: pointer; border: 2px dashed var(--border-2);
    border-radius: 16px; background: var(--surface-2); aspect-ratio: 1.6 / 1; overflow: hidden;
    transition: border-color .18s ease, background .18s ease;
}
.cnic-box:hover { border-color: var(--brand); }
.cnic-box.has-file { border-style: solid; border-color: var(--green); }
.cnic-box-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px; text-align: center; }
.cnic-emoji { font-size: 1.8rem; }
.cnic-label { font-weight: 700; font-size: .95rem; color: var(--ink); }
.cnic-hint { font-size: .76rem; color: var(--muted); }
.cnic-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cnic-box.has-file .cnic-box-inner { display: none; }

.verify-links { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }

/* Worker dashboard: 30-din funnel card (Views -> Contacts -> Requests -> Done) */
.metrics-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
    padding: 18px clamp(14px, 3vw, 24px); box-shadow: var(--shadow-lg); margin-bottom: 22px;
    background: radial-gradient(120% 100% at 0% 0%, var(--brand-soft), transparent 55%), var(--surface);
}
.metrics-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; font-weight: 700; }
.metrics-head .muted { font-weight: 500; font-size: .85rem; }
/* 5 saaf metric boxes — har number bara aur numaya (0 bhi saaf dikhta hai) */
.metrics-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.metric {
    display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0;
    text-align: center; padding: 14px 6px; border-radius: 16px;
    background: var(--surface-2); border: 1px solid var(--border);
}
.metric-ico { font-size: 1.35rem; line-height: 1; }
.metric-num { font-family: var(--font-display); font-size: clamp(1.6rem, 5vw, 2.1rem); font-weight: 700; color: var(--ink); line-height: 1.05; }
.metric-label { font-size: .76rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
/* Har metric ka apna rang, taake foran farq nazar aaye */
.m-views  { background: color-mix(in srgb, #7a8fa6 16%, var(--surface-2)); border-color: color-mix(in srgb, #7a8fa6 40%, transparent); }
.m-call   { background: color-mix(in srgb, var(--brand) 16%, var(--surface-2)); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.m-call   .metric-num { color: var(--brand-ink); }
.m-wa     { background: color-mix(in srgb, #25d366 16%, var(--surface-2)); border-color: color-mix(in srgb, #25d366 42%, transparent); }
.m-wa     .metric-num { color: #25d366; }
.m-done   { background: color-mix(in srgb, var(--green) 16%, var(--surface-2)); border-color: color-mix(in srgb, var(--green) 40%, transparent); }

.metrics-grid-6 { grid-template-columns: repeat(6, 1fr); }  /* admin: 6 metrics */

@media (max-width: 640px) {
    /* Phone: 2 rows (Views/Calls/WhatsApp upar, Requests/Completed neeche) */
    .metrics-grid, .metrics-grid-6 { grid-template-columns: repeat(3, 1fr); }
    .metric-num { font-size: 1.7rem; }
}
@media (max-width: 380px) {
    .metrics-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Metric trend (↑/↓/–) */
.metric-trend { font-size: .72rem; font-weight: 700; }
.metric-trend.up { color: var(--green); }
.metric-trend.down { color: var(--danger); }
.metric-trend.flat { color: var(--muted); }
.metrics-foot { font-size: .75rem; margin: 12px 0 0; text-align: center; }
.conv-pill {
    font-size: .8rem; font-weight: 700; color: var(--brand-ink);
    background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
    border-radius: 999px; padding: 3px 12px;
}

/* Profile strength + achievements */
.strength-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-bottom: 18px; }
.strength-card, .badges-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-xl); padding: 16px 18px; box-shadow: var(--shadow-sm);
}
.strength-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; margin-bottom: 10px; }
.strength-pct { font-family: var(--font-display); font-size: 1.5rem; color: var(--brand); }
.strength-pct.full { color: var(--green); }
.strength-bar { height: 10px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.strength-bar > span { display: block; height: 100%; border-radius: 6px; background: var(--grad); transition: width .5s cubic-bezier(.22,1,.36,1); }
.strength-items { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; }
.sitem { font-size: .82rem; color: var(--muted); }
.sitem.done { color: var(--ink-2); font-weight: 600; }

.badges-head { font-weight: 700; margin-bottom: 12px; }
.badges-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.badge-chip {
    display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 700;
    color: var(--brand-ink); background: var(--brand-soft);
    border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
    border-radius: 999px; padding: 5px 11px;
}
.badge-ico { font-size: 1rem; }

/* Smart suggestions */
.suggest-card {
    background: radial-gradient(120% 120% at 100% 0%, var(--brand-soft), transparent 60%), var(--surface);
    border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
    border-radius: var(--r-xl); padding: 16px 18px; margin-bottom: 18px; box-shadow: var(--shadow-sm);
}
.suggest-head { font-weight: 700; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.suggest-tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--brand); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; }
.suggest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.suggest-list li { display: flex; align-items: flex-start; gap: 9px; font-size: .9rem; color: var(--ink-2); }
.suggest-ico { flex: none; font-size: 1rem; }

@media (max-width: 620px) {
    .strength-row { grid-template-columns: 1fr; }
}

/* Call log (worker dashboard) — kab kab call aayi */
.call-log { display: flex; flex-direction: column; gap: 8px; }
.call-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface);
}
.call-ico { flex: none; font-size: 1.05rem; }
.call-when { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.call-src {
    margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--muted);
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 999px; padding: 2px 9px; text-transform: uppercase; letter-spacing: .03em;
}
.call-src.src-wa {   /* WhatsApp contact -> green badge */
    color: #1eb257;
    background: color-mix(in srgb, #25d366 14%, transparent);
    border-color: color-mix(in srgb, #25d366 40%, transparent);
}

/* Admin demand page: do column + bars */
.admin-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; margin-top: 10px; }
.demand-bars { display: flex; flex-direction: column; gap: 8px; }
.demand-row { display: grid; grid-template-columns: 120px 1fr 34px; align-items: center; gap: 10px; }
.demand-name { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demand-bar { height: 10px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.demand-bar > span { display: block; height: 100%; background: var(--grad); border-radius: 6px; }
.demand-n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
    .admin-two-col { grid-template-columns: 1fr; }
    .demand-row { grid-template-columns: 100px 1fr 30px; }
}

/* Reviews: verified / unverified badge (fake reviews se bachao) */
.reviews-note { font-size: .85rem; margin: -6px 0 16px; }
.verif-badge {
    display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .02em;
    padding: 2px 8px; border-radius: 999px; white-space: nowrap;
    color: var(--green);
    background: color-mix(in srgb, var(--green) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
}
.verif-badge.unverified {
    color: var(--muted);
    background: var(--surface-2);
    border-color: var(--border);
}

/* Admin: CNIC image links + verification tag */
.cnic-link { display: inline-block; font-weight: 700; font-size: .8rem; color: var(--brand); margin-right: 8px; text-decoration: underline; }
.verif-tag { display: inline-block; margin-top: 4px; font-size: .72rem; font-weight: 700; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.verif-tag.kyc-review { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, var(--surface)); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.verif-tag.kyc-reject { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }

@media (max-width: 560px) {
    .vp-actions { gap: 6px; }
    .vp-actions .btn { flex: 1 1 auto; justify-content: center; }
    .avail-toggle { width: 100%; justify-content: center; }
}
@media (max-width: 400px) {
    .cnic-grid { grid-template-columns: 1fr; }
    .verify-profile { gap: 12px; }
    .avatar-lg { width: 64px; height: 64px; border-radius: 16px; font-size: 1.7rem; }
    .verify-name { font-size: 1.3rem; }
    .vp-info { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .anim-init, .anim-card, .has-js .hero-inner > * { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px) {
    .profile-grid { grid-template-columns: 1fr; }
    .split { grid-template-columns: 1fr; gap: 28px; }
    .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 28px 22px; }
    .footer-brand { grid-column: 1 / -1; }
}

/* Hero stacks: text centered on top, the circle + floating cards below it
   (same visual as desktop). The worker animation stays on mobile too, but
   dimmed so it reads as a soft background instead of clashing with the text. */
@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 10px; }
    .hero-grid .hero-subtitle { margin-left: auto; margin-right: auto; text-shadow: 0 1px 5px var(--bg); }
    .hero-grid .hero-trust, .hero-grid .hero-popular { justify-content: center; }
    .hero-grid .search-card { margin: 0 auto; }
    .hero-visual { min-height: auto; margin: 26px auto 6px; }
    .hero-scene { opacity: .6; }
    /* Keep ALL 9 workers in the mobile hero (desktop parity) — small + dimmed
       as a soft backdrop. These override the tablet/phone hide rules above. */
    .hero-scene .w3, .hero-scene .w6,
    .hero-scene .w7, .hero-scene .carrier { display: block; }
    .hero-scene .w3, .hero-scene .w6 { width: 44px; height: 44px; }
    .hero-scene .w7 { width: 52px; height: 74px; }
    /* Darzan ko neeche-baayen kone me le jao taake circle photo ke peeche na chhupe */
    .hero-scene .w10 { left: 1%; right: auto; bottom: 1%; top: auto; width: 66px; height: 66px; }
}

@media (max-width: 620px) {
    .search-row { flex-direction: column; }
    .search-row .btn-primary { width: 100%; }
    .search-row .hero-locate { width: 100%; justify-content: center; }
    .btn-clear { width: 100%; }
    .stats-bar { gap: 26px; }
    .flow-connector { display: none; }
    .mywork-stats { grid-template-columns: 1fr; }
    .cta-band { flex-direction: column; align-items: flex-start; text-align: left; }
    .cta-band-actions { width: 100%; }
    .cta-band-actions .btn { flex: 1; }
    .why-grid { grid-template-columns: 1fr; }
    .stats-strip { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 18px 12px; }
    .stat-cell + .stat-cell::before { display: none; }
    /* Hero circle + floating cards tuned for phones (fit, no clipping) */
    .hero-stage { width: min(280px, 76vw); }
    .hero-card { padding: 8px 11px; border-radius: 12px; gap: 8px; }
    .hero-card .hc-ic { font-size: 1.05rem; }
    .hc-txt b { font-size: .78rem; }
    .hc-txt i { font-size: .66rem; }
    .hero-card-tl { top: 0;      left: -8%; }
    .hero-card-tr { top: 15%;    right: -10%; }
    .hero-card-bl { bottom: 15%; left: -8%; }
    .hero-card-br { bottom: -2%; right: -6%; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   Help assistant — floating chat widget (bottom-right)
   ========================================================= */
.kw-chat { position: fixed; right: 18px; bottom: 18px; z-index: 200; }

.kw-chat-fab {
    position: relative; width: 58px; height: 58px; border-radius: 50%;
    border: none; cursor: pointer; display: grid; place-items: center;
    background: var(--grad); color: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.28);
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.kw-chat-fab:hover { transform: translateY(-3px) scale(1.05); }
.kw-chat-fab .icon { width: 26px; height: 26px; }
.kw-chat-fab-close { position: absolute; font-size: 2rem; line-height: 1; opacity: 0; transform: rotate(-90deg) scale(.5); transition: all .2s ease; }
.kw-chat-fab-open  { transition: all .2s ease; }
body.kw-chat-on .kw-chat-fab-open  { opacity: 0; transform: rotate(90deg) scale(.5); }
body.kw-chat-on .kw-chat-fab-close { opacity: 1; transform: rotate(0) scale(1); }
/* attention pulse ring */
.has-js .kw-chat-fab::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent);
    animation: kwPulse 2.6s ease-out infinite;
}
body.kw-chat-on .kw-chat-fab::after { animation: none; }
@keyframes kwPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent); } 70%,100% { box-shadow: 0 0 0 16px transparent; } }

.kw-chat-panel {
    position: absolute; right: 0; bottom: 72px; width: min(360px, calc(100vw - 32px));
    max-height: min(74vh, 560px); display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
    box-shadow: 0 18px 50px rgba(0,0,0,.32);
    transform-origin: bottom right;
}
/* Zaroori: `display:flex` (author) UA ke `[hidden]{display:none}` ko override kar
   deta tha -> panel kabhi chhupta hi nahi (close × bekaar). Yeh isay theek karta hai. */
.kw-chat-panel[hidden] { display: none; }
.has-js .kw-chat-panel:not([hidden]) { animation: kwPop .22s cubic-bezier(.34,1.56,.64,1); }
@keyframes kwPop { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: none; } }

.kw-chat-head { display: flex; align-items: center; gap: 10px; padding: 13px 14px; background: var(--grad); color: #fff; }
.kw-chat-ava { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; overflow: hidden; }
.kw-chat-brand { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.kw-chat-brand strong { font-size: .98rem; }
.kw-chat-brand span { font-size: .74rem; opacity: .85; }
.kw-chat-x { margin-left: auto; background: rgba(255,255,255,.18); border: none; color: #fff; width: 36px; height: 36px; border-radius: 50%; font-size: 1.3rem; line-height: 1; cursor: pointer; flex: none; }
.kw-chat-x:hover { background: rgba(255,255,255,.3); }

.kw-chat-body { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.kw-msg { max-width: 84%; padding: 10px 13px; border-radius: 16px; font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }
.kw-msg.bot  { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 5px; color: var(--ink); }
.kw-msg.user { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 5px; }
.kw-msg a { color: var(--brand); font-weight: 700; }
.kw-msg.user a { color: #fff; text-decoration: underline; }
.kw-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.kw-chip {
    font-size: .82rem; font-weight: 600; cursor: pointer;
    background: var(--surface); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
    border-radius: 999px; padding: 7px 12px; transition: background .15s ease, transform .12s ease;
}
.kw-chip:hover { background: var(--brand-soft); transform: translateY(-1px); }

.kw-chat-foot { padding: 10px 14px; border-top: 1px solid var(--border); background: var(--surface); }
.kw-chat-wa { width: 100%; margin: 0; }

@media (max-width: 480px) {
    .kw-chat { right: 12px; bottom: 12px; }
    .kw-chat-panel { bottom: 68px; max-height: 72vh; }
}

/* ===================== Availability (🟢 Available / 🔴 Busy) ===================== */
/* Small pill on worker cards */
.avail-pill {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .7rem; font-weight: 700; line-height: 1;
    padding: 3px 8px; border-radius: 999px; margin-left: 6px;
    white-space: nowrap; vertical-align: middle;
}
.avail-pill.on { background: var(--green-soft); color: var(--green-2); }
.avail-pill.off { background: color-mix(in srgb, #ef4444 14%, transparent); color: #b91c1c; }
[data-theme="dark"] .avail-pill.off { color: #fca5a5; }

/* Bigger badge on the public profile */
.avail-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .85rem; font-weight: 700;
    padding: 6px 13px; border-radius: 999px; margin: 8px 0 2px;
}
.avail-badge.on { background: var(--green-soft); color: var(--green-2); }
.avail-badge.off { background: color-mix(in srgb, #ef4444 14%, transparent); color: #b91c1c; }
[data-theme="dark"] .avail-badge.off { color: #fca5a5; }

/* Toggle button on the worker dashboard */
.avail-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: inherit; font-weight: 800; font-size: .95rem;
    padding: 10px 18px; border-radius: 999px; border: 2px solid transparent;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, box-shadow .12s ease;
}
.avail-toggle:active { transform: scale(.97); }
.avail-toggle.on {
    background: var(--green-soft); color: var(--green-2);
    border-color: color-mix(in srgb, var(--green) 45%, transparent);
}
.avail-toggle.off {
    background: color-mix(in srgb, #ef4444 12%, transparent); color: #b91c1c;
    border-color: color-mix(in srgb, #ef4444 38%, transparent);
}
[data-theme="dark"] .avail-toggle.off { color: #fca5a5; }
.avail-toggle:disabled { opacity: .6; cursor: wait; }

/* ===================== Presence (online / offline) ===================== */
.avatar { position: relative; }
.pres-dot {
    position: absolute; bottom: 1px; right: 1px;
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--surface); box-sizing: content-box;
}
.avatar-lg .pres-dot { width: 15px; height: 15px; bottom: 2px; right: 2px; }
.pres-dot.on { background: #22c55e; box-shadow: 0 0 0 2px color-mix(in srgb, #22c55e 30%, transparent); animation: presPulse 2s ease-in-out infinite; }
.pres-dot.off { background: #9ca3af; }
@keyframes presPulse {
    0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, #22c55e 30%, transparent); }
    50% { box-shadow: 0 0 0 5px color-mix(in srgb, #22c55e 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .pres-dot.on { animation: none; } }
.profile-presence { font-size: .82rem; font-weight: 700; margin: 4px 0 2px; }
.profile-presence.on { color: #16a34a; }
.profile-presence.off { color: var(--muted); }
[data-theme="dark"] .profile-presence.on { color: #4ade80; }

/* ===================== Trust chips / stats ===================== */
.trust-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tchip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .78rem; font-weight: 700; padding: 6px 11px;
    border-radius: 999px; background: var(--surface-2); color: var(--text);
    border: 1px solid var(--border);
}
.tchip.verified { background: var(--green-soft); color: var(--green-2); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.trust-stats {
    display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px;
    font-size: .82rem; font-weight: 700; color: var(--text);
}
.trust-stats span { white-space: nowrap; }

/* Worker-card trust signals row (real data only) */
.card-trust { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 4px; }
.cchip { display: inline-flex; align-items: center; gap: 3px; font-size: .7rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); white-space: nowrap; }
.cchip.verified { background: var(--green-soft); color: var(--green-2); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.cchip.live { background: color-mix(in srgb, #22c55e 14%, transparent); color: #16a34a; border-color: color-mix(in srgb, #22c55e 34%, transparent); }
.cchip.busy { background: color-mix(in srgb, #ef4444 12%, transparent); color: #b91c1c; border-color: color-mix(in srgb, #ef4444 32%, transparent); }
.cchip.top { background: color-mix(in srgb, #f59e0b 14%, transparent); color: #b45309; border-color: color-mix(in srgb, #f59e0b 34%, transparent); }
[data-theme="dark"] .cchip.live { color: #4ade80; }
[data-theme="dark"] .cchip.busy { color: #fca5a5; }
[data-theme="dark"] .cchip.top { color: #fbbf24; }
.cchip.price { background: color-mix(in srgb, #6366f1 12%, transparent); color: #4f46e5; border-color: color-mix(in srgb, #6366f1 32%, transparent); }
[data-theme="dark"] .cchip.price { color: #a5b4fc; }

/* One-line "about" on a card + full about on the profile */
.card-about { font-size: .82rem; color: var(--muted); margin: 6px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-about { font-size: .95rem; color: var(--text); margin: 8px 0 4px; max-width: 54ch; line-height: 1.5; }

/* Latest-review snippet on a card */
.card-review { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin: 8px 0 2px; padding: 7px 11px; font-size: .8rem; min-width: 0; width: 100%; background: var(--green-soft); border: 1px solid color-mix(in srgb, var(--green) 25%, transparent); border-radius: 10px; }
.card-review:empty { display: none; }
.cr-head { display: flex; align-items: center; gap: 7px; }
.cr-stars { color: #f59e0b; letter-spacing: -1px; flex: 0 0 auto; font-size: .82rem; }
.cr-by { font-weight: 700; color: var(--green-2); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.cr-text { color: var(--green-2); font-style: italic; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }

/* Card refinements: bigger avatar, rating on top, highlighted distance, On-Job, view link */
.worker-card-top .avatar { width: 64px; height: 64px; border-radius: 18px; font-size: 1.6rem; }
.worker-main .rating { margin: 3px 0 6px; }
.cchip.near { background: var(--green-soft); color: var(--green-2); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.cchip.onjob { background: color-mix(in srgb, #f59e0b 15%, transparent); color: #b45309; border-color: color-mix(in srgb, #f59e0b 38%, transparent); }
[data-theme="dark"] .cchip.onjob { color: #fbbf24; }
.avail-badge.onjob { background: color-mix(in srgb, #f59e0b 15%, transparent); color: #b45309; }
[data-theme="dark"] .avail-badge.onjob { color: #fbbf24; }
.avail-toggle.onjob { background: color-mix(in srgb, #f59e0b 13%, transparent); color: #b45309; border-color: color-mix(in srgb, #f59e0b 40%, transparent); }
[data-theme="dark"] .avail-toggle.onjob { color: #fbbf24; }
.card-viewlink { display: block; text-align: right; font-size: .8rem; font-weight: 700; color: var(--brand); margin: 8px 2px 2px; text-decoration: none; }
.card-viewlink:hover { text-decoration: underline; }

/* Grouped card hierarchy (primary → secondary) */
.card-status { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; }
.card-dist { margin: 10px 0 4px; font-size: .92rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 4px; }
.card-dist b { color: var(--green-2); }
.card-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px; margin: 10px 0 2px; font-size: .8rem; font-weight: 700; color: var(--text); }
.card-stats i { color: var(--border); font-style: normal; }
.card-phone { color: var(--muted); font-size: .82rem; opacity: .85; display: inline-flex; align-items: center; gap: 5px; }
.card-phone .phone-eye { margin-left: 2px; width: 24px; height: 24px; font-size: .85rem; opacity: .8; }
.card-phone.revealed .phone-num { color: var(--ink); font-weight: 700; }
.card-choice { display: inline-block; font-size: .72rem; font-weight: 800; color: #fff; background: var(--grad); padding: 3px 12px; border-radius: 999px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
.cr-none { color: var(--muted); font-size: .78rem; font-style: italic; }

/* ===================== Animated trophy + stunning "Best of" badge ===================== */
/* Trophy gently moves; every 3s a golden light bursts far + scatters from its top */
.trophy-ico { position: relative; display: inline-block; transform-origin: 50% 85%; animation: trophyBob 2.4s ease-in-out infinite; }
@keyframes trophyBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3px) rotate(4deg); } }
/* central glow that reaches far */
.trophy-ico::before {
    content: ""; position: absolute; top: -6px; left: 50%; width: 22px; height: 22px; margin-left: -11px;
    border-radius: 50%; pointer-events: none; opacity: 0; transform: scale(.15);
    background: radial-gradient(circle, #fffbe6 0%, #ffe066 34%, rgba(255,205,0,0) 72%);
    animation: trophyEmit 3s ease-in-out infinite;
}
@keyframes trophyEmit {
    0%, 60%, 100% { opacity: 0; transform: scale(.15); }
    68% { opacity: 1; transform: scale(2.2); }
    84% { opacity: .5; transform: scale(4); }
    94% { opacity: 0; transform: scale(4.8); }
}
/* scattered golden sparkles flying outward */
.trophy-ico::after {
    content: ""; position: absolute; top: -2px; left: 50%; width: 3px; height: 3px; margin-left: -1.5px;
    border-radius: 50%; background: #ffdf4d; pointer-events: none; opacity: 0; transform: scale(.2);
    box-shadow: -14px -8px 0 #ffd700, 14px -8px 0 #ffd700, -22px 0 0 #ffe680, 22px 0 0 #ffe680,
        0 -20px 0 #fff2b3, -9px -16px 0 #ffcf40, 9px -16px 0 #ffcf40, -18px -12px 0 #ffe680, 18px -12px 0 #ffe680;
    animation: trophySparkle 3s ease-out infinite;
}
@keyframes trophySparkle {
    0%, 60% { opacity: 0; transform: scale(.2); }
    70% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(2.7); }
}
/* section-heading icon boxes on the dashboard */
.sec-head { display: flex; align-items: center; gap: 10px; }

/* analytics date-range picker */
.range-picker { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 12px; }
.range-btn { font-family: inherit; font-size: .8rem; font-weight: 700; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.range-btn.is-active { background: var(--grad); color: #fff; border-color: transparent; }
.range-btn:hover:not(.is-active) { border-color: var(--brand); color: var(--brand); }
.range-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.range-custom .text-input { width: auto; padding: 7px 10px; }

/* client-portal summary cards as clean icon-box columns */
.cd-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cd-stat-ico.ico-box { margin: 0; }

/* location picker (map + GPS) */
.loc-map { position: relative; z-index: 0; height: 210px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); margin: 8px 0; background: var(--surface-2); }
.loc-map .leaflet-container { height: 100%; width: 100%; font: inherit; background: var(--surface-2); }
.loc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.loc-status { font-size: .8rem; }
.lead-dist { color: var(--green-2); font-weight: 700; }
.loc-prompt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: color-mix(in srgb, #f59e0b 12%, var(--surface)); border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent); color: var(--text); padding: 12px 16px; border-radius: var(--r); margin-bottom: 18px; font-size: .92rem; font-weight: 600; }
/* tap a worker/profile DP to view it full-size */
.avatar img { cursor: zoom-in; }
.dp-edit .avatar img { cursor: pointer; }

/* Premium gold badge with a light sweep */
.count-badge.gold {
    position: relative; overflow: hidden; color: #7a4e05; font-weight: 800; letter-spacing: .2px;
    flex: none; white-space: nowrap;
    background: linear-gradient(120deg, #fff1c2 0%, #ffd75e 42%, #f4b02f 100%);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 5px 16px -5px rgba(240, 175, 40, .65), inset 0 1px 2px rgba(255, 255, 255, .75);
}
/* Nastaliq ink is wider than the computed advance width, so overflow:hidden clipped the Urdu.
   Give the Urdu badge a min-width that comfortably exceeds the text ink so nothing clips. */
[lang="ur"] .count-badge.gold { min-width: 15rem; text-align: center; }
.count-badge.gold::after {
    content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent);
    transform: skewX(-20deg); animation: goldSweep 3.5s ease-in-out infinite;
}
@keyframes goldSweep { 0%, 50% { left: -60%; } 72%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
    .trophy-ico, .trophy-ico::before, .trophy-ico::after, .count-badge.gold::after { animation: none !important; }
    .trophy-ico::before, .trophy-ico::after { display: none; }
}

/* Equal-height cards + buttons pinned to the bottom */
.worker-grid { align-items: stretch; }
.worker-card { display: flex; flex-direction: column; height: 100%; }
.worker-card .card-actions { margin-top: auto; }
.card-review { margin: 8px 0 2px; }
.card-viewlink { margin: 6px 2px 2px; }

/* One-line headline: distance • status • verified (semantic colours) */
.card-headline { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; margin: 9px 0 2px; font-size: .8rem; font-weight: 700; }
.hl-sep { color: var(--border); font-style: normal; }
.hl-dist { color: var(--text); }
.hl-dist b { color: var(--green-2); }
.hl-live { color: #16a34a; }
.hl-onjob { color: #b45309; }
.hl-verified { color: var(--green-2); }
.hl-top { color: #b45309; }
.hl-muted { color: var(--muted); }
[data-theme="dark"] .hl-live { color: #4ade80; }
[data-theme="dark"] .hl-onjob, [data-theme="dark"] .hl-top { color: #fbbf24; }

/* Top-align the avatar with the name/skill/rating block (so the name never floats above the photo) */
.worker-card-top { align-items: flex-start; }
.worker-main .worker-name { font-size: 1.12rem; font-weight: 700; line-height: 1.2; margin: 0; }

/* Semantic skill chip (blue/cyan) on cards */
.worker-main .skill-badge { font-size: .8rem; background: color-mix(in srgb, #3b82f6 12%, transparent); color: #2563eb; border: 1px solid color-mix(in srgb, #3b82f6 26%, transparent); }
[data-theme="dark"] .worker-main .skill-badge { color: #93c5fd; }

/* CTA hierarchy: WhatsApp primary (filled green), Call secondary (outline) */
.card-actions .btn-call { background: var(--surface); color: var(--text); border: 1.5px solid var(--border); box-shadow: none; }
.card-actions .btn-call:hover { border-color: var(--green); color: var(--green-2); background: color-mix(in srgb, var(--green) 8%, transparent); }

/* Specialisation tags (card + profile) */
.card-spec { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 2px; }
.spec-tag { display: inline-block; font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 8px; background: color-mix(in srgb, var(--brand) 9%, transparent); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.spec-more { font-size: .72rem; font-weight: 700; color: var(--muted); align-self: center; }
.p-spec { margin-top: 16px; }
.p-spec-head { font-size: 1rem; margin: 0 0 8px; }
.p-spec-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.p-spec-tags .spec-tag { font-size: .8rem; padding: 4px 11px; }

/* Medals for the top 3 ranks */
.rank-badge.medal { background: none; box-shadow: none; padding: 0; font-size: 1.5rem; line-height: 1; }

/* Premium hover (desktop pointers only) */
@media (hover: hover) and (pointer: fine) {
    .worker-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
    .worker-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -12px rgba(0,0,0,.28); border-color: color-mix(in srgb, var(--green) 55%, transparent); }
}

/* ===== Reference-design card sections (skill subtitle, location line) ===== */
.card-skill { font-size: .88rem; font-weight: 700; color: #2563eb; margin-top: 2px; }
[data-theme="dark"] .card-skill { color: #93c5fd; }
.worker-main .rating { margin-top: 5px; }
.card-status { margin: 10px 0 2px; }
.card-loc { margin: 9px 0 2px; font-size: .84rem; color: var(--muted); }
.card-loc b { color: var(--text); font-weight: 700; }
.loc-sep { color: var(--border); font-style: normal; margin: 0 2px; }
.card-phone { margin: 8px 0 0; }

/* ===================== Uniform brand icon boxes (decorative icons) ===================== */
/* Same brand gradient as the Log-in button, white SVG inside, gently animated. */
.ico-box {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--grad); color: #fff; border-radius: 12px; flex: none;
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--brand) 55%, transparent), inset 0 2px 4px rgba(255,255,255,.22);
    transition: transform .2s ease, box-shadow .2s ease;
}
.ico-box .icon { width: 55%; height: 55%; }
.ico-box.lg { width: 58px; height: 58px; border-radius: 18px; }
.ico-box.sm { width: 38px; height: 38px; border-radius: 11px; }
.ico-box.xs { width: 24px; height: 24px; border-radius: 7px; }
.ico-box.xs .icon { width: 58%; height: 58%; }
.metric-ico.ico-box { margin-bottom: 2px; }
.cstat { display: inline-flex; align-items: center; gap: 5px; }
/* the box gently bobs, the SVG inside twirls/pulses — clearly "alive" */
.ico-box, .flow-num { animation: icoBob 2.8s ease-in-out infinite; }
.ico-box .icon { animation: icoTwirl 4s ease-in-out infinite; transform-origin: center; }
@keyframes icoBob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.05); } }
@keyframes icoTwirl { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.12) rotate(5deg); } }
/* staggered wave across grids so they don't move in lock-step */
.metric:nth-child(2) .ico-box, .why-card:nth-child(2) .ico-box, .cstat:nth-child(2) .ico-box, .hero-trust-item:nth-child(2) .ico-box, .stat-cell:nth-child(2) .ico-box { animation-delay: .3s; }
.metric:nth-child(3) .ico-box, .why-card:nth-child(3) .ico-box, .cstat:nth-child(3) .ico-box, .hero-trust-item:nth-child(3) .ico-box, .stat-cell:nth-child(3) .ico-box { animation-delay: .6s; }
.metric:nth-child(4) .ico-box, .cstat:nth-child(4) .ico-box, .hero-trust-item:nth-child(4) .ico-box, .stat-cell:nth-child(4) .ico-box { animation-delay: .9s; }
.metric:nth-child(5) .ico-box, .cstat:nth-child(5) .ico-box { animation-delay: 1.2s; }
.flow-step:nth-child(3) .flow-num { animation-delay: .4s; }
.flow-step:nth-child(5) .flow-num { animation-delay: .8s; }
/* pause the bob on hover so the pop reads cleanly */
.why-card:hover .ico-box, .flow-step:hover .flow-num,
.hero-trust-item:hover .ico-box, .stat-cell:hover .ico-box,
.metric:hover .ico-box, .cstat:hover .ico-box { animation-play-state: paused; transform: scale(1.15); }
@media (prefers-reduced-motion: reduce) { .ico-box, .ico-box .icon, .flow-num { animation: none !important; } }

/* ===================== Hero CTA buttons ===================== */
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 22px; }
.hero-actions .btn-lg { flex: 0 0 auto; }
@media (max-width: 560px) {
    .hero-actions { gap: 8px; }
    .hero-actions .btn-lg { flex: 1 1 100%; width: 100%; }
}

/* ===================== Skeleton loaders (shimmer) ===================== */
.sk {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%);
    background-size: 400% 100%; animation: skShimmer 1.4s ease infinite; border-radius: 8px;
}
@keyframes skShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.sk-avatar { width: 54px; height: 54px; border-radius: 50%; flex: 0 0 auto; }
.sk-line { height: 12px; margin: 7px 0; }
.sk-btn { height: 40px; flex: 1; border-radius: 999px; }
.sk-card { pointer-events: none; }
.sk-card .worker-card-top { display: flex; gap: 12px; align-items: center; }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* ===================== Dismiss (×) button on dashboard cards ===================== */
.card-x {
    position: absolute; top: 7px; right: 9px;
    width: 26px; height: 26px; border: none; background: transparent;
    color: var(--muted); font-size: 1.35rem; line-height: 1; cursor: pointer;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent; transition: background .12s ease, color .12s ease;
}
.card-x:hover { background: color-mix(in srgb, var(--muted) 20%, transparent); color: var(--text); }
/* Dashboard banner cards auto-fade after ~5s (notifications stay in the 🔔 bell). */
.dash-fade-out { opacity: 0; transform: translateY(-6px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
#d-welcome, #cd-welcome { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ---- Tabbed Job Requests: status filter pills + counts + pagination ---- */
.job-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }
.job-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--muted); font-weight: 600; font-size: .9rem;
    cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.job-tab:hover { border-color: var(--green); color: var(--text); }
.job-tab.is-active { background: var(--green); border-color: var(--green); color: #fff; }
.job-tab-count {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 800; line-height: 1;
    background: var(--surface-2); color: var(--muted);
}
.job-tab.is-active .job-tab-count { background: rgba(255, 255, 255, .25); color: #fff; }
.job-more { display: flex; justify-content: center; margin-top: 14px; }
.job-more-btn { min-width: 210px; }
.job-empty { margin: 6px 0; }
.job-card .lead-detail {   /* compact card: clamp long descriptions to 2 lines */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; margin: 6px 0 10px;
}
.lead-acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
@media (max-width: 560px) {   /* mobile: wrap ALL status tabs into a tidy grid — no horizontal swipe */
    .job-tabs { gap: 7px; margin: 4px 0 16px; }
    .job-tab {
        flex: 1 1 calc(33.333% - 5px); min-width: 0; justify-content: center;
        padding: 9px 6px; font-size: .8rem; gap: 5px;
    }
    .job-tab-label { overflow: hidden; text-overflow: ellipsis; }
    .job-tab-count { min-width: 18px; height: 18px; }
    .job-more-btn { width: 100%; }
}

/* ===================== Performance chart (30-day SVG) ===================== */
.perf-wrap { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.perf-title { font-weight: 700; font-size: .98rem; margin: 0 0 10px; }
.perf-svg { width: 100%; height: auto; display: block; }
.perf-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.perf-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; font-size: .82rem; font-weight: 700; }
.perf-leg { display: inline-flex; align-items: center; gap: 5px; }
.perf-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.perf-axis { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); margin-top: 2px; }

/* ===================== Portfolio (work photos) ===================== */
.pf-section { margin: 0 0 18px; }
.pf-head { font-size: 1.1rem; margin: 0 0 12px; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.pf-item { position: relative; padding: 0; border: none; background: var(--surface-2); border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 1; cursor: pointer; }
.pf-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-del { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pf-del:hover { background: #e11d48; }

/* Lightbox for a full-size portfolio photo */
.pf-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out; }
.pf-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; }
.pf-lb-x { position: fixed; top: 14px; right: 18px; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.15); color: #fff; font-size: 1.6rem; cursor: pointer; }

/* ============================================================
   BILINGUAL (English + اردو) — language toggle, Urdu font, RTL
   ============================================================ */

/* --- Language toggle (segmented control, mirrors the theme toggle) --- */
.lang-toggle {
    display: inline-flex;
    align-items: stretch;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
    flex: 0 0 auto;
}
.lang-toggle .lang-opt {
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 0;
    padding: 0 9px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .16s ease, color .16s ease;
}
.lang-toggle .lang-opt[data-lang="ur"] {
    font-family: "Jameel Noori Nastaleeq", "Noto Nastaliq Urdu", serif;
    font-size: .95rem;
    padding-bottom: 3px;
}
.lang-toggle .lang-opt.is-active { background: var(--brand); color: #fff; }
.lang-toggle .lang-opt:not(.is-active):hover { color: var(--ink); }
@media (max-width: 420px) {
    .lang-toggle { height: 34px; }
    .lang-toggle .lang-opt { padding: 0 8px; font-size: .74rem; }
    .lang-toggle .lang-opt[data-lang="ur"] { font-size: .84rem; }
}

/* --- Urdu typography: Jameel Noori Nastaleeq (nastaliq) ---
   Priority: viewer's locally-installed Jameel Noori -> self-hosted copy (drop a
   .woff2 at /static/fonts/ and uncomment the url() below) -> Google's Noto
   Nastaliq Urdu (same calligraphic nastaliq style, loaded lazily by i18n.js). */
@font-face {
    font-family: "Jameel Noori Nastaleeq";
    src: local("Jameel Noori Nastaleeq"), local("JameelNooriNastaleeq"),
         local("Jameel Noori Nastaleeq Regular"), local("Jameel Noori Nastaleeq Kasheeda");
    /* , url("/static/fonts/jameel-noori-nastaleeq.woff2") format("woff2"); */
    font-display: swap;
}
[lang="ur"] {
    --kw-ur: "Jameel Noori Nastaleeq", "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif;
}
[lang="ur"] body,
[lang="ur"] button, [lang="ur"] input, [lang="ur"] select, [lang="ur"] textarea,
[lang="ur"] .btn, [lang="ur"] .nav-link, [lang="ur"] .nav-cta,
[lang="ur"] h1, [lang="ur"] h2, [lang="ur"] h3, [lang="ur"] h4,
[lang="ur"] .hero-title, [lang="ur"] .section-title, [lang="ur"] .brand-name,
[lang="ur"] .sec-head h2, [lang="ur"] .vp-name {
    font-family: var(--kw-ur);
}
/* nastaliq sits low & tall — give it breathing room so glyphs aren't clipped */
[lang="ur"] body { line-height: 2.1; }
[lang="ur"] h1, [lang="ur"] h2, [lang="ur"] h3, [lang="ur"] .hero-title, [lang="ur"] .section-title { line-height: 1.75; }
[lang="ur"] .btn, [lang="ur"] .nav-cta { padding-top: .62em; padding-bottom: .62em; line-height: 1.4; }
[lang="ur"] .nav-link { line-height: 1.7; }
[lang="ur"] .cchip, [lang="ur"] .status, [lang="ur"] .skill-badge, [lang="ur"] .tchip, [lang="ur"] .pop-chip {
    line-height: 1.5; padding-top: 3px; padding-bottom: 5px;
}
/* keep Latin numerals / prices / phones / emails reading left-to-right inside RTL */
[dir="rtl"] .ltr, [dir="rtl"] .lead-phone, [dir="rtl"] .vp-phone,
[dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="mailto:"], [dir="rtl"] .price, [dir="rtl"] time {
    direction: ltr;
    unicode-bidi: isolate;
}

/* --- RTL layout --- */
[dir="rtl"] { text-align: right; }
/* Mirror the brand↔nav gap to the correct side in RTL (physical padding/margin land on the
   wrong side when the header flips), with extra room so nastaliq glyphs never touch the logo. */
[dir="rtl"] .header-inner .brand { margin-right: 0; margin-left: auto; padding-right: 0; padding-left: 18px; }
[dir="rtl"] .header-inner .primary-nav { margin-left: 0; margin-right: 16px; }
[dir="rtl"] .field-label,
[dir="rtl"] .hire-intro, [dir="rtl"] .review-box, [dir="rtl"] .form-card { text-align: right; }
[dir="rtl"] .text-input, [dir="rtl"] textarea.text-input, [dir="rtl"] select { text-align: right; }

/* mobile nav drawer slides from the LEFT in RTL (mirror of the LTR right-drawer) */
@media (max-width: 1120px) {
    [dir="rtl"] .primary-nav {
        right: auto; left: 0;
        border-left: 0; border-right: 1px solid var(--border);
        transform: translateX(-105%);
    }
    [dir="rtl"] body.nav-open .primary-nav { transform: translateX(0); }
}

/* absolutely-positioned bits that hug a physical edge → flip for RTL */
[dir="rtl"] .pf-lb-x,
[dir="rtl"] .kyc-modal-x,
[dir="rtl"] .lb-close { right: auto; left: 18px; }
[dir="rtl"] .nav-link.is-active::after { left: auto; right: 0; }
/* Edit-profile / My-profile / client-profile modals are LTR forms (inline text-align:left).
   In RTL, align them to the right and pad the heading clear of the (now left-side) × close. */
[dir="rtl"] .kyc-modal-card[style*="text-align:left"],
[dir="rtl"] .kyc-modal-card[style*="text-align: left"] { text-align: right; }
[dir="rtl"] .kyc-modal-card[style*="text-align:left"] > h2,
[dir="rtl"] .kyc-modal-card[style*="text-align: left"] > h2 { text-align: right !important; padding-left: 42px; }

/* directional arrows: mirror the glyph so "→" points the reading way in RTL */
[dir="rtl"] .section-link, [dir="rtl"] .footer-col a { unicode-bidi: plaintext; }
/* Footer Contact column: its rows are LTR content (phone/email), so plaintext left-aligned
   them while every other Urdu column mirrored. Force RTL alignment with the icon on the right. */
[dir="rtl"] .footer-contact a, [dir="rtl"] .footer-contact .footer-address {
    direction: rtl; unicode-bidi: isolate; text-align: right; width: auto; align-self: stretch;
}
/* CTA band ("Need help right now?") — two buttons overflowed on narrow phones (worse with the
   longer Urdu). Stack them full-width below the phone breakpoint. */
@media (max-width: 560px) {
    .cta-band-actions { flex-direction: column; }
    .cta-band-actions .btn { width: 100%; }
}

/* --- Noto Nastaliq has VERY tall metrics: stacked/tight components collide
   unless each line gets ~1.9 line-height (1.2–1.7 is not enough at small sizes) --- */
[lang="ur"] .stat-cell-txt, [lang="ur"] .metric, [lang="ur"] .hc-txt,
[lang="ur"] .cwel-name, [lang="ur"] .strength-items, [lang="ur"] .sitem,
[lang="ur"] .cstat, [lang="ur"] .card-stats, [lang="ur"] .card-skill,
[lang="ur"] .vp-skill, [lang="ur"] .lead-meta, [lang="ur"] .suggest-item { line-height: 1.95; }
/* the two stacked lines inside the floating hero trust cards + stat cells.
   Extra generous so even a taller nastaliq (e.g. locally-installed Jameel Noori)
   whose ink overflows the line box never collides. */
[lang="ur"] .hc-txt b, [lang="ur"] .stat-cell .stat-num, [lang="ur"] .metric-num { line-height: 2.05; }
[lang="ur"] .hc-txt i, [lang="ur"] .metric-label, [lang="ur"] .stat-label,
[lang="ur"] .stat-cell .stat-label, [lang="ur"] .demand-name, [lang="ur"] .verif-tag { line-height: 1.95; }
[lang="ur"] .hc-txt { row-gap: 6px; }
[lang="ur"] .hero-card { padding-top: 12px; padding-bottom: 12px; }
[lang="ur"] .stat-cell-txt { row-gap: 5px; }
/* nastaliq dislikes the tight negative tracking used on Latin display type */
[lang="ur"] .hero-title, [lang="ur"] .section-title, [lang="ur"] .stat-num,
[lang="ur"] .metric-num, [lang="ur"] .stat-cell .stat-num, [lang="ur"] h1, [lang="ur"] h2,
[lang="ur"] .brand-name, [lang="ur"] .vp-name { letter-spacing: 0; }
/* give pills/badges a touch more height so descenders aren't clipped */
[lang="ur"] .cchip, [lang="ur"] .status, [lang="ur"] .skill-badge,
[lang="ur"] .tchip, [lang="ur"] .pop-chip, [lang="ur"] .spec-tag,
[lang="ur"] .cr-text, [lang="ur"] .cchip.live, [lang="ur"] .cchip.onjob { line-height: 1.5; padding-top: 4px; padding-bottom: 6px; }
/* card review snippet: nastaliq italic can clip — normalise */
[lang="ur"] .cr-text, [lang="ur"] .review-quote { font-style: normal; }
/* range picker chips + tab rows: keep them from cramping */
[lang="ur"] .range-chip, [lang="ur"] .auth-tab, [lang="ur"] .seg-btn { line-height: 1.5; padding-top: 6px; padding-bottom: 6px; }

/* ===== Local Businesses — search filter chips ===== */
.biz-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.biz-filter{display:inline-flex;align-items:center;gap:4px;font-size:.86rem;font-weight:600;padding:7px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;transition:all .15s ease}
.biz-filter:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--border));background:var(--surface-2)}
.biz-filter.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.biz-empty{grid-column:1/-1;text-align:center;padding:28px 12px}

/* ===== Local Businesses — marketplace cards (reuse .worker-card design) ===== */
.biz-card .biz-logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.biz-card .card-about{-webkit-line-clamp:2;line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;margin-top:8px}
/* WhatsApp = primary (wider, filled green); Call = secondary (outline) */
.card-actions.biz-actions{display:flex;gap:8px;margin-top:12px}
.biz-actions .biz-wa{flex:1.7 1 0;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.biz-actions .biz-call{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.biz-actions .biz-call .icon{width:16px;height:16px}
/* subtle claim / report footer on cards */
.biz-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.biz-foot-claim{font-size:.82rem;font-weight:600;color:var(--muted);text-decoration:none}
.biz-foot-claim:hover{color:var(--brand)}
.biz-foot-report{font-size:.95rem;text-decoration:none;opacity:.65;line-height:1}
.biz-foot-report:hover{opacity:1}

/* ===== Public business profile (/business) ===== */
.biz-detail-card{max-width:640px;margin:0 auto;position:relative}
.biz-detail-head{display:flex;gap:14px;align-items:center;padding-right:38px}
[dir="rtl"] .biz-detail-head{padding-right:0;padding-left:38px}
.biz-detail-head .avatar.avatar-lg{flex:0 0 auto}
.biz-detail-head .biz-logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.biz-detail-head-main{min-width:0;flex:1}
.biz-detail-head-main .profile-name{margin:0 0 2px}
.biz-detail-head-main .card-skill{margin:0 0 4px}
.biz-detail-card .card-status{margin-top:12px}
.biz-detail-card .card-loc{margin-top:10px}
.biz-detail-card .card-spec{margin-top:10px}
.biz-detail-card .profile-about{margin-top:14px}
.biz-meta-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.biz-meta-pill{display:inline-flex;align-items:center;gap:4px;background:var(--surface-2);color:var(--muted);border-radius:999px;padding:4px 10px;font-size:.82rem;font-weight:600}
/* WhatsApp-primary CTA row */
.biz-cta-row{display:flex;gap:10px;margin-top:18px}
.biz-cta-row .biz-cta-wa{flex:1.7 1 0;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:1rem}
.biz-cta-row .biz-cta-call{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.biz-socials{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:.9rem}
.biz-socials a{color:var(--muted);text-decoration:none;font-weight:600}
.biz-socials a:hover{color:var(--brand)}
/* redesigned "Own this business?" claim box */
.biz-claim-box{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px;padding:18px;border:1px solid color-mix(in srgb,var(--brand) 30%,var(--border));border-radius:16px;background:color-mix(in srgb,var(--brand) 6%,transparent)}
@supports not (background:color-mix(in srgb,red,blue)){.biz-claim-box{background:var(--surface-2);border-color:var(--brand)}}
.biz-claim-txt{flex:1;min-width:180px}
.biz-claim-txt h3{margin:0 0 3px;font-size:1.05rem}
.biz-claim-txt p{margin:0;font-size:.86rem;color:var(--muted)}
.biz-claim-cta{white-space:nowrap}
.biz-source{margin-top:16px;font-size:.78rem;color:var(--muted)}
.biz-source a{color:var(--muted)}
/* ⋮ overflow menu (Report / remove) */
.biz-menu-wrap{position:absolute;top:14px;right:14px;z-index:5}
[dir="rtl"] .biz-menu-wrap{right:auto;left:14px}
.biz-menu-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.biz-menu-btn:hover{background:var(--surface-2);color:var(--text)}
.biz-menu{position:absolute;top:40px;right:0;min-width:170px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;overflow:hidden}
[dir="rtl"] .biz-menu{right:auto;left:0}
.biz-menu a{display:block;padding:9px 12px;border-radius:8px;font-size:.9rem;color:var(--text);text-decoration:none}
.biz-menu a:hover{background:var(--surface-2)}
@media (max-width:520px){.biz-cta-row,.card-actions.biz-actions{flex-wrap:wrap}.biz-claim-cta{width:100%}}

/* ===== Business Imports admin — compact, branded bulk management ===== */
.biz-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.biz-search-form{display:flex;gap:6px;flex:1;min-width:220px}
/* ---- advanced branded filter bar ---- */
.biz-filters-row{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:0 0 10px;padding:8px 10px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
.biz-filters-label{font-size:.74rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--brand);margin-inline-end:2px}
.biz-field{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:0 9px;height:36px;transition:border-color .14s,box-shadow .14s,background .14s}
.biz-field:focus-within{border-color:var(--brand);box-shadow:none}
.biz-field.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--surface))}
@supports not (background:color-mix(in srgb,red,blue)){.biz-field.on{background:var(--green-soft)}}
.biz-field-ico{font-size:.9rem;opacity:.75;line-height:1;flex:0 0 auto}
.biz-field input,.biz-field select{border:0;background:transparent;outline:none;font-size:.85rem;color:var(--text);height:100%;padding:0;min-width:118px}
.biz-field select{min-width:130px;cursor:pointer}
.biz-field.select{padding-inline-end:5px}
.biz-filters-clear{margin-inline-start:auto;white-space:nowrap}
/* ---- bulk action bar ---- */
.biz-bulkbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 10px;padding:8px 12px;border:1.5px solid color-mix(in srgb,var(--brand) 32%,var(--border));border-radius:11px;background:color-mix(in srgb,var(--brand) 8%,transparent)}
@supports not (background:color-mix(in srgb,red,blue)){.biz-bulkbar{background:var(--green-soft)}}
.biz-bulk-n{font-size:.88rem}
.biz-bulk-actions{display:flex;gap:6px;flex-wrap:wrap;margin-inline-start:auto}
.biz-bulk-prog{font-size:.82rem;color:var(--muted)}
.biz-bulk-prog:empty{display:none}
/* ---- compact table ---- */
.biz-table th,.biz-table td{padding:8px 10px;vertical-align:middle}
.biz-table th{font-size:.72rem;letter-spacing:.03em}
.biz-table th.biz-ck,.biz-table td.biz-ck{width:32px;text-align:center;padding-inline:6px}
.biz-table td.biz-ck input,.biz-table th.biz-ck input{width:16px;height:16px;cursor:pointer;accent-color:var(--brand)}
.biz-table tr.biz-row-sel td{background:color-mix(in srgb,var(--brand) 8%,transparent)}
@supports not (background:color-mix(in srgb,red,blue)){.biz-table tr.biz-row-sel td{background:var(--green-soft)}}
/* ---- compact, non-overlapping row actions ---- */
.biz-acts{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.biz-acts .btn-mini{padding:5px 9px;font-size:.76rem;line-height:1.1;white-space:nowrap}
.biz-act-del{opacity:.7}
.biz-act-del:hover{opacity:1;color:#e11d48;border-color:#e11d48}
.biz-pager{margin-top:12px;display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap}
.biz-count{align-self:center;font-size:.85rem}
.btn-danger{background:#e11d48;color:#fff;border-color:#e11d48}
.btn-danger:hover{background:#be123c;border-color:#be123c}
@media (max-width:640px){.biz-field input,.biz-field select{min-width:96px}.biz-acts .btn-mini{padding:5px 8px}}

/* ===== Claimed business = premium verified card ===== */
.biz-card.verified{border-color:color-mix(in srgb,var(--green) 45%,var(--border))}
.biz-card.verified::after{content:"✔";position:absolute;top:10px;inline-size:22px;block-size:22px;inset-inline-end:10px;display:flex;align-items:center;justify-content:center;background:var(--green);color:#fff;border-radius:50%;font-size:.7rem;font-weight:900}
.biz-owner{margin:8px 0 0;font-size:.86rem;color:var(--muted);font-weight:600}
.biz-hire,.biz-cta-hire{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.biz-actions .biz-hire{flex:1.7 1 0}
.biz-cta-row .biz-cta-hire{flex:1.7 1 0;font-size:1rem}
.biz-verified-note{margin-top:20px;padding:12px 16px;border-radius:12px;background:var(--green-soft);color:var(--green-2);font-weight:700;text-align:center}

/* ===== Compact pass — worker (#dash) & client (#cdash) dashboards =====
   Scoped to the two dashboard wrappers so the public hire card (worker.html),
   admin and other pages stay untouched. Every selector is verified against the
   rendered DOM (the earlier pass targeted .dash-wrap/.stat-grid/#cd-main, which
   never existed). !important is used only where it must beat an inline style. */

/* page wrappers */
#dash.verify-wrap{padding:10px 14px 26px}
#cdash.cd-wrap{padding-top:10px;padding-bottom:26px}

/* profile header card — smaller avatar + name */
#dash .verify-top{margin-bottom:10px}
#dash .verify-profile,#cdash .verify-profile{gap:11px}
#cdash #cd-head{margin-bottom:9px!important}
#dash .avatar-lg,#cdash .avatar-lg{width:54px;height:54px;font-size:1.35rem;border-radius:14px}
#dash .verify-name,#cdash .verify-name{font-size:1.2rem}

/* section headings — shrink the large h2s (biggest visible win) */
#dash .sec-head,#cdash .sec-head{font-size:1.12rem}
#dash .mywork-subhead,#cdash .mywork-subhead{margin:11px 0 6px!important}

/* cards: tighter inner padding + tighter gap between cards */
#dash .metrics-card{padding:10px 12px;margin-top:10px}
#dash .hire-card,#cdash .hire-card{padding:11px 12px!important;margin-top:10px!important}
#dash .range-picker{margin:7px 0 8px}
#dash .range-btn{padding:5px 11px;font-size:.76rem}
#dash .metrics-grid{gap:6px}
#dash .metrics-head{margin-bottom:7px}
#dash .metric{padding:8px 5px}
#dash .metric-num{font-size:clamp(1.2rem,4.2vw,1.5rem)}
#dash .metric-label{font-size:.72rem}
/* Activity Trend chart — shorter sparkline + tighter wrapper (was ~155px tall) */
#dash .perf-wrap{margin-top:10px;padding-top:10px}
#dash .perf-title{font-size:.9rem;margin:0 0 5px}
#dash .perf-legend{margin-bottom:5px;font-size:.78rem;gap:5px 14px}
#dash .perf-svg{max-height:120px}
#dash .perf-axis{margin-top:1px}

/* forms */
#dash .hire-row,#cdash .hire-row{gap:10px;margin-top:4px}
#dash .hire-form .btn,#cdash .hire-form .btn{margin-top:10px}
#dash .strength-row,#cdash .strength-row{margin-top:8px!important}

/* job lists / tabs / lead cards / empty states */
#dash .job-tabs,#cdash .job-tabs{margin:2px 0 7px}
#dash .lead-list,#cdash .lead-list{gap:7px}
#dash .job-card,#cdash .job-card{padding:10px 12px}
#dash .empty-state.small,#cdash .empty-state.small{padding:13px 14px}

/* client-only: summary strip, quick actions, activity */
#cdash .cd-summary{gap:7px;margin:3px 0 11px}
#cdash .cd-quick{gap:7px}
#cdash .cd-activity{margin-top:3px}

/* ---- multi-file import drop zone ---- */
.biz-import-drop{display:flex;align-items:center;gap:12px;padding:16px;border:2px dashed color-mix(in srgb,var(--brand) 40%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--brand) 5%,transparent);cursor:pointer;transition:border-color .15s,background .15s}
@supports not (background:color-mix(in srgb,red,blue)){.biz-import-drop{border-color:var(--brand);background:var(--surface-2)}}
.biz-import-drop:hover{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,transparent)}
.biz-import-drop-ico{font-size:1.7rem;flex:0 0 auto}

/* ---- public Local Businesses: smart search + 9/page pager (uniform + brand) ---- */
.biz-pub-search{display:flex;align-items:center;gap:8px;max-width:520px;margin:0 0 12px;padding:0 12px;height:44px;background:var(--surface);border:1px solid var(--border);border-radius:12px;transition:border-color .15s,box-shadow .15s}
.biz-pub-search:focus-within{border-color:var(--brand);box-shadow:none}
.biz-pub-search-ico{font-size:1rem;opacity:.7;flex:0 0 auto}
.biz-pub-search-input{flex:1;border:0;background:transparent;outline:none;font-size:.95rem;color:var(--text);height:100%}
.biz-pub-search-input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.biz-pub-search-clear{flex:0 0 auto;border:0;background:var(--surface-2);color:var(--muted);width:24px;height:24px;border-radius:50%;font-size:1.05rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.biz-pub-search-clear:hover{background:var(--brand);color:#fff}
.biz-pub-pager{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin:18px 0 4px}
.biz-pub-pager .biz-count{align-self:center}
/* make the active filter chip unmistakably brand green (uniform accent) */
.biz-filter.on{background:var(--brand)!important;color:#fff!important;border-color:var(--brand)!important}

/* ---- advanced searchable dropdown (combobox) for admin filters ---- */
.biz-combo{position:relative;padding-inline-end:4px}
.biz-combo input{min-width:118px}
.biz-combo-caret{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:.68rem;padding:0 3px;line-height:1;flex:0 0 auto;transition:transform .15s,color .15s}
.biz-combo.open .biz-combo-caret{color:var(--brand);transform:rotate(180deg)}
.biz-combo-menu{position:absolute;top:calc(100% + 5px);inset-inline-start:0;min-width:190px;max-width:300px;max-height:250px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.12);z-index:40;padding:5px}
.biz-combo-opt{padding:8px 11px;border-radius:7px;font-size:.85rem;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.biz-combo-opt:hover,.biz-combo-opt.active{background:var(--brand);color:#fff}

/* FIX: the global :focus-visible{box-shadow:var(--ring)} rule puts a glow ring on the inner
   inputs of our custom fields. Those live inside a container that already shows focus via its
   border, so kill the ring on them (search box + all admin filter inputs/selects). */
.biz-pub-search-input:focus,.biz-pub-search-input:focus-visible,
.biz-f:focus,.biz-f:focus-visible,
.biz-field input:focus,.biz-field input:focus-visible,
.biz-field select:focus,.biz-field select:focus-visible{box-shadow:none;border-radius:0}

/* ---- claim form: "add your links" social section ---- */
.biz-claim-socials{margin-top:14px;padding:12px 12px 10px;border:1px solid color-mix(in srgb,var(--brand) 28%,var(--border));border-radius:12px;background:var(--brand-soft)}
@supports not (background:color-mix(in srgb,red,blue)){.biz-claim-socials{border-color:var(--brand)}}
.biz-claim-socials-head{font-weight:700;font-size:.88rem;margin-bottom:9px;color:var(--brand-2)}
.biz-social-in{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.biz-social-in:last-child{margin-bottom:0}
.bsi-ico{font-size:1.05rem;flex:0 0 22px;text-align:center}
.biz-social-in .text-input{flex:1;margin:0}

/* ---- claim ownership verification (code + proof) ---- */
.biz-claim-verify{margin-top:14px;padding:13px 13px 11px;border:1.5px solid var(--brand);border-radius:12px;background:var(--surface-2)}
.biz-claim-verify-head{font-weight:800;font-size:.92rem;margin-bottom:11px;color:var(--brand-2)}
.bcv-step{display:flex;gap:10px;margin-bottom:12px}
.bcv-step:last-child{margin-bottom:0}
.bcv-num{flex:0 0 22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;font-size:.76rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.bcv-body{flex:1;font-size:.86rem;line-height:1.45}
.bcv-code{display:inline-block;margin:8px 0 6px;padding:6px 16px;font-family:ui-monospace,monospace;font-size:1.15rem;font-weight:800;letter-spacing:2px;color:var(--brand-2);background:var(--brand-soft);border-radius:8px;user-select:all}
@supports not (background:color-mix(in srgb,red,blue)){.bcv-code{background:#e2f2ef}}
.bcv-wa{display:inline-flex;align-items:center;gap:6px;margin-top:2px}
.biz-claim-vcell{margin-top:5px;font-size:.8rem;line-height:1.55;color:var(--text)}

/* ============================================================
   HOME v2 — mobile-first compact pass (kaamwalav2sketch.html)
   Tighter rhythm, LIVE stats strip, category chips, compact
   horizontal provider cards, favourites, available-now pill,
   compact How/Why, app-style bottom nav, sticky search.
   Scoped to the home sections; brand/theme untouched.
   ============================================================ */

/* ---- tighter section rhythm + room for bottom nav (mobile) ---- */
@media (max-width: 640px) {
  main#main { padding-bottom: 74px; }
  .stats-strip-wrap, .browse-section, .top-section, .why-section, .testimonials-section { margin-top: 20px; }
  .how-section { padding: 20px 0; }
}

/* ---- LIVE stats strip ---- */
.stats-strip { position: relative; }
.stats-live { position: absolute; top: -9px; right: 12px; display: inline-flex; align-items: center; gap: 5px; font-size: .6rem; font-weight: 800; letter-spacing: .06em; color: var(--brand-2, var(--brand)); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); border-radius: 999px; padding: 2px 8px; }
@supports not (background: color-mix(in srgb, red, blue)) { .stats-live { border-color: var(--brand); } }
.stats-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: kwPulse 1.8s infinite; }
@keyframes kwPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 70% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
@media (prefers-reduced-motion: reduce) { .stats-live-dot { animation: none; } }
@media (max-width: 640px) {
  .stats-strip { grid-template-columns: none !important; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; scrollbar-width: none; padding: 14px 12px; }
  .stats-strip::-webkit-scrollbar { display: none; }
  .stat-cell { flex: 0 0 auto; min-width: 100px; justify-content: flex-start; }
}

/* ---- Categories → horizontal scroll chips ---- */
@media (max-width: 900px) {
  .skill-grid { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 10px; scrollbar-width: none; padding-bottom: 4px; }
  .skill-grid::-webkit-scrollbar { display: none; }
  .skill-tile { flex: 0 0 auto; width: auto; min-width: 82px; padding: 12px 10px; }
}
.browse-section .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

/* ---- Top providers: horizontal scroll + compact cards (mobile) ---- */
@media (max-width: 720px) {
  #kw-top-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 4px 8px; margin-inline: -4px; }
  #kw-top-grid::-webkit-scrollbar { display: none; }
  #kw-top-grid > .worker-card { flex: 0 0 80%; max-width: 320px; scroll-snap-align: start; }
}
#kw-top-grid .card-viewlink { display: none; }             /* the card top already links to the profile */
#kw-top-grid .card-stats { display: none; }                /* keep the card short */
#kw-top-grid .worker-card-top .avatar { width: 46px; height: 46px; border-radius: 12px; font-size: 1.15rem; }
#kw-top-grid .worker-main .worker-name { font-size: 1rem; }
#kw-top-grid .worker-card { padding: 14px; }
#kw-top-grid .card-spec .spec-tag:nth-child(n+3), #kw-top-grid .card-spec .spec-more { display: none; }  /* max 2 tags */
.kw-top-empty { width: 100%; text-align: center; padding: 16px; }

/* ---- Favourite ♥ ---- */
.worker-card { position: relative; }
.card-fav { position: absolute; top: 10px; right: 10px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color .15s, border-color .15s, transform .1s; }
@supports not (background: color-mix(in srgb, red, blue)) { .card-fav { background: var(--surface); } }
.card-fav:hover { color: #e0245e; border-color: #e0245e; }
.card-fav.on { color: #e0245e; border-color: #e0245e; }
.card-fav:active { transform: scale(.9); }

/* ---- Available-now filter pill ---- */
.avail-filter { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 700; border: 1px solid color-mix(in srgb, #22c55e 45%, var(--border)); background: var(--surface); color: var(--text); border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: background .15s, color .15s; }
@supports not (background: color-mix(in srgb, red, blue)) { .avail-filter { border-color: #22c55e; } }
.avail-filter.on { background: #22c55e; color: #fff; border-color: #22c55e; }

/* ---- How it works: 3-in-a-row + compact (mobile) ---- */
@media (max-width: 640px) {
  .flow.flow-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .flow.flow-3 .flow-connector { display: none; }
  .flow.flow-3 .flow-step { padding: 6px 4px; min-width: 0; }
  .flow.flow-3 .flow-step h3 { overflow-wrap: anywhere; }
  .flow-3 .flow-step h3 { font-size: .9rem; margin: 6px 0 3px; }
  .flow-3 .flow-step p { font-size: .72rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .flow-num { width: 30px; height: 30px; font-size: .9rem; }
}

/* ---- Why → compact chips ---- */
.why-chips { display: grid; grid-template-columns: 1fr; gap: 10px; }
.why-chips .why-card { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; }
.why-chips .ico-box { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; margin: 0; }
.why-chips .ico-box .icon { width: 22px; height: 22px; }
.why-txt { display: flex; flex-direction: column; min-width: 0; }
.why-txt b { font-size: .95rem; }
.why-txt i { font-style: normal; font-size: .8rem; color: var(--muted); }
@media (min-width: 641px) { .why-chips { grid-template-columns: repeat(3, 1fr); } }

/* ---- App-style bottom nav (mobile only) ---- */
.kw-bottomnav { display: none; }
@media (max-width: 640px) {
  .kw-bottomnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: color-mix(in srgb, var(--surface) 92%, transparent); border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; }
  @supports (backdrop-filter: blur(8px)) { .kw-bottomnav { background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(10px); } }
  @supports not (background: color-mix(in srgb, red, blue)) { .kw-bottomnav { background: var(--surface); } }
  .kw-bn-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--muted); font-size: .62rem; font-weight: 700; padding: 4px 0; }
  .kw-bn-ic { font-size: 1.15rem; line-height: 1; }
  .kw-bn-item.is-active { color: var(--brand); }
}

/* ---- Sticky search (slim bar on scroll) ---- */
.hero-search-wrap.kw-stuck { min-height: 62px; }  /* reserve space so content doesn't jump */
.hero-search-wrap.kw-stuck .search-card { position: fixed; top: 0; left: 0; right: 0; z-index: 55; border-radius: 0; margin: 0; padding: 8px 12px; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.hero-search-wrap.kw-stuck .locate-status, .hero-search-wrap.kw-stuck + .hero-popular { display: none; }

/* recent searches chips */
.kw-recent{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 2px 0}
.kw-recent-lb{font-size:.72rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.kw-recent-clear{margin-inline-start:auto;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:.85rem;line-height:1;padding:2px 4px}
.kw-recent-clear:hover{color:var(--brand)}

/* ---- Hero compacting (mobile) — smaller cropped image + tighter badges; 3 buttons unchanged ---- */
@media (max-width: 640px) {
  .hero-eyebrow { font-size: .72rem; padding: 4px 12px; margin-bottom: 12px; }
  .hero-grid .hero-title { margin-bottom: 10px; }
  .hero-grid .hero-subtitle { margin: 0 0 16px; }
  .hero-visual { margin: 14px auto 2px; }
  .hero-stage { width: min(184px, 52vw); }
  .hero-card { display: none; }                  /* clean small image; the same info lives in the stats strip */
  .hero-trust { gap: 8px; margin: 8px 0 12px; }
  .hero-trust-item { padding: 6px 10px; gap: 6px; border-radius: 11px; box-shadow: none; }
  .hero-trust-item .ht-txt i { display: none; }  /* keep just the bold label */
  .hero-trust-item .ht-txt b { font-size: .78rem; }
  .hero-trust-item .ht-ic { font-size: 1rem; }
}

/* ---- /workers listing: consistent compact cards (grid; keeps detail stats) ---- */
#kw-grid .card-viewlink { display: none; }              /* card top already links to the profile */
#kw-grid .worker-card-top .avatar { width: 48px; height: 48px; border-radius: 13px; font-size: 1.2rem; }
#kw-grid .card-spec .spec-tag:nth-child(n+3), #kw-grid .card-spec .spec-more { display: none; }  /* max 2 tags */
.listing-head { flex-wrap: wrap; }

/* ============================================================
   HOME v2 — DITTO of kaamwalav2sketch.html (real brand). Kept by
   request: 3 hero buttons, WhatsApp icon in BRAND colour, theme/
   lang toggles, and the hero animation (as a soft background).
   ============================================================ */

/* hero section — animation kept as a subtle background */
.v2-hero-sec { position: relative; overflow: hidden; padding-top: 12px; padding-bottom: 14px; }
.v2-hero-sec .hero-scene, .v2-hero-sec .hero-fx { position: absolute; inset: 0; z-index: 0; opacity: .45; pointer-events: none; }
.v2-hero-sec > .v2-hero, .v2-hero-sec > .v2-searchcard, .v2-hero-sec > .hero-popular, .v2-hero-sec > .v2-hero-actions { position: relative; z-index: 1; }

/* compact hero */
.v2-hero { display: flex; gap: 12px; align-items: flex-start; text-align: left; }
.v2-hero-copy { flex: 1; min-width: 0; }
.v2-hero-title { font-size: clamp(1.3rem, 5.6vw, 1.7rem); line-height: 1.14; letter-spacing: -.02em; margin: 2px 0 6px; font-weight: 800; }
.v2-hero-title .accent { color: var(--brand-2, var(--brand)); }
.v2-hero-sub { font-size: .84rem; color: var(--muted); margin: 0; max-width: 40ch; }
.v2-hero-face { width: 92px; height: 92px; border-radius: 22px; flex: none; overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); background: var(--brand-soft); }
.v2-hero-face-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }

/* search card inside the hero */
.v2-searchcard { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 10px; box-shadow: 0 6px 20px rgba(16,40,30,.06); margin-top: 12px; }
.v2-searchfield { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: 11px; padding: 11px 12px; position: relative; }
.v2-search-ic { width: 18px; height: 18px; color: var(--muted); flex: none; }
.v2-search-input { flex: 1; border: 0; background: transparent; outline: none; font-size: .9rem; color: var(--text); min-width: 0; }
.v2-srow { display: flex; gap: 8px; margin-top: 9px; }
.v2-srow .v2-ghost { background: var(--surface); border: 1px solid var(--border); color: var(--text); flex: 0 0 42%; }
.v2-srow .v2-primary { background: var(--brand); color: #fff; flex: 1; border: 0; }
.v2-recent { display: flex; gap: 7px; margin-top: 10px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.v2-recent::-webkit-scrollbar { display: none; }
.v2-recent .lbl { font-size: .66rem; color: var(--muted); font-weight: 800; letter-spacing: .04em; flex: none; }
.v2-recent .chip-sm { font-size: .74rem; padding: 4px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-2, var(--brand)); font-weight: 700; white-space: nowrap; text-decoration: none; flex: none; }

/* the 3 buttons kept, stacked below the search */
.v2-hero-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

/* LIVE stats — tight sketch row with dividers, no per-stat icons */
.stats-strip { display: flex !important; align-items: center; gap: 4px; padding: 12px 6px; grid-template-columns: none !important; overflow: visible; }
.stats-strip .stat-cell { flex: 1; flex-direction: column; gap: 1px; text-align: center; justify-content: center; min-width: 0; }
.stats-strip .stat-cell .stat-ic { display: none; }
.stats-strip .stat-cell + .stat-cell::before { content: ""; position: absolute; left: 0; top: 20%; height: 60%; width: 1px; background: var(--border); }
.stats-strip .stat-cell-txt { align-items: center; }
.stats-strip .stat-num { font-size: .96rem; font-weight: 800; }
.stats-strip .stat-label { font-size: .62rem; }

/* categories — sketch .cat chips */
.skill-grid { gap: 9px; }
.skill-tile { width: 64px; min-width: 64px; padding: 11px 6px; gap: 6px; border-radius: 14px; }
.skill-tile-icon { font-size: 1.25rem; }
.skill-tile-name { font-size: .66rem; }

/* Top providers — horizontal scroller of compact pcards */
#kw-top-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 11px; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 6px; align-items: stretch; }
#kw-top-grid::-webkit-scrollbar { display: none; }
.pcard { flex: 0 0 176px; width: 176px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px; position: relative; box-shadow: 0 6px 20px rgba(16,40,30,.06); scroll-snap-align: start; display: flex; flex-direction: column; }
.pcard-link { display: block; text-decoration: none; color: inherit; flex: 1; }
.pfav { position: absolute; top: 9px; right: 9px; z-index: 2; border: 0; background: transparent; font-size: 1.05rem; color: var(--muted); cursor: pointer; line-height: 1; padding: 2px; }
.pfav.on { color: #e0556b; }
/* SVG heart shared by .pfav (cards), .card-fav (list), .pfav-profile, and the header .kw-favbtn.
   Fill follows the .on class so favourite↔unfavourite flips instantly — no ♥/♡ emoji repaint lag. */
.kw-heart { display: block; width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; overflow: visible; }
.pfav .kw-heart, .card-fav .kw-heart { width: 1.15rem; height: 1.15rem; }
.pfav.on .kw-heart, .card-fav.on .kw-heart, .pfav-profile.on .kw-heart { fill: currentColor; }
.kw-favbtn .kw-heart { fill: currentColor; }   /* header "saved" icon is always a filled heart */
.pavail { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: .55rem; font-weight: 800; color: var(--brand-2, var(--brand)); background: var(--brand-soft); padding: 2px 6px; border-radius: 999px; display: inline-flex; align-items: center; gap: 3px; }
.pdot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); animation: kwPulse2 1.6s infinite; }
@keyframes kwPulse2 { 0%,100%{opacity:1} 50%{opacity:.35} }
@media (prefers-reduced-motion: reduce) { .pdot { animation: none; } }
.ptop { display: flex; gap: 9px; align-items: center; margin-top: 8px; }
.pav { width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); display: grid; place-items: center; font-size: 1.1rem; flex: none; overflow: hidden; }
.pav img { width: 100%; height: 100%; object-fit: cover; }
.pmeta { min-width: 0; }
.pname { font-size: .86rem; font-weight: 800; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prate { font-size: .7rem; color: var(--muted); display: flex; align-items: center; gap: 3px; margin-top: 2px; }
.prate .ps { color: #f5a623; }
.pskill { font-size: .74rem; color: var(--brand-2, var(--brand)); font-weight: 700; margin: 9px 0 2px; }
.ploc { font-size: .7rem; color: var(--muted); }
.ptags { display: flex; gap: 5px; margin: 8px 0 10px; flex-wrap: wrap; }
.ptag { font-size: .62rem; padding: 3px 7px; border-radius: 7px; background: var(--surface-2); color: var(--muted); font-weight: 600; }
.pacts { display: flex; gap: 7px; margin-top: auto; }
.pmini { flex: 1; border-radius: 9px; font-size: .72rem; font-weight: 700; padding: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; }
.pmini .icon { width: 14px; height: 14px; }
.pmini.pwa { background: var(--brand); color: #fff; border-color: transparent; flex: 0 0 44px; }   /* WhatsApp icon in BRAND colour (exception) */
.pmini.pwa .wa-icon { width: 18px; height: 18px; }
.pcard.pskel { min-height: 152px; overflow: hidden; }
.pcard.pskel::before { content: ""; position: absolute; inset: 12px; border-radius: 10px; background: linear-gradient(100deg, var(--surface-2) 30%, color-mix(in srgb, var(--surface-2) 55%, var(--surface)) 50%, var(--surface-2) 70%); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* header ♥ favourites button + saved-providers modal */
.kw-favbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; color: var(--muted); font-size: 1.05rem; cursor: pointer; }
.kw-favbtn.has { color: #e0556b; border-color: color-mix(in srgb, #e0556b 40%, var(--border)); }
.kw-fav-count { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--brand); color: #fff; font-size: .6rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.kw-fav-count[hidden] { display: none; }
.kw-fav-modal { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.5); display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 641px){ .kw-fav-modal { align-items: center; padding: 20px; } }
.kw-fav-card { background: var(--surface); width: 100%; max-width: 720px; max-height: 82vh; border-radius: 18px 18px 0 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 -6px 30px rgba(0,0,0,.2); }
@media (min-width: 641px){ .kw-fav-card { border-radius: 18px; } }
.kw-fav-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.kw-fav-head b { font-size: 1rem; }
.kw-fav-x { border: 0; background: var(--surface-2); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; color: var(--muted); font-size: 1rem; }
.kw-fav-body { padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; }
.kw-fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 11px; }
.kw-fav-grid .pcard { width: auto; flex: none; }
body.kw-modal-open { overflow: hidden; }

/* red location pin in the hero 'Near me' button (matches the sketch) */
.v2-srow .v2-ghost .icon { color: #e5484d; }

/* ===== mobile polish: no h-overflow (cropping), FAB above nav, header fit, pin, hearts ===== */
html, body { overflow-x: clip; }                            /* kill page horizontal scroll */
.v2-pin { font-size: 1rem; line-height: 1; }                /* bold red 📍 in Near me */
#kw-skills, .skill-grid { justify-content: flex-start; margin-inline: 0 !important; width: auto; }  /* no full-bleed → no crop */
.pfav { padding: 4px 5px; font-size: 1.1rem; }              /* bigger heart tap target */
@media (max-width: 640px) {
  .kw-chat { bottom: calc(72px + env(safe-area-inset-bottom)); }  /* support FAB above the bottom nav */
  .header-tools { gap: 6px; }
  .kw-favbtn { width: 36px; height: 36px; font-size: .95rem; }
  .theme-toggle { width: 36px; height: 36px; }
  .brand-name { font-size: 1.05rem; }   /* fit "SkillWalay" beside the theme+lang+♥ toolbar */
  /* compact the language toggle on phones: show "EN" instead of "English" (frees ~35px for the brand) */
  .lang-opt[data-lang="en"] { font-size: 0; line-height: 0; }
  .lang-opt[data-lang="en"]::before { content: "EN"; font-size: .72rem; line-height: 1.3; letter-spacing: .02em; }
}

/* When the hamburger is present, let the brand GROW into the free space instead of
   using an auto margin — an auto margin steals space and truncates "SkillWalay" even
   when the bar has room. flex-grow gives room first, so it only ellipsises when truly
   tight. Placed after the RTL rule (line ~2732) so it wins in both LTR and RTL. */
@media (max-width: 1120px) {
  .header-inner .brand { margin-right: 0; flex: 1 1 auto; }
  [dir="rtl"] .header-inner .brand { margin-left: 0; margin-right: 0; flex: 1 1 auto; }
}

/* ===== narrow-phone header fit — hamburger must never get pushed off-screen ===== */
@media (max-width: 400px) {
  .brand-name { font-size: 1.05rem; }
  .lang-opt { padding: 0 5px; font-size: .66rem; }
  .header-tools { gap: 4px; }
  .kw-favbtn, .theme-toggle { width: 32px; height: 32px; font-size: .9rem; }
}
@media (max-width: 344px) { .brand-name { display: none; } }

@media (max-width: 400px) {
  .site-header .header-inner { padding-left: 12px; padding-right: 12px; }
  .brand-name { font-size: .98rem; }
  .brand-logo { width: 30px; height: 30px; }
  .lang-opt { padding: 0 5px; font-size: .64rem; }
  .nav-toggle { width: 40px; }
}

/* bottom nav: clean icon/label separation (Urdu/RTL glyphs are tall) + no wrap */
.kw-bottomnav .kw-bn-item { gap: 4px; padding: 6px 2px 5px; min-width: 0; }
.kw-bottomnav .kw-bn-ic { font-size: 1.05rem; }
.kw-bottomnav .kw-bn-lb { white-space: nowrap; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
[dir="rtl"] .kw-bottomnav .kw-bn-item { gap: 5px; }

/* Hero: narrower Join buttons so the animation shows in the freed empty space, and
   lift the animation out of the text zones (only behind the actions / margins). */
.v2-hero-actions .btn-ghost { width: 72%; align-self: center; }   /* Find… stays full width */
.v2-hero-sec .hero-scene, .v2-hero-sec .hero-fx { opacity: .6; }
.v2-hero-sec .hero-scene { top: 44%; }   /* push the scene down into the buttons/empty area, off the heading + search */

/* card ♥ must not overlap the provider name — smaller heart + name clearance */
.pcard .pfav { font-size: 1rem; padding: 2px 3px; top: 8px; right: 8px; }
.pcard .pmeta { padding-right: 20px; }
.pcard .pname { font-size: .82rem; }

/* 'Popular:' label — brand colour + bolder */
.hero-popular-label { color: var(--brand-2, var(--brand)); font-weight: 800; }

/* ============================================================
   TAXONOMY UI — searchable single-select, advanced multi-select,
   cascading skill picker. Matches the design system + dark/RTL.
   ============================================================ */
.kw-select, .kw-multi { position: relative; width: 100%; }

/* trigger (single-select) */
.kw-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: start; cursor: pointer; }
.kw-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-select.is-empty .kw-select-label { color: var(--muted); }
.kw-select-caret { flex: none; color: var(--muted); font-size: .8rem; transition: transform .15s; }
.kw-select.is-open .kw-select-caret, .kw-multi.is-open .kw-select-caret { transform: rotate(180deg); }
.kw-select.is-disabled .kw-select-trigger { opacity: .55; cursor: not-allowed; }

/* multi-select control */
.kw-multi-control { display: flex; align-items: center; gap: 8px; width: 100%; cursor: pointer; min-height: 46px; flex-wrap: wrap; }
.kw-multi-tags { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; align-items: center; }
.kw-multi-ph { color: var(--muted); }
.kw-tag { display: inline-flex; align-items: center; gap: 5px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent); border-radius: 8px; padding: 3px 4px 3px 9px; font-size: .8rem; font-weight: 600; max-width: 100%; }
@supports not (background: color-mix(in srgb, red, blue)) { .kw-tag { background: var(--brand-soft); border-color: var(--brand); } }
.kw-tag-tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-tag.is-pending { background: color-mix(in srgb, #f5a623 16%, transparent); color: #b5730a; border-color: color-mix(in srgb, #f5a623 40%, transparent); }
:root[data-theme="dark"] .kw-tag.is-pending, :root:not([data-theme="light"]) .kw-tag.is-pending { color: #f2c14e; }   /* readable amber on dark */
.kw-tag-badge { font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; background: #f5a623; color: #fff; border-radius: 5px; padding: 1px 4px; }
.kw-tag-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: .72rem; line-height: 1; padding: 2px 3px; border-radius: 5px; opacity: .7; }
.kw-tag-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 18%, transparent); }

/* shared popover panel */
.kw-dd-panel { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 120; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; box-shadow: 0 12px 34px rgba(16,40,30,.16); overflow: hidden; display: flex; flex-direction: column; }
.kw-dd-panel.drop-up { top: auto; bottom: calc(100% + 5px); }
.kw-dd-searchwrap { padding: 8px; border-bottom: 1px solid var(--border); }
.kw-dd-search { width: 100%; border: 1px solid var(--border); background: var(--surface-2); border-radius: 9px; padding: 9px 11px; font-size: .88rem; color: var(--ink); outline: none; }
.kw-dd-search:focus { border-color: var(--brand); box-shadow: var(--ring); }
.kw-dd-bar { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--border); }
.kw-dd-barbtn { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); border-radius: 7px; padding: 4px 9px; font-size: .72rem; font-weight: 700; cursor: pointer; }
.kw-dd-barbtn:hover { border-color: var(--brand); color: var(--brand); }
.kw-dd-count { margin-inline-start: auto; font-size: .72rem; font-weight: 700; color: var(--brand); }
.kw-dd-list { max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 5px; }
.kw-dd-opt { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px; cursor: pointer; font-size: .9rem; color: var(--ink); }
.kw-dd-opt.is-active { background: var(--surface-2); }
.kw-dd-opt.is-selected, .kw-dd-opt.is-checked { color: var(--brand); font-weight: 700; }
.kw-dd-opt-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-dd-opt-sub { font-size: .72rem; color: var(--muted); flex: none; }
.kw-dd-check { color: var(--brand); font-weight: 800; flex: none; }
.kw-cbox { flex: none; width: 18px; height: 18px; border: 1.5px solid var(--border-2, var(--border)); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; color: #fff; }
.kw-cbox.on { background: var(--brand); border-color: var(--brand); }
.kw-dd-empty { padding: 18px 12px; text-align: center; color: var(--muted); font-size: .84rem; }
.kw-dd-add { display: flex; align-items: center; gap: 6px; width: 100%; text-align: start; border: 0; border-top: 1px dashed var(--border); background: transparent; color: var(--brand); font-weight: 700; font-size: .84rem; padding: 10px; cursor: pointer; border-radius: 0 0 9px 9px; }
.kw-dd-add:hover { background: var(--brand-soft); }
.kw-dd-add.is-loading { opacity: .6; pointer-events: none; }
.kw-dd-add-ic { font-weight: 800; }

/* skill picker layout */
.kw-skillpicker { display: flex; flex-direction: column; gap: 14px; }
.kw-sp-field { display: flex; flex-direction: column; gap: 6px; }
.kw-sp-hint { font-size: .75rem; margin: 2px 0 0; }
.kw-sp-addnew { align-self: flex-start; border: 0; background: transparent; color: var(--brand); font-size: .76rem; font-weight: 700; cursor: pointer; padding: 2px 0; margin-top: -2px; }
.kw-sp-addnew:hover { text-decoration: underline; }

/* RTL: caret + count + add-row flip naturally via logical props; tag close spacing */
[dir="rtl"] .kw-tag { padding: 3px 9px 3px 4px; }
[dir="rtl"] .kw-dd-add, [dir="rtl"] .kw-dd-opt, [dir="rtl"] .kw-select-trigger, [dir="rtl"] .kw-multi-control { text-align: right; }

/* mobile: comfortable tap targets + roomy panels */
@media (max-width: 640px) {
  .kw-dd-list { max-height: 46vh; }
  .kw-dd-opt { padding: 11px 10px; }
  .kw-multi-control { min-height: 48px; }
}

/* worker profile-completion nudge (missing structured specialization) */
.kw-gate-card { display: flex; align-items: center; gap: 12px; background: color-mix(in srgb, var(--brand) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border)); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; }
@supports not (background: color-mix(in srgb, red, blue)) { .kw-gate-card { background: var(--brand-soft); border-color: var(--brand); } }
.kw-gate-ic { font-size: 1.6rem; flex: none; }
.kw-gate-tx { flex: 1; min-width: 0; }
.kw-gate-tx b { display: block; font-size: .95rem; }
.kw-gate-tx p { margin: 2px 0 0; font-size: .8rem; color: var(--muted); }
.kw-gate-card .btn { flex: none; }
@media (max-width: 520px) { .kw-gate-card { flex-wrap: wrap; } .kw-gate-card .btn { width: 100%; } }

/* category browser modal (homepage "All categories") */
.kw-cat-card { width: min(560px, 100%); max-height: min(80vh, 640px); display: flex; flex-direction: column; }
.kw-cat-searchwrap { padding: 10px 16px 4px; }
.kw-cat-searchwrap .kw-dd-search { width: 100%; }
.kw-cat-card .kw-fav-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px 16px; }
.kw-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kw-cat-item { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .12s, background .12s; }
.kw-cat-item:hover { border-color: var(--brand); background: var(--brand-soft); }
.kw-cat-ic { font-size: 1.3rem; flex: none; }
.kw-cat-nm { flex: 1; min-width: 0; font-weight: 700; font-size: .86rem; }
.kw-cat-ct { flex: none; font-size: .68rem; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 2px 7px; }

/* taxonomy filter dropdowns sit inside the workers .filter-row like the native selects */
.filter-row .kw-select, .filter-row .kw-multi, .kw-filter-dd { flex: 1; min-width: 150px; }

/* ============================================================
   ADMIN — taxonomy management + pending queue
   ============================================================ */
.count-badge { display: inline-block; min-width: 18px; margin-inline-start: 5px; padding: 0 5px; font-size: .7rem; font-weight: 800; line-height: 18px; text-align: center; color: #fff; background: #e0556b; border-radius: 999px; }
.taxo-sec { margin-bottom: 26px; }
.taxo-h { font-size: 1.02rem; margin: 0 0 10px; }
.taxo-h-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.taxo-h-row .taxo-h { margin: 0; }
.taxo-pend { display: flex; flex-direction: column; gap: 8px; }
.taxo-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px; }
.taxo-pend-row { border-color: color-mix(in srgb, #f5a623 45%, var(--border)); background: color-mix(in srgb, #f5a623 7%, var(--surface)); }
@supports not (background: color-mix(in srgb, red, blue)) { .taxo-pend-row { background: var(--surface-2); } }
.taxo-row-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.taxo-row-acts { display: flex; gap: 5px; flex-wrap: wrap; }
.taxo-type { font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 5px; color: #fff; background: var(--muted); }
.taxo-type-category { background: #2f83ff; } .taxo-type-skill { background: var(--brand); } .taxo-type-specialization { background: #8b5cf6; }
.taxo-parent { font-size: .72rem; color: var(--muted); background: var(--surface-2); border-radius: 6px; padding: 2px 7px; }
.taxo-tree { display: flex; flex-direction: column; gap: 8px; }
.taxo-cat, .taxo-skill { border: 1px solid var(--border); border-radius: 11px; background: var(--surface); overflow: hidden; }
.taxo-skill { margin: 6px 0; background: var(--surface-2); }
.taxo-cat > summary, .taxo-skill > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; cursor: pointer; list-style: none; font-weight: 700; }
.taxo-cat > summary::-webkit-details-marker, .taxo-skill > summary::-webkit-details-marker { display: none; }
.taxo-cat > summary::before, .taxo-skill > summary::before { content: "▸"; color: var(--muted); margin-inline-end: 4px; transition: transform .15s; }
.taxo-cat[open] > summary::before, .taxo-skill[open] > summary::before { transform: rotate(90deg); }
.taxo-nm { flex: 1; min-width: 0; }
.taxo-badges { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.taxo-count { font-size: .7rem; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 2px 8px; }
.taxo-cat-body, .taxo-skill-body { padding: 4px 13px 13px; }
.taxo-skills { margin-top: 6px; }
.taxo-specs { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.taxo-spec { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; }
.taxo-acts { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-inline-start: auto; }
.taxo-acts .btn-mini, .taxo-row-acts .btn-mini { padding: 4px 8px; font-size: .74rem; }
.taxo-danger:hover { color: #e0556b !important; border-color: #e0556b !important; }
.taxo-st { font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 2px 6px; border-radius: 5px; }
.taxo-st-pending { background: #f5a623; color: #fff; } .taxo-st-rej { background: #e0556b; color: #fff; } .taxo-st-off { background: var(--surface-2); color: var(--muted); }
.taxo-cat.is-off > summary, .taxo-skill.is-off > summary, .taxo-spec.is-off { opacity: .55; }
.taxo-add-child { margin-top: 8px; }

/* smart search typeahead */
.kw-suggest-box { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 130; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; box-shadow: 0 12px 34px rgba(16,40,30,.16); overflow: hidden; display: none; max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 5px; }
.kw-suggest-box.open { display: block; }
.kw-sg-item { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 9px; cursor: pointer; }
.kw-sg-item.is-active, .kw-sg-item:hover { background: var(--surface-2); }
.kw-sg-ic { flex: none; font-size: 1rem; width: 22px; text-align: center; }
.kw-sg-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 600; color: var(--ink); }
.kw-sg-sub { flex: none; font-size: .72rem; color: var(--muted); }
[dir="rtl"] .kw-sg-item { text-align: right; }

/* suggestion count/availability + voice mic */
.kw-sg-meta { margin-inline-start: auto; flex: none; font-size: .7rem; color: var(--muted); white-space: nowrap; padding-inline-start: 8px; }
.kw-sg-sub { margin-inline-start: 2px; }
/* mic pinned to the right of the search field (works for flex hero + relative list field) */
.kw-mic { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 3; border: 0; background: transparent; cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 6px; border-radius: 50%; color: var(--muted); transition: background .15s; }
.kw-mic:hover { background: var(--surface-2); }
.kw-mic:active { transform: translateY(-50%) scale(.9); }
.kw-mic.listening { color: #e0556b; animation: kwMicPulse 1s infinite; }
@keyframes kwMicPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(224,85,107,.45); } 70% { box-shadow: 0 0 0 7px rgba(224,85,107,0); } }
@media (prefers-reduced-motion: reduce) { .kw-mic.listening { animation: none; } }
.kw-has-mic { position: relative; }
.kw-has-mic .search-input { padding-right: 46px; }
.kw-has-mic .v2-search-input { padding-right: 26px; }

/* ===== smart search typeahead — refined look + fix stacking under hero chips/button ===== */
.kw-suggest-box { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 400; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 18px 44px rgba(16,40,30,.20); overflow: hidden auto; display: none; max-height: min(62vh, 440px); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 6px; }
.kw-suggest-box.open { display: block; }
.kw-sg-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 12px; cursor: pointer; transition: background .12s; }
.kw-sg-item.is-active, .kw-sg-item:hover { background: var(--surface-2); }
.kw-sg-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; font-size: 1.05rem; }
.kw-sg-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kw-sg-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.kw-sg-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; color: var(--muted); line-height: 1.2; margin: 0; }
.kw-sg-meta { flex: none; font-size: .66rem; font-weight: 800; color: var(--brand); background: var(--brand-soft); border-radius: 999px; padding: 3px 8px; white-space: nowrap; margin-inline-start: 0; padding-inline-start: 8px; }
.kw-sg-near .kw-sg-ic { background: var(--brand-soft); }
.kw-sg-near .kw-sg-main { color: var(--brand-2, var(--brand)); }
[dir="rtl"] .kw-sg-item { text-align: right; }
/* while open, lift the whole search card above the popular chips + hero button (they share z-index:1) */
.kw-sg-raise { z-index: 300 !important; position: relative; }

/* ============================================================
   QA sweep fixes — RTL (logical properties), centered heads, tap targets
   ============================================================ */
/* mic + list-page search icon: use logical insets so they never collide in RTL (#8/#26) */
.kw-mic { right: auto; inset-inline-end: 8px; }
.search-field .field-icon { left: auto; inset-inline-start: 17px; }
.search-field .search-input { padding-left: 0; padding-inline-start: 46px; }
.kw-has-mic .search-input { padding-inline-end: 46px; }
.kw-has-mic .v2-search-input { padding-right: 0; padding-inline-end: 26px; }
/* worker-card favourite heart mirrors like the profile heart does (#27) */
.pfav { right: auto; inset-inline-end: 9px; }
.pcard .pfav { right: auto; inset-inline-end: 8px; }
.pcard .pmeta { padding-right: 0; padding-inline-end: 20px; }
/* notifications panels open under their bell button in RTL (HTML sets inline right:16px) (#25) */
[dir="rtl"] #cd-bell-panel, [dir="rtl"] #d-bell-panel { right: auto !important; left: 16px !important; }
/* admin taxonomy disclosure triangle mirrors in RTL (#43) */
[dir="rtl"] .taxo-cat > summary::before, [dir="rtl"] .taxo-skill > summary::before { transform: rotate(180deg); }
[dir="rtl"] .taxo-cat[open] > summary::before, [dir="rtl"] .taxo-skill[open] > summary::before { transform: rotate(90deg); }
/* centered section heads must not inherit the flex-row header layout (#28) */
.section-head.center { display: block; }
/* ≥40px tap targets for small interactive controls (#45) */
.phone-eye { width: 40px; height: 40px; }
.kw-chat-x { width: 40px; height: 40px; }
.social-link { min-width: 40px; min-height: 40px; }

/* =========================================================
   Voice-Assisted Smart Registration + registration location
   (uses the shared brand tokens so it matches every other button)
   ========================================================= */
.voice-reg { margin: 0 0 18px; }
.voice-start {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 18px; border-radius: var(--r);
    background: var(--grad); color: #fff; border: 1px solid transparent;
    font-family: inherit; font-size: .96rem; font-weight: 700; line-height: 1; cursor: pointer;
    box-shadow: var(--shadow-brand); transition: transform .16s ease, box-shadow .18s ease, opacity .18s ease;
}
.voice-start:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .22); }
.voice-start:active { transform: translateY(1px) scale(.99); }
.voice-start .vr-mic { font-size: 1.15rem; line-height: 1; }
.voice-start.is-unsupported { display: none; }
.voice-start.listening { animation: vrPulse 1.2s ease-in-out infinite; }
@keyframes vrPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); }
    50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--brand) 0%, transparent); }
}
.vr-hint { font-size: .82rem; margin: 8px 2px 0; line-height: 1.45; }

.voice-panel { margin-top: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-sm); }
.voice-status { font-weight: 700; font-size: .92rem; display: flex; align-items: center; gap: 8px; }
.voice-status.is-listening, .voice-status.is-done { color: var(--brand); }
.voice-status.is-processing { color: var(--brand-2); }
.voice-status.is-review, .voice-status.is-error { color: var(--danger); }
.voice-transcript { margin-top: 8px; padding: 10px 12px; border-radius: var(--r); background: var(--brand-soft); color: var(--ink); font-size: .9rem; font-style: italic; }
.voice-missing { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.voice-missing li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .88rem; color: var(--ink);
    background: color-mix(in srgb, var(--danger) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent); border-radius: var(--r); padding: 8px 10px; }
.voice-refield, .voice-actions button {
    font-family: inherit; font-weight: 700; font-size: .84rem; cursor: pointer;
    padding: 8px 12px; border-radius: var(--r); border: 1px solid var(--border);
    background: var(--surface); color: var(--ink); white-space: nowrap; min-height: 40px;
    transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.voice-refield:hover, .voice-actions button:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.voice-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.voice-cancel:hover { border-color: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }

/* highlight a field the moment voice fills it */
.voice-filled { animation: vrFill 2.2s ease; }
@keyframes vrFill {
    0%, 65% { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* registration location tools — same visual language as .btn-ghost */
.loc-tools { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.btn-loc {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: inherit; font-weight: 700; font-size: .88rem; cursor: pointer;
    padding: 10px 14px; border-radius: var(--r); border: 1px solid var(--border);
    background: var(--surface); color: var(--ink); min-height: 40px;
    transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}
.btn-loc:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); transform: translateY(-1px); }
.btn-loc:active { transform: translateY(1px); }
.loc-status { font-size: .82rem; color: var(--muted); margin: 8px 2px 0; min-height: 1.1em; }
.reg-map { height: 240px; margin-top: 10px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }

/* "Suggest a secure password" — subtle dashed, brand-tinted */
.pw-suggest {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
    font-family: inherit; font-weight: 700; font-size: .84rem; cursor: pointer;
    padding: 8px 12px; border-radius: var(--r); border: 1px dashed color-mix(in srgb, var(--brand) 45%, var(--border));
    background: transparent; color: var(--brand); min-height: 40px;
    transition: border-color .16s ease, background .16s ease;
}
.pw-suggest:hover { border-color: var(--brand); background: var(--brand-soft); }

/* RTL: mirror the review rows cleanly */
[dir="rtl"] .voice-missing li { flex-direction: row-reverse; }
[dir="rtl"] .loc-tools, [dir="rtl"] .voice-actions { flex-direction: row-reverse; justify-content: flex-end; }

/* =========================================================
   Register page — COMPACT mobile layout (same fields & buttons,
   just tighter spacing so it's easy to see & fill on a phone)
   ========================================================= */
@media (max-width: 560px) {
    /* keep a comfortable top gap (short Login form looked jammed against the header) */
    .register-wrap { padding: 26px 11px 30px; }
    .register-head { margin-bottom: 10px; }
    /* eyebrow repeats the title on a phone — drop just that; keep the subtitle for context */
    .register-head .eyebrow { display: none; }
    .register-head h1 { font-size: 1.32rem; margin: 0; }
    .register-head .muted { font-size: .82rem; margin-top: 4px; }
    .register-card { padding: 12px 12px; border-radius: var(--r-lg); }

    /* lighter, shorter toggles */
    .role-toggle { margin-bottom: 7px; padding: 3px; }
    .role-opt { padding: 7px 8px; font-size: .88rem; }
    .auth-tabs { margin-bottom: 9px; padding: 3px; }
    .auth-tab { padding: 7px 8px; font-size: .88rem; }

    /* tight field rhythm — ONLY the (long) Register panels; Login stays normal so its short
       form doesn't look stranded at the top */
    [data-auth-panel="register"] .field-label { margin: 6px 0 2px; font-size: .78rem; }
    [data-auth-panel="register"] .text-input { padding: 7px 10px; font-size: .92rem; }
    [data-auth-panel="register"] .btn-lg { padding: 10px 18px; font-size: .95rem; margin-top: 10px !important; }
    .auth-hint { font-size: .74rem; margin-top: 6px; }

    /* voice + location, compacted; hint trimmed to a single line */
    .voice-reg { margin-bottom: 7px; }
    .voice-start { padding: 8px 12px; font-size: .86rem; }
    .voice-start .vr-mic { font-size: 1rem; }
    .vr-hint { font-size: .72rem; margin-top: 3px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .voice-panel { padding: 9px 10px; margin-top: 6px; }
    .voice-status { font-size: .83rem; }
    .voice-transcript { font-size: .82rem; padding: 7px 9px; }
    .voice-missing { gap: 6px; }
    .voice-missing li { font-size: .8rem; padding: 6px 8px; }
    .voice-refield, .voice-actions button { padding: 6px 9px; font-size: .78rem; min-height: 38px; }
    .voice-actions { margin-top: 8px; }
    .loc-tools { margin-top: 5px; gap: 6px; }
    .btn-loc { padding: 7px 10px; font-size: .8rem; }
    .loc-status { font-size: .75rem; margin-top: 5px; }
    .loc-status:empty { display: none; }   /* no blank reserved line when there's no status */
    .reg-map { height: 150px; }
    .pw-suggest { margin-top: 4px; font-size: .79rem; padding: 6px 10px; }
}

/* =========================================================
   Educational "Reputation = More Jobs" popup
   (reuses .kyc-modal / .kyc-modal-card; adds a 10s countdown bar)
   ========================================================= */
.edu-card { position: relative; text-align: center; max-width: min(440px, 100%); overflow: hidden; }
.edu-card .edu-emoji { font-size: 2.6rem; line-height: 1; margin-bottom: 6px; }
.edu-card h2 { font-size: 1.25rem; margin: 0 0 8px; }
.edu-card p { color: var(--ink-2); font-size: .93rem; line-height: 1.55; margin: 0 0 16px; }
.edu-card .btn { min-width: 120px; }
.edu-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--brand); transform-origin: left; animation: eduCountdown 10s linear forwards; }
@keyframes eduCountdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }
[dir="rtl"] .edu-timer { transform-origin: right; }
@media (max-width: 480px) { .edu-card h2 { font-size: 1.12rem; } .edu-card p { font-size: .88rem; } .edu-card .edu-emoji { font-size: 2.2rem; } }

/* two-way job review modal (stars + tags) */
.jrev-card { max-width: min(460px, 100%); }
.jrev-card h2 { font-size: 1.2rem; margin: 0 0 4px; }
.jrev-stars { display: flex; gap: 6px; justify-content: center; margin: 6px 0 12px; }
.jrev-star { font-size: 2rem; line-height: 1; background: none; border: none; cursor: pointer; color: var(--border-2); transition: color .12s ease, transform .12s ease; padding: 2px; }
.jrev-star:hover, .jrev-star.on { color: #f5b301; }
.jrev-star:active { transform: scale(1.15); }
.jrev-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.jrev-tag { font-family: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); transition: background .14s ease, color .14s ease, border-color .14s ease; }
.jrev-tag:hover { border-color: var(--brand); color: var(--brand); }
.jrev-tag.on { background: var(--grad); color: #fff; border-color: transparent; }
.jrev-comment { width: 100%; }
[dir="rtl"] .jrev-stars { flex-direction: row-reverse; }   /* keep 1→5 fill direction correct in RTL */

/* pending-review popup list + notification-bell entry */
.prp-list { list-style: none; margin: 4px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; max-height: 42vh; overflow-y: auto; }
.prp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.prp-job { font-size: .88rem; }
.prp-row .btn { padding: 7px 12px; font-size: .82rem; white-space: nowrap; margin: 0; }
.prp-bell { display: block; width: 100%; text-align: left; margin: 0 0 8px; padding: 9px 11px; border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--border)); background: var(--brand-soft); color: var(--brand); font-family: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; }
.prp-bell:hover { background: color-mix(in srgb, var(--brand) 16%, var(--surface)); }
[dir="rtl"] .prp-list, [dir="rtl"] .prp-bell { text-align: right; }
[dir="rtl"] .prp-row { flex-direction: row-reverse; }

/* smart collapsible dashboard sections */
.sec-head-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 10px; }
.sec-head-toggle .sec-caret { margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 1.2rem; font-weight: 800; line-height: 1; color: var(--brand); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); transition: color .15s ease, background .15s ease, transform .15s ease; }
.sec-head-toggle:hover .sec-caret { color: #fff; background: var(--brand); transform: scale(1.06); }
/* brief highlight when a card is jumped-to (e.g. "Verify my CNIC now" → the CNIC form) */
.kw-flash-focus { animation: kw-flash 1.6s ease; border-radius: var(--r-lg); }
@keyframes kw-flash { 0%,100% { box-shadow: 0 0 0 0 transparent; } 20%,60% { box-shadow: 0 0 0 4px var(--brand-soft), 0 0 0 5px var(--brand); } }
.sec-head-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.sec-body { animation: secExpand .18s ease; }
@keyframes secExpand { from { opacity: .35; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.sec-master-bar { display: flex; justify-content: flex-end; margin: 4px 0 6px; }
.sec-master { font-family: inherit; font-weight: 700; font-size: .8rem; cursor: pointer; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); transition: border-color .15s ease, color .15s ease, background .15s ease; }
.sec-master:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
[dir="rtl"] .sec-master-bar { justify-content: flex-start; }

/* client reputation badge shown to the worker on a lead card (fairness) */
.client-rating { display: inline-flex; align-items: center; gap: 3px; font-size: .76rem; font-weight: 700; color: #a9740a; background: color-mix(in srgb, #f5b301 16%, var(--surface)); border: 1px solid color-mix(in srgb, #f5b301 38%, transparent); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
:root[data-theme="dark"] .client-rating, :root:not([data-theme="light"]) .client-rating { color: #f2c14e; }
button.client-rating { font-family: inherit; line-height: 1.4; cursor: pointer; }
.client-rating.client-new { color: var(--muted); background: var(--surface-2); border-color: var(--border); cursor: default; }
button.client-rating:hover { filter: brightness(1.06); }
/* client-reviews modal (what other providers said about a client — seen by the worker) */
.crev-body { max-height: 55vh; overflow-y: auto; margin-top: 6px; }
.crev-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.crev-item:last-child { border-bottom: none; }
.crev-stars { color: #f5b301; font-size: 1rem; letter-spacing: 2px; }
.crev-comment { margin: 4px 0 0; font-size: .9rem; color: var(--ink); }
.crev-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.crev-tag { font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 1px 8px; background: var(--brand-soft); color: var(--brand); }
.crev-date { font-size: .75rem; margin-top: 3px; }

/* Feature Management (admin) */
.ff-toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.ff-toolbar #ff-search { flex: 1; min-width: 180px; }
.ff-cat { margin-bottom: 18px; }
.ff-cat-head { font-size: 1rem; margin: 0 0 8px; color: var(--brand); }
.ff-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); margin-bottom: 6px; }
.ff-row.is-critical { border-left: 3px solid var(--danger); }
.ff-name { font-weight: 700; font-size: .92rem; }
.ff-crit { font-size: .66rem; font-weight: 800; color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border-radius: 999px; padding: 1px 7px; text-transform: uppercase; }
.ff-parent { font-size: .74rem; }
.ff-desc { font-size: .8rem; margin-top: 2px; }
.ff-key { font-size: .7rem; opacity: .6; font-family: monospace; margin-top: 2px; }
.ff-status { width: auto; min-width: 130px; padding: 7px 10px; border-radius: var(--r); border: 1px solid var(--border-2); background: var(--surface-2); color: var(--ink); font-family: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; }
[dir="rtl"] .ff-row { flex-direction: row-reverse; }
[dir="rtl"] .ff-row.is-critical { border-left: none; border-right: 3px solid var(--danger); }

/* reputation badges (earned trust signals) */
.rep-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rep-badge { display: inline-flex; align-items: center; gap: 3px; font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2); }
.rep-badge.rb-verified { color: var(--brand); background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
.rep-badge.rb-top { color: #a9740a; background: color-mix(in srgb, #f5b301 15%, var(--surface)); border-color: color-mix(in srgb, #f5b301 35%, transparent); }
.rep-badge.rb-trusted { color: var(--green-2); background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
:root[data-theme="dark"] .rep-badge.rb-top, :root:not([data-theme="light"]) .rep-badge.rb-top { color: #f2c14e; }
.rep-badge.rb-rising { color: var(--brand-2); background: color-mix(in srgb, var(--brand-2) 12%, var(--surface)); border-color: color-mix(in srgb, var(--brand-2) 32%, transparent); }

/* client's own "My Reputation" identity card (client dashboard) */
.crep-card { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; background: linear-gradient(180deg, var(--brand-soft), var(--surface)); }
.crep-rating { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.crep-rating b { color: #a9740a; }
:root[data-theme="dark"] .crep-rating b, :root:not([data-theme="light"]) .crep-rating b { color: #f2c14e; }
.crep-jobs { font-size: .85rem; margin-top: 3px; }
.crep-note { font-size: .78rem; margin: 10px 0 0; line-height: 1.5; }

/* a feature turned OFF in the admin Feature Management panel */
.kw-feature-off { display: none !important; }

/* recent-activity pagination */
.cd-act-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; }
.cd-act-pager button { font-family: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; padding: 6px 12px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); color: var(--ink); min-height: 36px; }
.cd-act-pager button:disabled { opacity: .4; cursor: default; }
.cd-act-pager button:not(:disabled):hover { border-color: var(--brand); color: var(--brand); }
.cd-act-pageinfo { font-size: .8rem; color: var(--muted); }

/* compact top summary card on mobile */
@media (max-width: 560px) {
    .cd-summary { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
    .cd-stat { padding: 10px 12px; }
    .cd-stat-num { font-size: 1.45rem; }
    .cd-stat-label { font-size: .74rem; }
}

/* very small phones — trim a touch more (Register panels only) */
@media (max-width: 380px) {
    .register-card { padding: 11px 10px; }
    .register-head h1 { font-size: 1.18rem; }
    [data-auth-panel="register"] .field-label { font-size: .75rem; }
    [data-auth-panel="register"] .text-input { padding: 7px 9px; }
    .voice-start { width: 100%; justify-content: center; }
}