/* =========================================================
   AWTI DEVICES HUB
   COMMON / GLOBAL CARD CSS
   File: assets/css/device-common.css
   ========================================================= */


/* =========================================================
   MAIN SINGLE DEVICE WRAPPER
   ========================================================= */

.awti-device-single{
    color:#0f172a;
    box-sizing:border-box;
}

.awti-device-single *,
.awti-device-single *::before,
.awti-device-single *::after{
    box-sizing:border-box;
}


/* =========================================================
   COMMON DEVICE CARD
   ========================================================= */

.awti-device-single .awti-device-card{
    position:relative;

    margin:0 0 14px;
    padding:18px;

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

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

    box-shadow:
        0 6px 20px rgba(15,23,42,.05);

    overflow:hidden;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


/* =========================================================
   COMMON CARD TOP ACCENT
   ========================================================= */

.awti-device-single .awti-device-card::before{
    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:2px;

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


/* =========================================================
   CARD HOVER
   ========================================================= */

.awti-device-single .awti-device-card:hover{
    border-color:rgba(37,99,235,.25);

    box-shadow:
        0 9px 25px rgba(15,23,42,.07);
}


/* =========================================================
   COMMON CARD HEADING
   ========================================================= */

.awti-device-single .awti-device-card h2{
    margin:0 0 12px;

    color:#0f172a;

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

.awti-device-single .awti-device-card h3{
    color:#0f172a;

    font-weight:800;
}


/* =========================================================
   COMMON PARAGRAPH
   ========================================================= */

.awti-device-single .awti-device-card p{
    color:#475569;

    font-size:13px;
    line-height:1.7;
}


/* =========================================================
   COMMON LINKS
   ========================================================= */

.awti-device-single .awti-device-card a{
    color:#2563eb;
    font-weight:700;
}

.awti-device-single .awti-device-card a:hover{
    color:#15803d;
}


/* =========================================================
   COMMON BUTTON
   ========================================================= */

.awti-device-single button{
    font-family:inherit;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.awti-device-single .awti-section-heading{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:16px;

    margin-bottom:16px;
}

.awti-device-single .awti-section-heading h2{
    margin:0 0 4px;

    color:#0f172a;

    font-size:21px;
    font-weight:800;
}

.awti-device-single .awti-section-heading p{
    margin:0;

    color:#64748b;

    font-size:13px;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.awti-device-single .awti-empty-state{
    padding:16px;

    border:1px dashed rgba(37,99,235,.20);
    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            #f8fafc,
            #eff6ff
        );

    color:#64748b;

    font-size:13px;
    text-align:center;
}


/* =========================================================
   COMMON BADGE
   ========================================================= */

.awti-device-single .awti-badge{
    display:inline-flex;
    align-items:center;

    padding:5px 9px;

    border-radius:999px;

    background:#ecfdf5;

    color:#15803d;

    font-size:11px;
    font-weight:800;
}


/* =========================================================
   COMMON DIVIDER
   ========================================================= */

.awti-device-single hr{
    height:1px;

    margin:16px 0;

    border:0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(37,99,235,.18),
            transparent
        );
}


/* =========================================================
   COMMON SCROLLBAR
   ========================================================= */

.awti-device-single ::-webkit-scrollbar{
    width:7px;
    height:7px;
}

.awti-device-single ::-webkit-scrollbar-track{
    background:#f1f5f9;
    border-radius:99px;
}

.awti-device-single ::-webkit-scrollbar-thumb{
    background:
        linear-gradient(
            180deg,
            #16a34a,
            #2563eb
        );

    border-radius:99px;
}


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

@media(max-width:600px){

    .awti-device-single .awti-device-card{
        padding:14px;

        border-radius:13px;
    }

    .awti-device-single .awti-device-card h2{
        font-size:18px;
    }

    .awti-device-single .awti-device-card p{
        font-size:12px;
    }

    .awti-device-single .awti-section-heading{
        align-items:flex-start;
    }

}