/* ===== MODAL DE VERIFICAÇÃO INSTAGRAM ===== */

.igmodal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.8) !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5000 !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  font-family: "Inter", Arial, sans-serif !important;
}

.igmodal-overlay.show {
  display: flex !important;
}

.igmodal-content {
  background: #0a0a0f !important;
  border: 2px solid #5e17eb !important;
  border-radius: 20px !important;
  max-width: 500px !important;
  width: 100% !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  padding: 30px !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.igmodal-close {
  position: absolute !important;
  top: 15px !important;
  right: 20px !important;
  background: none !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 24px !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
}

.igmodal-close:hover {
  color: #5e17eb !important;
}

/* Header do modal */
.igmodal-header {
  text-align: center !important;
  margin-bottom: 25px !important;
}

.igmodal-header h3 {
  font-size: 24px !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #5e17eb, #ff0080) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin: 0 0 10px 0 !important;
}

.igmodal-header p {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 !important;
}

/* Campo de busca */
.igmodal-search {
  margin-bottom: 25px !important;
}

#igUserInput {
  width: 100% !important;
  padding: 12px 15px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 10px !important;
  color: white !important;
  font-size: 14px !important;
  margin-bottom: 15px !important;
  box-sizing: border-box !important;
  outline: none !important;
}

#igUserInput:focus {
  border-color: #5e17eb !important;
}

#igUserInput::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

.igmodal-search-btn {
  width: 100% !important;
  padding: 12px 20px !important;
  background: linear-gradient(135deg, #5e17eb, #ff0080) !important;
  color: white !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  box-sizing: border-box !important;
}

.igmodal-search-btn:hover {
  opacity: 0.9 !important;
}

/* Loading e erro */
.igmodal-loading {
  text-align: center !important;
  margin-top: 15px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 14px !important;
}

.igmodal-error {
  color: #ff4444 !important;
  font-size: 14px !important;
  margin-top: 15px !important;
  text-align: center !important;
  background: rgba(255, 68, 68, 0.1) !important;
  border: 1px solid rgba(255, 68, 68, 0.3) !important;
  border-radius: 8px !important;
  padding: 12px !important;
}

/* Perfil encontrado */
.igmodal-profile {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  margin-bottom: 20px !important;
  padding: 20px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 15px !important;
}

.igmodal-image {
  width: 80px !important;
  height: 80px !important;
  flex-shrink: 0 !important;
}

.igmodal-placeholder {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #5e17eb, #ff0080) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  color: white !important;
  font-weight: bold !important;
}

.igmodal-profile img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  border: 2px solid #5e17eb !important;
  object-fit: cover !important;
}

/* Informações do perfil */
.igmodal-info {
  flex-grow: 1 !important;
}

.igmodal-username {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: white !important;
  margin-bottom: 5px !important;
}

.igmodal-bio {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin-bottom: 10px !important;
  line-height: 1.3 !important;
}

.igmodal-stats {
  display: flex !important;
  gap: 15px !important;
}

.igmodal-stat {
  text-align: center !important;
}

.igmodal-stat span:first-child {
  display: block !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #5e17eb !important;
}

.igmodal-stat span:last-child {
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  text-transform: uppercase !important;
}

/* Aviso de perfil privado */
.igmodal-private {
  background: rgba(255, 193, 7, 0.1) !important;
  border: 1px solid rgba(255, 193, 7, 0.3) !important;
  border-radius: 10px !important;
  padding: 15px !important;
  margin-bottom: 20px !important;
  text-align: center !important;
  color: #ffc107 !important;
  font-size: 14px !important;
}

/* Botões de ação */
.igmodal-actions {
  display: flex !important;
  gap: 15px !important;
}

.igmodal-cancel,
.igmodal-confirm {
  flex: 1 !important;
  padding: 12px 20px !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  box-sizing: border-box !important;
}

.igmodal-cancel {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.igmodal-cancel:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.igmodal-confirm {
  background: linear-gradient(135deg, #5e17eb, #ff0080) !important;
  color: white !important;
}

.igmodal-confirm:hover {
  opacity: 0.9 !important;
}

.igmodal-confirm:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ===== RESPONSIVIDADE DO MODAL ===== */

@media (max-width: 768px) {
  .igmodal-content {
    padding: 20px !important;
    margin: 10px !important;
  }

  .igmodal-profile {
    flex-direction: column !important;
    text-align: center !important;
  }

  .igmodal-stats {
    justify-content: center !important;
  }

  .igmodal-actions {
    flex-direction: column !important;
  }
}

/* ===== SPINNER - ADICIONAR DEPOIS DA MEDIA QUERY ===== */

/* Loading melhorado com spinner */
.igmodal-loading {
  text-align: center !important;
  margin-top: 20px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 14px !important;
}

/* Spinner roxo animado */
.igmodal-spinner {
  width: 50px !important;
  height: 50px !important;
  border: 3px solid rgba(255, 255, 255, 0.1) !important;
  border-top-color: #5e17eb !important;
  border-radius: 50% !important;
  margin: 0 auto 15px !important;
  animation: igSpin 1s linear infinite !important;
}

/* Animação de rotação */
@keyframes igSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Texto do loading */
.igmodal-loading-text {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 14px !important;
  margin-top: 10px !important;
}