/* ===== Contact Page ===== */
.page-contact{padding:26px 0 80px;}
.contact-hero{padding:10px 0 6px;}
.contact-title{margin:0;font-size:38px;font-weight:900;letter-spacing:.4px;}
.contact-sub{margin:12px 0 0;color:rgba(255,255,255,.68);line-height:1.9;font-size:14px;max-width:980px;}

.contact-cards{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
.info-card{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  padding:16px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.info-ic{
  width:44px;height:44px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(45,140,255,.12);
  border:1px solid rgba(45,140,255,.22);
  flex:0 0 auto;
}
.info-ic i{font-size:18px;color:rgba(45,140,255,.95);}
.info-tt{font-weight:900;}
.info-dd{margin-top:6px;color:rgba(255,255,255,.85);font-size:13px;}
.info-note{margin-top:6px;color:rgba(255,255,255,.52);font-size:12px;}

.contact-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:start;
}

.contact-form-card{padding:18px;}
.card-hd{margin-bottom:12px;}
.card-tt{font-weight:900;font-size:18px;}
.card-sub{margin-top:8px;color:rgba(255,255,255,.62);font-size:13px;line-height:1.8;}

.contact-form .form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.form-item{margin-top:12px;}
.form-item label{display:block;color:rgba(255,255,255,.72);font-size:12px;font-weight:800;margin-bottom:8px;}
.form-item input,
.form-item textarea{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.90);
  outline:none;
  padding:12px 14px;
  line-height:1.6;
}
.form-item textarea{resize:vertical; min-height:160px;}
.form-item input:focus,
.form-item textarea:focus{border-color:rgba(45,140,255,.30); box-shadow:0 0 0 4px rgba(45,140,255,.10);}

.form-actions{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.form-tip{color:rgba(255,255,255,.50);font-size:12px;line-height:1.7;}

.contact-side{position:sticky; top:92px; display:flex; flex-direction:column; gap:14px;}
.map-card{padding:16px;}
.map-top{margin-bottom:10px;}
.map-tt{font-weight:900;}
.map-sub{margin-top:6px;color:rgba(255,255,255,.52);font-size:12px;line-height:1.6;}

.map-box{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  height: 260px;
  background: rgba(255,255,255,.02);
  box-shadow:0 14px 45px rgba(0,0,0,.25);
}

/* 修正 leaflet 默认样式在暗色背景下的观感 */
.leaflet-container{background: rgba(255,255,255,.02);}
.leaflet-control-zoom a{
  background: rgba(16,31,40,.85);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.85);
}
.leaflet-control-zoom a:hover{background: rgba(16,31,40,.95);}

.map-actions{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap;}
.map-note{
  margin-top:10px;
  color:rgba(255,255,255,.55);
  font-size:12px;
  line-height:1.7;
  display:flex; gap:8px; align-items:flex-start;
}
.map-note i{color:rgba(45,140,255,.95); margin-top:2px;}

.about-mini{padding:16px;}
.about-mini-tt{font-weight:900; display:flex; gap:10px; align-items:center;}
.about-mini-tt i{color:rgba(45,140,255,.95);}
.about-mini-dd{margin:10px 0 0;color:rgba(255,255,255,.62);font-size:13px;line-height:1.85;}
.about-mini-links{margin-top:10px;}

@media (max-width: 1100px){
  .contact-cards{grid-template-columns: 1fr 1fr;}
  .contact-grid{grid-template-columns: 1fr;}
  .contact-side{position:static;}
  .contact-title{font-size:32px;}
}
@media (max-width: 520px){
  .contact-cards{grid-template-columns: 1fr;}
  .contact-form .form-row{grid-template-columns: 1fr;}
  .map-box{height:240px;}
}
/* ===== Toast (success / error / loading) ===== */
.toast{
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  width: min(520px, calc(100% - 28px));
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: .22s ease;
}
.toast.is-open{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(-2px);
}
.toast-inner{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(16,31,40,.92);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  padding: 14px 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  backdrop-filter: blur(10px);
}
.toast-ic{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(45,140,255,.14);
  border:1px solid rgba(45,140,255,.22);
  flex: 0 0 auto;
}
.toast-ic i{font-size:20px;color: rgba(45,140,255,.95);}
.toast-tt{font-weight:900;}
.toast-dd{margin-top:6px;color: rgba(255,255,255,.62);font-size:13px;line-height:1.7;}
.toast-close{
  margin-left: auto;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.82);
  cursor: pointer;
  transition: .2s ease;
}
.toast-close:hover{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16);}
.toast-close i{font-size:18px;}

.toast-inner.is-error .toast-ic{
  background: rgba(255, 92, 92, .14);
  border-color: rgba(255, 92, 92, .24);
}
.toast-inner.is-error .toast-ic i{color: rgba(255, 92, 92, .95);}

.toast-inner.is-loading .toast-ic{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
.toast-inner.is-loading .toast-ic i{
  color: rgba(255,255,255,.85);
  animation: toastSpin .9s linear infinite;
}
@keyframes toastSpin { to { transform: rotate(360deg); } }

/* ===== Form: submitting state ===== */
.btn.is-loading{
  opacity: .85;
  cursor: not-allowed;
  transform: none !important;
  filter: none !important;
}
.btn .btn-spin{
  display:none;
}
.btn.is-loading .btn-spin{
  display:inline-flex;
  animation: toastSpin .9s linear infinite;
}
.btn.is-loading .btn-text{
  opacity: .92;
}