/*Add Css Custom Here*/

/*====== Fix bugs Megamenu not showing icon font (26/1/2018) =====*/
@media (min-width: 992px){
	.menu-vertical .container-megamenu.vertical .vertical-wrapper ul.megamenu > li > a {  line-height: 24px; height: auto;}
	.menu-vertical .container-megamenu.vertical .vertical-wrapper ul.megamenu > li > a i,
	.menu-vertical .container-megamenu.vertical .vertical-wrapper ul.megamenu > li > a b {
	    display: inline-block;
	}
	.menu-vertical .container-megamenu.vertical .vertical-wrapper ul.megamenu > li.with-sub-menu > a:before{display: none;}
	.menu-vertical .container-megamenu.vertical .vertical-wrapper ul.megamenu > li > a img{position: static; transform: inherit;}

}

/* ✅ ÖnderOto WhatsApp Popup - OpenCart Fix */
#onderoto-wa-wrap {
    position: fixed !important;
    right: 4px !important;
    bottom: 91px !important;
    z-index: 999999 !important;
    font-family: Arial, Helvetica, sans-serif !important;
}
/* floating button */
#onderoto-wa-toggle{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #25D366;
  border: none;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
}
#onderoto-wa-toggle:hover{ background:#1DA851; }
#onderoto-wa-toggle svg{ width:34px; height:34px; fill:#fff; }

/* popup */
#onderoto-wa-popup{
  position: absolute;
  right: 0;
  bottom: 78px;
  width: 360px;
  max-width: calc(100vw - 44px);
  background:#fff;
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.22);

  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: all .2s ease;
}
#onderoto-wa-popup.open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#onderoto-wa-header{
  background:#25D366;
  padding: 16px;
  color:#fff;
  position: relative;
}
#onderoto-wa-close{
  position:absolute;
  right: 10px;
  top: 10px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: rgba(255,255,255,.18);
  color:#fff;
  cursor:pointer;
  font-size: 18px;
}
#onderoto-wa-close:hover{ background: rgba(255,255,255,.28); }

#onderoto-wa-header-row{
  display:flex;
  align-items:center;
  gap: 12px;
}
#onderoto-wa-avatar{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
}
#onderoto-wa-avatar svg{ width:26px; height:26px; fill:#fff; }

#onderoto-wa-title strong{
  display:block;
  font-size: 18px;
  line-height:1.1;
}
#onderoto-wa-title span{
  display:block;
  font-size: 13px;
  opacity:.95;
}

#onderoto-wa-body{
  padding: 14px;
}
#onderoto-wa-body p{
  margin:0 0 12px 0;
  font-size: 14px;
  color:#2b2b2b;
}
#onderoto-wa-body p small{
  display:block;
  margin-top:4px;
  color:#777;
}

#onderoto-wa-quick{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.onderoto-wa-chip{
  width:100%;
  text-align:left;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid #ececec;
  background:#f4f4f4;
  cursor:pointer;
  font-size: 14px;
  color:#333;
}
.onderoto-wa-chip:hover{
  background:#efefef;
}

#onderoto-wa-footer{
  padding: 12px 14px 14px 14px;
}
#onderoto-wa-start{
  width: 100%;
  border:none;
  border-radius: 12px;
  padding: 12px 14px;
  background:#25D366;
  color:#fff;
  font-weight:700;
  cursor:pointer;
  font-size: 15px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
}
#onderoto-wa-start:hover{ background:#1DA851; }
#onderoto-wa-start svg{ width:18px; height:18px; fill:#fff; }

@media(max-width:420px){
  #onderoto-wa-wrap{ right: 4px !important; bottom: 34px !important; }
  #onderoto-wa-popup{ width: 330px; }
}
div#onderoto-wa-wrap svg {
    display: block !important;
}