:root{
  --primary: #e60012;
  --primary-hover: #c40010;
  --text: #2f3542;
  --muted: #7b8494;
  --border: #e5e7eb;
  --card-bg: rgba(255,255,255,0.95);
  --shadow: 0 20px 45px rgba(31, 41, 55, 0.12);
  --radius: 24px;
}

*{
  box-sizing: border-box;
}

html, body{
  height: 100%;
}

body{
  margin: 0;
  font-family: "Segoe UI", Tahoma, sans-serif;
  color: var(--text);
  background:
    linear-gradient(rgba(248,250,252,0.58), rgba(248,250,252,0.58)),
    url('../img/login-bg.png') center center / cover no-repeat fixed;
  position: relative;
  overflow-x: hidden;
}

/* ลายโค้งจาง ๆ ด้านซ้าย */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at left center, rgba(255,255,255,0.30) 0, rgba(255,255,255,0.12) 22%, rgba(255,255,255,0) 45%),
    repeating-radial-gradient(circle at -10% 40%, rgba(255,255,255,0.18) 0 2px, transparent 2px 28px);
  pointer-events: none;
  opacity: .45;
}

/* จุดเล็ก ๆ จาง ๆ */
body::after{
  content: "";
  position: fixed;
  left: 24px;
  top: 42%;
  width: 110px;
  height: 110px;
  background-image: radial-gradient(rgba(255,255,255,.38) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
  opacity: .3;
  pointer-events: none;
}

/*.login-wrap{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 40px 16px;
  position: relative;
  z-index: 1;
}*/
.login-wrap{
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
}

.login-card{
  width: 100%;
  max-width: 460px;
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 32px 28px 22px;
}

.brand-logo{
  max-width: 82px;
  width: 100%;
  height: auto;
}

.login-title{
  font-size: 1.1rem;
  font-weight: 700;
  margin: 8px 0 2px;
  color: #273142;
}

.login-subtitle{
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.92rem;
}

.brand-divider{
  width: 46px;
  height: 3px;
  background: var(--primary);
  border-radius: 999px;
  margin: 10px auto 16px;
}

.with-icon{
  position: relative;
}

.input-icon{
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.15rem;
  color: #6b7280;
  z-index: 3;
}

.with-icon .form-control{
  height: 56px;
  padding-left: 46px;
  padding-right: 42px;
  font-size: 0.98rem;
  border-radius: 12px;  
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.88);
  box-shadow: none;
}

.with-icon .form-control:focus{
  border-color: #cfd6df;
  box-shadow: 0 0 0 4px rgba(230,0,18,.08);
}

.with-icon .form-floating > label{
  padding-left: 50px;
  color: #8a93a2;
}

.toggle-password{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #9aa3b2;
  z-index: 4;
  font-size: 1.1rem;
  cursor: pointer;
}

.btn-login{
  height: 52px;
  border-radius: 12px;
  font-size: 1rem;
 
  border: 0;
  background: var(--primary);
  color: #fff;
  
  font-weight: 700;
  transition: .2s ease;
  box-shadow: 0 10px 24px rgba(230,0,18,.22);
}

.btn-login:hover{
  background: var(--primary-hover);
  transform: translateY(-1px);
  color: #fff;
}

.mb-3{
  margin-bottom: 14px !important;
}

.alt-divider{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 10px;
  color: #8b95a5;
  font-weight: 600;
}

.alt-divider::before,
.alt-divider::after{
  content: "";
  flex: 1;
  height: 1px;
  background: #d8dde6;
}

.reset-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  margin-bottom: 14px;
}

.reset-link:hover{
  color: var(--primary-hover);
}

.help-text{
  color: #6f7785;
  font-size: .98rem;
}

.help-text a{
  color: var(--primary);
  text-decoration: none;
  font-weight: 700;
}

.feature-box{
  margin-top: 18px;
  width: 100%;
  max-width: 460px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(31,41,55,0.08);
  padding: 14px 12px;
}

.feature-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.feature-item{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: left;
  padding: 8px 10px;
  position: relative;
}

.feature-item:not(:last-child)::after{
  content: "";
  position: absolute;
  right: -4px;
  top: 15%;
  width: 1px;
  height: 70%;
  background: #e2e8f0;
}

.feature-item i{
  font-size: 1.6rem;
  color: #4b5563;
}

.feature-title{
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: #374151;
}

.feature-desc{
  margin: 2px 0 0;
  font-size: .92rem;
  color: #7a8596;
}

.alert{
  border-radius: 14px;
}

.muted-link{
  color: #6f7785;
  text-decoration: none;
}

.muted-link:hover{
  color: var(--primary);
}

@media (max-width: 768px){
  .login-wrap{
    padding: 16px 10px;
  }

  .login-card{
    max-width: 100%;
    padding: 18px 14px 14px;
    border-radius: 16px;
  }

  .brand-logo{
    max-width: 82px;
  }

  .brand-divider{
    margin: 8px auto 12px;
  }

  .login-title{
    font-size: 1.1rem;
    margin: 4px 0 2px;
  }

  .login-subtitle{
    font-size: .88rem;
    margin: 0 0 14px;
  }

  .mb-3{
    margin-bottom: 10px !important;
  }

  .with-icon .form-control{
    height: 48px;
    font-size: .95rem;
    border-radius: 10px;
    padding-left: 42px;
    padding-right: 44px;
  }

  .with-icon .form-floating > label{
    padding-left: 42px;
    font-size: .92rem;
  }

  .input-icon{
    left: 14px;
    font-size: 1rem;
  }

  .toggle-password{
    right: 12px;
    font-size: 1rem;
  }

  .btn-login{
    height: 46px;
    border-radius: 10px;
    font-size: .98rem;
  }

  .alt-divider{
    margin: 14px 0 8px;
    gap: 10px;
    font-size: .92rem;
  }

  .reset-link{
    margin-bottom: 8px;
    font-size: .95rem;
  }

  .help-text{
    font-size: .9rem;
    margin-top: 8px !important;
  }
}


/* ซ่อนปุ่ม reveal/cancel ของ browser */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

/*input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-textfield-decoration-container {
  display: none !important;
}*/

/* กันบาง browser */
input[type="password"] {
  appearance: none;
  -webkit-appearance: none;
}
.with-icon .form-control{
  padding-right: 50px;
}
.toggle-password{
  right: 12px;
}