/* Styling for dedicated Login/Register pages */
@font-face {
  font-family: 'PPPangaia';
  src: url('/fonts/PPPangaia-Bold.otf') format('opentype');
  font-weight: bold;
}
@font-face {
  font-family: 'PPPangaia';
  src: url('/fonts/PPPangaia-Ultralight.otf') format('opentype');
  font-weight: 100;
}


body.auth-page {
  font-family: 'PPPangaia', sans-serif;
  overflow: hidden; /* Prevent scrollbars when forms extend beyond viewport */
  background-color: #000; /* 确保auth页面背景也是黑色 */
}

.form-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex; /* Use flex to center */
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0; /* 初始状态为隐藏，通过JS显示 */
  transition: opacity 0.25s ease-in-out;
  will-change: opacity;
}

.form-container {
  position: relative;
  width: 90vw; /* Smaller than before (was 120vw) */
  max-width: 550px; /* Reduced from 800px */
  height: auto;
  overflow: visible; /* Allow content to extend beyond container */
  transform-style: preserve-3d;
}

/* Make sure the tilt div doesn't mess with layout */
.form-container > div[data-tilt] {
  width: 100%;
  height: auto;
  position: relative;
  transform-style: preserve-3d;
}

.form-image {
  width: 100%;
  height: auto;
  object-fit: contain; /* Or cover, depending on image */
  display: block;
  will-change: transform; /* Improves performance for tilt effect */
  transform: translateZ(20px); /* 为图片添加3D效果 */
}

.input-overlay {
  position: absolute;
  top: 0; 
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Change from center to flex-start to allow padding-top to work */
  align-items: center;
  /* padding: 20px; Add padding */
  padding-top: 260px; /* Position inputs 300px from the top */
  box-sizing: border-box;
  text-align: center; 
  transform-style: preserve-3d; /* Ensure 3D space is preserved */
  pointer-events: none; /* Allow clicks to pass through to the tilt element */
  /* transform: translateZ(40px); 为输入框添加3D效果 */
  /* 完全移除所有边框 */
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Make form elements clickable */
.input-overlay form,
.input-overlay input,
.input-overlay a,
.input-overlay button,
.input-overlay .submit-btn {
  pointer-events: auto;
  position: relative; /* Ensure they're above the form image */
  z-index: 0; /* Higher than form image */
}

/* Adjust positioning based on your form images */
.login-form .input-overlay {
  /* Example: slightly different layout for login */
  justify-content: flex-start; /* Change from flex-end to flex-start */
  padding-bottom: 0; /* Remove bottom padding */
}

.signup-form .input-overlay {
  /* Example: slightly different layout for signup */
  justify-content: flex-start; /* Change from flex-end to flex-start */
  padding-bottom: 0; /* Remove bottom padding */
}


.input-overlay h2 {
    color: #555; /* Adjust color */
    margin-bottom: 20px;
}

/* Ensure form uses flex column layout to stack inputs vertically */
.input-overlay form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.input-overlay input[type="text"],
.input-overlay input[type="password"] {
  width: 30%; /* Adjust width */
  padding: 10px;
  margin-bottom: 12px; /* Default spacing - will be overridden for specific elements */
  border-radius: 4px;
  font-size: 0.95em; /* Slightly smaller text */
  transform-style: preserve-3d; /* Ensure 3D space is preserved */
  position: relative; /* Ensure they're above the form image */
  /* 使输入框半透明 */
  background-color: rgba(255, 255, 255, 0);
  /* Force inputs to be block-level to ensure they stack */
  display: block;
  /* Completely remove all borders */
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Remove focus outline */
.input-overlay input[type="text"]:focus,
.input-overlay input[type="password"]:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Reset any browser-default styling */
.input-overlay form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none !important;
  background: transparent;
}

/* Custom spacing for register page fields */
#signup-username {
  margin-left: -10px;
  margin-bottom: 100px; /* Larger space after username field */
}

#signup-password {
  margin-left: -10px;
  margin-bottom: 5px; /* Smaller space after password field */
}

#signup-confirm {
  margin-left: -10px;
  margin-bottom: 250px; /* Add large space after confirm password field */
}

#login-username {
  margin-left: -10px;
  margin-bottom: 110px; /* Larger space after username field for login page too */
}

#login-password {
  margin-left: -10px;
  margin-bottom: 300px; /* Add large space after login password field */
}

/* 新的图片按钮样式 */
.img-submit-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transform-style: preserve-3d;
  position: relative;
  z-index: 2;
  margin-top: 10px;
  transition: transform 0.3s ease;
  /* 移除按钮 */
  display: none;
}

