/* Modal container with glassmorphism */
body > react-root:nth-child(33) > div > div.S0e7ORfPQqtWe0CJ23jIrQ\=\=.qgKzBTEHTVhwtr5ohqmHMQ\=\=.undefined {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border-radius: 16px;
  padding: 0.5rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  border: 1px solid rgba(255, 255, 255, 0.3);
   
}

/* Header with transparent bg, smaller paddings */
body > react-root:nth-child(33) > div > div.S0e7ORfPQqtWe0CJ23jIrQ\=\=.qgKzBTEHTVhwtr5ohqmHMQ\=\=.undefined > div:first-child {
  background: transparent;
}

/* Close button - transparent bg, white cross, smaller size */
body > react-root:nth-child(33) > div > div.S0e7ORfPQqtWe0CJ23jIrQ\=\=.qgKzBTEHTVhwtr5ohqmHMQ\=\=.undefined > div:first-child > button {
  background: transparent !important;
  border: none;
  color: white !important;
  font-size: 1.3rem;
  width: 20px;
  height: 20px;
  line-height: 0;
  cursor: pointer;
  box-shadow: none !important;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Chat messages container blending with modal background */
body > react-root:nth-child(33) > div > div.S0e7ORfPQqtWe0CJ23jIrQ\=\=.qgKzBTEHTVhwtr5ohqmHMQ\=\=.undefined 
  > div.AtZjzny-\+hLypEvTh1PcPw\=\= 
  > div.mb2p6nNhLixjWYx6B-Ti-A\=\=._7kThrMtw3II4gKqcuxJenw\=\= {
  padding: 0.75rem 0; /* keep vertical padding, remove horizontal */
  margin: 0.5 0;
  max-height: 240px;
  background: transparent; /* no background */
  border: none; /* no border */
  box-shadow: none; /* remove any inset shadows */
  color: white;
}


/* Input group container */
body > react-root:nth-child(33) > div > div.S0e7ORfPQqtWe0CJ23jIrQ\=\=.qgKzBTEHTVhwtr5ohqmHMQ\=\=.undefined > div.AtZjzny-\+hLypEvTh1PcPw\=\= > div.input-group {
  padding: 0.4rem ;
  gap: 6px;
  background: rgba(255, 255, 255, 0.);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: inset 0 0 8px rgba(255,255,255,0.3);
}

/* Input text field */
body > react-root:nth-child(33) > div > div.S0e7ORfPQqtWe0CJ23jIrQ\=\=.qgKzBTEHTVhwtr5ohqmHMQ\=\=.undefined > div.AtZjzny-\+hLypEvTh1PcPw\=\= > div.input-group > input {
  padding: 0.25rem 0.75rem;
  font-size: 0.9rem;
  background: transparent;
  border: none;
  color: #fff;
}

/* Send button with full rounded corners */
body > react-root:nth-child(33) > div > div.S0e7ORfPQqtWe0CJ23jIrQ\=\=.qgKzBTEHTVhwtr5ohqmHMQ\=\=.undefined > div.AtZjzny-\+hLypEvTh1PcPw\=\= > div.input-group > button {
  padding: 0 0.8rem;
  font-size: 0.8rem;
  min-width: 55px;
  margin-right: 5px;
  background: linear-gradient(45deg, #405a90, #7ea1d6) !important;
  border: none;
  color: white;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(46, 58, 84, 0.6);
}

/* Chat bubble styling */
body > react-root:nth-child(33) > div > div.S0e7ORfPQqtWe0CJ23jIrQ\=\=.qgKzBTEHTVhwtr5ohqmHMQ\=\=.undefined 
  > div.AtZjzny-\+hLypEvTh1PcPw\=\= 
  > div.mb2p6nNhLixjWYx6B-Ti-A\=\=._7kThrMtw3II4gKqcuxJenw\=\= 
  > div > div > div {
    background: linear-gradient(45deg, #405a90, #7ea1d6) !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 10px !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* Transparent background for buttons in header */
body > react-root:nth-child(33) > div > div.S0e7ORfPQqtWe0CJ23jIrQ\=\=.qgKzBTEHTVhwtr5ohqmHMQ\=\=.undefined > div.e05gzoN1KCz-7uV9zbep2w\=\=.d-flex.justify-content-between > div > button {
  background: transparent;
  border: none;
}
.XvG4typCNfStAzzRNAeKYA\=\= span 
{
    color: white !important;
}

.action-inner-wraper {
 background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  padding: 0.5rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

#toggleNavigationOffcanvas {
      background: linear-gradient(45deg, #405a90, #7ea1d6) !important;

}

body > react-root:nth-child(33) > div > div.MuiSpeedDial-root.MuiSpeedDial-directionUp.css-yybjzv-MuiSpeedDial-root > button {
        background: linear-gradient(45deg, #405a90, #7ea1d6) !important;

}

body > react-root:nth-child(32) > button {
          background: linear-gradient(45deg, #405a90, #7ea1d6) !important;
border: none;
}

.e05gzoN1KCz-7uV9zbep2w\=\= {
    height: 300px !important ;
}
.qgKzBTEHTVhwtr5ohqmHMQ\=\= {
width: 700px !important;
}
._7kThrMtw3II4gKqcuxJenw\=\= {
    height: 800px !important;
}
body > react-root:nth-child(33) > div > div.S0e7ORfPQqtWe0CJ23jIrQ\=\=.qgKzBTEHTVhwtr5ohqmHMQ\=\=.undefined > div.e05gzoN1KCz-7uV9zbep2w\=\=.d-flex.justify-content-between
{
  height:10px !important;
}
body > react-root:nth-child(33) > div > div.S0e7ORfPQqtWe0CJ23jIrQ\=\=.qgKzBTEHTVhwtr5ohqmHMQ\=\=.undefined
{
  height:800px;
}
body > react-root:nth-child(33) > div > div.S0e7ORfPQqtWe0CJ23jIrQ\=\=.qgKzBTEHTVhwtr5ohqmHMQ\=\=.undefined > div.AtZjzny-\+hLypEvTh1PcPw\=\= > div.input-group
{
    width: 88%;
    position: fixed;
    bottom: 10px;
}
body > react-root:nth-child(33) > div > div.S0e7ORfPQqtWe0CJ23jIrQ\=\=.qgKzBTEHTVhwtr5ohqmHMQ\=\=.undefined > div.AtZjzny-\+hLypEvTh1PcPw\=\= > div.mb2p6nNhLixjWYx6B-Ti-A\=\=._7kThrMtw3II4gKqcuxJenw\=\= > div
{
  height:100%;
}

.h-product-name,.price,body > main > div.container-content-inbound > div > section.h-page-section.products-grid-section.text-start.section-text-dark > div
{
  color:#5b19a4 !important;
}



.card-back {
  position: relative;
  width: 100%;
  height: 100%; /* ili neka visina koju si definisao */
  overflow: hidden; /* da sve lepo stane unutra */
}

.card-content {
  max-height: 100%;   /* ograniči na visinu kartice */
  overflow-y: auto;   /* omogući vertikalni skrol */
  padding-right: 8px; /* da tekst ne upadne ispod scrollbara */
  scroll-behavior: smooth;
}

div[data-avatar-type="ChatBot"] {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 16px;
  padding: 0.5rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--chat-text);
}

/* Header transparent */
div[data-avatar-type="ChatBot"] > div:first-child {
  background: transparent;
}

/* Close button */
div[data-avatar-type="ChatBot"] .avatar-stream-chat-close-header > button {
  background: transparent !important;
  border: none;
  color: var(--chat-text) !important;
  font-size: 1.3rem;
  width: 20px; height: 20px; line-height: 0;
  cursor: pointer; box-shadow: none !important; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
div[data-avatar-type="ChatBot"] .avatar-stream-chat-close-header > button i {
  color: var(--chat-text) !important;
}

/* ===============================
   MESSAGES AREA
   =============================== */
div[data-avatar-type="ChatBot"] .AtZjzny-\+hLypEvTh1PcPw\=\= > div:first-child,
div[data-avatar-type="ChatBot"] .AtZjzny-\+hLypEvTh1PcPw\=\= > .mb2p6nNhLixjWYx6B-Ti-A\=\= {
  padding: 0.75rem 0;
  margin: 0.5rem 0;
  max-height: 60vh;
  overflow-y: auto;
  background: transparent;
  border: none; box-shadow: none; color: var(--chat-text);
}

/* Bubble wrapper + timestamp */
div[data-avatar-type="ChatBot"] .XvG4typCNfStAzzRNAeKYA\=\= > span {
  display: block;
  font-size: 11px;
  color: var(--chat-ts);
  margin: 2px 0 8px;
}

/* Bubble itself (message text) */
div[data-avatar-type="ChatBot"] .JYn3Iz4ebtL3Aw9Zfl1eoA\=\= {
  background: linear-gradient(45deg, #405a90, #7ea1d6) !important;
  color: var(--chat-text) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  box-shadow: none !important;
  display: inline-block;
  max-width: 80%;
  word-wrap: break-word;
}

/* ===============================
   INPUT GROUP (GLASS PILL)
   =============================== */
div[data-avatar-type="ChatBot"] .input-group {
  padding: 0.4rem;
  gap: 6px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: inset 0 0 8px rgba(0,0,0,0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
}

/* Input */
div[data-avatar-type="ChatBot"] .input-group > .form-control {
  padding: 0.25rem 0.75rem;
  font-size: 0.9rem;
  background: transparent;
  border: none;
  color: #111 !important;
}
div[data-avatar-type="ChatBot"] .input-group > .form-control::placeholder {
  color: rgba(0,0,0,.5);
}

/* Send button (BLUE gradient) */
div[data-avatar-type="ChatBot"] .input-group > .btn {
  padding: 0 1rem !important;
  font-size: 0.85rem !important;
  min-width: 58px !important;
  margin-right: 0 !important;
  background: linear-gradient(45deg, #405a90, #7ea1d6) !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
div[data-avatar-type="ChatBot"] .input-group > .btn:hover {
  background: linear-gradient(45deg, #7ea1d6, #9bbff0) !important;
}

/* ===============================
   MUI SPEEDDIAL (Launcher) — no glow
   =============================== */
.MuiSpeedDial-root { z-index: 1040; }

.MuiSpeedDial-fab {
  background: linear-gradient(45deg, #405a90, #7ea1d6) !important;
  color: #fff !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}
.MuiSpeedDial-fab:hover,
.MuiSpeedDial-fab:focus,
.MuiSpeedDial-fab:active {
  background: linear-gradient(45deg, #7ea1d6, #9bbff0) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Optional: remove MUI ripple highlight */
.MuiTouchRipple-root { display: none !important; }

.MuiSpeedDialAction-fab {
  box-shadow: none !important;
  filter: none !important;
  background: #222 !important;
  color: #fff !important;
}
.MuiSpeedDialAction-fab:hover {
  background: #333 !important;
  box-shadow: none !important;
}