/* Digital Otters SEO Analyzer v1.2.0 - Clean UI */
.do-seo *{ box-sizing:border-box; }
.do-seo{
  width:100%;
  /* Premium dark canvas (isolated from theme) */
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(0,86,255,.28), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(215,255,0,.18), transparent 55%),
    radial-gradient(700px 420px at 50% 80%, rgba(120,60,255,.16), transparent 60%),
    #070A12;
  padding: 44px 0;
  color: #fff;
}
.do-seo-wrap{
  /* User requirement: 1200px container */
  max-width: 1280px;
  margin:0 auto;
  padding: 0 clamp(16px, 4vw, 44px);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#fff;
}
.do-seo-hero{
  /* Stacked layout (clean on all screens): form first, score card under it */
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}
.do-seo-h1{ margin: 0 0 10px 0; font-size: clamp(34px, 4vw, 54px); line-height: 1.05; font-weight: 950; letter-spacing:-0.02em; color:#fff; }
.do-seo-sub{ margin: 0 0 18px 0; font-size: 16px; line-height: 1.6; opacity: .82; max-width: 720px; color: rgba(255,255,255,.82); }

.do-seo-form{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}
.do-seo-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.do-seo-row-3{ margin-top: 10px; grid-template-columns: 1fr 1fr 1fr; }
.do-seo-field{ min-width:0; }
.do-seo-label{ display:block; font-weight: 900; font-size: 13px; margin: 8px 0 6px; color: rgba(255,255,255,.92); }
.do-seo-input{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  padding: 12px 14px;
  color:#fff;
  background: rgba(0,0,0,.22);
  outline: none;
}
.do-seo-input:focus{ border-color: rgba(79,212,255,.55); box-shadow: 0 0 0 3px rgba(0,86,255,.22); }
.do-seo-input::placeholder{ color: rgba(255,255,255,.55); }
.do-seo-actions{ display:flex; gap: 12px; align-items:center; flex-wrap:wrap; margin-top: 14px; }
.do-seo-btn{ border:none; border-radius: 14px; padding: 14px 18px; font-weight: 950; cursor:pointer; transition: all .25s ease; background: linear-gradient(90deg,#0056FF,#4FD4FF,#D7FF00); color:#000; }
.do-seo-btn:hover{ transform: translateY(-1px); filter: brightness(.98); }
.do-seo-btn[disabled]{ opacity:.7; cursor:not-allowed; transform:none; }
.do-seo-mini{ font-size: 12.5px; opacity:.85; color: rgba(255,255,255,.78); }
.do-seo-msg{ margin-top: 12px; font-weight: 900; }
.do-seo-err{ color:#b00020; }
.do-seo-ok{ color:#0b6b3a; }
.do-seo-muted{ opacity:.85; color: rgba(255,255,255,.78); }
.do-seo-scorecard{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  /* Keep the score card under the form (no sticky positioning) */
  position: static;
}
.do-seo-score-top{ display:flex; justify-content: space-between; gap: 12px; align-items: center; }
.do-seo-scoreline{ font-size: 30px; font-weight: 950; }
.do-seo-score-max{ font-size: 18px; opacity:.7; }
.do-seo-score-label{ font-size: 14px; font-weight: 900; opacity:.75; margin-left: 6px; }
.do-seo-ring{ width: 120px; height: 120px; position: relative; }
.do-seo-ring svg{ width:120px; height:120px; transform: rotate(-90deg); }
.do-seo-ring-bg{ fill:none; stroke: rgba(255,255,255,.16); stroke-width: 12; }
.do-seo-ring-fg{ fill:none; stroke: #0056FF; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .4s ease; }
.do-seo-ring-num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight: 950; font-size: 26px; color:#fff; }

.do-seo-counts{ display:flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.do-seo-chip{ display:inline-flex; gap: 8px; align-items:center; padding: 8px 10px; border-radius: 999px; font-weight: 950; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.22); }
.do-seo-chip-fail{ background: rgba(176,0,32,.08); border-color: rgba(176,0,32,.18); }
.do-seo-chip-warn{ background: rgba(255,153,0,.10); border-color: rgba(255,153,0,.22); }
.do-seo-chip-pass{ background: rgba(11,107,58,.10); border-color: rgba(11,107,58,.18); }

.do-seo-note{ margin-top: 14px; border-radius: 18px; padding: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.22); }
.do-seo-report{ margin-top: 18px; }
.do-seo-section{ background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; padding: 16px; box-shadow: 0 14px 60px rgba(0,0,0,.30); backdrop-filter: blur(10px); }
.do-seo-section + .do-seo-section{ margin-top: 14px; }
.do-seo-section-head{ display:flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 10px; }
.do-seo-section h2{ margin:0; font-size: 18px; font-weight: 950; }
.do-seo-grid{ margin-top: 14px; display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.do-seo-issue{ display:flex; gap: 10px; align-items:flex-start; padding: 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); margin-top: 10px; background: rgba(0,0,0,.18); }
.do-seo-sev{ font-weight: 950; font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.92); }
.sev-high{ background: rgba(176,0,32,.10); border-color: rgba(176,0,32,.22); }
.sev-med{ background: rgba(255,153,0,.12); border-color: rgba(255,153,0,.25); }
.sev-low{ background: rgba(0,86,255,.10); border-color: rgba(0,86,255,.22); }
.do-seo-issue-text{ font-weight: 800; opacity:.9; }

.do-seo-item{ padding: 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); margin-top: 10px; background: rgba(0,0,0,.18); }
.do-seo-item-left{ display:flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.do-seo-badge{ font-weight: 950; font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.92); }
.b-pass{ background: rgba(11,107,58,.10); border-color: rgba(11,107,58,.20); }
.b-warn{ background: rgba(255,153,0,.12); border-color: rgba(255,153,0,.25); }
.b-fail{ background: rgba(176,0,32,.10); border-color: rgba(176,0,32,.22); }
.do-seo-item-title{ font-weight: 950; }
.do-seo-item-desc{ opacity: .82; line-height: 1.5; }

.do-seo-empty{ padding: 10px 0; opacity: .78; font-weight: 800; }

.do-seo-emailbar{ margin-top: 14px; border-radius: 18px; border: 1px solid rgba(255,255,255,.12); padding: 12px 14px; background: linear-gradient(90deg, rgba(0,86,255,.18), rgba(215,255,0,.14)); font-weight: 950; }

/* Guard against aggressive theme styles */
.do-seo input, .do-seo button, .do-seo label, .do-seo svg, .do-seo strong, .do-seo p, .do-seo h1, .do-seo h2{
  font-family: inherit !important;
}
.do-seo button, .do-seo input{ line-height: normal; }
.do-seo-footer{ margin-top: 14px; }

@media (max-width: 980px){
  .do-seo-hero{ grid-template-columns: 1fr; }
  .do-seo-scorecard{ position: static; }
}
@media (max-width: 780px){
  .do-seo-row{ grid-template-columns: 1fr; }
  .do-seo-row-3{ grid-template-columns: 1fr; }
  .do-seo-grid{ grid-template-columns: 1fr; }
}


/* CTA */
.do-seo-cta{ margin-top: 14px; display:flex; align-items:center; justify-content:space-between; gap: 14px;
  border-radius: 22px; border: 1px solid rgba(255,255,255,.12);
  padding: 16px; background: rgba(255,255,255,.05); box-shadow: 0 14px 60px rgba(0,0,0,.30);
  backdrop-filter: blur(10px);
}
.do-seo-cta-title{ font-weight: 950; font-size: 16px; margin-bottom: 2px; }
.do-seo-cta-sub{ opacity:.85; color: rgba(255,255,255,.78); }
.do-seo-cta-btn{ display:inline-flex; align-items:center; justify-content:center; border-radius: 14px; padding: 12px 16px;
  font-weight: 950; text-decoration:none; color:#000;
  background: linear-gradient(90deg,#0056FF,#4FD4FF,#D7FF00);
  transition: transform .2s ease, filter .2s ease;
}
.do-seo-cta-btn:hover{ transform: translateY(-1px); filter: brightness(.98); }

@media (max-width: 780px){
  .do-seo-cta{ flex-direction:column; align-items:stretch; }
  .do-seo-cta-btn{ width:100%; }
}

/*
  Hard override: force STACKED layout.
  Some themes/Elementor containers inject flex rules that can still place left/right columns side-by-side.
  These rules intentionally use !important to guarantee "score card under form" on all screens.
*/
.do-seo .do-seo-hero{ display:block !important; }
.do-seo .do-seo-hero-left,
.do-seo .do-seo-hero-right{
  width:100% !important;
  max-width:100% !important;
  flex: 0 0 100% !important;
  float:none !important;
}
.do-seo .do-seo-hero-right{ margin-top: 22px !important; }

/* Spam honeypot (hidden) */
.do-seo .do-seo-hp{position:absolute !important;left:-9999px !important;top:auto !important;width:1px !important;height:1px !important;overflow:hidden !important;opacity:0 !important;}

.do-seo .do-seo-issue-fix{margin-top:8px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.78);}
.do-seo .do-seo-issue-fix strong{color:rgba(255,255,255,.92);}

/* Quick links */
.do-seo .do-seo-quick-links{display:flex;flex-wrap:wrap;gap:10px;}
.do-seo .do-seo-quick-link{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid rgba(255,255,255,.14);border-radius:12px;text-decoration:none;color:#eaf0ff;background:rgba(255,255,255,.04);}
.do-seo .do-seo-quick-link:hover{background:rgba(255,255,255,.06);}

/* Simple CSS tooltip (no JS) */
.do-seo .do-seo-tip{display:inline-flex;align-items:center;justify-content:center;margin-left:8px;width:18px;height:18px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:rgba(255,255,255,.9);font-size:12px;line-height:1;cursor:help;position:relative;top:-1px;}
.do-seo .do-seo-tip:hover::after,.do-seo .do-seo-tip:focus::after{content:attr(data-tip);position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 10px);width:min(420px,80vw);padding:10px 12px;border-radius:12px;background:#0b1220;border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.92);font-size:12px;line-height:1.5;box-shadow:0 16px 40px rgba(0,0,0,.45);z-index:9999;white-space:pre-line;}
.do-seo .do-seo-tip:hover::before,.do-seo .do-seo-tip:focus::before{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 3px);border:7px solid transparent;border-top-color:rgba(255,255,255,.14);}
.do-seo .do-seo-tip:focus{outline:2px solid rgba(255,255,255,.25);outline-offset:2px;}
/* ===== CLS FIX (copy/paste at very end) ===== */

/* 1) Use ONE layout only (no grid -> block reflow) */
.do-seo .do-seo-hero{
  display:block !important;     /* stacked always */
}
.do-seo .do-seo-hero-right{
  margin-top:22px !important;   /* replaces grid gap */
}

/* 2) Reserve space so results appearing doesn't push the page */
.do-seo .do-seo-report{
  min-height:520px;
}
@media (max-width:780px){
  .do-seo .do-seo-report{ min-height:680px; }
}

/* 3) Isolate layout/paint inside widget (reduces external reflows) */
.do-seo{
  contain: layout paint;
}
/* ===== END CLS FIX ===== */
`