/* Energy Label Container */
.euel-energy-label-container {
    z-index: 1;
    float: right;
    right: 55px;
}

.euel-energy-label-container span:after {
    top: 0px;
}

.euel-energy-label-container #single_euel {
    left: 85%;
}

span#single_euel {
    left: 86%;
    font-size: 14px;
}

/* Ribbon */
.ribbon {
    position: unset;
}

.ribbon3 {
    left: -2px;
    font-size: 16px;
}

/* Callout Badge */
.callout.badge.badge-circle {
    top: 44px;
    position: relative;
}

/* WPForms Centering */
.center-form {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px; /* Adjust this value if needed */
}

/* Request to Buy Button (Default) */
.request-btn {
    background-color: #FF5733; /* Default color */
    padding: 14px 30px; /* Default padding */
    font-size: 18px;
    border-radius: 8px; /* Rounded corners */
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    border: none; /* Remove border */
}

/* Desktop - Dark Red and Wider Button */
@media only screen and (min-width: 768px) {
    button.request-btn,
    .request-btn {
        background-color: #8B0000 !important; /* Dark red color for desktop */
        padding: 20px 50px; /* Increased padding for a wider button */
        font-size: 20px; /* Larger font size for desktop */
        min-width: 200px; /* Minimum width to ensure button is wider */
    }

    /* Hover effect for desktop */
    button.request-btn:hover,
    .request-btn:hover {
        background-color: #6A0000 !important; /* Even darker red on hover */
    }
}

/* Hover Effect for Default Button */
.request-btn:hover {
    background-color: #e04e2f; /* Darker color on hover */
}

/* Modern Red Button (Replaced with Dark Red) */
.request-btn {
    background-color: #e50914; /* Bright red background */
    color: #fff; /* White text color */
    padding: 16px 35px; /* Increased padding to make it slightly wider */
    font-size: 18px; /* Font size */
    font-weight: bold; /* Bold text */
    border-radius: 50px; /* Fully rounded corners */
    text-transform: uppercase; /* Uppercase text for bold look */
    text-align: center; /* Center the text */
    display: inline-block; /* Ensures proper alignment */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth background and scale effect */
    border: none; /* Remove border */
}

/* Hover Effect for Modern Red Button */
.request-btn:hover {
    background-color: #b4060d; /* Darker red on hover */
    cursor: pointer; /* Pointer cursor on hover */
    transform: scale(1.05); /* Slight scale effect for modern look */
}

/* Mobile Responsiveness for Request Button */
@media (max-width: 767px) {
    .request-btn {
        padding: 14px 30px; /* Slightly smaller padding on mobile */
        font-size: 16px; /* Slightly smaller font size on mobile */
    }

    .center-form {
        max-width: 800px; /* Increase the width on desktop */
    }
}

/* Optional: Adjust button size or padding for mobile */
@media only screen and (max-width: 767px) {
    .request-btn {
        padding: 12px 24px;
        font-size: 14px;
    }
}

/* Desktop adjustments for WPForms */
@media only screen and (min-width: 768px) {
    .center-form {
        max-width: 800px; /* Adjust to your liking */
    }
}

/* Move "Add to Cart" below the Request to Buy button */
.product .request-btn {
    margin-bottom: 20px; /* Add space below the Request to Buy button */
}

/* Make sure the "Add to Cart" button or text is positioned below */
.product .add_to_cart_button {
    display: block; /* Ensure it's a block element (full width) */
    margin-top: 10px; /* Add space between the buttons */
    width: 100%; /* Optionally, make it as wide as the Request to Buy button */
}