/* ================================
   MOBILE PERFORMANCE / BUG FIX PACK
   QPProServices - Consulting
   ================================ */

/* 1) Kill heavy animations/transitions on mobile */
@media (max-width: 768px) {
  * {
    animation: none !important;
    transition: none !important;
  }

  /* Avoid “transform stacking” issues */
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* 2) Respect reduced motion (accessibility + perf) */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* 3) Disable parallax / fixed backgrounds on mobile */
@media (max-width: 768px) {
  .parallax,
  [data-parallax],
  .bg-fixed,
  .fixed-bg,
  .jarallax,
  .jarallax-img {
    background-attachment: scroll !important;
    transform: none !important;
  }
}

/* 4) Neutralize common scroll-animation libraries output */
@media (max-width: 768px) {
  [data-aos],
  .aos-init,
  .aos-animate,
  .wow,
  .animated,
  .animate__animated {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}

/* 5) Reduce costly visual effects */
@media (max-width: 768px) {
  * {
    filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important; /* comment this if you want to keep shadows */
  }
}

/* 6) Prevent horizontal scrolling “bugs” */
@media (max-width: 768px) {
  html, body {
    width: 100%;
    overflow-x: hidden !important;
  }
  img, video, iframe, svg {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* 7) Improve scrolling performance on iOS */
@media (max-width: 768px) {
  body {
    -webkit-overflow-scrolling: touch;
  }
}

/* 8) Avoid layout shifts from media embeds */
@media (max-width: 768px) {
  iframe {
    display: block;
    width: 100% !important;
    border: 0;
  }
}

/* 9) Fix “100vh” issues on mobile browsers (address bar) */
@media (max-width: 768px) {
  .vh-100,
  .h-100vh,
  .full-height,
  .hero,
  .banner {
    min-height: 100svh !important;
    height: auto !important;
  }
}

/* 10) Make text rendering smoother (optional) */
@media (max-width: 768px) {
  body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
}

/* 11) Reduce large sticky headers / heavy fixed elements (optional) */
@media (max-width: 768px) {
  .sticky,
  .is-sticky,
  .navbar-fixed,
  .header-fixed {
    position: static !important; /* if sticky causes lag, keep this */
    top: auto !important;
  }
}

/* 12) If you have big video backgrounds, disable on mobile (optional) */
@media (max-width: 768px) {
  .video-bg,
  .video-background,
  .hero video {
    display: none !important;
  }
}

/* 13) Mobile language selector visibility and spacing */
@media (max-width: 991px) {
  .tp-header-top-lang {
    margin-left: 8px !important;
  }

  .tp-header-top-lang .tp-header-top-selected-lang {
    width: 42px;
    height: 42px;
    line-height: 42px;
    font-size: 14px !important;
  }

  .tp-mobile-lang-selector {
    border: 1px solid rgba(31, 49, 48, 0.14);
    border-radius: 14px;
    padding: 14px;
  }

  .tp-mobile-lang-title {
    color: #00a1b6;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
  }

  .tp-mobile-lang-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .tp-mobile-lang-list li {
    margin: 0;
  }

  .tp-mobile-lang-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(31, 49, 48, 0.18);
    font-size: 13px;
    font-weight: 600;
    color: #1f3130;
    text-decoration: none;
  }

  .tp-mobile-lang-list a.active {
    background: #00a1b6;
    border-color: #00a1b6;
    color: #fff;
  }
}

/* 14) Keep preloader full-screen and animated on mobile */
@media (max-width: 768px) {
  #tp-preloader,
  .preloader {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100svh !important;
    z-index: 99999 !important;
  }

  #tp-preloader .loading-wrapper .loading,
  .preloader .loading-wrapper .loading {
    animation: rotate-loading 1.2s linear infinite !important;
  }

  #tp-preloader.is-hidden,
  .preloader.is-hidden {
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
  }
}

/* 15) Footer end spacing fix (mobile only) */
@media (max-width: 768px) {
  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
  }

  footer,
  .tp-footer-area {
    margin-bottom: 0 !important;
  }

  /* Fill iOS safe-area so no white strip appears below footer */
  footer {
    display: block;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  .tp-footer-bottom,
  .tp-footer-3-bottom {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* 16) Brevo forms readability/tap comfort on mobile */
@media (max-width: 768px) {
  /* Newsletter field in footer */
  .newsletter-input-wrapper input,
  .tp-footer-input {
    height: 56px !important;
    font-size: 16px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .newsletter-input-wrapper button,
  .footer-3-btn {
    min-width: 56px !important;
    height: 56px !important;
  }

  /* Embedded Brevo iframes in page sections */
  iframe[src*="sibforms.com/serve/"]:not(.nl-modal__iframe) {
    width: 100% !important;
    min-height: 920px !important;
    height: 920px !important;
  }

  /* Brevo modal panel: larger usable area on mobile */
  .nl-modal__panel {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: auto !important;
    height: min(88dvh, 760px) !important;
    border-radius: 14px !important;
  }
}

/* 17) Services page: readable mobile header */
@media (max-width: 768px) {
  .services-page .tp-header-area.tp-transparent {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    background: #ffffff !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    z-index: 1000 !important;
  }

  .services-page .tp-header-2-main {
    background: #ffffff !important;
    padding: 10px 0 !important;
  }

  .services-page .tp-header-sidebar-btn {
    background: #ffffff !important;
    border-color: rgba(31, 49, 48, 0.2) !important;
  }

  .services-page #qp-hero {
    padding-top: 76px !important;
  }
}

/* 18) Mobile services selector in offcanvas */
@media (max-width: 991px) {
  .tp-mobile-service-selector {
    border: 1px solid rgba(31, 49, 48, 0.14);
    border-radius: 14px;
    padding: 14px;
  }

  .tp-mobile-service-title {
    color: #1f3130;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
  }

  .tp-mobile-service-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .tp-mobile-service-list li {
    margin: 0;
  }

  .tp-mobile-service-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(31, 49, 48, 0.18);
    font-size: 13px;
    font-weight: 600;
    color: #1f3130;
    text-decoration: none;
    text-align: center;
  }

  .tp-mobile-service-list a.active {
    background: #00a1b6;
    border-color: #00a1b6;
    color: #fff;
  }
}

/* 19) Mobile cursor + scroll reveal */
@media (max-width: 991px) {
  body.tp-magic-cursor #magic-cursor,
  #magic-cursor {
    display: none !important;
  }

  body.tp-magic-cursor,
  body.tp-magic-cursor * {
    cursor: auto !important;
  }

  .mobile-reveal {
    opacity: 0 !important;
    transform: translate3d(0, 22px, 0) !important;
    transition: opacity 0.5s ease, transform 0.5s ease !important;
    will-change: opacity, transform;
  }

  .mobile-reveal.is-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
  }
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  .mobile-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}