/* SmartFixer Pro — real-device mobile QA hotfix V4
   Based on production iPhone screenshots. Loaded last on every public page. */

@media (max-width:820px){
  html,body{overflow-x:hidden!important}
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom))!important}

  /* Never leave whole sections invisible if IntersectionObserver stalls on mobile. */
  .reveal{opacity:1!important;transform:none!important}

  /* Compact header: keep logo/menu/login on one clean line. */
  .site-header .header-inner{
    min-height:66px!important;
    height:66px!important;
    gap:9px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .site-header .brand-kit-wordmark{
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:150px!important;
  }
  .site-header .brand-kit-logo{
    width:136px!important;
    max-width:136px!important;
    height:auto!important;
  }
  .mobile-menu-toggle{
    flex:0 0 46px!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    border-radius:13px!important;
  }
  .client-account-link{
    flex:0 0 auto!important;
    min-width:72px!important;
    min-height:46px!important;
    height:46px!important;
    padding:0 12px!important;
    border-radius:13px!important;
    font-size:14px!important;
  }

  /* Bottom CTA dock: visible, but no longer consumes a quarter of the viewport. */
  .mobile-actions{
    left:10px!important;
    right:10px!important;
    bottom:7px!important;
    width:auto!important;
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
    padding:6px!important;
    padding-bottom:max(6px,env(safe-area-inset-bottom))!important;
    border-radius:18px!important;
    background:rgba(3,15,27,.92)!important;
    border:1px solid rgba(40,177,255,.22)!important;
    box-shadow:0 14px 45px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.035)!important;
  }
  .mobile-actions a{
    min-height:47px!important;
    height:47px!important;
    padding:0 8px!important;
    border-radius:12px!important;
    font-size:13px!important;
    letter-spacing:.01em!important;
    text-transform:none!important;
    white-space:nowrap!important;
  }
  .mobile-actions a:first-child{
    color:#eafaff!important;
    border-color:rgba(40,177,255,.24)!important;
    background:linear-gradient(135deg,rgba(18,101,171,.38),rgba(6,42,72,.78))!important;
  }
  .mobile-actions a:last-child{
    color:#03121e!important;
    border-color:rgba(40,215,255,.36)!important;
    background:linear-gradient(135deg,#39e5ff,#168cff)!important;
    box-shadow:0 8px 22px rgba(22,141,255,.22)!important;
  }

  /* Floating helpers: small, separated, and above the dock. */
  .floating-smartfixer{
    right:11px!important;
    bottom:calc(72px + env(safe-area-inset-bottom))!important;
    width:48px!important;
    height:48px!important;
    border-radius:14px!important;
    z-index:15110!important;
    box-shadow:0 10px 28px rgba(0,0,0,.38),0 0 18px rgba(40,215,255,.10)!important;
  }
  .floating-smartfixer img{
    width:44px!important;
    height:44px!important;
  }
  .scroll-to-top{
    right:66px!important;
    bottom:calc(75px + env(safe-area-inset-bottom))!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:0!important;
    border-radius:14px!important;
    justify-content:center!important;
    z-index:15105!important;
  }
  .scroll-to-top>span{display:none!important}

  /* Home page: prevent horizontal service cards/images from colliding. */
  body.sf2-home-page .sfpro-category-rail{
    display:flex!important;
    gap:10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:12px 16px 16px!important;
    margin-left:-16px!important;
    margin-right:-16px!important;
    scroll-padding-left:16px;
    scroll-snap-type:x proximity!important;
    -webkit-overflow-scrolling:touch;
  }
  body.sf2-home-page .sfpro-category-rail>a{
    flex:0 0 132px!important;
    min-width:132px!important;
    width:132px!important;
    min-height:126px!important;
    padding:9px!important;
    gap:7px!important;
    overflow:hidden!important;
    scroll-snap-align:start!important;
    border-radius:13px!important;
  }
  body.sf2-home-page .sfpro-category-picture{
    display:grid!important;
    place-items:center!important;
    width:100%!important;
    height:72px!important;
    min-height:72px!important;
    overflow:hidden!important;
    border-radius:9px!important;
  }
  body.sf2-home-page .sfpro-category-picture img{
    display:block!important;
    width:100%!important;
    max-width:112px!important;
    height:68px!important;
    max-height:68px!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:none!important;
  }
  body.sf2-home-page .sfpro-category-rail>a>b{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    min-height:30px!important;
    margin:0!important;
    color:#e8f6ff!important;
    font-size:10px!important;
    line-height:1.25!important;
    text-align:center!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  /* Home quick form: dark theme must stay dark on iPhone and more compact. */
  body.sf2-home-page .sfpro-quick-form{
    margin:0 0 14px!important;
    padding:15px!important;
    border-radius:16px!important;
  }
  body.sf2-home-page .sfpro-form-head{margin-bottom:7px!important}
  body.sf2-home-page .sfpro-form-head h2{font-size:20px!important}
  body.sf2-home-page .sfpro-quick-form>label:not(.sfpro-consent),
  body.sf2-home-page .sfpro-form-row label{margin-top:7px!important}
  body.sf2-home-page .sfpro-quick-form input,
  body.sf2-home-page .sfpro-quick-form select,
  body.sf2-home-page .sfpro-quick-form textarea{
    min-height:46px!important;
    padding:10px 11px!important;
    color:#eef9ff!important;
    background:#061b2c!important;
    border-color:rgba(64,151,204,.44)!important;
    color-scheme:dark!important;
    font-size:16px!important;
  }
  body.sf2-home-page .sfpro-quick-form textarea{min-height:66px!important}
  body.sf2-home-page .sfpro-quick-form input::placeholder,
  body.sf2-home-page .sfpro-quick-form textarea::placeholder{color:#7692a5!important}
  body.sf2-home-page .sfpro-consent{gap:8px!important;margin-top:9px!important}
  body.sf2-home-page .sfpro-consent input{width:20px!important;height:20px!important;min-height:20px!important}
  body.sf2-home-page .sfpro-quick-form>button{min-height:48px!important;margin-top:10px!important}

  /* Content should stay clear of floating controls. */
  body.sf2-home-page .sfpro-home{padding-bottom:24px!important}
  body.sf2-home-page .sfpro-client{padding-bottom:18px!important}
  body.sf2-home-page .sfpro-request{scroll-margin-top:72px!important}
  body.sf2-home-page .sfpro-district-layout,
  body.sf2-home-page .sfpro-client-copy,
  body.sf2-home-page .sfpro-client-screen{overflow:hidden!important}

  /* Client mockup: keep it fully inside the card on narrow phones. */
  body.sf2-home-page .sfpro-client-screen{
    min-width:0!important;
    padding:12px!important;
  }
  body.sf2-home-page .sfpro-phone{
    width:min(178px,54vw)!important;
    max-width:100%!important;
  }
  body.sf2-home-page .sfpro-client-card{
    width:min(145px,38vw)!important;
    max-width:100%!important;
  }

  /* Reduce mobile hero visual height so it does not become an empty-looking screen. */
  body.sf2-home-page .sfpro-hero-visual{
    min-height:300px!important;
    max-height:390px!important;
  }
  body.sf2-home-page .sfpro-hero-visual img{
    object-position:center 34%!important;
  }
}

@media (max-width:430px){
  .site-header .brand-kit-wordmark{max-width:142px!important}
  .site-header .brand-kit-logo{width:130px!important;max-width:130px!important}
  .client-account-link{min-width:68px!important;padding-inline:10px!important}
  .mobile-actions{left:8px!important;right:8px!important}
  .mobile-actions a{font-size:12px!important}
  body.sf2-home-page .sfpro-category-rail>a{
    flex-basis:124px!important;
    min-width:124px!important;
    width:124px!important;
  }
}

@media (max-width:370px){
  .site-header .brand-kit-logo{width:118px!important;max-width:118px!important}
  .site-header .brand-kit-wordmark{max-width:124px!important}
  .mobile-menu-toggle{width:44px!important;height:44px!important;min-width:44px!important}
  .client-account-link{min-width:62px!important;font-size:12px!important}
  .mobile-actions a{font-size:11px!important}
  .floating-smartfixer{width:44px!important;height:44px!important}
  .floating-smartfixer img{width:40px!important;height:40px!important}
  .scroll-to-top{right:60px!important;width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important}
}

/* The drawer is a solid reading surface over the dimmed page on phones. */
@media (max-width:1100px){
  .mobile-top-nav{
    display:grid!important;
    box-sizing:border-box!important;
    top:calc(var(--sf-header-h, 64px) + 8px)!important;
    left:10px!important;right:10px!important;
    width:auto!important;max-width:none!important;
    max-height:calc(100dvh - var(--sf-header-h, 64px) - 18px)!important;
    z-index:16020!important;
    background:#071326!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    box-shadow:0 22px 64px rgba(0,0,0,.68)!important;
    overflow-y:auto!important;
  }
  .mobile-menu-open .mobile-top-nav{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important}
  .mobile-top-nav>a,.mobile-top-nav .mobile-nav-group,.mobile-top-nav .mobile-nav-group a{
    color:#f2f8ff!important;
    background-color:#10243e!important;
    opacity:1!important;
    text-shadow:none!important;
  }
  .mobile-top-nav .mobile-nav-group summary{color:#f2f8ff!important;font-size:15px!important}
  .mobile-menu-backdrop:not([hidden]){display:block!important;z-index:16010!important;background:rgba(0,5,16,.84)!important}
}