.img-submit-btn:hover {
  transform: scale(1.05);
}

/* 新的保存按钮样式 - 放在右下角 */
.save-btn-container {
  position: absolute;
  bottom: 200px;
  right: 200px;
  z-index: 10;
  transform-style: preserve-3d;
  /* transform: translateZ(20px); */
  pointer-events: auto; /* Make it clickable */
}

.save-btn-container .submit-img {
  width: 80px;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
  /* transform: translateZ(60px); Increase Z translation for more pronounced effect */
}

.save-btn-container .submit-img:hover {
  transform: scale(1.1) translateZ(60px);
}

.submit-img {
  width: 160px; /* 根据实际情况调整大小 */
  height: auto;
  transform: translateZ(5px); /* 添加轻微的3D效果 */
}

/* 保留旧的按钮样式以兼容性
.submit-btn {
  padding: 8px 20px;
  background-color: #8FBC8F;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 10px;
  transform-style: preserve-3d;
  position: relative;
  z-index: 2;
} */

/* .submit-btn:hover {
  background-color: #7A9E7A;
} */

.form-link {
  margin-top: 12px; /* Reduced spacing */
  color: rgb(167, 12, 12);
  text-decoration: none;
  font-size: 1em; /* Smaller text */
  transform-style: preserve-3d; /* Ensure 3D space is preserved */
  position: relative; /* Ensure they're above the form image */
  /* 使链接更明显 */
  transition: transform 0.3s ease;
}

.form-link:hover {
  text-decoration: underline;
  transform: scale(1.1) translateZ(60px);
}

.error-message {
    color: red;
    font-weight: bold;
    margin-bottom: 15px;
    transform-style: preserve-3d; /* Ensure 3D space is preserved */
    position: absolute; /* Change to absolute positioning */
    top: -200px; /* Position 50px from the top of the PNG */
    left: 0;
    width: 100%; /* Full width */
    text-align: center;
    z-index: 10; /* Ensure it's above other elements */
    pointer-events: none; /* Don't interfere with clicks */
}

/* 添加从EJS文件中整合的内联样式 */
/* Override background for auth pages to use wood.jpg */
.auth-page .background {
  background-image: url('/img/wood.jpg') !important;
  opacity: 1 !important;
  /* 确保与transition-overlay尺寸一致，实现无缝过渡 */
  top: -100px !important;
  left: -100px !important;
  width: calc(100% + 200px) !important;
  height: calc(100% + 200px) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Custom tilt effects */
.tilt-container {
  transform-style: preserve-3d;
  transform: perspective(1000px);
  z-index: 1;
  backface-visibility: hidden;
}

/* Special animation classes */
.show-form {
  display: flex; /* 确保表单容器可见 */
}
.show-image {
  opacity: 1; /* 确保图片可见 */
}
.show-inputs {
  opacity: 1; /* 确保输入区域可见 */
}

/* Hide home button */
a[href="/"] {
  display: none !important;
}

/* Style the placeholder text */
.input-overlay input::placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-style: italic;
  font-weight: 100;
  transition: opacity 0.3s ease;
}

.input-overlay input:focus::placeholder {
  opacity: 0.5;
}

/* Custom text color for inputs */
.input-overlay input {
  color: rgb(34, 34, 34);
  text-align: center;
  font-weight: 300;
}

/*
 * CUSTOMIZATION GUIDE:
 * 
 * 1. Form Size:
 *    - Adjust .form-container width/height for overall size
 *    - Currently set to 90vw (90% of viewport width)
 *    - Increase for larger forms, decrease for smaller forms
 * 
 * 2. Input Field Positioning:
 *    - Modify .login-form/.signup-form .input-overlay padding values
 *    - Adjust justify-content for vertical position (flex-start, center, flex-end)
 *    - Use padding-bottom to fine-tune alignment
 * 
 * 3. Input Field Styling:
 *    - Change .input-overlay input width percentage
 *    - Adjust padding for bigger/smaller input fields
 *    - Modify border/background for different visual style
 * 
 * 4. Button Styling:
 *    - Change .submit-btn background-color for different colors
 *    - Adjust padding for button size
 *    - Modify border-radius for rounded corners
 * 
 * 5. Text Styling:
 *    - Change .form-link color and font-size
 *    - Adjust error-message color and weight
 *
 * 6. Tilt Effect Adjustment:
 *    - Modify data-tilt-max attribute in HTML for more/less tilt (default is 5)
 *    - Change data-tilt-speed for faster/slower tilt response (default is 400) 
 *    - Adjust data-tilt-perspective for more/less dramatic effect (default is 500)
 */