/* ProfilHub auth premium layer */
:root {
    --ph-auth-ink: #101827;
    --ph-auth-muted: #607086;
    --ph-auth-line: #dbe3ed;
    --ph-auth-soft: #f5f8fc;
    --ph-auth-teal: #0f9f8f;
    --ph-auth-teal-dark: #0b766c;
    --ph-auth-shadow: 0 28px 80px rgba(17, 24, 39, .12);
}

html,
body {
    min-height: 100%;
}

body {
    overflow-x: hidden;
    background:
        radial-gradient(circle at 8% 0%, rgba(15, 159, 143, .12), transparent 28vw),
        radial-gradient(circle at 92% 4%, rgba(49, 92, 253, .1), transparent 32vw),
        linear-gradient(180deg, #f7f9fd 0%, #fff 54%, #eef4fb 100%) !important;
    color: var(--ph-auth-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.authImage {
    min-height: 100vh;
    background: transparent !important;
}

.authImage > .dropdown {
    position: fixed;
    top: 22px;
    right: 28px;
    z-index: 20;
}

.authImage > .dropdown .btn {
    min-height: 44px;
    border: 1px solid var(--ph-auth-line) !important;
    border-radius: 8px !important;
    padding: 0 16px !important;
    background: rgba(255, 255, 255, .88) !important;
    color: var(--ph-auth-ink) !important;
    box-shadow: 0 14px 34px rgba(17, 24, 39, .08);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    font-size: 14px;
    font-weight: 800;
}

.authImage > .dropdown .dropdown-menu {
    border: 1px solid var(--ph-auth-line);
    border-radius: 8px;
    box-shadow: var(--ph-auth-shadow);
}

.top-vector,
.bottom-vector {
    display: none !important;
}

.login-section,
.register-section,
.forget-password-section {
    min-height: 100vh !important;
    background: transparent !important;
}

.login-section > .row,
.register-section > .row,
.forget-password-section > .row {
    min-height: 100vh;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto !important;
    padding: 72px 22px;
}

.login-img,
.register-img,
.forget-password-img {
    position: relative;
    overflow: hidden;
    height: min(720px, calc(100vh - 130px)) !important;
    min-height: 520px;
    border: 1px solid rgba(255, 255, 255, .64);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(16, 24, 39, .12), rgba(15, 159, 143, .08)),
        #e9f0f8;
    box-shadow: var(--ph-auth-shadow);
}

.login-img::before,
.register-img::before,
.forget-password-img::before {
    position: absolute;
    inset: 44px;
    border: 1px solid rgba(255, 255, 255, .68);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .82) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(255, 255, 255, .62) 0 1px, transparent 1px 100%),
        radial-gradient(circle at 22% 20%, rgba(255, 255, 255, .72), transparent 26%),
        linear-gradient(135deg, rgba(16, 24, 39, .84), rgba(15, 159, 143, .62));
    background-size: 72px 72px, 72px 72px, auto, auto;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 30px 70px rgba(17, 24, 39, .2);
    content: "";
}

.login-img::after,
.register-img::after,
.forget-password-img::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(16, 24, 39, 0) 42%, rgba(16, 24, 39, .42)),
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .42), transparent 26%);
    content: "";
}

.login-img img,
.register-img img,
.forget-password-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    filter: saturate(.92) contrast(1.03);
}

.login-form,
.register-form,
.forget-password-form {
    width: min(100%, 540px);
    margin: 0 auto;
    border: 1px solid rgba(219, 227, 237, .92);
    border-radius: 8px;
    padding: clamp(26px, 4vw, 42px);
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--ph-auth-shadow);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
}

.register-form {
    width: min(100%, 620px);
    max-height: calc(100vh - 118px);
    overflow: auto;
}

.login-form > div,
.register-form > div,
.forget-password-form > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
}

.login-app-name {
    justify-content: flex-start !important;
    margin-bottom: 28px;
}

.login-app-name .image,
.forget-password-form .image {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    margin-bottom: 0 !important;
}

.login-app-name img,
.forget-password-form .logo-fix-size {
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px;
    object-fit: contain;
    box-shadow: 0 12px 26px rgba(17, 24, 39, .14);
}

.ph-auth-logo-mark {
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 8px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .58), transparent 24%),
        linear-gradient(135deg, #101827 0%, #0f9f8f 100%);
    color: #fff;
    box-shadow: 0 12px 26px rgba(17, 24, 39, .14);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0;
}

.login-app-name > span,
.forget-password-form .text-gray-900 {
    color: var(--ph-auth-ink) !important;
    font-size: 22px !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

.login-form h1,
.register-form h1,
.forget-password-form h1 {
    margin: 0 0 26px !important;
    color: var(--ph-auth-ink) !important;
    text-align: left !important;
    font-size: clamp(30px, 3vw, 42px) !important;
    line-height: 1.05;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

.forget-password-form .fw-bold,
.forget-password-form .fs-4 {
    color: var(--ph-auth-muted) !important;
    text-align: left !important;
    font-size: 15px !important;
    line-height: 1.55;
}

.form-label {
    margin-bottom: 8px;
    color: #344258 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.form-control,
.form-select {
    min-height: 52px !important;
    border: 1px solid var(--ph-auth-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--ph-auth-ink) !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 650 !important;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(15, 159, 143, .48) !important;
    box-shadow: 0 0 0 4px rgba(15, 159, 143, .12) !important;
}

.form-check-input {
    width: 22px;
    height: 22px;
    border: 1px solid var(--ph-auth-line);
    border-radius: 6px !important;
}

.form-check-input:checked {
    border-color: var(--ph-auth-teal);
    background-color: var(--ph-auth-teal);
}

.login-btn,
.register-btn,
.reset-link {
    min-height: 52px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #101827 0%, #0f9f8f 100%) !important;
    color: #fff !important;
    box-shadow: 0 18px 36px rgba(15, 159, 143, .22) !important;
    font-size: 15px !important;
    font-weight: 850 !important;
}

.login-btn:hover,
.register-btn:hover,
.reset-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 42px rgba(15, 159, 143, .28) !important;
}

.btn-secondary {
    min-height: 52px !important;
    border: 1px solid var(--ph-auth-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--ph-auth-ink) !important;
    font-weight: 850 !important;
}

.link-info,
.copyright a {
    color: var(--ph-auth-teal-dark) !important;
    font-weight: 800;
}

.text-gray-700,
.text-muted,
.copyright {
    color: var(--ph-auth-muted) !important;
}

.copy-right {
    margin-top: 24px;
}

.google-btn,
.facebook-btn {
    min-height: 48px;
    border: 1px solid var(--ph-auth-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--ph-auth-ink) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.alert {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 14px 32px rgba(17, 24, 39, .12);
}

@media (max-width: 767px) {
    .authImage > .dropdown {
        position: static;
        margin: 14px 16px 0 auto;
    }

    .login-section > .row,
    .register-section > .row,
    .forget-password-section > .row {
        min-height: auto;
        padding: 28px 14px 42px;
    }

    .login-form,
    .register-form,
    .forget-password-form {
        width: 100%;
        max-height: none;
        padding: 24px;
    }

    .login-form h1,
    .register-form h1,
    .forget-password-form h1 {
        font-size: 32px !important;
    }
}