/* =========================================================
   EZSHA — Apple "Liquid Glass" UI
   - Near-transparent material + heavy blur
   - Specular edge highlights & glossy top reflection
   - !important used to beat theme button styles
   - Position (left / right / bottom) is controlled by the
     classes injected from the settings page:
       desktop -> .ezsha-d-left | .ezsha-d-right | .ezsha-d-bottom
       mobile  -> .ezsha-m-left | .ezsha-m-right | .ezsha-m-bottom
   ========================================================= */

/* =========================================================
   SHARED VISUAL (all viewports / positions)
   ========================================================= */

/* ---------- Toggle (the share trigger) ---------- */
.ezsha_Toggle {
  position: fixed;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(255, 255, 255, 0.12) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.15) !important;
  backdrop-filter: blur(20px) saturate(180%) brightness(1.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  color: #0F1035 !important;

  cursor: pointer;
  z-index: 1000;
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.18),
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    inset 0 -2px 6px rgba(255, 255, 255, 0.25) !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* glossy specular reflection on the top half */
.ezsha_Toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.12) 38%,
    rgba(255, 255, 255, 0) 60%
  );
  pointer-events: none;
  z-index: -1;
}

.ezsha_Toggle:hover {
  box-shadow:
    0 12px 38px rgba(0, 0, 0, 0.22),
    inset 0 1px 1px rgba(255, 255, 255, 1),
    inset 0 -2px 8px rgba(255, 255, 255, 0.3) !important;
}

.ezsha_Toggle svg {
  position: relative;
  z-index: 1;
  width: 22px !important;
  height: 22px !important;
  fill: currentColor;
  flex-shrink: 0;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.4));
}

/* ---------- Glass panel ---------- */
.ezsha_buttons {
  position: fixed;
  z-index: 999;
  display: flex;
  gap: 12px;

  background: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.1) !important;
  backdrop-filter: blur(24px) saturate(180%) brightness(1.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  padding: 12px !important;
  border-radius: 26px !important;

  box-shadow:
    0 10px 40px rgba(31, 38, 135, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    inset 0 -2px 8px rgba(255, 255, 255, 0.2) !important;
}

/* panel top reflection */
.ezsha_buttons::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.05) 30%,
    rgba(255, 255, 255, 0) 55%
  );
  pointer-events: none;
}

/* wrapper */
.ezsha_group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

/* ---------- Social buttons (liquid glass pills) ---------- */
.ezsha_buttons .ezsha_facebook,
.ezsha_buttons .ezsha_twitter,
.ezsha_buttons .ezsha_whatsapp,
.ezsha_buttons .ezsha_copy {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box !important;

  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  align-self: center !important;

  display: flex !important;
  justify-content: center;
  align-items: center;

  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 14px !important;
  cursor: pointer;
  color: #fff !important;
  font-size: 20px;
  line-height: 1 !important;

  -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
  backdrop-filter: blur(10px) saturate(160%) !important;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    inset 0 -2px 6px rgba(255, 255, 255, 0.15) !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease, background 0.3s ease;
}

/* translucent brand tint — glass, not solid */
.ezsha_buttons .ezsha_facebook { background: rgba(59, 89, 152, 0.45) !important; }
.ezsha_buttons .ezsha_twitter  { background: rgba(20, 20, 22, 0.42) !important; }
.ezsha_buttons .ezsha_whatsapp { background: rgba(37, 211, 102, 0.42) !important; }
.ezsha_buttons .ezsha_copy     { background: rgba(0, 123, 255, 0.42) !important; }

/* glossy specular highlight on each button */
.ezsha_buttons .ezsha_facebook::before,
.ezsha_buttons .ezsha_twitter::before,
.ezsha_buttons .ezsha_whatsapp::before,
.ezsha_buttons .ezsha_copy::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.15) 40%,
    rgba(255, 255, 255, 0) 65%
  );
  pointer-events: none;
  z-index: 1;
}

/* moving liquid shine sweep on hover */
.ezsha_buttons .ezsha_facebook::after,
.ezsha_buttons .ezsha_twitter::after,
.ezsha_buttons .ezsha_whatsapp::after,
.ezsha_buttons .ezsha_copy::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 2;
  transition: left 0.6s ease;
}

