/* ============================================================
   HolyMove — global mobile polish. Loaded LAST (via footer) so it
   overrides page styles. Goal: clean, tappable, no h-scroll on phones.
   ============================================================ */
html, body { overflow-x: hidden !important; max-width: 100%; }
img { max-width: 100%; height: auto; }

@media (max-width: 768px) {
    .container, .container-fluid { padding-left: 16px !important; padding-right: 16px !important; }

    /* ---- Quote / estimate form: stack label+input, full-width controls ---- */
    .stepContainer .row > .col-4 { flex: 0 0 100% !important; max-width: 100% !important; text-align: left !important; margin-bottom: 4px; font-weight: 600; }
    .stepContainer .row > .col-8 { flex: 0 0 100% !important; max-width: 100% !important; }
    .my-custom-control { width: 100% !important; box-sizing: border-box; height: 44px; }
    .myBox { padding: 16px !important; }
    .myBox .btn, .stepContainer .btn { width: 100%; margin: 6px 0 !important; display: block; }

    /* ---- Directory cards ---- */
    #companies .card-body .col-3 { flex: 0 0 60px !important; max-width: 60px !important; padding-right: 6px; }
    #companies .card-body .col-9 { flex: 1 1 auto !important; max-width: none !important; }
    #companies .card-text .btn { float: none !important; display: block; width: 100%; margin-top: 10px; }
    #companies .card-title { font-size: 16px; }

    /* search bar full width */
    .input-group { width: 100%; }
}

@media (max-width: 520px) {
    /* value-props: stack the 3 columns */
    .tabletTop .row > .col-4 { flex: 0 0 100% !important; max-width: 100% !important; margin-bottom: 26px; }
    .snd-div { font-size: 18px !important; line-height: 1.4; }
    /* hero text a touch tighter */
    .hero h2 { font-size: clamp(24px, 8vw, 34px) !important; }
}

/* ============================================================
   iPhone / small-screen optimization pass (mobile audit 2026-06-19)
   This file loads LAST (footer) so these rules win. All scoped to small screens.
   ============================================================ */

/* Kill sideways scroll + iOS focus auto-zoom site-wide */
@media (max-width:600px){
  html, body{ overflow-x:hidden; max-width:100%; }
  input, select, textarea{ font-size:16px !important; }
}

/* ---- Home ---- */
@media (max-width:600px){
  .hero{ position:relative !important; top:auto !important; left:auto !important; transform:none !important; margin-left:0 !important; width:100% !important; padding:26px 16px !important; }
  .heroContainer{ min-height:0 !important; height:auto !important; display:flex; align-items:center; padding:30px 0 !important; }
  main{ min-height:0 !important; }
  .custom-container{ width:100% !important; max-width:100% !important; }
  .custom-container .row{ margin-left:0 !important; margin-right:0 !important; }
  .custom-container .row > [class^='col-']{ padding-left:0 !important; padding-right:0 !important; }
  .mobileShow .col-12 a{ display:block !important; padding:14px 12px !important; min-height:44px; text-align:center; }
  #servicesTop .col-lg-4 .row{ margin-left:0 !important; margin-right:0 !important; }
  #servicesTop .col-lg-4 .col-2, #servicesTop .col-lg-4 .col-10{ padding-left:0 !important; padding-right:0 !important; }
  #servicesTop .col-lg-4{ padding:18px !important; }
  .vp-tx p, .hm-fstep p{ font-size:15px !important; }
  .hero-trust{ font-size:16px !important; }
}
@media (hover:none){
  #servicesTop .col-lg-4 .col-2{ background:linear-gradient(135deg,#E9B11C,#C98F08) !important; }
  #servicesTop .col-lg-4 .col-2 svg{ color:#fff !important; }
}

/* ---- Directory ---- */
.pagination{ flex-wrap:wrap !important; justify-content:center; }
@media (max-width:600px){
  .pagination{ gap:4px; }
  .pagination .page-item{ margin:0 !important; }
  .pagination .page-link{ padding:8px 11px !important; min-width:40px; min-height:44px; display:flex; align-items:center; justify-content:center; margin:0 !important; }
  #companies .card-text .btn{ float:none !important; display:block; width:100% !important; margin-top:10px; padding:11px 0; text-align:center; }
  #companies .card-title{ font-size:16px; line-height:1.3; }
  #companies .card-body img{ max-width:100% !important; height:auto; max-height:74px; }
  .input-group #search.form-control{ min-height:46px; }
  .input-group .btn-white{ min-height:46px; min-width:52px; display:flex; align-items:center; justify-content:center; }
  .dir-filter .dir-actions{ width:100%; justify-content:space-between; }
  .dir-filter .btn-custom{ flex:1; padding:12px 0; }
  .dir-clear{ font-size:15px; padding:12px 14px; min-height:44px; display:inline-flex; align-items:center; }
}

