/* ===== Bolão Copa do Mundo ===== */
.bolao-copa {
    --bolao-green: #00875a;
    --bolao-green-dark: #006644;
    --bolao-gold: #f5b300;
    --bolao-bg: #ffffff;
    --bolao-line: #e6e8eb;
    --bolao-text: #1a1f24;
    --bolao-muted: #6b7480;
    --bolao-font-title: 'roc-grotesk', 'roc-grotesk-wide', -apple-system, BlinkMacSystemFont, sans-serif;
    --bolao-font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    max-width: 720px;
    margin: 0 auto;
    padding: 8px 4px;
    font-family: var(--bolao-font-body);
    color: var(--bolao-text);
}
/* Títulos com Roc */
.bolao-copa h2,
.bolao-copa h3,
.bolao-copa h4,
.bolao-auth-head h2,
.bolao-rules h3,
.bolao-rules h4 {
    font-family: var(--bolao-font-title) !important;
}
/* Corpo, inputs e botões com Satoshi */
.bolao-copa input,
.bolao-copa button,
.bolao-copa select,
.bolao-copa p,
.bolao-copa span,
.bolao-copa td,
.bolao-copa li,
.bolao-copa label {
    font-family: var(--bolao-font-body);
}

/* Abas */
.bolao-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--bolao-line);
}
.bolao-tab {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--bolao-muted) !important;
    cursor: pointer;
    margin-bottom: -2px;
    transition: all .15s ease;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.bolao-tab:hover,
.bolao-tab:focus {
    background: none !important;
    background-color: transparent !important;
    color: var(--bolao-green-dark) !important;
    box-shadow: none !important;
}
.bolao-tab.active {
    color: var(--bolao-green) !important;
    background: none !important;
    background-color: transparent !important;
    border-bottom: 3px solid var(--bolao-green) !important;
    box-shadow: none !important;
}

/* Campos de lead */
.bolao-lead-fields { margin-bottom: 24px; }
.bolao-lead-fields h3,
#bolao-panel-palpites > form > h3,
#bolao-panel-ranking h3 {
    font-size: 16px;
    margin: 0 0 12px;
    color: var(--bolao-green-dark);
}
.bolao-lead-fields input[type=text],
.bolao-lead-fields input[type=email],
.bolao-lead-fields input[type=tel] {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--bolao-line);
    border-radius: 10px;
    font-size: 15px;
}
.bolao-lead-fields input:focus {
    outline: none;
    border-color: var(--bolao-green);
    box-shadow: 0 0 0 3px rgba(0,135,90,.12);
}
.bolao-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--bolao-muted);
    margin-top: 4px;
}
.bolao-consent input { margin-top: 2px; }

/* Cartões de jogo */
.bolao-matches { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.bolao-match {
    border: 1px solid var(--bolao-line);
    border-radius: 14px;
    padding: 14px 16px;
    background: var(--bolao-bg);
    transition: border-color .15s ease;
}
.bolao-match:hover { border-color: #cfd4da; }
.bolao-match.locked { background: #f7f8f9; opacity: .85; }

.bolao-match-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--bolao-muted);
    margin-bottom: 10px;
}
.bolao-stage {
    background: rgba(0,135,90,.1);
    color: var(--bolao-green-dark);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
}

.bolao-match-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}
.bolao-team {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
}
.bolao-team.home { justify-content: flex-end; text-align: right; }
.bolao-team.away { justify-content: flex-start; text-align: left; }
.bolao-team img { width: 26px; height: 26px; object-fit: contain; }

.bolao-score-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto !important;
    position: relative;
    z-index: 2;
}
.bolao-score-field,
.bolao-copa input.bolao-score-field {
    width: 52px !important;
    height: 52px !important;
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    border: 2px solid var(--bolao-line) !important;
    border-radius: 12px !important;
    /* Blindagem contra Elementor/temas */
    pointer-events: auto !important;
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
    background: #fff !important;
    color: var(--bolao-text) !important;
    -webkit-text-fill-color: var(--bolao-text) !important;
    opacity: 1 !important;
    cursor: text !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    touch-action: manipulation !important;
    transform: none !important;
    max-width: none !important;
    min-width: 0 !important;
    line-height: normal !important;
}
.bolao-score-field::placeholder { color: #c4cad0 !important; opacity: 1 !important; }
.bolao-score-field:focus {
    outline: none !important;
    border-color: var(--bolao-gold) !important;
    box-shadow: 0 0 0 3px rgba(245,179,0,.2) !important;
}
.bolao-score-field:disabled {
    background: #eceef0 !important;
    color: var(--bolao-muted) !important;
    -webkit-text-fill-color: var(--bolao-muted) !important;
    cursor: not-allowed !important;
}
.bolao-score-inputs span,
.bolao-score-inputs .bolao-x { color: var(--bolao-muted); font-weight: 700; font-size: 16px; }

.bolao-result {
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--bolao-green-dark);
}
.bolao-locked-msg {
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
    color: var(--bolao-muted);
}

/* Botão */
.bolao-submit {
    width: 100%;
    padding: 14px;
    background: var(--bolao-green);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}
