/* ============================================================
   KIWIFIX – DESIGN SYSTEM
   ============================================================ */

/* Self-hosted fonts — previously loaded from Google Fonts' CDN via a
   <link> tag in index.html (fonts.googleapis.com/fonts.gstatic.com).
   That meant the headline (.hero-title, Poppins) and body copy (Inter)
   silently fell back to the browser default font on any device/network
   that couldn't reach Google's CDN — no error, just a plain system font
   that looked nothing like the intended design, which is what was being
   reported as "wrong font" even though the CSS itself was correct.
   These .woff2 files are now committed straight into assets/fonts/ (via
   the official @fontsource/poppins and @fontsource/inter npm packages,
   same font files Google Fonts serves) so both fonts render identically
   everywhere, with no external request and no dependence on internet
   access at page-load time — same principle as "everything runs from
   the docker image", just applied to fonts instead of app code. */
@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/poppins-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/poppins-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/poppins-900.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-900.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green-dark: #073820;
  --green:       #0B6B35;
  --green-mid:   #15803D;
  --green-light: #22C55E;
  --green-bg:    #F0FDF4;
  --green-border:#BBF7D0;
  --dark:        #0F172A;
  --text:        #1E293B;
  --muted:       #64748B;
  --border:      #E2E8F0;
  --bg:          #F6FAF8;
  --white:       #FFFFFF;
  --shadow:      0 4px 24px rgba(0,0,0,.07);
  --shadow-lg:   0 12px 40px rgba(0,0,0,.12);
  --radius:      16px;
  --radius-sm:   10px;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; outline: none; }
img { display: block; max-width: 100%; }
a { text-decoration: none; }

/* ============================================================
   PAGES
   ============================================================ */
.page { display: none; min-height: 100vh; flex-direction: column; }
.page.active { display: flex; }
.app-page { background: var(--bg); }

/* ============================================================
   LANDING
   ============================================================ */
/* min-height (not a hard height) — the header/headline/cards/trust-bar/
   banner below are real, variable-length content now, not baked pixels,
   so the section has to be free to grow taller than one viewport when
   that content needs more room. A fixed 100vh + overflow:hidden here was
   clipping the bottom of the cards behind the banner on shorter windows. */
/* padding-bottom reserves room for .hero-banner, which now floats fixed
   over the bottom of the viewport instead of sitting in flow — without
   this, the trust bar could end up hidden behind it when scrolled all
   the way down. */
/* Fit-to-screen (no scroll) + zero-crop (nothing hidden) + a real image
   (no HTML overlay) cannot all be satisfied with object-fit:cover on a
   fixed-ratio image — cover always crops one axis to fill both, and on
   every reported viewport (~1.9:1+, image is 1.5:1) that axis is the
   vertical one, which is exactly where the top callout and the bottom
   "& More" badge live. object-fit:contain is the only setting that
   shows 100% of the image, at any viewport size, with no scroll and no
   extra element: it scales the image down to fit entirely inside the
   box instead of cropping it to fill the box. The one thing it gives up
   is full-bleed — on viewports wider than the image's 1.5:1 ratio,
   contain leaves empty space on the left/right (filled by
   .landing-page's dark green background below), same as it would on
   top/bottom for a narrower one. That's the trade: nothing in the image
   is ever hidden, in exchange for not being edge-to-edge on every
   screen. */
.landing-page    { position: relative; width: 100%; min-height: 100vh; background: #041F12; padding-bottom: 110px; }
/* object-fit:fill — stretches the image non-uniformly to exactly match
   the box on both axes. This is the only setting that hits all four
   requirements at once: fills edge-to-edge (no letterbox gaps, which
   `contain` had and was rejected), shows 100% of the image (no crop,
   which `cover` had and was rejected), fits in one screen (no scroll),
   and needs no extra HTML element. The one thing it costs: on any
   viewport whose width:height ratio isn't the image's native ~1.5:1,
   the image is stretched or squashed slightly off its true proportions
   to make up the difference (people/map slightly elongated or
   compressed) instead of being cropped or gapped. Of the three trade-
   offs tried, this is the only one left. */
.landing-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; z-index: 0;
}
/* Always visible (no more hover-to-reveal — see app.js, startLandingHeaderAutoHide
   and its mousemove listener were removed). The fade-to-transparent lives on
   a ::before behind the logo/nav content (not on the header itself) —
   putting the gradient/mask directly on the header would fade its children
   (logo, nav text) too, since a CSS mask clips everything painted inside the
   element, not just its own background. This way only the white backing
   fades; the text and logo stay fully opaque the whole way across.
   Selector is `.app-header.landing-header` (not just `.landing-header`) —
   both classes are on the same <header> element (see index.html), and
   `.app-header` below sets its own background/box-shadow/border-bottom/
   position/z-index. Equal-specificity rules resolve by source order, and
   `.app-header` comes later in this file, so a plain `.landing-header`
   selector here was silently losing every one of those properties back to
   `.app-header`'s values — this doubled-up selector has higher specificity
   so it actually wins regardless of order. */
.app-header.landing-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  background: none;
  box-shadow: none;
  border-bottom: none;
}
.app-header.landing-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(255,255,255,.95) 0%, rgba(255,255,255,.85) 55%, rgba(255,255,255,0) 100%);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  pointer-events: none;
}
.landing-nz-badge {
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: 20px;
  padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--green-dark); white-space: nowrap;
}

/* ------------------------------------------------------------
   HERO OVERLAY — headline / subheadline / cards / trust bar used to be
   pixels baked into landing-hero.png; each is now its own real element
   layered over the (still-single, still-static) background photo above,
   constrained to its left/photo side so it never runs into the map
   illustration on the right. Normal flow (not absolutely positioned) —
   see .landing-page above for why: this needs to be able to push the
   section taller instead of being pinned to a fixed-height box the
   background photo also has to fit inside.
   ------------------------------------------------------------ */
/* All the vertical gaps below (padding-top, margins, card image height,
   trust-bar padding, banner margin/padding) use clamp(min, vh-based ideal,
   max) instead of fixed px — they shrink together as viewport HEIGHT
   shrinks (a short laptop window, not just a narrow one), which is what
   keeps the whole hero fitting in one screen on most displays without a
   scrollbar, the way the old single flattened image always did, while
   still being real, reflowable elements. */
.hero-overlay {
  position: relative; z-index: 4;
  /* All of headline/subtitle/cards/trust-bar share this ONE container —
     that's why they've all been moving/resizing together every time this
     width changed (they're not independent, they're one component). At
     680px there was still a big strip of unused photo between the
     content and the curve on a real wide monitor (46% of a ~2500px+
     screen is ~1150px+), so this raises the ceiling to 900px — .landing-
     cards and .hero-trust-bar below get their OWN max-width now so they
     stay a sensible card/bar size instead of also stretching to 900px;
     only .hero-title/.hero-subtitle (no max-width override) actually use
     the full column. */
  width: 46%; max-width: 900px; min-width: 300px;
  /* Left padding was `6%` — CSS resolves a percentage padding against the
     CONTAINING block's width (.landing-page, i.e. the full page), not
     this element's own (already-capped-at-560px) width. On a wide
     screen that silently ate 100-150px+ out of the 560px column before
     any content even started, which is what was squeezing the headline
     into an ugly wrap and truncating every trust-bar label down to
     "Veri…"/"5 St…" — not a text-sizing problem, a padding-eating-the-
     box problem. clamp() with a fixed max caps how much it can ever
     take, regardless of page width. */
  padding: clamp(90px, 15vh, 140px) 0 clamp(16px, 3vh, 40px) clamp(20px, 6vw, 48px);
}
/* Poppins, not the site's usual Inter — matches the bolder, rounder
   headline weight from the original design more closely than Inter 900
   does (see index.html's Google Fonts link). Scoped to just this
   headline rather than swapped in site-wide, since nothing else was
   asked to change. */
.hero-title {
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
  /* Max raised from 42px to 48px now that .hero-overlay actually has
     the width (680px) to hold it — measured against the real self-hosted
     Poppins-700 metrics first ("Right When You Need Us." is ~612px wide
     at 48px, comfortably inside the ~630px available after padding) so
     this doesn't repeat the earlier 64px attempt, which measured out to
     ~820px and wrapped onto 4 lines instead of the intended 2. */
  font-size: clamp(24px, 3.6vw, 48px); font-weight: 800; line-height: 1.2;
  color: var(--dark); margin-bottom: clamp(8px, 1.5vh, 18px);
}
/* var(--green-mid) #15803D measured at 2.7:1 contrast against the pale
   sky the photo actually shows here (checked with WCAG's formula against
   the real pixel colour, not eyeballed) — fails even large-text AA (3:1),
   which is why this line was reading washed out while the navy line
   above it (8.8:1 against the same sky) looked solid. var(--green-dark)
   #073820 measures 7.1:1 in the same spot — swapping to it fixes the
   actual contrast problem instead of masking it with an overlay. */
.hero-title-accent { color: var(--green-dark); }
.hero-subtitle { font-size: clamp(15px, 1.2vw, 17px); color: var(--text); line-height: 1.5; margin-bottom: clamp(14px, 2.5vh, 32px); text-shadow: 0 1px 12px rgba(255,255,255,.6); }

