/* ----------------------------------- */
/* __---REGISTER PAGE CSS---___ */
/* ----------------------------------- */

.register {max-width: 630px; margin-inline: auto; margin-block: 50px 70px;}
.register .title > :first-child {font-size: calc(var(--fs-lg) - 2px); font-weight: 800; line-height: 1.15;}
.register .title > :nth-child(2) {display: block; font-size: var(--fs-base); font-weight: 800; line-height: 1.15; margin-block: 20px 15px;}
.register label {display: block; font-size: var(--fs-base); font-weight: 700; margin-bottom: 4px;}
.register .register-form label > :first-child {color: var(--_c-dark-red); font-size: var(--fs-xs);}
.register form {display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;}
.register input {height: 50px; font-size: var(--fs-xs); padding-inline: 16px; border: 1px solid var(--_c-product-border); border-radius: 4px; outline: none;}
.register input::placeholder {font-weight: 400; color: var(--_c-font-color);}
.register input:focus {border: 1px solid #000;}
.register button {width: fit-content; padding: 8px 15px; margin-top: 20px;}
.register .visible {width: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: unset; border: 0; background-color: transparent; padding: 0; margin-top: unset;}
.register .visible img {display: none; cursor: pointer; transition: var(--transition);}
.register input[type="password"] {border: transparent; padding: unset;}
.register input[type="password"]:focus {outline: none;}
.register .password-box {display: flex; align-items: center;  border: 1px solid var(--_c-product-border); border-radius: 4px; padding-inline: 16px;}
.register .password-box:focus-within {border: 1px solid #000;}
.register .changeStyle {border: 0; outline: unset; width: 100%; padding: unset; }
.register .changeStyle:focus {outline: unset; border: 0;}


@media only screen and (max-width: 475px) {
    .register form {grid-template-columns: 1fr;}
    .register button {margin-top: unset;}
}