/* ------------------------------- AUTH (LAYOUT) ------------------------------- */

#auth {display: flex; min-height: 100vh;}
#auth > div {display: flex; width: 50%;}
#auth > div:nth-of-type(1) {position: relative; padding: 10px;}
#auth > div:nth-of-type(2) {justify-content: center; align-items: center;}
#auth > div:nth-of-type(1) > video {
    width: 100%; height: calc(100vh - 20px); min-height: 100%; border-radius: 12px; object-fit: cover; object-position: 40% 50%;
}
#auth > div:nth-of-type(1) > #auth_video_control {
    position: absolute; inset-inline-end: 30px; bottom: 30px; width: 32px; height: 32px; padding: 8px;
    border-radius: 3px; background-color: rgba(244, 244, 244, 0.5); cursor: pointer;
    opacity: 0; pointer-events: none; transition: opacity .3s ease-in-out, background-color .3s ease-in-out;
}
#auth > div:nth-of-type(1):hover > #auth_video_control {opacity: 1; pointer-events: auto;}
#auth > div:nth-of-type(1) > #auth_video_control > i {position: relative; top: -2px; font-size: 16px;}
#auth > div:nth-of-type(1) > #auth_video_control:hover {background-color: rgba(244, 244, 244, 1);}
#auth > div:nth-of-type(1) > #auth_home_link {
    display: flex; justify-content: center; align-items: center;
    position: absolute; inset-inline-start: 30px; bottom: 30px; width: 32px; height: 32px;
    border-radius: 3px; background-color: rgba(244, 244, 244, 0.5); color: var(--black-color);
    text-decoration: none; cursor: pointer; transition: .3s ease-in-out;
}
#auth > div:nth-of-type(1) > #auth_home_link > i {font-size: 14px; transform: rotate(180deg);}
html[dir="rtl"] #auth > div:nth-of-type(1) > #auth_home_link > i {transform: none;}
#auth > div:nth-of-type(1) > #auth_home_link:hover {background-color: rgba(244, 244, 244, 1);}

.auth_slider {position: relative; overflow: hidden;}

@media (max-width: 1024px) {
    #auth > div {width: 100%;}
    #auth > div:nth-of-type(1) {display: none;}
    #auth > div:nth-of-type(2) {min-width: 0;}
}

/* ------------------------------- AUTH (CONTENT) ------------------------------- */

.auth_group {width: 100%; max-width: 420px; padding: 30px;}

.auth_title {color: var(--black-color); font-size: 34px; font-weight: 500; line-height: 1;}
.auth_desc {padding-top: 16px; color: var(--gray-color-4); font-size: 14px; line-height: 1.3;}
.auth_desc > a {color: var(--primary-color-3); text-decoration: none;}
.auth_desc > a:hover {color: var(--primary-color-5);}
.auth_desc > span {font-weight: 500;}

.auth_controls {margin-top: 10px;}
.auth_btn {position: relative; width: 100%; height: 44px; margin-top: 36px; font-size: 14px;}

.auth_oauth_row {display: flex; gap: 12px; margin-top: 22px;}
.auth_oauth_row > .auth_btn_oauth {flex: 1; margin-top: 0; height: 36px;}

