/* ============================================================
   contact.css —— 联系我们（contact.html）独有样式
   微信二维码预约卡片 / 地图占位
   依赖公共 css/style.css（.form-control / .form-tip 为公共基元）
   ============================================================ */

/* ============ 微信二维码预约卡片 ============ */
.qr-card {
    background: #fff; border-radius: var(--radius-lg); padding: 2.8rem;
    box-shadow: var(--shadow-md); text-align: center;
    border: 1px solid rgba(28,79,161,0.06);
}
.qr-badge {
    width: 64px; height: 64px; margin: 0 auto 1.2rem; border-radius: 20px;
    background: linear-gradient(135deg, #2ed573, #07c160);
    color: #fff; font-size: 1.9rem; display: grid; place-items: center;
    box-shadow: 0 12px 28px rgba(7,193,96,0.35);
}
.qr-card h3 { font-size: 1.6rem; color: var(--color-text-main); margin-bottom: 0.7rem; }
.qr-desc { color: var(--color-text-secondary); font-weight: 300; line-height: 1.85; max-width: 420px; margin: 0 auto 1.8rem; }
.qr-desc strong { color: #07c160; font-weight: 700; }
.qr-frame {
    width: 240px; height: 240px; margin: 0 auto; padding: 0.7rem;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(124,158,226,0.16), rgba(7,193,96,0.12));
    border: 1px solid rgba(28,79,161,0.1);
}
.qr-frame img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-sm); background: #fff; }
.qr-tip { margin-top: 1.4rem; font-size: 0.9rem; color: var(--color-text-secondary); font-weight: 300; display: inline-flex; align-items: center; gap: 0.5rem; }
.qr-tip i { color: #07c160; }

/* ============ 地图占位 ============ */
.map-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 340px; box-shadow: var(--shadow-md); background: linear-gradient(135deg, #dceaf5, #c3dbec); display: grid; place-items: center; }
.map-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map-pin { position: relative; z-index: 2; text-align: center; color: var(--color-primary-dark); }
.map-pin i { font-size: 2.6rem; color: var(--color-primary); filter: drop-shadow(0 6px 14px rgba(28,79,161,0.4)); }
.map-pin p { background: rgba(255,255,255,0.9); backdrop-filter: blur(6px); padding: 0.5rem 1.1rem; border-radius: 50px; font-size: 0.86rem; font-weight: 500; margin-top: 0.7rem; box-shadow: var(--shadow-sm); }

/* ============================================================
   RESPONSIVE —— 联系我们独有组件
============================================================ */
@media (max-width: 768px) {
    .qr-card { padding: 2rem 1.4rem; }
    .qr-frame { width: 200px; height: 200px; }
}