/* Medura — Mobile Base (always loaded, all themes) */

/* ===== CRITICAL: Header width fix =====
   Do NOT use width:100vw — on platforms with persistent scrollbars,
   100vw = viewport + scrollbar gutter (~17px wider than content),
   which makes fixed headers overflow and creates a second scrollbar.
   left:0 + right:0 achieves the same full-width without the overshoot. */
.uc-header,
.uc-sticky,
.uc-sticky-fixed,
.uc-sticky-below {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* ===== CRITICAL: Prevent horizontal overflow — no second scrollbar =====
   overflow: clip on html clips paint without making html a scroll container,
   so there's only ever one scrollbar (the body/viewport one).
   scrollbar-gutter: stable reserves the scrollbar track permanently —
   pages with and without overflow get the same layout width, eliminating
   the horizontal shift (and phantom scrollbar) when content height changes. */
html {
  overflow-x: clip;
  scrollbar-gutter: stable;
}
/* overflow-x: hidden pairs with overflow-y: visible → UA computes overflow-y: auto on body,
   so you get a second vertical scrollbar (often noticeable when scrolling up). Themes also
   put .overflow-x-hidden on body — beat that utility with equal !important + higher specificity. */
body.uni-body,
body.overflow-x-hidden {
  overflow-x: clip !important;
  max-width: 100% !important;
}

/* ===== CRITICAL: Fix Elementor container widths on mobile ===== */
@media (max-width: 991px) {
  .e-con,
  .e-con-inner,
  .elementor-section,
  .elementor-section-wrap,
  .elementor-container,
  .elementor-row {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Dropbar megas overflow — hide on mobile (they have mobile menu instead) */
  .uc-dropbar {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Logo scale */
  .uc-logo img {
    width: 160px !important;
    max-width: 160px !important;
    height: auto !important;
  }

  /* Nav height */
  .uc-navbar-main {
    --uc-nav-height: 64px !important;
  }

  /* Container padding */
  .container {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

@media (max-width: 767px) {
  /* Even smaller logo on phones */
  .uc-logo img {
    width: 130px !important;
    max-width: 130px !important;
  }

  /* ===== Touch targets ===== */
  .btn,
  .tg-btn,
  .nav-links,
  [class*="btn-"]:not(.backtotop-wrap *),
  .uc-offcanvas-bar a,
  .uc-nav > li > a {
    min-height: 44px !important;
  }

  /* ===== Section spacing ===== */
  .elementor-section-boxed > .elementor-container {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* ===== Hero heading ===== */
  .elementor-heading-title.elementor-size-xxl,
  .elementor-widget-tg-heading .title.elementor-size-xxl {
    font-size: clamp(2rem, 9vw, 3.5rem) !important;
    line-height: 1.15 !important;
  }

  /* ===== Pricing table: horizontal scroll ===== */
  .pr-twrap,
  [class*="table-responsive"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ===== Stats: 2-up on mobile already ===== */
  .ms-stats__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ===== Footer column collapse ===== */
  .site-footer .footer-inner {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Homepage pricing: hide More info + Gratis demo above footer on phone */
  .ps-more-cta {
    display: none !important;
  }

  /* ===== Body padding for sticky CTA (homepage, visible at page bottom only) ===== */
  body.home.is-sticky-cta-visible {
    padding-bottom: 5rem !important;
  }
}

/* ===== Sticky bottom CTA — homepage mobile, shown at scroll bottom via JS ===== */
.medura-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8999;
  padding: 0.75rem 1.25rem;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.09);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

body:not(.home) .medura-sticky-cta {
  display: none !important;
}

@media (max-width: 767px) {
  body.home .medura-sticky-cta {
    display: block;
  }

  body.home .medura-sticky-cta.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

.medura-sticky-cta__link {
  display: block;
  width: 100%;
  text-align: center;
  background: #0f8465;
  color: #fff !important;
  padding: 0.875rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none !important;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  transition: background 0.2s;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.medura-sticky-cta__link:hover {
  background: #0b6b52;
  color: #fff !important;
}

/* ===== Removed chrome (Envato buy strip + theme picker) ===== */
.tg-buy-now,
.medura-theme-picker,
.medura-theme-vt-shroud {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ===== Theme Switcher UI (unused — kept for reference, hidden above) ===== */
.medura-theme-picker {
  position: fixed;
  z-index: 9500;
  right: 1rem;
  bottom: 5.5rem;
}

@media (min-width: 768px) {
  .medura-theme-picker {
    bottom: 1.5rem;
  }
}

.medura-theme-trigger {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #1a1a2e;
  border: 2.5px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.2s, box-shadow 0.2s;
  outline: none;
  font-family: inherit;
}

.medura-theme-trigger:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

.medura-theme-panel {
  position: absolute;
  bottom: 3.25rem;
  right: 0;
  background: #fff;
  border-radius: 0.875rem;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
  padding: 0.875rem;
  width: 220px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  pointer-events: none;
}

.medura-theme-panel.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.medura-theme-panel__title {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #9ca3af !important;
  margin: 0 0 0.625rem !important;
  padding: 0 0.25rem !important;
  font-family: "Trebuchet MS", sans-serif !important;
}

.medura-theme-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.12s;
  font-size: 0.85rem;
  font-weight: 500;
  color: #1a1a2e;
  font-family: "Trebuchet MS", sans-serif;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  min-height: 40px;
}

.medura-theme-option:hover {
  background: #f3f4f6;
}

.medura-theme-option.is-active {
  background: #f0fdf8;
  font-weight: 700;
  color: #0f8465;
}

.medura-theme-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
}

.medura-theme-check {
  margin-left: auto;
  font-size: 0.75rem;
  opacity: 0;
}

.medura-theme-option.is-active .medura-theme-check {
  opacity: 1;
}

/* Theme switcher: let the browser cross-fade root during View Transitions (do not set animation:none here). */
html[data-magicui-theme-vt="active"]::view-transition-group(root) {
  animation-duration: var(--magicui-theme-toggle-vt-duration, 500ms);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}