body {
    background-color: var(--color-grey-1) !important;
    padding: var(--space-24);
}

body * {
    color: var(--color-primary);
}

login-container {
    display: flex;
    border-radius: var(--space-8);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

login-banner,
login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-16);
    width: 472px;
    height: 768px;
}

login-banner {
    justify-content: center;
    background-image: url("/images/signinorup/login-banner.jpg");
    background-position: center center;
    background-size: cover;
    position: relative;
}

login-banner::after {
    content: "";
    background-color: var(--color-primary);
    position: absolute;
    inset: 0;
    opacity: 0.8;
}

login-banner h1,
login-banner h1 font,
login-banner p,
login-banner p font {
    text-align: center;
    z-index: 10;
    color: var(--color-text-white);
}

login-banner img,
login-form header img {
    width: 160px;
}

login-banner a:has(>img) {
    z-index: 10;
}

login-banner img {
    display: none;
}

login-banner h1 {
    width: 280px;
}

login-banner p {
    width: 420px;
}

login-form {
    justify-content: space-between;
    background-color: var(--color-neutral-white);
}

login-form header {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

login-form form {
    width: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

login-form form section {
    width: 100%;
    display: none;
}

login-form form section[current-step] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

login-form form h2 {
    align-self: flex-start;
}

login-form form div {
    position: relative;
    width: 100%;
    margin: var(--space-8);
}

login-form form input {
    width: 100%;
    padding: var(--space-8);
}

username-icon,
password-icon {
    position: absolute;
    right: var(--space-4);
    top: var(--space-8);
}

password-icon {
    cursor: pointer;
}

password-icon::before {
    content: "🗝️";
}

password-icon[show-password]::before {
    content: "🔒";
}

input::-ms-reveal,
input::-ms-clear {
    display: none;
}

login-form footer {
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: var(--space-48);
}

login-form a {
    text-decoration: unset;
    color: var(--color-primary);
}

contact-info * {
    font-size: 12px;
}

social-media img {
    width: var(--space-32);
}