/* ==========================================================
   SITE360 V23
   Keep the original five live result cards.
   Replace only the broken legacy radar.
   ========================================================== */


/* Old experimental radar and previous replacement attempts */

body[data-ein-tool="site-360"]
.ein-sem95-radar,

body[data-ein-tool="site-360"]
.ein-v21-site-gauge,

body[data-ein-tool="site-360"]
.ein-v22-site-summary{
  display:none !important;
}


/*
  Restore the ORIGINAL result row itself.
  Six visible columns:
  [new gauge] [DNS] [TLS] [HTTP] [SEO] [SECURITY]
*/

body[data-ein-tool="site-360"]
.ein-sem95-radarwrap{
  display:grid !important;

  grid-template-columns:
    150px
    repeat(
      5,
      minmax(0,1fr)
    ) !important;

  align-items:stretch !important;

  gap:10px !important;

  width:100% !important;

  padding:14px !important;

  overflow:visible !important;

  background:#f3f8f4 !important;

  border:0 !important;

  border-radius:16px !important;

  box-shadow:none !important;
}


/* ==========================================================
   New score gauge — first column only
   ========================================================== */

body[data-ein-tool="site-360"]
.ein-v23-gauge{
  --score:0;

  position:relative !important;

  width:126px !important;
  height:126px !important;

  align-self:center !important;
  justify-self:center !important;

  display:grid !important;
  place-items:center !important;

  overflow:hidden !important;

  border-radius:50% !important;

  background:
    conic-gradient(
      from -90deg,
      #4f8f65
        calc(var(--score) * 1%),
      #dceae0 0
    ) !important;

  box-shadow:none !important;
}


body[data-ein-tool="site-360"]
.ein-v23-gauge::before{
  content:"" !important;

  position:absolute !important;

  inset:13px !important;

  border-radius:50% !important;

  background:#ffffff !important;

  border:
    1px solid #d2e2d6 !important;
}


body[data-ein-tool="site-360"]
.ein-v23-value{
  position:relative !important;

  z-index:2 !important;

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;
  justify-content:center !important;

  color:#285e3d !important;

  line-height:1 !important;
}


body[data-ein-tool="site-360"]
.ein-v23-value strong{
  color:#285e3d !important;

  font-size:31px !important;
  font-weight:800 !important;

  line-height:1 !important;
}


body[data-ein-tool="site-360"]
.ein-v23-value span{
  margin-top:6px !important;

  color:#607468 !important;

  font-size:14px !important;
  font-weight:700 !important;
}


/* ==========================================================
   ORIGINAL FIVE LIVE RESULT CARDS
   ========================================================== */

body[data-ein-tool="site-360"]
.ein-sem95-sig{
  min-width:0 !important;
  min-height:126px !important;

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;
  justify-content:center !important;

  gap:8px !important;

  padding:12px 8px !important;

  background:#ffffff !important;

  background-image:none !important;

  border:
    1px solid #d2e2d6 !important;

  border-radius:14px !important;

  box-shadow:none !important;

  color:#304b39 !important;
}


body[data-ein-tool="site-360"]
.ein-sem95-sig b{
  color:#607468 !important;

  font-size:13px !important;
  font-weight:700 !important;
}


body[data-ein-tool="site-360"]
.ein-sem95-sig strong{
  color:#285e3d !important;

  font-size:16px !important;
  font-weight:800 !important;
}


body[data-ein-tool="site-360"]
.ein-sem95-dot{
  background:#dceae0 !important;

  box-shadow:none !important;
}


/*
  Keep existing result renderer fully functional.
  We only style its cards.
*/


@media(max-width:950px){

  body[data-ein-tool="site-360"]
  .ein-sem95-radarwrap{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;
  }


  body[data-ein-tool="site-360"]
  .ein-v23-gauge{
    grid-column:
      1 / -1 !important;
  }

}


@media(max-width:560px){

  body[data-ein-tool="site-360"]
  .ein-sem95-radarwrap{
    grid-template-columns:
      1fr !important;
  }

}

/* ==========================================================
   SITE360 V24 — CORRECT DOM STRUCTURE

   radarwrap contains:
     1. public gauge
     2. hidden legacy radar
     3. signal group containing the five cards

   Therefore radarwrap itself must have TWO visible columns.
   ========================================================== */

body[data-ein-tool="site-360"]
.ein-sem95-radarwrap{
  display:grid !important;

  grid-template-columns:
    150px
    minmax(0,1fr) !important;

  align-items:center !important;

  gap:14px !important;

  width:100% !important;

  padding:14px !important;

  overflow:visible !important;

  background:#f3f8f4 !important;

  border-radius:16px !important;
}


body[data-ein-tool="site-360"]
.ein-v23-gauge{
  grid-column:1 !important;

  align-self:center !important;
  justify-self:center !important;
}


/*
  This is ONE grid item in radarwrap.
  The five cards live inside it.
*/

body[data-ein-tool="site-360"]
.ein-sem95-signal{
  grid-column:2 !important;

  display:grid !important;

  grid-template-columns:
    repeat(
      5,
      minmax(0,1fr)
    ) !important;

  gap:10px !important;

  width:100% !important;
  min-width:0 !important;
}


