/* Final phone layout for the customer portal.
   The vh-phone class is set before the page body is parsed in templates/header.php.
   It deliberately does not depend on the page's viewport media query. */
html.vh-phone,
html.vh-phone body.customer-body { overflow-x:hidden !important; }

html.vh-phone body.customer-body { padding-top:72px !important; }
html.vh-phone .cust-header {
  box-sizing:border-box !important;
  display:flex !important;
  height:72px !important;
  width:100% !important;
  min-width:0 !important;
  padding:0 16px !important;
}
html.vh-phone .cust-logo { display:flex !important; min-width:0 !important; flex:1 1 auto !important; align-items:center !important; }
html.vh-phone .cust-logo img { width:auto !important; max-width:calc(100vw - 145px) !important; max-height:42px !important; }
html.vh-phone .cust-nav { display:none !important; }
html.vh-phone .notif-bell { margin-left:auto !important; margin-right:8px !important; }
html.vh-phone .burger { display:grid !important; flex:0 0 42px !important; place-items:center !important; width:42px !important; height:42px !important; padding:0 !important; border:1px solid #dce7ef !important; border-radius:11px !important; background:#fff !important; }
html.vh-phone .burger i { color:#173c59 !important; font-size:1.45rem !important; }
html.vh-phone .cust-nav-backdrop { position:fixed !important; z-index:1998 !important; inset:72px 0 0 !important; background:rgba(9,28,45,.36) !important; }
html.vh-phone .cust-nav-mobile { position:fixed !important; z-index:1999 !important; top:72px !important; right:0 !important; left:auto !important; display:flex !important; flex-direction:column !important; width:min(88vw,360px) !important; height:calc(100dvh - 72px) !important; max-height:none !important; padding:14px !important; transform:translateX(105%) !important; overflow-y:auto !important; background:#fff !important; border:0 !important; box-shadow:-18px 0 38px rgba(11,35,54,.18) !important; transition:transform .22s ease !important; }
html.vh-phone .cust-nav-mobile.show { transform:translateX(0) !important; }
html.vh-phone .cust-nav-mobile a { display:flex !important; align-items:center !important; min-height:50px !important; padding:13px 14px !important; border-bottom:1px solid #edf1f5 !important; border-radius:10px !important; color:#183b57 !important; font-size:.98rem !important; font-weight:650 !important; }
html.vh-phone .cust-nav-mobile .logout-link { margin-top:8px !important; border:1px solid #f2d6d2 !important; background:#fff8f7 !important; color:#a94235 !important; }

/* Profile and Help must occupy the entire phone viewport, just like Dashboard. */
html.vh-phone body.customer-body .profile-page.container,
html.vh-phone body.customer-body .help-container.help-page {
  box-sizing:border-box !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:28px 16px 48px !important;
}
html.vh-phone body.customer-body .profile-page .row { display:block !important; margin:0 !important; }
html.vh-phone body.customer-body .profile-page .profile-form-column,
html.vh-phone body.customer-body .profile-page .portal-form-card {
  box-sizing:border-box !important;
  display:block !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
}
html.vh-phone body.customer-body .profile-page .profile-form-column { padding:0 !important; }
html.vh-phone body.customer-body .profile-page .portal-page-head { max-width:none !important; margin:0 0 18px !important; }
html.vh-phone body.customer-body .profile-page .profile-card { padding:20px 16px !important; border-radius:16px !important; }
html.vh-phone body.customer-body .profile-page .form-control { min-height:46px; font-size:16px; }
html.vh-phone body.customer-body .help-container.help-page { border-radius:0 !important; box-shadow:none !important; }
html.vh-phone body.customer-body .help-container.help-page .help-section { box-sizing:border-box !important; width:100% !important; padding:20px 16px !important; }

@media (max-width:480px) {
  html.vh-phone .cust-header { padding:0 12px !important; }
  html.vh-phone .cust-logo img { max-width:calc(100vw - 136px) !important; max-height:34px !important; }
  html.vh-phone .notif-bell { margin-right:6px !important; }
  html.vh-phone .notif-bell > a { width:38px !important; height:38px !important; }
  html.vh-phone .burger { flex-basis:40px !important; }
}