/* Container des Hotspots (Overlay) */
.wcsym-icon-wrapper {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1; /* Minimalst möglicher z-index für Flatsome */
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    border-radius: 50%;
    cursor: pointer; /* WICHTIG für iOS, damit der Tap/Klick als Hover erkannt wird */
    pointer-events: auto;
    outline: none;
    box-shadow: 0 0px 1px rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent; /* Entfernt das blaue Flackern beim Tippen auf Android */
}

/* Unsichtbarer, vergrößerter Klick-Bereich für Handys ("Fat Finger" Fix) */
.wcsym-icon-wrapper::after {
    content: '';
    position: absolute;
    top: -15px;
    right: -15px;
    bottom: -15px;
    left: -15px;
    border-radius: 50%;
    z-index: 1;
}

/* Das Ausrufezeichen im Punkt */
.wcsym-icon-wrapper::before {
    content: "!";
    color:  lightgrey; 
    font-size: 11px;
    font-weight: bold;
    font-family: sans-serif;
    line-height: 1; 
    position: relative;
    z-index: 2; /* Über dem unsichtbaren Klick-Bereich */
}

/* Fokus-Style für Barrierefreiheit (Tastatur) */
.wcsym-icon-wrapper:focus-visible {
    box-shadow: 0 0 0 3px #000000, 0 1px 4px rgba(0,0,0,0.4);
}

/* Tooltip Styling */
.wcsym-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: calc(100% + 15px); /* Etwas mehr Abstand wegen der vergrößerten Touch-Area */
    right: -4px; 
    background-color: #333333;
    color: #ffffff;
    text-align: center;
    padding: 6px 12px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 13px;
    font-family: sans-serif;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none; 
    z-index: 2;
    font-weight: normal;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Tooltip Pfeil */
.wcsym-tooltip::before { /* Geändert von ::after auf ::before, da ::after jetzt für die Touch-Area genutzt wird */
    content: "";
    position: absolute;
    bottom: 100%; 
    right: 6px; 
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #333333 transparent;
}

/* Einblenden des Tooltips bei Hover/Fokus */
.wcsym-icon-wrapper:hover .wcsym-tooltip,
.wcsym-icon-wrapper:focus .wcsym-tooltip,
.wcsym-icon-wrapper:active .wcsym-tooltip { /* :active für besseres Feedback auf Touchscreens */
    visibility: visible;
    opacity: 1;
}

/* Das umschließende Galerie-Element relativ machen, damit das Icon darin absolut positioniert werden kann */
.woocommerce-product-gallery {
    position: relative !important;
}

/* Flatsome Header Safety Fix */
#masthead, .header-wrapper, .is-sticky {
    z-index: 9999 !important;
}