/* =========================================================
PREDICTIONS
========================================================= */

.pm-predictions{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:24px;

}

@media(max-width:768px){

    .pm-predictions{

        grid-template-columns:1fr;

    }

}

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

.pm-prediction-card{

    background:
    linear-gradient(
        180deg,
        #0f172a,
        #020617
    );

    border-radius:28px;

    padding:28px;

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:22px;

    min-height:420px;

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

}

/* Glow */

.pm-prediction-card::before{

    content:"";

    position:absolute;

    top:-100px;
    right:-100px;

    width:200px;
    height:200px;

    background:
    radial-gradient(
        rgba(255,0,70,.15),
        transparent 70%
    );

    pointer-events:none;

}

/* Hover */

.pm-prediction-card:hover{

    transform:translateY(-3px);

    border-color:
    rgba(255,255,255,.12);

    box-shadow:
    0 15px 50px rgba(0,0,0,.35);

}





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

.pm-inputs{

    display:flex;

    align-items:center;

    gap:14px;

}

/* =========================================================
INPUTS
========================================================= */

.pm-inputs input{

    width:74px;
    height:74px;

    border-radius:20px;

    font-size:32px;

}

.pm-inputs input:focus{

    background:#293548;

    box-shadow:
    0 0 0 3px rgba(255,0,70,.25);

}

/* Remove arrows */

.pm-inputs input::-webkit-outer-spin-button,
.pm-inputs input::-webkit-inner-spin-button{

    -webkit-appearance:none;
    margin:0;

}

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

.pm-inputs span{

    color:#94a3b8;

    font-size:18px;
    font-weight:700;

    letter-spacing:2px;

}

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

.pm-prediction-card button{

    border:none;

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

    color:#fff;

    font-size:15px;
    font-weight:700;

    border-radius:16px;

    cursor:pointer;

    transition:.25s ease;

    white-space:nowrap;
       width:100%;

    padding:18px;

    border-radius:18px;

}

.pm-prediction-card button:hover{

    transform:translateY(-2px);

    opacity:.92;

}

/* =========================================================
DATE
========================================================= */

.pm-match-date{

    position:absolute;

    top:18px;
    right:20px;

    font-size:13px;

    color:#94a3b8;

}

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

@media(max-width:768px){

    .pm-prediction-card{

        flex-direction:column;

        align-items:center;

        text-align:center;

        padding:28px 20px;

    }

    .pm-team{

        justify-content:center;

        min-width:auto;

    }

    .pm-inputs{

        margin:10px 0;

    }

    .pm-inputs input{

        font-size:24px;

    }

    .pm-prediction-card button{

        width:100%;

    }

    .pm-match-date{

        position:relative;

        top:auto;
        right:auto;

        margin-bottom:12px;

    }

}

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

.pm-team{

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

    min-width:180px;

}

.pm-team img{

    width:54px;
    height:54px;

    object-fit:cover;

    border-radius:50%;

    padding:3px;

    box-shadow:
    0 4px 15px rgba(0,0,0,.25);

}

.pm-team-name{

    color:#fff;

    font-size:18px;
    font-weight:700;

}

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

.pm-match-meta{

     width:100%;

    display:flex;

    justify-content:start;

    gap:10px;

    flex-wrap:wrap;
    
    margin-top: -6px;

}

.pm-match-meta span{

    background:
    rgba(255,255,255,.06);

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

    padding:8px 12px;

    border-radius:999px;

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

    color:#cbd5e1;

    backdrop-filter:blur(10px);

}

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

.pm-status{

    color:#00ff99;

}

/* =========================================================
GROUP
========================================================= */

.pm-group{

    color:#ffcc00;

}

/* =========================================================
DATE
========================================================= */

.pm-date{

    color:#94a3b8;

}



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

.pm-phase-title{

    width:100%;

    margin:20px 0 5px;

    padding:14px 18px;

    border-radius:14px;

    background:
    linear-gradient(
        90deg,
        #6d00ff,
        #b100ff
    );

    color:#fff;

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

    letter-spacing:.5px;

    line-height:1.2;

    min-height:auto !important;

    display:flex;

    align-items:center;

    box-shadow:
    0 8px 25px rgba(109,0,255,.25);
    
    grid-column:1/-1;

}

/* =========================================================
STADIUM
========================================================= */

.pm-stadium{

    margin-top:10px;

    font-size:13px;

    color:#94a3b8;

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

}

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

.pm-status-badge{

    position:absolute;

    top:20px;
    right:20px;

    padding:10px 14px;

    border-radius:999px;

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

    letter-spacing:.5px;

    text-transform:uppercase;

}

/* =========================================================
UPCOMING
========================================================= */

.pm-status-upcoming{

    background:
    rgba(0,140,255,.15);

    color:#4db8ff;

    border:
    1px solid rgba(0,140,255,.25);

}

/* =========================================================
LIVE
========================================================= */

.pm-status-live{

    background:
    rgba(255,0,70,.15);

    color:#ff4d79;

    border:
    1px solid rgba(255,0,70,.25);

    animation:
    pmPulse 1.2s infinite;

}

/* =========================================================
FINISHED
========================================================= */

.pm-status-finished{

    background:
    rgba(0,255,120,.15);

    color:#00ff99;

    border:
    1px solid rgba(0,255,120,.25);

}

/* =========================================================
DISABLED
========================================================= */

.pm-prediction-card input:disabled{

    opacity:.45;

    cursor:not-allowed;

}

.pm-prediction-card button:disabled{

    opacity:.5;

    cursor:not-allowed;

    transform:none !important;

}

/* =========================================================
PULSE
========================================================= */

@keyframes pmPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.05);
    }

    100%{
        transform:scale(1);
    }

}

