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


/* =========================
   BODY
========================= */

body{
    background:#12261a;

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

    min-height:100vh;

    overflow-y:auto;
}


/* =========================
   PHONE FRAME
========================= */

.auth-page{
    width:100%;
    max-width:480px;
    min-height:100vh;
    min-height:100dvh;

    position:relative;

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

    margin:0 auto;

    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);

    background-image:url("../image/bg.jpg");

    background-size:cover;
    background-position:center top;
    background-repeat:no-repeat;
}


/* =========================
   DARK OVERLAY
   FOR LOGIN ONLY
========================= */

.overlay{
    position:absolute;
    inset:0;

    background:rgba(0,0,0,.40);
}


/* =========================
   AUTH CONTAINER
========================= */

.auth-container{
    position:relative;
    z-index:2;

    width:100%;

    min-height:100%;

    padding:40px 30px;

    text-align:center;

    color:white;
}


/* =========================
   LOGIN LOGO
========================= */

.logo-box{
    width:120px;
    height:120px;

    margin:80px auto 15px;

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


.logo-box img{
    width:100%;
    height:100%;

    object-fit:contain;
}


/* =========================
   LOGIN TITLE
========================= */

.auth-container h1{
    color:white;

    font-size:40px;

    margin-bottom:120px;
}


.auth-container h2{
    color:#fff;

    font-size:28px;

    margin-bottom:8px;
}


.auth-container p{
    color:rgba(255,255,255,.85);

    margin-bottom:20px;
}


/* =========================
   LOGIN INPUT
========================= */

.input-box{
    margin-bottom:14px;
}


.input-box input{

    width:100%;

    height:48px;

    border-radius:12px;

    border:1px solid transparent;

    padding:0 16px;

    font-size:14px;

    background:#fff;

    box-shadow:0 3px 10px rgba(0,0,0,.15);
}


.input-box input:focus{

    outline:none;

    border-color:#23752c;
}


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

.forgot{

    display:block;

    text-align:right;

    margin:5px 0 18px;

    color:#fff;

    font-size:13px;

    cursor:pointer;
}


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

button{

    width:100%;

    height:50px;

    border:none;

    border-radius:25px;

    background:#23752c;

    color:white;

    font-weight:700;

    cursor:pointer;
}


/* =========================
   SIGN UP LINK
========================= */

.signup-link{

    margin-top:18px;

    color:white;
}


.signup-link a{

    color:#fff;

    font-weight:bold;

    text-decoration:none;
}


/* ==================================================
   REGISTER PAGE
================================================== */


/* Remove forest background from REGISTER */

.auth-page:has(.register){

    background:#ffffff;
}


/* Remove dark overlay from REGISTER */

.auth-page:has(.register) .overlay{

    display:none;
}


/* REGISTER CONTAINER */

.auth-container.register{

    background:#ffffff;

    min-height:100%;

    padding:55px 28px 35px;

    color:#111;

    text-align:center;
}


/* =========================
   REGISTER LOGO
========================= */

.register .logo{

    width:75px;

    height:75px;

    object-fit:contain;

    margin:0 auto 18px;

    display:block;
}


/* =========================
   REGISTER TITLE
========================= */

.register h2{

    color:#12261a;

    font-size:28px;

    font-weight:700;

    margin:0 0 7px;
}


.register p{

    color:#777;

    font-size:14px;

    margin-bottom:28px;
}


/* =========================
   REGISTER INPUT
========================= */

.register .input-box{

    position:relative;

    width:100%;

    margin-bottom:14px;
}


.register .input-box input{

    width:100%;

    height:50px;

    border-radius:12px;

    border:1px solid #e1e5e2;

    background:#f7f8f7;

    padding:0 16px 0 46px;

    font-size:14px;

    color:#222;

    box-shadow:none;

    transition:.2s ease;
}


.register .input-box input::placeholder{

    color:#8a8a8a;
}


.register .input-box input:focus{

    outline:none;

    border-color:#23752c;

    background:#ffffff;

    box-shadow:0 0 0 3px rgba(35,117,44,.10);
}


/* ==================================================
   INPUT ICONS
================================================== */

.register .input-box::before{

    position:absolute;

    left:16px;

    top:50%;

    transform:translateY(-50%);

    z-index:2;

    font-size:16px;

    color:#6d776f;

    pointer-events:none;
}


/* Name */

.register .input-box:nth-of-type(1)::before{

    content:"👤";
}


/* Email */

.register .input-box:nth-of-type(2)::before{

    content:"✉";
}


/* Password */

.register .input-box:nth-of-type(3)::before{

    content:"🔒";
}


/* Confirm Password */

.register .input-box:nth-of-type(4)::before{

    content:"🔒";
}


/* Phone */

.register .input-box:nth-of-type(5)::before{

    content:"📱";
}


/* =========================
   TERMS
========================= */

.register .terms{

    display:flex;

    align-items:flex-start;

    gap:8px;

    text-align:left;

    font-size:12px;

    color:#666;

    line-height:1.5;

    margin:5px 0 20px;
}


.register .terms input{

    margin-top:2px;

    accent-color:#23752c;

    flex-shrink:0;
}


/* =========================
   REGISTER BUTTON
========================= */

.register button{

    width:100%;

    height:52px;

    border:none;

    border-radius:26px;

    background:#23752c;

    color:white;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    transition:.2s ease;
}


.register button:hover{

    background:#1c6024;
}


/* =========================
   REGISTER LOGIN LINK
========================= */

.register .signup-link{

    margin-top:20px;

    color:#777;

    font-size:13px;
}


.register .signup-link a{

    color:#23752c;

    font-weight:700;

    text-decoration:none;
}


/* =========================
   REGISTER EXTRA
========================= */

.register .terms a{

    color:#23752c;
}


#loginLoading{

    color:white;

    margin-top:12px;
}


#loginErr{

    color:#d93025;

    margin-top:12px;
}
.password-box {
    position: relative;
}

.password-box input {
    padding-right: 40px;
}

.toggle-pass {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #666;
}

.icon-eye {
    width: 20px;
    height: 20px;
}