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

@media (max-width: 768px) {
    /* Mobile Navigation */
    .mobile-menu-toggle {
        display: block;
    }

    .desktop-nav {
   display: none;
  }

    /* Mobile nav overlay and menu - ensure proper visibility control */
    .mobile-nav-overlay {
    display: block; /* Block for layout, but... */
        visibility: hidden; /* ...hidden by default */
        pointer-events: none; /* ...and don't block clicks */
    }

    .mobile-nav-overlay.active {
        visibility: visible;
        pointer-events: auto;
    }

    .mobile-nav-menu {
        display: block;
    }

    /* ===== MOBILE BUTTON TEXT CENTERING ===== */
    .btn-block,
.btn.btn-block,
    a.btn-block,
    a.btn.btn-block,
    .btn-lg.btn-block {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
   text-align: center !important;
        padding: 0.875rem 1rem !important;
        line-height: 1.5 !important;
  }

    /* Ensure button content is centered */
    .btn-block > *,
    .btn.btn-block > * {
        display: inline-flex;
    align-items: center;
    }

    /* Better icon spacing in mobile buttons */
    .btn i.fas,
    .btn i.far,
    .btn i.fab {
margin-right: 0.5rem;
        font-size: 1em;
        flex-shrink: 0;
 }

    /* Badge spacing in buttons */
    .btn .badge {
        margin-left: 0.5rem;
        flex-shrink: 0;
    }

    /* ===== CRITICAL: Force ALL buttons to be clickable on mobile ===== */
    button,
 .btn,
    a.btn,
    input[type="button"],
    input[type="submit"],
    [class*="btn-"] {
    pointer-events: auto !important;
cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
/* ULTRA-SPECIFIC: Target exact button combinations from shop page */
    a.btn.btn-lg.btn-block,
    a.btn.btn-lg.btn-block.btn-outline-primary,
    a.btn.btn-lg.btn-block.btn-vip,
    button.btn.btn-lg.btn-block,
    .btn-lg.btn-block {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    pointer-events: auto !important;
      cursor: pointer !important;
        position: relative !important;
        z-index: 9999 !important;
   text-align: center !important;
    }

    /* Force block buttons to display correctly */
    .btn-block,
    .btn.btn-block,
    a.btn-block,
 a.btn.btn-block,
    button.btn-block,
    [class*="btn-block"] {
display: flex !important;
    width: 100% !important;
   pointer-events: auto !important;
   z-index: 9999 !important;
    }

    /* Ensure proper stacking and clickability */
    .card-body {
        position: relative;
        z-index: 1;
    }

    .card-body .btn,
    .card-body button,
    .card-body a.btn {
  position: relative;
        z-index: 9999 !important;
        pointer-events: auto !important;
    }

    /* Event actions container should not block clicks */
    .event-actions {
        position: relative;
 z-index: 9998 !important;
    }

    .event-actions .btn,
    .event-actions a,
    .event-actions button {
        pointer-events: auto !important;
        cursor: pointer !important;
  position: relative !important;
        z-index: 9999 !important;
    }

    /* AGGRESSIVE: Disable pointer events on ALL pseudo-elements that might block */
    .vip-event-card::before,
    .vip-event-card::after,
    .vip-header::before,
 .vip-header::after,
    .btn-vip::before,
    .btn-vip::after,
    .card::before,
    .card::after,
    .card-body::before,
    .card-body::after {
     pointer-events: none !important;
    }

    /* AGGRESSIVE: Ensure parent containers don't block */
    .shop_start,
    .card-deck,
    .event-card,
    .vip-event-card {
   pointer-events: auto !important;
    }

    /* AGGRESSIVE: Ensure the card itself allows clicks through */
    .card {
   pointer-events: auto !important;
   position: relative;
  }

    /* AGGRESSIVE: Make sure buttons receive ALL events */
    a.btn.js-pre-token,
 button.js-pre-token,
    .js-pre-token {
        pointer-events: auto !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 9999 !important;
    -webkit-tap-highlight-color: rgba(223, 105, 26, 0.2) !important;
    }
    /* ===== END CRITICAL FIX ===== */

    /* Mobile navigation styling */
    .mobile-nav-menu .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .mobile-nav-menu .navbar-nav .nav-item {
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .mobile-nav-menu .navbar-nav .nav-link {
        width: 100%;
text-align: left;
padding: 1rem;
        font-size: 1rem;
        border-radius: 0;
    }

    .mobile-nav-menu .navbar-nav .nav-link i {
width: 20px;
        margin-right: 0.5rem;
    }

    .mobile-nav-menu .language-control {
 padding: 1rem;
    }

    .mobile-nav-menu .language-control select,
    .mobile-nav-menu .language-control .form-select {
        width: 100%;
        padding: 0.75rem;
        font-size: 1rem;
    }

    .mobile-nav-menu #logoutForm {
        width: 100%;
    }

    .mobile-nav-menu #logoutForm .btn-link {
        width: 100%;
        text-align: left;
      padding: 1rem;
    }

    /* Compact header */
    .header-container {
        padding: 0 1rem;
    }

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

    .brand-icon {
        width: 32px;
        height: 32px;
    font-size: 1.1rem;
    }

    /* Main content */
    .main-container {
        width: 95%;
        padding: 0 0.5rem;
    }

    #app {
  padding: 1.5rem 1.25rem;
 border-radius: var(--radius-md);
    }

    .fresh-main {
   padding: 1rem 0;
    }

    .fresh-header {
        padding: 0.5rem 0;
    }

    /* Compact footer on mobile */
    .footer-container {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
padding: 0 0.75rem;
    }

    .footer-links {
        gap: 0.75rem;
      flex-wrap: wrap;
        justify-content: center;
    }

    .footer-links a {
        font-size: 0.7rem;
      padding: 0.2rem 0.4rem;
    }

    .copyright {
        font-size: 0.65rem;
    }

 /* Mobile Event Card Improvements */
    .shop_start .card {
        margin-bottom: 1.25rem !important;
        border-radius: 12px !important;
    }

    .shop_start .card-header {
  padding: 1rem !important;
    }

    .shop_start .card-header h2 {
     font-size: 1.2rem !important;
  line-height: 1.3;
     margin-bottom: 0 !important;
    }

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

    /* Better list spacing */
    .shop_start .list-unstyled li {
        padding: 0.5rem 0;
   font-size: 0.9rem;
        line-height: 1.5;
    }

 .shop_start .list-unstyled li i {
   font-size: 1rem;
  }

    /* Alert improvements */
    .alert {
  font-size: 0.85rem !important;
        padding: 0.75rem 1rem !important;
        margin-bottom: 1rem !important;
    }

    /* VIP Badge mobile */
    .vip-badge {
        font-size: 0.65rem !important;
        padding: 0.3rem 0.6rem !important;
    }

    /* Button improvements */
    .btn-lg {
        font-size: 0.95rem !important;
   padding: 0.75rem 1rem !important;
    }

 /* Improve icon+text spacing */
    .btn i,
 .alert i {
        margin-right: 0.35rem !important;
    }

  /* Better line height for readability */
    .card-body {
        line-height: 1.6;
    }

    /* Reduce excessive spacing */
    .text-center.mb-5 {
        margin-bottom: 2rem !important;
    }

    h1.display-5 {
        font-size: 1.5rem !important;
        margin-bottom: 1.25rem !important;
    }
}