/* Hide the retired copy in storefront bundles built before the template change. */
.cs-auth-overlay .cs-auth-dialog .cs-auth-content h3,
.cs-auth-overlay .cs-auth-dialog .cs-auth-lead,
.cs-auth-overlay .cs-auth-dialog .cs-auth-hint,
.cs-auth-overlay .cs-auth-dialog .cs-auth-footnote {
    display: none;
}

@media (width > 800px) {
    .cs-auth-overlay .cs-auth-dialog .cs-auth-content {
        align-items: stretch;
        padding-block: 27px 33px;
    }

    .cs-auth-overlay .cs-auth-dialog .cs-auth-content-inner {
        display: flex;
        flex-direction: column;
        margin-block: 0;
    }

    .cs-auth-overlay .cs-auth-dialog .cs-auth-agree-title {
        margin-block-start: auto;
    }

    .cs-auth-overlay .cs-auth-dialog .cs-auth-steam-btn {
        margin-block-start: 12px;
    }
}

@media (max-width: 800px) {
    .cs-auth-overlay .cs-auth-dialog .cs-auth-agree-title {
        margin-block-start: 20px;
    }
}

@media (width > 800px) and (height < 640px) {
    .cs-auth-overlay .cs-auth-dialog {
        align-self: flex-start;
    }
}

/* The deployed storefront bundle still renders the original sign-in button. */
.cs-auth-overlay .cs-auth-dialog .cs-auth-steam-btn {
    justify-content: flex-start;
}

.cs-auth-overlay .cs-auth-dialog .cs-auth-arrow,
.cs-auth-overlay .cs-auth-dialog .cs-auth-steam-icon:not(.cs-auth-steam-icon--logo) > * {
    display: none;
}

.cs-auth-overlay .cs-auth-dialog .cs-auth-steam-icon:not(.cs-auth-steam-icon--logo) {
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2211.8%22%20fill%3D%22%23eaf6ff%22%2F%3E%3Cpath%20d%3D%22M11.979%200C5.678%200%20.511%204.86.022%2011.037l6.432%202.658c.545-.371%201.203-.59%201.912-.59.063%200%20.125.004.188.006l2.861-4.142V8.91c0-2.495%202.028-4.524%204.524-4.524%202.494%200%204.524%202.031%204.524%204.527s-2.03%204.525-4.524%204.525h-.105l-4.076%202.911c0%20.052.004.105.004.159%200%201.875-1.515%203.396-3.39%203.396-1.635%200-3.016-1.173-3.331-2.727L.436%2015.27C1.862%2020.307%206.486%2024%2011.979%2024c6.627%200%2011.999-5.373%2011.999-12S18.605%200%2011.979%200zM7.54%2018.21l-1.473-.61c.262.543.714.999%201.314%201.25%201.297.539%202.793-.076%203.332-1.375.263-.63.264-1.319.005-1.949s-.75-1.121-1.377-1.383c-.624-.26-1.29-.249-1.878-.03l1.523.63c.956.4%201.409%201.5%201.009%202.455-.397.957-1.497%201.41-2.454%201.012H7.54zm11.415-9.303c0-1.662-1.353-3.015-3.015-3.015-1.665%200-3.015%201.353-3.015%203.015%200%201.665%201.35%203.015%203.015%203.015%201.663%200%203.015-1.35%203.015-3.015zm-5.273-.005c0-1.252%201.013-2.266%202.265-2.266%201.249%200%202.266%201.014%202.266%202.266%200%201.251-1.017%202.265-2.266%202.265-1.253%200-2.265-1.014-2.265-2.265z%22%20fill%3D%22%23101820%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* Decorative case art occupies the space between the title and agreements. */
.cs-auth-overlay .cs-auth-dialog .cs-auth-content-inner {
    display: flex;
    flex-direction: column;
}

.cs-auth-overlay .cs-auth-dialog #cs-auth-title {
    order: -1;
}

.cs-auth-overlay .cs-auth-dialog .cs-auth-content-inner::before {
    content: "";
    flex: 0 0 auto;
    width: min(100%, 400px);
    height: 258px;
    margin: auto;
    background: center / contain no-repeat var(--cs-auth-case-art, none);
    pointer-events: none;
}

.cs-auth-overlay .cs-auth-dialog .cs-auth-agree-title {
    margin-block-start: 0;
}

@media (max-width: 800px) {
    .cs-auth-overlay .cs-auth-dialog .cs-auth-content-inner::before {
        height: clamp(126px, 40vw, 188px);
        margin-block: 12px 16px;
    }
}

.cs-auth-overlay .cs-auth-dialog {
    --cs-auth-case-art: url("/images/csdrop-auth-case-9f101c1ddcb40962.png");
}