/* =================================================================
   Coswaa Tool UI — inputs, buttons, charts, risk meters, export
   ================================================================= */

/* ── Inputs ─────────────────────────────────────────────────── */
.coswaa-tool-wrap textarea,
.tool-wrapper textarea,
.coswaa-tool-wrap input[type="text"],
.coswaa-tool-wrap input[type="number"],
.coswaa-tool-wrap select {
  width: 100%;
  font-size: 15px;
  padding: 12px 14px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--c-radius);
  background: #fff;
  color: var(--c-text);
  transition: border-color var(--c-t), box-shadow var(--c-t);
  font-family: var(--c-font);
  box-sizing: border-box;
}
.coswaa-tool-wrap textarea:focus,
.coswaa-tool-wrap input:focus,
.coswaa-tool-wrap select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
  outline: none;
}

/* ── Submit button ──────────────────────────────────────────── */
.coswaa-tool-wrap button[type="submit"],
.tool-wrapper button[type="submit"],
.coswaa-tool-wrap .generate-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 28px;
  border: none;
  border-radius: var(--c-radius);
  cursor: pointer;
  transition: background var(--c-t), transform .1s ease;
  margin-top: 12px;
  font-family: var(--c-font);
}
.coswaa-tool-wrap button[type="submit"]:hover { background: var(--c-primary-d); transform: translateY(-1px); }
.coswaa-tool-wrap button[type="submit"]:active { transform: none; }
.coswaa-tool-wrap button[type="submit"]:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ── Finance chart ──────────────────────────────────────────── */
.coswaa-chart-wrap {
  width: 100%;
  max-width: 460px;
  margin: 24px auto;
  position: relative;
}
.coswaa-chart-wrap canvas { max-height: 280px; }

/* ── Data table (amortization etc.) ─────────────────────────── */
.coswaa-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 16px;
  display: block;
  overflow-x: auto;
}
.coswaa-data-table th {
  background: var(--c-bg);
  font-weight: 700;
  padding: 10px 14px;
  text-align: left;
  border: 1px solid var(--c-border);
  white-space: nowrap;
}
.coswaa-data-table td {
  padding: 9px 14px;
  border: 1px solid var(--c-border);
  color: var(--c-text);
}
.coswaa-data-table tr:nth-child(even) td { background: #f8fafc; }
.coswaa-data-table tr:hover td { background: #eff6ff; }

/* ── Health risk meter ──────────────────────────────────────── */
.coswaa-risk-meter {
  height: 14px;
  background: linear-gradient(to right,#16a34a 0%,#eab308 50%,#dc2626 100%);
  border-radius: 999px;
  position: relative;
  margin: 10px 0;
}
.coswaa-risk-needle {
  position: absolute;
  top: -4px;
  width: 22px; height: 22px;
  background: #fff;
  border: 3px solid var(--c-text);
  border-radius: 50%;
  transform: translateX(-50%);
  transition: left .6s cubic-bezier(.34,1.56,.64,1);
  box-shadow: var(--c-shadow);
}
.coswaa-risk-label {
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-block;
  margin-top: 8px;
}
.coswaa-risk-label--normal  { background:#dbeafe; color:#1d4ed8; }
.coswaa-risk-label--high    { background:#fef3c7; color:#92400e; }
.coswaa-risk-label--danger  { background:#fee2e2; color:#b91c1c; }

/* ── SERP preview ────────────────────────────────────────────── */
.coswaa-serp-preview {
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 16px 20px;
  background: #fff;
  font-family: Arial, sans-serif;
  max-width: 600px;
}
.coswaa-serp-url   { font-size: 13px; color: #202124; margin-bottom: 2px; }
.coswaa-serp-title {
  font-size: 20px; color: #1a0dab; text-decoration: none;
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.coswaa-serp-desc {
  font-size: 14px; color: #4d5156; line-height: 1.58;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Dev code copy button ────────────────────────────────────── */
.coswaa-code-copy {
  position: absolute; top: 10px; right: 10px;
  background: rgba(255,255,255,.12);
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s ease;
  font-family: var(--c-font);
}
.coswaa-code-copy:hover { background: rgba(255,255,255,.22); }

/* ── Export row ─────────────────────────────────────────────── */
.coswaa-export-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.coswaa-export-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--c-bg); color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  padding: 7px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: background var(--c-t), border-color var(--c-t);
  font-family: var(--c-font);
}
.coswaa-export-btn:hover { border-color: var(--c-primary); color: var(--c-primary); text-decoration: none; }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .coswaa-export-row { flex-direction: column; }
  .coswaa-export-btn { width: 100%; justify-content: center; }
}