/**
 * Smart Approval Form Builder – Frontend Styles
 *
 * Clean, accessible, mobile-first form styles.
 *
 * @package SmartApprovalFormBuilder
 */

/* ── Wrapper ────────────────────────────────────────────────────────────────── */
.safb-form-wrapper {
  max-width: 680px;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1a1a1a;
}

/* ── Description ────────────────────────────────────────────────────────────── */
.safb-form-description {
  color: #555;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 24px;
}

/* ── Notice Banners ─────────────────────────────────────────────────────────── */
.safb-form-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 20px;
  animation: safbSlideDown .3s ease;
}
.safb-form-notice-success {
  background: #d1fae5;
  color: #065f46;
  border-left: 4px solid #10b981;
}
.safb-form-notice-error {
  background: #fee2e2;
  color: #7f1d1d;
  border-left: 4px solid #ef4444;
}
.safb-form-notice .dashicons { flex-shrink: 0; font-size: 20px; width: 20px; height: 20px; }

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

/* ── Form ───────────────────────────────────────────────────────────────────── */
.safb-form { width: 100%; }

/* ── Fields ─────────────────────────────────────────────────────────────────── */
.safb-field-wrap {
  margin-bottom: 20px;
}
.safb-field-wrap label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}
.safb-required {
  color: #ef4444;
  margin-left: 3px;
}

/* Text / Email / Number / Date / Textarea / Select */
.safb-input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 6px;
  font-size: 15px;
  color: #1a1a1a;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
  appearance: auto;
}
.safb-input:focus {
  outline: none;
  border-color: #2271b1;
  box-shadow: 0 0 0 3px rgba(34,113,177,.15);
}
.safb-input::placeholder { color: #9ca3af; }

textarea.safb-input { resize: vertical; min-height: 100px; }

/* Select */
select.safb-input { cursor: pointer; }

/* Checkbox / Radio groups */
.safb-check-group,
.safb-radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.safb-check-label,
.safb-radio-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
}
.safb-check-label input[type="checkbox"],
.safb-radio-label input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #2271b1;
  flex-shrink: 0;
  cursor: pointer;
}

/* File input */
.safb-file-input {
  padding: 8px;
  font-size: 13px;
  border: 1.5px dashed #d1d5db;
  background: #f9fafb;
  cursor: pointer;
}
.safb-file-input:hover { border-color: #2271b1; background: #f0f5fb; }

/* Field description */
.safb-field-desc {
  font-size: 12px;
  color: #6b7280;
  margin-top: 5px;
}

/* ── Submit Button ───────────────────────────────────────────────────────────── */
.safb-form-footer { margin-top: 28px; }

.safb-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 30px;
  background: #2271b1;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s, transform .1s, box-shadow .2s;
  box-shadow: 0 2px 6px rgba(34,113,177,.35);
}
.safb-submit-btn:hover { background: #135e96; box-shadow: 0 4px 12px rgba(34,113,177,.4); }
.safb-submit-btn:active { transform: translateY(1px); }
.safb-submit-btn:disabled { opacity: .65; cursor: not-allowed; }
.safb-submit-btn:focus-visible { outline: 3px solid #2271b1; outline-offset: 3px; }

/* Spinner inside button */
.safb-spinner-svg {
  width: 18px;
  height: 18px;
  animation: safbSpin .8s linear infinite;
}
.safb-spinner-svg circle {
  stroke: rgba(255,255,255,.8);
  stroke-linecap: round;
  stroke-dasharray: 80;
  stroke-dashoffset: 60;
}
@keyframes safbSpin { to { transform: rotate(360deg); } }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .safb-form-wrapper { max-width: 100%; }
  .safb-submit-btn   { width: 100%; }
  .safb-input { font-size: 16px; } /* prevent iOS zoom */
}