/* ──────────────────────────────────────────────────────────
   FictionX – moi-1 Custom share bar (fx-share)
   A lightweight, self-hosted social share component that
   replaces the external ShareThis widget. No third-party JS,
   no external requests, no box-shadow on buttons (per template
   UI rule). RTL-first using logical properties + flex gap.
   ────────────────────────────────────────────────────────── */

.fx-share{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px;
    margin:26px 0 8px;
    padding:16px 20px;
    border:1px solid rgba(15,23,42,.08);
    border-radius:4px;
    background:linear-gradient(180deg,#fbfbfc 0%,#f5f6f8 100%);
}

.fx-share__title{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    font-weight:700;
    color:#1f2937;
    margin-inline-end:6px;
}
.fx-share__title i{ color:#a51313; font-size:16px; }

.fx-share__list{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
}

.fx-share__btn{
    --fx-net:#a51313;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    padding:0;
    border:1px solid rgba(15,23,42,.12);
    border-radius:50%;
    background:#fff;
    color:#475569;
    font-size:17px;
    line-height:1;
    cursor:pointer;
    text-decoration:none;
    box-shadow:none; /* template rule: no shadow on buttons */
    transition:transform .25s cubic-bezier(.22,.61,.36,1),
               background .25s ease, color .25s ease, border-color .25s ease;
}
.fx-share__btn i{ pointer-events:none; }

.fx-share__btn:hover,
.fx-share__btn:focus-visible{
    transform:translateY(-3px);
    background:var(--fx-net);
    border-color:var(--fx-net);
    color:#fff;
    outline:none;
}
.fx-share__btn:focus-visible{
    outline:2px solid var(--fx-net);
    outline-offset:2px;
}
.fx-share__btn:active{ transform:translateY(-1px); }

/* Per-network brand accents (applied on hover via --fx-net) */
.fx-share__btn.is-fb{   --fx-net:#1877f2; }
.fx-share__btn.is-x{    --fx-net:#111827; }
.fx-share__btn.is-wa{   --fx-net:#25d366; }
.fx-share__btn.is-tg{   --fx-net:#229ed9; }
.fx-share__btn.is-in{   --fx-net:#0a66c2; }
.fx-share__btn.is-mail{ --fx-net:#c0392b; }
.fx-share__btn.is-copy{ --fx-net:#a51313; }

/* The bundled Font Awesome predates fa-telegram (4.7), so the glyph is blank;
   draw it from an SVG mask that follows currentColor. */
.fx-share__btn .fa-telegram::before{
    content:"";
    display:block;
    width:1.1em;
    height:1.1em;
    background-color:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.9 4.3 18.7 19.4c-.2 1-.9 1.3-1.7.8l-4.8-3.5-2.3 2.2c-.3.3-.5.5-1 .5l.3-4.9 8.9-8c.4-.3-.1-.5-.6-.2L6.5 13.2l-4.7-1.5c-1-.3-1-1 .2-1.5L20.6 3c.9-.3 1.6.2 1.3 1.3z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.9 4.3 18.7 19.4c-.2 1-.9 1.3-1.7.8l-4.8-3.5-2.3 2.2c-.3.3-.5.5-1 .5l.3-4.9 8.9-8c.4-.3-.1-.5-.6-.2L6.5 13.2l-4.7-1.5c-1-.3-1-1 .2-1.5L20.6 3c.9-.3 1.6.2 1.3 1.3z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Brand glyphs: pages that load Font Awesome 6 remap `.fa` to the non-brand
   "Font Awesome 6 Free" font, so fa-facebook/twitter/whatsapp/linkedin render
   as empty boxes. Draw them from SVG masks so they work under FA4 and FA6. */
.fx-share__btn .fa-facebook::before,
.fx-share__btn .fa-twitter::before,
.fx-share__btn .fa-whatsapp::before,
.fx-share__btn .fa-linkedin::before{
    content:"";
    display:block;
    width:1.05em;
    height:1.05em;
    background-color:currentColor;
    -webkit-mask:var(--fx-glyph) center/contain no-repeat;
            mask:var(--fx-glyph) center/contain no-repeat;
}
.fx-share__btn .fa-facebook{
    --fx-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 22v-8h2.7l.4-3.2h-3.1V8.8c0-.9.3-1.5 1.6-1.5h1.7V4.4c-.3 0-1.3-.1-2.5-.1-2.4 0-4.1 1.5-4.1 4.2v2.3H7.5V14h2.7v8z'/%3E%3C/svg%3E");
}
.fx-share__btn .fa-twitter{
    --fx-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.8 3h3.1l-6.8 7.8 8 10.6h-6.3l-4.9-6.4-5.6 6.4H2.2l7.3-8.3L1.8 3h6.4l4.4 5.9zm-1.1 16.5h1.7L7.4 4.8H5.6z'/%3E%3C/svg%3E");
}
.fx-share__btn .fa-whatsapp{
    --fx-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.21 3.08c.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.63.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.69.25-1.29.17-1.41-.07-.12-.27-.2-.57-.35zM12.05 21.5a9.4 9.4 0 0 1-4.8-1.31l-.34-.2-3.57.94.95-3.48-.22-.36a9.4 9.4 0 0 1-1.44-5.02c0-5.2 4.23-9.43 9.44-9.43a9.4 9.4 0 0 1 9.43 9.44c0 5.2-4.24 9.42-9.44 9.42zm8.03-17.46A11.3 11.3 0 0 0 12.05.7C5.8.7.7 5.79.7 12.05c0 2 .52 3.95 1.52 5.67L.6 23.4l5.8-1.52a11.3 11.3 0 0 0 5.64 1.44c6.26 0 11.36-5.09 11.36-11.35 0-3.03-1.18-5.88-3.32-8.03z'/%3E%3C/svg%3E");
}
.fx-share__btn .fa-linkedin{
    --fx-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.94 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM7 8.48H3V21h4zm6.32 0H9.34V21h3.94v-6.57c0-3.66 4.77-4 4.77 0V21H22v-7.93c0-6.17-7.06-5.94-8.72-2.91z'/%3E%3C/svg%3E");
}

/* Copy-to-clipboard confirmation toast (injected by fx-share.js) */
.fx-share-toast{
    position:fixed;
    inset-block-end:28px;
    inset-inline-start:50%;
    transform:translateX(-50%) translateY(16px);
    background:#1f2937;
    color:#fff;
    font-size:14px;
    font-weight:600;
    padding:11px 20px;
    border-radius:4px;
    display:flex;
    align-items:center;
    gap:8px;
    opacity:0;
    pointer-events:none;
    z-index:2147483000;
    transition:opacity .25s ease, transform .25s cubic-bezier(.22,.61,.36,1);
}
.fx-share-toast.is-visible{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}
.fx-share-toast i{ color:#37d67a; }

@media (max-width:520px){
    .fx-share{ gap:10px; padding:14px; }
    .fx-share__btn{ width:38px; height:38px; font-size:15px; }
}

@media (prefers-reduced-motion: reduce){
    .fx-share__btn,
    .fx-share-toast{ transition:none; }
    .fx-share__btn:hover,
    .fx-share__btn:focus-visible,
    .fx-share__btn:active{ transform:none; }
}