/**
 * Login and signup. Uses the same theme as the app (`html[data-theme="dark"]`,
 * default palette neutral). Loaded only on those pages.
 */

html {
    color-scheme: light;
    background-color: #fff !important;
}

body,
.page-wrapper {
    background-color: #fff !important;
    background-image: none !important;
}

html[data-theme="dark"] {
    color-scheme: dark;
    background-color: var(--dk-bg) !important;
    --dk-bg: #0c101c;
    --dk-surface: #0f1420;
    --dk-surface-2: #151c2c;
    --dk-border: #222a3a;
    --dk-border-strong: #313a52;
    --dk-text: #ffffff;
    --dk-text-2: #e4e8f0;
    --dk-text-3: #bcc5d4;
    --dk-accent: #8fb0ff;
    --wh-logo-icon-width-ratio: 21.2%;
    --wh-logo-wordmark-mask-start: 25.5%;
}

html[data-theme="dark"][data-palette="neutral"] {
    --dk-bg: #141416;
    --dk-surface: #1e1e22;
    --dk-surface-2: #2a2a30;
    --dk-border: rgba(255, 255, 255, 0.10);
    --dk-border-strong: rgba(255, 255, 255, 0.16);
    --dk-text: #ffffff;
    --dk-text-2: #f2f2f5;
    --dk-text-3: #d4d4dc;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .page-wrapper {
    background-color: var(--dk-bg) !important;
    background-image: none !important;
    color: var(--dk-text-2);
}

html[data-theme="dark"] .heading-style-h3,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3 {
    color: var(--dk-text);
}

html[data-theme="dark"] .section_login p,
html[data-theme="dark"] .section_signup p,
html[data-theme="dark"] .form-checkbox-label,
html[data-theme="dark"] .text-block-3,
html[data-theme="dark"] .aggrement-wrapper,
html[data-theme="dark"] .div-block-13 {
    color: var(--dk-text-2);
}

html[data-theme="dark"] .section_login {
    background-color: var(--dk-bg);
    background-image: linear-gradient(90deg, var(--dk-bg), var(--dk-bg) 50%, var(--dk-surface) 0, var(--dk-surface));
}

html[data-theme="dark"] .section_signup {
    background-color: var(--dk-bg);
}

html[data-theme="dark"] .link-text-blue {
    color: var(--dk-accent);
}

html[data-theme="dark"] .form-input,
html[data-theme="dark"] .w-input {
    background-color: var(--dk-surface-2);
    border-color: var(--dk-border-strong);
    color: var(--dk-text);
}

html[data-theme="dark"] .form-input::placeholder,
html[data-theme="dark"] .w-input::placeholder {
    color: var(--dk-text-3);
}

html[data-theme="dark"] .form-input:hover,
html[data-theme="dark"] .form-input:focus {
    border-color: #225aea;
}

html[data-theme="dark"] .social-login {
    background-color: var(--dk-surface-2);
    border-color: var(--dk-border-strong);
    color: var(--dk-text);
}

html[data-theme="dark"] .social-login:hover {
    border-color: #225aea;
}

html[data-theme="dark"] .divider {
    background-color: var(--dk-border-strong);
}

html[data-theme="dark"] .form-checkbox-icon:not(.w--redirected-checked) {
    border-color: var(--dk-border-strong);
    background-color: var(--dk-surface-2);
}

html[data-theme="dark"] .form-checkbox-icon.w--redirected-checked,
html[data-theme="dark"] .w-checkbox-input--inputType-custom.w--redirected-checked {
    background-color: #225aea;
    border-color: #225aea;
}

html[data-theme="dark"] .form-input:-webkit-autofill,
html[data-theme="dark"] .w-input:-webkit-autofill {
    -webkit-text-fill-color: var(--dk-text);
    caret-color: var(--dk-text);
    box-shadow: 0 0 0 1000px var(--dk-surface-2) inset;
    transition: background-color 9999s ease-out;
}

html[data-theme="dark"] .header-section .navbar-nav .nav-item .nav-link {
    color: var(--dk-text-2);
}

html[data-theme="dark"] .header-section .d-flex a:first-child {
    background: transparent;
    color: var(--dk-text);
    border-color: var(--dk-border-strong);
    box-shadow: none;
}

html[data-theme="dark"] .header-section .d-flex a:first-child:hover {
    background: #225aea;
    color: #fff;
    border-color: #225aea;
}

