center {
    margin: var(--gap-medium) !important;
    justify-content: center !important;
}

payment-successful {
    padding: var(--gap-xxlarge);
    border-radius: var(--gap-large);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    text-align: left;
}

li {
    list-style: none;
    padding-left: var(--gap-medium);
}

li {
    opacity: 0;
    transform: translateY(4px);
    animation: fadeIn 0.4s ease forwards;
}

li:nth-child(1) {
    animation-delay: 0.1s;
}

li:nth-child(2) {
    animation-delay: 0.2s;
}

li:nth-child(3) {
    animation-delay: 0.3s;
}

li:nth-child(4) {
    animation-delay: 0.4s;
}

li:nth-child(5) {
    animation-delay: 0.5s;
}

li:nth-child(6) {
    animation-delay: 0.6s;
}

li:nth-child(7) {
    animation-delay: 0.7s;
}

li:nth-child(8) {
    animation-delay: 0.8s;
}

success {
    opacity: 0;
    transform: translateY(4px);
    animation: fadeIn 2s ease forwards;
    animation-delay: 0.9s;
    margin-top: var(--gap-xlarge);
    display: block;
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


li.header {
    margin-top: var(--gap-xlarge);
    font-size: 0.75rem;
    text-transform: uppercase;
    opacity: 0.6;
}

li.header::before {
    display: none;
}

li.hide-until,
p.hide-until {
    display: none;
}

li[data-status="true"].hide-until,
p[data-status="true"].hide-until {
    display: list-item;
}

li:before {
    padding-right: var(--gap-small);
    content: "✔";
    filter: grayscale();
    opacity: 0.5;
    color: var(--color-accent);
}

li[data-status="true"]:before {
    filter: none;
    opacity: 1;
}

.error {
    font-size: 1.5rem;
    color: var(--color-error);
}

ul {
    margin: 0px;
    padding: 0px;
}

ul li:has(ul)::before {
    display: none;
}

ul ul {
    margin-left: var(--gap-xlarge);
}

.header-element {
    font-size: 1.1rem;
    margin-top: unset;
    margin-bottom: unset;
}

count-down {
    display: flex;
    height: 1lh;
    border: 1px solid var(--color-accent);

    bar {
        width: 0px;
        background-color: var(--color-accent);
        animation: fillBar 20s linear forwards;
    }
}


@keyframes fillBar {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}
#top-image {
                    background-image: image-set(
                        url('/top-image-paymentsuccessful-1920.avif') type('image/avif'),
                        url('/top-image-paymentsuccessful-1920.jxl') type('image/jxl'),
                        url('/top-image-paymentsuccessful-1920.jpg') type('image/jpeg')
                    );
                    background-size: cover;
                    background-position-y: -100px;
                    height: 700px;
                    align-content: end;
                    background-position: center;
}

@media (max-width: 1200px)
{
# top-image {
        background-image: image-set(
        url('/top-image-paymentsuccessful-1200.avif') type('image/avif'),
        url('/top-image-paymentsuccessful-1200.jxl') type('image/jxl'),
        url('/top-image-paymentsuccessful-1200.jpg') type('image/jpeg')
    );

    height: 500px;
    }
}

@media (max-width: 1000px)
{
# top-image {
        background-image: image-set(
        url('/top-image-paymentsuccessful-1000.avif') type('image/avif'),
        url('/top-image-paymentsuccessful-1000.jxl') type('image/jxl'),
        url('/top-image-paymentsuccessful-1000.jpg') type('image/jpeg')
    );
    }
}

@media (max-width: 800px)
{
# top-image {
    background-image: image-set(
        url('/top-image-paymentsuccessful-800.avif') type('image/avif'),
        url('/top-image-paymentsuccessful-800.jxl') type('image/jxl'),
        url('/top-image-paymentsuccessful-800.jpg') type('image/jpeg')
    );
    }
}