/* pages/login/login.wxss */
.container {
  min-height: 100vh;
  background: linear-gradient(135deg, #4e6ef2 0%, #2a3ba7 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 顶部装饰 - 增强视觉效果 */
.header-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 400rpx;
  overflow: hidden;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 8s ease-in-out infinite;
}

.circle-1 {
  width: 300rpx;
  height: 300rpx;
  top: -150rpx;
  right: -100rpx;
  animation-delay: 0s;
}

.circle-2 {
  width: 200rpx;
  height: 200rpx;
  top: 100rpx;
  left: -100rpx;
  animation-delay: 2s;
}

.circle-3 {
  width: 150rpx;
  height: 150rpx;
  top: 250rpx;
  right: 150rpx;
  animation-delay: 4s;
}

/* 浮动动画 */
@keyframes float {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-20rpx) scale(1.05);
  }
}

/* 登录表单 - 优化布局 */
.login-form {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 120rpx 60rpx 60rpx;
}

/* Logo区域 - 增强品牌展示 */
.logo-section {
  text-align: center;
  margin-bottom: 80rpx;
  transform: translateY(10rpx);
}

.logo-icon {
  font-size: 140rpx;
  margin-bottom: 30rpx;
  display: inline-block;
  animation: pulse 2s ease-in-out infinite;
}

.app-name {
  font-size: 52rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 20rpx;
  display: block;
  text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
}

.app-slogan {
  font-size: 30rpx;
  color: rgba(255, 255, 255, 0.9);
  display: block;
  letter-spacing: 2rpx;
}

/* 脉冲动画 */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* 登录方式切换 - 更现代的设计 */
.login-tabs {
  display: flex;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50rpx;
  padding: 8rpx;
  margin-bottom: 60rpx;
  backdrop-filter: blur(10rpx);
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  border-radius: 42rpx;
  font-size: 30rpx;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.tab-item.active {
  background: white;
  color: #4e6ef2;
  font-weight: bold;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
}

/* 表单内容 - 更现代化的卡片设计 */
.form-content {
  background: white;
  border-radius: 30rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 30rpx 60rpx rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10rpx);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.form-content:active {
  transform: translateY(2rpx);
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1);
}

.input-group {
  margin-bottom: 40rpx;
}

.input-wrapper {
  position: relative;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 0 20rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s;
}

.input-wrapper:focus-within {
  border-color: #1890ff;
  background: white;
}

.input-icon {
  font-size: 32rpx;
  margin-right: 20rpx;
  color: #999;
}

.form-input {
  flex: 1;
  height: 80rpx;
  font-size: 30rpx;
  color: #333;
  background: transparent;
}

.password-toggle {
  padding: 10rpx;
  font-size: 32rpx;
  color: #999;
}

.sms-input {
  padding-right: 0;
}

.sms-btn {
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 8rpx;
  font-size: 24rpx;
  padding: 20rpx 30rpx;
  margin-left: 20rpx;
  white-space: nowrap;
}

.sms-btn.disabled {
  background: #ccc;
  color: #999;
}

.sms-btn::after {
  border: none;
}

/* 表单选项 */
.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.remember-me {
  display: flex;
  align-items: center;
}

.remember-text {
  font-size: 26rpx;
  color: #666;
  margin-left: 10rpx;
}

.forgot-password {
  font-size: 26rpx;
  color: #1890ff;
}

/* 登录按钮 - 更吸引人的按钮设计 */
.login-btn {
  width: 100%;
  height: 92rpx;
  border-radius: 46rpx;
  font-size: 34rpx;
  font-weight: bold;
  border: none;
  margin-bottom: 40rpx;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.login-btn.active {
  background: linear-gradient(135deg, #07c160 0%, #069448 100%);
  color: white;
  box-shadow: 0 10rpx 30rpx rgba(7, 193, 96, 0.4);
}

.login-btn.active::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: rotate(45deg);
  animation: shine 2s infinite;
}

@keyframes shine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.login-btn.disabled {
  background: #f0f0f0;
  color: #ccc;
  box-shadow: none;
}

.login-btn::after {
  border: none;
}

/* 其他登录方式 */
.other-login {
  margin-bottom: 40rpx;
}

.divider {
  text-align: center;
  margin-bottom: 30rpx;
  position: relative;
}

.divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1rpx;
  background: #e8e8e8;
}

.divider-text {
  background: white;
  padding: 0 30rpx;
  font-size: 24rpx;
  color: #999;
  position: relative;
  z-index: 1;
}

.social-login {
  display: flex;
  justify-content: center;
}

.social-btn {
  display: flex;
  align-items: center;
  padding: 20rpx 40rpx;
  border-radius: 25rpx;
  font-size: 26rpx;
  border: 2rpx solid #e8e8e8;
  background: white;
  color: #333;
}

.social-btn::after {
  border: none;
}

.wechat-btn {
  border-color: #07c160;
  color: #07c160;
}

.social-icon {
  font-size: 32rpx;
  margin-right: 10rpx;
}

.social-text {
  font-size: 26rpx;
}

/* 注册提示 */
.register-tip {
  text-align: center;
  margin-bottom: 30rpx;
}

.tip-text {
  font-size: 26rpx;
  color: #666;
}

.register-link {
  font-size: 26rpx;
  color: #1890ff;
  margin-left: 10rpx;
}

/* 用户协议提示 - 更简洁的显示方式 */
.agreement-tip {
  text-align: center;
  font-size: 24rpx;
  color: #666;
  line-height: 1.6;
  margin-top: 20rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.agreement-tip .tip-text {
  font-size: 24rpx;
  color: #666;
}

.agreement-tip .link {
  margin: 0 4rpx;
}

.link {
  color: #4e6ef2;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(78, 110, 242, 0.3);
  text-decoration-thickness: 1rpx;
  text-underline-offset: 4rpx;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .login-form {
    padding: 80rpx 40rpx 40rpx;
  }
  
  .form-content {
    padding: 40rpx 30rpx;
  }
}

/* 加载状态 - 更友好的提示 */
.login-btn:disabled {
  opacity: 0.7;
}

/* 输入框焦点效果增强 */
.input-wrapper:focus-within {
  border-color: #4e6ef2;
  background: white;
  box-shadow: 0 4rpx 12rpx rgba(78, 110, 242, 0.1);
}

/* 复选框样式优化 */
checkbox.wx-checkbox-input {
  border-radius: 50%;
  width: 32rpx;
  height: 32rpx;
  margin-top: 2rpx;
}

checkbox.wx-checkbox-input.wx-checkbox-input-checked {
  background-color: #4e6ef2;
  border-color: #4e6ef2;
}

/* 微信按钮样式优化 */
.wechat-btn {
  border-color: #07c160;
  color: #07c160;
  background: #f9fff8;
}

.wechat-btn:active {
  background: #07c160;
  color: white;
}