/* ============================================
   REGISTER BUSINESS — 5-step Wizard
   Mobile-first · Brand green #1A7A4A
   ============================================ */

/* ── Page shell ─────────────────────────────────────────────────── */
.reg-page {
  background:    #f5f7f9;
  min-height:    100vh;
  padding-bottom: 80px;
}

.reg-container {
  max-width: 680px;
  margin:    0 auto;
  padding:   0 16px;
}

/* ── Hero ────────────────────────────────────────────────────────── */
.reg-hero {
  text-align: center;
  padding:    44px 0 28px;
}

.reg-hero-badge {
  display:        inline-block;
  background:     #d1fae5;
  color:          #065f46;
  font-size:      .72rem;
  font-weight:    700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding:        4px 14px;
  border-radius:  50px;
  margin-bottom:  14px;
}

.reg-hero-title {
  font-size:   clamp(1.55rem, 5vw, 2.1rem);
  font-weight: 800;
  color:       #111827;
  margin:      0 0 10px;
  line-height: 1.2;
}

.reg-hero-sub {
  font-size:     .95rem;
  color:         #6b7280;
  line-height:   1.55;
  margin:        0 auto;
  max-width:     460px;
}

/* ── Auth notice ─────────────────────────────────────────────────── */
.reg-auth-notice {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  background:    #fffbeb;
  border:        1px solid #fcd34d;
  border-radius: 12px;
  padding:       14px 16px;
  font-size:     .88rem;
  color:         #78350f;
  margin-bottom: 24px;
  line-height:   1.5;
}

