/* Button Styles */

/* Buy Button */
.buy-button {
    background-color: #ff5722;
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
    text-transform: uppercase;
    font-size: 12px; /* font size */
}

.buy-button:hover {
    background-color: #e64a19;
}


/* Navigation Button */
/* Ensure the image container is relatively positioned */
.image-container {
    position: relative;
    display: inline-block;
}

/* Position the nav buttons (both) within the image container */
.nav-buttons {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for true center */
    display: flex;
    justify-content: space-between;
    width: 100%; /* Ensure it spans the entire width */
    padding: 0 20px; /* Add padding so buttons are not on the edges */
}

/* Individual nav button setting */ 
.nav-button {
    background-color: transparent;
    color: #b5b0b0; /* Dark grey color for the chevron */
    border: none;
    font-size: 24px; /* Adjust size of chevron */
    padding: 10px;
    cursor: pointer;
    border-radius: 50%; /* Rounded buttons */
    width: 40px; /* Set button size */
    height: 40px; /* Set button size */
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-buttons:hover {
    background-color: transparent /* rgba(169, 169, 169, 0.8); /* Darker grey on hover */
}

.nav-button.left {
    margin-right: 10px; /* Optional: space between left button and right */
}

.nav-button.right {
    margin-left: 10px; /* Optional: space between right button and left */
}

/* Out of Stock Button (Greyed out and not clickable) */
#modal-buy-button {
    background-color: #d3d3d3; /* Grey color */
    color: #a9a9a9; /* Lighter grey text */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: not-allowed; /* Show not-allowed cursor */
    margin-top: 20px; /* Space between image and button */
}

/* Contact Button (Red and clickable) */
#modal-contact-button {
    background-color: #ff5722; /* Red color */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px; /* Space between Out of Stock and Contact button */
}

/* Contact Button hover effect */
#modal-contact-button:hover {
    background-color: #e64a19; /* Darker red on hover */
}