/* Styles for the Buy Button and Dropdown */
.buy-options-container {
    position: relative; /* Essential for positioning the dropdown */
    display: inline-block;
    margin-top: 10px; /* Adjust as needed for spacing below description */
}

.btn-buy {
    background-color: var(--accent-color); /* Using your accent color */
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    display: flex; /* To align icon and text */
    align-items: center;
    gap: 8px; /* Space between icon and text */
    font-weight: bold; /* Inherit button style */
    text-transform: uppercase; /* Inherit button style */
    letter-spacing: 0.5px; /* Inherit button style */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Match btn animation */
}

.btn-buy:hover {
    background-color: #a02c20; /* Darker accent color */
    transform: translateY(-2px); /* Match btn animation */
}

.btn-buy i {
    font-size: 1.2em;
}

.buy-dropdown {
    display: none; /* Hidden by default */
    position: absolute;
    background-color: #f9f9f9; /* Light background for dropdown */
    min-width: 180px; /* Adjust width as needed */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100; /* Ensure it's above other content */
    border-radius: 5px;
    padding: 10px;
    top: 100%; /* Position below the button */
    left: 50%; /* Center dropdown horizontally relative to its parent */
    transform: translateX(-50%); /* Adjust to truly center */
    margin-top: 5px; /* Small space between button and dropdown */
    text-align: center; /* Center the links within the dropdown */
}

.buy-dropdown a.btn-small {
    color: var(--primary-color); /* Use primary color for links */
    padding: 8px 10px;
    text-decoration: none;
    display: block; /* Make each link take full width */
    margin-bottom: 5px; /* Space between links */
    border-radius: 3px;
    transition: background-color 0.3s ease;
    background-color: #fff; /* White background for individual links */
    border: 1px solid var(--border-color); /* Subtle border */
}

.buy-dropdown a.btn-small:last-child {
    margin-bottom: 0; /* No margin after the last link */
}

.buy-dropdown a.btn-small:hover {
    background-color: var(--light-bg-color); /* Lighter background on hover */
    color: var(--accent-color); /* Accent color on hover */
}

/* Class to show the dropdown */
.buy-dropdown.show {
    display: block;
}

/* Small adjustment for social icons */
.social-links a i {
    font-size: 2.5em; /* Adjust size of Font Awesome icons */
    color: var(--accent-color); /* Use accent color for social icons */
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-links a i:hover {
    color: #a02c20; /* Darker accent color on hover */
    transform: translateY(-3px);
}

/* Remove placeholder image styles for social links as we are using Font Awesome icons */
.social-links img {
    display: none; /* Hide placeholder images */
}

/* Responsive adjustment for dropdown positioning if needed */
@media (max-width: 768px) {
    .buy-dropdown {
        left: 0; /* Align to left of container */
        transform: translateX(0); /* Remove center transform */
        min-width: unset; /* Allow it to shrink if necessary */
        width: 100%; /* Take full width of parent on small screens */
    }

    .buy-options-container {
        display: block; /* Make the container take full width to center the button */
        width: 100%;
    }

    .btn-buy {
        margin: 0 auto; /* Center the button itself */
    }
}