/*=========================== 
  Login
  =========================== */
/* import fonts Kanit */
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;500&display=swap");

.kanit-extralight {
  font-family: "Kanit", serif;
  font-weight: 200 !important;
  font-style: normal;
}

.kanit-light {
  font-family: "Kanit", serif;
  font-weight: 300 !important;
  font-style: normal;
}

.kanit-regular {
  font-family: "Kanit", serif;
  font-weight: 400 !important;
  font-style: normal;
}

.kanit-medium {
  font-family: "Kanit", serif;
  font-weight: 500 !important;
  font-style: normal;
}

/* leftbox-login */
.auth-full-bg {
  background-color: #d9d9d9 !important;
}

.login-highlight {
  background: transparent !important;
}

.auth-showcase {
  background-image: linear-gradient(
    335deg,
    hsl(214deg 82% 51%) 0%,
    hsl(215deg 82% 54%) 6%,
    hsl(216deg 82% 56%) 13%,
    hsl(216deg 82% 58%) 20%,
    hsl(216deg 82% 60%) 27%,
    hsl(216deg 82% 62%) 36%,
    hsl(216deg 82% 64%) 45%,
    hsl(216deg 82% 66%) 54%,
    hsl(216deg 82% 67%) 63%,
    hsl(216deg 82% 69%) 70%,
    hsl(216deg 81% 71%) 76%,
    hsl(216deg 81% 72%) 81%,
    hsl(216deg 81% 74%) 85%,
    hsl(215deg 80% 76%) 88%,
    hsl(215deg 79% 77%) 91%,
    hsl(215deg 78% 79%) 93%,
    hsl(215deg 77% 81%) 96%,
    hsl(214deg 75% 82%) 98%,
    hsl(214deg 73% 84%) 100%
  );
  min-height: 100%;
  padding: 2.5rem;
}

.showcase-logo {
  width: min(45vw, 300px);
  height: auto;
  animation: floatLogo 6s ease-in-out infinite;
}

.shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.2;
  z-index: 0;
}

.shape-one {
  width: 420px;
  height: 420px;
  background: #6ef7ff;
  top: -120px;
  right: -120px;
  animation: drift 14s linear infinite;
}

.shape-two {
  width: 260px;
  height: 260px;
  background: #f7abff;
  bottom: -80px;
  left: -40px;
  animation: drift 18s linear reverse infinite;
}

@media (max-width: 1199.98px) {
  .auth-showcase {
      padding: 3rem 1.5rem;
  }

  .showcase-logo-card {
      width: min(60vw, 320px);
  }
}

@media (max-width: 575.98px) {
  .showcase-logo-card {
      width: 75vw;
  }
}

@keyframes floatLogo {
  0% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-12px);
  }
  100% {
      transform: translateY(0);
  }
}

@keyframes glowPulse {
  0% {
      box-shadow: 0 15px 45px rgba(15, 23, 42, 0.35);
  }
  50% {
      box-shadow: 0 25px 60px rgba(26, 115, 232, 0.45);
  }
  100% {
      box-shadow: 0 15px 45px rgba(15, 23, 42, 0.35);
  }
}

@keyframes drift {
  0% {
      transform: translate(0, 0) scale(1);
  }
  50% {
      transform: translate(-30px, 20px) scale(1.05);
  }
  100% {
      transform: translate(0, 0) scale(1);
  }
}

/* กล่องขวา login */
.right-box {
  padding-top: 3rem;
  /* padding-left: 3rem; */
}

/* สไตล์หัวข้อใหญ่ Login และ Sign Up */
.auth-title {
  font-size: 1.5rem;
  color: #252525;
}

/* สไตล์หัวข้อใหญ่ Login และ Sign Up */
.auth-text {
  color: #808080 !important;
  font-size: 1rem;
}

/* link ลืมรหัสผ่าน, สมัครใช้งาน */
.auth-link {
  font-size: 1rem;
  color: #1a73e8;
  text-decoration: none;
  user-select: none;
}

.auth-link:hover {
  color: #2D86FB;
}

.auth-text {
  font-size: 1rem;
  color: #252525;
}

/* กล่องกรอกจบกรอก อีเมล, รหัสผ่าน */
/* ส่วนข้อความ */
.form-label {
  padding-left: 1rem;
  font-size: 20px;
  color: #252525;
}

/* ส่วนช่องกรอก */
.form-control {
  height: 52px;
  border: 1px solid #f0f0f0 !important;
  border-radius: 10px;
  background-color: #f0f0f0 !important;
}

