/* Main Container Styles */
.phc-container {
    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    padding: 3px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    max-width: 800px;
    margin: 0 auto;
}

/* Header Styles */
.phc-container h1 {
    color: #333;
    margin-bottom: 20px;
    font-size: 24px;
}

.phc-container h2 {
    margin-top: 20px;
}

/* Form Group Styles */
.phc-container .form-group {
    margin-bottom: 20px;
}

.phc-container .selectors-container {
    display: flex;
    gap: 15px;
    width: 100%;
    margin-bottom: 25px;
}

.phc-container .selector-column {
    width: 50%;
}

/* Select and Input Styles */
.phc-container select,
.phc-container input[type="number"] {
    width: 100% !important;
    padding: 10px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    background-color: #fff !important;
    height: 42px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    display: block !important;
}

.phc-container #poultry-type {
    font-size: 17px;
}

/* Reset any potential WordPress theme interference */
.phc-container .selector-column::before,
.phc-container .selector-column::after {
    display: none !important;
}

.phc-container .selectors-container::before,
.phc-container .selectors-container::after {
    display: none !important;
}

/* Focus states */
.phc-container select:focus,
.phc-container input[type="number"]:focus {
    outline: none;
    border-color: #0e8b7d;
    box-shadow: 0 0 3px rgba(14, 139, 125, 0.2);
}

.phc-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #060505;
}

/* Select and Button Styles */
.phc-container select, 
    button {
    width: auto;
    padding: 3px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.phc-container submit-btn {
    width: 100% !important;
    padding: 10px !important;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 18px;
    background-color: #318689 !important;
}

/* Symptoms Container Styles */
.phc-container .symptoms-container {
    display: flex;
    gap: 10px;
    width: 100%;
    margin: 5px !important;
}

.phc-container .available-symptoms-column {
    width: 50%;
    display: flex;
    flex-direction: column;
}

/* Search Input Styles */
.phc-container #symptom-search {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

/* Available Symptoms List Styles */
.phc-container #availableSymptoms {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px !important;
    overflow-y: auto;
    height: 400px;
    margin: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}


/* Symptom Item Styles */

.phc-container #availableSymptoms .symptom-item:hover {
    background-color: #f0f0f0;
}

.phc-container #availableSymptoms li,
.phc-container #availableSymptoms .symptom-item {
    list-style-type: none !important;
    list-style-position: outside !important;
    padding: 3px !important;
    margin-bottom: 2px;
    border-radius: 4px;
    cursor: move;
    touch-action: none; /* Prevents default touch behaviors */
    user-select: none; /* Prevents text selection during drag */
}

.phc-container ul,
.phc-container ul#availableSymptoms {
    padding-inline-start: 0 !important;
    padding: 0 !important;
}


/* Reset any potential WordPress theme interference */
.phc-container ul,
.phc-container ul li,
.phc-container #availableSymptoms::before,
.phc-container #availableSymptoms::after {
    list-style: none !important;
    padding: 2px !important;
}


/* Selected Symptoms Area Styles */
.phc-container #selected-symptoms {
    width: 50% ;
    border: 1px solid #ddd;
    height: 450px;
    border-radius: 4px;
    padding: 10px;
    overflow-y: auto;
    background-color: #fafafa;
    word-wrap: break-word;
}

.phc-container .selected-symptom {
    display: flex;
    background-color: #e0f3f3;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    margin-bottom: 5px;
    border-radius: 4px;
    cursor: move;
    user-select: none;
    transition: background-color 0.2s;
}

.phc-container .selected-symptom span {
    flex: 1; /* Takes remaining space */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    min-width: 0; /* Allows text to properly truncate */
}

/* Drag and Drop States */
.phc-container .selected-symptom.dragging {
    opacity: 0.5;
    background-color: #e0e0e0;
  }
  
.phc-container .selected-symptom.drag-over {
    border-top: 2px solid #4CAF50;
  }
  
  .phc-container .remove-icon {
    width: 16px;
    height: 16px;
    position: relative;
    cursor: pointer;
    margin-left: 10px;
}

.phc-container .remove-icon::before,
.phc-container .remove-icon::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 2px;
    background-color: #ff4444;
    top: 50%;
    left: 0;
}

.phc-container .remove-icon::before {
    transform: rotate(45deg);
}

.phc-container .remove-icon::after {
    transform: rotate(-45deg);
}

.phc-container .remove-icon:hover::before,
.phc-container .remove-icon:hover::after {
    background-color: #ff0000;
}
  
.phc-container #submit-btn {
        width: 100% !important;
        background-color: #45b5b5 !important;
        padding: 10px !important;
      }
  
    
.phc-container #submit-btn:hover {
        background-color: #45a049;
      }
  
.phc-container .warning {
        background-color: #fff3cd;
        border: 1px solid #ffeeba;
        border-radius: 4px;
        padding: 10px;
        margin-top: 20px;
      }
  
.phc-container .color-0 {
        background-color: #ffcccb;
      }
  
.phc-container .color-1 {
        background-color: #ccffcc;
      }
  
.phc-container .color-2 {
        background-color: #cce5ff;
      }
  
      .phc-container .color-3 {
        background-color: #ffffcc;
      }
  
      .phc-container  #response-area ul {
        padding-left: 20px;
      }
  
      .phc-container  #response-area li {
        margin-bottom: 5px;
        font-size: 17px;
        font-weight: bold;
      }

      /* Webkit (Chrome, Safari, newer versions of Opera) */
.phc-container #availableSymptoms::-webkit-scrollbar,
.phc-container #selected-symptoms::-webkit-scrollbar {
    width: 15px;
}

.phc-container #availableSymptoms::-webkit-scrollbar-track,
.phc-container #selected-symptoms::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}

.phc-container #availableSymptoms::-webkit-scrollbar-thumb,
.phc-container #selected-symptoms::-webkit-scrollbar-thumb {
    background-color: #318689;
    border-radius: 4px;
    border: 2px solid #f0f0f0;
}
  
      @media screen and (max-width: 768px) {
        .phc-container .container {
            padding: 0px;
        }
      
        .phc-container h1 {
            font-size: 15px; 
        }

        .phc-container h2 {
            margin-top: 15px;
        }
      
        .phc-container #poultry-type {
            font-size: 16px;
        }
        
        .phc-container .symptoms-container {
            gap: 5px;
        }

        .phc-container #availableSymptoms {
            height: 456px; 
            overflow-y: scroll; 
        }
        
        .phc-container .symptom-item,
        .phc-container .selected-symptom {
            padding: 2px !important;
            margin-bottom: 3px;
            font-size: 12px;
        }


        .phc-container #selected-symptoms {
            width: 60% !important ;
            padding: 5px;
            height: 500px; 
            overflow-y: auto;
        }
      
        .phc-container .info-link-area {
            margin-right: 10px;
            font-size: 12px;
        }
      
        .phc-container #symptom-search {
            font-size: 14px;
        }
        

            .phc-container .selectors-container {
                gap: 5px;
            }
            
            .phc-container select,
            .phc-container input[type="number"] {
                font-size: 14px;
                padding: 8px;
            }

            .phc-container  #response-area li {
                margin-bottom: 2px;
                font-size: 15px;
                font-weight: bold;
              }
        
    
    }