/*
 * Frontend Styles for WP Custom Posts Types Plugin
 */

.wpcpt-download-btn {
    background-color: #000000 !important; /* Black background */
    color: #ffffff !important;         /* White text */
    border-color: #000000 !important;  /* Black border */
    box-shadow: 0 2px 0 #000000;       /* Darker shadow for depth */
    text-shadow: none !important;      /* Remove default text shadow */
    text-align: center!important; /* Center text */
    display: inline-block; /* Make it an inline-block for better alignment */
    padding: 10px 20px; /* Add padding for better click area */
    font-size: 16px; /* Set a readable font size */
    font-weight: bold; /* Make the text bold */
    border-radius: 4px; /* Slightly rounded corners */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth transition for hover effects */
    cursor: pointer; /* Pointer cursor on hover */
    text-decoration: none; /* Remove underline from links */
    margin: 10px 0; /* Add some vertical spacing */
    width: 100%; /* Full width for better usability */
    max-width: 300px; /* Limit the maximum width */
    box-sizing: border-box; /* Ensure padding and border are included in the element's total width */
    outline: none; /* Remove default outline */
    position: relative; /* Position relative for potential absolute children */
    z-index: 1; /* Ensure it appears above other elements */
}

.wpcpt-download-btn:hover,
.wpcpt-download-btn:focus {
    background-color: #333333 !important; /* Slightly lighter black on hover/focus */
    border-color: #333333 !important;
    color: #ffffff !important;
}

.wpcpt-download-btn.is-loading {
    opacity: 0.7; /* Indicate loading state */
    cursor: not-allowed;
}

/* PayPal Buy Now Button Styling */
.wpcpt-paypal-form {
    display: block; /* Make it a block element to allow margin auto for centering */
    margin: 40px auto; /* Center the form horizontally */
    width: 280px!important;   /* Set a fixed width for the form */
    text-align: center; /* Center the image inside the form if it's smaller than 280px */
}

.wpcpt-paypal-form input[type="image"] {
    max-width: 100%; /* Ensure the PayPal image scales within the form's width */
    height: auto;    /* Maintain aspect ratio */
}
.wpcpt-paypal-form input[type="image"]:hover {
    opacity: 0.8; /* Slightly dim the image on hover */
}