/*
|--------------------------------------------------------------------------
| Signup Page
|--------------------------------------------------------------------------
*/

.phc-signup-page {

    padding: 50px 0;

    background:
        linear-gradient(
            180deg,
            #F8FBFC 0%,
            #FFFFFF 100%
        );

}

/*
|--------------------------------------------------------------------------
| Wrapper
|--------------------------------------------------------------------------
*/

.phc-signup-wrapper {

    display: flex;

    justify-content: center;

}

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

.phc-signup-card {

    width: 100%;

    max-width: 900px;

    background: #FFFFFF;

    border: 1px solid #E2E8F0;

    border-radius: 28px;

    padding: 36px;

    box-shadow:
        0 10px 40px rgba(15,23,42,0.06);

}

/*
|--------------------------------------------------------------------------
| Title
|--------------------------------------------------------------------------
*/

.phc-signup-title {

    font-size: 34px;

    font-weight: 700;

    color: #0F172A;

    margin-bottom: 10px;

    text-align: center;

}

.phc-signup-subtitle {

    text-align: center;

    color: #64748B;

    margin-bottom: 32px;

    font-size: 16px;

}

/*
|--------------------------------------------------------------------------
| Grid
|--------------------------------------------------------------------------
*/

.phc-signup-grid {

    display: grid;

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

    gap: 20px;

}

/*
|--------------------------------------------------------------------------
| Form Group
|--------------------------------------------------------------------------
*/

.phc-form-group {

    margin-bottom: 22px;

}

.phc-form-group label {

    display: block;

    margin-bottom: 10px;

    font-size: 14px;

    font-weight: 600;

    color: #1E293B;

}

/*
|--------------------------------------------------------------------------
| Inputs
|--------------------------------------------------------------------------
*/

.phc-signup-form input,
.phc-signup-form textarea {

    width: 100%;

    border: 1px solid #CBD5E1;

    border-radius: 14px;

    padding: 14px 16px;

    font-size: 15px;

    background: #FFFFFF;

}

.phc-signup-form textarea {

    min-height: 120px;

    resize: vertical;

}

/*
|--------------------------------------------------------------------------
| File Upload
|--------------------------------------------------------------------------
*/

.phc-signup-form input[type="file"] {

    padding: 12px;

    background: #F8FAFC;

}

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

.phc-signup-btn {

    width: 100%;

    height: 56px;

    font-size: 17px;

    margin-top: 12px;

    border-radius: 14px;

}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .phc-signup-page {

        padding: 28px 0;

    }

    .phc-signup-card {

        padding: 22px;

        border-radius: 22px;

    }

    .phc-signup-title {

        font-size: 28px;

    }

    .phc-signup-grid {

        grid-template-columns: 1fr;

        gap: 0;

    }

}


/*
|--------------------------------------------------------------------------
| Success Modal
|--------------------------------------------------------------------------
*/

.phc-modal-overlay {

    position: fixed;

    inset: 0;

    background:
        rgba(15,23,42,0.55);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 9999;

    padding: 20px;

    backdrop-filter: blur(4px);

}

/*
|--------------------------------------------------------------------------
| Modal Card
|--------------------------------------------------------------------------
*/

.phc-success-modal {

    width: 100%;

    max-width: 460px;

    background: #FFFFFF;

    border-radius: 28px;

    padding: 40px 32px;

    text-align: center;

    box-shadow:
        0 20px 60px rgba(15,23,42,0.18);

    animation:
        phcModalIn 0.25s ease;

}

/*
|--------------------------------------------------------------------------
| Icon
|--------------------------------------------------------------------------
*/

.phc-success-icon {

    width: 82px;

    height: 82px;

    margin: 0 auto 24px;

    border-radius: 50%;

    background:
        rgba(0,168,135,0.10);

    color: var(--phc-primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 40px;

    font-weight: 700;

}

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

.phc-success-modal h2 {

    font-size: 28px;

    line-height: 1.3;

    margin-bottom: 14px;

    color: #0F172A;

}

/*
|--------------------------------------------------------------------------
| Main Text
|--------------------------------------------------------------------------
*/

.phc-success-main {

    font-size: 18px;

    font-weight: 700;

    color: var(--phc-primary);

    margin-bottom: 10px;

}

/*
|--------------------------------------------------------------------------
| Sub Text
|--------------------------------------------------------------------------
*/

.phc-success-sub {

    color: #64748B;

    line-height: 1.7;

    margin-bottom: 30px;

    font-size: 15px;

}

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

.phc-success-close {

    width: 100%;

    height: 56px;

    border-radius: 14px;

    font-size: 16px;

}

/*
|--------------------------------------------------------------------------
| Animation
|--------------------------------------------------------------------------
*/

@keyframes phcModalIn {

    from {

        opacity: 0;

        transform:
            translateY(12px)
            scale(0.96);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}

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

@media (max-width: 768px) {

    .phc-success-modal {

        padding: 30px 22px;

        border-radius: 22px;

    }

    .phc-success-modal h2 {

        font-size: 24px;

    }

    .phc-success-icon {

        width: 72px;

        height: 72px;

        font-size: 34px;

    }

}


.phc-signup-legal {

    margin-top: 22px;

    text-align: center;

    font-size: 13px;

    line-height: 1.7;

    color: #64748B;

}

.phc-signup-legal a {

    color: #0CA678;

    text-decoration: none;

    font-weight: 600;

}

.phc-signup-legal a:hover {

    text-decoration: underline;

}