/* PKORIX_LOGIN_SIGNATURE_20261010FINAL1
   Canonical sign-in stylesheet. login.css is intentionally NOT loaded here.
   Other auth screens keep their existing login.css untouched. */

:root {
    color-scheme: light;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.pkauth-body { color: #142640; background: #f7fcff; }
button, input { font: inherit; }
a { text-decoration: none; }

.pk-login-page {
    --login-navy: #102f65;
    --login-orange: #ff6b1a;
    --login-cyan: #13b8d4;
    --login-focus: #0788a0;
    --login-muted: #64758e;
    --login-border: #dbe6f0;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: clamp(14px, 2.7vh, 28px) 18px;
    isolation: isolate;
    background: #f7fcff url("../../images/branding/login-waves.svg") center / cover no-repeat;
}

.pk-login-card {
    width: min(100%, 476px);
    padding: clamp(24px, 3vw, 34px) clamp(22px, 3.1vw, 38px);
    border: 1px solid rgba(194, 215, 231, .74);
    border-radius: 26px;
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 66px rgba(14, 43, 91, .11), 0 2px 9px rgba(14, 43, 91, .035);
    color: #142640;
}

.pk-login-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 12px;
}
/* Keep responsive <picture> within the card; center the actual image. */
.pk-login-brand > picture {
    display: flex;
    flex: 0 1 100%;
    min-width: 0;
    justify-content: center;
    align-items: center;
}
.pk-login-logo {
    width: min(100%, 262px);
    height: auto;
    display: block;
    object-fit: contain;
}

.pk-login-heading { text-align: center; margin-bottom: 24px; }
.pk-login-heading h1 {
    margin: 0;
    color: var(--login-navy);
    font-size: clamp(28px, 3vw, 33px);
    line-height: 1.18;
    letter-spacing: -.85px;
    font-weight: 780;
}
.pk-login-heading p {
    margin: 7px 0 0;
    color: var(--login-muted);
    font-size: 13.5px;
    line-height: 1.45;
}

.pk-login-alerts { margin-bottom: 16px; }
.pk-login-alert {
    margin: 0 0 8px;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
}
.pk-login-alert--error { color:#912b37; border:1px solid #f4c7ce; background:#fff1f3; }
.pk-login-alert--success { color:#086849; border:1px solid #abe9d6; background:#edfdf7; }
.pk-login-alert--info { color:#18528a; border:1px solid #bbd9f4; background:#eff7ff; }

.pk-login-field { margin-bottom: 16px; }
.pk-login-field label {
    display: block;
    margin-bottom: 7px;
    color: #172a45;
    font-size: 13px;
    font-weight: 700;
}
.pk-login-input {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--login-border);
    border-radius: 12px;
    padding: 0 13px;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.pk-login-input:focus-within {
    border-color: var(--login-focus);
    box-shadow: 0 0 0 3px rgba(19,184,212,.16);
}
.pk-login-field-icon {
    flex: 0 0 auto;
    color: #8090a5;
    font-size: 20px;
    font-weight: 700;
}
.pk-login-lock {
    width: 19px;
    height: 19px;
    stroke: #8090a5;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pk-login-input input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0;
    outline: none;
    border: 0;
    background: transparent;
    color: #142640;
    font-size: 15px;
}
.pk-login-input input::placeholder { color: #9aa9bd; }
.pk-login-password-toggle {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--login-navy);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.pk-login-password-toggle:hover { background: #edf8fd; }

.pk-login-options { margin: 2px 0 16px; }
.pk-login-remember {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #50637e;
    font-size: 13px;
    cursor: pointer;
}
.pk-login-remember input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--login-navy);
}
.pk-login-primary, .pk-login-free-link {
    width: 100%;
    min-height: 51px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 750;
    cursor: pointer;
    transition: box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}
.pk-login-primary {
    border: 1px solid #102f65;
    color: #fff;
    background: linear-gradient(105deg,#153977 0%,#102f65 73%,#0b2655 100%);
    box-shadow: 0 3px 0 var(--login-orange), 0 11px 24px rgba(16,47,101,.13);
}
.pk-login-primary:hover {
    background: #153c7c;
    transform: translateY(-1px);
    box-shadow: 0 3px 0 var(--login-orange), 0 15px 28px rgba(16,47,101,.19);
}
.pk-login-primary svg, .pk-login-free-link svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pk-login-divider {
    margin: 20px 0 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #8494a8;
    font-size: 12px;
}
.pk-login-divider::before, .pk-login-divider::after {
    content: "";
    height: 1px;
    flex: 1 1 0;
    background: #e3eaf1;
}
.pk-login-free-link {
    position: relative;
    border: 1.5px solid var(--login-navy);
    color: var(--login-navy);
    background: rgba(255,255,255,.85);
}
.pk-login-free-link:hover {
    background: #edfaff;
    box-shadow: 0 8px 23px rgba(16,47,101,.10);
}
.pk-login-password-toggle:focus-visible,
.pk-login-primary:focus-visible,
.pk-login-free-link:focus-visible,
.pk-login-remember input:focus-visible {
    outline: 3px solid var(--login-focus);
    outline-offset: 3px;
}

@media (min-width: 768px) and (max-width: 1199px) {
    .pk-login-page { padding: 22px; }
}

@media (max-width: 767px) {
    .pk-login-page {
        padding: max(12px, env(safe-area-inset-top))
                 max(12px, env(safe-area-inset-right))
                 max(12px, env(safe-area-inset-bottom))
                 max(12px, env(safe-area-inset-left));
        background-position: center;
    }
    .pk-login-card {
        max-width: 440px;
        padding: 23px clamp(18px, 5vw, 28px);
        border-radius: 21px;
    }
    .pk-login-brand { margin-bottom: 10px; }
    .pk-login-logo { width: min(100%, 226px); }
    .pk-login-heading { margin-bottom: 18px; }
    .pk-login-heading h1 { font-size: 28px; }
    .pk-login-input input { font-size: 16px; } /* prevent iOS focus zoom */
}

@media (max-width: 360px) {
    .pk-login-page { padding: 10px; }
    .pk-login-card { padding: 18px 16px; }
    .pk-login-logo { width: min(100%, 196px); }
}

@media (max-height: 740px) {
    .pk-login-page { padding-top: 12px; padding-bottom: 12px; }
    .pk-login-card { padding-top: 18px; padding-bottom: 20px; }
    .pk-login-logo { width: min(100%, 205px); }
    .pk-login-brand { margin-bottom: 6px; }
    .pk-login-heading { margin-bottom: 16px; }
    .pk-login-field { margin-bottom: 12px; }
    .pk-login-options { margin-bottom: 12px; }
    .pk-login-divider { margin: 14px 0 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .pk-login-input, .pk-login-primary, .pk-login-free-link { transition: none; }
    .pk-login-primary:hover { transform: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .pk-login-card { background: #fff; }
}