/* Existing theme colors, light-background surface, border-header and btn-success. */
.psp-state-section { padding: 20px; scroll-margin-top: 80px; }
.psp-state-section > p { margin-bottom: 12px; }
.psp-state-map { display: block; width: 100%; max-width: 520px; margin: 0 auto 12px; height: auto; }
.psp-state-map a { fill: #dce9ee; stroke: #526b77; stroke-width: 2; cursor: pointer; }
.psp-state-map a:hover, .psp-state-map a:focus { fill: #007a1a; stroke: #222; stroke-width: 3; outline: none; }
.psp-state-list summary { cursor: pointer; color: #007a1a; font-weight: 600; padding: 10px 0; }
.psp-state-list ul { columns: 3; list-style: none; margin: 0; padding: 0; }
.psp-state-list li { break-inside: avoid; }
.psp-state-list a { display: inline-block; padding: 10px 4px; }
.psp-map-note { font-size: 14px; line-height: 1.5; margin-top: 8px; }
.psp-map-card-wrap { padding: 20px; }
.psp-map-card { display: flex; align-items: center; gap: 28px; padding: 24px; color: #313131; border-radius: 15px; }
.psp-map-card:hover { color: #313131; }
.psp-map-card:focus-visible, .psp-state-list a:focus-visible, .psp-state-list summary:focus-visible { outline: 3px solid #007a1a; outline-offset: 4px; }
.psp-map-card-copy { display: grid; gap: 12px; }
.psp-map-card-copy strong { font-size: 24px; font-family: 'Poppins', sans-serif; }
.psp-map-card-copy .btn { justify-self: start; margin: 0; }
.psp-map-frames { display: grid; width: 38%; max-width: 320px; flex-shrink: 0; }
.psp-map-frames img { grid-area: 1 / 1; width: 100%; height: auto; opacity: 0; animation: psp-state-frame 4s linear infinite; animation-delay: calc(var(--frame) * .8s); }
.psp-map-frames img:first-child { opacity: 1; }
@keyframes psp-state-frame { 0%, 19.99% { opacity: 1; } 20%, 100% { opacity: 0; } }
.psp-map-card:hover img, .psp-map-card:focus img { animation-play-state: paused; }
@media (max-width: 767px) {
  .psp-state-list ul { columns: 2; }
  .psp-map-card { flex-direction: column; align-items: stretch; gap: 12px; padding: 20px; }
  .psp-map-frames { width: 100%; max-width: 260px; margin: auto; }
  .psp-map-card-copy strong { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .psp-map-frames img { animation: none; opacity: 0; }
  .psp-map-frames img:first-child { opacity: 1; }
}

.psp-map-motion { display: block; font-size: 14px; margin: 8px 0 0; }
.psp-map-card-wrap:has(.psp-map-motion input:checked) img { animation-play-state: paused; }
@media (min-width: 992px) { #main.new > .psp-map-card-wrap { padding-top: 80px; } }
@media (prefers-reduced-motion: reduce) { .psp-map-motion { display: none; } }
