/**
 * Geoman Docs Lead Capture — Styles
 * Works within Docusaurus's Infima CSS framework.
 * Override with CSS custom properties:
 *   --geoman-signup-bg, --geoman-signup-border,
 *   --geoman-signup-text, --geoman-signup-muted,
 *   --geoman-signup-accent, --geoman-signup-radius
 */

/* ── Shared variables ─────────────────────────── */
.docs-signup-sidebar,
.docs-signup-footer,
.docs-pro-callout,
.docs-help-callout {
  --_bg: var(--geoman-signup-bg, var(--ifm-background-surface-color, #f6f8fa));
  --_border: var(
    --geoman-signup-border,
    var(--ifm-color-emphasis-200, #d0d7de)
  );
  --_text: var(--geoman-signup-text, var(--ifm-font-color-base, #1f2328));
  --_muted: var(
    --geoman-signup-muted,
    var(--ifm-font-color-secondary, #656d76)
  );
  --_accent: var(--geoman-signup-accent, var(--ifm-color-primary, #3578e5));
  --_radius: var(--geoman-signup-radius, var(--ifm-global-radius, 6px));
  font-family: var(
    --ifm-font-family-base,
    system-ui,
    -apple-system,
    sans-serif
  );
  color: var(--_text);
}

/* ── Sidebar signup ───────────────────────────── */
.docs-signup-sidebar {
  padding: 1rem;
  margin-top: 1.5rem;
}

.docs-signup-sidebar h4 {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.docs-signup-sidebar p {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  color: var(--_muted);
  line-height: 1.4;
}

.docs-signup-sidebar form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.docs-signup-sidebar input[type="email"] {
  width: 100%;
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
  border: 1px solid var(--_border);
  border-radius: var(--_radius);
  background: var(--_bg);
  color: var(--_text);
}

.docs-signup-sidebar button[type="submit"] {
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #fff;
  background: var(--_accent);
  border: none;
  border-radius: var(--_radius);
  cursor: pointer;
  transition: opacity 0.15s;
}

.docs-signup-sidebar button[type="submit"]:hover {
  opacity: 0.85;
}

.docs-signup-sidebar button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Page footer signup ───────────────────────── */
.docs-signup-footer {
  padding: 1.25rem 1.5rem;
  margin: 2rem 0 1rem;
  background: var(--_bg);
  border: 1px solid var(--_border);
  border-radius: var(--_radius);
}

.docs-signup-footer h4 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
}

.docs-signup-footer p {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--_muted);
  line-height: 1.4;
}

.docs-signup-footer form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.docs-signup-footer input[type="email"],
.docs-signup-footer input[type="text"]:not([name="_hp"]) {
  flex: 1 1 180px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--_border);
  border-radius: var(--_radius);
  background: var(--ifm-background-color, #fff);
  color: var(--_text);
}

.docs-signup-footer button[type="submit"] {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  background: var(--_accent);
  border: none;
  border-radius: var(--_radius);
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}

.docs-signup-footer button[type="submit"]:hover {
  opacity: 0.85;
}

.docs-signup-footer button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Pro consultation callout ─────────────────── */
.docs-pro-callout {
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  background: var(--ifm-color-info-contrast-background, #eef6ff);
  border: 1px solid var(--ifm-color-info-dark, #4ca6f8);
  border-left-width: 4px;
  border-radius: var(--_radius);
}

.docs-pro-callout p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--_text);
}

.docs-pro-callout .consultation-link {
  color: var(--_accent);
  text-decoration: none;
  font-weight: 500;
}

.docs-pro-callout .consultation-link:hover {
  text-decoration: underline;
}

/* ── Integration help callout ─────────────────── */
.docs-help-callout {
  padding: 0.75rem 1rem;
  margin: 2rem 0 1rem;
  background: var(--_bg);
  border: 1px solid var(--_border);
  border-radius: var(--_radius);
}

.docs-help-callout p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--_muted);
}

.docs-help-callout .consultation-link {
  color: var(--_accent);
  text-decoration: none;
  font-weight: 500;
}

.docs-help-callout .consultation-link:hover {
  text-decoration: underline;
}

/* ── Feedback states ──────────────────────────── */
.signup-success {
  margin: 0;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  color: var(--ifm-color-success, #2e7d32);
  font-weight: 500;
}

.signup-error {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--ifm-color-danger, #d32f2f);
}

/* ── Responsive ───────────────────────────────── */
@media (max-width: 768px) {
  .docs-signup-footer form {
    flex-direction: column;
  }

  .docs-signup-footer input[type="email"],
  .docs-signup-footer input[type="text"]:not([name="_hp"]),
  .docs-signup-footer button[type="submit"] {
    flex: none;
    width: 100%;
  }
}