/* Inline Editor Styles for Ice Cream Menu */

/* Ensure no visible changes to menu items until interaction */
.menu-item h3 {
  transition: opacity 0.2s;
  position: relative;
  font-size: 2.2rem !important;
  line-height: 1.6;
  white-space: nowrap; /* Prevent wrapping to second line */
  overflow: hidden;
  text-overflow: ellipsis; /* Show ellipsis if text is too long */
  margin-bottom: 7px;
}

/* Subtle hover effect with just a slight opacity change */
.menu-item h3[data-editor-initialized="true"]:hover {
  opacity: 0.85;
}

/* Editor container styles */
.flavor-editor-container {
  width: 100%;
  position: relative;
  z-index: 100;
}

/* Search input styles */
.flavor-search-input {
  width: 100%;
  padding: 8px 12px !important;
  font-size: 1.8rem;
  font-family: inherit;
  font-weight: normal !important;
  color: inherit;
  border: 1px solid #aaa; /* Light grey border */
  border-radius: 4px;
  background-color: white;
  transition: box-shadow 0.2s;
}

.flavor-search-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(170, 170, 170, 0.25); /* Light grey shadow */
}

/* Results dropdown styles */
.flavor-results-dropdown {
  position: absolute;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background-color: white;
  border: 1px solid #aaa; /* Light grey */
  border-top: none;
  border-radius: 0 0 4px 4px;
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Result item styles */
.flavor-result-item {
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.flavor-result-item:hover,
.flavor-result-item.active {
  background-color: #f0f0f0; /* Light grey background */
}

.flavor-result-item.active {
  border-left: 3px solid #aaa; /* Light grey border */
  padding-left: 9px; /* Compensate for the border */
}

.flavor-result-item.no-results {
  color: #777;
  font-style: italic;
  cursor: default;
}

/* Scrollbar styles for dropdown */
.flavor-results-dropdown::-webkit-scrollbar {
  width: 6px;
}

.flavor-results-dropdown::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 0 0 4px 0;
}

.flavor-results-dropdown::-webkit-scrollbar-thumb {
  background: #aaa; /* Light grey scrollbar */
  border-radius: 3px;
}

.flavor-results-dropdown::-webkit-scrollbar-thumb:hover {
  background: #888; /* Darker grey on hover */
}

/* TV optimizations */
@media (min-width: 1920px) {
  .flavor-search-input {
    padding: 10px 14px;
  }
  
  .flavor-results-dropdown {
    max-height: 300px;
  }
  
  .flavor-result-item {
    padding: 10px 14px;
  }
}

/* Mobile optimizations */
@media (max-width: 767px) {
  .flavor-search-input {
    padding: 6px 10px;
  }
  
  .flavor-results-dropdown {
    max-height: 150px;
  }
  
  .flavor-result-item {
    padding: 6px 10px;
  }
}