.input-text-container,
.replaced-text-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.input-container.card,
.results-container.card {
  display: grid;
}

.select-file-btn {
  font-size: 1.5rem;
  color: #fff;
  background-color: var(--primary-color);
  padding: 1rem 1.5rem;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
  width: fit-content;
}

.additional-inputs .find-options {
  display: flex;
  gap: 3rem;
}

.additional-inputs .find-options .text-option,
.additional-inputs .find-options .regex-option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--box-text-color);
}

.additional-inputs .pattern-input-container,
.additional-inputs .regex-input-container,
.additional-inputs .replacement-input-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.additional-inputs .pattern-input-container input,
.additional-inputs .regex-input-container input,
.additional-inputs .replacement-input-container input {
  width: 100%;
  height: 3rem;
  background-color: var(--toggle-active-color);
}

.result-action-btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 
Custom Radio
*/

/* Hide the default radio buttons */
.radio-container input[type="radio"] {
  display: none;
}

/* Style the custom radio buttons */
.custom-radio {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  border: 2px solid var(--toggle-active-color);
  border-radius: 20px;
  cursor: pointer;
  color: var(--toggle-active-color);
  transition: background-color 0.3s, color 0.3s;
}

/* When the radio button is checked, change the styles */
.radio-container input[type="radio"]:checked + .custom-radio {
  background-color: var(--toggle-active-color);
  color: #ffffff;
}

/* Add hover effect for better user experience */
.custom-radio:hover {
  background-color: #e0e0e0;
}