/* ==========================================================================
   Extra Small Mobile Responsive Styles (max-width: 400px)
   ========================================================================== */

@media (max-width: 400px) {
 /* Layout */
    #app {
  padding: 1rem 0.75rem;
    }

    .brand-text {
  font-size: 1rem;
}

    /* Typography */
    h1 {
        font-size: 1.5rem !important;
    }

    h2 {
  font-size: 1.25rem !important;
    }

    /* Ultra compact footer */
    .fresh-footer {
  padding: 0.35rem 0;
 }

    .footer-links {
     gap: 0.5rem;
    }

    .footer-links a {
        font-size: 0.6rem;
        padding: 0.15rem 0.3rem;
    }

 .copyright {
        font-size: 0.55rem;
    }

  /* Ultra small mobile improvements */
    h1, .display-5 {
 font-size: 1.25rem !important;
    }

    h2, .h4 {
        font-size: 1rem !important;
    }

body, .card-body {
        font-size: 0.85rem;
    }

    /* Minimal padding */
    .shop_start .card-header,
  .shop_start .card-body {
        padding: 0.75rem !important;
    }

    .shop_start .list-unstyled li {
        font-size: 0.8rem;
padding: 0.35rem 0;
    }

    /* Compact buttons */
    .btn, .btn-lg {
font-size: 0.85rem !important;
    padding: 0.65rem 0.85rem !important;
    }

    /* Alerts */
    .alert {
  font-size: 0.75rem !important;
        padding: 0.6rem 0.75rem !important;
  }

    /* Icons */
    .fa, .fas, .far {
    font-size: 0.9em;
    }

    /* VIP elements ultra compact */
    .vip-badge {
        font-size: 0.55rem !important;
        padding: 0.2rem 0.4rem !important;
    }

    /* Reduce all spacing */
    .mb-2, .mb-3 {
   margin-bottom: 0.5rem !important;
    }

    .mb-4, .mb-5 {
     margin-bottom: 0.75rem !important;
    }

.mt-2, .mt-3 {
      margin-top: 0.5rem !important;
    }

    /* Better text wrapping */
    * {
        word-wrap: break-word;
        overflow-wrap: break-word;
hyphens: auto;
    }
}