.landing-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: clamp(12px, 2vh, 24px);
  /* Capped independently of .hero-overlay's own (now 900px) width — these
     are compact clickable cards with a small thumbnail + button, not
     meant to visually track the headline's width. Without this they'd
     stretch to match .hero-overlay and each card would balloon to
     ~440px wide on a large screen. */
  max-width: 560px;
}
.landing-card {
  background: #fff; border-radius: 16px; cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,.18); overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 0 12px; border: 2px solid transparent; text-align: center;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.landing-card:hover { transform: translateY(-6px); box-shadow: 0 10px 32px rgba(11,107,53,.25); border-color: var(--green); }
/* card-job.png / card-tradie.png each have a photo on top AND a title +
   description baked into a white panel at the bottom of the same image.
   object-position:top + a height capped well short of where that panel
   starts crops it down to just the photo — the real .landing-card-title/
   -desc elements below reproduce that baked text as actual HTML instead,
   so nothing is lost, it's just no longer locked to the image's own
   fixed aspect ratio. */
.landing-card img { width: 100%; height: clamp(80px, 11vh, 140px); object-fit: cover; object-position: top; display: block; }
.landing-card-title { font-size: 15px; font-weight: 800; color: var(--dark); margin: 10px 0 4px; padding: 0 10px; }
.landing-card-desc { font-size: 12px; color: var(--muted); line-height: 1.4; margin: 0 0 10px; padding: 0 10px; }
.landing-card-btn {
  background: var(--green); color: #fff; border: none; border-radius: 20px;
  padding: 10px 0; font-size: 14px; font-weight: 700;
  cursor: pointer; width: calc(100% - 24px); pointer-events: none;
  /* .landing-card is flex-direction:column, so margin-top:auto pushes
     this to the bottom of whichever card is taller — the two cards'
     descriptions are different lengths ("Post your job and get matched
     with trusted local tradies." vs "Find jobs, grow your business and
     get paid.") and wrap to different line counts, which was leaving
     the buttons at different heights. This pins both to the same
     baseline regardless of description length, at any screen size,
     since it's driven by flex layout rather than a fixed height. */
  margin-top: auto;
}
.landing-card:hover .landing-card-btn { background: var(--green-dark); }

/* White pill/card so the trust bar stays readable over the photo
   regardless of what's directly behind it (was baked as a white box in
   the original image — reproduced the same way here as a real element).
   width:fit-content + flex-wrap:wrap used to let this shrink to only as
   wide as its content needed — but "as wide as its content needs" for 4
   items was routinely wider than .hero-overlay's column used to be, so
   it wrapped into a 2x2 grid of "boxes" instead of the single row from
   the reference design. width:100%+max-width:560px matches
   .landing-cards' own capped width (both are capped independently of
   .hero-overlay, which is wider now so the headline can stretch — see
   the comment on .hero-overlay) + flex-wrap:nowrap forces one row
   always; the items shrink (smaller gap/icon/text below) to fit rather
   than the row wrapping. */
.hero-trust-bar {
  display: flex; flex-wrap: nowrap; gap: clamp(4px, 1vw, 16px);
  background: #fff; border-radius: 16px; padding: clamp(8px, 1.5vh, 16px) clamp(10px, 1.5vw, 20px);
  box-shadow: var(--shadow-lg); width: 100%; max-width: 560px;
}
/* flex:1 + min-width:0 divides the row into 4 equal columns and lets
   the text inside each actually shrink/ellipsis instead of forcing the
   row wider than its container (the classic flexbox min-width:auto trap). */
.trust-item { display: flex; align-items: center; gap: clamp(4px, .8vw, 10px); flex: 1 1 0; min-width: 0; }
/* Flat single-color SVG glyphs (inline in index.html), not emoji — the
   reference design's trust bar uses plain dark-green icons sitting
   directly on white, no colored circle backdrop. currentColor + the
   color set here means each icon just inherits var(--green-dark). */
.trust-icon {
  width: clamp(18px, 1.6vw, 22px); height: clamp(18px, 1.6vw, 22px);
  color: var(--green-dark); flex-shrink: 0;
}
/* min-width:0 lets this actually shrink below its text's natural width
   instead of forcing .trust-item (and the whole row) wider than its
   share of the bar. Text WRAPS (not ellipsis) — "Verified Tradies" +
   "Licenced & Insured" etc. genuinely don't fit on one line each within
   a quarter of a ~500px bar at readable sizes, and truncating them to
   "Veri…"/"Licen…" made the whole bar illegible. Letting each label wrap
   to 2 lines keeps every item's text fully readable while the row of 4
   icon+label pairs itself still never wraps (that's flex-wrap:nowrap on
   .hero-trust-bar above) — still one row, exactly what was asked for. */
.trust-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.trust-text strong { font-size: clamp(11px, 1vw, 13px); color: var(--dark); }
.trust-text span { font-size: clamp(9.5px, .85vw, 11.5px); color: var(--muted); }

/* Floats pinned to the bottom of the viewport (not normal flow) — stays
   visible the whole time you're on the home page, however far you scroll,
   instead of sitting once at a fixed point in the page and scrolling out
   of view like a normal element. Only ever rendered while #home is the
   active page (its parent is display:none otherwise), so this can't leak
   onto any other page. */
.hero-banner {
  position: fixed; z-index: 50; left: 6%; right: 6%; bottom: 20px;
  display: flex; align-items: center; gap: 14px;
  background: var(--green-dark); border-radius: 16px; padding: clamp(10px, 1.8vh, 20px) 24px;
  box-shadow: var(--shadow-lg);
}
.hero-banner-icon {
  font-size: 22px; flex-shrink: 0; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.15); border-radius: 50%; color: #fff;
}
.hero-banner-text { display: flex; flex-direction: column; }
.hero-banner-text strong { font-size: 15px; color: #fff; }
.hero-banner-text span { font-size: 13px; color: rgba(255,255,255,.75); }

/* ============================================================
   APP HEADER
   ============================================================ */
.app-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: clip-path .3s ease;
  clip-path: inset(0 0 0 0); /* fully visible: nothing clipped */
}
/* Hiding: the bottom edge rises up like a shade being pulled up over the bar,
   until the whole thing is covered. Reappearing reverses it (shade drops
   back down). Anchored at the top so it never moves position, only what's
   visible changes. */
.app-header.header-hidden { clip-path: inset(0 0 100% 0); }
.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; flex-shrink: 0; }
.brand-logo {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--green); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.brand-logo img { width: 100%; height: 100%; object-fit: cover; }
.brand-logo.sm { width: 30px; height: 30px; }
/* Landing page header only — a bit bigger than the standard 40px used on
   every other page's header, since this is the very first brand impression
   on the hero. Scoped to .landing-header so dashboard/tradie headers etc.
   keep the normal size. */
.landing-header .brand-logo { width: 60px; height: 60px; }
.brand-name { font-size: 18px; font-weight: 900; color: var(--dark); }
.brand-tag  { font-size: 11px; color: var(--muted); }

.header-nav { display: flex; align-items: center; gap: 2px; }
.header-nav button {
  background: none; border: none; padding: 8px 12px; font-size: 13px;
  font-weight: 600; color: var(--text); cursor: pointer; border-radius: 8px; transition: .15s;
}
.header-nav button:hover { background: var(--green-bg); color: var(--green); }
.header-nav .nav-active { color: var(--green); border-bottom: 2px solid var(--green); border-radius: 0; }

.header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.location-pill {
  display: flex; align-items: center; gap: 6px; font-size: 13px;
  font-weight: 600; padding: 7px 13px; border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; background: white; color: var(--text);
}
.btn-login {
  background: var(--green); color: white; border: none;
  border-radius: var(--radius-sm); padding: 10px 20px;
  font-size: 14px; font-weight: 700; cursor: pointer; transition: .15s;
}
.btn-login:hover { background: var(--green-mid); }

/* Header stepper (compact, inside header) */
.header-stepper { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.hs-item { font-weight: 700; color: var(--muted); white-space: nowrap; }
.hs-item.done { color: var(--green); }
.hs-item.active { color: var(--dark); }
.hs-line { width: 32px; height: 2px; background: var(--border); border-radius: 1px; }
.hs-line.done { background: var(--green); }

.btn-back-header {
  background: none; border: none; cursor: pointer; font-size: 15px;
  font-weight: 700; color: var(--dark); padding: 8px 12px;
  border-radius: 8px; flex-shrink: 0;
}
.btn-back-header:hover { background: var(--bg); }

/* ============================================================
   EDIT-PROFILE SIDEBAR (tradie wizard)
   Only shown when an already-registered tradie reaches the onboarding
   wizard via "Edit Profile" from tradie-dashboard.html (see nav()'s
   EDIT_PROFILE_PAGES + hasTradieSession() check in app.js) — a fresh
   sign-up with no account yet never gets this, same sidebar-free wizard
   as before. Visual language mirrors tradie-dashboard.html's .db-sidebar
   (that CSS lives inline there, not here, since it's the only page that
   had one until now).
   ============================================================ */
.epf-sidebar {
  display: none; position: fixed; top: 0; left: 0; bottom: 0; width: 260px;
  background: var(--white); border-right: 1px solid var(--border);
  padding: 24px 16px; flex-direction: column; gap: 4px;
  overflow-y: auto; z-index: 150; /* above .app-header's sticky z-index:100 */
}
body.edit-profile-mode .epf-sidebar { display: flex; }
body.edit-profile-mode .page.app-page.active { margin-left: 260px; }
/* Hamburger toggle + dim backdrop — same off-canvas-drawer pattern as
   .db-hamburger/.db-sidebar-backdrop on the dashboard pages. Only ever
   relevant in edit-profile-mode (fresh signup never gets this sidebar at
   all, see nav() in app.js), and only visible below 900px — see the
   media query. */
.epf-hamburger {
  display: none; position: fixed; top: 14px; left: 14px; z-index: 250;
  background: #fff; border: 1px solid var(--border); cursor: pointer;
  width: 42px; height: 42px; border-radius: 10px;
  align-items: center; justify-content: center; font-size: 20px; color: var(--dark);
  box-shadow: var(--shadow);
}
.epf-sidebar-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 249;
}
.epf-sidebar-backdrop.open { display: block; }
@media (max-width: 900px) {
  /* Narrow viewports: the wizard's own responsive layout already tightens
     up considerably (see .tradie-desk-layout's mobile breakpoint below) —
     a fixed 260px sidebar doesn't fit alongside the form anymore, so it
     becomes an off-canvas drawer (slid out via translateX, toggled by the
     hamburger button) instead of a permanent 260px column. Previously
     this just set display:none !important below 900px, removing the
     sidebar — and with it the only way back to the dashboard — with no
     replacement at all. */
  body.edit-profile-mode .epf-hamburger { display: flex; }
  body.edit-profile-mode .epf-sidebar {
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.18);
    /* .epf-sidebar-backdrop sits at z-index:249 to cover the whole page
       including the (z-index:100) sticky .app-header. The sidebar's base
       z-index is only 150 though, so once the backdrop appeared it was
       actually stacked ON TOP of the open sidebar - every tap on a menu
       item was landing on the backdrop instead (which just closes the
       drawer), making Dashboard/Find Jobs/etc. look "disabled". Raise it
       above both the backdrop (249) and the hamburger (250) while open. */
    z-index: 260;
  }
  body.edit-profile-mode .epf-sidebar.open { transform: translateX(0); }
  body.edit-profile-mode .page.app-page.active { margin-left: 0; }
  /* .epf-hamburger is fixed at top:14px;left:14px;width:42px, sitting on
     top of whichever wizard page is active. Each wizard page's own
     .app-header/.brand starts flush left too, so the two collide — shift
     the header's content right just enough to clear the button. */
  body.edit-profile-mode .app-header { padding-left: 64px; }
}
.epf-sidebar-section { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; padding: 16px 12px 8px; }
.epf-sidebar-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--muted);
  transition: background .15s, color .15s; text-decoration: none;
}
.epf-sidebar-item:hover { background: var(--green-bg); color: var(--green); }
.epf-sidebar-item .icon { font-size: 18px; width: 24px; text-align: center; }
.epf-profile-block {
  background: var(--green-bg); border: 1px solid var(--green-border);
  border-radius: 14px; padding: 18px; margin-bottom: 8px; text-align: center;
}
.epf-profile-photo {
  width: 72px; height: 72px; border-radius: 50%; background: var(--green);
  margin: 0 auto 10px; display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700; color: #fff; overflow: hidden;
}
.epf-profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.epf-profile-name  { font-size: 15px; font-weight: 700; color: var(--dark); }
.epf-profile-trade { font-size: 12px; color: var(--green); font-weight: 600; margin: 2px 0 6px; }
.epf-profile-complete {
  margin-top: 10px; background: var(--white); border-radius: 8px;
  padding: 8px 10px; font-size: 12px; color: var(--muted);
}
.epf-pct-bar { height: 6px; background: var(--border); border-radius: 4px; margin: 6px 0 4px; overflow: hidden; }
.epf-pct-fill { height: 100%; background: var(--green); border-radius: 4px; width: 0%; transition: width .3s; }

/* ============================================================
   PAGE BODY
   ============================================================ */
.page-body { padding: 32px 28px; width: 100%; max-width: 1400px; margin: 0 auto; }
.page-title { font-size: 28px; font-weight: 900; color: var(--dark); margin-bottom: 6px; }
.page-sub   { font-size: 15px; color: var(--muted); }

