/* ========================================
   TEMAS DE CLUBE - VARIÁVEIS CSS
   ======================================== */

/* Tema Internacional */
body[data-club="internacional"] {
  --color-41: #DC143C; /* Vermelho Internacional */
  --color-43: #8B0000; /* Vermelho escuro */
  --color-45: #FF6347; /* Vermelho coral */
  --color-47: #FFFFFF;
  --color-48: #F5F5F5;
}

/* Tema Grêmio */
body[data-club="gremio"] {
  --color-41: #0D80BF; /* Azul Grêmio */
  --color-43: #0A5A8F;
  --color-45: #1c86d6;
  --color-47: #FFFFFF;
  --color-48: #F5F5F5;
}


/* ========================================
   COMPONENTES GERAIS
   ======================================== */

.club-modal-overlay {
  z-index: 70;
}

.club-modal-panel {
  position: relative;
  z-index: 71;
}


/* ========================================
   TEMAS ESPECÍFICOS - BOTÕES
   ======================================== */

.club-button-internacional {
  background-color: #dc2626;
  transition: background-color 0.3s ease;
}

.club-button-internacional:hover {
  background-color: #ef4444;
}

.club-button-gremio {
  background-color: #0D80BF;
  transition: background-color 0.3s ease;
}

.club-button-gremio:hover {
  background-color: #1c86d6;
}

/* ========================================
   TEXTO COM CORES DO CLUBE
   ======================================== */

.text-club-price {
  color: var(--color-41) !important;
}

.text-club-heading {
  color: var(--color-41) !important;
}

/* ========================================
   GRADIENTES DO CLUBE
   ======================================== */

.gradient-club-heading {
  background: linear-gradient(to right, var(--color-45), var(--color-47));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ========================================
   TEMAS ESPECÍFICOS - CARDS
   ======================================== */

body[data-club="internacional"] .card-item {
  border-color: #DC143C;
}

body[data-club="gremio"] .card-item {
  border-color: #0D80BF;
}

/* Adicione mais elementos específicos conforme necessário */

/* ========================================
   COMPONENTES - BORDERS COM VARIÁVEIS
   ======================================== */

.border-club-color {
  border-color: var(--color-45) !important;
}

.text-club-color {
  color: var(--color-41) !important;
}

.bg-club-color {
  background-color: var(--color-41) !important;
}

.bg-club-color:hover {
  background-color: var(--color-43) !important;
}