/* =========================================================
   AWTI DEVICES HUB
   TABS CSS
   File: assets/css/device-tabs.css
   ========================================================= */

.awti-device-single .awti-device-tabs{
    display:flex;
    align-items:center;
    gap:6px;

    margin:20px 0 0;
    padding:6px;

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

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

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

    overflow-x:auto;

    scrollbar-width:none;
}

.awti-device-single .awti-device-tabs::-webkit-scrollbar{
    display:none;
}


/* =========================================================
   TAB BUTTON
   ========================================================= */

.awti-device-single .awti-device-tabs button{
    flex:1 0 auto;

    min-height:42px;

    padding:9px 16px;

    border:1px solid transparent;
    border-radius:10px;

    background:transparent;

    color:#64748b;

    font-size:13px;
    font-weight:800;

    cursor:pointer;

    white-space:nowrap;

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


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

.awti-device-single .awti-device-tabs button:hover{
    background:rgba(255,255,255,.75);

    color:#2563eb;
}


/* =========================================================
   ACTIVE TAB
   ========================================================= */

.awti-device-single .awti-device-tabs button.is-active{
    background:
        linear-gradient(
            135deg,
            #16a34a,
            #0d9488,
            #2563eb
        );

    color:#fff;

    border-color:transparent;

    box-shadow:
        0 5px 14px rgba(37,99,235,.18);

    transform:translateY(-1px);
}


/* =========================================================
   TAB PANELS
   ========================================================= */

.awti-device-single .awti-device-tab-panel{
    display:none;

    margin-top:14px;

    animation:awtiTabFade .2s ease;
}

.awti-device-single .awti-device-tab-panel.is-active{
    display:block;
}


/* =========================================================
   TAB CONTENT CARD
   ========================================================= */

.awti-device-single .awti-device-tab-panel
.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,
            #ffffff 52%,
            #eff6ff
        );

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

    overflow:hidden;
}

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

    position:absolute;

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

    height:2px;

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


/* =========================================================
   CONTENT HEADINGS
   ========================================================= */

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

    color:#0f172a;

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


/* =========================================================
   RICH TEXT
   ========================================================= */

.awti-device-single .awti-rich-text{
    color:#475569;

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

.awti-device-single .awti-rich-text p{
    margin:0 0 10px;
}

.awti-device-single .awti-rich-text p:last-child{
    margin-bottom:0;
}


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

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

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

    background:#f8fafc;

    color:#64748b;

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


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes awtiTabFade{
    from{
        opacity:0;
        transform:translateY(3px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}


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

@media(max-width:600px){

    .awti-device-single .awti-device-tabs{
        gap:4px;

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

        border-radius:12px;
    }

    .awti-device-single .awti-device-tabs button{
        min-height:40px;

        padding:8px 13px;

        font-size:12px;
    }

    .awti-device-single .awti-device-tab-panel{
        margin-top:10px;
    }

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

        border-radius:13px;
    }

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

    .awti-device-single .awti-rich-text{
        font-size:12px;
    }

}