/* ===============================
   AUTH LAYOUT
================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
}

body {
    background: #f5f5f5;
}

/* Wrapper */

.auth-wrapper {
    display: flex;
    min-height: 100vh;
}


.auth-box .subtitle {
    margin-bottom: 25px;
}

.login-link a {
    color: #2563eb;
    font-weight: 500;
}

/* ===============================
   LEFT IMAGE SIDE
================================= */

.auth-image {
    width: 50%;
    height: 100vh;
    overflow: hidden;
}

.auth-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ===============================
   RIGHT FORM SIDE
================================= */

.auth-content {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: #f7f7f7;
}

.auth-box {
    width: 100%;
    max-width: 420px;
}


/* Logo */

.logo {
    font-size: 42px;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.subtitle {
    font-size: 18px;
    margin-bottom: 30px;
}


/* ===============================
   SOCIAL BUTTONS
================================= */

.social-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.social-btn {
    flex: 1;
    height: 44px;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.social-btn img {
    width: 16px;
}

.social-btn:hover {
    background: #f1f1f1;
}


/* ===============================
   DIVIDER
================================= */

.divider {
    text-align: center;
    margin: 25px 0;
    position: relative;
}

.divider span {
    background: #f7f7f7;
    padding: 0 15px;
    font-size: 13px;
    color: #777;
}

.divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #ddd;
    z-index: -1;
}


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

.form-group {
    margin-bottom: 20px;
}

.form-group input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 12px 0;
    font-size: 14px;
    background: transparent;
    outline: none;
}

.form-group input:focus {
    border-color: #000;
}


/* Buttons */

.btn-primary {
    width: 100%;
    height: 48px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 6px;
    margin-top: 15px;
    cursor: pointer;
    font-size: 15px;
}

.btn-outline {
    width: 100%;
    height: 44px;
    background: transparent;
    border: 1px solid #6c8cff;
    color: #6c8cff;
    border-radius: 6px;
    margin-top: 15px;
    cursor: pointer;
}

.btn-outline:hover {
    background: #6c8cff;
    color: #fff;
}


/* Links */

.forgot {
    display: block;
    text-align: right;
    font-size: 13px;
    margin-top: 12px;
    color: #6c8cff;
    text-decoration: none;
}

.forgot:hover {
    text-decoration: underline;
}

.terms {
    text-align: right;
    font-size: 11px;
    margin-top: 50px;
    color: #999;
}


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

@media (max-width: 992px) {

    .auth-image {
        display: none;
    }

    .auth-content {
        width: 100%;
    }

    .auth-wrapper {
        justify-content: center;
    }

}


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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
}

body {
    background: #f5f5f5;
}

/* ===============================
   LAYOUT
================================= */

.auth-wrapper {
    display: flex;
    min-height: 100vh;
}

/* LEFT IMAGE */

.auth-image {
    width: 50%;
    height: 100vh;
    overflow: hidden;
}

.auth-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* RIGHT SIDE */

.auth-content {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: #f7f7f7;
}

.auth-box {
    width: 100%;
    max-width: 420px;
}

/* ===============================
   TYPOGRAPHY
================================= */

.logo {
    font-size: 42px;
    font-weight: 600;
    margin-bottom: 40px;
    letter-spacing: 2px;
}

.subtitle {
    font-size: 20px;
    margin-bottom: 10px;
}

.description {
    font-size: 14px;
    color: #777;
    margin-bottom: 35px;
    line-height: 1.6;
}

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

.form-group {
    margin-bottom: 25px;
}

.form-group input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 12px 0;
    font-size: 14px;
    background: transparent;
    outline: none;
    transition: border 0.3s ease;
}

.form-group input:focus {
    border-color: #000;
}

/* Button */

.btn-primary {
    width: 100%;
    height: 50px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    transition: 0.3s ease;
}

.btn-primary:hover {
    background: #222;
}

/* Login link */

.login-link {
    margin-top: 20px;
    font-size: 14px;
    text-align: center;
}

.login-link a {
    color: #6c8cff;
    text-decoration: none;
}

