* {
    box-sizing: border-box;
    font-family: "Segoe UI", system-ui, sans-serif;
}

body {
    margin: 0;
    height: 100vh;
}

.login-bg {
    height: 100vh;
    background:
        linear-gradient(rgba(6,42,47,.75), rgba(6,42,47,.75)),
        url("../img/login-bg.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    width: 420px;
    padding: 35px;
    border-radius: 18px;
    background: rgba(15, 45, 50, 0.75);
    backdrop-filter: blur(14px);
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
    color: #eaffff;
}

.login-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 25px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-icon svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: #eaffff;
    stroke-width: 1.8;
}

.field {
    position: relative;
    margin-bottom: 18px;
}

.field .icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .7;
}

.field input {
    width: 100%;
    padding: 14px 14px 14px 42px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(0,0,0,.35);
    color: #fff;
    outline: none;
    font-size: 15px;
}

.field input::placeholder {
    color: rgba(255,255,255,.6);
}

.row {
    display: flex;
    justify-content: space-between;
    align-items: c
}
*{box-sizing:border-box;font-family:Segoe UI,system-ui}
body{margin:0;height:100vh}

.login-bg{
    height:100vh;
    background:
      linear-gradient(rgba(6,42,47,.75),rgba(6,42,47,.75)),
      url("../img/login-bg.jpg") center/cover;
    display:flex;
    justify-content:center;
    align-items:center;
}

.login-card{
    width:420px;
    padding:35px;
    border-radius:18px;
    background:rgba(15,45,50,.75);
    backdrop-filter:blur(14px);
    box-shadow:0 30px 80px rgba(0,0,0,.5);
    color:#eaffff;
}

.login-icon{
    width:70px;height:70px;margin:0 auto 25px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.4);
    display:flex;align-items:center;justify-content:center;
}

.login-icon svg{
    width:34px;height:34px;
    stroke:#eaffff;fill:none;stroke-width:1.8;
}

.field{
    position:relative;
    margin-bottom:22px;
}

.field input{
    width:100%;
    padding:14px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.2);
    background:rgba(0,0,0,.35);
    color:#fff;
    outline:none;
}

.field label{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:rgba(255,255,255,.6);
    pointer-events:none;
    transition:.3s;
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label{
    top:-8px;
    font-size:12px;
    color:#9fffd0;
}

.field input:focus{
    box-shadow:0 0 0 2px rgba(159,255,208,.3);
}

.toggle{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    opacity:.7;
}

.row{
    display:flex;
    justify-content:flex-end;
    font-size:13px;
    margin-bottom:12px;
}

.forgot{color:#9feeee;text-decoration:none}

.login-btn{
    width:100%;
    padding:14px;
    border-radius:8px;
    border:none;
    background:#9fffd0;
    color:#083a3f;
    font-weight:800;
    cursor:pointer;
}

.login-btn.loading{
    opacity:.7;
    pointer-events:none;
}

.error{
    min-height:18px;
    text-align:center;
    color:#ffb3b3;
    font-weight:600;
    margin-bottom:10px;
}
/* In Stock Button */
.btn-instock {
  background: #22c55e;          /* Green background */
  color: #064e3b;               /* Dark green text */
  border: 1px solid #16a34a;
}

.btn-instock:hover {
  background: #16a34a;          /* Slightly darker on hover */
  color: #022c22;
}