/* ---- Company page (lime template) ---- */
@media (max-width:992px){
  .profile-header .profile-header-menu{ float:none !important; }
  .profile-header-menu ul{ display:flex !important; flex-wrap:wrap; justify-content:center; gap:8px 18px; height:auto !important; margin:10px 0 0 !important; padding:0 !important; }
  .profile-header-menu ul li{ float:none !important; display:inline-block !important; width:auto !important; padding:0 !important; }
  .profile-header-menu ul li a{ padding:11px 14px; min-height:44px; display:flex; align-items:center; }
}
@media (max-width:600px){
  .profile-header{ margin-top:0 !important; }
  .profile-img{ margin-top:-46px !important; }
  .profile-about-list li .material-icons{ position:static !important; width:auto !important; top:auto !important; }
  .profile-about-list li span{ padding-left:0 !important; display:inline !important; }
  .cmp-sub{ font-size:13px !important; }
  .lead-note{ font-size:14px !important; line-height:1.6; }
  .cta-card .cmp-cta{ max-width:none !important; }
}

/* ---- Chrome: header burger + footer ---- */
@media (max-width:880px){ .hm-burger{ display:flex !important; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:8px; } }
@media (max-width:600px){
  .hm-fbar .hm-fcontainer{ flex-direction:column; gap:12px; }
  .hm-fend{ flex-wrap:wrap; justify-content:center; gap:12px; }
  .hm-flang select{ padding:8px 30px 8px 12px; min-height:44px; max-width:70vw; }
  #hmMobileMenu a{ min-height:44px; box-sizing:border-box; }
}

/* ---- Auth / account / register-pro ---- */
@media (max-width:600px){
  .auth-card{ padding:24px 18px; }
  .acct-card{ padding:22px 18px; }
  .acct-wrap, .auth-wrap{ padding:0 12px; }
  .role-toggle label{ padding:12px 6px; font-size:13px; line-height:1.2; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:64px; }
  .role-toggle .ic{ margin-bottom:6px; }
  .pro-hero{ padding:24px 14px 22px !important; }
  .pro-hero h1{ font-size:clamp(22px,5.5vw,40px) !important; }
  .pro-benefit{ flex:1 1 100% !important; max-width:100% !important; }
  .acct-head{ flex-wrap:wrap; gap:12px; }
}

/* ---- CRM / manage (admin) ---- */
@media (max-width:760px){
  .crm-chip{ padding:10px 14px; font-size:14px; }
  .lnk-del{ min-height:44px; padding:10px 14px; font-size:13px; }
  .quick-contacted{ min-height:44px; width:100%; margin-top:6px; }
  select.statussel{ width:100%; min-height:44px; padding:10px; }
  .notes-cell textarea{ width:100% !important; }
}
@media (max-width:600px){
  .mg-wrap .tbl{ -webkit-overflow-scrolling:touch; }
  .mg-stats{ grid-template-columns:repeat(2,1fr) !important; gap:10px; }
  .mg-stat{ padding:12px 14px; } .mg-stat .n{ font-size:20px; }
  .mg-search{ flex-direction:column; } .mg-search input{ min-width:0 !important; width:100%; } .mg-btn{ width:100%; min-height:44px; }
  .mg-act, .mg-btn{ min-height:44px; padding:11px 16px; font-size:14px; }
}

/* ---- Affiliates + Diary ---- */
.dy-hero{ min-height:90svh; }
.dy-lantern:active{ transform:scale(.94); }
@media (max-width:600px){
  .aff-btn.lg{ display:block; width:auto; max-width:340px; margin:0 auto; padding:15px 20px; }
  .dy-hero{ min-height:80svh; }
  .dy-btns{ flex-direction:column; align-items:stretch; padding:0 24px; }
  .dy-btn{ text-align:center; }
  .dy-lb img{ width:280vw !important; }
  .dy-ziphint{ right:8px; bottom:8px; font-size:11px; }
  .dy-lb-tip{ font-size:13px; }
}