.login-link a:hover {
    text-decoration: underline;
}

/* Terms */

.terms {
    position: absolute;
    bottom: 30px;
    right: 40px;
    font-size: 11px;
    color: #999;
}

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

@media (max-width: 992px) {

    .auth-image {
        display: none;
    }

    .auth-content {
        width: 100%;
    }

    .terms {
        position: relative;
        bottom: unset;
        right: unset;
        margin-top: 60px;
        text-align: center;
    }

}

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
}

body {
    background: #f5f5f5;
}

/* ===============================
   LAYOUT
================================= */

.auth-wrapper {
    display: flex;
    min-height: 100vh;
}

.auth-image {
    width: 50%;
    height: 100vh;
    overflow: hidden;
}

.auth-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-content {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: #f7f7f7;
}

.auth-box {
    width: 100%;
    max-width: 480px;
}

/* ===============================
   TYPOGRAPHY
================================= */

.logo {
    font-size: 42px;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.subtitle {
    font-size: 20px;
    margin-bottom: 30px;
}

/* ===============================
   SOCIAL BUTTONS
================================= */

.social-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.social-btn {
    flex: 1;
    height: 44px;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.3s ease;
}

.social-btn img {
    width: 16px;
}

.social-btn:hover {
    background: #f1f1f1;
}

/* ===============================
   DIVIDER
================================= */

.divider {
    text-align: center;
    margin: 25px 0;
    position: relative;
}

.divider span {
    background: #f7f7f7;
    padding: 0 15px;
    font-size: 13px;
    color: #777;
}

.divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #ddd;
    z-index: -1;
}

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

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.form-row input {
    flex: 1;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 12px 0;
    font-size: 14px;
    background: transparent;
    outline: none;
    transition: border 0.3s ease;
}

.form-row input:focus {
    border-color: #000;
}

/* Button */

.btn-primary {
    width: 100%;
    height: 50px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    margin-top: 10px;
    transition: 0.3s ease;
}

.btn-primary:hover {
    background: #222;
}

/* Login Link */

.login-link {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
}

.login-link a {
    color: #6c8cff;
    text-decoration: none;
}

.login-link a:hover {
    text-decoration: underline;
}

/* Terms */

.terms {
    position: absolute;
    bottom: 30px;
    right: 40px;
    font-size: 11px;
    color: #999;
}

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

@media (max-width: 992px) {

    .auth-image {
        display: none;
    }

    .auth-content {
        width: 100%;
    }

    .form-row {
        flex-direction: column;
        gap: 15px;
    }

    .terms {
        position: relative;
        bottom: unset;
        right: unset;
        margin-top: 60px;
        text-align: center;
    }

}

