/* =====================================================
   IV1 Share Widget – Styles
   Author:  Intellivision1
   Version: 1.1.0
   ===================================================== */

/* ── Wrapper ──────────────────────────────────────── */
.iv1-share { display: block; width: 100%; }

/* ── List ─────────────────────────────────────────── */
.iv1-share__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    margin: 0; padding: 0;
}
.iv1-share--vertical .iv1-share__list {
    flex-direction: column;
    align-items: flex-start;
}

/* ── Button ───────────────────────────────────────── */
/*
   Farben über CSS Custom Properties:
     --iv1-bg    Hintergrundfarbe  (PHP inline per network)
     --iv1-fill  SVG-Füllfarbe     (PHP inline per network)
     --iv1-brand Markenfarbe       (immer gesetzt, für Fokus-Ring etc.)

   Elementor-Selektoren ({{WRAPPER}} .iv1-share__btn)
   haben höhere Spezifität als .iv1-share__btn alleine und
   überschreiben die var()-Werte sicher – kein !important nötig.
   Nur für Elementor-bedingte Konflikte mit inline style="" nutzen
   wir !important NUR in den Elementor-Selektoren.
*/
.iv1-share__btn {
    --iv1-bg:    #888;
    --iv1-fill:  #fff;
    --iv1-brand: #888;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    text-decoration: none;
    cursor: pointer;

    /* Background aus CSS-Var → wird durch Elementor überschrieben */
    background-color: var(--iv1-bg);

    transition-property: background-color, box-shadow, transform, opacity, border-color, filter;
    transition-duration: 200ms;
    transition-timing-function: ease;
    border: 0 solid transparent;
    outline: none;
    box-sizing: border-box;
}

.iv1-share__btn:focus-visible {
    outline: 2px solid var(--iv1-brand);
    outline-offset: 3px;
}

/* Shapes */
.iv1-share__btn--circle  { border-radius: 50%; }
.iv1-share__btn--rounded { border-radius: 8px; }
.iv1-share__btn--square  { border-radius: 0; }

/* ── SVG ──────────────────────────────────────────── */
.iv1-share__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    line-height: 1;
}

.iv1-share__btn svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: var(--iv1-fill);   /* ← Elementor-Selektor überschreibt dies */
    transition: fill 200ms ease;
}

.iv1-share__btn svg path {
    fill: inherit;
}

/* ── Hover-Effekte ────────────────────────────────── */
.iv1-share__btn[data-iv1-hover="darken"]:hover  { filter: brightness(0.80); }
.iv1-share__btn[data-iv1-hover="lighten"]:hover { filter: brightness(1.25); }
.iv1-share__btn[data-iv1-hover="lift"]:hover    { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,.20); }
.iv1-share__btn[data-iv1-hover="scale"]:hover   { transform: scale(1.15); }

/* ── Tooltip ──────────────────────────────────────── */
.iv1-share__tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background-color: #1a1a2e;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    padding: 5px 9px;
    border-radius: 5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 100;
}
.iv1-share__tooltip::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1a1a2e;
}
.iv1-share__btn:hover .iv1-share__tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Vertikal: Tooltip rechts */
.iv1-share--vertical .iv1-share__tooltip {
    left: calc(100% + 10px);
    bottom: auto; top: 50%;
    transform: translateY(-50%) translateX(-4px);
}
.iv1-share--vertical .iv1-share__tooltip::after {
    top: 50%; left: -9px;
    transform: translateY(-50%);
    border-top-color: transparent;
    border-right-color: #1a1a2e;
}
.iv1-share--vertical .iv1-share__btn:hover .iv1-share__tooltip {
    transform: translateY(-50%) translateX(0);
}