.bolao-submit:hover { background: var(--bolao-green-dark); }
.bolao-submit:disabled { opacity: .6; cursor: default; }

/* Mensagens */
.bolao-message {
    margin-top: 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}
.bolao-message.success { color: var(--bolao-green); }
.bolao-message.error { color: #d32f2f; }
.bolao-empty { color: var(--bolao-muted); text-align: center; padding: 20px; }

/* Ranking */

/* Responsivo */
@media ( max-width: 480px ) {
    .bolao-team { font-size: 12px; }
    .bolao-team img { width: 20px; height: 20px; }
    .bolao-score-inputs input { width: 40px; height: 40px; font-size: 16px; }
}

/* ===== Tela de entrada (auth) ===== */
.bolao-loading { text-align: center; padding: 40px 20px; color: var(--bolao-muted); }
.bolao-auth { max-width: 420px; margin: 0 auto; }
.bolao-auth-head { text-align: center; margin-bottom: 16px; }
.bolao-auth-head h2 { margin: 0 0 6px; color: var(--bolao-green-dark); font-size: 24px; }
.bolao-auth-head p { margin: 0; color: var(--bolao-muted); }
.bolao-auth-stats { text-align: center; margin-bottom: 18px; min-height: 22px; }
.bolao-auth form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.bolao-auth input[type=text],
.bolao-auth input[type=email],
.bolao-auth input[type=tel],
.bolao-auth input[type=password] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--bolao-line);
    border-radius: 10px;
    font-size: 15px;
}
.bolao-auth input:focus {
    outline: none; border-color: var(--bolao-green);
    box-shadow: 0 0 0 3px rgba(0,135,90,.12);
}

