/**
 * Mobile Modal Fixes - Ensure modals work on mobile devices
 */

@media (max-width: 900px) {
  /* Login modal must be above everything else */
  .modal,
  #login-modal {
    z-index: 15000 !important;
    pointer-events: all !important;
    touch-action: manipulation !important;
  }
  
  .modal:not(.hidden),
  #login-modal:not(.hidden) {
    display: flex !important;
  }
  
  /* Modal content touchable */
  .modal-content {
    pointer-events: all !important;
    touch-action: manipulation !important;
    position: relative;
    z-index: 15001 !important;
  }
  
  /* All interactive elements in modals must be touchable */
  .modal input,
  .modal button,
  .modal-content input,
  .modal-content button {
    pointer-events: all !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    cursor: pointer !important;
  }
  
  /* Login button specifically */
  #login-btn {
    min-height: 52px !important;
    font-size: 1.15rem !important;
    font-weight: bold !important;
    padding: 16px !important;
    background: var(--gold) !important;
    color: #000 !important;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    pointer-events: all !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(255, 215, 0, 0.3) !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
    position: relative !important;
    z-index: 15002 !important;
  }
  
  #login-btn:active,
  #login-btn:focus {
    transform: scale(0.95) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    outline: none !important;
  }
  
  /* Hide chat elements when login modal is visible */
  .modal:not(.hidden) ~ .bj-chat-toggle,
  .modal:not(.hidden) ~ .bj-chat-overlay,
  .modal:not(.hidden) ~ .fullscreen-toggle {
    display: none !important;
    pointer-events: none !important;
  }
  
  #login-modal:not(.hidden) ~ .bj-chat-toggle,
  #login-modal:not(.hidden) ~ .bj-chat-overlay,
  #login-modal:not(.hidden) ~ .fullscreen-toggle {
    display: none !important;
    pointer-events: none !important;
  }
  
  /* Ensure modal inputs are usable */
  .modal input,
  .modal-content input {
    min-height: 48px !important;
    font-size: 1rem !important;
    padding: 14px !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(40, 40, 40, 0.8) !important;
    color: #fff !important;
    border-radius: 8px !important;
  }
  
  .modal input:focus,
  .modal-content input:focus {
    border-color: var(--gold) !important;
    outline: none !important;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.3) !important;
  }
}