/*
Theme Name: Allu Form
Description: Prescription form theme for Allu Therapeutics.
Version: 1.0.0
Text Domain: allu-form
*/

/* ── Scoped custom properties ──────────────────────────────────────────────── */

.allu-form {
  --af-bg: #eef3fb;
  --af-card: #ffffff;
  --af-text: #1f2937;
  --af-muted: #6b7280;
  --af-primary: #1d4ed8;
  --af-primary-dark: #1e40af;
  --af-border: #dbe3ef;
  --af-success-bg: #e8f7ea;
  --af-success-text: #166534;
  --af-error-bg: #fdeaea;
  --af-error-text: #991b1b;
}

/* ── Base wrapper ──────────────────────────────────────────────────────────── */

.allu-form {
  box-sizing: border-box;
  font-family: Inter, Arial, sans-serif;
  color: var(--af-text);
  line-height: 1.5;
  max-width: 1120px;
  margin: 30px auto;
  padding: 0 16px;
}

.allu-form *,
.allu-form *::before,
.allu-form *::after {
  box-sizing: border-box;
}

/* ── Topbar ────────────────────────────────────────────────────────────────── */

.allu-form .topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  background: linear-gradient(90deg, #0f172a, #1d4ed8);
  border-radius: 14px;
  padding: 16px 18px;
  color: #fff;
}
.allu-form .topbar h1 { margin: 0; font-size: 1.25rem; color: #fff; }
.allu-form .topbar nav { display: flex; gap: 8px; }
.allu-form .topbar a {
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
}

/* ── Card ──────────────────────────────────────────────────────────────────── */

.allu-form .card {
  background: var(--af-card);
  border-radius: 14px;
  border: 1px solid var(--af-border);
  box-shadow: 0 12px 28px rgba(30, 41, 59, .08);
  padding: 20px;
  margin-bottom: 18px;
}

/* ── Form shell & steps ────────────────────────────────────────────────────── */

.allu-form .form-shell { padding-top: 16px; }
.allu-form .step-header h2 { margin: 0 0 6px; color: var(--af-text); }
.allu-form .step-header p { margin: 0 0 14px; color: var(--af-muted); font-size: 14px; }

.allu-form .steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 8px;
}
.allu-form .steps span {
  height: 12px;
  border-radius: 999px;
  background: #d1d9e6;
  text-indent: -9999px;
  display: block;
}
.allu-form .steps span.active { background: linear-gradient(90deg, #2563eb, #3b82f6); }
.allu-form .step-labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 4px 0 18px;
  color: var(--af-muted);
  font-size: 12px;
  font-weight: 600;
}

/* ── Grid layout ───────────────────────────────────────────────────────────── */

.allu-form .grid { display: grid; gap: 14px; }
.allu-form .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── Labels ────────────────────────────────────────────────────────────────── */

.allu-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
  margin-top: 8px;
  color: var(--af-text);
}

/* ── Form controls ─────────────────────────────────────────────────────────── */

.allu-form input,
.allu-form textarea,
.allu-form select,
.allu-form button {
  font: inherit;
  border-radius: 10px;
}
.allu-form input,
.allu-form textarea,
.allu-form select {
  border: 1px solid #cdd7e5;
  padding: 10px 12px;
  background: #fff;
  font-weight: 400;
  color: #374151;
}
.allu-form input[readonly] {
  background: #f8fafc;
  color: #334155;
}
.allu-form textarea { min-height: 90px; resize: vertical; }
.allu-form select[multiple] { min-height: 130px; }

/* ── Disclaimer ────────────────────────────────────────────────────────────── */

