body {
	background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.login-container {
	width: 100%;
	max-width: 400px;
	padding: 20px;
}

.login-card {
	border: none;
	border-radius: 15px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	animation: fadeIn 0.5s ease-out;
	background-color: #fff;
}

.login-header {
	background: linear-gradient(135deg, #2b2d42 0%, #1a1a2e 100%);
	color: white;
	padding: 25px;
	text-align: center;
}

.login-header img {
	max-width: 80px;
	margin-bottom: 15px;
}

.login-header h2 {
	margin: 0;
	font-weight: 500;
	font-size: 1.5rem;
}

.login-body {
	padding: 30px;
}

/* Input Group */
.input-group-text {
	background-color: white;
	border: 1px solid #ddd;
	border-right: none;
	color: var(--gray);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	font-size: 1.1rem;
}

.form-floating>.form-control {
	border-left: none;
	border-radius: 0 0.5rem 0.5rem 0;
	padding-left: 1rem;
	border: 1px solid #ddd;
	height: 3.5rem;
}

.form-floating>label {
	padding-left: 1.5rem;
	font-size: 0.9rem;
	color: #666;
}

/* Password toggle icon */
.password-toggle {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	cursor: pointer;
	color: var(--gray);
	font-size: 1.1rem;
	user-select: none;
	z-index: 10;
}

/* Button */
.btn-login {
	background: linear-gradient(135deg, var(--primary) 0%, var(--secondary)
		100%);
	border: none;
	color: white;
	padding: 12px;
	border-radius: 8px;
	font-weight: 500;
	width: 100%;
	transition: all 0.3s;
	font-size: 1.1rem;
}

.btn-login:hover, .btn-login:focus {
	background: linear-gradient(135deg, var(--secondary) 0%, var(--primary)
		100%);
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
	outline: none;
}

/* Form check label */
.form-check-label {
	font-size: 0.9rem;
}

/* Animation */
@keyframes fadeIn {from { opacity:0;
	transform: translateY(20px);
}

to {
	opacity: 1;
	transform: translateY(0);
}
}

.language-toggle {
  position: relative;
  width: 72px;       
  height: 30px;      
  background: #e0e0e0;
  border-radius: 15px;
  cursor: pointer;
  font-family: 'Kanit', sans-serif;
}

.language-toggle input {
  display: none;
}

.toggle-track {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;      
  font-size: 0.8rem;  
  font-weight: bold;
  color: #444;
  box-sizing: border-box;
}

.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;         
  height: 26px;
  border-radius: 50%;
  transition: left 0.3s ease;
  background-size: cover;
  background-position: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.language-toggle input:checked ~ .toggle-thumb {
  left: calc(100% - 28px); /* = width - thumb size - margin */
}

.flag-th {
  background-image: url('/images/th_flag-e7f18a5477d4f250f136c54ce56f7081.svg'); 
}
.flag-en {
  background-image: url('/images/uk_flag-da08e077435d424937ee4c60ec87c261.svg'); 
}

/* Modal styles */
.modal-header {
	background: linear-gradient(135deg, #2b2d42 0%, #1a1a2e 100%);
	color: white;
	border-bottom: none;
}

.modal-title {
	font-weight: 500;
}

.btn-reset {
	background: linear-gradient(135deg, #4361ee 0%, #3f37c9 100%);
	border: none;
	color: white;
	padding: 10px 20px;
	border-radius: 8px;
	font-weight: 500;
	transition: all 0.3s;
}

.btn-reset:hover {
	background: linear-gradient(135deg, #3f37c9 0%, #4361ee 100%);
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
}

.success-message {
	display: none;
	text-align: center;
	padding: 15px;
}

.success-message i.fa-check-circle {
	color: var(--success);
	font-size: 3rem;
	margin-bottom: 15px;
}

.success-message i.fa-times {
	color: var(--success);
	font-size: 1.5rem;
}
.success-message .btn-reset {
	font-size: 1.25rem;
}