.reg-auth-notice svg { flex-shrink: 0; margin-top: 2px; }
.reg-auth-notice a   { color: #1A7A4A; font-weight: 600; }

/* ── Wizard card ─────────────────────────────────────────────────── */
.reg-card {
  background:    #fff;
  border-radius: 20px;
  box-shadow:    0 1px 3px rgba(0,0,0,.05), 0 10px 40px rgba(0,0,0,.07);
  overflow:      hidden;
  margin-bottom: 40px;
}

/* ── Progress wizard head ────────────────────────────────────────── */
.reg-wizard-head {
  padding-bottom: 0;
}

/* Thin progress track at very top */
.reg-progress-track {
  height:     4px;
  background: #f3f4f6;
}

.reg-progress-fill {
  height:     100%;
  background: linear-gradient(90deg, #1A7A4A 0%, #34d399 100%);
  border-radius: 0 4px 4px 0;
  transition: width .45s cubic-bezier(.4,0,.2,1);
  min-width:  4px;
}

/* Dot row */
.reg-progress-dots {
  display:         flex;
  justify-content: space-between;
  padding:         20px 28px 20px;
  position:        relative;
  border-bottom:   1px solid #f3f4f6;
}

/* Connecting line behind dots */
.reg-progress-dots::before {
  content:    '';
  position:   absolute;
  top:        34px; /* center of 28px dot + 20px padding-top */
  left:       68px;
  right:      68px;
  height:     1px;
  background: #e5e7eb;
  z-index:    0;
}

.reg-dot {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
  position:       relative;
  z-index:        1;
  cursor:         default;
}

.reg-dot-circle {
  width:           28px;
  height:          28px;
  border-radius:   50%;
  background:      #f3f4f6;
  color:           #9ca3af;
  font-size:       .8rem;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          2px solid #e5e7eb;
  transition:      background .3s, border-color .3s, box-shadow .3s;
  line-height:     1;
}

.reg-dot-label {
  font-size:      .63rem;
  font-weight:    600;
  color:          #9ca3af;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space:    nowrap;
  transition:     color .3s;
}

/* Active */
.reg-dot--active .reg-dot-circle {
  background:  #fff;
  border-color: #1A7A4A;
  color:        #1A7A4A;
  box-shadow:   0 0 0 4px rgba(26,122,74,.13);
}

.reg-dot--active .reg-dot-label { color: #1A7A4A; }

/* Done — green filled + checkmark */
.reg-dot--done .reg-dot-circle {
  background:   #1A7A4A;
  border-color: #1A7A4A;
  color:        transparent;
  font-size:    0;
}

.reg-dot--done .reg-dot-circle::after {
  content:       '';
  display:       block;
  width:         6px;
  height:        10px;
  border:        2px solid #fff;
  border-top:    none;
  border-left:   none;
  transform:     rotate(45deg) translate(-1px, -1px);
}

.reg-dot--done .reg-dot-label { color: #1A7A4A; }

@media (max-width: 500px) {
  .reg-progress-dots        { padding: 16px 20px; }
  .reg-progress-dots::before{ top: 30px; left: 48px; right: 48px; }
  .reg-dot-circle           { width: 24px; height: 24px; font-size: .72rem; }
  .reg-dot-label            { display: none; }
}

/* ── Form body ───────────────────────────────────────────────────── */
.reg-form {
  padding: 28px 28px 0;
}

@media (max-width: 520px) {
  .reg-form { padding: 20px 18px 0; }
}

/* ── Steps ───────────────────────────────────────────────────────── */
.reg-step          { display: none; }
.reg-step--active  { display: block; animation: stepIn .25s ease; }

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

.reg-step-eyebrow {
  font-size:      .72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          #1A7A4A;
  margin:         0 0 8px;
}

.reg-step-title {
  font-size:   1.4rem;
  font-weight: 800;
  color:       #111827;
  margin:      0 0 6px;
  line-height: 1.22;
}

.reg-step-sub {
  font-size:   .9rem;
  color:       #6b7280;
  margin:      0 0 24px;
  line-height: 1.5;
}

/* ── Field layout ────────────────────────────────────────────────── */
.reg-field {
  margin-bottom: 20px;
  position:      relative;
}

.reg-field--half {
  max-width: 280px;
}

@media (max-width: 480px) {
  .reg-field--half { max-width: 100%; }
}

.reg-field-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px;
}

@media (max-width: 540px) {
  .reg-field-row { grid-template-columns: 1fr; }
}

/* ── Labels ──────────────────────────────────────────────────────── */
.reg-label {
  display:       block;
  font-size:     .84rem;
  font-weight:   600;
  color:         #374151;
  margin-bottom: 7px;
}

.req {
  color:       #ef4444;
  margin-left: 2px;
}

.reg-opt {
  font-size:      .7rem;
  font-weight:    500;
  color:          #9ca3af;
  background:     #f3f4f6;
  padding:        2px 7px;
  border-radius:  4px;
  margin-left:    6px;
  vertical-align: middle;
  letter-spacing: 0;
  text-transform: none;
}

.reg-label-tip {
  display:     block;
  font-size:   .74rem;
  font-weight: 400;
  color:       #9ca3af;
  margin-top:  2px;
}

.reg-field-hint {
  font-size:   .82rem;
  color:       #6b7280;
  margin:      0 0 10px;
  line-height: 1.45;
}

/* ── Inputs ──────────────────────────────────────────────────────── */
.reg-input {
  width:           100%;
  border:          1.5px solid #e5e7eb;
  border-radius:   10px;
  padding:         11px 13px;
  font-size:       .9rem;
  color:           #111827;
  background:      #fff;
  outline:         none;
  transition:      border-color .15s, box-shadow .15s;
  font-family:     inherit;
  box-sizing:      border-box;
  -webkit-appearance: none;
}

.reg-input:focus {
  border-color: #1A7A4A;
  box-shadow:   0 0 0 3px rgba(26,122,74,.1);
}

.reg-input::placeholder { color: #9ca3af; }

.reg-input--error {
  border-color: #ef4444 !important;
  background:   #fff5f5;
}

/* Input with leading icon */
.reg-input-icon-wrap {
  position: relative;
  display:  flex;
  align-items: center;
}

.reg-input-icon {
  position:       absolute;
  left:           12px;
  color:          #9ca3af;
  pointer-events: none;
  flex-shrink:    0;
}

.reg-input--icon { padding-left: 36px; }

/* Select */
.reg-select-wrap { position: relative; }

.reg-select {
  appearance:         none;
  -webkit-appearance: none;
  padding-right:      36px;
  cursor:             pointer;
}

.reg-select-arrow {
  position:       absolute;
  right:          12px;
  top:            50%;
  transform:      translateY(-50%);
  color:          #9ca3af;
  pointer-events: none;
}

/* Textarea */
.reg-textarea {
  width:        100%;
  border:       1.5px solid #e5e7eb;
  border-radius: 10px;
  padding:      11px 13px;
  font-size:    .9rem;
  resize:       vertical;
  outline:      none;
  font-family:  inherit;
  box-sizing:   border-box;
  min-height:   130px;
  transition:   border-color .15s, box-shadow .15s;
  color:        #111827;
  line-height:  1.55;
}

.reg-textarea:focus {
  border-color: #1A7A4A;
  box-shadow:   0 0 0 3px rgba(26,122,74,.1);
}

.reg-textarea::placeholder { color: #9ca3af; }

/* Char counters */
.reg-char-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-top:      5px;
}

.reg-char-hint {
  font-size: .74rem;
  color:     #9ca3af;
}

.reg-translation-note {
  font-size: .78rem;
  color:     #6b7280;
}

/* Inline field error */
.reg-field-error {
  display:    none;
  color:      #ef4444;
  font-size:  .78rem;
  margin-top: 5px;
}

/* ── Divider ─────────────────────────────────────────────────────── */
.reg-divider {
  display:        flex;
  align-items:    center;
  gap:            12px;
  margin:         4px 0 20px;
  color:          #9ca3af;
  font-size:      .72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.reg-divider::before,
.reg-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: #f0f0f0;
}

/* ── Language toggle ─────────────────────────────────────────────── */
.reg-lang-toggle {
  display:       flex;
  gap:           8px;
  margin-bottom: 16px;
  flex-wrap:     wrap;
}

.reg-lang-btn {
  padding:     8px 18px;
  border:      1.5px solid #e5e7eb;
  border-radius: 50px;
  background:  #fff;
  color:       #6b7280;
  font-size:   .84rem;
  font-weight: 500;
  cursor:      pointer;
  transition:  all .15s;
  font-family: inherit;
}

.reg-lang-btn:hover    { border-color: #1A7A4A; color: #1A7A4A; }

.reg-lang-btn--active {
  background:   #1A7A4A;
  border-color: #1A7A4A;
  color:        #fff;
}

/* ── Checkboxes grid ─────────────────────────────────────────────── */
.reg-checks-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap:                   8px;
  margin-top:            4px;
}

.reg-checks-grid--sm {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

.reg-check-item {
  display:       flex;
  align-items:   center;
  gap:           8px;
  font-size:     .875rem;
  color:         #374151;
  cursor:        pointer;
  padding:       9px 12px;
  border:        1.5px solid #e5e7eb;
  border-radius: 10px;
  transition:    border-color .15s, background .15s;
  user-select:   none;
  line-height:   1.2;
}

.reg-check-item:hover { border-color: #1A7A4A; background: #f0fdf4; }

.reg-check-item input[type="checkbox"] {
  accent-color: #1A7A4A;
  width:        15px;
  height:       15px;
  flex-shrink:  0;
}

.reg-check-item:has(input:checked),
.reg-check-item--on {
  border-color: #1A7A4A;
  background:   #f0fdf4;
}

@media (max-width: 480px) {
  .reg-checks-grid     { grid-template-columns: 1fr 1fr; }
  .reg-checks-grid--sm { grid-template-columns: 1fr 1fr; }
}

/* ── Chip input row ──────────────────────────────────────────────── */
.reg-chip-input-row {
  display: flex;
  gap:     8px;
}

.reg-chip-input { flex: 1; }

.reg-chip-add-btn {
  flex-shrink:     0;
  width:           42px;
  height:          42px;
  background:      #1A7A4A;
  color:           #fff;
  border:          none;
  border-radius:   10px;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background .15s, transform .1s;
}

.reg-chip-add-btn:hover  { background: #15803d; }
.reg-chip-add-btn:active { transform: scale(.94); }

/* Chips container */
.reg-chips {
  display:    flex;
  flex-wrap:  wrap;
  gap:        6px;
  margin-top: 10px;
  min-height: 0;
}

.reg-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  background:    #f0fdf4;
  color:         #15803d;
  border:        1px solid #bbf7d0;
  border-radius: 50px;
  padding:       5px 10px 5px 13px;
  font-size:     .82rem;
  font-weight:   500;
  line-height:   1.2;
}

.reg-chip-remove {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  background:      none;
  border:          none;
  color:           #16a34a;
  cursor:          pointer;
  padding:         0;
  font-size:       1.05rem;
  line-height:     1;
  border-radius:   50%;
  width:           18px;
  height:          18px;
  transition:      background .12s, color .12s;
}

.reg-chip-remove:hover { background: #dcfce7; color: #ef4444; }

/* ── Upload grid ─────────────────────────────────────────────────── */
.reg-upload-grid {
  display:               grid;
  grid-template-columns: 1fr 2fr;
  gap:                   12px;
  margin-top:            4px;
}

@media (max-width: 500px) {
  .reg-upload-grid { grid-template-columns: 1fr; }
}

.reg-upload-slot {
  position: relative;
}

.reg-file-input {
  position: absolute;
  inset:    0;
  opacity:  0;
  width:    100%;
  height:   100%;
  cursor:   pointer;
  z-index:  2;
}

.reg-upload-label {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  border:          2px dashed #e5e7eb;
  border-radius:   14px;
  padding:         22px 14px;
  cursor:          pointer;
  color:           #9ca3af;
  text-align:      center;
  min-height:      110px;
  transition:      border-color .15s, background .15s, color .15s;
  position:        relative;
  z-index:         1;
}

.reg-upload-slot:hover .reg-upload-label {
  border-color: #1A7A4A;
  background:   #f0fdf4;
  color:        #1A7A4A;
}

.reg-upload-name {
  font-size:   .84rem;
  font-weight: 600;
  color:       #374151;
  transition:  color .15s;
}

.reg-upload-hint {
  font-size: .74rem;
  color:     #9ca3af;
}

.reg-upload-preview {
  display:    flex;
  flex-wrap:  wrap;
  gap:        6px;
  margin-top: 8px;
}

.reg-preview-img {
  width:         70px;
  height:        70px;
  object-fit:    cover;
  border-radius: 8px;
  border:        1px solid #e5e7eb;
  display:       block;
}

/* ── Tag autocomplete ────────────────────────────────────────────── */
.reg-tags-wrap { position: relative; }

.reg-tag-suggestions {
  position:      absolute;
  top:           calc(100% + 4px);
  left:          0;
  right:         0;
  background:    #fff;
  border:        1.5px solid #e5e7eb;
  border-radius: 12px;
  box-shadow:    0 8px 24px rgba(0,0,0,.1);
  z-index:       100;
  max-height:    220px;
  overflow-y:    auto;
  display:       none;
}

.reg-tag-option {
  padding:       10px 14px;
  font-size:     .875rem;
  cursor:        pointer;
  color:         #111827;
  border-bottom: 1px solid #f3f4f6;
}

.reg-tag-option:last-child { border-bottom: none; }
.reg-tag-option:hover      { background: #f0fdf4; }
.reg-tag-option-en         { color: #9ca3af; font-size: .78rem; }

.reg-tag-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  background:    #e8f5ee;
  color:         #1A7A4A;
  font-size:     .82rem;
  font-weight:   500;
  padding:       4px 10px;
  border-radius: 50px;
}

.reg-tag-remove {
  background:  transparent;
  border:      none;
  color:       #1A7A4A;
  cursor:      pointer;
  font-size:   .9rem;
  line-height: 1;
  padding:     0;
  display:     flex;
  align-items: center;
}

.reg-tag-remove:hover { color: #ef4444; }

/* ── Social toggle (collapsible) ─────────────────────────────────── */
.reg-social-toggle {
  display:     flex;
  align-items: center;
  gap:         8px;
  width:       100%;
  padding:     11px 16px;
  border:      1.5px solid #e5e7eb;
  border-radius: 10px;
  background:  #f9fafb;
  color:       #374151;
  font-size:   .875rem;
  font-weight: 600;
  cursor:      pointer;
  font-family: inherit;
  text-align:  left;
  transition:  border-color .15s, background .15s;
}

.reg-social-toggle:hover { border-color: #1A7A4A; background: #f0fdf4; }

.reg-social-toggle-arrow {
  margin-left: auto;
  color:       #9ca3af;
  transition:  transform .25s;
  flex-shrink: 0;
}

.reg-social-toggle--open .reg-social-toggle-arrow { transform: rotate(180deg); }
.reg-social-toggle--open { border-color: #1A7A4A; }

.reg-social-panel {
  margin-top:    10px;
  border:        1.5px solid #e5e7eb;
  border-radius: 14px;
  padding:       14px;
  background:    #fafafa;
}

.reg-social-panel[hidden] { display: none; }

.reg-social-grid { display: flex; flex-direction: column; gap: 10px; }

.reg-social-row {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.reg-social-icon {
  flex-shrink:     0;
  width:           36px;
  height:          36px;
  border-radius:   8px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      #f3f4f6;
  color:           #6b7280;
}

.reg-social-icon--ig { background: #fce7f3; color: #be185d; }
.reg-social-icon--fb { background: #eff6ff; color: #1d4ed8; }
.reg-social-icon--tt { background: #f1f5f9; color: #334155; }
.reg-social-icon--yt { background: #fef2f2; color: #dc2626; }

.reg-social-row .reg-input { margin: 0; }

/* ── Submit note ─────────────────────────────────────────────────── */
.reg-submit-note {
  display:     flex;
  align-items: flex-start;
  gap:         8px;
  font-size:   .82rem;
  color:       #6b7280;
  background:  #f9fafb;
  border:      1px solid #e5e7eb;
  border-radius: 10px;
  padding:     12px 14px;
  margin-bottom: 4px;
  line-height: 1.5;
}

.reg-submit-note svg { flex-shrink: 0; margin-top: 1px; color: #9ca3af; }

/* ── Global error ────────────────────────────────────────────────── */
.reg-error {
  color:         #ef4444;
  font-size:     .875rem;
  background:    #fef2f2;
  border:        1px solid #fecaca;
  border-radius: 10px;
  padding:       11px 14px;
  margin-top:    12px;
  display:       none;
}

/* ── Wizard nav buttons ──────────────────────────────────────────── */
.reg-nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px 28px 28px;
  border-top:      1px solid #f3f4f6;
  margin-top:      20px;
}

@media (max-width: 520px) {
  .reg-nav { padding: 16px 18px 24px; }
}

.reg-nav-right {
  display: flex;
  gap:     10px;
}

.reg-btn-back {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  padding:     10px 18px;
  border:      1.5px solid #e5e7eb;
  border-radius: 10px;
  background:  #fff;
  color:       #6b7280;
  font-size:   .875rem;
  font-weight: 600;
  cursor:      pointer;
  transition:  all .15s;
  font-family: inherit;
}

.reg-btn-back:hover { border-color: #1A7A4A; color: #1A7A4A; }

.reg-btn-next,
.reg-btn-submit {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       11px 24px;
  border:        none;
  border-radius: 10px;
  background:    #1A7A4A;
  color:         #fff;
  font-size:     .875rem;
  font-weight:   700;
  cursor:        pointer;
  transition:    background .15s, transform .1s, box-shadow .15s;
  font-family:   inherit;
  white-space:   nowrap;
  letter-spacing: .01em;
}

.reg-btn-next:hover,
.reg-btn-submit:hover {
  background:  #15803d;
  box-shadow:  0 4px 12px rgba(26,122,74,.3);
}

.reg-btn-next:active,
.reg-btn-submit:active  { transform: scale(.97); }

.reg-btn-submit:disabled {
  opacity:   .65;
  cursor:    not-allowed;
  transform: none;
  box-shadow: none;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Edit page — existing photo thumbnails ────────────────────────── */
.edit-existing-photos {
  display:    flex;
  flex-wrap:  wrap;
  gap:        10px;
  margin-top: 8px;
}

.edit-photo-thumb {
  position:   relative;
  width:       88px;
  text-align:  center;
}

.edit-photo-thumb img {
  width:         88px;
  height:        88px;
  object-fit:    cover;
  border-radius: 8px;
  border:        1px solid #e5e7eb;
  display:       block;
}

.edit-photo-label {
  display:    block;
  font-size:  .72rem;
  color:      #6b7280;
  margin-top: 4px;
}

.edit-photo-delete {
  position:        absolute;
  top:             -6px;
  right:           -6px;
  width:           22px;
  height:          22px;
  border-radius:   50%;
  background:      #ef4444;
  color:           #fff;
  border:          none;
  font-size:       .75rem;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  line-height:     1;
  padding:         0;
}

.edit-photo-delete:hover { background: #dc2626; }

/* ── Responsive tweaks ───────────────────────────────────────────── */
@media (max-width: 400px) {
  .reg-btn-next,
  .reg-btn-submit { padding: 10px 16px; font-size: .82rem; }
  .reg-btn-back   { padding: 10px 14px; font-size: .82rem; }
  .reg-step-title { font-size: 1.2rem; }
}

/* ============================================================
   EDIT BUSINESS PAGE
   Matches /account design system — CSS variable based
   ============================================================ */

/* ── Page shell ── */
.edit-page {
  background:    var(--bg-page, #f5f7f9);
  min-height:    100vh;
  padding-bottom: 88px; /* space for sticky save bar */
}

.edit-container {
  max-width: 720px;
  margin:    0 auto;
  padding:   var(--space-8, 32px) var(--space-4, 16px) var(--space-6, 24px);
}

/* ── Loading state ── */
.edit-loading {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-3, 12px);
  padding:        var(--space-20, 80px) 0;
  color:          var(--text-light, #888);
  font-size:      var(--font-size-sm, 14px);
}

/* ── Business identity card ── */
.edit-biz-card {
  display:       flex;
  align-items:   center;
  gap:           var(--space-4, 16px);
  background:    var(--white, #fff);
  border:        1px solid var(--border, #e0e0e0);
  border-radius: var(--radius-lg, 16px);
  padding:       var(--space-4, 16px) var(--space-5, 20px);
  box-shadow:    var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08));
  margin-bottom: var(--space-5, 20px);
}

.edit-biz-icon {
  width:           48px;
  height:          48px;
  border-radius:   var(--radius-md, 10px);
  background:      var(--primary-bg, #e8f5ee);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       22px;
  flex-shrink:     0;
}

.edit-biz-info { flex: 1; min-width: 0; }

.edit-biz-name {
  font-size:   var(--font-size-lg, 18px);
  font-weight: 800;
  color:       var(--text-primary, #111);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.edit-biz-cat {
  font-size: var(--font-size-sm, 14px);
  color:     var(--text-light, #888);
  margin-top: 2px;
}

.edit-biz-lock {
  flex-shrink:    0;
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  font-size:      var(--font-size-xs, 12px);
  color:          var(--text-light, #888);
  background:     var(--gray-50, #f7f7f7);
  border:         1px solid var(--border, #e0e0e0);
  border-radius:  var(--radius-full, 9999px);
  padding:        4px 10px;
  white-space:    nowrap;
}

/* ── Section cards ── */
.edit-section {
  background:    var(--white, #fff);
  border:        1px solid var(--border, #e0e0e0);
  border-radius: var(--radius-lg, 16px);
  overflow:      hidden;
  box-shadow:    var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08));
  margin-bottom: var(--space-4, 16px);
}

.edit-section-header {
  display:      flex;
  align-items:  center;
  gap:          var(--space-3, 12px);
  padding:      var(--space-4, 16px) var(--space-5, 20px);
  background:   var(--gray-50, #f7f7f7);
  border-bottom: 1px solid var(--border, #e0e0e0);
}

.edit-section-icon {
  font-size:   20px;
  flex-shrink: 0;
  line-height: 1;
}

.edit-section-title {
  font-size:   var(--font-size-base, 16px);
  font-weight: 700;
  color:       var(--text-primary, #111);
  margin:      0 0 2px;
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-wrap:   wrap;
}

.edit-section-sub {
  font-size: var(--font-size-xs, 12px);
  color:     var(--text-light, #888);
  margin:    0;
}

.edit-section-body {
  padding: var(--space-5, 20px);
}

/* ── Collapsible sections ── */
.edit-section-toggle {
  display:     flex;
  align-items: center;
  gap:         var(--space-3, 12px);
  width:       100%;
  padding:     var(--space-4, 16px) var(--space-5, 20px);
  background:  var(--gray-50, #f7f7f7);
  border:      none;
  border-bottom: 1px solid transparent;
  cursor:      pointer;
  text-align:  left;
  font-family: var(--font, inherit);
  transition:  background var(--transition-fast, .15s);
}

.edit-section-toggle:hover { background: var(--gray-100, #f0f0f0); }

.edit-section-toggle.open {
  border-bottom-color: var(--border, #e0e0e0);
}

.edit-section-toggle-text { flex: 1; min-width: 0; }

.edit-toggle-arrow {
  margin-left: auto;
  flex-shrink: 0;
  color:       var(--text-light, #888);
  transition:  transform .25s;
}

.edit-section-toggle.open .edit-toggle-arrow { transform: rotate(180deg); }

.edit-section-body--collapsible { display: none; }
.edit-section-body--collapsible.open { display: block; }

/* Optional badge in section title */
.edit-opt-badge {
  font-size:      var(--font-size-xs, 12px);
  font-weight:    500;
  color:          var(--text-light, #888);
  background:     var(--gray-100, #f0f0f0);
  border-radius:  var(--radius-sm, 6px);
  padding:        2px 8px;
  vertical-align: middle;
}

/* ── Fields ── */
.edit-field {
  margin-bottom: var(--space-4, 16px);
  position:      relative;
}

.edit-field:last-child { margin-bottom: 0; }

.edit-field-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-4, 16px);
}

@media (max-width: 540px) {
  .edit-field-row { grid-template-columns: 1fr; }
}

.edit-label {
  display:       block;
  font-size:     var(--font-size-sm, 14px);
  font-weight:   600;
  color:         var(--text-secondary, #555);
  margin-bottom: var(--space-2, 8px);
}

.edit-opt {
  font-size:   var(--font-size-xs, 12px);
  font-weight: 400;
  color:       var(--text-light, #888);
  margin-left: 4px;
}

.edit-field-hint {
  font-size:   var(--font-size-xs, 12px);
  color:       var(--text-light, #888);
  margin:      0 0 var(--space-2, 8px);
  line-height: 1.45;
}

.edit-subsection-label {
  font-size:      var(--font-size-xs, 12px);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--text-light, #888);
  margin:         0 0 var(--space-3, 12px);
  display:        block;
}

/* Narrow number input */
.edit-input--narrow { max-width: 180px; }

/* ── Section divider ── */
.edit-divider {
  display:        flex;
  align-items:    center;
  gap:            12px;
  margin:         var(--space-4, 16px) 0;
  color:          var(--text-light, #888);
  font-size:      var(--font-size-xs, 12px);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.edit-divider::before,
.edit-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--border, #e0e0e0);
}

/* ── Photo upload grid ── */
.edit-upload-grid {
  display:               grid;
  grid-template-columns: 1fr 2fr;
  gap:                   var(--space-3, 12px);
  margin-top:            var(--space-4, 16px);
}

@media (max-width: 500px) {
  .edit-upload-grid { grid-template-columns: 1fr; }
}

/* ── Social links grid ── */
.edit-social-grid {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3, 12px);
}

.edit-social-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-3, 12px);
}

.edit-social-row .reg-input { flex: 1; }

/* ── Edit error ── */
.edit-error {
  color:         var(--error, #e53e3e);
  font-size:     var(--font-size-sm, 14px);
  background:    var(--error-bg, #fff5f5);
  border:        1px solid #fecaca;
  border-radius: var(--radius-md, 10px);
  padding:       12px 16px;
  margin-top:    var(--space-4, 16px);
}

/* ── Sticky save bar ── */
.edit-save-bar {
  position:        fixed;
  bottom:          0;
  left:            0;
  right:           0;
  background:      var(--white, #fff);
  border-top:      1px solid var(--border, #e0e0e0);
  padding:         var(--space-3, 12px) var(--space-4, 16px);
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             var(--space-3, 12px);
  z-index:         200;
  box-shadow:      0 -4px 16px rgba(0,0,0,.07);
}

.edit-cancel-link {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  font-size:       var(--font-size-sm, 14px);
  font-weight:     600;
  color:           var(--text-secondary, #555);
  text-decoration: none;
  padding:         10px 18px;
  border:          1px solid var(--border, #e0e0e0);
  border-radius:   var(--radius-md, 10px);
  transition:      all var(--transition-fast, .15s);
  background:      var(--white, #fff);
}

.edit-cancel-link:hover {
  border-color: var(--gray-300, #bbb);
  color:        var(--text-primary, #111);
}

.edit-save-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-2, 8px);
  padding:       10px 26px;
  background:    var(--primary, #1A7A4A);
  color:         var(--white, #fff);
  border:        none;
  border-radius: var(--radius-md, 10px);
  font-size:     var(--font-size-sm, 14px);
  font-weight:   700;
  cursor:        pointer;
  font-family:   var(--font, inherit);
  transition:    background var(--transition-fast, .15s), box-shadow var(--transition-fast, .15s);
  letter-spacing: .01em;
}

.edit-save-btn:hover {
  background:  var(--primary-dark, #145c38);
  box-shadow:  var(--shadow-green, 0 4px 20px rgba(26,122,74,.25));
}

.edit-save-btn:disabled {
  opacity:    .6;
  cursor:     not-allowed;
  box-shadow: none;
}

/* ── lang-btn .active compat (edit-business.js uses .active not --active) ── */
.reg-lang-btn.active {
  background:   var(--primary, #1A7A4A);
  border-color: var(--primary, #1A7A4A);
  color:        #fff;
}

/* ============================================
   CITY AUTOCOMPLETE DROPDOWN
   Reuses tag-suggestions visual pattern
   ============================================ */

.reg-city-wrap {
  position: relative;
}

.reg-city-suggestions {
  position:      absolute;
  top:           calc(100% + 4px);
  left:          0;
  right:         0;
  background:    #fff;
  border:        1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow:    0 8px 24px rgba(0,0,0,.10);
  z-index:       120;
  max-height:    220px;
  overflow-y:    auto;
  list-style:    none;
  margin:        0;
  padding:       4px 0;
}

.reg-city-option {
  padding:       10px 14px;
  font-size:     .875rem;
  color:         #111827;
  cursor:        pointer;
  border-bottom: 1px solid #f3f4f6;
  transition:    background .12s;
}

.reg-city-option:last-child { border-bottom: none; }
.reg-city-option:hover      { background: #f0fdf4; color: #1A7A4A; }

/* ============================================
   BUSINESS HOURS
   ============================================ */

.hours-quick {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       12px 16px;
  background:    #f0fdf4;
  border:        1px solid #d1fae5;
  border-radius: 10px;
  margin-bottom: 16px;
  flex-wrap:     wrap;
}

.hours-quick-label {
  font-size:      .75rem;
  font-weight:    700;
  color:          #6b7280;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space:    nowrap;
}

.hours-quick-times {
  display:     flex;
  align-items: center;
  gap:         8px;
}

.hours-quick-times input[type="time"] {
  padding:       7px 10px;
  border:        1px solid #e5e7eb;
  border-radius: 8px;
  font-size:     .88rem;
  background:    #fff;
  color:         #111827;
}

.hours-quick-actions {
  display:     flex;
  gap:         6px;
  flex-wrap:   wrap;
  margin-left: auto;
}

.hours-quick-btn {
  padding:       6px 14px;
  border:        1.5px solid #1A7A4A;
  border-radius: 20px;
  background:    transparent;
  color:         #1A7A4A;
  font-size:     .82rem;
  font-weight:   600;
  cursor:        pointer;
  transition:    all .15s;
  white-space:   nowrap;
}

.hours-quick-btn:hover {
  background: #1A7A4A;
  color:      #fff;
}

.hours-days {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.hours-day-row {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     10px 14px;
  border-radius: 10px;
  border:      1px solid #e5e7eb;
  background:  #fff;
  transition:  background .15s;
}

.hours-day-row.hours-day-closed {
  background: #f9fafb;
}

.hours-day-check {
  display:     flex;
  align-items: center;
  gap:         8px;
  min-width:   120px;
  cursor:      pointer;
  font-weight: 600;
  font-size:   .88rem;
  color:       #111827;
  user-select: none;
}

.hours-day-closed .hours-day-check {
  color: #9ca3af;
}

.hours-day-check input[type="checkbox"] {
  width:        16px;
  height:       16px;
  accent-color: #1A7A4A;
  cursor:       pointer;
  flex-shrink:  0;
}

.hours-day-times {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex:        1;
}

.hours-day-times input[type="time"] {
  padding:       6px 10px;
  border:        1px solid #e5e7eb;
  border-radius: 8px;
  font-size:     .88rem;
  width:         120px;
  min-width:     0;
  background:    #fff;
  color:         #111827;
  transition:    all .15s;
}

.hours-day-times input[type="time"]:disabled {
  background:     transparent;
  color:          transparent;
  border-color:   transparent;
  pointer-events: none;
}

.hours-sep {
  color:      #9ca3af;
  font-size:  .9rem;
  flex-shrink: 0;
}

.hours-closed-tag {
  font-size:   .78rem;
  color:       #9ca3af;
  font-style:  italic;
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .hours-quick { gap: 10px; }
  .hours-quick-actions { margin-left: 0; }
  .hours-day-row { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .hours-day-check { min-width: 105px; }
  .hours-day-times input[type="time"] { width: 95px; }
}


/* ============================================
   STEP 4 — SERVICES (DB-backed catalog + custom)
   ============================================ */

/* Force [hidden] to actually hide — our display:flex rules
   below would otherwise outrank the UA stylesheet. */
.reg-svc-selected[hidden],
.reg-svc-loading[hidden],
.reg-svc-suggested[hidden],
.reg-svc-custom[hidden],
.reg-svc-custom-msg[hidden] {
  display: none !important;
}

.reg-svc-selected {
  margin-top: 8px;
  padding: 12px 14px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
}

.reg-svc-selected-label {
  font-size: .75rem;
  font-weight: 700;
  color: #1A7A4A;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}

.reg-svc-selected-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reg-svc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px 6px 12px;
  background: #1A7A4A;
  color: #fff;
  border-radius: 50px;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1;
}

.reg-svc-pill-x {
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  padding: 0;
  transition: background .15s;
}
.reg-svc-pill-x:hover {
  background: rgba(255,255,255,0.35);
}

/* Loading state */
.reg-svc-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-top: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  color: #64748b;
  font-size: .9rem;
}

.reg-svc-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #cbd5e1;
  border-top-color: #1A7A4A;
  border-radius: 50%;
  animation: reg-svc-spin .7s linear infinite;
}

@keyframes reg-svc-spin {
  to { transform: rotate(360deg); }
}

/* Preset suggestion chips */
.reg-svc-suggested {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  min-height: 32px;
}

.reg-svc-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: #fff;
  color: #1a1a1a;
  border: 1.5px solid #e2e8f0;
  border-radius: 50px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
  font-family: inherit;
  line-height: 1;
}

.reg-svc-chip:hover {
  border-color: #1A7A4A;
  background: #f0fdf4;
  color: #1A7A4A;
  transform: translateY(-1px);
}

.reg-svc-chip--on {
  background: #dcfce7;
  border-color: #1A7A4A;
  color: #145C38;
}

.reg-svc-chip--on:hover {
  background: #bbf7d0;
}

/* Custom add row */
.reg-svc-custom {
  margin-top: 18px;
}

.reg-svc-custom-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 12px;
  color: #94a3b8;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.reg-svc-custom-divider::before,
.reg-svc-custom-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

.reg-svc-custom-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.reg-svc-custom-row .reg-input {
  flex: 1;
}

.reg-svc-custom-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  background: #1A7A4A;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background .15s;
}
.reg-svc-custom-btn:hover {
  background: #145C38;
}

.reg-svc-custom-msg {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.35;
}
.reg-svc-custom-msg--info {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}
.reg-svc-custom-msg--warn {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.reg-svc-custom-msg--success {
  background: #f0fdf4;
  color: #14532d;
  border: 1px solid #bbf7d0;
}

@media (max-width: 600px) {
  .reg-svc-custom-row {
    flex-direction: column;
  }
  .reg-svc-custom-btn {
    width: 100%;
    justify-content: center;
    padding: 11px 18px;
  }
}


/* ============================================
   GPT-SUGGESTED OPTIONS PANEL
   Shown after a custom service submission when
   GPT offers cleaner phrasings.
   ============================================ */

.reg-svc-options {
  margin-top: 12px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
}

.reg-svc-options-head {
  font-size: .85rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 10px;
}

.reg-svc-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reg-svc-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 600;
  color: #1a1a1a;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
}

.reg-svc-option:hover {
  border-color: #1A7A4A;
  background: #f0fdf4;
  transform: translateY(-1px);
}

.reg-svc-option:first-child {
  border-color: #1A7A4A;
  background: #f0fdf4;
}

.reg-svc-option-name {
  flex: 1;
  min-width: 0;
}

.reg-svc-option-badge {
  display: inline-block;
  padding: 3px 9px;
  background: #e2e8f0;
  color: #64748b;
  border-radius: 50px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
}

.reg-svc-option:first-child .reg-svc-option-badge {
  background: #1A7A4A;
  color: #fff;
}

.reg-svc-option-badge--exists {
  background: #dbeafe;
  color: #1e40af;
}

.reg-svc-option-badge--original {
  background: #fef3c7;
  color: #92400e;
}

.reg-svc-options-cancel {
  margin-top: 10px;
  width: 100%;
  padding: 8px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: .82rem;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
  font-family: inherit;
}

.reg-svc-options-cancel:hover {
  color: #64748b;
  text-decoration-color: currentColor;
}

@media (max-width: 600px) {
  .reg-svc-option {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}