/* ==========================================================================
   Kasi Mattress Admin
   File: /assets/css/login.css
   Login UI — presentation only
   ========================================================================== */

:root {
    --km-navy: #0F4C81;
    --km-navy-dark: #0A365B;
    --km-gold: #F4A300;

    --km-white: #FFFFFF;
    --km-text: #333333;
    --km-muted: #6B7280;

    --km-border: #D7DEE6;
    --km-border-focus: #0F4C81;

    --km-page-bg: #F4F6F8;
    --km-input-bg: #FFFFFF;

    --km-danger: #B42318;
    --km-danger-bg: #FEF3F2;
}


/* ==========================================================================
   RESET
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;

    background: var(--km-page-bg);
    color: var(--km-text);

    font-family: "Inter", sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input {
    font: inherit;
}


/* ==========================================================================
   LOGIN PAGE
   ========================================================================== */

.km-login-page {
    min-height: 100vh;

    display: grid;
    grid-template-columns: 45% 55%;
}


/* ==========================================================================
   LEFT / FORM SIDE
   ========================================================================== */

.km-login-panel {
    width: 100%;
    max-width: 560px;

    margin: 0 auto;

    padding: 48px 56px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* ==========================================================================
   BRAND
   ========================================================================== */

.km-login-brand {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 55px;
}

.km-brand-mark {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 46px;

    border-radius: 10px;

    background: var(--km-navy);
    color: var(--km-white);

    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.km-brand-name {
    display: block;

    color: var(--km-navy);

    font-family: "Poppins", sans-serif;
    font-size: 17px;
    font-weight: 700;

    line-height: 1.2;
}

.km-brand-tagline {
    display: block;

    margin-top: 3px;

    color: var(--km-muted);

    font-size: 11px;
    font-weight: 500;
}


/* ==========================================================================
   HEADING
   ========================================================================== */

.km-login-heading {
    margin-bottom: 30px;
}

.km-eyebrow {
    display: block;

    margin-bottom: 9px;

    color: var(--km-gold);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.km-login-heading h1 {
    margin: 0;

    color: #182230;

    font-family: "Poppins", sans-serif;

    font-size: 36px;
    font-weight: 600;

    line-height: 1.2;
}

.km-login-heading p {
    margin: 12px 0 0;

    color: var(--km-muted);

    font-size: 14px;

    line-height: 1.65;
}


/* ==========================================================================
   LOGIN FORM
   ========================================================================== */

.km-login-form {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 20px;

    margin: 0;
}


/* ==========================================================================
   FIELD
   ========================================================================== */

.km-field {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 8px;
}

.km-field > label {
    display: block;

    margin: 0;

    color: #253242;

    font-size: 13px;
    font-weight: 600;

    line-height: 1.4;
}


/* ==========================================================================
   PASSWORD LABEL ROW
   ========================================================================== */

.km-field-label-row {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.km-field-label-row label {
    color: #253242;

    font-size: 13px;
    font-weight: 600;
}


/* ==========================================================================
   INPUTS
   ========================================================================== */

.km-field input[type="email"],
.km-field input[type="password"],
.km-field input[type="text"] {
    display: block;

    width: 100%;
    height: 52px;

    margin: 0;

    padding: 0 15px;

    border: 1px solid var(--km-border);
    border-radius: 8px;

    outline: none;

    background: var(--km-input-bg);
    color: #182230;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;

    line-height: normal;

    appearance: none;
    -webkit-appearance: none;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}

.km-field input[type="email"]::placeholder,
.km-field input[type="password"]::placeholder,
.km-field input[type="text"]::placeholder {
    color: #9AA4B2;
    opacity: 1;
}

.km-field input[type="email"]:hover,
.km-field input[type="password"]:hover,
.km-field input[type="text"]:hover {
    border-color: #B8C3CE;
}

.km-field input[type="email"]:focus,
.km-field input[type="password"]:focus,
.km-field input[type="text"]:focus {
    border-color: var(--km-border-focus);

    background: var(--km-white);

    box-shadow:
        0 0 0 3px rgba(15, 76, 129, 0.10);
}


/* ==========================================================================
   PASSWORD
   ========================================================================== */

.km-password-wrap {
    position: relative;

    width: 100%;
}

.km-password-wrap input {
    width: 100%;
}


/* ==========================================================================
   SHOW / HIDE PASSWORD
   ========================================================================== */

.km-password-toggle {
    appearance: none;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    color: var(--km-navy);

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}

.km-password-toggle:hover {
    color: var(--km-navy-dark);

    text-decoration: underline;
}

.km-password-toggle:focus-visible {
    outline: 2px solid rgba(244, 163, 0, 0.45);

    outline-offset: 3px;

    border-radius: 3px;
}


/* ==========================================================================
   OPTIONS
   ========================================================================== */

.km-login-options {
    width: 100%;

    min-height: 22px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 1px;
}


/* ==========================================================================
   REMEMBER ME
   ========================================================================== */

.km-checkbox {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin: 0;

    color: #596575;

    font-size: 12px;
    font-weight: 400;

    cursor: pointer;
}

.km-checkbox input {
    width: 15px;
    height: 15px;

    margin: 0;

    accent-color: var(--km-navy);

    cursor: pointer;
}

.km-checkbox span {
    line-height: 1.3;
}


/* ==========================================================================
   SECURE NOTE
   ========================================================================== */

.km-secure-note {
    color: #8993A0;

    font-size: 11px;
    font-weight: 500;
}


/* ==========================================================================
   LOGIN BUTTON
   ========================================================================== */

.km-login-button {
    width: 100%;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    margin: 4px 0 0;
    padding: 0 18px;

    border: 0;
    border-radius: 8px;

    background: var(--km-navy);
    color: var(--km-white);

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 160ms ease,
        transform 160ms ease,
        box-shadow 160ms ease;
}

.km-login-button:hover {
    background: var(--km-navy-dark);

    transform: translateY(-1px);

    box-shadow:
        0 8px 18px rgba(15, 76, 129, 0.18);
}

.km-login-button:active {
    transform: translateY(0);
}

.km-login-button:focus-visible {
    outline: 3px solid rgba(244, 163, 0, 0.35);

    outline-offset: 3px;
}

.km-button-arrow {
    color: var(--km-gold);

    font-size: 18px;
    line-height: 1;
}


/* ==========================================================================
   ALERT
   ========================================================================== */

.km-login-alert {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 3px;

    margin-bottom: 20px;

    padding: 13px 15px;

    border: 1px solid #F5C2C0;
    border-radius: 8px;

    background: var(--km-danger-bg);

    color: var(--km-danger);

    font-size: 13px;

    line-height: 1.45;
}

.km-login-alert[hidden] {
    display: none;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.km-login-footer {
    margin: 28px 0 0;

    color: #9AA4B2;

    font-size: 11px;

    text-align: center;
}


/* ==========================================================================
   RIGHT VISUAL
   ========================================================================== */

.km-login-visual {
    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: flex-end;

    overflow: hidden;

    padding: 70px;

    background:
        linear-gradient(
            135deg,
            #0A365B 0%,
            #0F4C81 55%,
            #12619E 100%
        );

    color: var(--km-white);
}


/* Decorative circles */

.km-login-visual::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    top: -190px;
    right: -170px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50%;

    box-shadow:
        0 0 0 70px rgba(255, 255, 255, 0.025),
        0 0 0 140px rgba(255, 255, 255, 0.018);
}

.km-login-visual::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: 10%;
    bottom: 15%;

    border: 1px solid rgba(244, 163, 0, 0.25);

    border-radius: 50%;
}


/* Visual content */

.km-visual-content {
    position: relative;

    z-index: 2;

    max-width: 520px;
}

.km-visual-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: var(--km-gold);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.km-visual-content h2 {
    margin: 0;

    color: var(--km-white);

    font-family: "Poppins", sans-serif;

    font-size: clamp(42px, 5vw, 68px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -0.035em;
}

.km-visual-content p {
    max-width: 420px;

    margin: 24px 0 0;

    color: rgba(255, 255, 255, 0.76);

    font-size: 15px;

    line-height: 1.75;
}

.km-visual-accent {
    position: absolute;

    right: 70px;
    bottom: 70px;

    width: 70px;
    height: 4px;

    border-radius: 999px;

    background: var(--km-gold);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1000px) {

    .km-login-page {
        grid-template-columns: 1fr;
    }

    .km-login-visual {
        display: none;
    }

    .km-login-panel {
        max-width: 560px;

        padding: 40px 32px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 560px) {

    .km-login-panel {
        max-width: none;

        padding: 30px 20px;
    }

    .km-login-brand {
        margin-bottom: 42px;
    }

    .km-login-heading h1 {
        font-size: 30px;
    }

    .km-login-options {
        align-items: flex-start;

        flex-direction: column;
    }

    .km-secure-note {
        display: none;
    }

}