/**
 * OYROPA UNIFIED SHARE-BUTTON SYSTEM
 * Version: 1.0
 * Date: 16.10.2025
 *
 * Einheitliche Share-Buttons für ALLE Seiten
 * Plattformen: WhatsApp, Telegram, Facebook, X/Twitter, LinkedIn, E-Mail, Copy-Link
 */

/* ===============================================================
   SHARE-BUTTONS CONTAINER
   =============================================================== */

.oyropa-share-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    margin: 0;
}

/* HEADER VARIANT (kompakt) */
.oyropa-share-buttons.header-variant {
    gap: 8px;
}

/* CONTENT VARIANT (größer, mit Label) */
.oyropa-share-buttons.content-variant {
    gap: 16px;
    padding: 20px 0;
    flex-wrap: wrap;
}

/* FLOATING SIDEBAR (Desktop only) */
.oyropa-share-buttons.floating-variant {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 12px;
    z-index: 900;
}

/* ===============================================================
   INDIVIDUAL SHARE BUTTONS
   =============================================================== */

.oyropa-share-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important; /* Rund */
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* Hover Effect */
.oyropa-share-btn:hover {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

/* Focus/Active States */
.oyropa-share-btn:focus {
    outline: 3px solid #D69E2E !important;
    outline-offset: 2px !important;
}

.oyropa-share-btn:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Icon Inside */
.oyropa-share-btn svg {
    width: 20px !important;
    height: 20px !important;
    fill: currentColor !important;
}

/* ===============================================================
   PLATFORM-SPECIFIC COLORS
   =============================================================== */

/* WhatsApp */
.oyropa-share-btn.whatsapp {
    background-color: #25D366 !important;
    color: white !important;
}

.oyropa-share-btn.whatsapp:hover {
    background-color: #128C7E !important;
}

/* Telegram */
.oyropa-share-btn.telegram {
    background-color: #0088cc !important;
    color: white !important;
}

.oyropa-share-btn.telegram:hover {
    background-color: #006699 !important;
}

/* Facebook */
.oyropa-share-btn.facebook {
    background-color: #1877F2 !important;
    color: white !important;
}

.oyropa-share-btn.facebook:hover {
    background-color: #145dbf !important;
}

/* X (Twitter) */
.oyropa-share-btn.twitter {
    background-color: #000000 !important;
    color: white !important;
}

.oyropa-share-btn.twitter:hover {
    background-color: #14171A !important;
}

/* LinkedIn */
.oyropa-share-btn.linkedin {
    background-color: #0A66C2 !important;
    color: white !important;
}

.oyropa-share-btn.linkedin:hover {
    background-color: #004182 !important;
}

/* E-Mail */
.oyropa-share-btn.email {
    background-color: #EA4335 !important;
    color: white !important;
}

.oyropa-share-btn.email:hover {
    background-color: #c23321 !important;
}

/* Copy Link */
.oyropa-share-btn.copy-link {
    background-color: #1A365D !important; /* OYROPA Navy */
    color: white !important;
}

.oyropa-share-btn.copy-link:hover {
    background-color: #D69E2E !important; /* OYROPA Gold */
}

/* ===============================================================
   RESPONSIVE - MOBILE
   =============================================================== */

@media (max-width: 768px) {
    /* Header Buttons - kleiner auf Mobile */
    .oyropa-share-buttons.header-variant .oyropa-share-btn {
        width: 36px !important;
        height: 36px !important;
    }

    .oyropa-share-buttons.header-variant .oyropa-share-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Floating Sidebar verstecken auf Mobile */
    .oyropa-share-buttons.floating-variant {
        display: none !important;
    }

    /* Content Buttons - Touch-friendly */
    .oyropa-share-buttons.content-variant .oyropa-share-btn {
        width: 48px !important;
        height: 48px !important;
    }

    .oyropa-share-buttons.content-variant {
        justify-content: center;
    }
}

/* ===============================================================
   DESKTOP
   =============================================================== */

@media (min-width: 1200px) {
    /* Floating Sidebar nur auf großen Screens */
    .oyropa-share-buttons.floating-variant {
        display: flex !important;
    }

    /* Header Buttons etwas größer */
    .oyropa-share-buttons.header-variant .oyropa-share-btn {
        width: 44px !important;
        height: 44px !important;
    }
}

/* ===============================================================
   ACCESSIBILITY
   =============================================================== */

/* Screen Reader Text */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .oyropa-share-btn {
        border: 2px solid currentColor !important;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .oyropa-share-btn {
        transition: none !important;
    }
}

/* ===============================================================
   SUCCESS MESSAGE (Copy Link)
   =============================================================== */

.oyropa-share-success {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #1A365D;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 9999;
    animation: slideInUp 0.3s ease;
}

@keyframes slideInUp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}