/* LW12 Client Portal — Mercury-inspired theme
 * ---------------------------------------------------------------
 * Geist font, warm gray background, frosted surfaces,
 * soft brown accent, minimal borders.
 */

:root {
  --bg: #EFEEEB;
  --surface: #FFFFFF;
  --surface-frosted: rgba(255, 255, 255, 0.35);
  --border: #EBEBEA;
  --border-strong: #D9D8D5;
  --text: #1A1A17;
  --text-2: #4A4944;
  --text-3: #8B8A83;
  --placeholder: #C0C0B8;

  --accent: #7A6047;
  --accent-translucent: rgba(122, 96, 71, 0.75);
  --accent-light: rgba(122, 96, 71, 0.08);

  --green: #3D6B4F;
  --green-light: rgba(61, 107, 79, 0.12);
  --red: #B5403D;
  --red-light: rgba(181, 64, 61, 0.1);
  --amber: #8C6519;
  --amber-light: rgba(140, 101, 25, 0.1);

  --r: 16px;
  --r-sm: 12px;
  --r-xs: 8px;

  --font: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; }

html, body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 12px; color: var(--text-2); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Centered auth/onboarding card layout ─── */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border-radius: var(--r);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  padding: 40px 36px;
}

.auth-card-wide { max-width: 600px; }
.auth-card-invite { max-width: 720px; }

.auth-logo {
  display: flex; justify-content: center; margin-bottom: 28px;
}
.auth-logo img { height: 28px; }
.auth-logo-text { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--text); }

.auth-heading { font-size: 22px; font-weight: 600; margin-bottom: 6px; text-align: center; }
.auth-sub { font-size: 13px; color: var(--text-3); margin-bottom: 24px; text-align: center; }

/* ─── Form fields ─── */
.form-row { margin-bottom: 14px; }
.form-label {
  display: block; font-size: 12px; font-weight: 500; color: var(--text-2);
  margin-bottom: 6px; letter-spacing: 0.01em;
}

.form-input, .form-select {
  width: 100%; height: 52px;
  padding: 0 16px;
  font: inherit;
  font-size: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--r-sm);
  background: var(--surface-frosted);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text);
  outline: none;
  transition: border-color 120ms, background 120ms;
}

.form-input::placeholder { color: var(--placeholder); }
.form-input:focus, .form-select:focus {
  border-color: var(--accent);
  background: var(--surface);
}

.form-input[readonly], .form-input.locked {
  background: rgba(0, 0, 0, 0.03);
  color: var(--text-2);
  cursor: default;
}

.input-with-icon { position: relative; }
.input-with-icon .form-input { padding-right: 44px; }
.input-icon {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); cursor: pointer; display: flex; align-items: center;
}
.input-icon svg { width: 18px; height: 18px; }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 20px;
  font: inherit; font-size: 14px; font-weight: 500;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 120ms;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--accent-translucent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  border-color: rgba(122, 96, 71, 0.1);
}
.btn-primary:hover { background: var(--accent); color: #FFFFFF; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover { border-color: var(--border-strong); background: #FAFAF9; }

.btn-block { width: 100%; }
.btn-lg { height: 52px; font-size: 15px; }

/* ─── Password helper ─── */
.password-check {
  margin-top: 8px; font-size: 12px; color: var(--text-3);
  display: flex; align-items: center; gap: 6px;
}
.password-check.valid { color: var(--green); }
.password-check .dot {
  width: 14px; height: 14px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.06); color: transparent; font-size: 10px;
}
.password-check.valid .dot { background: var(--green); color: #FFF; }

/* ─── Auth footer ─── */
.auth-foot {
  margin-top: 20px; text-align: center;
  font-size: 12px; color: var(--text-3);
}
.auth-foot a { color: var(--text-2); }

/* ─── Alerts / flash ─── */
.flash {
  padding: 10px 14px; border-radius: var(--r-sm); font-size: 13px;
  margin-bottom: 14px;
  border: 1px solid transparent;
}
.flash-success { background: var(--green-light); color: var(--green); border-color: rgba(61,107,79,0.25); }
.flash-danger  { background: var(--red-light); color: var(--red); border-color: rgba(181,64,61,0.25); }
.flash-warning { background: var(--amber-light); color: var(--amber); border-color: rgba(140,101,25,0.25); }
.flash-info    { background: var(--accent-light); color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════ */
/* APP SHELL — top bar + optional left sidebar                         */
/* ═══════════════════════════════════════════════════════════════════ */

.shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  height: 64px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px;
  position: sticky; top: 0; z-index: 20;
}
.topbar-logo { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.topbar-logo img { height: 22px; }
.topbar-right { display: flex; align-items: center; gap: 14px; }

.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-light); color: var(--accent);
  font-weight: 500; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Avatar menu */
.avatar-menu { position: relative; }
.avatar-btn { background: none; border: none; padding: 0; cursor: pointer; }
.avatar-dd {
  position: absolute; right: 0; top: 42px;
  min-width: 180px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg); padding: 6px;
  display: none;
}
.avatar-menu.open .avatar-dd { display: block; }
.avatar-dd a {
  display: block; padding: 8px 12px; font-size: 13px; color: var(--text);
  border-radius: 6px;
}
.avatar-dd a:hover { background: var(--bg); text-decoration: none; }