.auth_btn_oauth {
    display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; height: 44px; margin-top: 22px;
    border: 1px solid var(--gray-color-10); border-radius: 8px; color: var(--black-color); font-size: 14px; font-weight: 500;
    text-decoration: none; user-select: none; transition: all 0.25s ease-out;
}
.auth_btn_oauth:hover {border-color: var(--black-color);}
.auth_btn_oauth > i {font-size: 18px;}
.auth_btn_github > i {color: #181717;}
.auth_btn_linkedin > i {color: #0A66C2;}

.auth_divider {
    display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; color: var(--gray-color-5);
    font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
}
.auth_divider::before, .auth_divider::after {content: ''; flex: 1; height: 1px; background: var(--gray-color-12);}

.auth_resend {margin-top: 14px; color: var(--gray-color-4); font-size: 13px; line-height: 1.4;}
.auth_resend_link {color: var(--primary-color-3); cursor: pointer; text-decoration: none; transition: all 0.3s ease-in-out;}
.auth_resend_link:hover {color: var(--primary-color-5);}

.auth_status {display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding-top: 20vh;}
.auth_btn.auth_btn_logout {margin-top: 10px;}

.auth_extra {display: flex; padding-top: 20px;}
.auth_extra > div {width: 100%; color: var(--gray-color-3); font-size: 13px;}
.auth_extra > div:nth-of-type(2) {text-align: right;}
.auth_extra a {color: var(--primary-color-3); font-size: 13px; text-decoration: none; transition: all 0.3s ease-in-out;}
.auth_extra a:hover {color: var(--primary-color-5);}

.auth_error {display: none; margin-top: 14px; padding: 10px 12px; border-radius: 6px; background: rgba(220, 53, 69, 0.08); color: #b00020; font-size: 13px; line-height: 1.3;}
.auth_error.show {display: block;}

.auth_hint {margin-top: 8px; padding-inline-start: 2px; color: var(--gray-color-3); font-size: 12px; line-height: 1.4;}


.auth_hp {position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none;}
[dir="rtl"] .auth_hp {left: auto; right: -9999px;}

.auth_btn {position: relative;}
.auth_btn[disabled], .auth_btn.loading {opacity: 0.85; cursor: progress;}
.auth_btn_spinner {display: none; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: auth_spin 0.7s linear infinite;}
.auth_btn.loading .auth_btn_label {visibility: hidden;}
.auth_btn.loading .auth_btn_spinner {display: inline-block; position: absolute; top: 50%; left: 50%; margin: -8px 0 0 -8px;}
@keyframes auth_spin {to {transform: rotate(360deg);}}

.auth_optional {color: var(--gray-color-6); padding-inline-start: 4px;}

.auth_controls .checkbox_group_wrap {margin-top: 20px;}
.auth_controls .checkbox_group_wrap + .checkbox_group_wrap {margin-top: 12px;}
.auth_controls:has(.checkbox_group_wrap) .auth_btn {margin-top: 22px;}
.checkbox_group_wrap.error label, .checkbox_group_wrap.error > div:nth-of-type(2) a {color: var(--red-color-1);}

@media (max-width: 1024px) {
    .auth_group {padding: 30px 20px; max-width: 480px;}
    .auth_desc {font-size: 16px;}
    .auth_oauth_row {flex-direction: column; gap: 0;}
    .auth_oauth_row > .auth_btn_oauth {margin-top: 12px; height: 46px; min-height: 46px; font-size: 18px; border-radius: 10px;}
    .auth_oauth_row > .auth_btn_oauth:first-child {margin-top: 0;}
    .auth_btn {height: 46px; font-size: 18px;}
    .auth_divider {font-size: 14px;}
    .auth_extra > div {font-size: 16px;}
    .auth_extra a {font-size: 16px;}
    .auth_hint {font-size: 16px;}
}

/* ------------------------------- AUTH (TYPE ITEM) ------------------------------- */

.auth_type_item {
    display: flex; padding: 20px; border: 1px solid var(--gray-color-9); border-radius: 3px;
    text-decoration: none; cursor: pointer; user-select: none; transition: all 0.3s ease-in-out;
}
.auth_type_item > div:nth-of-type(1) {display: flex; justify-content: center; align-items: center; width: 40px;}
.auth_type_item > div:nth-of-type(1) > i {color: var(--primary-color-3); font-size: 30px;}
.auth_type_item > div:nth-of-type(1) > i.icon_user_3 {font-size: 28px;}
.auth_type_item > div:nth-of-type(2) {width: 100%; padding-inline: 20px;}
.auth_type_item > div:nth-of-type(2) > div:nth-of-type(1) {color: var(--black-color); font-size: 16px; font-weight: 500;}
.auth_type_item > div:nth-of-type(2) > div:nth-of-type(2) {
    padding-top: 4px; color: var(--gray-color-7); font-size: 13px; line-height: 1.3;
}
.auth_type_item > div:nth-of-type(3) {display: flex; justify-content: center; align-items: center; width: 21px;}
.auth_type_item > div:nth-of-type(3) > i {
    color: var(--primary-color-3); font-size: 18px; opacity: 0; transform: translateX(-5px); transition: all 0.3s ease-in-out;
}
.auth_type_item:hover {border-color: var(--primary-color-3);}
.auth_type_item:hover > div:nth-of-type(3) > i {opacity: 1; transform: translateX(0);}

/* ------------------------------- ONBOARDING (CONTAINER) ------------------------------- */

#onboarding_container {width: 100%; min-height: 100vh; padding: 15px 0; background: var(--gray-color-15);}
#onboarding_container > div {display: flex;}

@media (max-width: 1024px) {
    #onboarding_container {padding: 0; background: var(--white-color);}
    #onboarding_container > div {display: block;}
}

/* ------------------------------- ONBOARDING (SIDEBAR) ------------------------------- */

#onboarding_sidebar {
    position: fixed; display: flex; flex-direction: column; width: 276px; height: calc(100vh - 30px); margin-inline-end: 14px;
}
#onboarding_sidebar_main {
    display: flex; flex-direction: column; height: calc(100vh - 60px); overflow-y: auto; padding: 22px 20px;
    border: var(--surface-border); border-radius: 12px; background: var(--white-color); scrollbar-width: thin;
    scrollbar-color: var(--gray-color-10) transparent;
}
#onboarding_sidebar_main::-webkit-scrollbar {width: 4px;}
#onboarding_sidebar_main::-webkit-scrollbar-track {background: transparent;}
#onboarding_sidebar_main::-webkit-scrollbar-thumb {border-radius: 2px; background: var(--gray-color-10);}

.onboarding_sidebar_steps {display: flex; flex-direction: column; flex: 1;}
.onboarding_sidebar_step {
    position: relative; display: flex; align-items: start; padding-bottom: 14px; cursor: pointer; transition: all 0.3s ease-in-out;
}
.onboarding_sidebar_step:hover > div {border-color: var(--primary-color-3); color: var(--primary-color-3);}
.onboarding_sidebar_step:hover > span > span:nth-of-type(1) {color: var(--primary-color-3);}
.onboarding_sidebar_step:last-of-type {padding-bottom: 0;}
.onboarding_sidebar_step > div {
    display: flex; justify-content: center; align-items: center; width: 32px; min-width: 32px; height: 32px;
    border: 1px solid var(--gray-color-10); border-radius: 50%; color: var(--gray-color-3); font-size: 13px; font-weight: 500;
    transition: all 0.3s ease-in-out;
}
.onboarding_sidebar_step::after {
    content: ''; position: absolute; top: 36px; bottom: 4px; inset-inline-start: 15px; width: 2px;
    background-color: var(--gray-color-10);
}
.onboarding_sidebar_step:last-of-type::after {display: none;}
.onboarding_sidebar_step > span {margin-inline-start: 12px;}
.onboarding_sidebar_step > span > span:nth-of-type(1) {
    display: block; color: var(--gray-color-1); font-size: 13px; font-weight: 500; transition: all 0.3s ease-in-out;
}
.onboarding_sidebar_step > span > span:nth-of-type(2) {
    display: block; margin-top: 4px; color: var(--gray-color-6); font-size: 12px; line-height: 1.3; transition: all 0.3s ease-in-out;
}
.onboarding_sidebar_step.active > div {
    border: 1px solid var(--primary-color-3); background-color: var(--primary-color-3); color: var(--white-color);
}
.onboarding_sidebar_step.active > span > span:nth-of-type(1) {color: var(--primary-color-3);}
.onboarding_sidebar_step.done::after {background-color: var(--primary-color-3);}

.onboarding_sidebar_footer {font-size: 13px;}
.onboarding_sidebar_footer > div:nth-of-type(1) {
    display: flex; align-items: center; margin-top: 10px; color: var(--gray-color-2); font-weight: 500;
}
.onboarding_sidebar_footer > div:nth-of-type(1) > i {margin-inline-end: 10px; color: var(--gray-color-4); font-size: 16px;}
.onboarding_sidebar_footer > div:nth-of-type(2) {margin-top: 6px; color: var(--gray-color-6); font-size: 12px; line-height: 1.3;}
.onboarding_sidebar_footer > div:nth-of-type(3) {margin-top: 16px;}

@media (max-width: 1024px) {
    #onboarding_sidebar {display: none;}
}

/* ------------------------------- ONBOARDING (CONTENT) ------------------------------- */

#onboarding_content {
    display: flex; flex-direction: column; width: calc(100% - 290px); height: calc(100vh - 30px); margin-inline-start: 290px;
    padding: 30px; border: var(--surface-border); border-radius: 12px; background: var(--white-color);
}
#onboarding_body_wrap {position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;}
#onboarding_body {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: scroll; padding-inline-end: 10px;
    padding-bottom: 20px; scrollbar-width: none; -ms-overflow-style: none;
}
#onboarding_body::-webkit-scrollbar {display: none;}
.onboarding_scroll {position: absolute; top: 4px; bottom: 4px; inset-inline-end: -15px; width: 6px; z-index: 10; user-select: none;}
.onboarding_scroll_slider {
    position: absolute; width: 100%; border-radius: 3px; background: rgba(0, 0, 0, 0.2); cursor: pointer;
    opacity: 0; transition: opacity 0.3s ease, background 0.2s;
}
.onboarding_scroll_slider.visible {opacity: 1;}
.onboarding_scroll_slider:hover {background: rgba(0, 0, 0, 0.3);}
.onboarding_scroll_slider:active {background: rgba(0, 0, 0, 0.4);}
.onboarding_content_header {color: var(--primary-color-1); font-size: 22px; font-weight: 500;}

