/* รีเซ็ตและตั้งค่าทั่วไป: กำหนด base styles ให้ทุก element */
/* กล่องหลัก login: โครงสร้างกล่อง login หลักของหน้า แบ่งซ้าย-ขวา */
/* ฝั่งซ้าย: พื้นหลังน้ำเงิน โลโก้ ข้อความแนะนำและปุ่ม action */
/* ปุ่มขาวฝั่งซ้าย: ใช้สำหรับปุ่ม action ในฝั่งซ้าย เช่น สมัคร/เข้าสู่ระบบ */
/* ฝั่งขวา: ฟอร์มสมัครสมาชิกและเข้าสู่ระบบ */
/* input: สไตล์ input ทุกช่องในฟอร์ม login/signup */
/* ปุ่มฟ้าหลัก: ใช้กับปุ่ม login และสมัครสมาชิก */
/* ข้อความคั่นกลาง: ใช้คั่นระหว่างปุ่ม social login กับฟอร์ม */
/* ไอคอน social login: ปุ่มไอคอนสำหรับเข้าสู่ระบบด้วย social เช่น Google */
/* modal popup login: กล่อง modal สำหรับ login/signup แสดงฟอร์มใน popup */
/* ปุ่ม modal วางคู่กัน: จัดปุ่มใน modal ให้อยู่ในแถวเดียวกัน */
/* ปุ่ม modal ขยาย flex: ปรับปุ่มใน modal ให้ขยายเต็มแถว */
/* ปุ่มยกเลิกสีเทา: ใช้กับปุ่มปิด modal popup */
/* animation modal เด้งขึ้น: เพิ่ม animation เวลาเปิด modal popup */
/* responsive มือถือ แท็บเล็ต: ปรับ layout login ให้เหมาะกับหน้าจอเล็ก เช่น มือถือ/แท็บเล็ต */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

/* รีเซ็ตและตั้งค่าทั่วไป */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html, * {
  font-family: 'Sarabun', sans-serif !important;
}

body {
  background: #f0f2f5; 
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  min-height: 100vh;
}

/* กล่องหลัก login */
.login-wrapper {
  width: 950px;
  background: #fff;
  display: flex;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* ฝั่งซ้ายพื้นหลังน้ำเงิน โลโก้ ข้อความ */
.left-section {
  width: 50%;
  background: linear-gradient(135deg, #1e73be 0%, #3aa2dc 100%);
  position: relative;
  color: white;
  min-height: 550px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px;
}

.left-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.15;
  mix-blend-mode: overlay;
}

.left-content {
  position: relative;
  z-index: 2;
  max-width: 400px;
}

.left-content h1 {
  font-size: 38px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 15px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.left-content p {
  margin-bottom: 30px;
  font-size: 16px;
  opacity: 0.9;
  font-weight: 300;
}

/* ปุ่มขาวฝั่งซ้าย */
.left-section .btn-white {
  background: #fff;
  color: #1e73be;
  padding: 12px 40px;
  font-size: 18px;
  font-weight: 500;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.left-section .btn-white:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

/* ฝั่งขวาฟอร์มสมัคร เข้าสู่ระบบ */
.right-section {
  width: 50%;
  padding: 50px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.right-section h2 {
  font-size: 32px;
  margin-bottom: 25px;
  text-align: center;
  color: #333;
  font-weight: 600;
}

/* สไตล์ input ทุกช่อง */
.form input {
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  border: 2px solid transparent; /* ซ่อนขอบไว้ก่อน */
  background: #f7f9fc;
  margin-bottom: 15px;
  font-size: 16px;
  color: #333;
  transition: all 0.3s ease;
  /* height: auto; */
}

.form input:focus {
  outline: none;
  background: #fff;
  border-color: #1e73be;
  box-shadow: 0 0 0 4px rgba(30, 115, 190, 0.1);
}

/* ปุ่มฟ้าหลัก */
.btn-blue {
  width: 100%;
  padding: 14px;
  background: linear-gradient(to right, #1e73be, #0d6efd);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(13, 110, 253, 0.2);
}

.btn-blue:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.3);
}
.btn-link {
  width: 100%;
  padding: 14px;
  background: linear-gradient(to right, #e63946, #d90429); /* แดงเข้ม → แดงสด */
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(217, 4, 41, 0.2); /* แดง */
}

.btn-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(217, 4, 41, 0.35);
}


.text-center,
.text-line {
  text-align: center;
  color: #888;
  font-size: 14px;
}

/* มีเส้นเฉพาะบรรทัดล่าง */
.text-line {
  position: relative;
}

.text-line::before,
.text-line::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 1px;
  background: #ddd;
  vertical-align: middle;
  margin: 0 10px;
}


.social-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.social-icons i {
  font-size: 22px;
  cursor: pointer;
  color: #555;
  background: #f0f2f5;
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  transition: 0.3s;
}

.social-icons i:hover {
  color: #fff;
  background: #db4437; /* สี Google */
  transform: scale(1.1);
}

/* modal popup login */
.modal {
  display: none; /* ถูกควบคุมด้วย JS */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* พื้นหลังดำจางเข้มขึ้น */
  backdrop-filter: blur(5px); /* เบลอฉากหลังให้ดู Modern */
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: #fff;
  padding: 40px;
  border-radius: 24px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.25);
  animation: modalPopUp 0.3s ease-out; /* เพิ่ม Animation */
  position: relative;
}

.modal-content h2 {
  text-align: center;
  margin-bottom: 25px;
  font-size: 28px;
  color: #333;
}

/* ปุ่ม modal วางคู่กัน */
.modal-actions {
  display: flex;
  gap: 15px; /* ระยะห่างระหว่างปุ่ม */
  margin-top: 10px;
}

/* ปุ่ม modal ขยาย flex */
.modal-actions button {
  flex: 1;
  width: 100%;
  border-radius: 10px;
  padding: 12px;
  font-size: 16px;
}

/* ปุ่มยกเลิกสีเทา */
#closeLoginModal {
  background: #f1f3f5;
  color: #555;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  transition: 0.2s;
}

#closeLoginModal:hover {
  background: #e9ecef;
  color: #333;
}

/* animation modal เด้งขึ้น */
@keyframes modalPopUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* responsive มือถือ แท็บเล็ต */
@media (max-width: 900px) {
  .login-wrapper {
    flex-direction: column;
    width: 95%;
    max-width: 500px;
  }
  .left-section, .right-section {
    width: 100%;
  }
  .left-section {
    min-height: 250px;
    padding: 30px;
  }
  .right-section {
    padding: 40px 30px;
  }
  .left-content h1 { font-size: 28px; }
  .left-content p { display: none; } /* ซ่อนข้อความยาวบนมือถือ */
}
.reset-link {
    margin-top: 8px;
    text-align: center;
    color: #1a73e8;
    cursor: pointer;
    font-size: 14px;
  }
  .reset-link:hover {
    text-decoration: underline;
  }
  #resetModal input[type="email"] {
  width: 100%;
  padding: 14px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background: #f8f9fa;
  font-size: 16px;
  margin-bottom: 15px;
  outline: none;
  transition: all 0.3s ease;
}

#resetModal input[type="email"]:focus {
  border-color: #0d6efd;
  background: #fff;
  box-shadow: 0 0 5px rgba(13, 110, 253, 0.25);
}
.password-wrapper {
  position: relative;
}

.password-wrapper input {
  width: 100%;
  padding-right: 48px; 
}

.password-wrapper .toggle-password {
  position: absolute;
  right: 18px;

  top: 50%;
  transform: translateY(-80%); 

  font-size: 22px;
  color: #666;
  cursor: pointer;

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