/* Mobile Sign In Button - Figma Design Implementation */
/* Only applies to mobile view on /venues route */

/* Ensure 16px gap between search and signin button on mobile */
@media (max-width: 1023px) {
  /* Set container gap to 16px */
  .app-navigation .app-navigation__container {
    gap: 16px !important;
  }

  /* Remove margin from search trigger that adds extra spacing and prevent animation */
  .global-search-trigger {
    margin-right: 0 !important;
    /* margin-left: 0 !important; */
    /* transition: none !important; */
  }

  /* Prevent layout shift on page load */
  .app-navigation__left-section,
  .app-navigation__container {
    transition: none !important;
  }
}

/* Hide default desktop button on mobile */
@media (max-width: 1023px) {
  .app-navigation__action-button--outline-dark {
    display: none !important;
  }
}

/* Mobile Sign In Button Styles */
@media (max-width: 1023px) {
  .mobile-signin-button {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 0 8px !important;
    height: 46px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    min-width: fit-content !important;
  }

  .mobile-signin-button__avatar {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    display: block !important;
  }

  .mobile-signin-button__text {
    font-family: 'Vazir', sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 16px !important;
    line-height: 20px !important;
    letter-spacing: -0.15px !important;
    text-align: center !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Desktop - keep original styles */
@media (min-width: 1024px) {
  .mobile-signin-button {
    display: none !important;
  }
}