body[data-ein-tool="site-360"]
.ein-sem95-sig{
  width:auto !important;
  min-width:0 !important;

  min-height:126px !important;

  padding:12px 8px !important;

  overflow:hidden !important;

  border-radius:14px !important;
}


@media(max-width:900px){

  body[data-ein-tool="site-360"]
  .ein-sem95-radarwrap{
    grid-template-columns:
      1fr !important;
  }


  body[data-ein-tool="site-360"]
  .ein-v23-gauge{
    grid-column:1 !important;
  }


  body[data-ein-tool="site-360"]
  .ein-sem95-signal{
    grid-column:1 !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;
  }

}


@media(max-width:520px){

  body[data-ein-tool="site-360"]
  .ein-sem95-signal{
    grid-template-columns:
      1fr !important;
  }

}

/* === SITE360 V25 START === */

/*
  IMPORTANT:
  The score gauge is NOT a DOM child anymore.

  The legacy Site360 renderer may replace every child
  inside radarwrap after diagnosis.  Therefore the gauge
  is rendered as radarwrap::before, which survives that
  child replacement.
*/


/* Previous injected gauges must never appear. */

body[data-ein-tool="site-360"]
.ein-v23-gauge,

body[data-ein-tool="site-360"]
.ein-v22-site-summary,

body[data-ein-tool="site-360"]
.ein-v21-site-gauge,

body[data-ein-tool="site-360"]
.ein-v20-site-score,

body[data-ein-tool="site-360"]
.ein-v19-site-score,

body[data-ein-tool="site-360"]
.ein-sem95-radar{
  display:none !important;
}


/*
  Correct real structure:

  radarwrap
    ::before  = PUBLIC score gauge
    signal    = container of the five original cards
*/

body[data-ein-tool="site-360"]
.ein-sem95-radarwrap{
  --ein-v25-angle:0deg;

  display:grid !important;

  grid-template-columns:
    150px
    minmax(0,1fr) !important;

  align-items:center !important;

  gap:14px !important;

  width:100% !important;

  min-width:0 !important;

  padding:14px !important;

  overflow:visible !important;

  background:#f3f8f4 !important;

  border:0 !important;
  border-radius:16px !important;

  box-shadow:none !important;
}


/*
  Persistent score circle.
*/

body[data-ein-tool="site-360"]
.ein-sem95-radarwrap::before{
  content:
    attr(data-ein-v25-score)
    " / 100" !important;

  grid-column:1 !important;
  grid-row:1 !important;

  width:126px !important;
  height:126px !important;

  align-self:center !important;
  justify-self:center !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  padding:0 !important;

  border:0 !important;
  border-radius:50% !important;

  background:
    radial-gradient(
      circle at center,
      #ffffff 0 54%,
      transparent 55%
    ),
    conic-gradient(
      from -90deg,
      #4f8f65 0 var(--ein-v25-angle),
      #dceae0 var(--ein-v25-angle) 360deg
    ) !important;

  color:#285e3d !important;

  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif !important;

  font-size:20px !important;
  font-weight:800 !important;

  line-height:1 !important;

  text-align:center !important;

  white-space:nowrap !important;

  box-shadow:none !important;

  opacity:1 !important;
  visibility:visible !important;
}


/*
  The five result cards remain under ownership of
  the original Site360 diagnosis JavaScript.
*/

body[data-ein-tool="site-360"]
.ein-sem95-signal{
  grid-column:2 !important;
  grid-row:1 !important;

  display:grid !important;

  grid-template-columns:
    repeat(
      5,
      minmax(0,1fr)
    ) !important;

  align-items:stretch !important;

  gap:10px !important;

  width:100% !important;
  min-width:0 !important;

  margin:0 !important;
  padding:0 !important;
}


body[data-ein-tool="site-360"]
.ein-sem95-sig{
  width:auto !important;
  min-width:0 !important;

  min-height:126px !important;

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;
  justify-content:center !important;

  gap:8px !important;

  padding:12px 8px !important;

  overflow:hidden !important;

  background:#ffffff !important;

  background-image:none !important;

  border:
    1px solid #d2e2d6 !important;

  border-radius:14px !important;

  box-shadow:none !important;

  color:#304b39 !important;
}


body[data-ein-tool="site-360"]
.ein-sem95-sig b{
  color:#607468 !important;

  font-size:13px !important;
  font-weight:700 !important;
}


body[data-ein-tool="site-360"]
.ein-sem95-sig strong{
  color:#285e3d !important;

  font-size:16px !important;
  font-weight:800 !important;
}


body[data-ein-tool="site-360"]
.ein-sem95-dot{
  background:#dceae0 !important;

  box-shadow:none !important;
}


@media(max-width:900px){

  body[data-ein-tool="site-360"]
  .ein-sem95-radarwrap{
    grid-template-columns:
      1fr !important;
  }


  body[data-ein-tool="site-360"]
  .ein-sem95-radarwrap::before{
    grid-column:1 !important;
    grid-row:1 !important;
  }


  body[data-ein-tool="site-360"]
  .ein-sem95-signal{
    grid-column:1 !important;
    grid-row:2 !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;
  }

}


@media(max-width:520px){

  body[data-ein-tool="site-360"]
  .ein-sem95-signal{
    grid-template-columns:
      1fr !important;
  }

}

/* === SITE360 V25 END === */