/*
Theme Name:     Bopea Child
Theme URI: 		https://jellywp.com/wp/bopea_preview/
Description: 	Wordpress Theme for Blogs & Magazines
Author:         Jellywp
Author URI: 	http://themeforest.net/user/jellywp
Template:       bopea
Version:        1.0.0
*/

/* Container for AI share buttons */
.ai-buttons-buttons-row {
    display: flex;
    justify-content: flex-start; /* Align buttons to the left */
    align-items: center; /* Align label and buttons vertically */
    gap: 15px; /* Space between label and buttons, and between buttons themselves */
    margin-top: 20px;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

/* Styling for the "Summarize" label */
.ai-buttons-label {
    font-size: 16px;
    font-weight: bold;
    margin-right: 0px; /* Space between label and first button */
    color: #333; /* Dark color for the label */
}

/* General button styling */
.ai-buttons-share-button {
    display: inline-block;
    padding: 12px 20px; /* Padding inside the button */
    font-size: 14px; /* Font size */
    font-weight: bold; /* Make the text bold */
    color: white; /* Text color */
    background-color: #4CAF50; /* Default button background color */
    border-radius: 8px; /* Rounded corners */
    text-align: center;
    text-decoration: none; /* Remove underline */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth hover effect */
    cursor: pointer; /* Pointer cursor on hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add shadow */
}

/* Button hover effect */
.ai-buttons-share-button:hover {
    background-color: #45a049;
	color: white;/* Slightly darker background on hover */
    transform: translateY(-2px); /* Lift the button slightly */
}

/* Button active effect (pressed state) */
.ai-buttons-share-button:active {
    transform: translateY(1px); /* Push button down on click */
}

/* Specific color for ChatGPT button */
.ai-buttons-chatgpt {
    background-color: #4CAF50; /* Green for ChatGPT */
}

.ai-buttons-chatgpt:hover {
    background-color: #45a049; /* Darker green on hover */
}

/* Specific color for Perplexity button */
.ai-buttons-perplexity {
    background-color: #6A5ACD; /* Purple for Perplexity */
}

.ai-buttons-perplexity:hover {
    background-color: #5a4ebd; /* Darker purple on hover */
}

/* Specific color for Grok button */
.ai-buttons-grok {
    background-color: #000000; /* Black for Grok */
}

.ai-buttons-grok:hover {
    background-color: #333333; /* Darker black on hover */
}

/* Specific color for Claude button */
.ai-buttons-claude {
    background-color: #FF6347; /* Tomato for Claude */
}

.ai-buttons-claude:hover {
    background-color: #e5533e; /* Darker tomato on hover */
}

/* Specific color for Google AI button */
.ai-buttons-google {
    background-color: #4285F4; /* Google blue */
}

.ai-buttons-google:hover {
    background-color: #357ae8; /* Darker blue on hover */
}

/* Responsive design: Stack buttons on smaller screens */
@media (max-width: 768px) {
    .ai-buttons-buttons-row {
        flex-direction: column; /* Stack buttons vertically */
        align-items: center; /* Center the buttons */
    }

    .ai-buttons-share-button {
        width: 100%; /* Make buttons full width on small screens */
        margin-bottom: 10px; /* Space between stacked buttons */
    }

    /* Adjust the label to be centered on small screens */
    .ai-buttons-label {
        margin-right: 0; /* Remove space between label and buttons */
        margin-bottom: 10px; /* Add space below the label */
    }
}