/* =========================================================
TEAMS WRAPPER
========================================================= */

.pm-teams{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:24px;

}

/* =========================================================
PREDICTION INPUT VALUE
========================================================= */

.pm-inputs input{

    color:#ffffff !important;

    font-size:42px;

    font-weight:900;

    text-align:center;

    background:
    rgba(255,255,255,.06);

}

/* Placeholder */

.pm-inputs input::placeholder{

    color:
    rgba(255,255,255,.25);

}

/* Disabled */

.pm-inputs input:disabled{

    color:#ffffff !important;

    opacity:1 !important;

    -webkit-text-fill-color:#ffffff;

}

.pm-matches{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:20px;

}

.pm-match-card{

    background:
    linear-gradient(
        135deg,
        rgba(120,0,40,.25),
        rgba(0,30,70,.4)
    );

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

    border-radius:28px;

    padding:25px 20px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:20px;

    overflow:hidden;

    position:relative;

}

.pm-match-card::before{

    content:'';

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at top left,
        rgba(255,0,60,.18),
        transparent 40%
    );

    pointer-events:none;

}

.pm-team{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

}

.pm-team img{

    width:85px;

    height:85px;

    object-fit:cover;

    border-radius:50%;

    border:3px solid rgba(255,255,255,.8);

}

.pm-team span{

    color:#fff;

    font-size:22px;

    font-weight:700;

    text-align:center;

}

.pm-vs{

    text-align:center;

    color:#fff;

}

.pm-vs strong{

    display:block;

    font-size:34px;

    margin-bottom:6px;

}

.pm-vs small{

    color:#cbd3e6;

    font-size:15px;

}

.pm-match-button{

    margin-top:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    padding:16px 20px;

    border-radius:18px;

    text-decoration:none;

    color:#fff;

    font-size:18px;

    font-weight:700;

    background:
    linear-gradient(
        90deg,
        #ff004c,
        #ff5b00
    );

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

    transition:.3s;

}

.pm-match-button:hover{

    transform:translateY(-3px);

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

}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

    .pm-matches{

        grid-template-columns:
        1fr;

    }

    .pm-team img{

        width:65px;

        height:65px;

    }

    .pm-team span{

        font-size:18px;

    }

    .pm-vs strong{

        font-size:28px;

    }

    .pm-match-button{

        font-size:16px;

        padding:14px;

    }

}





.pm-modal-overlay{

    position:fixed;

    inset:0;

    background:
    rgba(0,0,0,.82);

    backdrop-filter:blur(8px);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:999999;

    padding:20px;

}

.pm-modal-overlay.active{

    display:flex;

}

.pm-modal{

    width:100%;

    max-width:430px;

    border-radius:34px;

    padding:30px 24px;

    position:relative;

    overflow:hidden;

    color:#fff;

    background:
    linear-gradient(
        135deg,
        rgba(80,0,40,.25),
        rgba(0,25,70,.45)
    );

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

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

}

.pm-modal::before{

    content:'';

    position:absolute;

    inset:0;

    background:
    url(
    'https://pollamundialista.diversionplus.co/wp-content/uploads/2026/05/bg-stadium.png'
    );

    background-size:cover;

    background-position:center;

    opacity:.14;

    pointer-events:none;

}

.pm-modal > *{

    position:relative;

    z-index:2;

}

.pm-modal-close{

    position:absolute;

    top:16px;

    right:16px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:
    rgba(255,255,255,.08);

    color:#fff;

    cursor:pointer;

    font-size:18px;

}

.pm-modal-top{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-bottom:30px;

}

.pm-modal-pill{

    padding:10px 18px;

    border-radius:999px;

    background:
    rgba(255,255,255,.08);

    color:#fff;

    font-size:14px;

    font-weight:600;

}

.pm-modal-status{

    background:
    rgba(0,255,120,.18);

    color:#3cff9d;

}

.pm-modal-stadium{

    text-align:center;

    margin-bottom:30px;

    color:#c8d3e8;

    font-size:15px;

}

.pm-modal-teams{

    display:grid;

    grid-template-columns:
    1fr auto 1fr;

    align-items:center;

    gap:14px;

    margin-bottom:35px;

}

.pm-modal-team{

    text-align:center;

}

.pm-modal-team img{

    width:78px;

    height:78px;

    object-fit:cover;

    margin-bottom:12px;

}

.pm-modal-team span{

    display:block;

    font-size:24px;

    font-weight:800;

}

.pm-modal-vs{

    font-size:26px;

    font-weight:900;

    color:#cfd7e9;

}

.pm-modal-score{

    display:grid;

    grid-template-columns:
    1fr auto 1fr;

    gap:14px;

    align-items:center;

    margin-bottom:30px;

}

.pm-modal-score input{

    width:100%;

    height:95px;

    border-radius:16px;

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

    background:
    rgba(255,255,255,.06);

    color:#fff;

    text-align:center;

    font-size:52px;

    font-weight:900;

}

.pm-modal-score span{

    font-size:28px;

    font-weight:900;

    color:#cdd5e7;

}

.pm-save-prediction{

    width:100%;

    border:none;

    padding:18px;

    border-radius:24px;

    cursor:pointer;

    font-size:22px;

    font-weight:800;

    color:#fff;

    background:
    linear-gradient(
        90deg,
        #9c0036,
        #cc4a00
    );

    box-shadow:
    0 0 25px rgba(255,80,0,.35);

}

.pm-saved-message{

    margin-top:18px;

    text-align:center;

    color:#9cffc0;

    font-weight:700;

}

.pm-edit-prediction {
    background: linear-gradient(359deg, #353535, #000);
    color: #fff !important;
    border: 1px solid #353535 !important;
    border-radius: 15px !important;
    padding: 15px !important;
}