﻿/* Eexir SupportFloat — scoped styles (do not reuse outside .eexir-sf) */
.eexir-sf {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 9990;
  font-family: iransans, Tahoma, sans-serif !important;
  font-size: 13px;
  line-height: 1.5;
  color: #243447;
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.eexir-sf,
.eexir-sf *,
.eexir-sf *::before,
.eexir-sf *::after {
  box-sizing: border-box;
}

/*
  Product/content CSS often injects global rules like:
    ul li::before { content: '\2714'; ... }
  Neutralize list markers only — do not touch .eexir-sf-btn::before or icon elements.
*/
.eexir-sf ul > li::before,
.eexir-sf ul > li::after,
.eexir-sf ol > li::before,
.eexir-sf ol > li::after,
.eexir-sf .eexir-sf-list > li::before,
.eexir-sf .eexir-sf-list > li::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: transparent !important;
  font-size: 0 !important;
}

/* Local reset so site h4/p/a/ul/button rules do not leak in */
.eexir-sf h4,
.eexir-sf p,
.eexir-sf ul,
.eexir-sf li,
.eexir-sf a,
.eexir-sf button,
.eexir-sf span,
.eexir-sf div,
.eexir-sf svg {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-family: inherit !important;
  color: inherit;
  line-height: inherit;
  text-decoration: none !important;
  list-style: none;
  background: transparent;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  vertical-align: baseline;
}

.eexir-sf a:hover,
.eexir-sf a:focus,
.eexir-sf a:active,
.eexir-sf a:visited {
  text-decoration: none !important;
  outline: none;
}

.eexir-sf-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(10, 24, 40, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.eexir-sf.is-open .eexir-sf-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.eexir-sf-btn {
  position: relative;
  z-index: 3;
  width: 62px;
  height: 62px;
  margin: 0 0 0 auto;
  border: 0 !important;
  border-radius: 18px;
  color: #fff !important;
  background: #1e73be !important;
  box-shadow: 0 10px 28px rgba(30, 115, 190, 0.38) !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: transform 0.2s ease, border-radius 0.2s ease, background 0.2s ease;
}

.eexir-sf-btn::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: rgba(30, 115, 190, 0.14);
  z-index: -1;
  pointer-events: none;
}

.eexir-sf-btn:hover,
.eexir-sf-btn:focus {
  transform: translateY(-2px);
  color: #fff !important;
  background: #1e73be !important;
}

.eexir-sf-btn-icon {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #fff !important;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.eexir-sf-btn-icon svg {
  width: 28px;
  height: 28px;
  display: block;
  fill: currentColor;
}

.eexir-sf-btn-icon p {
  display: none;
  margin: 0;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #fff !important;
}

.eexir-sf-close {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  opacity: 0;
  transform: scale(0.6) rotate(-40deg);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.eexir-sf-close svg {
  width: 14px;
  height: 14px;
  display: block;
  fill: currentColor;
}

.eexir-sf.is-open .eexir-sf-btn {
  border-radius: 50%;
  background: #1e73be !important;
}

.eexir-sf.is-open .eexir-sf-btn-icon {
  opacity: 0;
  transform: scale(0.5);
}

.eexir-sf.is-open .eexir-sf-close {
  opacity: 1;
  transform: scale(1) rotate(0);
  pointer-events: auto;
}

.eexir-sf-pulse {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  animation: eexir-sf-pulse 2.2s ease-out infinite;
}

.eexir-sf-pulse + .eexir-sf-pulse {
  animation-delay: 0.7s;
}

.eexir-sf.is-open .eexir-sf-pulse {
  display: none;
}

@keyframes eexir-sf-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(30, 115, 190, 0.45);
    opacity: 0.9;
  }
  70% {
    box-shadow: 0 0 0 18px rgba(30, 115, 190, 0);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.eexir-sf-panel {
  position: absolute;
  right: 0;
  bottom: 78px;
  z-index: 2;
  width: min(320px, calc(100vw - 36px));
  padding: 18px 16px 14px;
  border-radius: 18px;
  background: #fff !important;
  box-shadow: 0 18px 50px rgba(20, 40, 60, 0.18) !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.96);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}

.eexir-sf.is-open .eexir-sf-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  padding:10px;
}

.eexir-sf-header {
  text-align: center;
  margin-bottom: 14px !important;
}

