/* Signed-in customer identity: person icon + comfortable bell spacing. */
.mobile-customer-header{
  gap:12px!important;
}

.mobile-customer-name{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
  max-width:270px!important;
  padding:9px 15px!important;
  text-align:left!important;
  border-radius:10px!important;
  transition:background-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease!important;
}

.mobile-customer-name::before{
  content:"";
  flex:0 0 20px;
  width:20px;
  height:20px;
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23173854' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.4'/%3E%3Cpath d='M5.5 20c.7-4 3-6 6.5-6s5.8 2 6.5 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:16px 16px;
  transition:opacity .18s ease!important;
}

.mobile-customer-name:hover,
.mobile-customer-name:focus-visible{
  background:#17314b!important;
  color:#fff!important;
  transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(23,49,75,.20);
  outline:none;
}

.mobile-customer-name:hover::before,
.mobile-customer-name:focus-visible::before{
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.4'/%3E%3Cpath d='M5.5 20c.7-4 3-6 6.5-6s5.8 2 6.5 6'/%3E%3C/svg%3E");
}

@media(max-width:980px){
  .mobile-customer-header{gap:10px!important}
  .mobile-customer-name{max-width:138px!important;padding:8px 12px!important}
}

@media(max-width:600px){
  .mobile-customer-header{gap:9px!important}
  .mobile-customer-name{max-width:116px!important;gap:6px!important;padding:7px 10px!important}
  .mobile-customer-name::before{width:18px;height:18px;flex-basis:18px;background-size:14px 14px}
}

@media(max-width:430px){
  .mobile-customer-header{gap:7px!important}
  .mobile-customer-name{max-width:90px!important;gap:5px!important;padding:6px 8px!important}
  .mobile-customer-name::before{width:16px;height:16px;flex-basis:16px;background-size:13px 13px}
}