/* Basic reset for better cross-browser compatibility */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Body styling */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f9f9f9; /* Light background for better readability */
}

/* Container for payment fields */
.sellauth-description {
    background-color: rgb(27, 29, 30); /* Updated background color to dark grey */
    border: 1px solid #e0e0e0; /* Light border for definition */
    border-radius: 8px; /* Rounded corners */
    padding: 25px; /* Increased padding for better spacing */
    margin-bottom: 20px; /* Spacing below the payment fields */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    color: white; /* Ensures all text inside is white */
}

/* Resize the PayPal icon */
.woocommerce .payment_methods img {
    width: 42px; /* Set width */
    height: 42px; /* Set height */
    object-fit: contain; /* Maintain aspect ratio */
    margin-top: 10px; /* Top margin for spacing */
    padding-top: 10px; /* Padding for spacing */
}

/* Headings inside the description */
.sellauth-description h2 {
    font-size: 1.5em; /* Size for headings */
    color: #ffffff; /* White text for better contrast */
    margin-bottom: 10px; /* Spacing below headings */
}

/* Paragraph styling */
.sellauth-description p {
    font-size: 1em; /* Font size for paragraphs */
    color: #ffffff; /* White text for paragraphs */
    margin-bottom: 15px; /* Spacing below paragraphs */
}

/* Specific text for redirection notice */
.sellauth-description .payment-notice {
    color: #ffffff; /* White text color for the specific message */
    font-size: 1.2em; /* Slightly larger font size */
    margin-bottom: 10px; /* Spacing below the notice */
}

/* Style for the email input field */
#sellauth_email {
    color: white; /* White text for better readability */
    background-color: rgb(50, 50, 50); /* Darker background for input */
    border: 1px solid #e0e0e0; /* Border color */
    border-radius: 4px; /* Rounded corners */
    padding: 10px; /* Spacing inside the input */
    width: 100%; /* Full width */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Slight shadow for depth */
}

/* Placeholder text color */
#sellauth_email::placeholder {
    color: rgba(255, 255, 255, 0.7); /* Lighter white for placeholder text */
}

/* Button styling */
.button {
    background-color: #007bff; /* Button color */
    color: white; /* Button text color */
    padding: 10px 15px; /* Button padding */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor */
    font-size: 1em; /* Font size for the button */
    margin-top: 15px; /* Margin above the button */
}

/* Button hover effect */
.button:hover {
    background-color: #0056b3; /* Darker shade on hover */
}

/* Additional styles for the payment notice and instructions */
.instructions {
    margin-top: 15px; /* Spacing above instructions */
    font-size: 0.9em; /* Slightly smaller font size for instructions */
    color: rgba(255, 255, 255, 0.8); /* Lighter color for instructions */
}

/* Style pour l'image à l'intérieur du label */
label[for="payment_method_sellauth"] img {
    width: 24px; /* Largeur de l'image */
    height: auto; /* Hauteur automatique pour maintenir le rapport d'aspect */
    margin-left: 8px; /* Espacement à gauche de l'image */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sellauth-description {
        padding: 15px; /* Reduced padding for smaller screens */
    }

    .button {
        width: 100%; /* Full width button on smaller screens */
    }
}