/* ============================================================
   SPORTS BETS · CSS FILHO
   ------------------------------------------------------------
   Este arquivo orienta somente a tela sportsbets.php.
   O app.css continua sendo o pai do design system:
   cores globais, cards, badges, botões, modal e bottom-nav.
   Aqui ficam apenas estrutura, ajustes locais e saneamento visual.
   ============================================================ */


/* ------------------------------------------------------------
   1) ESTRUTURA DA TELA
   ------------------------------------------------------------ */
.za-bets-container{
  padding-top:16px;
}

.za-bets-shell{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-bottom:calc(94px + env(safe-area-inset-bottom));
  min-width:0;
}

.za-bets-mini-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin:2px 0 0;
  padding:2px 2px 0;
}

.za-bets-mini-head__icon{
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  font-size:18px;
  line-height:1;
}

.za-bets-mini-head__label{
  font-size:17px;
  line-height:1.15;
  font-weight:780;
  letter-spacing:-.01em;
  color:var(--za-text);
}

.za-list-premium{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  min-width:0;
}

.za-history-list{
  gap:12px;
}

.za-history-card{
  gap:12px;
}


/* ------------------------------------------------------------
   2) LIMPEZA LOCAL DOS CARDS DE BETS
   ------------------------------------------------------------
   Mantém o card universal do app.css, mas remove elementos que
   não devem aparecer nesta composição específica.
   ------------------------------------------------------------ */
.za-tip-card__status,
.za-tip-type,
.za-tip-card__title,
.za-tip-card__narrative-sub{
  display:none !important;
}


/* ------------------------------------------------------------
   3) SELETOR DE CAMPEONATO · BETS
   ------------------------------------------------------------
   O componente visual do seletor agora é global e fica no app.css:
   .za-filter-select / .za-filter-select-toggle / .za-filter-select-menu.
   Aqui mantemos apenas o encaixe local da tela de Bets.
   ------------------------------------------------------------ */
.za-bets-filter-select{
  width:100%;
  margin:0;
}


/* ------------------------------------------------------------
   4) BADGES DOS TIMES · BET CARDS
   ------------------------------------------------------------
   Corrige o miolo visual do confronto:
   antes:  []x[]
   agora:  []  x  []
   Também alinha os nomes exatamente abaixo de cada badge.
   ------------------------------------------------------------ */
.za-tip-card__teams{
  display:flex;
  justify-content:center;
  min-width:0;
}

.za-tip-card__teams .za-team-badges{
  display:grid;
  grid-template-columns:72px 34px 72px;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:max-content;
  max-width:100%;
  margin:0 auto;
}

.za-tip-card__teams .za-team-badge--lg{
  width:72px;
  height:72px;
  min-width:72px;
}

.za-tip-card__teams .za-team-badges__vs{
  display:grid;
  place-items:center;
  width:34px;
  min-width:34px;
  color:var(--za-muted);
  font-size:16px;
  line-height:1;
  font-weight:900;
  text-align:center;
  text-transform:lowercase;
}

.za-tip-card__team-names{
  display:grid;
  grid-template-columns:72px 34px 72px;
  justify-content:center;
  align-items:start;
  gap:14px;
  margin-top:-4px;
}

