/* ===== Theme Pronostici per [mp_predict] ===== */
:root{
    --mp-red:#ee0404;         /* rosso bottone */
    --mp-red-hover:#ee0404;
    --mp-navy:#0b2a59;        /* blu dei numeri */
    --mp-white:#ffffff;
}

/* wrapper shortcode */
.mp-widget{
    font-family: "Montserrat", system-ui, sans-serif;
    text-align:center;
}

/* riga punteggio + bottone */
.mp-widget .mp-score{
    display:flex;
    gap:18px;
    justify-content:center;
    align-items:center;
}

/* SELECT “0 – 0” */
.mp-widget .mp-score select{
    -webkit-appearance:none;
    appearance:none;
    background: none;
    border: none;
    /* freccia svg blu scuro */
    padding: 6px 34px 6px 12px;
    font-family: "Montserrat", Sans-serif;
    font-size: 154px;
    font-weight: 800;
    color: #042354;
    text-align: center;
}
.mp-widget .mp-score select>option{
    font-size: 20px;
}
.mp-widget .mp-score select:focus{
    outline: 3px solid rgba(255,255,255,.75);
    box-shadow: 0 0 0 3px rgba(11,42,89,.15);
}

/* trattino centrale */
.mp-widget .mp-score span{
    font-family: "Montserrat", Sans-serif;
    font-size: 154px;
    font-weight: 800;
    color: #042354;
    transform: translateY(2px);
}

/* BOTTONE “Invia” (versione piccola, in riga coi select) */
.mp-widget .mp-open{
    background-color: #ee0404;
    font-family: "Montserrat", Sans-serif;
    font-size: 26px;
    font-weight: 800;
    font-style: normal;
    border-style: solid;
    border-width: 3px 3px 3px 3px;
    border-color: #fff;
    border-radius: 9px 9px 9px 9px;
    padding: 8px 32px 8px 32px;
    text-transform: uppercase;
    color: #fff;
}
.mp-widget .mp-open:hover{ background: var(--mp-red-hover); }
.mp-widget .mp-open:active{
    transform: translateY(1px);
    box-shadow: 0 4px 0 rgba(0,0,0,.12);
}

/* MODAL */
.mp-modal{
    backdrop-filter: blur(1px);
}
.mp-modal .mp-dialog{
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,.25);
}
.mp-modal .mp-summary{
    color: var(--mp-navy);
    font-weight: 800;
}
.mp-modal .mp-form label{
    font-weight: 700;
    color: var(--mp-navy);
}
.mp-modal input[type="email"],
.mp-modal input[type="tel"]{
    border: 2px solid rgba(11,42,89,.15);
    border-radius: 10px;
    padding: 10px 12px;
    width: 100%;
    font-size: 16px;
}
.mp-modal .mp-send{
    background: var(--mp-red);
    color: var(--mp-white);
    border: none;
    border-radius: 14px;
    padding: 12px 24px;
    font-weight: 800;
    width: 100%;
    outline: 4px solid rgba(255,255,255,.9);
    box-shadow: 0 8px 0 rgba(0,0,0,.1);
}
.mp-modal .mp-send:hover{ background: var(--mp-red-hover); }
.mp-modal .mp-msg{ min-height:16px; }

/* Stato chiuso */
.mp-widget .mp-closed{
    font-weight:800;
    color:#ee0404;
}

/* aiutino per temi aggressivi: alza specificità senza !important eccessivi */
body .mp-widget .mp-open{ font-family: inherit; }

/* Struttura base */
.mp-widget{ text-align:center; }
.mp-teams{ margin-bottom:10px; font-weight:700; }

/* Contenitore score: colonne, bottone sotto */
.mp-score{
    display:flex;
    flex-direction:column;   /* <-- bottone a capo */
    align-items:center;
    gap:18px;
}

/* Riga selettori */
.mp-sel{
    display:flex;
    align-items:center;
    gap:12px;
}
.mp-sep{ font-weight:800; }

/* Bottone (usa il tuo stile rosso) */
.mp-actions .mp-open{
    /* se hai già regole per .mp-open lasciale pure;
       questa riga garantisce che stia da solo */
    display:inline-block;
}

/* Modal base (senza inline) */
.mp-modal{
    display:none;             /* chiusa di default, il JS la porta a flex */
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:9999;
    align-items:center;
    justify-content:center;
}
.mp-dialog{
    background:#fff;
    max-width:480px;
    width:92%;
    border-radius:12px;
    padding:18px;
    position:relative;
}
.mp-close{
    position:absolute;
    right:10px; top:10px;
    border:none;
    background:transparent;
    font-size:18px;
    cursor:pointer;
}

.mp-form label{ display:block; margin:8px 0 4px; }
.mp-required{ color:#d00; }
.mp-privacy-row{
    display:flex; gap:8px; align-items:flex-start;
    font-size:13px; margin:6px 0 12px;
}
.mp-msg{ margin-top:10px; font-size:13px; min-height:16px; }

.mp-sel {
    display: flex;
    justify-content: center;       /* Centra orizzontalmente l'intero gruppo */
    align-items: center;           /* Allinea verticalmente al centro */
    gap: 12px;                      /* Spazio uniforme tra i 3 elementi */
    flex-wrap: nowrap;             /* Impedisce che vadano a capo */
}

/* Opzionale: rendi i select della stessa larghezza */
.mp-sel select {
    width: auto;                   /* o "auto", o "min-width: 70px" */
    text-align: center;            /* allinea i numeri al centro DENTRO il select */
}

/* Stile per il trattino */
.mp-sep {
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1;
}

@media (max-width: 767px) {
    .mp-widget .mp-score select{
        padding-right: 12px;
        text-align: right !important;
    }
}

@media (max-width: 768px) {
    .mp-sel select {
        width: 130px;
        padding: 8px;
        font-size: 16px; /* evita lo zoom su iOS */
    }
}