/* ==========================================================================
   AUTH — Login, Registration, Password Recovery, Confirmation pages
   ========================================================================== */

.auth-page {

    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6) var(--sp-4);
    background: linear-gradient(135deg, #0d3d22 0%, #1a5c38 40%, #0d4a2a 100%);

}

.auth-card {

    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--sp-10) var(--sp-8);

}

/* === Logo block === */

.auth-logo-block {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-8);

}

.auth-logo-img {

    width: 64px;
    height: 64px;

}

.auth-logo-name {

    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--green-800);
    letter-spacing: -0.02em;

}

/* === Headings === */

.auth-title {

    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--gray-900);
    text-align: center;
    margin-bottom: var(--sp-1);

}

.auth-subtitle {

    font-size: var(--text-sm);
    color: var(--gray-500);
    text-align: center;
    margin-bottom: var(--sp-6);

}

/* === Form === */

.auth-form {

    display: flex;
    flex-direction: column;
    gap: var(--sp-4);

}

.auth-footer-link {

    text-align: center;
    font-size: var(--text-sm);
    color: var(--gray-500);
    margin-top: var(--sp-5);

}

.auth-footer-link a {

    color: var(--green-700);
    font-weight: 500;

}

.auth-footer-link a:hover {
    text-decoration: underline;
}

/* === Confirmation page specifics === */

.confirmation-icon {

    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: var(--color-warning-light);
    border-radius: var(--radius-full);
    margin: 0 auto var(--sp-6);

}

.confirmation-icon img {

    width: 36px;
    height: 36px;

}

.confirmation-text {

    text-align: center;
    color: var(--gray-600);
    font-size: var(--text-sm);
    margin-bottom: var(--sp-6);
    line-height: 1.6;

}

.confirmation-actions {

    display: flex;
    flex-direction: column;
    gap: var(--sp-3);

}

/* === New workspace offer page === */

.new-workspace-features {

    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin: var(--sp-6) 0;

}

.new-workspace-feature {

    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--text-sm);
    color: var(--gray-600);

}

.new-workspace-feature-dot {

    width: 8px;
    height: 8px;
    background: var(--green-500);
    border-radius: var(--radius-full);
    flex-shrink: 0;

}

.btn-primary {

    background: #16a34a;
    color: #fff;
    border-color: #16a34a;

}

.btn-primary:hover {

    background: #15803d;
    border-color: #15803d;

}

.form-checkbox:checked {

    background: #16a34a;
    border-color: #16a34a;

}

.form-checkbox:checked::after {

    content: "";
    position: absolute;
    left: 3px;
    top: 0px;
    width: 6px;
    height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);

}

/* === Responsive === */

@media (max-width: 480px) {

    .auth-card {
        padding: var(--sp-8) var(--sp-5);
    }

}