@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;600&display=swap');

body {
  background: linear-gradient(180deg, #fffdfa 0%, #ffeade 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  font-family: "Kanit", sans-serif;
  color: #3a2c2c;
}

/* กล่อง login */
.login-container {
  background: #ffffff;
  padding: 40px 30px;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(60, 45, 30, 0.15);
  text-align: center;
  width: 360px;
  border: 1px solid #f1e3d3;
  transition: 0.3s ease;
}

.login-container:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* หัวข้อ */
h2 {
  color: #4b382a;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 1.6rem;
}

/* โลโก้ */
.login-container img {
  border-radius: 50%;
  margin: 10px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* ลิงก์ชื่อเว็บ */
.login-container a[href="../index.php"] {
  color: #b78752;
  font-weight: 500;
  text-decoration: none;
  transition: 0.2s ease;
}

.login-container a[href="../index.php"]:hover {
  color: #8c5a2e;
}

/* อินพุต */
input {
  width: 85%;
  padding: 10px;
  margin: 8px 0;
  border: 1px solid #d4b499;
  border-radius: 8px;
  font-size: 15px;
  outline: none;
  transition: 0.2s;
  background-color: #fffaf5;
}

input:focus {
  border-color: #b78752;
  box-shadow: 0 0 5px rgba(183, 135, 82, 0.4);
}

/* ปุ่ม */
button {
  width: 40%;
  padding: 10px;
  background: #b78752;
  color: #fffaf5;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  font-weight: 500;
}

button:hover {
  background: #8c5a2e;
}

/* ลิงก์ Register */
.iidiv a {
  display: inline-block;
  margin-left: 10px;
  color: #b78752;
  text-decoration: none;
  transition: 0.2s;
  font-weight: 500;
}

.iidiv a:hover {
  color: #8c5a2e;
}

/* เส้นกั้นสวย ๆ */
p {
  color: #bca78d;
}

/* ปรับ SweetAlert ให้กลมกลืน */
.swal2-popup {
  font-family: "Kanit", sans-serif !important;
  border-radius: 12px !important;
  background: #fffdf8 !important;
  color: #3a2c2c !important;
}
.swal2-title {
  color: #4b382a !important;
}
.swal2-styled.swal2-confirm {
  background-color: #b78752 !important;
}