/*
|--------------------------------------------------------------------------
| CyberDojo - Register Page
|--------------------------------------------------------------------------
|
| Registration-specific styling.
|
| Shared authentication styling:
|
| /assets/css/auth/auth.css
|
| Shared verification splash styling:
|
| /assets/css/auth/resend-verification.css
|
*/


/*
|--------------------------------------------------------------------------
| Shared Verification Splash
|--------------------------------------------------------------------------
*/

@import url('./resend-verification.css');


/*
|--------------------------------------------------------------------------
| Registration Card
|--------------------------------------------------------------------------
*/

.register-card {
    max-width: 620px;
}


/*
|--------------------------------------------------------------------------
| Registration Container
|--------------------------------------------------------------------------
*/

.page-register .auth-container {
    padding-top: 42px;
    padding-bottom: 42px;
}


/*
|--------------------------------------------------------------------------
| Registration Heading
|--------------------------------------------------------------------------
*/

.page-register .auth-heading {
    margin-bottom: 26px;
}


.page-register .auth-heading p {
    max-width: 430px;
}


/*
|--------------------------------------------------------------------------
| Registration Form
|--------------------------------------------------------------------------
*/

.page-register .auth-form {
    gap: 20px;
}


/*
|--------------------------------------------------------------------------
| Field Grid
|--------------------------------------------------------------------------
|
| Reserved for future registration fields such as:
|
| - First / Last Name
| - Phone / Alternate Contact
|
*/

.register-field-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 18px;
}


/*
|--------------------------------------------------------------------------
| Full Width Field
|--------------------------------------------------------------------------
*/

.register-field-full {
    grid-column:
        1 / -1;
}


/*
|--------------------------------------------------------------------------
| Password Section
|--------------------------------------------------------------------------
*/

.register-password-section {
    display: grid;

    gap: 18px;

    padding: 18px;

    border:
        1px solid
        var(--border-neutral);

    border-radius:
        var(--radius-lg);

    background:
        rgba(
            255,
            255,
            255,
            0.012
        );
}


/*
|--------------------------------------------------------------------------
| Password Section Header
|--------------------------------------------------------------------------
*/

.register-password-heading {
    display: flex;

    align-items:
        flex-start;

    gap: 10px;

    padding-bottom: 14px;

    border-bottom:
        1px solid
        var(--border-neutral);
}


.register-password-heading > i {
    flex-shrink: 0;

    margin-top: 2px;

    color:
        var(--accent);

    font-size: 1rem;
}


.register-password-heading strong,
.register-password-heading span {
    display: block;
}


.register-password-heading strong {
    color:
        var(--text-primary);

    font-size:
        var(--text-sm);
}


.register-password-heading span {
    margin-top: 3px;

    color:
        var(--text-subtle);

    font-size:
        var(--text-xs);

    line-height: 1.5;
}


/*
|--------------------------------------------------------------------------
| Password Requirements
|--------------------------------------------------------------------------
*/

.page-register
.password-requirements {
    margin-top: 4px;

    padding:
        12px
        14px;

    border:
        1px solid
        var(--border-neutral);

    border-radius:
        var(--radius-md);

    background:
        var(--bg-tertiary);
}


.page-register
.password-requirements
span {
    min-height: 22px;
}


/*
|--------------------------------------------------------------------------
| Valid Requirement
|--------------------------------------------------------------------------
*/

.page-register
.password-requirements
span.is-valid {
    color:
        var(--success);
}


/*
|--------------------------------------------------------------------------
| Password Match Message
|--------------------------------------------------------------------------
*/

.register-password-match {
    display: flex;

    align-items:
        center;

    gap: 6px;

    min-height: 18px;

    color:
        var(--text-subtle);

    font-size:
        var(--text-xs);
}


.register-password-match.is-valid {
    color:
        var(--success);
}


.register-password-match.is-invalid {
    color:
        var(--danger);
}


/*
|--------------------------------------------------------------------------
| Legal Agreements
|--------------------------------------------------------------------------
*/

.page-register
.auth-legal {
    margin-top: 2px;
}


/*
|--------------------------------------------------------------------------
| Legal Checkbox Rows
|--------------------------------------------------------------------------
*/

.page-register
.auth-checkbox {
    padding:
        3px
        0;
}


