section.title {
    color: white;
    text-align: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

section.checkout {
    div.card {
        max-width: 750px;
        margin: 0 auto;
        margin-top: 44px;

        div.title {
            font-size: 1.6rem;
            font-weight: bold;
            user-select: none;
        }

        &.accordion {
            div.title {
                cursor: pointer;
                
                display: flex;
                align-items: center;
                justify-content: space-between;

                svg {
                    width: 30px;
                    flex-shrink: 0;
                }
            }

            [data-when="opened"], [data-when="locked"] {
                display: none;
            }

            [data-when="closed"] {
                display: block;
            }

            &:not(.open) {
                [data-when="opened"] {
                    display: block;
                }

                [data-when="closed"] {
                    display: none;
                }
            }

            &.locked {
                cursor: not-allowed;

                [data-when] {
                    display: none;
                }

                [data-when="locked"] {
                    display: block;
                }
            }
        }
    }
}

section.checkout[data-stage="payment"] {
    &:not(.loading) {
        div.loader {
            display: none !important;
        }
    }

    &.loading {
        div#stripe, button#pay {
            display: none !important;
        }
    }

    div.card {
        max-width: 600px;
        position: relative;
        min-height: 300px;
        padding: 66px;

        div.loader {
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            top: 44px;
            left: 44px;
            right: 44px;
            bottom: 44px;

            z-index: 10;
            display: flex;
            place-content: center;

            svg {
                width: 40px;
            }
        }

        button#pay {
            margin-top: 44px;
            width: 100%;
            max-width: 300px;
            margin-left: auto;
            margin-right: auto;
        }
    }
}

section.checkout[data-stage="done"] {
    div.card {
        text-align: center !important;
    }
}