/* Structure & spacing */
.safari-form { 
  max-width: 900px;
  margin: 32px auto;
  background:#fff;
  padding: 36px 36px 28px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  font-family: Arial, Helvetica, sans-serif;
}
.safari-form, .safari-form * { box-sizing: border-box; }

/* Headings normalized (theme-safe) */
.safari-form h2 { margin: 0 0 12px; font-size: 26px; line-height: 1.25; color: #2f5d16; font-weight: 800; }
.safari-form h3 { margin: 14px 0 8px; font-size: 18px; color: #2f5d16; }

/* Inputs */
.safari-form label { display:block; margin: 12px 0; color:#333; }
.safari-form input, .safari-form select, .safari-form textarea {
  width:100%; padding:12px 14px; border:1px solid #d7d7d7; border-radius:10px; font-size:16px;
  outline:0; background:#fff; transition: box-shadow .2s, border-color .2s;
}
.safari-form input:focus, .safari-form select:focus, .safari-form textarea:focus {
  border-color:#7bbb3b; box-shadow: 0 0 0 3px rgba(123,187,59,.18);
}

/* Checkbox alignment for EVERY section using .cb */
.safari-form .checkbox-group { margin: 10px 0 6px; }
.safari-form label.cb { display:flex; align-items:center; gap:12px; margin: 10px 0; }
.safari-form label.cb input[type="checkbox"] { width:auto; height:auto; margin:0; transform: translateY(-1px); }
.safari-form label.cb span { display:inline-block; line-height:1.35; }

/* Progress (sticky inside form so it stays visible) */
.sp-progress { position: sticky; top: 10px; z-index: 10; background: #fff; padding-bottom: 10px; margin: 4px 0 22px; box-shadow: 0 4px 0 rgba(0,0,0,0.02); }
.sp-progress-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.sp-progress-label { font-weight:700; color:#2f5d16; }
.sp-progress-percent { font-weight:700; color:#ff9900; }
.sp-progress-bar { height:10px; background:#f0f0f0; border-radius:999px; overflow:hidden; }
.sp-progress-fill { height:10px; background:#65d10e; width:0%; transition:width .25s ease; }

/* Step transitions */
.form-step { display:none; opacity:0; visibility:hidden; transform: translateY(6px); transition: opacity .28s, transform .28s, visibility 0s linear .28s; }
.form-step.active { display:block; opacity:1; visibility:visible; transform: translateY(0); transition-delay:0s; }

/* Buttons */
.next-btn, .prev-btn, .submit-btn, .planning-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; font-weight:700; border-radius:10px; border:none; cursor:pointer;
  text-decoration:none; transition: transform .04s, background-color .18s, box-shadow .18s;
  box-shadow: 0 3px 0 rgba(0,0,0,.12); user-select:none; margin-right: 10px;
}
.next-btn, .submit-btn { background:#65d10e; color:#fff; }
.next-btn:hover, .submit-btn:hover { background:#58ba0c; }
.prev-btn { background:#e0e0e0; color:#333; }
.prev-btn:hover { background:#d5d5d5; }
.planning-btn { background:#ffa726; color:#fff; margin-left:auto; }
.planning-btn:hover { background:#f59606; }

/* Messages */
.form-message { margin-top:16px; padding:12px; border-radius:10px; display:none; }
.form-message.success { display:block; background:#edf9e6; color:#2f5d16; border:1px solid #b9e29f; }
.form-message.error { display:block; background:#fdecea; color:#a8071a; border:1px solid #f5c6cb; }

/* Mobile */
@media (max-width: 640px) {
  .safari-form { padding: 22px 18px; border-radius: 14px; }
  .safari-form h2 { font-size: 22px; }
}