/*
|--------------------------------------------------------------------------
| Legal Links
|--------------------------------------------------------------------------
*/

.page-register
.auth-checkbox-text
a {
    position:
        relative;
}


.page-register
.auth-checkbox-text
a::after {
    content: "";

    position:
        absolute;

    right: 0;
    bottom: -2px;
    left: 0;

    height: 1px;

    background:
        currentColor;

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform
        var(--transition-fast);
}


.page-register
.auth-checkbox-text
a:hover::after {
    transform:
        scaleX(1);

    transform-origin:
        left;
}


/*
|--------------------------------------------------------------------------
| Submit Button
|--------------------------------------------------------------------------
*/

.page-register
.auth-submit {
    margin-top: 4px;
}


/*
|--------------------------------------------------------------------------
| Disabled Registration Button
|--------------------------------------------------------------------------
*/

.page-register
.auth-submit:disabled {
    transform: none;

    box-shadow: none;
}


/*
|--------------------------------------------------------------------------
| Ready Registration Button
|--------------------------------------------------------------------------
*/

.page-register
.auth-submit.is-ready {
    box-shadow:
        0 10px 28px
        rgba(
            255,
            215,
            0,
            0.10
        );
}


/*
|--------------------------------------------------------------------------
| Registration Information
|--------------------------------------------------------------------------
*/

.register-info {
    display: flex;

    align-items:
        flex-start;

    gap: 10px;

    padding:
        14px
        15px;

    border:
        1px solid
        var(--border-neutral);

    border-radius:
        var(--radius-lg);

    background:
        rgba(
            255,
            215,
            0,
            0.025
        );

    color:
        var(--text-muted);

    font-size:
        var(--text-xs);

    line-height: 1.6;
}


.register-info > i {
    flex-shrink: 0;

    margin-top: 2px;

    color:
        var(--accent);
}


/*
|--------------------------------------------------------------------------
| Registration Success
|--------------------------------------------------------------------------
|
| The registration success screen now uses the same verification-splash
| component as resend-verification.php.
|
*/

