/* =========================================
   1. Container Geral
   ========================================= */
.share-buttons {
    display: block;
    text-align: center;
    margin: 40px auto;
    padding-top: 20px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    max-width: 600px;
}

/* =========================================
   2. Título "Compartilhe este post"
   ========================================= */
.share-buttons-title {
    display: block;
    width: 100%;
    margin-bottom: 25px;
    color: var(--accent-color, #333);
    font-weight: 500;
    font-size: 1.1rem;
}

/* =========================================
   3. Botões de Redes Sociais
   ========================================= */
.share-button {
    display: inline-flex;     
    align-items: center;      
    justify-content: center;  
    
    width: 48px;              
    height: 48px;             
    border-radius: 50%;       
    margin: 0 10px;           
    
    font-size: 20px;
    text-decoration: none;
    color: #ffffff !important;
    
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Garante que o ícone FontAwesome não tenha margem */
.share-button i {
    margin: 0;
}

/* Cores das Redes Sociais */
.share-whatsapp { background-color: #25D366 !important; }
.share-facebook { background-color: #1877F2 !important; }
.share-twitter  { background-color: #1DA1F2 !important; }
.share-linkedin { background-color: #0A66C2 !important; }

/* Hover Effect */
.share-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}

/* =========================================
   4. Botão CTA (Chamada para Ação)
   ========================================= */
.cta-container {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 40px;
    display: block;
    clear: both;
}

/* Pega qualquer link dentro do container ou com as classes específicas */
.cta-container a,
.cta-button, 
.cta-button-secondary {
    display: inline-block;
    background-color: #10B981 !important; /* Verde SpendWise */
    color: #ffffff !important;
    font-weight: 700;
    padding: 16px 32px;
    border-radius: 50px;
    text-decoration: none !important;
    font-size: 1.1rem;
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.25);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.cta-container a:hover,
.cta-button:hover, 
.cta-button-secondary:hover {
    transform: translateY(-2px);
    background-color: #059669 !important;
    box-shadow: 0 8px 15px rgba(16, 185, 129, 0.3);
    color: #ffffff !important;
}