.eexir-sf-header h4 {
  margin: 0 0 6px !important;
  color: #1a2b3c !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

.eexir-sf-header p {
  margin: 0 !important;
  color: #7a8794 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

.eexir-sf-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.eexir-sf-list > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.eexir-sf-item {
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 10px !important;
  border-radius: 12px;
  background: #f4f6f8 !important;
  color: #243447 !important;
  text-decoration: none !important;
  transition: background 0.18s ease, transform 0.18s ease;
}

.eexir-sf-item:hover,
.eexir-sf-item:focus,
.eexir-sf-item:active,
.eexir-sf-item:visited {
  background: #eef2f6 !important;
  transform: translateY(-1px);
  color: #243447 !important;
  text-decoration: none !important;
}

.eexir-sf-item > span {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  overflow: hidden;
}

.eexir-sf-item--phone > span { background-color: #228B22 !important; }
.eexir-sf-item--mobile > span { background-color: #FFA500 !important; }
.eexir-sf-item--whatsapp > span { background-color: #25D366 !important; }
.eexir-sf-item--telegram > span { background-color: #20AFDE !important; }
.eexir-sf-item--instagram > span {
  background: linear-gradient(135deg, #8224e3, #dd3333) !important;
}

.eexir-sf-label {
  flex: 1;
  min-width: 0;
  text-align: right;
}

.eexir-sf-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #243447 !important;
}

.eexir-sf .eexir-sf-ico {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  display: block !important;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

.eexir-sf .eexir-sf-ico--phone {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.2 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1L6.6 10.8z'/%3E%3C/svg%3E") !important;
}

.eexir-sf .eexir-sf-ico--mobile {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 9.5c-.8 0-1.5-.7-1.5-1.5S11.2 8.5 12 8.5s1.5.7 1.5 1.5-.7 1.5-1.5 1.5zm4 0c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5zm-8 0c-.8 0-1.5-.7-1.5-1.5S7.2 8.5 8 8.5s1.5.7 1.5 1.5S8.8 11.5 8 11.5z'/%3E%3C/svg%3E") !important;
}

.eexir-sf .eexir-sf-ico--whatsapp {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.86 9.86 0 0 0 12.04 2zm0 1.82c4.46 0 8.09 3.63 8.09 8.09s-3.63 8.09-8.09 8.09c-1.42 0-2.8-.37-4.01-1.07l-.29-.17-3.12.82.83-3.04-.19-.31a8.04 8.04 0 0 1-1.22-4.32c0-4.46 3.63-8.09 8.09-8.09zm4.57 10.5c-.22-.11-1.31-.65-1.51-.72-.2-.08-.35-.11-.5.11-.15.22-.57.72-.7.87-.13.15-.26.16-.48.05-.22-.11-.93-.34-1.77-1.1-.65-.58-1.1-1.3-1.23-1.52-.13-.22-.01-.34.1-.45.1-.1.22-.26.33-.39.11-.13.15-.22.22-.37.07-.15.04-.28-.02-.39-.05-.11-.5-1.2-.68-1.65-.18-.43-.36-.37-.5-.38h-.43c-.15 0-.39.06-.59.28-.2.22-.78.76-.78 1.86s.8 2.16.91 2.31c.11.15 1.57 2.4 3.81 3.36 2.24.96 2.24.64 2.64.6.4-.04 1.31-.54 1.49-1.05.19-.52.19-.96.13-1.05-.05-.09-.2-.15-.42-.26z'/%3E%3C/svg%3E") !important;
}

.eexir-sf .eexir-sf-ico--telegram {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9.78 15.35 9.6 18.8c.29 0 .42-.12.57-.27l1.37-1.31 2.84 2.09c.52.29.9.14 1.04-.48l1.89-8.9h.01c.17-.78-.28-1.08-.79-.89L4.4 11.6c-.76.3-.75.72-.13.91l3.4 1.06 7.89-4.97c.37-.23.71-.1.43.13L9.78 15.35z'/%3E%3C/svg%3E") !important;
}

.eexir-sf .eexir-sf-ico--instagram {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7zm5 3.5A4.5 4.5 0 1 1 7.5 12 4.5 4.5 0 0 1 12 7.5zm0 2A2.5 2.5 0 1 0 14.5 12 2.5 2.5 0 0 0 12 9.5zM17.5 6.2a1.1 1.1 0 1 1-1.1 1.1 1.1 1.1 0 0 1 1.1-1.1z'/%3E%3C/svg%3E") !important;
}

body.cart-is-open .eexir-sf {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 480px) {
  .eexir-sf {
    right: 12px;
    bottom: 16px;
  }

  .eexir-sf-panel {
    width: min(300px, calc(100vw - 28px));
  }
}
