* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

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

    background: linear-gradient(

        135deg,

        #E5D4C5 0%,

        #D8C1A7 35%,

        #C49A6C 70%,

        #B48A5F 100%

    );

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px;

}



/* Card */

.login-card {

    width: 100%;

    max-width: 420px;

    background: #ffffff;

    padding: 35px 30px;

    border-radius: 18px;

    border: 1px solid #E5D4C5;

    box-shadow: 0 12px 40px rgba(0,0,0,0.22);

    text-align: center;

}



/* Logo */

.login-card img {

    width: 220px;

    margin-bottom: 10px;

}



/* Title */

.login-card h2 {

    font-size: 22px;

    margin-bottom: 20px;

    color: #6B4E2E;

    font-weight: 700;

}



/* Labels */

.login-card label {

    display: block;

    text-align: left;

    margin-top: 12px;

    margin-bottom: 5px;

    font-size: 14px;

    font-weight: 600;

    color: #4a4a4a;

}



/* Inputs */

.login-card input[type="text"],

.login-card input[type="email"],

.login-card input[type="password"],

.login-card select {

    width: 100%;

    padding: 12px 14px;

    border: 1px solid #E5D4C5;

    border-radius: 8px;

    font-size: 14px;

    outline: none;

    transition: all 0.3s ease;

    background: #fff;

}

.password-wrap {
  position: relative;
  margin-bottom: 10px;
}
.password-wrap input {
  padding-right: 35px;
}
.toggle-eye {
  position: absolute;
  right: 8px;
  top: 56%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #555;
}
.toggle-eye:hover {
  color: #000;
}




/* Focus */

.login-card input:focus,

.login-card select:focus {

    border-color: #C49A6C;

    box-shadow: 0 0 10px rgba(196, 154, 108, 0.45);

}



/* Radio Row */

.radio-row {

    display: flex;

    justify-content: space-between;

    margin: 15px 0;

}



.radio-row label {

    font-size: 15px;

    font-weight: 500;

    color: #4a4a4a;

}



/* Button ? Gold Gradient */

.login-card button {

    width: 100%;

    padding: 14px;

    margin-top: 20px;

    background: linear-gradient(135deg, #C49A6C, #B48A5F);

    border: none;

    border-radius: 8px;

    font-size: 16px;

    color: #fff;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

}



.login-card button:hover {

    background: linear-gradient(135deg, #B48A5F, #9E764F);

    transform: translateY(-1px);

}



/* Error message */

.errorBox {

    background: #FBF3EB;

    border-left: 5px solid #C49A6C;

    padding: 12px;

    border-radius: 8px;

    margin-bottom: 15px;

    font-size: 14px;

    color: #7a2e2e;

    text-align: left;

}



/* Mobile Responsive */

@media (max-width: 480px) {

    .login-card {

        padding: 25px 20px;

        border-radius: 15px;

    }



    .login-card h2 {

        font-size: 20px;

    }



    .radio-row {

        flex-direction: column;

        gap: 10px;

        text-align: left;

    }

}



/* Green Action Button */

.btn-green {

    display: inline-block;

    width: 100%;

    padding: 14px;

    margin-top: 20px;

    background: linear-gradient(135deg, #22c55e, #16a34a);

    border: none;

    border-radius: 8px;

    font-size: 16px;

    color: #ffffff;

    font-weight: 600;

    text-align: center;

    text-decoration: none;

    cursor: pointer;

    transition: all 0.3s ease;

}



.btn-green:hover {

    background: linear-gradient(135deg, #16a34a, #15803d);

    transform: translateY(-1px);

}