/* ============================================================
   QUICKBOOK — Register Wizard CSS
   4-Step Role-Based Wizard
   Extends original register.css with:
     · Wizard pane transitions (slide in/out)
     · Stepper dots + left panel guide
     · Role description cards
     · Category chip multi-select grid
     · Review panel cards
     · Password match indicator + requirements list
     · Admin info notice
     · Full mobile responsiveness (all breakpoints)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,800;0,900;1,700;1,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=DM+Mono:wght@400;500&display=swap');

/* ── OVERRIDE FONT / COLOR VARS ─────────────────────────── */
:root {
  --font-display: 'Playfair Display', serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;
  --gold:         #C9A84C;
  --gold-light:   rgba(201,168,76,.14);
  --gold-ring:    rgba(201,168,76,.28);
  --ink-deep:     #1A1410;
  --cream-bg:     #F9F7F2;
  --success:      #16A34A;
  --danger:       #DC2626;
  --radius-xs:    6px;
  --radius-sm:    10px;
  --radius:       14px;
  --radius-lg:    18px;
  --radius-xl:    22px;
}

/* ── PAGE LAYOUT ─────────────────────────────────────────── */
.register-page {
  display:    flex;
  min-height: 100vh;
}

/* ════════════════════════════════════════
   LEFT PANEL
════════════════════════════════════════ */
.register-left {
  width:           42%;
  flex-shrink:     0;
  background:      #1A1410;
  padding:         3.5rem 3.8rem;
  display:         flex;
  flex-direction:  column;
  gap:             1.6rem;
  color:           #F9F7F2;
  position:        relative;
  overflow:        hidden;
}

