/* 
Theme Name: TheJackal-hello-theme-child
Theme URI: https://github.com/elementor/hello-theme/
Description: TheJackal-hello-theme-child is a child theme of Hello Elementor, created by Elementor team and modified by The Jackal
Author: The Jackal
Author URI: https://jackal.co.il/
Template: hello-elementor
Version: 7.6.1
Text Domain: TheJackal-hello-theme-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

html[lang="he-IL"] input[type="tel" i],
html[lang="he"] input[type="tel" i] {
  direction: rtl !important;
}
.hello_elementor_page_title {
  display: none;
}

.entry-title {
  display: none !important;
}

.site-title {
  display: none !important;
}

.site-description {
  display: none !important;
}

.pojo-a11y-toolbar-text {
  font-size: 15px !important;
  font-weight: 500 !important;
}

@media (max-width: 767px) {
  .cs_preview_container > div > div .cs-info-bar {
    padding: 1em 2em 0.5em 2em !important;
  }

  .cs-wrapper .cs-popup-row {
    gap: 0.5em !important;
  }
  div > div .bar_description_text {
    margin-bottom: 0 !important;
  }
}

:root {
  --base-font-size: 1vw;
  --mobile-font-size: 4vw;
}

html {
  font-size: var(--base-font-size);
}

@media (max-width: 767px) {
  html {
    font-size: var(--mobile-font-size);
  }
}

.dial-button .elementor-button,
.contact-button .elementor-button {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  backdrop-filter: blur(1.25em) saturate(180%) !important;
  -webkit-backdrop-filter: blur(1.25em) saturate(180%) !important;
  border-radius: 99em !important;
  border: 0.0625em solid rgba(255, 255, 255, 0.35) !important;
  border-bottom: 0.0625em solid rgba(255, 255, 255, 0.15) !important;

  box-shadow:
    0 0.5em 2em 0 rgba(0, 0, 0, 0.2),
    inset 0 0.0625em 0 0 rgba(255, 255, 255, 0.45),
    inset 0 -0.0625em 0 0 rgba(0, 0, 0, 0.1) !important;

  /* Fix: Do NOT use 'all'. Only transition specific properties */
  transition:
    transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 0.4s ease,
    opacity 0.4s ease !important;
}

.dial-button .elementor-button-icon svg {
  fill: black !important;
  filter: drop-shadow(0 0.0625em 0 rgba(255, 255, 255, 0.4));
  width: 1em;
  height: 1em;
}

.contact-button .elementor-button-icon svg {
  fill: black !important;
  filter: drop-shadow(0 0 0.5em rgba(246, 208, 10, 0.5));
  width: 1em;
  height: 1em;
}

/* 4. Hover Effects */
.dial-button .elementor-button:hover,
.contact-button .elementor-button:hover {
  transform: translateY(-0.25em) scale(1.02);
  box-shadow:
    0 0.9375em 2.8125em 0 rgba(0, 0, 0, 0.25),
    inset 0 0.0625em 0 0 rgba(255, 255, 255, 0.6) !important;
}

/* 5. Active/Click Effects */
.dial-button .elementor-button:active,
.contact-button .elementor-button:active {
  transform: scale(0.96);
  opacity: 0.9;
}

/* 6. HIDDEN STATE (Initial) */
.dial-button,
.contact-button {
  opacity: 0 !important;
  transform: translateY(150%) !important;
  pointer-events: none !important;
  /* Clean transition preventing gradient glitches */
  transition:
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.5s ease !important;
  will-change: transform, opacity; /* Optimizes performance */
}

/* 7. VISIBLE STATE (On Scroll) */
/* Ensure your JS adds 'scrolled-past-hero' to the body */
body.scrolled-past-hero:not(.hide-floating-buttons) .dial-button,
body.scrolled-past-hero:not(.hide-floating-buttons) .contact-button {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* 8. EDITOR VISIBILITY (So you can see them while editing) */
body.elementor-editor-active .dial-button,
body.elementor-editor-active .contact-button {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.contact-button {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 99em !important;
  border: 0.0625em solid rgba(255, 255, 255, 0.35) !important;
  border-bottom: 0.0625em solid rgba(255, 255, 255, 0.15) !important;

  box-shadow:
    0 0.5em 2em 0 rgba(0, 0, 0, 0.2),
    inset 0 0.0625em 0 0 rgba(255, 255, 255, 0.45),
    inset 0 -0.0625em 0 0 rgba(0, 0, 0, 0.1) !important;

  transition:
    transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 0.4s ease,
    opacity 0.4s ease !important;
}

.dial-button {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 99em !important;
  border: 0.0625em solid rgba(255, 255, 255, 0.35) !important;
  border-bottom: 0.0625em solid rgba(255, 255, 255, 0.15) !important;

  box-shadow:
    0 0.5em 2em 0 rgba(0, 0, 0, 0.2),
    inset 0 0.0625em 0 0 rgba(255, 255, 255, 0.45),
    inset 0 -0.0625em 0 0 rgba(0, 0, 0, 0.1) !important;

  transition:
    transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 0.4s ease,
    opacity 0.4s ease !important;
}