.shell-body { display: flex; flex: 1; }

.side {
  width: 260px; background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 24px 18px;
  flex-shrink: 0;
}

.side-counter {
  font-size: 28px; font-weight: 600; letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.side-counter .muted { color: var(--text-3); font-weight: 400; }

.side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  font-size: 13px; color: var(--text-2);
  margin-bottom: 2px;
  border-left: 2px solid transparent;
  cursor: default;
}
.side-item.active {
  background: var(--bg); color: var(--text);
  font-weight: 500;
  border-left-color: var(--accent);
}
.side-item.done { color: var(--text-2); }
.side-item.conditional-hidden { display: none; }

.side-dot {
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 10px;
  border: 1.5px solid var(--border-strong);
  background: transparent;
  color: transparent;
}
.side-item.active .side-dot {
  background: var(--accent); border-color: var(--accent);
  color: #FFF;
}
.side-item.active .side-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #FFF; }
.side-item.done .side-dot {
  background: var(--green); border-color: var(--green); color: #FFF;
}
.side-item.done .side-dot::before { content: '✓'; font-weight: 700; }
.side-item.conditional .side-dot {
  border-style: dashed; border-color: var(--text-3);
}

/* ─── Main content ─── */
.main {
  flex: 1;
  padding: 40px 48px 80px;
  max-width: 820px;
  margin: 0 auto;
}
.main h1 { font-size: 24px; margin-bottom: 6px; }
.main .lead { font-size: 14px; color: var(--text-3); margin-bottom: 28px; }

/* ─── Wizard header: progress + nav ─── */
.progress {
  height: 4px; background: var(--border);
  position: fixed; top: 64px; left: 0; right: 0;
  z-index: 10;
}
.progress-bar {
  height: 100%; background: var(--accent);
  transition: width 200ms;
}

.wizard-nav {
  display: flex; justify-content: space-between; margin-top: 32px;
  padding-top: 20px; border-top: 1px solid var(--border);
}

/* ─── Cards ─── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 24px;
  margin-bottom: 16px;
}

/* ─── Holding page ─── */
.holding-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--green-light); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 700;
  margin: 0 auto 20px;
}

.next-list { list-style: none; padding: 0; margin: 20px 0 0; }
.next-list li {
  display: flex; gap: 14px; padding: 14px 0;
  border-top: 1px solid var(--border);
}
.next-list li:first-child { border-top: 0; }
.next-list .num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-light); color: var(--accent);
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.next-list .label { font-weight: 500; }
.next-list .desc { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* ─── Repeater (invite team) ─── */
/* Each teammate sits in its own card with a two-row layout:
   top row = labeled inputs (First/Last/Email) + remove button,
   bottom row = access checkboxes separated by a dashed divider.
   This gives the email input enough width to show a real address
   without wrapping or truncation. */
.member-card {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--surface);
}
.member-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 32px;
  gap: 12px;
  align-items: end;
}
.member-card-row .form-input { height: 40px; }
.member-card-label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
  display: block;
}
.member-card-remove {
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-xs);
  font-size: 18px; line-height: 1;
  color: var(--text-3);
  cursor: pointer;
  align-self: end;
  margin-bottom: 4px;
  transition: color 0.12s, border-color 0.12s;
}
.member-card-remove:hover {
  color: var(--red);
  border-color: var(--border-strong);
}
.member-card-access {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.member-card-checks {
  display: flex;
  gap: 14px;
}
.member-card-checks label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
}

