/* ============================================================
   Mudale LP — Polish Layer v4 (Fixes & Accessibility)
   Loaded AFTER polish-v1, polish-v2, polish-v3-mobile
   Implements:
   - WhatsApp button on physical RIGHT (RTL-safe)
   - Remove visible frame around image-carousel + transparent container
   - Headline "לקוחות מספרים" visibility (was white-on-light)
   - Hide Trustindex "Powered by" branding strip
   - Comfortable padding on Google review cards
   - Auto-scrolling reviews marquee
   - Uniform 16px corner radius on ALL card-like boxes (matches reviews)
   - Noto Sans Hebrew throughout
   - Israeli accessibility standard 5568 / WCAG 2.0 AA fixes:
       * Color contrast for date text
       * Focus-visible outlines
       * Skip-link
       * Larger interactive targets
   ============================================================ */

/* ----------------------------------------------------------
   0a. Noto Sans Hebrew everywhere
   Imported from Google Fonts — fully covers Hebrew + Latin.
   ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --mudale-font: "Noto Sans Hebrew", "Polin", "Heebo", "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mudale-radius: 16px;     /* unified card radius — matches Google reviews */
}

html,
body,
body *,
.elementor-widget *,
.elementor-button,
.elementor-heading-title,
.elementor-counter-number-wrapper,
.elementor-counter-title,
.elementor-image-box-title,
.elementor-image-box-description,
.elementor-icon-box-title,
.elementor-icon-box-description,
.elementor-testimonial__text,
.elementor-testimonial__name,
.elementor-testimonial__title,
.ti-widget *,
input,
textarea,
select,
button {
  font-family: var(--mudale-font) !important;
}

/* Italic counters keep the same family, just italic style */
.elementor-counter-number-wrapper {
  font-style: italic !important;
}

/* ----------------------------------------------------------
   0b. Uniform 16px corner radius on all card-like boxes
   (matches the Google reviews card radius — see section 5)
   ---------------------------------------------------------- */
.elementor-widget-icon-box,
.elementor-icon-box-wrapper,
.elementor-image-box-wrapper,
.elementor-testimonial,
.elementor-testimonial__content,
.elementor-testimonial--skin-bubble .elementor-testimonial__content,
.elementor-widget-image-box .elementor-image-box-img,
.elementor-widget-image figure img,
.elementor-counter,
.e-con-boxed,
.elementor-element-counter-card,
.swiper-slide figure img,
.ti-widget .ti-review-item,
.ti-widget .ti-inner {
  border-radius: var(--mudale-radius) !important;
}

/* Buttons stay pill-shaped (CTA convention) — explicit override */
.elementor-button,
.mudale-wa-float,
.elementor-button-link {
  border-radius: 999px !important;
}

/* ----------------------------------------------------------
   1. WhatsApp floating button — physical right (RTL-safe)
   Overrides inset-inline-end which flips to LEFT in RTL pages.
   ---------------------------------------------------------- */
.mudale-wa-float {
  right: 20px !important;
  left: auto !important;
  inset-inline-end: auto !important;
  inset-inline-start: auto !important;
}

@media (max-width: 767px) {
  .mudale-wa-float {
    right: 16px !important;
    left: auto !important;
  }
}

/* ----------------------------------------------------------
   2. Phone image carousel — remove visible square frame
   The gradient container background + image card-shadow were
   reading as a hard "border". Make it blend with the page.
   ---------------------------------------------------------- */
