/* BFG SEO Audit – front-end styles (brandable via CSS variables) */
.bfg-seo-audit{
  --bfg-brand:#F37421;          /* primary */
  --bfg-brand-2:#D16216;        /* gradient end */
  --bfg-text:#0b0b0b;
  --bfg-muted:#6b7280;
  --bfg-surface:#fff;
  --bfg-border:#e5e7eb;
}

.bfg-seo-audit form{
  background:var(--bfg-surface);
  border:1px solid var(--bfg-border);
  border-radius:14px;
  padding:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  max-width:720px;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  font-family:inherit; /* inherit site font */
}
/* Thin brand bar */
.bfg-seo-audit form::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,var(--bfg-brand),var(--bfg-brand-2));
}

/* Fields */
.bfg-seo-audit .bfg-field{ margin-bottom:18px; }
.bfg-seo-audit .bfg-field label{
  display:block; margin-bottom:6px;
  font-weight:700; font-size:.95rem; color:var(--bfg-text);
}
.bfg-seo-audit input[type="text"],
.bfg-seo-audit input[type="email"]{
  width:100%; background:#fff;
  border:1px solid var(--bfg-border); border-radius:14px;
  padding:14px; font-size:16px;
  transition:box-shadow .2s, border-color .2s, background-color .2s;
}
.bfg-seo-audit input::placeholder{ color:#9ca3af; }
.bfg-seo-audit input:focus{
  outline:none; border-color:var(--bfg-brand);
  box-shadow:0 0 0 4px rgba(15,98,254,.15);
}

/* Consent */
.bfg-seo-audit .bfg-consent label{
  display:flex; gap:10px; align-items:flex-start;
  font-weight:500; color:var(--bfg-text);
}
.bfg-seo-audit .bfg-consent input[type="checkbox"]{
  width:18px; height:18px; margin-top:2px; accent-color:var(--bfg-brand);
}

/* CTA */
.bfg-seo-audit .bfg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 24px; border-radius:14px; border:none; cursor:pointer;
  font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  background:linear-gradient(90deg,var(--bfg-brand),var(--bfg-brand-2)); color:#fff;
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.bfg-seo-audit .bfg-btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }

/* Status + spinner */
.bfg-seo-audit .bfg-status{
  margin-top:12px; min-height:24px; color:var(--bfg-muted);
  font-size:.95rem; display:flex; align-items:center; gap:10px;
}
.bfg-seo-audit .bfg-status .spinner{
  width:16px; height:16px; border:2px solid #e5e7eb; border-top-color:var(--bfg-brand);
  border-radius:50%; animation:bfg-spin 1s linear infinite;
}
@keyframes bfg-spin{ to{ transform:rotate(360deg); } }

/* Result container spacing */
.bfg-seo-audit .bfg-result{ margin-top:20px; }

