@tailwind base;
@tailwind components;
@tailwind utilities;

/* 重置 Tailwind 的 placeholder 样式 */
[placeholder]::-webkit-input-placeholder,
[placeholder]::-moz-placeholder,
[placeholder]:-ms-input-placeholder {
  color: unset !important;
  opacity: unset !important;
}

#contact-form input,
#contact-form textarea {
  transition: all 0.3s ease;
  border-radius: 0.5rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background: linear-gradient(to right, #ffffff, #f0f9ff);
}
#contact-form input:hover,
#contact-form textarea:hover {
  box-shadow: 0 4px 10px rgba(6, 182, 212, 0.2);
}
#contact-form input:focus,
#contact-form textarea:focus {
  border-image: linear-gradient(to right, #6b21a8, #22d3ee) 1;
  border-width: 2px;
  border-style: solid;
  transform: scale(1.02);
  box-shadow: 0 4px 10px rgba(6, 182, 212, 0.3);
}
#contact-form input::placeholder,
#contact-form textarea::placeholder {
  color: rgba(100, 100, 100, 0.5) !important; /* 半透明灰色 */
  opacity: 1 !important; /* 确保浏览器一致性 */
  transition: opacity 0.3s ease;
}
#contact-form input:focus::placeholder,
#contact-form textarea:focus::placeholder {
  opacity: 0 !important; /* 聚焦时隐藏 */
}
/* 浏览器兼容性前缀 */
#contact-form input::-webkit-input-placeholder,
#contact-form textarea::-webkit-input-placeholder { /* Chrome, Safari */
  color: rgba(100, 100, 100, 0.5) !important;
  opacity: 1 !important;
  transition: opacity 0.3s ease;
}
#contact-form input::-moz-placeholder,
#contact-form textarea::-moz-placeholder { /* Firefox */
  color: rgba(100, 100, 100, 0.5) !important;
  opacity: 1 !important;
  transition: opacity 0.3s ease;
}
#contact-form input:-ms-input-placeholder,
#contact-form textarea:-ms-input-placeholder { /* Edge */
  color: rgba(100, 100, 100, 0.5) !important;
  opacity: 1 !important;
  transition: opacity 0.3s ease;
}
#contact-form input:focus::-webkit-input-placeholder,
#contact-form textarea:focus::-webkit-input-placeholder,
#contact-form input:focus::-moz-placeholder,
#contact-form textarea:focus::-moz-placeholder,
#contact-form input:focus:-ms-input-placeholder,
#contact-form textarea:focus:-ms-input-placeholder {
  opacity: 0 !important;
}
button[type="submit"] {
  background: linear-gradient(to right, #6b21a8, #22d3ee);
  background-size: 200% 100%;
  animation: gradientShift 3s ease infinite;
  transition: all 0.3s ease;
}
button[type="submit"]:hover {
  transform: scale(1.05);
}
button[type="submit"]:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  animation: pulse 1.5s infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
#contact-form {
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
#loading-overlay {
  transition: opacity 0.3s ease;
}
#loading-overlay:not(.hidden) {
  opacity: 1;
}
#loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
#loading-overlay .bg-white {
  animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}


/* 输入框 placeholder 样式 */
#contact-form input::placeholder,
#contact-form textarea::placeholder {
  color: rgba(100, 100, 100, 0.5) !important;
}

/* 错误消息动画 */
.error-message {
  display: none;
}
.error-message:not(.hidden) {
  display: block;
  animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 错误输入框边框 */
.border-red-500 {
  border-color: rgb(239, 68, 68) !important;
}

/* 其他样式（按钮、加载覆盖层等） */
button {
  transition: background-color 0.3s ease;
}
#loading-overlay {
  z-index: 1000;
}