/* Public login and signup theme */
body.public-auth-page {
    background-color: #0b2741;
    background-image:
        linear-gradient(135deg, rgba(4, 24, 41, .16), rgba(7, 42, 64, .08)),
        url("../images/home/marzyar-border-background.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

/* Navigation on public authentication pages */
.public-auth-page .mobile-nav-bar,
.public-auth-page .main-nav {
    background: linear-gradient(135deg, rgba(5, 31, 52, .94), rgba(9, 55, 76, .9));
    border-bottom-color: rgba(222, 184, 86, .34);
    box-shadow: 0 8px 26px rgba(2, 15, 28, .28);
    backdrop-filter: blur(5px) saturate(112%);
    -webkit-backdrop-filter: blur(5px) saturate(112%);
}

.public-auth-page .main-nav > ul > li {
    border-bottom-color: rgba(255, 255, 255, .1);
}

.public-auth-page .main-nav a,
.public-auth-page .mobile-home-link {
    color: #f4f8fb;
    background: transparent;
}

.public-auth-page .main-nav a:hover,
.public-auth-page .main-nav a:focus-visible,
.public-auth-page .mobile-home-link:hover,
.public-auth-page .mobile-home-link:focus-visible {
    color: #f2d27a;
    background: rgba(114, 224, 223, .12);
}

.public-auth-page .mobile-nav-bar .mobile-home-link svg,
.public-auth-page .main-nav > ul > li > .nav-home-link svg {
    color: inherit;
    stroke: currentColor;
}

.public-auth-page .main-nav .nav-brand-link:hover,
.public-auth-page .main-nav .nav-brand-link:focus-visible {
    background: transparent;
}

.public-auth-page .menu-toggle span {
    background: #f2d27a;
}

.public-auth-page .mobile-nav-header {
    background: linear-gradient(135deg, #071f35, #0b5062);
    border-bottom: 1px solid rgba(222, 184, 86, .34);
    box-shadow: 0 6px 18px rgba(2, 15, 28, .24);
}

.public-auth-page .mobile-nav-close {
    color: #f2d27a;
    background: rgba(255, 255, 255, .1);
}

.public-auth-page .main-nav .user-dropdown {
    background: rgba(3, 25, 43, .72);
}

@media (min-width: 992px) {
    .public-auth-page .main-nav {
        background: linear-gradient(90deg, rgba(5, 31, 52, .94), rgba(9, 55, 76, .9));
        border-bottom: 1px solid rgba(222, 184, 86, .34);
    }

    .public-auth-page .desktop-brand-item {
        border-inline-end-color: rgba(222, 184, 86, .3);
    }
}

.public-auth-page .auth-card {
    color: #f4f8fb;
    background: linear-gradient(145deg, rgba(5, 31, 52, .88), rgba(9, 49, 72, .78));
    border: 1px solid rgba(222, 184, 86, .46);
    box-shadow: 0 24px 60px rgba(2, 15, 28, .32);
    backdrop-filter: blur(3px) saturate(108%);
    -webkit-backdrop-filter: blur(3px) saturate(108%);
}

.public-auth-page .auth-title {
    color: #f2d27a;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}

.public-auth-page .form-label {
    color: #f5f8fa;
}

.public-auth-page .form-input,
.public-auth-page .auth-card input[type="text"],
.public-auth-page .auth-card input[type="tel"],
.public-auth-page .auth-card input[type="password"],
.public-auth-page .auth-card select {
    color: #102a3d;
    background: rgba(249, 252, 253, .94);
    border-color: rgba(211, 224, 231, .9);
}

.public-auth-page .form-input:focus,
.public-auth-page .auth-card input:focus,
.public-auth-page .auth-card select:focus {
    border-color: #d9b757;
    box-shadow: 0 0 0 4px rgba(217, 183, 87, .2);
    outline: none;
}

.public-auth-page .form-help,
.public-auth-page .signup-submit-hint {
    color: #d8e5eb;
}

.public-auth-page .auth-footer {
    color: #e7eef2;
}

.public-auth-page .auth-footer a {
    color: #72e0df;
    font-weight: 800;
}

.public-auth-page .auth-footer a:hover {
    color: #f2d27a;
}

.public-auth-page .btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #0f8f96, #0b747e);
    border: 1px solid rgba(114, 224, 223, .38);
    box-shadow: 0 10px 24px rgba(3, 28, 43, .28);
}

.public-auth-page .btn-primary:hover {
    background: linear-gradient(135deg, #14a4a8, #0d8189);
}

.public-auth-page .password-toggle,
.public-auth-page .captcha-refresh-button {
    color: #e9c968;
}

@media (max-width: 575px) {
    body.public-auth-page {
        background-attachment: scroll;
        background-image:
            linear-gradient(135deg, rgba(4, 24, 41, .12), rgba(7, 42, 64, .06)),
            url("../images/home/marzyar-border-background.png");
    }

    .public-auth-page .auth-card {
        background: linear-gradient(145deg, rgba(5, 31, 52, .9), rgba(9, 49, 72, .82));
        backdrop-filter: blur(2px) saturate(105%);
        -webkit-backdrop-filter: blur(2px) saturate(105%);
    }
}

/* Login <-> signup full-page push transition */
@view-transition {
    navigation: auto;
}

html {
    --auth-page-push-duration: 1000ms;
    --auth-page-push-easing: cubic-bezier(.65, 0, .35, 1);
    background: #0b2741;
    overflow-x: clip;
}

body.public-auth-page {
    overflow-x: clip;
}

/*
 * The incoming page grows from the physical left edge. At the same rate, the
 * visible width of the old page is clipped from left to right until it is zero.
 * Using clipping instead of horizontal scaling keeps text and form controls
 * sharp while still making the outgoing page visibly narrower on every frame.
 */
::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--auth-page-push-duration);
    animation-timing-function: var(--auth-page-push-easing);
    animation-fill-mode: both;
}

::view-transition-group(root) {
    overflow: clip;
}

::view-transition-image-pair(root) {
    isolation: isolate;
}

::view-transition-old(root) {
    z-index: 1;
    animation-name: auth-page-push-old;
    mix-blend-mode: normal;
    transform-origin: right center;
}

::view-transition-new(root) {
    z-index: 2;
    animation-name: auth-page-push-new;
    mix-blend-mode: normal;
    transform-origin: left center;
}

@keyframes auth-page-push-old {
    0% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }

    72% {
        opacity: .96;
    }

    100% {
        clip-path: inset(0 0 0 100%);
        opacity: 0;
    }
}

@keyframes auth-page-push-new {
    0% {
        clip-path: inset(0 100% 0 0);
        filter: brightness(.94) drop-shadow(18px 0 24px rgba(1, 17, 30, .5));
        opacity: .98;
        transform: translate3d(-2.5%, 0, 0);
    }

    74% {
        filter: brightness(1) drop-shadow(12px 0 18px rgba(1, 17, 30, .34));
        opacity: 1;
    }

    100% {
        clip-path: inset(0 0 0 0);
        filter: brightness(1) drop-shadow(0 0 0 rgba(1, 17, 30, 0));
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Graceful fallback for browsers without cross-document View Transitions. */
body.public-auth-page.auth-push-fallback-leaving {
    animation: auth-page-push-fallback-old
        var(--auth-page-push-duration)
        var(--auth-page-push-easing)
        both;
    pointer-events: none;
    will-change: clip-path, opacity;
}

@keyframes auth-page-push-fallback-old {
    0% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }

    72% {
        opacity: .96;
    }

    100% {
        clip-path: inset(0 0 0 100%);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.public-auth-page.auth-push-fallback-leaving,
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation-duration: .001ms !important;
        animation-delay: 0ms !important;
    }
}


/* MARZIN: high-contrast Persian keyboard warning */
.public-auth-page .auth-keyboard-warning {
    margin-top: .45rem !important;
    padding: .48rem .65rem !important;
    border: 1px solid #f2d27a !important;
    border-radius: 9px !important;
    color: #071d2f !important;
    background: #ffe69a !important;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .18) !important;
    font-size: .82rem !important;
    font-weight: 850 !important;
    line-height: 1.75 !important;
}