/* ============================================================
   Robotics Enrollment — Public Form Styles
   ============================================================ */

.re-enrollment-form-wrap {
  max-width: 600px;
  margin: 0 auto;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.re-form-header { margin-bottom: 24px; }
.re-form-title  { font-size: 24px; font-weight: 700; color: #1a1a2e; margin: 0 0 4px; }

/* ── Fields ── */
.re-field-wrap { margin-bottom: 18px; }
.re-field-wrap label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}
.re-required { color: #ef4444; }
.re-help-text { display: block; font-size: 12px; color: #9ca3af; margin-top: 4px; }

.re-field-wrap input[type=text],
.re-field-wrap input[type=number],
.re-field-wrap input[type=email],
.re-field-wrap input[type=tel],
.re-field-wrap input[type=date],
.re-field-wrap textarea,
.re-field-wrap select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  color: #1f2937;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.re-field-wrap input:focus,
.re-field-wrap textarea:focus,
.re-field-wrap select:focus {
  outline: none;
  border-color: #5e35b1;
  box-shadow: 0 0 0 3px rgba(94,53,177,.12);
}
.re-field-wrap input.re-error-input,
.re-field-wrap textarea.re-error-input,
.re-field-wrap select.re-error-input {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}

/* Checkboxes & Radios */
.re-checkbox-group, .re-radio-group {
  display: flex; flex-direction: column; gap: 8px; margin-top: 4px;
}
.re-checkbox-label,
.re-radio-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: #374151; cursor: pointer;
  padding: 8px 12px; border: 1.5px solid #e5e7eb;
  border-radius: 7px; transition: all .15s;
}
.re-checkbox-label:hover,
.re-radio-label:hover   { border-color: #5e35b1; background: #f5f3ff; }
.re-checkbox-label input[type=checkbox],
.re-radio-label input[type=radio] {
  width: 16px; height: 16px; accent-color: #5e35b1;
}

/* Copy-from (WhatsApp) */
.re-copy-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: #25d366; cursor: pointer; margin-top: 6px;
  padding: 4px 10px; border: 1px solid #25d366; border-radius: 20px;
  transition: all .15s;
}
.re-copy-label:hover { background: #25d366; color: #fff; }
.re-copy-label input { accent-color: #25d366; }

/* Error msg */
.re-error-msg { display:block; font-size:12px; color:#ef4444; margin-top:4px; min-height:16px; }

/* Dividers */
.re-divider { border: none; border-top: 1.5px solid #e5e7eb; margin: 12px 0 6px; }
.re-divider-label { font-size: 12px; color: #9ca3af; text-transform: uppercase; letter-spacing: .5px; margin: -4px 0 10px; }
.re-field-heading  { font-size: 16px; font-weight: 700; color: #1a1a2e; margin: 8px 0 12px; border-bottom: 2px solid #f3f0ff; padding-bottom: 6px; }

/* Placeholder — very reduced opacity for watermark-like subtlety */
.re-field-wrap input::placeholder,
.re-field-wrap textarea::placeholder {
  color: #6b7280;
  opacity: 0.35;
}
.re-field-wrap input::-webkit-input-placeholder,
.re-field-wrap textarea::-webkit-input-placeholder { color: #6b7280; opacity: 0.35; }
.re-field-wrap input::-moz-placeholder,
.re-field-wrap textarea::-moz-placeholder           { color: #6b7280; opacity: 0.35; }
.re-field-wrap input:-ms-input-placeholder,
.re-field-wrap textarea:-ms-input-placeholder       { color: #6b7280; opacity: 0.35; }

/* Submit button */
.re-submit-row { margin-top: 24px; }
.re-submit-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 32px; border: none; border-radius: 8px;
  color: #fff; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: opacity .15s, transform .1s;
  width: 100%; justify-content: center;
}
.re-submit-btn:hover   { opacity: .92; transform: translateY(-1px); }
.re-submit-btn:active  { transform: translateY(0); }
.re-submit-btn:disabled{ opacity: .6; cursor: not-allowed; }

/* ── Circular Spinner ── */
.re-btn-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: re-spin 0.8s linear infinite;
}
@keyframes re-spin { to { transform: rotate(360deg); } }

/* Success state */
.re-form-success { text-align: center; padding: 40px 20px; }
.re-success-icon { font-size: 56px; line-height: 1; margin-bottom: 12px; }
.re-success-msg  { font-size: 16px; color: #1a1a2e; font-weight: 500; }

/* Inline error banner */
.re-form-error {
  margin-top: 14px; padding: 12px 16px;
  background: #fff1f2; border-left: 4px solid #ef4444; border-radius: 6px;
  font-size: 13px; color: #b91c1c;
}

/* Apply button */
.re-apply-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; border: none; border-radius: 8px;
  color: #fff; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: opacity .15s, transform .1s;
}
.re-apply-btn:hover { opacity: .9; transform: translateY(-1px); }

/* Modal overlay */
.re-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 99999; display: flex; align-items: center;
  justify-content: center; padding: 20px;
}
.re-modal-pub {
  background: #fff; border-radius: 14px; padding: 32px;
  max-width: 620px; width: 100%; max-height: 90vh;
  overflow-y: auto; position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
}
.re-modal-pub-close {
  position: absolute; top: 16px; right: 16px;
  background: #f3f4f6; border: none; border-radius: 50%;
  width: 32px; height: 32px; cursor: pointer;
  font-size: 16px; line-height: 1; display: flex;
  align-items: center; justify-content: center;
  transition: background .15s;
}
.re-modal-pub-close:hover { background: #e5e7eb; }

/* Unavailable */
.re-form-unavailable { color: #9ca3af; font-style: italic; }

@media (max-width: 480px) {
  .re-modal-pub { padding: 20px; }
  .re-checkbox-group, .re-radio-group { gap: 6px; }
}