/* ==========================================================================
   Register page — category tabs styled as ticket stubs the user "tears
   off" to open a form, echoing the ticket-card motif from style.css.
   ========================================================================== */

.register-hero { background: var(--color-cream-dark); padding: 48px 0 0; }
.register-content { padding-bottom: 88px; }
.declaration-box a { color: var(--color-leaf); font-weight: 600; }

.category-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-top: -1px; position: relative; z-index: 2;
}
.category-tab {
  background: var(--color-white); border: 2px solid var(--color-border); border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 24px 18px; text-align: center; cursor: pointer;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
  font-family: var(--font-body); font-weight: 700; color: var(--color-ink-soft);
}
.category-tab .ico { font-size: 1.6rem; display: block; margin-bottom: 10px; }
.category-tab small { display: block; font-weight: 500; font-size: 0.72rem; color: var(--color-ink-soft); margin-top: 4px; }
.category-tab:hover { border-color: var(--color-leaf-light); transform: translateY(-3px); }
.category-tab.active {
  border-color: var(--color-leaf); background: var(--color-leaf); color: var(--color-white);
}
.category-tab.active small { color: rgba(255,255,255,0.8); }

.form-wrap {
  background: var(--color-white); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 48px; border: 1px solid var(--color-border); border-top: none;
}

.reg-form { display: none; }
.reg-form.active { display: block; animation: fadeSlide 380ms ease; }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.form-section-title {
  font-family: var(--font-display); font-size: var(--step-1); color: var(--color-forest);
  margin: 32px 0 18px; padding-bottom: 10px; border-bottom: 2px dashed var(--color-border);
}
.form-section-title:first-child { margin-top: 0; }

.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.field-grid .full { grid-column: 1 / -1; }

.field {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px;
}
.field label { font-size: var(--step--1); font-weight: 600; color: var(--color-forest-dark); }
.field label .req { color: var(--color-danger); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="date"], .field input[type="number"], .field select, .field textarea {
  padding: 13px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border);
  background: var(--color-cream); color: var(--color-ink); transition: border-color var(--transition), box-shadow var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--color-leaf); box-shadow: 0 0 0 3px rgba(76,122,61,0.15); outline: none;
}
.field textarea { resize: vertical; min-height: 90px; }
.field .hint { font-size: 0.78rem; color: var(--color-ink-soft); }
.field .error-msg { font-size: 0.78rem; color: var(--color-danger); display: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--color-danger); background: #FBF0EE; }
.field.invalid .error-msg { display: block; }
.field.valid input, .field.valid select { border-color: var(--color-success); }

.radio-group, .checkbox-group { display: flex; flex-wrap: wrap; gap: 14px; }
.radio-option, .checkbox-option {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1.5px solid var(--color-border);
  border-radius: 999px; cursor: pointer; font-size: var(--step--1); transition: border-color var(--transition), background var(--transition);
}
.radio-option:has(input:checked), .checkbox-option:has(input:checked) {
  border-color: var(--color-leaf); background: rgba(76,122,61,0.08);
}
.radio-option input, .checkbox-option input { accent-color: var(--color-leaf); width: 16px; height: 16px; }

.upload-zone {
  border: 2px dashed var(--color-border); border-radius: var(--radius-md); padding: 32px;
  text-align: center; cursor: pointer; transition: border-color var(--transition), background var(--transition);
  background: var(--color-cream);
}
.upload-zone.dragover { border-color: var(--color-leaf); background: rgba(76,122,61,0.06); }
.upload-zone .ico { font-size: 2rem; color: var(--color-leaf); margin-bottom: 10px; }
.upload-zone p { margin-bottom: 4px; }
.upload-zone .hint { font-size: 0.78rem; }
#file-input { display: none; }
.file-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.file-chip {
  display: flex; align-items: center; gap: 8px; background: var(--color-cream-dark); padding: 8px 12px;
  border-radius: 999px; font-size: 0.8rem; font-family: var(--font-mono);
}
.file-chip button { background: none; border: none; color: var(--color-danger); cursor: pointer; font-size: 1rem; line-height: 1; }

.declaration-box {
  display: flex; gap: 12px; align-items: flex-start; background: var(--color-cream-dark);
  border-radius: var(--radius-sm); padding: 16px 18px; margin: 24px 0;
}
.declaration-box input { margin-top: 4px; accent-color: var(--color-leaf); width: 18px; height: 18px; flex-shrink: 0; }
.declaration-box label { font-size: var(--step--1); color: var(--color-ink-soft); }

.submit-row { display: flex; align-items: center; gap: 18px; margin-top: 8px; flex-wrap: wrap; }
.form-msg { font-size: var(--step--1); font-weight: 600; padding: 12px 18px; border-radius: var(--radius-sm); display: none; }
.form-msg.success { display: block; background: rgba(59,122,62,0.12); color: var(--color-success); }
.form-msg.error { display: block; background: rgba(179,64,42,0.12); color: var(--color-danger); }

.btn-spinner {
  width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  border-radius: 50%; animation: spin 700ms linear infinite; display: none;
}
.btn.is-loading .btn-spinner { display: inline-block; }
.btn.is-loading .btn-text { opacity: 0.7; }

.success-panel {
  text-align: center; padding: 60px 20px; display: none;
}
.success-panel.show { display: block; animation: fadeSlide 420ms ease; }
.success-panel .icon-circle {
  width: 84px; height: 84px; border-radius: 50%; background: rgba(59,122,62,0.12); color: var(--color-success);
  display: flex; align-items: center; justify-content: center; font-size: 2.4rem; margin: 0 auto 20px;
}
.success-panel .sub-id { font-family: var(--font-mono); background: var(--color-cream-dark); padding: 6px 14px; border-radius: 999px; display: inline-block; margin: 12px 0; }