.otp-lock {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.otp-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.otp-input {
    width: 55px;
    height: 60px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    outline: none;
    transition: 0.2s ease;
}

.otp-input:focus {
    border-color: #000;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}

/*snackbar*/
.toast {
    position: fixed;
    top: 30px;
    right: 30px;
    min-width: 320px;
    max-width: 420px;
    padding: 18px 22px;
    border-radius: 14px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    z-index: 9999;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);

    animation: slideIn 0.4s ease,
    fadeOut 0.4s ease 4.6s forwards;
}

.toast-success {
    background: #16a34a;
}

.toast-error {
    background: #dc2626;
}

.toast ul {
    margin: 0;
    padding-left: 18px;
}

.toast li {
    margin-bottom: 6px;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(120%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateX(120%);
    }
}

/* Consistent green auth UI with mobile-friendly sizing */
:root { --auth-green:#173f35; --auth-green-dark:#102f28; --auth-mint:#eaf1eb; }
html,body { min-height:100%; }
body { min-height:100vh; color:#1a2721; background:#f3f6f3; font-size:16px; }
.auth-wrapper { min-height:100vh; min-height:100svh; background:#f3f6f3; }
.auth-image { width:48%; height:100vh; height:100svh; position:relative; background:#dfe9e1; }
.auth-image::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,47,40,.05),rgba(16,47,40,.42)); pointer-events:none; }
.auth-content { width:52%; min-height:100vh; min-height:100svh; padding:clamp(24px,5vw,72px); background:#f3f6f3; }
.auth-box { width:min(100%,480px); padding:clamp(25px,4vw,48px); border:1px solid #e4ebe5; border-radius:18px; background:#fff; box-shadow:0 18px 55px rgba(16,47,40,.08); }
.auth-box .logo { margin:0 0 28px; color:var(--auth-green); font-size:clamp(24px,3vw,34px); letter-spacing:-.6px; line-height:1.15; }
.auth-box .subtitle { margin:0 0 10px; color:#1d3027; font-size:clamp(21px,2.5vw,28px); font-weight:700; line-height:1.25; }
.auth-box .description { margin:0 0 25px; color:#6b7870; font-size:14px; line-height:1.65; }
.form-group { margin-bottom:15px; }
.form-group input,.form-row input { width:100%; min-width:0; min-height:50px; padding:12px 14px; border:1px solid #dce5de; border-radius:8px; outline:none; color:#1c2c24; background:#fbfcfb; font-size:16px; }
.form-group input:focus,.form-row input:focus { border-color:var(--auth-green); box-shadow:0 0 0 3px rgba(23,63,53,.1); }
.form-group input::placeholder,.form-row input::placeholder { color:#89958e; }
.btn-primary { min-height:50px; margin-top:10px; border-radius:8px; color:#fff; background:var(--auth-green); font-size:16px; font-weight:700; }
.btn-primary:hover { background:var(--auth-green-dark); }
.btn-outline { min-height:48px; border-color:#b8cbbd; color:var(--auth-green); border-radius:8px; }
.btn-outline:hover { border-color:var(--auth-green); color:#fff; background:var(--auth-green); }
.auth-box a,.forgot,.login-link a { color:var(--auth-green); }
.login-link { color:#68766e; line-height:1.6; }
.form-row { display:flex; gap:12px; margin-bottom:14px; }
.otp-container { gap:clamp(6px,2vw,12px); margin:22px 0; }
.otp-input { flex:1; width:auto; max-width:58px; height:clamp(48px,12vw,60px); border-color:#d5e0d8; border-radius:10px; color:var(--auth-green-dark); font-size:clamp(19px,5vw,24px); }
.otp-input:focus { border-color:var(--auth-green); box-shadow:0 0 0 3px rgba(23,63,53,.11); }
.toast { top:16px; right:16px; left:auto; width:min(440px,calc(100vw - 32px)); min-width:0; max-width:none; border-radius:10px; }
.toast-success { background:var(--auth-green); }
.toast-error { background:#a83b32; }
.terms { color:#87948c; }
@media(max-width:850px) { .auth-image { display:none; } .auth-content { width:100%; padding:24px; } .auth-wrapper { justify-content:center; background:radial-gradient(ellipse at 50% 0%,#e4eee6 0,transparent 52%),#f3f6f3; } .auth-box { max-width:500px; } }
@media(max-width:560px) { .auth-content { align-items:flex-start; padding:clamp(14px,5vw,24px); padding-top:clamp(36px,10vh,76px); } .auth-box { padding:24px 20px; border-radius:14px; } .auth-box .logo { margin-bottom:24px; font-size:26px; } .auth-box .subtitle { font-size:23px; } .form-row { flex-direction:column; gap:10px; margin-bottom:12px; } .form-group { margin-bottom:12px; } .form-group input,.form-row input { min-height:52px; font-size:16px; } .forgot { margin-top:15px; font-size:14px; } .login-link { font-size:14px; } .otp-container { justify-content:space-between; } .otp-input { min-width:0; max-width:52px; height:54px; border-radius:8px; } .toast { top:10px; right:10px; left:10px; width:auto; padding:13px 15px; } .terms { margin-top:28px; } }
@media(max-width:360px) { .auth-box { padding:21px 16px; } .otp-container { gap:5px; } .otp-input { height:48px; font-size:19px; } }
.auth-action-link { display:flex; align-items:center; justify-content:center; width:100%; margin-top:22px; border-radius:8px; color:#fff !important; text-decoration:none; }