/* ============================================================
   Mudale LP — Polish Layer v3 (Mobile Refinement)
   Targeted overrides for ≤767px:
   - Eliminate Trustindex 2px horizontal overflow
   - Cap the black video circle so it doesn't dominate viewport
   - Statistics row → 2x2 grid (was 1-per-row vertical stack)
   - Right-align long Hebrew paragraphs for RTL clarity
   - Tighten section spacing rhythm for shorter scroll
   - Larger tap targets, better hero text hierarchy
   - Subtler noise on mobile (performance + visual restraint)
   ============================================================ */

/* --- 1. Global mobile safety: kill any horizontal overflow --- */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }

  /* Force every Trustindex review container to behave */
  .ti-widget,
  .ti-reviews-container-wrapper,
  .ti-reviews-container,
  .ti-review-item,
  .ti-review-item .ti-review-content,
  .ti-review-item-inner {
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-inline: 0 !important;
  }

  .ti-reviews-container-wrapper {
    padding-inline: 8px !important;
  }
}

/* --- 2. Stats row — natural vertical flow with refined sizing ---
   NOTE: An earlier attempt to force a 2x2 grid via :has() caught the video
   widget that shares the same container and broke the layout.
   Solution: let the counters stack vertically (already the mobile default)
   and just refine sizing + centering. */
@media (max-width: 767px) {
  .elementor-widget-counter {
    text-align: center !important;
    margin-inline: auto !important;
    width: 100% !important;
    padding-block: 8px !important;
  }

  .elementor-widget-counter .elementor-counter-number-wrapper {
    font-size: clamp(40px, 11vw, 60px) !important;
    line-height: 1 !important;
    margin-bottom: 6px;
    justify-content: center !important;
    display: flex !important;
  }

  .elementor-widget-counter .elementor-counter-title {
    font-size: 14px !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }

  /* Hide horizontal dividers between counters on mobile — they were for
     desktop column separation and look orphaned when stacked vertically */
  .e-con:has(> .e-con-inner > .elementor-widget-counter) .elementor-widget-divider,
  .e-con-inner > .elementor-widget-divider.elementor-hidden-mobile {
    display: none !important;
  }
}

/* --- 3. Black video circle: cap at sensible mobile size --- */
@media (max-width: 767px) {
  .elementor-widget-video,
  .elementor-widget-video .elementor-wrapper,
  .elementor-widget-video .elementor-video-container,
  .elementor-widget-video .elementor-video,
  .elementor-widget-video video,
  .elementor-element[class*="elementor-widget-video"] {
    max-width: 240px !important;
    max-height: 240px !important;
    margin-inline: auto !important;
    aspect-ratio: 1 / 1;
  }

  /* The container often holds the round mask — cap the outer too */
  .e-con-inner > .elementor-widget-video,
  .e-con-inner > .e-con:has(.elementor-widget-video) {
    max-width: 280px;
    margin-inline: auto !important;
  }
}

/* --- 4. Hebrew long paragraphs: right-align on mobile --- */
@media (max-width: 767px) {
  .elementor-widget-text-editor p,
  .elementor-widget-heading + .elementor-widget-text-editor p {
    text-align: right !important;
    line-height: 1.7 !important;
  }

  /* Short stand-alone paragraphs (under ~80 chars) can stay centered.
     Best heuristic without JS: target only paragraphs inside
     "text-align: center" containers and force right alignment for those
     that wrap more than 2 lines via a sensible max-width clamp. */
  .elementor-widget-text-editor[data-elementor-type] p {
    max-width: 92ch;
    margin-inline: auto;
  }
}

/* --- 5. Hero & section spacing — shorter scroll on mobile --- */
@media (max-width: 767px) {
  /* Reduce the giant section padding many Elementor pages inherit */
  .e-con.e-parent > .e-con-inner {
    padding-block: 36px !important;
  }

  /* First (logo) section needs only minimal padding */
  .e-con.e-parent:first-of-type > .e-con-inner {
    padding-block: 12px !important;
  }

  /* Hero panel — fit more content above the fold */
  .e-con.e-parent:nth-of-type(2) > .e-con-inner {
    padding-block: 28px !important;
  }
}

/* --- 6. Top logo bar — fix awkward text-wrap around the small avatar --- */
@media (max-width: 767px) {
  .e-con.e-parent:first-of-type {
    text-align: center;
  }

  .e-con.e-parent:first-of-type .elementor-widget-image {
    margin-inline: auto !important;
    display: block !important;
    width: 100%;
  }

  .e-con.e-parent:first-of-type .elementor-widget-image img {
    margin-inline: auto !important;
    display: block !important;
    max-width: 72px;
    height: auto;
  }

  /* Any heading inline with the logo should clear, not wrap around it */
  .e-con.e-parent:first-of-type .elementor-widget-heading {
    clear: both !important;
    width: 100%;
  }
}