.register-left::before {
  content:        '';
  position:       absolute;
  top: -80px; right: -80px;
  width: 380px; height: 380px;
  background:     conic-gradient(from 135deg, rgba(201,168,76,.22), transparent 55%);
  border-radius:  50%;
  pointer-events: none;
}
.register-left::after {
  content:        '';
  position:       absolute;
  bottom: -80px; left: -50px;
  width: 320px; height: 320px;
  border-radius:  50%;
  background:     radial-gradient(circle, rgba(15,31,61,.7) 0%, transparent 70%);
  pointer-events: none;
}
.register-left-bg {
  position:        absolute; inset: 0;
  background:
    linear-gradient(rgba(249,247,242,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249,247,242,.022) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events:  none;
}

/* logo */
.register-left-logo {
  font-family:    'Playfair Display', serif;
  font-size:      1.55rem;
  font-weight:    700;
  font-style:     italic;
  color:          #F9F7F2;
  text-decoration:none;
  letter-spacing: .01em;
  position:       relative; z-index: 1;
  animation:      slideRight .5s ease both;
  display:        flex; align-items: center; gap: .5rem;
}
.register-left-logo span { color: #C9A84C; font-style: normal; font-weight: 700; }

.auth-logo-img {
  width: 42px; height: 42px; object-fit: contain; flex-shrink: 0;
  filter: brightness(1.1) drop-shadow(0 2px 6px rgba(201,168,76,.35));
}

/* heading */
.register-left h2 {
  font-family:    'Playfair Display', serif;
  font-size:      clamp(2rem, 3vw, 2.8rem);
  font-weight:    800;
  color:          #F9F7F2;
  line-height:    1.08;
  letter-spacing: -.02em;
  position:       relative; z-index: 1;
  animation:      slideRight .5s .06s ease both;
}
.register-left h2 em { color: #C9A84C; font-style: italic; }

.register-left-desc {
  font-size:   .9rem;
  color:       rgba(249,247,242,.5);
  line-height: 1.85;
  font-weight: 300;
  position:    relative; z-index: 1;
  animation:   slideRight .5s .12s ease both;
}

/* feature list */
.feature-list   { display: flex; flex-direction: column; gap: .65rem; position: relative; z-index: 1; }
.feature-item   { display: flex; align-items: center; gap: .9rem; font-size: .87rem; color: rgba(249,247,242,.7); font-weight: 300; animation: slideRight .5s ease both; }
.feature-item:nth-child(1) { animation-delay: .18s; }
.feature-item:nth-child(2) { animation-delay: .24s; }
.feature-item:nth-child(3) { animation-delay: .30s; }
.feature-item:nth-child(4) { animation-delay: .36s; }
.feature-item:nth-child(5) { animation-delay: .42s; }
.feature-check {
  width: 22px; height: 22px; border-radius: 7px;
  background: rgba(201,168,76,.18); border: 1px solid rgba(201,168,76,.35);
  color: #C9A84C; font-size: .65rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-family: 'Playfair Display', serif; transition: all .22s;
}
.feature-item:hover .feature-check {
  background: #C9A84C; color: #1A1410;
  transform: rotate(-5deg) scale(1.1);
  box-shadow: 0 0 12px rgba(201,168,76,.38);
}

/* ── LEFT STEP GUIDE ─────────────────────────────────────── */
.left-step-guide {
  display:        flex;
  flex-direction: column;
  gap:            0;
  position:       relative; z-index: 1;
  animation:      slideRight .5s .48s ease both;
  background:     rgba(201,168,76,.05);
  border:         1px solid rgba(201,168,76,.18);
  border-radius:  var(--radius);
  padding:        1.1rem 1.2rem;
}

.left-step-item {
  display:     flex;
  align-items: center;
  gap:         .9rem;
  padding:     .5rem 0;
  transition:  all .3s;
  position:    relative; z-index: 1;
}

.left-step-num {
  width:          28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background:     rgba(201,168,76,.1);
  border:         1.5px solid rgba(201,168,76,.25);
  color:          rgba(249,247,242,.4);
  font-family:    'DM Mono', monospace; font-size: .7rem; font-weight: 500;
  display:        flex; align-items: center; justify-content: center;
  transition:     all .3s;
}
.left-step-item.active .left-step-num {
  background: #C9A84C; color: #1A1410;
  border-color: #C9A84C;
  box-shadow: 0 0 14px rgba(201,168,76,.45);
  font-weight: 700;
}
.left-step-item.done .left-step-num {
  background: rgba(22,163,74,.18);
  border-color: rgba(22,163,74,.4);
  color: #16A34A;
}
.left-step-item.done .left-step-num::before {
  content: '✓';
}

.left-step-title {
  font-family: 'DM Sans', sans-serif; font-size: .82rem; font-weight: 600;
  color: rgba(249,247,242,.4);
  transition: color .3s;
}
.left-step-item.active .left-step-title { color: #F9F7F2; font-weight: 600; }
.left-step-item.done .left-step-title   { color: rgba(249,247,242,.55); }

.left-step-sub {
  font-family: 'DM Mono', monospace; font-size: .6rem;
  color: rgba(249,247,242,.25);
  letter-spacing: .03em;
  transition: color .3s;
}
.left-step-item.active .left-step-sub { color: rgba(249,247,242,.5); }
.left-step-item.done .left-step-sub   { color: rgba(249,247,242,.32); }

.left-step-connector {
  width: 1.5px; height: 14px;
  background: rgba(201,168,76,.18);
  margin-left: 13px;
}

/* stats row */
.auth-stats {
  display: flex; align-items: center; gap: .5rem;
  margin-top: auto; padding: 1.4rem 1.6rem;
  background: rgba(201,168,76,.07); border: 1px solid rgba(201,168,76,.22);
  border-radius: var(--radius-lg); position: relative; z-index: 1;
  backdrop-filter: blur(10px); animation: fadeUp .6s .5s ease both; overflow: hidden;
}
.auth-stats::before {
  content: ''; position: absolute; inset: -1px; border-radius: var(--radius-lg);
  background: linear-gradient(90deg, rgba(201,168,76,.1), transparent, rgba(201,168,76,.1));
  background-size: 200% 100%; animation: statSweep 4s ease-in-out infinite; pointer-events: none;
}
@keyframes statSweep { 0%,100% { background-position: 0% 0%; } 50% { background-position: 100% 0%; } }
.auth-stat         { text-align: center; flex: 1; position: relative; z-index: 1; }
.auth-stat-number  { font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 800; color: #C9A84C; margin-bottom: .18rem; line-height: 1; letter-spacing: -.015em; }
.auth-stat-label   { font-family: 'DM Mono', monospace; font-size: .6rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(249,247,242,.38); }
.auth-stat-divider { width: 1px; height: 36px; background: rgba(249,247,242,.12); flex-shrink: 0; }

/* ════════════════════════════════════════
   RIGHT PANEL
════════════════════════════════════════ */
.register-right {
  flex: 1; background: #F9F7F2;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 3rem 2rem; overflow-y: auto; position: relative;
}
.register-right::before {
  content: ''; position: absolute; top: 0; right: 0; width: 340px; height: 340px;
  border-radius: 50%; background: radial-gradient(circle, rgba(201,168,76,.07) 0%, transparent 65%); pointer-events: none;
}
.register-right::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 280px; height: 280px;
  border-radius: 50%; background: radial-gradient(circle, rgba(240,237,228,.9) 0%, transparent 65%); pointer-events: none;
}

/* form box */
.register-form-box {
  background: #FFFFFF; border: 1px solid rgba(201,168,76,.2);
  border-radius: var(--radius-xl); padding: 2.5rem 2.8rem;
  width: 100%; max-width: 560px;
  box-shadow: 0 12px 48px rgba(26,20,16,.1), 0 2px 8px rgba(201,168,76,.08);
  position: relative; z-index: 1;
  animation: scaleIn .55s cubic-bezier(.34,1.2,.64,1) both;
  overflow: hidden;
}
.register-form-box::before {
  content: ''; position: absolute; top: 0; left: 2.5rem; right: 2.5rem; height: 2px;
  background: linear-gradient(90deg, transparent, #C9A84C, #B8973B, transparent);
  border-radius: 0 0 99px 99px;
}

/* headings */
.form-heading    { font-family: 'Playfair Display', serif; font-size: 1.65rem; font-weight: 800; color: #1A1410; margin-bottom: .3rem; letter-spacing: -.02em; line-height: 1.15; transition: all .3s; }
.form-subheading { font-size: .87rem; color: rgba(26,20,16,.45); margin-bottom: 1.4rem; font-weight: 400; }
.form-subheading a { color: #C9A84C; font-weight: 600; transition: color .2s; }
.form-subheading a:hover { color: #B8973B; }

/* ════════════════════════════════════════
   WIZARD HEADER
════════════════════════════════════════ */
.wizard-header { margin-bottom: 1.4rem; }

/* progress label */
.register-step-label {
  font-family: 'DM Mono', monospace; font-size: .62rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(26,20,16,.35);
  margin-bottom: .5rem; transition: color .25s;
}
/* progress bar */
.register-steps { display: flex; align-items: center; gap: .4rem; margin-bottom: .75rem; }
.r-step { flex: 1; height: 3px; border-radius: 99px; background: rgba(26,20,16,.1); transition: background .3s, box-shadow .3s; }
.r-step.done   { background: var(--success); }
.r-step.active { background: #C9A84C; box-shadow: 0 0 8px rgba(201,168,76,.4); }



/* ════════════════════════════════════════
   WIZARD PANES + TRANSITIONS
════════════════════════════════════════ */
.wizard-pane { animation: paneIn .3s ease both; }

@keyframes paneIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pane-enter-right {
  animation: paneEnterRight .28s cubic-bezier(.4,0,.2,1) both;
}
.pane-enter-left {
  animation: paneEnterLeft .28s cubic-bezier(.4,0,.2,1) both;
}
.pane-exit-left {
  animation: paneExitLeft .22s cubic-bezier(.4,0,.2,1) both;
  position: absolute; pointer-events: none; width: 100%;
}
.pane-exit-right {
  animation: paneExitRight .22s cubic-bezier(.4,0,.2,1) both;
  position: absolute; pointer-events: none; width: 100%;
}

@keyframes paneEnterRight {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes paneEnterLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes paneExitLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-20px); }
}
@keyframes paneExitRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

/* ── FORM LABELS ─────────────────────────────────────────── */
.register-right .form-label {
  color: rgba(26,20,16,.65); font-family: 'DM Mono', monospace;
  font-size: .66rem; font-weight: 500; letter-spacing: .07em;
  text-transform: uppercase; margin-bottom: .45rem;
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.req-star { color: #C9A84C; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .7rem; }

.field-hint {
  font-family: 'DM Mono', monospace; font-size: .62rem; color: rgba(26,20,16,.38);
  letter-spacing: .03em; margin-top: .3rem; line-height: 1.5;
}

/* ── SECTION LABEL ───────────────────────────────────────── */
.form-section-label {
  font-family: 'DM Mono', monospace; font-size: .62rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(26,20,16,.35);
  margin-bottom: .9rem; padding-bottom: .55rem;
  border-bottom: 1px solid rgba(26,20,16,.07);
  display: flex; align-items: center; gap: .6rem;
}
.form-section-label::before {
  content: ''; display: inline-block; width: 18px; height: 2px;
  background: #C9A84C; border-radius: 99px; flex-shrink: 0;
}

/* ── FORM CONTROLS ───────────────────────────────────────── */
.register-right .form-control {
  background: #F9F7F2; border: 1.5px solid rgba(26,20,16,.12);
  color: #1A1410; border-radius: var(--radius-sm);
  width: 100%; padding: .65rem 1rem; font-size: .9rem;
  font-family: 'DM Sans', sans-serif; transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.register-right .form-control::placeholder { color: rgba(26,20,16,.28); }
.register-right .form-control:focus {
  border-color: #C9A84C; background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(201,168,76,.14); outline: none;
}
.register-right select.form-control {
  background: #F9F7F2 !important; color: #1A1410 !important;
  border: 1.5px solid rgba(26,20,16,.12) !important;
  -webkit-appearance: none; appearance: none;
}
.register-right select.form-control option { background: #FFFFFF; color: #1A1410; }
.register-right input[type="date"].form-control { color-scheme: light; }
.register-right .form-control[readonly] {
  background: rgba(201,168,76,.06); border-color: rgba(201,168,76,.3);
  color: rgba(26,20,16,.6); cursor: default;
}
.register-right .form-control:-webkit-autofill,
.register-right .form-control:-webkit-autofill:hover,
.register-right .form-control:-webkit-autofill:focus {
  -webkit-box-shadow:      0 0 0 1000px #F9F7F2 inset !important;
  box-shadow:              0 0 0 1000px #F9F7F2 inset !important;
  -webkit-text-fill-color: #1A1410 !important;
  caret-color:             #1A1410 !important;
  border-color:            rgba(26,20,16,.18) !important;
  transition:              background-color 9999s ease-in-out 0s !important;
}

/* ── INPUT WITH ICON ─────────────────────────────────────── */
.input-icon-wrap { position: relative; }
.input-icon-wrap .input-icon {
  position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: rgba(26,20,16,.3); pointer-events: none; transition: color .2s;
}
.input-icon-wrap .form-control.input-with-icon { padding-left: 2.5rem; }
.input-icon-wrap:focus-within .input-icon { color: #C9A84C; }

/* ── FORM ROW ────────────────────────────────────────────── */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.form-group { margin-bottom: .95rem; }

/* ── FIELD ERROR ─────────────────────────────────────────── */
.field-error {
  font-family: 'DM Mono', monospace; font-size: .65rem; color: #991B1B;
  margin-top: .3rem; display: none; letter-spacing: .03em;
  animation: slideRight .2s ease;
}

/* ── FLASH MESSAGES ──────────────────────────────────────── */
.flash-msg {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .8rem 1rem; border-radius: var(--radius-sm);
  font-family: 'DM Mono', monospace; font-size: .75rem;
  letter-spacing: .02em; margin-bottom: 1.2rem; line-height: 1.6;
}
.flash-error   { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.22); border-left: 3px solid #DC2626; color: #991B1B; }
.flash-success { background: rgba(22,163,74,.08);  border: 1px solid rgba(22,163,74,.22);  border-left: 3px solid #16A34A; color: #14532D; }

/* ── ADDRESS AUTOCOMPLETE ────────────────────────────────── */
.addr-input-wrap { position: relative; }
.addr-suggestions {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #FFFFFF; border: 1.5px solid rgba(201,168,76,.3);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 32px rgba(26,20,16,.12), 0 2px 8px rgba(201,168,76,.08);
  max-height: 260px; overflow-y: auto;
  list-style: none; padding: .35rem 0; margin: 0;
  z-index: 999; display: none;
  animation: fadeDown .18s ease both;
}
@keyframes fadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.addr-suggestions li {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .65rem 1rem; font-size: .85rem; font-family: 'DM Sans', sans-serif;
  color: rgba(26,20,16,.75); cursor: pointer; line-height: 1.4;
  transition: background .14s; border-bottom: 1px solid rgba(26,20,16,.05);
}
.addr-suggestions li:last-child { border-bottom: none; }
.addr-suggestions li:hover,
.addr-suggestions li.active { background: rgba(201,168,76,.09); color: #1A1410; }
.addr-suggestions li svg { width: 14px; height: 14px; flex-shrink: 0; color: #C9A84C; margin-top: 2px; }
.addr-spinner {
  position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; border: 2px solid rgba(201,168,76,.25);
  border-top-color: #C9A84C; border-radius: 50%; animation: spin .7s linear infinite;
  display: none; pointer-events: none;
}
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }
.addr-badge, .section-label-badge {
  display: none; align-items: center; gap: .2rem;
  font-family: 'DM Mono', monospace; font-size: .6rem; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600; color: #16A34A;
  background: rgba(22,163,74,.1); border: 1px solid rgba(22,163,74,.28);
  border-radius: 99px; padding: .12rem .5rem;
  animation: badgePop .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes badgePop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.addr-badge svg, .section-label-badge svg { width: 11px; height: 11px; flex-shrink: 0; }

/* ════════════════════════════════════════
   STEP 1: ROLE SELECTOR
════════════════════════════════════════ */
.role-selector-label {
  font-family: 'DM Mono', monospace; font-size: .62rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(26,20,16,.4);
  margin-bottom: .7rem;
}
.role-selector.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .65rem;
  margin-bottom: 1.2rem;
}
.role-option {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 1.1rem .5rem; border: 1.5px solid rgba(26,20,16,.12);
  border-radius: var(--radius); cursor: pointer;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  text-align: center; position: relative; overflow: hidden; background: #F9F7F2;
}
.role-option:hover   { border-color: rgba(201,168,76,.5); background: rgba(201,168,76,.06); transform: translateY(-2px); }
.role-option.selected { border-color: #C9A84C; background: rgba(201,168,76,.1); box-shadow: 0 0 0 3px rgba(201,168,76,.18); }
.role-option.selected::after {
  content: '✓'; position: absolute; top: 7px; right: 9px;
  font-size: .6rem; font-weight: 900; color: #1A1410;
  width: 16px; height: 16px; border-radius: 50%; background: #C9A84C;
  display: flex; align-items: center; justify-content: center;
  animation: checkPop .2s cubic-bezier(.34,1.56,.64,1);
  line-height: 16px; text-align: center;
}
@keyframes checkPop { from { transform: scale(0); } to { transform: scale(1); } }
.role-icon  { font-size: 1.5rem; transition: transform .25s; }
.role-option:hover .role-icon    { transform: scale(1.12) rotate(-5deg); }
.role-option.selected .role-icon { transform: scale(1.08); }
.role-label { font-family: 'Playfair Display', serif; font-size: .82rem; font-weight: 700; color: #1A1410; }
.role-sub   { font-family: 'DM Mono', monospace; font-size: .6rem; color: rgba(26,20,16,.4); letter-spacing: .03em; }

/* ── Role description cards ──────────────────────────────── */
.role-desc-cards { margin-top: .2rem; }
.role-desc-card {
  display:      flex;
  align-items:  flex-start;
  gap:          .9rem;
  padding:      1rem 1.1rem;
  background:   rgba(201,168,76,.06);
  border:       1.5px solid rgba(201,168,76,.22);
  border-radius:var(--radius-sm);
  animation:    providerReveal .28s cubic-bezier(.34,1.2,.64,1) both;
}
.role-desc-icon   { font-size: 1.6rem; flex-shrink: 0; line-height: 1; }
.role-desc-title  { font-family: 'Playfair Display', serif; font-size: .88rem; font-weight: 700; color: #1A1410; margin-bottom: .25rem; }
.role-desc-body   { font-family: 'DM Sans', sans-serif; font-size: .82rem; color: rgba(26,20,16,.55); line-height: 1.6; }

/* ════════════════════════════════════════
   STEP 2: PROVIDER SECTION
════════════════════════════════════════ */
.provider-section {
  overflow: hidden; border: 1.5px solid rgba(201,168,76,.22);
  border-radius: var(--radius); padding: 1.4rem 1.4rem 1.2rem;
  margin-bottom: 1.4rem; background: rgba(201,168,76,.03);
  position: relative; transform-origin: top;
}
.provider-section::before {
  content: ''; position: absolute; top: 0; left: 1rem; right: 1rem; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.5), transparent);
  border-radius: 0 0 99px 99px;
}
.provider-section-visible { animation: providerReveal .32s cubic-bezier(.34,1.2,.64,1) both; }
@keyframes providerReveal {
  from { opacity: 0; transform: scaleY(.96) translateY(-8px); }
  to   { opacity: 1; transform: scaleY(1)   translateY(0); }
}

/* ── SERVICE-TYPE SELECTOR ───────────────────────────────── */
.service-type-selector { display: flex; flex-direction: column; gap: .6rem; margin-top: .4rem; }
.svc-option {
  display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem;
  border: 1.5px solid rgba(26,20,16,.1); border-radius: var(--radius-sm);
  cursor: pointer; background: #FFFFFF;
  transition: all .22s cubic-bezier(.4,0,.2,1); position: relative; overflow: hidden;
}
.svc-option::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(201,168,76,0) 60%, rgba(201,168,76,.06) 100%);
  opacity: 0; transition: opacity .22s;
}
.svc-option:hover { border-color: rgba(201,168,76,.5); transform: translateX(3px); box-shadow: 0 2px 12px rgba(201,168,76,.1); }
.svc-option:hover::before { opacity: 1; }
.svc-option.selected { border-color: #C9A84C; background: rgba(201,168,76,.07); box-shadow: 0 0 0 3px rgba(201,168,76,.18); }
.svc-option.selected::before { opacity: 1; }
.svc-icon-wrap {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: rgba(201,168,76,.1); border: 1px solid rgba(201,168,76,.25);
  display: flex; align-items: center; justify-content: center;
  color: #C9A84C; transition: all .22s;
}
.svc-option:hover .svc-icon-wrap,
.svc-option.selected .svc-icon-wrap { background: #C9A84C; color: #1A1410; transform: rotate(-4deg) scale(1.05); box-shadow: 0 4px 12px rgba(201,168,76,.35); }
.svc-icon-wrap svg { width: 18px; height: 18px; pointer-events: none; }
.svc-content { flex: 1; }
.svc-label { font-family: 'Playfair Display', serif; font-size: .88rem; font-weight: 700; color: #1A1410; line-height: 1.2; }
.svc-desc  { font-family: 'DM Mono', monospace; font-size: .62rem; color: rgba(26,20,16,.4); letter-spacing: .03em; margin-top: .18rem; }
.svc-check-ring {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid rgba(26,20,16,.15);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s; color: transparent; font-size: .55rem; font-weight: 800;
  font-family: 'Playfair Display', serif;
}
.svc-option.selected .svc-check-ring {
  background: #C9A84C; border-color: #C9A84C; color: #1A1410;
  animation: checkPop .2s cubic-bezier(.34,1.56,.64,1);
}
.biz-addr-group-visible { animation: providerReveal .25s ease both; }

/* ── CATEGORY CHIP GRID ──────────────────────────────────── */
.category-grid {
  display:              grid;
  grid-template-columns:repeat(2, 1fr);
  gap:                  .5rem;
  margin-top:           .5rem;
}
.cat-chip {
  display:         flex;
  align-items:     center;
  gap:             .45rem;
  padding:         .55rem .85rem;
  border:          1.5px solid rgba(26,20,16,.1);
  border-radius:   var(--radius-xs);
  background:      #F9F7F2;
  font-family:     'DM Sans', sans-serif;
  font-size:       .8rem;
  color:           rgba(26,20,16,.65);
  font-weight:     500;
  cursor:          pointer;
  transition:      all .2s cubic-bezier(.4,0,.2,1);
  text-align:      left;
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
  user-select:     none;
}
.cat-chip:hover {
  border-color: rgba(201,168,76,.45);
  background:   rgba(201,168,76,.07);
  color:        #1A1410;
  transform:    translateY(-1px);
}
.cat-chip.selected {
  border-color: #C9A84C;
  background:   rgba(201,168,76,.14);
  color:        #1A1410;
  font-weight:  600;
  box-shadow:   0 0 0 2px rgba(201,168,76,.2);
}
.cat-chip.selected::after {
  content:     '✓';
  margin-left: auto;
  font-size:   .65rem;
  color:       #C9A84C;
  font-weight: 800;
  flex-shrink: 0;
}

/* ── ADMIN INFO NOTICE ───────────────────────────────────── */
.admin-info-notice {
  display:      flex;
  align-items:  flex-start;
  gap:          .7rem;
  padding:      .9rem 1rem;
  background:   rgba(201,168,76,.07);
  border:       1.5px solid rgba(201,168,76,.2);
  border-left:  3px solid #C9A84C;
  border-radius:var(--radius-sm);
  font-family:  'DM Sans', sans-serif;
  font-size:    .82rem;
  color:        rgba(26,20,16,.6);
  line-height:  1.6;
  margin-top:   .5rem;
}
.admin-info-notice svg { width: 18px; height: 18px; flex-shrink: 0; color: #C9A84C; margin-top: 1px; }

/* ════════════════════════════════════════
   STEP 3: REVIEW PANEL
════════════════════════════════════════ */
.review-header {
  display:      flex;
  align-items:  center;
  gap:          1rem;
  margin-bottom:1.2rem;
  padding:      1rem 1.1rem;
  background:   rgba(22,163,74,.06);
  border:       1.5px solid rgba(22,163,74,.2);
  border-radius:var(--radius-sm);
}
.review-check-circle {
  width:         40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background:    rgba(22,163,74,.12);
  border:        1.5px solid rgba(22,163,74,.3);
  display:       flex; align-items: center; justify-content: center;
  color:         #16A34A;
  animation:     badgePop .4s cubic-bezier(.34,1.56,.64,1) both;
}
.review-check-circle svg { width: 22px; height: 22px; }
.review-header-title { font-family: 'Playfair Display', serif; font-size: .95rem; font-weight: 700; color: #1A1410; }
.review-header-sub   { font-family: 'DM Sans', sans-serif; font-size: .8rem; color: rgba(26,20,16,.5); margin-top: .15rem; }

/* role badge */
.review-role-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            .4rem;
  padding:        .3rem .9rem;
  border-radius:  99px;
  font-family:    'DM Mono', monospace;
  font-size:      .7rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  margin-bottom:  1rem;
  background:     rgba(201,168,76,.12);
  border:         1px solid rgba(201,168,76,.3);
  color:          #8B6914;
  animation:      badgePop .3s .1s cubic-bezier(.34,1.56,.64,1) both;
}

/* review cards */
.review-cards { display: flex; flex-direction: column; gap: .75rem; }
.review-card {
  border:       1.5px solid rgba(26,20,16,.08);
  border-radius:var(--radius-sm);
  overflow:     hidden;
  background:   #FFFFFF;
  animation:    fadeUp .3s ease both;
}
.review-card:nth-child(2) { animation-delay: .07s; }
.review-card-title {
  font-family:  'DM Mono', monospace; font-size: .62rem; font-weight: 500;
  letter-spacing:.1em; text-transform: uppercase; color: rgba(26,20,16,.35);
  padding:      .6rem 1rem;
  background:   rgba(26,20,16,.03);
  border-bottom:1px solid rgba(26,20,16,.07);
  display:      flex; align-items: center; gap: .5rem;
}
.review-card-title::before {
  content: ''; width: 12px; height: 2px; background: #C9A84C; border-radius: 99px; flex-shrink: 0;
}
.review-row {
  display:       flex;
  justify-content:space-between;
  align-items:   flex-start;
  gap:           1rem;
  padding:       .6rem 1rem;
  border-bottom: 1px solid rgba(26,20,16,.05);
}
.review-row:last-child { border-bottom: none; }
.review-row-label { font-family: 'DM Mono', monospace; font-size: .65rem; color: rgba(26,20,16,.4); letter-spacing: .04em; flex-shrink: 0; margin-top: .05rem; }
.review-row-value { font-family: 'DM Sans', sans-serif; font-size: .85rem; color: #1A1410; font-weight: 500; text-align: right; word-break: break-word; }

/* ════════════════════════════════════════
   STEP 4: SECURITY
════════════════════════════════════════ */
/* password wrapper */
.pw-wrap { position: relative; }
.pw-wrap .form-control { padding-right: 3rem; }
.pw-toggle {
  position: absolute; right: .9rem; top: 50%; transform: translateY(-50%);
  cursor: pointer; color: rgba(26,20,16,.32); user-select: none;
  transition: color .2s, transform .15s; display: flex; align-items: center;
  background: none; border: none; padding: 0;
}
.pw-toggle:hover { color: #C9A84C; transform: translateY(-50%) scale(1.12); }
.pw-toggle svg   { width: 18px; height: 18px; pointer-events: none; }
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-strong-password-auto-fill-button { display: none; }

/* strength bar */
.strength-bar { display: flex; gap: .3rem; margin-top: .55rem; }
.strength-segment {
  flex: 1; height: 3px; border-radius: 99px;
  background: rgba(26,20,16,.1); transition: background .3s, transform .3s;
}
.strength-segment.weak   { background: #DC2626; transform: scaleY(1.5); }
.strength-segment.fair   { background: #F59E0B; transform: scaleY(1.5); }
.strength-segment.strong { background: #16A34A; transform: scaleY(1.5); }
.strength-label {
  font-family: 'DM Mono', monospace; font-size: .62rem; font-weight: 500;
  letter-spacing: .04em; color: rgba(26,20,16,.45); margin-top: .4rem; min-height: 1em;
}

/* password match row */
.pw-match-row {
  display:     flex;
  align-items: center;
  gap:         .4rem;
  margin-top:  .35rem;
  font-family: 'DM Mono', monospace; font-size: .65rem; letter-spacing: .03em;
  animation:   slideRight .2s ease both;
}
.pw-match-icon { font-size: .75rem; font-weight: 800; }
.pw-match-icon.match-ok   { color: #16A34A; }
.pw-match-icon.match-fail { color: #DC2626; }
.pw-match-text.match-ok   { color: #16A34A; }
.pw-match-text.match-fail { color: #991B1B; }

/* password requirements */
.pw-requirements {
  background:   rgba(26,20,16,.03);
  border:       1px solid rgba(26,20,16,.08);
  border-radius:var(--radius-sm);
  padding:      .8rem 1rem;
  margin-top:   .6rem;
  margin-bottom:.8rem;
}
.pw-req-title {
  font-family: 'DM Mono', monospace; font-size: .62rem; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; color: rgba(26,20,16,.4);
  margin-bottom: .55rem;
}
.pw-req-list  { display: flex; flex-direction: column; gap: .3rem; }
.pw-req-item  {
  display:    flex; align-items: center; gap: .5rem;
  font-family:'DM Sans', sans-serif; font-size: .8rem;
  color:      rgba(26,20,16,.45); transition: color .25s;
}
.pw-req-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: rgba(26,20,16,.18); transition: all .25s;
}
.pw-req-item.met { color: #16A34A; }
.pw-req-item.met .pw-req-dot { background: #16A34A; transform: scale(1.2); }

/* terms row */
.terms-row {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .82rem; color: rgba(26,20,16,.5); margin-bottom: 1.2rem;
  line-height: 1.6; font-weight: 400;
}
.terms-row input[type="checkbox"] {
  width: 15px; height: 15px; accent-color: #C9A84C; cursor: pointer;
  margin-top: 2px; flex-shrink: 0;
}
.terms-row a { color: #C9A84C; font-weight: 600; transition: color .2s; }
.terms-row a:hover { color: #B8973B; text-decoration: underline; }

/* divider */
.register-form-box .divider {
  display: flex; align-items: center; gap: 1rem;
  color: rgba(26,20,16,.3); font-size: .75rem;
  font-family: 'DM Mono', monospace; letter-spacing: .06em;
  margin: 1rem 0;
}
.register-form-box .divider::before,
.register-form-box .divider::after { content: ''; flex: 1; height: 1px; background: rgba(26,20,16,.1); }

/* social buttons */
.social-btn {
  width: 100%; display: flex; align-items: center; justify-content: center;
  gap: .75rem; padding: .72rem 1rem;
  background: #FFFFFF; border: 1.5px solid rgba(26,20,16,.12);
  border-radius: var(--radius-sm);
  font-family: 'DM Sans', sans-serif; font-size: .84rem; font-weight: 500;
  color: rgba(26,20,16,.72); cursor: pointer; margin-bottom: .6rem;
  transition: all .22s; letter-spacing: .01em;
}
.social-btn:hover {
  background: #F9F7F2; border-color: #C9A84C;
  color: #1A1410; transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(201,168,76,.15);
}
.social-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ════════════════════════════════════════
   WIZARD NAVIGATION
════════════════════════════════════════ */
.wizard-nav {
  display:        flex;
  align-items:    center;
  gap:            .75rem;
  margin-top:     1.5rem;
  padding-top:    1.2rem;
  border-top:     1px solid rgba(26,20,16,.07);
}

.btn-back {
  display:        flex;
  align-items:    center;
  gap:            .4rem;
  padding:        .7rem 1.1rem;
  background:     transparent;
  border:         1.5px solid rgba(26,20,16,.14);
  border-radius:  var(--radius-sm);
  font-family:    'DM Sans', sans-serif;
  font-size:      .84rem;
  font-weight:    500;
  color:          rgba(26,20,16,.55);
  cursor:         pointer;
  transition:     all .22s;
  flex-shrink:    0;
}
.btn-back:hover {
  border-color: #C9A84C;
  color:        #1A1410;
  background:   rgba(201,168,76,.06);
}
.btn-back svg { width: 16px; height: 16px; }

.btn-next {
  display:        flex;
  align-items:    center;
  gap:            .4rem;
  margin-left:    auto;
  padding:        .75rem 1.5rem;
  background:     #1A1410;
  border:         none;
  border-radius:  var(--radius-sm);
  font-family:    'Playfair Display', serif;
  font-size:      .84rem;
  font-weight:    800;
  color:          #F9F7F2;
  cursor:         pointer;
  transition:     all .22s cubic-bezier(.4,0,.2,1);
  letter-spacing: .02em;
  box-shadow:     0 4px 16px rgba(26,20,16,.2);
  position:       relative;
  overflow:       hidden;
}
.btn-next::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 50%, rgba(201,168,76,.12) 100%);
  opacity: 0; transition: opacity .22s;
}
.btn-next:hover { background: #C9A84C; color: #1A1410; box-shadow: 0 8px 28px rgba(201,168,76,.4); transform: translateY(-2px); }
.btn-next:hover::before { opacity: 1; }
.btn-next:active { transform: translateY(0); }
.btn-next svg { width: 16px; height: 16px; }

.btn-submit {
  display:        flex;
  align-items:    center;
  justify-content:center;
  gap:            .5rem;
  width:          100%;
  padding:        .9rem;
  background:     #C9A84C;
  border:         none;
  border-radius:  var(--radius-sm);
  font-family:    'Playfair Display', serif;
  font-size:      .84rem;
  font-weight:    800;
  color:          #1A1410;
  letter-spacing: .04em;
  cursor:         pointer;
  transition:     all .22s cubic-bezier(.4,0,.2,1);
  box-shadow:     0 8px 28px rgba(201,168,76,.35);
  position:       relative; overflow: hidden;
}
.btn-submit:hover  { background: #B8973B; transform: translateY(-2px); box-shadow: 0 12px 36px rgba(201,168,76,.48); }
.btn-submit:active { transform: translateY(0); box-shadow: 0 4px 16px rgba(201,168,76,.3); }
.btn-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ── ANIMATIONS ──────────────────────────────────────────── */
@keyframes slideRight { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeUp     { from { opacity: 0; transform: translateY(12px);  } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn    { from { opacity: 0; transform: scale(.96);         } to { opacity: 1; transform: scale(1);     } }

/* ════════════════════════════════════════
   RESPONSIVE — 1024px
════════════════════════════════════════ */
@media (max-width: 1024px) {
  .register-left { width: 40%; padding: 3rem 2.8rem; }
}

/* ════════════════════════════════════════
   RESPONSIVE — 960px (tablet: stack vertically)
════════════════════════════════════════ */
@media (max-width: 960px) {
  .register-page  { flex-direction: column; }

  .register-left  {
    width: 100%; padding: 2.2rem 2rem 1.8rem;
    gap: 1.1rem;
  }
  .register-left h2 { font-size: clamp(1.7rem, 4vw, 2.2rem); }
  .register-left-desc { display: none; }  /* collapse for space on tablet */
  .feature-list { flex-direction: row; flex-wrap: wrap; gap: .5rem; }
  .feature-item { flex: 0 0 calc(50% - .25rem); font-size: .82rem; }

  /* hide the left step guide on mobile — redundant with top stepper */
  .left-step-guide { display: none; }

  .auth-stats   { margin-top: 0; padding: 1.1rem 1.4rem; }
  .auth-stat-number { font-size: 1.2rem; }

  .register-right { padding: 2rem 1.2rem 3rem; }
  .register-form-box { padding: 2rem 1.8rem; max-width: 100%; }
  .auth-logo-img  { width: 36px; height: 36px; }
}

/* ════════════════════════════════════════
   RESPONSIVE — 640px (large mobile)
════════════════════════════════════════ */
@media (max-width: 640px) {
  .register-left { padding: 1.8rem 1.4rem 1.4rem; gap: .9rem; }
  .feature-list { display: none; }  /* very small screen: hide feature list */

  .register-form-box { padding: 1.6rem 1.2rem; }
  .form-heading { font-size: 1.4rem; }

  .role-selector.three-col { grid-template-columns: repeat(3, 1fr); gap: .45rem; }
  .role-option { padding: .85rem .3rem; }
  .role-icon   { font-size: 1.25rem; }
  .role-label  { font-size: .72rem; }
  .role-sub    { font-size: .56rem; }

  .category-grid { grid-template-columns: repeat(2, 1fr); gap: .4rem; }
  .cat-chip { font-size: .75rem; padding: .5rem .7rem; }

  .service-type-selector { gap: .45rem; }
  .svc-option { padding: .75rem .85rem; gap: .7rem; }
  .svc-icon-wrap { width: 32px; height: 32px; border-radius: 8px; }
  .svc-icon-wrap svg { width: 15px; height: 15px; }

  .wizard-nav { gap: .55rem; }
  .btn-back   { padding: .65rem .9rem; font-size: .8rem; }
  .btn-next   { padding: .7rem 1.2rem; font-size: .8rem; }
}

/* ════════════════════════════════════════
   RESPONSIVE — 480px (small mobile)
════════════════════════════════════════ */
@media (max-width: 480px) {
  .register-left { padding: 1.5rem 1.1rem 1.2rem; }
  .register-left h2 { font-size: 1.6rem; }
  .auth-logo-img { width: 28px; height: 28px; }
  .register-left-logo { font-size: 1.25rem; }

  .auth-stats { padding: .9rem 1rem; gap: .3rem; }
  .auth-stat-number { font-size: 1.05rem; }
  .auth-stat-label  { font-size: .55rem; }

  .register-form-box { padding: 1.4rem 1rem; border-radius: var(--radius-lg); }
  .form-heading       { font-size: 1.25rem; }

  .form-row { grid-template-columns: 1fr; }
  .role-selector.three-col { grid-template-columns: repeat(3, 1fr); gap: .35rem; }
  .role-option { padding: .75rem .2rem; gap: .2rem; }
  .role-icon   { font-size: 1.1rem; }
  .role-label  { font-size: .68rem; }
  .role-sub    { display: none; }

  .category-grid { grid-template-columns: 1fr 1fr; }
  .cat-chip { font-size: .72rem; padding: .45rem .6rem; }

  .wizard-nav { flex-wrap: wrap; }
  .btn-back   { order: 2; flex: 1; justify-content: center; }
  .btn-next   { order: 1; flex: 1; justify-content: center; margin-left: 0; }
  .btn-submit { order: 1; }

  .review-row { flex-direction: column; gap: .2rem; }
  .review-row-value { text-align: left; }

  .pw-requirements { padding: .65rem .8rem; }
  .pw-req-item { font-size: .75rem; }
}

/* ════════════════════════════════════════
   RESPONSIVE — 360px (very small)
════════════════════════════════════════ */
@media (max-width: 360px) {
  .register-form-box { padding: 1.2rem .85rem; }
  .role-selector.three-col { gap: .25rem; }
  .role-option { padding: .65rem .15rem; }
  .role-label  { font-size: .62rem; }
  .category-grid { gap: .3rem; }
  .cat-chip { font-size: .68rem; padding: .4rem .5rem; }
}