/* Trust badge inline */
.trust-badge-inline {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px;
  background: var(--green-bg); border: 1px solid var(--green-border);
  color: var(--green); font-size: 13px; font-weight: 600;
  padding: 7px 13px; border-radius: 8px;
}

/* Stepper (page-level) */
.stepper { display: flex; align-items: center; gap: 0; margin: 20px 0 28px; }
.step-item { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.step-circle {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800;
  background: white; flex-shrink: 0;
}
.step-item.done .step-circle { background: var(--green); border-color: var(--green); color: white; }
.step-item.done { color: var(--green); }
.step-item.active .step-circle { background: var(--green); border-color: var(--green); color: white; }
.step-item.active { color: var(--dark); font-weight: 700; }
.step-line { flex: 1; height: 2px; background: var(--border); min-width: 28px; }

/* ============================================================
   FORM CARD (white container)
   ============================================================ */
.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
.form-section-label { font-size: 15px; font-weight: 800; color: var(--dark); margin-bottom: 14px; }

/* How It Works page */
.how-it-works-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.how-it-works-col { display: flex; flex-direction: column; }
.hiw-col-title { font-size: 20px; font-weight: 900; color: var(--dark); margin-bottom: 6px; }
.hiw-step { display: flex; gap: 14px; margin-bottom: 18px; }
.hiw-step-num {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--green); color: #fff; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.hiw-step strong { display: block; font-size: 14.5px; color: var(--dark); margin-bottom: 3px; }
.hiw-step p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
@media (max-width: 860px) {
  .how-it-works-grid { grid-template-columns: 1fr; }
}
.optional-tag { font-size: 13px; font-weight: 500; color: var(--muted); }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.field-group { margin-bottom: 14px; }
.field-label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }

/* Select wrap */
.select-wrap { position: relative; }
.select-wrap .sel-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; pointer-events: none; z-index: 1; }
.form-select {
  width: 100%; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 14px 11px 38px; font-size: 15px; color: var(--dark);
  background: white; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: .15s;
}
.form-select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(11,107,53,.1); }
.select-wrap.sm .form-select { padding: 9px 14px 9px 36px; font-size: 14px; }

/* Input wrap */
.input-icon-wrap { position: relative; }
.input-icon-wrap .inp-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; pointer-events: none; z-index: 1; }
.form-input {
  width: 100%; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 14px 11px 40px; font-size: 15px; color: var(--dark); background: white; transition: .15s;
}
.form-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(11,107,53,.1); outline: none; }
.form-input::placeholder { color: #94a3b8; }

/* Textarea */
.form-textarea {
  width: 100%; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 14px; font-size: 15px; color: var(--dark); background: white;
  min-height: 100px; resize: vertical; transition: .15s;
}
.form-textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(11,107,53,.1); outline: none; }
.form-textarea::placeholder { color: #94a3b8; }
.char-count { text-align: right; font-size: 12px; color: var(--muted); margin-top: 4px; }

/* Tip inline */
.tip-inline {
  display: flex; gap: 8px; background: #FEFCE8; border: 1px solid #FDE68A;
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; color: #78350F; margin-top: 8px;
}

/* Upload */
.upload-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.upload-box {
  border: 2px dashed var(--border); border-radius: var(--radius-sm);
  padding: 22px 16px; text-align: center; cursor: pointer;
  transition: .15s; color: var(--muted);
}
.upload-box:hover { border-color: var(--green); background: var(--green-bg); }
.ub-icon { font-size: 26px; margin-bottom: 8px; }
.ub-title { font-size: 14px; font-weight: 700; color: var(--dark); }
.ub-sub   { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* 3-column grid */
.three-col-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-top: 8px; }
.mini-section { border: 1.5px solid var(--border); border-radius: 14px; padding: 18px; }
.mini-title { font-size: 14px; font-weight: 800; color: var(--dark); margin-bottom: 14px; }
.location-hint { font-size: 12px; color: var(--muted); margin-top: 8px; display: flex; align-items: center; gap: 4px; }

/* Urgency options */
.urgency-opts { display: flex; flex-direction: column; gap: 8px; }
.urgency-opt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; background: white; transition: .15s; text-align: left; width: 100%;
}
.urgency-opt:hover { border-color: var(--green); }
.urgency-opt.active { border-color: var(--green); background: var(--green-bg); }
.uo-left { display: flex; align-items: center; gap: 10px; }
.uo-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.urgency-opt.active .uo-icon { background: var(--green); }
.uo-name { font-size: 13px; font-weight: 700; color: var(--dark); }
.uo-desc { font-size: 11px; color: var(--muted); }
.urgency-opt.active .uo-name { color: var(--green); }
.uo-radio {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border);
  flex-shrink: 0; transition: .15s;
}
.uo-radio.filled { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 3px white; }
.urgency-opt.active .uo-radio { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 3px white; }

/* Contact options */
.contact-opts { display: flex; flex-direction: column; gap: 8px; }
.contact-opt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; background: white; transition: .15s; text-align: left; width: 100%;
}
.contact-opt:hover { border-color: var(--green); }
.contact-opt.active { border-color: var(--green); background: var(--green-bg); }
.co-left { display: flex; align-items: center; gap: 8px; }
.co-icon { font-size: 18px; }
.co-name { font-size: 13px; font-weight: 700; color: var(--dark); }
.co-desc { font-size: 11px; color: var(--muted); }
.contact-opt.active .co-name { color: var(--green); }
.co-check {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border);
  flex-shrink: 0; font-size: 10px; color: transparent; display: flex; align-items: center; justify-content: center;
}
.co-check.filled { background: var(--green); border-color: var(--green); color: white; font-weight: 900; }
.contact-opt.active .co-check { background: var(--green); border-color: var(--green); color: white; font-weight: 900; }

