/* Floating social dock: round icon buttons for OUR country pages, sitting directly beside the
   floating cookie-settings button (consent.css .consent-footer-link) on the same baseline.
   Same size, shape, border, blur, shadow and opacity as that button, so the two read as one lane.
   Logical properties only: under dir="rtl" the cookie button mirrors to the left and the dock
   follows it. Positioned `--dock-edge + --dock-size + .5rem` from the end edge = the first slot to
   the inline-start side of the cookie button; extra platforms grow further inline-start. */
.social-dock {
    --dock-size: 44px;
    --dock-edge: 1rem; /* the cookie button's inset-inline-end / inset-block-end */
    position: fixed;
    inset-inline-end: calc(var(--dock-edge) + var(--dock-size) + 0.5rem);
    inset-block-end: var(--dock-edge);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.social-dock__btn {
    inline-size: var(--dock-size);
    block-size: var(--dock-size);
    min-inline-size: 44px;
    min-block-size: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 21, 26, 0.85);
    color: var(--text-light, #e6edf3);
    border: 1px solid var(--border-light, #2c3640);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    opacity: 0.85;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.social-dock__btn svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    flex: none;
    fill: currentColor;
}

.social-dock__btn:hover {
    border-color: #199baa;
    color: #199baa;
    opacity: 1;
    transform: translateY(-1px);
}

.social-dock__btn:focus-visible {
    outline: 3px solid var(--gold, #c8a951);
    outline-offset: 3px;
    opacity: 1;
}

@media (min-width: 768px) {
    .social-dock {
        --dock-size: 48px;
    }
    .social-dock__btn svg {
        inline-size: 1.35rem;
        block-size: 1.35rem;
    }
}

@media (max-width: 480px) {
    .social-dock {
        --dock-edge: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .social-dock__btn {
        transition: none;
    }
    .social-dock__btn:hover {
        transform: none;
    }
}

/* Same floating-action lane as the cookie button (consent.css): on pages carrying a bottom-end
   chat bubble or WhatsApp share FAB, both ride above it, side by side. */
body:has(#pchat-widget, .wa-share-fab) .social-dock {
    inset-block-end: calc(1.5rem + max(56px, 3.5rem) + 0.75rem + env(safe-area-inset-bottom, 0px));
}

/* While the consent banner is open it already covers this corner and the cookie button hides;
   hide the dock too so it is neither covered nor focusable underneath. Returns after a choice. */
body:has(#consent-banner) .social-dock {
    display: none;
}