/* PHP Upgrade page additions
   Load after joomlaupgrade-v2.css and joomlaupgrade-service-pages.css
*/

.ju2-php-hero{
  background:
    radial-gradient(circle at 84% 16%, rgba(119,123,179,.16), transparent 31%),
    radial-gradient(circle at 12% 88%, rgba(255,107,34,.10), transparent 28%),
    linear-gradient(145deg,#fafaff 0%,#ffffff 52%,#f2f2fa 100%);
}

.ju2-php-visual{
  position:relative;
  min-height:470px;
}

.ju2-php-stack{
  position:absolute;
  top:38px;
  width:205px;
  min-height:130px;
  padding:22px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:18px;
  background:rgba(255,255,255,.95);
  box-shadow:var(--ju2-shadow);
}

.ju2-php-stack small,
.ju2-php-stack strong,
.ju2-php-stack span{
  display:block;
}

.ju2-php-stack small{
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
}

.ju2-php-stack strong{
  margin-top:10px;
  color:var(--ju2-ink);
  font-size:22px;
}

.ju2-php-stack span{
  margin-top:5px;
  color:var(--ju2-muted);
  font-size:11px;
}

.ju2-php-stack-old{
  left:0;
}

.ju2-php-stack-old small{
  color:var(--ju2-red);
}

.ju2-php-stack-new{
  right:0;
}

.ju2-php-stack-new small{
  color:var(--ju2-green);
}

.ju2-php-arrow{
  position:absolute;
  top:86px;
  left:50%;
  transform:translateX(-50%);
  color:var(--ju2-orange);
  font-size:34px;
  font-weight:900;
}

.ju2-php-console{
  position:absolute;
  left:50%;
  bottom:20px;
  width:min(100%,470px);
  transform:translateX(-50%);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.85);
  border-radius:18px;
  background:#101722;
  box-shadow:0 25px 60px rgba(17,23,34,.22);
}

.ju2-php-console-head{
  display:flex;
  gap:12px;
  align-items:center;
  padding:13px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#8994a5;
  background:#151d29;
  font-size:11px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

.ju2-php-console-body{
  padding:20px;
  color:#b9c3d0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
}

.ju2-php-console-body p{
  margin:0 0 8px;
}

.ju2-php-console-body p:last-child{
  margin-bottom:0;
}

.ju2-php-console-body em{
  color:#ff9b66;
  font-style:normal;
}

.ju2-php-badge{
  position:absolute;
  right:10px;
  bottom:0;
  display:flex;
  gap:10px;
  align-items:center;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:12px;
  color:#23854e;
  background:#ebfaf1;
  box-shadow:0 14px 35px rgba(17,23,34,.12);
}

.ju2-php-badge span{
  display:grid;
  width:30px;
  height:30px;
  place-items:center;
  border-radius:50%;
  background:rgba(53,185,111,.14);
  font-weight:900;
}

.ju2-php-badge strong{
  font-size:11px;
}

.ju2-php-error-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.ju2-php-error-grid article{
  min-height:245px;
  padding:26px;
  border:1px solid var(--ju2-line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 12px 32px rgba(17,23,34,.045);
}

.ju2-php-error-code{
  display:grid;
  width:54px;
  height:54px;
  place-items:center;
  border-radius:14px;
  color:#6b6fa8;
  background:#f0f0fa;
  font-size:14px;
  font-weight:900;
}

.ju2-php-error-grid h3{
  margin:18px 0 9px;
  color:var(--ju2-ink);
  font-size:20px;
}

.ju2-php-error-grid p{
  margin:0;
  font-size:13px;
}

.ju2-php-audit-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:70px;
  align-items:center;
}

.ju2-php-audit-grid p{
  font-size:17px;
}

.ju2-php-checklist{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:#0d1420;
  box-shadow:0 25px 60px rgba(0,0,0,.32);
}

.ju2-php-checklist-head{
  display:flex;
  justify-content:space-between;
  padding:15px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:#151d2a;
}

.ju2-php-checklist-head span{
  color:#aeb9c8;
  font-size:11px;
}

.ju2-php-checklist-head strong{
  color:#fff;
  font-size:12px;
}

.ju2-php-check-row{
  display:flex;
  justify-content:space-between;
  padding:15px 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.ju2-php-check-row span{
  color:#fff;
  font-size:12px;
}

.ju2-php-check-row b{
  font-size:10px;
}

.ju2-status-ok{color:#55d98f;}
.ju2-status-fix{color:#ff9b66;}
.ju2-status-review{color:#e7bc58;}

.ju2-php-check-result{
  display:flex;
  gap:11px;
  align-items:center;
  padding:17px 18px;
  color:#55d98f;
  background:rgba(53,185,111,.08);
}

.ju2-php-check-result span{
  display:grid;
  width:30px;
  height:30px;
  place-items:center;
  border-radius:50%;
  background:rgba(53,185,111,.14);
  font-weight:900;
}

.ju2-php-check-result strong{
  font-size:11px;
}

.ju2-replacement-list{
  display:grid;
  gap:14px;
}

.ju2-replacement-list article{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  padding:20px;
  border:1px solid var(--ju2-line);
  border-radius:14px;
  background:#fff;
}

.ju2-replacement-list article > span{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border-radius:12px;
  color:#6b6fa8;
  background:#f0f0fa;
  font-size:10px;
  font-weight:900;
}

.ju2-replacement-list h3{
  margin:0 0 5px;
  color:var(--ju2-ink);
  font-size:18px;
}

.ju2-replacement-list p{
  margin:0;
  font-size:13px;
}

@media(max-width:1020px){
  .ju2-php-audit-grid{
    grid-template-columns:1fr;
  }

  .ju2-php-error-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .ju2-php-visual{
    width:min(100%,620px);
    margin-inline:auto;
  }
}

@media(max-width:700px){
  .ju2-php-error-grid{
    grid-template-columns:1fr;
  }

  .ju2-php-visual{
    min-height:650px;
  }

  .ju2-php-stack{
    width:calc(100% - 30px);
    left:15px;
    right:auto;
  }

  .ju2-php-stack-old{
    top:20px;
  }

  .ju2-php-stack-new{
    top:190px;
  }

  .ju2-php-arrow{
    top:155px;
    transform:translateX(-50%) rotate(90deg);
  }

  .ju2-php-console{
    bottom:35px;
  }

  .ju2-php-badge{
    right:0;
    bottom:0;
  }
}