.member-owner {
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  background: rgba(0,0,0,0.03);
  color: var(--text-2);
  margin-bottom: 8px;
  font-size: 13px;
}
.tag { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,0.06); color: var(--text-2); }

.btn-ghost {
  background: none; border: none; color: var(--text-3);
  cursor: pointer; padding: 4px 8px; font-size: 13px;
}
.btn-ghost:hover { color: var(--text); }

/* ─── Code input (2FA) ─── */
.code-input {
  display: flex; gap: 8px; justify-content: center; margin: 10px 0 18px;
}
.code-box {
  width: 52px; height: 60px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--r-sm);
  background: var(--surface-frosted);
  text-align: center;
  font-size: 22px; font-weight: 500;
  font-family: var(--font);
  outline: none;
}
.code-box:focus { border-color: var(--accent); background: var(--surface); }

/* ─── WSA signing placeholder ─── */
.wsa-box {
  background: var(--bg); border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm); padding: 60px 20px; text-align: center;
  color: var(--text-3); font-size: 13px;
  margin: 18px 0;
}

/* ─── Backup codes list ─── */
.codes-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 14px 0 20px;
}
.code-item {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px;
}

/* ─── Utility ─── */
.muted { color: var(--text-3); }
.center { text-align: center; }
.hstack { display: flex; gap: 10px; align-items: center; }
.mb-6 { margin-bottom: 6px; }
.mb-12 { margin-bottom: 12px; }
.mb-20 { margin-bottom: 20px; }

/* ═════════════════════════════════════════════════════════════════ */
/* Mockup-aligned form elements (used by step_1–step_6 templates)    */
/* ═════════════════════════════════════════════════════════════════ */

.fg { margin-bottom: 24px; }
.fl { font-size: 14px; font-weight: 500; color: var(--text-2); margin-bottom: 8px; display: block; }
.fl .rq { color: var(--red); margin-left: 1px; }
.fh { font-size: 12px; color: var(--text-3); margin-top: 6px; }
.fr { display: grid; gap: 16px; margin-bottom: 24px; }
.fr2 { grid-template-columns: 1fr 1fr; }
.fr3 { grid-template-columns: 1fr 1fr 1fr; }
.fr4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

/* Mockup-style inputs */
.fg input[type="text"], .fg input[type="email"], .fg input[type="tel"],
.fg input[type="url"], .fg input[type="number"], .fg input[type="date"],
.fg input[type="month"], .fg input[type="week"],
.fg select, .fg textarea,
.ctrl input, .ctrl select, .ctrl textarea {
  font-family: var(--font); width: 100%; height: 52px;
  padding: 0 16px; font-size: 15px;
  border: 1px solid rgba(0,0,0,0.06); border-radius: 12px;
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: var(--text); outline: none; transition: all .15s;
}
.fg textarea, .ctrl textarea { height: 88px; padding: 14px 16px; resize: vertical; }
.fg input:focus, .fg select:focus, .fg textarea:focus,
.ctrl input:focus, .ctrl select:focus, .ctrl textarea:focus {
  border-color: rgba(0,0,0,0.12); background: rgba(255,255,255,0.7);
  box-shadow: 0 0 0 3px rgba(0,0,0,.02);
}
.fg input.locked, .ctrl input.locked {
  background: rgba(255,255,255,0.2); color: var(--text-3);
  border-color: rgba(0,0,0,0.04);
}

/* Section divider */
.fs {
  font-size: 12px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .6px;
  padding: 32px 0 16px;
  border-top: 1px solid var(--border); margin-top: 12px;
}

/* Radio card (single-select) */
.rc {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px; cursor: pointer; transition: all .12s;
  margin-bottom: 10px; font-size: 15px;
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.rc:hover { border-color: rgba(0,0,0,0.1); background: rgba(255,255,255,0.55); }
.rc.on { border-color: rgba(0,0,0,0.12); background: rgba(255,255,255,0.7); }
.rc .dot {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border-strong); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.rc.on .dot { border-color: var(--accent); background: var(--accent); }
.rc.on .dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; }

