/* =================================
   VR PLANOS - GREEN COLOR REDUCTION
   ================================= */

/* Substituir gradientes verdes por azul VR Planos para elementos gerais */

/* Paginator hover - usar azul VR Planos */
.paginator a:hover {
  background: linear-gradient(135deg, var(--primary-color), #003aa8) !important;
  background-size: 200% !important;
}

/* Footer icons - usar azul VR Planos */
.main_footer_content article a:before {
  background-image: linear-gradient(
    135deg,
    var(--primary-color),
    #003aa8
  ) !important;
  background-size: 200% !important;
}

/* About page steps icons - usar azul VR Planos */
.about_page_steps article .icon {
  background: linear-gradient(135deg, var(--primary-color), #003aa8) !important;
  background-size: 200% !important;
}

/* Outras seções que estavam usando gradient-green - converter para azul */
.hero-section .btn-primary,
.cta-section,
.feature-highlight,
.advantage-item,
.process-step {
  background: linear-gradient(135deg, var(--primary-color), #003aa8) !important;
}

/* Manter verde APENAS para elementos específicos de valor/preço/sucesso */
.price-highlight,
.success-message,
.confirmation-badge,
.btn-success,
.alert-success,
.status-approved,
.value-emphasis {
  background: linear-gradient(135deg, var(--success-color), #1e7e34) !important;
  color: white !important;
}

/* Preços e valores - usar amarelo VR Planos para destaque */
.price-value,
.discount-badge,
.highlight-price,
.special-offer {
  background: linear-gradient(
    135deg,
    var(--secondary-highlight),
    #e49b00
  ) !important;
  color: #333 !important;
  font-weight: bold !important;
}

/* Botões primários - azul VR Planos */
.btn-primary {
  background: linear-gradient(135deg, var(--primary-color), #003aa8) !important;
  border-color: var(--primary-color) !important;
  color: white !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #003aa8, var(--primary-color)) !important;
  border-color: #003aa8 !important;
  transform: translateY(-2px) !important;
}

/* Botões secundários - amarelo VR Planos */
.btn-secondary,
.btn-outline-primary {
  /* background: linear-gradient(135deg, var(--secondary-highlight), #e49b00) !important; */
  background: var(--secondary-highlight) !important;
  border-color: var(--secondary-highlight) !important;
  color: #333 !important;
}

.btn-secondary:hover,
.btn-outline-primary:hover {
  background: var(--secondary-highlight) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* Cards e seções de destaque - azul suave */
.card-header,
.section-header,
.plan-header {
  background: linear-gradient(135deg, var(--primary-color), #2066e6) !important;
  color: white !important;
}

/* Links e elementos interativos - azul VR Planos */
a:hover,
.nav-link:hover,
.menu-item:hover {
  color: var(--primary-color) !important;
}

/* Bordas e acentos - usar amarelo VR Planos */
.border-accent,
.card-accent,
.highlight-border {
  border-color: var(--secondary-highlight) !important;
}

/* Ícones e elementos decorativos - azul VR Planos */
.icon-primary,
.feature-icon,
.service-icon {
  color: var(--primary-color) !important;
}

/* Badges e labels - usar cores apropriadas */
.badge-primary {
  background: var(--primary-color) !important;
}

.badge-secondary {
  background: var(--secondary-highlight) !important;
  color: #333 !important;
}

.badge-success {
  background: var(--success-color) !important;
}

/* Progress bars e indicadores - azul VR Planos */
.progress-bar,
.step-indicator.active {
  background: linear-gradient(135deg, var(--primary-color), #2066e6) !important;
}

/* Forms - elementos de destaque */
.form-control:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 82, 220, 0.25) !important;
}

/* Alertas informativos - azul */
.alert-info {
  background: rgba(0, 82, 220, 0.1) !important;
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
}

/* Alertas de advertência - amarelo */
.alert-warning {
  background: rgba(254, 174, 1, 0.1) !important;
  border-color: var(--secondary-highlight) !important;
  color: #b8860b !important;
}

/* Seções hero e CTA - gradiente azul VR Planos */
.hero-gradient,
.cta-gradient {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    #2066e6,
    var(--secondary-highlight)
  ) !important;
}

/* Elementos que devem manter tonalidades específicas */
.text-success {
  color: var(--success-color) !important;
}

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

.text-secondary {
  color: var(--secondary-highlight) !important;
}

/* Override específico para elementos que estavam usando muito verde */
[class*="gradient-green"],
.bg-success:not(.alert):not(.badge):not(.btn-success):not(.confirmation):not(
    .price-highlight
  ) {
  background: linear-gradient(135deg, var(--primary-color), #003aa8) !important;
}

/* Elementos de navegação */
.navbar-brand:hover,
.nav-pills .nav-link.active {
  background: var(--primary-color) !important;
  color: white !important;
}

/* Rodapé - manter neutro com acentos azuis */
.footer-link:hover {
  color: var(--secondary-highlight) !important;
}

/* Tabelas - cabeçalhos azuis */
.table thead th {
  background: var(--primary-color) !important;
  color: white !important;
}

/* Modais e popups */
.modal-header {
  background: linear-gradient(135deg, var(--primary-color), #2066e6) !important;
  color: white !important;
}

/* Elementos específicos das páginas VR Planos */
.plan-card:hover {
  border-color: var(--primary-color) !important;
  box-shadow: 0 5px 15px rgba(0, 82, 220, 0.3) !important;
}

.feature-list .check-icon {
  color: var(--success-color) !important;
}

.cta-button {
  background: linear-gradient(
    135deg,
    var(--secondary-highlight),
    #e49b00
  ) !important;
  color: #333 !important;
  font-weight: bold !important;
}

.cta-button:hover {
  background: linear-gradient(
    135deg,
    #e49b00,
    var(--secondary-highlight)
  ) !important;
  transform: scale(1.05) !important;
}