/* =====================================================================
   Future SEO Growth Tools — shared token layer + UI primitives
   ---------------------------------------------------------------------
   Every variable chains to the site's fsg-design-system token when the
   plugin runs on futureseogrowth.com (var(--brand-primary, …)), and falls
   back to the brand defaults when the plugin runs standalone. Retheme by
   overriding the --fsgt-* variables on .fsgt in your theme CSS.
   All selectors are scoped under .fsgt — nothing leaks into the theme.
   No external fonts, images or requests of any kind.
   ===================================================================== */

.fsgt {
  /* ---- tokens ---- */
  --fsgt-primary: var(--brand-primary, #2f6bff);
  --fsgt-primary-hover: var(--brand-primary-hover, #1e57ea);
  --fsgt-primary-soft: var(--brand-primary-soft, #e9f0ff);
  --fsgt-secondary: var(--brand-secondary, #0b1b44);
  --fsgt-gradient: var(--gradient-brand, linear-gradient(135deg, #2f6bff 0%, #7b61ff 100%));
  --fsgt-success: var(--success, #12b76a);
  --fsgt-success-soft: var(--success-soft, #e6f6ee);
  --fsgt-warn-text: #b45309;
  --fsgt-warn-bg: var(--warning-soft, #fef1e0);
  --fsgt-error: var(--error, #f04438);
  --fsgt-error-soft: var(--error-soft, #fdecea);
  --fsgt-text: var(--text-primary, #0f172a);
  --fsgt-text-2: var(--text-secondary, #475569);
  --fsgt-muted: var(--text-muted, #64748b);
  --fsgt-placeholder: var(--text-placeholder, #94a3b8);
  --fsgt-surface: var(--surface, #ffffff);
  --fsgt-bg-2: var(--bg-secondary, #f7f9fc);
  --fsgt-dark: var(--bg-dark, #0a0f1f);
  --fsgt-border: var(--border-default, rgba(15, 23, 42, 0.10));
  --fsgt-border-subtle: var(--border-subtle, rgba(15, 23, 42, 0.06));
  --fsgt-radius-sm: 8px;
  --fsgt-radius: 12px;
  --fsgt-radius-lg: 16px;
  --fsgt-radius-xl: 20px;
  --fsgt-radius-full: 9999px;
  --fsgt-shadow-soft: var(--shadow-soft, 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.05));
  --fsgt-shadow-lg: var(--shadow-large, 0 12px 28px rgba(15, 23, 42, 0.10), 0 24px 60px rgba(15, 23, 42, 0.10));
  --fsgt-focus: var(--focus-ring, 0 0 0 3px rgba(47, 107, 255, 0.32));
  --fsgt-font: var(--font-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  --fsgt-mono: var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);
  --fsgt-ease: cubic-bezier(0.4, 0, 0.2, 1);

  font-family: var(--fsgt-font);
  color: var(--fsgt-text);
  line-height: 1.6;
  /* Contain + centre the tool no matter how wide its Elementor container is,
     matching the reference tool's ~940px column. Overridable per embed by
     targeting the shortcode's own wrapper. */
  width: 100%;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}
.fsgt *, .fsgt *::before, .fsgt *::after { box-sizing: border-box; }
.fsgt p, .fsgt h3, .fsgt h4, .fsgt ul, .fsgt fieldset, .fsgt legend { margin: 0; padding: 0; }
.fsgt fieldset { border: 0; min-width: 0; }
.fsgt svg { display: block; flex-shrink: 0; }

/* ---- tool shell ---- */
.fsgt-shell { background: var(--fsgt-surface); border: 1px solid var(--fsgt-border-subtle); border-radius: var(--fsgt-radius-xl); box-shadow: var(--fsgt-shadow-lg); overflow: hidden; }
.fsgt-topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 24px; background: var(--fsgt-gradient); color: #fff; }
.fsgt-topbar-title { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.fsgt-topbar-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--fsgt-radius-full); background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22); font-size: 13px; font-weight: 500; }
.fsgt-body { padding: 24px; }
.fsgt-results { display: none; border-top: 1px solid var(--fsgt-border-subtle); padding: 24px; background: var(--fsgt-bg-2); }
.fsgt-results.is-visible { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .fsgt-results.is-visible { animation: fsgt-fade-up 400ms cubic-bezier(0.16, 1, 0.3, 1) both; }
}
@keyframes fsgt-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- form primitives ---- */
.fsgt-label { display: block; font-size: 14px; font-weight: 600; color: var(--fsgt-text); margin: 0 0 6px; }
.fsgt-hint { font-size: 13px; color: var(--fsgt-muted); margin: 0 0 10px; }
.fsgt-input, .fsgt-select, .fsgt-textarea {
  width: 100%; font-family: var(--fsgt-font); font-size: 15px; color: var(--fsgt-text);
  background: var(--fsgt-surface); border: 1px solid var(--fsgt-border); border-radius: var(--fsgt-radius);
  padding: 11px 14px; transition: border-color 160ms var(--fsgt-ease), box-shadow 160ms var(--fsgt-ease);
}
.fsgt-textarea { min-height: 130px; resize: vertical; line-height: 1.7; }
.fsgt-input:focus, .fsgt-select:focus, .fsgt-textarea:focus { outline: none; border-color: var(--fsgt-primary); box-shadow: var(--fsgt-focus); }
.fsgt-input::placeholder, .fsgt-textarea::placeholder { color: var(--fsgt-placeholder); }
.fsgt-input[aria-invalid="true"], .fsgt-textarea[aria-invalid="true"] { border-color: var(--fsgt-error); }
.fsgt-select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.fsgt-field { margin-bottom: 16px; }
.fsgt-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fsgt-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.fsgt-range-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fsgt input[type="range"] { accent-color: var(--fsgt-primary); width: min(300px, 100%); }
.fsgt-unit { position: relative; }
.fsgt-unit > .fsgt-unit-sym { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--fsgt-muted); font-size: 14px; pointer-events: none; }
.fsgt-unit > .fsgt-input { padding-left: 30px; }

/* ---- pills (radio group) ---- */
.fsgt-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.fsgt-pill { position: relative; }
.fsgt-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.fsgt-pill span { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: var(--fsgt-radius-full); border: 1px solid var(--fsgt-border); background: var(--fsgt-surface); font-size: 14px; font-weight: 500; color: var(--fsgt-text-2); cursor: pointer; user-select: none; transition: background 120ms var(--fsgt-ease), color 120ms var(--fsgt-ease), border-color 120ms var(--fsgt-ease); }
.fsgt-pill input:checked + span { background: var(--fsgt-primary); border-color: var(--fsgt-primary); color: #fff; }
.fsgt-pill input:focus-visible + span { box-shadow: var(--fsgt-focus); }

/* ---- buttons ----
   Scoped under .fsgt so specificity beats theme/Elementor-kit button rules.
   The kit styles button:hover AND button:focus (0-2-1): a single-state base
   rule (0-2-0) loses once a button is focused (e.g. after a click), so its
   text turns white and vanishes on light backgrounds until the next hover.
   Colour + background are therefore pinned across base / hover / focus /
   focus-visible / active for every variant (pseudo selectors are 0-3-0). */
.fsgt .fsgt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; font-family: var(--fsgt-font); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; border-radius: var(--fsgt-radius); border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; box-shadow: var(--fsgt-shadow-soft); transition: background 120ms var(--fsgt-ease), color 120ms var(--fsgt-ease), box-shadow 220ms var(--fsgt-ease), transform 120ms var(--fsgt-ease); }
.fsgt .fsgt-btn:active { transform: translateY(0.5px) scale(0.99); }
.fsgt .fsgt-btn:focus-visible { outline: none; box-shadow: var(--fsgt-focus); }
.fsgt .fsgt-btn[disabled] { opacity: 0.55; cursor: progress; box-shadow: none; }
/* primary — white text on brand fill in every state */
.fsgt .fsgt-btn,
.fsgt .fsgt-btn:hover,
.fsgt .fsgt-btn:focus,
.fsgt .fsgt-btn:focus-visible,
.fsgt .fsgt-btn:active { color: #fff; background: var(--fsgt-primary); }
.fsgt .fsgt-btn:hover { background: var(--fsgt-primary-hover); box-shadow: 0 8px 30px rgba(47, 107, 255, 0.22); }
/* outline — dark text on surface in every state */
.fsgt .fsgt-btn--outline,
.fsgt .fsgt-btn--outline:hover,
.fsgt .fsgt-btn--outline:focus,
.fsgt .fsgt-btn--outline:focus-visible,
.fsgt .fsgt-btn--outline:active { color: var(--fsgt-text); background: var(--fsgt-surface); border-color: var(--fsgt-border); box-shadow: none; }
.fsgt .fsgt-btn--outline:hover { background: var(--fsgt-bg-2); }
/* ghost — muted text, transparent fill in every state */
.fsgt .fsgt-btn--ghost,
.fsgt .fsgt-btn--ghost:hover,
.fsgt .fsgt-btn--ghost:focus,
.fsgt .fsgt-btn--ghost:focus-visible,
.fsgt .fsgt-btn--ghost:active { color: var(--fsgt-text-2); background: transparent; box-shadow: none; }
.fsgt .fsgt-btn--ghost:hover { background: var(--fsgt-bg-2); }
.fsgt .fsgt-btn--sm { height: 34px; padding: 0 14px; font-size: 14px; border-radius: var(--fsgt-radius-sm); }
.fsgt .fsgt-btn--lg { height: 50px; padding: 0 24px; font-size: 16px; }
.fsgt .fsgt-btn.fsgt-copied { color: var(--fsgt-success) !important; }
.fsgt .fsgt-btn.fsgt-copied.fsgt-btn--outline { border-color: var(--fsgt-success); }
.fsgt-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* ---- messages ---- */
.fsgt-msg { display: none; margin-top: 16px; padding: 12px 16px; border-radius: var(--fsgt-radius); font-size: 14px; font-weight: 500; align-items: center; gap: 10px; flex-wrap: wrap; }
.fsgt-msg.is-visible { display: flex; }
.fsgt-msg--error { background: var(--fsgt-error-soft); color: var(--fsgt-error); border: 1px solid rgba(240, 68, 56, 0.2); }
.fsgt-msg--warn { background: var(--fsgt-warn-bg); color: var(--fsgt-warn-text); border: 1px solid rgba(247, 144, 9, 0.25); }
.fsgt-msg--success { background: var(--fsgt-success-soft); color: var(--fsgt-success); border: 1px solid rgba(18, 183, 106, 0.25); }

/* ---- stats ---- */
.fsgt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.fsgt-stat { background: var(--fsgt-surface); border: 1px solid var(--fsgt-border-subtle); border-radius: var(--fsgt-radius); box-shadow: var(--fsgt-shadow-soft); padding: 16px; text-align: center; display: grid; gap: 2px; }
.fsgt-stat b { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; background: var(--fsgt-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; overflow-wrap: anywhere; }
.fsgt-stat span { font-size: 12px; font-weight: 600; color: var(--fsgt-muted); }

/* ---- generated-output block (schema / llms.txt) ---- */
.fsgt-output { background: var(--fsgt-dark); border-radius: var(--fsgt-radius); overflow: hidden; margin-top: 4px; }
.fsgt-output-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; background: rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.fsgt-output-bar .fsgt-output-name { font-family: var(--fsgt-mono); font-size: 12px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.6); }
/* Copy buttons on the dark bar keep translucent-white-on-dark in every state
   (0-3-0/0-4-0 beats both the kit's button:focus and the primary rules above). */
.fsgt .fsgt-output-bar .fsgt-btn,
.fsgt .fsgt-output-bar .fsgt-btn:hover,
.fsgt .fsgt-output-bar .fsgt-btn:focus,
.fsgt .fsgt-output-bar .fsgt-btn:focus-visible,
.fsgt .fsgt-output-bar .fsgt-btn:active { background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: none; }
.fsgt .fsgt-output-bar .fsgt-btn:hover { background: rgba(255, 255, 255, 0.16); }
/* Code output: explicit dark background (scoped to beat Astra's `pre` at 0-0-1),
   readable mono text, preserved formatting, responsive scroll. */
.fsgt .fsgt-output pre { margin: 0; padding: 16px; max-height: 420px; overflow: auto; font-family: var(--fsgt-mono); font-size: 13px; line-height: 1.7; color: #d7e3f7; background: var(--fsgt-dark); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }

/* ---- repeatable rows (schema FAQ/steps, llms links) ---- */
.fsgt-repeat { display: grid; gap: 12px; }
.fsgt-repeat-row { display: grid; gap: 8px; grid-template-columns: 1fr auto; align-items: start; background: var(--fsgt-bg-2); border: 1px solid var(--fsgt-border-subtle); border-radius: var(--fsgt-radius); padding: 12px; }
.fsgt-repeat-row .fsgt-repeat-fields { display: grid; gap: 8px; min-width: 0; }
.fsgt-repeat-remove { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--fsgt-border); border-radius: var(--fsgt-radius-sm); background: var(--fsgt-surface); color: var(--fsgt-muted); cursor: pointer; transition: color 120ms var(--fsgt-ease), border-color 120ms var(--fsgt-ease); }
.fsgt-repeat-remove:hover { color: var(--fsgt-error); border-color: var(--fsgt-error); }
.fsgt-repeat-remove:focus-visible { outline: none; box-shadow: var(--fsgt-focus); }
.fsgt-add-row { margin-top: 12px; }

/* ---- simple bar chart (pure CSS) ---- */
.fsgt-bars { display: flex; align-items: flex-end; gap: 5px; height: 140px; padding: 14px; background: var(--fsgt-surface); border: 1px solid var(--fsgt-border-subtle); border-radius: var(--fsgt-radius); }
.fsgt-bars i { flex: 1; display: block; min-height: 4%; border-radius: 4px 4px 2px 2px; background: var(--fsgt-gradient); opacity: 0.9; }
.fsgt-bars i.is-neg { background: var(--fsgt-error); opacity: 0.55; }
.fsgt-bars-caption { font-size: 12px; color: var(--fsgt-muted); margin-top: 6px; }

/* ---- score meter ---- */
.fsgt-meter { height: 10px; border-radius: var(--fsgt-radius-full); background: var(--fsgt-border-subtle); overflow: hidden; }
.fsgt-meter > i { display: block; height: 100%; border-radius: var(--fsgt-radius-full); background: var(--fsgt-gradient); transition: width 400ms var(--fsgt-ease); }

/* ---- progress ---- */
.fsgt-progress { display: none; margin-top: 16px; }
.fsgt-progress.is-visible { display: block; }
.fsgt-progress-track { height: 6px; border-radius: var(--fsgt-radius-full); background: var(--fsgt-border-subtle); overflow: hidden; }
.fsgt-progress-bar { height: 100%; width: 0; border-radius: var(--fsgt-radius-full); background: var(--fsgt-gradient); transition: width 150ms var(--fsgt-ease); }
.fsgt-progress-text { font-size: 13px; color: var(--fsgt-muted); margin: 6px 0 0; }

/* ---- misc ---- */
.fsgt-privacy { display: flex; gap: 8px; align-items: flex-start; margin: 20px 0 0; font-size: 13px; color: var(--fsgt-muted); }
.fsgt-privacy svg { color: var(--fsgt-success); margin-top: 2px; }
.fsgt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; padding: 0; }
.fsgt-note { font-size: 12.5px; color: var(--fsgt-muted); margin-top: 12px; }
.fsgt-divider { border: 0; border-top: 1px solid var(--fsgt-border-subtle); margin: 20px 0; }

/* ---- responsive ---- */
@media (max-width: 640px) {
  .fsgt-body, .fsgt-results { padding: 16px; }
  .fsgt-grid-2, .fsgt-grid-3 { grid-template-columns: 1fr; }
  .fsgt-actions .fsgt-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .fsgt *, .fsgt *::before, .fsgt *::after { animation: none !important; transition: none !important; }
}