/* CommerceHub Web shop communication · Premium state UI v43r129 */
.sfcomm{
  position:fixed;right:20px;bottom:20px;z-index:1700;
  font-family:inherit;color:#173a5c
}
.sfcomm *{box-sizing:border-box}
.sfcomm [hidden]{display:none!important}

.sfcomm-launcher{
  position:relative;width:208px;height:58px;padding:0 12px;
  border:1px solid rgba(190,209,226,.95);border-radius:18px;
  background:rgba(255,255,255,.98);
  box-shadow:0 14px 36px rgba(18,48,78,.16);
  display:grid;grid-template-columns:40px minmax(0,1fr) 28px;
  gap:10px;align-items:center;text-align:left;color:#173a5c;cursor:pointer;
  backdrop-filter:blur(14px);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease
}
.sfcomm-launcher:hover{transform:translateY(-1px);border-color:#a9c6e1;box-shadow:0 17px 40px rgba(18,48,78,.19)}
.sfcomm.is-open .sfcomm-launcher{display:none}
.sfcomm-launch-icon,.sfcomm-head-icon{
  width:40px;height:40px;border-radius:13px;background:#edf5ff;color:#2571cf;
  display:grid;place-items:center
}
.sfcomm svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sfcomm-launcher b{display:block;font-size:12.5px;line-height:1.08;font-weight:900}
.sfcomm-launcher small{display:block;margin-top:4px;color:#758b9e;font-size:9.5px;line-height:1.08;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sfcomm-launch-state{position:relative;width:28px;height:36px;display:grid;place-items:center}
.sfcomm-launch-state>i{width:9px;height:9px;border-radius:50%;background:#aebcc8}
.sfcomm-launch-state>i.live{background:#19ad74;box-shadow:0 0 0 5px rgba(25,173,116,.10)}
.sfcomm-launch-state>em{
  position:absolute;right:-4px;top:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:#e34242;color:#fff;font-style:normal;font-size:9px;font-weight:900;
  display:grid;place-items:center;box-shadow:0 3px 9px rgba(178,42,42,.22)
}

.sfcomm-panel{
  position:absolute;right:0;bottom:0;
  width:min(396px,calc(100vw - 28px));height:min(560px,calc(100vh - 48px));
  border:1px solid #ccdae6;border-radius:20px;background:#fff;
  box-shadow:0 26px 68px rgba(15,44,71,.23);overflow:hidden
}
.sfcomm-head{
  height:68px;padding:0 14px;border-bottom:1px solid #e4edf4;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
  display:grid;grid-template-columns:42px minmax(0,1fr) 36px;gap:10px;align-items:center
}
.sfcomm-head-icon{width:42px;height:42px}
.sfcomm-head>div{min-width:0}
.sfcomm-head>div>b{display:block;font-size:14.5px;font-weight:900;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sfcomm-head>div>small{display:block;margin-top:5px;color:#748a9e;font-size:9.8px;line-height:1}
.sfcomm-head>button{
  width:36px;height:36px;border:1px solid #d7e3ed;border-radius:11px;background:#fff;
  color:#687f93;font-size:20px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:.14s ease
}
.sfcomm-head>button:hover{background:#f3f7fb;border-color:#bdd0e1;color:#315d84}

.sfcomm-body{
  height:calc(100% - 68px);min-height:0;
  display:flex;flex-direction:column;background:#f8fbfd
}

/* State contract: author CSS must never override hidden state. */
.sfcomm-body>[hidden],.sfcomm-start[hidden],.sfcomm-thread[hidden],.sfcomm-wait[hidden],
.sfcomm-reply[hidden],.sfcomm-message-sent[hidden],.sfcomm-error[hidden],.sfcomm-launch-state>em[hidden]{
  display:none!important
}

.sfcomm-start{
  flex:1;min-height:0;padding:16px 16px 14px;display:grid;align-content:start;gap:11px;overflow:auto
}
.sfcomm-intro{
  padding:12px 13px;border:1px solid #dce7f0;border-radius:13px;background:#f5f9fd
}
.sfcomm-intro b{display:block;font-size:13px;line-height:1.1}
.sfcomm-intro span{display:block;margin-top:5px;color:#6f879b;font-size:10px;line-height:1.4}
.sfcomm label{display:grid;gap:5px;color:#526c82;font-size:9.5px;font-weight:850}
.sfcomm input,.sfcomm textarea{
  width:100%;border:1px solid #d4e1eb;border-radius:11px;background:#fff;color:#173a5c;
  font:inherit;font-size:11px;outline:none;transition:border-color .14s ease,box-shadow .14s ease
}
.sfcomm input{height:40px;padding:0 11px}
.sfcomm textarea{min-height:84px;padding:10px 11px;resize:vertical;line-height:1.45}
.sfcomm input:focus,.sfcomm textarea:focus{border-color:#85b1df;box-shadow:0 0 0 3px rgba(48,119,201,.08)}
.sfcomm-contact-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sfcomm-primary{
  height:42px;border:0;border-radius:11px;background:linear-gradient(135deg,#347ee0,#2465c8);
  color:#fff;font-size:11px;font-weight:900;cursor:pointer;
  box-shadow:0 8px 20px rgba(35,95,194,.16)
}
.sfcomm-primary:disabled{opacity:.55;cursor:wait}
.sfcomm-error{padding:8px 10px;border-radius:9px;background:#fff0ef;color:#a4463f;font-size:9.5px;line-height:1.35}

.sfcomm-thread{
  flex:1;min-height:0;padding:16px 14px 12px;overflow:auto;
  display:flex;flex-direction:column;gap:9px;
  background:linear-gradient(180deg,#f8fbfd 0%,#f5f9fc 100%);
  scrollbar-width:thin;scrollbar-color:#c6d6e3 transparent
}
.sfcomm-thread:before{
  content:"Razgovor";align-self:center;margin:0 0 4px;padding:4px 9px;border-radius:999px;
  background:#edf3f8;color:#8094a5;font-size:8px;font-weight:850;letter-spacing:.04em;text-transform:uppercase
}
.sfcomm-msg{display:flex}
.sfcomm-msg>div{
  max-width:84%;padding:10px 12px;border:1px solid #e0e8ef;border-radius:14px 14px 14px 5px;
  background:#fff;color:#294b69;font-size:10.8px;line-height:1.42;
  box-shadow:0 2px 7px rgba(23,58,92,.035)
}
.sfcomm-msg.out{justify-content:flex-end}
.sfcomm-msg.out>div{
  border-color:#c8dcf4;border-radius:14px 14px 5px 14px;
  background:#dfeeff;color:#174d86
}
.sfcomm-msg small{display:block;margin-top:5px;color:#8497a7;font-size:8px}
.sfcomm-msg.out small{text-align:right}

.sfcomm-wait{
  flex:1;min-height:0;padding:32px 26px;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#f9fcff,#f5f9fd)
}
.sfcomm-spinner{width:34px;height:34px;border:3px solid #dce8f4;border-top-color:#2b72cf;border-radius:50%;animation:sfcomm-spin 1s linear infinite}
.sfcomm-wait b{margin-top:14px;font-size:14px}
.sfcomm-wait p{max-width:270px;margin:7px 0 0;color:#71889b;font-size:10px;line-height:1.45}
.sfcomm-wait small{margin-top:10px;color:#99701e;font-size:9px;font-weight:850}
@keyframes sfcomm-spin{to{transform:rotate(360deg)}}

.sfcomm-reply{
  flex:0 0 auto;padding:10px;border-top:1px solid #e1eaf1;background:#fff;
  display:grid;grid-template-columns:minmax(0,1fr) 80px;gap:8px
}
.sfcomm-reply textarea{min-height:50px;max-height:92px;resize:none;padding:10px 11px}
.sfcomm-reply button{
  border:0;border-radius:11px;background:#246bc8;color:#fff;font-size:10px;font-weight:900;cursor:pointer
}
@media(max-width:640px){
  .sfcomm{right:10px;bottom:10px}
  .sfcomm-launcher{width:190px}
  .sfcomm-panel{right:0;bottom:0;width:calc(100vw - 20px);height:min(610px,calc(100vh - 20px));border-radius:18px}
  .sfcomm-contact-row{grid-template-columns:1fr}
}


/* v43r130 customer-simple support flow */
.sfcomm-start-contact{
  display:grid;grid-template-columns:1fr 1fr;gap:8px
}
.sfcomm-start-contact[hidden]{display:none!important}
.sfcomm-offline{
  flex:1;min-height:0;padding:18px 16px;display:grid;align-content:center;gap:13px;overflow:auto
}
.sfcomm-offline[hidden]{display:none!important}
.sfcomm-offline-intro{
  padding:15px;border:1px solid #dce7f0;border-radius:14px;background:#f5f9fd;
  display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;align-items:center
}
.sfcomm-offline-icon{
  width:42px;height:42px;border-radius:12px;background:#edf5ff;color:#2571cf;display:grid;place-items:center
}
.sfcomm-offline-intro b{display:block;font-size:13px;line-height:1.1}
.sfcomm-offline-intro p{margin:5px 0 0;color:#6f879b;font-size:10px;line-height:1.42}
.sfcomm-confirmation{
  flex:0 0 auto;padding:10px 13px;border-top:1px solid #dce8e2;background:#f5fbf8;
  display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;align-items:center;color:#315f4d
}
.sfcomm-confirmation[hidden]{display:none!important}
.sfcomm-confirmation>span{
  width:26px;height:26px;border-radius:50%;background:#dff3e8;color:#18714e;display:grid;place-items:center;font-size:12px;font-weight:950
}
.sfcomm-confirmation b{display:block;font-size:9.5px}
.sfcomm-confirmation small{display:block;margin-top:2px;color:#668277;font-size:8.7px}
.sfcomm-wait p{margin-top:7px}
.sfcomm-thread:before{content:"Podrška"}
@media(max-width:640px){
  .sfcomm-start-contact{grid-template-columns:1fr}
}


/* v43r131 premium offline-message state */
.sfcomm.is-offline .sfcomm-panel{
  height:min(530px,calc(100vh - 48px));
}
.sfcomm.is-offline .sfcomm-body{
  background:linear-gradient(180deg,#fbfdff 0%,#f6f9fc 100%);
}
.sfcomm-offline{
  flex:1;min-height:0;
  padding:18px 18px 16px;
  align-content:start;
  gap:12px;
  overflow:auto;
}
.sfcomm-offline-intro{
  padding:14px 14px;
  border:1px solid #d9e6f0;
  border-radius:14px;
  background:linear-gradient(135deg,#f4f9ff 0%,#f9fbfd 100%);
  box-shadow:0 4px 12px rgba(25,62,96,.035);
}
.sfcomm-offline-icon{
  width:40px;height:40px;border-radius:12px;
  background:#e8f2ff;color:#236fcf;
}
.sfcomm-offline-intro b{
  color:#173a5c;font-size:13.5px;line-height:1.12;font-weight:900
}
.sfcomm-offline-intro p{
  margin:5px 0 0;color:#6c8296;font-size:9.8px;line-height:1.42
}
.sfcomm-offline-fields{
  display:grid;grid-template-columns:1fr 1fr;gap:10px
}
.sfcomm-offline-fields label{
  min-width:0
}
.sfcomm-offline-message{
  grid-column:1/-1
}
.sfcomm-offline-message textarea{
  min-height:112px;max-height:150px;resize:vertical
}
.sfcomm.is-offline .sfcomm-primary{
  height:44px;
  border-radius:12px;
  font-size:11.5px;
  background:linear-gradient(135deg,#347ee0 0%,#2465c8 100%);
  box-shadow:0 9px 22px rgba(35,95,194,.18)
}
.sfcomm.is-offline .sfcomm-primary:hover{
  filter:brightness(.985)
}
@media(max-width:640px){
  .sfcomm.is-offline .sfcomm-panel{
    height:min(560px,calc(100vh - 20px));
  }
  .sfcomm-offline{
    padding:14px 14px 12px
  }
  .sfcomm-offline-fields{
    grid-template-columns:1fr
  }
  .sfcomm-offline-message{
    grid-column:auto
  }
}


/* v43r132 progressive support flow */
.sfcomm.is-start .sfcomm-panel{
  height:min(430px,calc(100vh - 48px));
}
.sfcomm.is-connecting .sfcomm-panel{
  height:min(360px,calc(100vh - 48px));
}
.sfcomm.is-thread .sfcomm-panel{
  height:min(560px,calc(100vh - 48px));
}
.sfcomm.is-start .sfcomm-body{
  background:linear-gradient(180deg,#fbfdff 0%,#f7fafc 100%);
}
.sfcomm.is-start .sfcomm-start{
  padding:18px;
  align-content:start;
  gap:13px;
}
.sfcomm.is-start .sfcomm-intro{
  padding:14px 15px;
  border-radius:14px;
  background:linear-gradient(135deg,#f4f9ff 0%,#f9fbfd 100%);
}
.sfcomm-start-message textarea{
  min-height:128px;
  max-height:170px;
  resize:vertical
}
.sfcomm.is-start .sfcomm-primary{
  height:44px;
  border-radius:12px;
  font-size:11.5px
}
.sfcomm.is-connecting .sfcomm-wait{
  padding:24px;
}
.sfcomm.is-connecting .sfcomm-spinner{
  width:32px;height:32px
}
.sfcomm.is-connecting .sfcomm-wait b{
  margin-top:13px;font-size:14px
}
.sfcomm.is-connecting .sfcomm-wait p{
  margin-top:6px
}
@media(max-width:640px){
  .sfcomm.is-start .sfcomm-panel{
    height:min(450px,calc(100vh - 20px));
  }
  .sfcomm.is-connecting .sfcomm-panel{
    height:min(380px,calc(100vh - 20px));
  }
}