/* =========================================================
   AWTI DEVICES HUB
   SPECIFICATIONS CSS
   File: assets/css/device-specifications.css
   ========================================================= */

.awti-device-single .awti-spec-group{
    position:relative;

    margin-top:16px;
    padding:15px;

    border:1px solid rgba(37,99,235,.14);
    border-left:3px solid #16a34a;
    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #ecfdf5 0%,
            #ffffff 50%,
            #eff6ff 100%
        );

    box-shadow:
        0 4px 14px rgba(15,23,42,.04);

    overflow:hidden;
}

.awti-device-single .awti-spec-group::before{
    content:"";

    position:absolute;
    top:0;
    left:0;
    right:0;

    height:2px;

    background:
        linear-gradient(
            90deg,
            #16a34a,
            #0d9488,
            #2563eb
        );
}


/* =========================================================
   SPEC GROUP TITLE
   ========================================================= */

.awti-device-single .awti-spec-group h3{
    margin:0 0 11px;

    color:#0f172a;

    font-size:16px;
    line-height:1.3;
    font-weight:800;
}


/* =========================================================
   SPEC LIST
   ========================================================= */

.awti-device-single .awti-spec-list{
    display:grid;

    border:1px solid rgba(37,99,235,.10);
    border-radius:11px;

    overflow:hidden;

    background:#fff;
}


/* =========================================================
   SPEC ROW
   ========================================================= */

.awti-device-single .awti-spec-list > div{
    display:grid;

    grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);

    gap:14px;
    align-items:center;

    padding:11px 13px;

    border-bottom:1px solid #e2e8f0;

    background:#fff;

    transition:
        background .15s ease;
}

.awti-device-single .awti-spec-list > div:last-child{
    border-bottom:0;
}

.awti-device-single .awti-spec-list > div:hover{
    background:
        linear-gradient(
            90deg,
            #f0fdf4,
            #ffffff,
            #eff6ff
        );
}


/* =========================================================
   SPEC NAME
   ========================================================= */

.awti-device-single .awti-spec-list span{
    color:#64748b;

    font-size:12px;
    line-height:1.45;
    font-weight:600;
}


/* =========================================================
   SPEC VALUE
   ========================================================= */

.awti-device-single .awti-spec-list strong{
    color:#0f172a;

    font-size:13px;
    line-height:1.45;
    font-weight:800;

    text-align:right;
}


/* =========================================================
   HIGHLIGHTED SPEC
   ========================================================= */

.awti-device-single .awti-spec-list > div.is-highlight{
    position:relative;

    background:
        linear-gradient(
            90deg,
            #ecfdf5,
            #ffffff,
            #eff6ff
        );
}

.awti-device-single .awti-spec-list > div.is-highlight::before{
    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:3px;

    background:
        linear-gradient(
            180deg,
            #16a34a,
            #0d9488,
            #2563eb
        );
}

.awti-device-single .awti-spec-list > div.is-highlight strong{
    color:#15803d;
}


/* =========================================================
   SPECIFICATION MAIN CARD
   ========================================================= */

.awti-device-single [data-panel="specifications"]
.awti-device-card{
    overflow:hidden;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:600px){

    .awti-device-single .awti-spec-group{
        margin-top:12px;
        padding:12px;
        border-radius:12px;
    }

    .awti-device-single .awti-spec-group h3{
        font-size:14px;
    }

    .awti-device-single .awti-spec-list > div{
        grid-template-columns:1fr;

        gap:4px;

        padding:10px 11px;
    }

    .awti-device-single .awti-spec-list span{
        font-size:11px;
    }

    .awti-device-single .awti-spec-list strong{
        font-size:12px;
        text-align:left;
    }

}