/* 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-stripe-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 Stripe 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-stripe-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-stripe-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-stripe-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 */
}


/* 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 for the image inside the label */
label[for="payment_method_sellauth_stripe"] img {
    width: 24px; /* Image width */
    height: auto; /* Auto height to maintain aspect ratio */
    margin-left: 8px; /* Left margin for spacing */
}

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

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