.za-tip-card__team-names .za-team-name{
  width:72px;
  max-width:72px;
  min-width:0;
  text-align:center;
  justify-self:center;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.za-tip-card__team-names .za-team-name:first-child{
  grid-column:1;
}

.za-tip-card__team-names .za-team-name:last-child{
  grid-column:3;
}


/* ------------------------------------------------------------
   5) AJUSTES DE LEITURA DO CARD
   ------------------------------------------------------------ */
.za-tip-card__narrative-line{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

.za-tip-card__confidence{
  min-width:0;
}

.za-tip-card__confidence-line{
  min-width:0;
  flex-wrap:wrap;
}

.za-tip-card__confidence-label{
  white-space:normal;
}

.za-confidence-inline{
  flex:0 0 auto;
}


/* ------------------------------------------------------------
   6) RESPONSIVIDADE
   ------------------------------------------------------------ */
@media (max-width:420px){
  .za-bets-container{
    padding-top:14px;
  }

  .za-bets-shell{
    gap:13px;
  }

  .za-tip-card__teams .za-team-badges{
    grid-template-columns:58px 32px 58px;
    gap:16px;
  }

  .za-tip-card__teams .za-team-badge--lg{
    width:58px;
    height:58px;
    min-width:58px;
  }

  .za-tip-card__teams .za-team-badges__vs{
    width:32px;
    min-width:32px;
    font-size:15px;
  }

  .za-tip-card__team-names{
    grid-template-columns:58px 32px 58px;
    gap:16px;
  }

  .za-tip-card__team-names .za-team-name{
    width:58px;
    max-width:58px;
  }
}

/* ------------------------------------------------------------
   FILTRO DE CAMPEONATO · PADRÃO ARENA NO BETS
   ------------------------------------------------------------
   Faixa horizontal rolável com links GET.
   Visual global vem do app.css:
   .za-filter-scroll / .za-filter-chip.
   ------------------------------------------------------------ */
.za-bets-filter-scroll{
  margin:0;
  padding-top:0;
}

.za-bets-filter-scroll .za-filter-chip:first-child{
  max-width:none;
}

/* ------------------------------------------------------------
   BACKLOG FINAL SPORTS BETS · HIERARQUIA, FILTROS E CARD
   ------------------------------------------------------------ */
.za-bets-controls{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin:0;
  min-width:0;
}

.za-bets-controls__group{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  padding:1px 2px 5px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.za-bets-controls__group::-webkit-scrollbar{ display:none; }

.za-bets-section{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  min-width:0;
}

.za-bets-section__title{
  padding:2px 2px 0;
  color:var(--za-text);
  font-size:14px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-.01em;
}

.za-bets-section__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  min-width:0;
}

.za-main-feed{
  gap:18px;
}

.za-tip-card{
  gap:12px;
}

.za-tip-card.is-combo{
  gap:10px;
  padding:15px;
  border-color:rgba(56,189,248,.14);
  box-shadow:0 12px 24px rgba(0,0,0,.18);
}

.za-tip-card.is-combo .za-tip-card__teams .za-team-badge--lg{
  width:58px;
  height:58px;
  min-width:58px;
}

.za-tip-card.is-combo .za-tip-card__teams .za-team-badges,
.za-tip-card.is-combo .za-tip-card__team-names{
  grid-template-columns:58px 30px 58px;
  gap:12px;
}

.za-tip-card.is-combo .za-team-name{
  width:58px;
  max-width:58px;
}

.za-tip-card.is-zebra{
  border-color:rgba(250,204,21,.20);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.026));
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}

.za-tip-card.is-zebra::after{
  opacity:.46;
}

.za-tip-card.is-zebra .za-confidence-inline{
  color:var(--za-muted);
}

.za-tip-card__label-row{
  margin-bottom:0;
}

.za-tip-card__analysis-head{
  display:none;
}

.za-tip-card__reason{
  font-size:14px;
  line-height:1.38;
  color:var(--za-text-soft);
}

.za-tip-card__zebra-alert{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  min-height:28px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(250,204,21,.18);
  background:rgba(250,204,21,.08);
  color:#fde68a;
  font-size:12px;
  line-height:1.2;
  font-weight:800;
}

.za-tip-details{
  border:1px solid rgba(148,163,184,.12);
  border-radius:16px;
  background:rgba(255,255,255,.025);
  overflow:hidden;
}

.za-tip-details summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:36px;
  padding:0 12px;
  color:var(--za-text-soft);
  font-size:12px;
  font-weight:850;
  cursor:pointer;
  list-style:none;
}

.za-tip-details summary::-webkit-details-marker{ display:none; }
.za-tip-details summary::after{ content:'+'; color:var(--za-blue); font-size:16px; line-height:1; }
.za-tip-details[open] summary::after{ content:'–'; }

