/* Older Bootstrap button rules must not override the native hidden attribute. */
#checkout-form[hidden],
#checkout-form [hidden],
#embedded-checkout[hidden],
#checkout-progress[hidden],
#checkout-progress [hidden],
#setup-form[hidden]
{
    display: none !important;
}

.checkout-logo
{
    display: block;
    margin: 0 auto 1.5em;
}

/* Keep preparation and the inline receipt in the same stable content area. */
#checkout-content > .box
{
    min-height: 320px;
}

/* A simple estimate before loading; taller Stripe content grows naturally. */
.checkout-stage
{
    display: grid;
    min-height: 800px;
}

.checkout-stage > *
{
    grid-area: 1 / 1;
    min-width: 0;
}

.checkout-stage > #embedded-checkout
{
    align-self: start;
    width: 100%;
}

.checkout-stage > #checkout-form,
.checkout-stage > #checkout-progress
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

#checkout-progress-message,
#checkout-error
{
    max-width: 38em;
}