/* Checkbox card (multi-select) */
.cc {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 18px; border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px; cursor: pointer; transition: all .12s;
  font-size: 15px;
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.cc:hover { border-color: rgba(0,0,0,0.1); background: rgba(255,255,255,0.55); }
.cc.on { border-color: rgba(0,0,0,0.12); background: rgba(255,255,255,0.7); }
.cc .box {
  width: 18px; height: 18px; border-radius: 4px;
  border: 1.5px solid var(--border-strong);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.cc.on .box { border-color: var(--accent); background: var(--accent); }
.cc.on .box::after {
  content: ''; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg); margin-top: -2px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Repeater */
.rph { display: flex; gap: 10px; font-size: 11px; color: var(--text-3);
  font-weight: 500; text-transform: uppercase; letter-spacing: .3px;
  padding-bottom: 6px; }
.rpr { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.rpr input, .rpr select { height: 46px; font-size: 14px; }
.rpx {
  width: 30px; height: 30px; border-radius: 6px;
  border: none; background: none; color: var(--text-3); cursor: pointer;
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .1s;
}
.rpx:hover { background: var(--red-light); color: var(--red); }
.rpa {
  font-family: var(--font); font-size: 14px; color: var(--accent);
  font-weight: 500; background: rgba(255,255,255,0.25);
  border: 1.5px dashed rgba(0,0,0,0.08); border-radius: 12px;
  padding: 14px; width: 100%; cursor: pointer;
  /* 24px bottom matches .fg form-group spacing so the next field/section
     (e.g. "Describe the work in detail" after "+ Add SKU") isn't cramped. */
  transition: all .12s; margin: 6px 0 24px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.rpa:hover { border-color: rgba(0,0,0,0.12); background: rgba(255,255,255,0.55); }

/* Upload zone */
.upload {
  border: 1.5px dashed rgba(0,0,0,0.08); border-radius: 12px;
  padding: 32px; text-align: center; cursor: pointer;
  transition: all .15s; background: rgba(255,255,255,0.25);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.upload:hover { border-color: rgba(0,0,0,0.12); background: rgba(255,255,255,0.55); }
.upload.has-file { border-style: solid; background: rgba(255,255,255,0.6); text-align: left; padding: 16px 20px; }
.upload-title { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.upload-sub { font-size: 12px; color: var(--text-3); }

/* Info / warn callouts */
.callout {
  display: flex; gap: 10px; padding: 12px 14px;
  border-radius: 10px; font-size: 13px; line-height: 1.5;
  margin-bottom: 20px;
}
.callout.info { background: var(--accent-light); color: var(--text-2); }
.callout.warn { background: #FEF7E6; color: var(--amber); }

/* Wizard buttons (mockup aliases) */
.btn { display: inline-flex; align-items: center; gap: 6px; }  /* reuse existing */
.btn-o {
  font-family: var(--font); font-size: 14px; font-weight: 500;
  padding: 13px 24px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  display: inline-flex; align-items: center; gap: 6px; transition: all .12s;
  cursor: pointer;
}
.btn-o:hover { background: var(--bg); }
.btn-full { width: 100%; justify-content: center; }
.nav { display: flex; gap: 10px; margin-top: 40px; }
.nav-right { margin-left: auto; }

/* Small inputs inline (for %/weight suffix patterns) */
.inline-suffix { display: flex; align-items: center; gap: 6px; }
.inline-suffix input { max-width: 96px; }
.inline-suffix .suf { color: var(--text-3); font-size: 13px; }

/* Section helper */
.field-heading { font-size: 14px; font-weight: 500; margin: 0 0 12px; }

/* ═════════════════════════════════════════════════════════════════ */
/* Step sidebar state refinements + mobile step nav                   */
/* ═════════════════════════════════════════════════════════════════ */

/* Conditional pending: dashed outline (step 2/6 not yet answered) */
.side-item.conditional.conditional-pending .side-dot {
  border-style: dashed;
  border-color: var(--text-3);
  background: transparent;
}
.side-item.conditional-skipped,
.side-item.conditional-hidden { display: none; }

/* Mobile step nav — hidden by default on desktop */
.mobile-step-nav { display: none; padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.mobile-step-nav select { height: 44px; width: 100%; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); font-family: var(--font); font-size: 14px; }

@media (max-width: 768px) {
  .side { display: none; }
  .mobile-step-nav { display: block; }
  .main { padding: 20px 20px 60px; }
  .fr2, .fr3, .fr4 { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════════════ */
/* Template download button (Step 3)                                 */
/* ═════════════════════════════════════════════════════════════════ */

.tpl-download-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; margin-bottom: 12px;
  font-size: 13px; font-weight: 500;
  color: var(--accent);
  background: var(--accent-light);
  border: 1px solid rgba(122, 96, 71, 0.2);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: all 120ms;
}
.tpl-download-btn:hover {
  background: rgba(122, 96, 71, 0.16);
  border-color: rgba(122, 96, 71, 0.32);
  text-decoration: none;
  color: var(--accent);
}
.tpl-download-btn svg { flex-shrink: 0; }

/* Country multi-select styling */
.country-multi {
  font-family: var(--font);
  width: 100%;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--r-sm);
  background: var(--surface-frosted);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: var(--text); outline: none;
}
.country-multi option { padding: 6px 10px; }
.country-multi option:checked {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 500;
}

/* ═════════════════════════════════════════════════════════════════ */
/* Searchable chip-based country selector                             */
/* ═════════════════════════════════════════════════════════════════ */

.country-selector { position: relative; }

.cs-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;
  min-height: 0;
}
.cs-chips:empty { display: none; }

.cs-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px;
  background: rgba(122, 96, 71, 0.15);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  font-size: 13px; font-weight: 500;
  line-height: 1.4;
}
.cs-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border: none; background: transparent;
  color: var(--accent); cursor: pointer;
  font-size: 14px; line-height: 1;
  border-radius: 4px;
  padding: 0;
}
.cs-chip-x:hover { background: rgba(122, 96, 71, 0.25); }

.cs-search-wrap { position: relative; }

.cs-search {
  width: 100%;
  height: 52px;
  padding: 14px 16px;
  font-family: var(--font); font-size: 14px;
  color: var(--text);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--r-sm);
  background: var(--surface-frosted);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  outline: none;
}
.cs-search:focus {
  border-color: var(--accent-translucent);
  background: var(--surface);
}

.cs-dropdown {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 240px; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  z-index: 50;
}
.cs-dropdown[hidden] { display: none !important; }

.cs-option {
  padding: 10px 14px;
  font-size: 14px; color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.cs-option:last-child { border-bottom: none; }
.cs-option:hover,
.cs-option.is-active { background: var(--accent-light); color: var(--accent); }
.cs-dropdown-empty {
  padding: 12px 14px;
  font-size: 13px; color: var(--text-3);
}

.cs-list {
  margin-top: 10px;
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.cs-list-item {
  padding: 8px 14px;
  font-size: 13px; color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.cs-list-item:last-child { border-bottom: none; }
.cs-list-item:hover { background: var(--accent-light); color: var(--accent); }

/* ═════════════════════════════════════════════════════════════════ */
/* Wizard Next button                                                  */
/* ═════════════════════════════════════════════════════════════════ */

/* The wizard is always-advance — users can move past required gaps
   and finish on Review & Submit — so the Next button keeps the
   solid brand-accent look at all times. .btn-ready is now applied
   directly in the wizard nav templates; the runtime JS toggle is
   a no-op but kept for backwards compat. */
.btn.btn-ready {
  opacity: 1;
  background: var(--accent);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(122, 96, 71, 0.25);
}
.btn.btn-ready:hover {
  background: var(--accent);
  color: #FFFFFF;
  box-shadow: 0 3px 12px rgba(122, 96, 71, 0.35);
}

/* ═════════════════════════════════════════════════════════════════ */
/* Wizard progress bar (above sidebar + content)                      */
/* ═════════════════════════════════════════════════════════════════ */

:root { --lw12-orange: #E8622A; --paper-deep: #E5E3DE; }

.wiz-progress {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 64px; z-index: 15;
}
.wiz-progress-label {
  font-size: 12px; font-weight: 500;
  color: var(--text-3);
  white-space: nowrap;
}
.wiz-progress-track {
  flex: 1; height: 4px;
  background: var(--paper-deep);
  border-radius: 2px; overflow: hidden;
}
.wiz-progress-fill {
  height: 100%;
  background: var(--lw12-orange);
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.wiz-progress-pct {
  font-size: 12px; font-weight: 500;
  color: var(--text-2);
  min-width: 36px; text-align: right;
}

@media (max-width: 768px) {
  .wiz-progress { padding: 10px 16px; gap: 10px; }
  .wiz-progress-label { display: none; }
}

/* Make the sidebar step counter subtler since primary progress is at top */
.side-counter { font-size: 22px; color: var(--text-2); }