/*
 * findi360 share kit — 29 Oct 2026 (owner): one look for every WhatsApp,
 * LinkedIn, Email, Copy link and Download button on the site.
 *
 *   Pill:  <a class="fi-sh fi-sh--wa" …>WhatsApp</a>
 *          graphite circle + gold symbol, white body, gold border on hover.
 *   Icon:  add fi-sh--icon (38 × 38, label hidden; give it a title/aria-label).
 *   Tile:  add fi-sh--tile inside .fi-sh-tiles — the 3D mascot above the label.
 *
 * The symbol and the mascot are drawn by ::before / ::after, so the many
 * "Copied" scripts that rewrite a button's text never remove the icon.
 * Selectors are doubled (a.fi-sh.fi-sh) so older page styles cannot win.
 */
.fi-sh--wa{--fi-sh-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2c-1.5 0-3-.4-4.3-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.2.3-.9.9-.9 2.2s.9 2.5 1 2.7c.1.2 1.8 2.8 4.4 3.9 1.6.7 2.3.8 3.1.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2l-.6-.3z'/%3E%3C/svg%3E");--fi-sh-art:url("/images/share/whatsapp.webp");}
.fi-sh--li{--fi-sh-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 8.5h3V19H5zM6.5 4a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zM10 8.5h2.9v1.4c.4-.8 1.4-1.7 3-1.7 3.1 0 3.6 2 3.6 4.7V19h-3v-5.4c0-1.3 0-2.9-1.8-2.9s-2 1.4-2 2.8V19H10z'/%3E%3C/svg%3E");--fi-sh-art:url("/images/share/linkedin.webp");}
.fi-sh--mail{--fi-sh-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm9 7.2L4.4 7h15.2zM4 8.6V17h16V8.6l-8 5.4z'/%3E%3C/svg%3E");--fi-sh-art:url("/images/share/email.webp");}
.fi-sh--copy{--fi-sh-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10.6 13.4a1 1 0 0 1 0-1.4l3.5-3.5a1 1 0 1 1 1.4 1.4L12 13.4a1 1 0 0 1-1.4 0zM8.5 19.5a4 4 0 0 1-2.8-6.8l2.1-2.1a1 1 0 0 1 1.4 1.4l-2.1 2.1a2 2 0 0 0 2.8 2.8l2.1-2.1a1 1 0 0 1 1.4 1.4l-2.1 2.1a4 4 0 0 1-2.8 1.2zm7.1-6.3a1 1 0 0 1-.7-1.7l2.1-2.1a2 2 0 0 0-2.8-2.8l-2.1 2.1a1 1 0 0 1-1.4-1.4l2.1-2.1a4 4 0 0 1 5.6 5.6l-2.1 2.1a1 1 0 0 1-.7.3z'/%3E%3C/svg%3E");--fi-sh-art:url("/images/share/link.webp");}
.fi-sh--dl{--fi-sh-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 3h2v9.6l3.3-3.3 1.4 1.4L12 16.4l-5.7-5.7 1.4-1.4 3.3 3.3zM4 18h16v2H4z'/%3E%3C/svg%3E");--fi-sh-art:url("/images/share/download.webp");}
.fi-sh--share{--fi-sh-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2.5 11.2 21 3.5l-4.4 17-5.1-5.3-3 2.6.4-4.4 9.1-8.6-11 7.4z'/%3E%3C/svg%3E");--fi-sh-art:url("/images/share/share.webp");}

a.fi-sh.fi-sh, button.fi-sh.fi-sh {
    --fi-sh-ink: #1f1f1f; --fi-sh-gold: #f5b700; --fi-sh-line: #e7e2da;
    position: relative; display: inline-flex !important; align-items: center; justify-content: flex-start; gap: 0;
    box-sizing: border-box; height: 38px !important; min-height: 0 !important; width: auto;
    margin: 0; padding: 0 15px 0 42px !important;
    border-radius: 999px !important; border: 1px solid var(--fi-sh-line) !important;
    background: #fff !important; color: var(--fi-sh-ink) !important; box-shadow: none !important;
    font-family: inherit; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important;
    text-decoration: none !important; white-space: nowrap; cursor: pointer; vertical-align: middle;
    -webkit-appearance: none; appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.fi-sh.fi-sh::before, button.fi-sh.fi-sh::before {
    content: ""; position: absolute; left: 5px; top: 50%; width: 28px; height: 28px; margin-top: -14px;
    border-radius: 50%; background: var(--fi-sh-ink);
}
a.fi-sh.fi-sh::after, button.fi-sh.fi-sh::after {
    content: ""; position: absolute; left: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
    background: var(--fi-sh-gold);
    -webkit-mask: var(--fi-sh-ico) center / contain no-repeat; mask: var(--fi-sh-ico) center / contain no-repeat;
}
a.fi-sh.fi-sh:hover, button.fi-sh.fi-sh:hover,
a.fi-sh.fi-sh:focus-visible, button.fi-sh.fi-sh:focus-visible {
    border-color: var(--fi-sh-gold) !important; box-shadow: 0 8px 18px -12px rgba(212, 160, 23, .6) !important; transform: translateY(-1px);
}
a.fi-sh.fi-sh:focus-visible, button.fi-sh.fi-sh:focus-visible { outline: 3px solid rgba(245, 183, 0, .45); outline-offset: 2px; }
a.fi-sh.fi-sh > svg, button.fi-sh.fi-sh > svg { display: none !important; }

/* Icon only — tight spots. The text stays for screen readers and "Copied". */
a.fi-sh.fi-sh--icon, button.fi-sh.fi-sh--icon {
    width: 38px; padding: 0 !important; justify-content: center; font-size: 0 !important; color: transparent !important; overflow: hidden;
}
a.fi-sh.fi-sh--icon::before, button.fi-sh.fi-sh--icon::before { left: 4px; width: 28px; height: 28px; }
a.fi-sh.fi-sh--icon::after, button.fi-sh.fi-sh--icon::after { left: 11px; }

/* Rows */
.fi-sh-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fi-sh-row__label { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6b665d; margin-right: 4px; }

/* Tiles — the 3D mascot above the label. */
.fi-sh-tiles { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
a.fi-sh.fi-sh--tile, button.fi-sh.fi-sh--tile {
    flex-direction: column; justify-content: flex-end; align-items: center;
    width: 112px; height: auto !important; min-height: 120px !important;
    padding: 90px 6px 12px !important; border-radius: 18px !important;
    white-space: normal; text-align: center; line-height: 1.2 !important; font-size: 13px !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .03) !important;
}
a.fi-sh.fi-sh--tile::before, button.fi-sh.fi-sh--tile::before {
    left: 50%; top: 10px; width: 76px; height: 76px; margin: 0 0 0 -38px; border-radius: 0;
    background: var(--fi-sh-art) center / contain no-repeat; transition: transform .2s ease;
}
a.fi-sh.fi-sh--tile::after, button.fi-sh.fi-sh--tile::after { display: none; }
a.fi-sh.fi-sh--tile:hover, button.fi-sh.fi-sh--tile:hover,
a.fi-sh.fi-sh--tile:focus-visible, button.fi-sh.fi-sh--tile:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 22px -12px rgba(212, 160, 23, .55) !important; }
a.fi-sh.fi-sh--tile:hover::before, button.fi-sh.fi-sh--tile:hover::before { transform: scale(1.06) rotate(-2deg); }

/* Band — the full-body paper-plane mascot beside a heading and the tiles. */
.fi-sh-band { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: center; }
.fi-sh-band__hero { width: 170px; height: auto; display: block; }

@media (max-width: 640px) {
    .fi-sh-tiles { gap: 8px; }
    a.fi-sh.fi-sh--tile, button.fi-sh.fi-sh--tile { width: calc(33.333% - 6px); min-width: 0; min-height: 102px !important; padding: 72px 4px 10px !important; font-size: 12px !important; }
    a.fi-sh.fi-sh--tile::before, button.fi-sh.fi-sh--tile::before { width: 58px; height: 58px; margin-left: -29px; top: 8px; }
    .fi-sh-band { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .fi-sh-band__hero { width: 130px; }
    .fi-sh-band .fi-sh-tiles { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    a.fi-sh.fi-sh, button.fi-sh.fi-sh, a.fi-sh.fi-sh--tile::before, button.fi-sh.fi-sh--tile::before { transition: none; }
}