/* Buttons */
.btn-next-full {
  width: 100%; background: linear-gradient(180deg, #1a8a47, var(--green));
  color: white; border: none; border-radius: var(--radius-sm);
  padding: 15px; font-size: 16px; font-weight: 800; cursor: pointer;
  margin-top: 24px; transition: .15s;
}
.btn-next-full:hover { background: linear-gradient(180deg, #22a055, var(--green-mid)); }
.btn-next {
  background: linear-gradient(180deg, #1a8a47, var(--green));
  color: white; border: none; border-radius: var(--radius-sm);
  padding: 13px 24px; font-size: 15px; font-weight: 800; cursor: pointer; transition: .15s;
}
.btn-next:hover { background: linear-gradient(180deg, #22a055, var(--green-mid)); }
.btn-back {
  background: white; color: var(--dark); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 22px; font-size: 15px;
  font-weight: 700; cursor: pointer; transition: .15s;
}
.btn-back:hover { background: var(--bg); }
.btn-outline {
  background: white; color: var(--green); border: 1.5px solid var(--green);
  border-radius: var(--radius-sm); padding: 9px 18px; font-size: 14px;
  font-weight: 700; cursor: pointer; transition: .15s;
}
.btn-outline:hover { background: var(--green-bg); }
.btn-green-sm {
  background: var(--green); color: white; border: none;
  border-radius: var(--radius-sm); padding: 9px 18px; font-size: 14px;
  font-weight: 700; cursor: pointer; transition: .15s;
}
.btn-green-sm:hover { background: var(--green-mid); }
.form-nav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; gap: 12px; }

/* ============================================================
   JOB LAYOUT (Step 1 sidebar)
   ============================================================ */
.job-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.job-sidebar { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 90px; }
.sidebar-card {
  background: white; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow);
}
.sc-title { font-size: 15px; font-weight: 800; color: var(--dark); margin-bottom: 14px; }
.sc-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 8px 0; }
.sc-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.sc-val, .sc-val-cat { font-size: 14px; font-weight: 600; color: var(--dark); text-align: right; }
.sc-val.muted { color: var(--muted); font-weight: 500; }
.sc-val-cat { display: flex; align-items: center; gap: 4px; }
.cat-icon { font-size: 16px; }
.sc-divider { height: 1px; background: var(--bg); margin: 0; }
.howworks { background: #FFFBEB; }
.hw-step { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
.hw-num { width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: white; font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.hw-t { font-size: 13px; font-weight: 700; }
.hw-s { font-size: 12px; color: var(--muted); }
.safehands { background: #F0FDF4; border-color: var(--green-border); }
.sh-title { font-size: 14px; font-weight: 800; color: var(--green); margin-bottom: 10px; }
.sh-item { font-size: 13px; font-weight: 600; color: #047136; padding: 3px 0; }
.nz-map-mini { display: flex; justify-content: center; margin-top: 10px; }

/* ============================================================
   YOUR DETAILS (Step 2)
   ============================================================ */
.details-layout { display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; }

/* OTP row */
.otp-send-row { display: flex; gap: 10px; align-items: stretch; }
.otp-send-row .flex1 { flex: 1; }
.btn-otp-send {
  background: var(--green); color: white; border: none; border-radius: var(--radius-sm);
  padding: 11px 18px; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.otp-success { display: flex; align-items: center; gap: 6px; color: var(--green); font-size: 13px; font-weight: 600; margin-top: 6px; }
.otp-inputs-row { display: flex; gap: 8px; margin: 12px 0; }
.otp-box {
  width: 46px; height: 52px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  text-align: center; font-size: 20px; font-weight: 800; color: var(--dark); background: white;
}
.otp-box:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(11,107,53,.1); outline: none; }
.otp-box.filled { border-color: var(--green); background: var(--green-bg); }
.otp-box.otp-verified { border-color: var(--green); background: var(--green); color: white; }
.otp-verified-msg { display:flex; align-items:center; gap:8px; color:#166534; font-size:14px; font-weight:700; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; padding:10px 14px; margin-bottom:16px; }
.otp-btn-waiting { opacity: 0.45; cursor: not-allowed !important; }
.resend-line { font-size: 13px; color: var(--muted); }
.green-text { color: var(--green); font-weight: 700; }

/* Toggle switch */
.toggle-switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; cursor: pointer; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
  position: absolute; inset: 0; background: #CBD5E1; border-radius: 999px;
  cursor: pointer; transition: .3s; display: block;
}
.toggle-switch input:checked + .toggle-track { background: var(--green); }
.toggle-thumb {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  background: white; border-radius: 50%; transition: .3s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  pointer-events: none;
}
/* thumb is nested INSIDE toggle-track, so use descendant selector */
.toggle-switch input:checked + .toggle-track .toggle-thumb { left: 23px; }

/* Optional sections */
.optional-section {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 16px; margin-bottom: 16px;
}
.opt-sec-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.opt-sec-title { font-size: 14px; font-weight: 800; color: var(--dark); }
.opt-sec-sub   { font-size: 13px; color: var(--muted); margin-top: 3px; }

/* Trust sidebar */
.trust-sidebar { display: flex; flex-direction: column; gap: 12px; padding-top: 72px; }
.trust-item-card {
  background: white; border: 1px solid var(--border); border-radius: 14px;
  padding: 16px; display: flex; align-items: flex-start; gap: 12px;
}
.trust-icon-circle {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 18px; flex-shrink: 0; font-weight: 900;
}
.trust-icon-circle.green { background: var(--green-bg); color: var(--green); }
/* .blue/.gray hold real emoji (🔒️/🎧), unlike .green's plain ✓ glyph —
   same emoji-font-stack fix as .trust-icon/.tf-icon above, so these
   render as real color emoji instead of the body font's flat glyph. */
.trust-icon-circle.blue  { background: #EFF6FF; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif; }
.trust-icon-circle.gray  { background: var(--bg); font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif; }
.trust-item-title { font-size: 14px; font-weight: 800; color: var(--dark); }
.trust-item-sub   { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.nz-map-card { display: flex; justify-content: center; padding: 8px; }

/* ============================================================
   REVIEW (Step 3)
   ============================================================ */
.review-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.btn-edit-top {
  background: white; color: var(--green); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 16px; font-size: 14px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-top: 4px;
}
.review-card {
  background: white; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.review-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--border);
}
.review-card-icon {
  width: 38px; height: 38px; border-radius: 50%; background: var(--green-bg);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.review-card-title { font-size: 16px; font-weight: 800; }
.btn-edit-sm {
  background: none; border: 1.5px solid var(--border); border-radius: 8px;
  padding: 5px 14px; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--green);
}
.review-card-body { padding: 8px 22px 16px; }
.rv-row {
  display: flex; align-items: flex-start; padding: 10px 0;
  border-bottom: 1px solid var(--bg); gap: 16px;
}
.rv-row:last-child { border-bottom: none; }
.rv-key { width: 200px; font-size: 13px; color: var(--muted); flex-shrink: 0; padding-top: 1px; }
.rv-val { font-size: 14px; font-weight: 600; color: var(--dark); flex: 1; }
.emergency-pill {
  background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA;
  padding: 3px 10px; border-radius: 6px; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
}
.photo-preview-row { display: flex; gap: 8px; }
.photo-thumb {
  width: 56px; height: 56px; border-radius: 8px;
  border: 1px solid var(--border); flex-shrink: 0;
}
.photo-more {
  width: 56px; height: 56px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--dark);
}
.post-job-btn {
  width: 100%; background: linear-gradient(180deg, #1a8a47, var(--green));
  color: white; border: none; border-radius: 14px; padding: 17px;
  font-size: 17px; font-weight: 900; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 20px; transition: .15s;
}
.post-job-btn:hover { background: linear-gradient(180deg, #22a055, var(--green-mid)); }
.post-hint { text-align: center; font-size: 13px; color: var(--muted); margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; }

/* Review sidebar */
.rv-trust-list { margin: 10px 0 14px; }
.rv-trust-item { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--green); padding: 4px 0; }
.nz-skyline-mini { border-radius: 8px; overflow: hidden; }
.what-next { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.wn-item { display: flex; align-items: flex-start; gap: 10px; }
.wn-icon { font-size: 18px; flex-shrink: 0; }
.wn-t { font-size: 13px; font-weight: 700; }
.wn-s { font-size: 12px; color: var(--muted); }
.info-safe-card { background: #FFFBEB; border-color: #FDE68A; }
.is-icon { font-size: 22px; margin-bottom: 8px; }
.is-title { font-size: 14px; font-weight: 800; color: #92400E; }
.is-body  { font-size: 13px; color: #78350F; margin-top: 4px; line-height: 1.4; }

/* ============================================================
   POSTED (Step 4)
   ============================================================ */
.posted-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
.posted-success-block { text-align: left; }
.posted-check {
  width: 60px; height: 60px; border-radius: 50%; background: var(--green-bg);
  border: 2px solid var(--green-border); display: flex; align-items: center;
  justify-content: center; font-size: 26px; font-weight: 900; color: var(--green);
  margin-bottom: 18px;
}
.posted-title { font-size: 28px; font-weight: 900; color: var(--dark); margin-bottom: 6px; }
.posted-sub { color: var(--muted); }
.pn-title { font-size: 16px; font-weight: 800; margin-bottom: 16px; }
.posted-steps { display: flex; flex-direction: column; gap: 14px; }
.ps-item { display: flex; align-items: flex-start; gap: 12px; }
.ps-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--green-bg); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.ps-t { font-size: 14px; font-weight: 700; }
.ps-s { font-size: 13px; color: var(--muted); }
.notif-banner {
  background: var(--green-bg); border: 1px solid var(--green-border); border-radius: 12px;
  padding: 14px 18px; font-size: 14px; color: var(--green); margin-top: 18px; line-height: 1.6;
}
.posted-btn-row { display: flex; gap: 12px; margin-top: 20px; }
.kiwi-scene {
  background: linear-gradient(135deg, #e8f5e9, #f0fdf4);
  border-radius: 20px; padding: 24px; display: flex; align-items: center;
  justify-content: center; margin-bottom: 20px; min-height: 190px;
}
.job-summary-card { background: white; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); border: 1px solid var(--border); }
.jsc-title { font-size: 16px; font-weight: 800; margin-bottom: 14px; }
.jsc-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--bg); }
.jsc-row:last-child { border-bottom: none; }
.jsc-icon { font-size: 18px; }
.jsc-key { font-size: 13px; color: var(--muted); width: 130px; }
.jsc-val { font-size: 14px; font-weight: 600; color: var(--dark); flex: 1; }
.emergency-pill.sm { font-size: 12px; padding: 2px 8px; }
.job-id-row { font-size: 12px; color: var(--muted); text-align: right; margin-top: 14px; }

/* ============================================================
   FINDING TRADIES
   ============================================================ */
.finding-center {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; flex: 1; padding: 40px 20px; text-align: center;
}
.finding-title { font-size: 26px; font-weight: 900; margin-bottom: 8px; }
.finding-sub   { font-size: 15px; color: var(--muted); margin-bottom: 32px; }
.search-checklist { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 360px; margin-bottom: 28px; }
.sc-item { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--green); }
.sc-item.dim { color: var(--muted); }
.sc-dot {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid currentColor;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; flex-shrink: 0;
}
.sc-dot.done { background: var(--green); border-color: var(--green); color: white; }
.finding-note {
  background: white; border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 20px; font-size: 14px; color: var(--muted); max-width: 380px; line-height: 1.6;
}

/* ============================================================
   TOP TRADIES
   ============================================================ */
.tradie-list { display: flex; flex-direction: column; gap: 14px; }
.tradie-card-item {
  background: white; border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 20px; transition: .15s; cursor: default;
}
.tradie-card-item:hover { box-shadow: var(--shadow-lg); }
.tradie-card-item.best { border-color: var(--green); }
.best-badge-wrap { margin-bottom: 12px; }
.best-badge {
  background: #FFFBEB; color: #D97706; border: 1px solid #FDE68A;
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 6px;
}
.tci-main { display: flex; align-items: flex-start; gap: 16px; }
.tci-avatar {
  width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900; color: white;
}
.tci-avatar.sm { width: 46px; height: 46px; font-size: 14px; }
.tci-info { flex: 1; }

/* Name row with verified tick inline */
.tci-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.tci-name { font-size: 16px; font-weight: 800; color: var(--dark); }
.verified-tick {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--green-bg); color: var(--green);
  border: 1px solid var(--green-border);
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
  white-space: nowrap; flex-shrink: 0;
}

/* Badge row (Licensed, Insured) */
.tci-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.licensed-pill {
  background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE;
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
}
.insured-pill {
  background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0;
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
}

.tci-meta { display: flex; gap: 14px; font-size: 13px; color: var(--muted); flex-wrap: wrap; margin-bottom: 6px; }
.avail-now  { color: var(--green); font-weight: 700; }
.avail-soon { color: #C2410C; font-weight: 700; }
.tci-price { font-size: 14px; color: var(--dark); }
.tci-actions { display: flex; gap: 10px; margin-top: 14px; }

/* ============================================================
   TRADIE PROFILE
   ============================================================ */
.profile-card { background: white; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); margin-bottom: 16px; }
.profile-top { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 24px; }
.profile-avatar {
  width: 90px; height: 90px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 900; color: white;
}
.profile-name { font-size: 22px; font-weight: 900; margin-bottom: 6px; }
.profile-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-phone-row {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  background: var(--green-bg); border: 1px solid var(--green-border);
  border-radius: 9px; padding: 8px 12px; width: fit-content;
}
.profile-phone-num {
  font-size: 16px; font-weight: 800; color: var(--green);
  text-decoration: none; letter-spacing: .02em;
}
.profile-phone-num:hover { text-decoration: underline; }
.profile-phone-hint { font-size: 11px; color: var(--muted); }
.verify-badge {
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px;
}
.verify-badge.blue  { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.verify-badge.green { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.verify-badge.gray  { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.icon-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--border);
  background: white; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center;
}
.profile-stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; background: var(--bg); border-radius: 14px; padding: 18px; margin-bottom: 24px; }
.stat-box { text-align: center; }
.stat-val { font-size: 20px; font-weight: 900; color: var(--dark); }
.stat-lbl { font-size: 12px; color: var(--muted); margin-top: 3px; }
.profile-section { margin-bottom: 22px; }
.ps-title { font-size: 15px; font-weight: 800; color: var(--dark); margin-bottom: 10px; }
.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.svc-item { font-size: 14px; color: var(--green); font-weight: 600; }
.work-photos { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.work-photo { aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--bg); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.profile-action-bar {
  background: white; border-top: 1px solid var(--border); padding: 16px 28px;
  display: flex; gap: 10px; border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 -4px 20px rgba(0,0,0,.06);
}
.pa-chat { background: var(--green-bg); color: var(--green); border: 1.5px solid var(--green-border); border-radius: var(--radius-sm); padding: 12px 20px; font-size: 14px; font-weight: 700; cursor: pointer; flex: 1; }
.pa-call { background: white; color: var(--dark); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px 20px; font-size: 14px; font-weight: 700; cursor: pointer; flex: 1; }
.pa-invite { background: var(--green); color: white; border: none; border-radius: var(--radius-sm); padding: 12px 24px; font-size: 14px; font-weight: 800; cursor: pointer; flex: 2; }

/* ============================================================
   JOB RESPONSES
   ============================================================ */
.responses-count { font-size: 16px; font-weight: 800; color: var(--dark); margin-bottom: 14px; }
.response-card { background: white; border: 1.5px solid var(--border); border-radius: var(--radius); padding: 18px; display: flex; gap: 14px; margin-bottom: 12px; }
.resp-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900; color: white; }
.resp-msg { font-size: 14px; color: var(--text); margin-top: 8px; line-height: 1.5; }
.resp-actions { display: flex; gap: 8px; margin-top: 10px; }
.keep-looking-banner { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; font-size: 14px; color: var(--muted); margin-top: 16px; }

/* ============================================================
   JOB IN PROGRESS
   ============================================================ */
.inprogress-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; height: calc(100vh - 120px); }
.map-panel { background: #e0f2e9; border-radius: var(--radius); overflow: hidden; }
.map-panel svg { width: 100%; height: 100%; }
.progress-side-panel { background: white; border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); overflow-y: auto; }
.tradie-on-way { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.on-way-badge { background: #F0FDF4; color: var(--green); border: 1px solid var(--green-border); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 6px; flex-shrink: 0; }
.eta-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; background: var(--bg); border-radius: 12px; padding: 14px; margin-bottom: 20px; }
.eta-item { text-align: center; }
.eta-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.eta-val { font-size: 14px; font-weight: 800; margin-top: 3px; }
.timeline { display: flex; flex-direction: column; }
.tl-item { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 18px; position: relative; }
.tl-item:not(:last-child)::before { content: ''; position: absolute; left: 17px; top: 34px; bottom: 0; width: 2px; background: var(--border); }
.tl-item.done:not(:last-child)::before { background: var(--green); }
.tl-dot {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border);
  background: white; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; z-index: 1;
}
.tl-dot.done  { background: var(--green); border-color: var(--green); color: white; font-weight: 900; }
.tl-dot.empty { background: white; border-color: var(--border); }
.tl-t    { font-size: 14px; font-weight: 700; }
.tl-time { font-size: 13px; color: var(--muted); margin-top: 2px; }
.progress-actions { display: flex; gap: 10px; margin-top: 20px; }

/* ============================================================
   TRADIE SIGNUP – DESKTOP AUTH CARD
   ============================================================ */
.tradie-flow-bg { background: #F1F5F9; justify-content: center; align-items: center; padding: 40px 20px; min-height: 100vh; }
.auth-card-wrap { display:flex; justify-content:center; align-items:center; width:100%; }
.auth-card {
  background: white; border-radius: 20px; box-shadow: 0 8px 40px rgba(0,0,0,.10);
  padding: 40px 44px; width: 100%; max-width: 540px;
}
.auth-logo-row { display:flex; align-items:center; gap:10px; margin-bottom:28px; }
.auth-title { font-size:24px; font-weight:900; color:var(--dark); margin:0 0 6px; }
.auth-sub { font-size:14px; color:var(--muted); margin:0 0 24px; }
.auth-form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:4px; }
.auth-phone-row { display:flex; align-items:center; gap:10px; }
.ph-flag-pill {
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 12px; font-size:14px; white-space:nowrap; cursor:pointer; background:white;
}
.auth-security-note {
  display:flex; align-items:flex-start; gap:10px; background:#f0fdf4;
  border:1px solid #bbf7d0; border-radius:10px; padding:12px 14px;
  font-size:13px; color:#166534; margin:16px 0;
}
.btn-primary-full {
  width:100%; padding:13px; background:var(--green); color:white;
  border:none; border-radius:var(--radius-sm); font-size:15px; font-weight:700;
  cursor:pointer; margin-bottom:12px;
}
.btn-primary-full:hover { background:var(--green-mid); }

/* Validation */
input.field-error, textarea.field-error {
  border: 1.5px solid #ef4444 !important;
  background: #fff5f5 !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px #ef4444 !important;
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.validation-toast {
  background: #fef2f2; border: 1.5px solid #fca5a5; color: #dc2626;
  font-size: 13px; font-weight: 600; border-radius: 10px;
  padding: 12px 16px; margin-bottom: 16px;
}
.auth-link-row { text-align:center; font-size:14px; color:var(--muted); margin-bottom:28px; }
.btn-back-link { background:none; border:none; color:var(--muted); font-size:14px; cursor:pointer; display:block; margin:4px auto 0; }
.btn-back-link:hover { color:var(--dark); }
.auth-steps-row { display:flex; align-items:flex-start; justify-content:center; gap:0; margin-top:8px; }
.as-step { display:flex; flex-direction:column; align-items:center; gap:6px; }
.as-num {
  width:30px; height:30px; border-radius:50%; border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--muted); background:white;
}
.as-step.active .as-num { border-color:var(--green); background:var(--green); color:white; }
.as-step.done .as-num { border-color:var(--green); background:var(--green); color:white; }
.as-lbl { font-size:11px; color:var(--muted); font-weight:600; white-space:nowrap; }
.as-step.active .as-lbl { color:var(--green); }
.as-line { flex:1; height:2px; background:var(--border); margin:14px 4px 0; min-width:32px; }
.as-line.done { background:var(--green); }

/* Auth split-page layout (tradie signup / verify pages) */
.auth-split-body { display:flex; flex:1; min-height:0; overflow:hidden; }
.auth-split-left {
  flex:1; background:linear-gradient(160deg, var(--green) 0%, #043d17 100%);
  display:flex; flex-direction:column; justify-content:center; padding:60px 52px;
  overflow-y:auto;
}
.asl-badge { display:inline-block; background:rgba(255,255,255,.15); color:white; font-size:13px; font-weight:700; border-radius:20px; padding:6px 14px; margin-bottom:24px; }
.asl-title { font-size:30px; font-weight:900; color:white; margin:0 0 14px; line-height:1.25; }
.asl-sub { font-size:15px; color:rgba(255,255,255,.8); margin:0 0 32px; line-height:1.6; }
.auth-benefit-list { list-style:none; padding:0; margin:0 0 36px; display:flex; flex-direction:column; gap:0; }
.auth-benefit-list li { display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:14px; color:rgba(255,255,255,.9); line-height:1.5; }
.abl-icon { font-size:20px; flex-shrink:0; margin-top:1px; }
.asl-stats-row { display:flex; gap:32px; }
.asl-stat { text-align:center; }
.asl-stat-num { font-size:22px; font-weight:900; color:white; }
.asl-stat-lbl { font-size:12px; color:rgba(255,255,255,.65); margin-top:2px; }
.auth-split-right {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#f8fafc; overflow-y:auto; padding:40px 48px;
}
.auth-split-form { width:100%; max-width:460px; }
.auth-split-form .auth-title { font-size:26px; margin-bottom:6px; }
.auth-split-form .auth-sub { margin-bottom:22px; }

/* Welcome dashboard desktop banner */
.welcome-desk-banner {
  background:linear-gradient(135deg, var(--green) 0%, #064d20 100%);
  border-radius:16px; padding:28px 32px; display:flex; align-items:center;
  gap:24px; flex-wrap:wrap;
}

/* Trade type selector on services page */
.trade-type-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:12px;
}
.trade-type-card {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  border:2px solid var(--border); border-radius:12px; padding:16px 10px;
  cursor:pointer; transition:all .15s; font-size:13px; font-weight:600; color:var(--dark);
  background:white;
}
.trade-type-card input { display:none; }
.trade-type-card:has(input:checked) { border-color:var(--green); background:#f0fdf4; color:var(--green); }
.ttc-icon { font-size:24px; }

/* "Add Trade" tile — lets a tradie type in a trade that isn't listed at all */
.add-trade-tile {
  border-style:dashed; color:var(--muted); background:var(--bg);
}
.add-trade-tile:hover { border-color:var(--green); color:var(--green); background:white; }
.add-trade-tile .ttc-icon { color:var(--green); }

/* "Other" toggle tile — reveals MORE_TRADES tiles (Handyman, Pest Control,
   etc.) right in the grid. Not a real trade selection itself, so it gets
   its own .active state rather than the :has(input:checked) rule above. */
.more-trades-toggle.active { border-color:var(--green); background:#f0fdf4; color:var(--green); }
.more-trades-toggle.active .ttc-icon { color:var(--green); }

.add-trade-row { display:flex; gap:8px; margin-top:12px; }
.add-trade-row .form-input { flex:1; }

/* Business team roster — one row per staff member, with a checkbox grid
   so a single person can be assigned multiple trades */
.team-member-row {
  border: 1px solid var(--border); border-radius: 12px; padding: 14px;
  margin-bottom: 12px; background: var(--bg);
}
.tmr-top { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.tmr-top .tm-firstname, .tmr-top .tm-lastname { flex: 1; }
.tmr-trades-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.tmr-trades-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.tmr-trade-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--border); border-radius: 20px; padding: 6px 12px;
  font-size: 12.5px; font-weight: 600; color: var(--dark); background: white;
  cursor: pointer; transition: all .15s;
}
.tmr-trade-pill input { display: none; }
.tmr-trade-pill:has(input:checked) { border-color: var(--green); background: #f0fdf4; color: var(--green); }
.tmr-trade-pill-custom .custom-tag, .tmr-trade-pill-custom .svc-review-tag { margin-left: 2px; }
.tmr-add-trade-tile {
  border-style: dashed; color: var(--muted); background: var(--bg); cursor: pointer;
}
.tmr-add-trade-tile:hover { border-color: var(--green); color: var(--green); background: white; }

/* Custom (typed-in) trade card — same shape as trade-type-card, plus a
   remove button and a "Custom" tag, matching the custom-service pattern */
.custom-trade-card { position:relative; }
.custom-trade-card .trade-remove-btn {
  position:absolute; top:-8px; right:-8px;
  width:22px; height:22px; border:1.5px solid white; border-radius:50%;
  background:#FEE2E2; color:#DC2626; font-size:14px; font-weight:700; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.15); transition:background .15s, transform .15s;
  z-index:1;
}
.custom-trade-card .trade-remove-btn:hover { background:#DC2626; color:white; transform:scale(1.08); }

/* Services by trade section */
.services-trade-section { margin-bottom:24px; }
.sts-title {
  font-size:14px; font-weight:800; color:var(--dark); margin-bottom:10px;
  padding-bottom:6px; border-bottom:2px solid var(--border);
}

/* Licence sections per trade */
.licence-section {
  background:#f8fafc; border:1.5px solid var(--border); border-radius:12px;
  padding:20px 22px; margin-bottom:20px;
}
.lic-section-title {
  font-size:15px; font-weight:800; color:var(--dark); margin:0 0 16px;
  display:flex; align-items:center; gap:8px;
}
.trade-licence-requirement {
  font-size:12.5px; font-weight:600; border-radius:var(--radius-sm);
  padding:8px 12px; margin:-8px 0 16px;
}
.trade-licence-requirement.req-required {
  color:var(--green-mid); background:var(--green-bg); border:1px solid var(--green-border);
}
.trade-licence-requirement.req-recommended {
  color:#92400E; background:#FFFBEB; border:1px solid #FDE68A;
}

/* Skip button */
.btn-skip {
  padding:10px 20px; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  background:white; color:var(--muted); font-size:14px; font-weight:600; cursor:pointer;
}
.btn-skip:hover { border-color:var(--green); color:var(--green); }
.mobile-frame-wrap { display: flex; justify-content: center; align-items: center; width: 100%; }
.mobile-frame {
  background: white; border-radius: 36px; box-shadow: 0 30px 80px rgba(0,0,0,.14);
  padding: 24px 22px 28px; width: 100%; max-width: 390px;
  overflow: hidden; max-height: 90vh; overflow-y: auto;
}
.mobile-frame::-webkit-scrollbar { width: 4px; }
.mobile-frame::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.phone-status {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; font-size: 12px; font-weight: 700; color: var(--dark);
}
.phone-time { font-size: 14px; font-weight: 900; }
.phone-header-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.ph-back-btn {
  background: none; border: none; cursor: pointer; font-size: 24px;
  color: var(--dark); padding: 2px 6px; margin-bottom: 12px; display: block;
}
.ph-notif-btn { background: none; border: none; cursor: pointer; font-size: 20px; }
.phone-logo-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; justify-content: center; }

/* Phone form */
.phone-form h2 { font-size: 20px; font-weight: 900; color: var(--dark); margin-bottom: 4px; }
.ph-sub { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.ph-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.ph-input {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 13px; font-size: 14px; color: var(--dark);
  background: white; transition: .15s; display: block;
}
.ph-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(11,107,53,.1); outline: none; }
.ph-flag-row { display: flex; gap: 8px; margin-bottom: 10px; }
.ph-flag {
  background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 13px; font-size: 14px; font-weight: 600; display: flex;
  align-items: center; gap: 6px; cursor: pointer; flex-shrink: 0; white-space: nowrap;
}
.ph-security-note {
  display: flex; align-items: flex-start; gap: 7px; background: var(--green-bg);
  border: 1px solid var(--green-border); border-radius: var(--radius-sm);
  padding: 10px 13px; font-size: 12px; color: var(--green); font-weight: 600;
  margin: 12px 0; line-height: 1.5;
}
.ph-btn-primary {
  width: 100%; background: linear-gradient(180deg, #1a8a47, var(--green));
  color: white; border: none; border-radius: 14px; padding: 15px;
  font-size: 15px; font-weight: 800; cursor: pointer; margin-top: 10px; transition: .15s;
}
.ph-btn-primary:hover { background: linear-gradient(180deg, #22a055, var(--green-mid)); }
.ph-link { text-align: center; margin-top: 12px; font-size: 13px; color: var(--muted); }
.ph-link a { color: var(--green); font-weight: 700; cursor: pointer; }

/* Signup steps row */
.signup-steps-row { display: flex; align-items: center; margin-top: 20px; gap: 0; }
.ss-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.ss-num {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border);
  background: white; font-size: 11px; font-weight: 800; display: flex;
  align-items: center; justify-content: center; color: var(--muted);
}
.ss-step.active .ss-num { background: var(--green); border-color: var(--green); color: white; }
.ss-step.done .ss-num   { background: var(--green); border-color: var(--green); color: white; }
.ss-lbl { font-size: 9px; color: var(--muted); font-weight: 600; text-align: center; }
.ss-step.active .ss-lbl { color: var(--green); }
.ss-line { flex: 1; height: 2px; background: var(--border); }
.ss-line.done { background: var(--green); }

/* Verify OTP */
.verify-target-row { font-size: 14px; font-weight: 600; color: var(--dark); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.edit-link { color: var(--green); font-size: 13px; font-weight: 700; cursor: pointer; }

/* Welcome dashboard */
.welcome-header-block {
  background: linear-gradient(135deg, var(--green-dark), var(--green));
  border-radius: 18px; padding: 18px; margin-bottom: 14px;
}
.welcome-avatar { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.welcome-completion { display: flex; align-items: flex-end; gap: 14px; margin-top: 4px; }
.progress-bar-wrap { height: 6px; background: rgba(255,255,255,.3); border-radius: 3px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: white; border-radius: 3px; }
.completion-circle {
  width: 54px; height: 54px; border-radius: 50%; border: 5px solid rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  font-weight: 900; color: white; flex-shrink: 0;
}
.phone-progress-card { background: var(--bg); border-radius: 14px; padding: 16px; margin-bottom: 12px; }
.ph-prog-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600;
}
.ph-prog-item.done { color: var(--green); }
.ph-circle { color: var(--muted); font-size: 16px; margin-right: 4px; }
.pct { font-size: 12px; color: var(--muted); font-weight: 500; }
.why-complete { background: var(--green-bg); border: 1px solid var(--green-border); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
.phone-nav-bar {
  display: flex; justify-content: space-around; border-top: 1px solid var(--border);
  padding: 10px 0 4px; margin: 18px -22px -28px;
}
.pnb-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600; color: var(--muted);
  background: none; border: none; cursor: pointer; padding: 4px 8px;
}
.pnb-item.active-nav { color: var(--green); }

/* Phone step progress bar */
.ph-step-progress {
  height: 4px; background: var(--border); border-radius: 2px;
  margin-bottom: 18px; overflow: hidden;
}
.ph-step-progress::after { content: ''; display: block; height: 100%; width: var(--fill, 0%); background: var(--green); }
.ph-avatar-upload { display: flex; justify-content: center; margin: 16px 0; position: relative; width: fit-content; margin: 16px auto; }
.ph-avatar-circle {
  width: 80px; height: 80px; border-radius: 50%; background: var(--bg);
  display: flex; align-items: center; justify-content: center; font-size: 42px; border: 2px solid var(--border);
}
.ph-cam-btn {
  position: absolute; right: 0; bottom: 4px; width: 28px; height: 28px;
  border-radius: 50%; background: var(--green); color: white; border: none;
  font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ph-label { font-size: 13px; font-weight: 700; color: var(--dark); margin: 10px 0 6px; }
.ph-toggle-row { display: flex; border: 1.5px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.ph-seg-btn { flex: 1; border: none; padding: 11px; font-size: 14px; font-weight: 800; background: white; cursor: pointer; transition: .15s; }
.ph-seg-btn.active { background: var(--green); color: white; }
.ph-upload-box {
  display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; font-size: 13px; font-weight: 600;
}
.ph-upload-box.dashed { border-style: dashed; color: var(--muted); cursor: pointer; justify-content: center; }
.ph-checks { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.ph-check-item { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; cursor: pointer; }
.ph-check-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--green); cursor: pointer; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.area-tag { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; }
.add-area-btn { background: white; border: 1.5px dashed var(--border); border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--green); }
.area-tag-empty { font-size: 13px; color: var(--text-muted, #888); font-style: italic; }
.areas-picker { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 14px; background: #fafafa; max-height: 320px; overflow-y: auto; }
.areas-region-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.areas-region-count { font-size: 12px; color: var(--text-muted, #888); font-weight: 600; }
.area-select-all-btn { background: var(--green); color: white; border: none; border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.area-select-all-btn:hover { opacity: .9; }
.areas-district-group { display: flex; flex-direction: column; gap: 8px; }
.areas-district-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.areas-district-name { font-size: 12px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--text-muted, #888); }
.area-select-all-link { background: none; border: none; padding: 0; font-size: 12px; font-weight: 700; color: var(--green); cursor: pointer; text-decoration: underline; }
.areas-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.area-chip { background: white; border: 1.5px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text, #333); transition: all .15s ease; }
.area-chip:hover { border-color: var(--green); }
.area-chip.selected { background: var(--green-bg); color: var(--green); border-color: var(--green-border); font-weight: 700; }
.ph-location-hint { background: var(--green-bg); border-radius: 8px; padding: 10px 13px; font-size: 12px; color: var(--green); font-weight: 600; margin: 10px 0; display: flex; align-items: center; gap: 6px; }
.day-btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.day-btn { border: 1.5px solid var(--border); border-radius: 8px; padding: 9px 13px; font-size: 13px; font-weight: 800; background: white; cursor: pointer; transition: .15s; }
.day-btn.active { background: var(--green); color: white; border-color: var(--green); }

/* ============================================================
   TRADIE ONBOARDING OVERVIEW
   ============================================================ */
.onboarding-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ob-card {
  background: white; border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 22px; display: flex; flex-direction: column; gap: 8px; cursor: pointer;
  transition: .15s;
}
.ob-card:hover { border-color: var(--green); box-shadow: var(--shadow); }
.ob-icon { font-size: 36px; width: 60px; height: 60px; background: var(--green-bg); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.ob-title { font-size: 16px; font-weight: 800; color: var(--dark); }
.ob-desc  { font-size: 13px; color: var(--muted); }
.ob-list  { list-style: none; font-size: 13px; color: var(--text); line-height: 1.8; margin-top: 6px; flex: 1; }
.ob-start-btn {
  background: var(--green); color: white; border: none; border-radius: var(--radius-sm);
  padding: 10px 20px; font-size: 14px; font-weight: 700; cursor: pointer; margin-top: 12px; transition: .15s; align-self: flex-start;
}
.ob-start-btn:hover { background: var(--green-mid); }

/* ============================================================
   TRADIE REVIEW & SUBMIT
   ============================================================ */
.review-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.rc-card {
  background: white; border: 1.5px solid var(--border); border-radius: 14px;
  padding: 16px; display: flex; flex-direction: column; gap: 4px;
}
.rcc-icon  { font-size: 22px; margin-bottom: 6px; }
.rcc-title { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.rcc-data  { font-size: 13px; font-weight: 600; color: var(--dark); line-height: 1.6; flex: 1; margin-top: 4px; }
.rcc-edit  { background: none; border: none; color: var(--green); font-size: 13px; font-weight: 700; cursor: pointer; padding: 0; text-align: left; margin-top: 8px; }
.confirm-label { display: flex; align-items: center; gap: 12px; background: var(--bg); border: 1.5px solid var(--border); border-radius: 12px; padding: 14px 18px; font-size: 14px; font-weight: 600; cursor: pointer; }
.confirm-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--green); cursor: pointer; flex-shrink: 0; }

/* ============================================================
   TRADIE SUBMITTED
   ============================================================ */
.submitted-center { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; padding: 60px 20px; text-align: center; }
.submitted-img { margin-bottom: 24px; }
.sn-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; font-weight: 600; color: var(--green); border-bottom: 1px solid var(--bg); }
.sn-item:last-child { border-bottom: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .job-layout, .review-layout, .posted-layout, .details-layout, .inprogress-layout { grid-template-columns: 1fr; }
  .job-sidebar { position: static; }
  .three-col-grid { grid-template-columns: 1fr 1fr; }
  .profile-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .review-cards-grid, .onboarding-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .page-body { padding: 16px; }
  .app-header { padding: 0 16px; }
  .header-nav { display: none; }
  .three-col-grid { grid-template-columns: 1fr; }
  .form-row-2, .ph-row-2 { grid-template-columns: 1fr; }
  .upload-row { grid-template-columns: 1fr; }
  .review-cards-grid, .onboarding-grid { grid-template-columns: 1fr; }
  .posted-layout { grid-template-columns: 1fr; }
  .profile-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .landing-nz-badge { display: none; }
  /* Same single static image as desktop — just displayed smaller, in
     normal flow, at the top instead of as an absolutely-positioned
     full-bleed backdrop. Absolute overlay text over a wide landscape photo
     doesn't work on a narrow/tall phone screen, so below this width the
     photo becomes a plain top banner and everything else stacks under it
     as regular content instead of floating on top of it.
     display:flex + order (not source order) puts them back in the right
     visual sequence — the <img> comes before the <header> in the HTML
     (it has to, so it can sit as z-index:0 behind everything on desktop),
     so without this the photo rendered ABOVE the header on mobile once it
     dropped into normal flow. Background switches to white too: below the
     image, .landing-page's own dark green was showing straight through
     behind the headline (which is styled in dark navy for contrast against
     the light sky in the photo), making it unreadable. */
  /* .landing-page.active (not bare .landing-page) for the display value —
     bare .landing-page{display:flex} has the same specificity as the base
     .page{display:none} rule and sits later in the file, so it was
     winning and forcing #home to stay visible on mobile even when it
     wasn't the active page, stacking its content above whatever page
     actually was (e.g. showing both the home cards AND the customer-login
     form on the same screen). Non-display properties are harmless to
     apply unconditionally since they only matter while visible anyway. */
  .landing-page { min-height: 0; overflow: visible; background: #fff; flex-direction: column; padding-bottom: 0; }
  .landing-page.active { display: flex; }
  .app-header.landing-header { order: -2; position: relative; background: #fff; border-bottom: 1px solid var(--border); }
  .app-header.landing-header::before { display: none; }
  /* Photo drops entirely on mobile rather than becoming a top banner —
     at this width it was mostly just the map/pins (already cropped hard
     toward the photo side to begin with), added scroll height, and wasn't
     needed for the page to make sense. */
  .landing-bg { display: none; }
  .landing-header .brand-logo { width: 40px; height: 40px; }
  .hero-overlay {
    position: static; width: auto; max-width: none; min-width: 0;
    padding: 24px 20px 32px;
  }
  .hero-subtitle { text-shadow: none; }
  .hero-title { font-size: 30px; }
  .landing-cards { gap: 10px; margin-bottom: 24px; }
  /* Trust bar: shown on mobile/tablet too, stacked below the two cards.
     It just drops out of the row layout above (already 100%/max-width:
     560px, white card, flex-wrap:nowrap with shrinking icon/text — all
     of that still works stacked on a white page background, nothing
     here is photo-dependent).
     Kiwis-supporting-Kiwis banner: rolled back to hidden on mobile, per
     request — back to how it was before that change. */
  .hero-trust-bar { margin-bottom: 16px; }
  .hero-banner { display: none; }
  /* Auth split pages (job-poster/tradie email entry, tradie signup, etc.)
     — .auth-split-left/-right were an unstyled 50/50 flex row with no
     mobile handling at all, so on a narrow screen each column got squeezed
     to ~half the viewport width and every heading/paragraph wrapped one
     or two words per line. The left panel is marketing copy the two big
     cards on the home page already cover, so it's dropped here rather
     than stacked — the email form (the actual task on this page) gets
     the full width instead. */
  .auth-split-left { display: none; }
  .auth-split-right { flex: 1 1 100%; padding: 32px 20px; }
}
@media (max-width: 480px) {
  .landing-cards { grid-template-columns: 1fr; max-width: 320px; }
}

/* ============================================================
   JOB STEP 1 – ICON GRID (Image 2 design)
   ============================================================ */
.job-main-col { display: flex; flex-direction: column; }

/* 4-step stepper variant */
.stepper-4 { margin: 18px 0 24px; }
.stepper-4 .step-line { min-width: 20px; }

/* Category icon grid: 5 columns x 2 rows */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}
.cat-btn {
  position: relative;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 16px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  line-height: 1.3;
}
.cat-btn:hover {
  border-color: var(--green);
  box-shadow: 0 2px 8px rgba(11,107,53,.08);
}
.cat-btn.active {
  border-color: var(--green);
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(11,107,53,.08);
}
.cat-icon-wrap {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cat-icon-wrap svg { width: 100%; height: 100%; }
/* Catalog-driven category buttons (see renderJobCategoryGrid() in app.js)
   render the trade's jobIcon SVG when the catalog has one (this class);
   otherwise fall back to its plain emoji icon (.cat-icon-emoji below). */
.cat-icon-wrap.cat-icon-emoji { font-size: 28px; line-height: 1; }
.cat-check-badge {
  position: absolute;
  top: 6px; right: 6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--green);
  color: white;
  font-size: 10px;
  font-weight: 900;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.cat-btn.active .cat-check-badge { display: flex; }

/* "Other" job category — sub-service picker */
.other-services-panel {
  border: 1.5px solid var(--green-border);
  background: var(--green-bg);
  border-radius: 12px;
  padding: 16px 18px 18px;
  margin: 10px 0 4px;
}
.other-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.other-svc-chip {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.other-svc-chip:hover { border-color: var(--green); }
.other-svc-chip.active {
  border-color: var(--green);
  border-width: 2px;
  background: var(--green-bg);
  color: var(--green-mid);
  box-shadow: 0 0 0 3px rgba(11,107,53,.08);
}
@media (max-width: 700px) {
  .other-svc-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Job-poster top-of-section search (#jobCategorySearch) — floats as a real
   dropdown over the category grid instead of a chip row that pushes the
   grid down. Positioned off .job-cat-search-wrap (position:relative comes
   from the shared .input-icon-wrap rule above). See
   renderCategorySearchResults() in app.js. */
.job-cat-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .1);
  max-height: 280px;
  overflow-y: auto;
  z-index: 30;
  padding: 6px;
}
.job-cat-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.job-cat-search-item:hover, .job-cat-search-item.active { background: var(--green-bg); color: var(--green-mid); }
.job-cat-search-item .jcs-icon { font-size: 18px; width: 22px; text-align: center; flex-shrink: 0; }
.job-cat-search-item .jcs-icon svg { width: 20px; height: 20px; display: block; }
.job-cat-search-item .jcs-sub { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.job-cat-search-empty { padding: 10px; font-size: 13px; color: var(--muted); }

.other-custom-row { display: flex; gap: 8px; margin-top: 14px; }
.other-custom-row .form-input { flex: 1; background: white; }
.other-custom-tags {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.other-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--green-mid);
  background: white; border: 1.5px solid var(--green-border);
  border-radius: 999px; padding: 6px 8px 6px 12px;
}
.other-tag-remove {
  border: none; background: transparent; color: var(--muted);
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.other-tag-remove:hover { background: #FEE2E2; color: #DC2626; }

/* Single upload box */
.section-hint { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
/* Confirms a search-picked category that has no chip of its own in the
   "Other" panel below (searchOnly trades — see ApprovedTrade.searchOnly in
   schema.prisma — and typed custom categories) so the pick doesn't look
   like it silently did nothing. See updateOtherSelectedHint() in app.js. */
.other-selected-hint { color: var(--green-mid); font-weight: 700; }
/* Address autocomplete */
.address-dropdown { position:absolute; top:100%; left:0; right:0; background:white; border:1.5px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.1); z-index:100; max-height:240px; overflow-y:auto; margin-top:4px; }
.address-option { padding:10px 14px; font-size:14px; cursor:pointer; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; gap:10px; }
.address-option:last-child { border-bottom:none; }
.address-option:hover { background:#f0fdf4; }
.address-option .addr-icon { color:var(--green); font-size:16px; flex-shrink:0; }
.address-loading { padding:12px 14px; font-size:13px; color:var(--muted); text-align:center; }
/* Same street name can exist in more than one NZ city — each suggestion
   shows street on top and suburb/city below, with city bolded, so picking
   the wrong one (e.g. a "Newcastle Street" in Māhia instead of the
   "Newcastle Road" in Hamilton you meant) is much harder to do by mistake. */
.addr-option-text { display: flex; flex-direction: column; gap: 1px; }
.addr-option-sub { font-size: 12.5px; color: var(--muted); }
.addr-option-sub strong { color: var(--green-dark); font-weight: 700; }

/* Confirmed address — shown after selecting a full street-level match from
   the dropdown, in place of the raw single-line input. Each part (street /
   suburb / city / postcode) gets its own labeled, boxed field matching the
   look of the real inputs around it (Property/Unit Number, Gate/Door Code),
   instead of being squashed into one comma-separated line or plain text. */
.addr-confirmed { margin-bottom: 14px; }
.addr-confirmed-top { display: flex; align-items: flex-start; gap: 12px; }
.addr-confirmed-top .addr-confirmed-field { flex: 1; }
.addr-confirmed-field { margin-bottom: 10px; }
.addr-postcode-row { max-width: 160px; }
.addr-readonly {
  background: #f8fafc; color: var(--text); cursor: default;
}
.addr-readonly:focus { border-color: var(--border); box-shadow: none; }
/* City is bolded — of everything in the confirmed address, it's the detail
   most worth double-checking at a glance (see the Newcastle Road/Street
   mixup this was added for). */
.addr-readonly-emphasis { font-weight: 700; color: var(--green-dark); }
.addr-change-btn {
  background: none; border: none; color: var(--green); font-weight: 700; font-size: 13px;
  cursor: pointer; white-space: nowrap; padding: 9px 0 0; text-decoration: underline;
}
.addr-change-btn:hover { color: var(--green-dark); }
.address-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.upload-box-single {
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  transition: .15s;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.upload-box-single:hover { border-color: var(--green); background: var(--green-bg); }
.upload-box-single.upload-box-done { border-style: solid; border-color: var(--green-border); background: var(--green-bg); }
.ub-icon-svg { display: flex; align-items: center; justify-content: center; }

.job-photo-previews { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.job-photo-thumb { position: relative; width: 72px; height: 72px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: #f1f5f9; }
.job-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.job-photo-thumb.uploading img { opacity: .5; }
.job-photo-thumb .jpt-spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); background: rgba(255,255,255,.6); }
.job-photo-thumb .jpt-remove { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; border: none; font-size: 12px; line-height: 18px; text-align: center; cursor: pointer; padding: 0; }
.job-photo-thumb .jpt-error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #b91c1c; background: #fee2e2; text-align: center; padding: 2px; }

/* Form footer buttons: Cancel (left) + Next: Location (right) */
.form-footer-btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  gap: 12px;
}
.btn-cancel {
  background: white;
  color: var(--dark);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: .15s;
}
.btn-cancel:hover { background: var(--bg); }
.btn-next-loc {
  background: linear-gradient(180deg, #1a8a47, var(--green));
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: .15s;
}
.btn-next-loc:hover { background: linear-gradient(180deg, #22a055, var(--green-mid)); }

/* Sidebar header (icon + title) */
.sc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.sc-header-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--green-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sc-header-icon.hw-icon { background: #FFFBEB; }
.summary-card { border-left: 3px solid var(--green); }
.howworks { background: #FFFBEB; }

/* Safe hands card with side-by-side NZ map */
.safehands { background: #EFF6FF; border-color: #BFDBFE; }
.sh-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.sh-title { font-size: 14px; font-weight: 800; color: #1E40AF; }
.sh-body { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sh-item { font-size: 13px; font-weight: 600; color: #1E40AF; padding: 3px 0; }
.nz-map-mini { width: 60px; flex-shrink: 0; display: flex; justify-content: center; }
.nz-map-mini svg { width: 60px; height: 84px; }

/* Trust footer bar (bottom of job-step1) */
.trust-footer-bar {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 18px 28px;
  background: white;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.tf-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Explicit emoji-font stack + the ️ variation selector already added on
   these emoji in index.html — see the comment on .trust-icon above for
   why (the body's own webfont has a flat single-color glyph for some of
   these codepoints, which otherwise wins over the OS's real color emoji
   font). */
.tf-icon { font-size: 22px; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif; }
.tf-title { font-size: 13px; font-weight: 700; color: var(--dark); }
.tf-sub   { font-size: 12px; color: var(--muted); }

@media (max-width: 900px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-footer-bar { gap: 16px; flex-wrap: wrap; }
}

/* ============================================================
   UTILITY
   ============================================================ */
.d-none  { display: none !important; }
.hidden  { display: none !important; }

/* ============================================================
   SHARED CONFIRM/ALERT MODAL (kfConfirm/kfAlert in app.js) —
   replaces the browser's native confirm()/alert() so destructive or
   informational popups look like part of the app instead of an
   unstyled browser dialog. Self-contained (kf- prefix) since index.html
   doesn't share the .modal-overlay/.db-btn-primary classes the dashboard
   pages use for the same thing.
   ============================================================ */
.kf-modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 999;
  display: flex; align-items: flex-start; justify-content: center; padding: 60px 20px; overflow-y: auto;
}
.kf-modal-card {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 420px;
}
.kf-modal-header {
  display: flex; align-items: center; justify-content: space-between; padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.kf-modal-title { font-size: 16px; font-weight: 800; color: var(--dark); }
.kf-modal-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--muted); padding: 4px 8px; }
.kf-modal-close:hover { color: var(--dark); }
.kf-modal-body { padding: 20px 22px; }
.kf-modal-message { font-size: 14px; color: var(--dark); line-height: 1.5; white-space: pre-line; margin: 0; }
.kf-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.kf-modal-btn-primary {
  background: var(--green); color: #fff; border: none; border-radius: 8px;
  padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.kf-modal-btn-primary:hover { background: var(--green-dark); }
.kf-modal-btn-secondary {
  background: var(--bg); color: var(--muted); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.kf-modal-btn-secondary:hover { border-color: var(--green); color: var(--green); }

/* ============================================================
   STEP 2 – AUTH TABS (New / Existing customer)
   ============================================================ */
.auth-tabs {
  display: flex;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  margin: 16px 0 16px;
  gap: 4px;
}
.auth-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 16px;
  border: none;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  color: var(--muted);
  background: transparent;
  transition: .15s;
}
.auth-tab:hover { color: var(--dark); background: rgba(0,0,0,.04); }
.auth-tab.active {
  background: white;
  color: var(--green);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Password show/hide toggle */
.input-icon-wrap { position: relative; }
.pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
  color: var(--muted);
  z-index: 2;
}
/* make room for the eye button */
.input-icon-wrap:has(.pw-toggle) .form-input { padding-right: 38px; }

/* Demo credentials hint */
.demo-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: #1E40AF;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* Field error message */
.field-error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #DC2626;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  padding: 9px 13px;
  margin-top: 4px;
}

/* Login success message */
.login-success {
  background: var(--green-bg);
  border: 1px solid var(--green-border);
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  padding: 9px 13px;
  margin-top: 4px;
}

/* OTP verify row (boxes + verify button side by side) */
.otp-verify-row { display: flex; align-items: center; gap: 12px; }
.otp-verify-row .otp-inputs-row { flex: 1; }

/* Gate message above locked Next button */
.otp-gate-msg {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 13px;
  color: #92400E;
  font-weight: 600;
  margin-bottom: 10px;
}

/* Locked Next button */
.btn-next-locked {
  opacity: .45;
  cursor: not-allowed !important;
}
.btn-next-locked:hover { background: linear-gradient(180deg, #1a8a47, var(--green)) !important; }

/* OTP gate banner (existing customer) */
.otp-gate-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--green-bg);
  border: 1px solid var(--green-border);
  border-radius: 12px;
  padding: 14px 16px;
}

/* Link button */
.link-btn {
  background: none;
  border: none;
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.link-btn:hover { text-decoration: underline; }

/* Forgot password panel */
.forgot-pw-panel {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  margin-top: 8px;
}
.fpw-title { font-size: 15px; font-weight: 800; color: var(--dark); margin-bottom: 4px; }
.fpw-sub   { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.fpw-actions { display: flex; gap: 10px; margin-top: 12px; }

/* Login welcome card (after login) */
.login-welcome {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--green-bg);
  border: 1px solid var(--green-border);
  border-radius: 12px;
  padding: 14px 18px;
}
.lw-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--green);
  color: white;
  font-size: 16px;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lw-name { font-size: 15px; font-weight: 800; color: var(--dark); }
.lw-sub  { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ============================================================
   TRADIE DESKTOP ONBOARDING LAYOUT
   ============================================================ */

/* Upwork-style profile strength bar */
.profile-strength-bar {
  background: white; border-bottom: 1px solid var(--border);
  padding: 10px 28px; display: flex; align-items: center; gap: 16px;
}
.psb-info { display: flex; flex-direction: column; gap: 1px; min-width: 160px; }
.psb-label { font-size: 12px; font-weight: 800; color: var(--dark); }
.psb-step { font-size: 11px; color: var(--muted); }
.psb-track { flex: 1; height: 10px; background: #e2e8f0; border-radius: 6px; overflow: hidden; }
.psb-fill { height: 100%; background: linear-gradient(90deg, var(--green) 0%, #22c55e 100%); border-radius: 6px; transition: width .4s ease; }
.psb-pct { font-size: 15px; font-weight: 900; color: var(--green); min-width: 44px; text-align: right; }

/* Step counter badge in header */
.step-counter {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

/* Mini stepper in header */
.tradie-onboard-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  justify-content: center;
  padding: 0 16px;
  overflow: hidden;
}
.tos-item {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  padding: 2px 4px;
}
.tos-item.active {
  color: var(--green);
  font-weight: 800;
}
.tos-item.done {
  color: var(--green-mid);
  font-weight: 700;
}
.tos-line {
  flex: 1;
  height: 1.5px;
  background: var(--border);
  min-width: 8px;
  max-width: 24px;
}
.tos-line.done {
  background: var(--green-border);
}

/* Two-column layout: form + sidebar */
.tradie-desk-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 28px;
  align-items: start;
  padding: 28px 0;
}

/* Progress sidebar */
.tradie-desk-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 24px;
}

.tds-card {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.tds-card.tds-tip {
  background: var(--green-bg);
  border-color: var(--green-border);
}
.tds-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 14px;
}
.tds-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.tds-step:last-child { border-bottom: none; }
.tds-step.done { color: var(--green-mid); font-weight: 600; }
.tds-step.active { color: var(--dark); font-weight: 800; }

.tds-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--border);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tds-dot.active {
  background: var(--green);
  color: white;
}
.tds-step.done .tds-dot {
  background: var(--green-bg);
  color: var(--green);
  border: 1.5px solid var(--green-border);
}

/* Avatar row for personal details */
.td-avatar-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
}
.td-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--green-bg);
  border: 2px solid var(--green-border);
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Services check grid (2 columns) */
.services-check-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}
.svc-check-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: border-color .15s;
}
.svc-check-card:has(input:checked) {
  border-color: var(--green);
  background: var(--green-bg);
  color: var(--green-mid);
  font-weight: 700;
}
.svc-check-card input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--green);
  flex-shrink: 0;
}

/* Custom service chip — remove ("x") button */
.svc-custom-card { position: relative; padding-right: 34px; }
.svc-remove-btn {
  position: absolute;
  top: 50%; right: 8px;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.svc-remove-btn:hover { background: #FEE2E2; color: #DC2626; }

/* Licence uploaded file row */
.licence-uploaded-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--green-bg);
  border: 1.5px solid var(--green-border);
  border-radius: var(--radius-sm);
}

/* Custom service — add-your-own row under each trade's service grid */
.custom-svc-row { display: flex; gap: 8px; margin-top: 4px; margin-bottom: 10px; }
.custom-svc-input { flex: 1; }
.custom-svc-add-btn { white-space: nowrap; padding: 0 18px; }
.custom-tag {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--green-mid); background: var(--green-bg); border: 1px solid var(--green-border);
  border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: middle;
}
.svc-licence-tag {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  color: #92400E; background: #FFFBEB; border: 1px solid #FDE68A;
  border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: middle;
}
.svc-licence-tag.approved { color: var(--green-mid); background: var(--green-bg); border-color: var(--green-border); }
.svc-licence-tag.warn { color: #92400E; background: #FFFBEB; border-color: #FDE68A; }
.svc-review-tag {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  color: #1D4ED8; background: #EFF6FF; border: 1px solid #BFDBFE;
  border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: middle;
}
.custom-licence-note {
  font-size: 12.5px; color: #92400E; background: #FFFBEB; border: 1px solid #FDE68A;
  border-radius: var(--radius-sm); padding: 8px 12px; margin: -2px 0 14px;
}
.custom-review-note {
  font-size: 12.5px; color: #1D4ED8; background: #EFF6FF; border: 1px solid #BFDBFE;
  border-radius: var(--radius-sm); padding: 8px 12px; margin: 2px 0 14px;
}
.custom-licence-section { border-top: 2px dashed var(--border); padding-top: 20px; margin-top: 8px; }
.custom-licence-item { margin-bottom: 18px; }

/* Inline licence-check card shown immediately after adding a custom service */
.custom-licence-action {
  border-radius: var(--radius-sm); padding: 12px 14px; margin: 6px 0 10px;
  font-size: 13px; background: #FFFBEB; border: 1px solid #FDE68A;
}
.custom-licence-action .cla-title { font-weight: 700; color: #92400E; margin-bottom: 4px; }
.custom-licence-action .cla-sub { color: var(--muted); font-size: 12.5px; margin-bottom: 10px; }
.custom-licence-action.cla-resolved { background: var(--green-bg); border-color: var(--green-border); color: var(--green-mid); font-weight: 600; }
.custom-licence-action.cla-warn { background: #FFFBEB; border-color: #FDE68A; color: #92400E; font-weight: 600; }
.custom-licence-action.cla-none { background: var(--green-bg); border-color: var(--green-border); color: var(--green-mid); font-weight: 600; }

/* Job matching banners (customer job-posting flow) */
.match-keywords-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted); margin-bottom: 14px;
}
.match-tag {
  display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--green-mid);
  background: var(--green-bg); border: 1px solid var(--green-border); border-radius: 999px; padding: 3px 12px;
}
.registered-match-banner {
  display: none; align-items: center; gap: 10px; font-size: 14px; font-weight: 600;
  color: var(--green-mid); background: var(--green-bg); border: 1.5px solid var(--green-border);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px;
}

/* Segmented toggle (Yes/No) desktop version */
.seg-toggle {
  display: inline-flex;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
}
.seg-toggle .ph-seg-btn {
  padding: 8px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
}
.seg-toggle .ph-seg-btn.active {
  background: white;
  color: var(--green);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Navigation row for tradie form steps */
.form-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.btn-back {
  background: white;
  color: var(--dark);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.btn-back:hover { border-color: var(--green); color: var(--green); }
.btn-next {
  background: linear-gradient(180deg, #1a8a47, var(--green));
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.btn-next:hover { opacity: .9; }

/* btn-outline for photo upload */
.btn-outline {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  color: var(--dark);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-block;
}
.btn-outline:hover { border-color: var(--green); color: var(--green); }

/* Location hint (green info bar) */
.location-hint {
  font-size: 13px;
  color: var(--green-mid);
  background: var(--green-bg);
  border: 1px solid var(--green-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 600;
}

/* Responsive: stack on small screens */
@media (max-width: 900px) {
  .tradie-desk-layout { grid-template-columns: 1fr; }
  .tradie-desk-sidebar { display: none; }
  .tradie-onboard-stepper { display: none; }
  .services-check-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Select input wrapper */
.select-wrap { position: relative; }
.select-wrap::after {
  content: '▾';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
  font-size: 13px;
}
.form-select {
  width: 100%;
  padding: 11px 38px 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: white;
  appearance: none;
  cursor: pointer;
}
.form-select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(11,107,53,.08); }

/* Two-column form row — tighter margin-bottom for this section only.
   NOTE: this used to also redeclare display/grid-template-columns/gap,
   which was a straight duplicate of the base .form-row-2 rule up near
   line 432. Because both rules have identical specificity (one class),
   this later one always won regardless of the @media(max-width:768px)
   rule that stacks .form-row-2 to a single column on mobile — the
   licence-step "Licence number" / "Licence expiry date" fields (and any
   other .form-row-2 usage) stayed squeezed into 2 columns on mobile no
   matter the screen width, which is what made the expiry date's native
   calendar picker practically untappable. Only the genuinely different
   property (margin-bottom) is kept here now, so the mobile stacking rule
   is free to apply again. */
.form-row-2 {
  margin-bottom: 4px;
}