* {
    box-sizing: border-box; /* Include padding and border in element's total width and height */
}

html, body {
    height: 100%; /* Full height for html and body */
    width: 100%; /* Full width for html and body */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
    text-align: center;
}

h1 {
    color: #343a40;
    font-size: 50px; /* Adjusted font size for better readability on small screens */
    margin: 20px 0; /* Add spacing around heading */
}

.container {
    display: flex; /* Use flexbox to center content */
    flex-direction: column; /* Arrange children in a column */
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    height: 100vh; /* Use viewport height for full screen */
    width: 100%; /* Full width for the container */
    background: white;
    border-radius: 15px; /* Adjusted border radius for smaller screens */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); /* Slightly reduced shadow */
    padding: 20px; /* Decreased padding for better fit on small screens */
}

.input-payment-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Space between the input and buttons */
    width: 100%; /* Ensure the input payment container takes full width */
    flex-grow: 1; /* Allow this section to take up remaining space */
}

.amount-input {
    width: 100%; /* Full width for the input */
}

input[type="number"] {
    width: 100%;
    padding: 15px; /* Adjusted padding for mobile touch targets */
    border: 2px solid #ced4da; /* Thinner border for mobile */
    border-radius: 10px; /* Adjusted border radius */
    font-size: 16px; /* Adjusted font size for mobile readability */
    box-sizing: border-box; /* Include padding and border in width */
}

.payment-links {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between buttons */
    width: 100%; /* Ensure the buttons take the full width */
}

.payment-button {
    background-color: #007bff;
    color: white;
    padding: 15px; /* Adjusted padding for mobile touch targets */
    border: none;
    border-radius: 10px; /* Adjusted border radius */
    font-size: 16px; /* Adjusted font size for better readability */
    transition: background-color 0.3s, opacity 0.3s; /* Add opacity transition */
    width: 100%; /* Full width for the buttons */
    opacity: 0.5; /* Initially greyed out */
    cursor: not-allowed; /* Change cursor to indicate disabled state */
}

/* Add styles for the enabled state */
.payment-button.enabled {
    opacity: 1; /* Fully opaque when enabled */
    cursor: pointer; /* Change cursor back to pointer when enabled */
}

.payment-button:hover.enabled {
    background-color: #0056b3; /* Change background on hover if enabled */
}

@media (max-width: 600px) {
    .container {
        padding: 15px; /* Adjust padding for smaller screens */
    }
    h1 {
        font-size: 30px; /* Adjust heading size for smaller screens */
    }
    input[type="number"] {
        font-size: 14px; /* Further adjust input font size */
        padding: 10px; /* Reduce padding for smaller devices */
    }
    .payment-button {
        font-size: 14px; /* Adjust button font size for small screens */
        padding: 10px; /* Reduce padding for better fit */
    }
}