/* =========================================================
   PANORAMA DE MERCADO
   @oEvandroSoares

   FASE 4

   Arquivo:
   cards-market.css

   Cards Premium de Mercado
========================================================= */





/*
=========================================================
CARD BASE
=========================================================
*/


.market-card {


    position:

    relative;



    overflow:

    hidden;



    min-height:

    130px;



    display:flex;



    flex-direction:

    column;



    justify-content:

    space-between;



    transition:

    .25s ease;



}









.market-card:hover {


    transform:

    translateY(-3px);



    border-color:

    var(--blue);



}









/*
=========================================================
CABEÇALHO CARD
=========================================================
*/


.card-header {


    display:flex;


    justify-content:

    space-between;



    align-items:

    center;



}





.card-symbol {


    font-size:

    15px;



    font-weight:

    700;



    color:

    var(--text-primary);



    letter-spacing:

    .5px;



}









.card-name {


    font-size:

    11px;



    color:

    var(--text-muted);



    margin-top:

    4px;



}









/*
=========================================================
VALOR PRINCIPAL
=========================================================
*/


.card-price {


    font-size:

    30px;



    font-weight:

    800;



    letter-spacing:

    -.5px;



    color:

    var(--text-primary);



}









/*
=========================================================
VARIAÇÃO
=========================================================
*/


.card-change {


    display:

    inline-flex;



    align-items:

    center;



    gap:

    6px;



    font-size:

    14px;



    font-weight:

    700;



}









.change-icon {


    font-size:

    12px;



}









/*
=========================================================
INFO EXTRA
=========================================================
*/


.card-footer {


    display:flex;


    justify-content:

    space-between;



    align-items:

    center;



    margin-top:

    12px;



    padding-top:

    10px;



    border-top:

    1px solid

    var(--border-color);



}





.card-info {


    font-size:

    11px;



    color:

    var(--text-secondary);



}









/*
=========================================================
CARDS POSITIVOS
=========================================================
*/


.market-card.up {


    background:


    linear-gradient(

        145deg,

        var(--bg-card),

        rgba(

            0,

            208,

            132,

            .08

        )

    );



}









.market-card.up::before {


    content:"";



    position:absolute;



    top:0;



    left:0;



    width:3px;



    height:100%;



    background:

    var(--green);



}









/*
=========================================================
CARDS NEGATIVOS
=========================================================
*/


.market-card.down {


    background:


    linear-gradient(

        145deg,

        var(--bg-card),

        rgba(

            255,

            77,

            90,

            .08

        )

    );



}









.market-card.down::before {


    content:"";



    position:absolute;



    top:0;



    left:0;



    width:3px;



    height:100%;



    background:

    var(--red);



}









/*
=========================================================
CARD DE DESTAQUE
=========================================================
*/


.market-card.highlight {


    border:


    1px solid

    var(--blue);



    box-shadow:


    0 0 20px

    rgba(

        45,

        140,

        255,

        .25

    );



}









/*
=========================================================
CARD FUTUROS
=========================================================
*/


.future-card .card-price {


    font-size:

    32px;



}









.future-card .volume {


    color:

    var(--text-muted);



    font-size:

    12px;



}









/*
=========================================================
CARD AÇÃO B3
=========================================================
*/


.stock-card {


    min-height:

    120px;



}









.stock-sector {


    font-size:

    10px;



    color:

    var(--text-muted);



    text-transform:

    uppercase;



}









/*
=========================================================
CARD MACRO
=========================================================
*/


.macro-card {


    background:

    var(--bg-secondary);



}









.macro-indicator {


    display:flex;


    align-items:center;



    gap:

    8px;



}









.indicator-dot {


    width:

    8px;



    height:

    8px;



    border-radius:

    50%;



}









.indicator-dot.green {


    background:

    var(--green);



    box-shadow:

    0 0 8px

    var(--green);



}









.indicator-dot.red {


    background:

    var(--red);



    box-shadow:

    0 0 8px

    var(--red);



}









/*
=========================================================
GRID DE CARDS
=========================================================
*/


.cards-grid {


    display:grid;



    grid-template-columns:


    repeat(

        auto-fit,

        minmax(

            220px,

            1fr

        )

    );



    gap:

    16px;



}









/*
=========================================================
ANIMAÇÃO DE ATUALIZAÇÃO
=========================================================
*/


.card-update {


    animation:

    pulseCard

    .5s

    ease;



}









@keyframes pulseCard {


    0% {


        opacity:

        .6;



    }



    100% {


        opacity:

        1;



    }



}









/*
=========================================================
RESPONSIVO
=========================================================
*/


@media(max-width:600px){



    .card-price {


        font-size:

        24px;



    }






    .market-card {


        min-height:

        110px;



    }



}