.combo-container {
     position: relative;
     margin-bottom: 20px;
 }

 .input-wrapper {
     position: relative;
     display: flex;
     align-items: center;
     max-width: 600px;
 }

 #phraseInput {
     width: 100%;
     padding: 12px 70px 12px 12px;
     font-size: 16px;
     border: 2px solid #ddd;
     border-radius: 8px;
     box-sizing: border-box;
     outline: none;
     transition: border-color 0.3s;
 }

 .clear-btn {
     position: absolute;
     right: 45px;
     top: 50%;
     transform: translateY(-50%);
     background: #ccc;
     color: white;
     border: none;
     border-radius: 50%;
     width: 20px;
     height: 20px;
     cursor: pointer;
     font-size: 12px;
     display: none;
     align-items: center;
     justify-content: center;
     transition: background-color 0.2s;
     z-index: 1;
 }

 .phraseDropdown-btn {
     position: absolute;
     right: 8px;
     top: 50%;
     transform: translateY(-50%);
     background: #667eea;
     color: white;
     border: none;
     border-radius: 4px;
     width: 24px;
     height: 24px;
     cursor: pointer;
     font-size: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background-color 0.2s;
     z-index: 1;
 }

 .phraseDropdown-btn:hover {
     background: #5a67d8;
 }

 .clear-btn:hover {
     background: #999;
 }

 .clear-btn.show {
     display: flex;
 }

 #phraseInput:focus {
     border-color: #667eea;
 }

 #comboPhrase {
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     background: #eef7ff;
     border: 1px solid #ddd;
     border-top: none;
     border-radius: 0 0 8px 8px;

     /* Overriden by the media query below for desktop */
     /* USE THIS FOR MOBILE HEIGHT TO CHANGE HOW MANY ROWS VISIBLE */
     max-height: 450PX;

     overflow-y: auto;
     display: none;
     z-index: 1000;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }

 /* When screen 601 or wider = desktop */
 @media (min-width: 601px) {
     #comboPhrase {
         max-height: 400px;
     }
 }

 .comboPhrase-item {
     padding: 2px 12px;
     /* reduce vertical space */
     line-height: 1;
     /* tightest possible line spacing */
     margin: 0;
     /* ensure no extra margin */
     cursor: pointer;
     border-bottom: 0.5px solid #eee;
     transition: background-color 0.2s;
 }


 .comboPhrase-item:hover,
 .comboPhrase-item.highlighted {
     /* background-color: #e0e7ff; */
     background-color: #fff9cc;
 }

 .comboPhrase-item:last-child {
     border-bottom: none;
 }

 .translate-btn {
     width: 100%;
     padding: 12px;
     font-size: 16px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     border: none;
     border-radius: 8px;
     cursor: pointer;
     transition: transform 0.2s, box-shadow 0.2s;
     margin-bottom: 20px;
 }

 .translate-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
 }

 .translate-btn:active {
     transform: translateY(0);
 }

 #result {
     padding: 15px;
     background: #f8f9ff;
     border-left: 4px solid #667eea;
     border-radius: 4px;
     margin-top: 20px;
     min-height: 50px;
     font-size: 16px;
 }

 .auto-translate-indicator {
     font-size: 12px;
     color: #666;
     text-align: center;
     margin-bottom: 10px;
     font-style: italic;
 }