/**
 * CSS for Image Hotspot Item Element.
 */

.fc-hotspot-item {
    position: absolute;
    transform: translate(-50%, -50%); /* Center the hotspot on its coordinates */
    z-index: 10;
}

.fc-hotspot-item-logo {
    display: block;
    width: var(--logo-width-desktop, 60px); /* Default desktop width */
    height: auto;
    transition: transform 0.3s ease;
}

.fc-hotspot-item-link:hover .fc-hotspot-item-logo {
    transform: scale(1.1);
}

/* Responsive widths for the logo */
@media (max-width: 849px) { /* Tablet */
    .fc-hotspot-item-logo {
        width: var(--logo-width-tablet, 30px);
    }
}

@media (max-width: 549px) { /* Mobile */
    .fc-hotspot-item-logo {
        width: var(--logo-width-mobile, 25px);
    }
}

/* Styles for link-only hotspots (if no image is provided) */
.fc-hotspot-item-link-only {
    display: block;
    width: 20px; /* Example size */
    height: 20px; /* Example size */
    background-color: rgba(0, 0, 0, 0.5); /* Example visual */
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.fc-hotspot-item-link-only:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}