#od-search-wrapper {
    display: flex;
    flex-direction: row;
    gap: 20px;

    .select-origen,
    .select-destino {
        width: 30%;
    }
    .od-search-input {
        padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
        border: 1px solid var(--black, #000);
        border-radius: 3px;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        width: 100%;
        color: var(--black, #000);
        height: 40px;
        box-sizing: border-box;
        margin-bottom: 1rem;
    }

    .od-search-input::placeholder {
        color: var(--grey-500, #999);
        font-style: italic;
    }

    .od-search-label {
        display: block;
        font-weight: 600;
        margin-bottom: 0.25rem;
        font-size: 14px;
        color: var(--black, #000);
    }

    .od-search-input:disabled {
        background-color: var(--grey-100, #f5f5f5);
        color: var(--grey-600, #666);
        cursor: not-allowed;
    }

    .od-search-input:focus {
        border-color: var(--blue-500, #007bff);
        outline: none;
        box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
    }
}

#od-search-results {
    list-style: none;
    padding-left: 0;
    max-height: 240px;
    overflow-y: auto;

    li {
        display: block;
        font-family: 'Open Sans', serif;

        a {
            cursor: pointer;
            text-decoration: none;
            color: rgb(51, 51, 51);
        }

        &.is-active a,
        &.is-suggestion-active a {
            background-color: var(--grey-100, #f5f5f5);
        }
    }
}

.od-result-card {
  background: var(--primary-light);
  padding: var(--spacing-lg);
  border-left: 4px solid var(--primary-base);

  h4 {
    margin-top: 0;
    margin-bottom: var(--spacing-base);
    color: var(--heading-dark);
    font-size: 1.125rem;
    font-family: 'Inter', sans-serif;
  }
}