.wp-block-button { --wp--preset--dimension--25: 25%; --wp--preset--dimension--50: 50%; --wp--preset--dimension--75: 75%; --wp--preset--dimension--100: 100%; }
:where(body) { margin: 0px; }
body { padding: 0px; }
:root :where(.wp-element-button, .wp-block-button__link) { background-color: rgb(50, 55, 60); border-width: 0px; color: rgb(255, 255, 255); font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; padding: calc(0.667em + 2px) calc(1.333em + 2px); text-decoration: none; text-transform: inherit; }
.qodef-header--standard #qodef-page-header { background-color: rgba(255, 56, 56, 0); }
.container { display: flex; justify-content: center; align-items: center; }
.qodef-image-map .qodef-m-item { position: absolute; left: 48%; bottom: 75%; transform: translateX(-50%); min-width: 271px; opacity: 0; }
:root :where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-background)), :root :where(.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background)) { background-color: transparent; background-image: none; }
:root { --hotspot-color: red; --pulse-color: rgba(255, 0, 0, 0.4); }
.container { position: relative; display: inline-block; max-width: 100%; }
img { width: 100%; height: auto; }
.hotspot { position: absolute; width: 40px; height: 40px; background-color: var(--hotspot-color); color: white; font-size: 25px; font-weight: bold; text-align: center; line-height: 40px; border-radius: 2px; cursor: pointer; text-decoration: none; z-index: 10; opacity: 0.8; transition: opacity 0.3s, box-shadow 0.3s; }
.hotspot:hover { opacity: 1; box-shadow: rgba(255, 255, 255, 0.6) 0px 0px 10px; }
.hotspot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; background: var(--pulse-color); border-radius: 5px; transform: translate(-50%, -50%); animation: 3s ease 0s infinite normal none running pulse; z-index: -1; }
@keyframes pulse { 
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}
.hotspot::after { content: attr(data-tooltip); position: absolute; bottom: 150%; left: 50%; transform: translateX(-50%); background-color: black; color: white; padding: 5px 10px; font-size: 20px; white-space: nowrap; border-radius: 5px; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.hotspot:hover::after { opacity: 1; }
@media (max-width: 768px){
.hotspot { width: 35px; height: 35px; font-size: 18px; line-height: 35px; }
.hotspot::before { width: 50px; height: 50px; }
}
@media (max-width: 480px){
.hotspot { width: 23px; height: 23px; font-size: 18px; line-height: 20px; }
.hotspot::before { width: 45px; height: 45px; animation: 4s ease 0s infinite normal none running pulse; }
}