body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #000;
}

#payment-form {
    width: 300px;
}

#error-message {
    display: block;
}

#submit {
    display: block;
}

/* Custom input styles to match Stripe's style */
.custom-input {
    width: 100%;
    height: 44px;
    /* or the height of your Stripe Elements */
    padding: 0 12px;
    border-radius: 4px;
    /* or as per your Stripe Elements */
    border: 1px solid rgba(50, 50, 93, 0.1);
    /* light grey border */
    background-color: #30313d;
    font-size: 16px;
    /* typical font-size for Stripe Elements */
    color: #fff;
    /* dark font color as per Stripe's design */
    line-height: 1.5;
    margin-bottom: 20px;
    /* space between input fields */
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
    font-family: "Poppins", sans-serif;
}

.custom-input:focus {
    outline: none;
    border-color: rgba(50, 50, 93, 0.5);
    /* darker border on focus */
    box-shadow: 0 1px 3px 0 #cfd7df;
    /* subtle shadow on focus */
}

.custom-input::placeholder {
    color: #707070;
    /* lighter color for placeholders */
}

/* Stripe Elements often have the invalid input fields highlighted in red */
.custom-input.invalid {
    border-color: #fa755a;
    /* red border */
    box-shadow: 0 1px 3px 0 #fa755a;
    /* red shadow */
}

/* Style for disabled inputs if needed */
.custom-input:disabled {
    background: #e3e3e3;
    color: #cccccc;
}

.spacer {
    padding-top: 20px;
}

.billing-address-title {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    font-family: "Poppins", sans-serif;
}

.step {
    display: none;
}

.step.active {
    display: block;
}

#error-message {
    font-family: "Poppins", sans-serif;
}