/* KPX login-page redesign — works with the v3.7.0 branding variables. */
:root{
    --kpx-login-text:#172033;
    --kpx-login-muted:#6b7587;
    --kpx-login-border:#dfe5ec;
    --kpx-login-surface:#ffffff;
    --kpx-login-soft:#f6f8fb;
    --kpx-login-shadow:0 32px 80px rgba(8,24,40,.24);
}

*{box-sizing:border-box}

html{
    min-height:100%;
    -webkit-text-size-adjust:100%;
}

body.kpx-auth-page{
    min-height:100vh;
    min-height:100svh;
    margin:0;
    padding:clamp(.75rem,2.2vw,1.5rem);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow-x:hidden;
    overflow-y:auto;
    font-family:'Plus Jakarta Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    color:var(--kpx-login-text);
    background-color:var(--brand-login-background,#0f5f8f)!important;
    background-image:
        linear-gradient(135deg,rgba(4,20,35,.86),rgba(6,61,73,.70)),
        var(--brand-login-image)!important;
    background-size:cover!important;
    background-position:center!important;
    background-attachment:fixed!important;
}

body.kpx-auth-page::before,
body.kpx-auth-page::after{
    content:"";
    position:fixed;
    pointer-events:none;
    border-radius:50%;
    filter:blur(2px);
    opacity:.24;
}

body.kpx-auth-page::before{
    width:420px;
    height:420px;
    left:-180px;
    bottom:-190px;
    background:radial-gradient(circle,color-mix(in srgb,var(--brand-primary,#1a6b4a) 70%,#fff),transparent 68%);
}

body.kpx-auth-page::after{
    width:360px;
    height:360px;
    right:-150px;
    top:-170px;
    background:radial-gradient(circle,color-mix(in srgb,var(--brand-link,#0f5f8f) 72%,#fff),transparent 68%);
}

.kpx-login-shell{
    position:relative;
    z-index:1;
    width:min(1120px,100%);
    min-height:min(720px,calc(100svh - 3rem));
    display:grid;
    grid-template-columns:minmax(0,1.04fr) minmax(400px,.96fr);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.34);
    border-radius:28px;
    background:rgba(255,255,255,.98);
    box-shadow:var(--kpx-login-shadow);
}

.kpx-login-visual{
    position:relative;
    min-height:100%;
    overflow:hidden;
    color:#fff;
    background-color:color-mix(in srgb,var(--brand-primary,#1a6b4a) 76%,#071a2c);
    background-image:
        linear-gradient(150deg,rgba(4,24,38,.92),rgba(7,77,85,.66)),
        var(--brand-login-image);
    background-size:cover;
    background-position:center;
}

.kpx-login-visual::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.18;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='white' stroke-width='1.5' stroke-opacity='.55'%3E%3Cpath d='M110 23v42M89 44h42'/%3E%3Cpath d='M25 145h26l12-29 18 62 19-87 17 48 12-24h66'/%3E%3Ccircle cx='170' cy='58' r='17'/%3E%3Cpath d='M170 47v22M159 58h22'/%3E%3C/g%3E%3C/svg%3E");
    background-size:220px 220px;
}

.kpx-login-visual::after{
    content:"";
    position:absolute;
    width:460px;
    height:460px;
    right:-235px;
    bottom:-230px;
    border:80px solid rgba(255,255,255,.07);
    border-radius:50%;
}

.kpx-login-visual-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.14));
}

.kpx-login-visual-content{
    position:relative;
    z-index:2;
    height:100%;
    min-height:100%;
    padding:clamp(2rem,4.2vw,4rem);
    display:flex;
    flex-direction:column;
}

.kpx-login-brand-lockup{
    display:flex;
    align-items:center;
    gap:1rem;
}

.kpx-login-visual-logo,
.kpx-login-mobile-logo{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    flex:0 0 auto;
    background:#fff;
    box-shadow:0 14px 32px rgba(0,0,0,.18);
}

.kpx-login-visual-logo{
    width:70px;
    height:70px;
    padding:.55rem;
    border-radius:18px;
}

.kpx-login-visual-logo img,
.kpx-login-mobile-logo img{
    display:block;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.kpx-login-logo-fallback{
    color:var(--brand-primary,#1a6b4a);
    font-size:1.75rem;
}

.kpx-login-visual-name{
    max-width:360px;
    font-size:clamp(1.05rem,2vw,1.35rem);
    line-height:1.22;
    font-weight:800;
    overflow-wrap:anywhere;
}

.kpx-login-visual-subname{
    margin-top:.25rem;
    color:rgba(255,255,255,.76);
    font-size:.84rem;
    font-weight:600;
}

.kpx-login-visual-message{
    max-width:520px;
    margin:auto 0;
    padding:4rem 0;
}

.kpx-login-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    margin-bottom:1.25rem;
    padding:.46rem .78rem;
    border:1px solid rgba(255,255,255,.24);
    border-radius:999px;
    background:rgba(255,255,255,.10);
    color:rgba(255,255,255,.90);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.075em;
    text-transform:uppercase;
    backdrop-filter:blur(10px);
}

.kpx-login-eyebrow::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:#65e6b4;
    box-shadow:0 0 0 5px rgba(101,230,180,.13);
}

.kpx-login-visual-message h2{
    max-width:520px;
    margin:0;
    font-size:clamp(2rem,4vw,3.5rem);
    line-height:1.08;
    font-weight:800;
    letter-spacing:-.04em;
}

.kpx-login-visual-message p{
    max-width:460px;
    margin:1.2rem 0 0;
    color:rgba(255,255,255,.78);
    font-size:.98rem;
    line-height:1.7;
}

.kpx-login-contact{
    display:flex;
    flex-wrap:wrap;
    gap:.6rem 1.2rem;
    color:rgba(255,255,255,.76);
    font-size:.76rem;
}

.kpx-login-contact span{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
}

.kpx-login-contact i{color:#9cf0cf}

.kpx-login-panel{
    min-width:0;
    display:flex;
    background:var(--kpx-login-surface);
}

.kpx-login-panel-inner{
    width:min(100%,480px);
    margin:auto;
    padding:clamp(2rem,4.2vw,4rem);
}

.kpx-login-mobile-brand{display:none}

.kpx-login-heading{
    display:flex;
    align-items:center;
    gap:.9rem;
    margin-bottom:1.75rem;
}

.kpx-login-heading-icon{
    width:48px;
    height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border-radius:14px;
    color:var(--brand-primary,#1a6b4a);
    background:color-mix(in srgb,var(--brand-primary,#1a6b4a) 10%,#fff);
    font-size:1.25rem;
}

.kpx-login-heading h1{
    margin:0;
    font-size:clamp(1.7rem,3.2vw,2.15rem);
    line-height:1.15;
    font-weight:800;
    letter-spacing:-.035em;
    color:var(--kpx-login-text);
}

.kpx-login-heading p{
    margin:.38rem 0 0;
    color:var(--kpx-login-muted);
    font-size:.88rem;
}

.kpx-login-form{display:grid;gap:1.15rem}
.kpx-field-group{display:grid;gap:.45rem}

.kpx-auth-page .form-label{
    margin:0;
    color:#344054;
    font-size:.79rem;
    font-weight:700;
}

.kpx-input-wrap{position:relative}

.kpx-input-wrap>i{
    position:absolute;
    z-index:2;
    left:1rem;
    top:50%;
    transform:translateY(-50%);
    color:#8792a5;
    pointer-events:none;
}

.kpx-auth-page .kpx-input-wrap .form-control{
    width:100%;
    min-height:52px;
    padding:.78rem 1rem .78rem 2.85rem;
    border:1.5px solid var(--kpx-login-border);
    border-radius:12px;
    background:#fff;
    color:var(--kpx-login-text);
    font-family:inherit;
    font-size:16px;
    transition:border-color .18s,box-shadow .18s,background .18s;
}

.kpx-auth-page .kpx-password-wrap .form-control{padding-right:3.35rem}

.kpx-auth-page .kpx-input-wrap .form-control::placeholder{color:#9aa4b4}

.kpx-auth-page .kpx-input-wrap .form-control:focus{
    border-color:var(--brand-primary,#1a6b4a)!important;
    background:#fff;
    box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-primary,#1a6b4a) 12%,transparent)!important;
    outline:none;
}

.kpx-password-toggle{
    position:absolute;
    z-index:3;
    right:.42rem;
    top:50%;
    width:42px;
    height:42px;
    transform:translateY(-50%);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#7b8799;
    cursor:pointer;
}

.kpx-password-toggle:hover,
.kpx-password-toggle:focus-visible{
    color:var(--brand-primary,#1a6b4a);
    background:color-mix(in srgb,var(--brand-primary,#1a6b4a) 8%,#fff);
    outline:none;
}

.kpx-auth-page .btn-login{
    width:100%;
    min-height:52px;
    margin-top:.1rem;
    padding:.8rem 1.1rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.7rem;
    border:0;
    border-radius:12px;
    color:#fff;
    background:linear-gradient(135deg,var(--brand-primary,#1a6b4a),var(--brand-button,#1a6b4a))!important;
    box-shadow:0 14px 28px color-mix(in srgb,var(--brand-primary,#1a6b4a) 25%,transparent);
    font-family:inherit;
    font-size:.9rem;
    font-weight:800;
    cursor:pointer;
    transition:transform .18s,box-shadow .18s,filter .18s;
}

.kpx-auth-page .btn-login:hover{
    transform:translateY(-1px);
    filter:brightness(.98);
    box-shadow:0 17px 32px color-mix(in srgb,var(--brand-primary,#1a6b4a) 30%,transparent);
}

.kpx-auth-page .btn-login:focus-visible{
    outline:3px solid color-mix(in srgb,var(--brand-primary,#1a6b4a) 30%,transparent);
    outline-offset:3px;
}

.kpx-auth-page .alert{
    margin-bottom:1.15rem;
    padding:.85rem 1rem;
    border:0;
    border-radius:12px;
    font-size:.82rem;
    line-height:1.45;
}

.kpx-auth-page .alert-danger{color:#991b1b;background:#fff1f2}
.kpx-auth-page .alert-success{color:#166534;background:#ecfdf3}
.kpx-auth-page .alert-warning{color:#92400e;background:#fffbeb}

.kpx-patient-access{margin-top:1.55rem}

.kpx-patient-access-title{
    display:flex;
    align-items:center;
    gap:.75rem;
    margin-bottom:.75rem;
    color:#8a94a5;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.kpx-patient-access-title::before,
.kpx-patient-access-title::after{
    content:"";
    height:1px;
    flex:1;
    background:#e8ecf1;
}

.kpx-patient-access-links{display:grid;gap:.55rem}

.kpx-patient-link{
    min-width:0;
    display:grid;
    grid-template-columns:38px minmax(0,1fr) auto;
    align-items:center;
    gap:.75rem;
    padding:.72rem .78rem;
    border:1px solid #e5e9ef;
    border-radius:12px;
    color:var(--kpx-login-text)!important;
    background:#fbfcfe;
    text-decoration:none!important;
    transition:border-color .18s,background .18s,transform .18s;
}

.kpx-patient-link:hover,
.kpx-patient-link:focus-visible{
    border-color:color-mix(in srgb,var(--brand-primary,#1a6b4a) 38%,#dfe5ec);
    background:color-mix(in srgb,var(--brand-primary,#1a6b4a) 4%,#fff);
    transform:translateY(-1px);
    outline:none;
}

.kpx-patient-link-icon{
    width:38px;
    height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    color:var(--brand-primary,#1a6b4a);
    background:color-mix(in srgb,var(--brand-primary,#1a6b4a) 9%,#fff);
    font-size:1rem;
}

.kpx-patient-link strong,
.kpx-patient-link small{display:block;overflow-wrap:anywhere}
.kpx-patient-link strong{font-size:.78rem;line-height:1.3}
.kpx-patient-link small{margin-top:.16rem;color:#808b9d;font-size:.66rem;line-height:1.35}
.kpx-patient-link-arrow{color:#9ca6b5;font-size:.72rem}

.kpx-login-footer{
    margin-top:1.45rem;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.25rem .45rem;
    color:#8a94a4;
    font-size:.65rem;
    line-height:1.5;
    text-align:center;
}

.kpx-login-footer-separator{color:#c2c9d2}

/* Patient activation and password-reset screens using the same auth layout. */
.kpx-portal-auth-card{
    position:relative;
    z-index:1;
    width:min(100%,500px);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.36);
    border-radius:24px;
    background:#fff;
    box-shadow:var(--kpx-login-shadow);
}

.kpx-portal-auth-card .auth-header{
    position:relative;
    overflow:hidden;
    padding:1.65rem 1.7rem 1.5rem;
    color:#fff;
    text-align:center;
    background:linear-gradient(135deg,color-mix(in srgb,var(--brand-primary,#1a6b4a) 80%,#061c2b),color-mix(in srgb,var(--brand-primary,#1a6b4a) 66%,#0f5f8f));
}

.kpx-portal-auth-card .auth-header::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-85px;
    top:-100px;
    border:38px solid rgba(255,255,255,.08);
    border-radius:50%;
}

.kpx-portal-auth-card .clinic-icon{
    position:relative;
    z-index:1;
    width:56px;
    height:56px;
    margin:0 auto .8rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.22);
    border-radius:16px;
    background:rgba(255,255,255,.13);
    font-size:1.4rem;
}

.kpx-portal-auth-card .auth-header h1{
    position:relative;
    z-index:1;
    margin:0;
    font-size:1.35rem;
    font-weight:800;
}

.kpx-portal-auth-card .auth-header p{
    position:relative;
    z-index:1;
    margin:.4rem 0 0;
    color:rgba(255,255,255,.78);
    font-size:.78rem;
}

.kpx-portal-auth-card .auth-body{padding:1.55rem}

.kpx-portal-auth-card .form-control,
.kpx-portal-auth-card .form-select{
    min-height:48px;
    border:1.5px solid var(--kpx-login-border);
    border-radius:11px;
    font-size:16px;
}

.kpx-portal-auth-card .form-control:focus,
.kpx-portal-auth-card .form-select:focus{
    border-color:var(--brand-primary,#1a6b4a);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-primary,#1a6b4a) 12%,transparent);
}

.kpx-portal-auth-card a{
    color:var(--brand-link,#0f5f8f);
    font-size:.78rem;
    font-weight:700;
    text-decoration:none;
}

.kpx-portal-auth-card a:hover{text-decoration:underline}

@media(max-width:960px){
    body.kpx-auth-page{padding:1rem}

    .kpx-login-shell{
        width:min(100%,540px);
        min-height:auto;
        display:block;
        border-radius:24px;
    }

    .kpx-login-visual{display:none}
    .kpx-login-panel-inner{width:100%;padding:clamp(1.4rem,6vw,2.6rem)}

    .kpx-login-mobile-brand{
        display:flex;
        align-items:center;
        gap:.8rem;
        margin-bottom:2rem;
    }

    .kpx-login-mobile-logo{
        width:54px;
        height:54px;
        padding:.4rem;
        border:1px solid #e5e9ef;
        border-radius:14px;
        box-shadow:0 8px 20px rgba(15,35,55,.09);
    }

    .kpx-login-mobile-brand strong{
        display:block;
        color:var(--kpx-login-text);
        font-size:.92rem;
        line-height:1.25;
    }

    .kpx-login-mobile-brand small{
        display:block;
        margin-top:.2rem;
        color:var(--kpx-login-muted);
        font-size:.68rem;
        font-weight:600;
    }
}

@media(max-width:575.98px){
    body.kpx-auth-page{
        align-items:flex-start;
        padding:.65rem;
        background-attachment:scroll!important;
    }

    .kpx-login-shell,
    .kpx-portal-auth-card{border-radius:19px}
    .kpx-login-panel-inner{padding:1.25rem}
    .kpx-login-mobile-brand{margin-bottom:1.45rem}
    .kpx-login-heading{margin-bottom:1.35rem}
    .kpx-login-heading-icon{width:44px;height:44px;border-radius:12px}
    .kpx-login-heading h1{font-size:1.55rem}
    .kpx-login-heading p{font-size:.8rem}
    .kpx-auth-page .kpx-input-wrap .form-control,.kpx-auth-page .btn-login{min-height:50px}
    .kpx-patient-link{padding:.67rem .68rem}
    .kpx-patient-link small{display:none}
    .kpx-login-footer{margin-top:1.15rem}
    .kpx-portal-auth-card .auth-header{padding:1.3rem 1rem}
    .kpx-portal-auth-card .auth-body{padding:1.15rem}
}

@media(max-height:720px) and (min-width:961px){
    .kpx-login-shell{min-height:650px}
    .kpx-login-visual-content{padding:2.4rem}
    .kpx-login-panel-inner{padding:2.2rem 3rem}
    .kpx-login-visual-message{padding:2.2rem 0}
}

@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
}