@view-transition {
    navigation: auto;
}

::view-transition-old(miniapp-stage) {
    animation: 180ms ease-out both miniapp-view-out;
}

::view-transition-new(miniapp-stage) {
    animation: 260ms ease both miniapp-view-in;
}

@keyframes miniapp-view-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(1.25rem);
    }
}

@keyframes miniapp-view-in {
    from {
        opacity: 0;
        transform: translateY(1rem) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.hero-section {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/shopping.png');
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 100px 0;
    border-radius: 0.5rem;
}

.footer {
    background-color: #f8f9fa;
    padding: 40px 0;
    border-top: 1px solid #dee2e6;
}

.nav-icon-link,
.nav-icon-home,
.nav-icon-translate,
.nav-icon-logout {
    font-size: 1.5rem;
    color: cornflowerblue;
}

.nav-icon-password {
    font-size: 1.25rem;
    color: cornflowerblue;
}

.auth-card-shell {
    max-width: 500px;
}

.password-card-shell {
    max-width: 640px;
}

.product-video-preview {
    max-width: 100%;
    border: 1px solid #dee2e6;
    border-radius: 12px;
}