.allu-form .disclaimer {
  background: linear-gradient(180deg, #f8fbff, #f4f7ff);
  border: 1px solid #d6e4ff;
  border-left: 4px solid var(--af-primary);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.allu-form .disclaimer p { margin: 8px 0; font-size: 13px; line-height: 1.35; color: #334155; }

/* ── Signature ─────────────────────────────────────────────────────────────── */

.allu-form .signature-fieldset {
  border: 1px solid #d7e2f2;
  border-radius: 12px;
  padding: 14px;
  background: #f9fbff;
  margin-top: 18px;
}
.allu-form .signature-fieldset legend { font-weight: 700; padding: 0 6px; color: var(--af-text); }
.allu-form .signature-options { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.allu-form .signature-options label { font-size: 13px; font-weight: 600; flex-direction: row; align-items: center; }
.allu-form #signaturePad {
  border: 2px dashed #93a7c8;
  border-radius: 10px;
  background: #fff;
  display: block;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */

.allu-form button {
  cursor: pointer;
  border: none;
  padding: 10px 14px;
  background: linear-gradient(90deg, var(--af-primary), var(--af-primary-dark));
  color: #fff;
  font-weight: 600;
}
.allu-form button:hover { filter: brightness(1.03); }
.allu-form button.danger { background: linear-gradient(90deg, #b91c1c, #991b1b); color: #fff; }
.allu-form #prevBtn { background: linear-gradient(90deg, #64748b, #475569); color: #fff; }
.allu-form #nextBtn { background: linear-gradient(90deg, var(--af-primary), var(--af-primary-dark)); color: #fff; }
.allu-form #submitBtn { background: linear-gradient(90deg, var(--af-primary), var(--af-primary-dark)); color: #fff; }

/* ── Navigation buttons ────────────────────────────────────────────────────── */

.allu-form .nav-buttons {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.allu-form .hidden { display: none !important; }
.allu-form .step { display: none; }
.allu-form .step.active { display: block; }

/* ── Alerts ────────────────────────────────────────────────────────────────── */

.allu-form .alert {
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 12px;
  border: 1px solid transparent;
  font-weight: 600;
}
.allu-form .success { background: var(--af-success-bg); color: var(--af-success-text); border-color: #bbf7d0; }
.allu-form .error { background: var(--af-error-bg); color: var(--af-error-text); border-color: #fecaca; }

/* ── Table ─────────────────────────────────────────────────────────────────── */

.allu-form table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.allu-form thead th {
  background: #f1f5f9;
  color: #0f172a;
  padding: 10px;
  border-top: 1px solid #dbe3ef;
  border-bottom: 1px solid #dbe3ef;
}
.allu-form tbody td { border-bottom: 1px solid #e2e8f0; padding: 10px; vertical-align: top; }

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .allu-form .grid.two { grid-template-columns: 1fr; }
  .allu-form .topbar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .allu-form .step-labels { font-size: 11px; }
}

/* ── Product picker ────────────────────────────────────────────────────────── */

.allu-form .product-picker {
  border: 1px solid #d7e2f2;
  border-radius: 12px;
  padding: 12px;
  background: #f9fbff;
}
.allu-form .product-picker legend { font-weight: 700; padding: 0 6px; color: var(--af-text); }
.allu-form .hint { margin: 0 0 10px; color: var(--af-muted); font-size: 12px; }
.allu-form .product-list { display: grid; gap: 8px; max-height: 220px; overflow: auto; }
.allu-form .product-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  border: 1px solid #d9e3f2;
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff;
}
.allu-form .product-item input { margin: 0; }

/* ── Thank you ─────────────────────────────────────────────────────────────── */

.allu-form .thank-you h2 { margin-top: 0; }
.allu-form .thank-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* ── Auto display ──────────────────────────────────────────────────────────── */

.allu-form .auto-display {
  border: 1px solid #cdd7e5;
  border-radius: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  min-height: 90px;
  font-size: 13px;
  color: #374151;
  line-height: 1.6;
}
.allu-form .auto-display .auto-product-name {
  font-weight: 700;
  color: #1f2937;
}
.allu-form .auto-display .auto-product-value {
  font-weight: 400;
  color: #374151;
}
.allu-form .btn-link {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(90deg, var(--af-primary), var(--af-primary-dark));
  text-decoration: none;
  font-weight: 600;
}
.allu-form .btn-link.ghost {
  background: #fff;
  color: var(--af-primary-dark);
  border: 1px solid #c7d2fe;
}

/* ── Clear signature ───────────────────────────────────────────────────────── */

.allu-form #clearSig {
  background: #fff;
  color: var(--af-muted);
  border: 1px solid #cdd7e5;
  font-weight: 400;
  font-size: 13px;
  padding: 6px 12px;
  margin-top: 6px;
}
.allu-form #clearSig:hover {
  background: #f1f5f9;
  color: var(--af-text);
}