/* Shared image share control. Numbers follow the eight reference designs. */
.whatsapp-main-image-wrapper,
.mechanisation-main-image-wrapper { position: relative; }

.whatsapp-image-share {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0cce60;
    color: #fff;
    text-decoration: none;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.whatsapp-image-share .whatsapp-share-icon { font-size: 38px; line-height: 1; }
.whatsapp-image-share .whatsapp-share-badge {
    position: absolute;
    bottom: -1px;
    right: -4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #008c39;
    color: #fff;
    font-size: 16px;
    line-height: 1;
}
.whatsapp-image-share:hover,
.whatsapp-image-share:focus { background-color: #0bb454; color: #fff; text-decoration: none; }
.whatsapp-image-share:focus { outline: 3px solid #005581; outline-offset: 4px; }

/* 1: dark badge over the bottom-right edge (base design). */
/* 2: small white circle inset at the top-right. */
.whatsapp-design-2 .whatsapp-share-badge { top: -2px; bottom: auto; right: 0; width: 28px; height: 28px; background: #fff; color: #00a34c; font-size: 14px; }
/* 3: side-by-side icons with a divider. */
.whatsapp-design-3 { width: 88px; }
.whatsapp-design-3 .whatsapp-share-icon { font-size: 32px; margin-right: 36px; }
.whatsapp-design-3 .whatsapp-share-badge { top: 20px; right: 7px; bottom: auto; width: 29px; height: 36px; border-left: 1px solid rgba(255,255,255,.75); border-radius: 0; background: transparent; }
/* 4: dark share badge at the top-right corner. */
.whatsapp-design-4 .whatsapp-share-badge { top: -8px; right: -8px; bottom: auto; }
/* 5: smaller, translucent circle. */
.whatsapp-design-5 .whatsapp-share-badge { width: 27px; height: 27px; background: rgba(140,235,170,.78); font-size: 14px; }
/* 6: white outline and white badge. */
.whatsapp-design-6 { border: 3px solid #fff; }
.whatsapp-design-6 .whatsapp-share-badge { right: -7px; bottom: -7px; border: 2px solid #0cce60; background: #fff; color: #00a34c; }
/* 7: compact circle with a tooltip on hover or keyboard focus. */
.whatsapp-design-7 { width: 64px; height: 64px; top: 46px; }
.whatsapp-design-7 .whatsapp-share-icon { font-size: 34px; }
.whatsapp-design-7 .whatsapp-share-badge { width: 28px; height: 28px; font-size: 14px; }
.whatsapp-share-tooltip {
    position: absolute;
    right: -6px;
    bottom: calc(100% + 10px);
    padding: 7px 10px;
    border-radius: 5px;
    background: #161616;
    color: #fff;
    font: 12px/1.4 Arial, sans-serif;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
.whatsapp-design-7:hover .whatsapp-share-tooltip,
.whatsapp-design-7:focus .whatsapp-share-tooltip { visibility: visible; opacity: 1; }
/* 8: minimal icons on a single circle, with a translucent side panel. */
.whatsapp-design-8 { overflow: hidden; box-shadow: none; }
.whatsapp-design-8 .whatsapp-share-icon { margin-right: 21px; font-size: 32px; }
.whatsapp-design-8 .whatsapp-share-badge { top: 20px; right: 0; bottom: auto; width: 30px; height: 36px; border-radius: 0; background: rgba(0,120,55,.3); font-size: 14px; }
@media (max-width: 480px) {
    .whatsapp-image-share { transform: scale(.8); transform-origin: top right; right: 12px; top: 12px; }
    .whatsapp-design-7 { top: 38px; }
}