@charset "utf-8";
/* MK体育在线官网 - 联系我们页样式 contact.css */
/* 结构：C3极简表单 */

/* === 联系Hero === */
.contact-hero { background: linear-gradient(135deg, #2C1F15 0%, #4A3728 100%); padding: 120px 0 60px; }
.contact-hero h1 { font-size: 36px; color: #E8D5C0; text-align: center; }
.contact-hero p { color: rgba(232, 213, 192, 0.6); text-align: center; margin-top: 12px; font-size: 15px; }

/* === 联系主体 === */
.contact-main { padding: 60px 0 80px; background: #FDF8F3; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; }

/* === 联系信息 === */
.contact-info h3 { font-size: 20px; margin-bottom: 24px; color: #2C1F15; }
.info-list { display: flex; flex-direction: column; gap: 24px; }
.info-item { display: flex; gap: 16px; align-items: flex-start; }
.info-icon { width: 44px; height: 44px; border-radius: 10px; background: #E8D5C0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #8B5E3C; font-size: 18px; }
.info-text h4 { font-size: 14px; color: #2C1F15; margin-bottom: 4px; }
.info-text p { font-size: 14px; color: #8B5E3C; line-height: 1.6; }
.info-text a { color: #8B5E3C; }

/* === 服务时间 === */
.service-hours { margin-top: 32px; padding: 24px; background: #fff; border-radius: 12px; border: 1px solid rgba(232, 213, 192, 0.4); }
.service-hours h4 { font-size: 16px; margin-bottom: 12px; color: #2C1F15; }
.service-hours p { font-size: 14px; color: #8B5E3C; line-height: 1.8; }

/* === 极简表单 C3 === */
.contact-form { background: #fff; padding: 40px; border-radius: 16px; box-shadow: 0 8px 40px rgba(44, 31, 21, 0.08); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 14px; color: #2C1F15; margin-bottom: 8px; font-weight: 500; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: 12px 16px; border: 1px solid rgba(232, 213, 192, 0.6);
  border-radius: 8px; font-size: 14px; color: #4A3728; background: #FDF8F3;
  transition: all 0.3s ease;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: #8B5E3C; box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.1); background: #fff;
}
.form-group textarea { resize: vertical; min-height: 140px; }
.form-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 12 12'%3E%3Cpath fill='%238B5E3C' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.form-submit { width: 100%; padding: 14px; background: #8B5E3C; color: #FDF8F3; border: none; border-radius: 8px; font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; }
.form-submit:hover { background: #2C1F15; }

/* === 地图占位 === */
.map-placeholder { height: 400px; background: linear-gradient(135deg, #E8D5C0 0%, #D4B896 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #8B5E3C; font-size: 15px; margin-top: 20px; }

/* === 响应式 === */
@media (max-width: 768px) {
  .contact-hero { padding: 100px 0 40px; }
  .contact-hero h1 { font-size: 26px; }
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form { padding: 28px 20px; }
  .map-placeholder { height: 250px; }
}