.elementor-widget-image-carousel,
.elementor-widget-image-carousel .elementor-image-carousel-wrapper,
.elementor-widget-image-carousel .swiper,
.elementor-widget-image-carousel .swiper-wrapper,
.elementor-widget-image-carousel .swiper-slide,
.elementor-widget-image-carousel figure.swiper-slide-inner {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* The image itself keeps a soft drop shadow only (no card frame) */
.elementor-widget-image-carousel .swiper-slide img,
.elementor-image-carousel .swiper-slide img {
  border-radius: 18px !important;
  box-shadow: 0 16px 36px rgba(20, 30, 60, 0.18) !important;
  background: transparent !important;
}

/* The parent container that holds the heading + carousel had a
   gradient background that created the visible "card". Make it
   inherit the page background. */
.elementor-element.elementor-element-20e774c0,
.elementor-element.elementor-element-20e774c0 > .e-con-inner {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* ----------------------------------------------------------
   3. Headline "לקוחות מספרים" — readable contrast
   Was white on light bg → invisible. Switch to deep navy with
   a soft accent underline.
   ---------------------------------------------------------- */
.elementor-element.elementor-element-7827dd27 .elementor-heading-title,
.elementor-element.elementor-element-72b15013 .elementor-heading-title {
  color: #0f172a !important;             /* slate-900 — high contrast */
  font-weight: 800 !important;
  text-shadow: none !important;
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
  margin-bottom: 14px;
}

.elementor-element.elementor-element-7827dd27 .elementor-heading-title::after,
.elementor-element.elementor-element-72b15013 .elementor-heading-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  background: #6ec1e4;                   /* brand cyan */
  border-radius: 2px;
}

/* Center the heading wrapper so the underline lines up */
.elementor-element.elementor-element-7827dd27,
.elementor-element.elementor-element-72b15013 {
  text-align: center !important;
}

/* ----------------------------------------------------------
   4. Trustindex — hide "Powered by" green strip / branding
   ---------------------------------------------------------- */
.ti-widget .ti-footer,
.ti-widget .ti-footer *,
.ti-widget .ti-watermark,
.ti-widget .ti-powered,
.ti-widget [class*="-footer"],
.ti-widget [class*="-watermark"],
.ti-widget [class*="-powered"],
.ti-widget [class*="branding"],
.ti-widget a[href*="trustindex"],
.ti-widget a[href*="trust-index"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ----------------------------------------------------------
   5. Review cards — comfortable padding
   ---------------------------------------------------------- */
.ti-widget .ti-review-item,
.ti-reviews-container .ti-review-item,
.ti-widget .ti-inner {
  padding: 22px 24px !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 14px rgba(20, 30, 60, 0.08) !important;
}

.ti-widget .ti-review-content,
.ti-widget .ti-review-header {
  padding: 4px 0 !important;
}

.ti-widget .ti-review-content {
  line-height: 1.6 !important;
  margin-top: 8px !important;
}

/* Fix the date contrast (axe flagged 4.12 — needs 4.5 for AA) */
.ti-widget .ti-date,
.ti-widget .ti-date *,
.ti-widget .ti-with-tooltip {
  color: #475569 !important;             /* slate-600 ≥ 7:1 on white */
}

/* ----------------------------------------------------------
   6. Reviews auto-scroll marquee
   Continuous horizontal scroll on the .ti-reviews-container,
   pauses on hover/focus for accessibility (WCAG 2.2.2).
   The marquee track is injected by a11y-bootstrap.js as a
   .mudale-marquee wrapper, but we also style native track here.
   ---------------------------------------------------------- */
.mudale-marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}

.mudale-marquee__track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: mudaleMarquee linear infinite;
  animation-duration: 60s;
  will-change: transform;
}

.mudale-marquee:hover .mudale-marquee__track,
.mudale-marquee:focus-within .mudale-marquee__track {
  animation-play-state: paused;
}

.mudale-marquee__item {
  flex: 0 0 auto;
  width: min(360px, 86vw);
}

@keyframes mudaleMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }      /* track is duplicated */
}

/* Respect reduced motion: keep cards static, allow native swipe */
@media (prefers-reduced-motion: reduce) {
  .mudale-marquee__track {
    animation: none !important;
  }
  .mudale-marquee {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .mudale-marquee__item {
    scroll-snap-align: start;
  }
}

/* ----------------------------------------------------------
   7. Accessibility — skip link, focus rings, semantic landmark
   ---------------------------------------------------------- */
.mudale-skip-link {
  position: absolute;
  top: -100px;
  right: 0;
  left: auto;
  background: #0f172a;
  color: #ffffff;
  padding: 12px 18px;
  text-decoration: none;
  font-weight: 700;
  border-radius: 0 0 0 8px;
  z-index: 10000;
  transition: top 0.2s ease;
}

.mudale-skip-link:focus,
.mudale-skip-link:focus-visible {
  top: 0;
  outline: 3px solid #6ec1e4;
  outline-offset: 2px;
}

/* Focus-visible rings for keyboard users (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
.elementor-button:focus-visible,
.elementor-swiper-button:focus-visible,
.mudale-wa-float:focus-visible,
.swiper-pagination-bullet:focus-visible {
  outline: 3px solid #6ec1e4 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(110, 193, 228, 0.25) !important;
}

/* Ensure all interactive elements meet 24×24 minimum (WCAG 2.5.8) */
.elementor-swiper-button {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* ----------------------------------------------------------
   8. Mobile-specific touch-ups for above
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-widget-image-carousel .swiper-slide img,
  .elementor-image-carousel .swiper-slide img {
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgba(20, 30, 60, 0.16) !important;
  }

  .elementor-element.elementor-element-7827dd27 .elementor-heading-title,
  .elementor-element.elementor-element-72b15013 .elementor-heading-title {
    font-size: clamp(22px, 6.4vw, 28px) !important;
  }

  .ti-widget .ti-review-item,
  .ti-widget .ti-inner {
    padding: 18px 20px !important;
  }

  .mudale-marquee__track {
    animation-duration: 45s;
  }
}