/* Article social share — Desktop sticky left (only); Mobile uses inline at article end */

#article-share-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
    z-index: 30;
    animation: shareBarSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes shareBarSlideIn {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* === Desktop only: vertical sticky bar on left === */
@media (min-width: 1025px) {
    #article-share-bar {
        position: fixed;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        flex-direction: column;
        width: 56px;
    }
}

/* === Mobile/Tablet: HIDE floating bar (uses inline #article-share-inline instead) === */
@media (max-width: 1024px) {
    #article-share-bar {
        display: none !important;
    }
}

/* === Inline share section (mobile + after article content on all devices) === */
#article-share-inline {
    margin: 32px 0 16px;
    padding: 20px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 16px;
    text-align: center;
}

#article-share-inline .share-inline-title {
    font-size: 15px;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 12px;
}

#article-share-inline .share-inline-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

#article-share-inline .share-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

#article-share-inline .share-btn:active { transform: scale(0.94); }

/* Hide inline on desktop (since sticky bar handles it) */
@media (min-width: 1025px) {
    #article-share-inline {
        display: none;
    }
}

/* Shared button color classes */
.share-btn:focus-visible {
    outline: 3px solid #FF6B35;
    outline-offset: 2px;
}

.share-btn.facebook { background: #1877F2; color: white; box-shadow: 0 2px 8px rgba(24,119,242,0.3); }
.share-btn.line     { background: #06C755; color: white; box-shadow: 0 2px 8px rgba(6,199,85,0.3); }
.share-btn.twitter  { background: #000;    color: white; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.share-btn.copy     { background: #D1D5DB; color: #4A5568; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

#article-share-bar .share-btn:hover {
    transform: scale(1.08);
}

/* Copy feedback toast */
.share-copy-toast {
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: rgba(0, 0, 0, 0.87);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 2001;
    pointer-events: none;
    animation: toastSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes toastSlideUp {
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

.share-copy-toast.hide {
    animation: toastSlideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes toastSlideDown {
    to { transform: translateX(-50%) translateY(100px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    #article-share-bar, #article-share-inline, .share-btn { animation: none; transition: none; }
    .share-btn:hover, .share-btn:active { transform: none; }
    .share-copy-toast { animation: none; transform: translateX(-50%) translateY(0); }
    .share-copy-toast.hide { animation: none; transform: translateX(-50%) translateY(100px); opacity: 0; }
}