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

@media (max-width: 576px) {
    /* ===== CRITICAL: Ensure buttons are clickable ===== */
    button,
    .btn,
    a.btn,
    [class*="btn-"] {
pointer-events: auto !important;
cursor: pointer !important;
    }
    /* ===== END CRITICAL FIX ===== */

    /* Layout */
    .main-container {
        width: 100%;
        padding: 0 0.25rem;
    }

    #app {
        padding: 1.25rem 1rem;
        border-radius: 0.5rem;
    }

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

  .brand-icon {
width: 28px;
        height: 28px;
        font-size: 1rem;
    }

    /* Extra compact footer */
.fresh-footer {
padding: 0.4rem 0;
    }

    .footer-links a {
        font-size: 0.65rem;
    }

    .copyright {
   font-size: 0.6rem;
    }

 /* Typography */
    h1, .display-5 {
        font-size: 1.35rem !important;
        line-height: 1.3;
word-wrap: break-word;
    }

    h2, .h4 {
    font-size: 1.1rem !important;
        line-height: 1.3;
    }

    body, .card-body {
        font-size: 0.9rem;
        line-height: 1.55;
 }

    /* Event card specifics */
    .shop_start .card-header {
        padding: 0.85rem !important;
    }

    .shop_start .card-body {
    padding: 0.85rem !important;
    }

    .shop_start .list-unstyled li {
        font-size: 0.85rem;
   padding: 0.4rem 0;
    }

    /* Buttons */
    .btn, .btn-lg {
font-size: 0.9rem !important;
     padding: 0.7rem 0.9rem !important;
    }

    /* Alerts */
    .alert {
        font-size: 0.8rem !important;
   padding: 0.65rem 0.85rem !important;
        line-height: 1.4;
    }

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

    /* VIP elements */
    .vip-badge {
        font-size: 0.6rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    .vip-alert {
        font-size: 0.8rem !important;
    padding: 0.6rem 0.8rem !important;
    }

    /* Reduce white space */
    .mb-3 {
    margin-bottom: 0.75rem !important;
    }

    .mb-4 {
        margin-bottom: 1rem !important;
    }

    .mt-3 {
        margin-top: 0.75rem !important;
    }

    /* Better link line breaks */
    a {
    word-wrap: break-word;
      overflow-wrap: break-word;
    }
}