.ezsha_buttons .ezsha_facebook:hover,
.ezsha_buttons .ezsha_twitter:hover,
.ezsha_buttons .ezsha_whatsapp:hover,
.ezsha_buttons .ezsha_copy:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.22),
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    inset 0 -2px 6px rgba(255, 255, 255, 0.2) !important;
}
.ezsha_buttons .ezsha_facebook:hover { background: rgba(59, 89, 152, 0.7) !important; }
.ezsha_buttons .ezsha_twitter:hover  { background: rgba(20, 20, 22, 0.68) !important; }
.ezsha_buttons .ezsha_whatsapp:hover { background: rgba(37, 211, 102, 0.7) !important; }
.ezsha_buttons .ezsha_copy:hover     { background: rgba(0, 123, 255, 0.7) !important; }

.ezsha_buttons .ezsha_facebook:hover::after,
.ezsha_buttons .ezsha_twitter:hover::after,
.ezsha_buttons .ezsha_whatsapp:hover::after,
.ezsha_buttons .ezsha_copy:hover::after {
  left: 130%;
}

/* icons sit above the gloss layers */
.ezsha_buttons button svg {
  position: relative;
  z-index: 3;
  width: 24px !important;
  height: 24px !important;
  fill: currentColor;
  flex-shrink: 0;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* === copy icon swap animation === */
#ezsha_copy svg {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#ezsha_copy.animating svg {
  opacity: 0;
  transform: scale(0.5);
}

/* legacy table reset (harmless safety) */
.ezsha-table,
.ezsha_buttons table,
.ezsha_buttons tr,
.ezsha_buttons td {
  display: contents !important;
  border: none !important;
}

