/* ============================================================
   Mudale LP — Polish Layer v1
   - Assistant font site-wide (Hebrew + Latin)
   - Soft corner radius, refined padding, gentle shadows
   - No layout changes; pure visual refinement
   ============================================================ */

/* --- 1. Assistant as the single typeface, overriding Elementor globals --- */
:root {
  --e-global-typography-primary-font-family: "Assistant";
  --e-global-typography-secondary-font-family: "Assistant";
  --e-global-typography-text-font-family: "Assistant";
  --e-global-typography-accent-font-family: "Assistant";
  --polish-radius-sm: 10px;
  --polish-radius-md: 16px;
  --polish-radius-lg: 22px;
  --polish-radius-xl: 32px;
  --polish-shadow-soft: 0 6px 24px rgba(15, 23, 42, 0.08);
  --polish-shadow-card: 0 10px 32px rgba(15, 23, 42, 0.10);
  --polish-shadow-button: 0 6px 18px rgba(0, 0, 0, 0.12);
}

html, body,
body .elementor *:not(i):not(.eicon):not([class*="eicon-"]):not([class*="elementor-icon"]) {
  font-family: "Assistant", "Noto Sans Hebrew", system-ui, -apple-system, sans-serif !important;
}

body {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings — slightly tighter tracking, balanced weight */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: "Assistant", "Noto Sans Hebrew", system-ui, sans-serif !important;
  letter-spacing: -0.012em;
  font-weight: 700;
}

/* Body text gets a touch more breathing room */
p, .elementor-widget-text-editor,
.elementor-widget-heading + .elementor-widget-text-editor {
  line-height: 1.65;
}

/* --- 2. Buttons — refined padding, pill radius, soft lift --- */
.elementor-button,
.elementor-button-link,
.wp-block-button__link {
  border-radius: 999px !important;
  padding: 14px 32px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
  box-shadow: var(--polish-shadow-button);
  will-change: transform;
}

.elementor-button:hover,
.elementor-button-link:hover,
.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  filter: brightness(1.04);
}

.elementor-button-content-wrapper {
  gap: 10px;
}

/* Smaller buttons should still look intentional */
.elementor-button.elementor-size-sm,
.elementor-size-sm > .elementor-button-link {
  padding: 10px 22px !important;
  font-size: 0.95em;
}

/* --- 3. Cards, icon boxes, and image containers — soft rounding --- */
.elementor-widget-icon-box .elementor-icon-box-wrapper {
  border-radius: var(--polish-radius-md);
  transition: transform 0.25s ease;
}

.elementor-shape-circle .elementor-icon {
  border-radius: 50%;
  box-shadow: var(--polish-shadow-soft);
}

.elementor-widget-image img,
.elementor-image img {
  border-radius: var(--polish-radius-md);
}

/* But don't round logos or icons-as-images */
.elementor-widget-image img[src*="logo"],
.elementor-widget-image img[width="50"],
.elementor-widget-image img[width="60"],
.elementor-widget-image img[width="80"],
.elementor-widget-icon img {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* --- 4. Phone mockup carousel — make it feel premium, not bulky --- */
.elementor-widget-image-carousel {
  max-width: 100%;
}

.elementor-widget-image-carousel .swiper-slide img,
.elementor-image-carousel .swiper-slide img {
  border-radius: var(--polish-radius-lg);
  box-shadow: var(--polish-shadow-card);
  max-height: 620px;
  width: auto;
  margin: 0 auto;
  object-fit: contain;
}

/* Cap the carousel container so the phone never feels oversized */
.elementor-widget-image-carousel .elementor-image-carousel-wrapper {
  padding: 0 12px;
}

/* Refine swiper navigation arrows */
.elementor-swiper-button {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  box-shadow: var(--polish-shadow-soft);
  color: #111 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.elementor-swiper-button:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.elementor-swiper-button svg {
  width: 18px;
  height: 18px;
}

/* Swiper pagination dots — subtle */
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: rgba(0, 0, 0, 0.25);
  opacity: 1;
  transition: width 0.25s ease, background 0.25s ease;
}

.swiper-pagination-bullet-active {
  width: 22px;
  border-radius: 4px;
  background: currentColor;
}

/* --- 5. Testimonial carousel — softer cards --- */
.elementor-widget-testimonial-carousel .elementor-testimonial__content,
.elementor-testimonial--skin-bubble .elementor-testimonial__content {
  border-radius: var(--polish-radius-md) !important;
  box-shadow: var(--polish-shadow-soft);
  padding: 24px 28px;
}

.elementor-testimonial__image img {
  border-radius: 50% !important;
  box-shadow: var(--polish-shadow-soft);
}

/* --- 6. Google reviews (Trustindex) — match the rounded language --- */
.ti-widget .ti-review-item,
.ti-reviews-container .ti-review-item {
  border-radius: var(--polish-radius-md) !important;
  box-shadow: var(--polish-shadow-soft) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  padding: 20px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ti-widget .ti-review-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--polish-shadow-card) !important;
}

/* --- 7. Video container (the black tuk-tuk circle) — softer ring --- */
.elementor-widget-video,
.elementor-custom-embed-image-overlay,
.elementor-video {
  border-radius: var(--polish-radius-lg);
  overflow: hidden;
}

.elementor-widget-video {
  box-shadow: var(--polish-shadow-card);
}

/* --- 8. Section/container padding rhythm ---
   Removed: Elementor's original per-section padding already balances the hero.
   Re-introducing a global rhythm here pushed the logo strip away from the
   hero and shifted the CTA below the fold. Keeping native spacing instead. */

/* --- 9. Dividers — quieter --- */
.elementor-widget-divider .elementor-divider-separator {
  opacity: 0.5;
}

/* --- 10. WhatsApp floating button — match radius language --- */
.joinchat__button,
.joinchat .joinchat__button {
  border-radius: 50% !important;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.35) !important;
}

/* --- 11. Form inputs (if any) — clean and rounded --- */
.elementor-field-group input[type="text"],
.elementor-field-group input[type="email"],
.elementor-field-group input[type="tel"],
.elementor-field-group textarea,
.elementor-field-group select {
  border-radius: var(--polish-radius-sm) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  padding: 12px 16px !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.elementor-field-group input:focus,
.elementor-field-group textarea:focus {
  outline: none !important;
  border-color: rgba(37, 99, 235, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}

/* --- 12. Tiny global touches --- */
img {
  max-width: 100%;
  height: auto;
}

a {
  transition: color 0.15s ease, opacity 0.15s ease;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}