/* --- 7. Hero typography rebalance on mobile --- */
@media (max-width: 767px) {
  /* Display headings — slightly tighter on small screens */
  body .elementor-widget-heading h1.elementor-heading-title,
  body .elementor-widget-heading h2.elementor-heading-title {
    font-size: clamp(22px, 6.2vw, 30px) !important;
    line-height: 1.25 !important;
  }

  body .elementor-widget-heading h3.elementor-heading-title {
    font-size: clamp(19px, 5.4vw, 24px) !important;
    line-height: 1.3 !important;
  }

  /* Subhead/lead copy */
  body .elementor-widget-text-editor {
    font-size: 15px !important;
  }
}

/* --- 8. CTA buttons — guarantee 48px tap target & comfortable spacing --- */
@media (max-width: 767px) {
  .elementor-button,
  .elementor-button-link,
  .wp-block-button__link {
    min-height: 48px !important;
    padding: 14px 22px !important;
    font-size: 16px !important;
    width: 100%;
    max-width: 320px;
    margin-inline: auto !important;
    justify-content: center !important;
  }

  /* Stack buttons with breathing room */
  .elementor-widget-button + .elementor-widget-button {
    margin-top: 10px !important;
  }
}

/* --- 9. Phone carousel — sensible cap on small screens --- */
@media (max-width: 767px) {
  .elementor-widget-image-carousel .swiper-slide img,
  .elementor-image-carousel .swiper-slide img {
    max-height: 480px !important;
    max-width: 80% !important;
  }

  /* Swiper arrows: smaller and closer in on mobile */
  .elementor-swiper-button {
    width: 36px !important;
    height: 36px !important;
  }
}

/* --- 10. Testimonial bubbles — readable on small screens --- */
@media (max-width: 767px) {
  .elementor-testimonial__content,
  .elementor-testimonial--skin-bubble .elementor-testimonial__content {
    padding: 18px 20px !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .elementor-testimonial__image img {
    width: 56px !important;
    height: 56px !important;
  }
}

/* --- 11. WhatsApp floating button — keep clear of bottom safe area --- */
@media (max-width: 767px) {
  .joinchat,
  .joinchat__button {
    bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
  }
}

/* --- 12. Noise grain: lighter on mobile (perf + already smaller pixels) --- */
@media (max-width: 767px) {
  body::before {
    opacity: 0.022 !important;
    background-size: 160px 160px !important;
  }
}

/* --- 13. Disable hero stagger animation on mobile to avoid jank --- */
@media (max-width: 767px) {
  .e-con.e-parent:nth-of-type(1) > *,
  .e-con.e-parent:nth-of-type(2) > * {
    animation-duration: 0.45s !important;
    animation-delay: 0s !important;
  }
}

/* --- 14. Google reviews cards: comfortable padding, no overflow --- */
@media (max-width: 767px) {
  .ti-widget .ti-review-item,
  .ti-reviews-container .ti-review-item {
    padding: 16px !important;
    border-radius: 14px !important;
    margin: 6px 4px !important;
  }

  .ti-review-header {
    flex-wrap: wrap !important;
  }
}

/* ============================================================
   15. Floating WhatsApp button (direct link, no chatbox mockup)
   Replaces the JoinChat widget — single tap goes straight to WhatsApp.
   ============================================================ */
.mudale-wa-float {
  position: fixed;
  bottom: 20px;
  right: 20px;            /* physical right — matches original JoinChat placement */
  left: auto;
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  box-shadow:
    0 6px 18px rgba(37, 211, 102, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.12);
  transition:
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 180ms ease,
    background-color 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

.mudale-wa-float:hover,
.mudale-wa-float:focus-visible {
  background: #1ebe5a;
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 10px 22px rgba(37, 211, 102, 0.45),
    0 4px 10px rgba(0, 0, 0, 0.14);
  outline: none;
}

.mudale-wa-float:active {
  transform: translateY(0) scale(0.98);
}

.mudale-wa-float__icon {
  display: block;
  width: 30px;
  height: 30px;
}

/* Subtle pulse halo — visual cue that the button is live */
.mudale-wa-float::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.45);
  opacity: 0;
  animation: mudaleWaPulse 2.4s ease-out infinite;
  animation-delay: 1.2s;
  pointer-events: none;
}

@keyframes mudaleWaPulse {
  0%   { transform: scale(0.85); opacity: 0.7; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* Mobile: respect safe-area, slightly smaller */
@media (max-width: 767px) {
  .mudale-wa-float {
    width: 52px;
    height: 52px;
    bottom: max(16px, env(safe-area-inset-bottom, 16px));
    inset-inline-end: 16px;
  }

  .mudale-wa-float__icon {
    width: 28px;
    height: 28px;
  }
}

/* Respect users who don't want motion */
@media (prefers-reduced-motion: reduce) {
  .mudale-wa-float,
  .mudale-wa-float::after {
    animation: none !important;
    transition: none !important;
  }
}