/* =============================================================
   LeadPay Manager – Frontend Form Styles
   Modern, mobile-first, theme-agnostic
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Variables ───────────────────────────────────────────────────── */
.lpm-form-wrap {
  --lpm-f-primary:   #6366f1;
  --lpm-f-primary-d: #4f46e5;
  --lpm-f-primary-l: #e0e7ff;
  --lpm-f-success:   #10b981;
  --lpm-f-danger:    #ef4444;
  --lpm-f-border:    #e2e8f0;
  --lpm-f-text:      #1e293b;
  --lpm-f-muted:     #64748b;
  --lpm-f-bg:        #ffffff;
  --lpm-f-radius:    12px;
  --lpm-f-shadow:    0 4px 24px rgba(0,0,0,.08);
  --lpm-f-transition: all .2s ease;

  box-sizing: border-box;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  color: var(--lpm-f-text);
  line-height: 1.6;
}

.lpm-form-wrap *,
.lpm-form-wrap *::before,
.lpm-form-wrap *::after {
  box-sizing: inherit;
}

/* ── Form Container ──────────────────────────────────────────────── */
.lpm-form {
  background: var(--lpm-f-bg);
  border: 1.5px solid var(--lpm-f-border);
  border-radius: var(--lpm-f-radius);
  padding: 36px 40px;
  box-shadow: var(--lpm-f-shadow);
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}

/* ── Form Header ─────────────────────────────────────────────────── */
.lpm-form-header {
  margin-bottom: 22px;
}

.lpm-form-title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.lpm-form-desc {
  margin: 0;
  font-size: 14px;
  color: var(--lpm-f-muted);
  line-height: 1.5;
}

/* ── Fields ──────────────────────────────────────────────────────── */
.lpm-field {
  margin-bottom: 20px;
}

.lpm-label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lpm-f-muted);
  margin-bottom: 7px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.lpm-req {
  color: var(--lpm-f-danger);
  margin-left: 2px;
}

/* ── Inputs ──────────────────────────────────────────────────────── */
.lpm-input {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--lpm-f-border);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  color: var(--lpm-f-text);
  background: #fafafa;
  transition: var(--lpm-f-transition);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.lpm-input:focus {
  border-color: var(--lpm-f-primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(99,102,241,.12);
}

.lpm-input::placeholder { color: #cbd5e1; }

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

/* ── Select ──────────────────────────────────────────────────────── */
.lpm-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
}

/* ── Radio / Checkbox ────────────────────────────────────────────── */
.lpm-radio-label,
.lpm-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  padding: 10px 14px;
  margin-bottom: 6px;
  border: 1.5px solid var(--lpm-f-border);
  border-radius: 9px;
  cursor: pointer;
  transition: var(--lpm-f-transition);
}

.lpm-radio-label:hover,
.lpm-checkbox-label:hover {
  border-color: var(--lpm-f-primary);
  background: var(--lpm-f-primary-l);
}

.lpm-radio-label input[type="radio"],
.lpm-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--lpm-f-primary);
  flex-shrink: 0;
  cursor: pointer;
}

/* ── File Upload ─────────────────────────────────────────────────── */
.lpm-file {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13.5px;
  background: #fff;
}

.lpm-file::-webkit-file-upload-button {
  background: var(--lpm-f-primary);
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-right: 10px;
  transition: var(--lpm-f-transition);
}

.lpm-file::-webkit-file-upload-button:hover {
  background: var(--lpm-f-primary-d);
}

/* ── Form Footer ─────────────────────────────────────────────────── */
.lpm-form-footer {
  margin-top: 28px;
}

/* ── Submit Button ───────────────────────────────────────────────── */
.lpm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 10px;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: var(--lpm-f-transition);
  font-family: inherit;
  letter-spacing: -0.2px;
}

.lpm-btn-primary {
  background: linear-gradient(135deg, var(--lpm-f-primary), #818cf8);
  color: #fff;
  width: 100%;
  box-shadow: 0 4px 14px rgba(99,102,241,.35);
}

.lpm-btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(99,102,241,.45);
}

.lpm-btn-primary:disabled,
.lpm-btn-primary.is-loading {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.lpm-btn-spinner {
  display: inline-block;
  animation: lpm-spin 0.8s linear infinite;
}

@keyframes lpm-spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* ── Validation ──────────────────────────────────────────────────── */
.lpm-input.lpm-invalid {
  border-color: var(--lpm-f-danger);
  background: #fff5f5;
}

.lpm-input.lpm-invalid:focus {
  box-shadow: 0 0 0 4px rgba(239,68,68,.12);
}

.lpm-field-error {
  display: block;
  color: var(--lpm-f-danger);
  font-size: 12.5px;
  font-weight: 500;
  margin-top: 5px;
  animation: lpm-fade-in .2s ease;
}

/* ── Messages ────────────────────────────────────────────────────── */
.lpm-form-messages {
  margin-top: 14px;
}

.lpm-alert {
  padding: 12px 16px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  animation: lpm-fade-in .3s ease;
}

.lpm-alert-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.lpm-alert-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }

/* ── Success Panel ───────────────────────────────────────────────── */
.lpm-success-panel {
  text-align: center;
  padding: 48px 32px;
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--lpm-f-radius);
  box-shadow: var(--lpm-f-shadow);
  border: 1.5px solid var(--lpm-f-border);
}

.lpm-success-icon {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, var(--lpm-f-success), #34d399);
  color: #fff;
  font-size: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 8px 24px rgba(16,185,129,.3);
  animation: lpm-pop-in .4s cubic-bezier(.34,1.56,.64,1);
}

@keyframes lpm-pop-in {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.lpm-success-msg {
  font-size: 17px;
  font-weight: 600;
  color: var(--lpm-f-text);
  margin: 0;
  line-height: 1.5;
}

/* ── Error ───────────────────────────────────────────────────────── */
.lpm-error {
  color: #dc2626;
  font-size: 14px;
  padding: 10px 14px;
  background: #fee2e2;
  border-radius: 8px;
  border: 1px solid #fca5a5;
}

/* ── Animations ──────────────────────────────────────────────────── */
@keyframes lpm-fade-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .lpm-form {
    padding: 24px 20px;
    border-radius: 10px;
  }

  .lpm-input {
    font-size: 16px; /* prevent iOS zoom */
  }

  .lpm-btn-primary { font-size: 15px; padding: 14px 24px; }
}