Function page: Member Packages Checkout

.kings-forms {
background-color: #ffffff;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
border-radius: 10px;
overflow: hidden;
display: flex;
flex-wrap: wrap; /* Allow content to wrap on smaller screens */
max-width: 900px;
width: 100%;
font-family: system-ui, -apple-system, sans-serif;
margin: 0 auto; /* Center the form on the page */
}

.info,
.form {
padding: 30px;
width: 50%;
box-sizing: border-box;
}

.info {
background-color: #f1f8e9;
border-right: 1px solid #ddd;
}

.info h2,
.info p,
.info h3 {
color: #33691e;
}

.form h2 {
margin-top: 10px;
color: #00796b;
text-align: center;
}

.form input,
.form button {
width: 100%;
padding: 10px;
margin-bottom: 15px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #ddd;
font-size: 16px;
}

.form input:focus {
border-color: #00796b;
outline: none;
}

.form button {
background-color: #00796b;
color: #fff;
border: none;
cursor: pointer;
font-size: 18px;
padding: 15px;
transition: background-color 0.3s ease;
}

.form button:hover {
background-color: #004d40;
}

.placeholder-img {
background-color: #e0e0e0;
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto 20px;
}

h2, h3, p, ul {
margin: 0 0 15px 0;
color: #555;
}

ul {
padding-left: 20px;
}

ul li {
margin-bottom: 10px;
}

h3 {
color: #33691e;
}

p {
font-size: 14px;
color: #777;
}

.spinner {
width: 20px;
height: 20px;
border: 3px solid #f3f3f3;
border-radius: 50%;
border-top: 3px solid #00796b;
margin: 10px auto;
display: none;
}

.spinner.visible {
display: block;
animation: spin 1s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.message {
padding: 10px;
margin-top: 10px;
border-radius: 5px;
text-align: center;
font-weight: bold;
display: none;
}

.message.visible {
display: block;
}

.success {
background-color: #c8e6c9;
color: #2e7d32;
}

.error {
background-color: #ffcdd2;
color: #c62828;
}

/* Responsive Styles */
@media (max-width: 768px) {
.kings-forms {
flex-direction: column; /* Stack sections vertically */
}

.info,
.form {
width: 100%; /* Make both sections full-width */
padding: 20px;
}

.info {
border-right: none;
border-bottom: 1px solid #ddd; /* Add a bottom border for separation */
}

.form button {
font-size: 16px;
}
}

@media (max-width: 480px) {
.info, .form {
padding: 15px;
}

.form input {
font-size: 14px;
padding: 8px;
}

.form button {
font-size: 14px;
padding: 10px;
}
}