/* =========================================================
NEXT MATCH HERO
========================================================= */

.pm-next-match{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    padding:34px 40px;

    background:
    linear-gradient(90deg, rgb(5 10 25 / 48%), rgb(5 10 25 / 51%)
    ),
    url('https://pollamundialista.diversionplus.co/wp-content/uploads/2026/05/bg-stadium.png');

    background-size:cover;

    background-position:center;

    border:
    1px solid rgba(255,255,255,.08);

    box-shadow:
    0 20px 60px rgba(0,0,0,.35);

}

/* =========================================================
RED / BLUE GLOW
========================================================= */

.pm-next-match::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(255,0,70,.18),
        transparent 30%,
        transparent 70%,
        rgba(0,120,255,.18)
    );

    pointer-events:none;

}

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

.pm-next-badge{

    position:absolute;

    top:18px;
    left:18px;

    z-index:3;

    background:
    linear-gradient(
        135deg,
        #ff002f,
        #ff5a00
    );

    color:#fff;

    padding:10px 16px;

    border-radius:12px;

    font-size:13px;

    font-weight:800;

    text-transform:uppercase;

}

/* =========================================================
PHASE
========================================================= */

.pm-next-phase{

    text-align:center;

    color:#fff;

    font-size:18px;

    font-weight:700;

    margin-bottom:26px;

    position:relative;

    z-index:2;

}

/* =========================================================
HERO
========================================================= */

.pm-next-hero{

    display:grid;

    grid-template-columns:
    1fr
    320px
    1fr;

    align-items:center;

    gap:20px;

    position:relative;

    z-index:2;

}

/* =========================================================
TEAM
========================================================= */

.pm-next-team{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

/* =========================================================
TEAM FLAG
========================================================= */

.pm-next-team img{

    width: 95px;
    height: 93px !important;
    object-fit: none;

    border-radius:50% !important;

    margin-bottom:18px;

    border:
    4px solid rgba(255,255,255,.92);


    box-shadow:
    0 0 30px rgba(255,255,255,.18);

    position:relative;

}

/* =========================================================
LEFT TEAM RED GLOW
========================================================= */

.pm-next-team:first-child img{

    box-shadow:

    0 0 12px rgba(255,255,255,.35),

    0 0 30px rgba(255,0,70,.45),

    0 0 60px rgba(255,0,70,.25);

}

/* =========================================================
RIGHT TEAM BLUE GLOW
========================================================= */

.pm-next-team:last-child img{

    box-shadow:

    0 0 12px rgba(255,255,255,.35),

    0 0 30px rgba(0,120,255,.45),

    0 0 60px rgba(0,120,255,.25);

}

.pm-next-team h2{

    color:#fff;

    font-size:30px;

    font-weight:900;

    line-height:1;

    text-transform:uppercase;

    margin:0;

}

/* =========================================================
CENTER
========================================================= */

.pm-next-center{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}

/* =========================================================
COUNTDOWN BOX
========================================================= */

.pm-next-counter-box{

    background:
    rgba(5,10,25,.82);

    backdrop-filter:blur(8px);

    border:
    1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:24px;

    width:100%;

    text-align:center;

}

.pm-next-counter-box span{

    display:block;

    color:#cbd5e1;

    font-size:15px;

    margin-bottom:14px;

}

/* =========================================================
COUNTDOWN
========================================================= */

.pm-next-countdown{

    color:#fff;

    font-size:40px;

    font-weight:900;

    line-height:1;

}

/* =========================================================
VS
========================================================= */

.pm-next-vs{

    margin-top:22px;

    color:#ffcc00;

    font-size:70px;

    font-weight:900;

    text-shadow:
    0 0 20px rgba(255,204,0,.45);

}

/* =========================================================
META
========================================================= */

.pm-next-meta{

    display:flex;

    justify-content:center;

    gap:30px;

    margin-top:24px;

    color:#fff;
    font-weight: bold;

    font-size:17px;

    position:relative;

    z-index:2;

    flex-wrap:wrap;

}

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

.pm-next-button{

    display:flex;

    justify-content:center;

    align-items:center;

    width:min(420px,100%);

    margin:34px auto 0;

    padding:15px 19px;

    border-radius:20px;

    background:
    linear-gradient(
        135deg,
        #ff002f,
        #ff5a00
    );

    color:#fff !important;

    text-decoration:none;

    font-size:22px;

    font-weight:900;

    transition:.25s ease;

    position:relative;

    z-index:2;

}

.pm-next-button:hover{

    transform:
    translateY(-2px);

}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:980px){

    .pm-next-match{

        padding:80px 20px 30px;

    }

    .pm-next-hero{

        grid-template-columns:1fr;

    }

    .pm-next-team h2{

        font-size:30px;

    }

    .pm-next-countdown{

        font-size:34px;

    }

    .pm-next-vs{

        font-size:48px;

    }

    .pm-next-meta{

        gap:12px;

        font-size:14px;

    }

    .pm-next-button{

        font-size:22px;

        padding:18px 20px;

    }

}