/* ===== Topbar (logado) ===== */
.bolao-topbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.bolao-hello { font-size: 15px; color: var(--bolao-text); }
.bolao-logout {
    background: none; border: 1px solid var(--bolao-line);
    color: var(--bolao-muted); padding: 6px 14px;
    border-radius: 8px; cursor: pointer; font-size: 13px;
}
.bolao-logout:hover { border-color: #cfd4da; color: var(--bolao-text); }

/* ===== Estados ao vivo / final ===== */
.bolao-live { color: #d32f2f; font-weight: 700; font-size: 11px; }
.bolao-final { color: var(--bolao-muted); font-weight: 600; font-size: 11px; }
.bolao-result.live { color: #d32f2f; }

/* ===== Link secundário e ajuda (auth) ===== */
.bolao-link {
    background: none; border: none; color: var(--bolao-green);
    font-size: 13px; cursor: pointer; padding: 4px; text-decoration: underline;
}
.bolao-link:hover { color: var(--bolao-green-dark); }
.bolao-help { font-size: 13px; color: var(--bolao-muted); margin: 0 0 4px; }

/* Campo de placar limpo para digitação (esconde spinners do number) */
.bolao-score-field::-webkit-outer-spin-button,
.bolao-score-field::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* ===== Editar nome ===== */
.bolao-edit-name {
    background: none; border: none; cursor: pointer;
    color: var(--bolao-muted); font-size: 14px; padding: 2px 4px;
    border-radius: 4px;
}
.bolao-edit-name:hover { color: var(--bolao-green); background: rgba(0,135,90,.08); }

/* ===== Aba de regras ===== */
.bolao-rules { line-height: 1.6; }
.bolao-rules h3 { color: var(--bolao-green-dark); margin: 0 0 12px; font-size: 20px; }
.bolao-rules h4 { color: var(--bolao-green-dark); margin: 18px 0 6px; font-size: 15px; }
.bolao-rules p { margin: 0 0 8px; color: var(--bolao-text); }
.bolao-rules-pts { list-style: none; margin: 0; padding: 0; }
.bolao-rules-pts li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; border: 1px solid var(--bolao-line); border-radius: 8px; margin-bottom: 6px;
}
.bolao-rules-pts li strong { color: var(--bolao-green-dark); }

/* ===== Ranking expansível ===== */
.bolao-bets-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bolao-bets-table td { padding: 6px 8px; border-bottom: 1px solid #f0f2f4; }
.bolao-bets-table td:first-child { color: var(--bolao-muted); }
.bolao-bets-table td.locked { color: #b0b6bc; font-style: italic; }
.bolao-bets-table .res { color: var(--bolao-muted); font-weight: 400; }
.bolao-bets-table .pts { color: var(--bolao-green); font-weight: 700; }
.bolao-empty-sm { color: var(--bolao-muted); font-size: 13px; padding: 8px; }

/* ===== Ranking (display:table — imune a interferência de page builder) ===== */
.bolao-ranking { margin: 0 !important; padding: 0 !important; }
.bolao-rank-hint { font-size: 13px; color: var(--bolao-muted); margin: 0 0 16px; }
.bolao-rank-item {
    display: block !important;
    border-bottom: 1px solid var(--bolao-line);
    list-style: none !important;
    margin: 0 0 4px !important;
}
.bolao-rank-item:nth-child(1) .bolao-rank-row { background: rgba(245,179,0,.08) !important; border-radius: 10px; }
.bolao-rank-item.is-me .bolao-rank-row { background: rgba(0,135,90,.08) !important; border-radius: 10px; }
.bolao-rank-row {
    display: table !important;
    table-layout: fixed !important;
    width: 100% !important;
    padding: 14px 16px !important;
    cursor: pointer;
    box-sizing: border-box !important;
    margin: 0 !important;
    border-collapse: collapse !important;
    background: transparent !important;
    transition: background .15s ease;
}
/* Hover neutro (cinza claro), nunca o rosa do Elementor */
.bolao-rank-row:hover {
    background: #f4f6f7 !important;
    border-radius: 10px;
    color: inherit !important;
}
.bolao-rc {
    display: table-cell !important;
    vertical-align: middle !important;
    padding: 0 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    position: static !important;
    color: inherit !important;
}
.bolao-rc-pos {
    width: 42px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-align: center !important;
    white-space: nowrap !important;
}
.bolao-rc-nm {
    width: auto !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
}
.bolao-rc-nm em { color: var(--bolao-green); font-style: normal; font-weight: 700; }
.bolao-rc-pt {
    width: 72px !important;
    font-weight: 700 !important;
    color: var(--bolao-green-dark) !important;
    white-space: nowrap !important;
    text-align: right !important;
}
.bolao-rc-caret {
    width: 24px !important;
    color: var(--bolao-muted) !important;
    text-align: center !important;
    transition: transform .15s ease;
}
.bolao-rank-item.open .bolao-rc-caret { transform: rotate(180deg); }
.bolao-rank-bets { padding: 4px 14px 14px; }
.bolao-bets-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bolao-bets-table td { padding: 6px 8px; border-bottom: 1px solid #f0f2f4; }
.bolao-bets-table td:first-child { color: var(--bolao-muted); }
.bolao-bets-table td.locked { color: #b0b6bc; font-style: italic; }
.bolao-bets-table .res { color: var(--bolao-muted); font-weight: 400; }
.bolao-bets-table .pts { color: var(--bolao-green); font-weight: 700; }
.bolao-empty-sm { color: var(--bolao-muted); font-size: 13px; padding: 8px; }

/* ===== Badge de participantes — fundo verde Benassi, texto branco ===== */
.bolao-badge {
    display: inline-block;
    background: var(--bolao-green) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 20px;
}

/* ===== Botões de grupo (ver anteriores / ver mais) ===== */
.bolao-toggle-group {
    display: block !important;
    width: 100% !important;
    background: #f4f6f7 !important;
    border: 1px solid var(--bolao-line) !important;
    color: var(--bolao-green-dark) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 12px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    margin: 0 0 12px !important;
    box-shadow: none !important;
    transition: background .15s ease;
}
.bolao-toggle-group:hover { background: #e9edef !important; }
.bolao-toggle-group.open { background: var(--bolao-green) !important; color: #fff !important; }

/* Separador "você está aqui" no ranking */
.bolao-rank-sep {
    text-align: center;
    color: var(--bolao-muted);
    font-size: 16px;
    letter-spacing: 4px;
    padding: 8px 0;
}

/* ===== Modal de edição de perfil ===== */
.bolao-modal-overlay {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important;
    padding: 20px;
}
.bolao-modal {
    background: #fff !important;
    border-radius: 14px !important;
    padding: 24px !important;
    max-width: 380px !important;
    width: 100% !important;
    box-shadow: 0 10px 40px rgba(0,0,0,.2) !important;
    font-family: var(--bolao-font-body);
}
.bolao-modal h3 { margin: 0 0 16px !important; color: var(--bolao-green-dark) !important; font-family: var(--bolao-font-title) !important; }
.bolao-modal-lbl { display: block; font-size: 13px; color: var(--bolao-muted); margin-bottom: 4px; }
.bolao-modal input[type="text"] {
    width: 100% !important; box-sizing: border-box !important;
    padding: 11px 14px !important; border: 1px solid var(--bolao-line) !important;
    border-radius: 10px !important; font-size: 15px !important; margin-bottom: 14px !important;
}
.bolao-modal-check {
    display: flex !important; align-items: center !important; gap: 8px !important;
    font-size: 14px !important; color: var(--bolao-text) !important; cursor: pointer;
    padding: 10px; background: rgba(0,135,90,.06); border-radius: 8px; margin-bottom: 18px;
}
.bolao-modal-check input { width: auto !important; margin: 0 !important; }
.bolao-modal-actions { display: flex !important; gap: 10px !important; justify-content: flex-end !important; }
.bolao-modal-cancel, .bolao-modal-save {
    padding: 10px 18px !important; border-radius: 8px !important; font-weight: 600 !important;
    cursor: pointer !important; border: none !important; font-size: 14px !important;
}
.bolao-modal-cancel { background: #eceef0 !important; color: var(--bolao-text) !important; }
.bolao-modal-save { background: var(--bolao-green) !important; color: #fff !important; }

/* Disclaimer do ranking Benassi */
.bolao-benassi-note {
    background: rgba(0,135,90,.08);
    border-left: 3px solid var(--bolao-green);
    color: var(--bolao-green-dark);
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 8px;
    margin: 0 0 14px;
    line-height: 1.5;
}