/* AI Receptionist ROI Calculator — execution/15-WEBSITE-IMPLEMENTATION.md §F.
   Uses the design tokens from style.css so the tool matches the site, and
   redeclares them at the top so the embeddable version (which loads this file
   alone, without style.css) still renders correctly inside someone else's page. */

.roi {
  --roi-bg: var(--bg, #0b0c0e);
  --roi-raised: var(--bg-raised, #121417);
  --roi-inset: var(--bg-inset, #08090a);
  --roi-line: var(--line, #26292e);
  --roi-line-strong: var(--line-strong, #34383f);
  --roi-ink: var(--ink, #f4f4f2);
  --roi-muted: var(--ink-muted, #9b9ea6);
  --roi-accent: var(--accent, #ffd100);
  --roi-accent-ink: var(--accent-ink, #151206);
  --roi-radius: var(--radius, 4px);
  --roi-mono: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  color: var(--roi-ink);
}

@media (max-width: 767.98px) {
  .roi { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Inputs ---------- */

.roi-panel {
  background: var(--roi-raised);
  border: 1px solid var(--roi-line);
  border-radius: var(--roi-radius);
  padding: 1.5rem;
}

.roi-panel__title {
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--roi-muted);
  font-family: var(--roi-mono);
  margin: 0 0 1.25rem;
}

.roi-field { margin-bottom: 1.15rem; }
.roi-field:last-child { margin-bottom: 0; }

.roi-field label {
  display: block;
  font-weight: 600;
  font-size: 0.94rem;
  margin-bottom: 0.35rem;
  color: var(--roi-ink);
}

.roi-field__hint {
  display: block;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--roi-muted);
  margin-top: 0.15rem;
}

.roi-input {
  display: flex;
  align-items: center;
  border: 1px solid var(--roi-line-strong);
  border-radius: var(--roi-radius);
  background: var(--roi-inset);
  overflow: hidden;
  transition: border-color 150ms ease;
}
.roi-input:focus-within { border-color: var(--roi-accent); }

.roi-input__affix {
  padding: 0 0.7rem;
  color: var(--roi-muted);
  font-family: var(--roi-mono);
  font-size: 0.9rem;
  flex: none;
}

.roi-input input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--roi-ink);
  font-family: var(--roi-mono);
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0.65rem 0.75rem;
  -moz-appearance: textfield;
}
.roi-input input:focus { outline: none; }
.roi-input input::-webkit-outer-spin-button,
.roi-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Results ---------- */

.roi-results {
  background: var(--roi-raised);
  border: 1px solid var(--roi-line);
  border-radius: var(--roi-radius);
  padding: 1.5rem;
  position: sticky;
  top: 90px;
}
@media (max-width: 767.98px) {
  .roi-results { position: static; }
}

.roi-headline {
  border-bottom: 1px solid var(--roi-line);
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
}

.roi-headline__label {
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--roi-muted);
  font-family: var(--roi-mono);
  margin: 0 0 0.4rem;
}

.roi-headline__value {
  font-family: var(--roi-mono);
  font-size: clamp(2rem, 6vw, 2.9rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--roi-accent);
  margin: 0;
  overflow-wrap: anywhere;
}

.roi-headline__sub {
  margin: 0.4rem 0 0;
  color: var(--roi-muted);
  font-size: 0.9rem;
}

.roi-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--roi-line);
}
.roi-stat:last-of-type { border-bottom: 0; }

.roi-stat__label { color: var(--roi-muted); font-size: 0.9rem; }
.roi-stat__value {
  font-family: var(--roi-mono);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--roi-ink);
  white-space: nowrap;
}

.roi-note {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--roi-line);
  color: var(--roi-muted);
  font-size: 0.83rem;
  line-height: 1.55;
}

.roi-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

/* ---------- Lead capture ---------- */

.roi-form { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--roi-line); }
.roi-form__title { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.2rem; }
.roi-form__hint { font-size: 0.85rem; color: var(--roi-muted); margin: 0 0 0.75rem; }
.roi-form__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.roi-form input[type="email"] {
  flex: 1 1 190px;
  min-width: 0;
  background: var(--roi-inset);
  border: 1px solid var(--roi-line-strong);
  border-radius: var(--roi-radius);
  color: var(--roi-ink);
  padding: 0.7rem 0.8rem;
  font-size: 0.95rem;
}
.roi-form input[type="email"]:focus { outline: none; border-color: var(--roi-accent); }

.roi-status { margin: 0.7rem 0 0; font-size: 0.88rem; }
.roi-status--ok { color: var(--roi-accent); }
.roi-status--err { color: #ff8a80; }

/* Bootstrap supplies this on the site; the bare embed page does not load
   Bootstrap, so the widget carries its own copy. */
.roi .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Honeypot — must stay in the DOM and out of sight. */
.roi-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------- Embed snippet ---------- */

.roi-embed-code {
  background: var(--roi-inset);
  border: 1px solid var(--roi-line);
  border-radius: var(--roi-radius);
  padding: 1rem;
  overflow-x: auto;
  font-family: var(--roi-mono);
  font-size: 0.82rem;
  color: var(--roi-muted);
  white-space: pre;
  margin: 0;
}

/* ---------- Bare embed page ---------- */

body.roi-embed-page {
  margin: 0;
  padding: 1.25rem;
  background: #0b0c0e;
  color: #f4f4f2;
  font-family: "Archivo", system-ui, -apple-system, sans-serif;
}
body.roi-embed-page .roi { grid-template-columns: minmax(0, 1fr); }
body.roi-embed-page .roi-results { position: static; }

.roi-embed-credit {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: #9b9ea6;
  text-align: center;
}
.roi-embed-credit a { color: #ffd100; }

.roi-embed-page .btn-accent {
  display: inline-block;
  background: #ffd100;
  color: #151206;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.8rem 1.75rem;
  border: 1px solid #ffd100;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
}