/* custom icon ตา */
.mdi {
  color: #858585;
  font-size: 1.25rem !important;
}

/* Background ของตา */
.btn-eye {
  background-color: #f0f0f0 !important;
}

/* จบกรอก อีเมล, รหัสผ่าน */


/* ข้อความ อยู่ระบบต่อไป */
.auth-checkbox-label {
  font-size: 1.25rem;
  color: #252525;
  user-select: none;
}

/*=========================== 
  ฺ Botton
  =========================== */

.submit-btn {
  background-color: #1a73e8 !important;
  border-radius: 10px !important;
  border: 2px solid transparent;
  transition: background-color 0.3s, color 0.3s;
}

/* ปรับสีข้อความปุ่ม*/
.submit-btn .btn {
  color: #f0f0f0;
  font-size: 1rem;
}

.btn:hover {
  color: #f0f0f0 !important;
  background: #2D86FB;
  border-radius: 10px !important;
}

.btn-login-google .btn {
  color: #000000 !important;
  font-size: 1.25rem;
  border-radius: 10px;
  border: 1px solid #000;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-login-google .btn {
  color: #f0f0f0;
  font-size: 1.25rem;
}

.btn-next {
  color: #f0f0f0 !important;
  font-size: 1.25rem !important;
}

/* margin-top */
/* เอา position relative ออก*/
.no-relative {
  position: static !important;
  margin-bottom: 2rem !important;
}

/* checkbox */
.checkbox-custom {
  width: 1.3rem !important;
  height: 1.3rem !important;
  margin-right: 0.5rem !important;
  border: 2px solid #f0f0f0 !important;
  background-color: #f0f0f0 !important;
}

.form-check-input:checked {
  background-color: #1a73e8 !important;
  border: 2px solid #1a73e8 !important;
}

/* ข้อความยังไม่มีบัญชี */
.text-link {
  margin-top: 0rem !important;
  font-size: 1.25rem;
  color: #252525;
  padding-left: 0.5rem !important;
}

.text-link a {
  padding-left: 0.5rem !important;
}

#custom-style {
  margin-top: 1rem !important;
}

/* จบข้อความยังไม่มีบัญชี */

/*=========================== 
  Sign Up
  =========================== */

.btn-register .btn {
  margin-top: 1rem;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.flex-container {
  display: flex;
  gap: 10px;
  /* ระยะห่างระหว่างปุ่ม */
}

.btn-position {
  height: 56px;
  border-radius: 10px !important;
  border: 1px solid #808080 !important;
  background: #fff;
  flex-shrink: 0;
}

.btn-position i {
  color: #1a73e8;
}

.grid {
  gap: 10px;
  /* ระยะห่างระหว่างปุ่ม */
  grid-template-columns: repeat(2, 1fr);
  /* สร้าง 2 คอลัมน์ */
}

.form-check-label-signup {
  margin-top: 1rem;
  font-size: 1.125rem;
  user-select: none;
}

.checkbox-signup {
  margin-top: 1.2rem !important;
}

.btn-position.selected {
  background-color: #1a73e8;
  /* เปลี่ยนสีพื้นหลังเมื่อเลือก */
  color: white;
  /* เปลี่ยนสีตัวอักษรเมื่อเลือก */
}

/* Error แจ้งเตือน */
.error-message,
.text-danger {
  display: block !important;
  color: #dc3545;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  font-family: 'Kanit', sans-serif;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  background-image: none !important;
}

.invalid-feedback {
  color: #f46a6a !important;
}

/* เมื่อเลือกปุ่มตำแหน่งให้ไอคอนเป็นสีขาว */
.btn-position.selected i {
  color: #fff !important;
}

.btn-position:hover i {
  color: #fff !important;
}

.wave {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 1000% 1000% 0 0;
  position: absolute;
  width: 200%;
  height: 7.5em;
  animation: wave 10s -3s linear infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0.8;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

.wave:nth-of-type(2) {
  bottom: -1.25em;
  animation: wave 18s linear reverse infinite;
  opacity: 0.6;
}

.wave:nth-of-type(3) {
  bottom: -3em;
  animation: wave 20s -1s reverse infinite;
  opacity: 0.4;
}

@keyframes wave {
  0% {
      transform: translateX(0);
  }

  25% {
      transform: translateX(-25%);
  }

  50% {
      transform: translateX(-50%);
  }

  75% {
      transform: translateX(-25%);
  }

  100% {
      transform: translateX(0);
  }
}