/* static/css/ios-fixes.css — strong iOS-specific stability & layout overrides */

/* A) Global: iOS Safari stability — drop all backdrop-filter and heavy filter usage */
@supports (-webkit-touch-callout: none) {
  /* Disable backdrop filters everywhere; replace with opaque-ish backgrounds */
  * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .navbar, header, .hero, .glass, [class*="glass"], [class*="blur"], [class*="frost"] {
    background-color: rgba(15,23,42,0.98) !important;
  }

  /* Disable heavy filters on decorative glow layers */
  [class*="glow"], .glow, .glare, .shine, .halo, .neon {
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
    opacity: 0.28 !important;
    /* Safe visual fallback instead of blur-based glows */
    box-shadow: 0 0 22px rgba(245,158,11,0.35), 0 0 8px rgba(245,158,11,0.35) !important;
  }

  /* Sticky + filter combo is known to crash; keep sticky but no filters already off */
  .navbar{
    position: sticky;
    top: 0;
    z-index: 1000;
  }
}

/* B) Benefit / feature tiles — hard centering & stability */
.benefits .feature-card,
.benefits .feature-box,
.benefits .card,
#benefits .feature-card,
#benefits .feature-box,
#benefits .card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
  transform: translateZ(0); /* prevent text shift during repaints */
  will-change: auto;
}

.benefits .feature-card .icon,
.benefits .feature-box .icon,
.benefits .card .icon,
#benefits .feature-card .icon,
#benefits .feature-box .icon,
#benefits .card .icon {
  position: static !important;
  margin: 0 0 8px 0 !important;
  line-height: 1;
  flex-shrink: 0;
}

.benefits .feature-card h3,
.benefits .feature-card .title,
.benefits .feature-box h3,
.benefits .feature-box .title,
.benefits .card h3,
.benefits .card .title,
#benefits .feature-card h3,
#benefits .feature-card .title,
#benefits .feature-box h3,
#benefits .feature-box .title,
#benefits .card h3,
#benefits .card .title {
  margin: 6px 0 0 0 !important;
  line-height: 1.15 !important;
  word-break: break-word !important;
  white-space: normal !important;
}

@media (max-width: 768px){
  .benefits .feature-card,
  .benefits .feature-box,
  .benefits .card,
  #benefits .feature-card,
  #benefits .feature-box,
  #benefits .card {
    min-height: 120px;
    padding: 14px 12px;
  }
}

/* C) Defensive: disable GPU-taxing transitions on tiles for iOS */
@supports (-webkit-touch-callout: none) {
  .benefits .feature-card *, .benefits .feature-box *, .benefits .card * {
    transition: none !important;
    animation: none !important;
  }
}