/* ============================================================
   KIWIFIX – DESIGN SYSTEM
   ============================================================ */
*, *::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
   ============================================================ */
.landing-page    { position: relative; width: 100%; height: 100vh; overflow: hidden; background: #041F12; }
.landing-bg      { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; 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;
}

/* Cards: absolutely positioned, bottom-left over the landscape photo.
   left/bottom are % of the hero section (not fixed px) so this holds its
   relative position across different laptop screen widths/heights instead
   of drifting or clipping — a hardcoded px offset here was the root cause
   of the layout looking different from one screen size to the next. */
.landing-cards {
  position: absolute;
  left: 6%; bottom: 22%;
  width: 40%;
  max-width: 480px;
  z-index: 4;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
}
.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 16px; border: 2px solid transparent; text-align: center;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.landing-card:hover { transform: translateY(-10px); box-shadow: 0 10px 32px rgba(11,107,53,.25); border-color: var(--green); }
.landing-card img { width: 100%; height: auto; display: block; margin: 0 0 12px; }
.landing-card-btn {
  background: var(--green); color: #fff; border: none; border-radius: 20px;
  padding: 11px 0; font-size: 15px; font-weight: 700;
  cursor: pointer; width: calc(100% - 28px); pointer-events: none;
}
.landing-card:hover .landing-card-btn { background: var(--green-dark); }

/* .landing-trust and .landing-kiwi-support overlay styles removed — both
   are now baked directly into landing-hero.png, so the separate absolutely-
   positioned overlay divs (and their assets/trust-bar.png and
   assets/kiwi-support-kiwi.png images) are no longer used. */

/* ============================================================
   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; }
@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 stops being workable well before then, so drop
     it back to the plain sidebar-free wizard rather than crushing the
     form into a sliver. */
  .epf-sidebar { display: none !important; }
  body.edit-profile-mode .page.app-page.active { margin-left: 0; }
}
.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); }
.trust-icon-circle.blue  { background: #EFF6FF; }
.trust-icon-circle.gray  { background: var(--bg); }
.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-overlay { width: 100%; padding: 0 20px; justify-content: flex-end; padding-bottom: 32px; }
  .landing-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .landing-nz-badge { display: none; }
}

/* ============================================================
   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;
}
.tf-icon { font-size: 22px; }
.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 */
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 4px;
}