/* Figma 1288:31211 — floating 840×104; the original contact strip keeps its existing UI. */
.detail-contact-floating { position: fixed; bottom: 12px; z-index: 90; max-width: calc(100vw - 32px); border-radius: 8px; background: rgba(236,247,252,.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #000; box-shadow: 0 8px 24px rgba(3,39,63,.08); }
.detail-contact-floating[hidden] { display: none; }
.detail-contact-floating-content { position: relative; isolation: isolate; overflow: hidden; min-height: 104px; padding: 24px 16px; border-radius: 8px; text-align: center; }
.detail-contact-decoration { position: absolute; z-index: -1; top: 0; height: 104px; pointer-events: none; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; }
.detail-contact-decoration::before { content: ''; position: absolute; background: url('../images/contact-cta/floating/texture.png') center / 100% 100% no-repeat; }
.detail-contact-decoration.is-left { left: 2px; width: 184px; mask-image: url('../images/contact-cta/floating/mask-left.svg'); -webkit-mask-image: url('../images/contact-cta/floating/mask-left.svg'); }
.detail-contact-decoration.is-left::before { left: -315.31px; top: -323.77px; width: 500px; height: 800px; transform: rotate(57.65deg); }
.detail-contact-decoration.is-right { right: 0; width: 200px; mask-image: url('../images/contact-cta/floating/mask-right.svg'); -webkit-mask-image: url('../images/contact-cta/floating/mask-right.svg'); }
.detail-contact-decoration.is-right::before { left: 64.22px; top: -164.66px; width: 318.622px; height: 509.795px; transform: rotate(-117.21deg); }
.detail-contact-floating-title { margin: 0 0 8px; color: #000; font-size: 20px; font-weight: 600; line-height: 28px; }
.detail-contact-floating a { color: #169edc; }
.detail-contact-floating ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 12px; padding: 0; margin: 0; list-style: none; font-size: 14px; font-weight: 500; line-height: 20px; }
.detail-contact-floating li { display: flex; align-items: center; }
.detail-contact-floating li + li::before { content: ''; width: 1px; height: 16px; margin-right: 12px; background: rgba(22,158,220,.15); }
.detail-contact-floating-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 20px; height: 20px; border: 0; padding: 0; border-radius: 50%; background: #6ac8e7; color: #fff; font-size: 0; line-height: 0; cursor: pointer; }
.detail-contact-floating a:hover { text-decoration: underline; }
.detail-contact-floating :is(a,button):focus-visible { outline: 2px solid #169edc; outline-offset: 3px; }
@media(max-width:639px) {
 .detail-contact-floating-content { padding: 20px 16px 16px; }
 .detail-contact-floating-title { padding: 0 10px; font-size: 16px; line-height: 24px; }
 .detail-contact-floating ul { font-size: 12px; line-height: 18px; gap: 4px 10px; }
 .detail-contact-floating li + li::before { display: none; }
}

/* 使用居中的几何线条绘制叉号，避免字体字形基线造成偏移。 */
.detail-contact-floating-close::before,
.detail-contact-floating-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.detail-contact-floating-close::after { transform: translate(-50%, -50%) rotate(-45deg); }