/* ============ 统一留言表单弹窗组件 CSS ============ */

/* 弹窗遮罩 */
.uf-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.55); z-index: 99999;
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 40px 16px;
  animation: ufFadeIn 0.3s ease;
}
@keyframes ufFadeIn { from{opacity:0} to{opacity:1} }

/* 弹窗主体 */
.uf-modal {
  background: #fff; border-radius: 12px; width: 100%; max-width: 640px;
  position: relative; padding: 0;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  animation: ufSlideUp 0.35s cubic-bezier(0.4,0,0.2,1);
}
@keyframes ufSlideUp { from{transform:translateY(30px);opacity:0} to{transform:translateY(0);opacity:1} }

/* 关闭按钮 */
.uf-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none; font-size: 28px; color: #999;
  cursor: pointer; z-index: 10; line-height: 1; padding: 4px;
  transition: color 0.2s;
}
.uf-close:hover { color: #333; }

/* 标题 */
.uf-header { padding: 28px 32px 16px; text-align: center; }
.uf-header h2 { margin: 0 0 6px; font-size: 22px; color: #1e293b; font-weight: 600; }
.uf-header p { margin: 0; font-size: 14px; color: #94a3b8; }

/* Tab栏 */
.uf-tabs {
  display: flex; gap: 0; padding: 0 32px; border-bottom: 2px solid #f1f5f9;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.uf-tab {
  flex: 1; min-width: 80px; padding: 10px 6px;
  background: none; border: none; border-bottom: 2px solid transparent;
  font-size: 14px; color: #64748b; cursor: pointer; white-space: nowrap;
  transition: all 0.25s ease; margin-bottom: -2px; font-weight: 500;
}
.uf-tab:hover { color: #0573C3; }
.uf-tab.active { color: #0573C3; border-bottom-color: #0573C3; font-weight: 600; }

/* 表单 */
.uf-form { padding: 24px 32px 32px; }

.uf-row { display: flex; gap: 16px; margin-bottom: 16px; }
.uf-group { flex: 1; }
.uf-group.uf-full { flex: 100%; }
.uf-group label {
  display: block; font-size: 13px; color: #1e293b; margin-bottom: 6px; font-weight: 500;
}
.uf-group label .uf-required {
  color: #E67E22; margin-right: 2px;
}
.uf-group input::placeholder, .uf-group textarea::placeholder {
  color: #94a3b8;
}
.uf-group input, .uf-group select, .uf-group textarea {
  width: 100%; padding: 9px 12px; border: 1px solid #e2e8f0; border-radius: 6px;
  font-size: 14px; color: #1e293b; background: #f8fafc;
  transition: all 0.2s; box-sizing: border-box; font-family: inherit;
}
.uf-group input:hover, .uf-group select:hover, .uf-group textarea:hover { border-color: #cbd5e1; }
.uf-group input:focus, .uf-group select:focus, .uf-group textarea:focus {
  outline: none; border-color: #0573C3; background: #fff;
  box-shadow: 0 0 0 3px rgba(5,115,195,0.1);
}
.uf-group textarea { resize: vertical; min-height: 70px; }
.uf-group select { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
}

/* 提交按钮 */
.uf-submit-row { margin-top: 24px; }
.uf-submit-btn {
  width: 100%; padding: 13px; border: none; border-radius: 8px;
  background: linear-gradient(135deg, #0573C3, #0284c7); color: #fff;
  font-size: 16px; font-weight: 600; cursor: pointer;
  transition: all 0.25s ease;
}
.uf-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(5,115,195,0.3); }
.uf-submit-btn:active { transform: translateY(0); }
.uf-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* 成功提示 */
.uf-success { padding: 40px 32px; text-align: center; }
.uf-success-icon {
  width: 64px; height: 64px; margin: 0 auto 16px;
  border-radius: 50%; background: #ecfdf5; color: #10b981;
  display: flex; align-items: center; justify-content: center;
}
.uf-success-icon svg { width: 32px; height: 32px; }
.uf-success h3 { margin: 0 0 8px; font-size: 20px; color: #1e293b; }
.uf-success p { margin: 0 0 24px; font-size: 14px; color: #64748b; line-height: 1.6; }
.uf-success-close {
  padding: 10px 32px; border: 1px solid #e2e8f0; border-radius: 6px;
  background: #fff; color: #475569; font-size: 14px; cursor: pointer;
  transition: all 0.2s;
}
.uf-success-close:hover { border-color: #0573C3; color: #0573C3; }

.uf-success-actions {
  display: flex; gap: 12px; justify-content: center;
}
.uf-success-again {
  padding: 10px 32px; border: none; border-radius: 6px;
  background: linear-gradient(135deg, #0573C3, #0284c7); color: #fff;
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: all 0.2s;
}
.uf-success-again:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(5,115,195,0.25); }

/* 移动端适配 */
@media (max-width: 640px) {
  .uf-overlay { padding: 16px 8px; }
  .uf-modal { border-radius: 8px; }
  .uf-header { padding: 20px 16px 12px; }
  .uf-header h2 { font-size: 18px; }
  .uf-tabs { padding: 0 16px; }
  .uf-tab { font-size: 13px; min-width: 68px; padding: 8px 4px; }
  .uf-form { padding: 20px 16px 24px; }
  .uf-row { flex-direction: column; gap: 12px; }
}