/* Keep the mobile service counter focused on statistics and the recharge form. */
@media (max-width: 767px) {
  .customer-shell {
    display: flex;
    flex-direction: column;
  }

  .customer-shell > .hero > h1,
  .customer-shell > .hero > p,
  .customer-shell > .hero > .hero-badges {
    display: none;
  }

  .customer-shell > .hero {
    padding: 16px 12px;
  }

  .customer-shell .home-counter-module {
    max-width: 100%;
    margin-top: 0;
  }

  .customer-shell .hero-avg-row {
    margin-top: 12px;
  }

  .customer-shell .hero-avg-time {
    max-width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 8px;
    line-height: 1.6;
  }

  .customer-shell .front-tabs [role="tab"] {
    min-height: 44px;
    flex: 1;
  }

  .customer-shell .form-section input {
    min-height: 44px;
    font-size: 16px !important;
  }

  .customer-shell > .page-wrap {
    margin-bottom: 0;
  }

  .customer-shell > .chat-widget {
    position: static;
    order: 1;
    align-items: center;
    padding: 16px 12px 0;
  }

  .customer-shell > .site-footer {
    order: 2;
  }

  .customer-shell .chat-fab {
    width: auto;
    height: 44px;
    padding: 0 16px !important;
    border-radius: 12px;
    box-shadow: none;
  }

  .customer-shell .chat-fab-label {
    display: inline;
  }

  .customer-shell .chat-panel {
    position: fixed;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    max-height: calc(100dvh - 24px);
  }
}

@media (max-width: 360px) {
  .customer-shell .top-header { padding: 0 12px; }
  .customer-shell .top-logo { gap: 8px; font-size: 15px; }
  .customer-shell .top-status { gap: 6px; padding: 6px 8px; font-size: 11px; }
  .customer-shell .home-counter { padding: 0 12px; }
}