/* ==========================================================================
   Two Text Input Filter Component Styles
   ========================================================================== */

/* Import Google Fonts for consistency */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:wght@400;700&display=swap');

/* CSS Variables for theming (can be overridden) */
:root {
  --twotext-primary-color: #fccf5f;
  --twotext-white: #ffffff;
  --twotext-black: #222222;
  --twotext-gray: #dddddd;
  --twotext-light-gray: #fafafa;
  --twotext-medium-gray: #989898;
  --twotext-dark-gray: #454142;
  --twotext-input-border: 2px solid #fafafa;
  --twotext-input-border-focus: 2px solid #fccf5f;
  --twotext-input-radius: 3px;
  --twotext-input-font-size: 14px;
  --twotext-input-spacing: 16px;
  --twotext-input-shadow: none;
  --twotext-input-shadow-focus: 0 0 5px #dddddd;
  --twotext-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
  --twotext-button-transition: all 0.2s ease-in-out;
  --twotext-breakpoint-mobile: 767px;
}

/* Two Text Input Filter Container */
.adp--twotext-inputs-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--twotext-input-spacing);
  font-family: 'Roboto', sans-serif;
}

/* Input fields */
.adp--twotext-inputs-container input[type="text"] {
  flex: 1;
  min-width: 0; /* Prevents flex items from overflowing */
  height: calc(var(--twotext-input-font-size) + calc(var(--twotext-input-spacing) * 1.5));
  padding: calc(var(--twotext-input-spacing) / 2);
  border: var(--twotext-input-border);
  border-radius: var(--twotext-input-radius);
  font-family: 'Roboto', sans-serif;
  font-size: var(--twotext-input-font-size);
  color: var(--twotext-black);
  background-color: var(--twotext-white);
  box-shadow: var(--twotext-input-shadow);
  transition: var(--twotext-transition);
  box-sizing: border-box;
  
  /* Remove default browser styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Focus state */
.adp--twotext-inputs-container input[type="text"]:focus {
  border: var(--twotext-input-border-focus);
  background-color: var(--twotext-white);
  outline: none;
  box-shadow: var(--twotext-input-shadow-focus);
}

/* Placeholder */
.adp--twotext-inputs-container input[type="text"]::placeholder {
  color: var(--twotext-medium-gray);
  font-size: 12px;
}

/* Go button */
.adp--twotext-inputs-container button[type="button"] {
  height: calc(var(--twotext-input-font-size) + calc(var(--twotext-input-spacing) * 1.5));
  padding: calc(var(--twotext-input-spacing) / 2) calc(var(--twotext-input-spacing) * 0.75);
  border: 2px solid var(--twotext-primary-color);
  border-radius: var(--twotext-input-radius);
  background-color: var(--twotext-primary-color);
  color: var(--twotext-black);
  font-family: 'Roboto', sans-serif;
  font-size: var(--twotext-input-font-size);
  font-weight: 600;
  cursor: pointer;
  transition: var(--twotext-button-transition);
  white-space: nowrap;
  min-width: 40px;
  box-sizing: border-box;
  
  /* Remove default browser styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Hover state */
.adp--twotext-inputs-container button[type="button"]:hover {
  background-color: #e6b94f; /* Darker version of primary color */
  border-color: #e6b94f;
  transform: translateY(-1px);
}

/* Active state */
.adp--twotext-inputs-container button[type="button"]:active {
  transform: translateY(0);
}

/* Focus state */
.adp--twotext-inputs-container button[type="button"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(252, 207, 95, 0.3);
}

/* Responsive adjustments */
@media (max-width: var(--twotext-breakpoint-mobile)) {
  .adp--twotext-inputs-container {
    flex-direction: column;
    gap: 6px;
  }
  
  .adp--twotext-inputs-container input[type="text"] {
    width: 100%;
  }
  
  .adp--twotext-inputs-container button[type="button"] {
    width: 100%;
  }
}

/* Additional utility classes for customization */
.adp--twotext-inputs-container.adp--compact {
  gap: 4px;
}

.adp--twotext-inputs-container.adp--compact input[type="text"] {
  height: calc(var(--twotext-input-font-size) + calc(var(--twotext-input-spacing) * 1.25));
  padding: calc(var(--twotext-input-spacing) / 3);
}

.adp--twotext-inputs-container.adp--compact button[type="button"] {
  height: calc(var(--twotext-input-font-size) + calc(var(--twotext-input-spacing) * 1.25));
  padding: calc(var(--twotext-input-spacing) / 3) calc(var(--twotext-input-spacing) / 2);
}

.adp--twotext-inputs-container.adp--large {
  gap: 12px;
}

.adp--twotext-inputs-container.adp--large input[type="text"] {
  height: calc(var(--twotext-input-font-size) + calc(var(--twotext-input-spacing) * 2));
  padding: calc(var(--twotext-input-spacing) / 1.5);
  font-size: calc(var(--twotext-input-font-size) + 2px);
}

.adp--twotext-inputs-container.adp--large button[type="button"] {
  height: calc(var(--twotext-input-font-size) + calc(var(--twotext-input-spacing) * 2));
  padding: calc(var(--twotext-input-spacing) / 1.5) calc(var(--twotext-input-spacing));
  font-size: calc(var(--twotext-input-font-size) + 2px);
}