@import './variables-pc.css';
@import './white-navgation.css';

a.register-link {
    color: var(--color-primary-500);
}

.content-wrapper {
    background-image: url("../images/register/bg.webp");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100vh;
}

.register-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: var(--spacing-60);
    margin-bottom: var(--spacing-56);
    gap: var(--spacing-20);
}

.register-wrapper .section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 45%;
    gap: var(--spacing-8);
}

.register-wrapper .section-header h1 {
    font-size: var(--font-size-8xl);
    color: var(--color-text-primary);
    text-align: justify;
    font-weight: var(--font-weight-bold);
    margin: 0;
}

.subtitle-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    gap: var(--spacing-8);
}

.subtitle-wrapper h3 {
    font-size: var(--font-size-3xl);
    color: var(--color-text-primary);
    text-align: start;
    font-weight: var(--font-weight-normal);
    margin: 0;
}

.subtitle-wrapper .block-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-7);
}

.subtitle-wrapper .list-item {
    font-size: var(--font-size-xl);
    color: var(--color-text-primary);
    text-align: justify;
    font-weight: var(--font-weight-normal);
    display: flex;
    align-items: center;
}

.subtitle-wrapper .dot {
    display: inline-block;
    background: #000000;
    border-radius: 50%;
    position: relative;
    width: var(--font-size-xs);
    height: var(--font-size-xs);
    margin-right: var(--spacing-3_5);
}

.section-content {
    background: var(--color-bg-primary);
    box-shadow: 0 2px 4px 0 rgba(90, 90, 90, 0.50);
    border-radius: var(--border-radius-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-16) var(--spacing-14) var(--spacing-20) var(--spacing-14);
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: var(--spacing-16);
}

.section-content .form-title {
    font-size: var(--font-size-3xl);
    color: #121212;
    text-align: center;
    font-weight: var(--font-weight-normal );
}

.form-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-9);
}

.row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    width: 100%;
}

.name-row {
    gap: var(--spacing-12);
}

.row input[type="text"], .row input[type="password"], .row input[type="email"] {
    border: none;
    outline: none;
    border-bottom: 1px solid #9a9a9a;
    font-size: var(--font-size-lg);
    color: #9a9a9a;
    font-weight: var(--font-weight-normal);
    width: 100%;
    padding-bottom: var(--spacing-1_5);
}

.row input:focus-visible {
    border-bottom: 1px solid #9a9a9a;
}

.col-form-label {
    font-size: var(--font-size-lg);
    color: #9a9a9a;
    font-weight: var(--font-weight-normal);
}

.col {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: var(--spacing-5);
    position: relative;
}

.checkbox-row {
    font-size: var(--font-size-sm);
    color: #121212;
    font-weight: var(--font-weight-normal);
    align-items: flex-start;
}

.btn-submit {
    padding-top: var(--spacing-5);
    padding-bottom: var(--spacing-5);
    width: 100%;
    background: #f67205;
    border-radius: var(--border-radius-xl);
    border: #f67205 1px solid;
    font-size: var(--font-size-lg);
    color: var(--color-text-inverse);
    text-align: center;
    font-weight: var(--font-weight-medium);
}

.btn-submit:hover, .send-code-btn:hover {
    background: #ff9f4f;
    border: #ff9f4f 1px solid;
}

.col.email-col-wrapper {
    margin-bottom: var(--spacing-2_5);
}

.email-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2_5);
    width: 100%;
}

.email-row {
    gap: var(--spacing-1_5);
}

.btn-secondary {
    padding-top: var(--spacing-2_5);
    padding-bottom: var(--spacing-2_5);
    width: 40%;
    background: #f67205;
    border-radius: var(--border-radius-xl);
    border: #f67205 1px solid;
    font-size: var(--font-size-base);
    color: var(--color-text-inverse);
    text-align: center;
    font-weight: 500;
    white-space: nowrap;
}

.countdown-text {
    white-space: nowrap;
}

.form-hint {
    color: #121212;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-xs);
}

.error-message {
    color: red;
    position: absolute;
    top: 115%;
}

.password-toggle {
    position: absolute;
    left: 93%;
    border: none;
    width: var(--size-24);
    height: var(--size-24);
    bottom: var(--spacing-1_5);
}

.hidden-password {
    background-image: url(../images/register/eye-hide.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: unset;
}

.show-password {
    background-image: url(../images/register/eye-show.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: unset;
}