/* Livechat widget (bottom right), in the house style (huisstijl/softwareshaker-huisstijl.md): a dark head with a red
   glow and a label like the demo popup, buttons 48px high with 5px corners and an arrow, the shaker next to our
   messages. The theme resets margins and gives p a bottom margin, so everything here sets its own. */
.sslc {--sslc-red:#D32020;--sslc-red-dark:#B51B1B;--sslc-ink:#111214;--sslc-text:#353535;--sslc-grey:#6e6e6e;--sslc-line:#e8e8e8;--sslc-bg:#F5F5F5;--sslc-icon:none;font-family:var(--font-regular), Arial, sans-serif;font-weight:var(--font-weight-regular);color:var(--sslc-text);}
.sslc *, .sslc *::before, .sslc *::after {box-sizing:border-box;}
.sslc p, .sslc h2 {margin:0;}
.sslc [hidden] {display:none!important;}

/* Launcher: like the sticky demo button (red, the same shadow) */
.sslc_launcher {position:fixed;right:24px;bottom:24px;z-index:9998;display:flex;align-items:center;justify-content:center;width:58px;height:58px;padding:0;border:0;border-radius:50%;background:var(--sslc-red);color:#fff;box-shadow:0 12px 30px rgba(211,32,32,.32), 0 2px 6px rgba(0,0,0,.12);cursor:pointer;transition:background .25s ease, box-shadow .25s ease, transform .25s ease;}
.sslc_launcher:hover {background:#B81A1A;box-shadow:0 14px 34px rgba(211,32,32,.4), 0 2px 6px rgba(0,0,0,.12);transform:translateY(-1px);}
.sslc_launcher:focus-visible {outline:2px solid #fff;outline-offset:-5px;}
.sslc_launcher svg {width:26px;height:26px;}
.sslc_launcher .sslc_icon_close {display:none;width:22px;height:22px;}
.sslc.is-open .sslc_launcher {background:var(--sslc-ink);box-shadow:0 12px 30px rgba(17,18,20,.3), 0 2px 6px rgba(0,0,0,.12);}
.sslc.is-open .sslc_launcher .sslc_icon_chat {display:none;}
.sslc.is-open .sslc_launcher .sslc_icon_close {display:block;}
.sslc_unread {position:absolute;top:-3px;right:-3px;min-width:22px;height:22px;padding:0 6px;border:2px solid #fff;border-radius:11px;background:var(--sslc-ink);color:#fff;font-family:var(--font-bold), Arial, sans-serif;font-weight:var(--font-weight-bold);font-size:11px;line-height:18px;text-align:center;}

/* Panel */
.sslc_panel {position:fixed;right:24px;bottom:96px;z-index:10001;display:flex;flex-direction:column;width:min(390px, calc(100vw - 48px));height:min(640px, calc(100vh - 120px));height:min(640px, calc(100dvh - 120px));overflow:hidden;border-radius:18px;background:var(--sslc-bg);box-shadow:0 30px 80px -20px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.08);animation:sslcIn .3s cubic-bezier(.2,.8,.2,1);}
.sslc_panel {transform-origin:100% 100%;} /* grows from and shrinks back to the chat button */
.sslc_panel.is-closing {animation:sslcOut .22s cubic-bezier(.4,0,1,1) forwards;pointer-events:none;}
@keyframes sslcIn {from {opacity:0;transform:translateY(16px) scale(.98);} to {opacity:1;transform:none;}}
@keyframes sslcOut {from {opacity:1;transform:none;} to {opacity:0;transform:translateY(16px) scale(.98);}}
@keyframes sslcSheetIn {from {transform:translateY(100%);} to {transform:none;}}
@keyframes sslcSheetOut {from {transform:none;} to {transform:translateY(100%);}}

/* Head: dark with a red glow (hero / demo popup), label, title with the red bar */
.sslc_head {position:relative;display:flex;align-items:flex-start;gap:12px;padding:20px 20px 18px 22px;overflow:hidden;background:radial-gradient(circle at 105% -10%, rgba(211,32,32,.62) 0%, rgba(211,32,32,0) 58%), radial-gradient(circle at -10% 120%, rgba(211,32,32,.22) 0%, rgba(211,32,32,0) 50%), var(--sslc-ink);color:#fff;}
.sslc_head::after {content:"";position:absolute;inset:0;background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(to left, #000, transparent 75%);mask-image:linear-gradient(to left, #000, transparent 75%);pointer-events:none;}
.sslc_head_text {position:relative;z-index:1;flex:1;min-width:0;}
.sslc_kicker {display:inline-block;margin-bottom:10px;padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.14);font-family:var(--font-bold), Arial, sans-serif;font-weight:var(--font-weight-bold);font-size:10.5px;line-height:15px;letter-spacing:.14em;text-transform:uppercase;color:#fff;}
.sslc_kicker_icon {display:none;} /* shown by a skin (Connectplatform) */
.sslc_title {font-family:var(--font-bold), Arial, sans-serif;font-weight:var(--font-weight-bold);font-size:20px;line-height:1.25;color:#fff;text-wrap:balance;}
.sslc_title::after {content:"";display:block;width:40px;height:3px;margin-top:10px;border-radius:2px;background:var(--sslc-red);}
.sslc_status {display:flex;align-items:center;gap:8px;margin-top:10px!important;font-size:13px;line-height:1.4;color:rgba(255,255,255,.8);}
.sslc_dot {flex:none;width:8px;height:8px;border-radius:50%;background:#9a9a9a;}
.sslc.is-online .sslc_dot {background:#3ccf6e;box-shadow:0 0 0 3px rgba(60,207,110,.22);}
.sslc_close {position:relative;z-index:1;flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--sslc-text);box-shadow:0 4px 14px rgba(0,0,0,.18);cursor:pointer;transition:transform .2s ease, background-color .2s ease;}
.sslc_close:hover {transform:rotate(90deg);background:#FDF3F3;}
.sslc_close:focus-visible {outline:2px solid var(--sslc-red);outline-offset:2px;}
.sslc_close svg {width:16px;height:16px;}
.sslc_test {padding:6px 22px;background:#FEEFEE;color:var(--sslc-red-dark);font-size:12px;line-height:1.4;}

.sslc_body {flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 18px 10px;scrollbar-width:thin;scrollbar-color:#CFCFCF transparent;}
.sslc_log {display:flex;flex-direction:column;gap:12px;}

/* Messages: ours white with the shaker, the visitor's red */
.sslc_msg {display:flex;flex-direction:column;max-width:86%;}
.sslc_msg.is-out {display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-areas:"avatar bubble" ". meta";column-gap:8px;align-self:flex-start;}
.sslc_msg.is-in {align-self:flex-end;align-items:flex-end;}
.sslc_avatar {grid-area:avatar;align-self:end;width:30px;height:30px;border-radius:50%;background:var(--sslc-icon) center/18px no-repeat, var(--sslc-ink);}
.sslc_msg.is-out .sslc_bubble {grid-area:bubble;justify-self:start;}
.sslc_msg.is-out .sslc_meta {grid-area:meta;}
.sslc_bubble {padding:11px 14px;border-radius:14px;font-size:14.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;}
.sslc_msg.is-out .sslc_bubble {border-bottom-left-radius:4px;background:#fff;color:var(--sslc-text);box-shadow:0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);}
.sslc_msg.is-in .sslc_bubble {border-bottom-right-radius:4px;background:var(--sslc-red);color:#fff;}
.sslc_bubble a {color:inherit;text-decoration:underline;text-underline-offset:2px;}
.sslc_msg.is-out .sslc_bubble a {color:var(--sslc-red-dark);}
.sslc_meta {margin-top:5px!important;padding:0 4px;font-size:11.5px;line-height:1.3;color:var(--sslc-grey);}
.sslc_msg.is-pending .sslc_bubble {opacity:.6;}

/* Outside the hours: a message with an e-mail address */
.sslc_leave {display:flex;flex-direction:column;gap:12px;margin-top:14px;padding:16px;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.04);}
.sslc_field {display:flex;flex-direction:column;gap:5px;}
.sslc_label {font-family:var(--font-semibold), Arial, sans-serif;font-weight:var(--font-weight-semibold);font-size:13px;line-height:1.3;color:var(--sslc-ink);}
.sslc_leave input, .sslc_leave textarea {display:block;width:100%;margin:0;padding:11px 12px;border:1px solid #dcdcdc;border-radius:5px;background:#fff;color:var(--sslc-text);font-family:var(--font-regular), Arial, sans-serif;font-weight:var(--font-weight-regular);font-size:14.5px;line-height:1.45;box-shadow:none;resize:none;transition:border-color .15s ease, box-shadow .15s ease;}
.sslc_leave input:focus, .sslc_leave textarea:focus {outline:none;border-color:var(--sslc-red);box-shadow:0 0 0 3px rgba(211,32,32,.14);}
.sslc_btn {display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border:0;border-radius:5px;background:var(--sslc-red);color:#fff;font-family:var(--font-semibold), Arial, sans-serif;font-weight:var(--font-weight-semibold);font-size:14.5px;line-height:1;cursor:pointer;transition:background .25s ease;}
.sslc_btn::after {content:"";flex:none;width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M1.5 6h8.5M6.5 2.5 10 6l-3.5 3.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M1.5 6h8.5M6.5 2.5 10 6l-3.5 3.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;transition:transform .25s ease;}
.sslc_btn:hover {background:#B81A1A;}
.sslc_btn:hover::after {transform:translateX(3px);}
.sslc_btn:focus-visible {outline:2px solid #fff;outline-offset:-5px;box-shadow:0 0 0 2px var(--sslc-red);}
.sslc_btn[disabled] {opacity:.65;cursor:default;}
.sslc_btn[disabled]::after {display:none;}
.sslc.is-closed .sslc_dot {background:#9a9a9a;box-shadow:none;}

/* Errors and the hidden spam field */
.sslc_hp {position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
.sslc_error {padding:9px 12px;border-radius:5px;background:#FEEFEE;color:var(--sslc-red-dark);font-size:13px;line-height:1.45;}
.sslc_composer_error {margin:0 14px 10px!important;}

/* Composer */
.sslc_composer {display:flex;align-items:flex-end;gap:8px;padding:12px 14px;border-top:1px solid var(--sslc-line);background:#fff;}
.sslc_composer textarea {flex:1;max-height:120px;min-height:46px;padding:12px;border:1px solid #dcdcdc;border-radius:5px;background:#fff;color:var(--sslc-text);font-family:var(--font-regular), Arial, sans-serif;font-weight:var(--font-weight-regular);font-size:14.5px;line-height:1.45;resize:none;box-shadow:none;transition:border-color .15s ease, box-shadow .15s ease;}
.sslc_composer textarea::placeholder {color:#8a8a8a;}
.sslc_composer textarea:focus {outline:none;border-color:var(--sslc-red);box-shadow:0 0 0 3px rgba(211,32,32,.14);}
.sslc_send {flex:none;display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border:0;border-radius:5px;background:var(--sslc-red);color:#fff;cursor:pointer;transition:background .25s ease;}
.sslc_send:hover {background:#B81A1A;}
.sslc_send:focus-visible {outline:2px solid #fff;outline-offset:-5px;box-shadow:0 0 0 2px var(--sslc-red);}
.sslc_send[disabled] {opacity:.65;cursor:default;}
.sslc_send svg {width:18px;height:18px;}

/* Foot: the phone number like in the demo popup */
.sslc_foot {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;padding:10px 16px 12px;border-top:1px solid var(--sslc-line);background:#fff;font-size:12.5px;line-height:1.4;color:var(--sslc-grey);}
.sslc_composer:not([hidden]) ~ .sslc_foot {border-top:0;padding-top:0;} /* one line above the composer is enough */
.sslc_foot_links {display:flex;gap:14px;}
.sslc .sslc_foot .sslc_phone {color:var(--sslc-ink);font-family:var(--font-semibold), Arial, sans-serif;font-weight:var(--font-weight-semibold);text-decoration:none;white-space:nowrap;}
.sslc .sslc_foot .sslc_phone:hover {color:var(--sslc-red-dark);text-decoration:underline;text-underline-offset:2px;}
.sslc .sslc_link {padding:0;border:0;background:none;color:var(--sslc-grey);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
.sslc .sslc_link:hover {color:var(--sslc-red-dark);}

/* Mobile: the button above the sticky demo button (like the cookie button on the left), the panel almost full screen */
@media(max-width:768px) {
    .sslc_launcher {right:12px;bottom:12px;width:52px;height:52px;}
    body:not(.page-template-template-contact):has(.sticky_cta) .sslc_launcher {bottom:70px;}
    /* Full screen; the content ends above the keyboard and Safari's address bar (--sslc-vv-*: widget.js, visualViewport) */
    .sslc_panel {top:var(--sslc-vv-top, 0px);right:0;bottom:0;left:0;width:100%;height:auto;border-radius:0;box-shadow:none;transform-origin:50% 100%;}
    .sslc_foot {padding-bottom:calc(max(12px, env(safe-area-inset-bottom)) + var(--sslc-vv-pad, 0px));}
    .sslc.is-keyboard .sslc_foot {padding-bottom:calc(8px + var(--sslc-vv-pad, 0px));}
    .sslc.is-open .sslc_launcher {display:none;}
    .sslc textarea, .sslc input {font-size:16px!important;} /* no zoom on iOS */
    /* Opening and closing: the panel slides up from and back down to the bottom, like a sheet */
    .sslc_panel {animation:sslcSheetIn .34s cubic-bezier(.2,.8,.2,1);}
    .sslc_panel.is-closing {animation:sslcSheetOut .26s cubic-bezier(.4,0,1,1) forwards;}
    /* A compact head on phones, the same with and without the keyboard */
    .sslc_head {align-items:center;padding:max(14px, env(safe-area-inset-top)) 16px 14px 18px;}
    .sslc_kicker, .sslc_title::after {display:none;}
    .sslc_title {font-size:18px;}
    .sslc_status {margin-top:4px!important;font-size:12.5px;}
    .sslc_status_text {min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
}

/* Phones: the page behind the open chat stays put (body fixed, its top set by widget.js to where the page was) */
html.sslc-lock, html.sslc-lock body {overflow:hidden;}
html.sslc-lock body {position:fixed;left:0;right:0;width:100%;}

@media (prefers-reduced-motion:reduce) {
    .sslc_panel, .sslc_panel.is-closing {animation:none;}
    .sslc_launcher, .sslc_send, .sslc_close, .sslc_btn, .sslc_btn::after {transition:none;}
}

@media print {
    .sslc {display:none!important;}
}