/* bubble animation keyframes (used by the bottom layout) */
@keyframes bubbleIn {
  0%   { transform: translateY(20px) scale(0.8); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes bubbleOut {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(20px) scale(0.8); opacity: 0; }
}


/* =========================================================
   DESKTOP POSITIONING  (>= 768px)
   ========================================================= */
@media (min-width: 768px) {

  /* ---------- SIDE layout (left / right) ---------- */
  .ezsha_Toggle.ezsha-d-left,
  .ezsha_Toggle.ezsha-d-right {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 13px !important;
    border-radius: 16px !important;
  }
  .ezsha_Toggle.ezsha-d-left:hover,
  .ezsha_Toggle.ezsha-d-right:hover {
    transform: translateY(-50%) scale(1.08) !important;
  }
  .ezsha_Toggle.ezsha-d-left  { left: 20px !important; right: auto !important; }
  .ezsha_Toggle.ezsha-d-right { right: 20px !important; left: auto !important; }

  .ezsha_buttons.ezsha-d-left,
  .ezsha_buttons.ezsha-d-right {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    border-radius: 26px !important;
    padding: 12px !important;
  }
  .ezsha_buttons.ezsha-d-left {
    left: -110px !important;
    right: auto !important;
    transition: left 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }
  .ezsha_buttons.ezsha-d-left.show { left: 75px !important; }
  .ezsha_buttons.ezsha-d-right {
    right: -110px !important;
    left: auto !important;
    transition: right 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }
  .ezsha_buttons.ezsha-d-right.show { right: 75px !important; }

  .ezsha_buttons.ezsha-d-left .ezsha_group,
  .ezsha_buttons.ezsha-d-right .ezsha_group { flex-direction: column !important; }

  .ezsha_buttons.ezsha-d-left .ezsha_facebook,
  .ezsha_buttons.ezsha-d-left .ezsha_twitter,
  .ezsha_buttons.ezsha-d-left .ezsha_whatsapp,
  .ezsha_buttons.ezsha-d-left .ezsha_copy,
  .ezsha_buttons.ezsha-d-right .ezsha_facebook,
  .ezsha_buttons.ezsha-d-right .ezsha_twitter,
  .ezsha_buttons.ezsha-d-right .ezsha_whatsapp,
  .ezsha_buttons.ezsha-d-right .ezsha_copy {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    border-radius: 14px !important;
  }

  /* ---------- BOTTOM layout ---------- */
  .ezsha_Toggle.ezsha-d-bottom {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 20px !important;
    transform: translateX(-50%) !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }
  .ezsha_Toggle.ezsha-d-bottom:hover {
    transform: translateX(-50%) scale(1.08) !important;
  }

  .ezsha_buttons.ezsha-d-bottom {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 90px !important;
    transform: translateX(-50%) translateY(10px) scale(0.9);
    opacity: 0;
    visibility: hidden;
    border-radius: 50px !important;
    padding: 10px 14px !important;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s ease, visibility 0.3s ease;
  }
  .ezsha_buttons.ezsha-d-bottom.show {
    transform: translateX(-50%) translateY(0) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .ezsha_buttons.ezsha-d-bottom .ezsha_group { flex-direction: row !important; }
  .ezsha_buttons.ezsha-d-bottom .ezsha_facebook,
  .ezsha_buttons.ezsha-d-bottom .ezsha_twitter,
  .ezsha_buttons.ezsha-d-bottom .ezsha_whatsapp,
  .ezsha_buttons.ezsha-d-bottom .ezsha_copy {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    border-radius: 50% !important;
  }
  .ezsha_buttons.ezsha-d-bottom.show .ezsha_facebook { animation: bubbleIn 0.35s ease forwards; animation-delay: 0.05s; }
  .ezsha_buttons.ezsha-d-bottom.show .ezsha_twitter  { animation: bubbleIn 0.35s ease forwards; animation-delay: 0.1s; }
  .ezsha_buttons.ezsha-d-bottom.show .ezsha_whatsapp { animation: bubbleIn 0.35s ease forwards; animation-delay: 0.15s; }
  .ezsha_buttons.ezsha-d-bottom.show .ezsha_copy     { animation: bubbleIn 0.35s ease forwards; animation-delay: 0.2s; }
  .ezsha_buttons.ezsha-d-bottom:not(.show) .ezsha_facebook,
  .ezsha_buttons.ezsha-d-bottom:not(.show) .ezsha_twitter,
  .ezsha_buttons.ezsha-d-bottom:not(.show) .ezsha_whatsapp,
  .ezsha_buttons.ezsha-d-bottom:not(.show) .ezsha_copy {
    animation: bubbleOut 0.25s ease forwards;
  }
}


/* =========================================================
   MOBILE POSITIONING  (<= 768px)
   ========================================================= */
@media (max-width: 768px) {

  /* ---------- SIDE layout (left / right) ---------- */
  .ezsha_Toggle.ezsha-m-left,
  .ezsha_Toggle.ezsha-m-right {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 13px !important;
    border-radius: 16px !important;
  }
  .ezsha_Toggle.ezsha-m-left:hover,
  .ezsha_Toggle.ezsha-m-right:hover {
    transform: translateY(-50%) scale(1.08) !important;
  }
  .ezsha_Toggle.ezsha-m-left  { left: 16px !important; right: auto !important; }
  .ezsha_Toggle.ezsha-m-right { right: 16px !important; left: auto !important; }

  .ezsha_buttons.ezsha-m-left,
  .ezsha_buttons.ezsha-m-right {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    flex-direction: column !important;
    border-radius: 26px !important;
    padding: 12px !important;
  }
  .ezsha_buttons.ezsha-m-left {
    left: -110px !important;
    right: auto !important;
    transition: left 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }
  .ezsha_buttons.ezsha-m-left.show { left: 70px !important; }
  .ezsha_buttons.ezsha-m-right {
    right: -110px !important;
    left: auto !important;
    transition: right 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }
  .ezsha_buttons.ezsha-m-right.show { right: 70px !important; }

  .ezsha_buttons.ezsha-m-left .ezsha_group,
  .ezsha_buttons.ezsha-m-right .ezsha_group { flex-direction: column !important; }

  .ezsha_buttons.ezsha-m-left .ezsha_facebook,
  .ezsha_buttons.ezsha-m-left .ezsha_twitter,
  .ezsha_buttons.ezsha-m-left .ezsha_whatsapp,
  .ezsha_buttons.ezsha-m-left .ezsha_copy,
  .ezsha_buttons.ezsha-m-right .ezsha_facebook,
  .ezsha_buttons.ezsha-m-right .ezsha_twitter,
  .ezsha_buttons.ezsha-m-right .ezsha_whatsapp,
  .ezsha_buttons.ezsha-m-right .ezsha_copy {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    border-radius: 14px !important;
  }

  /* ---------- BOTTOM layout ---------- */
  .ezsha_Toggle.ezsha-m-bottom {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 20px !important;
    transform: translateX(-50%) !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    z-index: 1001;
  }
  .ezsha_Toggle.ezsha-m-bottom:hover {
    transform: translateX(-50%) scale(1.08) !important;
  }

  .ezsha_buttons.ezsha-m-bottom {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 90px !important;
    transform: translateX(-50%) translateY(10px) scale(0.9);
    opacity: 0;
    visibility: hidden;
    flex-direction: row !important;
    border-radius: 50px !important;
    padding: 10px 14px !important;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s ease, visibility 0.3s ease;
  }
  .ezsha_buttons.ezsha-m-bottom.show {
    transform: translateX(-50%) translateY(0) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .ezsha_buttons.ezsha-m-bottom .ezsha_group { flex-direction: row !important; }
  .ezsha_buttons.ezsha-m-bottom .ezsha_facebook,
  .ezsha_buttons.ezsha-m-bottom .ezsha_twitter,
  .ezsha_buttons.ezsha-m-bottom .ezsha_whatsapp,
  .ezsha_buttons.ezsha-m-bottom .ezsha_copy {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    border-radius: 50% !important;
  }
  .ezsha_buttons.ezsha-m-bottom.show .ezsha_facebook { animation: bubbleIn 0.35s ease forwards; animation-delay: 0.05s; }
  .ezsha_buttons.ezsha-m-bottom.show .ezsha_twitter  { animation: bubbleIn 0.35s ease forwards; animation-delay: 0.1s; }
  .ezsha_buttons.ezsha-m-bottom.show .ezsha_whatsapp { animation: bubbleIn 0.35s ease forwards; animation-delay: 0.15s; }
  .ezsha_buttons.ezsha-m-bottom.show .ezsha_copy     { animation: bubbleIn 0.35s ease forwards; animation-delay: 0.2s; }
  .ezsha_buttons.ezsha-m-bottom:not(.show) .ezsha_facebook,
  .ezsha_buttons.ezsha-m-bottom:not(.show) .ezsha_twitter,
  .ezsha_buttons.ezsha-m-bottom:not(.show) .ezsha_whatsapp,
  .ezsha_buttons.ezsha-m-bottom:not(.show) .ezsha_copy {
    animation: bubbleOut 0.25s ease forwards;
  }
}


/* =========================================================
   FLAT DESIGN OVERRIDES
   Applied when Liquid Glass is disabled in settings
   (.ezsha-flat is added to the toggle and the panel).
   Higher specificity than the glass rules so these win.
   ========================================================= */

/* ---------- Toggle ---------- */
.ezsha_Toggle.ezsha-flat {
  background: #0F1035 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
}
.ezsha_Toggle.ezsha-flat:hover {
  background: #172552 !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3) !important;
}
.ezsha_Toggle.ezsha-flat::before { content: none !important; }
.ezsha_Toggle.ezsha-flat svg { filter: none !important; }

/* ---------- Glass panel ---------- */
.ezsha_buttons.ezsha-flat {
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.ezsha_buttons.ezsha-flat::before { content: none !important; }

/* ---------- Social buttons ---------- */
.ezsha_buttons.ezsha-flat .ezsha_facebook,
.ezsha_buttons.ezsha-flat .ezsha_twitter,
.ezsha_buttons.ezsha-flat .ezsha_whatsapp,
.ezsha_buttons.ezsha-flat .ezsha_copy {
  border: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.ezsha_buttons.ezsha-flat .ezsha_facebook::before,
.ezsha_buttons.ezsha-flat .ezsha_twitter::before,
.ezsha_buttons.ezsha-flat .ezsha_whatsapp::before,
.ezsha_buttons.ezsha-flat .ezsha_copy::before,
.ezsha_buttons.ezsha-flat .ezsha_facebook::after,
.ezsha_buttons.ezsha-flat .ezsha_twitter::after,
.ezsha_buttons.ezsha-flat .ezsha_whatsapp::after,
.ezsha_buttons.ezsha-flat .ezsha_copy::after {
  content: none !important;
}

/* solid brand colors */
.ezsha_buttons.ezsha-flat .ezsha_facebook { background: #3b5998 !important; }
.ezsha_buttons.ezsha-flat .ezsha_twitter  { background: #000000 !important; }
.ezsha_buttons.ezsha-flat .ezsha_whatsapp { background: #25d366 !important; }
.ezsha_buttons.ezsha-flat .ezsha_copy     { background: #007bff !important; }

.ezsha_buttons.ezsha-flat .ezsha_facebook:hover { background: #2d4373 !important; transform: translateY(-2px); }
.ezsha_buttons.ezsha-flat .ezsha_twitter:hover  { background: #111111 !important; transform: translateY(-2px); }
.ezsha_buttons.ezsha-flat .ezsha_whatsapp:hover { background: #1da851 !important; transform: translateY(-2px); }
.ezsha_buttons.ezsha-flat .ezsha_copy:hover     { background: #005ecb !important; transform: translateY(-2px); }

.ezsha_buttons.ezsha-flat button svg { filter: none !important; }