/* Dark scheme niceties if site uses it */
@media (prefers-color-scheme: dark){
  .bfg-seo-audit form{ background:#212A31; border-color:#2b3640; box-shadow:0 10px 30px rgba(0,0,0,.45); }
  .bfg-seo-audit input[type="text"], .bfg-seo-audit input[type="email"]{ background:#1B2329; border-color:#2b3640; color:#f6f7f9; }
  .bfg-seo-audit input::placeholder{ color:#6b7280; }
  .bfg-seo-audit .bfg-field label, .bfg-seo-audit .bfg-consent label{ color:#e8edf1; }
  .bfg-seo-audit .bfg-status{ color:#b9c3cb; }
}

/* === Futura-PT type === */
.bfg-seo-audit,
.bfg-seo-audit form,
.bfg-seo-audit .bfg-field label,
.bfg-seo-audit input[type="text"],
.bfg-seo-audit input[type="email"],
.bfg-seo-audit .bfg-consent label,
.bfg-seo-audit .bfg-btn,
.bfg-seo-audit .bfg-status {
  font-family: "Futura PT","Futura-PT","futura-pt",Futura,"Helvetica Neue",Arial,sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Results card ===== */
#bfg-seo-audit-result[hidden]{ display:none; }
#bfg-seo-audit-result .bfg-result-card{
  background:var(--bfg-surface, #fff);
  border-radius:20px;
  padding:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  max-width:960px; margin:20px auto;
  font-family:"Futura PT","Futura-PT","futura-pt",Futura,"Helvetica Neue",Arial,sans-serif;
}

.bfg-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  margin-bottom:8px;
}
.bfg-overall .num{
  font-size:48px; font-weight:800; line-height:1; margin:0;
}
.bfg-overall .label{color:var(--bfg-muted,#6b7280); margin-top:4px; font-weight:600;}
.bfg-overall.good  .num{color:#17B26A;}   /* green */
.bfg-overall.warn  .num{color:#F37421;}   /* brand orange */
.bfg-overall.bad   .num{color:#EF4444;}   /* red 500 */

.bfg-rings{display:flex; gap:22px; flex-wrap:wrap;}

.bfg-ring{position:relative; width:110px; height:110px;}
.bfg-ring svg{width:110px;height:110px;transform:rotate(-90deg);}
.bfg-ring .track{fill:none;stroke:var(--bfg-border,#e5e7eb);stroke-width:8;}
.bfg-ring .progress{fill:none;stroke-width:8;transition:stroke-dashoffset 1s ease;}
.bfg-ring.good  .progress{stroke:#17B26A;}
.bfg-ring.warn  .progress{stroke:#F37421;}
.bfg-ring.bad   .progress{stroke:#EF4444;}
.bfg-ring .center{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.bfg-ring .value{font-weight:800; font-size:18px; line-height:1;}
.bfg-ring .label{font-size:12px;color:var(--bfg-muted,#6b7280);margin-top:4px;font-weight:600;}

.bfg-section{ margin-top:22px; }
.bfg-section h3{ margin:0 0 12px 0; font-size:22px; font-weight: 700; color:#212A31 }

.bfg-checks{ list-style:none; margin:8px 0 0; padding:0; border-top:1px dashed #E5E7EB; }
.bfg-checks > li{
  display:grid;
  grid-template-columns:minmax(240px,1fr) auto;
  gap:14px;
  padding:12px 8px;
  border-bottom:1px dashed #E5E7EB;
  align-items:baseline;          
}
.bfg-check .head{
  display:flex;
  align-items:center;          
  justify-content:space-between;
  gap:12px;
  min-height:28px;
}
.bfg-check .name{ font-weight:700; color:#212A31; }
.bfg-check .status{ color:#374151; font-weight:600; }   
.bfg-check.is-ok .status{ color:#6B7280; font-weight:500; }

.bfg-seo-audit .bfg-check .status a,
.bfg-seo-audit .bfg-issue-line a { color:#F37421; }
.bfg-seo-audit .bfg-check .status a:hover,
.bfg-seo-audit .bfg-issue-line a:hover { text-decoration:underline; }

@media (min-width:900px){
  .bfg-check .status{ white-space:nowrap; }
}

@media (prefers-color-scheme: dark){
  .bfg-checks .status{ color:#374151a3; }
}

.bfg-ex{ margin-top:8px; }
.bfg-ex[open]{ margin-top:8px; }

.bfg-ex-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#374151;
  font-weight:700;
  cursor:pointer;
  user-select:none;
  padding:0;
}
.bfg-ex-toggle::-webkit-details-marker{ display:none; }
.bfg-ex-toggle::marker{ content:""; }
.bfg-ex-toggle::after{
  content:"▾";
  font-size:.9em;
  line-height:1;
  transition:transform .2s ease;
}
.bfg-ex[open] > .bfg-ex-toggle::after{ transform:rotate(180deg); }

.bfg-seo-audit .bfg-ex-list{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(184px,1fr));
  gap:12px;
  margin:10px 0 2px !important;
  padding:0 !important;
  list-style:none !important;
}
.bfg-seo-audit .bfg-ex-list > li{ margin:0; padding:0; }

.bfg-seo-audit .bfg-example.ex-image a{
  display:block;
  width:100%;
  aspect-ratio:3/2;         
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 1px 1px rgba(16,24,40,.04);
}
.bfg-seo-audit .bfg-example.ex-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.bfg-seo-audit .bfg-example.ex-link{
  border:1px solid #E5E7EB; border-radius:10px; padding:8px; font-size:12px; word-break:break-all; background:#fff;
}
.bfg-seo-audit .bfg-example.ex-link a{ color:#0F62FE; text-decoration:none; }
.bfg-seo-audit .bfg-example.ex-link .http{ color:#6B7280; margin-top:4px; }

.bfg-seo-audit .bfg-example.ex-chip{
  background:#F3F4F6; border:1px solid #E5E7EB; border-radius:8px; padding:8px; font-size:12px; color:#374151;
}

.bfg-seo-audit .bfg-example.ex-code .bfg-code{
  margin:0; background:#F3F4F6; border:1px solid #E5E7EB; border-radius:8px;
  padding:8px; max-height:280px; overflow:auto;
  white-space:pre-wrap; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; color:#111;
}

.bfg-seo-audit .bfg-issue-line{ margin-top:8px; font-weight:600; color:#374151; }

#bfg-seo-audit-result .bfg-result-title{
  margin-top:40px;
  font-family:"Futura PT","Futura-PT",Futura,Arial,sans-serif;
  font-weight:800;
  font-size:2rem; line-height:1.2;
  color:#212A31;
  text-align:center;
}

details.bfg-ex {
  text-align: right;
}