/* ========================================
   BetZap - Recompensas V3
   Identidade original verde-esmeralda
   ======================================== */

/* Container superior: Disponiveis / Finalizados */
.account-video .account-reward-status {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-height: 90px !important;
  margin: 0 !important;
  padding: 20px 23px !important;
  background: #031710 !important;
  border: 1px solid #164938 !important;
  border-bottom: none !important;
  border-radius: 20px 20px 0 0 !important;
  box-shadow: none !important;
}

/* Remover caixa extra dos botoes de estado */
.account-video .account-reward-status
.account-filter-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Botoes de estado */
.account-video .account-reward-status
[data-account-reward-state] {
  min-height: 41px !important;
  padding: 0 16px !important;
  border-radius: 11px !important;
  font-family: Montserrat, system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Filtros: mesmo card das abas superiores */
.account-video .account-reward-types {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 0 22px !important;
  padding: 17px 23px 21px !important;
  background: #031710 !important;
  border: 1px solid #164938 !important;
  border-top: 1px solid #103b2d !important;
  border-radius: 0 0 20px 20px !important;
  box-shadow: none !important;
}

/* Filtros individuais */
.account-video .account-reward-types
[data-account-reward-type] {
  min-height: 38px !important;
  padding: 0 15px !important;
  border-radius: 10px !important;
  font-family: Montserrat, system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Estado selecionado conforme o app.js */
.account-video .account-reward-status
button.active,
.account-video .account-reward-types
button.active {
  background: #064632 !important;
  color: #00e2a9 !important;
  border-color: #157454 !important;
}

.account-video .account-reward-status
button:focus-visible,
.account-video .account-reward-types
button:focus-visible {
  outline: 2px solid #00d7a1 !important;
  outline-offset: 3px !important;
}

/* Lista normal: manter os cards funcionais */
.account-video .account-rewards-list {
  min-height: 0;
  font-family: Montserrat, system-ui, sans-serif;
}

/* Estado vazio: identificado com seguranca pelo JS */
.account-video .btr-r3-empty {
  min-height: 205px !important;
  width: 100% !important;
  margin: 0 0 22px !important;
  padding: 32px 20px !important;
  border: 1px dashed #165a42 !important;
  border-radius: 19px !important;
  background: linear-gradient(
    180deg,
    #041e16 0%,
    #031811 100%
  ) !important;
  color: #a9d1c2 !important;
  font-family: Montserrat, system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}

/* Remove o icone de informacao duplicado
   somente dentro da mensagem vazia */
.account-video .btr-r3-empty svg,
.account-video .btr-r3-empty > i {
  display: none !important;
}

/* Um unico icone decorativo */
.account-video .btr-r3-empty::before {
  content: '🎁';
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  margin: 0 auto 3px;
  background: #092f22;
  border: 1px solid #1a654b;
  border-radius: 18px;
  font-size: 28px;
  line-height: 1;
}

/* Adaptacao para celular */
@media (max-width: 700px) {
  .account-video .account-reward-status {
    padding: 16px !important;
    min-height: 76px !important;
  }

  .account-video .account-reward-types {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding: 14px 16px 18px !important;
    scrollbar-width: thin;
    scrollbar-color: #16664e transparent;
    -webkit-overflow-scrolling: touch;
  }

  .account-video .account-reward-types button {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .account-video .btr-r3-empty {
    min-height: 175px !important;
    padding: 24px 15px !important;
  }
}