/* Tray Components - loads after legacy style.css to override */
.ce-tray{
  position:fixed; left:12px; top:50%;
  transform:translateY(-50%) translateX(-600px); /* EXTRA HIDDEN by default */
  width:var(--tray-w); max-width:calc(100vw - 24px);
  height:var(--tray-max-h-desktop); max-height:var(--tray-max-h-desktop);
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:var(--r-xl); box-shadow:0 8px 32px rgba(0,0,0,.15);
  overflow:hidden; display:flex; flex-direction:column; z-index:var(--z-tray);
  transition: transform var(--tray-ease);
}

/* Open state - slide into view */
.ce-tray--open {
  transform: translateY(-50%) translateX(0);
}

.ce-tray__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  border-bottom:1px solid rgba(0,0,0,.06);
  flex-shrink:0;
}

.ce-tray__body{
  flex:1 1 auto; 
  overflow-y: auto !important; 
  overflow-x: hidden;
  padding:12px;
  -webkit-overflow-scrolling: touch;
  max-height: calc(var(--tray-max-h-desktop) - 60px); /* Ensure height constraint for scrolling */
  position: relative;
}

@media (max-width:768px){
  .ce-tray{
    left:50%; 
    transform:translate(-50%, calc(100% + 50px)); /* Completely hidden below screen */
    width:var(--tray-w-mobile); 
    height:var(--tray-max-h-mobile);
    max-height:calc(var(--tray-max-h-mobile) - var(--safe-b));
  }
  
  /* Mobile open state */
  .ce-tray--open {
    transform: translate(-50%, -80px);
  }
}

.ce-tray__body .setting-group{margin-bottom:12px}
.ce-tray__body .setting-item{margin-bottom:10px}

/* Route tray gets extra width */
#routeTray{
  width: 400px;
  max-width: calc(100vw - 24px);
}

@media (max-width:768px){
  #routeTray{
    width: 300px;
    max-width: 90vw;
  }
}

/* FAB Horizontal mode (when FABs are horizontal) */
body.fab-horizontal .ce-tray {
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, calc(100% + 50px)) !important; /* Completely hidden below screen */
  max-height: 60vh !important;
  border-radius: 16px 16px 0 0 !important; /* Rounded top only */
}

body.fab-horizontal .ce-tray--open {
  transform: translate(-50%, -80px) !important; /* Slide up, 80px above bottom for FAB buttons */
}

/* Filter Chip Styles */
.subtype-chip, .cuisine-chip {
  display: inline-block;
  padding: 6px 12px;
  margin: 4px 6px 4px 0;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 16px;
  font-size: 14px;
  color: #495057;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  white-space: nowrap;
}

.subtype-chip:hover, .cuisine-chip:hover {
  background: #e9ecef;
  border-color: #adb5bd;
  transform: translateY(-1px);
}

.subtype-chip.selected, .cuisine-chip.selected {
  background: #007bff;
  border-color: #007bff;
  color: white;
}

.subtype-chip:active, .cuisine-chip:active {
  transform: translateY(0);
  background: #0056b3;
}

/* Section headers */
.refine-section {
  margin-bottom: 16px;
}

.refine-section-title {
  font-weight: 600;
  margin-bottom: 8px;
  color: #495057;
  display: flex;
  align-items: center;
  gap: 8px;
}

.refine-section-icon {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 20px;
  color: #6c757d;
}

.empty-state-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.empty-state-text {
  font-size: 14px;
  line-height: 1.4;
}