.za-tip-details .za-tip-table-wrap{
  margin:0;
  border-top:1px solid rgba(148,163,184,.10);
  border-radius:0;
  background:transparent;
}

.za-tip-card__confidence{
  align-items:flex-start;
}

.za-tip-card__arena{
  width:100%;
  min-height:42px;
  margin-top:2px;
}

.za-reading-badge.is-tip{
  border-color:rgba(251,191,36,.28);
  background:rgba(251,191,36,.12);
  color:#fde68a;
}

.za-tip-badge-combo{
  border-color:rgba(56,189,248,.16);
  background:rgba(56,189,248,.07);
  color:#bae6fd;
}

@media (max-width:420px){
  .za-bets-controls{
    gap:7px;
  }

  .za-bets-controls .za-filter-chip{
    min-height:38px;
    padding:0 12px;
  }

  .za-bets-section__grid{
    gap:11px;
  }
}

/* ------------------------------------------------------------
   BACKLOG FINAL · seletor de campeonato em sanfona
   ------------------------------------------------------------ */
.za-bets-league-picker{
  position:relative;
  margin:0;
  border:1px solid rgba(148,163,184,.14);
  border-radius:18px;
  background:rgba(255,255,255,.045);
  box-shadow:0 12px 24px rgba(0,0,0,.16);
  overflow:hidden;
}

.za-bets-league-picker summary{
  list-style:none;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:10px 14px;
  cursor:pointer;
}

.za-bets-league-picker summary::-webkit-details-marker{ display:none; }

.za-bets-league-picker__label{
  grid-column:1 / -1;
  color:var(--za-muted);
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.za-bets-league-picker summary strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--za-text);
  font-size:13px;
  line-height:1.15;
  font-weight:850;
}

.za-bets-league-picker__chevron{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(56,189,248,.18);
  background:rgba(56,189,248,.08);
  color:#bae6fd;
  transition:transform .16s ease;
}

.za-bets-league-picker[open] .za-bets-league-picker__chevron{
  transform:rotate(180deg);
}

.za-bets-league-picker__panel{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0 12px 12px;
}

.za-bets-league-picker__panel .za-filter-chip{
  flex:0 1 auto;
}

.za-bets-controls{
  display:flex;
  justify-content:flex-start;
  margin:0;
}

.za-bets-controls__group{
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
}

.za-bets-controls__group::-webkit-scrollbar{ display:none; }

.za-badge-pick-ze{
  border-color:rgba(255,255,255,.20) !important;
  background:rgba(255,255,255,.09) !important;
  color:#fff !important;
  box-shadow:none !important;
  font-weight:950;
  letter-spacing:.045em;
}

.za-tip-card.is-zebra{
  box-shadow:0 12px 26px rgba(0,0,0,.18);
}

/* ------------------------------------------------------------
   SPORTS BETS · FINALIZADOS, PERÍODO E LEGS APURADAS
   ------------------------------------------------------------ */
.za-bets-period-controls{
  padding-top:0;
}

.za-bets-period-controls .za-filter-chip{
  min-width:max-content;
}

.za-leg-result-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(148,163,184,.10);
  color:var(--za-text-soft);
  font-size:10px;
  line-height:1;
  font-weight:900;
  white-space:nowrap;
}

.za-leg-result-badge.is-win{
  border-color:rgba(34,197,94,.24);
  background:rgba(34,197,94,.12);
  color:#86efac;
}

.za-leg-result-badge.is-loss{
  border-color:rgba(239,68,68,.24);
  background:rgba(239,68,68,.12);
  color:#fca5a5;
}

.za-leg-result-badge.is-pending{
  border-color:rgba(250,204,21,.24);
  background:rgba(250,204,21,.12);
  color:#fde68a;
}

.za-leg-result-badge.is-void{
  border-color:rgba(148,163,184,.20);
  background:rgba(148,163,184,.10);
  color:#cbd5e1;
}

.za-tip-table th:last-child,
.za-tip-table td:last-child{
  text-align:right;
}