/* =========================================================
   AWTI DEVICES HUB
   BUY TIP CSS
   File: assets/css/device-buy-tip.css
   ========================================================= */

.awti-device-single .awti-buy-tip{
    position:relative;

    display:flex;
    align-items:center;
    gap:14px;

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

    border:1px solid rgba(22,163,74,.20);
    border-left:3px solid #16a34a;
    border-radius:16px;

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

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

    overflow:hidden;
}

.awti-device-single .awti-buy-tip::before{
    content:"";

    position:absolute;

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

    height:3px;

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


/* =========================================================
   BUY TIP TITLE
   ========================================================= */

.awti-device-single .awti-buy-tip strong{
    color:#0f172a;

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

    white-space:nowrap;
}


/* =========================================================
   BUY STATUS
   ========================================================= */

.awti-device-single .awti-buy-tip span{
    display:inline-flex;
    align-items:center;

    min-height:30px;
    padding:5px 10px;

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

    background:#dcfce7;

    color:#15803d;

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

    white-space:nowrap;
}


/* =========================================================
   LOWEST PRICE
   ========================================================= */

.awti-device-single .awti-buy-tip small{
    margin-left:auto;

    color:#64748b;

    font-size:11px;
    font-weight:600;

    white-space:nowrap;
}


/* =========================================================
   DIFFERENT BUY STATES
   ========================================================= */

.awti-device-single .awti-buy-tip span:empty{
    display:none;
}


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

@media(max-width:600px){

    .awti-device-single .awti-buy-tip{
        align-items:flex-start;
        flex-wrap:wrap;

        gap:8px 10px;

        margin:16px 0;
        padding:14px;

        border-radius:14px;
    }

    .awti-device-single .awti-buy-tip strong{
        width:100%;
    }

    .awti-device-single .awti-buy-tip span{
        font-size:11px;
    }

    .awti-device-single .awti-buy-tip small{
        width:100%;
        margin-left:0;
    }

}