/* Cyclone Hosting V5 - Shared Hosting Sprint 3C Status */

.sh-status{
    position:relative;
    padding:95px 22px;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 0%,rgba(19,223,255,.12),transparent 34%),
        linear-gradient(180deg,#061229,#040a18);
}

.sh-status:before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(126,218,255,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(126,218,255,.055) 1px,transparent 1px);
    background-size:72px 72px;
    opacity:.30;
    mask-image:radial-gradient(circle at 50% 40%,black,transparent 76%);
}

.sh-status-wrap{
    position:relative;
    z-index:2;
    width:min(1120px,100%);
    margin:0 auto;
    display:grid;
    grid-template-columns:.75fr 1.25fr;
    gap:24px;
    align-items:stretch;
}

.sh-status-main,
.sh-status-item{
    border-radius:30px;
    background:
        linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
    border:1px solid rgba(126,218,255,.16);
    box-shadow:0 28px 80px rgba(0,0,0,.30);
}

.sh-status-main{
    min-height:340px;
    padding:34px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.sh-status-pulse{
    width:92px;
    height:92px;
    border-radius:50%;
    background:#19d37a;
    box-shadow:
        0 0 0 14px rgba(25,211,122,.10),
        0 0 45px rgba(25,211,122,.45);
    margin-bottom:28px;
}

.sh-status-main strong{
    color:#fff;
    font-size:30px;
    line-height:1.1;
}

.sh-status-main p{
    color:#a9bdd5;
    line-height:1.7;
}

.sh-status-list{
    display:grid;
    gap:14px;
}

.sh-status-item{
    display:grid;
    grid-template-columns:28px 1fr auto;
    gap:16px;
    align-items:center;
    padding:22px;
    transition:.25s ease;
}

.sh-status-item:hover{
    transform:translateY(-5px);
    border-color:rgba(19,223,255,.38);
    box-shadow:0 34px 90px rgba(0,0,0,.42),0 0 36px rgba(19,223,255,.15);
}

.sh-status-dot{
    width:14px;
    height:14px;
    border-radius:50%;
    background:#19d37a;
    box-shadow:0 0 20px rgba(25,211,122,.65);
}

.sh-status-item.status-yellow .sh-status-dot{
    background:#ffd84d;
    box-shadow:0 0 20px rgba(255,216,77,.65);
}

.sh-status-item.status-red .sh-status-dot{
    background:#ff4d6d;
    box-shadow:0 0 20px rgba(255,77,109,.65);
}

.sh-status-item h3{
    margin:0 0 5px;
    color:#fff;
    font-size:20px;
}

.sh-status-item p{
    margin:0;
    color:#a9bdd5;
    line-height:1.55;
}

.sh-status-item span{
    white-space:nowrap;
    padding:9px 13px;
    border-radius:999px;
    color:#0b1d13;
    font-size:12px;
    font-weight:950;
    background:#19d37a;
}

.sh-status-item.status-yellow span{
    color:#111827;
    background:#ffd84d;
}

.sh-status-item.status-red span{
    color:#fff;
    background:#ff4d6d;
}

@media(max-width:900px){
    .sh-status-wrap{
        grid-template-columns:1fr;
    }
}

@media(max-width:640px){
    .sh-status-item{
        grid-template-columns:24px 1fr;
    }

    .sh-status-item span{
        grid-column:2;
        width:max-content;
    }
}