.section-auth { height: calc(100% - 20px); background-color: #6b27ff; position: relative; display: flex; align-items: center; justify-content: center; }
.section-auth .wrapper { background-color: #fff; border-radius: 40px; padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; scale: 0.9; align-items: center; }

.section-auth .wrapper .left { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.section-auth .wrapper .left .top { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 24px; color: #494949; }
.section-auth .wrapper .left .top .logo { width: 212px; height: 48px; }

.section-auth .wrapper .left .break { width: 300px; height: 1px; background-color: #00000033; }

.section-auth .wrapper .left .bottom { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 0 40px; }
.section-auth .wrapper .left .bottom .register-step { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 0 40px; }
.section-auth .wrapper .left .bottom .top { display: flex; flex-direction: row; gap: 0; align-items: center; font-weight: 700; margin-top: 0; }
.section-auth .wrapper .left .bottom .top .icon { cursor: pointer; transition: scale 0.5s; display: flex; }
.section-auth .wrapper .left .bottom .top .icon:hover { scale: 1.12; }

.section-auth .wrapper .left .bottom .top .collapse { display: grid; margin-left: 30px; justify-items: center; }
.section-auth .wrapper .left .bottom .top .collapse > * { grid-area: 1 / 1; }
.section-auth .wrapper .left .bottom .top .collapse .bottom { padding: 0; display: grid; grid-template-columns: 1fr 1fr; width: 130px; justify-items: center; }

.section-auth .wrapper .left .bottom .bottom { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.section-auth .wrapper .left .bottom .bottom .row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; }

.section-auth .wrapper .left .bottom .bottom .tos { width: 100%; text-align: left; padding: 0 20px; line-height: 140%; color: #494949; }
.section-auth .wrapper .left .bottom .bottom .tos span { white-space: nowrap; }
.section-auth .wrapper .left .bottom .bottom .tos a { text-decoration: none; color: #6927ff; font-weight: 600; }
.section-auth .wrapper .left .bottom .bottom .tos a:hover { text-decoration: underline; }

.section-auth .wrapper .left .bottom .bottom .global-btn-primary.auth { padding: 20px 94px; }

.section-auth .wrapper .left .bottom .bottom .bottom { display: flex; flex-direction: row; align-items: center; justify-content: center; font-weight: 700; color: #494949; margin-top: 16px; }
.section-auth .wrapper .left .bottom .bottom .bottom a { display: flex; justify-content: center; align-items: center; gap: 6px; color: #6b27ff; text-decoration: none; transition: color 0.3s; }
.section-auth .wrapper .left .bottom .bottom .bottom a * { transition: stroke 0.3s; }
.section-auth .wrapper .left .bottom .bottom .bottom a:hover { color: #9fc119; }
.section-auth .wrapper .left .bottom .bottom .bottom a:hover * { stroke: #9fc119; }

.section-auth .wrapper .verify-step {display: none; flex-direction: column;}
.section-auth .wrapper .verify-step .top { padding-bottom: 10px; justify-content: center; }
.section-auth .wrapper .verify-step .bottom .text { display: flex; }
.section-auth .wrapper .verify-step .bottom .code-row { display: flex; flex-direction: column; }
.section-auth .wrapper .verify-step .bottom .code-row .code-inputs {display: flex; gap: 10px; justify-content: center;}
.section-auth .wrapper .verify-step .bottom .code-row input { width: 50px; height: 60px; padding: 0; border: 1px solid #000; border-radius: 10px; text-align: center; font-size: 20px; }
.section-auth .wrapper .verify-step .bottom .code-row .error { display: none; margin-top: 2px; text-align: center; color: #ED7474; }
.section-auth .wrapper .verify-step .bottom .code-row.invalid input { border-color: #ED7474; }
.section-auth .wrapper .right { border-radius: 40px; }

.section-auth .wrapper .right .mobile { display: none; }
.section-auth .wrapper .right .mobile img { width: 650px; height: auto; }

.section-auth .wrapper .right .desktop { margin-top: -114px;  }
.section-auth .wrapper .right .desktop img { width: 100%; height: fit-content; object-fit: contain; object-position: top; position: relative; margin-top: -114px; z-index: -999; }

.section-auth .wrapper .right .bounding { position: relative; padding: 40px; display: flex; gap: 24px; }
.section-auth .wrapper .right .bounding a { height: fit-content; text-decoration: none; border: 1px solid #fff; padding: 12px 15px; border-radius: 9999px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 4px; justify-content: center; transition: background-color 0.4s, color 0.4s; }
.section-auth .wrapper .right .bounding a * { transition: fill 0.4s; }
.section-auth .wrapper .right .bounding a:hover { background-color: #fff; color: #6927ff; }
.section-auth .wrapper .right .bounding a:hover * { fill: #6927ff; }
.section-auth .wrapper .right .bounding a:focus { background-color: #fff; color: #6927ff; }
.section-auth .wrapper .right .bounding a:focus * { fill: #6927ff; }
.section-auth .wrapper .right .bounding a.active { background-color: #fff; color: #6927ff; }
.section-auth .wrapper .right .bounding a.active:hover * { fill: #fff; }
.section-auth .wrapper .right .bounding a.active:hover { background-color: transparent; color: #fff; }

.section-auth .wrapper .left .input-custom-checkbox {width: 24px; height: 24px; transform: translateY(-2px);}
.section-auth .wrapper .left .input-custom-checkbox::after {width: calc(100% - 14px); height: calc(100% - 14px);}
.section-auth .wrapper .left .custom-checkbox-wrapper .checkbox-text {font-weight: 600;}
.section-auth .wrapper .scrollbox-wrapper {max-height: 300px; overflow: hidden; border-radius: 20px; border: 1px solid #C1C1C1;}
.section-auth .wrapper .scrollbox-wrapper .inner-scroll {overflow: auto; max-height: 300px; padding: 16px;}
.section-auth .wrapper .scrollbox-wrapper .row {margin-bottom: 12px;}
.section-auth .wrapper .scrollbox-wrapper .form-group.full-width {margin-bottom: 12px;}
.section-auth .wrapper .scrollbox-wrapper .tos {margin-bottom: 12px;}

@media all and (max-width: 1600px) {
    .section-auth .wrapper { padding: 20px; }
}

@media all and (max-width: 1400px) {
    .section-auth .wrapper .left .bottom { padding: 0 20px; }
}

@media all and (max-width: 1300px) {
    .section-auth .wrapper { gap: 10px; }
}

@media all and (max-width: 1100px) {
    .section-auth .wrapper { display: flex; flex-direction: column-reverse; padding: 40px; }
    .section-auth .wrapper .right .desktop { display: none; }
    .section-auth .wrapper .right .mobile { display: block; }

    .section-auth .wrapper .right { display: grid; }
    .section-auth .wrapper .right > * { grid-area: 1 / 1; }
    .section-auth .wrapper .right .bounding { display: flex; justify-content: center; align-items: center; }
}

@media all and (max-width: 767px) {
    .section-auth .wrapper .left .bottom { padding: 0; }
    .section-auth .wrapper .right .bounding { padding: 20px; }
    .section-auth .wrapper .left .bottom .bottom .row { grid-template-columns: 1fr; gap: 12px; }
    .section-auth .wrapper .right .mobile img { width: 100%; }
    .section-auth .wrapper .left .break { width: 100%; }
    .section-auth .wrapper .left .bottom .top .collapse { margin-left: 15px; }
}

@media all and (max-width: 440px) {
    .section-auth .wrapper .right .bounding a svg { display: none; }
    .section-auth .wrapper .right .bounding a { font-size: 14px; }
}