/* IP 位置地图：按钮缩略图与弹窗，首页和出口检测页共用（templates/includes/location_map_dialog.html）。 */
.ipkk-page .location-map-dialog { width: min(820px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 28px; border: 1px solid var(--ipkk-line); border-radius: 18px; background: #fff; color: var(--ipkk-ink); box-shadow: 0 24px 80px rgba(7, 23, 35, .24); overflow-y: auto; overscroll-behavior: contain; }
.ipkk-page .location-map-dialog::backdrop { background: rgba(7, 23, 35, .55); backdrop-filter: blur(3px); }
.ipkk-page .location-map-heading { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #fff; }
.ipkk-page .location-map-heading h2 { margin: 0; font-size: 24px; font-weight: 650; line-height: 1.4; }
.ipkk-page .location-map-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; padding: 0; border: 1px solid var(--ipkk-line); border-radius: 9px; background: #fafafa; color: #636c65; cursor: pointer; }
.ipkk-page .location-map-close:hover { background: #eef7f1; color: var(--ipkk-accent); }
.ipkk-page .location-map-close:focus-visible { outline: 2px solid var(--ipkk-accent); outline-offset: 3px; }
.ipkk-page .location-map-description { margin: 10px 0 0; color: var(--ipkk-muted); font-size: 13px; line-height: 1.8; }
.ipkk-page .location-map-dialog { width: min(960px, calc(100% - 32px)); }
.ipkk-page .location-map-frame { display: block; width: 100%; height: min(460px, 55dvh); min-height: 220px; margin-top: 20px; border: 1px solid var(--ipkk-line); border-radius: 12px; background: #f5f5f5; }
.ipkk-page .location-map-reference { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; font-size: 12px; line-height: 1.8; }
.ipkk-page .location-map-reference p { min-width: 0; color: var(--ipkk-muted); overflow-wrap: anywhere; }
.ipkk-page .location-map-reference a { color: var(--ipkk-accent); text-decoration: none; }
.ipkk-page .location-map-reference a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ipkk-page .location-map-reference a:focus-visible { outline: 2px solid var(--ipkk-accent); outline-offset: 3px; }
.location-map-thumb { display: block; flex: none; width: 72px; height: 45px; border: 1px solid var(--ipkk-line); border-radius: 8px; background: #e4eef1; box-shadow: 0 1px 3px rgb(16 40 26 / 8%); transition: border-color 160ms ease, box-shadow 160ms ease, transform 200ms cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) {
  .location-map-trigger:hover .location-map-thumb { border-color: #a7cbb4; box-shadow: 0 4px 12px rgb(16 126 65 / 14%); transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .location-map-thumb { transition: none; }
  .location-map-trigger:hover .location-map-thumb { transform: none; }
}
.location-map-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.ipkk-page .location-map-frame[hidden] { display: none; }
.location-map-canvas { position: relative; overflow: hidden; }
/* Shown over the map area until the selected map has rendered, instead of a flat grey box. */
.location-map-panel { position: relative; }
.location-map-loading { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; border: 1px solid var(--ipkk-line); border-radius: 12px; background-color: #f3f6f3; background-image: linear-gradient(rgb(16 126 65 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(16 126 65 / 5%) 1px, transparent 1px); background-size: 32px 32px; color: var(--ipkk-muted); font-size: 13px; text-align: center; transition: opacity 300ms ease, visibility 300ms; }
.location-map-loading.is-done { visibility: hidden; opacity: 0; }
.location-map-loading-pin { width: 30px; height: 30px; color: var(--ipkk-accent); animation: location-map-pin 1.2s ease-in-out infinite; }
@keyframes location-map-pin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .location-map-loading { transition: none; }
  .location-map-loading-pin { animation: none; }
}
.location-map-tabs { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border: 1px solid var(--ipkk-line); border-radius: 10px; background: var(--ipkk-bg); }
.location-map-tabs button { min-height: 34px; padding: 5px 18px; border: 0; border-radius: 7px; background: transparent; color: var(--ipkk-muted); font: inherit; font-size: 14px; line-height: 1.5; white-space: nowrap; cursor: pointer; transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease; }
.location-map-tabs button[aria-selected="true"] { background: #fff; color: var(--ipkk-ink); font-weight: 600; box-shadow: 0 1px 3px rgb(26 43 32 / 8%), 0 0 0 1px rgb(26 43 32 / 5%); }
.location-map-tabs button:focus-visible { outline: 2px solid var(--ipkk-accent); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .location-map-tabs button[aria-selected="false"]:hover { color: var(--ipkk-ink); }
}
/* The gap sits on the panel so the placeholder can cover exactly the map area (inset: 0). */
.ipkk-page .location-map-dialog .location-map-panel { margin-top: 16px; }
.ipkk-page .location-map-panel .location-map-frame { margin-top: 0; }
.location-map-loading { inset: 0; }
/* Title, provider tabs and close button share one row above the description;
   on phones the tabs move below the description, centred in the dialog. */
.ipkk-page .location-map-dialog .location-map-heading { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "title tabs close" "desc desc desc"; align-items: center; gap: 10px 20px; }
.ipkk-page .location-map-dialog .location-map-heading h2 { grid-area: title; justify-self: start; }
.ipkk-page .location-map-dialog .location-map-tabs { grid-area: tabs; }
.ipkk-page .location-map-dialog .location-map-close { grid-area: close; justify-self: end; }
.ipkk-page .location-map-dialog .location-map-description { grid-area: desc; margin: 0; }
@media (max-width: 640px) {
  .ipkk-page .location-map-dialog .location-map-heading { grid-template-columns: 1fr auto; grid-template-areas: "title close" "desc desc" "tabs tabs"; }
  .ipkk-page .location-map-dialog .location-map-tabs { justify-self: center; }
}
@media (max-width: 640px) {
  .ipkk-page .location-map-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); padding: 20px; border-radius: 14px; }
  .ipkk-page .location-map-heading h2 { font-size: 22px; }
  .ipkk-page .location-map-close { width: 36px; height: 36px; }
}