/* =========================================================
   AWTI DEVICES HUB
   DEVICE HEADER CSS
   File: assets/css/device-header.css
   ========================================================= */

.awti-device-single .awti-device-header{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,620px);
    gap:24px;
    align-items:start;

    margin:18px 0 20px;
    padding:20px;

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

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

    box-shadow:
        0 8px 28px rgba(15,23,42,.06);

    overflow:hidden;
    position:relative;
}

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

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

    height:3px;

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


/* =========================================================
   HEADER MAIN
   ========================================================= */

.awti-device-single .awti-device-header-main{
    min-width:0;
    padding:8px 0;
}


/* =========================================================
   BRAND
   ========================================================= */

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

    margin-bottom:7px;
    padding:5px 9px;

    border:1px solid rgba(22,163,74,.16);
    border-radius:999px;

    background:#ecfdf5;

    color:#15803d;

    font-size:11px;
    line-height:1;
    font-weight:900;

    text-transform:uppercase;
    letter-spacing:.07em;
}


/* =========================================================
   DEVICE NAME
   ========================================================= */

.awti-device-single .awti-device-header h1{
    margin:0;

    color:#0f172a;

    font-size:34px;
    line-height:1.15;
    font-weight:900;

    letter-spacing:-.5px;
}


/* =========================================================
   MODEL
   ========================================================= */

.awti-device-single .awti-device-model{
    margin-top:7px;

    color:#64748b;

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


/* =========================================================
   RATING ROW
   ========================================================= */

.awti-device-single .awti-device-rating-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:7px;

    margin-top:14px;

    color:#64748b;

    font-size:12px;
}

.awti-device-single .awti-device-rating-row strong{
    color:#2563eb;

    font-size:14px;
    font-weight:900;
}

.awti-device-single .awti-stars{
    color:#f59e0b;

    font-size:18px;
    line-height:1;

    letter-spacing:1px;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.awti-device-single .awti-device-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;

    gap:9px;

    margin-top:17px;
}


/* =========================================================
   COMPARE BUTTON
   ========================================================= */

.awti-device-single .awti-device-compare{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:40px;
    padding:9px 14px;

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

    background:#fff;

    color:#2563eb;

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

    cursor:pointer;

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

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

.awti-device-single .awti-device-compare:hover{
    transform:translateY(-1px);

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

    color:#15803d;
}


/* =========================================================
   OFFICIAL WEBSITE
   ========================================================= */

.awti-device-single .awti-device-actions
a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:40px;
    padding:9px 14px;

    border-radius:10px;

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

    color:#fff;

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

    text-decoration:none;

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

    transition:
        opacity .2s ease,
        transform .2s ease;
}

.awti-device-single .awti-device-actions
a:hover{
    color:#fff;

    opacity:.92;

    transform:translateY(-1px);
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.awti-device-single .awti-device-breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:7px;

    margin:0 0 10px;

    color:#64748b;

    font-size:12px;
}

.awti-device-single .awti-device-breadcrumb a{
    color:#2563eb;
    text-decoration:none;
    font-weight:700;
}

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

.awti-device-single .awti-device-breadcrumb strong{
    color:#0f172a;
}


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

@media(max-width:900px){

    .awti-device-single .awti-device-header{
        grid-template-columns:1fr;
        gap:15px;

        padding:16px;
    }

    .awti-device-single .awti-device-header-main{
        order:1;
    }

    .awti-device-single .awti-device-media-v11{
        order:2;
    }

    .awti-device-single .awti-device-header h1{
        font-size:28px;
    }

}

@media(max-width:600px){

    .awti-device-single .awti-device-header{
        margin-top:12px;
        padding:14px;

        border-radius:15px;
    }

    .awti-device-single .awti-device-header h1{
        font-size:24px;
    }

    .awti-device-single .awti-device-brand{
        font-size:10px;
    }

    .awti-device-single .awti-device-rating-row{
        margin-top:11px;
    }

    .awti-device-single .awti-device-actions{
        margin-top:13px;
    }

    .awti-device-single .awti-device-actions
    .awti-device-compare,
    .awti-device-single .awti-device-actions a{
        min-height:38px;
        padding:8px 11px;
    }

}