/* Global styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  box-sizing: border-box;
  outline: none;
}

:root {
  --primary-color: #00de93;
  --secondary-color: #00de93;
  --tertiary-color: #00de93;
  --bg-color: #13151b;
  --support-color: #00de93;
}

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

body {
  display: flex;
  padding-top: 6rem; /* Adjusted for header height */
  flex-direction: column;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: #1a1a1a; /* Solid dark background */
  color: white; /* Default text color for the body */
}

.shadow-rox {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

/* Notiflix styles */
.notiflix-notify-success {
  background-color: var(--secondary-color) !important;
  color: white !important;
}

.notiflix-notify-info {
  background-color: var(--tertiary-color) !important;
  color: white !important;
}

.notiflix-notify-failure {
  background-color: #c0392b !important;
  color: white !important;
}

.notiflix-notify {
  top: 83px !important;
  z-index: 9999 !important;
  position: fixed !important;
  max-width: 90vw !important;
  width: 300px !important;
  right: 16px !important;
  left: auto !important;
  border-radius: 8px !important;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

#NotiflixNotifyWrap .notiflix-notify {
  background-clip: padding-box !important;
}

/* Estilos específicos para inputs do modal de depósito */
.deposit-input,
input.deposit-input,
input[class*="deposit-input"],
input[type="text"].deposit-input,
input[type="text"][class*="deposit-input"],
#depositModal .deposit-input,
#depositModal input[class*="deposit-input"],
#depositModal input[type="text"],
.deposit-modal-content .deposit-input,
.deposit-modal-content input[class*="deposit-input"],
.deposit-modal-content input[type="text"] {
  background-color: #1a1a1a !important;
  background-image: none !important;
  background: #1a1a1a !important;
  background: linear-gradient(145deg, #1a1a1a, #1a1a1a) !important;
  border: 2px solid #333 !important;
  color: white !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) !important;
}

.deposit-input:focus,
input.deposit-input:focus,
input[class*="deposit-input"]:focus,
input[type="text"].deposit-input:focus,
input[type="text"][class*="deposit-input"]:focus,
#depositModal .deposit-input:focus,
#depositModal input[class*="deposit-input"]:focus,
#depositModal input[type="text"]:focus,
.deposit-modal-content .deposit-input:focus,
.deposit-modal-content input[class*="deposit-input"]:focus,
.deposit-modal-content input[type="text"]:focus {
  background-color: #1a1a1a !important;
  background-image: none !important;
  background: #1a1a1a !important;
  background: linear-gradient(145deg, #1a1a1a, #1a1a1a) !important;
  border-color: #34D399 !important;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1), inset 0 2px 4px rgba(0,0,0,0.1) !important;
  transform: translateY(-1px) !important;
  color: white !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.deposit-input:hover,
input.deposit-input:hover,
input[class*="deposit-input"]:hover,
input[type="text"].deposit-input:hover,
input[type="text"][class*="deposit-input"]:hover,
#depositModal .deposit-input:hover,
#depositModal input[class*="deposit-input"]:hover,
#depositModal input[type="text"]:hover,
.deposit-modal-content .deposit-input:hover,
.deposit-modal-content input[class*="deposit-input"]:hover,
.deposit-modal-content input[type="text"]:hover {
  background-color: #1a1a1a !important;
  background-image: none !important;
  background: #1a1a1a !important;
  background: linear-gradient(145deg, #1a1a1a, #1a1a1a) !important;
  border-color: #444 !important;
  color: white !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) !important;
}

.deposit-input::placeholder {
  color: #666 !important;
}

/* Regra adicional para garantir fundo sólido - sobrescreve qualquer estilo do Tailwind */
#depositModal input,
.deposit-modal-content input,
input[class*="deposit-input"],
input[type="text"][class*="deposit-input"] {
  background: #1a1a1a !important;
  background-color: #1a1a1a !important;
  background-image: none !important;
  border: 2px solid #333 !important;
  color: white !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Garantir fundo sólido para o modal de depósito */
#depositModal,
.deposit-modal-container,
.deposit-modal-content {
  background: #1a1a1a !important;
  background-color: #1a1a1a !important;
  background-image: none !important;
  backdrop-filter: blur(10px) !important;
}

#depositModal {
  z-index: 50 !important;
}

.deposit-modal-container {
  z-index: 60 !important;
}

/* Backdrop mais claro para manter o site visível */
#backdrop2 {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(15px) !important;
  pointer-events: auto !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 30 !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Forçar exibição quando não estiver hidden */
#backdrop2:not(.hidden) {
  display: block !important;
}

/* Sobrescrever qualquer display none do Tailwind */
#backdrop2.hidden {
  display: none !important;
}

/* Regra ultra específica para o botão PIX - apenas o botão de submit */
#generatePixButton {
  background: #00de93 !important;
  background-color: #00de93 !important;
  background-image: linear-gradient(135deg, #00de93, #00b37a) !important;
  color: black !important;
  border: none !important;
  font-weight: bold !important;
  opacity: 1 !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-shadow: 0 4px 12px rgba(0, 222, 147, 0.2) !important;
}

/* Estilo específico APENAS para o botão de gerar PIX */
#generatePixButton,
#depositForm button[type="submit"] {
  background: linear-gradient(135deg, #00de93, #00b37a) !important;
  background-color: #00de93 !important;
  background-image: linear-gradient(135deg, #00de93, #00b37a) !important;
  color: black !important;
  border: none !important;
  font-weight: bold !important;
  transition: all 0.3s ease !important;
  opacity: 1 !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

#generatePixButton:hover {
  background: linear-gradient(135deg, #00b37a, #00995a) !important;
  background-color: #00b37a !important;
  background-image: linear-gradient(135deg, #00b37a, #00995a) !important;
  transform: scale(1.02) !important;
  box-shadow: 0 4px 12px rgba(0, 222, 147, 0.3) !important;
  opacity: 1 !important;
}