@media (max-width: 1024px) {
    #onboarding_content {
        width: 100%; height: auto; min-height: 100vh; margin-inline-start: 0; padding: 16px 16px 96px; border: none; border-radius: 0;
    }
    #onboarding_body_wrap {min-height: auto;}
    #onboarding_body {min-height: auto; overflow: visible; padding-inline-end: 0;}
    .onboarding_scroll {display: none;}
    .onboarding_content_header {font-size: 20px; line-height: 1.25;}
}

/* ------------------------------- ONBOARDING (FOOTER) ------------------------------- */

.onboarding_footer {
    display: flex; flex-shrink: 0; align-items: center; padding-top: 20px;
    border-top: 1px solid var(--gray-color-13);
}
.onboarding_footer > div:nth-of-type(1) {width: 50%;}
.onboarding_footer > div:nth-of-type(2) {display: flex; justify-content: end; width: 50%; gap: 15px;}

@media (max-width: 1024px) {
    .onboarding_footer {
        position: fixed; bottom: 0; inset-inline-start: 0; z-index: 10; flex-direction: column-reverse; align-items: stretch;
        width: 100%; padding: 10px 16px; gap: 10px; border-top: 1px solid var(--gray-color-13);
        background: var(--white-color);
    }
    .onboarding_footer > div:nth-of-type(1) {width: 100%;}
    .onboarding_footer > div:nth-of-type(1) > .btn_primary {width: 100% !important;}
    .onboarding_footer > div:nth-of-type(2) {justify-content: space-between; width: 100%; gap: 10px;}
    .onboarding_footer > div:nth-of-type(2) > * {flex: 1;}
}