.register-success {
    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Verification Splash on Register
|--------------------------------------------------------------------------
*/

.page-register
.verification-splash {
    width: 100%;

    padding:
        6px
        0
        2px;
}


/*
|--------------------------------------------------------------------------
| Register Success Icon
|--------------------------------------------------------------------------
*/

.page-register
.verification-splash-icon {
    width: 80px;

    height: 80px;
}


/*
|--------------------------------------------------------------------------
| Register Success Heading
|--------------------------------------------------------------------------
*/

.page-register
.verification-splash-heading {
    max-width: 470px;
}


.page-register
.verification-splash-heading h2 {
    margin: 0;

    color:
        var(--text-primary);

    font-size:
        clamp(
            1.85rem,
            5vw,
            2.3rem
        );

    font-weight:
        var(--font-black);

    letter-spacing:
        -0.035em;
}


.page-register
.verification-splash-heading p {
    max-width: 440px;

    margin:
        0
        auto;

    color:
        var(--text-muted);

    font-size:
        var(--text-sm);

    line-height:
        var(--leading-relaxed);
}


/*
|--------------------------------------------------------------------------
| Register Success Email
|--------------------------------------------------------------------------
*/

.page-register
.verification-splash-email {
    max-width: 100%;
}


/*
|--------------------------------------------------------------------------
| Verification Instruction
|--------------------------------------------------------------------------
*/

.page-register
.verification-splash-instruction {
    max-width: 440px;
}


/*
|--------------------------------------------------------------------------
| Mail Help
|--------------------------------------------------------------------------
*/

.page-register
.verification-mail-help {
    margin-top: 2px;
}


/*
|--------------------------------------------------------------------------
| Verification Expiry
|--------------------------------------------------------------------------
*/

.page-register
.verification-expiry {
    margin-top: 1px;
}


/*
|--------------------------------------------------------------------------
| Registration Splash Action
|--------------------------------------------------------------------------
*/

.page-register
.verification-splash-action {
    margin-top: 2px;
}


/*
|--------------------------------------------------------------------------
| Secondary Verification Link
|--------------------------------------------------------------------------
*/

.page-register
.verification-secondary-link {
    display: inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap: 7px;

    color:
        var(--text-subtle);

    font-size:
        var(--text-xs);

    font-weight:
        var(--font-bold);

    text-decoration: none;

    transition:
        color
        var(--transition-fast);
}


.page-register
.verification-secondary-link:hover {
    color:
        var(--accent);
}


.page-register
.verification-secondary-link i {
    transition:
        transform
        var(--transition-fast);
}


.page-register
.verification-secondary-link:hover i {
    transform:
        rotate(-45deg);
}


/*
|--------------------------------------------------------------------------
| Support Link
|--------------------------------------------------------------------------
*/

.page-register
.verification-support {
    padding-top: 2px;
}


/*
|--------------------------------------------------------------------------
| Registration Logo
|--------------------------------------------------------------------------
*/

.page-register
.auth-logo {
    animation:
        register-logo-glow
        4.5s
        ease-in-out
        infinite;
}


@keyframes register-logo-glow {

    0%,
    100% {

        box-shadow:
            0 0 0 6px
            rgba(
                255,
                215,
                0,
                0.02
            ),
            0 0 26px
            rgba(
                255,
                215,
                0,
                0.09
            );
    }


    50% {

        box-shadow:
            0 0 0 7px
            rgba(
                255,
                215,
                0,
                0.035
            ),
            0 0 44px
            rgba(
                255,
                215,
                0,
                0.17
            );
    }

}


/*
|--------------------------------------------------------------------------
| Registration Card Entry
|--------------------------------------------------------------------------
*/

.page-register
.auth-page.auth-page-ready
.register-card {
    animation:
        register-card-entry
        480ms
        ease
        both;
}


@keyframes register-card-entry {

    from {

        opacity: 0;

        transform:
            translateY(18px)
            scale(0.985);
    }


    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/*
|--------------------------------------------------------------------------
| Success Splash Entry
|--------------------------------------------------------------------------
*/

.page-register
.auth-page.auth-page-ready
.verification-splash {
    animation:
        register-success-entry
        520ms
        ease
        both;
}


@keyframes register-success-entry {

    from {

        opacity: 0;

        transform:
            translateY(8px);
    }


    to {

        opacity: 1;

        transform:
            translateY(0);
    }

}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (
    max-width: 768px
) {

    .register-card {
        max-width: 560px;
    }


    .register-field-grid {
        gap: 16px;
    }


    .page-register
    .verification-splash-heading {
        max-width: 100%;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (
    max-width: 620px
) {

    .register-card {
        max-width: 100%;
    }


    .page-register
    .auth-container {
        padding-top: 20px;

        padding-bottom: 20px;
    }


    .register-field-grid {
        grid-template-columns:
            1fr;
    }


    .register-field-full {
        grid-column:
            auto;
    }


    .register-password-section {
        padding: 15px;
    }


    .page-register
    .password-requirements {
        grid-template-columns:
            1fr;

        padding:
            11px
            12px;
    }


    .page-register
    .verification-splash-icon {
        width: 72px;

        height: 72px;
    }


    .page-register
    .verification-splash-heading h2 {
        font-size: 1.85rem;
    }

}


/*
|--------------------------------------------------------------------------
| Small Mobile
|--------------------------------------------------------------------------
*/

@media (
    max-width: 420px
) {

    .register-password-section {
        padding: 14px;
    }


    .register-password-heading {
        gap: 8px;
    }


    .register-info {
        padding: 12px;
    }


    .page-register
    .verification-splash {
        gap: 17px;
    }


    .page-register
    .verification-splash-icon {
        width: 66px;

        height: 66px;

        font-size: 1.6rem;
    }


    .page-register
    .verification-splash-heading h2 {
        font-size: 1.7rem;
    }


    .page-register
    .verification-mail-help {
        padding: 14px;
    }


    .page-register
    .verification-expiry {
        padding: 12px;
    }

}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (
    prefers-reduced-motion: reduce
) {

    .page-register
    .auth-logo,

    .page-register
    .auth-page.auth-page-ready
    .register-card,

    .page-register
    .auth-page.auth-page-ready
    .verification-splash {
        animation:
            none !important;
    }


    .page-register
    .auth-checkbox-text
    a::after,

    .page-register
    .verification-secondary-link,

    .page-register
    .verification-secondary-link i {
        transition:
            none;
    }

}