/* =================================
   VR PLANOS - CORES CORRIGIDAS
   ================================= */

/* Sobrescrever cores amarelas antigas para as cores da logo VR Planos */

/* Links e texto em amarelo */
.htmlchars a,
.auth_content a,
.not_found p a,
.faq_ask a {
    color: var(--secondary-highlight) !important;
}

/* Backgrounds amarelos */
.main_header_nav_links .login,
.home_featured_btn,
.home_optin_content_flex .icon,
.home_optin_content form button,
.footer_optout_btn,
.main_footer_content article a,
.about_page_cta_btn,
.home_video_content span:hover,
.terms_page_header,
.optin_page_btn {
    background-color: var(--secondary-highlight) !important;
    background: var(--secondary-highlight) !important;
}

/* Bordas amarelas */
.social_share,
.home_features_content article.active,
.home_features_content article:hover,
.blog_article:hover img,
.faq_ask,
.post_page_cover {
    border-color: var(--secondary-highlight) !important;
}

/* Destaque em amarelo */
.plan-badge.popular {
    background: var(--secondary-highlight) !important;
    color: var(--vrplanos-dark) !important;
}

/* Botões com gradiente amarelo para destaque */
.btn-warning {
    background: linear-gradient(135deg, var(--secondary-highlight), #e09500) !important;
    border: none !important;
    color: var(--vrplanos-dark) !important;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #e09500, var(--secondary-highlight)) !important;
    color: var(--vrplanos-dark) !important;
}

/* Hover effects com cores VR Planos */
.plan-card:hover {
    border-color: var(--primary-color) !important;
}

.advantage-item:hover .icon {
    transform: scale(1.1);
}

/* Plan item com cor primária */
.plan-item {
    border-left-color: var(--primary-color) !important;
}

/* Preço destacado */
.plan-item-price .value {
    color: var(--primary-color) !important;
}

/* Popular badge atualizado */
.popular-badge {
    background: var(--secondary-highlight) !important;
    color: var(--vrplanos-dark) !important;
}

/* Timeline ativo com cor primária */
.timeline-item.active .timeline-icon {
    background: var(--primary-color) !important;
    animation: pulse-vrplanos 2s infinite;
}

@keyframes pulse-vrplanos {
    0% { box-shadow: 0 0 0 0 rgba(0, 82, 220, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(0, 82, 220, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 82, 220, 0); }
}

/* Progress bar com cores VR Planos */
.progress-bar {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-highlight)) !important;
}

/* Focus states com cor primária */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 82, 220, 0.25) !important;
}

/* Elementos interativos */
.upload-area:hover {
    border-color: var(--primary-color) !important;
    background: rgba(0, 82, 220, 0.05) !important;
}

.payment-option input[type="radio"]:checked + .payment-label {
    border-color: var(--primary-color) !important;
    background: rgba(0, 82, 220, 0.05) !important;
}

/* Comunicação destacada */
.communication-item {
    border-left-color: var(--primary-color) !important;
}

/* Question item */
.question-item {
    border-left-color: var(--primary-color) !important;
}

/* Tabs ativos */
.nav-tabs .nav-link.active {
    border-bottom-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

/* Status badges */
.badge-primary {
    background: var(--primary-color) !important;
}

.badge-warning {
    background: var(--secondary-highlight) !important;
    color: var(--vrplanos-dark) !important;
}

/* Cards destacados */
.card-featured {
    border: 2px solid var(--primary-color) !important;
}

/* Links de navegação */
.breadcrumb-item a:hover {
    color: var(--secondary-highlight) !important;
}

/* Seção de preços */
.pricing-item.total {
    color: var(--primary-color) !important;
    font-weight: 700 !important;
}

/* Elementos de destaque */
.highlight-primary {
    color: var(--primary-color) !important;
}

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

.bg-primary-light {
    background: rgba(0, 82, 220, 0.1) !important;
}

.bg-secondary-light {
    background: rgba(254, 174, 1, 0.1) !important;
}