/* ==========================================
 * BREAKPOINT-TRANSITIONS.CSS
 * Smooth transitions during responsive breakpoint changes
 * ==========================================
 * FILE: /css/discover/components/breakpoint-transitions.css
 * PURPOSE: Prevent layout jumps, disappearing elements, and transform glitches
 * IMPORT: Add to discover.html after topbar.css
 * STATUS: ACTIVE
 * ==========================================
 */

/* ==========================================
 * AMENITY CHIPS VISIBILITY PROTECTION
 * Ensure chips don't disappear during breakpoint transitions
 * ==========================================
 */

/* Prevent flash of hidden content during breakpoint transitions */
.amenity-chips-container {
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease !important;
}

/* Full desktop only. Compact desktop keeps topbar feature chips collapsed into Filters. */
@media (min-width: 1280px) {
  .amenity-chips-container.hidden.lg\:flex {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #amenity-filter-badges-desktop.hidden.lg\:flex {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (min-width: 1101px) and (max-width: 1279px) {
  .amenity-chips-container.hidden.lg\:flex,
  .amenity-chips-container.lg\:flex {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Below desktop breakpoint - Ensure hidden (tablet and mobile) */
@media (max-width: 1100px) {
  .amenity-chips-container.hidden.lg\:flex,
  .amenity-chips-container.lg\:flex {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Filter badge row: same pattern as chips — Tailwind lg is 1024px, discover desktop is 1101px
     (see DiscoverConstants.BREAKPOINTS.DESKTOP). AmenityFilterBadge uses 1101 in JS. */
  #amenity-filter-badges-desktop.hidden.lg\:flex,
  #amenity-filter-badges-desktop.lg\:flex {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ==========================================
 * HAMBURGER MENU POSITIONING SMOOTHING
 * Prevent jumpy positioning during size changes
 * ==========================================
 */

#discover-menu-button,
.discover-menu-trigger {
  transition: transform 0.2s ease, opacity 0.2s ease !important;
  will-change: transform;
}

/* Smooth positioning at all breakpoints */
@media (max-width: 400px) {
  #discover-menu-button,
  .discover-menu-trigger {
    transform: none !important;
  }
}

@media (min-width: 401px) {
  #discover-menu-button,
  .discover-menu-trigger {
    transform: none !important;
  }
}

/* Search/datetime layout and menu placement are owned by topbar.css. */

/* ==========================================
 * PREVENT ELEMENT CROWDING
 * Ensure adequate spacing at all breakpoints
 * ==========================================
 */

/* Desktop - Ensure spacing between elements - MOVED TO 1101px */
@media (min-width: 1101px) {
  .discover-top-bar .discover-toolbar-primary {
    gap: var(--discover-toolbar-gap, 1rem) !important;
    justify-content: flex-start !important;
  }

  /* Prevent logo and fields from crowding */
  .discover-top-bar .discover-toolbar-logo {
    margin-right: 0 !important;
  }

  /* Prevent hamburger from going off-screen */
  .discover-top-bar .discover-toolbar-menu {
    margin-left: 0 !important;
    flex-shrink: 0 !important;
  }
}

/* Tablet - Balanced spacing - EXTENDED TO 1100px */
@media (min-width: 641px) and (max-width: 1100px) {
  .discover-top-bar .discover-toolbar-primary {
    gap: 0.75rem !important;
  }
}

/* ==========================================
 * AUTOCOMPLETE DROPDOWN POSITIONING
 * Transition/entrance now owned by discover-popover.css shell (higher specificity).
 * ==========================================
 */


/* ==========================================
 * GPU ACCELERATION FOR SMOOTH TRANSFORMS
 * Reduced to essential elements only
 * ==========================================
 */

.amenity-chips-container {
  transform: translateZ(0); /* Force GPU acceleration */
  backface-visibility: hidden;
}

/* ==========================================
 * PREVENT LAYOUT THRASHING
 * Reduce repaints during resize events
 * ==========================================
 */

.discover-top-bar,
.discover-top-bar .search-display-container,
.discover-top-bar .datetime-display-container {
  contain: none !important;
}

/* Top bar search/datetime containment moved to topbar.css.
   Keep transition-only concerns in this file. */