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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #112a66;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/*
 * CARD: the visible window — 900px wide, clips the slider track.
 */
.card {
    width: 900px;
    height: 420px;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    overflow: hidden;
    position: relative;
}

/*
 * TRACK: 3 columns side by side = 1440px total.
 * Sliding left by 540px keeps Blue visible and reveals Reset.
 * transition is on the track, not the individual panels.
 */
.track {
    display: flex;
    flex-direction: row;
    width: 1440px; /* 540 + 360 + 540 */
    height: 100%;
    transform: translateX(0);
    transition: transform 0.55s cubic-bezier(0.77, 0, 0.175, 1);
    will-change: transform;
}

.track.slid {
    transform: translateX(-540px);
}

/* LOGIN PANEL — 540px, white */
.col-login {
    width: 540px;
    height: 100%;
    background: #fff;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 50px 55px;
}

/* BLUE PANEL — 360px, always visible in the middle of both states */
.col-blue {
    width: 360px;
    height: 100%;
    background: #D1E7F0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.col-blue img {
    width: 240px;
    height: auto;
    display: block;
}

/* RESET PANEL — 540px, white, starts off-screen to the right */
.col-reset {
    width: 540px;
    height: 100%;
    background: #fff;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 50px 55px;
}

/* ── TYPOGRAPHY ── */
h2 { font-size: 27px; font-weight: 700; color: #1a1a2e; margin-bottom: 6px; }
.subtitle { font-size: 13px; color: #777; font-weight: 400; margin-bottom: 28px; line-height: 1.5; }
.col-reset .subtitle { text-align: center; }

/* ── INPUTS ── */
.input-group { position: relative; margin-bottom: 14px; }
.input-group input {
    width: 100%;
    padding: 13px 16px 13px 44px;
    border: 1.5px solid #dde1e9;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    color: #1a1a2e;
    background: #f9fafc;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.input-group input:focus {
    border-color: #112a66;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(17,42,102,0.08);
}
.input-group .icon {
    position: absolute; left: 15px; top: 50%;
    transform: translateY(-50%);
    color: #bbb; font-size: 14px;
    pointer-events: none; transition: color 0.2s;
}
.input-group:focus-within .icon { color: #112a66; }
.input-group .icon-eye {
    position: absolute; right: 15px; top: 50%;
    transform: translateY(-50%);
    color: #bbb; font-size: 14px;
    cursor: pointer; z-index: 2;
    transition: color 0.2s;
}
/* Extra right padding so typed text never slides under the eye icon */
.input-group.has-eye input { padding-right: 42px; }

/* ── FORGOT LINK ── */
.forgot {
    display: block; text-align: right;
    font-size: 13px; color: #112a66;
    text-decoration: none; margin: -4px 0 20px;
    font-weight: 600; transition: color 0.2s;
}
.forgot:hover { color: #c9a227; }

/* ── BUTTONS ── */
.btn-primary {
    width: 100%; padding: 14px;
    background: #c9a227; border: none; border-radius: 10px;
    font-size: 15px; font-weight: 700; color: #fff;
    cursor: pointer; font-family: inherit;
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
    box-shadow: 0 4px 14px rgba(201,162,39,0.35);
}
.btn-primary:hover  { background: #b8911f; box-shadow: 0 6px 18px rgba(201,162,39,0.45); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

.btn-secondary {
    width: 100%; padding: 13px;
    background: transparent; border: 1.5px solid #dde1e9;
    border-radius: 10px; font-size: 15px; font-weight: 600;
    color: #888; cursor: pointer; font-family: inherit;
    margin-top: 10px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn-secondary:hover { background: #f5f5f5; border-color: #bbb; color: #444; }

/* ── RESPONSIVE ── */
@media (max-width: 700px) {
    .card { width: 100%; max-width: 420px; height: auto; }
    .track { width: auto; flex-direction: column; transform: none !important; transition: none !important; }
    .col-login, .col-reset { width: 100%; height: auto; padding: 36px 28px; }
    .col-blue { width: 100%; height: 140px; }
    .col-reset { display: none; }
    body.show-reset .col-login { display: none; }
    body.show-reset .col-reset { display: flex; }
}

/* ── OTP INPUTS ── */
.otp-inputs {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

.otp-box {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
    border: 1.5px solid #dde1e9;
    border-radius: 10px;
    background: #f9fafc;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    caret-color: transparent;
}

.otp-box:focus {
    border-color: #112a66;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(17,42,102,0.08);
}

.otp-box.filled {
    border-color: #c9a227;
    background: #fffdf4;
}