html[data-theme="dark"] .navbar-toggler {
    border-color: var(--dk-border-strong);
    color: var(--dk-text);
}

html[data-theme="dark"] .navbar-toggler .fa {
    color: var(--dk-text);
}

html[data-theme="dark"] .header-section .navbar-brand {
    position: relative;
    display: inline-block;
    line-height: 0;
}

html[data-theme="dark"] .header-section .navbar-brand::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: var(--wh-logo-icon-width-ratio);
    height: 100%;
    background: url("/images/webclip.png") center / contain no-repeat;
    border-radius: 18%;
    z-index: 1;
    pointer-events: none;
}

html[data-theme="dark"] .header-section .navbar-brand img {
    filter: invert(1) hue-rotate(180deg);
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        transparent var(--wh-logo-wordmark-mask-start),
        #000 var(--wh-logo-wordmark-mask-start)
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        transparent var(--wh-logo-wordmark-mask-start),
        #000 var(--wh-logo-wordmark-mask-start)
    );
}

.signup-modal-logo-lockup {
    position: relative;
    display: block;
    width: 180px;
    margin: 0 auto 1.5rem;
    line-height: 0;
}

.signup-modal-logo-lockup .signup-modal-logo {
    display: block;
    width: 100%;
    margin: 0;
}

.signup-login-hint {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: #666;
}

.signup-login-hint .link-text-blue {
    font-weight: 500;
}

.auth-theme-toggle--signup {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10001;
}

html[data-theme="dark"] .signup-modal-overlay {
    background:
        linear-gradient(rgba(10, 10, 12, 0.78), rgba(10, 10, 12, 0.78)),
        url("/assets/images/signup-bg.png") center / cover no-repeat;
}

html[data-theme="dark"] .signup-modal-content {
    background-color: var(--dk-surface);
    color: var(--dk-text-2);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .signup-modal-title {
    color: var(--dk-text);
}

html[data-theme="dark"] .signup-modal .form-input {
    background-color: var(--dk-surface-2);
    border-color: var(--dk-border-strong);
    color: var(--dk-text);
}

html[data-theme="dark"] .auth-modal-button.google-signin {
    background-color: var(--dk-surface-2);
    border-color: var(--dk-border-strong);
    color: var(--dk-text);
}

html[data-theme="dark"] .auth-modal-button.google-signin:hover {
    background-color: var(--dk-bg);
    border-color: #225aea;
}

html[data-theme="dark"] .signup-login-hint,
html[data-theme="dark"] .signup-modal .aggrement-wrapper,
html[data-theme="dark"] .signup-modal .text-gray-400 {
    color: var(--dk-text-3);
}

html[data-theme="dark"] .signup-modal .border-gray-400 {
    border-color: var(--dk-border-strong);
}

html[data-theme="dark"] .signup-modal-logo-lockup::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: var(--wh-logo-icon-width-ratio);
    height: 100%;
    background: url("/images/webclip.png") center / contain no-repeat;
    border-radius: 18%;
    z-index: 1;
    pointer-events: none;
}

html[data-theme="dark"] .signup-modal-logo-lockup .signup-modal-logo {
    filter: invert(1) hue-rotate(180deg);
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        transparent var(--wh-logo-wordmark-mask-start),
        #000 var(--wh-logo-wordmark-mask-start)
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        transparent var(--wh-logo-wordmark-mask-start),
        #000 var(--wh-logo-wordmark-mask-start)
    );
}

body.login-page .header-section {
    padding-bottom: 0;
}

.header-section .auth-theme-toggle {
    display: inline-flex;
    align-items: center;
    margin-left: 12px;
    flex-shrink: 0;
}

@media (max-width: 991px) {
    .header-section:has(.auth-theme-toggle) .navbar-brand {
        order: 1;
        margin-right: auto;
    }

    .header-section:has(.auth-theme-toggle) .auth-theme-toggle {
        order: 2;
        margin-left: auto;
    }

    .header-section:has(.auth-theme-toggle) .navbar-toggler {
        order: 3;
    }

    .header-section:has(.auth-theme-toggle) .navbar-collapse {
        order: 4;
        flex-basis: 100%;
    }
}

@media (max-width: 991px) {
    html[data-theme="dark"] .section_login {
        background-image: none;
    }
}