/* blog-vue B25: the WhatsApp button (click-to-chat-for-whatsapp 4.45, style 2) and the reading progress bar
 * (reading-progress-bar), as the plugins draw them on live. Places, sizes and colours come from the exported plugin
 * options (src/Widgets/), printed inline on the elements. */

/* WhatsApp: fixed bottom right (inline <style id="ht-ctc-place">), above everything like the plugin (z-index 99999999). */
.ht-ctc-chat { --side: right; position: fixed; bottom: 15px; right: 15px; z-index: 99999999; display: block; cursor: pointer;
  text-decoration: none; line-height: normal; color: inherit; -webkit-tap-highlight-color: transparent; }
.ht-ctc-chat:hover, .ht-ctc-chat:focus { text-decoration: none; color: inherit; }
.ht-ctc-chat:focus { outline: none; }
.ht-ctc-chat:focus-visible { outline: 2px solid #25D366; outline-offset: 3px; border-radius: 12px; }
.ht-ctc-chat .ht_ctc_style, .ht-ctc-chat .ctc_s_2 { display: flex; justify-content: center; align-items: center; }
.ht-ctc-chat.ctc-side-left .ctc_s_2 { flex-direction: row-reverse; }
/* While B23's cookie box is open the button goes under its dark layer (z-index 99998): on live it covered the box's
 * buttons in the bottom right corner. */
body:has(#blog-consent:not([hidden])) .ht-ctc-chat { z-index: 99997; }
/* The label: the plugin's inline style of ht_ctc_s2 (padding, line height, radius, margin), shown on mouse-over (js/widgets.js)
 * or keyboard focus; "show" = always. */
.ht-ctc-chat .ctc_cta { display: none; order: 0; margin: 0 10px; padding: 0 16px; border-radius: 10px; line-height: 1.6;
  white-space: nowrap; font-weight: normal; }
.ht-ctc-chat .ht-ctc-cta-show, .ht-ctc-chat.ctc-cta-on .ht-ctc-cta-hover, .ht-ctc-chat:focus-visible .ht-ctc-cta-hover {
  display: block; animation: ht_ctc_cta_stick .12s cubic-bezier(.25, .8, .25, 1) both; transform-origin: var(--side, right) center; }
@keyframes ht_ctc_cta_stick { 0% { opacity: 0; transform: translateX(6px) scaleX(.6); } to { opacity: 1; transform: translateX(0) scaleX(1); } }
/* Entry: the plugin's "corner" show effect (ht_ctc_an_entry_corner, 0.4 s). */
.ht-ctc-chat { animation: ht_ctc_anim_corner .4s cubic-bezier(.25, 1, .5, 1) both; transform-origin: bottom var(--side, right); }
@keyframes ht_ctc_anim_corner { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .ht-ctc-chat, .ht-ctc-chat .ctc_cta { animation: none !important; }
}
@media (max-width: 1025px) { .ht-ctc-chat.ctc-hide-mobile { display: none; } }
@media (min-width: 1026px) { .ht-ctc-chat.ctc-hide-desktop { display: none; } }
@media print { .ht-ctc-chat, .readingProgressbar { display: none !important; } }

/* Reading bar: rp-public.css + what rp-public.js set inline (height, top/bottom, colours, display: block). */
.readingProgressbar { display: none; position: fixed; left: 0; top: 0; bottom: auto; width: 100%; height: 3px; margin: 0; padding: 0;
  z-index: 9999999; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none;
  background-color: var(--rp-bg, #ffffff); color: var(--rp-fg, #63ad35); pointer-events: none; vertical-align: top; }
.readingProgressbar.rp-on { display: block; }
.readingProgressbar.rp-bottom { top: auto; bottom: 0; }
.readingProgressbar::-webkit-progress-bar { background-color: transparent; }
.readingProgressbar::-webkit-progress-value { background-color: var(--rp-fg, #63ad35); }
.readingProgressbar::-moz-progress-bar { background-color: var(--rp-fg, #63ad35); }