/* Create Account page (Pages/Account/Signup.cshtml).
 *
 * Loaded via @section Styles, so it renders at the layout's RenderSection("Styles")
 * point — before sidebar-collapse.css / toast.css / confirm-modal.css. Every selector
 * here is scoped to .signup-* / .aside-* / .wv-* and none of them collide with those
 * three, so the earlier position does not change what wins.
 */

.signup-page {
    background: radial-gradient(1200px 600px at 100% -10%, #eaf0ff 0%, rgba(234,240,255,0) 55%),
                radial-gradient(900px 500px at -10% 110%, #eef6ff 0%, rgba(238,246,255,0) 50%),
                #f6f8fc;
    padding: 50px 0 70px;
}

.signup-shell {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.35fr;
    background: #fff;
    border: 1px solid #e7ecf4;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(7,27,99,.10);
}

/* ---------- LEFT BRAND PANEL ---------- */
.signup-aside {
    position: relative;
    padding: 44px 38px;
    color: #eaf1ff;
    background: linear-gradient(160deg, #0b1f6b 0%, #12369e 48%, #2563eb 100%);
    overflow: hidden;
}

    .signup-aside::after {
        content: "";
        position: absolute;
        width: 320px;
        height: 320px;
        right: -120px;
        bottom: -120px;
        border-radius: 50%;
        background: rgba(255,255,255,.08);
    }

    .signup-aside::before {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        left: -70px;
        top: -60px;
        border-radius: 50%;
        background: rgba(255,255,255,.06);
    }

.aside-label {
    position: relative;
    z-index: 1;
    display: inline-block;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #9fc0ff;
    margin-bottom: 14px;
}

.aside-title {
    position: relative;
    z-index: 1;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
    margin-bottom: 16px;
    color: #fff;
}

.aside-desc {
    position: relative;
    z-index: 1;
    font-size: 14.5px;
    line-height: 1.7;
    color: #cfdcff;
    margin-bottom: 30px;
}

.aside-benefits {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .aside-benefits li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 14px;
        color: #e7eeff;
    }

    .aside-benefits i {
        flex-shrink: 0;
        width: 26px;
        height: 26px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,.14);
        color: #bcd3ff;
        font-size: 12px;
    }

/* ---------- RIGHT FORM CARD ---------- */
.signup-card {
    padding: 40px 40px 36px;
}

.signup-card-head {
    margin-bottom: 24px;
}

    .signup-card-head h3 {
        font-size: 20px;
        font-weight: 800;
        color: #0b1f6b;
        margin: 0 0 6px;
    }

    .signup-card-head p {
        font-size: 13.5px;
        color: #64748b;
        margin: 0;
    }

.signup-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px;
}

.signup-field {
    display: flex;
    flex-direction: column;
}

    .signup-field.full {
        grid-column: span 2;
    }

    .signup-field label {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .3px;
        text-transform: uppercase;
        color: #34406b;
        margin-bottom: 8px;
    }

        .signup-field label .req {
            color: #ef4444;
            margin-left: 2px;
        }

    .signup-field input,
    .signup-field select {
        height: 48px;
        border: 1px solid #dbe4f0;
        border-radius: 11px;
        padding: 0 14px;
        font-size: 14px;
        color: #0f172a;
        background: #f8faff;
        transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

        .signup-field input::placeholder {
            color: #9aa7bd;
        }

        .signup-field input:hover,
        .signup-field select:hover {
            border-color: #b9c8e6;
        }

        .signup-field input:focus,
        .signup-field select:focus {
            outline: none;
            background: #fff;
            border-color: #2563eb;
            box-shadow: 0 0 0 4px rgba(37,99,235,.12);
        }

.text-danger {
    color: #dc2626;
    font-size: 12px;
    margin-top: 6px;
}

.signup-actions {
    margin-top: 30px;
    display: flex;
    gap: 12px;
    align-items: center;
}

    .signup-actions .btn-primary-custom {
        border: none;
        cursor: pointer;
        padding: 14px 30px;
        border-radius: 11px;
        font-size: 14px;
        font-weight: 700;
        box-shadow: 0 10px 22px rgba(37,99,235,.25);
    }

        .signup-actions .btn-primary-custom:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 28px rgba(37,99,235,.32);
        }

.signup-login-hint {
    margin-top: 22px;
    font-size: 13.5px;
    color: #64748b;
}

    .signup-login-hint a {
        color: #2563eb;
        font-weight: 700;
        text-decoration: none;
    }

        .signup-login-hint a:hover {
            text-decoration: underline;
        }

.validation-summary-errors {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    margin-bottom: 22px;
    font-size: 14px;
    font-weight: 600;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
}

/* ---------- LOADER OVERLAY ---------- */
.wv-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 31, 107, .45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 16px;
}

    .wv-overlay.active {
        display: flex;
    }

.wv-loader-box {
    background: #fff;
    border-radius: 16px;
    padding: 34px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-shadow: 0 20px 50px rgba(7,27,99,.25);
    text-align: center;
    max-width: 320px;
}

.wv-spinner {
    width: 42px;
    height: 42px;
    border: 4px solid #dbe4f0;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: wv-spin .8s linear infinite;
}

@keyframes wv-spin {
    to { transform: rotate(360deg); }
}

.wv-loader-box p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #34406b;
}

/* ---------- SUCCESS MODAL ---------- */
.wv-modal-box {
    background: #fff;
    border-radius: 18px;
    padding: 34px 34px 28px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(7,27,99,.25);
}

.wv-modal-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 18px;
}

.wv-modal-box h4 {
    font-size: 18px;
    font-weight: 800;
    color: #0b1f6b;
    margin: 0 0 10px;
}

.wv-modal-box p {
    font-size: 13.5px;
    color: #56607a;
    line-height: 1.6;
    margin: 0 0 24px;
}

.wv-modal-box button {
    border: none;
    cursor: pointer;
    padding: 12px 40px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 700;
    background: #2563eb;
    color: #fff;
    transition: background .2s ease, transform .2s ease;
}

    .wv-modal-box button:hover {
        background: #1d4ed8;
        transform: translateY(-2px);
    }

@media (max-width: 900px) {
    .signup-shell {
        grid-template-columns: 1fr;
    }

    .signup-aside {
        display: none;
    }
}

@media (max-width: 768px) {
    .signup-page {
        padding: 26px 0 40px;
    }

    .signup-card {
        padding: 28px 22px;
    }

    .signup-grid {
        grid-template-columns: 1fr;
    }

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

    .signup-actions {
        flex-direction: column;
        align-items: stretch;
    }

        .signup-actions .btn-primary-custom,
        .signup-actions .btn-outline-custom {
            width: 100%;
            justify-content: center;
        }
}